/* potenziale.css — Potenziale-Triage-Cockpit im Vertriebstab.

   Die Potenziale-View hat ihre eigene Toolbar im Panel (#vt-panel-potenziale >
   [data-vt-pot-toolbar]). Die Workspace-Toolbar (Scope/Phase/Suche/Filter/Sort)
   gilt hier nicht und wird ausgeblendet:
   - Desktop: der Haupt-ViewSwitcher lebt im Page-Header → Workspace-Toolbar ganz weg.
   - Mobil (<600px): dort wandert der ViewSwitcher in die Toolbar → Toolbar sichtbar
     lassen, nur die Controls ausblenden, damit die Navigation bleibt.
   Muster wie fk-toolbar-hidecontrols (Firmen-Tab, Analyse/Duplikate-Views).

   Layout: Panel ist Flex-Column (layout.css). Kinder: Toolbar (shrink) → Lanes
   (shrink) → Cockpit (flex:1). Das Cockpit ist ein Split — Zeilen-Liste links
   (eigener Scroll), Detail-Reading-Pane rechts (eigener Body-Scroll). <1000px
   klappt der Split zusammen (nur Liste; Zeilen-Klick öffnet das Detail als Modal).

   Farben ausschließlich über die semantischen App-Tokens (tokens.css) — keine
   Hex-Fallbacks für nicht existierende Tokens (Theme-fest). */

.lod-section.vt-view-potenziale > [data-vt-toolbar] { display: none; }

@media (max-width: 599px) {
  .lod-section.vt-view-potenziale > [data-vt-toolbar] { display: flex; }
  .lod-section.vt-view-potenziale > [data-vt-toolbar] .app-toolbar-center > *,
  .lod-section.vt-view-potenziale > [data-vt-toolbar] .app-toolbar-right > *,
  .lod-section.vt-view-potenziale > [data-vt-toolbar] .app-toolbar-left > *:not(.view-switcher) {
    display: none;
  }
}

/* ── Smart-Lanes (Ein-Klick-Einstiege mit Live-Counts) ────────────────────── */
.vt-pot-lanes {
  display: flex; gap: var(--space-2); flex-wrap: wrap; flex-shrink: 0;
  padding: var(--space-3) var(--space-4) 0; overflow-x: auto;
}
/* .app-scope-Präfix: der globale `.app-scope button`-Reset (Spez. 0,1,1) würde
   Rand/Hintergrund sonst plätten (siehe app-scope-button-reset-Regel). */
.app-scope .vt-pot-lane {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--lod-gray-700); font: inherit; font-size: 13px;
  transition: background var(--duration-snappy), border-color var(--duration-snappy), color var(--duration-snappy);
}
.app-scope .vt-pot-lane:hover { border-color: var(--lod-darkblue); background: var(--color-bg-hover); }
.app-scope .vt-pot-lane.is-active { background: var(--lod-darkblue); border-color: var(--lod-darkblue); color: #fff; }
.app-scope .vt-pot-lane:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vt-pot-lane-n {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--color-bg-subtle); color: var(--lod-gray-600);
}
.vt-pot-lane.is-active .vt-pot-lane-n { background: rgba(255, 255, 255, 0.22); color: #fff; }
.vt-pot-lane--due:not(.is-active) .vt-pot-lane-n { background: var(--color-warning-bg); color: var(--color-warning-fg); }

/* ── Cockpit-Split ─────────────────────────────────────────────────────────── */
.vt-pot-cockpit {
  flex: 1; min-height: 0; display: flex; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.vt-pot-list {
  flex: 0 0 340px; max-width: 340px; min-width: 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-1-5);
}

/* Gruppen-Header der Netzwerk-Facette (Aktuelle | Ehemalige Mitglieder): sticky im
   Listen-Scroll; Hintergrund = App-Bg, damit der Header nahtlos über die Karten fährt. */
.vt-pot-group-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-1) var(--space-1);
  background: var(--color-bg);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--lod-gray-500);
}
.vt-pot-group-n { font-weight: 600; color: var(--lod-gray-400); }

/* ── Kompakte Zeile (Score-Rail + Name/Sub + EIN Leitsignal) ───────────────── */
.vt-pot-row {
  display: flex; align-items: center; gap: var(--space-2-5);
  padding: var(--space-2-5) var(--space-3);
  border: 1px solid var(--color-border); border-left-width: 3px;
  border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer;
  transition: background var(--duration-snappy), border-color var(--duration-snappy), box-shadow var(--duration-snappy);
}
.vt-pot-row:hover { border-color: var(--lod-darkblue); background: var(--color-bg-hover); }
.vt-pot-row.is-selected {
  border-color: var(--lod-darkblue); background: var(--lod-darkblue-50);
  box-shadow: inset 0 0 0 1px var(--lod-darkblue);
}
.vt-pot-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vt-pot-row.is-hot  { border-left-color: var(--color-danger-strong); }
.vt-pot-row.is-warm { border-left-color: var(--color-warning-strong); }
.vt-pot-row.is-cold { border-left-color: var(--lod-gray-300); }
.vt-pot-row-score { flex: 0 0 auto; min-width: 30px; text-align: center; font-weight: 700; font-size: 15px; color: var(--color-text); }
.vt-pot-row-main { flex: 1; min-width: 0; }
.vt-pot-row-name { font-size: 13.5px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-pot-row-sub { font-size: 12px; color: var(--lod-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.vt-pot-row-meta { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-1-5); }
.vt-pot-row-src { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.vt-pot-row-src.is-bestand { background: var(--color-bg-subtle); color: var(--lod-gray-600); }
.vt-pot-row-src.is-neukunde { background: var(--lod-darkblue-100); color: var(--lod-darkblue); }
.vt-pot-row-src.is-netzwerk { background: var(--color-accent-bg-soft); color: var(--color-accent-strong, var(--color-accent)); }
/* M365-Leitsignal der Netzwerk-Zeile: Ohne M365 = Verkaufschance (warn), vorhanden = ok, unklar neutral. */
.vt-pot-row-m365 { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.vt-pot-row-m365.is-ohne { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.vt-pot-row-m365.is-hat { background: var(--status-success-bg); color: var(--status-success-fg); }
.vt-pot-row-m365.is-unklar { background: var(--color-bg-subtle); color: var(--lod-gray-600); }
.vt-pot-row-status { font-size: 11px; color: var(--lod-gray-500); white-space: nowrap; }
.vt-pot-row-due { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--color-warning-bg); color: var(--color-warning-fg); white-space: nowrap; }

/* ── Detail-Reading-Pane ───────────────────────────────────────────────────── */
.vt-pot-detail {
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); overflow: hidden;
}
.vt-pot-detail-head { flex-shrink: 0; padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
.vt-pot-detail-title { font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1.25; }
.vt-pot-detail-sub { font-size: 13px; color: var(--lod-gray-500); margin-top: 2px; }
.vt-pot-detail-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4); }

/* Hero: großer Score-Badge (bandfarbig) + „Warum jetzt" + Quelle/Status. */
.vt-pot-hero { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.vt-pot-hero-score {
  flex: 0 0 auto; width: 66px; min-height: 66px; padding: var(--space-1-5) 0; border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.vt-pot-hero-score.is-hot  { background: var(--color-danger-bg);  color: var(--color-danger-fg); }
.vt-pot-hero-score.is-warm { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.vt-pot-hero-score.is-cold { background: var(--color-bg-subtle);  color: var(--lod-gray-600); }
.vt-pot-hero-cap { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; margin-bottom: 1px; }
.vt-pot-hero-num { font-size: 23px; font-weight: 700; line-height: 1; }
.vt-pot-hero-band { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.vt-pot-hero-m365 { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-accent-bg-soft); color: var(--color-text); }
.vt-pot-hero-main { flex: 1; min-width: 0; }
.vt-pot-hero-why { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-1-5); }
.vt-pot-hero-chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.vt-pot-hero-src { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); }
.vt-pot-hero-src.is-bestand { background: var(--color-bg-subtle); color: var(--lod-gray-700); }
.vt-pot-hero-src.is-neukunde { background: var(--lod-darkblue-100); color: var(--lod-darkblue); }
.vt-pot-hero-src.is-netzwerk { background: var(--color-accent-bg-soft); color: var(--color-accent-strong, var(--color-accent)); }
.vt-pot-hero-status { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-bg-subtle); color: var(--lod-gray-600); }

/* Key-Value-Block (statt Chip-Wand) für Profil/Firma/Kontakt. */
.vt-pot-kv { display: flex; flex-direction: column; gap: var(--space-1); }
.vt-pot-kv-row { display: flex; gap: var(--space-3); font-size: 13px; line-height: 1.5; }
.vt-pot-kv-k { flex: 0 0 132px; color: var(--lod-gray-500); }
.vt-pot-kv-v { flex: 1; min-width: 0; color: var(--color-text); overflow-wrap: anywhere; }

/* Portfolio-Lücken als abgesetzte Warn-Tags (mit „Haben wir schon"-Häkchen). */
.vt-pot-gaps { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.vt-pot-gap { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; padding: 3px 4px 3px 10px; border-radius: var(--radius-pill); background: var(--color-warning-bg); color: var(--color-warning-fg); }
.app-scope .vt-pot-gap-x, .app-scope .vt-pot-covered-x {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0;
  border: none; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.08); color: inherit; cursor: pointer; font-size: 11px; line-height: 1;
}
.app-scope .vt-pot-gap-x:hover { background: var(--color-success-strong); color: #fff; }
.app-scope .vt-pot-covered-x:hover { background: var(--color-danger-strong); color: #fff; }
/* „Haben wir schon"-Chips (manuell abgedeckt) — positiv/erledigt statt Warnung. */
.vt-pot-covered { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; padding: 3px 4px 3px 10px; border-radius: var(--radius-pill); background: var(--status-success-bg); color: var(--color-success-strong); }
.vt-pot-covered::before { content: "\2713"; font-weight: 700; }

/* Empfehlung als hervorgehobener Akzent-Block (Turquoise-Kante). */
.vt-pot-reco {
  margin-top: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--color-accent); border-left-width: 3px; border-radius: var(--radius-md);
  background: var(--color-accent-bg-soft);
}
.vt-pot-reco-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lod-gray-600); margin-bottom: 2px; }
.vt-pot-reco-name { font-size: 14px; font-weight: 600; color: var(--color-text); }
.vt-pot-reco-text { font-size: 13px; color: var(--lod-gray-700); margin-top: var(--space-1); line-height: 1.5; }

/* Gesprächseinstieg (Neukunde) als abgesetztes Zitat. */
.vt-pot-quote {
  margin-top: var(--space-3); padding: var(--space-2-5) var(--space-3);
  border-left: 3px solid var(--lod-darkblue); background: var(--lod-darkblue-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.vt-pot-quote-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lod-darkblue); margin-bottom: 2px; }
.vt-pot-quote .pot-brief-text { font-style: italic; }

/* Aktionsleiste: primärer Lead-CTA · kompaktes Triage-Cluster · abgesetzt rechts. */
.vt-pot-detail-actions {
  flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-surface);
}
.vt-pot-triage { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.vt-pot-actions-end { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.vt-pot-act { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.app-scope .vt-pot-act-ghost, .app-scope .vt-pot-act-danger {
  padding: 5px 12px; border-radius: var(--radius-md); font: inherit; font-size: 13px; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--lod-gray-700);
  transition: background var(--duration-snappy), color var(--duration-snappy), border-color var(--duration-snappy);
}
.app-scope .vt-pot-act-ghost:hover { background: var(--color-bg-hover); color: var(--color-text); border-color: var(--lod-darkblue); }
.app-scope .vt-pot-act-danger { color: var(--color-danger-strong); border-color: var(--color-danger-strong); }
.app-scope .vt-pot-act-danger:hover { background: var(--color-danger-bg); color: var(--color-danger-fg); border-color: var(--color-danger-strong); }
.app-scope .vt-pot-act-ghost:focus-visible, .app-scope .vt-pot-act-danger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Tastenhinweis auf Buttons + im Leerzustand. */
.vt-pot-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px;
  font-size: 10px; font-weight: 600; font-family: inherit; line-height: 1;
  border: 1px solid var(--color-border); background: var(--color-surface-soft); color: var(--lod-gray-500);
}
.btn-primary-sm .vt-pot-kbd { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Leerzustand + Skeleton der Pane. */
.vt-pot-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; padding: var(--space-6); gap: var(--space-2);
}
.vt-pot-detail-empty-icon { opacity: 0.35; }
.vt-pot-detail-empty-icon .ui-ico, .vt-pot-detail-empty-icon .ui-ico img { width: 32px; height: 32px; }
.vt-pot-detail-empty-title { font-size: 15px; font-weight: 600; color: var(--lod-gray-700); }
.vt-pot-detail-empty-text { font-size: 13px; color: var(--lod-gray-500); max-width: 360px; line-height: 1.7; }
.vt-pot-detail-skel { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.vt-pot-skel-row { display: flex; gap: var(--space-3); align-items: center; }
.vt-pot-skel-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.vt-pot-skel-block { background: var(--color-bg-subtle); border-radius: var(--radius-md); animation: potSkelPulse var(--duration-pulse) ease-in-out infinite; }
.vt-pot-skel-sq { width: 60px; height: 60px; flex: 0 0 auto; }
.vt-pot-skel-line { height: 12px; border-radius: 6px; }
@keyframes potSkelPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }

/* Enter-Animation beim Zeilenwechsel (nur .vt-pot-anim-in, via JS gesetzt). */
@keyframes potPaneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.vt-pot-anim-in { animation: potPaneIn var(--duration-quick) var(--ease-enter) both; }
@media (prefers-reduced-motion: reduce) {
  .vt-pot-anim-in { animation: none; }
  .vt-pot-skel-block { animation: none; }
}

/* <1000px: Split zusammenklappen — nur die Liste, Detail läuft als Modal
   (_potBriefing, vt-section-potenziale.js). Deckt Tablet (600–999) + Mobile ab;
   Notebook/Desktop (≥1000px) behalten den Split. */
@media (max-width: 999px) {
  .vt-pot-detail { display: none; }
  .vt-pot-list { flex: 1; max-width: none; }
  .vt-pot-cockpit { padding: var(--space-3); }
  .vt-pot-lanes { padding: var(--space-3) var(--space-3) 0; }
}

/* ── Potenzial-Briefing (Narrow-Fallback) + Handoff-Dialog (Modal-SSOT-Inhalte) ─ */
.pot-brief-section { margin-top: var(--space-3); }
.pot-brief-section:first-child { margin-top: 0; }
.pot-brief-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--lod-gray-500); margin-bottom: var(--space-1);
}
.pot-brief-text { font-size: 13.5px; line-height: 1.5; color: var(--color-text); }
.pot-brief-meta { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.pot-brief-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px 8px; border-radius: var(--radius-pill); font-size: 12px;
  background: var(--color-bg-subtle); color: var(--lod-gray-700);
}
.pot-brief-chip--fehlt { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.pot-brief-chip--hat   { background: var(--status-success-bg); color: var(--color-success-strong); }
.pot-brief-text--muted { color: var(--lod-gray-500); }
/* Aktions-Zeile im Modal-Briefing-Body (Triage + „Firma öffnen"). Bewusst im Body
   und nicht im Footer: der Footer trägt nur die Entscheidung (Schließen + primärer
   „Lead anlegen"-CTA) — Sekundär-Aktionen und Primär-CTA sollen sich nicht die
   schmale size-sm-Footer-Zeile teilen. */
.pot-brief-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pot-handoff-field { margin-top: var(--space-3); }
.pot-handoff-picked { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13.5px; color: var(--color-success-strong); }
.pot-note-input {
  width: 100%; box-sizing: border-box; margin-top: var(--space-1);
  padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font: inherit; font-size: 13.5px; color: var(--color-text); background: var(--color-surface); resize: vertical;
}
.pot-note-input:focus { outline: none; border-color: var(--lod-darkblue); box-shadow: 0 0 0 3px var(--lod-darkblue-100); }
.pot-handoff-select {
  width: 100%; box-sizing: border-box; margin-top: var(--space-1);
  padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font: inherit; font-size: 13.5px; color: var(--color-text); background: var(--color-surface); cursor: pointer;
}
.pot-handoff-select:focus { outline: none; border-color: var(--lod-darkblue); box-shadow: 0 0 0 3px var(--lod-darkblue-100); }
/* Zielbranchen-Auswahl im Discovery-Konfig-Dialog — Toggle-Chips (Mehrfachauswahl).
   .app-scope-Präfix ist Pflicht (Button-Reset, siehe oben). */
.pot-branche-chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-1); }
.app-scope .pot-branche-chip {
  padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--lod-gray-700);
  transition: background var(--duration-snappy), border-color var(--duration-snappy), color var(--duration-snappy);
}
.app-scope .pot-branche-chip:hover { border-color: var(--lod-darkblue); }
.app-scope .pot-branche-chip.is-on {
  background: var(--lod-darkblue); border-color: var(--lod-darkblue); color: #fff;
}
.pot-branche-hint { margin-top: var(--space-1-5); font-size: 12px; color: var(--lod-gray-500); }

/* ── Dialog-Politur (Premium): Untertitel, Subjekt-Karte, Picker, Intro, Portfolio-Karten ── */
.modal-subtitle { font-size: 12.5px; color: var(--lod-gray-500); margin-top: 3px; line-height: 1.4; }
.pot-req { color: var(--color-danger-strong); }
.pot-req-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--lod-gray-500); }

/* Subjekt-Karte (Lead-Anlage) — WEN/WAS man übergibt: Score-Band + Name + Ort/Branche + Signale. */
.pot-subject { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-subtle); }
.pot-subject-score { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; }
.pot-subject-score.is-hot { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.pot-subject-score.is-warm { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.pot-subject-score.is-cold { background: var(--color-surface); color: var(--lod-gray-600); }
.pot-subject-main { flex: 1; min-width: 0; }
.pot-subject-name { font-size: 15px; font-weight: 700; color: var(--color-text); }
.pot-subject-sub { font-size: 12.5px; color: var(--lod-gray-500); margin-top: 1px; }
.pot-subject-sig { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-1-5); }
.pot-subject-web { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.pot-subject-web.is-ok { background: var(--status-success-bg); color: var(--color-success-strong); }
.pot-subject-web.is-bad { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.pot-subject-tag { font-size: 11.5px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--lod-gray-700); border: 1px solid var(--color-border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

/* Vertriebler-Picker-Button (Lead-Anlage) — klar als Eingabe erkennbar. */
.app-scope .pot-pick-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 7px 12px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--lod-gray-700); font: inherit; font-size: 13px; cursor: pointer; }
.app-scope .pot-pick-btn:hover { border-color: var(--lod-darkblue); border-style: solid; color: var(--color-text); }
.pot-pick-btn .ui-ico, .pot-pick-btn .ui-ico img { width: 16px; height: 16px; }

/* Dialog-Intro (Adressen finden) + 2-Spalten-Reihe. */
.pot-dialog-intro { display: flex; gap: var(--space-2-5); align-items: flex-start; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md); background: var(--lod-darkblue-50); font-size: 12.5px; color: var(--lod-gray-700); line-height: 1.45; margin-bottom: var(--space-2); }
.pot-dialog-intro .ui-ico { flex: 0 0 auto; }
.pot-dialog-intro .ui-ico img { width: 20px; height: 20px; }
.pot-dialog-row2 { display: flex; gap: var(--space-3); }
.pot-dialog-row2 > .pot-handoff-field { flex: 1; min-width: 0; margin-top: 0; }

/* Ad-hoc-Website-Check (Modal „Website-Check"): URL-Zeile, Ergebnisfläche, Übernahme-Block.
   Fluid (flex + wrap), keine festen Breiten — Befund-Gruppen kommen aus .vt-pot-audit-*. */
.pot-adhoc-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2); }
.pot-adhoc-row .pot-note-input { flex: 1; min-width: 0; margin-top: 0; }
.pot-adhoc-row .btn-primary-sm { flex: 0 0 auto; }
.pot-adhoc-result { margin-top: var(--space-3); }
.pot-adhoc-result:empty { margin-top: 0; }
.pot-adhoc-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.pot-adhoc-meta { flex: 1; min-width: 0; font-size: 12.5px; color: var(--lod-gray-600); line-height: 1.4; }
.pot-adhoc-hint { font-size: 12px; color: var(--lod-gray-500); margin-bottom: var(--space-1-5); }
.pot-adhoc-save { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

/* Portfolio-Editor — Karte je Kategorie (Toggle-Switch, editierbares Label, Ansatz/Paket). */
.pot-pf-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); }
.pot-pf-card { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--duration-snappy), opacity var(--duration-snappy); }
.pot-pf-card:not(.is-on) { opacity: 0.6; }
.pot-pf-card.is-on { border-left: 3px solid var(--lod-darkblue); }
.pot-pf-card-head { display: flex; align-items: center; gap: var(--space-2-5); }
.pot-pf-label {
  flex: 1; min-width: 0; box-sizing: border-box;
  padding: var(--space-1-5) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--color-text); background: var(--color-surface);
}
.pot-pf-label:focus { outline: none; border-color: var(--lod-darkblue); box-shadow: 0 0 0 3px var(--lod-darkblue-100); }
.pot-pf-badge { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 4px; background: var(--color-bg-subtle); color: var(--lod-gray-500); }
.pot-pf-card-meta { display: flex; gap: var(--space-3); margin-top: var(--space-2-5); }
.pot-pf-meta-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pot-pf-meta-k { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lod-gray-500); }
.pot-pf-meta-v { font-size: 13px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pot-pf-thema { box-sizing: border-box; padding: var(--space-1-5) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit; font-size: 13px; color: var(--color-text); background: var(--color-surface); cursor: pointer; }
.pot-pf-thema:focus { outline: none; border-color: var(--lod-darkblue); box-shadow: 0 0 0 3px var(--lod-darkblue-100); }
/* Aktiv-Toggle als Switch. */
.pot-pf-switch { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.pot-pf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pot-pf-switch-track { width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--lod-gray-300); transition: background var(--duration-snappy); position: relative; }
.pot-pf-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-2); transition: transform var(--duration-snappy); }
.pot-pf-switch input:checked + .pot-pf-switch-track { background: var(--lod-darkblue); }
.pot-pf-switch input:checked + .pot-pf-switch-track::after { transform: translateX(16px); }
.pot-pf-switch input:focus-visible + .pot-pf-switch-track { box-shadow: var(--focus-ring); }
.pot-pf-switch input:disabled + .pot-pf-switch-track { opacity: 0.5; }
@media (max-width: 599px) { .pot-dialog-row2, .pot-pf-card-meta { flex-direction: column; gap: var(--space-2); } }

/* ── Kaltakquise: Auswahl-Checkbox + Bulk-Leiste + Zuweisungs-Chips ─────────── */
/* Auswahl-Checkbox in der Zeile (nur Neukunden). Kein Layout-Bruch: schmale, feste Spalte. */
.app-scope .vt-pot-row-check { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--lod-darkblue); }
.vt-pot-row.is-checked { border-color: var(--lod-darkblue); background: var(--lod-darkblue-50); }

/* Bulk-Aktionsleiste zwischen Lanes und Cockpit. Fluid (flex-wrap), kein Overflow.
   Dauerhaft sichtbar (Select-All), daher eigener margin-top: die Lanes darüber haben
   padding-bottom:0, das Cockpit darunter liefert seinen eigenen padding-top — ohne
   diesen margin-top klebte die Leiste sonst an den Lanes.
   Ruhezustand (nichts gewählt) ist rahmenlos/dezent; erst `.is-active` (≥1 Auswahl,
   via JS) hebt sie mit Rahmen+Fläche als Aktionsmodus hervor. Padding bleibt in beiden
   Zuständen gleich → kein Layout-Sprung beim Auswählen. */
.vt-pot-bulkbar {
  flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: var(--space-3) var(--space-4) 0; padding: var(--space-2-5) var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-md);
  transition: background var(--duration-snappy), border-color var(--duration-snappy);
}
.vt-pot-bulkbar.is-active { border-color: var(--lod-darkblue); background: var(--lod-darkblue-50); }
/* Select-All links: echter Haken (Voll/Zwischen/Leer) + Label; Klick togglet alle sichtbaren.
   Gedämpft im Ruhezustand, kräftig sobald die Leiste aktiv ist. */
.vt-pot-bulk-all { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 600; color: var(--lod-gray-600); cursor: pointer; }
.vt-pot-bulkbar.is-active .vt-pot-bulk-all { color: var(--lod-darkblue); }
.vt-pot-bulk-all input { cursor: pointer; accent-color: var(--lod-darkblue); }
.vt-pot-bulk-actions { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.app-scope .vt-pot-bulk-clear {
  padding: 5px 12px; border-radius: var(--radius-md); font: inherit; font-size: 13px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--lod-gray-600);
  transition: background var(--duration-snappy), color var(--duration-snappy);
}
.app-scope .vt-pot-bulk-clear:hover { background: var(--color-bg-hover); color: var(--color-text); }
.app-scope .vt-pot-bulk-clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 999px) { .vt-pot-bulkbar { margin: var(--space-3) var(--space-3) 0; } }

/* Website-Audit-Block in der Detail-Pane: Score-Badge + Problem-Befunde (Pitch-Evidenz). */
.vt-pot-audit-score {
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); margin-left: var(--space-2);
  letter-spacing: 0; text-transform: none;
}
.vt-pot-audit-score.is-good { background: var(--status-success-bg); color: var(--color-success-strong); }
.vt-pot-audit-score.is-mid  { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.vt-pot-audit-score.is-bad  { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.vt-pot-audit-list { display: flex; flex-direction: column; gap: var(--space-1-5); }
.vt-pot-audit-item {
  display: flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-md); border-left: 3px solid transparent;
  font-size: 13px; line-height: 1.45;
}
.vt-pot-audit-item.is-fail { background: var(--color-danger-bg); border-left-color: var(--color-danger-strong); color: var(--color-danger-fg); }
.vt-pot-audit-item.is-warn { background: var(--color-warning-bg); border-left-color: var(--color-warning-strong); color: var(--color-warning-fg); }
.vt-pot-audit-kat { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.75; min-width: 90px; }
.vt-pot-audit-tipp { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vt-pot-audit-foot { margin-top: var(--space-2); }
/* Befunde nach Kategorie gruppiert + einklappbar (native <details>). Fail-Kategorien
   offen, warn-only zu → harte Verkaufshaken oben, Hygiene-Kleinkram einen Klick entfernt. */
.vt-pot-audit-summary { font-size: 11.5px; color: var(--lod-gray-500); margin-bottom: var(--space-1-5); }
.vt-pot-audit-groups { display: flex; flex-direction: column; gap: var(--space-1); }
.vt-pot-audit-grp { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.vt-pot-audit-grp-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1-5) var(--space-2-5); cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lod-gray-600); background: var(--color-bg-subtle); }
.vt-pot-audit-grp-head::-webkit-details-marker { display: none; }
.vt-pot-audit-grp-head::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.vt-pot-audit-grp-head.is-fail::before { background: var(--color-danger-strong); }
.vt-pot-audit-grp-head.is-warn::before { background: var(--color-warning-strong); }
.vt-pot-audit-grp-kat { flex: 1; min-width: 0; }
.vt-pot-audit-grp-n { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--lod-gray-600); }
.vt-pot-audit-grp-head::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-right: 1.5px solid var(--lod-gray-500); border-bottom: 1.5px solid var(--lod-gray-500); transform: rotate(-45deg); transition: transform var(--duration-snappy); margin-left: 2px; }
.vt-pot-audit-grp[open] .vt-pot-audit-grp-head::after { transform: rotate(45deg); }
.vt-pot-audit-grp-head:hover { background: var(--color-bg-hover); }
.vt-pot-audit-grp-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1); }

/* Assign-Dialog: Chips der gewählten Vertriebler. */
.pot-assign-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--lod-gray-500); }
.pot-assign-chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: var(--space-1) 0; }
.pot-assign-empty { font-size: 12px; color: var(--lod-gray-500); font-style: italic; }
.pot-assign-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px 4px 3px 10px; border-radius: var(--radius-pill); font-size: 12.5px;
  background: var(--lod-darkblue-100); color: var(--lod-darkblue);
}
.app-scope .pot-assign-chip-x {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: none; border-radius: var(--radius-pill); background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1;
}
.app-scope .pot-assign-chip-x:hover { background: rgba(0, 0, 0, 0.12); }

/* ── Kaltakquise-Worklist-Karte (im Vertrieb-Workspace, Gruppe „Meine Kaltakquise") ─ */
.vt-prospect-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--color-border); border-left-width: 3px;
  border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer;
  transition: border-color var(--duration-snappy), box-shadow var(--duration-snappy);
}
.vt-prospect-card:hover { border-color: var(--lod-darkblue); box-shadow: var(--shadow-2); }
.vt-prospect-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vt-prospect-card.is-hot  { border-left-color: var(--color-danger-strong); }
.vt-prospect-card.is-warm { border-left-color: var(--color-warning-strong); }
.vt-prospect-card.is-cold { border-left-color: var(--lod-gray-300); }
.vt-prospect-head { display: flex; align-items: flex-start; gap: var(--space-2-5); }
.vt-prospect-score { flex: 0 0 auto; min-width: 30px; text-align: center; font-weight: 700; font-size: 16px; color: var(--color-text); }
.vt-prospect-main { flex: 1; min-width: 0; }
.vt-prospect-name { font-size: 14px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-prospect-sub { font-size: 12px; color: var(--lod-gray-500); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-prospect-auftrag { flex: 0 0 auto; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--lod-darkblue-100); color: var(--lod-darkblue); white-space: nowrap; }
.vt-prospect-befund { font-size: 12.5px; color: var(--lod-gray-700); line-height: 1.45; overflow-wrap: anywhere; }
.vt-prospect-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.app-scope .vt-prospect-skip {
  padding: 5px 12px; border-radius: var(--radius-md); font: inherit; font-size: 13px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--lod-gray-600);
  transition: background var(--duration-snappy), color var(--duration-snappy);
}
.app-scope .vt-prospect-skip:hover { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.app-scope .vt-prospect-skip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vt-prospect-ziel { font-size: 12.5px; color: var(--color-text); line-height: 1.45; padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-accent-bg-soft); border-left: 3px solid var(--color-accent); }
.vt-prospect-ziel-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lod-gray-600); margin-right: var(--space-1); }

/* Web-Health-Badge in der Zeile (nur schwache, geprüfte Neukunden-Websites). */
.vt-pot-row-web { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.vt-pot-row-web.is-d { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.vt-pot-row-web.is-e { background: var(--color-danger-bg); color: var(--color-danger-fg); }

/* Kaltakquise-Zielsetzung als Akzent-Callout (Detail-Pane + Handoff), abgesetzt vom
   Gesprächseinstieg-Zitat (Turquoise-Kante statt Darkblue). */
.vt-pot-quote.vt-pot-ziel { border-left-color: var(--color-accent); background: var(--color-accent-bg-soft); }
.vt-pot-quote.vt-pot-ziel .vt-pot-quote-label { color: var(--color-accent-strong, var(--color-accent)); }

/* Reaktivierungs-Callout (Bestand-Detail): schlummernde Kundenbeziehung — Warn-Kante,
   abgesetzt vom Turquoise-Kaltakquise-Ziel und dem neutralen Gesprächseinstieg-Zitat. */
.vt-pot-quote.vt-pot-reakt { border-left-color: var(--color-warning-strong); background: var(--color-warning-bg); }
.vt-pot-quote.vt-pot-reakt .vt-pot-quote-label { color: var(--color-warning-fg); }

/* Microsoft-365-Block (Netzwerk-Facette, M365-Fokus): Verdikt-Callout mit tonaler Kante —
   Ohne M365 = Verkaufschance (warn), vorhanden = ok (success), unklar neutral. */
.vt-pot-m365 { border-left: 3px solid var(--lod-gray-300); border-radius: var(--radius-md); background: var(--color-bg-subtle); padding: var(--space-2-5) var(--space-3); }
.vt-pot-m365.is-ohne { border-left-color: var(--color-warning-strong); background: var(--color-warning-bg); }
.vt-pot-m365.is-hat { border-left-color: var(--status-success-border); background: var(--status-success-bg); }
.vt-pot-m365-verdikt { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-1); }
.vt-pot-m365-badge { font-size: 13px; font-weight: 700; color: var(--color-text); }
.vt-pot-m365-provider { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--lod-gray-600); }
.vt-pot-m365-hinweis { font-size: 12.5px; line-height: 1.5; color: var(--color-text); }

/* Fortschrittsbalken des Komplett-Website-Checks (audit-all). */
.vt-pot-progress { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2-5); margin: var(--space-3) var(--space-4) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--lod-darkblue); border-radius: var(--radius-md); background: var(--lod-darkblue-50); }
.vt-pot-progress .ui-ico { flex: 0 0 auto; }
.vt-pot-progress .ui-ico img { width: 18px; height: 18px; }
.vt-pot-progress-main { flex: 1; min-width: 0; }
.vt-pot-progress-label { font-size: 12px; font-weight: 600; color: var(--lod-darkblue); margin-bottom: 4px; }
.vt-pot-progress-track { height: 6px; border-radius: var(--radius-pill); background: var(--lod-darkblue-100); overflow: hidden; }
.vt-pot-progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--lod-darkblue); transition: width var(--duration-quick) var(--ease-standard, ease); }
.vt-pot-progress-fill.is-indet { width: 35%; animation: potProgIndet var(--duration-pulse) ease-in-out infinite; }
@keyframes potProgIndet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .vt-pot-progress-fill.is-indet { animation: none; width: 100%; opacity: 0.5; } }
@media (max-width: 999px) { .vt-pot-progress { margin: var(--space-3) var(--space-3) 0; } }

/* Dropdown-Optik für die Dialog-Selects (Chevron + kein OS-Default). */
.pot-handoff-select, .pot-pf-thema {
  appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
}
/* Der Legacy-Custom-Select-Enhancer ersetzt jedes native <select> durch button.cs-trigger —
   dessen globale Optik (Spez. 0,1,0) plättet der .app-scope-Button-Reset (0,1,1, siehe
   app-scope-button-reset-Regel). In den Potenziale-Dialogen hier mit Präfix wiederherstellen,
   im Look der .pot-handoff-select-Felder (gilt für Website-Check, Adressen finden, Handoff). */
.app-scope .pot-handoff-field .cs-wrap { margin-top: var(--space-1); width: 100%; }
.app-scope .pot-handoff-field .cs-trigger {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: var(--space-2) 28px var(--space-2) var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: 13.5px; color: var(--color-text);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 12px;
}
.app-scope .pot-handoff-field .cs-trigger--placeholder { color: var(--color-text); }
.app-scope .pot-handoff-field .cs-open .cs-trigger,
.app-scope .pot-handoff-field .cs-trigger:focus-visible { outline: none; border-color: var(--lod-darkblue); box-shadow: 0 0 0 3px var(--lod-darkblue-100); }

/* ── Kaltakquise-Auftrags-Cockpit (Modal-Übersicht) ─────────────────────────── */
.vt-ka-cockpit { display: flex; flex-direction: column; gap: var(--space-3); }
.vt-ka-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); padding: var(--space-3) var(--space-3-5);
  display: flex; flex-direction: column; gap: var(--space-2-5);
}
.vt-ka-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.vt-ka-title { font-size: 15px; font-weight: 700; color: var(--color-text); min-width: 0; }
.vt-ka-meta { display: flex; align-items: baseline; gap: var(--space-2); flex-shrink: 0; }
.vt-ka-total { font-size: 12px; font-weight: 600; color: var(--lod-darkblue); }
.vt-ka-when { font-size: 11px; color: var(--lod-gray-500); }
.vt-ka-ziel { font-size: 12.5px; color: var(--lod-gray-600); line-height: 1.4; padding-left: var(--space-2-5); border-left: 2px solid var(--color-border); }
.vt-ka-bar { height: 6px; border-radius: var(--radius-pill); background: var(--color-bg-subtle); overflow: hidden; }
.vt-ka-bar-fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-success-strong); transition: width var(--duration-quick) var(--ease-standard, ease); }

/* Funnel-Chips: offen → interessiert → Lead / kein Interesse. */
.vt-ka-funnel { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.vt-ka-stage {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; white-space: nowrap;
  background: var(--color-bg-subtle); color: var(--lod-gray-600);
}
.vt-ka-stage-n { font-weight: 700; font-size: 13px; }
.vt-ka-stage.is-open { background: var(--lod-darkblue-100); color: var(--lod-darkblue); }
.vt-ka-stage.is-warm { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.vt-ka-stage.is-good { background: var(--status-success-bg); color: var(--color-success-strong); }
.vt-ka-stage.is-cold { background: var(--color-bg-subtle); color: var(--lod-gray-500); }
.vt-ka-stage.is-zero { opacity: 0.45; }
.vt-ka-funnel.is-mini .vt-ka-stage { padding: 1px 7px; font-size: 10.5px; }
.vt-ka-funnel.is-mini .vt-ka-stage-n { font-size: 11px; }

/* Vertriebler-Aufschlüsselung */
.vt-ka-vts { display: flex; flex-direction: column; gap: var(--space-1-5); border-top: 1px solid var(--color-border); padding-top: var(--space-2-5); }
.vt-ka-vt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.vt-ka-vt-name { font-size: 12.5px; font-weight: 600; color: var(--color-text); min-width: 0; }
.vt-ka-vt-funnel { flex-shrink: 0; }

/* ── Archiv-Chip (Tiefensuche-Treffer außerhalb des aktiven Trichters) ─────────
   Gesperrt/abgelehnt/konvertiert/geparkt — macht beim Suchen sofort sichtbar,
   dass die Zeile bereits eine Entscheidung trägt. */
.vt-pot-row-archiv {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--color-bg-subtle); color: var(--lod-gray-600);
  border: 1px dashed var(--lod-gray-300); white-space: nowrap;
}

/* ── Score-Zusammensetzung (Detail-Pane, native <details>) ─────────────────────
   Transparenz: Signale mit Punkten, Größen-/Fit-Faktoren, Zuschläge, Ergebnis.
   Per Default zu — wer dem Score vertraut, wird nicht unterbrochen. */
.vt-pot-score { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); }
.vt-pot-score-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2-5); cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--lod-gray-600); background: var(--color-bg-subtle);
}
.vt-pot-score-head::-webkit-details-marker { display: none; }
.vt-pot-score-head:hover { background: var(--color-bg-hover); }
.vt-pot-score-sum { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--lod-darkblue); }
.vt-pot-score-body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-2-5); }
.vt-pot-score-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 12.5px; line-height: 1.5; color: var(--color-text); }
.vt-pot-score-line.is-muted { color: var(--lod-gray-500); }
.vt-pot-score-line.is-total { border-top: 1px solid var(--color-border); margin-top: var(--space-1); padding-top: var(--space-1); font-weight: 700; }
.vt-pot-score-txt { min-width: 0; overflow-wrap: anywhere; }
.vt-pot-score-pts { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.vt-pot-score-fakt { font-size: 11.5px; color: var(--lod-gray-500); padding: var(--space-1) 0; }
.vt-pot-score-hint { font-size: 11.5px; line-height: 1.45; color: var(--color-warning-fg); background: var(--color-warning-bg); border-radius: var(--radius-md); padding: var(--space-1-5) var(--space-2); margin-top: var(--space-1); }
.vt-pot-score-hint.is-sperre { color: var(--color-danger-fg); background: var(--color-danger-bg); }
.vt-pot-score-herkunft { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.vt-pot-score-herkunft .vt-pot-score-hint { margin-top: 0; color: var(--lod-gray-600); background: var(--color-bg-subtle); }
.vt-pot-score-herkunft .vt-pot-score-hint.is-sperre { color: var(--color-danger-fg); background: var(--color-danger-bg); }

/* ── Potenzial-Analyse (Modal size-lg): KPI-Kacheln + Sektionen + Balken + Tabellen ─ */
.vt-pa { display: flex; flex-direction: column; gap: var(--space-3); }
.vt-pa-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.vt-pa-kpi { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-2) var(--space-2-5); text-align: center; }
.vt-pa-kpi-n { font-size: 20px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.vt-pa-kpi-l { font-size: 11px; color: var(--lod-gray-500); line-height: 1.3; margin-top: 2px; }
.vt-pa-kpi.is-hot .vt-pa-kpi-n { color: var(--color-danger-strong); }
.vt-pa-kpi.is-chance .vt-pa-kpi-n { color: var(--color-warning-fg); }
/* Klickbare KPI-Kachel (Drill in Lane/Filter des Cockpits). */
.vt-pa-kpi.is-drill { cursor: pointer; transition: border-color var(--duration-snappy), box-shadow var(--duration-snappy); }
.vt-pa-kpi.is-drill:hover { border-color: var(--lod-darkblue); box-shadow: var(--shadow-2); }
.vt-pa-kpi.is-drill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vt-pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.vt-pa-sec { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-2-5) var(--space-3); min-width: 0; }
.vt-pa-sec.is-wide { grid-column: 1 / -1; }
.vt-pa-sec-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lod-gray-600); margin-bottom: var(--space-2); }
.vt-pa-bars { display: flex; flex-direction: column; gap: var(--space-1-5); }
.vt-pa-bar { display: flex; align-items: center; gap: var(--space-2); }
.vt-pa-bar.is-zero { opacity: 0.55; }
.vt-pa-bar-label { flex: 0 0 40%; min-width: 0; font-size: 12px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-pa-bar-track { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--color-bg-subtle); overflow: hidden; }
.vt-pa-bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--lod-darkblue); }
.vt-pa-bar-fill.is-warm { background: var(--color-warning-strong); }
.vt-pa-bar-fill.is-good { background: var(--color-success-strong); }
.vt-pa-bar-fill.is-bad { background: var(--color-danger-strong); }
.vt-pa-bar-fill.is-muted { background: var(--lod-gray-300); }
.vt-pa-bar-fill.is-chance { background: var(--color-accent); }
.vt-pa-bar-n { flex: 0 0 auto; min-width: 28px; text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.vt-pa-scroll { overflow-x: auto; }
.vt-pa-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vt-pa-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lod-gray-500); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.vt-pa-table td { padding: var(--space-1-5) var(--space-2); border-bottom: 1px solid var(--color-border); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-pa-table tbody tr:last-child td { border-bottom: none; }
.vt-pa-table td:first-child { white-space: normal; min-width: 140px; }
.vt-pa-frische { font-size: 12px; line-height: 1.5; color: var(--lod-gray-600); background: var(--color-bg-subtle); border-radius: var(--radius-md); padding: var(--space-2) var(--space-2-5); }

/* Analyse: Notebook/Tablet 2→1-spaltige Sektionen, KPI-Raster staffelt 6→3→2. */
@media (max-width: 1399px) { .vt-pa-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 999px) { .vt-pa-grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .vt-pa-kpis { grid-template-columns: repeat(2, 1fr); }
  .vt-pa-bar-label { flex-basis: 45%; }
}