/* PR4.17 #266 Phase 4 — Redesign-Restyle für die relocateten Legacy-Formular-Modals.
   HAND-GEPFLEGT (im Gegensatz zu style-redesign.css, das aus dem Design-Bundle GENERIERT
   wird — Generator nicht re-runbar). Präzedenz: public/fonts.css.

   Die statischen Formular-Modals (opportunity/employee/event/customer-history/admin-*)
   werden im Redesign per relocateModalForRedesign() nach #app-crm.crm verschoben. Dort
   greifen diese Regeln und gleichen die Legacy-Chrome (.modal-overlay/.modal-header/
   -title/-body/-footer/.modal-close) an den Executive-Look aus style-redesign.css an.

   Scoping: Alles unter `.crm .modal-overlay …`. NUR die relocateten Legacy-Modals tragen
   `.modal-overlay` (die konvertierten Overlay-Dialoge nutzen `.modal-veil`), daher trifft
   das exakt diese Container. Die Ancestor-Selektoren (Spezifität ≥ 0,3,0) schlagen die
   generierten `.crm .modal-body`/`.crm .modal`-Regeln (0,2,0) dort, wo Namen kollidieren.
   Alle Farben über Theme-Tokens → Light+Dark automatisch (der Veil ist bewusst in beiden
   Themes identisch, analog `.crm .modal-veil`). */

/* Veil — wie `.crm .modal-veil` (display bleibt vom `.open`-Toggle gesteuert). */
.crm .modal-overlay {
  background: rgba(15, 20, 30, .42);
  backdrop-filter: none;
  z-index: 90;
  padding: 24px;
}

/* Box — die generierte `.crm .modal` liefert bereits Radius/Border/Shadow/Surface;
   hier nur die Legacy-Animation auf die Redesign-Kurve ziehen. */
.crm .modal-overlay .modal {
  animation: cmdkIn .2s cubic-bezier(.2, .7, .3, 1);
}

/* Header — wie `.crm .modal-head`. */
.crm .modal-overlay .modal-header {
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}

.crm .modal-overlay .modal-title {
  font-family: var(--f-cond);
  font-size: var(--fs-title);
  font-weight: 600;
}

/* Body — die generierte `.crm .modal-body` (0,2,0) schlägt das Legacy-`.modal-body`
   (0,1,0) und setzt selbst kein Padding → 0. Hier den Innenabstand wiederherstellen
   (Formulare brauchen ihn). */
.crm .modal-overlay .modal-body {
  padding: 22px 24px;
  flex: 1;
  overflow-y: auto;
}

/* Footer — wie `.crm .modal-foot`. */
.crm .modal-overlay .modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface-2);
}

/* Legacy-Close-Button (×) an den Redesign-`.icon-btn`-Look angleichen. */
.crm .modal-overlay .modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.crm .modal-overlay .modal-close:hover {
  background: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text-1);
}

/* ============================================================
   PR1.127 (#278) — Drag&Drop-Staffing (Redesign-Shell)
   Additiv, `.crm`-gescopt. Team-Card (.staffing-dropzone) ist Drop-Ziel für
   Kandidaten-Drag; Highlight beim Drüberziehen (.staffing-dropzone-over) via
   staffing-dnd.js (Maus + Touch). Klick-Zuweisung bleibt unberührt.
   Farben über Theme-Tokens → Light+Dark automatisch, WCAG-AA (blauer Rahmen
   + dezenter Tint auf Surface, kein reiner Farb-Träger für Information). */

/* Ruhezustand: dezent Drop-fähig signalisieren, ohne die Card-Optik zu stören. */
.crm .staffing-dropzone {
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

/* Highlight beim Drüberziehen: kräftiger adesso-Blau-Rahmen + Tint-Fläche. */
.crm .staffing-dropzone.staffing-dropzone-over {
  border-color: var(--ad-blue);
  box-shadow: 0 0 0 2px var(--ad-blue) inset;
  background: color-mix(in srgb, var(--ad-blue) 8%, transparent);
}

/* Card, die gerade gezogen wird (Touch-Polyfill setzt .dragging). */
.crm .staffing-dropzone [data-staffing-drag].dragging,
.crm [data-staffing-drag].dragging {
  opacity: .5;
}

/* „Verfügbare Kandidaten"-Sektion im Team-Tab — Drag-Quelle für die Dropzone. */
.crm .staffing-candidates {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ad-blue) 4%, transparent);
}

.crm .staffing-candidates .sc-head {
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 8px;
}

.crm .staffing-candidates .sc-head .meta {
  font-weight: 400;
  color: var(--text-3);
  margin-left: 6px;
}

.crm .staffing-candidates .sc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Einzelne Kandidaten-Chip: kompakt, greifbar (grab-Cursor). */
.crm .staffing-candidate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface-1, var(--bg-surface-2));
  color: var(--text-1);
  font-size: var(--fs-ui);
  cursor: grab;
  user-select: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.crm .staffing-candidate:hover {
  border-color: var(--ad-blue);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.crm .staffing-candidate:active { cursor: grabbing; }

.crm .staffing-candidate .sc-name {
  font-weight: 500;
  white-space: nowrap;
}

/* Tastatur-Fokus sichtbar (WCAG 2.4.7) — falls die Chips fokussierbar gemacht werden. */
.crm .staffing-candidate:focus-visible {
  outline: 2px solid var(--ad-blue);
  outline-offset: 2px;
}

/* ============================================================
   PR1.197 (#356) — Formularfelder in den verschobenen Modals
   ============================================================
   BEFUND aus der lokalen Sichtpruefung am 07.08.2026 (Pruefseite
   test/ui-harness/opp-mask.html, beide Shells nebeneinander):

   In der Redesign-Shell waren die Eingabefelder aller hierher verschobenen
   Legacy-Modals praktisch unlesbar — dunkler Text auf dunklem Grund. Die Ursache
   liegt in zwei Regeln, die sich nie begegnet sind: style.css setzt fuer jedes
   Formularfeld das globale `--bg-input` (dunkel), waehrend der .crm-Scope
   `--text-1` auf eine dunkle Schriftfarbe umstellt, weil das Redesign hell ist.
   Solange die Modals unter <body> hingen, passte beides zusammen; seit
   relocateModalForRedesign() sie nach #app-crm.crm verschiebt, nicht mehr.

   BESTANDSFEHLER, nicht von PR1.197 verursacht — die Felder tragen dieselben
   Klassen wie vorher. Er faellt hier auf, weil PR1.197 der erste Anlass ist, die
   Anlage-Maske im Redesign wirklich anzusehen. Behoben statt gemeldet, weil ein
   Feld, dessen Inhalt man nicht lesen kann, kein Produktionsreife-Niveau ist
   (Konvention 20) und die Maske ohne das ihr eigenes Akzeptanzkriterium reisst.

   Bewusst NICHT auf #opp-modal eingeschraenkt: dieselbe Datei ist ausdruecklich
   fuer alle verschobenen Formular-Modals zustaendig (Kopfkommentar), und eine
   Maske zu reparieren waehrend die Nachbarn kaputt bleiben, waere die schlechtere
   Haelfte der Loesung. */
.crm .modal-overlay .modal input[type="text"],
.crm .modal-overlay .modal input[type="number"],
.crm .modal-overlay .modal input[type="date"],
.crm .modal-overlay .modal input[type="url"],
.crm .modal-overlay .modal input[type="email"],
.crm .modal-overlay .modal input[type="password"],
/* PR1.237 #410 — `search` fehlte in dieser Liste. Aufgefallen am Suchfeld der
   Mitarbeiter-Auswahl (modals/project-staff-picker.js), gilt aber fuer jedes kuenftige
   Suchfeld in einem verschobenen Modal: ohne den Selektor bleibt es auf den
   Browser-Standardfarben und leuchtet hell aus dem Dialog heraus. Dieselbe Begruendung
   wie im Kommentar oben — die Nachbarn nicht kaputt lassen. */
.crm .modal-overlay .modal input[type="search"],
.crm .modal-overlay .modal select,
.crm .modal-overlay .modal textarea {
  background: var(--bg-surface);
  color: var(--text-1);
  border-color: var(--border);
}

.crm .modal-overlay .modal input::placeholder,
.crm .modal-overlay .modal textarea::placeholder {
  color: var(--text-3);
}

/* Die Beschriftungen kamen aus demselben Grund zu blass heraus. */
.crm .modal-overlay .modal .form-group > label {
  color: var(--text-2);
}

/* PR1.198 #357 — Der ⓘ steht neben dem Label in einer `.fh-row`. Damit ist das
   Label kein Direktkind der `.form-group` mehr und die Regel oben greift nicht
   mehr — die Beschriftung waere wieder zu blass. */
.crm .modal-overlay .modal .form-group .fh-row > label {
  color: var(--text-2);
}

/* ============================================================
   PR1.205 (#364) — Gesperrter Ausloeser im Redesign
   ============================================================
   BEFUND aus der lokalen Sichtpruefung am 10.08.2026 (Pruefseite
   test/ui-harness/opp-mask.html, beide Shells nebeneinander):

   „Vorschlaege erzeugen" startet gesperrt, solange zu wenig Text im Feld steht.
   In der klassischen Shell ist das sichtbar; im Redesign stand der Knopf in
   vollem adesso-Blau und sah damit aus wie jeder andere Primaer-Knopf — er lud
   zu einem Klick ein, der nichts tut. Die Regel in style.css verliert dort gegen
   den `.crm .btn-primary`-Scope, der spaeter geladen wird.

   Repariert in dieser Datei statt mit einer !important-Regel in style.css: hier
   liegen die `.crm`-Korrekturen der verschobenen Modals, und der Zustand braucht
   ohnehin Redesign-Tokens statt der Legacy-Flaechenleiter. */
.crm .opp-intake-run:disabled {
  background: var(--bg-surface-2);
  color: var(--text-3);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}

.crm .opp-intake-run:disabled:hover {
  background: var(--bg-surface-2);
  transform: none;
}

/* PR1.205 (#364) — Zweitakzent der Vorschlags-Kennzeichnung.
   Die klassische Shell markiert Vorschlaege in ihrem Zweitakzent (Cyan). Das
   Redesign fuehrt dafuer adesso-Violett — die Shell-Trennungs-Regel aus DESIGN.md
   verbietet, den Legacy-Wert einfach durchzureichen. Nicht adesso-Blau: das ist
   die Interaktivfarbe und bleibt der Interaktion vorbehalten (Ein-Zweck-Regel). */
.crm { --suggest-accent: var(--ad-violet); }

/* ============================================================
   PR1.359 #573 — Meldefenster „Status melden" im Redesign
   ============================================================
   Das Fenster ist EINS fuer beide Shells (modals/status-report-modal.js); Geruest und
   Abstaende stehen in style.css (.srm-*). Hier nur die Farben auf die Redesign-Tokens,
   damit kein Alt-Cyan/-Gruen in der neuen Shell aufblitzt (Konvention 20, „ein Look").
   Ampel-Marker in den -700-Stufen, gewaehlter Knopf mit Tint + Schrift in -900. */
.crm .modal-overlay .srm-row { border-color: var(--border); border-radius: var(--r-lg); }
.crm .modal-overlay .srm-row--missing,
.crm .modal-overlay .srm-text[aria-invalid="true"] { border-color: var(--ad-red-700); }
.crm .modal-overlay .srm-color { border-color: var(--border-strong); color: var(--text-2); }
.crm .modal-overlay .srm-color:hover { background: var(--bg-hover); }
.crm .modal-overlay .srm-color:focus-visible,
.crm .modal-overlay .srm-text:focus-visible { outline-color: var(--focus); }
.crm .modal-overlay .srm-color-ok .srm-pip { background: var(--ad-green-700); }
.crm .modal-overlay .srm-color-warn .srm-pip { background: var(--ad-orange-700); }
.crm .modal-overlay .srm-color-bad .srm-pip { background: var(--ad-red-700); }
.crm .modal-overlay .srm-color-ok[aria-checked="true"]   { background: var(--tint-green); color: var(--ad-green-900);  border-color: var(--ad-green-700); }
.crm .modal-overlay .srm-color-warn[aria-checked="true"] { background: var(--tint-warn);  color: var(--ad-orange-900); border-color: var(--ad-orange-700); }
.crm .modal-overlay .srm-color-bad[aria-checked="true"]  { background: var(--tint-red);   color: var(--ad-red-700);    border-color: var(--ad-red-700); }
.crm.dark .modal-overlay .srm-color-ok[aria-checked="true"],   html[data-theme="dark"] .crm .modal-overlay .srm-color-ok[aria-checked="true"]   { color: var(--ad-green); }
.crm.dark .modal-overlay .srm-color-warn[aria-checked="true"], html[data-theme="dark"] .crm .modal-overlay .srm-color-warn[aria-checked="true"] { color: var(--ad-orange); }
.crm.dark .modal-overlay .srm-color-bad[aria-checked="true"],  html[data-theme="dark"] .crm .modal-overlay .srm-color-bad[aria-checked="true"]  { color: var(--ad-red-300); }
.crm .modal-overlay .srm-error { color: var(--ad-red-700); background: var(--tint-red); border-color: color-mix(in srgb, var(--ad-red-700) 45%, transparent); }
.crm.dark .modal-overlay .srm-error, html[data-theme="dark"] .crm .modal-overlay .srm-error { color: var(--ad-red-300); }
.crm .modal-overlay .srm-confirm { background: var(--tint-warn); border-top-color: var(--border); }
.crm .modal-overlay .srm-confirm-text { color: var(--text-1); }
.crm .modal-overlay .srm-hint,
.crm .modal-overlay .srm-sub,
.crm .modal-overlay .srm-last,
.crm .modal-overlay .srm-legend { color: var(--text-3); }
.crm .modal-overlay .srm-hint { color: var(--text-2); }
.crm .modal-overlay .srm-dim { color: var(--text-1); }
/* PR1.479 #737 — Leitfragen, „Wie zuletzt", Vorschau Projektstatus: Redesign-Tokens. */
.crm .modal-overlay .srm-legend,
.crm .modal-overlay .srm-guide,
.crm .modal-overlay .srm-text--taken { background: var(--bg-surface-2, var(--bg-hover)); }
.crm .modal-overlay .srm-guide { color: var(--text-2); border-radius: var(--r-sm); }
.crm .modal-overlay .srm-guide-q,
.crm .modal-overlay .srm-dim-col { color: var(--text-1); }
.crm .modal-overlay .srm-pip-ok { background: var(--ad-green-700); }
.crm .modal-overlay .srm-pip-warn { background: var(--ad-orange-700); }
.crm .modal-overlay .srm-pip-bad { background: var(--ad-red-700); }
.crm .modal-overlay .srm-same { border-color: var(--border-strong); color: var(--accent-text, var(--ad-blue-700)); border-radius: var(--r-md); }
.crm .modal-overlay .srm-same[aria-pressed="true"] { background: var(--tint-blue); border-color: var(--ad-blue); }
.crm .modal-overlay .srm-same:focus-visible { outline-color: var(--focus); }
.crm .modal-overlay .srm-kbd { border-color: var(--border-strong); color: var(--text-3); }
.crm .modal-overlay .srm-row-error { color: var(--ad-red-700); }
.crm.dark .modal-overlay .srm-row-error, html[data-theme="dark"] .crm .modal-overlay .srm-row-error { color: var(--ad-red-300); }
.crm .modal-overlay .srm-status-ok { background: var(--tint-green); color: var(--ad-green-900); }
.crm .modal-overlay .srm-status-warn { background: var(--tint-warn); color: var(--ad-orange-900); }
.crm .modal-overlay .srm-status-bad { background: var(--tint-red); color: var(--ad-red-700); }
.crm.dark .modal-overlay .srm-status-ok, html[data-theme="dark"] .crm .modal-overlay .srm-status-ok { color: var(--ad-green); }
.crm.dark .modal-overlay .srm-status-warn, html[data-theme="dark"] .crm .modal-overlay .srm-status-warn { color: var(--ad-orange); }
.crm.dark .modal-overlay .srm-status-bad, html[data-theme="dark"] .crm .modal-overlay .srm-status-bad { color: var(--ad-red-300); }
/* PR1.361 #575 — Fenster „Monitoring abschalten": nur Farben, Abstaende in style.css. */
.crm .modal-overlay .mof-label { color: var(--text-1); }
.crm .modal-overlay .mof-req { color: var(--text-3); }
/* PR1.560 #842 / PR1.766 #1081 — Konflikt-Dialog nach V16: Farben und Spezifitaet gegen die
   generischen `.crm .modal-overlay .modal*`-Regeln; Abstaende in style.css. Werte aus dem
   Prototyp (vorlive-05-11/masken-detail.html + ux-audit-30-10/audit.css): Gruen = „Es geht nichts
   verloren“ / neu, Ocker = geaendert. */
.crm {
  --scd-ok-surface: #E8F4DE;
  --scd-ok-ink: #24520D;
  --scd-ok-text: #2E7D0F;
}
.crm.dark, html[data-theme="dark"] .crm {
  --scd-ok-surface: #1E3313;
  --scd-ok-ink: #BFE3A3;
  --scd-ok-text: #8FD16A;
}
.crm .modal-overlay .scd-modal { width: min(880px, calc(100vw - 32px)); max-width: none; max-height: 90vh;
  border-color: var(--border); border-radius: 12px; box-shadow: var(--shadow-3); }
.crm .modal-overlay .scd-body { padding: 12px 22px 20px; }
.crm .modal-overlay .scd-title { font-family: var(--f-sans); color: var(--text-1); }
.crm .modal-overlay .scd-entry-name { font-family: var(--f-sans); color: var(--text-1); }
.crm .modal-overlay .scd-sub,
.crm .modal-overlay .scd-empty,
.crm .modal-overlay .scd-status,
.crm .modal-overlay .scd-progress,
.crm .modal-overlay .scd-choice,
.crm .modal-overlay .scd-close { color: var(--text-2); }
.crm .modal-overlay .scd-entry-meta,
.crm .modal-overlay .scd-col-head,
.crm .modal-overlay .scd-group-label,
.crm .modal-overlay .scd-row-sub,
.crm .modal-overlay .scd-rest,
.crm .modal-overlay .scd-row-empty,
.crm .modal-overlay .scd-row s,
.crm .modal-overlay .scd-box s { color: var(--text-3); }
.crm .modal-overlay .scd-close:hover { background: var(--bg-hover); }
.crm .modal-overlay .scd-note { background: var(--scd-ok-surface); color: var(--scd-ok-ink); }
.crm .modal-overlay .scd-note strong,
.crm .modal-overlay .scd-progress strong { color: var(--text-1); }
.crm .modal-overlay .scd-entry,
.crm .modal-overlay .scd-box,
.crm .modal-overlay .scd-foot,
.crm .modal-overlay .scd-row-logo,
.crm .modal-overlay .scd-entry-logo,
.crm .modal-overlay .scd-choice + .scd-choice { border-color: var(--border); }
.crm .modal-overlay .scd-row-empty,
.crm .modal-overlay .scd-choices { border-color: var(--border-strong); }
.crm .modal-overlay .scd-row-logo,
.crm .modal-overlay .scd-entry-logo { background-color: var(--bg-surface); }
.crm .modal-overlay .scd-diff-pill { background: var(--ocker-surface); color: var(--ocker-text); }
.crm .modal-overlay .scd-row.is-changed,
.crm .modal-overlay .scd-box.is-changed { background: var(--ocker-surface); }
.crm .modal-overlay .scd-row.is-new { background: var(--scd-ok-surface); }
.crm .modal-overlay .scd-row-tag { background: var(--scd-ok-surface); color: var(--scd-ok-text); }
.crm .modal-overlay .scd-choices { background: var(--bg-surface); }
.crm .modal-overlay .scd-choice { background: var(--bg-surface); border-radius: 0; }
.crm .modal-overlay .scd-choice:hover:not(:disabled):not(.is-on) { background: var(--bg-hover); }
.crm .modal-overlay .scd-choice.is-on { background: var(--tint-blue); color: var(--ad-blue-700); }
.crm.dark .modal-overlay .scd-choice.is-on, html[data-theme="dark"] .crm .modal-overlay .scd-choice.is-on { color: var(--ad-blue-300); }
.crm .modal-overlay.scd .scd-choices .scd-choice:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.crm .modal-overlay .scd-foot { background: var(--bg-surface); }
.crm .modal-overlay.scd .scd-foot .btn { height: auto; min-height: 0; padding: 7px 12px; border-radius: 8px; box-shadow: none;
  font-size: var(--fs-meta); font-weight: 600; line-height: 1.45; }
.crm .modal-overlay.scd .scd-foot .scd-later { border-color: transparent; background: none; color: var(--text-2); }
.crm .modal-overlay .scd-cancel[hidden] { display: none; }
.crm .modal-overlay .scd-error { color: var(--ad-red-700); background: var(--tint-red); border-radius: var(--r-sm); }
.crm.dark .modal-overlay .scd-error, html[data-theme="dark"] .crm .modal-overlay .scd-error { color: var(--ad-red-300); }
.crm .modal-overlay.scd .btn:focus-visible,
.crm .modal-overlay .scd-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* PR1.391 #618 — Warn-Hinweistext in Masken (Projektname-Echo, Projektleitung): --warning ist
   hier --ad-orange-700 (3:1) — fuer kleinen Text zu blass. Textstufe -900 hell, Grundton dunkel. */
.crm .modal-overlay .pflichtfeld-warn-text { color: var(--ad-orange-900); }
.crm.dark .modal-overlay .pflichtfeld-warn-text, html[data-theme="dark"] .crm .modal-overlay .pflichtfeld-warn-text { color: var(--ad-orange); }

/* PR1.438 (#677) — Native <select> outside the relocated modals (role cards, Jira dialog, …)
   kept the browser default and showed dark text on a dark field in the dark theme
   (open finding from Evidenzen, PR1.2xx). Zero specificity: any component rule still wins. */
.crm :where(select) {
  background-color: var(--bg-surface);
  color: var(--text-1);
}
.crm :where(select option, select optgroup) {
  background-color: var(--bg-surface);
  color: var(--text-1);
}

/* PR1.513 (#779) — Kundenmaske in der neuen Ansicht. Layout kommt aus style.css
   (ein Markup, beide Shells); hier nur Flaechen, Linien, Schrift und Warnton
   der neuen Ansicht. */
.crm .modal-overlay .acc-logo-box { background: var(--bg-surface); border-color: var(--border); border-radius: .9rem; }
.crm .modal-overlay .acc-logo-menu { background: var(--bg-surface); border-color: var(--border); box-shadow: 0 .75rem 1.9rem rgba(14, 23, 38, .16); border-radius: .75rem; }
.crm .modal-overlay .acc-dup { background: var(--tint-warn); }
.crm .modal-overlay .acc-dup svg { color: var(--ad-orange-700); }
.crm .modal-overlay .acc-logo-origin.acc-logo-status-err { color: var(--ad-red-700); }
.crm .modal-overlay .acc-logo-origin.acc-logo-status-ok { color: var(--ad-green-700); }
.crm .modal-overlay .acc-create-opp { border-color: var(--border-strong); }
/* PR1.582 — Kunden-Maske im Panel (E3): Werte des Redesigns (helle Fläche als Standard). */
#app-crm.crm #account-modal .fw-panel > .fw-sec--line .fw-sec-title { font-size: var(--fs-ui); }
#app-crm.crm #account-modal {
  --mp-ki-bg: #FFEDE0;
  --mp-ki-border: #F5B68A;
  --mp-ki-text: #A3460A;
  --mp-ki-hover: #FFE1CC;
  --mp-link: var(--ad-blue);
  --mp-focus: var(--ad-blue);
  --acc-save-quiet-bg: #8FC1EC;
  --acc-save-quiet-text: #FFFFFF;
}
#app-crm.crm.dark #account-modal,
html[data-theme="dark"] #app-crm.crm #account-modal {
  --mp-ki-bg: #3A2312;
  --mp-ki-border: #9A5420;
  --mp-ki-text: #F5A86A;
  --mp-ki-hover: #4A2C16;
  --acc-save-quiet-bg: #2B4F73;
  --acc-save-quiet-text: #C9DDF0;
}

/* PR1.512 #778 — Abschnitte mit Frage-Marke (Raster und Abstaende in style.css). */
.crm .fw-sec { background: var(--bg-surface); border-color: var(--border-soft, var(--border)); border-radius: var(--r-md); }
.crm .fw-sec-ask { background: var(--tint-blue); color: var(--ad-blue); font-family: var(--f-cond); }
.crm.dark .fw-sec-ask, html[data-theme="dark"] .crm .fw-sec-ask { color: var(--text-1); }
.crm .fw-sec-title { font-family: var(--f-cond); color: var(--text-1); }
.crm .fw-sec-hint { color: var(--text-3); }
.crm .fw-sec-reset { color: var(--text-3); }
.crm .fw-sec-reset-link { color: var(--ad-blue); }
.crm.dark .fw-sec-reset-link, html[data-theme="dark"] .crm .fw-sec-reset-link { color: var(--ad-blue-300, var(--text-1)); }
.crm .fw-sec-reset:focus-visible { outline-color: var(--focus); }
.crm .fw-step-summary { color: var(--text-2); font-family: var(--f-mono); font-size: var(--fs-label); }

/* ============================================================
 * PR1.578 — Masken-Panel (Redesign). Gemeinsame Hülle für große Masken: Panel von rechts
 * über zwei Drittel der Fläche rechts der Seitenleiste, Liste und Seitenleiste bleiben links
 * sichtbar. Die Projekt-Maske zieht als erste ein (project-modal.js, mask-panel.js).
 *
 * Lage: `--mp-left` und `--mp-width` setzt mask-panel.js positionPanel() aus der Fläche
 * `.app-canvas`; der Rückfall unten gilt nur ohne JS-Messung. Bewegung: Öffnen 240 ms,
 * Schließen per Klick 160 ms (`--mp-open-ms`/`--mp-close-ms`), Esc und „Bewegung reduzieren"
 * ohne Bewegung (`.is-instant`, Media-Query).
 * ============================================================ */

/* Ocker = „da fehlt etwas / Vorsicht", kein Alarm (Farbregel 30.10.). Namen und Werte wie im
   Entwurf der Farbregel; wer zuerst gemergt wird, legt sie an, der zweite übernimmt sie. */
.crm {
  --ocker-text: #8A5200;
  --ocker-surface: #FFF1D1;
  --ocker-fill: #E0A100;
  --ocker-on-surface: #5C3800;
}
.crm.dark, html[data-theme="dark"] .crm {
  --ocker-text: #E8B04A;
  --ocker-surface: #3A2A0C;
  --ocker-fill: #E0A100;
  --ocker-on-surface: #F5D58C;
}

/* Kein eigenes `display` hier: Sichtbarkeit steuert allein `.open` (style.css). Opp- und
   Mitarbeiter-Panel bleiben nach dem Schließen im DOM; ein festes `display: flex` ließ sie
   unsichtbar (opacity 0) über der Seite liegen und jeden Klick schlucken. Ohne Übergang wie
   klassisch: Schließen-Bewegung kommt aus `.is-closing`, Esc schließt sofort. */
.crm .modal-overlay.mask-panel-overlay {
  position: fixed;
  inset: 0 0 0 var(--mp-left, 0px);
  padding: 0;
  transition: none;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(15, 20, 30, .42);
  animation: mpScrimIn var(--mp-open-ms, 240ms) var(--ease-out, ease-out) both;
}
.crm .mask-panel-overlay .modal.mask-panel {
  width: var(--mp-width, 66.667%);
  max-width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(15, 20, 30, .18);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  animation: mpSlideIn var(--mp-open-ms, 240ms) var(--ease-drawer, cubic-bezier(.32, .72, 0, 1)) both;
}
@keyframes mpScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpSlideIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes mpScrimOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mpSlideOut { from { transform: none; } to { transform: translateX(100%); } }
.crm .mask-panel-overlay.is-closing {
  pointer-events: none;
  animation: mpScrimOut var(--mp-close-ms, 160ms) ease-in both;
}
.crm .mask-panel-overlay.is-closing .modal.mask-panel {
  animation: mpSlideOut var(--mp-close-ms, 160ms) ease-in both;
}
.crm .mask-panel-overlay.is-instant,
.crm .mask-panel-overlay.is-instant .modal.mask-panel { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .crm .modal-overlay.mask-panel-overlay,
  .crm .mask-panel-overlay .modal.mask-panel,
  .crm .mask-panel-overlay.is-closing,
  .crm .mask-panel-overlay.is-closing .modal.mask-panel { animation: none; }
}
@media (max-width: 959px) {
  .crm .modal-overlay.mask-panel-overlay { inset: 0; }
  .crm .mask-panel-overlay .modal.mask-panel { width: 100%; border-left: 0; }
}

/* Das hidden-Attribut gewinnt immer — `.btn` und Flex-Zeilen setzen sonst ihr display darüber. */
.crm .mask-panel [hidden] { display: none !important; }

/* Kopf: Titel · Stempel · Menü · Schließen */
.crm .mask-panel .mp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
}
.crm .mask-panel .mp-title { flex: 1; min-width: 0; }
.crm .mask-panel .mp-head-actions { display: flex; align-items: center; gap: 8px; }
.crm .mask-panel .mp-stamp { font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.crm .mask-panel .mp-stamp:empty { display: none; }
.crm .mask-panel .mp-stamp[data-tone="warn"] { color: var(--ocker-text); font-weight: 600; }

/* Menü „⋯" */
.crm .mask-panel .mp-menu { position: relative; }
.crm .mask-panel .mp-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 220px;
  padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(15, 20, 30, .16);
  z-index: 5;
}
.crm .mask-panel .mp-menu-list[hidden] { display: none; }
.crm .mask-panel .mp-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}
.crm .mask-panel .mp-menu-item:hover,
.crm .mask-panel .mp-menu-item:focus-visible { background: var(--bg-surface-2); outline: none; }
.crm .mask-panel .mp-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.crm .mask-panel .mp-menu-item.is-danger { color: var(--danger); }

/* Körper + Reiter oben */
.crm .mask-panel .mp-body { flex: 1; overflow-y: auto; padding: 0 24px 24px; }
.crm .mask-panel .fw.fw--tabs { display: block; grid-template-columns: none; }
.crm .mask-panel .fw-rail--tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: row;
  gap: 4px;
  margin: 0 -24px;
  padding: 0 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.crm .mask-panel .fw-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-family: var(--f-cond);
  cursor: pointer;
}
.crm .mask-panel .fw-tab:hover { color: var(--text-1); }
.crm .mask-panel .fw-tab.active { color: var(--primary-text, var(--primary)); border-bottom-color: var(--primary-text, var(--primary)); }
.crm .mask-panel .fw-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.crm .mask-panel .fw-tab .fw-step-mark svg { width: 1em; height: 1em; color: var(--success, var(--primary)); }
.crm .mask-panel .fw--tabs .fw-main { max-width: 52rem; margin-inline: 0; padding-top: 8px; }
.crm .mask-panel .fw-rail--tabs .fw-tab { width: auto; flex: 0 0 auto; display: inline-flex; border-radius: 0; }
.crm .mask-panel .fw--tabs .fw-panel-title,
.crm .mask-panel .fw--tabs .fw-panel-lead { display: none; }

/* Eine Ebene: Überschrift mit Linie statt Kasten mit Frage-Marke */
/* Eine Ebene: kein Kasten um den Abschnitt, nur Überschrift mit Linie */
.crm .mask-panel .fw-sec--line {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.crm .mask-panel .fw-sec-head--line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.crm .mask-panel .fw-sec-head--line .fw-sec-title { margin: 0; font-size: var(--fs-ui); font-weight: 600; }
.crm .mask-panel .fw-sec-note { color: var(--text-3); font-size: var(--fs-label); }
.crm .mask-panel .fw-sec-cont { padding-top: 10px; }
.crm .mask-panel .mp-glance { margin: 12px 0 0; color: var(--text-2); font-size: var(--fs-meta); }
.crm .mask-panel .mp-glance:empty { display: none; }

/* Fußzeile: Hinweise links, Aktionen rechts; Rückfrage und Fehler ersetzen sie kurz */
.crm .mask-panel .mp-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface-2);
}
.crm .mask-panel .mp-foot-main { flex: 1; min-width: 0; }
.crm .mask-panel .mp-foot-note { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: var(--fs-meta); }
.crm .mask-panel .mp-undo {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--primary-text, var(--primary));
  text-decoration: underline;
  cursor: pointer;
}
.crm .mask-panel .mp-undo[hidden] { display: none; }
.crm .mask-panel .mp-create-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.crm .mask-panel .mp-create-bar .opp-create-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.crm .mask-panel .pm-gaps { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; flex: 1; min-width: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .mask-panel .pm-gaps[hidden] { display: none; }
.crm .mask-panel .pm-gaps .opp-gaps-head { display: inline; margin: 0; }
.crm .mask-panel .pm-gaps .opp-gaps-head strong { color: var(--text-1); font-weight: 700; }
.crm .mask-panel .pm-gaps .opp-gaps-list { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.crm .mask-panel .pm-gaps .opp-gaps-list li { margin: 0; padding: 0; }
.crm .mask-panel .pm-gaps .opp-gaps-list li + li::before { content: ", "; white-space: pre; color: var(--text-3); }
.crm .mask-panel .pm-gaps-jump {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--primary-text, var(--primary));
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.crm .mask-panel .pm-gaps-jump:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Speichern-Knopf des Edit-Guards: blass ohne Änderung, „Rückgängig" macht die Fußzeile selbst */
.crm .mask-panel .edit-guard-undo-btn { display: none !important; }
/* Ohne Änderung blass, aber lesbar: neutrale Fläche statt Deckkraft (Kontrast AA). */
.crm .mask-panel:not(.has-changes) .edit-guard-save-btn {
  background: var(--bg-surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* Rückfrage beim Schließen (Ocker) und Speichern-Fehler */
.crm .mask-panel .mp-ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--ocker-fill);
  border-radius: var(--r-md);
  background: var(--ocker-surface);
  color: var(--ocker-on-surface);
}
.crm .mask-panel .mp-ask[hidden] { display: none; }
.crm .mask-panel .mp-ask-text { font-weight: 600; }
.crm .mask-panel .mp-ask-actions { display: flex; gap: 8px; }
.crm .mask-panel.is-asking .mp-foot > :not(.mp-ask) { display: none; }
.crm .mask-panel .mp-error {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--danger);
  font-size: var(--fs-meta);
}
.crm .mask-panel .mp-error[hidden] { display: none; }

/* Nachzug PR1.578 — Hinweise bei offenem Panel. Der Stapel stand „oben Mitte" (PR1.637/BF-109)
   und lag damit über Titel und Reitern des Panels. Bei offenem Panel steht er unten links im
   freien Drittel (Seitenleiste + Liste): dort liegt weder Kopf noch Fuß des Panels. Unter 960 px
   füllt das Panel die ganze Breite, dann steht er mittig über der Fußzeile. Seiten ohne Panel
   behalten die Regeln aus style.css unverändert. */
html body:has(.modal-overlay.mask-panel-overlay.open:not(.is-closing)) > #toast-stack {
  top: auto;
  bottom: 22px;
  left: 16px;
  transform: none;
  align-items: flex-start;
  max-width: calc(33.333vw - 32px);
}
@media (max-width: 959px) {
  html body:has(.modal-overlay.mask-panel-overlay.open:not(.is-closing)) > #toast-stack {
    bottom: 104px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    max-width: calc(100vw - 32px);
  }
}

/* Der Warnhinweis „Mitarbeiter ohne Competence Center" klebt oben über allem (z 100) und
   lag damit genau über dem Schließen-Kreuz des Panels (z 90). Solange ein Panel offen ist,
   tritt er zurück; danach steht er wieder da. `visibility` statt `display`: nichts rutscht. */
html body:has(#app-crm .modal-overlay.mask-panel-overlay.open) > #orphaned-cc-banner {
  visibility: hidden;
}
/* BF-175 — dasselbe für die Leiste „Apollon fragen“ (z 90/93): offen tritt der Hinweis zurück,
   damit das Schließen-Kreuz frei ist; die Leiste steht nur im Dokument, solange sie offen ist. */
html body:has(aside.pythia-leiste) > #orphaned-cc-banner {
  visibility: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Panel „Eigene Auswertung“ (Redesign) — Gesicht: components/crm-dashboard-auswertung.js.
   Hülle, Kopf, Fußzeile, Rückfrage und Fehler kommen von den Masken-Panels (.mask-panel,
   .mp-*); hier steht nur, was dieses Panel zusätzlich braucht. Nur Tokens, kein !important.
   ───────────────────────────────────────────────────────────────────────────── */
.crm .crm-ausw {
  /* Gelber Lücken-Hinweis (D5 ⑤) — einmal benannt, Dunkel unten umgeschaltet. */
  --ausw-gelb-grund: #FFF4D6;
  --ausw-gelb-rand: #F1D58A;
  --ausw-gelb-text: #5C4300;
}
.crm.dark .crm-ausw, html[data-theme="dark"] .crm .crm-ausw {
  --ausw-gelb-grund: #3A3016;
  --ausw-gelb-rand: #6B5520;
  --ausw-gelb-text: #F3DFA6;
}
.crm .crm-ausw .crm-ausw-unter { margin: 0; padding: 0 24px 12px; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-meta); }
.crm .crm-ausw .mp-head { border-bottom: 0; padding-bottom: 2px; }
.crm .crm-ausw .mp-title:focus { outline: none; }
.crm .crm-ausw .crm-ausw-body { padding: 0; }

/* D5: links KI-Frage und Felder, rechts grau hinterlegt Vorschau und Abfrage (über die volle Höhe) */
.crm .crm-ausw .crm-ausw-spalten { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }
.crm .crm-ausw .crm-ausw-links { min-width: 0; padding: 14px 22px 12px; }
.crm .crm-ausw .crm-ausw-rechts { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 22px 18px; border-top: 1px solid var(--border); background: var(--bg-surface-2); }
@media (min-width: 1280px) {
  .crm .crm-ausw .crm-ausw-spalten { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .crm .crm-ausw .crm-ausw-rechts { border-top: 0; border-left: 1px solid var(--border); }
}

/* D5 ②: KI-Frage oben in Orange — Eingabe über drei Zeilen, Knopf genau so hoch */
/* D5: Fläche #FFF7F2, Rand #FFC9AD — als Mischung aus adesso-Orange und der Panelfläche (hell wie dunkel) */
.crm .crm-ausw .crm-ausw-kiblock { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ad-orange) 50%, var(--bg-surface)); border-radius: var(--r-md); background: color-mix(in srgb, var(--ad-orange) 8%, var(--bg-surface)); color: var(--text-1); }
.crm .crm-ausw .crm-ausw-ki-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--pythia-terra); font-size: var(--fs-meta); font-weight: 600; }
.crm .crm-ausw .crm-ausw-ki-h svg { width: 1.1em; height: 1.1em; }
.crm .crm-ausw .crm-ausw-ki-zeile { display: flex; align-items: stretch; gap: 9px; }
.crm .crm-ausw .crm-ausw-frage { flex: 1 1 auto; min-width: 0; height: auto; resize: none; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-meta); line-height: 20px; }
.crm .crm-ausw .crm-ausw-ki-btn { flex: 0 0 auto; align-self: stretch; max-width: 42%; height: auto; min-height: 0; padding: 0 16px; line-height: 1.25; text-align: center; border: 1px solid var(--ad-orange); border-radius: var(--r-sm); background: var(--ad-orange); color: #2B1406; font-size: var(--fs-meta); font-weight: 700; white-space: normal; }
.crm .crm-ausw .crm-ausw-ki-btn:hover:not([disabled]) { background: var(--ad-orange-700); border-color: var(--ad-orange-700); }
.crm .crm-ausw .crm-ausw-ki-btn[disabled] { opacity: .7; cursor: progress; }
.crm .crm-ausw .crm-ausw-ki-meldung { margin-top: 10px; }
.crm .crm-ausw .crm-ausw-ki-meldung:empty { display: none; }
.crm .crm-ausw .crm-ausw-ki-satz { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text-1); font-size: var(--fs-meta); line-height: 1.45; }
.crm .crm-ausw .crm-ausw-ki-satz svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--success); }
.crm .crm-ausw .crm-ausw-ki-note { margin: 2px 0 0 23px; color: var(--text-2); font-size: var(--fs-label); line-height: 1.45; }
.crm .crm-ausw .crm-ausw-ki-text { margin: 0; color: var(--text-1); font-size: var(--fs-meta); }

/* D5 ③: alle Felder auf einer Seite, paarweise nebeneinander; Überschrift ohne Zusatz */
.crm .crm-ausw .crm-ausw-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; margin-top: 2px; }
.crm .crm-ausw .crm-ausw-feld { grid-column: 1 / -1; min-width: 0; padding-top: 10px; }
.crm .crm-ausw .crm-ausw-feld.is-halb { grid-column: auto; }
.crm .crm-ausw .crm-ausw-feld-label { margin: 0 0 5px; color: var(--text-1); font-size: var(--fs-meta); font-weight: 600; line-height: 18px; }
.crm .crm-ausw .crm-ausw-feld.is-zeile { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.crm .crm-ausw .crm-ausw-feld.is-zeile .crm-ausw-feld-label { flex: 0 0 auto; margin: 0; font-weight: 400; }
.crm .crm-ausw .crm-ausw-feld.is-zeile .crm-ausw-feld-body { min-width: 0; }
.crm .crm-ausw .crm-ausw-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.crm .crm-ausw .crm-ausw-stapel { flex-direction: column; align-items: flex-start; gap: 7px; }
.crm .crm-ausw .crm-ausw-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; max-width: 100%; }
.crm .crm-ausw .crm-ausw-wort { flex: 0 0 auto; color: var(--text-1); font-size: var(--fs-meta); }
/* „[Summe] von“ und „[Hyperscaler] dann“ bleiben in einer Zeile; die Auswahl kürzt ihren Text */
.crm .crm-ausw :is([data-feld="kennzahl"], [data-feld="aufschluesseln"]) .crm-ausw-zeile { flex-wrap: nowrap; }
.crm .crm-ausw .crm-ausw-wahl .cs-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Auswahl wie D5: „Summe ⌄ [KI]“ — die KI-Marke im Feld, orange Rand */
.crm .crm-ausw .crm-ausw-wahl { position: relative; display: inline-flex; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.crm .crm-ausw .crm-ausw-wahl .cs { width: auto; min-width: 0; max-width: 100%; }
.crm .crm-ausw .crm-ausw-wahl .cs-field { height: 28px; min-height: 28px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-1); font-size: var(--fs-meta); }
.crm .crm-ausw .crm-ausw-wahl .cs-chevron { right: 9px; }
.crm .crm-ausw .crm-ausw-wahl .cs-clear { display: none; }
.crm .crm-ausw .crm-ausw-wahl.is-ki .cs-field { padding-right: 56px; border-color: color-mix(in srgb, var(--ad-orange) 50%, var(--bg-surface)); }
.crm .crm-ausw .crm-ausw-wahl.is-ki .cs-chevron { right: 34px; }
.crm .crm-ausw .crm-ausw-wahl > .crm-ausw-ki-marke { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); pointer-events: none; }
.crm .crm-ausw .crm-ausw-ki-marke { display: inline-block; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--pythia-terra) 14%, transparent); color: var(--pythia-terra); font-size: var(--fs-label); font-weight: 700; line-height: 16px; }
.crm .crm-ausw .crm-ausw-wahl > select.crm-ausw-control { width: auto; }
/* „nach Wert absteigend“: die Sortierung liest sich als Text, bleibt aber eine Auswahl */
.crm .crm-ausw .crm-ausw-text-wahl .cs-field { padding: 0 4px; border-color: transparent; background: transparent; }
.crm .crm-ausw .crm-ausw-text-wahl .cs-field:hover { border-color: var(--border); }
.crm .crm-ausw .crm-ausw-text-wahl .cs-chevron { display: none; }

.crm .crm-ausw .crm-ausw-ctl { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 5.5rem; }
.crm .crm-ausw .crm-ausw-ctl.is-check { flex: 0 0 auto; flex-direction: row; align-items: center; }
.crm .crm-ausw .crm-ausw-lbl { color: var(--text-2); font-size: var(--fs-label); }
.crm .crm-ausw .crm-ausw-control { width: 100%; min-width: 0; min-height: 28px; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-meta); }
.crm .crm-ausw .crm-ausw-ctl .cs-field { height: 28px; min-height: 28px; padding-left: 8px; font-size: var(--fs-meta); }
.crm .crm-ausw .crm-ausw-check { display: inline-flex; align-items: center; gap: 6px; color: var(--text-1); font-size: var(--fs-meta); white-space: nowrap; }
.crm .crm-ausw .crm-ausw-check input { width: 15px; height: 15px; margin: 0; }
.crm .crm-ausw .crm-ausw-top { width: 44px; height: 28px; padding: 0 4px; text-align: center; }
.crm .crm-ausw .crm-ausw-ziel { width: 72px; height: 28px; }
.crm .crm-ausw .crm-ausw-ziel::placeholder { color: var(--text-3); }
.crm .crm-ausw .crm-ausw-aktionen { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 6px; }
/* D5: „+ berechnetes Feld“ / „+ Bedingung“ — blaue Textknöpfe ohne Rahmen */
.crm .crm-ausw .crm-ausw-knopf { min-height: 24px; padding: 0 2px; border: 0; background: none; color: var(--primary-text, var(--primary)); font-size: var(--fs-meta); font-weight: 600; }
.crm .crm-ausw .crm-ausw-knopf[disabled] { color: var(--text-3); }
.crm .crm-ausw .crm-ausw-weg { flex: 0 0 auto; width: 26px; min-width: 26px; height: 26px; padding: 0; }
.crm .crm-ausw .crm-ausw-hinweis { margin: 6px 0 0; color: var(--text-2); font-size: var(--fs-meta); }

/* D5 ③: acht Datenquellen als Schaltflächen nebeneinander */
.crm .crm-ausw .crm-ausw-quellen { display: flex; flex-wrap: wrap; gap: 7px 6px; }
.crm .crm-ausw .crm-ausw-quelle { appearance: none; min-height: 24px; padding: 2px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; }
.crm .crm-ausw .crm-ausw-quelle:hover { background: var(--bg-hover); }
.crm .crm-ausw .crm-ausw-quelle.is-aktiv { border-color: var(--tint-blue); background: var(--tint-blue); color: var(--primary-text, var(--primary)); }

/* D5 ③: Filter als Chip „Phase ist Lead oder Proposal ד, daneben „+ Bedingung“, darunter UND/ODER */
.crm .crm-ausw .crm-ausw-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.crm .crm-ausw .crm-ausw-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 5px 0 9px; border-radius: var(--r-sm); background: var(--tint-blue); color: var(--primary-text, var(--primary)); font-size: var(--fs-meta); font-weight: 600; }
.crm .crm-ausw .crm-ausw-chip-text, .crm .crm-ausw .crm-ausw-chip-weg { appearance: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.crm .crm-ausw .crm-ausw-chip-weg { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: var(--fs-body); line-height: 1; }
.crm .crm-ausw .crm-ausw-chips + .crm-ausw-reihe, .crm .crm-ausw .crm-ausw-filter-editor + .crm-ausw-reihe { margin-top: 8px; }
.crm .crm-ausw .crm-ausw-filter-editor { margin-top: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); }
.crm .crm-ausw .crm-ausw-filter-editor .crm-ausw-reihe { align-items: flex-end; }
.crm .crm-ausw .crm-ausw-werte { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 0; }

/* D5 ③: zehn Symbol-Kacheln in einer Reihe, unpassende ausgegraut */
.crm .crm-ausw .crm-ausw-galerie { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.crm .crm-ausw .crm-ausw-form { appearance: none; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; height: 42px; padding: 4px 0 3px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-1); font: inherit; cursor: pointer; }
.crm .crm-ausw .crm-ausw-form-ikon { width: 18px; height: 18px; flex: 0 0 auto; }
.crm .crm-ausw .crm-ausw-form-name { overflow: visible; white-space: nowrap; font-family: var(--f-cond, inherit); font-size: var(--fs-label); letter-spacing: -.02em; line-height: 1.3; }
.crm .crm-ausw .crm-ausw-form:hover { background: var(--bg-hover); }
.crm .crm-ausw .crm-ausw-form.is-aktiv { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary-text, var(--primary)); background: var(--tint-blue); }
.crm .crm-ausw .crm-ausw-form.is-unpassend { border-color: var(--border); background: var(--bg-surface); color: var(--text-3); cursor: not-allowed; }
.crm .crm-ausw .crm-ausw-form.is-unpassend .crm-ausw-form-ikon { opacity: .55; }
.crm .crm-ausw .crm-ausw-form.is-unpassend:hover { background: var(--bg-surface); }

/* D5 ④: Vorschau-Karte — Titel der Kachel, „Summe Budget · 27 Opportunities“, große Zahl,
   Legende mit Beträgen, Zeilen Logo · Name · Balken · Betrag, Hinweis zum Klick */
.crm .crm-ausw .crm-ausw-vorschau { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); }
.crm .crm-ausw .crm-ausw-vorschau.is-veraltet { opacity: .7; }
.crm .crm-ausw .crm-ausw-v-kopf { display: flex; align-items: baseline; gap: 4px 10px; min-width: 0; margin-bottom: 6px; }
.crm .crm-ausw .crm-ausw-v-h { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); font-size: var(--fs-ui); font-weight: 700; }
.crm .crm-ausw .crm-ausw-v-meta { flex: 0 0 auto; margin-left: auto; color: var(--text-2); font-size: var(--fs-label); white-space: nowrap; }
.crm .crm-ausw .crm-ausw-zahl { margin: 0 0 6px; }
.crm .crm-ausw .crm-ausw-zahl-wert { color: var(--text-1); font-size: var(--fs-display); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.crm .crm-ausw .crm-ausw-legende { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 6px; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.crm .crm-ausw .crm-ausw-legende li { display: inline-flex; align-items: center; gap: 5px; }
.crm .crm-ausw .crm-ausw-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.crm .crm-ausw .crm-ausw-bz-liste { display: flex; flex-direction: column; }
.crm .crm-ausw .crm-ausw-bz { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) minmax(4.5rem, auto); align-items: center; gap: 10px; min-height: 30px; border-radius: var(--r-sm); cursor: pointer; }
.crm .crm-ausw .crm-ausw-bz.ck-el-tot { cursor: default; }
.crm .crm-ausw .crm-ausw-bz-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); font-size: var(--fs-meta); }
.crm .crm-ausw .crm-ausw-bz-name .hs-logo { gap: 6px; }
.crm .crm-ausw .crm-ausw-bz-spur { display: flex; height: 16px; overflow: hidden; border-radius: 3px; }
.crm .crm-ausw .crm-ausw-seg { display: block; height: 100%; }
.crm .crm-ausw .crm-ausw-seg.is-0, .crm .crm-ausw .crm-ausw-swatch.is-0 { background: var(--primary); }
.crm .crm-ausw .crm-ausw-seg.is-1, .crm .crm-ausw .crm-ausw-swatch.is-1 { background: color-mix(in srgb, var(--primary) 40%, var(--bg-surface)); }
.crm .crm-ausw .crm-ausw-seg.is-2, .crm .crm-ausw .crm-ausw-swatch.is-2 { background: var(--pythia-terra); }
.crm .crm-ausw .crm-ausw-seg.is-3, .crm .crm-ausw .crm-ausw-swatch.is-3 { background: var(--text-3); }
.crm .crm-ausw .crm-ausw-bz-wert { color: var(--text-1); font-size: var(--fs-meta); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.crm .crm-ausw .crm-ausw-bz-wert.is-null { font-weight: 400; }
.crm .crm-ausw .crm-ausw-bz:hover .crm-ausw-bz-spur { opacity: .85; }
.crm .crm-ausw .crm-ausw-v-fuss { margin: 8px 0 0; color: var(--text-2); font-size: var(--fs-label); line-height: 1.5; }
.crm .crm-ausw .crm-ausw-tabelle { max-width: 100%; overflow-x: auto; }
/* Lädt: Skelett in Form der Vorschau (ruht bei reduzierter Bewegung) */
.crm .crm-ausw .crm-ausw-skelett .skel-row { height: 14px; margin: 10px 0; border-radius: 999px; background: var(--bg-surface-3); animation: skel-puls 1.6s ease-in-out infinite; }
.crm .crm-ausw .crm-ausw-skelett .skel-row:first-child { width: 45%; height: 28px; }
.crm .crm-ausw .crm-ausw-skelett .skel-row:last-child { width: 70%; }
@media (prefers-reduced-motion: reduce) { .crm .crm-ausw .crm-ausw-skelett .skel-row { animation: none; opacity: .5; } }
.crm .crm-ausw .crm-ausw-leer { padding: 20px 8px; text-align: center; }
.crm .crm-ausw .crm-ausw-leer-t { margin: 0 0 4px; color: var(--text-1); font-weight: 600; }
.crm .crm-ausw .crm-ausw-leer-d { margin: 0 0 10px; color: var(--text-2); font-size: var(--fs-meta); }
.crm .crm-ausw .crm-ausw-leer.is-fehler .crm-ausw-leer-t { color: var(--danger); }
.crm .crm-ausw .crm-ausw-fehler { padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
/* D5 ⑤: gelber Hinweis zu fehlenden Werten */
.crm .crm-ausw .crm-ausw-luecken { margin: 0; padding: 10px 14px; border: 1px solid var(--ausw-gelb-rand); border-radius: var(--r-md); background: var(--ausw-gelb-grund); list-style: none; }
.crm .crm-ausw .crm-ausw-luecke { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; color: var(--ausw-gelb-text); font-size: var(--fs-meta); line-height: 1.5; }
.crm .crm-ausw .crm-ausw-luecke:last-child { margin-bottom: 0; }
.crm .crm-ausw .crm-ausw-luecke strong { font-weight: 700; }
.crm .crm-ausw .crm-ausw-luecke svg { flex: 0 0 auto; width: 1.1em; height: 1.1em; margin-top: 2px; }

/* D5 ⑥: die Abfrage, bevor sie läuft — gestrichelt, Festbreitenschrift */
.crm .crm-ausw .crm-ausw-abfrage { padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); }
.crm .crm-ausw .crm-ausw-abfrage-k { margin: 0 0 6px; color: var(--text-1); font-size: var(--fs-meta); font-weight: 700; }
.crm .crm-ausw .crm-ausw-abfrage-satz { margin: 0; color: var(--text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-label); line-height: 1.6; overflow-wrap: anywhere; } /* PR1.437 Ausnahme: Abfrage als Rohtext vor dem Lauf (D5 ⑥) */
.crm .crm-ausw .crm-ausw-abfrage-teil { display: block; }
.crm .crm-ausw .crm-ausw-pfeil { display: inline-flex; vertical-align: -1px; }
.crm .crm-ausw .crm-ausw-pfeil svg { width: 12px; height: 12px; }

/* Fußzeile: links nur „Vorschau mit Live-Daten · Stand hh:mm“, rechts die Aktionen */
.crm .crm-ausw .crm-ausw-fuss { flex-wrap: wrap; justify-content: space-between; }
.crm .crm-ausw .crm-ausw-fuss-info { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; color: var(--text-2); font-size: var(--fs-meta); }
.crm .crm-ausw .crm-ausw-fuss-stand { display: inline-flex; align-items: center; gap: 6px; }
.crm .crm-ausw .crm-ausw-fuss-stand svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.crm .crm-ausw .crm-ausw-fuss-aktionen { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Fokus: überall sichtbar */
.crm .crm-ausw :is(.crm-ausw-control, .crm-ausw-frage, .crm-ausw-form, .crm-ausw-quelle, .crm-ausw-ki-btn, .crm-ausw-tabelle, .crm-ausw-check input, .crm-ausw-knopf, .crm-ausw-weg, .crm-ausw-chip-text, .crm-ausw-chip-weg, .crm-ausw-bz):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 959px) {
  .crm .crm-ausw :is(.crm-ausw-unter, .mp-head, .mp-foot) { padding-inline: 16px; }
  .crm .crm-ausw :is(.crm-ausw-links, .crm-ausw-rechts) { padding-inline: 16px; }
  .crm .crm-ausw .crm-ausw-fuss-aktionen { width: 100%; justify-content: flex-end; }
  .crm .crm-ausw .crm-ausw-felder { grid-template-columns: minmax(0, 1fr); }
  .crm .crm-ausw .crm-ausw-ki-zeile { flex-wrap: wrap; }
  .crm .crm-ausw .crm-ausw-ki-btn { min-height: 44px; }
  .crm .crm-ausw .crm-ausw-galerie { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* PR1.578 Nachzug 2 — Masken-Panel wie E1 (beide Ansichten): Feldtitel fett, „optional" am Reiter,
   Zeitraum als Start + Ende, Cloud als Chipzeile inkl. Multi-Cloud, Plattform neben Portfolio. */
.crm .mask-panel .mp-fl { font-size: var(--fs-label); font-weight: 600; color: var(--text-1); }
.crm .mask-panel .mp-fl-note, .crm .mask-panel .fw-step-opt { font-size: var(--fs-label); font-weight: 400; color: var(--text-3); font-style: normal; margin-left: 4px; }
.crm .mask-panel .fw-step-opt { margin-left: 2px; }
.crm .mask-panel .mp-g2, .crm .mask-panel .mp-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 640px) { .crm .mask-panel .mp-g2, .crm .mask-panel .mp-dates { grid-template-columns: 1fr; } }
.crm .mask-panel #pm-hyperscaler .ms-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.crm .mask-panel #pm-hyperscaler .ms-pill { width: auto; min-height: 32px; padding: 3px 10px; font-size: var(--fs-label); }
.crm .mask-panel #pm-hyperscaler .ms-pill .hs-logo-name { font-size: var(--fs-label); }
.crm .mask-panel #pm-hyperscaler .ms-pill img, .crm .mask-panel #pm-hyperscaler .ms-pill svg { width: 16px; height: 16px; }

/* PR1.580 #900 — Opportunity-Maske im Masken-Panel (beide Ansichten): die Feldtitel des statischen
   Formulars wie E1 fett und dunkel, ohne Sternchen-Legende (Pflicht zeigt die Zählzeile der Fußzeile). */
.crm .mask-panel #opp-form .form-group > label,
.crm .mask-panel #opp-form .form-group > .fh-row > label { font-size: var(--fs-label); font-weight: 600; color: var(--text-1); }
.crm .mask-panel #opp-form .form-required-legend { display: none; }
/* Eine Spalte über die ganze Panelbreite (E1): die Lesebreite --fw-max der alten Schrittmaske gilt im
   Panel nicht; Felder mit ruhigem Abstand untereinander wie in der Projekt-Maske. */
.crm .mask-panel #opp-form .fw { --fw-max: none; }
.crm .mask-panel #opp-form .fw-sec-body { display: flex; flex-direction: column; gap: 16px; }
.crm .mask-panel #opp-form .form-group { gap: 6px; }
/* Keine Zutaten (Konvention 22): E1/V7 zeigen an keinem Feldtitel ein ⓘ — im Panel ausgeblendet. */
.crm .mask-panel #opp-form .fh-btn { display: none; }
.crm .mask-panel #opp-form #opp-description-hint { margin: 0; font-size: var(--fs-label); color: var(--text-3); }
/* Cloud als Chipzeile wie E1 (dieselben Maße wie #pm-hyperscaler, Nachzug 2 PR1.578). */
.crm .mask-panel #opp-hyperscaler-grid .ms-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.crm .mask-panel #opp-hyperscaler-grid .ms-pill { width: auto; min-height: 32px; padding: 3px 10px; font-size: var(--fs-label); }
.crm .mask-panel #opp-hyperscaler-grid .ms-pill .hs-logo-name { font-size: var(--fs-label); }
.crm .mask-panel #opp-hyperscaler-grid .ms-pill img, .crm .mask-panel #opp-hyperscaler-grid .ms-pill svg { width: 16px; height: 16px; }
/* Stempel „Entwurf gespeichert“ mit grünem Haken davor (E1, V7). */
.crm .mask-panel .mp-stamp[data-tone="ok"]::before { content: "✓"; margin-right: 6px; color: var(--success); font-weight: 700; }

/* PR1.578 Nachzug 3 — Wortzeichen im Cloud-Chip behalten ihr Seitenverhaeltnis (STACKIT war auf 16x16 gequetscht);
   Portfolio-Suchfeld mit Lupe, Plattform-Auswahl mit Pfeil nach unten (E1). */
.crm .mask-panel #pm-hyperscaler .ms-pill img.hs-logo-img--stackit, .crm .mask-panel #pm-hyperscaler .ms-pill img.hs-logo-img--wordmark { width: auto; height: 12px; max-width: none; }
.crm .mask-panel #pm-portfolio .ms-field::before, .crm .mask-panel #pm-hyperscaler .ms-field::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--text-3); pointer-events: none; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.crm .mask-panel #pm-portfolio .ms-field::before { left: 11px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E"); }
.crm .mask-panel #pm-portfolio .ms-input { padding-left: 34px; }
.crm .mask-panel #pm-hyperscaler .ms-field::after { right: 11px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E"); }
.crm .mask-panel #pm-hyperscaler .ms-input { padding-right: 34px; }
.crm .mask-panel .mp-close { width: 28px; height: 28px; min-width: 28px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-1); display: inline-flex; align-items: center; justify-content: center; }
.crm .mask-panel .mp-close svg { width: 14px; height: 14px; }
/* PR1.580 #900 — dieselben Cloud-, Portfolio- und Plattform-Feinheiten für die Opportunity-Maske. */
.crm .mask-panel #opp-hyperscaler-grid .ms-pill img.hs-logo-img--stackit, .crm .mask-panel #opp-hyperscaler-grid .ms-pill img.hs-logo-img--wordmark { width: auto; height: 12px; max-width: none; }
.crm .mask-panel #opp-portfolio-grid .ms-field::before, .crm .mask-panel #opp-hyperscaler-grid .ms-field::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--text-3); pointer-events: none; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.crm .mask-panel #opp-portfolio-grid .ms-field::before { left: 11px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E"); }
.crm .mask-panel #opp-portfolio-grid .ms-input { padding-left: 34px; }
.crm .mask-panel #opp-hyperscaler-grid .ms-field::after { right: 11px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E"); }
.crm .mask-panel #opp-hyperscaler-grid .ms-input { padding-right: 34px; }

/* PR1.580 #900 Design-Treue — Hülle näher an E1/V7 (gilt für jede Maske im Panel):
   Liste nur leicht abgedunkelt; Abschnittsüberschrift grau mit Linie rechts daneben; „Speichern“
   blass-blau ohne Änderung; Fußzeile bricht um statt zu überlappen, Fehlerzeile als eigene Zeile. */
.crm .modal-overlay.mask-panel-overlay { background: rgba(15, 20, 30, .16); }
.crm .mask-panel .fw-sec-head--line { align-items: center; padding-bottom: 0; border-bottom: 0; }
.crm .mask-panel .fw-sec-head--line::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.crm .mask-panel .fw-sec-head--line .fw-sec-title { color: var(--text-2); font-weight: 600; }
.crm .mask-panel:not(.has-changes) .edit-guard-save-btn { background: var(--mp-primary, #006EC7); color: #fff; border: 0; opacity: .45; }
.crm .mask-panel .mp-foot { flex-wrap: wrap; }
.crm .mask-panel .mp-foot-main { flex: 1 1 8rem; }
.crm .mask-panel .mp-foot-note { flex-wrap: wrap; row-gap: 4px; }
.crm .mask-panel .mp-foot > .btn { flex: none; white-space: nowrap; }
.crm .mask-panel .mp-error:not([hidden]) { order: -1; flex: 1 0 100%; }

/* ── PR1.750 (#1070) — CC-Cockpit: Portfolio-Element löschen, erst umordnen (Vorlage V21) ──
   Maße aus dem Prototyp (1:1, 1 rem = 15 px). Der Schleier deckt nur den Inhaltsbereich
   (Kopfleiste + Ansicht), die Seitenleiste bleibt hell. Nur Tokens; Dunkelmodus über
   die Tokens plus drei Textstufen für Tönungen. Bewegung: nur Einblenden (Opazität). */
.crm .app-canvas:has(> .ccd-veil) { position: relative; }
.crm .ccd-veil { position: absolute; inset: 0; z-index: 90; background: rgba(15, 20, 30, .42); border-radius: inherit; display: flex; justify-content: center; align-items: flex-start; padding: 2.9333rem 1.0667rem 1.0667rem; animation: ccdIn .14s ease-out; }
@keyframes ccdIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .crm .ccd-veil { animation: none; } }
.crm .ccd { position: relative; width: 58.6667rem; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--bg-surface); color: var(--text-1); border-radius: 1.0667rem; box-shadow: 0 1.6rem 4rem rgba(11, 26, 43, .3); }
.crm .ccd-kopf { display: flex; gap: .9333rem; padding: 1.4667rem 1.7333rem .4rem; flex: none; }
.crm .ccd-warn { flex: none; width: 2.6667rem; height: 2.6667rem; border-radius: 50%; background: var(--tint-orange); color: var(--ad-orange-700); display: grid; place-items: center; }
.crm .ccd-h { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.3; color: var(--text-1); overflow-wrap: anywhere; }
.crm .ccd-satz { margin: .2667rem 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
.crm .ccd-satz b { font-weight: 600; color: var(--text-1); }
.crm .ccd-sammel { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: .6667rem; margin: .9333rem 1.7333rem 0; padding: .6667rem .9333rem; background: var(--bg-surface-2); border: .0667rem solid var(--border); border-radius: .6667rem; font-size: var(--fs-ui); color: var(--text-1); }
.crm .ccd-sammel .ccd-feld { width: 15.3333rem; }
.crm .ccd-zaehler { margin-left: auto; font-size: var(--fs-label); color: var(--text-3); font-variant-numeric: tabular-nums; }
.crm .ccd-liste { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; margin: .6667rem 1.7333rem 0; border: .0667rem solid var(--border); border-radius: .6667rem; }
.crm .ccd-rumpf { min-height: 0; overflow-y: auto; }
.crm .ccd-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 7.3333rem 19.3333rem; gap: .9333rem; align-items: center; padding: .7rem .9333rem; border-top: .0667rem solid var(--border); font-size: var(--fs-body); }
.crm .ccd-rumpf .ccd-zeile:first-child { border-top: 0; }
.crm .ccd-zeile.is-kopf { border-top: 0; border-bottom: .0667rem solid var(--border); padding: .6rem .9333rem; font-size: var(--fs-label); font-weight: 600; color: var(--text-3); background: var(--bg-surface-2); border-radius: .6667rem .6667rem 0 0; }
.crm .ccd-wer { display: flex; align-items: center; gap: .7333rem; min-width: 0; }
.crm .ccd-wer > div { min-width: 0; }
.crm .ccd-wer b { display: block; font-weight: 500; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .ccd-wer small { display: block; font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .ccd-foto { flex: none; }
.crm .ccd-logo { flex: none; border-radius: .4667rem; border: .0667rem solid var(--border); background: var(--bg-surface); }
.crm .ccd-typ { display: flex; width: 100%; align-items: center; border-radius: 62.5rem; padding: .2rem .7333rem; font-size: var(--fs-label); font-weight: 600; white-space: nowrap; background: var(--bg-surface-3); color: var(--text-2); }
.crm .ccd-typ.is-gruen { background: var(--tint-green); color: var(--ad-green-900); }
.crm .ccd-typ.is-blau { background: var(--tint-blue); color: var(--ad-blue-700); }
.crm .ccd-feld { display: inline-flex; align-items: center; justify-content: space-between; gap: .5333rem; width: 100%; min-width: 0; border: .0667rem solid var(--border-strong); border-radius: var(--r-md); padding: .4rem .6667rem; font-size: var(--fs-ui); font-family: inherit; background: var(--bg-input); color: var(--text-1); text-align: left; cursor: pointer; white-space: nowrap; }
.crm .ccd-feld > span { overflow: hidden; text-overflow: ellipsis; }
.crm .ccd-chev { display: inline-flex; flex: none; transform: rotate(90deg); color: var(--text-3); }
.crm .ccd-feld.is-leer { border-style: dashed; color: var(--text-3); }
.crm .ccd-feld.is-offen { border-color: var(--ad-blue); box-shadow: 0 0 0 .2rem var(--tint-blue); }
.crm .ccd-pop { position: absolute; z-index: 5; width: 20.6667rem; max-width: calc(100% - 1.0667rem); padding: .4rem; background: var(--bg-surface); border: .0667rem solid var(--border-strong); border-radius: .8rem; box-shadow: var(--shadow-3); }
.crm .ccd-suche { display: flex; align-items: center; gap: .5333rem; margin: .2667rem .2667rem .4rem; border: .0667rem solid var(--border-strong); border-radius: var(--r-md); padding: .4667rem .6667rem; color: var(--text-3); background: var(--bg-input); }
.crm .ccd-suche:focus-within { border-color: var(--ad-blue); }
.crm .ccd-suche-in { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; font-size: var(--fs-ui); font-family: inherit; color: var(--text-1); }
.crm .ccd-suche-in::placeholder { color: var(--text-3); }
.crm .ccd-optionen { overflow-y: auto; }
.crm .ccd-og { padding: .5333rem .6667rem .2rem; font-size: var(--fs-label); font-weight: 600; color: var(--text-3); }
.crm .ccd-og.is-trenner { border-top: .0667rem solid var(--border); margin-top: .2667rem; }
.crm .ccd-opt { display: flex; align-items: center; gap: .5333rem; padding: .4667rem .6667rem; line-height: 1.4; border-radius: .4667rem; font-size: var(--fs-ui); color: var(--text-1); cursor: pointer; }
.crm .ccd-opt:hover { background: var(--bg-hover); }
.crm .ccd-opt.is-an { background: var(--tint-blue); color: var(--ad-blue-700); font-weight: 600; }
.crm .ccd-opt.is-aus { color: var(--text-3); text-decoration: line-through; cursor: default; }
.crm .ccd-opt.is-aus:hover { background: transparent; }
.crm .ccd-opt small { margin-left: auto; padding-left: .5333rem; font-size: var(--fs-label); font-weight: 400; color: var(--text-3); text-align: right; flex: none; max-width: 50%; }
.crm .ccd-fehler { flex: none; margin: .9333rem 1.7333rem 0; padding: .5333rem .8rem; border-radius: var(--r-md); background: var(--tint-red); color: var(--text-1); font-size: var(--fs-ui); }
.crm .ccd-fuss { flex: none; display: flex; align-items: center; gap: .6667rem; padding: 1.0667rem 1.7333rem 1.3333rem; margin-top: .9333rem; border-top: .0667rem solid var(--border); }
.crm .ccd-hinweis { margin-right: auto; font-size: var(--fs-label); color: var(--text-3); }
.crm .ccd-btn { display: inline-flex; align-items: center; gap: .4667rem; border: .0667rem solid var(--border-strong); background: var(--bg-surface); border-radius: var(--r-md); padding: .4667rem .8667rem; font-weight: 500; font-size: var(--fs-ui); font-family: inherit; color: var(--text-1); white-space: nowrap; cursor: pointer; }
.crm .ccd-btn.is-sm { padding: .2667rem .6667rem; font-size: var(--fs-meta); }
.crm .ccd-btn.is-pri { background: var(--ad-blue); border-color: var(--ad-blue); color: var(--text-inv); }
.crm .ccd-btn.is-gefahr { background: var(--ad-red-700); border-color: var(--ad-red-700); color: var(--text-inv); }
.crm .ccd-btn:disabled { opacity: .45; cursor: default; }
.crm .ccd-btn:focus-visible, .crm .ccd-feld:focus-visible { outline: .1334rem solid var(--focus); outline-offset: .1334rem; }
.crm .ccd.is-kurz { width: 36rem; }
/* Dunkel: helle Textstufen auf den dunklen Tönungen. */
.crm.dark .ccd-typ.is-gruen, html[data-theme="dark"] .crm .ccd-typ.is-gruen { color: var(--ad-green); }
.crm.dark .ccd-typ.is-blau, .crm.dark .ccd-opt.is-an,
html[data-theme="dark"] .crm .ccd-typ.is-blau, html[data-theme="dark"] .crm .ccd-opt.is-an { color: var(--ad-blue-300); }
.crm.dark .ccd-warn, html[data-theme="dark"] .crm .ccd-warn { color: var(--ad-orange); }

/* ============== SEITENBLICK (PR1.654) ==============
   Schmale Schublade rechts neben Liste/Kanban nach der verbindlichen Vorlage V2 und dem
   Bewegungs-Prototyp (`.peek`: 470 px, Kopf 10/14, Körper 16/18 mit 14 Abstand, Schatten
   -14/36). OHNE Schleier, nicht modal: die Liste bleibt voll sichtbar und bedienbar und weicht
   per Rand aus (`.crm.sbk-offen #crm-content`); die Lage setzt seitenblick.js (--sbk-top/--sbk-w).
   Bewegung: Ein 240 ms --ease-drawer, Aus 160 ms --ease-in, Inhaltswechsel 140 ms; Esc sofort.
   Bei „Bewegung reduzieren" (is-fade) nur Überblendung. Klassenpräfix sbk- (sb- = Seitenleiste).
   Liegt hier statt in style-redesign.css, weil dort jeder px-Wert den UI-Craft-Ratchet zählt. */
.crm.sbk-offen #crm-content { margin-right: var(--sbk-w, 0); }
.crm .sbk {
  position: fixed; top: var(--sbk-top, 0); right: 0; bottom: 0;
  width: var(--sbk-w, 470px);
  z-index: 70;
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  box-shadow: -14px 0 36px rgba(14, 23, 38, .10);
}
.crm .sbk.is-in { animation: sbkIn var(--sbk-open-ms, 240ms) var(--ease-drawer) both; }
.crm .sbk.is-out { animation: sbkOut var(--sbk-close-ms, 160ms) var(--ease-in) both; pointer-events: none; }
.crm .sbk.is-in.is-fade { animation-name: sbkFadeIn; animation-timing-function: var(--ease-out); }
.crm .sbk.is-out.is-fade { animation-name: sbkFadeOut; }
@keyframes sbkIn { from { transform: translateX(102%); } to { transform: none; } }
@keyframes sbkOut { from { transform: none; } to { transform: translateX(102%); } }
@keyframes sbkFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sbkFadeOut { from { opacity: 1; } to { opacity: 0; } }
/* Inhaltswechsel wie im Prototyp: Kinder blenden 140 ms aus, Inhalt tauscht, blendet ein. */
.crm .sbk-body > * { transition: opacity var(--sbk-swap-ms, 140ms) ease; }
.crm .sbk-body.is-swap > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .crm .sbk.is-in, .crm .sbk.is-out { animation-name: sbkFadeIn; }
  .crm .sbk.is-out { animation-name: sbkFadeOut; }
  .crm .sbk-skel { animation: none; }
}
@media (max-width: 959px) { .crm .sbk { left: 0; width: auto; } }

/* Kopfleiste: ‹ › „5 von 27" · Ganze Seite · × */
.crm .sbk-head { flex: 0 0 auto; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.crm .sbk-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--text-3); font-size: var(--fs-meta); }
.crm .sbk-bar .btn { color: var(--text-1); }
.crm .sbk-ico { width: 32px; padding: 6px; justify-content: center; }
.crm .sbk-pos { min-width: 4.5rem; padding-left: 4px; font-variant-numeric: tabular-nums; }
.crm .sbk-bar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.crm .sbk-full { gap: 7px; white-space: nowrap; }
.crm .sbk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.crm .sbk button:focus-visible, .crm .sbk [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crm .sbk-titel:focus:not(:focus-visible) { outline: none; }

.crm .sbk-inhalt { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
.crm .sbk-kopf { display: flex; align-items: flex-start; gap: 12px; }
.crm .sbk-logo { flex: none; width: 44px; height: 44px; }
.crm .sbk-kopf-text { min-width: 0; }
.crm .sbk-titel { margin: 0; font-size: var(--fs-title); /* Vorlage V2: 18 px, die Skala kennt 16 und 20 */ line-height: 1.25; font-weight: 700; color: var(--text-1); overflow-wrap: anywhere; text-wrap: balance; }
.crm .sbk-unter { margin: 2px 0 0; font-size: var(--fs-meta); color: var(--text-3); overflow-wrap: anywhere; }
.crm .sbk-phase { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.crm .sbk-phase > :first-child { flex: none; }
.crm .sbk-seit { flex: 1 1 0; min-width: 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .sbk-aktionen { display: flex; flex: none; flex-wrap: nowrap; gap: 6px; margin-left: auto; }
.crm .sbk-aktionen .btn { gap: 5px; padding-inline: 8px; font-size: var(--fs-meta); white-space: nowrap; }

.crm .sbk-fakten { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--border); border-radius: 10px; }
.crm .sbk-fakt { padding: 9px 12px; border-right: 1px solid var(--border); }
.crm .sbk-fakt:last-child { border-right: 0; }
.crm .sbk-fakt dt { font-size: var(--fs-label); color: var(--text-3); }
.crm .sbk-fakt dd { margin: 0; font-size: var(--fs-body); font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Schmale Schublade (um 1280 px, 408 px breit): Symbole in den Aktionen weg, Fakten enger; nichts bricht um. */
@media (max-width: 1320px) {
    .crm .sbk-aktionen .ic { display: none; }
    .crm .sbk-fakt { padding-inline: 10px; }
    .crm .sbk-fakt dd { font-size: var(--fs-ui); }
}

.crm .sbk-glance-box { padding: 10px 12px; background: var(--tint-blue); border-radius: 10px; font-size: var(--fs-ui); }
.crm .sbk-glance-box .sbk-h { color: var(--ad-blue-700); font-weight: 700; margin: 0; }
.crm .sbk-glance { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.crm .sbk-glance li { margin: 2px 0; color: var(--text-1); line-height: 1.45; }

.crm .sbk-sec { display: flex; flex-direction: column; }
.crm .sbk-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); }
.crm .sbk-team { margin: 0; padding: 0; list-style: none; }
.crm .sbk-team-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: var(--fs-ui); color: var(--text-1); }
.crm .sbk-ava { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-surface-3); color: var(--text-2); font-size: var(--fs-label); font-weight: 700; }
.crm .sbk-team-wer { flex: 1; min-width: 0; }
.crm .sbk-team-rolle { display: block; color: var(--text-3); font-size: var(--fs-label); }
.crm .sbk-team-last { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: var(--fs-label); color: var(--text-3); }
.crm .sbk-team-last[data-ton="ocker"] { padding: 1px 9px; border-radius: 999px; line-height: 20px; font-weight: 600; color: var(--ad-orange-900); background: var(--tint-warn); }
.crm .sbk-team-mehr, .crm .sbk-leer { margin: 0; color: var(--text-3); font-size: var(--fs-meta); }

/* Verlauf: Zeitachse mit Ringen (Prototyp .tl / .ev) */
.crm .sbk-verlauf { position: relative; margin: 0; padding: 0 0 0 18px; list-style: none; }
.crm .sbk-verlauf::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.crm .sbk-verlauf li { position: relative; padding: 0 0 12px; font-size: var(--fs-ui); color: var(--text-1); }
.crm .sbk-verlauf li::before { content: ""; position: absolute; left: -17px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-surface); border: 2px solid var(--border-strong); }
.crm .sbk-v-titel { font-weight: 500; }
.crm .sbk-v-zeit { display: block; color: var(--text-3); font-size: var(--fs-label); }
.crm .sbk-alle { align-self: flex-start; padding: 0; background: none; border: 0; color: var(--ad-blue-700); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.crm .sbk-alle:hover { text-decoration: underline; }

.crm .sbk-skel { background: var(--bg-surface-3); border-radius: var(--r-md); animation: skel-pulse 1.4s ease-in-out infinite; }
.crm .sbk-skel--kopf { height: 3.5rem; }
.crm .sbk-skel--zeile { height: 1.25rem; }
.crm .sbk-fehler { align-items: flex-start; }
.crm .sbk-fehler-text { margin: 0; color: var(--text-1); font-size: var(--fs-body); line-height: 1.45; }

/* Gewählte Zeile / Karte der Liste: hell blau hinterlegt (Vorlage V2, `tr.sel td`). */
.crm .tbl tbody tr.is-blick td { background: var(--tint-blue); }
.crm .kan-card.is-blick { background: var(--tint-blue); box-shadow: 0 0 0 2px var(--ad-blue); }
/* PR1.660 — Karten der Kunden und Mitarbeitenden wie die Kanban-Karte. */
.crm .cust-card.is-blick, .crm .emp-card.is-blick { background: var(--tint-blue); box-shadow: 0 0 0 2px var(--ad-blue); }

/* ============== SEITENBLICK · Projekt, Kunde, Mitarbeitende (PR1.660) ==============
   Anatomie V5 („Ein Kopf für alle Detailseiten") in der Schublade aus V2: Bild 44 (rund bei
   Personen, „?" ohne Kunde) · Typzeile mit Etikett · Titel · Stufenband · Aktionen (genau eine
   blaue) · Fakten · Abschnitte. Farben wie der Detailkopf (.dk): Ocker ad-orange-900, Grün
   ad-green-900, erledigte Stufe kräftiges Hellblau. Keine neue Bewegung. */
.crm .sbk-inhalt[data-sbk-typ] {
  --sbk-ocker: var(--ad-orange-900); --sbk-gruen: var(--ad-green-900);
  --sbk-done: color-mix(in srgb, var(--tint-blue) 88%, var(--ad-blue));
}
.crm .sbk-bild { flex: none; display: flex; }
.crm .sbk-bild .emp-avatar, .crm .sbk-bild--rund img { border-radius: 50%; }
.crm .sbk-bild-leer {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  font-size: var(--fs-section); font-weight: 600; color: var(--text-2);
  background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
}
.crm .sbk-typ { margin: 0 0 2px; font-size: var(--fs-meta); line-height: 1.5; color: var(--text-2); }
.crm .sbk-typ-label {
  display: inline-block; padding: 1px 6px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em;
  color: var(--text-2); background: var(--bg-surface-3); border-radius: var(--r-xs);
}
.crm .sbk-typ-label { margin-right: 4px; }
.crm .sbk-typ-sep { color: var(--text-3); }
.crm .sbk-typ-link { padding: 0; font: inherit; font-weight: 600; color: var(--text-1); background: none; border: 0; cursor: pointer; }
.crm .sbk-typ-link[data-ton="ocker"] { color: var(--sbk-ocker); }
.crm .sbk-typ-link:hover { text-decoration: underline; }
.crm .sbk-phase--typ { flex-wrap: nowrap; }
.crm .sbk-phase--typ > .sbk-band-wrap { flex: 1 1 100%; }
.crm .sbk-phase--typ .sbk-aktionen { margin-left: auto; }

/* Stufenband: Pfeilsegmente, Wort im Segment; erledigt hellblau, aktuell blau, kommend grau. */
.crm .sbk-band-wrap { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 0; }
.crm .sbk-band-k { font-size: var(--fs-label); color: var(--text-3); }
.crm .sbk-band { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; }
.crm .sbk-band-seg {
  /* Volle Namen (Vorlage V5): Breite nach Inhalt, nie abgeschnitten; bei Platzmangel zweite Reihe. */
  flex: 1 1 auto; padding: 4px 3px 4px 9px; font-size: var(--fs-label); letter-spacing: -.01em; font-weight: 600; text-align: center;
  color: var(--text-2); background: var(--bg-surface-3); white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 6px 50%);
}
.crm .sbk-band-seg:first-child { padding-left: 6px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); }
.crm .sbk-band-seg[data-state="done"] { color: var(--ad-blue-700); background: var(--sbk-done); } /* 5,2:1 (#005AA3 auf #CAE0F4), wie .dk-step.is-done */
.crm .sbk-band-seg[data-state="current"] { color: var(--text-inv); background: var(--ad-blue); }
/* Dunkel wie der Detailkopf (.dk-tone-ocker/-gruen, .dk-link): helle Stufen statt der dunklen
   900er/700er, sonst unter 3:1 auf dem dunklen Grund und der Ocker-Tönung. */
.crm.dark .sbk-inhalt[data-sbk-typ], html[data-theme="dark"] .crm .sbk-inhalt[data-sbk-typ] { --sbk-ocker: var(--ad-orange); --sbk-gruen: var(--ad-green); }
.crm.dark .sbk-verb, html[data-theme="dark"] .crm .sbk-verb,
.crm.dark .sbk-alle, html[data-theme="dark"] .crm .sbk-alle { color: var(--ad-blue-300); }
.crm.dark .sbk-fakten--typ .sbk-fakt dd[data-ton="rot"], html[data-theme="dark"] .crm .sbk-fakten--typ .sbk-fakt dd[data-ton="rot"] { color: var(--ad-red-300); }
/* Dunkel wie der Detailkopf (.dk-step.is-done): helles Blau auf getöntem Grund (≥ 4,5:1). */
.crm.dark .sbk-band-seg[data-state="done"], html[data-theme="dark"] .crm .sbk-band-seg[data-state="done"] { color: var(--ad-blue-300); background: var(--tint-blue); }
.crm .sbk-band-seg[data-state="current"][data-ton="ocker"] { color: var(--ad-blue-900); background: var(--ad-orange); }
.crm .sbk-band-satz { font-size: var(--fs-label); color: var(--text-3); }

/* Fakten: drei Felder (Projekt, Kunde), zwei mal zwei (Mitarbeitende); Werte dürfen umbrechen. */
.crm .sbk-fakten--typ .sbk-fakt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.crm .sbk-fakten--typ .sbk-fakt dd { white-space: normal; overflow-wrap: anywhere; }
.crm .sbk-fakten--typ .sbk-fakt dd[data-ton="ocker"] { color: var(--sbk-ocker); }
.crm .sbk-fakten--typ .sbk-fakt dd[data-ton="gruen"] { color: var(--sbk-gruen); }
.crm .sbk-fakten--typ .sbk-fakt dd[data-ton="rot"] { color: var(--ad-red-700); }
.crm .sbk-fakten--typ .sbk-fakt dd.sbk-fakt-sub { font-size: var(--fs-label); font-weight: 400; color: var(--text-3); }
/* Laufzeit einzeilig wie „Zeitraum" der Opportunity (V2). */
.crm .sbk-fakten--typ .sbk-fakt[data-fakt="laufzeit"] dd:not(.sbk-fakt-sub) { white-space: nowrap; }
/* Wert mit Logo (Aktuell bei, Hyperscaler): Logo auf der Zeile des Namens, nur der Name bricht um (V5). */
.crm .sbk-fakten--typ .sbk-fakt dd.sbk-fakt-v--html { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.crm .sbk-fakten--typ .sbk-fakt dd.sbk-fakt-v--html > .emp-kz-logos { flex: none; display: inline-flex; gap: 2px; margin-top: .1em; }
.crm .sbk-fakten--typ .sbk-fakt dd.sbk-fakt-v--html > .emp-kz-namen { flex: 1 1 auto; min-width: 0; }
.crm .sbk-fakten--typ .sbk-fakt dd .hs-logo { gap: 6px; }
.crm .sbk-fakten--typ .sbk-fakt dd .hs-logo-name { font-size: inherit; font-weight: inherit; color: inherit; }
.crm .sbk-fakten--2 { grid-template-columns: repeat(2, 1fr); }
.crm .sbk-fakten--2 .sbk-fakt:nth-child(2n) { border-right: 0; }
.crm .sbk-fakten--2 .sbk-fakt:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.crm .sbk-verb { padding: 0; margin-left: 2px; font: inherit; font-weight: 600; color: var(--ad-blue-700); background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* Lücke (Projekt): Angaben in Ocker, mit Verb. */
.crm .sbk-luecke { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding: 8px 12px; font-size: var(--fs-ui); background: var(--tint-warn); border-radius: 10px; }
.crm .sbk-luecke-k { color: var(--text-2); }
.crm .sbk-luecke-t { font-weight: 600; color: var(--sbk-ocker); }

/* Listen im Inhalt: offene Opportunities (Kunde), Einsätze (Mitarbeitende). */
.crm .sbk-liste { margin: 0; padding: 0; list-style: none; }
.crm .sbk-liste-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 8px;
  font: inherit; font-size: var(--fs-ui); color: var(--text-1); text-align: left; background: none; border: 0; border-radius: var(--r-md); cursor: pointer;
}
.crm .sbk-liste-zeile:hover { background: var(--bg-hover); }
.crm .sbk-liste-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crm .sbk-einsatz { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: var(--fs-ui); color: var(--text-1); }
.crm .sbk-einsatz-zeit { flex: none; text-align: right; color: var(--text-2); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.crm .sbk-einsatz-zeit small { display: block; color: var(--text-3); }

/* Stapel: „‹ Zurück zu <Kunde>" statt „n von N". */
.crm .sbk-zurueck { gap: 6px; min-width: 0; max-width: 14rem; color: var(--text-1); }
.crm .sbk-zurueck span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ============================================================
 * PR1.581 — Mitarbeiter-Maske im Masken-Panel (E2): Farbwerte des Redesigns.
 * Aufbau und Maße stehen in style.css (`#emp-modal …`, lädt in beiden Ansichten);
 * hier nur die Werte, die im Redesign anders sind (helle Fläche als Standard).
 * `#app-crm.crm` schlägt die Werte der klassischen Ansicht (`:root[data-theme] #emp-modal`).
 * ============================================================ */
#app-crm.crm #emp-modal {
  --mp-avatar-bg: #E3EEFA;
  --mp-avatar-text: #0057A0;
  --mp-ki-bg: #FFEDE0;
  --mp-ki-border: #F5B68A;
  --mp-ki-text: #A3460A;
  --mp-ki-hover: #FFE1CC;
  --emp-level-quiet-bg: var(--bg-surface-3, #EEF1F5);
  --emp-level-quiet-text: var(--text-1);
  --mp-link: var(--ad-blue);
  --mp-focus: var(--ad-blue);
  --emp-save-quiet-bg: #8FC1EC;
  --emp-save-quiet-text: #FFFFFF;
}
#app-crm.crm.dark #emp-modal,
html[data-theme="dark"] #app-crm.crm #emp-modal {
  --mp-avatar-bg: #16324F;
  --mp-avatar-text: #9CC9F5;
  --mp-ki-bg: #3A2312;
  --mp-ki-border: #9A5420;
  --mp-ki-text: #F5A86A;
  --mp-ki-hover: #4A2C16;
  --emp-level-quiet-bg: rgba(255, 255, 255, .10);
  --emp-save-quiet-bg: #2B4F73;
  --emp-save-quiet-text: #C9DDF0;
}
.crm #emp-modal .hs-level-pick { border-color: var(--border-strong); border-radius: var(--r-sm, 6px); }
.crm #emp-modal .hs-level-opt { border-color: var(--border-strong); }
.crm #emp-modal .cre--mask .cre-add--wide { background: var(--bg-surface); border-color: var(--border-strong); }

/* ============== KLEINE DIALOGE IN DER FORM DER MASKEN (PR1.585, E4 Punkt 6) ==============
   Mittig wie bisher, aber Kopf, Fußzeile, Übergang und Knopfregel des Masken-Panels.
   Maße aus dem abgenommenen Entwurf (`.dlg`/`.opts`): Karte 12 px Radius, Kopf und Fuß
   12/14 bzw. 10/14, Titel 14,5 px fett, Liste 9 px Radius mit Zeilen 6/10.
   Bewegung: Öffnen 240 ms, Schließen per Klick 160 ms, Esc und „Bewegung reduzieren" sofort
   (Dauern setzt mask-dialog.js als --md-open-ms / --md-close-ms). */
.crm .mask-dialog-overlay { animation: mdScrimIn var(--md-open-ms, 240ms) var(--ease-out, ease-out) both; }
.crm .mask-dialog-overlay .modal.mask-dialog { animation: mdPopIn var(--md-open-ms, 240ms) var(--ease-out, ease-out) both; }
.crm .mask-dialog-overlay.is-closing { pointer-events: none; animation: mdScrimOut var(--md-close-ms, 160ms) var(--ease-in, ease-in) both; }
.crm .mask-dialog-overlay.is-closing .modal.mask-dialog { animation: mdPopOut var(--md-close-ms, 160ms) var(--ease-in, ease-in) both; }
.crm .mask-dialog-overlay.is-instant,
.crm .mask-dialog-overlay.is-instant .modal.mask-dialog { animation: none; }
@keyframes mdScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mdScrimOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mdPopIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mdPopOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .crm .mask-dialog-overlay,
  .crm .mask-dialog-overlay .modal.mask-dialog,
  .crm .mask-dialog-overlay.is-closing,
  .crm .mask-dialog-overlay.is-closing .modal.mask-dialog { animation: none; }
}

.crm .modal.mask-dialog {
  max-height: 86vh;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(14, 23, 38, .10), 0 1px 3px rgba(14, 23, 38, .06);
  display: flex; flex-direction: column; overflow: hidden;
}
.crm .mask-dialog [hidden] { display: none !important; }
.crm .mask-dialog .md-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.crm .mask-dialog .md-title { flex: 1; min-width: 0; font-size: var(--fs-ui); font-weight: 700; color: var(--text-1); }
.crm .mask-dialog .md-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -4px -6px -4px 0; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-3); cursor: pointer;
}
.crm .mask-dialog .md-close:hover { background: var(--bg-surface-2); color: var(--text-1); }
.crm .mask-dialog .md-close:focus-visible { outline: 2px solid var(--focus, var(--primary)); outline-offset: 1px; }
.crm .mask-dialog .md-body { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.crm .mask-dialog .md-intro { margin: 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--text-3); }
.crm .mask-dialog .md-intro strong { color: var(--text-2); font-weight: 600; }
.crm .mask-dialog .md-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}
.crm .mask-dialog .md-foot-note { flex: 1 1 auto; min-width: 0; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.crm .mask-dialog .md-foot-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.crm .mask-dialog .md-foot .btn { font-size: var(--fs-meta); font-weight: 600; padding: 5px 10px; border-radius: 7px; min-height: 0; }
.crm .mask-dialog .md-foot .btn-ghost { border-color: transparent; background: none; color: var(--text-2); }
.crm .mask-dialog .md-foot .btn-ghost:hover { background: var(--bg-surface-2); color: var(--text-1); }
.crm .mask-dialog .md-foot .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Leer: Hauptknopf blass, aber als Blau erkennbar (wie „Speichern" im Masken-Panel). */
.crm .mask-dialog .md-foot .btn-primary:disabled { opacity: .45; cursor: not-allowed; }

/* Rumpf der Gründe-Dialoge */
.crm .mask-dialog .lr-body { display: flex; flex-direction: column; gap: 10px; }
.crm .mask-dialog .lr-feld { margin: 0; gap: 4px; }
.crm .mask-dialog .lr-feld > label { font-size: var(--fs-meta); font-weight: 600; color: var(--text-1); }
.crm .mask-dialog .lr-feld .form-control { padding: 8px 11px; font-size: var(--fs-ui); border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-surface); color: var(--text-1); }
.crm .mask-dialog .lr-feld .form-control::placeholder { color: var(--text-3); }
.crm .mask-dialog .lr-feld textarea.lr-note { min-height: 40px; height: 40px; resize: vertical; }
.crm .mask-dialog .md-question { font-size: var(--fs-meta); font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.crm .mask-dialog .md-pflicht { display: none; }
.crm .mask-dialog .md-reasons { border-color: var(--border); }
.crm .mask-dialog .md-reason { color: var(--text-1); border-bottom-color: var(--border); }
.crm .mask-dialog .md-reason:hover:not(.is-on) { background: var(--bg-surface-2); }
.crm .mask-dialog .md-reason.is-on { background: var(--tint-blue); color: var(--ad-blue-700); }
.crm.dark .mask-dialog .md-reason.is-on,
html[data-theme="dark"] .crm .mask-dialog .md-reason.is-on { color: var(--ad-blue-300); }
.crm .mask-dialog .md-reason.is-on .md-radio { border-color: var(--primary); background: var(--bg-surface); }

/* Statische Masken aus index.html (Event) und die Statusmeldung tragen die alte Gliederung
   (.modal-header/.modal-footer) — dieselbe Form über `mask-dialog--legacy`. */
.crm .mask-dialog--legacy .modal-header { padding: 12px 14px; border-bottom: 1px solid var(--border); align-items: center; }
.crm .mask-dialog--legacy .modal-footer { padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg-surface); gap: 8px; flex-wrap: wrap; }
.crm .mask-dialog--legacy .modal-footer .btn-secondary#event-cancel,
.crm .mask-dialog--legacy .modal-footer .edit-guard-cancel-btn { border-color: transparent; background: none; color: var(--text-2); }
.crm .mask-dialog .mp-menu { position: relative; }
.crm .mask-dialog .mp-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; padding: 4px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(15, 20, 30, .16); z-index: 5;
}
.crm .mask-dialog .mp-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-1); text-align: left; cursor: pointer;
}
.crm .mask-dialog .mp-menu-item:hover,
.crm .mask-dialog .mp-menu-item:focus-visible { background: var(--bg-surface-2); outline: none; }
.crm .mask-dialog .mp-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.crm .mask-dialog .mp-menu-item.is-danger { color: var(--danger); }
/* Rückfrage beim Schließen (Ocker), ersetzt in der Fußzeile kurz alles andere. */
.crm .mask-dialog .mp-ask,
.crm .mask-dialog .srm-confirm {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 100%;
  padding: 8px 12px; border: 1px solid var(--ocker-fill); border-radius: var(--r-md);
  background: var(--ocker-surface); color: var(--ocker-on-surface);
}
.crm .mask-dialog .mp-ask-text,
.crm .mask-dialog .srm-confirm-text { font-weight: 600; color: var(--ocker-on-surface); margin: 0; }
.crm .mask-dialog .mp-ask-actions,
.crm .mask-dialog .srm-confirm-actions { display: flex; gap: 8px; }
.crm .mask-dialog .mp-ask .btn-ghost,
.crm .mask-dialog .srm-confirm .btn-ghost { color: var(--ocker-on-surface); background: none; border-color: transparent; }
.crm .mask-dialog .mp-ask .btn-secondary,
.crm .mask-dialog .srm-confirm .btn-secondary { background: var(--bg-surface); color: var(--text-1); border: 1px solid var(--border-strong); }
.crm .modal-overlay.is-asking .mask-dialog .modal-footer > :not(.mp-ask),
.crm .mask-dialog .srm-foot.is-asking > :not(.srm-confirm) { display: none !important; }
.crm .mask-dialog .lr-feld { display: flex; flex-direction: column; }
.crm .mask-dialog .lr-feld .form-control { width: 100%; box-sizing: border-box; }
.crm .mask-dialog .lr-hilfe { font-size: var(--fs-meta); font-weight: 400; color: var(--text-3); }
/* Event (statische Maske): Fußzeile hat schon „Abbrechen"/„Speichern" — die Knöpfe des
   Bearbeiten-Wächters wären doppelt. „Rückgängig" steht als Kürzel bereit (Strg/⌘+Z). */
.crm #event-modal.mask-dialog-overlay .modal-footer .edit-guard-undo-btn,
.crm #event-modal.mask-dialog-overlay .modal-footer .edit-guard-cancel-btn,
.crm #event-modal.mask-dialog-overlay .modal-footer .edit-guard-save-btn { display: none !important; }
.crm .mask-dialog--legacy .modal-header .btn-icon#event-modal-close { color: var(--text-3); border: 0; background: transparent; }

.crm .mask-dialog .md-kbd-key { display: inline-flex; align-items: center; gap: 1px; }
.crm .mask-dialog .md-kbd-key .ic { width: 12px; height: 12px; }
/* PR1.585 Gate-Nachzug 1 — Titel 15 px wie E4; Notiz ohne Ziehgriff; Statusmeldung: × schlicht,
   „Abbrechen" als Textknopf ohne Rand (Knopfregel E4 Punkt 5). */
.crm .mask-dialog .md-title { font-size: var(--fs-body); }
.crm .mask-dialog .lr-feld textarea.lr-note { resize: none; }
.crm .mask-dialog--legacy .modal-header .md-close { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--text-3); }
.crm .mask-dialog--legacy .modal-header .md-close svg { width: 14px; height: 14px; }
.crm .mask-dialog .srm-foot [data-srm-cancel] { border-color: transparent; background: none; color: var(--text-2); box-shadow: none; }
.crm .mask-dialog .srm-foot [data-srm-cancel]:hover { background: var(--bg-surface-2); color: var(--text-1); }

/* ── PR1.703 (#1015) — Dialog „Report als PowerPoint“ ────────────────────────
   Hülle der kleinen Dialoge (#888) mit den Maßen der Vorlage K2–K4, Legende 2
   (design/mockups/vorstart-04-11/entwuerfe.html, .modal/.opt/.cb/.btn):
   700 px breit, Radius 14, Innenabstand 24/26, keine Trennlinien, Titel 20 px fett. */
.crm .mask-dialog.dex-dialog {
  border: 0; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 30, 60, .25);
  padding: 24px 26px;
}
.crm .dex-dialog .md-head { padding: 0; border-bottom: 0; }
.crm .dex-dialog .md-title { font-size: var(--fs-title); font-weight: 700; line-height: 1.3; }
.crm .dex-dialog .md-close { width: 28px; height: 28px; margin: 0 -6px 0 0; }
.crm .dex-dialog .md-close svg { width: 14px; height: 14px; }
.crm .dex-dialog .md-body { padding: 0; gap: 0; overflow: visible; }
.crm .dex-dialog .md-intro { margin: 3px 0 14px; line-height: 1.4; }
.crm .dex-dialog .md-foot { padding: 18px 0 0; border-top: 0; gap: 10px; }
.crm .dex-dialog .md-foot-note { display: none; }
.crm .dex-dialog .md-foot-actions { gap: 10px; }
.crm .dex-dialog .md-foot .btn {
  font-size: var(--fs-ui); font-weight: 600; padding: 8px 14px; border-radius: 8px;
}
.crm .dex-dialog .md-foot .btn-secondary { background: var(--bg-surface); border: 1px solid var(--border-strong); color: var(--text-1); }
.crm .dex-dialog .md-foot .btn-secondary:hover { background: var(--bg-hover); }
.crm .dex-dialog .md-foot .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.crm .dex-dialog .md-foot .btn:focus-visible { outline: 2px solid var(--focus, var(--primary)); outline-offset: 2px; }

/* Optionen: umrandete Karten, gewählt = blauer Rand + hellblaue Fläche */
.crm .dex-optionen { display: flex; flex-direction: column; gap: 10px; }
.crm .dex-opt-wrap { border: 1.5px solid var(--border); border-radius: 10px; }
.crm .dex-optionen > .dex-opt { border: 1.5px solid var(--border); border-radius: 10px; }
.crm .dex-optionen > .dex-opt.is-on,
.crm .dex-opt-wrap.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 4%, var(--bg-surface)); }
.crm .dex-opt {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; cursor: pointer;
}
.crm .dex-opt-wrap .dex-opt { padding-bottom: 0; }
.crm .dex-radio-input, .crm .dex-cb-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.crm .dex-radio {
  flex: none; width: 18px; height: 18px; margin-top: 2px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg-surface);
}
.crm .dex-opt.is-on .dex-radio { border: 5px solid var(--primary); }
.crm .dex-radio-input:focus-visible + .dex-radio,
.crm .dex-cb-input:focus-visible + .dex-cb { outline: 2px solid var(--focus, var(--primary)); outline-offset: 2px; }
.crm .dex-opt-text { display: flex; flex-direction: column; min-width: 0; }
.crm .dex-opt-titel { font-size: var(--fs-ui); font-weight: 700; color: var(--text-1); }
.crm .dex-opt-sub { margin-top: 3px; font-size: var(--fs-meta); color: var(--text-3); }

/* Kästchen-Raster: zwei Spalten, spaltenweise gefüllt, eingerückt unter den Optionstext */
.crm .dex-raster {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column;
  gap: 2px 18px; margin: 10px 16px 14px 42px;
}
.crm .dex-cb-row {
  position: relative; display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 8px; font-size: var(--fs-ui); color: var(--text-1); cursor: pointer;
}
.crm .dex-cb-row:hover { background: var(--bg-hover); }
.crm .dex-cb {
  flex: none; width: 18px; height: 18px; box-sizing: border-box;
  border-radius: 4px; border: 2px solid var(--border-strong); background: var(--bg-surface);
  display: inline-grid; place-items: center;
}
.crm .dex-cb-input:checked + .dex-cb { background: var(--primary); border-color: var(--primary); }
.crm .dex-cb-input:checked + .dex-cb::after {
  content: ""; width: 5px; height: 9px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Zeitraum: graues Label + Auswahlfeld im Knopf-Look mit ⌄ */
.crm .dex-zeitraum { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: var(--fs-ui); }
.crm .dex-zeitraum label { color: var(--text-2); }
.crm .dex-select-wrap { position: relative; display: inline-flex; }
.crm .dex-select-wrap::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 5px; height: 5px; margin-top: -4px;
  border: solid var(--text-1); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}
.crm .dex-select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--text-1);
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 26px 8px 14px; cursor: pointer;
}
.crm .dex-select:focus-visible { outline: 2px solid var(--focus, var(--primary)); outline-offset: 2px; }
.crm .dex-hinweis, .crm .dex-fehler { margin: 12px 0 0; font-size: var(--fs-meta); }
.crm .dex-hinweis { color: var(--text-3); }
.crm .dex-fehler { color: var(--danger, #C4353A); }

/* Kopfzeile: Export-Menü (Als PowerPoint … · Drucken) */
.crm .dash-export-wrap { position: relative; display: inline-flex; }
.crm .dash-export-btn .dash-export-pfeil { width: 5px; height: 5px; margin: -3px 0 0 4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
@media (max-width: 720px) {
  .crm .dex-raster { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; margin-left: 16px; }
}
/* Zeitraum über den Auswahl-Baustein (crm-select.js): Feld wie in der Vorlage halbfett, Rand + Radius 8. */
.crm .dex-zeitraum .cs-field { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); border-color: var(--border-strong); border-radius: 8px; }
.crm .dex-zeitraum .cs-value { font-weight: 600; }

/* ── PR1.682 (#981) — Panel „<Name> auf Vorhaben setzen" (Vorlage M4) ─────────────────────
   rem auf die Grundschrift der neuen Ansicht (15 px) gerechnet: 1 px der Vorlage = 1/15 rem.
   Schmale Variante der Masken-Hülle (560 px, auf-vorhaben-panel.js setzt --mp-width).
   Maße aus dem Prototyp (prototyp.html, .drawer/.cap-meter/.meter/.rr/.stepper). */
.crm .av-panel {
  --av-ok: var(--ad-green-900);
  --av-over: var(--ad-red-700);
  --av-seg2: color-mix(in srgb, var(--ad-blue) 58%, white);
  --av-seg3: color-mix(in srgb, var(--ad-blue) 32%, white);
  --av-on: color-mix(in srgb, var(--tint-blue) 50%, var(--bg-surface));
}
.crm.dark .av-panel, html[data-theme="dark"] .crm .av-panel {
  --av-ok: var(--ad-green-700);
  --av-over: var(--ad-red-300);
  --av-seg2: color-mix(in srgb, var(--ad-blue) 60%, var(--bg-surface));
  --av-seg3: color-mix(in srgb, var(--ad-blue) 35%, var(--bg-surface));
  --av-on: var(--tint-blue);
}
.crm .modal-overlay.mask-panel-overlay.av-overlay { inset: var(--mp-top, 0rem) 0 0 var(--mp-left, 0rem); background: rgba(14, 23, 38, .32); }
@media (max-width: 59.9375rem) { .crm .modal-overlay.mask-panel-overlay.av-overlay { inset: 0; } }
.crm .mask-panel.av-panel .mp-head { padding: 1.2rem 1.3333rem 0; border-bottom: 0; }
.crm .mask-panel.av-panel .mp-title { font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.crm .av-unter { margin: 0.1333rem 0 0; padding: 0 1.3333rem 0.8rem; font-size: var(--fs-meta); color: var(--text-2); border-bottom: 0.0667rem solid var(--border); }
.crm .mask-panel.av-panel .av-body { padding: 0.9333rem 1.3333rem; }

/* Balken „Diese Woche danach" */
.crm .av-meter { border: 0.0667rem solid var(--border); border-radius: 0.8rem; padding: 0.8rem 0.9333rem; margin-bottom: 0.9333rem; }
.crm .av-meter-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .av-meter-row b { color: var(--text-1); font-size: var(--fs-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.crm .av-bar { display: flex; height: 0.9333rem; border-radius: 66.6rem; background: var(--bg-surface-3); overflow: hidden; margin: 0.5333rem 0 0.4rem; }
.crm .av-seg { display: block; height: 100%; transition: width 200ms var(--ease-out, ease-out); }
.crm .av-seg + .av-seg { box-shadow: inset 0.1333rem 0 0 var(--bg-surface); }
.crm .av-seg.is-basis, .crm .av-lg i.is-basis { background: var(--text-3); }
.crm .av-seg.is-r0, .crm .av-lg i.is-r0 { background: var(--ad-blue); }
.crm .av-seg.is-r1, .crm .av-lg i.is-r1 { background: var(--av-seg2); }
.crm .av-seg.is-r2, .crm .av-lg i.is-r2 { background: var(--av-seg3); }
.crm .av-seg.is-r3, .crm .av-lg i.is-r3 { background: var(--ad-blue-800); }
.crm .av-lg i.is-frei { background: var(--bg-surface-3); }
.crm .av-meter.is-over .av-seg { background: var(--av-over); }
.crm .av-meter.is-over .av-meter-row b { color: var(--av-over); }
.crm .av-lg { display: flex; flex-wrap: wrap; gap: 0.2667rem 0.9333rem; font-size: var(--fs-label); color: var(--text-2); }
.crm .av-lg i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 0.2rem; margin-right: 0.3333rem; vertical-align: -0.0667rem; }
.crm .av-lg .av-over { color: var(--av-over); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .crm .av-seg { transition: none; } }

/* Rollenzeilen */
.crm .av-row {
  display: grid; grid-template-columns: 1.2rem 1.7333rem minmax(0, 1fr) 7.4667rem; gap: 0.6667rem; align-items: center;
  border: 0.0667rem solid var(--border); border-radius: 0.7333rem; padding: 0.6rem 0.7333rem; margin-bottom: 0.4667rem; font-size: var(--fs-meta);
  background: var(--bg-surface);
}
.crm .av-row.is-on { border-color: var(--ad-blue); background: var(--av-on); }
.crm .av-cb {
  appearance: none; -webkit-appearance: none; margin: 0; width: 1.0667rem; height: 1.0667rem; border-radius: 0.2667rem;
  border: 0.1001rem solid var(--border-strong); background: var(--bg-surface); display: inline-grid; place-items: center; cursor: pointer;
}
.crm .av-cb:checked { background: var(--ad-blue); border-color: var(--ad-blue); }
.crm .av-cb:checked::after {
  content: ''; width: 0.5333rem; height: 0.2667rem; border-style: solid; border-color: var(--text-inv); border-width: 0 0 0.1333rem 0.1333rem;
  transform: rotate(-45deg) translate(0.0667rem, -0.0667rem);
}
.crm .av-cb:focus-visible, .crm .av-step-btn:focus-visible, .crm .av-fte:focus-visible,
.crm .av-suchen:focus-visible, .crm .av-treffer-btn:focus-visible { outline: 0.0667rem solid var(--focus); outline-offset: 0.1333rem; }
.crm .av-logo { width: 1.4667rem; height: 1.4667rem; display: grid; place-items: center; }
.crm .av-logo .av-logo-img { width: 1.4667rem; height: 1.4667rem; }
/* PR1.736-Nachzug — `.av-mono` (Buchstaben-Kachel) entfallen: jede Zeile traegt accountLogoHtml. */
.crm .av-txt { min-width: 0; cursor: pointer; }
.crm .av-txt b { display: block; font-weight: 600; color: var(--text-1); }
.crm .av-txt small { display: block; font-size: var(--fs-label); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .av-fit { display: block; font-size: var(--fs-label); font-weight: 600; color: var(--av-ok); }
.crm .av-ohne { display: block; font-size: var(--fs-label); color: var(--text-3); font-style: italic; }
.crm .av-step {
  display: flex; align-items: center; justify-content: space-between;
  border: 0.0667rem solid var(--border-strong); border-radius: 0.5333rem; padding: 0.1333rem 0.2667rem; background: var(--bg-surface);
}
.crm .av-step-btn {
  width: 1.4667rem; height: 1.6rem; padding: 0; border: 0; border-radius: 0.3333rem; background: none;
  color: var(--text-3); font-size: var(--fs-ui); line-height: 1; cursor: pointer;
}
.crm .av-step-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .av-fte {
  width: 3.4em; min-width: 0; border: 0; background: none; text-align: center;
  font: inherit; font-size: var(--fs-meta); font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums;
}
.crm .av-max { grid-column: 3 / -1; justify-self: end; font-size: var(--fs-label); color: var(--text-3); }
.crm .av-mehr { margin: 0 0 0.2667rem; }

/* Hinweis, Suche, leer, lädt */
.crm .av-hinweis { margin: 0.5333rem 0 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .av-leer { margin: 0.2667rem 0 0.5333rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .av-suchen {
  margin-top: 0.6667rem; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-meta);
  color: var(--primary-text, var(--ad-blue-700)); cursor: pointer; text-decoration: underline; text-underline-offset: 0.1333rem;
}
.crm .av-suche { margin-top: 0.6667rem; }
.crm .av-suche-in {
  width: 100%; box-sizing: border-box; padding: 0.4667rem 0.6667rem; border: 0.0667rem solid var(--border-strong); border-radius: 0.5333rem;
  background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-meta);
}
.crm .av-treffer { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.crm .av-treffer-btn {
  display: block; width: 100%; text-align: left; padding: 0.4667rem 0.6667rem; border: 0; border-radius: 0.5333rem;
  background: none; font: inherit; font-size: var(--fs-meta); color: var(--text-1); cursor: pointer;
}
.crm .av-treffer-btn:hover { background: var(--bg-hover); }
.crm .av-treffer-btn:disabled { color: var(--text-3); cursor: default; }
.crm .av-treffer-btn small { display: block; font-size: var(--fs-label); color: var(--text-3); }
.crm .av-treffer-leer { margin: 0.4rem 0 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .av-ph { display: block; border-radius: 0.2667rem; background: var(--bg-surface-3); }
.crm .av-ph-cb { width: 1.0667rem; height: 1.0667rem; }
.crm .av-ph-logo { width: 1.4667rem; height: 1.4667rem; }
.crm .av-ph-l1 { width: 60%; height: 0.6667rem; margin-bottom: 0.4rem; }
.crm .av-ph-l2 { width: 85%; height: 0.5333rem; }
.crm .av-ph-step { height: 1.7333rem; border-radius: 0.5333rem; }
.crm .av-meter.is-loading .av-ph { width: 40%; height: 0.5333rem; }

/* Fußzeile */
.crm .mask-panel.av-panel .av-foot { padding: 0.8rem 1.3333rem; gap: 0.6667rem; }
.crm .av-foot-txt { flex: 1; min-width: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .av-fehler { color: var(--av-over); font-weight: 600; }

/* Einstieg an der Namenszelle im Einsatzplan: bei Überfahren und Tastaturfokus, auf Touch immer. */
.crm .crm-ep-name:has(.crm-ep-vorhaben) .crm-ep-namebox { padding-right: 2rem; }
.crm .crm-ep-vorhaben {
  position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  width: 1.7333rem; height: 1.7333rem; display: grid; place-items: center; padding: 0;
  border: 0.0667rem solid var(--border-strong); border-radius: 0.4rem; background: var(--bg-surface);
  color: var(--text-2); cursor: pointer; opacity: 0;
}
.crm .crm-ep-vorhaben svg { width: 1rem; height: 1rem; }
.crm .crm-ep-person:hover .crm-ep-vorhaben,
.crm .crm-ep-name:focus-within .crm-ep-vorhaben { opacity: 1; }
.crm .crm-ep-vorhaben:hover { color: var(--text-1); background: var(--bg-hover); }
.crm .crm-ep-vorhaben:focus-visible { outline: 0.1333rem solid var(--focus); outline-offset: 0.0667rem; }
.crm .crm-ep-vorhaben:disabled { cursor: not-allowed; color: var(--text-3); }
@media (hover: none) { .crm .crm-ep-vorhaben { opacity: 1; } }
.crm .mask-panel.av-panel .av-foot .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
/* Design-Treue-Nachzug (Prüfer 2): Laufweite und Zeilenhöhen wie Vorlage M4. */
.crm .mask-panel.av-panel .mp-title { font-family: var(--f-sans); font-stretch: normal; letter-spacing: 0; line-height: 1.8333rem; }
.crm .av-txt b, .crm .av-txt small, .crm .av-fit, .crm .av-ohne { line-height: 1.2rem; }
.crm .mask-panel.av-panel .av-foot .btn { font-size: var(--fs-meta); padding-inline: 0.8rem; height: 2.2667rem; }
.crm .av-step-btn { font-size: var(--fs-ui); color: var(--text-2); }
/* Gate R1 (Coordinator): Zeilenhöhen der Balkenkarte und des Hinweises wie Vorlage M4. */
.crm .av-meter-row b, .crm .av-lg, .crm .av-hinweis { line-height: 1.45; }

/* PR1.744 (#1077) — Verantwortliche in „Kunde bearbeiten" (Vorlage V13, Legende 4/5; 1:1 bei
   1920, 1 rem = 15 px): ein Personenfeld je Rolle, Person aus Apollon oder Name ohne Konto.
   Feld 40 hoch. Beim Öffnen tritt das Suchfeld (gleiche Höhe, 1 px blau + weicher Ring) an die
   Stelle des Felds, die Liste steht als Karte darunter IM FLUSS — Maître, Vertrieb und Hinweis
   rücken nach unten statt überdeckt zu werden. Nur Tokens; keine Bewegung (selten genutzt). */
.crm #account-modal .cs--person-kopf .cs-field { height: auto; min-height: 2.6667rem; padding-block: .3333rem; padding-right: .8rem; }
.crm #account-modal .cs--person-kopf .cs-control:has(.cs-clear:not([hidden])) .cs-field { padding-right: 2.4rem; }
.crm .cs--person-kopf .cs-chevron { display: none; }
.crm #account-modal .cs--person-kopf .cs-clear,
.crm .cs--person-kopf .cs-search-clear {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: var(--r-xs);
  background: none; color: var(--text-3); cursor: pointer;
}
.crm #account-modal .cs--person-kopf .cs-clear { right: .5333rem; margin-top: -.8rem; }
.crm #account-modal .cs--person-kopf .cs-clear[hidden] { display: none; }
.crm #account-modal .cs--person-kopf .cs-clear:hover,
.crm .cs--person-kopf .cs-search-clear:hover { background: var(--bg-surface-3); color: var(--text-1); }
.crm .cs--person-kopf .cs-clear svg,
.crm .cs--person-kopf .cs-search-clear svg { width: .5333rem; height: .5333rem; }

/* Wert im Feld: Name und Competence Center werden nie abgeschnitten. Passt beides nicht in eine
   Zeile, rutscht das CC als Ganzes darunter; ein Name länger als das Feld bricht um. Das Feld
   wächst nur dann über 40 px (enge Spalten, Langnamen). */
.crm .cs--person-kopf .cs-value { display: flex; align-items: center; gap: .5333rem; min-width: 0; overflow: visible; white-space: normal; text-overflow: clip; }
.crm .cs--person-kopf .cs-value .cs-avatar { width: 1.4667rem; height: 1.4667rem; font-size: var(--fs-label); }
.crm .cs--person-kopf .cs-value-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5333rem; row-gap: 0; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.crm .cs--person-kopf .cs-value-name { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-ui); }
.crm .cs--person-kopf .cs-value-meta { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-label); color: var(--text-3); }
.crm .cs-avatar.is-frei { background: var(--bg-surface-3); color: var(--text-3); }
.crm .cs-option.is-active .cs-avatar.is-frei { background: var(--bg-surface-3); }

/* Offen: das Feld weicht, das Suchfeld steht an seiner Stelle; Liste im Fluss darunter. */
.crm .cs--person-kopf.is-open .cs-control { display: none; }
.crm .cs--person-kopf .cs-pop {
  position: static; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible;
}
.crm .cs--person-kopf .cs-searchbar {
  box-sizing: border-box; height: 2.6667rem; margin: 0 0 .4rem; padding: 0 .4rem 0 .8rem; gap: .5333rem;
  border: .0667rem solid var(--ad-blue); border-radius: var(--r-sm); background: var(--bg-surface);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ad-blue) 22%, transparent);
}
.crm .cs--person-kopf .cs-searchbar::before {
  content: ""; flex: none; width: 1rem; height: 1rem; background: var(--text-2);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><circle cx='7' cy='7' r='4.5'/><path d='M10.5 10.5L14 14'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><circle cx='7' cy='7' r='4.5'/><path d='M10.5 10.5L14 14'/></svg>") center / contain no-repeat;
}
/* Rand + Ring der Leiste sind der Fokus — das Eingabefeld selbst bleibt rahmenlos. */
.crm #account-modal .cs--person-kopf .cs-search,
.crm #account-modal .cs--person-kopf .cs-search:focus,
.crm #account-modal .cs--person-kopf .cs-search:focus-visible {
  height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none;
  background: transparent; font-size: var(--fs-ui);
}
.crm .cs--person-kopf .cs-count { display: none; }
.crm .cs--person-kopf .cs-list {
  padding: .4rem; border: .0625rem solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-surface); box-shadow: var(--shadow-2); max-height: 21.3333rem;
}
.crm .cs--person-kopf .cs-group-label { padding: .2667rem .5333rem .4rem; font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); }
.crm .cs--person-kopf .cs-option { min-height: 3.2rem; padding: .4rem .5333rem; gap: .6667rem; }
.crm .cs--person-kopf .cs-option .cs-avatar { width: 1.8667rem; height: 1.8667rem; }
.crm .cs--person-kopf .cs-option .cs-label { font-size: var(--fs-ui); }
.crm .cs--person-kopf .cs-text .cs-label { font-weight: 600; }
.crm .cs--person-kopf .cs-option.is-active { box-shadow: none; }
.crm .cs--person-kopf .cs-empty { padding: .5333rem .5333rem .4rem; font-size: var(--fs-label); color: var(--text-3); }
.crm .cs--person-kopf .cs-hint { flex: none; font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.crm .cs--person-kopf .cs-create--frei { position: relative; margin-top: .8rem; border-top: 0; color: var(--text-1); }
/* Trennlinie über der Freitext-Zeile, mit Luft zu beiden Seiten. */
.crm .cs--person-kopf .cs-create--frei::before {
  content: ""; position: absolute; left: -.4rem; right: -.4rem; top: -.4667rem;
  border-top: .0667rem solid var(--border);
}
.crm .cs--person-kopf .cs-create--frei.is-active { background: var(--tint-blue); }
.crm .cs--person-kopf .cs-create--frei .cs-text .cs-meta { font-size: var(--fs-label); color: var(--text-2); white-space: normal; overflow: visible; }
.crm .cs--person-kopf .cs-kbd {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 1.4rem; height: 1.0667rem; padding: 0 .2667rem;
  border: .0625rem solid var(--border-strong); border-radius: var(--r-xs);
  background: var(--bg-surface); color: var(--text-3); font: inherit; font-size: var(--fs-label);
}
.crm #account-modal .acc-people--v13 { row-gap: 1.0667rem; }
.crm #account-modal .acc-responsible-hint { margin: .8rem 0 0; font-size: var(--fs-label); line-height: 1.45; color: var(--text-3); }

/* PR1.747 — Opportunity als Verlängerung eines Projekts (Vorlage V15, Legende 1–4).
   Art-Wahl als inhaltsbreiter Zweier-Umschalter, Projektliste aufklappbar unter dem Feld,
   Zeitraum = das bestehende Feld (eingehängt), Rollenliste mit Häkchen. */
.crm .mask-panel .opp-renewal-host { margin: 4px 0 8px; }
.crm .mask-panel .rn-block { display: flex; flex-direction: column; gap: 20px; }
.crm .mask-panel .rn-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.crm .mask-panel .rn-label { font-size: var(--fs-meta); font-weight: 600; color: var(--text-1); line-height: 1.3; }
.crm .mask-panel .rn-count { font-weight: 400; color: var(--text-3); margin-left: 4px; }
.crm .mask-panel .rn-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); overflow: hidden; }
.crm .mask-panel .rn-seg-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.crm .mask-panel .rn-seg-btn { position: relative; margin: 0; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; background: transparent; color: var(--text-1); font-size: var(--fs-meta); font-weight: 500; cursor: pointer; }
.crm .mask-panel .rn-seg-btn + .rn-seg-btn { border-left: 1px solid var(--border); }
.crm .mask-panel .rn-seg-btn.is-on { background: var(--tint-blue); color: var(--primary-text, var(--ad-blue-700)); font-weight: 600; }
.crm .mask-panel .rn-seg-btn:hover:not(.is-on) { background: var(--bg-hover); }
.crm .mask-panel .rn-seg-btn:has(.rn-seg-input:disabled) { cursor: default; }
.crm .mask-panel .rn-seg-btn:has(.rn-seg-input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; z-index: 1; }
.crm .mask-panel .rn-combo-btn:focus-visible, .crm .mask-panel .rn-list:focus-visible, .crm .mask-panel .rn-role-cb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crm .mask-panel .rn-combo { position: relative; }
.crm .mask-panel .rn-combo-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-input); color: var(--text-1); text-align: left; cursor: pointer; }
.crm .mask-panel .rn-combo.is-open .rn-combo-btn, .crm .mask-panel .rn-combo-btn:focus-visible { border-color: var(--ad-blue); box-shadow: 0 0 0 1px var(--ad-blue); }
.crm .mask-panel .rn-combo-name { font-size: var(--fs-ui); font-weight: 600; overflow-wrap: anywhere; }
.crm .mask-panel .rn-combo-end { font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.crm .mask-panel .rn-combo-ph { font-size: var(--fs-ui); color: var(--text-3); }
/* Duenner Chevron wie .cs-chevron der uebrigen Auswahlfelder (Vorlage V15), offen nach oben. */
.crm .mask-panel .rn-combo-chevron { flex: none; margin: -4px 3px 0 auto; width: 7px; height: 7px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(45deg); }
.crm .mask-panel .rn-combo.is-open .rn-combo-chevron { transform: rotate(225deg); margin-top: 4px; }
.crm .mask-panel .rn-combo-logo, .crm .mask-panel .rn-opt-logo { display: inline-flex; flex: none; }
.crm .mask-panel .rn-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 380px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); box-shadow: 0 8px 24px rgb(11 26 43 / 0.12); }
.crm .mask-panel .rn-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.crm .mask-panel .rn-opt:hover, .crm .mask-panel .rn-opt.is-active { background: var(--bg-hover); }
.crm .mask-panel .rn-opt.is-selected { background: var(--tint-blue); }
.crm .mask-panel .rn-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm .mask-panel .rn-opt-name { font-size: var(--fs-meta); font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .mask-panel .rn-opt-sub, .crm .mask-panel .rn-opt-end { font-size: var(--fs-label); color: var(--text-3); }
.crm .mask-panel .rn-opt-end { white-space: nowrap; }
.crm .mask-panel .rn-opt-check { display: inline-flex; color: var(--ad-blue); }
.crm .mask-panel .rn-opt.is-expired .rn-opt-name { color: var(--text-3); font-weight: 500; }
.crm .mask-panel .rn-opt.is-expired .rn-opt-logo { opacity: .5; }
.crm .mask-panel .rn-msg { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .mask-panel .rn-msg--err { color: var(--ad-red-700); }
.crm .mask-panel #opp-range-group.is-renewal { width: 50%; max-width: 50%; min-width: 0; margin: 0; }
.crm .mask-panel #opp-range-group.is-renewal .drp { width: 100%; }
:root[data-theme="dark"] .crm .mask-panel .rn-role-cb { color-scheme: dark; }
.crm .mask-panel #opp-range-group.is-follow-up .drp-dur,
.crm .mask-panel #opp-range-group.is-follow-up #opp-end-hint,
.crm .mask-panel #opp-range-group.is-follow-up #opp-end-mode-hint,
.crm .mask-panel #opp-range-group.is-follow-up #opp-end-reset-btn { display: none !important; }
.crm .mask-panel .drp-followup { font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.crm .mask-panel .rn-role-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); }
.crm .mask-panel .rn-role + .rn-role { border-top: 1px solid var(--border); }
.crm .mask-panel .rn-role-row { display: grid; grid-template-columns: 16px 36px minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 58px; padding: 10px 12px; margin: 0; cursor: pointer; font-weight: 400; }
.crm .mask-panel .rn-role-cb { width: 16px; height: 16px; margin: 0; accent-color: var(--ad-blue); }
.crm .mask-panel .rn-role-av { display: inline-flex; }
.crm .mask-panel .rn-role-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm .mask-panel .rn-role-name { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .mask-panel .rn-role-person { font-size: var(--fs-label); color: var(--text-3); overflow-wrap: anywhere; }
.crm .mask-panel .rn-role-scope { font-size: var(--fs-meta); color: var(--text-2); }
.crm .mask-panel .rn-hint { margin: 0; font-size: var(--fs-label); color: var(--text-2); }
@media (max-width: 1100px) { .crm .mask-panel #opp-range-group.is-renewal { width: 100%; max-width: 100%; } }

/* PR1.776 (#1091) — Gewinn-Dialog einer Verlaengerung (Vorlage V15, Legende 5):
   zwei Wahlkarten, „Anhängen" empfohlen und vorgewaehlt; Fuß mit Verlaufs-Hinweis. */
.crm .modal.rnw-dialog { width: min(640px, 96vw); border-radius: var(--r-lg); }
/* Masse 1:1 aus V15 (640 px breit): Titel 20, Karten-Titel 15, Projektname 14, Rest 13;
   Knoepfe und Marke in der Condensed-Schrift. */
.crm .rnw-head { padding: 19px 22px 0; }
.crm .rnw-title { margin: 0; font-family: var(--f-cond); font-size: var(--fs-title); font-weight: 600; color: var(--text-1); line-height: 1.25; }
.crm .rnw-sub { margin-top: 1px; font-size: var(--fs-meta); line-height: 19px; color: var(--text-2); overflow-wrap: anywhere; }
.crm .rnw-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 20px; overflow-y: auto; }
.crm .rnw-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; padding: 15px 16px 16px 17px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); cursor: pointer; }
.crm .rnw-opt.is-on { border: 2px solid var(--ad-blue); padding: 14px 15px 15px 16px; background: color-mix(in srgb, var(--ad-blue) 3.5%, var(--bg-surface)); }
.crm .rnw-opt:hover:not(.is-on) { background: var(--bg-hover); }
.crm .rnw-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.crm .rnw-radio { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg-surface); box-sizing: border-box; }
.crm .rnw-opt.is-on .rnw-radio { border: 6px solid var(--ad-blue); }
.crm .rnw-opt-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.crm .rnw-opt-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 22px; font-size: var(--fs-body); font-weight: 600; line-height: 20px; color: var(--text-1); }
.crm .rnw-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--scd-ok-surface); color: var(--scd-ok-text);
  font-family: var(--f-cond); font-size: var(--fs-meta); font-weight: 500; }
.crm .rnw-project { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 9px; min-width: 0; }
.crm .rnw-logo { display: inline-flex; align-self: center; }
.crm .rnw-project-text { min-width: 0; line-height: 1.4; }
.crm .rnw-project-name { margin-right: 6px; font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .rnw-dates { display: inline-block; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.crm .rnw-dates strong { color: var(--text-1); font-weight: 600; }
.crm .rnw-roles { display: flex; align-items: flex-start; margin-top: 2px; flex-wrap: wrap; gap: 6px 8px; font-size: var(--fs-meta); color: var(--text-2); }
.crm .rnw-faces { display: inline-flex; align-items: center; }
.crm .rnw-face { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-surface); }
.crm .rnw-face + .rnw-face, .crm .rnw-face + .rnw-face-more { margin-left: -4px; }
.crm .rnw-face-more { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px; background: var(--bg-surface-2); color: var(--text-2); font-size: var(--fs-label); box-shadow: 0 0 0 2px var(--bg-surface); }
.crm .rnw-opt[data-rnw-opt="attach"] { padding-bottom: 14px; }
.crm .rnw-opt[data-rnw-opt="attach"].is-on { padding-bottom: 13px; }
.crm .rnw-opt[data-rnw-opt="create"] { padding-bottom: 14px; }
.crm .rnw-opt[data-rnw-opt="create"].is-on { padding-bottom: 13px; }
.crm .rnw-opt[data-rnw-opt="create"] .rnw-opt-body { gap: 5px; }
.crm .rnw-opt[data-rnw-opt="create"] .rnw-opt-title { min-height: 0; }
.crm .rnw-opt-text { margin: 0; font-size: var(--fs-meta); color: var(--text-2); line-height: 19px; overflow-wrap: anywhere; }
.crm .rnw-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid var(--border); }
.crm .rnw-note { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-meta); color: var(--text-3); }
.crm .rnw-note svg { width: 14px; height: 14px; flex: none; }
.crm .rnw-actions { display: flex; align-items: center; gap: 13px; margin-left: auto; }
.crm .rnw-cancel { border: 0; background: transparent; padding: 8px 10px; border-radius: var(--r-sm); color: var(--text-2); font-family: var(--f-cond); font-size: var(--fs-ui); font-weight: 700; cursor: pointer; }
.crm .rnw-cancel:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .rnw-cancel:focus-visible, .crm .rnw-confirm:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crm .btn.rnw-confirm { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12.5px; font-family: var(--f-cond); font-size: var(--fs-ui); font-weight: 600; line-height: 17px; }

/* BF-191 (#1193) — Verlaengerung ohne Projekt: Hinweis in der Opp-Maske (Art „Neues Vorhaben"),
   Projektauswahl im Gewinn-Dialog, Hinweisleisten auf den Detailseiten (Basis status-due-banner). */
.crm .mask-panel .rn-hint-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--ad-orange); border-radius: var(--r-md); background: var(--tint-warn); }
.crm .mask-panel .rn-hint-title { margin: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--text-1); }
.crm .mask-panel .rn-hint-sug { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0; font-size: var(--fs-meta); color: var(--text-2); min-width: 0; }
.crm .mask-panel .rn-hint-sug-name { font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .mask-panel .rn-hint-sug-end { font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.crm .mask-panel .rn-hint-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crm .rnw-pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crm .rnw-pick-label { font-size: var(--fs-meta); font-weight: 600; color: var(--text-1); }
.crm .rnw-select, .crm .rnh-select { width: 100%; min-width: 0; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-input); color: var(--text-1); font-size: var(--fs-meta); }
.crm .rnw-select:focus-visible, .crm .rnh-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crm .rnh-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 0 1 28rem; min-width: 0; }
.crm .rnh-pick { display: block; flex: 1 1 14rem; min-width: 0; }
.crm .rnh-pick > .cs { display: block; width: 100%; max-width: none; }

/* PR1.776 (#1091) — Projekt-Detail: Karte „Verlängerungen" (Legende 6). */
.crm .prj-renewal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm .prj-renewal + .prj-renewal { border-top: 1px solid var(--border); }
.crm .prj-renewal-btn { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--text-1); }
.crm .prj-renewal-btn:hover .prj-renewal-name { text-decoration: underline; }
.crm .prj-renewal-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.crm .prj-renewal-name { font-size: var(--fs-meta); font-weight: 600; overflow-wrap: anywhere; }
.crm .prj-renewal-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-label); color: var(--text-3); }
.crm .prj-renewal-sum { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* PR1.823 (#1166) — „Projekt verlängern" (schlanke Maske, Optik wie der Gewinn-Dialog V15).
   Felder im 4er-Raster, Team als Liste mit Haekchen „bleibt", Wahl „Schon fix"/„Noch offen". */
.crm .modal.rq-dialog { width: min(680px, 96vw); max-height: min(860px, 94vh); display: flex; flex-direction: column; }
.crm .rq-body { gap: 18px; padding-top: 20px; }
.crm .rq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .crm .rq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crm .rq-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.crm .rq-field label { font-size: var(--fs-label); font-weight: 600; color: var(--text-2); }
.crm .rq-field .input, .crm .rq-role-sel { width: 100%; min-width: 0; box-sizing: border-box; height: 36px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-1);
  font-family: inherit; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.crm .rq-field .input:hover, .crm .rq-role-sel:hover { border-color: var(--text-3); }
.crm .rq-field .input:focus-visible, .crm .rq-role-sel:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ad-blue); }
.crm .rq-field.has-error .input { border-color: var(--danger); }
.crm .rq-err { font-size: var(--fs-label); color: var(--danger); overflow-wrap: anywhere; }
.crm .rq-hint, .crm .rq-empty { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .rq-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--bg-surface)); color: var(--text-1); font-size: var(--fs-meta); }
.crm .rq-alert svg { flex: none; color: var(--danger); }
.crm .rq-sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.crm .rq-sec-h h3 { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .rq-meta { font-size: var(--fs-meta); color: var(--text-3); }
.crm .rq-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); }
.crm .rq-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; min-height: 40px; }
.crm .rq-row + .rq-row { border-top: 1px solid var(--border); }
.crm .rq-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ad-blue); }
.crm .rq-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crm .rq-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; cursor: pointer; }
.crm .rq-name { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .rq-role { font-size: var(--fs-meta); color: var(--text-2); overflow-wrap: anywhere; }
.crm .rq-state { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.crm .rq-row.is-off .rq-name { color: var(--text-3); text-decoration: line-through; }
.crm .rq-row.is-new .rq-who { cursor: default; }
.crm .rq-plus { display: inline-flex; justify-content: center; color: var(--ad-blue); }
.crm .rq-who .rq-role-sel { height: 30px; width: auto; max-width: 100%; padding: 0 8px; font-size: var(--fs-meta); }
.crm .rq-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); cursor: pointer; }
.crm .rq-remove:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .rq-remove:focus-visible, .crm .rq-add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crm .rq-add-host { position: relative; margin-top: 8px; }
.crm .rq-add { display: inline-flex; align-items: center; gap: 6px; }
.crm .rq-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .crm .rq-modes { grid-template-columns: minmax(0, 1fr); } }
.crm .rq-opt .rnw-opt-body { gap: 5px; }
.crm .rq-opt .rnw-opt-title { min-height: 0; }
.crm .prj-renewal-open { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--bg-surface-2); color: var(--text-2); font-size: var(--fs-label); font-weight: 500; vertical-align: 1px; }