/* IBM Plex kommt selbst gehostet aus styles/fonts.css (eigener <link> VOR dieser
   Datei in jedem HTML-Head) — KEIN @import auf fonts.googleapis.com mehr (DSGVO,
   Audit 2026-07-10-google-fonts-self-hosting.md). Neue öffentliche Seiten müssen
   fonts.css selbst verlinken, sonst fallen sie auf System-Fonts zurück. */

    /* =========================================================
       DAS globale Token-Set — EIN :root, dark-only (B14-S3).
       Die App ist dark-only (data-theme="dark" statisch auf index.html +
       accept-invite.html, erzwungen von forceDarkTheme() in utils.js) —
       die früheren :root-Light-Werte waren toter Code und der
       [data-theme="dark"]-Block ist hierher gefaltet (Werte = die am
       16.07.2026 effektiv aufgelösten Dark-Werte, byte-gleich; --shadow
       kommt aus dem später gewinnenden PHASE-1-Dark-Block).
       Hinweis: login.html/reset-password.html laden main.css OHNE
       data-theme — dort lösten bisher die Light-Werte auf; deren Optik
       hängt aber vollständig an eigenen --lg-*-Tokens/Hard-Hex in
       login.css (pixelbewiesen in B14-S3).
       ========================================================= */
    :root{
      /* Globale UI-Skalierung: wirkt via body{zoom} auf ALLE Views, Header und
         Modals gleichermassen — pro View skalieren ist verboten (uneinheitlich).
         JS-positionierte Elemente (Score-Popover) kompensieren den Faktor
         über getComputedStyle(body).zoom — siehe _appZoom() in signal-index.js. */
      --app-zoom: 0.9;

      /* Typografie */
      --font-ui: 'IBM Plex Sans', sans-serif;
      --font-data: 'IBM Plex Mono', 'Courier New', monospace;
      --text-xs: 11px;
      --text-sm: 13px;
      --text-base: 15px;
      --text-xl: 22px;

      /* Flächen / Text / Rahmen (v2) */
      --surface-base: #0b0f1a;
      --surface-raised: #101a2c;
      --surface-overlay: #152238;
      --text-primary: #eef3fb;
      --text-secondary: #8a97ae;
      --text-tertiary: #4e5a6e;
      --border-subtle: rgba(255,255,255,0.04);
      --border-default: rgba(255,255,255,0.08);
      --border-strong: rgba(255,255,255,0.15);
      --accent: #4b96f5;
      --accent-subtle: rgba(75,150,245,0.14);

      /* Eigenständige Struktur-/Semantik-Tokens (kein v2-Duplikat):
         --border ist das ERZWUNGENE Alias von --border-default (gleicher
         Wert, historischer Name — Neucode nutzt --border-default; die
         View-Remaps setzen --border weiterhin eigenständig). */
      --border: var(--border-default);
      --shadow: 0 2px 8px rgba(0,0,0,0.35);
      --overlay: rgba(0,0,0,0.65);
      --radius: 12px;
      --focus: 0 0 0 3px rgba(42,125,225,0.28);
      --soft: #0c1526;
      --soft2: #0d1a31;
      --chip: #0f2b52;
      --chipBorder: #21446f;
      --ok: #2e7d32;
      --bad: #c62828;

      /* Status-Triaden (auch von accept-invite.html konsumiert) */
      --dangerBg: #2a1216;
      --dangerBorder: #5a222c;
      --dangerText: #ffb9c4;
      --goodBg: #0f2418;
      --goodBorder: #255f3a;
      --goodText: #b8ffd2;
      --warnBg: #2a1e10;
      --warnBorder: #5f4321;
      --warnText: #ffd7ad;

      /* Score-Ring (scoped Remaps: #modalBackdrop teal, Views grün, #cardGrid eigene Palette) */
      --score-ring-high: #00dfc1;
      --score-ring-medium: #f59e0b;
      --score-ring-low: #ef4444;
      --score-ring-bg: #374151;

      /* Motion */
      --duration-fast: 120ms;
      --duration-base: 200ms;
    }

    *{ box-sizing:border-box; }
    body{
      font-family: var(--font-ui);
      margin:0; background:var(--surface-base); color:var(--text-primary); line-height:1.5;
      zoom: var(--app-zoom, 1);
    }
    .container{ max-width:1600px; margin:0 auto; padding:18px 24px 28px; }

    /* B14-S2: totes Burger-Menü/Topbar-CSS (v1) entfernt — .topbar, .menu-…,
       .nav und .navbtn haben kein Markup mehr (Header v2 ersetzt sie). */

    .search-box{ flex:1; min-width:240px; }
    .search-box input{
      width:100%; padding:10px 12px; border:1px solid var(--border);
      border-radius:10px; font-size:1rem; background:var(--surface-raised); color:inherit;
    }
    .search-box input:focus{ outline:none; box-shadow:var(--focus); border-color:var(--accent); }

    /* B14-S2: tote Alt-Layout-Reste entfernt (.controls, .filters-inline,
       .summarybar, .summary-left, .pill, .sortbox — kein Markup mehr). */

    .activechips{
      display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
    }
    .achip{
      padding:7px 10px; border-radius:999px;
      border:1px solid var(--border);
      background:var(--soft);
      font-weight:900; font-size:0.86rem;
      cursor:pointer; user-select:none;
    }
    .achip:hover{ filter:brightness(1.02); }

    select{
      padding:9px 10px; border-radius:10px; border:1px solid var(--border);
      background:var(--surface-raised); font-weight:800; cursor:pointer; color:inherit;
    }
    select:focus{ outline:none; box-shadow:var(--focus); border-color:var(--accent); }

    .card-grid{
      display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
      gap:18px;
    }

    /* B14-S2: tote v1-Karten-Regeln entfernt (.startup-card*, .card-head,
       .tagrow, .card-desc, .tag*, .badge.hot/.watch/.good, .metrics,
       .metric*, .trend-up/-down, .mono, .card-actions — die Übersicht
       rendert .ovx-*). .badge (bare) bleibt: signal-index.js baut
       `class="badge plaus-…"` im Plausibilitäts-Popover. */
    .badge{
      font-size:0.78rem; font-weight:950;
      padding:6px 10px; border-radius:999px;
      border:1px solid var(--border); background:var(--surface-raised); color:inherit;
      user-select:none;
      white-space:nowrap;
    }

    .btn{
      background:var(--accent); color:#fff; border:none; padding:10px 14px;
      border-radius:10px; cursor:pointer; font-weight:950; font-size:0.95rem;
      transition:background .12s, transform .08s;
    }
    .btn:hover{ filter:brightness(0.97); }
    .btn:active{ transform:translateY(1px); }
    .btn.secondary{
      background:var(--surface-raised); color:inherit; border:1px solid var(--border);
      font-weight:950;
    }
    .btn.secondary:hover{ background:var(--soft); }
    .btn:focus{ outline:none; box-shadow:var(--focus); }

    .empty{
      padding:18px; border-radius:14px;
      border:1px dashed rgba(207,215,227,.9); background:var(--surface-raised);
      color:inherit; font-weight:900;
      text-align:center;
    }
    .hint{
      font-weight:800; color:var(--text-secondary); margin-top:6px; font-size:0.95rem;
    }

    /* MODAL (Details) */
    .modal-backdrop{
      position:fixed; inset:0; background:var(--overlay);
      /* B14-S5: flex-start + padding 0 aus den früheren !important-Patches */
      display:none; align-items:flex-start; justify-content:flex-start;
      padding:0;
      z-index:50;
    }
    /* B14-S5: der frühere „DEAL VIEW v2 — Vollbild"-!important-Patch ist in die
       Basis verschmolzen (das Modal ist seit v2 IMMER Vollbild — auch das
       Input-Modal rendert heute so). 100% statt 100vw/100dvh: vw/vh würden
       von body{zoom} mitskaliert; der Backdrop ankert via inset. */
    .modal{
      width:100%;
      max-width:100%;
      height:100%;
      max-height:100%;
      border-radius:0;
      background:var(--surface-base);
      display:flex;
      flex-direction:column;
      resize:none;
      overflow:hidden;
      border:none;
      box-shadow:none;
      color:inherit;
    }
    /* B14-S2: totes v1-Modal-Innenleben entfernt (.modal-header, .modal-title
       — Deal View v2 rendert dv-*). .close bleibt: das Send-Modal nutzt
       class="close" (#otSendCloseBtn, index.html). */
    .close{
      border:none; background:var(--surface-raised); cursor:pointer;
      border-radius:10px; padding:8px 10px; font-weight:950;
      border:1px solid var(--border);
      color:inherit;
    }
    .close:hover{ background:var(--soft); }
    .close:focus{ outline:none; box-shadow:var(--focus); }

    /* B14-S2: .modal-body/.form-row/.kpi-grid/.kpi .label|.value|.sub tot.
       .panel bleibt (Score-Regeln-Panel: ciPanel trägt class="panel").
       .kpi (bare) bleibt: Weekly-Top5 rendert class="kpi" — der scoped
       #weeklyTop5Backdrop .kpi überschreibt zwar alle 4 Props, aber die
       Basisregel gehört zum Ist-Rendering-Kontext (Abriss erst mit Beweis). */
    .panel{
      border:1px solid var(--border); border-radius:14px; padding:12px;
      background:var(--surface-raised);
    }
    .panel h3{ margin:0 0 10px; font-size:1.02rem; color:inherit; }
    /* B14-S8: bare .kpi abgetragen — Beweis erbracht: alle drei Konsumkontexte
       (Dashboard .card kpi, Weekly-Top5 .kpi, Score-Panel .tok kpi) werden
       vollständig von scoped Regeln höherer Spezifität überschrieben. */

    label{
      display:block; font-weight:950; font-size:0.86rem; color:inherit; margin:10px 0 6px;
    }
    input[type="text"], input[type="email"], input[type="number"], textarea{
      width:100%; padding:10px 10px; border-radius:10px;
      border:1px solid var(--border); font-size:1rem;
      background:var(--surface-raised); color:inherit;
    }
    textarea{ min-height:90px; resize:vertical; }
    input:focus, textarea:focus{ outline:none; box-shadow:var(--focus); border-color:var(--accent); }
    .helper{
      margin:8px 0 0; color:var(--text-secondary); font-weight:800; font-size:0.9rem;
    }

    .toast{
      position:fixed; right:16px; bottom:16px; z-index:60;
      display:none;
      align-items:center; gap:12px;
      background:#111827; color:#fff;
      padding:12px 14px; border-radius:12px;
      box-shadow:0 14px 40px rgba(0,0,0,0.25);
      max-width:min(420px, calc(100vw - 32px));
      font-weight:900;
    }
    .toast small{ display:block; opacity:0.9; margin-top:2px; font-weight:800; }
    .toast-close{
      flex-shrink:0; margin-left:auto;
      background:none; border:none; color:inherit;
      font-size:1.2rem; line-height:1; padding:0 2px;
      cursor:pointer; opacity:0.7;
    }
    .toast-close:hover{ opacity:1; }

    /* FILTER MODAL */
    .filter-backdrop{ position:fixed; inset:0; background:var(--overlay); display:none; align-items:center; justify-content:center; padding:18px; z-index:55; }
    .filter-modal{
      width:min(980px, 96vw);
      background:var(--surface-raised);
      border-radius:16px;
      box-shadow:0 20px 70px rgba(0,0,0,0.35);
      border:1px solid rgba(255,255,255,0.12);
      overflow:hidden;
      max-height: calc(92vh / var(--app-zoom, 1));
      display:flex;
      flex-direction:column;
      resize: both;
      min-width: 320px;
      min-height: 320px;
    }
    /* B14-S2: totes v1-Filter-Innenleben entfernt (.filter-header/-body/
       -section/-footer, .range-row, .tiny, .qs-row, .toggle-row, .muted-note
       — Filter-Modal v2 rendert .p-head/.block, scoped #filterBackdrop).
       Ebenfalls entfernt: komplettes Dropdown-Multi (.dd-*) und die
       Privacy-Bar/-Overlay (.privacy-*) — kein Markup/JS mehr. */

/* =========================
   VC WORKSPACE (additive)
========================= */
/* B14-S8: .view{margin-top:14px} entfernt — verlor immer gegen die spätere PHASE-1-Regel (10px) */
.panelhead{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:8px 0 12px;
}
.panelhead h2{ margin:0; font-size:1.15rem; letter-spacing:0.2px; }
.note{
  padding:10px 12px; border:1px solid var(--border); background:var(--soft2);
  border-radius:12px; font-weight:700; color:var(--text-secondary);
}
table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:0.95rem;
}
/* B14-S5: die globalen thead-th/tbody-td/tr:hover-Regeln (drei Generationen:
   v1-Basis hier, PHASE-1-Dichte, gefalteter Dark-Block) sind aufgelöst —
   ihre positiv genutzten Werte stehen jetzt direkt bei den echten
   Konsumenten (.subs2-wrap: sticky-Header; pipe3: td-Farbe; Compare:
   vertical-align). Damit entfällt der Gegner der !important-Batterien
   in den v2-Tabellen. */
.small{ padding:7px 10px; border-radius:10px; font-weight:900; font-size:0.86rem; }
.select{
  width:100%; max-width:220px;
  padding:8px 10px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface-raised); color:inherit; font-weight:800;
}
.select:focus{ outline:none; box-shadow:var(--focus); border-color:var(--accent); }

    /* B14-S2: Responsive-Queries des Alt-Layouts reduziert — nur die
       lebenden Regeln bleiben (body-Padding, card-grid einspaltig;
       „header h1" existiert im v2-Header nicht mehr). */
    @media (max-width: 920px){
      body{ padding-bottom:72px; }
    }
    @media (max-width: 680px){
      .card-grid{ grid-template-columns:1fr; }
    }

    /* =========================
       ADD-ONLY: Signal Index Explainability (v2)
    ========================= */
    .infoicon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:18px; height:18px;
      margin-left:6px;
      border:1px solid var(--border);
      border-radius:999px;
      background:var(--surface-raised);
      color:var(--text-secondary);
      font-size:12px;
      line-height:1;
      cursor:pointer;
      vertical-align:middle;
      padding:0;
    }
    .infoicon:focus{ outline:none; box-shadow:var(--focus); }
    .popover{
      position:fixed;
      max-height:calc(70vh / var(--app-zoom, 1));
      overflow:auto;
      z-index:9999;
      max-width:min(420px, calc(100vw - 24px));
      background:var(--surface-raised);
      color:var(--text-primary);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:12px 12px 10px 12px;
      display:none;
    }
    /* B14-S8: tote Popover-Kind-Selektoren entfernt (h4/.muted/.mini/ul/table/
       th/td/pre — der Popover rendert nur inline-gestylte divs + Badges,
       repo-weit bewiesen). Die .popover-Basisregel lebt. */

    /* Scroll-Locks: no-scroll (Modals/Overlays) + popover-scroll-lock (Score-
       Popover, main.js — seit 17.07.2026 Klasse statt Inline-Style; damit ist
       kein !important mehr nötig, es gibt keinen Inline-Schreiber mehr). */
    /* B36 (12.09.2026): modal-scroll-lock ist die dritte, eigene Klasse -
       das Detail-Modal teilt sich no-scroll BEWUSST nicht, weil drei fremde
       Schliesser dieses Flag bedingungslos abraeumen (weekly-top5,
       custom-index, inbox) und einer davon in derselben Escape-Kaskade
       steht. Gleiche Begruendung wie bei popover-scroll-lock. */
    body.no-scroll,
    body.modal-scroll-lock,
    body.popover-scroll-lock{ overflow:hidden; }
    .popover{ overscroll-behavior:contain; }
    /* B36: Das Popover nimmt jetzt den Fokus (Tastatur-Erreichbarkeit).
       Ohne diese Zeile traege es einen Fokusring, und der landete in den
       Shot- und Fingerprint-Aufnahmen - gleiches Muster wie
       #modalBackdrop .modal:focus. */
    #signalIndexPopover:focus{ outline:none; }
    /* B36-Nachlauf 5: dieselbe Regel für die drei Overlays, die nach dem
       Verdrängen des Detail-Modals den Fokus übernehmen. */
    #customIndexBackdrop:focus,
    #weeklyTop5Backdrop .top5-modal:focus,
    #filterBackdrop:focus{ outline:none; }

    /* B14-S2: altes Compare-CSS entfernt (.comparelist, .cmpCell/.cmpBar/
       .cmpFill/.cmpVal, .compareTable*, .compareTop, .compareRowCard —
       Compare v2 rendert #viewCompare .rank-row/.detail). */


    /* B14-S2: toter V5-Block entfernt (.demo-badge, .startup-card .tagrow,
       .metrics/.metric-Tweaks, .pipeTopRight/.pipeTopRow*, .statusSel,
       .status-blue/-green/-red, .pipeStatusBadge — 10 tote !important). */

/* Custom Index V6 (Rules) — nur noch die Backdrop-Hülle: das Element
   #customIndexBackdrop trägt class="custom-backdrop"; das Panel-Innere
   rendert v2 (ci-*, scoped weiter unten). */
.custom-backdrop{
  position:fixed; inset:0;
  display:none;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 80;
  align-items:center;
  justify-content:center;
  padding: 14px;
}
/* B14-S2: totes Custom-Index-v1-Panel entfernt (.custom-sheet/-head/-body/
   -tabs/-grid/-panel/-row/-mini, .rules-group*, .rules-list, .rule-row*,
   .rule-actions, .custom-scorebox, .custom-pill, .custom-i-btn,
   .custom-table, .compareTop, .tabbtn — Score-Regeln v2 rendert ci-*).
   Ebenfalls tot entfernt: .synced-label (Pipeline v2 rendert das
   Synced-Badge über pipe3-*). */
/* =========================
   PLAUSIBILITY: Status im Popover
========================= */
/* Betreiber-Entscheid 17.07.2026: Plausibilitäts-Status OHNE Schattierung —
   reine Farbschrift statt Badge-Fläche (wie Detailansicht-Pill und
   subs2-plaus-label, die schon immer textfarbig sind). Die Zwei-Klassen-
   Spezifität neutralisiert alle drei einklassigen .badge-Basisregeln
   (Fläche/Rand/Hellschrift) ohne !important — die früheren drei
   border-color-!important (B14-Audit, „8 begründete") entfallen damit. */
.badge.plaus-passed,
.badge.plaus-flagged,
.badge.plaus-failed{
  background:none;
  border:none;
}
.badge.plaus-passed{ color:var(--goodText); }
.badge.plaus-flagged{ color:var(--warnText); }
.badge.plaus-failed{ color:var(--dangerText); }

/* =========================
   PLAUSIBILITY: Breakdown popover list
========================= */
.plaus-check{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid var(--border);
  font-size:0.88rem;
}
.plaus-check:last-child{ border-bottom:none; }
.plaus-icon{
  font-size:1rem;
  min-width:20px;
  text-align:center;
  line-height:1.4;
}
.plaus-icon-pass{ color:var(--goodText); }
.plaus-icon-fail-soft{ color:var(--warnText); }
.plaus-icon-fail-hard{ color:var(--dangerText); }
.plaus-icon-skipped{ color:#6b7280; } /* nicht anwendbar — neutral; B14-S6: das nie definierte var(--muted) ist entfernt, es galt immer der Fallback */
.plaus-check-body{ flex:1; }
.plaus-check-label{ font-weight:900; }
.plaus-check-message{
  color:var(--text-secondary);
  margin-top:2px;
}
.plaus-check-kategorie{
  font-size:0.75rem;
  color:var(--text-secondary);
  background:var(--soft);
  padding:1px 6px;
  border-radius:4px;
  margin-left:6px;
  font-weight:700;
}
.plaus-summary{
  font-size:0.82rem;
  color:var(--text-secondary);
  margin-top:4px;
  font-weight:700;
}

/* B14-S2: tot entfernt — .crm-push-btn (Pipeline v2 nutzt .pipe3-crm; 3 tote
   !important), .owner-input (pipeline.owner-Spalte existiert nicht mehr),
   .score-row/.score-badge/.score-value/.score-label/.score-red/-orange/
   -yellow/-green/.score-preset-name (Karten nutzen den Score-Ring). */

/* Info icon button on score badge */
.infoicon{
  background:none; border:1px solid var(--border); border-radius:999px;
  padding:2px 7px; cursor:pointer; font-size:0.88rem;
  color:var(--text-secondary); font-weight:950;
  transition:border-color .12s, color .12s;
}
.infoicon:hover{ border-color:var(--accent); color:var(--accent); }

.popover-drag-handle{ cursor:grab; user-select:none; }
.popover-drag-handle:active{ cursor:grabbing; }

/* =========================
   SCORE BREAKDOWN (Popover items)
========================= */
.breakdown-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--border); font-size:0.9rem;
}
.breakdown-item:last-child{ border-bottom:none; }
.breakdown-rule{ flex:1; }
.breakdown-points{
  font-weight:950; font-variant-numeric:tabular-nums;
  min-width:60px; text-align:right;
}
.breakdown-positive{ color:var(--ok); }
.breakdown-negative{ color:var(--bad); }
.breakdown-zero{ color:var(--text-secondary); }

/* B14-S2: totes v1-Dashboard-CSS entfernt (.dash-*, .funnel-*, .pipe-seg*,
   .pipe-legend*, .histogram/.histo-*, .hbar-*, .activity-mini*, dashpulse
   — Dashboard v2 rendert #viewDashboard mit direkten Hex-Werten).
   Ebenso das tote v1-Notes-CSS (#notesPanel/#notesList, .notes-*,
   .card-notes-indicator — Notizen leben als dv-note-* im Detail-Modal). */

/* =========================
   DECLINE DIALOG
========================= */
.decline-dialog { position:fixed; inset:0; background:var(--overlay); display:flex; align-items:center; justify-content:center; z-index:9999; }
.decline-dialog-inner { background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius); padding:24px; max-width:420px; width:90%; box-shadow:var(--shadow); }
.decline-dialog-inner h4 { margin:0 0 8px 0; font-size:1.05rem; }
.decline-dialog-inner label { display:block; margin-top:12px; font-weight:800; font-size:0.88rem; }
.decline-dialog-inner select, .decline-dialog-inner textarea { width:100%; margin-top:4px; padding:10px; border-radius:8px; border:1px solid var(--border); background:var(--soft); color:inherit; font-size:0.92rem; font-family:inherit; }
/* B14-R1: tote border-color:var(--accent) entfernt — die dunkle Input-Gruppe
   gewann sie schon immer (Fokus-Look = Halo auf var(--border)) */
.decline-dialog-inner select:focus, .decline-dialog-inner textarea:focus { outline:none; box-shadow:var(--focus); }
.decline-dialog-actions { display:flex; gap:8px; margin-top:16px; }
.decline-dialog-deal { font-weight:900; margin:0 0 8px 0; color:var(--text-secondary); font-size:0.92rem; }
.decline-reason-text { font-size:0.78rem; color:var(--text-secondary); margin-top:3px; font-weight:700; }
.shake { animation:shake 0.3s ease; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }

/* =========================
   BULK ACTIONS
========================= */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--soft2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  animation: slideDown 0.2s ease;
}
.bulk-toolbar .bulk-count {
  font-weight: 950;
  font-size: 0.92rem;
  margin-right: 8px;
}
.bulk-toolbar select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.bulk-check {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}
tr.bulk-selected { background: var(--soft2); }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================
   PHASE 1: Investor Workspace Refinement
   Visual-only overrides (no logic changes)
   B14-S3: der zweite :root-Block (re-deklarierte LIGHT-Werte für --radius/
   --shadow/--soft/--soft2 — überschrieb die Dark-Werte, weshalb der
   „DM-1..5-fix"-Reparatur-Dark-Block existierte) ist ersatzlos in den
   einen :root am Dateikopf gefaltet (--shadow trägt dort den effektiven
   Wert 0 2px 8px rgba(0,0,0,0.35) aus dem Reparatur-Block).
========================= */
body{
  line-height:1.4;
  letter-spacing:0.01em;
}
.container{
  padding-top:10px;
}

/* B14-S2: PHASE-1-Overrides auf tote v1-Ziele entfernt (.topbar, .menu-*,
   .navbtn, .dd-*, .pill, .tag, .stage-badge, .startup-card h3, .tagrow,
   .score-row/-badge/-value/-preset-name, .card-notes-indicator, .card-desc,
   .metrics/.metric (2 tote !important), .card-actions, .dash-*, .muted-note,
   .tablewrap, .compareTable*, .filter-section, .custom-sheet, .modal-header/
   .filter-header/.custom-head). Lebende Overrides bleiben: */

.btn,
.badge,
.achip,
select,
.search-box input,
input[type="text"],
input[type="email"],
input[type="number"],
textarea{
  border-radius:7px;
}

.search-box input{
  padding:8px 10px;
  font-size:0.9rem;
}

.activechips{
  margin-top:6px;
  gap:6px;
}
.achip{
  font-size:0.74rem;
  font-weight:700;
  padding:4px 8px;
}

.card-grid{
  gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
}

.badge{
  font-size:0.69rem;
  font-weight:700;
  padding:3px 6px;
  background:var(--soft);
}

.btn{
  padding:7px 10px;
  border-radius:7px;
  font-size:0.79rem;
  font-weight:750;
  letter-spacing:0.01em;
}
.btn.secondary{
  background:var(--soft);
}

.view{
  margin-top:10px;
}
.panelhead{
  margin:2px 0 8px;
}
.panelhead h2{
  font-size:1.03rem;
  font-weight:800;
  letter-spacing:0.01em;
}
.note,
.helper{
  font-size:0.8rem;
}

.panel,
.bulk-toolbar{
  border-radius:8px;
  box-shadow:none;
}

/* B14-S5: von den drei globalen Tabellen-Generationen überleben exakt die
   Props, die reale Konsumenten nicht selbst setzen — bewusst niedrig-
   spezifisch (Element-Selektoren), damit Zellklassen wie td.subs2-sector
   weiter gewinnen: text-transform prägt die pipe3-Kopfzeile, font-size
   die klassenlosen Zellen, color die klassenlosen pipe3-Zellen. */
thead th{ text-transform:uppercase; }
tbody td{ font-size:0.84rem; color:#eef3fb; }

.filter-modal{
  border-radius:10px;
  box-shadow:0 16px 44px rgba(15,23,42,0.34);
}

@media (max-width:680px){
  .card-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   Dunkle Komponenten-Basis (ehem. „HOTFIX: Dark Mode Contrast Normalization")
   B14-S4: die HOTFIX-Patch-Schicht ist abgetragen — Regeln auf tote Ziele
   gelöscht, die wertidentische „[data-theme=dark] body"-Regel ersatzlos
   entfallen, das HOTFIX-Token-Set aufgelöst (--surface-0 == --surface-base,
   --text-strong == #eef3fb, --surface-1/2 == #111827/#1a2235, --text-soft
   == #b7c3d7 — als Hex, denn die globalen v2-Tokens haben ANDERE Werte
   und die scoped Remaps würden var(--text-primary) etc. umbiegen).
   B14-S5-Endzustand: die Regeln unten sind ATTRIBUTFREI (alle früheren
   Kaskaden-Duelle einzeln aufgelöst — die Verlierer-Regeln trugen tote
   Absichtswerte und wurden bereinigt). ACHTUNG: dadurch matchen die
   Input-/Placeholder-Regeln jetzt AUCH auf login/reset-password —
   deren Optik sichern login.css (lädt später, gewinnt jedes Duell)
   und das opacity:1-Placeholder-Pinning dort.
========================= */
.btn.secondary,
.achip,
.badge,
.panel,
.bulk-toolbar{
  background:#111827;
  border-color:var(--border);
  color:#eef3fb;
}

.filter-modal{
  background:#111827;
  border-color:var(--border);
}

select,
.select,
.search-box input,
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
.decline-dialog-inner select,
.decline-dialog-inner textarea{
  background:#1a2235;
  border-color:var(--border);
  color:#eef3fb;
}

input::placeholder,
textarea::placeholder{
  color:#b7c3d7;
  opacity:0.9;
}

.helper,
.plaus-check-message,
.plaus-summary{
  color:#b7c3d7;
}


/* ========================= CARD DESIGN — approved =========================
   B14-S2: totes v2-Karten-CSS entfernt (.startup-card*-Verbünde, .card-head-
   left, .card-name, .cid, .card-angefragt-pill, .kpi-grid, .kpi-tile,
   .kpi-lbl + der komplette :root:not([data-theme=dark])-Light-Block — die
   Übersicht rendert .ovx-*). Es bleiben die LEBENDEN unscoped Bausteine:
   Score-Ring-Umfeld (_buildScoreRing, renderers-cards.js) und .kpi-val
   (Weekly-Top5 rendert class="kpi-val"). */

/* Score ring — top right of card */
.score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.score-num {
  position: relative;
  z-index: 1;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: 1;
}

.score-lbl {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  max-width: 58px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-wrap .infoicon {
  font-size: 10px;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border-color: rgba(255,255,255,0.12);
  color: var(--text-secondary);
  background: transparent;
  border-radius: 50%;
}

.score-wrap .infoicon:hover {
  border-color: rgba(59,130,246,0.4);
  color: var(--accent);
}

.kpi-val {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.kpi-val.pos { color: #10b981; }
.kpi-val.neg { color: #f87171; }


/* ========================= SUBMISSIONS (Triage-Posteingang) =========================
   Das Submissions-CSS lebt vollständig gescoped unter #viewSubmissions (wie
   #viewPipeline) — kein globaler Basis-Block mehr. Siehe „SUBMISSIONS-VIEW —
   Design Triage-Posteingang" weiter unten. ========================================= */

/* INPUT MODAL OVERLAY */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--overlay);
  align-items: center;
  justify-content: center;
}
.modal-overlay[aria-hidden="true"] { display: none; }
.modal-overlay[aria-hidden="false"] { display: flex; }

/* Dialoge (klein, zentriert) — Opt-out von der Vollbild-.modal-Basis:
   „Bühne = Vollbild (Detailansicht), Dialog = klein" (Entscheid Andreas
   17.07.2026; bis dahin rannten Input- und Follow-up-Dialog als Kollateral
   des Deal-View-Patches vollflächig). max-height kompensiert body{zoom}
   (CLAUDE.md: vh-Werte werden mitskaliert). */
.modal-overlay .modal {
  width: auto;
  min-width: 320px;
  height: auto;
  max-height: calc(90vh / var(--app-zoom, 1));
  border-radius: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: auto;
}
.modal-overlay .input-modal { width: min(420px, calc(100vw - 32px)); }
.modal-overlay .followup-modal { width: min(540px, 94vw); padding: 24px; }

.modal-overlay .input-modal {
  /* B14-S5: width/background/border/radius/shadow/overflow standen hier als
     tote Absichtswerte — der Vollbild-Patch (jetzt .modal-Basis) gewann sie
     schon immer; das Input-Modal rendert seit v2 vollflächig (Ist-Zustand,
     als UX-Befund an Andreas dokumentiert). Lebendig waren nur: */
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-overlay .input-modal h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text-primary);
}

.modal-overlay .input-modal #input-modal-field {
  width: 100%;
  box-sizing: border-box;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.modal-actions button {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
}
.modal-actions button:hover { background: var(--soft); }

/* Primär-Aktion = Teal (Design-Doku §3/§4; Entscheid Andreas 17.07.2026 —
   das frühere Blau war ein Alt-Token-Artefakt, das nur per !important lebte). */
.btn-primary {
  background: #00dfc1;
  color: #04231e;
  border-color: transparent;
}
.btn-primary:hover { filter: brightness(1.1); }
/* Confirms in .modal-actions: schlägt die generische Button-Optik (0,1,1)
   und deren :hover (gleichrangig, aber früher) */
.modal-actions button.btn-primary {
  background: #00dfc1;
  color: #04231e;
  border-color: transparent;
}

/* =========================
   HORIZONTAL TAB-NAV
========================= */
/* =========================
   OUTREACH TRACKER v2
========================= */
/* Scoped Token-Remap auf v2 (Mockup): body.v2-dark wird in setActiveNav()
   gesetzt, der Remap mappt alle vom ot-*-CSS genutzten Tokens auf die v2-
   Palette. So gilt #0b0f1a/#111827/#1a2235 + Teal #00dfc1 nur in dieser View. */
#viewInbox {
  --surface-base: #0b0f1a;
  --surface-raised: #111827;
  --surface-overlay: #1a2235;
  --text-primary: #f0f4ff;
  --text-secondary: #8892a4;
  --text-tertiary: #4e5a72;
  --border: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.06);
  --soft: #0b0f1a;
  --soft2: #1a2235;
  --chip: rgba(0,223,193,0.08);
  --chipBorder: rgba(0,223,193,0.2);
  --accent: #00dfc1;
  --accent-subtle: rgba(0,223,193,0.1);
  --radius: 12px;
  --warnText: #f59e0b;
  --goodText: #00dfc1;
  --dangerText: #ef4444;
}

/* Messenger-Layout (seit 17.07.2026, mockup-anfragen-konversationen-final.html):
   Thread-Liste 340px | Konversation. Höhe unter dem 52px-Header, app-zoom-fest —
   KEIN nacktes 100dvh (vh wird vom body-zoom mitskaliert); 96px = Header +
   Container-Abstände, dieselbe Konstante wie zuvor .ot-master-detail. */
.ot-msgr { display:grid; grid-template-columns:340px 1fr; height:calc(100dvh / var(--app-zoom, 1) - 96px); min-height:420px; background:transparent; }
@media(max-width:900px) { .ot-msgr { grid-template-columns:1fr; } .ot-conv { display:none; } }

/* ---------- Thread-Liste ---------- */
.ot-side { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border); }
.ot-side-head { padding:14px 16px 0; flex-shrink:0; }
.ot-title { margin:0; font-size:1.05rem; font-weight:800; letter-spacing:-0.01em; color:var(--text-primary); }
.ot-side-sub { font-size:0.72rem; color:var(--text-tertiary); margin-top:1px; }
.ot-search { margin:10px 16px 6px; position:relative; flex-shrink:0; }
.ot-search input { width:100%; box-sizing:border-box; font-family:inherit; font-size:0.8rem; color:var(--text-primary); background:var(--surface-raised); border:1px solid var(--border); border-radius:9px; padding:8px 12px 8px 30px; outline:none; transition:border-color 150ms; }
.ot-search input:focus { border-color:var(--chipBorder); }
.ot-search input::placeholder { color:var(--text-tertiary); }
.ot-search-ic { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-tertiary); font-size:0.78rem; }

/* Filter-Chips — ruhig, Farbe NUR als Dot (Design-Gesetz der Pulse-Serie) */
.ot-filters { display:flex; gap:3px; padding:2px 16px 10px; flex-wrap:wrap; flex-shrink:0; }
.ot-flt { font-family:inherit; display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:0.72rem; font-weight:600; color:var(--text-secondary); background:transparent; border:1px solid transparent; border-radius:7px; padding:4px 9px; transition:color 130ms, background 130ms, border-color 130ms; }
.ot-flt b { color:var(--text-tertiary); font-weight:600; font-size:0.66rem; }
.ot-flt-d { width:5px; height:5px; border-radius:50%; background:var(--c, var(--text-secondary)); }
.ot-flt:hover { color:var(--text-primary); background:var(--surface-raised); }
.ot-flt.on { color:var(--text-primary); background:var(--surface-raised); border-color:var(--border); }

/* Thread-Liste = eigener Scroll-Container (Windowing-Sentinel .ov-more lebt hier) */
.ot-list { flex:1; overflow-y:auto; min-height:0; padding:0 8px 14px; }
.ot-row { display:flex; gap:11px; align-items:flex-start; padding:11px 10px; border-radius:11px; cursor:pointer; transition:background 120ms; position:relative; }
.ot-row:hover { background:var(--surface-raised); }
.ot-row.on { background:var(--surface-raised); box-shadow:inset 0 0 0 1px var(--border); }
.ot-ava { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:800; color:var(--text-secondary); background:var(--surface-overlay); border:1px solid rgba(255,255,255,0.12); position:relative; }
.ot-sdot { position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; border:2px solid var(--surface-base); background:var(--c, var(--text-tertiary)); }
.ot-ti-main { min-width:0; flex:1; }
.ot-ti-l1 { display:flex; align-items:baseline; gap:7px; }
.ot-ti-nm { font-size:0.84rem; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ot-ti-t { margin-left:auto; font-size:0.66rem; color:var(--text-tertiary); flex-shrink:0; }
.ot-ti-prev { font-size:0.74rem; color:var(--text-secondary); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ot-du { color:var(--text-tertiary); }
.ot-row.unread .ot-ti-nm { color:var(--text-primary); }
.ot-row.unread .ot-ti-prev { color:var(--text-primary); font-weight:600; }
.ot-ti-badges { display:flex; gap:6px; margin-top:4px; align-items:center; }
.ot-ftag { font-size:0.62rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#f59e0b; }
.ot-atag { font-size:0.62rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-tertiary); }
.ot-un { flex-shrink:0; align-self:center; min-width:17px; height:17px; border-radius:999px; background:var(--accent); color:#04231e; font-size:0.66rem; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 5px; }

/* ---------- Konversation ---------- */
.ot-conv { display:flex; flex-direction:column; min-height:0; min-width:0; }
.ot-conv-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--text-tertiary); font-size:0.86rem; }
.ot-conv-empty-mark { font-size:1.7rem; }
.ot-cv-head { flex-shrink:0; display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--surface-raised); }
.ot-cv-id { min-width:0; }
.ot-cv-l1 { display:flex; align-items:baseline; gap:6px; }
.ot-detail-name { font-size:0.95rem; font-weight:750; color:var(--text-primary); }
.ot-cv-status { font-size:0.72rem; font-weight:700; color:var(--c, var(--text-secondary)); white-space:nowrap; }
.ot-cv-meta { font-size:0.72rem; color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ot-cv-sp { flex:1; }
.ot-hbtn { font-family:inherit; font-size:0.76rem; font-weight:600; color:var(--text-secondary); background:transparent; border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:6px 11px; cursor:pointer; transition:color 130ms, background 130ms; white-space:nowrap; }
.ot-hbtn:hover { color:var(--text-primary); background:var(--surface-overlay); }
.ot-hbtn.pri { background:var(--accent); color:#04231e; border-color:transparent; font-weight:700; }
.ot-hbtn.pri:hover { filter:brightness(1.08); color:#04231e; background:var(--accent); }

/* Verlauf: Tages-Trenner, Bubbles, System-Zeilen */
.ot-msgs { flex:1; overflow-y:auto; min-height:0; padding:20px 24px; display:flex; flex-direction:column; gap:10px; }
.ot-msgs-empty { color:var(--text-tertiary); font-size:0.82rem; text-align:center; padding:24px 0; }
.ot-day { display:flex; align-items:center; gap:12px; margin:8px 0 2px; }
.ot-day::before, .ot-day::after { content:""; flex:1; height:1px; background:var(--border); }
.ot-day span { font-size:0.64rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); }
.ot-mrow { display:flex; flex-direction:column; max-width:min(560px, 78%); animation:otMsgIn 300ms ease both; }
@keyframes otMsgIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.ot-mrow.out { align-self:flex-end; align-items:flex-end; }
.ot-mrow.in { align-self:flex-start; align-items:flex-start; }
.ot-bubble { border-radius:14px; padding:10px 14px; }
.ot-mrow.in .ot-bubble { background:var(--surface-raised); border:1px solid var(--border); border-bottom-left-radius:5px; }
.ot-mrow.out .ot-bubble { background:var(--surface-overlay); border:1px solid var(--chipBorder); border-bottom-right-radius:5px; }
.ot-bubble-text { font-size:0.82rem; line-height:1.55; color:var(--text-primary); white-space:pre-wrap; word-break:break-word; }
.ot-bubble-sender { font-size:0.64rem; color:var(--text-tertiary); margin-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ot-ok { color:var(--accent); }
.ot-via { color:var(--text-tertiary); }
.ot-draft { color:#f59e0b; font-weight:700; }
.ot-msg-failed { color:#ef4444; font-weight:700; white-space:nowrap; }
.ot-followup-marker { font-size:0.6rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:#f59e0b; margin-bottom:3px; }
.ot-sys { align-self:center; display:flex; align-items:center; gap:8px; font-size:0.68rem; color:var(--text-tertiary); padding:2px 0; text-align:center; }
.ot-sys::before, .ot-sys::after { content:""; width:26px; height:1px; background:var(--border); flex-shrink:0; }

/* Abmeldung (Outreach): rote Markierung — abgemeldeter Gruender, Versand serverseitig gesperrt */
.ot-unsub-pill { display:inline-flex; align-items:center; padding:1px 7px; border-radius:999px; background:rgba(239,68,68,0.12); color:#ef4444; font-size:0.62rem; font-weight:700; white-space:nowrap; flex-shrink:0; }
.ot-unsub-banner { padding:12px 14px; border-radius:var(--radius); border:1px solid rgba(239,68,68,0.25); background:rgba(239,68,68,0.08); font-size:0.8rem; color:#ef4444; line-height:1.5; }
.ot-unsub-banner strong { font-weight:800; }

/* ---------- Composer ---------- */
.ot-comp { flex-shrink:0; border-top:1px solid var(--border); background:var(--surface-raised); padding:12px 20px 10px; }
.ot-tmpl { display:flex; gap:6px; margin-bottom:9px; flex-wrap:wrap; }
.ot-tmpl button { font-family:inherit; font-size:0.68rem; font-weight:600; color:var(--text-secondary); background:transparent; border:1px solid var(--border); border-radius:999px; padding:3px 10px; cursor:pointer; transition:color 120ms, border-color 120ms; }
.ot-tmpl button:hover { color:var(--text-primary); border-color:rgba(255,255,255,0.12); }
.ot-comp-row { display:flex; gap:10px; align-items:flex-end; }
.ot-comp-row textarea { flex:1; font-family:inherit; font-size:0.82rem; color:var(--text-primary); background:var(--surface-base); border:1px solid var(--border); border-radius:11px; padding:10px 14px; resize:none; outline:none; min-height:42px; max-height:130px; transition:border-color 150ms; line-height:1.5; }
.ot-comp-row textarea:focus { border-color:var(--chipBorder); }
.ot-comp-row textarea::placeholder { color:var(--text-tertiary); }
.ot-send { font-family:inherit; flex-shrink:0; font-size:0.8rem; font-weight:700; color:#04231e; background:var(--accent); border:none; border-radius:10px; padding:10px 18px; cursor:pointer; transition:filter 130ms; }
.ot-send:hover { filter:brightness(1.08); }
.ot-send:disabled { opacity:0.4; cursor:default; filter:none; }
.ot-comp-hint { font-size:0.64rem; color:var(--text-tertiary); margin-top:7px; }

/* Empty state (Thread-Liste) */
.ot-empty { padding:48px 20px; text-align:center; }
.ot-empty-title { font-size:0.95rem; font-weight:700; color:var(--text-primary); margin:0 0 5px; }
.ot-empty-sub { font-size:0.82rem; color:var(--text-secondary); font-weight:400; margin:0; line-height:1.45; }

/* Ungelesen-Badge am Anfragen-Tab (App-Header — bewusst AUSSERHALB des
   #viewInbox-Token-Scopes, daher direkte Werte wie die Neu-Pill der Übersicht) */
.viewnav-tab .ot-nav-badge, .viewnav-tab .subs2-nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; border-radius:999px; background:#00dfc1; color:#04231e; font-size:0.62rem; font-weight:800; padding:0 4px; margin-left:6px; vertical-align:1px; }

@media (prefers-reduced-motion: reduce) {
  .ot-mrow { animation:none; }
}

/* Outreach-Modals liegen AUSSERHALB #viewInbox — eigener v2-Token-Remap,
   damit die ot-*-Styles auch hier auf die v2-Palette aufloesen. */
#otSendBackdrop, #followup-modal-overlay {
  --surface-raised: #111827;
  --soft: #0b0f1a;
  --soft2: #1a2235;
  --border: rgba(255,255,255,0.06);
  --accent: #00dfc1;
  --accent-subtle: rgba(0,223,193,0.1);
  --chip: rgba(0,223,193,0.08);
  --chipBorder: rgba(0,223,193,0.2);
  --text-primary: #f0f4ff;
  --text-secondary: #8892a4;
  --goodBg: rgba(0,223,193,0.12);
  --goodText: #00dfc1;
  --overlay: rgba(0,0,0,0.6);
  --focus: 0 0 0 3px rgba(0,223,193,0.1);
}
/* B14-S5: die frühere #followup-modal-overlay-.modal-Regel (bg/border) war tot — der Vollbild-Patch (jetzt .modal-Basis) gewann immer */
#followup-modal-overlay .modal h3 { color:#f0f4ff; }

/* Send Modal */
.ot-send-backdrop { position:fixed; inset:0; background:var(--overlay); display:none; align-items:center; justify-content:center; padding:18px; z-index:70; }
.ot-send-modal { width:min(600px,96vw); background:var(--surface-raised); border-radius:14px; border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,0.3); display:flex; flex-direction:column; max-height:calc(90vh / var(--app-zoom, 1)); overflow:hidden; }
.ot-send-head { padding:15px 18px 11px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; background:var(--soft2); flex-shrink:0; }
.ot-send-title { font-size:0.98rem; font-weight:950; margin:0 0 2px; }
.ot-send-sub { font-size:0.78rem; color:var(--text-secondary); font-weight:700; }
.ot-send-body { padding:0; overflow:auto; flex:1; }
.ot-startup-chip { display:flex; align-items:center; gap:10px; padding:11px 18px; border-bottom:1px solid var(--border); background:var(--soft2); }
.ot-avatar { width:34px; height:34px; border-radius:50%; background:var(--goodBg); display:flex; align-items:center; justify-content:center; font-size:0.76rem; font-weight:950; color:var(--goodText); flex-shrink:0; }
.ot-chip-name { font-size:0.88rem; font-weight:800; }
.ot-chip-meta { font-size:0.74rem; color:var(--text-secondary); font-weight:700; }
.ot-field-block { padding:10px 18px 0; }
.ot-field-label { font-size:0.7rem; font-weight:900; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-secondary); margin-bottom:5px; }
.ot-from-chip { display:flex; align-items:center; gap:6px; font-size:0.82rem; padding:7px 10px; background:var(--soft2); border-radius:8px; border:1px solid var(--border); }
.ot-from-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.ot-subject-input { width:100%; padding:7px 10px; border-radius:8px; border:1px solid var(--border); background:var(--soft2); color:var(--text-primary); font-size:0.82rem; font-family:inherit; font-weight:600; }
.ot-subject-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); }
.ot-tpl-bar { display:flex; gap:6px; padding:10px 18px 0; flex-wrap:wrap; }
.ot-tpl-btn { padding:5px 11px; border-radius:8px; border:1px solid var(--border); background:var(--soft2); font-size:0.76rem; font-weight:900; color:var(--text-secondary); cursor:pointer; font-family:inherit; transition:background 100ms, color 100ms, border-color 100ms; }
.ot-tpl-btn.active { background:var(--chip); color:var(--accent); border-color:var(--chipBorder); }
.ot-body-textarea { margin:8px 18px 0; width:calc(100% - 36px); padding:11px; background:var(--soft2); border-radius:8px; border:1px solid var(--border); /* B14-S5: tote color-Deklaration entfernt — die dunkle textarea-Basis (#eef3fb) gewann schon immer */ font-size:0.82rem; font-family:inherit; line-height:1.65; resize:vertical; min-height:150px; }
.ot-body-textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); }
.ot-char-count { font-size:0.7rem; color:var(--text-secondary); text-align:right; padding:4px 18px 0; font-family:var(--font-data, monospace); }
.ot-send-footer { padding:11px 18px; border-top:1px solid var(--border); background:var(--surface-raised); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0; }
.ot-footer-hint { font-size:0.7rem; color:var(--text-secondary); font-weight:700; }
.ot-send-actions { display:flex; gap:8px; }
.ot-btn-send { padding:7px 16px; border-radius:7px; border:none; background:var(--accent); color:#000; font-size:0.82rem; font-weight:800; cursor:pointer; font-family:inherit; }
.ot-btn-send:hover { filter:brightness(0.93); }
.ot-btn-send:disabled { opacity:0.45; cursor:not-allowed; }

/* Followup modal */
.followup-modal { /* B14-S5: tote width entfernt — der Vollbild-Patch gewann immer (Dialog rendert vollflächig) */ display:flex; flex-direction:column; gap:12px; }
.followup-modal h3 { margin:0; font-size:1rem; font-weight:900; }
.followup-tpl-bar { display:flex; gap:8px; flex-wrap:wrap; }
.followup-tpl-btn { padding:5px 11px; border-radius:8px; border:1px solid var(--border); background:var(--surface-raised); color:var(--text-secondary); font-weight:700; font-size:0.82rem; cursor:pointer; font-family:inherit; }
.followup-tpl-btn.active { background:var(--chip); border-color:var(--chipBorder); color:var(--accent); }
.followup-modal textarea { width:100%; min-height:160px; border-radius:10px; border:1px solid var(--border); background:var(--soft2); color:var(--text-primary); font-size:0.84rem; font-family:inherit; padding:10px 12px; resize:vertical; }
.followup-modal textarea:focus { outline:none; box-shadow:var(--focus); border-color:var(--accent); }
/* Dark-Overrides (App ist dark-only) auf v2-Teal angeglichen */
/* B14-S4: die sechs data-theme-ot-Overrides waren wertidentisch mit ihren Basisregeln (Toggle-Ära) — ersatzlos entfernt. */

/* Messenger 17.07.2026: .ot-bubble-toggle (Mehr/Weniger) und der alte blaue
   .ot-followup-marker-Divider sind entfallen — Bubbles zeigen den vollen Text,
   der Follow-up-Marker lebt jetzt als kleines Label über der Bubble (oben). */

/* =========================================================
   DASHBOARD VIEW — Design „Command Center" (seit 18.07.2026)
   Referenz-Mockup: mockup-dashboard-command-center-final.html (verbindlich)
   Audit: docs/audits/2026-07-18-dashboard-command-center.md
   Regel §0: Farbe = Information (Charts/Werte); Aktivitaet bleibt monochrom.
   Direkte Hex (wie #viewPipeline/#viewActivity), scoped auf #viewDashboard.
   Auf 1220px gedeckelt (wie Übersicht/Pipeline — App-Container ist breiter).
   ========================================================= */
#viewDashboard { padding: 4px 0 40px; max-width: 1220px; margin: 0 auto; }

/* Kopf + Zeitraum-Umschalter */
#viewDashboard .panelhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; }
#viewDashboard .panelhead h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #f0f4ff; margin: 0; }
#viewDashboard .panelhead .sub { font-size: 12.5px; color: #8892a4; font-weight: 500; margin-top: 3px; }
#viewDashboard .panelhead .sub b { color: #f0f4ff; font-weight: 600; }
#viewDashboard .panelhead .meta { font-size: 12px; color: #8892a4; font-weight: 500; white-space: nowrap; }
#viewDashboard .seg { display: flex; background: #111827; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 3px; gap: 2px; }
#viewDashboard .seg-btn { font: inherit; font-size: 12.5px; font-weight: 600; color: #8892a4; background: transparent; border: none; border-radius: 7px; padding: 6px 14px; cursor: pointer; transition: all 0.13s; }
#viewDashboard .seg-btn:hover { color: #f0f4ff; }
#viewDashboard .seg-btn.on { color: #f0f4ff; background: #222d42; box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
#viewDashboard .seg-btn:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }

/* Zeitraum-Umschalter (Segmented Control) */
#viewDashboard .seg { display: flex; background: #111827; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 3px; gap: 2px; }
#viewDashboard .seg-btn { font: inherit; font-size: 12.5px; font-weight: 600; color: #8892a4; background: transparent; border: none; border-radius: 7px; padding: 6px 14px; cursor: pointer; transition: all 0.13s; }
#viewDashboard .seg-btn:hover { color: #f0f4ff; }
#viewDashboard .seg-btn.on { color: #f0f4ff; background: #222d42; box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
#viewDashboard .seg-btn:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }

/* Karte */
#viewDashboard .card { background: #111827; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 16px 18px; transition: border-color 0.16s; min-width: 0; }
#viewDashboard .card:hover { border-color: rgba(255,255,255,0.12); }
#viewDashboard .c-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: #4e5a72; }
#viewDashboard .c-sub { font-size: 11.5px; color: #8892a4; font-weight: 500; margin-top: 2px; margin-bottom: 14px; }
#viewDashboard .c-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#viewDashboard .c-link { background: none; border: none; color: #8892a4; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
#viewDashboard .c-link:hover { color: #f0f4ff; }

/* KPI-Reihe (21st.dev-Stat-Card-Anatomie: Label · Wert · Delta · Sparkline).
   .k-val bleibt Test-Vertrag (workspace-deep/app-complete). */
#viewDashboard .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
#viewDashboard .kpi { position: relative; overflow: hidden; background: #111827; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 15px 17px 13px; transition: border-color 0.16s; animation: dashKpiIn 0.4s ease both; }
#viewDashboard .kpi:hover { border-color: rgba(255,255,255,0.12); }
#viewDashboard .kpi.flag { border-color: rgba(0,223,193,0.22); }
#viewDashboard .kpi .k-label { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #8892a4; }
#viewDashboard .kpi .k-val { font-size: 27px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; margin-top: 5px; font-variant-numeric: tabular-nums; color: #f0f4ff; }
#viewDashboard .kpi .k-val.teal { color: #00dfc1; }
#viewDashboard .kpi .k-val.good { color: #46cd92; }
#viewDashboard .kpi .k-val.mid { color: #d6a93f; }
#viewDashboard .kpi .k-val.bad { color: #e8696c; }
#viewDashboard .kpi .k-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
#viewDashboard .kpi .k-delta.up { color: #46cd92; }
#viewDashboard .kpi .k-delta.down { color: #e8696c; }
#viewDashboard .kpi .k-delta.flat { color: #4e5a72; }
#viewDashboard .kpi .k-delta .vs { color: #4e5a72; font-weight: 600; }
#viewDashboard .kpi .k-spark { position: absolute; right: 14px; top: 16px; width: 84px; height: 30px; opacity: 0.9; }
#viewDashboard .kpi .k-spark path.line { fill: none; stroke: #8892a4; stroke-width: 1.6; }
#viewDashboard .kpi .k-spark path.fill { fill: rgba(136,146,164,0.12); }
#viewDashboard .kpi.hero .k-spark path.line { stroke: #00dfc1; }
#viewDashboard .kpi.hero .k-spark path.fill { fill: rgba(0,223,193,0.10); }
@keyframes dashKpiIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Grid-Reihen */
#viewDashboard .row { display: grid; gap: 12px; margin-bottom: 12px; }
#viewDashboard .row.r-2-1 { grid-template-columns: 1.7fr 1fr; }
#viewDashboard .row.r-1-1 { grid-template-columns: 1fr 1fr; }

/* Balken-Zeilen (Funnel + Pipeline-Stage) — Farbe = Information */
#viewDashboard .brow { display: grid; grid-template-columns: 104px 1fr 78px; align-items: center; gap: 12px; padding: 7px 0; }
#viewDashboard .brow .bl { font-size: 12px; color: #8892a4; font-weight: 600; }
#viewDashboard .btrack { height: 9px; background: #0b0f1a; border-radius: 5px; overflow: hidden; }
#viewDashboard .bfill { height: 100%; border-radius: 5px; background: #5a8dd6; min-width: 2px; transition: width 0.6s cubic-bezier(0.22,0.8,0.3,1); }
#viewDashboard .bval { text-align: right; font-size: 13px; font-weight: 600; color: #f0f4ff; font-variant-numeric: tabular-nums; }
#viewDashboard .bval .pct { color: #4e5a72; font-weight: 500; font-size: 11.5px; margin-left: 5px; }
#viewDashboard .f1 { background: #8892a4; }
#viewDashboard .f2 { background: #00dfc1; }
#viewDashboard .f3 { background: #22d3ee; }
#viewDashboard .f4 { background: #a78bfa; }
#viewDashboard .st-review { background: #8892a4; }
#viewDashboard .st-contacted { background: #fbbf24; }
#viewDashboard .st-callplanned { background: #22d3ee; }
#viewDashboard .st-hot { background: #f97316; }
#viewDashboard .st-watching { background: #0a84ff; }
#viewDashboard .st-declined { background: #ef4444; }
#viewDashboard .st-synced { background: #a78bfa; }

/* Top-Deals nach Score */
#viewDashboard .tdeal { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 6px; margin: 0 -6px; border-top: 1px solid rgba(255,255,255,0.07); cursor: pointer; border-radius: 6px; }
#viewDashboard .tdeal:first-of-type { border-top: none; }
#viewDashboard .tdeal:hover { background: rgba(255,255,255,0.02); }
#viewDashboard .tdeal .td-id .nm { font-size: 13.5px; font-weight: 600; color: #f0f4ff; }
#viewDashboard .tdeal .td-id .st { font-size: 11px; color: #4e5a72; font-weight: 500; margin-top: 1px; }
#viewDashboard .tdeal .td-score { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
#viewDashboard .s-hi { color: #46cd92; }
#viewDashboard .s-mid { color: #d6a93f; }
#viewDashboard .s-lo { color: #e8696c; }

/* Score-Verteilung (Histogramm, Rot -> Gruen) */
#viewDashboard .hist { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding-top: 6px; }
#viewDashboard .hist-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 7px; }
#viewDashboard .hist-bar { width: 100%; border-radius: 5px 5px 0 0; min-height: 3px; }
#viewDashboard .b1 { background: #e8696c; }
#viewDashboard .b2 { background: #e8968a; }
#viewDashboard .b3 { background: #d6a93f; }
#viewDashboard .b4 { background: #8ed6a8; }
#viewDashboard .b5 { background: #46cd92; }
#viewDashboard .hist-n { font-size: 12.5px; font-weight: 700; color: #f0f4ff; font-variant-numeric: tabular-nums; }
#viewDashboard .hist-x { display: flex; gap: 10px; margin-top: 8px; }
#viewDashboard .hist-x span { flex: 1; text-align: center; font-size: 10px; color: #4e5a72; font-weight: 500; }

/* Aktivitaet (monochrom — Liste, kein Chart) */
#viewDashboard .act { display: grid; grid-template-columns: 50px 1fr auto; align-items: baseline; gap: 0 14px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.07); }
#viewDashboard .act:first-of-type { border-top: none; }
#viewDashboard .act-time { font-size: 11.5px; color: #8892a4; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
#viewDashboard .act-txt { font-size: 13px; color: #8892a4; font-weight: 500; }
#viewDashboard .act-txt .a { color: #f0f4ff; font-weight: 600; }
#viewDashboard .act-txt .d { color: #f0f4ff; font-weight: 600; }
#viewDashboard .act-txt .s { color: #4e5a72; }
#viewDashboard .act-who { font-size: 12px; color: #f0f4ff; font-weight: 500; white-space: nowrap; }
#viewDashboard .dash-empty { color: #8892a4; font-size: 13px; font-weight: 500; padding: 14px 0; }

@media (max-width: 900px) {
  #viewDashboard .kpis { grid-template-columns: 1fr 1fr; }
  #viewDashboard .row.r-2-1, #viewDashboard .row.r-1-1 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #viewDashboard .kpi, #viewDashboard .bfill { animation: none; transition: none; }
}

/* =========================
   DEAL VIEW v2 — Property-List Vollbild
========================= */
/* B14-S5: Vollbild-Patch in die .modal-Basis verschmolzen (siehe oben). */

/* ── Topbar ── */
.dv-topbar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 6px;
  height: 44px;
  flex-shrink: 0;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
}
.dv-topbar-id {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 4px;
}
.dv-topbar-sep { color: var(--text-tertiary); font-size: 13px; }
.dv-topbar-meta {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
  margin-right: auto;
}
.dv-btn {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  padding: 5px 11px;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.dv-btn:hover { color: var(--text-primary); border-color: var(--border-default); }
.dv-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dv-btn-crm {
  border-color: rgba(0,223,193,0.3);
  color: var(--score-ring-high);
}
.dv-btn-crm:hover { background: rgba(0,223,193,0.06); }
.dv-btn-crm:disabled { opacity: 0.4; cursor: not-allowed; }
.dv-btn-prim {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.dv-btn-prim:hover { opacity: 0.9; }
.dv-btn-prim:disabled { opacity: 0.4; cursor: not-allowed; }
.dv-btn-close {
  margin-left: auto;
  border-color: transparent;
  font-size: 1rem;
  opacity: 0.5;
  padding: 4px 10px;
}
.dv-btn-close:hover { opacity: 1; border-color: var(--border-strong); }

/* ── Main grid ── */
.dv-main {
  display: grid;
  grid-template-columns: 1fr 280px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dv-left {
  overflow-y: auto;
  border-right: 1px solid var(--border-default);
  padding-bottom: 72px; /* B14-S5: aus dem dv-Fixes-Patch verschmolzen */
}
.dv-right {
  /* B14-S5: Grid-Endzustand aus dem dv-Fixes-Patch verschmolzen */
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--surface-base);
}

/* ── Hero ── */
.dv-hero {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-raised);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.dv-hero-info { flex: 1; min-width: 0; }
.dv-hero-name {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.dv-pill {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  border: 1px solid var(--border-strong);
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--text-secondary);
}
.dv-pill-seed {
  color: var(--accent);
  border-color: rgba(75,150,245,0.3);
}
/* B14-S4: Dark-Werte direkt in der Basis (Light-Ast entfernt) */
.dv-pill-preseed {
  color: #a78bfa;
  border-color: rgba(167,139,250,0.3);
}
.dv-pill-prea {
  color: #34d399;
  border-color: rgba(52,211,153,0.3);
}
.dv-pill-a {
  color: var(--score-ring-medium);
  border-color: rgba(245,158,11,0.3);
}
.dv-pill-pass {
  color: var(--score-ring-high);
  border-color: rgba(0,223,193,0.25);
  cursor: pointer;
}
.dv-pill-fail {
  color: var(--score-ring-low);
  border-color: rgba(239,68,68,0.25);
  cursor: pointer;
}
.dv-pill-warn {
  color: var(--score-ring-medium);
  border-color: rgba(245,158,11,0.25);
  cursor: pointer;
}
.dv-hero-desc {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ── Custom Score Block (top-right in hero) ── */
.dv-score-block {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.dv-score-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.dv-score-number {
  font-family: var(--font-data);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
}
.dv-score-number.high { color: var(--score-ring-high); }
.dv-score-number.mid  { color: var(--score-ring-medium); }
.dv-score-number.low  { color: var(--score-ring-low); }
.dv-score-ruleset {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-tertiary);
}
.dv-score-info {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-top: 2px;
}
.dv-score-info:hover { color: var(--text-secondary); background: var(--border-subtle); }

/* ── Sections ── */
.dv-section { border-bottom: 1px solid var(--border-default); }
.dv-section:last-child { border-bottom: none; }
.dv-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 24px 5px;
}
.dv-sec-title {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.dv-sec-line { flex: 1; height: 1px; background: var(--border-default); }

/* ── Property Grid (2-spaltig) ── */
.dv-pgrid { display: grid; grid-template-columns: 1fr 1fr; }
.dv-prow {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 34px;
  border-top: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-default);
}
.dv-prow:nth-child(even) { border-right: none; }
.dv-prow.full { grid-column: 1 / -1; border-right: none; }
.dv-prow:hover { background: rgba(255,255,255,0.025); } /* B14-S4: Dark-Wert, Light-Ast entfernt */
.dv-pl {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text-secondary);
  width: 140px;
  flex-shrink: 0;
}
.dv-pv {
  font-family: var(--font-ui);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--text-primary);
  flex: 1;
}
.dv-pv.ui   { font-family: var(--font-ui); letter-spacing: 0; }
.dv-pv.g    { color: var(--score-ring-high); }
.dv-pv.r    { color: var(--score-ring-low); }
.dv-pv.a    { color: var(--score-ring-medium); }
.dv-pv.b    { color: var(--accent); }
.dv-pv.muted { font-family: var(--font-ui); color: var(--text-secondary); }
/* Zeilen mit langem Fremdtext (amtlicher Registername, Insolvenz-Bekanntmachung,
   Quellenangabe) dürfen umbrechen, statt aus der festen Zeilenhöhe zu laufen.
   Reiner Höhen-Modifier — Rahmen, Abstände und Farben bleiben die der dv-prow. */
.dv-prow.dv-prow-wrap { height: auto; min-height: 34px; padding-top: 7px; padding-bottom: 7px; }
.dv-prow.dv-prow-wrap .dv-pv { overflow-wrap: anywhere; }

/* ── Founder-Team ── */
.dv-founders { padding: 6px 0 10px; display: flex; flex-direction: column; }
.dv-founder-empty {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: 10px 24px;
}
.dv-founder-card {
  border-top: 1px solid var(--border-subtle);
  padding: 10px 0;
}
.dv-founder-card:first-child { border-top: none; }
.dv-founder-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 24px 6px;
}
.dv-founder-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.dv-founder-name {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.dv-founder-role {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dv-founder-link {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border-default);
  text-underline-offset: 2px;
}
.dv-founder-link:hover { color: var(--accent); text-decoration-color: var(--accent); }

.dv-founder-rows { display: flex; flex-direction: column; }
.dv-frow {
  display: flex;
  align-items: flex-start;
  padding: 0 24px;
  min-height: 28px;
  border-top: 1px solid var(--border-subtle);
}
.dv-fpl {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  width: 140px;
  flex-shrink: 0;
  padding-top: 6px;
}
.dv-fpv {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  flex: 1;
  padding: 6px 0;
  line-height: 1.4;
}

.dv-team-note {
  padding: 12px 24px 4px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}
.dv-team-note-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* ── Card: Founder-Highlight ── */
.card-founder-hint {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 6px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.card-founder-hint-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── Notes (rechte Spalte) ── */
.dv-notes {
  /* B14-S5: Grid-Endzustand aus dem dv-Fixes-Patch verschmolzen */
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 14px 16px;
  overflow: hidden;
  min-height: 0;
  flex: 1;
}
.dv-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.dv-notes-title {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.dv-note-entry { padding-bottom: 10px; border-bottom: 1px solid var(--border-default); margin-bottom: 10px; }
.dv-note-entry:last-of-type { border-bottom: none; margin-bottom: 0; }
.dv-note-meta { display: flex; justify-content: space-between; margin-bottom: 5px; }
.dv-note-ts {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.dv-note-author {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
}
.dv-note-body {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  padding-left: 9px;
  border-left: 2px solid var(--border-default);
}
.dv-note-body strong { color: var(--text-primary); font-weight: 400; }
.dv-note-del {
  float: right;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 11px;
  margin-left: 6px;
  padding: 0 3px;
  border-radius: 3px;
}
.dv-note-del:hover { color: var(--score-ring-low); }
.dv-note-empty {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 6px 0;
}
.dv-note-add {
  margin-top: 0; /* B14-S5: aus dem dv-Fixes-Patch */
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
  flex-shrink: 0;
}
.dv-note-inp {
  width: 100%;
  background: var(--surface-overlay);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  resize: none;
  height: 64px;
  outline: none;
  box-sizing: border-box;
}
.dv-note-inp::placeholder { color: var(--text-tertiary); }
.dv-note-inp:focus { border-color: var(--accent); }
.dv-note-save {
  margin-top: 5px;
  width: 100%;
  background: var(--surface-overlay);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  padding: 6px;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
}
.dv-note-save:hover { color: var(--text-primary); background: var(--border-subtle); }
.dv-note-hint {
  margin-top: 5px;
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-tertiary);
}

@media (max-width: 900px) {
  .dv-main { grid-template-columns: 1fr; }
  .dv-right { max-height: 320px; border-top: 1px solid var(--border-default); }
  .dv-pgrid { grid-template-columns: 1fr; }
  .dv-prow { border-right: none; }
  .dv-hero { flex-direction: column; }
  .dv-score-block { align-items: flex-start; }
}

/* =========================
   DEAL VIEW v2 – Fixes
========================= */

/* B14-S5: die !important-Fixes sind in die dv-Basisregeln verschmolzen. */
.dv-notes-head { flex-shrink: 0; }

.dv-notes-list {
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
}



/* =========================
   TOP 5 DEALS MODAL
========================= */
/* =========================================================
   DIESE WOCHE — Spotlight-Bühne (Konzept B)
   Vollbild-Overlay unter dem 52px-Header (analog Detailansicht).
   v2-Tokens lokal gescoped → unabhängig vom globalen Token-Set.
   Globale Skalierung: KEIN 100vw/100dvh (vw/vh würden vom --app-zoom
   mitskaliert) — inset-verankerter fixed-Container + 100%.
========================================================= */
#weeklyTop5Backdrop {
  --bg:#0b0f1a; --s1:#111827; --s2:#1a2235; --s3:#222d42;
  --border:rgba(255,255,255,0.07); --bm:rgba(255,255,255,0.12);
  --tp:#f0f4ff; --tm:#8892a4; --ts:#4e5a72;
  --accent:#00dfc1; --asub:rgba(0,223,193,0.10); --aborder:rgba(0,223,193,0.20);
  --good:#46cd92; --mid:#d6a93f; --bad:#e8696c;
  --blue:#5a8dd6; --purple:#a78bfa; --orange:#e0935a;
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.28);

  position: fixed;
  inset: 52px 0 0 0;
  background: var(--bg);
  color: var(--tp);
  overflow-y: auto;
  z-index: 1000;
}
#weeklyTop5Backdrop .num { font-variant-numeric: tabular-nums; }
.top5-modal { width: 100%; }
.t5-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 40vh; color: var(--tm); font-size: 13px;
}

/* --- Stage / Shell --- */
#weeklyTop5Backdrop .stage-wrap { max-width: 1100px; margin: 0 auto; padding: 40px 28px 80px; }

/* --- Page head --- */
#weeklyTop5Backdrop .page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 18px;
}
#weeklyTop5Backdrop .page-title {
  font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--tp); margin: 0;
}
#weeklyTop5Backdrop .page-context { font-size: 13px; font-weight: 500; color: var(--tm); margin-top: 6px; }
#weeklyTop5Backdrop .page-context strong { color: var(--tp); font-weight: 600; }

/* --- Segmented control --- */
#weeklyTop5Backdrop .seg {
  display: inline-flex; align-items: center; flex-shrink: 0;
  background: var(--s1); border: 1px solid var(--border); border-radius: 9px; padding: 3px;
}
#weeklyTop5Backdrop .seg-btn {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--tm);
  padding: 5px 12px; border-radius: 6px; cursor: pointer;
  border: none; background: transparent; transition: color .15s, background .15s;
}
#weeklyTop5Backdrop .seg-btn:hover { color: var(--tp); }
#weeklyTop5Backdrop .seg-btn.active { color: var(--tp); background: var(--s3); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }

/* --- Stage-Filter-Chips (Mehrfachauswahl, Default „Alle") --- */
#weeklyTop5Backdrop .t5-stagebar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 2px 26px; }
#weeklyTop5Backdrop .t5-stagelabel {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tm); margin-right: 2px;
}
#weeklyTop5Backdrop .t5-chip {
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--tm);
  background: var(--s1); border: 1px solid var(--border); padding: 5px 11px; border-radius: 8px;
  cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
#weeklyTop5Backdrop .t5-chip:hover { color: var(--tp); border-color: var(--bm); }
#weeklyTop5Backdrop .t5-chip.active { color: var(--accent); background: var(--asub); border-color: var(--aborder); }

/* --- Klickbarer Name → Detailansicht --- */
#weeklyTop5Backdrop .t5-namelink { cursor: pointer; transition: color .15s; }
#weeklyTop5Backdrop .t5-namelink:hover { color: var(--accent); }

/* --- Spotlight --- */
#weeklyTop5Backdrop .spotlight {
  background: var(--asub); border: 1px solid var(--aborder); border-radius: 18px;
  padding: 30px 32px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
#weeklyTop5Backdrop .spotlight::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(0,223,193,0.05), transparent 42%); pointer-events: none;
}
#weeklyTop5Backdrop .spotlight-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px; position: relative;
}
#weeklyTop5Backdrop .spotlight-tag .star { font-size: 11px; }
#weeklyTop5Backdrop .spotlight-grid {
  display: grid; grid-template-columns: auto 1fr auto; gap: 36px;
  align-items: flex-start; position: relative;
}

/* LEFT: hero ring */
#weeklyTop5Backdrop .hero-score {
  display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 120px;
}
#weeklyTop5Backdrop .ring-wrap { position: relative; width: 120px; height: 120px; }
#weeklyTop5Backdrop .ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 800; letter-spacing: -0.02em;
}
#weeklyTop5Backdrop .ring-denom { font-size: 12px; font-weight: 600; color: var(--tm); margin-top: 10px; }
#weeklyTop5Backdrop .ring-sub { font-size: 12px; font-weight: 500; color: var(--tm); margin-top: 3px; max-width: 130px; }

/* MIDDLE */
#weeklyTop5Backdrop .hero-mid { min-width: 0; padding-top: 2px; }
#weeklyTop5Backdrop .hero-name { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--tp); }
#weeklyTop5Backdrop .stage-line { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
#weeklyTop5Backdrop .stage-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
#weeklyTop5Backdrop .stage-text { font-size: 12.5px; font-weight: 500; color: var(--tm); }
#weeklyTop5Backdrop .stage-sector { font-size: 12.5px; font-weight: 500; color: var(--ts); }
#weeklyTop5Backdrop .stage-sep { color: var(--ts); }
#weeklyTop5Backdrop .hero-why {
  margin-top: 18px; padding: 14px 16px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 11px;
  font-size: 14.5px; font-weight: 500; color: var(--tp); line-height: 1.55;
}
#weeklyTop5Backdrop .hero-why .why-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--tm); margin-bottom: 6px;
}
#weeklyTop5Backdrop .hero-why b { font-weight: 700; color: #fff; }
#weeklyTop5Backdrop .hero-actions { display: flex; align-items: center; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
#weeklyTop5Backdrop .btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s; white-space: nowrap;
}
#weeklyTop5Backdrop .btn-primary { background: var(--accent); color: #04231e; border-color: var(--accent); }
#weeklyTop5Backdrop .btn-primary:hover { filter: brightness(1.07); }
#weeklyTop5Backdrop .btn-ghost { background: transparent; color: var(--tm); border-color: var(--bm); }
#weeklyTop5Backdrop .btn-ghost:hover { color: var(--tp); background: var(--s2); border-color: var(--bm); }
#weeklyTop5Backdrop .hero-time { font-size: 12px; font-weight: 500; color: var(--ts); margin-left: 4px; }

/* RIGHT: KPI tiles */
#weeklyTop5Backdrop .hero-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 260px; flex-shrink: 0; }
#weeklyTop5Backdrop .kpi { background: var(--s1); border: 1px solid var(--border); border-radius: 11px; padding: 13px 14px; }
#weeklyTop5Backdrop .kpi-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tm); }
#weeklyTop5Backdrop .kpi-val { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--tp); margin-top: 6px; }
#weeklyTop5Backdrop .kpi-val.pos { color: var(--good); }

/* --- Section head --- */
#weeklyTop5Backdrop .section-head { display: flex; align-items: baseline; gap: 12px; margin: 42px 4px 16px; }
#weeklyTop5Backdrop .section-title { font-size: 15px; font-weight: 700; color: var(--tp); }
#weeklyTop5Backdrop .section-meta { font-size: 12px; font-weight: 500; color: var(--ts); }

/* --- Compare row --- */
#weeklyTop5Backdrop .compare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#weeklyTop5Backdrop .quiet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 14px; }
#weeklyTop5Backdrop .cmp-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 16px 16px; display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
}
#weeklyTop5Backdrop .cmp-card:hover { border-color: var(--bm); transform: translateY(-2px); }
#weeklyTop5Backdrop .cmp-top { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
#weeklyTop5Backdrop .cmp-ringwrap { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
#weeklyTop5Backdrop .cmp-ringnum {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
}
#weeklyTop5Backdrop .cmp-id { min-width: 0; }
#weeklyTop5Backdrop .cmp-name { font-size: 14.5px; font-weight: 700; color: var(--tp); }
#weeklyTop5Backdrop .cmp-stage { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
#weeklyTop5Backdrop .cmp-stage .stage-text { font-size: 11.5px; }
#weeklyTop5Backdrop .cmp-kpis { display: flex; flex-direction: column; gap: 0; margin-bottom: 13px; border-top: 1px solid var(--border); }
#weeklyTop5Backdrop .cmp-kpirow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
#weeklyTop5Backdrop .cmp-kpirow:last-child { border-bottom: none; }
#weeklyTop5Backdrop .cmp-klabel { font-size: 11.5px; font-weight: 500; color: var(--tm); }
#weeklyTop5Backdrop .cmp-kval { font-size: 13px; font-weight: 600; color: var(--tp); }
#weeklyTop5Backdrop .cmp-kval.pos { color: var(--good); }
#weeklyTop5Backdrop .cmp-why { font-size: 11.5px; font-weight: 500; color: var(--tm); line-height: 1.45; margin-bottom: 14px; flex: 1; }
#weeklyTop5Backdrop .cmp-why b { color: var(--tp); font-weight: 600; }
#weeklyTop5Backdrop .cmp-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  background: var(--asub); color: var(--accent); border: 1px solid var(--aborder); transition: background .15s;
}
#weeklyTop5Backdrop .cmp-action:hover { background: rgba(0,223,193,0.16); }

/* --- Logic note --- */
#weeklyTop5Backdrop .logic-note {
  margin-top: 38px; padding: 18px 20px;
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; gap: 14px; align-items: flex-start;
}
#weeklyTop5Backdrop .logic-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  background: var(--s2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--tm); font-size: 14px;
}
#weeklyTop5Backdrop .logic-text { font-size: 12.5px; font-weight: 500; color: var(--tm); line-height: 1.6; }
#weeklyTop5Backdrop .logic-text strong { color: var(--tp); font-weight: 600; }

/* --- Quiet-Hint (ehrlicher State, kein Auffüllen) --- */
#weeklyTop5Backdrop .quiet-hint {
  margin-top: 16px; padding: 13px 16px;
  background: var(--s1); border: 1px dashed var(--bm); border-radius: 11px;
  font-size: 12.5px; font-weight: 500; color: var(--tm); display: flex; align-items: center; gap: 9px;
}
#weeklyTop5Backdrop .quiet-hint .qh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mid); flex-shrink: 0; }
#weeklyTop5Backdrop .quiet-hint b { color: var(--tp); font-weight: 600; }
#weeklyTop5Backdrop .quiet-hint a { color: var(--accent); font-weight: 600; text-decoration: none; cursor: pointer; margin-left: auto; }
#weeklyTop5Backdrop .quiet-hint a:hover { text-decoration: underline; }

/* --- Empty state --- */
#weeklyTop5Backdrop .empty-state {
  margin-top: 30px; padding: 30px;
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius); text-align: center;
}
#weeklyTop5Backdrop .empty-icon {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 11px;
  background: var(--s2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--ts);
}
#weeklyTop5Backdrop .empty-title { font-size: 14px; font-weight: 700; color: var(--tp); }
#weeklyTop5Backdrop .empty-text { font-size: 12.5px; font-weight: 500; color: var(--tm); margin-top: 6px; }

/* --- Responsive --- */
@media (max-width: 980px) {
  #weeklyTop5Backdrop .spotlight-grid { grid-template-columns: 1fr; gap: 26px; }
  #weeklyTop5Backdrop .hero-score { flex-direction: row; gap: 18px; align-items: center; min-width: 0; }
  #weeklyTop5Backdrop .ring-denom, #weeklyTop5Backdrop .ring-sub { margin-top: 0; }
  #weeklyTop5Backdrop .hero-kpis { width: 100%; }
  #weeklyTop5Backdrop .compare-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #weeklyTop5Backdrop .compare-grid,
  #weeklyTop5Backdrop .quiet-grid { grid-template-columns: 1fr; }
  #weeklyTop5Backdrop .page-head { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   APP-HEADER v2 (Design System v2 §5/§6/§11)
   Fix dark — unabhängig vom Theme-Toggle (Dark-First-Doku).
   Brand + Nav-Tabs + Utils in EINER 52px-Bar, sticky.
========================================================= */
/* #app-wrapper polstert die 52px des fixierten Headers (der aus dem Fluss faellt). */
#app-wrapper { padding-top: 52px; }

header.app-header {
  /* position:fixed statt sticky: sticky rechnet den Scroll-Offset unter
     body{zoom} falsch (Header driftet). fixed ist unter zoom stabil — gleiches
     Muster wie das Detail-Modal (#modalBackdrop position:fixed; inset:52px 0 0 0). */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: 52px;
  background: #111827;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}

.hdr-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.hdr-mark { color: #00dfc1; font-size: 1.3rem; line-height: 1; }
.hdr-name {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f0f4ff;
  line-height: 1.15;
}
.hdr-sub {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #8892a4;
  line-height: 1.1;
}

.hdr-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  /* "safe": bei Overflow links ausrichten statt beidseitig zu clippen */
  justify-content: safe center;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
header.app-header .viewnav-tab {
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: none;
  border-radius: 6px;
  padding: 6px 13px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8892a4;
  line-height: 1;
  white-space: nowrap;
}
header.app-header .viewnav-tab:hover,
header.app-header .viewnav-tab:focus {
  background: rgba(0,223,193,0.08);
  color: #f0f4ff;
  border-bottom: none;
}
header.app-header .viewnav-tab.active {
  background: #00dfc1;
  color: #000;
  border-bottom: none;
  font-weight: 600;
}

.hdr-utils {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hdr-fund {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,223,193,0.08);
  border: 1px solid rgba(0,223,193,0.2);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #f0f4ff;
  white-space: nowrap;
}
.hdr-fund[hidden] { display: none; }
.hdr-user {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #f0f4ff;
  white-space: nowrap;
}
.hdr-user[hidden] { display: none; }
.hdr-user-ini {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,223,193,0.15);
  border: 1px solid rgba(0,223,193,0.3);
  color: #00dfc1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
#userBadgeName { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.hdr-fund-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00dfc1;
}
.hdr-btn {
  background: transparent;
  color: #8892a4;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.hdr-btn:hover {
  color: #f0f4ff;
  background: rgba(0,223,193,0.08);
}
.hdr-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,223,193,0.1);
}
.hdr-btn--top5 {
  color: #00dfc1;
  border-color: #00dfc1;
}
.hdr-btn--top5:hover { background: rgba(0,223,193,0.08); color: #00dfc1; }

/* Overlap-Schutz: Die zentrierte Nav darf bei Platzmangel nie unter die
   Utils laufen (Tabs wurden sonst unklickbar, z.B. Anfragen bei 1280px).
   overflow-x hält die Tabs im eigenen Flex-Item; Scrollbar bleibt unsichtbar. */
.hdr-nav { overflow-x: auto; scrollbar-width: none; }
.hdr-nav::-webkit-scrollbar { display: none; }
#fundBadgeName { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1480px) {
  .hdr-sub { display: none; }
  header.app-header { gap: 12px; }
  header.app-header .viewnav-tab { padding: 6px 9px; letter-spacing: 0.02em; }
  .hdr-btn { padding: 6px 9px; }
  #fundBadgeName { max-width: 100px; }
  #userBadgeName { max-width: 90px; }
}

@media (max-width: 1360px) {
  /* Platz schaffen: Fund nur als Punkt (Name im Tooltip), User-Name bleibt sichtbar */
  #fundBadgeName { display: none; }
  .hdr-fund { padding: 4px 8px; }
  .hdr-nav { gap: 4px; }
  header.app-header .viewnav-tab { padding: 6px 7px; }
  .hdr-btn { padding: 6px 7px; }
}

@media (max-width: 1240px) {
  /* flex-start statt center: zentrierter Overflow wäre links unerreichbar abgeschnitten */
  .hdr-nav { justify-content: flex-start; }
  header.app-header .viewnav-tab { padding: 6px 7px; font-size: 0.72rem; }
  .hdr-fund { padding: 4px 8px; }
  #fundBadgeName { max-width: 70px; }
  /* User-Badge nur als Initialen-Kreis, Name im title-Tooltip */
  #userBadgeName { display: none; }
  .hdr-btn { font-size: 0.7rem; padding: 5px 7px; }
}

@media (max-width: 1100px) {
  header.app-header .viewnav-tab { padding: 6px 8px; letter-spacing: 0.02em; }
}

/* =========================================================
   DETAILANSICHT v2 — 1:1 nach Mockup (Pixel-Farbanalyse)
   Farb-Logik laut Mockup: positive Werte + Score = Teal #00dfc1,
   negative = Rot; LinkedIn/Kontext-Stage = Blau #0a84ff;
   Push to CRM = Lila #a78bfa; Plausibility = Grün #10b981;
   Sektions-Titel gedämpft. Währungen mit €-Präfix.
========================================================= */
#modalBackdrop {
  --surface-base: #0b0f1a;
  --surface-raised: #111827;
  --surface-overlay: #1a2235;
  --text-primary: #f0f4ff;
  --text-secondary: #8892a4;
  --text-tertiary: #4e5a72;
  --border-default: rgba(255,255,255,0.06);
  --border-subtle: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --accent: #00dfc1;
  --score-ring-high: #00dfc1;   /* Mockup: Score/positive Werte teal */
  --score-ring-medium: #f59e0b;
  --score-ring-low: #ef4444;
  --font-data: 'IBM Plex Sans', sans-serif; /* nie Mono für Zahlen */
}

/* Header bleibt sichtbar */
#modalBackdrop.modal-backdrop { inset: 52px 0 0 0; z-index: 39; }

/* ── B12 (M31/N13): Ladezustand und Fokus der Detailansicht ──
   Der Ladezustand wird als Pseudoelement auf dem LEEREN Container gezeichnet,
   nicht als Markup. Grund: `#modalBackdrop .modal` bleibt damit für Playwright
   leer, und die `not.toBeEmpty()`-Barriere, auf die rund fünfzehn Tests ihre
   Render-Wartezeit stützen, bleibt eine echte Barriere. Ein Skelett aus
   Markup hätte sie vorzeitig erfüllt und die Folge-Assertions flaky gemacht.
   Beide Regeln greifen ausschließlich während des Ladens bzw. bei Fokus auf
   dem Container — im Endzustand ändert sich kein berechneter Stilwert der
   Detailansicht, die Shot- und Fingerprint-Baselines bleiben unberührt. */
#modalBackdrop .modal[aria-busy="true"]::after {
  content: "Detailansicht wird geladen …";
  display: block;
  padding: 28px 24px;
  color: var(--text-tertiary);
  font-size: 13px;
  letter-spacing: .02em;
}
/* Der Container nimmt den Fokus, damit der Screenreader den Dialog von vorn
   liest — ohne sichtbaren Ring, der sonst in die Baselines wanderte. */
#modalBackdrop .modal:focus { outline: none; }
/* Wirft das Öffnen, ist der Ladezustand keine ehrliche Auskunft mehr. */
#modalBackdrop .dv-load-error {
  padding: 28px 24px;
  color: var(--text-secondary);
  font-size: 14px;
}
/* B14-S5: die frühere #modalBackdrop-.modal-Duplikat-Regel (height/max-height/
   overflow/display, byte-identisch mit der .modal-Basis) ist entfallen.
   Merke: Backdrop hat inset:52px 0 0 0 — 100% = Viewport minus Header,
   unabhängig vom body-zoom; Topbar lebt außerhalb des Scrollbereichs
   (sticky greift unter body{zoom} nicht zuverlässig). */

/* ── Topbar: Surface-Leiste, sticky ── */
#modalBackdrop .dv-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
  height: 46px;
  padding: 0 20px;
  gap: 8px;
}
#modalBackdrop .dv-topbar-id {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  color: #eef2ff;
}
#modalBackdrop .dv-btn {
  background: var(--surface-overlay);
  border: 1px solid rgba(255,255,255,0.08);
  color: #aeb7c8;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}
#modalBackdrop .dv-btn:hover { color: #f0f4ff; border-color: var(--border-strong); }
#modalBackdrop .dv-btn-crm {
  background: rgba(167,139,250,0.1);
  border-color: rgba(167,139,250,0.45);
  color: #a78bfa;
  font-weight: 700;
}
#modalBackdrop .dv-btn-crm:hover { background: rgba(167,139,250,0.18); color: #a78bfa; }
#modalBackdrop .dv-btn-prim {
  background: rgba(0,223,193,0.1);
  border: 1px solid rgba(0,223,193,0.5);
  color: #00dfc1;
  font-weight: 700;
}
#modalBackdrop .dv-btn-prim:hover { background: rgba(0,223,193,0.18); opacity: 1; }
#modalBackdrop .dv-btn-close { background: var(--surface-overlay); opacity: 1; color: #8892a4; }

/* ── Grundraster ── */
#modalBackdrop .dv-main {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 16px;
  align-items: start;
  padding: 15px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
#modalBackdrop .dv-left { overflow: visible; border-right: none; min-width: 0; }
#modalBackdrop .dv-right {
  /* B14-S5: totes overflow:visible entfernt — der (verschmolzene) Fix gewann immer mit hidden */
  background: transparent;
  position: sticky;
  top: 0;
}

/* ── Hero-Karte ── */
#modalBackdrop .dv-hero {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 0 0 18px;
}
#modalBackdrop .dv-hero-name { font-size: 26px; font-weight: 700; gap: 12px; margin-bottom: 12px; }
/* Hero-Badges: nur farbiger Text, keine Tönung/Rahmen (User-Wunsch Juni 2026) */
#modalBackdrop .dv-pill {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0;
  background: none;
  border: none;
  color: #8b97b3;
}
#modalBackdrop .dv-pill-stage { color: #00dfc1; }
#modalBackdrop .dv-pill-pass  { color: #10b981; }
#modalBackdrop .dv-pill-warn  { color: #f59e0b; }
#modalBackdrop .dv-pill-fail  { color: #ef4444; }
#modalBackdrop .dv-hero-desc { font-size: 14px; color: #8b97b3; line-height: 1.6; max-width: 700px; }

/* Score-Block */
#modalBackdrop .dv-score-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8b97b3;
}
#modalBackdrop .dv-score-number { font-size: 36px; font-weight: 700; letter-spacing: -1px; }
#modalBackdrop .dv-score-ruleset { font-size: 14px; color: #8b97b3; margin-top: 2px; }
#modalBackdrop .dv-score-info {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: #8b97b3;
  margin-top: 8px;
}

/* ── Sektionen: Titel gedämpft (Mockup), Linie rechts ── */
#modalBackdrop .dv-section { border-bottom: none; margin: 0 0 20px; }
#modalBackdrop .dv-sec-head { padding: 0 2px 10px; }
#modalBackdrop .dv-sec-title {
  color: #4e5a72;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
}

/* ── Property-Zeilen als Boxen ── */
#modalBackdrop .dv-pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
#modalBackdrop .dv-prow {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  height: 38px;
  padding: 0 16px;
}
#modalBackdrop .dv-prow:nth-child(even) { border-right: 1px solid var(--border-default); }
/* Höhen-Modifier auch im Modal-Scope (dort ist .dv-prow auf 38px festgenagelt) */
#modalBackdrop .dv-prow.dv-prow-wrap { height: auto; min-height: 38px; padding-top: 9px; padding-bottom: 9px; }
#modalBackdrop .dv-prow:hover { background: #131c2e; }
#modalBackdrop .dv-pl { font-size: 13px; width: auto; color: #4e5a72; font-weight: 500; }
#modalBackdrop .dv-pv {
  margin-left: auto;
  text-align: right;
  font-weight: 700;
  font-size: 14px;
}
#modalBackdrop .dv-pv.g { color: #00dfc1; }
#modalBackdrop .dv-kx-stage { color: #0a84ff; }

/* ── Founder-Cards ── */
#modalBackdrop .dv-founders { padding: 0; }
#modalBackdrop .dv-founder-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-top: 1px solid var(--border-default);
  border-radius: 12px;
  margin: 0 0 10px;
  padding: 12px 16px;
}
#modalBackdrop .dv-founder-card:first-child { border-top: 1px solid var(--border-default); margin-top: 0; }
#modalBackdrop .dv-founder-head { margin-bottom: 6px; }
#modalBackdrop .dv-founder-name { font-size: 15px; font-weight: 700; color: #f0f4ff; }
#modalBackdrop .dv-founder-role { color: #8892a4; font-weight: 600; font-size: 13px; }
#modalBackdrop .dv-founder-link { color: #0a84ff; font-size: 13px; text-decoration: none; }
#modalBackdrop .dv-founder-link:hover { color: #3f9fff; text-decoration: none; }
#modalBackdrop .dv-frow { border: none; padding: 2.5px 0; font-size: 13px; line-height: 1.45; min-height: 0; }
#modalBackdrop .dv-fpl { font-size: 12.5px; color: #4e5a72; width: 95px; flex-shrink: 0; line-height: 1.45; padding: 0; }
#modalBackdrop .dv-fpv { font-size: 13px; color: #8b97b3; font-weight: 500; line-height: 1.45; padding: 0; }
#modalBackdrop .dv-team-note {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0;
  color: #8b97b3;
}

/* ── Notes: Panel --s2, Notizen als dunklere Boxen ── */
#modalBackdrop .dv-notes {
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  /* B14-S5: totes padding:14px entfernt — der (verschmolzene) Fix gewann immer mit 14px 16px */
  flex: none;
}
#modalBackdrop .dv-notes-title {
  color: #8b97b3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
#modalBackdrop .dv-note-entry {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  border-bottom: 1px solid var(--border-default);
  padding: 12px 14px;
  margin-bottom: 10px;
}
#modalBackdrop .dv-note-entry:last-of-type { border-bottom: 1px solid var(--border-default); margin-bottom: 10px; }
#modalBackdrop .dv-note-ts {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8892a4;
}
#modalBackdrop .dv-note-author { color: #f0f4ff; font-weight: 700; font-size: 12px; }
#modalBackdrop .dv-note-body { color: #8b97b3; font-size: 13px; line-height: 1.5; }
#modalBackdrop .dv-note-inp {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-ui);
  min-height: 90px;
  padding: 10px 12px;
}
#modalBackdrop .dv-note-inp::placeholder { color: #4e5a72; }
#modalBackdrop .dv-note-inp:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,223,193,0.1);
}
#modalBackdrop .dv-note-save {
  width: 100%;
  background: rgba(0,223,193,0.1);
  border: 1px solid rgba(0,223,193,0.5);
  color: #00dfc1;
  border-radius: 10px;
  padding: 11px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-top: 10px;
}
#modalBackdrop .dv-note-save:hover { background: rgba(0,223,193,0.18); }
#modalBackdrop .dv-note-hint { text-align: center; color: #4e5a72; font-size: 12px; margin-top: 8px; }

@media (max-width: 980px) {
  #modalBackdrop .dv-main { grid-template-columns: 1fr; }
  #modalBackdrop .dv-right { position: static; }
}

/* Notes-Meta: Zeit + Autor links nebeneinander (Mockup); Delete dezent */
#modalBackdrop .dv-note-meta { justify-content: flex-start; gap: 10px; }
#modalBackdrop .dv-note-del { opacity: 0.25; }
#modalBackdrop .dv-note-entry:hover .dv-note-del { opacity: 1; }

/* =========================================================
   SUBMISSIONS-VIEW — Design „Triage-Posteingang" (Betreiber-Entscheid
   17.07.2026, 3 Runden; Referenz-Mockup mockup-submissions-triage-final.html).
   Dieselbe Pulse-Split-Zeilen-DNA wie Übersicht-Liste + Pipeline, komplett
   gescoped auf #viewSubmissions (Token-Remap + Zeilen-Styles). Plausibilität als
   REINE Farbschrift (kein Badge-BG/Rahmen), Checks hinter ⓘ als Accordion unter
   der Zeile, Filter-Chips (Farbe NUR als Dot), floating Bulk-Bar. 1220px-Deckel.
========================================================= */
body.v2-dark { background: #0b0f1a; }

#viewSubmissions {
  --surface-base: #0b0f1a;
  --surface-raised: #111827;
  --surface-overlay: #1a2235;
  --text-primary: #f0f4ff;
  --text-secondary: #8892a4;
  --text-tertiary: #4e5a72;
  --border-default: rgba(255,255,255,0.06);
  --border-subtle: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --accent: #00dfc1;
  /* Ring-Farben = Pulse-Palette (wie #viewPipeline/#cardGrid — pound-for-pound) */
  --score-ring-high: #46cd92;
  --score-ring-medium: #d6a93f;
  --score-ring-low: #e8696c;
  --score-ring-bg: #222d42;
  padding-top: 10px;
  max-width: 1220px;
  margin: 0 auto;
}

/* ── Kopf (Mockup .page-head) ── */
#viewSubmissions .subs2-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
}
#viewSubmissions .panelhead { margin: 0; padding: 0; display: block; }
#viewSubmissions .panelhead h2 { color: #f0f4ff; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
#viewSubmissions .panelhead .note {
  color: #8892a4; font-size: 13px; background: none; border: none; padding: 0;
  border-radius: 0; font-weight: 500; margin-top: 3px;
}
#viewSubmissions .panelhead .note b { color: #f0f4ff; font-weight: 600; }
#viewSubmissions .subs2-head-actions { display: flex; gap: 8px; align-items: center; }
#viewSubmissions .subs2-head-actions .btn {
  white-space: nowrap; background: #111827; border: 1px solid rgba(255,255,255,0.07);
  color: #8892a4; border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; box-shadow: none;
}
#viewSubmissions .subs2-head-actions .btn:hover { color: #f0f4ff; background: #1a2235; }

/* ── Filter-Chips (Mockup .legend — ruhig, Farbe NUR als 6px-Dot) ── */
#viewSubmissions .subs2-legend {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  margin-bottom: 22px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 14px;
}
#viewSubmissions .subs2-tab {
  display: inline-flex; align-items: center; gap: 8px; background: transparent;
  border: 1px solid transparent; color: #8892a4; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  font-family: inherit; transition: all .13s;
}
#viewSubmissions .subs2-tab:hover { color: #f0f4ff; background: #111827; }
#viewSubmissions .subs2-tab.active { background: #111827; color: #f0f4ff; border-color: rgba(255,255,255,0.07); }
#viewSubmissions .subs2-tab:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }
#viewSubmissions .subs2-tab .subs2-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c, #8892a4); opacity: 0.9; flex: none; }
#viewSubmissions .subs2-tab-n { color: #4e5a72; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
#viewSubmissions .subs2-tab.active .subs2-tab-n { color: #8892a4; }

/* ── Floating Bulk-Bar (Mockup .bulkbar) — position:fixed + Prozent-Translate
   (nicht vw/vh, damit --app-zoom nicht doppelt wirkt); conditional im DOM
   (0 Auswahl → keine Bar, Test-Vertrag). ── */
#viewSubmissions .subs2-bulkbar {
  position: fixed; left: 50%; bottom: 26px; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  background: #1a2235; border: 1px solid rgba(0,223,193,0.20); border-radius: 14px;
  padding: 11px 16px; box-shadow: 0 12px 44px rgba(0,0,0,0.5);
  transform: translate(-50%, 0); animation: subs2BarIn .25s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes subs2BarIn { from { transform: translate(-50%, 90px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
#viewSubmissions .subs2-bulkbar .bulk-count { color: #00dfc1; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
#viewSubmissions .subs2-bulk-actions { display: flex; gap: 8px; align-items: center; }
#viewSubmissions #submBulkAccept {
  background: #00dfc1; border: 1px solid transparent; color: #04231e; border-radius: 8px;
  padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s;
}
#viewSubmissions #submBulkAccept:hover { filter: brightness(1.08); }
#viewSubmissions #submBulkDecline {
  background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #8892a4; border-radius: 8px;
  padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s;
}
#viewSubmissions #submBulkDecline:hover { color: #e8696c; border-color: rgba(232,105,108,0.4); background: rgba(232,105,108,0.08); }
#viewSubmissions #submBulkDeselect {
  background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #8892a4; border-radius: 8px;
  padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s;
}
#viewSubmissions #submBulkDeselect:hover { color: #f0f4ff; background: #222d42; }
#viewSubmissions #submBulkAccept:focus-visible,
#viewSubmissions #submBulkDecline:focus-visible,
#viewSubmissions #submBulkDeselect:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }

/* ── Spaltenkopf + Zeilen-Container (Mockup .cols / .rows) ── */
#viewSubmissions .subs2-wrap { background: transparent; border: none; box-shadow: none; }
#viewSubmissions .subs2-cols {
  display: grid; grid-template-columns: 34px minmax(260px,1fr) 200px 160px 250px; gap: 14px;
  padding: 0 16px 8px; align-items: end;
}
#viewSubmissions .subs2-cols .c { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4e5a72; }
#viewSubmissions .subs2-cols .c.r { text-align: right; }
#viewSubmissions .subs2-rows { display: flex; flex-direction: column; gap: 10px; }

/* Checkboxen (Mockup .ck): custom, teal bei checked, Teilzustand („–") am Kopf */
#viewSubmissions input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 5px; background: transparent;
  cursor: pointer; position: relative; transition: all .12s;
}
#viewSubmissions input[type="checkbox"]:hover { border-color: #8892a4; }
#viewSubmissions input[type="checkbox"]:checked { background: #00dfc1; border-color: #00dfc1; }
#viewSubmissions input[type="checkbox"]:checked::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #04231e; }
#viewSubmissions input[type="checkbox"]:indeterminate { background: rgba(0,223,193,0.35); border-color: #00dfc1; }
#viewSubmissions input[type="checkbox"]:indeterminate::after { content: "–"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #04231e; }
#viewSubmissions input[type="checkbox"]:disabled { opacity: 0.4; cursor: default; }
#viewSubmissions input[type="checkbox"]:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }

/* ── Zeile: Wrapper (Zeile + ⓘ-Accordion), Triage-Ausblenden ── */
#viewSubmissions .subs2-rowwrap { display: flex; flex-direction: column; gap: 0; transition: opacity .3s, transform .3s; }
#viewSubmissions .subs2-rowwrap.removing { opacity: 0; transform: translateX(24px); pointer-events: none; }
#viewSubmissions .subs2-rowwrap.open .subs2-row { border-radius: 12px 12px 0 0; }

#viewSubmissions .subs2-row {
  display: grid; grid-template-columns: 34px minmax(260px,1fr) 200px 160px 250px; gap: 14px; align-items: center;
  background: #111827; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 13px 16px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  animation: ovxIn .4s ease both;
}
#viewSubmissions .subs2-row:hover { transform: translateY(-2px); border-color: rgba(0,223,193,0.20); box-shadow: 0 0 0 1px rgba(0,223,193,0.20), 0 10px 30px rgba(0,223,193,0.05); }
#viewSubmissions .subs2-row:focus-within { border-color: rgba(0,223,193,0.20); }
#viewSubmissions .subs2-row.bulk-selected { border-color: rgba(0,223,193,0.20); background: #121b2d; }

/* ── Identität (Ring 44px + Name/Meta/Why — Mockup .ident/.who) ── */
#viewSubmissions .subs2-ident { display: flex; align-items: center; gap: 13px; min-width: 0; }
#viewSubmissions .subs2-who { min-width: 0; }
#viewSubmissions .subs2-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
#viewSubmissions .subs2-name {
  background: none; border: none; padding: 0; color: #f0f4ff; font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.01em; cursor: pointer; font-family: inherit; text-align: left; white-space: nowrap;
}
#viewSubmissions .subs2-name:hover { color: #00dfc1; text-decoration: none; }
#viewSubmissions .subs2-id { font-size: 10.5px; color: #4e5a72; flex: none; font-variant-numeric: tabular-nums; }
#viewSubmissions .subs2-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; flex: none;
}
#viewSubmissions .subs2-pill.new { color: #00dfc1; background: rgba(0,223,193,0.10); border: 1px solid rgba(0,223,193,0.20); }
#viewSubmissions .subs2-pill.pulse { position: relative; }
#viewSubmissions .subs2-pill.pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 99px; border: 1px solid rgba(0,223,193,0.20);
  animation: subs2Pulse 2.2s ease-out infinite;
}
@keyframes subs2Pulse { 0% { opacity: 0.9; transform: scale(0.7); } 70% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } }
#viewSubmissions .subs2-meta { font-size: 11.5px; color: #8892a4; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#viewSubmissions .subs2-meta .ovx-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px; }
#viewSubmissions .subs2-why { font-size: 11.5px; color: #4e5a72; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Plausibilität: REINE Farbschrift (kein Badge-BG/Rahmen — Andreas-Feedback) + ⓘ ── */
#viewSubmissions .subs2-plaus { display: flex; align-items: center; gap: 8px; min-width: 0; }
#viewSubmissions .subs2-plaus-label {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  white-space: nowrap; text-transform: none; letter-spacing: 0; line-height: 1.2;
  background: none; border: none; padding: 0; color: #8892a4;
}
#viewSubmissions .subs2-plaus-label.passed  { color: #46cd92; }
#viewSubmissions .subs2-plaus-label.flagged { color: #d6a93f; }
#viewSubmissions .subs2-plaus-label.failed  { color: #e8696c; }
#viewSubmissions .subs2-pinfo {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #4e5a72; background: transparent; border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer; font-family: inherit; transition: all .12s; padding: 0;
}
#viewSubmissions .subs2-pinfo:hover { color: #f0f4ff; border-color: rgba(255,255,255,0.12); }
#viewSubmissions .subs2-rowwrap.open .subs2-pinfo { color: #00dfc1; border-color: rgba(0,223,193,0.20); background: rgba(0,223,193,0.10); }

/* ── ⓘ-Accordion (Mockup .pdetail): einzelne Server-Checks unter der Zeile ── */
#viewSubmissions .subs2-pdetail {
  display: none; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.07); border-top: none;
  border-radius: 0 0 12px 12px; padding: 12px 16px 13px 63px;
}
#viewSubmissions .subs2-rowwrap.open .subs2-pdetail { display: block; animation: ovxIn .25s ease both; }
#viewSubmissions .subs2-pt { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #4e5a72; margin-bottom: 8px; }
#viewSubmissions .subs2-pcheck { display: flex; align-items: baseline; gap: 9px; font-size: 12px; padding: 3px 0; }
#viewSubmissions .subs2-pic { flex: none; width: 14px; text-align: center; font-weight: 800; font-size: 11px; }
#viewSubmissions .subs2-pic.ok { color: #46cd92; }
#viewSubmissions .subs2-pic.warn { color: #d6a93f; }
#viewSubmissions .subs2-pic.fail { color: #e8696c; }
#viewSubmissions .subs2-pic.skip { color: #4e5a72; }
#viewSubmissions .subs2-pcl { color: #8892a4; font-weight: 600; }
#viewSubmissions .subs2-pcn { color: #4e5a72; font-size: 11px; }

/* ── Eingereicht (+ Live-Puls bei „heute" — Mockup .lact) ── */
#viewSubmissions .subs2-lact { min-width: 0; }
#viewSubmissions .subs2-date { color: #f0f4ff; font-size: 12px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
#viewSubmissions .subs2-live { width: 6px; height: 6px; border-radius: 50%; background: #00dfc1; position: relative; flex: none; }
#viewSubmissions .subs2-live::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(0,223,193,0.20); animation: subs2Pulse 2.2s ease-out infinite; }
#viewSubmissions .subs2-via { color: #4e5a72; font-size: 10.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Zeilen-Aktionen (Annehmen teal, Ablehnen danger, Öffnen ghost — Mockup .ract) ── */
#viewSubmissions .subs2-actions { display: flex; gap: 7px; justify-content: flex-end; align-items: center; }
#viewSubmissions .subs2-btn-accept {
  background: #00dfc1; border: 1px solid transparent; color: #04231e; border-radius: 8px;
  padding: 7px 11px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s; box-shadow: none;
}
#viewSubmissions .subs2-btn-accept:hover { filter: brightness(1.08); }
#viewSubmissions .subs2-btn-accept:disabled { opacity: 0.6; cursor: default; filter: none; }
#viewSubmissions .subs2-btn-decline {
  background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #8892a4; border-radius: 8px;
  padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s;
}
#viewSubmissions .subs2-btn-decline:hover { color: #e8696c; border-color: rgba(232,105,108,0.4); background: rgba(232,105,108,0.08); }
#viewSubmissions .subs2-btn-decline:disabled { opacity: 0.6; cursor: default; }
#viewSubmissions .subs2-openbtn {
  background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #8892a4; border-radius: 8px;
  padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s;
}
#viewSubmissions .subs2-openbtn:hover { color: #f0f4ff; background: #1a2235; }
#viewSubmissions .subs2-btn-accept:focus-visible,
#viewSubmissions .subs2-btn-decline:focus-visible,
#viewSubmissions .subs2-openbtn:focus-visible,
#viewSubmissions .subs2-pinfo:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }

/* Leerzustand (Mockup: luftig, leichtes Gewicht — überschreibt die globale
   .empty/.hint-Basis, die für die Submissions zu eng + fett 900 wäre) */
#viewSubmissions .empty { color: #8892a4; background: transparent; border: 1px dashed rgba(255,255,255,0.1); border-radius: 12px; padding: 44px 20px; font-weight: 400; font-size: 13.5px; }
#viewSubmissions .empty .hint { font-weight: 400; font-size: 12px; color: #4e5a72; margin-top: 4px; }

/* Responsive (Mockup): unter ~1000px bricht das Zeilen-Grid auf 2 Spalten,
   der Spaltenkopf verschwindet, Aktionen linksbündig. */
@media (max-width: 1000px) {
  #viewSubmissions .subs2-cols { display: none; }
  #viewSubmissions .subs2-row { grid-template-columns: 34px 1fr; grid-auto-rows: auto; row-gap: 10px; }
  #viewSubmissions .subs2-actions { justify-content: flex-start; }
  #viewSubmissions .subs2-pdetail { padding-left: 16px; }
}

/* Reduced Motion: deaktiviert Einflug, Ring-Draw, Puls, Bulk-Bar-Slide,
   Triage-Ausblenden und Hover-Transform (Kaskade, kein !important). */
@media (prefers-reduced-motion: reduce) {
  #viewSubmissions .subs2-row,
  #viewSubmissions .ring-prog,
  #viewSubmissions .subs2-pill.pulse::after,
  #viewSubmissions .subs2-live::after,
  #viewSubmissions .subs2-bulkbar,
  #viewSubmissions .subs2-rowwrap.open .subs2-pdetail { animation: none; }
  #viewSubmissions .subs2-row, #viewSubmissions .subs2-row:hover { transform: none; transition: none; }
  #viewSubmissions .subs2-rowwrap.removing { transition: none; }
}

/* =========================================================
   ONBOARDING-LEERZUSTAND (CoreLink) — Submissions + Übersicht
   Markup: onboardingEmptyHTML() in renderers-helpers.js
   Seit „Erste Schritte" (25.09.2026) tragen die Stile die Klasse .onb-empty-card;
   .onb-empty bleibt reiner Marker für die Test-Verträge (Skip-Guards, Skelett-
   Verbote) und sitzt auch am Wurzelknoten der neuen Start-Zustände (D2).
========================================================= */
.onb-empty-wrap { grid-column: 1 / -1; }
.onb-empty-card {
  max-width: 460px; margin: 36px auto; padding: 34px 30px;
  background: #111827; border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; text-align: center;
}
.onb-empty-card .onb-icon {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 13px;
  background: #1a2235; border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.onb-empty-card .onb-title { font-size: 16px; font-weight: 800; color: #f0f4ff; letter-spacing: -0.01em; }
.onb-empty-card .onb-text { font-size: 13px; line-height: 1.5; color: #8892a4; margin: 7px auto 20px; max-width: 340px; }
.onb-empty-card .onb-link {
  display: flex; align-items: stretch; gap: 8px;
  background: #0b0f1a; border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px; padding: 6px; margin-bottom: 20px;
}
.onb-empty-card .onb-link-url {
  /* B14-S5: background/color waren tote Absichtswerte (transparent/#cfd7e3) —
     real gewann immer die dunkle Input-Basis (#1a2235/#eef3fb) */
  flex: 1; min-width: 0; background: #1a2235; border: 0; outline: none;
  color: #eef3fb; font-size: 12.5px; font-family: inherit; padding: 0 8px;
  text-overflow: ellipsis;
}
.onb-empty-card .onb-copy-btn {
  flex: 0 0 auto; background: #00dfc1; color: #06231f; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 8px 16px;
  border-radius: 7px; transition: background 0.15s, color 0.15s;
}
.onb-empty-card .onb-copy-btn:hover { background: #2ee9cf; }
.onb-empty-card .onb-copy-btn.done { background: #10b981; color: #fff; }
.onb-empty-card .onb-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px; text-align: left;
}
.onb-empty-card .onb-steps li {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; color: #b3bccd;
}
.onb-empty-card .onb-step-n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,223,193,0.12); color: #00dfc1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}

/* =========================================================
   ERSTE SCHRITTE — aktivierende Leer-Zustände (25.09.2026)
   Markup: Abschnitt ERSTE SCHRITTE in renderers-helpers.js.
   Spezifikation docs/design/erste-schritte/umsetzung.md, Referenz
   mockup-erste-schritte.html. Alle Werte explizit: die Mockup-Token
   (--s1, --tp …) sind global nicht definiert, nur auf #weeklyTop5Backdrop
   und #viewCompare gescoped (Spez. §3).
   Die Kulisse ist nie animiert. Die Regel dafür steht OHNE !important
   (Karte-Prüfstand); ob sie wirkt, misst der Prüfstand über animationName
   (_harness/erste-schritte-verify.mjs, Z18).
========================================================= */
.onb-start { max-width: 1220px; margin: 0 auto; }
.onb-abstand { margin-top: 28px; }
.onb-kompakt .onb-flow { margin-bottom: 22px; }
.onb-wieder { margin-bottom: 18px; font-size: 12px; color: #4e5a72; }
.onb-freiwillig { color: #4e5a72; }
/* Anfragen im Nie-Zustand: Kopf wie Activity und Submissions (App-Muster, Plan
   D3). Der Messenger entfällt bis zur ersten Anfrage. */
#viewInbox > .onb-kopf { max-width: 1220px; margin: 0 auto 18px; padding: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
#viewInbox > .onb-kopf h2 { color: #f0f4ff; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
#viewInbox > .onb-kopf .sub { color: #8892a4; font-size: 13px; font-weight: 500; margin-top: 3px; }
/* Compare: die Seite ist 1240px breit (.cmp-page). Die Leiste nimmt ihre ganze
   Breite und fluchtet so mit dem Kopf der Ansicht wie im Mockup. */
#viewCompare .cmp-page > .onb-start { max-width: none; }

/* Knöpfe: genau ein gefüllter Teal-Knopf ist sichtbar (Spez. §3, Regel 1) */
.onb-btn-pri {
  font: inherit; font-size: 12.5px; font-weight: 800; background: #00dfc1; color: #06231f;
  border: 0; border-radius: 8px; padding: 9px 17px; cursor: pointer; transition: background .15s;
}
.onb-btn-pri:hover { background: #2ee9cf; }
.onb-btn-pri:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }
.onb-btn-ghost {
  font: inherit; font-size: 12.5px; font-weight: 600; color: #8892a4; background: transparent;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: all .15s;
}
.onb-btn-ghost:hover { color: #f0f4ff; border-color: rgba(255,255,255,.22); }
.onb-btn-ghost:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }
.onb-btn-ghost.is-done { color: #46cd92; border-color: rgba(70,205,146,.35); }
.onb-btn-quiet {
  font: inherit; font-size: 12px; font-weight: 600; color: #4e5a72; background: transparent;
  border: 0; padding: 6px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.onb-btn-quiet:hover { color: #8892a4; }
.onb-btn-quiet:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; border-radius: 4px; }

/* Vorschau-Kulisse: Formen aus boot-skeleton.js, still, mit Beschriftung */
.onb-ghost {
  opacity: .5; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg,#000 0,#000 74%,rgba(0,0,0,.35) 92%,transparent 100%);
  mask-image: linear-gradient(180deg,#000 0,#000 74%,rgba(0,0,0,.35) 92%,transparent 100%);
  transition: opacity .16s;
}
/* KEINE Animation: das Boot-Skelett pulsiert, eine Kulisse darf das nie. */
.onb-ghost *{animation:none}
.onb-ghost--box { -webkit-mask-image: none; mask-image: none; }
.onb-ghost-tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #4e5a72; margin-bottom: 12px;
}
.onb-ghost-tag::before { content: ""; width: 14px; height: 1px; background: #4e5a72; display: block; }

/* Auslöser der Erklärung: Text statt Symbol; die Kulisse ist zusätzlich
   Trefferfläche, aber nur mit Zeigegerät. */
.onb-zeig { position: static; }
.onb-flaeche { position: relative; }
.onb-ask {
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #4e5a72; background: transparent; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; transition: color .13s;
}
.onb-ask::before { content: ""; width: 14px; height: 1px; background: currentColor; display: block; }
.onb-ask em { font-style: normal; color: #00dfc1; text-transform: none; font-size: 11.5px; letter-spacing: .01em; }
.onb-ask:hover { color: #8892a4; }
.onb-ask:focus-visible { outline: 2px solid #00dfc1; outline-offset: 3px; border-radius: 4px; }
.onb-hit {
  position: absolute; inset: 0; background: transparent; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 64px;
}
.onb-hit span {
  font-size: 12.5px; font-weight: 700; color: #f0f4ff; background: #222d42;
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 8px 16px;
  opacity: 0; transform: translateY(-5px); transition: all .16s; box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.onb-hit:hover span, .onb-hit:focus-visible span { opacity: 1; transform: none; }
.onb-hit:focus-visible { outline: 2px solid #00dfc1; outline-offset: -4px; border-radius: 12px; }
.onb-zeig:hover .onb-ghost { opacity: .62; }
@media (hover: none) { .onb-hit { display: none; } }

/* Erklär-Popup: am body, über dem festen Kopf (z-index 40) */
.onb-info-bd {
  position: fixed; inset: 0; z-index: 80; background: rgba(4,7,14,.72);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: onbInfoBd .16s ease-out;
}
@keyframes onbInfoBd { from { opacity: 0; } to { opacity: 1; } }
.onb-info {
  width: 520px; max-width: 100%; background: #111827; border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 26px 28px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: onbInfoIn .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes onbInfoIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.onb-info-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.onb-info-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #4e5a72; margin-bottom: 6px;
}
.onb-info h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: #f0f4ff; }
.onb-info-x {
  font: inherit; font-size: 17px; line-height: 1; color: #4e5a72; background: transparent;
  border: 0; cursor: pointer; padding: 4px 6px; border-radius: 7px; flex: none;
}
.onb-info-x:hover { color: #f0f4ff; background: #1a2235; }
.onb-info-x:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }
.onb-info p { margin: 16px 0 0; font-size: 13.5px; color: #8892a4; line-height: 1.65; }
.onb-info-wann {
  margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 12.5px; color: #4e5a72; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.onb-info-wann b { color: #8892a4; font-weight: 600; }

/* Primitive der Kulisse */
.onb-gb { background: rgba(255,255,255,.10); border-radius: 6px; height: 11px; }
.onb-gb--s { height: 8px; border-radius: 4px; }
.onb-gb--t { height: 17px; border-radius: 7px; }
.onb-gb--n { height: 26px; border-radius: 7px; }
.onb-gring { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; border: 4px solid rgba(255,255,255,.10); }
.onb-gring--lg { width: 60px; height: 60px; border-width: 5px; }
.onb-gpill { height: 26px; border-radius: 8px; border: 1px solid rgba(255,255,255,.10); background: transparent; }
.onb-gava { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.10); flex: none; }
.onb-gdot { width: 6px; height: 6px; border-radius: 50%; background: var(--c, rgba(255,255,255,.10)); flex: none; display: block; }
.onb-gstack { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
.onb-ginline { display: flex; align-items: center; gap: 12px; min-width: 0; }
.onb-gacts { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
/* Echte Wörter: die Beschriftung, die in der Ansicht immer gleich dasteht */
.onb-gw { font-size: 11.5px; font-weight: 600; color: #8892a4; white-space: nowrap; }
.onb-gw--s { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #4e5a72; }
.onb-gw--ok { color: #46cd92; }
.onb-gw--warn { color: #d6a93f; }
.onb-gw--btn { border: 1px solid rgba(255,255,255,.10); border-radius: 8px; padding: 6px 11px; display: inline-block; }
.onb-gw--btn-a { border: 1px solid rgba(0,223,193,.22); color: #00dfc1; border-radius: 8px; padding: 6px 11px; display: inline-block; }
.onb-gcard { background: #111827; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 16px 18px; }
.onb-grow {
  display: grid; gap: 14px; align-items: center; background: #111827; border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 9px;
}
.onb-gcols { display: grid; gap: 14px; padding: 0 16px 9px; align-items: end; }
.onb-gchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.onb-gchip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: #8892a4;
  border: 1px solid transparent; border-radius: 8px; padding: 6px 11px;
}
.onb-gchip.is-on { border-color: rgba(255,255,255,.10); background: #111827; }
.onb-gkpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.onb-ggrid21 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; }
.onb-ggrid11 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.onb-gcards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.onb-gtzone {
  background: #1a2235; border-radius: 10px; padding: 12px 14px; display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px;
}
.onb-gtzone > div { display: flex; flex-direction: column; gap: 7px; }

/* Messenger-Kulisse (feste Höhe, deshalb ohne Maske: .onb-ghost--box) */
.onb-gmsgr {
  display: grid; grid-template-columns: 340px minmax(0,1fr); height: 462px;
  background: #111827; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; overflow: hidden;
}
.onb-gside { border-right: 1px solid rgba(255,255,255,.07); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.onb-gotrow { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.onb-gconv { display: flex; flex-direction: column; padding: 14px 22px; min-width: 0; }
.onb-gconv-head {
  display: flex; align-items: center; gap: 11px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 14px;
}
.onb-gmrow { display: flex; flex-direction: column; margin-bottom: 12px; width: 62%; }
.onb-gmrow.is-out { margin-left: auto; align-items: flex-end; }
.onb-gbub {
  background: #1a2235; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; border-bottom-left-radius: 5px;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 7px; width: 100%;
}
.onb-gmrow.is-out .onb-gbub { background: #222d42; border-bottom-left-radius: 14px; border-bottom-right-radius: 5px; }
.onb-gmeta { font-size: 10px; color: #4e5a72; margin-top: 5px; display: flex; gap: 7px; align-items: center; }
.onb-gcomposer {
  margin-top: auto; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 11px 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* Handlungs-Leiste: steht ÜBER der Kulisse, nicht darauf */
.onb-startbar {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center;
  background: #111827; border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 22px 26px; margin-bottom: 26px;
}
.onb-startbar h3 { margin: 0; font-size: 16.5px; font-weight: 800; color: #f0f4ff; letter-spacing: -.01em; }
.onb-startbar p { margin: 7px 0 0; font-size: 13px; color: #8892a4; max-width: 620px; line-height: 1.55; }
.onb-sb-extra { margin-top: 16px; }
.onb-sb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex: none; }
.onb-sb-row { display: flex; gap: 9px; align-items: center; }

/* Geführter Ablauf: ein Schritt zur Zeit */
.onb-flow { background: #111827; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 24px 26px 12px; }
.onb-flow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.onb-flow-head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: #f0f4ff; }
.onb-flow-head p { margin: 5px 0 0; font-size: 13px; color: #8892a4; max-width: 480px; }
.onb-flow-side { display: flex; align-items: center; gap: 16px; }
.onb-flow-prog { flex: none; min-width: 148px; text-align: right; }
.onb-flow-pn { font-size: 12px; font-weight: 700; color: #8892a4; white-space: nowrap; }
.onb-flow-pn b { color: #f0f4ff; }
.onb-flow-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.07); margin-top: 9px; overflow: hidden; }
.onb-flow-bar i { display: block; height: 100%; background: #00dfc1; border-radius: 2px; transition: width .55s cubic-bezier(.2,.7,.3,1); }

.onb-flow-card {
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 22px 24px; background: #0b0f1a;
  position: relative; overflow: hidden; animation: onbFlowIn .34s cubic-bezier(.2,.7,.3,1);
}
@keyframes onbFlowIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.onb-flow-card.is-leaving { animation: onbFlowOut .3s cubic-bezier(.4,0,1,1) forwards; }
@keyframes onbFlowOut { to { opacity: 0; transform: translateX(-26px); } }
/* Der Titel steht im Kopf der Ansicht; hier bleibt er nur für Vorlesegeräte. */
.onb-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.onb-flow-sub { margin: 0; font-size: 13.5px; color: #8892a4; max-width: 600px; line-height: 1.6; }
.onb-flow-acts { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.onb-flow-prev { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); }
.onb-flow-prev-h {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #4e5a72; margin-bottom: 12px;
}
.onb-flow-done {
  position: absolute; inset: 0; background: #0b0f1a; display: flex; align-items: center; justify-content: center;
  gap: 12px; font-size: 14.5px; font-weight: 800; color: #00dfc1; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.onb-flow-done.is-on { opacity: 1; }
/* Das Häkchen zeichnet sich beim Einblenden der Bestätigung (Spez. §10). */
.onb-flow-done svg path {
  fill: none; stroke: #00dfc1; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
}
.onb-flow-done.is-on svg path { animation: onbTick .4s .05s forwards; }
@keyframes onbTick { to { stroke-dashoffset: 0; } }

/* Begrüßung. Kein uppercase im Fondsnamen: ein Eigenname wird so geschrieben,
   wie er heißt. */
.onb-hello { padding: 34px 4px 30px; max-width: 620px; }
.onb-kicker { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #00dfc1; margin-bottom: 14px; }
.onb-hello h3 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: #f0f4ff; }
.onb-hello p { margin: 14px 0 0; font-size: 14px; color: #8892a4; line-height: 1.6; }
.onb-acts { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.onb-hello .onb-btn-pri { font-size: 13.5px; padding: 11px 22px; }

/* Der Pfad: eine Abfolge, keine Liste */
.onb-pfad { list-style: none; display: flex; align-items: flex-start; margin: 0 0 22px; padding: 0; }
.onb-pfad li { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.onb-pfad li::before, .onb-pfad li::after {
  content: ""; position: absolute; top: 11px; height: 1px; background: rgba(255,255,255,.12); width: 50%;
}
.onb-pfad li::before { left: 0; }
.onb-pfad li::after { right: 0; }
.onb-pfad li:first-child::before, .onb-pfad li:last-child::after { display: none; }
.onb-pfad li.is-done::before, .onb-pfad li.is-done::after { background: rgba(0,223,193,.22); }
.onb-pfad-btn {
  position: relative; z-index: 1; background: transparent; border: 0; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; border-radius: 8px;
}
.onb-pfad-btn:focus-visible { outline: 2px solid #00dfc1; outline-offset: 3px; }
.onb-pfad-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: #111827;
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800;
  color: #4e5a72; transition: all .25s;
}
.onb-pfad li.is-done .onb-pfad-dot { border-color: rgba(0,223,193,.22); color: #00dfc1; }
.onb-pfad li.is-now .onb-pfad-dot {
  border-color: #00dfc1; color: #00dfc1; background: #0b0f1a; box-shadow: 0 0 0 4px rgba(0,223,193,.10);
}
/* Häkchen im Pfad und im Abschluss: Rahmen und Häkchen teal (Spez. §6.2).
   Im Mockup fehlte der Strich-Stil, das Häkchen erschien dort als dunkle Fläche. */
.onb-pfad-dot svg path, .onb-fertig-ring svg path {
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.onb-pfad-lbl { font-size: 11px; font-weight: 600; color: #4e5a72; white-space: nowrap; text-align: center; }
.onb-pfad li.is-now .onb-pfad-lbl { color: #f0f4ff; font-weight: 700; }
.onb-pfad li.is-done .onb-pfad-lbl { color: #8892a4; }
.onb-pfad-btn:hover .onb-pfad-lbl { color: #f0f4ff; }

/* Abschluss (D5) */
.onb-fertig { text-align: center; padding: 40px 20px; }
.onb-fertig-ring {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(0,223,193,.22); color: #00dfc1;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.onb-fertig h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: #f0f4ff; }
.onb-fertig p { margin: 9px auto 22px; font-size: 13px; color: #8892a4; max-width: 420px; }

.onb-flow-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; }
.onb-flow-note { font-size: 11.5px; color: #4e5a72; }

/* Kompaktzeile (ab der ersten Bewerbung) */
.onb-flow.is-compact { padding: 18px 22px 6px; margin-bottom: 22px; }
.onb-flow.is-compact .onb-flow-head { margin-bottom: 12px; }
.onb-flow.is-compact .onb-flow-head h3 { font-size: 14.5px; }
.onb-flow.is-compact .onb-flow-head p { margin-top: 4px; font-size: 12.5px; }
.onb-flow.is-compact .onb-pfad { margin-bottom: 6px; }

/* Link-Feld und Textbausteine */
.onb-linkrow {
  display: flex; align-items: stretch; gap: 8px; max-width: 540px;
  background: #0b0f1a; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; padding: 6px;
}
.onb-flow-card .onb-linkrow { background: #111827; }
.onb-linkrow input {
  flex: 1; min-width: 0; background: #1a2235; border: 0; outline: none; color: #eef3fb;
  font-size: 12.5px; font-family: inherit; padding: 0 10px; border-radius: 7px; text-overflow: ellipsis;
}
.onb-copybtn {
  flex: 0 0 auto; background: #00dfc1; color: #06231f; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 9px 16px; border-radius: 7px;
  transition: background .15s, color .15s;
}
.onb-copybtn:hover { background: #2ee9cf; }
.onb-copybtn:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }
.onb-copybtn.is-flash { background: #46cd92; }
.onb-copybtn.is-done { background: transparent; color: #46cd92; border: 1px solid rgba(70,205,146,.35); }
.onb-snips { margin-top: 14px; max-width: 640px; }
.onb-snip {
  display: grid; grid-template-columns: 86px minmax(0,1fr) auto; gap: 14px; align-items: center;
  padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07);
}
.onb-snip-lbl { font-size: 11.5px; font-weight: 700; color: #8892a4; }
.onb-snip-txt { font-size: 11.5px; color: #4e5a72; line-height: 1.5; }

.onb-wait { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: #8892a4; }
.onb-pulse { width: 7px; height: 7px; border-radius: 50%; background: #00dfc1; flex: none; position: relative; }
.onb-pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid #00dfc1; opacity: .45; animation: onbPulse 2s infinite;
}
@keyframes onbPulse { 0% { transform: scale(.6); opacity: .5; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 1100px) {
  .onb-gkpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .onb-ggrid21, .onb-ggrid11 { grid-template-columns: 1fr; }
  .onb-gcards { grid-template-columns: 1fr; }
  .onb-gmsgr { grid-template-columns: 1fr; }
  .onb-gmsgr .onb-gconv { display: none; }
}
@media (max-width: 900px) {
  .onb-startbar { grid-template-columns: 1fr; }
  .onb-sb-side { align-items: flex-start; }
  .onb-pfad-lbl { display: none; }
}
/* Reduzierte Bewegung: keine Animationen, keine Übergänge, das Häkchen steht
   sofort gezeichnet da (Spez. §10). Konkrete Selektoren statt !important. */
@media (prefers-reduced-motion: reduce) {
  .onb-flow-card, .onb-flow-card.is-leaving, .onb-info-bd, .onb-info, .onb-pulse::after,
  .onb-flow-done svg path, .onb-flow-done.is-on svg path { animation: none; }
  .onb-flow-card, .onb-flow-bar i, .onb-flow-done, .onb-ghost, .onb-hit span, .onb-pfad-dot,
  .onb-btn-pri, .onb-btn-ghost, .onb-copybtn, .onb-ask { transition: none; }
  .onb-flow-done svg path { stroke-dashoffset: 0; }
}

/* =========================================================
   PIPELINE-VIEW — Design „Pulse-Liste" (Betreiber-Entscheid 17.07.2026,
   Referenz-Mockup mockup-pipeline-pulse-final.html).
   Token-Remap scoped auf #viewPipeline (wie #viewSubmissions).
   Aufbau: Kopf → ruhige Filter-Zeile (Farbe NUR als Dot) → Spaltenkopf →
   Pulse-Split-Zeilen (Checkbox · Ring+Identität · Status-Picker ·
   Zugewiesen · Zuletzt aktiv · Aktionen) → floating Bulk-Bar.
   Auf Mockup-Breite 1220px gedeckelt (wie die Übersicht-Pulse).
========================================================= */
#viewPipeline {
  --surface-base: #0b0f1a;
  --surface-raised: #111827;
  --surface-overlay: #1a2235;
  --text-primary: #f0f4ff;
  --text-secondary: #8892a4;
  --text-tertiary: #4e5a72;
  --border-default: rgba(255,255,255,0.06);
  --border-subtle: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --accent: #00dfc1;
  /* Ring-Farben = Pulse-Palette (wie #cardGrid — der Ring kam mit dem Redesign) */
  --score-ring-high: #46cd92;
  --score-ring-medium: #d6a93f;
  --score-ring-low: #e8696c;
  --score-ring-bg: #222d42;
  padding-top: 10px;
  max-width: 1220px;
  margin: 0 auto;
}

/* ── Kopf (Mockup .page-head) ── */
#viewPipeline .pipe3-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
#viewPipeline .panelhead { margin: 0; padding: 0; display: block; }
#viewPipeline .panelhead h2 { color: #f0f4ff; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
#viewPipeline .panelhead .note {
  color: #8892a4;
  font-size: 13px;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-weight: 500;
  margin-top: 3px;
}
#viewPipeline .panelhead .note b { color: #f0f4ff; font-weight: 600; }
#viewPipeline .pipe3-head-actions { display: flex; gap: 8px; align-items: center; }
#viewPipeline .pipe3-head-actions .btn {
  white-space: nowrap;
  background: #111827;
  border: 1px solid rgba(255,255,255,0.07);
  color: #8892a4;
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}
#viewPipeline .pipe3-head-actions .btn:hover { color: #f0f4ff; background: #1a2235; }

/* ── Filter-Zeile (Mockup .legend — ruhig, ohne Farbleiste; Farbe NUR als Dot) ── */
#viewPipeline .pipe3-legend {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 14px;
}
#viewPipeline .pipe3-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: #8892a4;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all .13s;
}
#viewPipeline .pipe3-tab:hover { color: #f0f4ff; background: #111827; }
#viewPipeline .pipe3-tab.active { background: #111827; color: #f0f4ff; border-color: rgba(255,255,255,0.07); }
#viewPipeline .pipe3-tab:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }
#viewPipeline .pipe3-tab .pipe3-dot { width: 6px; height: 6px; opacity: 0.9; }
#viewPipeline .pipe3-tab-n { color: #4e5a72; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
#viewPipeline .pipe3-tab.active .pipe3-tab-n { color: #8892a4; }
#viewPipeline .pipe3-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.07); margin: 0 6px; flex: none; }

/* ── Bulk-Bar (floating, Mockup .bulkbar) ──
   position:fixed + left:50%/translate(-50%) — Prozent statt vw/vh, damit die
   globale --app-zoom-Skalierung nicht doppelt wirkt (Muster Detail-Modal).
   Conditional im DOM (0 Auswahl → keine Bar, Test-Vertrag), Slide-in als
   CSS-Animation beim Einfügen. */
#viewPipeline .pipe3-bulkbar {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #1a2235;
  border: 1px solid rgba(0,223,193,0.20);
  border-radius: 14px;
  padding: 11px 16px;
  box-shadow: 0 12px 44px rgba(0,0,0,0.5);
  transform: translate(-50%, 0);
  animation: pipe3BarIn .25s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes pipe3BarIn { from { transform: translate(-50%, 90px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
#viewPipeline .pipe3-bulk-count { color: #00dfc1; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
#viewPipeline .pipe3-bulk-actions { display: flex; gap: 8px; align-items: center; }
#viewPipeline .pipe3-bulk-stage {
  background: #222d42;
  border: 1px solid rgba(255,255,255,0.12);
  color: #f0f4ff;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
#viewPipeline #pipeBulkRemove {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #8892a4;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .15s;
}
#viewPipeline #pipeBulkRemove:hover { color: #e8696c; border-color: rgba(232,105,108,0.4); background: rgba(232,105,108,0.08); }
#viewPipeline #pipeBulkDeselect,
#viewPipeline #pipeBulkCompare {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #8892a4;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .15s;
}
#viewPipeline #pipeBulkDeselect:hover,
#viewPipeline #pipeBulkCompare:hover { color: #f0f4ff; background: #222d42; }

/* ── Spaltenkopf + Zeilen-Container (Mockup .cols / .rows) ── */
/* Spur seit 11.09.2026 (Mockup 205/200, bis dahin 200/200/190/235): Das feste
   Minimum des Grids muss UNTER die schmalste Breite passen, die die View vor dem
   Zwei-Spalten-Umbruch annimmt — und die ist nicht der Viewport. body{zoom:.9}
   und .container{padding:0 24px} machen aus Viewport 1101 CSS-px nur 1175
   Layout-px View. Alt: 34+250+200+200+190+235 + 5×14 + 32 + 2 = 1213 → „Öffnen →"
   ragte im Band 1101–1134 aus der Karte (gemessen 34/15/0 px bei 1101/1120/1135).
   Neu: 34+250+180+180+170+228 + 70 + 34 = 1146, also 29 px Reserve. Präzedenz ist
   die Übersichtszeile .ovx-row (1158 px Minimum, kommt ohne Media-Query aus).
   Gehalten von _harness/pipeline-pulse-verify.mjs, Lauf 6 „Schmalband". */
#viewPipeline .pipe3-wrap { background: transparent; border: none; }
#viewPipeline .pipe3-cols {
  display: grid;
  grid-template-columns: 34px minmax(250px,1fr) 180px 180px 170px 228px;
  gap: 14px;
  padding: 0 16px 8px;
  align-items: end;
}
#viewPipeline .pipe3-cols .c {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4e5a72;
}
#viewPipeline .pipe3-cols .c.r { text-align: right; }
#viewPipeline .pipe3-rows { display: flex; flex-direction: column; gap: 10px; }

/* Checkboxen (Mockup .ck): custom, teal bei checked, Teilzustand am Kopf */
#viewPipeline input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all .12s;
}
#viewPipeline input[type="checkbox"]:hover { border-color: #8892a4; }
#viewPipeline input[type="checkbox"]:checked { background: #00dfc1; border-color: #00dfc1; }
#viewPipeline input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #04231e;
}
#viewPipeline input[type="checkbox"]:indeterminate { background: rgba(0,223,193,0.35); border-color: #00dfc1; }
#viewPipeline input[type="checkbox"]:indeterminate::after {
  content: "–";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #04231e;
}
#viewPipeline input[type="checkbox"]:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }

/* ── Zeile (Mockup .prow — exakt die Pulse-Split-DNA der Übersicht) ── */
#viewPipeline .pipe3-row {
  display: grid;
  grid-template-columns: 34px minmax(250px,1fr) 180px 180px 170px 228px;
  gap: 14px;
  align-items: center;
  background: #111827;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 13px 16px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  animation: ovxIn .4s ease both;
}
#viewPipeline .pipe3-row:hover {
  transform: translateY(-2px);
  border-color: rgba(0,223,193,0.20);
  box-shadow: 0 0 0 1px rgba(0,223,193,0.20), 0 10px 30px rgba(0,223,193,0.05);
}
#viewPipeline .pipe3-row:focus-within { border-color: rgba(0,223,193,0.20); }
#viewPipeline .pipe3-row.bulk-selected { border-color: rgba(0,223,193,0.20); background: #121b2d; }
#viewPipeline .pipe3-row.synced { opacity: 0.72; }
#viewPipeline .pipe3-row.flash { animation: pipe3Flash 1s ease; }
@keyframes pipe3Flash {
  0% { box-shadow: 0 0 0 1px rgba(0,223,193,0.20), 0 0 26px rgba(0,223,193,0.16); }
  100% { box-shadow: none; }
}

/* ── Identität (Ring 44px + Name/Meta/Why — Mockup .ident/.who) ── */
#viewPipeline .pipe3-ident { display: flex; align-items: center; gap: 13px; min-width: 0; }
#viewPipeline .pipe3-who { min-width: 0; }
#viewPipeline .pipe3-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
#viewPipeline .pipe3-name {
  background: none;
  border: none;
  padding: 0;
  color: #f0f4ff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  /* 11.09.2026: Der Button ist Flex-Item und schrumpfte vorher nie unter seine
     Textbreite — ein langer Name schob sich samt Nachbarn aus der Identitäts-
     Spalte in die Pipeline-Spalte. Tragend ist dabei das overflow:hidden: es
     setzt das automatische Flex-Minimum (min-width:auto) auf 0, weshalb die
     Zeile min-width:0 darunter nur ausspricht, was ohnehin gilt — sie bleibt
     als Schutz stehen, falls jemand das overflow je zurücknimmt. Eine Gegenprobe
     am 11.09.2026 hat genau das gezeigt: min-width:0 allein zu entfernen ändert
     nichts, erst beides zusammen lässt die Zusage des Prüfstands rot werden.
     Das overflow sitzt am Button selbst, NICHT an .pipe3-l1: eine Outline liegt
     ausserhalb der Border-Box ihres Elements, ein klippender Elternteil würde sie
     abschneiden. Die Register-Pille (.ovx-pill, flex-shrink:0) bleibt deshalb
     ganz, der Name gibt per Ellipsis nach. Die anon_id steht seit demselben Tag
     nur noch im title des Buttons (renderers-pipeline.js) — .pipe3-id ist
     ersatzlos entfallen. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#viewPipeline .pipe3-name:hover { color: #00dfc1; }
#viewPipeline .pipe3-name:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; border-radius: 4px; }
#viewPipeline .pipe3-meta {
  font-size: 11.5px;
  color: #8892a4;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#viewPipeline .pipe3-meta .ovx-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  vertical-align: 1px;
}
#viewPipeline .pipe3-why {
  font-size: 11.5px;
  color: #4e5a72;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pipeline-Status: Farb-Dot + Label (Synced-Badge als Pille) */
#viewPipeline .pipe3-statcell { min-width: 0; }
#viewPipeline .pipe3-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
  border-radius: 99px;
  padding: 5px 12px;
}
#viewPipeline .pipe3-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
#viewPipeline .pipe3-st-review      { color: #8892a4; }
#viewPipeline .pipe3-st-contacted   { color: #fbbf24; }
#viewPipeline .pipe3-st-callplanned { color: #22d3ee; }
#viewPipeline .pipe3-st-hot         { color: #f97316; }
#viewPipeline .pipe3-st-watching  { color: #0a84ff; }
#viewPipeline .pipe3-st-declined  { color: #ef4444; }
#viewPipeline .pipe3-st-synced    { color: #a78bfa; }
/* Status-Unterzeile (Decline-Grund bzw. Synced-Aktion — Mockup .st-sub) */
#viewPipeline .pipe3-dreason {
  font-size: 10px;
  color: #4e5a72;
  margin-top: 4px;
  padding-left: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Status-Picker (PIPELINE-Spalte, Mockup .stpick) ──
   Badge-Pille (Dot + Label + Caret) mit unsichtbar überlagertem nativen
   <select class="pipe3-stagesel"> (Test-Vertrag). Die Farbe kommt via
   currentColor aus der .pipe3-st-*-Klasse, Rahmen/Fläche via color-mix. */
#viewPipeline .pipe3-statuspick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
  border-radius: 99px;
  padding: 5px 12px 5px 11px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
#viewPipeline .pipe3-statuspick:hover { border-color: color-mix(in srgb, currentColor 55%, transparent); }
#viewPipeline .pipe3-statuspick:focus-within { outline: 2px solid #00dfc1; outline-offset: 2px; }
#viewPipeline .pipe3-pick-label {
  font-size: 11.5px;
  font-weight: 700;
  color: currentColor;
  pointer-events: none;
  white-space: nowrap;
}
#viewPipeline .pipe3-statuspick .pipe3-stagesel {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font: inherit;
  width: 100%;
}
#viewPipeline .pipe3-statuspick .pipe3-stagesel option {
  background: #1a2235;
  color: #f0f4ff;
  font-weight: 500;
}
#viewPipeline .pipe3-pick-caret { font-size: 9px; color: currentColor; opacity: 0.7; pointer-events: none; }

/* ── Zugewiesen (Avatar-Initialen + Name/Rolle — Mockup .assg) ── */
#viewPipeline .pipe3-assg { display: flex; align-items: center; gap: 9px; min-width: 0; }
#viewPipeline .pipe3-avat {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #8892a4;
  background: #222d42;
  border: 1px solid rgba(255,255,255,0.12);
}
#viewPipeline .pipe3-assg-txt { min-width: 0; }
#viewPipeline .pipe3-assignee { color: #f0f4ff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#viewPipeline .pipe3-assignee-role { color: #4e5a72; font-size: 10px; margin-top: -1px; }

/* ── Zuletzt aktiv (+ Live-Puls bei Aktivität heute — Mockup .lact) ── */
#viewPipeline .pipe3-lact { min-width: 0; }
#viewPipeline .pipe3-act-time {
  color: #f0f4ff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  font-variant-numeric: tabular-nums;
}
#viewPipeline .pipe3-live { width: 6px; height: 6px; border-radius: 50%; background: #00dfc1; position: relative; flex: none; }
#viewPipeline .pipe3-live::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(0,223,193,0.20);
  animation: pipe3Pulse 2.2s ease-out infinite;
}
@keyframes pipe3Pulse {
  0% { opacity: 0.9; transform: scale(0.6); }
  70% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; }
}
#viewPipeline .pipe3-act-detail { color: #4e5a72; font-size: 10.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Zeilen-Aktionen (Push to CRM lila, Öffnen teal — Mockup .ract) ── */
#viewPipeline .pipe3-ract { display: flex; gap: 7px; justify-content: flex-end; align-items: center; }
#viewPipeline .pipe3-crm {
  background: transparent;
  border: 1px solid rgba(167,139,250,0.32);
  color: #a78bfa;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .15s;
}
#viewPipeline .pipe3-crm:hover { background: rgba(167,139,250,0.09); }
#viewPipeline .pipe3-crm:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }
#viewPipeline .pipe3-cmp {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #8892a4;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .15s;
}
#viewPipeline .pipe3-cmp:hover { color: #f0f4ff; background: #1a2235; }
#viewPipeline .pipe3-cmp:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }
#viewPipeline .pipe3-openbtn {
  background: #00dfc1;
  border: 1px solid transparent;
  color: #04231e;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .15s;
}
#viewPipeline .pipe3-openbtn:hover { filter: brightness(1.08); }
#viewPipeline .pipe3-openbtn:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }
#viewPipeline .pipe3-incrm { color: #a78bfa; font-size: 11.5px; font-weight: 700; white-space: nowrap; }

/* Leerzustand */
#viewPipeline .empty { color: #8892a4; background: transparent; border: 1px dashed rgba(255,255,255,0.1); border-radius: 12px; }

/* Responsive (Mockup): unter ~1100px bricht das Zeilen-Grid auf 2 Spalten,
   der Spaltenkopf verschwindet, Aktionen linksbündig. */
@media (max-width: 1100px) {
  #viewPipeline .pipe3-cols { display: none; }
  #viewPipeline .pipe3-row { grid-template-columns: 34px 1fr; grid-auto-rows: auto; row-gap: 10px; }
  #viewPipeline .pipe3-ract { justify-content: flex-start; }
}

/* Reduced Motion: deaktiviert Einflug, Ring-Draw, Live-Puls, Row-Flash,
   Bulk-Bar-Slide und Hover-Transform der Pipeline (Kaskade, kein !important). */
@media (prefers-reduced-motion: reduce) {
  #viewPipeline .pipe3-row,
  #viewPipeline .ring-prog,
  #viewPipeline .pipe3-live::after,
  #viewPipeline .pipe3-bulkbar { animation: none; }
  #viewPipeline .pipe3-row, #viewPipeline .pipe3-row:hover { transform: none; transition: none; }
}

/* =========================================================
   ACTIVITY VIEW — „Stilles Protokoll" (Redesign 18.07.2026)
   1:1 nach mockup-activity-protokoll-final.html (Betreiber-Entscheid
   17.07.2026, 4 Runden). Ereignisse als ganze Sätze in Tages-Karten,
   Letzter-Besuch-Marker als einziger Farbtupfer, Kategorie-/Akteur-
   Chips, Hover-„Öffnen →". Komplett monochrom — die früheren
   Stage-Farb-Chips (act-stage) sind entfallen. 1220px-Deckel wie
   Übersicht/Pipeline. Hex direkt wie #viewPipeline (kein Token-Remap).
========================================================= */
#viewActivity { max-width: 1220px; margin: 0 auto; padding: 4px 0 90px; }
#viewActivity .num { font-variant-numeric: tabular-nums; }

#viewActivity .panelhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 14px; padding: 0; }
#viewActivity .panelhead h2 { color: #f0f4ff; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
#viewActivity .meta-line { color: #8892a4; font-size: 13px; font-weight: 500; margin-top: 3px; }
#viewActivity .meta-line b { color: #f0f4ff; font-weight: 600; }
#viewActivity .act-live { white-space: nowrap; }
#viewActivity .act-livedot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #00dfc1; margin-right: 5px; vertical-align: 1px; position: relative; }
#viewActivity .act-livedot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(0,223,193,0.20); animation: actPulse 2.4s ease-out infinite; }
@keyframes actPulse { 0% { opacity: 0.8; transform: scale(0.6); } 70% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; } }

#viewActivity .ph-actions { display: flex; align-items: center; gap: 8px; }
#viewActivity .search-box { position: relative; }
#viewActivity .search-box::before { content: "⌕"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #4e5a72; font-size: 12px; }
#viewActivity .search-box input { width: 220px; box-sizing: border-box; background: #111827; border: 1px solid rgba(255,255,255,0.07); color: #f0f4ff; border-radius: 9px; padding: 8px 12px 8px 30px; font-size: 12.5px; font-family: inherit; transition: border-color 0.15s; }
#viewActivity .search-box input::placeholder { color: #4e5a72; }
#viewActivity .search-box input:focus { outline: none; border-color: rgba(0,223,193,0.20); }

/* Filter: Kategorie-Chips (mit Zähler) + Divider + Akteur-Chips — eine ruhige Zeile */
#viewActivity .act-filter { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 13px; margin-bottom: 26px; }
#viewActivity .act-tab { font-family: inherit; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; font-weight: 600; color: #8892a4; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 5px 11px; transition: all 0.13s; white-space: nowrap; }
#viewActivity .act-tab b { color: #4e5a72; font-weight: 600; font-size: 10.5px; }
#viewActivity .act-tab:hover { color: #f0f4ff; background: #111827; }
#viewActivity .act-tab.on { color: #f0f4ff; background: #111827; border-color: rgba(255,255,255,0.07); }
#viewActivity .act-tab.on b { color: #8892a4; }
#viewActivity .act-tab:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; }
#viewActivity .act-fsep { width: 1px; height: 16px; background: rgba(255,255,255,0.07); margin: 0 7px; flex: none; }
#viewActivity .act-mini { width: 19px; height: 19px; border-radius: 50%; background: #222d42; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 7.5px; font-weight: 800; color: #8892a4; }

/* Tages-Karten: Uppercase-Datum über einer --s1-Karte mit Hairline-Trennern */
#viewActivity .act-dayh { font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: #4e5a72; margin: 20px 2px 7px; }
#viewActivity .act-dayh:first-child { margin-top: 0; }
#viewActivity .act-daycard { background: #111827; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 3px 16px; }

/* Zeile: Zeit · Akteur-Avatar · Satz · Kategorie/„Öffnen →" */
#viewActivity .ev { display: grid; grid-template-columns: 44px 26px 1fr auto; gap: 12px; align-items: center; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,0.07); transition: background 0.12s; animation: actRowIn 0.35s ease both; }
@keyframes actRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#viewActivity .act-daycard .ev:last-child { border-bottom: none; }
#viewActivity .ev:hover { background: rgba(255,255,255,0.015); }

#viewActivity .ev-time { font-size: 11px; color: #4e5a72; font-weight: 600; }
#viewActivity .ev-avat { width: 22px; height: 22px; border-radius: 50%; background: #222d42; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; color: #8892a4; }

#viewActivity .ev-text { font-size: 13px; line-height: 1.5; color: #8892a4; min-width: 0; }
#viewActivity .ev-text .who { font-weight: 650; color: #8892a4; }
#viewActivity .ev-text .deal { font-weight: 650; color: #f0f4ff; cursor: pointer; border-radius: 4px; }
#viewActivity .ev-text .deal[data-open]:hover { color: #00dfc1; }
#viewActivity .ev-text .deal.nolink { color: #8892a4; cursor: default; }
#viewActivity .ev-text .sub { color: #4e5a72; font-size: 12px; }

/* Rechte Zeilenseite: dauerhaftes Kategorie-Label; beim Hover (oder Tastatur-
   Fokus) blendet es aus und „Öffnen →" schwebt ein (translate+opacity) */
#viewActivity .ev-meta { position: relative; display: flex; align-items: center; justify-content: flex-end; min-width: 96px; justify-self: end; }
#viewActivity .ev-cat { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #4e5a72; transition: opacity 0.15s; }
#viewActivity .ev-open { position: absolute; right: 0; top: 50%; transform: translate(5px, -50%); font-family: inherit; font-size: 11px; font-weight: 600; color: #8892a4; background: #111827; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; padding: 4px 10px; cursor: pointer; white-space: nowrap; opacity: 0; transition: opacity 0.15s, transform 0.15s, color 0.12s, background 0.12s; }
#viewActivity .ev:hover .ev-open, #viewActivity .ev-open:focus-visible { opacity: 1; transform: translate(0, -50%); }
#viewActivity .ev-open:hover { color: #f0f4ff; background: #1a2235; }
#viewActivity .ev:hover .ev-cat, #viewActivity .ev-meta:has(.ev-open:focus-visible) .ev-cat { opacity: 0; }

/* „Seit deinem letzten Besuch" — der einzige Farbtupfer der Seite, flüsterleise */
#viewActivity .act-lastvisit { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
#viewActivity .act-lastvisit::before, #viewActivity .act-lastvisit::after { content: ""; flex: 1; height: 1px; background: rgba(0,223,193,0.20); }
#viewActivity .act-lastvisit span { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #00dfc1; opacity: 0.85; }

#viewActivity .load-more { display: block; margin: 26px auto 0; background: transparent; border: 1px solid rgba(255,255,255,0.07); color: #8892a4; font-size: 12px; font-weight: 600; padding: 8px 18px; border-radius: 9px; cursor: pointer; font-family: inherit; transition: all 0.13s; }
#viewActivity .load-more:hover { color: #f0f4ff; background: #111827; }
#viewActivity .load-more:focus-visible { outline: 2px solid #00dfc1; outline-offset: 2px; } /* B37: Tastatur wie .act-tab */
#viewActivity .empty { color: #8892a4; font-size: 13px; background: transparent; border: 1px dashed rgba(255,255,255,0.12); border-radius: 12px; padding: 44px 20px; text-align: center; margin-top: 8px; }
#viewActivity .empty .hint { font-size: 11.5px; color: #4e5a72; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  #viewActivity .ev { animation: none; }
  #viewActivity .act-livedot::after { animation: none; }
  #viewActivity .ev-cat, #viewActivity .ev-open, #viewActivity .ev, #viewActivity .act-tab, #viewActivity .load-more, #viewActivity .search-box input { transition: none; }
}

/* =========================================================
   COMPARE-VIEW — „Vergleichs-Engine + Podium" (17.07.2026)
   1:1 nach mockup-compare-engine-final.html (Betreiber-Entscheid
   nach 13 Runden). Urteils-View: Podium Gold/Silber/Bronze
   (ab Platz 4 nur Matrix) + K.o.-Streifen + Duell + Matrix mit
   Dealflow-Perzentilen. Medaillen-Töne NUR an Chip/Hairline
   (Gold #e5c558, Silber #c3c9d4, Bronze #c98a52), keine
   Flächen. Sieger = animierter Aufwärts-Chevron (reduced-motion:
   statisch). Mathematik: js/compare-engine.js. Kein Mono;
   Zahlen tabular-nums.
========================================================= */
#viewCompare {
  --bg:     #0b0f1a;
  --s1:     #111827;
  --s2:     #1a2235;
  --s3:     #222d42;
  --border: rgba(255,255,255,0.07);
  --bm:     rgba(255,255,255,0.12);
  --tp:     #f0f4ff;
  --tm:     #8892a4;
  --ts:     #4e5a72;
  --accent: #00dfc1;
  --asub:   rgba(0,223,193,0.10);
  --aborder:rgba(0,223,193,0.20);
  --good:   #46cd92;
  --bad:    #e8696c;
  --mid:    #d6a93f;
  --best:   #22c55e;
  --weak:   #6b7280;
  --badv:   #ef4444;
  /* Ring-Semantik wie Übersicht/Pipeline (grün/gelb/rot — Teal ist nie Score-Farbe) */
  --score-ring-high:#46cd92; --score-ring-medium:#d6a93f; --score-ring-low:#e8696c; --score-ring-bg:#222d42;
}
#viewCompare .cmp-page { max-width: 1240px; margin: 0 auto; padding: 6px 0 90px; }
#viewCompare .num { font-variant-numeric: tabular-nums; }

/* ── Kopf: Titel + Kontextzeile links, ⚙/Export/Leeren rechts ── */
#viewCompare .panelhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  flex-wrap: wrap;
}
#viewCompare .panelhead h2 {
  color: var(--tp);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}
#viewCompare .panelhead .sub { font-size: 0.8rem; font-weight: 500; color: var(--tm); margin-top: 3px; }
#viewCompare .panelhead .sub b { color: var(--tp); font-weight: 600; }
#viewCompare .ph-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start; }
#viewCompare .tbtn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tm);
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 13px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
#viewCompare .tbtn:hover { color: var(--tp); background: var(--s2); border-color: var(--bm); }
#viewCompare .tbtn.pri { background: var(--accent); color: #04231e; border-color: transparent; font-weight: 700; }
#viewCompare .tbtn.pri:hover { filter: brightness(1.08); color: #04231e; }

/* ⚙-Gewichte-Popover (v1: 3 Werte + Reset, localStorage) */
#viewCompare .cmp-weights-wrap { position: relative; }
#viewCompare .cmp-weights {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 240px;
  background: var(--s2);
  border: 1px solid var(--bm);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
#viewCompare .cmp-weights .cw-title { font-size: 0.72rem; font-weight: 700; color: var(--tp); margin-bottom: 10px; }
#viewCompare .cmp-weights label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 0.76rem; font-weight: 500; color: var(--tm); margin-bottom: 7px;
}
#viewCompare .cmp-weights input {
  width: 64px; font-family: inherit; font-size: 0.8rem; font-variant-numeric: tabular-nums;
  color: var(--tp); background: var(--s1); border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 8px; text-align: right;
}
#viewCompare .cmp-weights input:focus { outline: none; border-color: var(--aborder); }
#viewCompare .cmp-weights .cw-note { font-size: 0.68rem; color: var(--ts); margin: 4px 0 10px; }
#viewCompare .cmp-weights .cw-act { display: flex; justify-content: flex-end; gap: 7px; }

/* ── Urteil: Gewinner dominant, Silber/Bronze kompakt, K.o. volle Breite ── */
#viewCompare .vgrid { display: grid; grid-template-columns: minmax(360px,1.15fr) 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 900px){ #viewCompare .vgrid { grid-template-columns: 1fr; } }
#viewCompare .v-win {
  background: var(--s1);
  border: 1px solid rgba(229,197,88,.3);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  animation: cmpFin .4s ease both;
}
@keyframes cmpFin { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
#viewCompare .vw-top { display: flex; gap: 14px; align-items: center; }
#viewCompare .v-rankbig {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #e5c558;
  background: rgba(229,197,88,.09); border: 1px solid rgba(229,197,88,.35);
}
#viewCompare .vw-name {
  font-size: 17px; font-weight: 750; color: var(--tp); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
#viewCompare .vw-name b { font-weight: 750; }
#viewCompare .agree {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-radius: 99px; padding: 2.5px 9px;
}
#viewCompare .agree.warn { color: var(--mid); background: rgba(214,169,63,.08); border: 1px solid rgba(214,169,63,.3); }
#viewCompare .agree.warn b { color: var(--mid); font-weight: 700; }
#viewCompare .vw-lead { font-size: 13.5px; color: var(--tp); margin-top: 12px; }
#viewCompare .vw-lead b { font-weight: 700; }
#viewCompare .vw-why { font-size: 12px; color: var(--tm); margin-top: 8px; }
#viewCompare .vw-why b { color: var(--tp); font-weight: 650; }
#viewCompare .vw-why.dim { color: var(--ts); }
#viewCompare .vw-act { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
#viewCompare .abtn {
  font-family: inherit; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 7px 12px;
  cursor: pointer; background: transparent; color: var(--tm); border: 1px solid var(--bm);
  transition: color .13s, background .13s; white-space: nowrap;
}
#viewCompare .abtn:hover { color: var(--tp); background: var(--s2); }
#viewCompare .abtn.pri { background: var(--accent); color: #04231e; border-color: transparent; font-weight: 700; }
#viewCompare .abtn.pri:hover { filter: brightness(1.08); color: #04231e; }
#viewCompare .abtn.danger { color: var(--bad); border-color: rgba(232,105,108,.35); }
#viewCompare .abtn.danger:hover { background: rgba(232,105,108,.08); color: var(--bad); }

#viewCompare .v-rest { display: flex; flex-direction: column; gap: 10px; }
#viewCompare .v-rest .v-row { flex: 1; }
#viewCompare .v-row {
  background: var(--s1); border: 1px solid var(--border); border-radius: 11px;
  padding: 10px 14px; display: flex; align-items: center; gap: 12px; animation: cmpFin .4s ease both;
}
#viewCompare .v-row .rk {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; background: var(--s3); color: var(--tm);
}
#viewCompare .v-row .rk.silver { color: #c3c9d4; background: rgba(195,201,212,.08); border: 1px solid rgba(195,201,212,.3); }
#viewCompare .v-row .rk.bronze { color: #c98a52; background: rgba(201,138,82,.08); border: 1px solid rgba(201,138,82,.3); }
#viewCompare .v-row .nm { font-size: 13px; font-weight: 700; color: var(--tp); white-space: nowrap; }
#viewCompare .v-row .nm b { font-weight: 700; }
#viewCompare .v-row .vals { font-size: 11px; color: var(--tm); white-space: nowrap; }
#viewCompare .v-row .vals b { color: var(--tp); font-weight: 650; }
#viewCompare .v-row .drv {
  font-size: 10.5px; color: var(--ts); min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
#viewCompare .v-row .abtn { font-size: 11px; padding: 5px 10px; flex: none; }

#viewCompare .v-ko {
  grid-column: 1 / -1;
  background: var(--s1); border: 1px solid rgba(232,105,108,.3); border-radius: 11px;
  padding: 10px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  animation: cmpFin .4s ease both;
}
#viewCompare .v-ko .kb {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--bad);
  background: rgba(232,105,108,.1); border: 1px solid rgba(232,105,108,.3);
  border-radius: 7px; padding: 3px 8px;
}
#viewCompare .v-ko .nm { font-size: 13px; font-weight: 700; color: var(--tp); }
#viewCompare .v-ko .nm b { font-weight: 700; }
#viewCompare .v-ko .fl { font-size: 11.5px; font-weight: 700; color: var(--bad); }
/* Bewusst „kohint", nicht „hint": die globale .hint-Regel (font-weight:800 +
   margin-top) würde sonst in die zentrierte K.o.-Flex-Zeile lecken. */
#viewCompare .v-ko .kohint { font-size: 10.5px; color: var(--ts); flex: 1; min-width: 180px; }
#viewCompare .v-ko .kact { display: flex; gap: 7px; flex-wrap: wrap; }

#viewCompare .mixnote { margin-top: 10px; font-size: 11px; color: var(--ts); padding: 0 2px; }

/* ── Duell ── */
#viewCompare .duel {
  margin-top: 12px; border: 1px solid var(--aborder); border-radius: 12px;
  background: var(--s1); padding: 16px 18px; display: none; animation: cmpFin .3s ease both;
}
#viewCompare .duel.show { display: block; }
#viewCompare .duel h3 { font-size: 14px; font-weight: 700; color: var(--tp); margin: 0 0 4px; letter-spacing: -0.01em; }
#viewCompare .duel .dsub { font-size: 11px; color: var(--ts); margin-bottom: 12px; }
#viewCompare .duel-rows { display: flex; flex-direction: column; gap: 7px; }
#viewCompare .duel-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: baseline; font-size: 12px; }
#viewCompare .duel-row .dl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tm); }
#viewCompare .duel-row .dt { color: var(--tm); }
#viewCompare .duel-row .dt b { color: var(--tp); font-weight: 650; }
#viewCompare .duel-row .dt .adv { font-weight: 700; }
#viewCompare .duel-row .dt .adv.a1 { color: var(--good); }
#viewCompare .duel-row .dt .adv.a1 b { color: var(--good); }
#viewCompare .duel-row .dt .eq { color: var(--ts); font-weight: 600; }
#viewCompare .duel-close {
  float: right; font-family: inherit; font-size: 11px; color: var(--ts);
  background: none; border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; cursor: pointer;
}
#viewCompare .duel-close:hover { color: var(--tp); }
#viewCompare .duel .hint1 { font-size: 12px; color: var(--tm); }
#viewCompare .duel .hint1 b { color: var(--tp); font-weight: 650; }

/* ── Matrix (#compareBody): Deal-Spalten, sticky Kopf unter dem 52px-Header ── */
#viewCompare .mx { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--s1); }
#viewCompare .mx-row { display: grid; grid-template-columns: var(--cols); align-items: stretch; }
#viewCompare .mx-row > * { padding: 11px 14px; border-bottom: 1px solid var(--border); min-width: 0; }
/* Letzte Matrix-Zeile ohne border-bottom (sonst Doppel-Hairline über der
   mx-note). :nth-last-child(2), weil die .mx-note immer das letzte Kind ist —
   ein :last-of-type über div-Kinder träfe nie eine .mx-row. */
#viewCompare .mx-row:nth-last-child(2) > * { border-bottom: none; }
#viewCompare .mx-row .rl { border-right: 1px solid var(--border); color: var(--tm); font-size: 11px; }
#viewCompare .mx-row > .colhi { background: rgba(255,255,255,.025); }

#viewCompare .mx-head { position: sticky; top: 52px; z-index: 5; background: #141c2e; border-radius: 12px 12px 0 0; }
#viewCompare .mx-head > * { border-bottom: 1px solid var(--bm); padding-top: 13px; padding-bottom: 13px; position: relative; }
#viewCompare .mx-head .dh { display: flex; gap: 11px; align-items: center; }
#viewCompare .dh-nm {
  font-size: 13.5px; font-weight: 700; color: var(--tp);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
#viewCompare .dh-nm:hover { text-decoration: underline; text-underline-offset: 3px; }
#viewCompare .dh-meta { font-size: 10.5px; color: var(--tm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#viewCompare .sdot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; background: var(--ts); }
#viewCompare .sdot.preseed { background: #e0935a; }
#viewCompare .sdot.seed, #viewCompare .sdot.prea { background: #a78bfa; }
#viewCompare .sdot.seriesa, #viewCompare .sdot.seriesb { background: #00dfc1; }
/* nowrap MIT overflow-Schutz: bei vielen Deals (Cap 10) werden die Spalten
   schmal — ohne hidden lief die Zeile unter den Ring der Nachbarspalte
   (Prod-Befund 18.07.2026, 7 Deals). Volltext steht im title. */
#viewCompare .dh-sub { font-size: 10px; color: var(--ts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#viewCompare .dh-sub .low { color: var(--mid); }
#viewCompare .duel-t {
  margin-top: 6px; font-family: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ts);
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
#viewCompare .duel-t:hover { color: var(--tm); border-color: var(--bm); }
#viewCompare .duel-t.on { color: var(--accent); border-color: var(--aborder); background: var(--asub); }
#viewCompare .dh-konm { font-size: 12px; font-weight: 700; color: var(--tp); cursor: pointer; }
#viewCompare .dh-konm:hover { text-decoration: underline; text-underline-offset: 3px; }
#viewCompare .dh-kob { font-size: 9px; font-weight: 800; color: var(--bad); letter-spacing: .06em; margin-top: 3px; }
#viewCompare .dh-rm {
  position: absolute; top: 7px; right: 7px;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 12px; line-height: 1; color: var(--ts);
  background: transparent; border: none; border-radius: 5px; cursor: pointer; padding: 0;
  opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
#viewCompare .mx-head > *:hover .dh-rm { opacity: 1; }
#viewCompare .dh-rm:hover { color: var(--bad); background: rgba(232,105,108,.1); }

#viewCompare .dim-l {
  display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  background: none; border: none; font-family: inherit; color: var(--tp); text-align: left; width: 100%; padding: 0;
}
#viewCompare .dim-l.static { cursor: default; }
#viewCompare .dim-l .chev { font-size: 9px; color: var(--ts); transition: transform .15s; width: 10px; flex: none; }
#viewCompare .dim-l .chev.hid { visibility: hidden; }
#viewCompare .mx-dim.open .dim-l .chev { transform: rotate(90deg); }
#viewCompare .dim-l .dn { font-size: 12.5px; font-weight: 700; }
#viewCompare .cell { display: flex; align-items: center; gap: 8px; overflow: hidden; }
#viewCompare .cell .pv { font-size: 14px; font-weight: 700; color: var(--tp); white-space: nowrap; }
#viewCompare .cell .pv.hi { color: var(--good); }
#viewCompare .cell .pv.lo { color: var(--bad); }
#viewCompare .cell .tag.eq { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; color: var(--ts); white-space: nowrap; }
#viewCompare .miss { font-size: 12px; color: var(--ts); }
#viewCompare .miss.sm { font-size: 11.5px; }
#viewCompare .cell.koc { opacity: .45; }
#viewCompare .cell.koc .pv { font-size: 12px; }
#viewCompare .koc { opacity: .45; }

/* Spaltensieger: 2 gestaffelte Aufwärts-Chevrons (reduced-motion: statisch) */
#viewCompare .win { flex: none; width: 12px; height: 16px; }
#viewCompare .win svg { display: block; overflow: visible; }
#viewCompare .win polyline { fill: none; stroke: var(--best); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#viewCompare .win .w1 { animation: cmpRise 1.6s ease-in-out infinite; }
#viewCompare .win .w2 { animation: cmpRise 1.6s ease-in-out infinite .35s; }
@keyframes cmpRise {
  0%   { transform: translateY(4px);  opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(-4px); opacity: 0; }
}

/* Rohwert-Aufklapp-Zeilen: §9-Farblogik absolut (best grün+fett, bad rot, Rest grau) */
#viewCompare .mx-raw { display: none; background: rgba(255,255,255,.012); }
#viewCompare .mx-raw.show { display: grid; }
#viewCompare .mx-raw .rl { font-size: 11px; color: var(--tm); padding-left: 32px; }
#viewCompare .mx-raw .rl .ms { color: var(--ts); font-size: 9.5px; margin-left: 5px; }
#viewCompare .rv { font-size: 12px; font-weight: 600; color: var(--weak); display: flex; align-items: baseline; gap: 6px; }
#viewCompare .rv.best { color: var(--best); font-weight: 700; }
#viewCompare .rv.bad { color: var(--badv); }
#viewCompare .rv .pp { font-size: 9.5px; color: var(--ts); font-weight: 600; }

#viewCompare .mx-note { font-size: 10.5px; color: var(--ts); padding: 10px 14px 12px; border-top: 1px solid var(--border); }
#viewCompare .mx-note b { color: var(--tm); }
#viewCompare .mx-note .win { display: inline-block; vertical-align: -3px; height: 14px; }
#viewCompare .mxi {
  font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--tm);
  background: none; border: none; cursor: pointer; padding: 0;
}
#viewCompare .mxi:hover { color: var(--tp); }
#viewCompare #cmpMxInfoBody { margin-top: 9px; line-height: 1.7; max-width: 90ch; }

/* Dichter Modus (> 6 Deals): Matrix scrollt horizontal IN sich (nie der Body),
   Mindest-Spaltenbreite hält Namen/Werte lesbar. position:sticky am Kopf wäre
   im Scroll-Container wirkungslos zum Viewport → bewusst static (identisches
   Muster wie der <1000px-Fall unten). */
#viewCompare .mx--scroll { overflow-x: auto; }
#viewCompare .mx--scroll .mx-head { position: static; }

/* Leerzustand (Vertrag: ruhige Karte) */
#viewCompare .cmp-empty {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 22px;
  color: var(--tm);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Schmale Viewports: Matrix scrollt in sich, Kopf nicht mehr sticky */
@media (max-width: 1000px){
  #viewCompare .mx { overflow-x: auto; }
  #viewCompare .mx-row { min-width: 960px; }
  #viewCompare .mx-head { position: static; }
}
@media (prefers-reduced-motion: reduce){
  #viewCompare .v-win, #viewCompare .v-row, #viewCompare .v-ko, #viewCompare .duel { animation: none; }
  #viewCompare .win .w1, #viewCompare .win .w2 { animation: none; }
}

/* =========================================================================
   Score-Regeln (Custom Index V6) — Design System v2, dark-only
   Scoped auf #customIndexBackdrop. Quelle: mockup-score.html.
   Tokens hier hart als Hex (wie #viewPipeline), Schrift IBM Plex Sans (kein Mono).
========================================================================= */
#customIndexBackdrop{
  --ci-bg:#0b0f1a; --ci-s1:#111827; --ci-s2:#1a2235; --ci-s3:#222d42;
  --ci-border:rgba(255,255,255,0.07); --ci-bm:rgba(255,255,255,0.12);
  --ci-tp:#f0f4ff; --ci-tm:#8892a4; --ci-ts:#4e5a72;
  --ci-accent:#00dfc1; --ci-asub:rgba(0,223,193,0.10); --ci-aborder:rgba(0,223,193,0.20);
  --ci-pos:#3ecf8e; --ci-neg:#f2787a;
  /* Warn-Triade (Redesign 18.07.2026): Default-Badge „⭐ Standard", „empfohlen"-Chip, Scoring-aus-Banner */
  --ci-warn:#e8b45a; --ci-warnsub:rgba(232,180,90,0.10); --ci-warnborder:rgba(232,180,90,0.24);
  /* Backdrop: oben verankert + scrollbar statt vertikal zentriert (Panel kann hoch werden) */
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  background:rgba(4,7,13,0.55);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:40px 20px 64px;
  font-family:"IBM Plex Sans", sans-serif;
}
#customIndexBackdrop .panel{
  width:100%; max-width:860px; margin:0 auto;
  background:var(--ci-s1); border:1px solid var(--ci-border); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,0.45); overflow:hidden; color:var(--ci-tp);
  font-size:14px;
}
#customIndexBackdrop *, #customIndexBackdrop *::before, #customIndexBackdrop *::after{ box-sizing:border-box; }

/* PANEL-KOPF */
#customIndexBackdrop .p-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 24px; border-bottom:1px solid var(--ci-border); }
#customIndexBackdrop .p-head h2{ font-size:1.12rem; font-weight:700; letter-spacing:-0.01em; margin:0; }
#customIndexBackdrop .p-head .sub{ font-size:0.77rem; color:var(--ci-tm); font-weight:500; margin-top:3px; }
#customIndexBackdrop .master{ display:flex; align-items:center; gap:10px; }
#customIndexBackdrop .master .lab{ font-size:0.78rem; color:var(--ci-tm); font-weight:600; }
#customIndexBackdrop .switch{ position:relative; width:42px; height:24px; display:inline-block; }
#customIndexBackdrop .switch input{ display:none; }
#customIndexBackdrop .track{ position:absolute; inset:0; background:var(--ci-s3); border-radius:999px; transition:background .15s; }
#customIndexBackdrop .knob{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#cdd5e4; transition:transform .15s; }
#customIndexBackdrop .switch input:checked + .track{ background:var(--ci-accent); }
#customIndexBackdrop .switch input:checked + .track .knob{ transform:translateX(18px); background:#04221d; }

#customIndexBackdrop .p-body{ padding:20px 24px 8px; }

/* ERKLÄRTEXT + ENTSCHEIDUNGSHINWEIS (§6.2) */
#customIndexBackdrop .explain{ display:flex; gap:12px; background:var(--ci-s2); border:1px solid var(--ci-border); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
#customIndexBackdrop .explain .ic{ flex-shrink:0; width:24px; height:24px; border-radius:7px; background:var(--ci-asub); border:1px solid var(--ci-aborder); color:var(--ci-accent); display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; }
#customIndexBackdrop .explain p{ font-size:0.8rem; line-height:1.55; color:var(--ci-tm); font-weight:500; }
#customIndexBackdrop .explain p b{ color:var(--ci-tp); font-weight:600; }
#customIndexBackdrop .decision-note{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.015); border:1px solid var(--ci-border); border-radius:10px; padding:11px 15px; margin-bottom:22px; }
#customIndexBackdrop .decision-note .dn-ic{ flex-shrink:0; color:var(--ci-tm); font-size:0.95rem; }
#customIndexBackdrop .decision-note p{ font-size:0.78rem; color:var(--ci-tm); font-weight:500; line-height:1.5; }
#customIndexBackdrop .decision-note p b{ color:var(--ci-tp); font-weight:600; }

/* PHASEN-UMSCHALTER */
#customIndexBackdrop .phase-row{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
#customIndexBackdrop .phase-row .pl{ font-size:0.78rem; color:var(--ci-tm); font-weight:600; }
#customIndexBackdrop .phases{ display:flex; gap:3px; background:var(--ci-bg); border:1px solid var(--ci-border); border-radius:9px; padding:3px; }
#customIndexBackdrop .phases button{ background:transparent; border:none; color:var(--ci-tm); font-size:0.76rem; font-weight:600; padding:5px 12px; border-radius:6px; cursor:pointer; font-family:inherit; }
#customIndexBackdrop .phases button.on{ background:var(--ci-asub); color:var(--ci-accent); }

/* BEREICHS-KARTE (Akkordeon) */
#customIndexBackdrop .grp{ position:relative; border:1px solid var(--ci-border); border-radius:12px; margin-bottom:10px; background:var(--ci-s1); }
#customIndexBackdrop .grp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; }
#customIndexBackdrop .grp-head-main{ cursor:pointer; flex:1; min-width:0; }
#customIndexBackdrop .grp.collapsed .grp-head{ padding:12px 16px; cursor:pointer; }
#customIndexBackdrop .grp-name{ font-size:0.9rem; font-weight:600; color:var(--ci-tp); }
#customIndexBackdrop .grp-sub{ font-size:0.73rem; color:var(--ci-tm); font-weight:500; margin-top:1px; }
#customIndexBackdrop .grp.collapsed .grp-sub{ color:var(--ci-ts); }
#customIndexBackdrop .grp-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
#customIndexBackdrop .cap{ font-size:0.73rem; color:var(--ci-tm); font-weight:600; white-space:nowrap; }
#customIndexBackdrop .cap b{ color:var(--ci-tp); }
#customIndexBackdrop .grp-menu, #customIndexBackdrop .chev{ background:none; border:none; color:var(--ci-ts); cursor:pointer; font-size:0.9rem; padding:2px 4px; line-height:1; }
#customIndexBackdrop .grp-menu:hover, #customIndexBackdrop .chev:hover{ color:var(--ci-tm); }
#customIndexBackdrop .grp-rules{ padding:10px 16px 12px; border-top:1px solid var(--ci-border); }

/* Bereichs-Menü (⋯) */
#customIndexBackdrop .grp-menu-pop{ position:absolute; top:44px; right:14px; z-index:5; background:var(--ci-s2); border:1px solid var(--ci-bm); border-radius:10px; padding:5px; box-shadow:0 12px 30px rgba(0,0,0,0.5); display:flex; flex-direction:column; min-width:180px; }
#customIndexBackdrop .grp-menu-pop button{ background:none; border:none; text-align:left; color:var(--ci-tp); font-family:inherit; font-size:0.8rem; font-weight:600; padding:8px 10px; border-radius:7px; cursor:pointer; }
#customIndexBackdrop .grp-menu-pop button:hover{ background:rgba(255,255,255,0.05); }
#customIndexBackdrop .grp-menu-pop button.danger:hover{ color:var(--ci-neg); }

/* KLARTEXT-REGEL */
#customIndexBackdrop .rule{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:7px 0; }
#customIndexBackdrop .rule + .rule{ border-top:1px solid rgba(255,255,255,0.04); }
#customIndexBackdrop .rule.rule-off{ opacity:0.45; }
#customIndexBackdrop .kw{ font-size:0.8rem; color:var(--ci-ts); font-weight:500; }
#customIndexBackdrop .tok{ display:inline-flex; align-items:center; gap:5px; background:var(--ci-s2); border:1px solid var(--ci-bm); border-radius:7px; padding:4px 9px; font-size:0.8rem; font-weight:600; color:var(--ci-tp); cursor:pointer; }
#customIndexBackdrop .tok:hover{ border-color:var(--ci-aborder); }
#customIndexBackdrop .tok .cv{ color:var(--ci-ts); font-size:0.7rem; }
#customIndexBackdrop .tok.kpi{ background:rgba(0,223,193,0.06); border-color:var(--ci-aborder); color:#b9f3ea; }
#customIndexBackdrop .arr{ color:var(--ci-ts); font-weight:600; margin:0 1px; }
#customIndexBackdrop .pts{ font-size:0.82rem; font-weight:700; font-variant-numeric:tabular-nums; min-width:34px; }
#customIndexBackdrop .pts.pos{ color:var(--ci-pos); }
#customIndexBackdrop .pts.neg{ color:var(--ci-neg); }
#customIndexBackdrop .pts.zero{ color:var(--ci-tm); }
#customIndexBackdrop .rule .rm{ margin-left:auto; background:none; border:none; color:var(--ci-ts); cursor:pointer; font-size:0.72rem; opacity:0.5; padding:2px 5px; }
#customIndexBackdrop .rule .rm:hover{ opacity:1; color:var(--ci-neg); }
#customIndexBackdrop .rule-empty{ font-size:0.78rem; color:var(--ci-ts); font-weight:500; padding:7px 0; }
#customIndexBackdrop .add-rule{ margin-top:8px; background:none; border:1px dashed rgba(255,255,255,0.12); color:var(--ci-tm); font-size:0.76rem; font-weight:600; padding:6px 12px; border-radius:8px; cursor:pointer; font-family:inherit; }
#customIndexBackdrop .add-rule:hover{ color:var(--ci-accent); border-color:var(--ci-aborder); }
#customIndexBackdrop .add-grp{ display:block; width:100%; margin:6px 0 22px; background:none; border:1px dashed rgba(255,255,255,0.12); color:var(--ci-tm); font-size:0.8rem; font-weight:600; padding:11px; border-radius:10px; cursor:pointer; font-family:inherit; }
#customIndexBackdrop .add-grp:hover{ color:var(--ci-accent); border-color:var(--ci-aborder); }

/* LIVE-ERLÄUTERUNG (§6.3) */
#customIndexBackdrop .es{ background:var(--ci-s2); border:1px solid var(--ci-border); border-radius:12px; padding:16px 18px; margin-bottom:8px; }
#customIndexBackdrop .es-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
#customIndexBackdrop .es-head .lbl{ font-size:0.66rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:var(--ci-ts); }
#customIndexBackdrop .es-head .deal{ font-size:0.75rem; color:var(--ci-tm); font-weight:500; }
#customIndexBackdrop .es-deal{ background:transparent; border:none; color:var(--ci-tm); font-family:inherit; font-size:0.75rem; font-weight:600; cursor:pointer; max-width:280px; }
#customIndexBackdrop .es-deal option{ background:var(--ci-s1); color:var(--ci-tp); }
#customIndexBackdrop .es-rows{ display:flex; flex-direction:column; gap:2px; }
#customIndexBackdrop .es-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; font-size:0.8rem; font-weight:500; }
#customIndexBackdrop .es-row .t{ color:var(--ci-tm); }
#customIndexBackdrop .es-row .t b{ color:var(--ci-tp); font-weight:600; }
#customIndexBackdrop .es-empty{ font-size:0.8rem; color:var(--ci-ts); font-weight:500; padding:4px 0; }
#customIndexBackdrop .es-total{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:12px; border-top:1px solid var(--ci-border); }
#customIndexBackdrop .es-total .lt{ font-size:0.82rem; font-weight:600; color:var(--ci-tp); }
#customIndexBackdrop .es-score{ font-size:1.7rem; font-weight:700; color:var(--ci-accent); line-height:1; font-variant-numeric:tabular-nums; }
#customIndexBackdrop .es-score .max{ font-size:0.9rem; color:var(--ci-ts); font-weight:600; }
#customIndexBackdrop .es-foot{ margin-top:11px; font-size:0.72rem; color:var(--ci-ts); font-weight:500; font-style:italic; line-height:1.45; }

/* ERWEITERT (Profi-Modus) */
#customIndexBackdrop .adv{ margin:14px 0 6px; border:1px solid var(--ci-border); border-radius:12px; background:var(--ci-s1); overflow:hidden; }
#customIndexBackdrop .adv-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; background:none; border:none; color:var(--ci-tm); font-family:inherit; font-size:0.78rem; font-weight:600; padding:12px 16px; cursor:pointer; }
#customIndexBackdrop .adv-toggle:hover{ color:var(--ci-tp); }
#customIndexBackdrop .adv-body{ padding:6px 16px 16px; border-top:1px solid var(--ci-border); }
#customIndexBackdrop .adv-section-title{ font-size:0.66rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ci-ts); margin:14px 0 8px; }
#customIndexBackdrop .adv-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04); flex-wrap:wrap; }
#customIndexBackdrop .adv-row:last-child{ border-bottom:none; }
#customIndexBackdrop .adv-row > label{ font-size:0.8rem; color:var(--ci-tm); font-weight:600; }
#customIndexBackdrop .adv-row .right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
#customIndexBackdrop .adv input[type="text"], #customIndexBackdrop .adv input[type="number"], #customIndexBackdrop .adv select, #customIndexBackdrop .adv textarea{
  background:var(--ci-bg); border:1px solid var(--ci-bm); border-radius:8px; color:var(--ci-tp);
  font-family:inherit; font-size:0.8rem; font-weight:500; padding:7px 10px;
}
#customIndexBackdrop .adv input[type="number"]{ width:90px; }
#customIndexBackdrop .adv input[type="text"]{ min-width:200px; }
#customIndexBackdrop .adv textarea{ width:100%; min-height:120px; margin-top:8px; font-variant-numeric:tabular-nums; }
#customIndexBackdrop .adv .adv-btn{ background:transparent; border:1px solid var(--ci-bm); color:var(--ci-tm); font-family:inherit; font-size:0.76rem; font-weight:600; padding:7px 12px; border-radius:8px; cursor:pointer; }
#customIndexBackdrop .adv .adv-btn:hover{ color:var(--ci-tp); border-color:var(--ci-aborder); }
#customIndexBackdrop .adv .adv-hint{ font-size:0.72rem; color:var(--ci-ts); font-weight:500; }
#customIndexBackdrop .ci-kpi-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.76rem; }
#customIndexBackdrop .ci-kpi-row .k{ color:var(--ci-tp); font-weight:600; }
#customIndexBackdrop .ci-kpi-row .m{ color:var(--ci-ts); font-weight:500; }

/* FOOTER */
#customIndexBackdrop .p-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 24px; border-top:1px solid var(--ci-border); background:var(--ci-s1); flex-wrap:wrap; }
#customIndexBackdrop .foot-l{ font-size:0.76rem; color:var(--ci-tm); font-weight:500; }
#customIndexBackdrop .foot-l b{ color:var(--ci-tp); font-weight:600; }
#customIndexBackdrop .foot-actions{ display:flex; gap:8px; }
#customIndexBackdrop .btn-ghost{ background:transparent; border:1px solid var(--ci-bm); color:var(--ci-tm); font-size:0.8rem; font-weight:600; padding:8px 16px; border-radius:8px; cursor:pointer; font-family:inherit; }
#customIndexBackdrop .btn-ghost:hover{ color:var(--ci-tp); }
/* Teal aktiv seit 17.07.2026 (Entscheid Andreas — Design-Nachschärfung nach B14) */
#customIndexBackdrop .btn-primary{ background:var(--ci-accent); border:1px solid var(--ci-accent); color:#04231e; font-size:0.8rem; font-weight:700; padding:8px 18px; border-radius:8px; cursor:pointer; font-family:inherit; }
#customIndexBackdrop .btn-primary:hover{ filter:brightness(1.05); }

/* REGEL-EDITOR (kleines zentriertes Modal über dem Panel) */
#customIndexBackdrop .ci-editor-backdrop{ position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; background:rgba(4,7,13,0.6); padding:24px; }
#customIndexBackdrop .ci-editor{ width:100%; max-width:440px; background:var(--ci-s1); border:1px solid var(--ci-bm); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,0.55); overflow:hidden; }
#customIndexBackdrop .ci-editor-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--ci-border); }
#customIndexBackdrop .ci-editor-head h3{ font-size:0.95rem; font-weight:700; color:var(--ci-tp); margin:0; }
#customIndexBackdrop .ci-editor-head .x{ background:none; border:none; color:var(--ci-ts); cursor:pointer; font-size:1rem; padding:2px 6px; }
#customIndexBackdrop .ci-editor-head .x:hover{ color:var(--ci-tp); }
#customIndexBackdrop .ci-editor-body{ padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
#customIndexBackdrop .ci-fld{ display:flex; flex-direction:column; gap:6px; }
#customIndexBackdrop .ci-fld > label{ font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ci-ts); }
#customIndexBackdrop .ci-fld select, #customIndexBackdrop .ci-fld input[type="number"]{
  background:var(--ci-bg); border:1px solid var(--ci-bm); border-radius:8px; color:var(--ci-tp);
  font-family:inherit; font-size:0.85rem; font-weight:500; padding:9px 11px; width:100%;
}
#customIndexBackdrop .ci-fld select option{ background:var(--ci-s1); }
#customIndexBackdrop .ci-fld-row{ display:flex; gap:10px; }
#customIndexBackdrop .ci-fld-row .ci-fld{ flex:1; }
#customIndexBackdrop .ci-unit-hint{ font-size:0.72rem; color:var(--ci-ts); font-weight:500; }
#customIndexBackdrop .ci-stage-chips{ display:flex; flex-wrap:wrap; gap:6px; }
#customIndexBackdrop .ci-stage-chip{ background:var(--ci-s2); border:1px solid var(--ci-bm); color:var(--ci-tm); font-family:inherit; font-size:0.73rem; font-weight:600; padding:5px 11px; border-radius:999px; cursor:pointer; }
#customIndexBackdrop .ci-stage-chip.on{ background:var(--ci-asub); border-color:var(--ci-aborder); color:var(--ci-accent); }
#customIndexBackdrop .ci-editor-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-top:1px solid var(--ci-border); }
#customIndexBackdrop .ci-del-rule{ background:none; border:1px solid var(--ci-bm); color:var(--ci-neg); font-family:inherit; font-size:0.76rem; font-weight:600; padding:7px 12px; border-radius:8px; cursor:pointer; }
#customIndexBackdrop .ci-del-rule:hover{ background:rgba(242,120,122,0.08); }

/* ============================================================================
   SCORE-PANEL REDESIGN (18.07.2026) — Screening-Leiste, Zuschneiden-Schalter,
   Cap-Stepper, Erstell-Dialog, Preset-Picker, Empty-/Off-States.
   Scoped auf #customIndexBackdrop, nur --ci-* Tokens. Rechen-Engine unberührt.
============================================================================ */

/* Kleiner Klassen-basierter Schalter (Bereich/Regel an-aus) — NICHT der
   input-basierte Master-Switch (der bleibt .master label.switch mit input). */
#customIndexBackdrop .switch.sm{ width:32px; height:19px; cursor:pointer; flex-shrink:0; }
#customIndexBackdrop .switch.sm .knob{ width:13px; height:13px; }
#customIndexBackdrop .switch.on .track{ background:var(--ci-accent); }
#customIndexBackdrop .switch.on .knob{ transform:translateX(18px); background:#04221d; }
#customIndexBackdrop .switch.sm.on .knob{ transform:translateX(13px); }
#customIndexBackdrop .switch.sm:focus-visible{ outline:2px solid var(--ci-aborder); outline-offset:2px; border-radius:999px; }

/* Screening-Leiste */
#customIndexBackdrop .scr-bar{ display:flex; align-items:center; gap:12px; padding:12px 24px; border-bottom:1px solid var(--ci-border); background:rgba(255,255,255,0.012); flex-wrap:wrap; }
#customIndexBackdrop .scr-bar .pl{ font-size:0.64rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--ci-ts); }
#customIndexBackdrop .scr-select{ background:var(--ci-s2); border:1px solid var(--ci-bm); color:var(--ci-tp); font-family:inherit; font-size:0.84rem; font-weight:600; padding:7px 12px; border-radius:9px; cursor:pointer; }
#customIndexBackdrop .scr-select:focus{ outline:none; border-color:var(--ci-aborder); }
#customIndexBackdrop .scr-select option{ background:var(--ci-s1); color:var(--ci-tp); }
#customIndexBackdrop .scr-active{ display:inline-flex; align-items:center; gap:5px; font-size:0.7rem; font-weight:700; color:var(--ci-accent); background:var(--ci-asub); border:1px solid var(--ci-aborder); border-radius:999px; padding:3px 10px; }
#customIndexBackdrop .scr-active .d{ width:6px; height:6px; border-radius:50%; background:var(--ci-accent); }
#customIndexBackdrop .scr-default{ display:inline-flex; align-items:center; gap:5px; font-size:0.7rem; font-weight:700; color:var(--ci-warn); background:var(--ci-warnsub); border:1px solid var(--ci-warnborder); border-radius:999px; padding:3px 10px; }
#customIndexBackdrop .scr-spacer{ flex:1; }
#customIndexBackdrop .btn-new{ display:inline-flex; align-items:center; gap:6px; background:var(--ci-accent); border:1px solid var(--ci-accent); color:#04231e; font-size:0.78rem; font-weight:700; padding:7px 14px; border-radius:9px; cursor:pointer; font-family:inherit; }
#customIndexBackdrop .btn-new:hover{ filter:brightness(1.05); }
#customIndexBackdrop .scr-menu-wrap{ position:relative; }
#customIndexBackdrop .scr-menu-btn{ background:transparent; border:1px solid var(--ci-bm); color:var(--ci-tm); border-radius:8px; width:34px; height:34px; cursor:pointer; font-size:1rem; font-family:inherit; }
#customIndexBackdrop .scr-menu-btn:hover{ color:var(--ci-tp); border-color:var(--ci-aborder); }
#customIndexBackdrop .scr-menu-pop{ position:absolute; top:40px; right:0; z-index:6; background:var(--ci-s2); border:1px solid var(--ci-bm); border-radius:10px; padding:5px; box-shadow:0 12px 30px rgba(0,0,0,0.5); display:flex; flex-direction:column; min-width:230px; }
#customIndexBackdrop .scr-menu-pop button{ background:none; border:none; text-align:left; color:var(--ci-tp); font-family:inherit; font-size:0.8rem; font-weight:600; padding:8px 10px; border-radius:7px; cursor:pointer; }
#customIndexBackdrop .scr-menu-pop button:hover{ background:rgba(255,255,255,0.05); }
#customIndexBackdrop .scr-menu-pop button.danger{ color:var(--ci-neg); }
#customIndexBackdrop .scr-menu-pop button.danger:hover{ background:rgba(242,120,122,0.08); }

/* Bereichs-Karte: Schalter-Zeile + gedimmt bei aus + Cap-Stepper */
#customIndexBackdrop .grp.off{ opacity:0.55; }
#customIndexBackdrop .grp-lead{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
#customIndexBackdrop .grp-lead .grp-head-main{ flex:1; min-width:0; }
#customIndexBackdrop .grp-off-tag{ font-size:0.68rem; color:var(--ci-ts); font-weight:600; }
#customIndexBackdrop .cap-stepper{ display:inline-flex; align-items:center; background:var(--ci-bg); border:1px solid var(--ci-bm); border-radius:8px; overflow:hidden; }
#customIndexBackdrop .cap-stepper button{ background:transparent; border:none; color:var(--ci-tm); width:26px; height:28px; cursor:pointer; font-size:0.95rem; font-family:inherit; }
#customIndexBackdrop .cap-stepper button:hover{ color:var(--ci-accent); }
#customIndexBackdrop .cap-stepper .v{ min-width:30px; text-align:center; font-size:0.78rem; font-weight:700; color:var(--ci-tp); font-variant-numeric:tabular-nums; }
#customIndexBackdrop .cap-stepper .u{ font-size:0.64rem; color:var(--ci-ts); padding:0 8px 0 4px; }
#customIndexBackdrop .cap-set{ background:transparent; border:1px dashed rgba(255,255,255,0.14); color:var(--ci-tm); font-family:inherit; font-size:0.72rem; font-weight:600; padding:6px 10px; border-radius:8px; cursor:pointer; white-space:nowrap; }
#customIndexBackdrop .cap-set:hover{ color:var(--ci-accent); border-color:var(--ci-aborder); }

/* Scoring-aus-Banner */
#customIndexBackdrop .ci-off-banner{ display:flex; align-items:center; gap:10px; background:var(--ci-warnsub); border:1px solid var(--ci-warnborder); border-radius:10px; padding:11px 15px; margin-bottom:16px; }
#customIndexBackdrop .ci-off-banner .ic{ color:var(--ci-warn); font-size:0.95rem; }
#customIndexBackdrop .ci-off-banner p{ font-size:0.78rem; color:var(--ci-tp); font-weight:500; line-height:1.45; }
#customIndexBackdrop .ci-off-banner p b{ font-weight:700; }

/* Leeres Screening */
#customIndexBackdrop .ci-empty-scr{ text-align:center; border:1px dashed var(--ci-bm); border-radius:14px; padding:32px 22px; margin-bottom:20px; }
#customIndexBackdrop .ci-empty-scr .big{ font-size:1.4rem; margin-bottom:6px; color:var(--ci-ts); }
#customIndexBackdrop .ci-empty-scr h4{ font-size:0.95rem; font-weight:700; color:var(--ci-tp); margin:0 0 4px; }
#customIndexBackdrop .ci-empty-scr p{ font-size:0.79rem; color:var(--ci-tm); font-weight:500; margin:0 auto 16px; max-width:52ch; }
#customIndexBackdrop .ci-empty-scr .acts{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }

/* Erweitert-Hinweis (Verwaltung ist jetzt in der Screening-Leiste) */
#customIndexBackdrop .adv-note{ font-size:0.76rem; color:var(--ci-tm); font-weight:500; line-height:1.5; padding:4px 0 8px; }
#customIndexBackdrop .adv-note b{ color:var(--ci-tp); font-weight:600; }

/* Erstell-Dialog (Variante B1) — nutzt .ci-editor-backdrop/.ci-editor Muster */
#customIndexBackdrop .cs-tiles{ display:flex; flex-direction:column; gap:8px; }
#customIndexBackdrop .cs-tile{ display:flex; gap:11px; align-items:flex-start; text-align:left; width:100%; background:var(--ci-s1); border:1px solid var(--ci-border); border-radius:11px; padding:12px 14px; cursor:pointer; font-family:inherit; }
#customIndexBackdrop .cs-tile.on{ border-color:var(--ci-aborder); background:var(--ci-asub); }
#customIndexBackdrop .cs-radio{ width:17px; height:17px; border-radius:50%; border:2px solid var(--ci-bm); flex-shrink:0; margin-top:2px; position:relative; }
#customIndexBackdrop .cs-tile.on .cs-radio{ border-color:var(--ci-accent); }
#customIndexBackdrop .cs-tile.on .cs-radio::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--ci-accent); }
#customIndexBackdrop .cs-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
#customIndexBackdrop .cs-tt{ font-size:0.85rem; font-weight:700; color:var(--ci-tp); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
#customIndexBackdrop .cs-rec{ font-size:0.64rem; font-weight:700; color:var(--ci-warn); background:var(--ci-warnsub); border:1px solid var(--ci-warnborder); border-radius:999px; padding:1px 7px; }
#customIndexBackdrop .cs-td{ font-size:0.74rem; color:var(--ci-tm); font-weight:500; line-height:1.4; }
#customIndexBackdrop .cs-copy{ margin-top:3px; }
#customIndexBackdrop .cs-copy select{ background:var(--ci-bg); border:1px solid var(--ci-bm); border-radius:8px; color:var(--ci-tp); font-family:inherit; font-size:0.8rem; font-weight:600; padding:6px 10px; }
#customIndexBackdrop .cs-check{ display:flex; align-items:center; gap:9px; font-size:0.8rem; color:var(--ci-tm); font-weight:500; cursor:pointer; }
#customIndexBackdrop .cs-check input{ accent-color:var(--ci-accent); width:16px; height:16px; }
#customIndexBackdrop .ci-editor-foot.cs-foot{ justify-content:flex-end; }

/* Preset-Picker */
#customIndexBackdrop .cs-presets{ max-width:420px; }
#customIndexBackdrop .cs-preset-sub{ padding:2px 18px 8px; font-size:0.74rem; color:var(--ci-tm); font-weight:500; border-bottom:1px solid var(--ci-border); }
#customIndexBackdrop .cs-preset-list{ padding:6px; max-height:340px; overflow-y:auto; }
#customIndexBackdrop .cs-preset{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; border-radius:8px; padding:9px 10px; cursor:pointer; font-family:inherit; }
#customIndexBackdrop .cs-preset:hover{ background:var(--ci-s2); }
#customIndexBackdrop .cs-preset .plus{ color:var(--ci-accent); font-weight:800; }
#customIndexBackdrop .cs-preset .pp-t{ flex:1; font-size:0.82rem; font-weight:600; color:var(--ci-tp); }
#customIndexBackdrop .cs-preset .pp-c{ color:var(--ci-tm); font-weight:500; }
#customIndexBackdrop .cs-preset .pts{ min-width:34px; text-align:right; }
#customIndexBackdrop .cs-preset-foot{ padding:8px; border-top:1px solid var(--ci-border); }
#customIndexBackdrop .cs-preset-custom{ width:100%; text-align:left; background:none; border:none; color:var(--ci-tm); font-family:inherit; font-size:0.8rem; font-weight:600; padding:8px 10px; border-radius:8px; cursor:pointer; }
#customIndexBackdrop .cs-preset-custom:hover{ color:var(--ci-accent); background:var(--ci-s2); }
#customIndexBackdrop .cs-preset-custom .dim{ color:var(--ci-ts); font-weight:500; }

/* ============================================================================
   UEBERSICHT v2 — Toolbar (Schnellsuche + Filter + Sort) & Filter-Modal
   Quelle: mockup-uebersicht-sort.html + mockup-uebersicht-filter.html
   Hex direkt (dark-only, wie uebrige v2-Views). Toolbar = .ov-*, Modal = scoped
   unter #filterBackdrop, Sort-Panel unter #sortPanel — keine Kollision mit
   globalen Klassen (.btn-primary/.opt/.search liegen woanders).
============================================================================ */

/* ---- TOOLBAR ---- */
.ov-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:4px 0 12px; flex-wrap:wrap;
}
.ov-summary{ font-size:0.84rem; color:#8892a4; font-weight:500; font-variant-numeric:tabular-nums; }
.ov-summary b{ color:#f0f4ff; font-weight:700; }
.ov-summary #resultCount{ color:#8892a4; }
.ov-summary .ov-dot{ margin:0 4px; color:#4e5a72; }
.ov-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.ov-search{ position:relative; }
.ov-search .ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#4e5a72; font-size:0.9rem; pointer-events:none; }
.ov-search input{
  /* B14-S5: border-color/color standen hier als tote Mockup-Werte (0.12/#f0f4ff)
     und verloren immer gegen die dunkle Input-Basis — jetzt die realen Werte */
  width:240px; background:#1a2235; border:1px solid var(--border);
  border-radius:8px; padding:9px 12px 9px 34px; color:#eef3fb; font-size:0.84rem; font-family:inherit;
}
.ov-search input::placeholder{ color:#4e5a72; }
.ov-search input:focus{ outline:none; border-color:rgba(0,223,193,0.20); }

.ov-filter-btn{
  display:inline-flex; align-items:center; gap:8px; background:#1a2235;
  border:1px solid rgba(255,255,255,0.12); color:#8892a4; border-radius:8px;
  padding:9px 14px; font-size:0.84rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.ov-filter-btn:hover{ color:#f0f4ff; }
.ov-filter-btn.has-active{ color:#f0f4ff; border-color:rgba(0,223,193,0.20); }
.ov-filter-btn .cnt{ color:#00dfc1; font-variant-numeric:tabular-nums; }

/* ---- SORT-DROPDOWN ---- */
.ov-sort{ position:relative; }
.ov-sort-btn{
  display:inline-flex; align-items:center; gap:10px; background:#1a2235;
  border:1px solid rgba(0,223,193,0.20); color:#f0f4ff; border-radius:8px;
  padding:9px 13px; font-size:0.84rem; font-weight:600; cursor:pointer; font-family:inherit;
  min-width:250px; justify-content:space-between;
}
.ov-sort-btn .lead{ display:inline-flex; align-items:center; gap:9px; }
.ov-sort-btn .ic{ color:#4e5a72; font-size:0.95rem; }
.ov-sort-btn .cur{ color:#f0f4ff; }
.ov-sort-btn .chev{ color:#00dfc1; font-size:0.8rem; transition:transform .15s; }
.ov-sort.open .ov-sort-btn .chev{ transform:rotate(180deg); }

.ov-sort-panel{
  position:absolute; top:calc(100% + 7px); right:0; min-width:290px;
  background:#111827; border:1px solid rgba(255,255,255,0.12); border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,0.5); padding:6px; z-index:50;
}
.ov-sort-panel[hidden]{ display:none; }
#sortPanel .grp-label{
  font-size:0.64rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:#4e5a72; padding:11px 12px 6px;
}
#sortPanel .grp + .grp .grp-label{ border-top:1px solid rgba(255,255,255,0.07); margin-top:4px; }
#sortPanel .opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; border-radius:7px; font-size:0.85rem; font-weight:500; color:#8892a4; cursor:pointer;
}
#sortPanel .opt:hover{ background:rgba(255,255,255,0.04); color:#f0f4ff; }
#sortPanel .opt .dir{ font-size:0.74rem; color:#4e5a72; font-weight:500; }
#sortPanel .opt.sel{ color:#00dfc1; font-weight:600; }
#sortPanel .opt.sel .dir{ color:rgba(0,223,193,0.6); }
#sortPanel .opt .mark{ width:6px; height:6px; flex-shrink:0; }
#sortPanel .opt.sel .mark{ border-radius:50%; background:#00dfc1; }

/* ---- INFINITE SCROLL (Karten gestaffelt rendern) ---- */
.ov-more{
  grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:22px 0 8px; color:#8892a4; font-size:0.82rem; font-weight:500;
}
.ov-more .spin{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.12); border-top-color:#00dfc1;
  animation:ovspin .7s linear infinite;
}
@keyframes ovspin{ to{ transform:rotate(360deg); } }
.ov-more-btn{
  background:#1a2235; border:1px solid rgba(255,255,255,0.12); color:#8892a4;
  border-radius:8px; padding:9px 18px; font-size:0.82rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.ov-more-btn:hover{ color:#f0f4ff; border-color:rgba(0,223,193,0.20); }
.ov-end{ grid-column:1 / -1; text-align:center; padding:18px 0 4px; color:#4e5a72; font-size:0.76rem; }

/* ============================================================================
   SKELETON-LADEZUSTAND (28.07.2026)
   EIN Namensraum `.skel-*` für zwei Einsatzorte:
     1. #bootSkeleton — Vollflächen-Overlay beim Kaltstart (js/boot-skeleton.js)
     2. In-View-Ladezustand der 7 Renderer, wenn ein Cache noch null ist
        (Früh-Guards, CoreSkeleton.viewHTML)
   Bewusst NICHT .skeleton-card/.empty/.subs2-row/… — das sind Test-Verträge
   (Exakt-Counts + Skip-Guards der Playwright-Suite).
   Optik: monochromer Puls (Deckkraft 1 → .55), kein Gradient, kein Teal
   (Betreiber-Entscheid 28.07.2026). Flächen als lokale Properties, weil die
   Pulse-Views ihre Farbleiter hardcoden (globales :root fährt eine hellere
   Skala + blauen --accent). Kein 100vw/100dvh (body{zoom:var(--app-zoom)}) —
   viewport-anteilig nur als calc(X / var(--app-zoom,1)).
========================================================================== */
.skel-scope{
  --skel-card:#111827;
  --skel-block:#1a2235;
  --skel-line:rgba(255,255,255,0.07);
  --skel-d:0s;                       /* Puls-Versatz, pro Zeile gesetzt */
}

/* ---- Boot-Overlay ---- */
#bootSkeleton{
  /* inset-verankert statt 100vw/100dvh: vw/vh würden von body{zoom}
     mitskaliert (gleiches Muster wie .modal-backdrop). */
  position:fixed; inset:52px 0 0 0; overflow:hidden;
  pointer-events:none;               /* Header-Tabs bleiben bedienbar */
  z-index:5;                         /* unter Header (40) und allen Modals */
  background:#0b0f1a;
  opacity:1; transition:opacity .12s ease;
}
#bootSkeleton.skel-out{ opacity:0; }
#bootSkeleton .skel-page{ max-width:1600px; margin:0 auto; padding:10px 24px 28px; }
#bootSkeleton .skel-page--full{ max-width:none; }        /* Inbox: kein Deckel */
.skel-cap{ max-width:1220px; margin:0 auto; }            /* Deckel der gedeckelten Views */

/* Boot-Phase: datenabhängige Header-Knöpfe dimmen (Score/Filter/★ brauchen
   startups bzw. Filter-Facetten — ein Klick zeigte ein leeres Modal). Die
   Nav-Tabs bleiben BEWUSST bedienbar; handoff() entfernt die Klasse. */
body.core-booting #navScore,
body.core-booting #openFilterBtn,
body.core-booting #navWeeklyTop5{ opacity:.4; pointer-events:none; }

/* ---- Primitive ---- */
.skel-b{
  background:var(--skel-block); border-radius:6px; height:11px;
  animation:skelPulse 1.6s ease-in-out var(--skel-d,0s) infinite;
}
.skel-b--s{ height:8px; border-radius:4px; }             /* Spaltenkopf-Label */
.skel-b--t{ height:19px; border-radius:7px; }            /* Titel */
.skel-b--n{ height:26px; border-radius:7px; }            /* große Zahl */
.skel-ring{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  border:4px solid var(--skel-block);
  animation:skelPulse 1.6s ease-in-out var(--skel-d,0s) infinite;
}
.skel-ring--lg{ width:64px; height:64px; border-width:5px; }
.skel-pill{
  height:26px; border-radius:8px; background:var(--skel-block);
  animation:skelPulse 1.6s ease-in-out var(--skel-d,0s) infinite;
}
.skel-stack{ display:flex; flex-direction:column; gap:7px; min-width:0; flex:1; }
.skel-inline{ display:flex; align-items:center; gap:13px; min-width:0; }
.skel-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
@keyframes skelPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* ---- Kopf / Chips / Spaltenkopf ---- */
.skel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 18px; }
.skel-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 18px; }
.skel-cols{ display:grid; gap:14px; padding:0 16px 8px; align-items:end; }

/* ---- Zeilen-Views (Übersicht-Liste / Submissions / Pipeline) ---- */
.skel-rows{ display:flex; flex-direction:column; gap:10px; }
.skel-row{
  display:grid; gap:14px; align-items:center;
  background:var(--skel-card); border:1px solid var(--skel-line);
  border-radius:12px; padding:13px 16px;
}
.skel-rows > .skel-row:nth-child(2){ --skel-d:.08s; }
.skel-rows > .skel-row:nth-child(3){ --skel-d:.16s; }
.skel-rows > .skel-row:nth-child(4){ --skel-d:.24s; }
.skel-rows > .skel-row:nth-child(5){ --skel-d:.32s; }
.skel-rows > .skel-row:nth-child(6){ --skel-d:.40s; }
.skel-rows > .skel-row:nth-child(7){ --skel-d:.48s; }
.skel-rows > .skel-row:nth-child(8){ --skel-d:.56s; }
.skel-tzone{
  display:grid; grid-template-columns:158px repeat(4, minmax(0,1fr)); gap:14px; align-items:center;
  background:var(--skel-block); border:1px solid var(--skel-line); border-radius:9px; padding:9px 14px;
}
.skel-tzone .skel-b{ background:rgba(255,255,255,0.08); }

/* ---- Übersicht-Karten ---- */
.skel-cards{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
@media (max-width:900px){ .skel-cards{ grid-template-columns:1fr; } }
.skel-card{
  background:var(--skel-card); border:1px solid var(--skel-line); border-radius:14px;
  padding:20px 20px 16px; display:flex; flex-direction:column; gap:14px; min-height:284px;
}
.skel-cards > .skel-card:nth-child(even){ --skel-d:.10s; }
.skel-cards > .skel-card:nth-child(n+3){ --skel-d:.20s; }
.skel-kpis4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:auto; }

/* ---- Dashboard ---- */
.skel-kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:12px; }
@media (max-width:900px){ .skel-kpis{ grid-template-columns:1fr 1fr; } }
.skel-kpi{
  background:var(--skel-card); border:1px solid var(--skel-line); border-radius:12px;
  padding:15px 17px 13px; display:flex; flex-direction:column; gap:8px; min-height:96px;
}
.skel-kpis > .skel-kpi:nth-child(2){ --skel-d:.06s; }
.skel-kpis > .skel-kpi:nth-child(3){ --skel-d:.12s; }
.skel-kpis > .skel-kpi:nth-child(4){ --skel-d:.18s; }
.skel-grid21{ display:grid; grid-template-columns:1.7fr 1fr; gap:12px; margin-bottom:12px; }
.skel-grid11{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
@media (max-width:900px){ .skel-grid21, .skel-grid11{ grid-template-columns:1fr; } }
.skel-panel{
  background:var(--skel-card); border:1px solid var(--skel-line); border-radius:12px;
  padding:16px 18px; display:flex; flex-direction:column; gap:12px;
}
.skel-brow{ display:grid; grid-template-columns:104px 1fr 78px; gap:12px; align-items:center; }
.skel-arow{ display:grid; grid-template-columns:50px 1fr auto; gap:14px; align-items:center; padding:8px 0; border-top:1px solid var(--skel-line); }

/* ---- Activity ---- */
.skel-dayh{ height:9px; width:120px; border-radius:4px; background:var(--skel-block); margin:20px 2px 7px; animation:skelPulse 1.6s ease-in-out infinite; }
.skel-daycard{ background:var(--skel-card); border:1px solid var(--skel-line); border-radius:12px; padding:3px 16px; }
.skel-ev{ display:grid; grid-template-columns:44px 26px 1fr auto; gap:12px; align-items:center; padding:9px 2px; border-bottom:1px solid var(--skel-line); }
.skel-daycard .skel-ev:last-child{ border-bottom:none; }
.skel-daycard .skel-ev:nth-child(2){ --skel-d:.08s; }
.skel-daycard .skel-ev:nth-child(3){ --skel-d:.16s; }
.skel-daycard .skel-ev:nth-child(4){ --skel-d:.24s; }
.skel-daycard .skel-ev:nth-child(5){ --skel-d:.32s; }
.skel-dot{ width:22px; height:22px; border-radius:50%; background:var(--skel-block); animation:skelPulse 1.6s ease-in-out var(--skel-d,0s) infinite; }

/* ---- Inbox (Messenger) ---- */
.skel-msgr{
  display:grid; grid-template-columns:340px 1fr;
  height:calc(100dvh / var(--app-zoom, 1) - 96px); min-height:420px;
}
@media (max-width:900px){ .skel-msgr{ grid-template-columns:1fr; } .skel-msgr > .skel-conv{ display:none; } }
.skel-side{ display:flex; flex-direction:column; gap:12px; padding:14px 16px 0; border-right:1px solid var(--skel-line); min-width:0; }
.skel-otrows{ display:flex; flex-direction:column; }
.skel-otrow{ display:flex; gap:11px; align-items:flex-start; padding:11px 10px; }
.skel-otrows > .skel-otrow:nth-child(2){ --skel-d:.08s; }
.skel-otrows > .skel-otrow:nth-child(3){ --skel-d:.16s; }
.skel-otrows > .skel-otrow:nth-child(4){ --skel-d:.24s; }
.skel-otrows > .skel-otrow:nth-child(5){ --skel-d:.32s; }
.skel-ava{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; background:var(--skel-block); animation:skelPulse 1.6s ease-in-out var(--skel-d,0s) infinite; }
.skel-conv{ display:flex; flex-direction:column; min-width:0; padding:16px 24px; gap:14px; }
.skel-bub{ background:var(--skel-card); border:1px solid var(--skel-line); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; max-width:62%; }
.skel-bub--out{ align-self:flex-end; }

/* ---- Compare ---- */
.skel-vgrid{ display:grid; grid-template-columns:minmax(360px,1.15fr) 1fr; gap:12px; align-items:stretch; }
@media (max-width:900px){ .skel-vgrid{ grid-template-columns:1fr; } }
.skel-podium{ background:var(--skel-card); border:1px solid var(--skel-line); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:14px; min-height:236px; }
.skel-vrest{ display:flex; flex-direction:column; gap:10px; }
.skel-vrow{ background:var(--skel-card); border:1px solid var(--skel-line); border-radius:11px; padding:10px 14px; display:flex; align-items:center; gap:12px; }
.skel-mx{ margin-top:16px; border:1px solid var(--skel-line); border-radius:12px; background:var(--skel-card); overflow:hidden; }
.skel-mxrow{ display:grid; grid-template-columns:var(--skel-cols); }
.skel-mxrow > *{ padding:11px 14px; border-bottom:1px solid var(--skel-line); }
.skel-mx .skel-mxrow:last-child > *{ border-bottom:none; }
.skel-mx .skel-mxrow:nth-child(3){ --skel-d:.08s; }
.skel-mx .skel-mxrow:nth-child(4){ --skel-d:.16s; }
.skel-mx .skel-mxrow:nth-child(5){ --skel-d:.24s; }
.skel-mx .skel-mxrow:nth-child(6){ --skel-d:.32s; }

/* ---- Watchdog-Karte (15 s ohne Handoff — js/boot-skeleton.js) ---- */
.skel-stall{
  max-width:460px; margin:40px auto; padding:30px 28px; text-align:center;
  background:#111827; border:1px solid rgba(255,255,255,0.07); border-radius:16px;
}
.skel-stall-t{ font-size:14px; font-weight:700; color:#f0f4ff; }
.skel-stall-m{ font-size:12.5px; color:#8892a4; margin-top:8px; line-height:1.5; }
.skel-stall-btn{
  margin-top:18px; font:inherit; font-size:12.5px; font-weight:600;
  background:#1a2235; border:1px solid rgba(255,255,255,0.12); color:#f0f4ff;
  border-radius:8px; padding:9px 18px; cursor:pointer;
}
.skel-stall-btn:hover{ border-color:rgba(0,223,193,0.20); }

/* Reduced Motion: steht bewusst NACH allen Skeleton-Animations-Regeln —
   gewinnt per Kaskade ohne !important (Konvention wie beim Übersicht-Block).
   Der Ladezustand bleibt ohne Bewegung erkennbar: Geometrie + aria-busy
   tragen die Information, nie die Animation allein. */
@media (prefers-reduced-motion: reduce){
  #bootSkeleton{ transition:none; }
  .skel-b, .skel-ring, .skel-pill, .skel-ava, .skel-dot, .skel-dayh{ animation:none; opacity:.78; }
}

/* ============================================================================
   ÜBERSICHT — PULSE-REDESIGN (Juli 2026, Betreiber-Entscheid 16.07.2026)
   Referenz: mockup-uebersicht-pulse-final.html (Repo-Root).
   Karten = „Pulse Original" (IMMER exakt 2 nebeneinander), Liste = „Pulse Split"
   (Identität | eingelassene Traction-Bühne | Aktionen). Selbst-enthaltend
   (explizite v2-Hex), Pagination/Lazy-Load unverändert (_OV_PAGE-Windowing,
   .ov-more/.ov-end).
============================================================================ */

/* Mockup-Maßstab: Karten ~560–580 px bei 1220 px Inhaltsbreite. Der App-
   Container ist 1600 px — die Übersicht (Toolbar, Chips, Grid) wird deshalb
   auf die Mockup-Breite gedeckelt und zentriert. */
.ov-toolbar, .activechips{ max-width:1220px; margin-left:auto; margin-right:auto; }
#cardGrid{ max-width:1220px; margin-left:auto; margin-right:auto; }

/* Grid-Modi */
/* VERBINDLICH exakt 2 Karten nebeneinander (nie 3, kein auto-fill);
   einspaltig nur als Responsive-Fallback unter ~900 px Viewport. */
#cardGrid.ovx-cards{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; }
@media (max-width:900px){ #cardGrid.ovx-cards{ grid-template-columns:1fr; } }
#cardGrid.ovx-list{ display:flex; flex-direction:column; gap:10px; }
/* Übersicht-Leerzustände (Filter ohne Treffer / alles zugeordnet) — gleicher
   Look wie .onb-empty-card; das Weekly-Overlay hat eigene .empty-state-Styles. */
#cardGrid .empty-state{
  grid-column:1 / -1;
  max-width: 460px; margin: 36px auto; padding: 34px 30px;
  background: #111827; border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; text-align: center;
}
#cardGrid .empty-state__icon{
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 13px;
  background: #1a2235; border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center; font-size: 24px; color: #8892a4;
}
#cardGrid .empty-state__title{ font-size: 16px; font-weight: 800; color: #f0f4ff; letter-spacing: -0.01em; margin: 0; }
#cardGrid .empty-state__sub{ font-size: 13px; line-height: 1.5; color: #8892a4; margin: 7px auto 0; max-width: 340px; }
#cardGrid .empty-state__cta{
  margin-top: 20px; background: #1a2235; color: #cfd7e3;
  border: 1px solid rgba(255,255,255,0.09); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 9px 18px;
  border-radius: 8px; transition: background 0.15s;
}
#cardGrid .empty-state__cta:hover{ background: #212b44; }

/* Score-Ring in der Übersicht: v2-semantisch grün/gelb/rot (nicht teal) + Basis
   ohne .startup-card-Scope. Der Ring ist seit Pulse selbst der Score-Breakdown-
   Trigger (button[data-action="scoreinfo"] — Test-Vertrag); die -90°-Drehung
   sitzt als transform-Attribut am Fortschritts-Circle (Draw-Animation braucht
   das unrotierte SVG-Koordinatensystem nicht mehr im CSS). */
#cardGrid{ --score-ring-high:#46cd92; --score-ring-medium:#d6a93f; --score-ring-low:#e8696c; --score-ring-bg:#222d42; }
/* Seit dem Pipeline-Pulse-Redesign (17.07.2026) nutzt auch #viewPipeline den
   Ring, seit dem Compare-Podium (17.07.2026) auch #viewCompare —
   Selektorlisten erweitert statt Regeln dupliziert (EINE Quelle). */
#cardGrid .score-wrap, #viewPipeline .score-wrap, #viewCompare .score-wrap, #viewSubmissions .score-wrap{ flex-shrink:0; }
#cardGrid .score-ring, #viewPipeline .score-ring, #viewCompare .score-ring, #viewSubmissions .score-ring{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:0; background:none; border:none; border-radius:50%; cursor:pointer; font-family:inherit;
}
#cardGrid .score-ring svg, #viewPipeline .score-ring svg, #viewCompare .score-ring svg, #viewSubmissions .score-ring svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#cardGrid .score-ring:focus-visible, #viewPipeline .score-ring:focus-visible, #viewCompare .score-ring:focus-visible, #viewSubmissions .score-ring:focus-visible{ outline:2px solid #00dfc1; outline-offset:2px; }
#cardGrid .ring-prog, #viewPipeline .ring-prog, #viewCompare .ring-prog, #viewSubmissions .ring-prog{ animation:ovxRingDraw 1s cubic-bezier(.22,.8,.3,1) both; }
@keyframes ovxRingDraw{ from{ stroke-dashoffset:var(--circ); } }
#cardGrid .ring-n, #viewPipeline .ring-n, #viewCompare .ring-n, #viewSubmissions .ring-n{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; pointer-events:none; }
#cardGrid .ring-n .score-num, #viewPipeline .ring-n .score-num, #viewCompare .ring-n .score-num, #viewSubmissions .ring-n .score-num{ font-weight:800; }
#cardGrid .ring-sub{ font-size:8px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#4e5a72; margin-top:2px; }

/* Umschalter Liste/Karten in der Toolbar */
.ov-viewmode{ display:inline-flex; background:#111827; border:1px solid rgba(255,255,255,0.07); border-radius:9px; padding:3px; gap:2px; }
.ovm-btn{ background:transparent; border:none; color:#8892a4; font-family:inherit; font-size:0.78rem; font-weight:600; padding:7px 12px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.ovm-btn .ic{ font-size:0.92em; }
.ovm-btn.on{ background:#222d42; color:#f0f4ff; box-shadow:0 1px 2px rgba(0,0,0,.3); }

/* Gemeinsame Bausteine */
.ovx-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ovx-dot.preseed{ background:#e0935a; }
.ovx-dot.seed, .ovx-dot.prea{ background:#a78bfa; }
.ovx-dot.seriesa, .ovx-dot.seriesb{ background:#00dfc1; }
.ovx-id{ font-size:11px; font-weight:500; color:#4e5a72; flex-shrink:0; font-variant-numeric:tabular-nums; }
.ovx-notes{ font-size:10px; font-weight:600; color:#8892a4; flex-shrink:0; }
/* Pills (Mockup): rund (99px), „Neu" teal mit Puls-Ring, „Angefragt" blau. */
.ovx-pill{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2.5px 9px; border-radius:99px; white-space:nowrap; flex-shrink:0; }
.ovx-pill.req{ color:#5a8dd6; background:rgba(90,141,214,0.12); border:1px solid rgba(90,141,214,0.25); }
/* Firmenregister-Pille (Stufe 1, 12.08.2026). Erscheint NUR bei den drei
   entscheidungsrelevanten Befunden (registerSignal().loud) — verified/skipped/
   none/failed und Altzeilen ohne Prüfung rendern gar nichts. Farben aus dem
   Plausibilitäts-Vokabular: rot = Hard-Fail (Insolvenz), gelb = auffällig.
   Bewusst KEIN Puls — der bleibt allein der „Neu"-Pille. Global statt
   view-scoped: dieselbe Pille steht in Übersicht, Triage und Pipeline. */
.reg-pill.bad { color:#e8696c; background:rgba(232,105,108,0.12); border:1px solid rgba(232,105,108,0.28); }
.reg-pill.warn{ color:#d6a93f; background:rgba(214,169,63,0.12);  border:1px solid rgba(214,169,63,0.28); }
.ovx-new{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#00dfc1; background:rgba(0,223,193,0.10); border:1px solid rgba(0,223,193,0.20); border-radius:99px; padding:2.5px 9px; flex-shrink:0; }
.ovx-new.pulse{ position:relative; }
.ovx-new.pulse::after{
  content:""; position:absolute; inset:-4px; border-radius:99px;
  border:1px solid rgba(0,223,193,0.20); animation:ovxPulse 2.2s ease-out infinite;
}
@keyframes ovxPulse{ 0%{ opacity:.9; transform:scale(.7); } 70%{ opacity:0; transform:scale(1.6); } 100%{ opacity:0; } }
.ovx-btn{ font-family:inherit; font-size:12.5px; font-weight:600; border-radius:9px; padding:8px 14px; cursor:pointer; background:transparent; color:#8892a4; border:1px solid rgba(255,255,255,0.12); transition:all .15s; white-space:nowrap; }
.ovx-btn:hover{ color:#f0f4ff; background:#1a2235; }
.ovx-btn.primary{ background:#00dfc1; border-color:transparent; color:#04231e; font-weight:700; }
.ovx-btn.primary:hover{ filter:brightness(1.08); background:#00dfc1; color:#04231e; }
.ovx-btn:focus-visible{ outline:2px solid #00dfc1; outline-offset:2px; }
.ovx-btn:disabled{ opacity:.45; cursor:default; }

/* Sparkline-Bausteine (Karte + Listen-Bühne) — Farbe folgt dem Vorzeichen des
   Wachstums: steigend grün, ~0/nicht ableitbar grau, fallend rot. */
.osp-line{ stroke-width:1.8; }
.osp-line.t-up{ stroke:#46cd92; } .osp-line.t-flat{ stroke:#8892a4; } .osp-line.t-down{ stroke:#e8696c; }
.osp-dot.t-up{ fill:#46cd92; } .osp-dot.t-flat{ fill:#8892a4; } .osp-dot.t-down{ fill:#e8696c; }
.osp-empty{ stroke:#222d42; stroke-width:2; }
.osp-delta{ font-size:12.5px; font-weight:700; flex:none; font-variant-numeric:tabular-nums; }
.osp-delta.pos{ color:#46cd92; } .osp-delta.neg{ color:#e8696c; } .osp-delta.flat{ color:#8892a4; }

@keyframes ovxIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---- KARTE „Pulse Original" (Ring 64 + Spark-Bühne + 4 KPI-Tiles) ---- */
.ovx-card{
  background:#111827; border:1px solid rgba(255,255,255,0.07); border-radius:14px;
  padding:20px 20px 16px; display:flex; flex-direction:column; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation:ovxIn .4s ease both;
}
.ovx-card:hover{
  transform:translateY(-3px); border-color:rgba(0,223,193,0.20);
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,223,193,0.20), 0 12px 40px rgba(0,223,193,0.06);
}
.ovx-card:focus-visible{ outline:2px solid #00dfc1; outline-offset:2px; }
.ovx-card-top{ display:flex; gap:16px; align-items:flex-start; }
.ovx-card .score-wrap{ align-self:flex-start; }
.ovx-card-body{ flex:1; min-width:0; }
.ovx-l1{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ovx-name{ font-size:16.5px; font-weight:700; color:#f0f4ff; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.ovx-meta{ font-size:12.5px; color:#8892a4; font-weight:500; margin-top:3px; }
.ovx-meta .sec{ color:#4e5a72; }
.ovx-meta .ts{ color:#4e5a72; }
.ovx-desc{ font-size:13px; color:#8892a4; line-height:1.5; margin:9px 0 0; max-width:58ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ovx-spark{
  margin-top:14px; background:#1a2235; border:1px solid rgba(255,255,255,0.07);
  border-radius:10px; padding:10px 14px 8px; display:flex; align-items:center; gap:14px;
}
.osp-lab{ font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8892a4; flex:none; }
.osp-lab b{ display:block; font-size:15px; font-weight:700; color:#f0f4ff; letter-spacing:0; text-transform:none; margin-top:1px; font-variant-numeric:tabular-nums; }
.ovx-spark .osp-svg{ flex:1; min-width:0; height:34px; }
.ovx-kpis{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:12px; }
.ovx-kpi{ background:#1a2235; border:1px solid rgba(255,255,255,0.07); border-radius:9px; padding:8px 10px; min-width:0; }
.ovx-kpi .l{ display:block; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8892a4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ovx-kpi .v{ display:block; font-size:14.5px; font-weight:700; color:#f0f4ff; margin-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ovx-kpi .v.pos{ color:#46cd92; }
.ovx-kpi .v.neg{ color:#e8696c; }
.ovx-kpi .v.warn{ color:#d6a93f; }
.ovx-act{ display:flex; gap:8px; justify-content:flex-start; margin-top:14px; }

/* ---- LISTE „Pulse Split" (freie Zeilen: Identität | Traction-Bühne | Aktionen) ----
   Aktionen-Spalte 228px: die drei Buttons brauchen real bis ~221px („✓ In
   Pipeline"-Zustand) — die Mockup-178px ließen sie bei flex-end nach links in
   die Traction-Bühne überlaufen (Betreiber-Befund 17.07.2026). Kopf und Zeile
   MÜSSEN identische Tracks behalten (separate Grids, bündige Spalten). */
.ovl-head{ display:grid; grid-template-columns:minmax(300px,1fr) 560px 228px; gap:16px; align-items:end; padding:0 18px 8px; }
.ovl-head .c{ font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#4e5a72; }
.ovl-head .c.sortby{ color:#00dfc1; }
.ovl-tcols{ display:grid; grid-template-columns:158px repeat(4, minmax(0,1fr)); gap:14px; padding:0 14px; }
.ovl-tcols .c{ text-align:right; }
.ovl-tcols .c:first-child{ text-align:left; }
.ovl-head .c.actc{ text-align:right; }

.ovx-row{
  /* row-gap:0 — das Inline-Breakdown liegt als zweite (implizite) Grid-Zeile
     unter dem Inhalt; ein row-gap würde die GESCHLOSSENE Zeile um 16px aufblähen.
     Der Abstand beim Aufklappen kommt aus .ovr-break-inner (margin/border-top). */
  display:grid; grid-template-columns:minmax(300px,1fr) 560px 228px; column-gap:16px; row-gap:0; align-items:center;
  background:#111827; border:1px solid rgba(255,255,255,0.07); border-radius:12px;
  padding:13px 18px; cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  animation:ovxIn .4s ease both;
}
.ovx-row:hover{
  transform:translateY(-2px); border-color:rgba(0,223,193,0.20);
  box-shadow:0 0 0 1px rgba(0,223,193,0.20), 0 10px 30px rgba(0,223,193,0.05);
}
.ovx-row:focus-visible{ outline:2px solid #00dfc1; outline-offset:2px; }
.ovr-ident{ display:flex; align-items:center; gap:13px; min-width:0; }
.ovr-who{ min-width:0; }
.ovx-row .ovx-l1{ gap:8px; flex-wrap:nowrap; }
.ovx-row .ovx-name{ font-size:14.5px; }
.ovx-row .ovx-id{ font-size:10.5px; }
.ovx-row .ovx-meta{ font-size:11.5px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ovr-why{ font-size:11.5px; color:#4e5a72; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Zeilen-Maßstab: gilt für die Übersichtszeile und — damit die Register-Pille in
   allen Zeilentypen gleich groß ist — auch für Triage, Pipeline und die zwei
   Weekly-Top5-Orte (.stage-line/.cmp-stage: dort ist v. a. die Vergleichskarte
   ~250px schmal — die volle Pille drängte die Stage-Zeile zum Überlaufen). */
.ovx-row .ovx-new, .ovx-row .ovx-pill,
.subs2-l1 .ovx-pill, .pipe3-l1 .ovx-pill,
.stage-line .ovx-pill, .cmp-stage .ovx-pill{ font-size:9.5px; padding:2px 8px; }
.ovr-tzone-scroll{ min-width:0; }
.ovr-tzone{
  display:grid; grid-template-columns:158px repeat(4, minmax(0,1fr)); gap:14px; align-items:center;
  background:#1a2235; border:1px solid rgba(255,255,255,0.07); border-radius:9px; padding:9px 14px;
}
.ovr-tspark{ display:flex; align-items:center; gap:9px; min-width:0; }
.ovr-tspark .osp-svg{ flex:1; min-width:0; height:30px; }
.ovr-tspark .osp-line{ stroke-width:1.7; }
.ovr-tspark .osp-delta{ font-size:11.5px; }
.ovr-tk{ text-align:right; min-width:0; }
.ovr-tk .l{ font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#4e5a72; display:block; }
.ovr-tk .v{ font-size:13px; font-weight:700; color:#f0f4ff; margin-top:1px; display:block; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ovr-tk .v.pos{ color:#46cd92; }
.ovr-tk .v.neg{ color:#e8696c; }
.ovr-tk .v.warn{ color:#d6a93f; }
.ovr-act{ display:flex; gap:7px; justify-content:flex-end; }
.ovx-row .ovx-btn{ font-size:12px; padding:7px 11px; border-radius:8px; }

/* Chevron-Indikator in der Identitätsspalte (rechtsbündig) — signalisiert die
   Aufklappbarkeit, rotiert im offenen Zustand. */
.ovr-chev{ margin-left:auto; align-self:center; flex:none; color:#4e5a72; font-size:12px; line-height:1; transition:transform .2s ease, color .2s ease; }
.ovx-row:hover .ovr-chev{ color:#8892a4; }
.ovx-row.expanded .ovr-chev{ transform:rotate(180deg); color:#00dfc1; }
.ovx-row.expanded{ border-color:rgba(0,223,193,0.20); }

/* Inline-Score-Breakdown (Liste, Betreiber-Entscheid 17.07.2026): Klick auf die
   Zeile klappt die Punkte auf. Das Panel überspannt beide sichtbaren Grid-Tracks
   (grid-column 1/-1, neue implizite Zeile) und wächst per max-height-Transition;
   JS setzt max-height auf scrollHeight (exakte Höhe). Inhalt = Score-Komposition
   nach Bereichen (buildInlineScoreBreakdownHTML, signal-index.js). */
.ovr-break{ grid-column:1 / -1; align-self:stretch; max-height:0; overflow:hidden; transition:max-height .28s ease; }
.ovr-break-inner{ margin-top:13px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.07); }
.ovr-break-note{ font-size:12.5px; color:#8892a4; padding:6px 0; }

/* ---- Inline-Score-Komposition (Design „Variante A", 17.07.2026) ---- */
.ovr-brk-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:13px; }
.ovr-brk-head .q{ font-size:13px; font-weight:750; color:#f0f4ff; }
.ovr-brk-head .q b{ color:#46cd92; font-weight:800; }
.ovr-brk-head .rs{ margin-left:auto; font-size:11px; font-weight:600; color:#4e5a72; letter-spacing:.02em; white-space:nowrap; }
.ovr-brk-head .rs .tag{ color:#8892a4; }

.ovr-brk-grp{ background:#1a2235; border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:11px 14px; margin-bottom:8px; }
.ovr-brk-grp:last-of-type{ margin-bottom:0; }
.ovr-brk-gtop{ display:flex; align-items:center; gap:12px; }
.ovr-brk-gname{ font-size:12.5px; font-weight:700; color:#f0f4ff; flex:none; min-width:150px; }
.ovr-brk-bar{ flex:1; height:6px; border-radius:99px; background:#222d42; overflow:hidden; position:relative; min-width:40px; }
.ovr-brk-bar i{ position:absolute; inset:0 auto 0 0; height:100%; border-radius:99px; display:block; }
.ovr-brk-bar i.g{ background:linear-gradient(90deg,rgba(70,205,146,.7),#46cd92); }
.ovr-brk-bar i.cap{ background:linear-gradient(90deg,rgba(70,205,146,.55),#46cd92); }
.ovr-brk-bar i.neg{ background:#e8696c; }
.ovr-brk-sum{ flex:none; display:flex; align-items:baseline; gap:5px; min-width:104px; justify-content:flex-end; }
.ovr-brk-sum .pts{ font-size:15px; font-weight:800; color:#46cd92; }
.ovr-brk-sum .pts.neg{ color:#e8696c; }
.ovr-brk-sum .cap{ font-size:10.5px; font-weight:600; color:#4e5a72; white-space:nowrap; }
.ovr-brk-capnote{ color:#e8696c; font-weight:600; }
.ovr-brk-rules{ font-size:11px; color:#8892a4; margin-top:8px; line-height:1.7; }
.ovr-brk-rules .r{ white-space:nowrap; }
.ovr-brk-rules .r b{ color:#46cd92; font-weight:700; }
.ovr-brk-rules .r.neg b{ color:#e8696c; }
.ovr-brk-rules .sep{ color:#4e5a72; margin:0 5px; }

.ovr-brk-grp.plaus{ display:flex; align-items:center; gap:12px; background:transparent; border:1px dashed rgba(255,255,255,0.12); }
.ovr-brk-grp.plaus .ico{ color:#46cd92; font-weight:800; font-size:13px; flex:none; }
.ovr-brk-grp.plaus.warn .ico{ color:#d6a93f; }
.ovr-brk-grp.plaus .txt{ font-size:12px; color:#8892a4; }
.ovr-brk-grp.plaus .txt b{ color:#f0f4ff; font-weight:600; }
.ovr-brk-grp.plaus .txt b.ovr-brk-plauspts{ color:#e8696c; font-variant-numeric:tabular-nums; }

.ovr-brk-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px; font-size:10.5px; color:#4e5a72; }
.ovr-brk-foot .m{ display:flex; align-items:center; gap:5px; }
.ovr-brk-foot .m b{ color:#8892a4; font-weight:700; }
.ovr-brk-foot .m b.res{ color:#46cd92; }
.ovr-brk-foot .m b.neg{ color:#e8696c; }
.ovr-brk-foot .dot{ color:rgba(255,255,255,0.12); }
.ovr-brk-head .num, .ovr-brk-sum .num, .ovr-brk-rules .num, .ovr-brk-foot .num{ font-variant-numeric:tabular-nums; }

@media (max-width:1120px){
  .ovr-brk-gtop{ flex-wrap:wrap; }
  .ovr-brk-gname{ min-width:0; }
  .ovr-brk-bar{ order:3; flex-basis:100%; margin-top:6px; }
}

/* Responsive: unter ~1120 px Viewport bricht die Zeile — Traction-Bühne wandert
   unter die Identität und scrollt horizontal im EIGENEN Container (die Seite
   scrollt nie horizontal). */
@media (max-width:1120px){
  .ovl-head{ display:none; }
  .ovx-row{ grid-template-columns:1fr; gap:11px; }
  .ovr-tzone-scroll{ overflow-x:auto; }
  .ovr-tzone{ min-width:540px; }
  .ovr-act{ justify-content:flex-start; }
}

/* Reduced Motion: deaktiviert Einflug, Ring-Draw, Puls-Ring und Hover-Transforms
   der Übersicht (steht bewusst NACH allen Animations-Regeln — gewinnt per
   Kaskade ohne !important). */
@media (prefers-reduced-motion: reduce){
  .ovx-card, .ovx-row, #cardGrid .ring-prog, #viewPipeline .ring-prog, #viewCompare .ring-prog, #viewSubmissions .ring-prog, .ovx-new.pulse::after{ animation:none; }
  .ovx-card, .ovx-card:hover, .ovx-row, .ovx-row:hover{ transform:none; transition:none; }
  .ovx-btn, .ovr-break, .ovr-chev{ transition:none; }
  /* Chevron-Rotation als Zustand (nicht animiert) bleibt erhalten. */
}

/* ============================================================================
   FILTER-MODAL v2 (scoped #filterBackdrop)
============================================================================ */
#filterBackdrop{
  align-items:flex-start; justify-content:center; overflow-y:auto;
  padding:36px 20px 64px; background:rgba(4,7,13,0.55);
}
#filterBackdrop .filter-modal{
  width:100%; max-width:740px; margin:0 auto;
  background:#111827; border:1px solid rgba(255,255,255,0.07); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,0.45); overflow:hidden;
  display:block; resize:none; max-height:none; min-width:0; min-height:0;
}

#filterBackdrop .p-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:18px 24px; border-bottom:1px solid rgba(255,255,255,0.07);
}
#filterBackdrop .p-head h2{ font-size:1.12rem; font-weight:700; letter-spacing:-0.01em; margin:0; color:#f0f4ff; }
#filterBackdrop .p-head .sub{ font-size:0.77rem; color:#8892a4; font-weight:500; margin-top:3px; }
#filterBackdrop .count{ text-align:right; line-height:1; white-space:nowrap; margin-left:auto; }
#filterBackdrop .count .n{ font-size:1.5rem; font-weight:700; color:#00dfc1; font-variant-numeric:tabular-nums; }
#filterBackdrop .count .of{ font-size:0.73rem; color:#8892a4; font-weight:500; margin-top:4px; }
#filterBackdrop .count .of b{ color:#f0f4ff; font-weight:600; }
#filterBackdrop .filter-x{
  background:transparent; border:1px solid rgba(255,255,255,0.12); color:#8892a4;
  width:28px; height:28px; border-radius:7px; font-size:0.8rem; cursor:pointer; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; font-family:inherit;
}
#filterBackdrop .filter-x:hover{ color:#f0f4ff; border-color:rgba(255,255,255,0.22); }

#filterBackdrop .p-body{ padding:0 24px 6px; }

#filterBackdrop .search{ position:relative; margin:18px 0 4px; }
#filterBackdrop .search .ico{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#4e5a72; font-size:0.95rem; pointer-events:none; }
#filterBackdrop .search input{
  width:100%; background:#1a2235; border:1px solid rgba(255,255,255,0.12); border-radius:10px;
  padding:11px 14px 11px 38px; color:#f0f4ff; font-size:0.9rem; font-family:inherit;
}
#filterBackdrop .search input::placeholder{ color:#4e5a72; }
#filterBackdrop .search input:focus{ outline:none; border-color:rgba(0,223,193,0.20); }
#filterBackdrop .search-hint{ font-size:0.71rem; color:#4e5a72; margin:7px 2px 0; }

#filterBackdrop .block{ padding:17px 0; border-top:1px solid rgba(255,255,255,0.07); }
#filterBackdrop .fl{ display:flex; align-items:baseline; gap:8px; font-size:0.8rem; color:#f0f4ff; font-weight:600; margin-bottom:11px; }
#filterBackdrop .fl .ctx{ font-size:0.71rem; color:#4e5a72; font-weight:500; }

#filterBackdrop .checks{ display:flex; flex-wrap:wrap; gap:9px 20px; }
#filterBackdrop .chk{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:0.82rem; color:#8892a4; font-weight:500; }
#filterBackdrop .chk input{ display:none; }
#filterBackdrop .chk .bx{
  width:16px; height:16px; border:1.5px solid rgba(255,255,255,0.12); border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center; font-size:0.72rem; line-height:1;
  color:transparent; flex-shrink:0; transition:border-color .12s, color .12s;
}
#filterBackdrop .chk:hover .bx{ border-color:#8892a4; }
#filterBackdrop .chk input:checked + .bx{ border-color:#00dfc1; color:#00dfc1; }
#filterBackdrop .chk input:checked ~ .lbl{ color:#f0f4ff; font-weight:600; }

#filterBackdrop .subgroup{ margin-top:14px; padding-top:14px; border-top:1px dashed rgba(255,255,255,0.06); }

#filterBackdrop .fl2{ font-size:0.8rem; color:#8892a4; font-weight:600; margin-bottom:8px; display:block; }
/* Erläuternder Satz unter einer Filter-Gruppe (leiser als .fl2, kein Label). */
#filterBackdrop .fnote{ margin-top:12px; font-size:0.74rem; line-height:1.45; color:#6b7689; }
#filterBackdrop .sel{
  width:100%; background:#1a2235; border:1px solid rgba(255,255,255,0.12); border-radius:8px;
  padding:8px 11px; color:#f0f4ff; font-size:0.82rem; font-weight:600; font-family:inherit; cursor:pointer;
}
#filterBackdrop .sel:focus{ outline:none; border-color:rgba(0,223,193,0.20); }
#filterBackdrop .fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:15px 20px; }
#filterBackdrop .fgrid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:15px 18px; }
#filterBackdrop .range-inputs{ display:flex; align-items:center; gap:8px; }
#filterBackdrop .fin{ position:relative; flex:1; }
#filterBackdrop .fin input{
  width:100%; background:#1a2235; border:1px solid rgba(255,255,255,0.12); border-radius:8px;
  padding:8px 34px 8px 11px; color:#f0f4ff; font-family:inherit; font-size:0.82rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}
#filterBackdrop .fin input::placeholder{ color:#4e5a72; font-weight:500; }
#filterBackdrop .fin input:focus{ outline:none; border-color:rgba(0,223,193,0.20); }
#filterBackdrop .fin .u{ position:absolute; right:11px; top:50%; transform:translateY(-50%); color:#4e5a72; font-size:0.73rem; font-weight:600; pointer-events:none; }
#filterBackdrop .sep{ color:#4e5a72; font-size:0.8rem; font-weight:600; }

#filterBackdrop details.sec{ border-top:1px solid rgba(255,255,255,0.07); }
#filterBackdrop details.sec > summary{ list-style:none; display:flex; align-items:center; gap:12px; padding:15px 0; cursor:pointer; }
#filterBackdrop details.sec > summary::-webkit-details-marker{ display:none; }
#filterBackdrop .sec-title{ font-size:0.82rem; font-weight:700; color:#f0f4ff; }
#filterBackdrop .sec-meta{ margin-left:auto; font-size:0.73rem; color:#8892a4; font-weight:500; }
#filterBackdrop .sec-chev{ color:#4e5a72; font-size:0.75rem; transition:transform .15s; }
#filterBackdrop details.sec[open] .sec-chev{ transform:rotate(180deg); }
#filterBackdrop .sec-inner{ padding:0 0 18px; }

#filterBackdrop .p-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 24px; border-top:1px solid rgba(255,255,255,0.07); background:#111827;
}
#filterBackdrop .foot-l{ font-size:0.74rem; color:#8892a4; font-weight:500; }
#filterBackdrop .foot-l b{ color:#f0f4ff; font-weight:700; }
#filterBackdrop .foot-actions{ display:flex; gap:8px; }
#filterBackdrop .btn-ghost{
  background:transparent; border:1px solid rgba(255,255,255,0.12); color:#8892a4;
  font-size:0.8rem; font-weight:600; padding:9px 16px; border-radius:8px; cursor:pointer; font-family:inherit;
}
#filterBackdrop .btn-ghost:hover{ color:#f0f4ff; }
/* Teal aktiv seit 17.07.2026 (Entscheid Andreas — Design-Nachschärfung nach B14) */
#filterBackdrop .btn-primary{
  background:#00dfc1; border:1px solid #00dfc1; color:#04231e;
  font-size:0.8rem; font-weight:700; padding:9px 18px; border-radius:8px; cursor:pointer; font-family:inherit;
}
#filterBackdrop .btn-primary .pc{ font-variant-numeric:tabular-nums; }

@media (max-width:680px){
  #filterBackdrop .fgrid, #filterBackdrop .fgrid3{ grid-template-columns:1fr; }
  .ov-search input{ width:170px; }
  .ov-sort-btn{ min-width:0; }
}

/* ───────────────────────── Team verwalten (Admin-Modal) ───────────────────────── */
.team-backdrop[hidden]{ display:none; }
.team-backdrop{
  position:fixed; inset:0; z-index:9000;
  background:rgba(3,7,18,.66);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.team-modal{
  width:100%; max-width:540px;
  /* vh wird von body{zoom} mitskaliert -> kompensieren (siehe Tech-Debt) */
  max-height:calc(86vh / var(--app-zoom, 1));
  overflow-y:auto;
  background:var(--surface-raised);
  border:1px solid var(--border-default);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  font-family:var(--font-ui);
}
.team-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border-default);
  position:sticky; top:0; background:var(--surface-raised); z-index:1;
}
.team-modal-head h2{ margin:0; font-size:var(--text-xl); font-weight:700; color:var(--text-primary); }
.team-modal-close{
  background:transparent; border:none; color:var(--text-secondary);
  font-size:24px; line-height:1; cursor:pointer; padding:0 4px;
}
.team-modal-close:hover{ color:var(--text-primary); }
.team-section{ padding:18px 24px; border-bottom:1px solid var(--border-default); }
.team-section:last-child{ border-bottom:none; }
.team-section h3{
  margin:0 0 10px; font-size:var(--text-sm); font-weight:700; color:var(--text-primary);
  text-transform:uppercase; letter-spacing:.04em;
}
.team-hint{ margin:0 0 12px; font-size:var(--text-sm); color:var(--text-secondary); line-height:1.5; }
.team-invite-form{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:center; }
.team-invite-form input, .team-invite-form select{
  padding:9px 12px; border-radius:8px; border:1px solid var(--border-default);
  /* B14-S5: das background galt nur für die Selects (eigene Regel unten) — bei den Inputs gewann schon immer die dunkle Input-Basis (#1a2235) */
  color:var(--text-primary);
  font-size:var(--text-sm); font-family:var(--font-ui); outline:none;
  transition:border-color var(--duration-base);
}
.team-invite-form select{ background:var(--surface-overlay); }
.team-invite-form input:focus, .team-invite-form select:focus{ border-color:var(--accent); box-shadow:var(--focus); }
.team-invite-btn{
  padding:9px 16px; background:var(--accent); color:#fff; border:none; border-radius:8px;
  font-size:var(--text-sm); font-weight:600; font-family:var(--font-ui); cursor:pointer;
  transition:opacity var(--duration-fast);
}
.team-invite-btn:hover:not(:disabled){ opacity:.88; }
.team-invite-btn:disabled{ opacity:.5; cursor:not-allowed; }
.team-msg{ display:none; margin-top:12px; padding:10px 12px; border-radius:8px; font-size:var(--text-sm); line-height:1.5; }
.team-msg.success{ background:var(--goodBg); border:1px solid var(--goodBorder); color:var(--goodText); }
.team-msg.error{ background:var(--dangerBg); border:1px solid var(--dangerBorder); color:var(--dangerText); }
.team-list{ display:flex; flex-direction:column; gap:6px; }
.team-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--border-default); border-radius:8px; background:var(--surface-overlay);
}
.team-row-name{ font-size:var(--text-sm); font-weight:600; color:var(--text-primary); flex:1; word-break:break-all; }
.team-row-meta{ font-size:var(--text-xs); color:var(--text-secondary); white-space:nowrap; }
.team-revoke{
  background:transparent; border:1px solid var(--border-default); color:var(--text-secondary);
  padding:5px 10px; border-radius:6px; font-size:var(--text-xs); cursor:pointer; font-family:var(--font-ui);
}
.team-revoke:hover{ border-color:var(--dangerBorder); color:var(--dangerText); }
.team-empty{ font-size:var(--text-sm); color:var(--text-tertiary); padding:8px 2px; }
.userBadge--admin:hover{ filter:brightness(1.15); }
.team-invite-btn{ grid-column:1 / -1; }
.team-role-sel{
  padding:6px 8px; border-radius:6px; border:1px solid var(--border-default);
  /* B14-S5: tote background-Deklaration entfernt — die dunkle Select-Basis (#1a2235) gewann schon immer */
  color:var(--text-primary);
  font-size:var(--text-xs); font-family:var(--font-ui); outline:none; max-width:180px;
}
.team-role-sel:focus{ border-color:var(--accent); }
.team-you{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px;
  background:var(--accent); color:#fff; font-size:10px; font-weight:600; vertical-align:middle;
}
@media (max-width:420px){ .team-invite-form{ grid-template-columns:1fr; } }

/* =========================
   VIEW-ERROR FALLBACK (Production Layer 1b, 07.07.2026)
   Kontrolliertes Brechen einer View (_renderViewSafe in renderers.js):
   ruhige, monochrome Karte statt leerer/halber View.
========================= */
.view-error{
  max-width:520px; margin:64px auto; padding:28px 32px; text-align:center;
  background:var(--surface-raised); border:1px solid var(--border-default);
  border-radius:12px; font-family:var(--font-ui);
}
.view-error-title{ font-size:var(--text-sm); font-weight:600; color:var(--text-primary); }
.view-error-msg{
  margin-top:8px; font-size:var(--text-xs); color:var(--text-tertiary);
  word-break:break-word; max-height:72px; overflow:hidden;
}
.view-error-actions{ margin-top:18px; display:flex; gap:10px; justify-content:center; }
.view-error-actions button{
  padding:7px 14px; border-radius:6px; font-size:var(--text-xs); font-family:var(--font-ui);
  cursor:pointer; background:transparent; border:1px solid var(--border-default);
  color:var(--text-secondary);
}
.view-error-actions button:hover{ color:var(--text-primary); border-color:var(--text-tertiary); }
.view-error-retry{ font-weight:600; }