/* ============================================================
   Phase 2b.4 G: Design-System (CSS Custom Properties)
   Bestehende --primary etc. bleiben - dazu strukturierte Skalen.
   ============================================================ */
:root {
    /* Brand */
    --primary: #2a34b0;
    --primary-dark: #1f2890;
    --primary-light: #4047c4;
    --primary-50:  #eef0fc;
    --primary-100: #dde2f9;
    --primary-200: #b8c0f0;
    --accent: #ea580c;
    --accent-light: #fff4ec;
    --pulse-grad: linear-gradient(135deg, #7c3aed, #06b6d4);
    --sidebar-grad: linear-gradient(160deg, #2a34b0 0%, #0a0d2e 100%);

    /* Neutral - slate-Skala mit blauer Saettigung
       (refactoring-ui: pure grays look lifeless, add cool tint). */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --bg: var(--slate-50);
    --bg-subtle: #f1f5f9;
    --card: #FFFFFF;
    --border: var(--slate-200);
    --border-strong: var(--slate-300);
    /* Text: 900-Level statt pure black; mid/soft saturiert. */
    --text: var(--slate-900);
    --text-mid: var(--slate-600);
    --text-soft: var(--slate-400);

    /* Semantic */
    --success: #16A34A;
    --success-bg: #ecfdf5;
    --warning: #EAB308;
    --warning-bg: #fefce8;
    --error: #DC2626;
    --error-bg: #fee2e2;
    --info: #2a34b0;
    --info-bg: #eef2ff;

    /* Modulare Type-Skala (1.25 ratio). Keine Halbpixel-Werte. */
    --text-2xs: 11px;   /* nur fuer UPPER-Labels */
    --text-xs:  12px;
    --text-sm:  13px;   /* dichte UI (Tabellen, Sidebar) */
    --text-base: 15px;  /* Body (SaaS-Kompromiss zwischen 14 und 16) */
    --text-md:  16px;   /* Reading-Content */
    --text-lg:  18px;
    --text-xl:  20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;

    /* Line-Heights nach web-typography */
    --lh-tight:   1.2;   /* headings */
    --lh-snug:    1.35;  /* dichte UI */
    --lh-normal:  1.5;   /* body default */
    --lh-relaxed: 1.65;  /* reading */

    /* Letter-Spacing: tight fuer headings, wide fuer UPPER */
    --tracking-tight: -0.01em;
    --tracking-wide: 0.06em;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -4px rgba(15,23,42,0.04);
    --shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.1), 0 10px 10px -5px rgba(15,23,42,0.04);

    /* Animation */
    --easing-default: cubic-bezier(0.16, 1, 0.3, 1);
    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 120ms;
    --duration-default: 180ms;
    --duration-slow: 300ms;

    /* Typography */
    --font-sans: 'Geist', -apple-system, sans-serif;
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-mono: 'Geist Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Geist', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === LAYOUT === */
.app {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: 100vh;
}

/* === SIDEBAR === */
.sidebar {
    background: var(--sidebar-grad);
    color: white;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.sidebar::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
}

.logo-area {
    padding: 28px 24px 32px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 1;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.logo-mark {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: white;
    line-height: 1;
}

.logo-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #8FA0FF;
    margin-top: 4px;
    text-transform: uppercase;
}

.nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.nav-section {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.45);
    padding: 16px 12px 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.15s ease;
    position: relative;
    border: 1px solid transparent;
    /* Sweep 2.7.2.d Etappe D: nav-items als <a>-Tags — Default-Link-
       Styling neutralisieren (Underline, blau). */
    text-decoration: none;
}
a.nav-item:hover, a.nav-item:focus, a.nav-item:visited {
    text-decoration: none;
    color: inherit;
}

.nav-item:hover {
    background: rgba(255,255,255,0.06);
    color: white;
}

.nav-item.active {
    background: rgba(255,255,255,0.1);
    color: white;
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}

.nav-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: white;
    border-radius: 0 2px 2px 0;
}

.nav-item svg { flex-shrink: 0; opacity: 0.85; }

.nav-badge {
    margin-left: auto;
    background: rgba(255,255,255,0.15);
    color: white;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
}

.nav-badge.soon {
    background: rgba(234,179,8,0.2);
    color: #FCD34D;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 1;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    padding: 6px 4px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); }
    50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.1); }
}

.user-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    margin-top: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
}

.user-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.user-name {
    font-size: 12.5px;
    font-weight: 500;
    color: white;
}

.user-role {
    font-size: 10.5px;
    color: rgba(255,255,255,0.5);
}

/* === MAIN === */
.main {
    background: var(--bg);
    overflow-y: auto;
    height: 100vh;
}

.topbar {
    height: 64px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 32px;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-mid);
}

.breadcrumb-current {
    color: var(--text);
    font-weight: 500;
}

.topbar-spacer { flex: 1; }

.search-input {
    width: 280px;
    padding: 7px 12px 7px 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 11px center;
    color: var(--text);
    font-family: inherit;
    outline: none;
    transition: all 0.15s;
}

.search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.1);
}

.iconbtn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mid);
    transition: all 0.15s;
}

.iconbtn:hover { border-color: var(--border-strong); color: var(--text); }

/* === MODULE CONTENT === */
.module { display: none; padding: 32px; max-width: 1280px; margin: 0 auto; }
.module.active { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    gap: 24px;
}

.module-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.2;
}

.module-subtitle {
    font-size: 14px;
    color: var(--text-mid);
    margin-top: 4px;
}

.module-actions {
    display: flex;
    gap: 8px;
}

/* === BUTTONS === */
.btn {
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 1px 2px rgba(42, 52, 176, 0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}

.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary {
    background: white;
    color: var(--text);
    border-color: var(--border);
}

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

.btn-ghost {
    background: transparent;
    color: var(--text-mid);
}

.btn-ghost:hover { color: var(--text); background: rgba(0,0,0,0.04); }

.btn-large {
    padding: 13px 24px;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 10px;
}

.btn-danger {
    background: var(--error);
    color: white;
}

/* === CARDS === */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-subtitle {
    font-size: 12.5px;
    color: var(--text-mid);
    margin-bottom: 20px;
}

/* === DASHBOARD === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
    opacity: 0.1;
    pointer-events: none;
}

.stat-card.primary { color: var(--primary); }
.stat-card.success { color: var(--success); }
.stat-card.warning { color: var(--warning); }
.stat-card.info { color: #6366F1; }

.stat-label {
    font-size: 12px;
    color: var(--text-mid);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.stat-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-trend {
    font-size: 12px;
    margin-top: 8px;
    color: var(--text-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-trend .delta { color: var(--success); font-weight: 600; }

.dashboard-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.runs-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.run-row {
    background: white;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 130px 1fr 70px 70px 70px 160px;
    gap: 16px;
    align-items: center;
    font-size: 13px;
}

.run-row-empty {
    grid-template-columns: 1fr;
    color: var(--text-mid);
    text-align: center;
    padding: 24px;
}

.run-date { color: var(--text-mid); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.run-group { font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.run-stat { font-variant-numeric: tabular-nums; text-align: right; }
.run-stat.ja { color: var(--success); font-weight: 600; }
.run-stat.pr { color: var(--warning); }
.run-stat.bad { color: var(--error); }
.run-quote {
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    background: rgba(22,163,74,0.1);
    color: var(--success);
    padding: 3px 8px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
}
.run-meta {
    font-family: 'Geist Mono', monospace;
    font-size: 11.5px;
    color: var(--text-mid);
    text-align: right;
}

.run-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.run-badge.aborted {
    background: rgba(234, 88, 12, 0.12);
    color: #C2410C;
    border: 1px solid rgba(234, 88, 12, 0.25);
}

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .run-row {
        grid-template-columns: 110px 1fr 60px 70px;
    }
    .run-row > .run-stat-bad,
    .run-row > .run-meta { display: none; }
}

/* Quick actions */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-action {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s;
    font-family: inherit;
    width: 100%;
}

.quick-action:hover {
    border-color: var(--primary);
    background: rgba(42, 52, 176, 0.02);
}

.quick-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(42, 52, 176, 0.08);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-text { display: flex; flex-direction: column; gap: 2px; }
.quick-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.quick-desc { font-size: 11.5px; color: var(--text-mid); }

/* === VERIFIKATION MODULE === */
.verify-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    align-items: start;
}

.config-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

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

.field-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
}

.field-hint {
    font-size: 11.5px;
    color: var(--text-mid);
}

.input, .select {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: white;
    color: var(--text);
    font-family: inherit;
    outline: none;
    transition: all 0.15s;
}

.input:focus, .select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.1);
}

.input:disabled, .select:disabled {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-soft);
    cursor: not-allowed;
}

.select {
    appearance: none;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352525B' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
    padding-right: 36px;
}

.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.toggle-label-text {
    font-size: 13px;
    font-weight: 500;
}

.toggle-label-hint {
    font-size: 11.5px;
    color: var(--text-mid);
    margin-top: 2px;
}

.toggle {
    width: 36px; height: 20px;
    background: var(--border-strong);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.toggle::after {
    content: "";
    width: 16px; height: 16px;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 2px; left: 2px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle.on { background: var(--primary); }
.toggle.on::after { left: 18px; }

/* Live monitor */
.monitor {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.progress-card {
    background: linear-gradient(135deg, rgba(42, 52, 176, 0.04), rgba(42, 52, 176, 0.01));
    border: 1px solid rgba(42, 52, 176, 0.15);
    border-radius: 12px;
    padding: 20px;
}

.progress-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.progress-label { font-size: 13px; font-weight: 500; }
.progress-value {
    font-family: 'Geist Mono', monospace;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--text-mid);
}

.progress-bar {
    height: 8px;
    background: rgba(42, 52, 176, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    width: 31%;
    border-radius: 4px;
    transition: width 0.4s ease;
    position: relative;
}

.progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shine 2s linear infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--text-mid);
}

.counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.counter {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}

.counter-label {
    font-size: 11px;
    color: var(--text-mid);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.counter-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}

.counter.ja .counter-value { color: var(--success); }
.counter.bad .counter-value { color: var(--error); }
.counter.pr .counter-value { color: var(--warning); }
.counter.url .counter-value { color: var(--text-mid); }

.current-lead-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

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

.current-lead-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.current-lead-status {
    font-size: 12px;
    color: var(--text-mid);
    margin-top: 2px;
}

.lead-tag {
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lead-tag.shooting { background: rgba(168, 85, 247, 0.1); color: #A855F7; }

/* Log */
.log-card {
    background: #0A0A0A;
    border: 1px solid #1F1F1F;
    border-radius: 12px;
    padding: 16px 20px;
    color: #D4D4D4;
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    line-height: 1.7;
    height: 300px;
    overflow-y: auto;
    position: relative;
}

.log-card::-webkit-scrollbar { width: 8px; }
.log-card::-webkit-scrollbar-track { background: transparent; }
.log-card::-webkit-scrollbar-thumb { background: #2A2A2A; border-radius: 4px; }

.log-line { white-space: pre-wrap; word-break: break-word; }
.log-lead { color: white; font-weight: 600; margin-top: 8px; }
.log-meta { color: #71717A; }
.log-success { color: #4ADE80; }
.log-warn { color: #FCD34D; }
.log-error { color: #F87171; }
.log-info { color: #818CF8; }
.log-purple { color: #C084FC; }

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

.log-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(220, 38, 38, 0.15);
    color: #F87171;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.live-dot {
    width: 6px; height: 6px;
    background: #F87171;
    border-radius: 50%;
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* === IMPORT MODULE === */
.dropzone {
    border: 2px dashed var(--border-strong);
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.dropzone:hover {
    border-color: var(--primary);
    background: rgba(42, 52, 176, 0.02);
}

.dropzone-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: rgba(42, 52, 176, 0.08);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.dropzone-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.dropzone-desc {
    font-size: 13px;
    color: var(--text-mid);
}

.import-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

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

.step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
}

.step.active .step-num { background: var(--primary); color: white; border-color: var(--primary); }
.step.done .step-num { background: var(--success); color: white; border-color: var(--success); }

.step-label { font-size: 13px; font-weight: 500; }
.step.active .step-label { color: var(--text); }
.step:not(.active):not(.done) .step-label { color: var(--text-mid); }

.step-line {
    flex: 1;
    height: 1px;
    background: var(--border);
    max-width: 60px;
}

/* === PRUEFUNGEN MODULE === */
.pruefung-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    height: calc(100vh - 220px);
}

.pruefung-list {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pruefung-list-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-mid);
}

.pruefung-list-items { flex: 1; overflow-y: auto; }

.pruefung-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
}

.pruefung-item:hover { background: rgba(0,0,0,0.02); }
.pruefung-item.selected { background: rgba(42, 52, 176, 0.04); border-left: 3px solid var(--primary); padding-left: 13px; }

.pruefung-item-name { font-weight: 500; font-size: 13.5px; margin-bottom: 2px; }
.pruefung-item-meta { font-size: 11.5px; color: var(--text-mid); }

.pruefung-detail {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pruefung-detail-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pruefung-detail-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 320px;
    overflow: hidden;
}

.pruefung-preview {
    background: #F4F4F5;
    border-right: 1px solid var(--border);
    padding: 16px;
    overflow-y: auto;
}

.web-preview-frame {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    font-size: 11.5px;
    color: var(--text-mid);
    height: 100%;
    overflow-y: auto;
}

.preview-tag {
    display: inline-block;
    font-size: 10.5px;
    padding: 3px 6px;
    background: rgba(42,52,176,0.1);
    color: var(--primary);
    border-radius: 4px;
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pruefung-form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

/* === EINSTELLUNGEN === */
.settings-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav-item {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-mid);
    cursor: pointer;
    transition: all 0.15s;
}

.settings-nav-item:hover { background: rgba(0,0,0,0.04); color: var(--text); }
.settings-nav-item.active { background: var(--primary); color: white; font-weight: 500; }

.settings-section {
    margin-bottom: 32px;
}

.settings-section-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.settings-section-desc {
    font-size: 13px;
    color: var(--text-mid);
    margin-bottom: 16px;
}

/* Blacklist editor */
.tag-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 80px;
    align-content: flex-start;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(42, 52, 176, 0.08);
    color: var(--primary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.tag.error-tag { background: rgba(220,38,38,0.08); color: var(--error); }
.tag.warn-tag { background: rgba(234,179,8,0.1); color: #B45309; }

.tag .x {
    cursor: pointer;
    opacity: 0.6;
    line-height: 1;
}

.tag .x:hover { opacity: 1; }

.tag-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    flex: 1;
    min-width: 80px;
    color: var(--text);
}

/* Mails Coming Soon */
.empty-state {
    text-align: center;
    padding: 80px 24px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.empty-icon {
    width: 80px; height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(42, 52, 176, 0.08), rgba(99, 102, 241, 0.08));
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.empty-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-desc {
    font-size: 14px;
    color: var(--text-mid);
    max-width: 480px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.feature-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.feature-tile {
    background: rgba(42, 52, 176, 0.03);
    border: 1px solid rgba(42, 52, 176, 0.1);
    padding: 16px;
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--text);
    text-align: left;
}

.feature-tile-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--primary);
}

.feature-tile-desc {
    color: var(--text-mid);
    font-size: 11.5px;
    line-height: 1.5;
}

.coming-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(234, 179, 8, 0.1);
    color: #B45309;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Misc */
.section-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    margin-top: 24px;
}
.section-title:first-child { margin-top: 0; }

.divider {
    height: 1px;
    background: var(--border);
    margin: 24px 0;
}


/* === LOGIN/SETUP-OVERLAY (eigener Zusatz, nicht im Mockup) === */
.auth-overlay {
    position: fixed;
    inset: 0;
    background: var(--sidebar-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.auth-card {
    background: var(--card);
    border-radius: 16px;
    padding: 36px 40px;
    width: 380px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.auth-logo {
    text-align: center;
    margin-bottom: 28px;
}

.auth-logo-mark {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
}

.auth-logo-sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--primary);
    margin-top: 4px;
    text-transform: uppercase;
}

.auth-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    text-align: center;
}

.auth-subtitle {
    font-size: 13px;
    color: var(--text-mid);
    margin-bottom: 24px;
    text-align: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-error {
    font-size: 13px;
    color: var(--error);
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    padding: 10px 12px;
    border-radius: 6px;
}

/* === LOG-LINIEN-STYLES (Erweiterung fuer mehr Status-Levels) === */
.log-line.log-warn { color: var(--warning); }
.log-line.log-error { color: var(--error); }
.log-line.log-dim { color: var(--text-soft); }
.log-line.log-cyan { color: var(--info); }
.log-line.log-magenta { color: #B45CC8; }

/* Inline-Spans innerhalb einer Log-Zeile */
.log-inline { display: inline; }

/* === Connection-Indicator wenn WebSocket weg === */
.live-pill.disconnected {
    background: var(--error);
}
.live-pill.disconnected .live-dot { background: white; animation: none; }

/* === BLACKLIST-EDITOR (Settings) === */
.bl-section { margin-bottom: 24px; }
.bl-section-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}
.bl-section-hint {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}
.bl-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-card);
    min-height: 60px;
}
/* Sweep 2d.5.1 Etappe 10: Blacklist-Pills im Dark-Mode lesbar.
   Vorher: rgba(42,52,176,0.08) BG + var(--primary) text — auf dunklem
   Hintergrund praktisch unlesbar (dunkel auf dunkel).
   Jetzt: pulse-glass-pill als kanonisches Pattern. Glass-BG mit
   sichtbarem Border + hellgrauer Text. Auch kanonisch fuer andere
   Stellen die einen 'Dark-Mode Pill' brauchen — siehe
   docs/visual-patterns.md. */
.bl-pill,
.pulse-glass-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.bl-pill:hover,
.pulse-glass-pill:hover {
    background: var(--color-bg-card-solid, var(--color-bg-elevated));
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}
.bl-pill button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 14px;
    padding: 0;
    line-height: 1;
    opacity: 0.6;
}
.bl-pill button:hover { opacity: 1; color: var(--color-text-primary); }
.bl-pill-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    font-family: inherit;
    flex: 1;
    min-width: 100px;
    color: var(--color-text-primary);
}
.bl-pill-input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

/* === Toast (oben rechts, kommt + verschwindet) === */
.toast-container {
    position: fixed;
    top: 76px;
    right: 24px;
    /* Sweep 2c.25.2 Etappe 5: Toast über allem (Modals 9500, Drawer 9000,
       Pulse-Widget 5000, Bulk-Bar 4000). */
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-size: 13px;
    max-width: 360px;
    pointer-events: auto;
    animation: slideIn 0.2s ease;
}
.toast.error { border-left-color: var(--error); }
.toast.success { border-left-color: var(--success); }
.toast.warn { border-left-color: var(--warning); }

@keyframes slideIn {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* === LOGO-BILDER (PNG statt Text) === */
.sidebar-logo-img {
    display: block;
    width: 100%;
    max-width: 170px;
    height: auto;
}

.auth-logo {
    margin-bottom: 28px;
    display: flex;
    justify-content: center;
}

.auth-logo-block {
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-logo-img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
}

/* === PRUEFUNGS-MODUL === */
.nav-badge.count {
    background: var(--warning);
    color: #1F2937;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pruefung-total-pill {
    display: inline-block;
    margin-left: 8px;
    background: rgba(234, 179, 8, 0.15);
    color: #B45309;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.pruefung-group-block {
    margin-top: 24px;
}
.pruefung-group-block:first-child { margin-top: 8px; }

.pruefung-group-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pruefung-group-count {
    font-size: 11.5px;
    color: var(--text-mid);
    font-weight: 500;
    background: rgba(0,0,0,0.04);
    padding: 1px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.pruefung-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.pruefung-row {
    background: white;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.4s ease;
    overflow: hidden;
}

.pruefung-row.fading {
    opacity: 0;
    transform: translateX(20px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.pruefung-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pruefung-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.pruefung-meta {
    font-size: 12px;
    color: var(--text-mid);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.pruefung-meta a {
    color: var(--primary);
    text-decoration: none;
    word-break: break-all;
}

.pruefung-meta a:hover { text-decoration: underline; }

.pruefung-meta .meta-thema {
    color: var(--text-mid);
    font-style: italic;
}

.pruefung-person {
    font-size: 12px;
    color: var(--text-mid);
    margin-top: 2px;
}

.pruefung-person .person-tag {
    display: inline-block;
    background: rgba(42, 52, 176, 0.06);
    color: var(--primary);
    padding: 1px 7px;
    border-radius: 4px;
    margin-right: 6px;
    font-weight: 500;
}

.pruefung-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pruefung-actions .btn { padding: 7px 12px; font-size: 12px; }

.pruefung-result {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

.pruefung-result.ja {
    background: rgba(22, 163, 74, 0.08);
    color: #166534;
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.pruefung-result.pruefung {
    background: rgba(234, 179, 8, 0.08);
    color: #92400E;
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.pruefung-result.schlecht {
    background: rgba(220, 38, 38, 0.08);
    color: #991B1B;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.pruefung-result.fehler {
    background: rgba(220, 38, 38, 0.08);
    color: #991B1B;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.pruefung-result.loading {
    background: rgba(42, 52, 176, 0.06);
    color: var(--primary);
    border: 1px solid rgba(42, 52, 176, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pruefung-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-mid);
    font-size: 13px;
}

.pruefung-group-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 360px;
    margin-bottom: 20px;
}

.pruefung-counter {
    font-size: 12.5px;
    color: var(--text-mid);
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}

.pruefung-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.pruefung-pagination .btn {
    padding: 7px 14px;
    font-size: 12.5px;
}

.pruefung-pagination .btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pruefung-page-info {
    font-size: 12.5px;
    color: var(--text-mid);
    font-variant-numeric: tabular-nums;
    min-width: 120px;
    text-align: center;
}

/* === MODAL === */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    animation: fadeBackdrop 0.15s ease;
}

/* Sweep 2d.5.10.C8.5: Lead-Detail-Modal-CSS entfernt. Lead-Details
   laufen jetzt komplett über die Detail-Page (/leads/{id} —
   #leadDetailRoot in index.html). */
/* 2d.4-hotfix Bug 1: das hidden-Attribut wuerde sonst von
   `display: flex` ueberschrieben - das Modal waere bei jedem Page-Load
   sichtbar (wie Mike es sah: Cost-Edit-Modal beim Login auf Dashboard).
   !important sichert hier, dass das DOM-hidden-Attribut immer greift. */
.modal-backdrop[hidden] {
    display: none !important;
}

/* Phase 2d.4-hotfix Bug 4: Cost-Card-Layout (eine Card pro Funktion). */
.cost-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .cost-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
.cost-card-info {
    min-width: 0;
}
.cost-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}
.cost-card-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.cost-card-key {
    font-size: 11px;
    color: var(--color-text-subtle, rgba(255,255,255,0.4));
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    margin-top: 4px;
}
.cost-card-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.cost-card-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.cost-card-input {
    width: 90px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.cost-card-unit {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cost-card-edit-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    background: rgba(79, 126, 219, 0.15);
    border: 1px solid rgba(79, 126, 219, 0.3);
    color: var(--color-text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.cost-card-edit-btn:hover {
    background: rgba(79, 126, 219, 0.25);
}

@keyframes fadeBackdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-card {
    background: var(--card);
    border-radius: 14px;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: modalIn 0.18s ease;
}

@keyframes modalIn {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    padding: 20px 24px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-mid);
    padding: 4px 8px;
    border-radius: 6px;
}

.modal-close:hover { color: var(--text); background: rgba(0,0,0,0.04); }

.modal-body {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-lead-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.modal-lead-meta {
    font-size: 12px;
    color: var(--text-mid);
    margin-top: -10px;
    margin-bottom: 6px;
    word-break: break-all;
}

.modal-lead-meta a {
    color: var(--primary);
    text-decoration: underline;
    font-size: 14px;
    font-weight: 500;
    word-break: break-all;
}

.modal-lead-meta a:hover {
    color: var(--primary-dark);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

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

@media (max-width: 720px) {
    .field-row { grid-template-columns: 1fr; }
    .pruefung-row { grid-template-columns: 1fr; }
    .pruefung-actions { justify-content: flex-start; }
}

/* === UX-QUICK-WINS === */

/* Destruktiver Ghost-Button (z.B. "Schlecht setzen"): subtil rot,
   damit destruktive Aktion erkennbar ist ohne aufdringlich zu sein. */
.btn-danger-ghost {
    background: transparent;
    color: var(--error);
    border: 1px solid rgba(220, 38, 38, 0.2);
}
.btn-danger-ghost:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.4);
}

/* Sidebar-Items in "bald"-Zustand: sichtbar aber nicht klickbar. */
.nav-item.disabled {
    pointer-events: none;
    opacity: 0.55;
    cursor: not-allowed;
}

/* Floating-Action-Stop-Button: erscheint waehrend eines Runs unten rechts,
   bleibt beim Scrollen im Live-Log immer sichtbar. */
.floating-stop {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 60;
    padding: 12px 20px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35),
                0 2px 4px rgba(220, 38, 38, 0.2);
}
.floating-stop:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45),
                0 2px 6px rgba(220, 38, 38, 0.25);
}

/* Speichern-Button mit Dirty-Indikator: kleiner Punkt oben rechts wenn
   ungespeicherte Aenderungen anliegen. */
.btn-primary.dirty {
    position: relative;
}
.btn-primary.dirty::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: var(--warning);
    border: 2px solid var(--card);
    border-radius: 50%;
    animation: dirtyPulse 1.6s ease-in-out infinite;
}
@keyframes dirtyPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.85; }
}

/* ============================================================
   CRM-Connections (Settings)
   ============================================================ */

.crm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.crm-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-empty {
    color: var(--text-mid);
    padding: 24px 12px;
    text-align: center;
    font-size: 14px;
    border: 1px dashed var(--border);
    border-radius: 10px;
}

.crm-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.crm-row:hover {
    border-color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.crm-row-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: var(--primary);
    letter-spacing: 0.02em;
}
.crm-row-icon[data-kind="monday"] { background: #ff3d57; }
.crm-row-icon[data-kind="hubspot"] { background: #ff7a59; }
.crm-row-icon[data-kind="internal"] { background: #6b7280; }

.crm-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-row-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
    color: var(--text-mid);
}

.crm-row-meta-item code {
    background: var(--bg);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11.5px;
    border: 1px solid var(--border);
}

.crm-row-meta-test {
    color: var(--text-soft);
    font-style: italic;
}

.crm-row-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.crm-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.crm-pill-status-active {
    background: #d1fae5;
    color: #065f46;
}
.crm-pill-status-disabled {
    background: #e5e7eb;
    color: #4b5563;
}
.crm-pill-status-error {
    background: #fee2e2;
    color: #991b1b;
}

/* ============================================================
   Worker-Status-Banner (Sub-C5) + globaler btn:disabled-Style
   ============================================================ */

.worker-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 18px;
    background: #FEF3C7;            /* warm-amber, warnt ohne zu alarmieren */
    border: 1px solid #F59E0B;
    border-radius: 10px;
    color: #78350F;
    font-size: 13px;
    line-height: 1.5;
}

.worker-warning-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.3;
}

.worker-warning-text {
    flex: 1 1 auto;
    min-width: 0;
}

.worker-warning-title {
    font-weight: 600;
    color: #78350F;
    margin-bottom: 2px;
}

.worker-warning-hint {
    color: #92400E;
    font-size: 12.5px;
}

.worker-warning-hint code {
    background: rgba(120, 53, 15, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}

/* Globaler disabled-Button-Style. Spezifischere Komponenten-Selektoren
   (z.B. .pruefung-pagination .btn:disabled) ueberschreiben das. */
.btn:disabled,
.btn[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* ====== Rollen-System (Sub-E4) ======================================== */
/* Member darf Owner-Buttons nicht drücken — wir disablen sie und zeigen
   beim Hover einen Hinweis. Server enforced eh 403, das hier ist UX. */
body.role-member [data-perm="owner"] {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
    position: relative;
}

body.role-member [data-perm="owner"]::after {
    content: 'Nur Owner';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10.5px;
    background: rgba(31, 41, 55, 0.95);
    color: #fff;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

body.role-member [data-perm="owner"]:hover::after {
    opacity: 1;
}

body.role-member .bl-pill .bl-pill-x {
    /* Member darf Blacklist-Items nicht entfernen */
    display: none;
}

/* ====== Audit-Log (Sub-E3) ============================================ */
.audit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.audit-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.audit-controls .select {
    min-width: 200px;
    height: 36px;
}

.audit-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border, #E5E7EB);
}

.audit-row {
    display: grid;
    grid-template-columns: 130px 110px 200px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border, #E5E7EB);
    font-size: 13px;
}

.audit-row:hover {
    background: rgba(99, 102, 241, 0.03);
}

.audit-time {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
}

.audit-user {
    color: var(--text, #111827);
    font-weight: 500;
}

.audit-action {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.1);
    color: rgb(67, 56, 202);
    width: fit-content;
}

.audit-action.action-fail {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(185, 28, 28);
}

.audit-action.action-ok {
    background: rgba(16, 185, 129, 0.1);
    color: rgb(6, 95, 70);
}

.audit-action.action-warn {
    background: rgba(245, 158, 11, 0.12);
    color: rgb(146, 64, 14);
}

.audit-details {
    color: var(--color-text-muted);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-empty {
    padding: 24px 4px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

.audit-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    gap: 12px;
    flex-wrap: wrap;
}

.audit-meta {
    color: var(--color-text-muted);
    font-size: 12.5px;
}

@media (max-width: 720px) {
    .audit-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 4px;
    }
    .audit-time { font-size: 12px; }
}

/* ============================================================
   Phase 2: Lead-Suche & Pool (C1 + C6)
   ============================================================ */
.tabs.leads-tabs { display: flex; gap: 4px; margin: 8px 0 16px; border-bottom: 1px solid #E4E4E7; }
.tabs.leads-tabs .tab-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    color: #71717A;
}
.tabs.leads-tabs .tab-btn:hover { color: var(--color-text-primary, #18181B); }
.tabs.leads-tabs .tab-btn.active {
    /* Sweep 2d.5.7.1 Etappe 4a: Tab-Underline aktiv = Brand-Mid Akzent. */
    color: var(--color-text-primary, #18181B);
    font-weight: 500;
    border-bottom-color: var(--color-brand-mid, #4f7edb);
}
.leads-tab-page { display: none; }
.leads-tab-page.active { display: block; }

/* Phase 2b.8 A1: Import-Sub-Tabs (waren ohne CSS -> beide
   gleichzeitig sichtbar). */
.import-tab-page { display: none; }
.import-tab-page.active { display: block; }

/* 2c.28 Etappe 13: Sticky-Bulk-Bar im Verifikations-Modul */
.verify-sticky-bulk-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px 10px 18px;
    background: rgba(20, 20, 28, 0.85);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40);
    color: var(--color-text-primary, rgba(255,255,255,0.95));
    font-size: 14px;
}
.verify-bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.verify-bulk-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.verify-bulk-counter strong { font-size: 18px; color: var(--color-brand-light, #7ab8f0); }
.verify-bulk-bar-actions { display: flex; gap: 8px; }
.verify-bulk-start-btn {
    border-radius: 999px;
}

.verify-confirm-row {
    margin-bottom: 8px;
    font-size: 14px;
}

/* 2c.28 Etappe 12: Verlauf-Tabelle mit Glass-Pattern */
.verify-runs-table {
    margin-top: 12px;
    width: 100%;
}
.verify-run-row {
    cursor: pointer;
}
.verify-run-row:hover {
    background: rgba(79, 126, 219, 0.06);
}
.verify-runs-empty {
    margin: 24px 0;
}
.text-success { color: var(--color-success, #22c55e); }
.text-danger { color: var(--color-danger, #ef4444); }

/* 2c.28 Etappe 11: Verify-Filter-Toolbar (analog Lead-Pool) */
.verify-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
.verify-filter-search {
    flex: 1 1 240px;
    min-width: 200px;
}
.verify-saved-views {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.verify-saved-view-btn.is-active {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-text-primary, rgba(255,255,255,0.95));
    border-color: rgba(79, 126, 219, 0.30);
}
.verify-quick-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.verify-quick-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255,255,255,0.78));
    cursor: pointer;
}

/* 2c.28 Etappe 10: Verify-Modul Tab-Pages (analog Import) */
.verify-tab-page { display: none; }
.verify-tab-page.active { display: block; }
.verify-app-tabs { margin-bottom: 16px; }

/* Sweep 4.1 a2: System-Seite Tab-Pages (Übersicht / Pläne) — analog
   Verify/Import. PulseTabs (#resellerTabs) toggelt .active. */
#resellerTabs { margin-bottom: 16px; }
.reseller-tab-page { display: none; }
.reseller-tab-page.active { display: block; }

/* Live-Log Header + Empty-State */
.verify-live-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.verify-live-log-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.verify-live-log-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    font-size: 14px;
}

/* Sweep 2c.26 Etappe 2: Preset-Bar — Quick-Access oben im Quellen-Tab */
.import-preset-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(79, 126, 219, 0.06);
    border: 1px solid rgba(79, 126, 219, 0.18);
    flex-wrap: wrap;
}
.import-preset-bar-label {
    font-size: 12px;
    color: var(--color-text-muted, rgba(255,255,255,0.6));
    font-weight: 600;
    flex-shrink: 0;
}
.import-preset-bar-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.import-preset-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    background: rgba(79, 126, 219, 0.18);
    border: 1px solid rgba(79, 126, 219, 0.32);
    font-size: 12px;
    color: var(--color-text-primary, rgba(255,255,255,0.92));
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
/* 2d.2.1 Etappe 1: Aktive Saved-Search-Pille — Brand-Glow */
.import-preset-pill.is-active {
    background: rgba(79, 126, 219, 0.40);
    border-color: rgba(79, 126, 219, 0.70);
    box-shadow: 0 0 0 3px rgba(79, 126, 219, 0.18),
                0 4px 12px rgba(79, 126, 219, 0.30);
}
.import-preset-pill-name {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 2px 4px;
    font-size: inherit;
    font-weight: 500;
}
.import-preset-pill-name:hover {
    color: var(--color-brand-light, #7ab8f0);
}
.import-preset-pill-x {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: background 120ms ease, opacity 120ms ease;
}
.import-preset-pill-x:hover {
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    opacity: 1;
}
:root[data-theme="light"] .import-preset-bar {
    background: rgba(42, 52, 176, 0.04);
    border-color: rgba(42, 52, 176, 0.18);
}
:root[data-theme="light"] .import-preset-pill {
    background: rgba(42, 52, 176, 0.10);
    border-color: rgba(42, 52, 176, 0.28);
    color: #1a2280;
}

/* Sweep 2c.26 Etappe 4: CRM-Inbound — Provider-Cards + Connection-Liste */
.import-crm-providers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.import-crm-provider-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: border-color 120ms ease, background 120ms ease;
}
.import-crm-provider-card:hover {
    border-color: rgba(79, 126, 219, 0.35);
    background: rgba(255, 255, 255, 0.06);
}
.import-crm-provider-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary, rgba(255,255,255,0.92));
}
.import-crm-provider-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.import-crm-provider-badge.is-functional {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.32);
}
.import-crm-provider-badge.is-coming-soon {
    background: rgba(79, 126, 219, 0.14);
    color: var(--color-brand-light, #7ab8f0);
    border: 1px solid rgba(79, 126, 219, 0.30);
}
.import-crm-provider-action {
    margin-top: 4px;
}
.import-crm-connection-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    margin-bottom: 8px;
}
.import-crm-connection-row:last-child {
    margin-bottom: 0;
}
:root[data-theme="light"] .import-crm-provider-card,
:root[data-theme="light"] .import-crm-connection-row {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.10);
}
:root[data-theme="light"] .import-crm-provider-name {
    color: #1a1a1a;
}

/* Sweep 2c.26 Etappe 5: Import-History-Tabelle.
   2c.26.1 Etappe 5: Glass-Card-Wrapper + Hover-State + Aktionen-Cell. */
.import-history-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
}
.import-history-card .import-history-table {
    margin: 0;
}
:root[data-theme="light"] .import-history-card {
    background: rgba(0, 0, 0, 0.01);
    border-color: rgba(0, 0, 0, 0.08);
}
.import-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.import-history-table tbody tr {
    transition: background 120ms ease;
}
.import-history-table tbody tr:last-child td {
    border-bottom: 0;
}
.import-history-th-actions {
    width: 1%;
    white-space: nowrap;
}
.import-history-actions-cell {
    text-align: right;
    white-space: nowrap;
}
.import-history-actions {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Sweep 2c.26.2 Etappe 2: Icon-Action-Button-Style.
   Quadratischer Button mit Icon-Center, kompakt, transparent-bis-
   Brand-tinted Hover. */
.import-history-action-btn {
    width: 30px;
    height: 30px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    flex-shrink: 0;
}
.import-history-action-btn svg {
    flex-shrink: 0;
}
/* Legacy-Klasse fuer Backward-Compat (ohne Icon-Variante). */
.import-history-action-danger {
    color: #f87171 !important;
}
.import-history-action-danger:hover {
    color: #ef4444 !important;
}

/* Empty-State-Card (2c.26.1 Etappe 5) */
.import-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.02);
    text-align: center;
}
.import-history-empty-icon {
    color: var(--color-brand-light, #7ab8f0);
    margin-bottom: 12px;
    opacity: 0.7;
}
.import-history-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary, rgba(255,255,255,0.92));
    margin-bottom: 4px;
}
.import-history-empty-hint {
    font-size: 13px;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    margin-bottom: 18px;
    max-width: 360px;
}
:root[data-theme="light"] .import-history-empty {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.01);
}

/* Sweep 2c.26.3 Etappe 3: Monday-Wizard-Step-Indicator */
.monday-wizard-steps {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    align-items: center;
}
.monday-wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    font-size: 12px;
    font-weight: 600;
    transition: all 120ms ease;
    flex-shrink: 0;
}
.monday-wizard-step.is-active {
    background: rgba(79, 126, 219, 0.18);
    border-color: rgba(79, 126, 219, 0.45);
    color: var(--color-brand-light, #7ab8f0);
}
.monday-wizard-step.is-done {
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.30);
}
.monday-wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: currentColor;
    color: var(--color-bg-elevated, rgba(20,20,28,1));
    font-weight: 700;
    font-size: 11px;
}
.monday-wizard-step.is-active .monday-wizard-step-num {
    background: var(--color-brand-light, #7ab8f0);
    color: white;
}
.monday-wizard-step.is-done .monday-wizard-step-num {
    background: #4ade80;
    color: white;
}
.monday-item-check {
    accent-color: var(--color-brand-light, #7ab8f0);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
:root[data-theme="light"] .monday-wizard-step {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.55);
}
:root[data-theme="light"] .monday-wizard-step.is-active {
    background: rgba(42, 52, 176, 0.10);
    border-color: rgba(42, 52, 176, 0.45);
    color: var(--color-brand-primary, #2a34b0);
}

/* Sweep 2c.26.2 Etappe 7: Lead-Detail Personen-Stage-2-Indikator */
.lead-detail-stage2-ok {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(34, 197, 94, 0.32);
}
.lead-detail-stage2-pending {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(79, 126, 219, 0.14);
    color: var(--color-brand-light, #7ab8f0);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(79, 126, 219, 0.30);
}

/* Sweep 2c.26.1 Etappe 7: Auto-Tag/Stage/Notiz Apply-Modal */
.import-apply-section {
    margin-bottom: 16px;
}
.import-apply-section:last-child {
    margin-bottom: 0;
}
.import-apply-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    font-weight: 700;
    margin-bottom: 6px;
}
.import-apply-tag-pickable {
    cursor: pointer;
    transition: filter 120ms ease, transform 120ms ease;
}
.import-apply-tag-pickable:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}
.import-apply-tag-pickable.selected {
    filter: brightness(1.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}
.import-history-table thead th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
}
.import-history-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.import-history-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}
.import-history-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.import-history-status-completed {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}
.import-history-status-running {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-light, #7ab8f0);
}
.import-history-status-failed {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}
.import-history-status-rolled_back {
    background: rgba(120, 113, 108, 0.18);
    color: rgba(255, 255, 255, 0.65);
}
:root[data-theme="light"] .import-history-table thead th {
    border-bottom-color: rgba(0,0,0,0.10);
    color: rgba(0,0,0,0.55);
}
:root[data-theme="light"] .import-history-table tbody td {
    border-bottom-color: rgba(0,0,0,0.06);
}

/* ============================================================
   Sweep 2c.26.1 Etappe 1 — Lead-Suche-Tab Layout-Refactor
   ============================================================ */

/* Sweep 2c.26.3 Etappe 1: Smart-Search-Card prominent oben. */
.import-smart-search-card {
    margin-bottom: 16px;
    padding: 20px 24px;
    border-radius: 14px;
    background: rgba(79, 126, 219, 0.06);
    border: 1px solid rgba(79, 126, 219, 0.20);
}
.import-smart-search-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.import-smart-search-row > input[type="text"] {
    flex: 1;
}
.import-smart-search-row .btn {
    flex-shrink: 0;
}
/* 2c.26.4 Etappe 2: Result-Card nach Suche (1-Knopf-Workflow) */
/* Sweep 2d.5.9.1 Etappe 2: symmetrische Margins (28px oben+unten)
   + kraeftiger Brand-Glow fuer visuellen Akzent. */
.leads-search-result-card {
    margin-top: 28px;
    margin-bottom: 28px;
}
.leads-search-result {
    padding: 22px 26px;
    border-radius: 14px;
    background: linear-gradient(180deg,
        rgba(79, 126, 219, 0.10) 0%,
        rgba(15, 15, 20, 0.55) 100%);
    border: 1px solid rgba(79, 126, 219, 0.30);
    box-shadow:
        0 0 0 1px rgba(42, 52, 176, 0.18),
        0 16px 44px rgba(42, 52, 176, 0.30),
        0 0 80px rgba(79, 126, 219, 0.16);
}
.leads-search-result.is-empty {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}
/* 2d.4 Etappe 1: is-err nutzt jetzt die Status-Tokens — heller Pastel-
   Text auf transparent-rotem BG (Mike's 'unlesbar'-Bug behoben). */
.leads-search-result.is-err {
    background: var(--status-error-bg) !important;
    border: 1px solid var(--status-error-border) !important;
    border-left-width: 4px !important;
    color: var(--status-error-text) !important;
}
.leads-search-result.is-err .leads-search-result__title {
    color: var(--status-error-icon) !important;
}
.leads-search-result.is-err .leads-search-result__hint {
    color: var(--status-error-text) !important;
}
.leads-search-result__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.leads-search-result__count {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-color, #4f7edb);
}
.leads-search-result__lbl {
    font-size: 14px;
    color: var(--text-color, inherit);
}
.leads-search-result__credits {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 8px;
}
.leads-search-result__cursor {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 8px;
    font-size: 13px;
}
.leads-search-result__cursor .btn {
    margin-left: 8px;
}
.leads-search-result__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
/* Sweep 2d.5.10.1 Etappe 1: Capped-Hint bei 100.000+ Treffern */
.leads-search-result__capped-hint {
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 6px;
}

/* Sweep 2d.5.9 Etappe 1+2: Lead-Anzahl-Input-Row + Bulk-Bar-Inline */
.leads-search-result__count-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.leads-search-result__count-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}
.leads-search-result__count-cap {
    font-size: 12px;
    color: var(--color-text-tertiary);
}
.leads-search-result__count-row .import-lead-count-input {
    width: 110px;
    text-align: right;
    padding: 6px 10px;
    font-size: 13px;
}
/* Sweep 2d.5.9 Etappe 2: Top-Box Margin-Fix zur Region-Section.
   Sweep 2d.5.9.1 Etappe 2: symmetrisch oben + unten. */
#leadsSearchResultCard {
    margin-top: 28px;
    margin-bottom: 28px;
}
/* Sweep 2d.5.9.2 Etappe 1: Bar startet hidden, Auto-Reveal bei
   User-Aktivitaet oder Profil-Vorbelegung. Smooth fade-in. */
.import-sticky-bar--hidden {
    display: none !important;
}

/* Sweep 2d.5.10.C1: Scoring Erklaerungs-Block (collapsible). */
.scoring-explain-block {
    margin: 8px 0 20px 0;
    padding: 12px 16px;
    border: 1px solid rgba(79, 126, 219, 0.20);
    border-radius: 10px;
    background: linear-gradient(180deg,
        rgba(79, 126, 219, 0.06) 0%,
        rgba(15, 15, 20, 0.30) 100%);
}
.scoring-explain-block__summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
    list-style: none;
    position: relative;
    padding-left: 22px;
}
.scoring-explain-block__summary::-webkit-details-marker {
    display: none;
}
.scoring-explain-block__summary::before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-brand-light, #7ab8f0);
    transition: transform 120ms ease;
}
.scoring-explain-block[open] .scoring-explain-block__summary::before {
    transform: rotate(90deg);
}
.scoring-explain-block__body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(79, 126, 219, 0.18);
}
.scoring-explain-block__steps {
    margin: 0;
    padding-left: 22px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    font-size: 13px;
}
.scoring-explain-block__steps li {
    margin-bottom: 4px;
}
.scoring-explain-block__steps strong {
    color: var(--color-text-primary);
}

/* Sweep 2d.5.9.1 Etappe 5: Demo-Tabelle clickable Cells */
.import-demo-table {
    width: 100%;
    margin-top: 12px;
}
.import-demo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-brand-light, #7ab8f0);
    text-decoration: none;
    max-width: 280px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 100ms ease, color 100ms ease;
}
.import-demo-link:hover {
    background: rgba(79, 126, 219, 0.12);
    color: var(--color-brand-light, #7ab8f0);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.import-demo-link__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text-tertiary);
}
.import-demo-link:hover .import-demo-link__icon {
    color: var(--color-brand-light, #7ab8f0);
}
.import-demo-link__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Sweep 2d.5.9.1 Etappe 4: Live-Feedback-Card waehrend / nach Import */
.import-feedback {
    padding: 22px 26px;
}
.import-feedback__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.import-feedback__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
.import-feedback__icon--running {
    color: var(--color-brand-light, #7ab8f0);
    background: rgba(79, 126, 219, 0.18);
    animation: importFeedbackSpin 1.4s linear infinite;
}
.import-feedback__icon--success {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.18);
}
.import-feedback__icon--failed {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.18);
}
@keyframes importFeedbackSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.import-feedback__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.import-feedback__progress {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 8px;
}
.import-feedback__progress-bar {
    height: 100%;
    background: linear-gradient(90deg,
        var(--color-brand-mid, #4f7edb) 0%,
        var(--color-brand-light, #7ab8f0) 100%);
    transition: width 280ms ease;
}
.import-feedback__counter {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}
.import-feedback__hint {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.import-feedback__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.leads-search-result.is-running {
    border-color: rgba(79, 126, 219, 0.40);
}
.leads-search-result.is-success {
    background: linear-gradient(180deg,
        rgba(22, 163, 74, 0.12) 0%,
        rgba(15, 15, 20, 0.60) 100%);
    border-color: rgba(22, 163, 74, 0.32);
    box-shadow:
        0 0 0 1px rgba(22, 163, 74, 0.16),
        0 16px 44px rgba(22, 163, 74, 0.20);
}

/* Sweep 2d.5.9.1 Etappe 2: Warnhinweis "Bitte Bundesland waehlen"
   mit rotem Alert-Triangle-Icon + leichter roter Tint im Container. */
.import-warn-bundesland {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.10);
    border: 1px solid rgba(220, 38, 38, 0.28);
    color: var(--color-text-primary);
    font-weight: 500;
    line-height: 1.2;
}
.import-warn-bundesland__icon {
    display: inline-flex;
    align-items: center;
    color: var(--color-danger, #dc2626);
    flex-shrink: 0;
}
.import-warn-bundesland__icon svg {
    width: 16px;
    height: 16px;
}
.pulse-bulk-bar.pulse-bulk-bar--inline {
    margin-top: 14px;
    padding: 10px 12px;
}
.pulse-bulk-bar__action--primary {
    color: var(--color-brand-light, #7ab8f0);
}
.pulse-bulk-bar__action--primary:hover {
    background: rgba(79, 126, 219, 0.20);
}
/* Sticky-Toolbar Lead-Count-Row */
.import-sticky-count-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.import-sticky-count-label {
    font-size: 12px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}
.import-sticky-count-row .import-lead-count-input {
    width: 90px;
    text-align: right;
    padding: 6px 10px;
    font-size: 13px;
}
.leads-search-result__title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.leads-search-result__hint {
    font-size: 14px;  /* 2d.4 Etappe 1: 13 -> 14 fuer Lesbarkeit */
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.78));
    line-height: 1.55;
}
.leads-import-confirm__row {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
}
.leads-import-confirm__row input[type="number"] {
    width: 100%;
    box-sizing: border-box;
}
/* Sweep 2d.5.9 Etappe 3: erweitertes Confirm-Modal mit Sektionen +
   Suchkriterien-Aufschluesselung. */
.leads-import-confirm__section {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.leads-import-confirm__section:last-of-type {
    border-bottom: none;
}
.leads-import-confirm__section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: 8px;
}
.leads-import-confirm__crit-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.4;
}
.leads-import-confirm__crit-label {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    min-width: 110px;
}
.leads-import-confirm__crit-value {
    color: var(--color-text-primary);
    text-align: right;
}
.leads-import-confirm__hint {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
}

/* 2d.3 Etappe 2: Pulse-KI-Hint-Card (statt Smart-Search) */
.import-pulseki-hint-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 20px !important;
    background: rgba(79, 126, 219, 0.06) !important;
    border: 1px solid rgba(79, 126, 219, 0.20) !important;
    border-radius: 12px !important;
}
.import-pulseki-hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(79, 126, 219, 0.20);
    color: var(--color-brand-light, #7ab8f0);
    flex-shrink: 0;
}
.import-pulseki-hint-body {
    flex: 1;
    min-width: 200px;
}
.import-pulseki-hint-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary, rgba(255, 255, 255, 0.95));
    margin-bottom: 2px;
}
.import-pulseki-hint-text {
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.72));
    line-height: 1.5;
}
.import-pulseki-hint-text em {
    font-style: italic;
    color: var(--color-text-primary, rgba(255, 255, 255, 0.92));
}

/* ============================================================
   2d.4 Etappe 1: Status-Card-Pattern global + Toast-Override
   ============================================================
   Mike-Frust: Fehler waren dunkel-auf-dunkel/dunkelgrau —
   unlesbar. Pattern nutzt Status-Tokens (siehe tokens.css) mit
   hellem Pastel-Text auf transparent-tinted-BG.
*/

/* Toast-Override: nutzt Status-Tokens fuer alle Varianten */
.toast.error,
.toast.warning,
.toast.warn,
.toast.success,
.toast.info {
    border-radius: 12px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-left-width: 4px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 14px !important;
    line-height: 1.55 !important;
    padding: 14px 16px !important;
}
.toast.error {
    background: var(--status-error-bg) !important;
    border-color: var(--status-error-border) !important;
    color: var(--status-error-text) !important;
}
.toast.warn,
.toast.warning {
    background: var(--status-warn-bg) !important;
    border-color: var(--status-warn-border) !important;
    color: var(--status-warn-text) !important;
}
.toast.success {
    background: var(--status-success-bg) !important;
    border-color: var(--status-success-border) !important;
    color: var(--status-success-text) !important;
}
.toast.info {
    background: var(--status-info-bg) !important;
    border-color: var(--status-info-border) !important;
    color: var(--status-info-text) !important;
}
.toast .toast-action-hint {
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.85;
}
.pulse-status-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px !important;
    border-radius: 16px !important;
    border: 1px solid transparent !important;
    border-left-width: 4px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 14px;
    line-height: 1.55;
}
.pulse-status-card__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
}
.pulse-status-card__body {
    flex: 1;
    min-width: 0;
}
.pulse-status-card__title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.pulse-status-card__text {
    font-size: 14px;
    line-height: 1.55;
}

.pulse-status-card.is-error {
    background: var(--status-error-bg) !important;
    border-color: var(--status-error-border) !important;
    color: var(--status-error-text) !important;
}
.pulse-status-card.is-error .pulse-status-card__icon {
    color: var(--status-error-icon);
}
.pulse-status-card.is-warn {
    background: var(--status-warn-bg) !important;
    border-color: var(--status-warn-border) !important;
    color: var(--status-warn-text) !important;
}
.pulse-status-card.is-warn .pulse-status-card__icon {
    color: var(--status-warn-icon);
}
.pulse-status-card.is-success {
    background: var(--status-success-bg) !important;
    border-color: var(--status-success-border) !important;
    color: var(--status-success-text) !important;
}
.pulse-status-card.is-success .pulse-status-card__icon {
    color: var(--status-success-icon);
}
.pulse-status-card.is-info {
    background: var(--status-info-bg) !important;
    border-color: var(--status-info-border) !important;
    color: var(--status-info-text) !important;
}
.pulse-status-card.is-info .pulse-status-card__icon {
    color: var(--status-info-icon);
}

/* 2d.3.1 Etappe 5: Reset-Button-Toolbar oben rechts */
.import-search-toolbar-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* Result-Card Stale-State */
.leads-search-result.is-stale .leads-search-result__count {
    opacity: 0.45;
}
/* 2d.4 Etappe 1: Stale-Banner nutzt jetzt Warn-Tokens (lesbarer) */
.leads-search-result__stale-banner {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--status-warn-bg);
    border: 1px solid var(--status-warn-border);
    border-left: 4px solid var(--status-warn-icon);
    border-radius: 8px;
    color: var(--status-warn-text);
    font-size: 14px;
    font-weight: 500;
}

/* 2d.3.1 Etappe 4: Field-Hint Warn-Variante (Cities-Multi-City-Hinweis) */
.import-search-card .field-hint.is-warn {
    color: rgba(245, 158, 11, 0.92) !important;  /* Amber-warning */
    font-weight: 500 !important;
}
/* Sweep 2d.5.9.2 Etappe 3: Field-Hint Info-Variante (Stadtstaaten-
   Hinweis "Stadt-Filter wird automatisch ignoriert"). */
.import-search-card .field-hint.is-info {
    color: var(--color-brand-light, #7ab8f0) !important;
    font-weight: 500 !important;
}

/* 2d.4.4 Etappe 3: Pflicht-Indikator dezenter — Text statt grosser Stern */
.import-required-marker {
    /* Standard-Schriftgroesse, dezent rot */
    color: #ef4444;
    font-weight: 600;
    margin-left: 2px;
}

/* Pflichtfeld-Text in normaler Schrift; bei leerem Feld brand-rot,
   bei gewaehltem Feld dezent grau */
.import-required-hint {
    margin-left: 6px;
    font-size: inherit;
    font-weight: 400;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
}
/* Wenn State-Select leer (Pflichtfeld nicht erfuellt): Text wird rot */
#importStateSelect.is-empty-required ~ * .import-required-hint,
.form-row:has(#importStateSelect.is-empty-required) .import-required-hint {
    color: #ef4444;
    font-weight: 500;
}

/* Empty-State-Border auf State-Select wenn leer + dezentere Pulsation */
#importStateSelect.is-empty-required {
    border-color: rgba(239, 68, 68, 0.45) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.10) !important;
    animation: importRequiredPulse 3.2s ease-in-out infinite;
}
@keyframes importRequiredPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.08); }
    50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
    #importStateSelect.is-empty-required { animation: none; }
}
.import-help-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.62));
    cursor: pointer;
    padding: 2px;
    margin-left: 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 120ms ease, background 120ms ease;
}
.import-help-btn:hover {
    color: var(--color-brand-light, #7ab8f0);
    background: rgba(79, 126, 219, 0.10);
}

/* 2d.2.1 Etappe 3: Filter-Toggle-Grid (statt unauffaellige Inline-Checkboxen) */
.import-filter-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
.import-filter-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.10);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.import-filter-toggle:hover {
    background: rgba(79, 126, 219, 0.08);
    border-color: rgba(79, 126, 219, 0.30);
}
.import-filter-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-brand-light, #7ab8f0);
    cursor: pointer;
    flex-shrink: 0;
}
.import-filter-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(79, 126, 219, 0.10);
    color: var(--color-brand-light, #7ab8f0);
    flex-shrink: 0;
    transition: background 150ms ease, color 150ms ease;
}
.import-filter-toggle__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, rgba(255, 255, 255, 0.92));
}
.import-filter-toggle:has(input:checked) {
    background: rgba(79, 126, 219, 0.14);
    border-color: rgba(79, 126, 219, 0.45);
    box-shadow: 0 0 0 3px rgba(79, 126, 219, 0.10);
}
.import-filter-toggle:has(input:checked) .import-filter-toggle__icon {
    background: rgba(79, 126, 219, 0.30);
    color: #fff;
}

/* 2d.2.1 Etappe 3: Sticky-Such-Toolbar (analog Lead-Pool / Verifikation) */
.import-search-sticky-toolbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px 10px 18px;
    background: rgba(20, 20, 28, 0.85);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40);
    color: var(--color-text-primary, rgba(255, 255, 255, 0.95));
    font-size: 14px;
    max-width: calc(100vw - 48px);
    flex-wrap: wrap;
    justify-content: center;
}
.import-search-sticky-toolbar__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    white-space: nowrap;
}
.import-search-sticky-toolbar__status strong {
    font-size: 18px;
    color: var(--color-brand-light, #7ab8f0);
}
.import-search-sticky-toolbar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.import-search-sticky-toolbar__actions .btn {
    border-radius: 999px;
}

/* 2d.2.1 Etappe 2: Beispiel-Pillen unter Smart-Search-Input */
.import-smart-examples {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.import-smart-examples__lbl {
    font-size: 12px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.65));
    margin-right: 4px;
}
.import-smart-example-pill {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(79, 126, 219, 0.10);
    border: 1px solid rgba(79, 126, 219, 0.22);
    color: var(--color-text-primary, rgba(255, 255, 255, 0.92));
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.import-smart-example-pill:hover {
    background: rgba(79, 126, 219, 0.20);
    border-color: rgba(79, 126, 219, 0.40);
}

/* 2c.26.4 Etappe 1: Slot fuer Tippfehler-Korrekturen + Undo-Button */
.import-smart-corrections-slot {
    margin-top: 10px;
}
.import-smart-corrections-slot:empty {
    display: none;
}
.import-smart-corrections {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(42, 52, 176, 0.06);
    border: 1px solid rgba(42, 52, 176, 0.15);
    flex-wrap: wrap;
}
.import-smart-corrections__txt {
    font-size: 13px;
    color: var(--text-color, inherit);
    flex: 1;
    min-width: 200px;
}
:root[data-theme="light"] .import-smart-search-card {
    background: rgba(42, 52, 176, 0.04);
    border-color: rgba(42, 52, 176, 0.18);
}

/* Buttons-Bar mit Icons */
.import-actions-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
    padding: 14px 0;
}
.import-actions-bar .btn {
    gap: 6px;
}

/* Card-Header mit Icon-Slot (analog Tenant-Profile-Cards) */
.import-search-card {
    /* 2c.26.4 Etappe 3: groesszuegigeres Spacing.
       2d.2 Etappe 3: !important wegen .card { padding: var(--space-6)
       !important; }-Konflikt an style.css:4270, 4850, 5325. Permanenter
       Cleanup geplant in 2c.27.3. */
    margin-bottom: 28px !important;
    padding: 28px 32px !important;
    border-radius: 14px !important;
}
.import-card-title {
    /* 2d.2 Etappe 3: !important wegen .card-title-Konflikten */
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    margin-bottom: 18px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}
.import-card-icon {
    /* 2c.26.4 Etappe 3: konsistent 32x32 + Brand-tinted */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(79, 126, 219, 0.16);
    color: var(--color-brand-light, #7ab8f0);
    flex-shrink: 0;
}
.import-card-icon svg {
    width: 18px;
    height: 18px;
}
/* 2c.27.2 Etappe 5: Reseller-Range-Select hat Pflicht-min-width */
.reseller-range-select {
    min-width: 180px;
}
.reseller-module-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 2c.27.2 Etappe 6: Reseller-Credit-Adjust-Form (ersetzt Inline-Styles) */
.reseller-credit-adjust-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}
.reseller-credit-adjust-form__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.reseller-credit-adjust-form__row--full {
    grid-column: 1 / -1;
}
.reseller-credit-adjust-form__lbl {
    font-size: 12px;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
}

/* Sweep 2d.5.8.1 Etappe 1: Reseller-Add-On-Settings.
   Funktionaler Block — visueller Polish mit dem Reseller-Refactor. */
.reseller-addon-plan-card {
    border: 1px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: 10px;
    padding: 16px;
    background: var(--color-bg-elevated, rgba(255,255,255,0.03));
}
.reseller-addon-plan-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
.reseller-addon-plan-card__title {
    font-size: 16px;
    font-weight: 600;
}
.reseller-addon-plan-card__code {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.reseller-addon-plan-card__save {
    margin-left: auto;
}
.reseller-addon-plan-card__rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.reseller-addon-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-border, rgba(255,255,255,0.06));
}
.reseller-addon-row:last-child { border-bottom: none; }
.reseller-addon-row__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.reseller-addon-row__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.reseller-addon-row__name {
    font-weight: 500;
    font-size: 14px;
}
.reseller-addon-row__desc {
    font-size: 12px;
    line-height: 1.5;
}
.reseller-addon-row__hint {
    font-size: 11px;
}
.reseller-addon-row__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
    align-items: flex-end;
}
.reseller-addon-row__price-lbl {
    font-size: 11px;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
}
.reseller-addon-row__price--free {
    font-size: 12px;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    font-style: italic;
    align-self: center;
}
.reseller-addon-credit-input {
    width: 100px;
    text-align: right;
    padding: 6px 10px;
    font-size: 13px;
}

/* 2c.26.4 Etappe 3: Hint-Text in Lead-Suche-Cards (ersetzt Inline-Styles).
   2d.2.1 Etappe 4: !important wegen globaler .muted-Konflikte
   (style.css mehrere .muted-Defs setzen color/font-size). Permanenter
   Cleanup geplant in 2c.27.3 (globale Token-Migration). */
.import-card-hint {
    font-size: 14px !important;
    margin-bottom: 14px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.5 !important;
}
:root[data-theme="light"] .import-card-hint {
    color: rgba(20, 20, 28, 0.72) !important;
}
/* 2d.2.1 Etappe 4: Field-Hints in Lead-Suche-Cards */
.import-search-card .field-hint {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.5 !important;
}
:root[data-theme="light"] .import-search-card .field-hint {
    color: rgba(20, 20, 28, 0.68) !important;
}
:root[data-theme="light"] .import-card-icon {
    background: rgba(42, 52, 176, 0.10);
    color: var(--color-brand-primary, #2a34b0);
}

/* 2-Spalten-Grid statt 4. form-row-wide spannt beide Spalten. */
.import-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
.import-search-grid .form-row-wide {
    grid-column: 1 / -1;
}
/* 2d.4.6 Etappe 1: Region-Grid 3 Spalten (Land/Bundesland/Stadt),
   Kreis-Feld ist raus. Andere import-search-grids bleiben 2-spaltig. */
.import-region-grid {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 960px) {
    .import-region-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 720px) {
    .import-search-grid {
        grid-template-columns: 1fr;
    }
    .import-region-grid {
        grid-template-columns: 1fr;
    }
}
.import-search-grid .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.import-search-grid .form-row label {
    /* 2c.26.4 Etappe 3: groessere Schrift + besserer Kontrast.
       2d.2 Etappe 3: !important wegen .field-label-Konflikt
       (style.css:3972). */
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, rgba(255,255,255,0.78)) !important;
    font-weight: 700;
}
.import-search-grid .field-hint {
    /* 2c.26.4 Etappe 3: lesbarer Hint-Text.
       2d.2 Etappe 3: !important wegen globalem field-hint-Override. */
    font-size: 13px !important;
    color: var(--color-text-secondary, rgba(255,255,255,0.62)) !important;
}
.import-search-grid .form-row-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 6px 0;
}
.import-search-grid .check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-primary, rgba(255,255,255,0.95));
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* Glass-Select fuer Land/Bundesland/Kreis (styled-native: appearance
   none + Brand-BG + Custom-Caret per inline-SVG). Ein-Klick-Auswahl-
   Selects brauchen kein echtes Custom-Dropdown. */
select.pulse-glass-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Sweep 2d.5.10.C4.1 Etappe 2: Self-contained Box-Modell. Die
     * globalen select-Defaults sind ab jetzt mit :not(.pulse-glass-
     * select) ausgenommen, also muss diese Regel die komplette Box
     * selbst stellen (vorher kam height/padding aus dem Premium-
     * Forms-Block durch). */
    height: 40px;
    padding: 0 36px 0 var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.04);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c75e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
    color: var(--color-text-primary, rgba(255,255,255,0.92));
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
select.pulse-glass-select:hover {
    border-color: rgba(79, 126, 219, 0.35) !important;
    background-color: rgba(255, 255, 255, 0.06);
}
select.pulse-glass-select:focus {
    border-color: rgba(79, 126, 219, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.18) !important;
    outline: 0 !important;
}
select.pulse-glass-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
select.pulse-glass-select option {
    background: var(--color-bg-elevated, rgba(20, 20, 28, 0.96));
    color: var(--color-text-primary, rgba(255,255,255,0.92));
}
:root[data-theme="light"] select.pulse-glass-select {
    background-color: rgba(0, 0, 0, 0.03);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232a34b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1a1a1a !important;
}
:root[data-theme="light"] select.pulse-glass-select:focus {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.16) !important;
}

/* Glass-Range (Mindest-Bewertung-Slider) */
input[type="range"].pulse-glass-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    outline: 0;
}
input[type="range"].pulse-glass-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-brand-light, #7ab8f0);
    border: 2px solid var(--color-bg-elevated, #1a1a1f);
    cursor: pointer;
    transition: transform 120ms ease;
}
input[type="range"].pulse-glass-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
input[type="range"].pulse-glass-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-brand-light, #7ab8f0);
    border: 2px solid var(--color-bg-elevated, #1a1a1f);
    cursor: pointer;
}
:root[data-theme="light"] input[type="range"].pulse-glass-range {
    background: rgba(0, 0, 0, 0.10);
}
:root[data-theme="light"] input[type="range"].pulse-glass-range::-webkit-slider-thumb {
    background: var(--color-brand-primary, #2a34b0);
    border-color: #fff;
}

/* Autocomplete-Vorschlagsbox fuer Stadt + Kategorie — dunkles Glass
   statt weiss-on-light. Vorher: inline style mit hellem BG, kaum lesbar
   im Dark-Mode. */
.lead-autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 280px;
    overflow-y: auto;
    background: var(--color-bg-elevated, rgba(20, 20, 28, 0.96)) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 4px;
}
.lead-autocomplete-list .autocomplete-item {
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border-bottom: 0 !important;
    color: var(--color-text-primary, rgba(255,255,255,0.92)) !important;
    background: transparent !important;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    font-size: 13px;
}
.lead-autocomplete-list .autocomplete-item:hover {
    background: rgba(79, 126, 219, 0.18) !important;
    color: var(--color-brand-light, #7ab8f0) !important;
}
:root[data-theme="light"] .lead-autocomplete-list {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
:root[data-theme="light"] .lead-autocomplete-list .autocomplete-item {
    color: #1a1a1a !important;
}
:root[data-theme="light"] .lead-autocomplete-list .autocomplete-item:hover {
    background: rgba(42, 52, 176, 0.08) !important;
    color: var(--color-brand-primary, #2a34b0) !important;
}

/* Profile-Toggle-Bar oben im Lead-Suche-Tab */
.import-profile-toggle {
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(79, 126, 219, 0.06);
    border: 1px solid rgba(79, 126, 219, 0.18);
}
.import-profile-toggle-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.import-profile-toggle-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-primary, rgba(255,255,255,0.92));
}
.import-profile-toggle-option input[type="radio"] {
    accent-color: var(--color-brand-light, #7ab8f0);
}
.import-profile-toggle-hint {
    font-size: 12px;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    margin-top: 6px;
    font-style: italic;
}
:root[data-theme="light"] .import-profile-toggle {
    background: rgba(42, 52, 176, 0.04);
    border-color: rgba(42, 52, 176, 0.18);
}

/* ============================================================
   Sweep 2c.26.1 Etappe 3 — CSV-Wizard-Modal + Result-Box
   ============================================================ */
.csv-wizard-modal {
    color: var(--color-text-primary, rgba(255,255,255,0.92));
}
.csv-wizard-section {
    margin-bottom: 18px;
}
.csv-wizard-section h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    margin: 0 0 10px;
    font-weight: 700;
}
.csv-wizard-table-wrap {
    max-height: 240px;
    overflow: auto;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
}
.csv-wizard-table,
.csv-wizard-mapping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.csv-wizard-table th,
.csv-wizard-mapping-table th {
    text-align: left;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    font-weight: 600;
    color: var(--color-text-muted, rgba(255,255,255,0.65));
}
.csv-wizard-table td,
.csv-wizard-mapping-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: middle;
}
.csv-wizard-mapping-table td:first-child {
    width: 40%;
}

/* Sweep 2c.26.2 Etappe 4: Stage-2-Felder visuell markieren + Sample-Wert. */
.csv-wizard-mapping-row.csv-wizard-row-stage2 {
    background: rgba(79, 126, 219, 0.05);
}
.csv-wizard-source-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.csv-wizard-sample {
    font-size: 11px;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    font-style: italic;
    font-family: var(--font-mono, monospace);
}
.csv-wizard-stage2-hint {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(79, 126, 219, 0.08);
    border: 1px solid rgba(79, 126, 219, 0.18);
    color: var(--color-text-primary, rgba(255,255,255,0.92));
    font-size: 12px;
    margin-bottom: 12px;
}
.csv-wizard-stage2-ok {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}
:root[data-theme="light"] .csv-wizard-stage2-hint {
    background: rgba(42, 52, 176, 0.06);
    border-color: rgba(42, 52, 176, 0.20);
    color: #1a1a1a;
}
:root[data-theme="light"] .csv-wizard-stage2-ok {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.30);
    color: #15803d;
}

/* Auto-Verifikation-Checkbox prominenter */
.csv-wizard-options {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.csv-wizard-check-prominent {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    line-height: 1.5;
}
.csv-wizard-check-prominent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-brand-light, #7ab8f0);
    margin-top: 2px;
    flex-shrink: 0;
}
:root[data-theme="light"] .csv-wizard-options {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .csv-wizard-table th,
:root[data-theme="light"] .csv-wizard-mapping-table th {
    background: rgba(0,0,0,0.04);
    border-bottom-color: rgba(0,0,0,0.10);
    color: rgba(0,0,0,0.65);
}
:root[data-theme="light"] .csv-wizard-table td,
:root[data-theme="light"] .csv-wizard-mapping-table td {
    border-bottom-color: rgba(0,0,0,0.06);
}
:root[data-theme="light"] .csv-wizard-table-wrap {
    border-color: rgba(0,0,0,0.10);
}

/* Result-Box nach Import — dunkles Glass-Card statt hellgrau-on-light */
.csv-result-card {
    margin-top: 16px;
    padding: 18px 22px;
    border-radius: 12px;
    background: rgba(79, 126, 219, 0.06);
    border: 1px solid rgba(79, 126, 219, 0.20);
    color: var(--color-text-primary, rgba(255,255,255,0.92));
}
.csv-result-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-brand-light, #7ab8f0);
}
.csv-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.csv-result-grid > div {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
}
.csv-result-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    font-weight: 700;
    margin-bottom: 4px;
}
.csv-result-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary, rgba(255,255,255,0.95));
}
/* Sweep 2.8.a Etappe D: Severity-Color-Coding fuer Stat-Werte > 0.
   Inactive (= 0) bleibt Default-Text-Primary -- der Eindruck "nichts
   passiert" soll nicht hervorgehoben werden. */
.csv-result-value--success { color: var(--color-success, #4ade80); }
.csv-result-value--info { color: var(--color-brand-mid, #7ab8f0); }
.csv-result-value--warning { color: var(--color-warning, #f4b860); }
.csv-result-value--error { color: var(--color-danger, #f87171); }
:root[data-theme="light"] .csv-result-card {
    background: rgba(42, 52, 176, 0.04);
    border-color: rgba(42, 52, 176, 0.20);
    color: #1a1a1a;
}
:root[data-theme="light"] .csv-result-grid > div {
    background: rgba(0, 0, 0, 0.03);
}
:root[data-theme="light"] .csv-result-value {
    color: #1a2280;
}
:root[data-theme="light"] .csv-result-title {
    color: var(--color-brand-primary, #2a34b0);
}

/* Phase 2b.9.1 E: Konsolidierte horizontale Tab-Komponente
   .tabs.app-tabs - identisch zu .tabs.leads-tabs (Import) +
   .settings-app-tabs (Settings). */
.tabs.app-tabs {
    display: flex;
    gap: 4px;
    margin: 8px 0 16px;
    border-bottom: 1px solid var(--slate-200);
    overflow-x: auto;
    flex-wrap: nowrap;
}
.tabs.app-tabs .tab-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    color: var(--slate-500);
    white-space: nowrap;
    flex-shrink: 0;
}
.tabs.app-tabs .tab-btn:hover { color: var(--slate-900); }
.tabs.app-tabs .tab-btn.active {
    color: var(--slate-900);
    font-weight: 600;
    border-bottom-color: var(--primary);
}

/* Settings: layout-horizontal stack die Tabs oben, Content darunter. */
.settings-layout-horizontal {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.settings-layout-horizontal .settings-content {
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 16px;
    margin: 12px 0;
}
.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row-wide { grid-column: span 2; position: relative; }
.form-row-checks { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 12px; }
.form-row label { font-size: 12px; color: #71717A; }
.form-row select, .form-row input[type="text"], .form-row input[type="number"] {
    padding: 8px 10px;
    border: 1px solid #E4E4E7;
    border-radius: 6px;
    font-size: 14px;
}
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.form-actions { display: flex; gap: 8px; margin: 12px 0; }
.leads-preview-banner {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
}
.leads-preview-banner.loading { background: #F4F4F5; color: #71717A; }
.leads-preview-banner.ok { background: #E0F2FE; color: #075985; }
.leads-preview-banner.err { background: #FEE2E2; color: #991B1B; }
.leads-csv-result {
    /* Sweep 2.8.a Etappe D: alter Light-BG (#F4F4F5) + dark-mode
       Text-Inheritance erzeugte weisse Schrift auf hellem Grund
       (Mike-Screenshot). Container ist jetzt Token-basiert; die
       innere .csv-result-card uebernimmt komplettes Styling. */
    margin-top: 12px;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1.6;
}
.leads-pool-table { margin-top: 12px; }
.lead-pool-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.lead-pool-tbl th, .lead-pool-tbl td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #F4F4F5;
}
.lead-pool-tbl th {
    color: #71717A;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lead-pool-tbl tbody tr:hover { background: #FAFAFA; }
.badge-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}
.badge-pending { background: #FEF3C7; color: #92400E; }
.badge-verified_ok { background: #DCFCE7; color: #15803D; }
.badge-disqualified { background: #FEE2E2; color: #991B1B; }
.badge-pushed_to_crm { background: #DBEAFE; color: #1E40AF; }
/* Sweep 2d.5.8.4 Etappe 2: .muted nutzt Token --color-text-tertiary
   (theme-aware + WCAG-AA-Konform auf dunkler Card-BG). Vorher
   #71717A war ein globaler Festwert ohne Dark-Mode-Anpassung. */
.muted { color: var(--color-text-tertiary, rgba(255, 255, 255, 0.70)); font-size: 13px; }

/* Phase 2b.1: Reseller-Dashboard */
.card-body { padding: 12px 0 0 0; }
.kv-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f3f4f6; font-size: 14px; }
.kv-row:last-child { border-bottom: none; }
.kv-key { color: #71717A; }
.kv-val { font-weight: 500; }
.error-text { color: #dc2626; font-size: 13px; }
.data-table { border-collapse: collapse; }
.data-table th, .data-table td { padding: 8px 12px; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.data-table th { font-weight: 600; color: #52525B; text-align: left; }

/* ============================================================
   Phase 2b.3: Pulse KI - Chat-Tab + Mini-Widget
   ============================================================ */

/* Sidebar-Glow */
.nav-pulse {
    position: relative;
}
.nav-pulse::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 60%;
    background: linear-gradient(180deg, #7c3aed, #06b6d4);
    border-radius: 0 2px 2px 0;
    opacity: 0.7;
}
@keyframes pulse-glow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.nav-pulse:not(.active)::before { animation: pulse-glow 2.5s ease-in-out infinite; }

/* 2c.24: Phase-2b.3-Bubble-API komplett entfernt - die Klassen
   .pulse-layout, .pulse-conversations*, .pulse-main, .pulse-chat-
   header, .pulse-title, .pulse-subtitle, .pulse-messages, .pulse-msg
   (+ Modifier .user/.assistant/.tool/.error/.streaming), .pulse-
   quick-actions, .pulse-input-form, .pulse-tool-card (+ Subklassen),
   .pulse-spinner und .btn-block werden seit 2c.22 vom .pulse-conv-*-
   Layout abgeloest und sind in keinem HTML/JS mehr referenziert.
   Frueher hier ~200 Zeilen Bubble-Styles + Tool-Card-Styles + Spinner
   + 2 Keyframes (pulse-spin, pulse-cursor, pulse-slide-up).
   .pulse-conv-* lebt weiter unten in Phase-2c.22a-Block (Z6017+). */

/* Phase 2b.4 E: Conversation-Sidebar */
.pulse-conv-search {
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid #d4d4d8;
    border-radius: 6px;
    font-size: 13px;
}
.pulse-conv-archive-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #71717A;
    cursor: pointer;
}
.pulse-conv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pulse-conv-item.archived {
    opacity: 0.6;
    font-style: italic;
}
.pulse-conv-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pulse-conv-title mark {
    background: #fef08a;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}
/* 2c.23b: alte Phase-2b.4-Variante des Hover-Buttons im Light-Mode.
   Klasse wurde umbenannt von .pulse-conv-delete -> .pulse-conv-action,
   damit die Aktion nicht mehr als "Loeschen" missverstanden wird. */
.pulse-conv-action {
    background: transparent;
    border: none;
    color: #71717a;
    cursor: pointer;
    opacity: 0;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 13px;
    transition: opacity 0.15s ease;
}
.pulse-conv-item:hover .pulse-conv-action { opacity: 1; }

/* Phase 2b.4 F: Settings-Layout mit Anchor-Sidebar */
.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}
.settings-anchor-nav {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: white;
    border: 1px solid #e4e4e7;
    border-radius: 8px;
}
.settings-anchor-link {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: #52525B;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.15s ease;
}
.settings-anchor-link:hover { background: #f3f4f6; color: #18181B; }
.settings-anchor-link.active { background: #e0e7ff; color: #1e3a8a; font-weight: 600; }
.settings-anchor-danger { color: #dc2626; }
.settings-anchor-danger.active { background: #fee2e2; color: #991b1b; }
.settings-content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings-content > section { scroll-margin-top: 80px; }
.settings-danger-card { border-left: 4px solid #dc2626; }

@media (max-width: 768px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-anchor-nav { position: static; flex-direction: row; overflow-x: auto; }
}

/* ============================================================
   Phase 2b.4 G: UX/UI-Pass
   ============================================================ */

/* G3 Sidebar: Active-State + Hover-Polish */
.nav-item {
    transition: background var(--duration-fast) var(--easing-default),
                color var(--duration-fast) var(--easing-default),
                transform var(--duration-fast) var(--easing-default);
}
.nav-item:hover { transform: translateX(2px); }
.nav-item.active::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 3px;
    background: white;
    border-radius: 2px 0 0 2px;
}

/* G4 Dashboard-KPI-Cards Polish */
.stat-card {
    transition: transform var(--duration-default) var(--easing-default),
                box-shadow var(--duration-default) var(--easing-default);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* G5 + G6 Cards generell */
.card {
    border-radius: var(--radius-lg) !important;
    transition: box-shadow var(--duration-default) var(--easing-default);
}
.card:hover { box-shadow: var(--shadow-md); }

/* G7 Buttons Polish */
.btn {
    transition: transform var(--duration-fast) var(--easing-default),
                box-shadow var(--duration-fast) var(--easing-default),
                background var(--duration-fast) var(--easing-default);
}
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn:active:not(:disabled) { transform: translateY(0); }

/* G14 Toasts Modernisieren */
.toast {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid var(--border) !important;
    animation: toast-slide-in 280ms var(--easing-spring);
}
.toast.success { border-left: 4px solid var(--success) !important; }
.toast.error { border-left: 4px solid var(--error) !important; }
.toast.warn,
.toast.warning { border-left: 4px solid var(--warning) !important; }
.toast.info { border-left: 4px solid var(--info) !important; }
@keyframes toast-slide-in {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* G15 Skeleton-Loader */
.skeleton {
    background: linear-gradient(90deg, #f0f0f3 0%, #f8f8fa 50%, #f0f0f3 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
    border-radius: var(--radius-md);
    height: 14px;
    margin: 4px 0;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* G16 Empty-States */
.empty-state {
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--text-mid);
}
.empty-state-icon {
    width: 72px; height: 72px;
    margin: 0 auto var(--space-4) auto;
    background: var(--primary-50);
    color: var(--primary);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}
.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-2);
}
.empty-state-body { font-size: 14px; margin-bottom: var(--space-6); }

/* G17 Module-Transitions */
.module {
    animation: module-fade-in var(--duration-slow) var(--easing-default);
}
@keyframes module-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 2c.23.5: Pulse-KI Container — Modul-konsistent.
   Frueher mehrere Versuche (position:fixed, height-calc, Outer-Card-
   Wrapper). Mike's letzter Befund: m-pulse soll wie Dashboard / Pool /
   Pipeline aussehen - selbe Wrapper-Tiefe, selbes Padding, selbe
   max-width. Daher KEIN eigener padding/margin/max-width-Override und
   keine fixed-Position mehr. Standard-Module-Constraints aus den
   .module-Klassen-Regeln greifen.
   Background-Gradient bleibt als subtiler Pulse-Akzent. */
#m-pulse {
    background: linear-gradient(180deg, var(--bg) 0%, var(--primary-50) 100%);
}


/* 2c.24: .pulse-msg.user / .pulse-msg.assistant geloescht (tote
   Bubble-API, ersetzt durch .pulse-conv-msg). */

/* Phase 2c.18c: G10 Mini-Widget-Heartbeat-Override entfernt
   (.pulse-widget / .pulse-widget-bubble / @keyframes pulse-heartbeat).
   Bezogen sich auf alten Phase-2b.3-Bubble der jetzt weg ist. */

/* G11 Login-Seite Polish */
.auth-overlay {
    background: linear-gradient(135deg, var(--bg) 0%, var(--primary-50) 50%, var(--accent-light) 100%) !important;
}
.auth-card {
    box-shadow: var(--shadow-xl) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border) !important;
}

/* G12 Branchen-Korrektur Override-Badge */
.industry-override-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--accent-light);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    margin-left: var(--space-2);
}

/* G18 Mobile Responsiveness */
@media (max-width: 768px) {
    .app { grid-template-columns: 1fr !important; }
    .sidebar {
        position: fixed;
        left: -260px;
        top: 0; bottom: 0;
        width: 240px;
        z-index: 1000;
        transition: left var(--duration-default) var(--easing-default);
    }
    .sidebar.open { left: 0; }
    .lead-pool-tbl { display: block; overflow-x: auto; }
    .modal { width: 95vw !important; max-width: 95vw !important; }
}

/* Burger-Button (klein, mobil-only) */
.mobile-burger {
    display: none;
    position: fixed;
    top: 12px; left: 12px;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: white;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 1001;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) { .mobile-burger { display: flex; } }

/* G14 Quick-Filter-Chips */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: white;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-size: 12px;
    color: var(--text-mid);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-default);
}
.filter-chip:hover { background: var(--primary-50); border-color: var(--primary-200); color: var(--primary); }
.filter-chip.active { background: var(--primary); border-color: var(--primary); color: white; }

/* Avatar/Initials. 2b.8 A6: 8 deterministische Tints aus Firma-Hash. */
.avatar-initial {
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: var(--primary-50);
    color: var(--primary);
    flex-shrink: 0;
}
.avatar-initial.hue-0 { background: #eef0fc; color: #2a34b0; }   /* primary-blue */
.avatar-initial.hue-1 { background: #fef3c7; color: #b45309; }   /* amber */
.avatar-initial.hue-2 { background: #d1fae5; color: #047857; }   /* emerald */
.avatar-initial.hue-3 { background: #fee2e2; color: #b91c1c; }   /* rose */
.avatar-initial.hue-4 { background: #ede9fe; color: #6d28d9; }   /* violet */
.avatar-initial.hue-5 { background: #cffafe; color: #0e7490; }   /* cyan */
.avatar-initial.hue-6 { background: #fce7f3; color: #be185d; }   /* pink */
.avatar-initial.hue-7 { background: #f1f5f9; color: #475569; }   /* slate */

/* Reseller-Card-Header mit Icons */
.reseller-card-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--primary-50);
    color: var(--primary);
    margin-right: var(--space-3);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Phase 2b.5 — Typography-Pass nach web-typography Skill
   Korrigiert Halbpixel + setzt Reading-Hierarchie.
   ============================================================ */

/* Headings: tight line-height, negative tracking, klare Skala */
h1, .h1 { font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 700; }
h2, .h2 { font-size: var(--text-2xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; }
h3, .h3 { font-size: var(--text-xl);  line-height: var(--lh-tight); font-weight: 600; }
h4, .h4 { font-size: var(--text-lg);  line-height: var(--lh-snug);  font-weight: 600; }

/* Module-Title: einheitlich 24px (war 28px) - weniger Sprung zum Body */
.module-title { font-size: var(--text-2xl) !important; font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.module-subtitle { font-size: var(--text-sm) !important; color: var(--text-mid) !important; line-height: var(--lh-normal) !important; }

/* Card-Titles: 18px, semibold */
.card-title { font-size: var(--text-lg) !important; font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.card-subtitle { font-size: var(--text-sm); color: var(--text-mid); line-height: var(--lh-normal); }

/* Stat-Cards: KPI groß (30px statt 32), Label uppercase-small (refactoring-ui §1) */
.stat-value { font-size: var(--text-3xl) !important; line-height: var(--lh-tight) !important; font-weight: 700; letter-spacing: var(--tracking-tight); }
.stat-label {
    font-size: var(--text-2xs) !important;
    color: var(--text-mid) !important;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: 600;
}
.stat-trend { font-size: var(--text-xs); color: var(--text-soft); }

/* Tabellen-Headers UPPERCASE-SMALL (refactoring-ui table-pattern) */
.lead-pool-tbl thead th,
.data-table thead th {
    font-size: var(--text-2xs) !important;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-mid) !important;
    font-weight: 600;
}
/* Tabellen-Body: 14px (etwas dichter), tabular nums */
.lead-pool-tbl tbody td,
.data-table tbody td {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

/* Form-Labels: small UPPER (refactoring-ui label-demphasis) */
.field-label,
.bl-section-title {
    font-size: var(--text-xs) !important;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-mid) !important;
    font-weight: 600;
}
.field-hint,
.bl-section-hint { font-size: var(--text-xs) !important; color: var(--text-soft) !important; }

/* Inputs / Selects: 15px (lesbar) */
.input, .select, textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
    font-size: var(--text-base) !important;
}

/* Buttons: konsistente Skala */
.btn { font-size: var(--text-sm) !important; font-weight: 500; line-height: 1; letter-spacing: 0; }
.btn-large { font-size: var(--text-base) !important; padding: var(--space-3) var(--space-5); }

/* 2c.24: alte .pulse-msg-Reading-Overrides geloescht (tot). */

/* kv-row: konsistente Größe (war 14px) */
.kv-row { font-size: var(--text-sm); padding: 8px 0; }
.kv-key { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-mid); font-weight: 600; }
.kv-val { color: var(--text); font-weight: 500; }

/* Sidebar-Logo bleibt display-font, aber konsistente Größen */
.logo-mark { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.logo-sub { font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); }

/* Sidebar-Nav-Items: 14px (war 13.5) */
.nav-item { font-size: var(--text-sm) !important; }
.nav-section { font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* Tabs */
.tab-btn { font-size: var(--text-sm); font-weight: 500; }

/* Muted — Sweep 2d.5.8.4 Etappe 2: auf token-basiert + theme-aware. */
.muted { font-size: var(--text-xs); color: var(--color-text-tertiary, rgba(255, 255, 255, 0.70)); line-height: var(--lh-normal); }

/* 2c.24: alte .pulse-tool-* Type-Overrides geloescht (tot,
   ersetzt durch .pulse-conv-tool-*). */

/* Squint-Test: Tabellen-Cell-Height angemessen */
.lead-pool-tbl tbody td,
.data-table tbody td { padding: var(--space-3) var(--space-4); line-height: var(--lh-snug); }
.lead-pool-tbl thead th,
.data-table thead th { padding: var(--space-3) var(--space-4); }

/* ============================================================
   Phase 2b.5 — Color-Pass nach refactoring-ui §4
   Pure grays → saturated slate (cool tint).
   ============================================================ */

/* Globale Default-Verschiebungen: alle pure-gray-Hexes auf slate.
   Sweep 2d.5.8.4 Etappe 2: token-basiert auf neuen tertiary-Token. */
.muted { color: var(--color-text-tertiary, rgba(255, 255, 255, 0.70)); }

/* Borders: pure-gray (#e4e4e7) → slate-200 */
.card,
.modal,
.input,
.select,
textarea {
    border-color: var(--border) !important;
}

/* Sidebar-User-Avatar: nicht mehr pure rgba(255,255,255,0.1) */
.user-avatar {
    background: rgba(255,255,255,0.12);
    color: white;
    font-weight: 600;
}

/* Reseller-Card-Icons: Größen reduzieren auf konsistent (war 36px überall) */
.reseller-card-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    border-radius: var(--radius-md) !important;
}

/* Card-Titles: Icon + Text inline-flex statt margin-right */
.card-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.card-title .reseller-card-icon { margin: 0; }

/* Status-Badges: konsistente Farbgebung mit slate-Saturation */
.badge-status {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    line-height: 1.5;
}
.badge-pending,
.badge-status.badge-pending { background: var(--warning-bg); color: #92400e; }
.badge-verified_ok,
.badge-status.badge-verified_ok { background: var(--success-bg); color: #15803d; }
.badge-disqualified,
.badge-status.badge-disqualified { background: var(--error-bg); color: #991b1b; }
.badge-pushed_to_crm,
.badge-status.badge-pushed_to_crm { background: var(--info-bg); color: #1e40af; }

/* Tabellen-Hover (Recognition statt Recall, ux-heuristics #6) */
.lead-pool-tbl tbody tr:hover,
.data-table tbody tr:hover { background: var(--slate-50); }
.lead-pool-tbl tbody tr,
.data-table tbody tr {
    border-top: 1px solid var(--border);
    transition: background var(--duration-fast) var(--easing-default);
}

/* Card-Background subtiler unterscheiden vom Page-bg */
.card {
    background: var(--card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

/* ============================================================
   Phase 2b.5 — Spacing-Pass nach refactoring-ui §2
   Generous whitespace, konstante Card-Paddings, Group-Spacing.
   ============================================================ */

/* Card-Innenabstand: einheitlich --space-6 (24px) */
.card { padding: var(--space-6) !important; }
.card .card-title + .card-subtitle { margin-bottom: var(--space-4); }
.card-body { padding-top: var(--space-3) !important; }

/* Stat-Cards: Innen-Padding harmonisiert */
.stat-card { padding: var(--space-5) !important; }

/* Module-Header: vertikales Padding */
.module-header { padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6); }
.module > .card,
.module > section.card { margin-bottom: var(--space-4); }
/* 2c.23.6: #m-pulse aus dem :not()-Filter entfernt - das Standard-
   Modul-Padding (0 24 24 24) gilt jetzt auch fuer m-pulse.
   Sweep 2d.5.6 Etappe 2: m-verify aus dem :not()-Filter entfernt —
   sonst sass der Verifikations-Header 32px tiefer als der Lead-
   Uebersicht-Hero (Mike's Live-Test 2d.5.4 Punkt 1, vertikale
   Position). Jetzt: kein top-Padding, alle Module starten gleich. */
.module {
    padding: 0 var(--space-6) var(--space-6) var(--space-6);
}

/* Settings-Layout etwas mehr Luft */
.settings-content { gap: var(--space-6) !important; }

/* Sidebar-Items: dichter aber nicht beengt */
.nav-item { padding: 9px var(--space-3); border-radius: var(--radius-md); }
.nav-section { padding: var(--space-4) var(--space-3) var(--space-1) var(--space-3); }

/* Form-Felder: mehr Luft nach Label */
.field { margin-bottom: var(--space-4); }
.field-label { margin-bottom: var(--space-2); display: block; }

/* Buttons: Padding-Skala konsistent */
.btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); gap: 6px; }
.btn-primary, .btn-secondary, .btn-danger { padding: 9px var(--space-4); }

/* Filter-Chip: kompakt aber lesbar */
.filter-chip { padding: 5px var(--space-3); font-size: var(--text-xs); font-weight: 500; }

/* Reseller-Cards-Grid: mehr Luft */
.cards-grid { gap: var(--space-4) !important; }

/* Lead-Pool-Tabelle: zwischen Filter-Bar und Table */
#leadsPoolTable > .lead-pool-tbl { margin-top: var(--space-3); }

/* 2c.24: .pulse-messages / .pulse-input-form Spacing-Overrides
   geloescht (tote Bubble-API-Klassen). */

/* Reseller-Card-Body: weniger gedrungen */
#resellerLlmCard .kv-row,
#resellerAccountBody .kv-row,
#resellerTodayBody .kv-row,
#resellerRangeBody .kv-row { padding: 6px 0; }

/* ============================================================
   Phase 2b.5 — Component-Konsistenz
   Buttons / Inputs / Modals / Toasts harmonisieren.
   ============================================================ */

/* Buttons: 3 feste Größen + 4 Variants */
.btn-sm { padding: 5px 10px; font-size: var(--text-xs) !important; }
.btn-md, .btn { padding: 9px var(--space-4); }
.btn-lg, .btn-large { padding: 11px var(--space-5); font-size: var(--text-base) !important; }

.btn-primary {
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
}
.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-secondary {
    background: white;
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--slate-50);
    border-color: var(--slate-400);
}
.btn-danger {
    background: var(--error);
    color: white;
    border: 1px solid var(--error);
}
.btn-danger:hover:not(:disabled) { background: #b91c1c; }

.btn-ghost {
    background: transparent;
    color: var(--text-mid);
    border: 1px solid transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--slate-100); color: var(--text); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Inputs: konsistente Höhe + Focus */
.input, .select, textarea {
    background: white;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 9px var(--space-3);
    color: var(--text);
    transition: border-color var(--duration-fast) var(--easing-default),
                box-shadow var(--duration-fast) var(--easing-default);
}
.input:focus, .select:focus, textarea:focus,
input:focus, input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="number"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--info-bg);
}

/* Modal: konsistente Schatten + Radius */
.modal {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    padding: var(--space-6) !important;
    border: 1px solid var(--border);
}
.modal h3 {
    font-size: var(--text-xl) !important;
    font-weight: 600;
    line-height: var(--lh-tight);
    margin-bottom: var(--space-2);
}

/* Confirmation-Modal-Body */
.modal p {
    color: var(--text-mid);
    line-height: var(--lh-normal);
    margin-bottom: var(--space-4);
}

/* ============================================================
   Sweep 3.0.e.2 L1 — Wurzelfix: .modal p ueberschreibt sonst die
   Editor- und Picker-Texte in Glass-Card-Modals (Compose, Reply,
   Bulk) mit Mid-Tone-Grau auf dunklem Glass-Background — unlesbar.
   Theme-aware Token --color-text-primary (Dark=weiss, Light=dunkel).
   Spezifitaet (0,2,1) schlaegt .modal p (0,1,1).
   KEINE violetten Farben.
   ============================================================ */
.modal.pulse-glass-card p,
.modal .pulse-mail-body-editor p,
.modal .signature-edit-area,
.modal .signature-edit-area p,
.modal .signature-edit-area div,
.modal .signature-edit-area span,
.modal .signature-preview-area,
.modal .signature-preview-area p,
.modal .reply-ai-tab-panel__body,
.modal .reply-ai-tab-panel__body p,
.modal .reply-ai-tab-panel__subject {
    color: var(--color-text-primary);
}

/* Toast: konsistente Größe */
.toast {
    padding: var(--space-3) var(--space-4) !important;
    font-size: var(--text-sm) !important;
    line-height: var(--lh-normal);
    min-width: 280px;
    background: white !important;
    color: var(--text) !important;
}

/* Tabellen: einheitlicher Look */
.lead-pool-tbl, .data-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
/* Sweep 2d.5.10.C8.7 Teil B.1: kein eigener thead-BG-Container.
   Vorher --slate-50; aktuell transparent (gleich wie Body). */
.lead-pool-tbl thead, .data-table thead {
    background: transparent;
}
.lead-pool-tbl thead th, .data-table thead th {
    border-bottom: 1px solid var(--border);
    text-align: left;
}

/* Settings-Anchor-Sidebar konsistent */
.settings-anchor-link {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
}

/* 2c.24: .pulse-msg / .pulse-tool-card Radius-Overrides geloescht
   (tot - .pulse-conv-* hat eigene Radius-Werte). */

/* Sidebar-Active-State (ux-heuristics #6 Recognition).
   Sweep 2d.5.7.1 Etappe 4a: Brand-Mid-Akzent als Border-Left.
   Macht den aktiven Sidebar-Eintrag eindeutig als Brand-Akzent
   sichtbar — vorher war nur ein heller weisser Layer ohne Brand-Hue. */
.nav-item.active {
    background: rgba(255,255,255,0.1) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--color-brand-mid, #4f7edb),
                0 1px 2px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ============================================================
   Phase 2b.5 P6 - Heuristik-Pass (ux-heuristics + Krug)
   ============================================================ */

/* Nielsen #4 Consistency: Legacy-Empty-States auf Design-System-Tokens */
.run-row-empty,
.pruefung-empty,
.audit-empty {
    color: var(--text-mid) !important;
    font-size: var(--text-sm) !important;
    line-height: var(--lh-normal);
    padding: var(--space-8) var(--space-4) !important;
}

/* Nielsen #5 Error Prevention: Inline-Validation visuell.
   .touched wird im JS gesetzt nachdem ein Feld einmal blur-t hatte -
   verhindert dass leere Felder beim ersten Render rot leuchten. */
input.touched:invalid,
select.touched:invalid,
textarea.touched:invalid {
    border-color: var(--error) !important;
    background: var(--error-bg, #fef2f2);
}
input.touched:invalid:focus,
select.touched:invalid:focus,
textarea.touched:invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Nielsen #1 Visibility of System Status: Inline-Hilfetext unter Inputs */
.field-hint {
    font-size: var(--text-xs);
    color: var(--text-mid);
    margin-top: var(--space-1);
    line-height: var(--lh-normal);
}
.field-error {
    font-size: var(--text-xs);
    color: var(--error);
    margin-top: var(--space-1);
    line-height: var(--lh-normal);
    font-weight: 500;
}

/* Krug: konsistente "Action-Hint"-Zeile in Toasts/Banners */
.toast-action-hint,
.error-action-hint {
    display: block;
    font-size: var(--text-xs);
    opacity: 0.85;
    margin-top: var(--space-1);
    font-weight: 400;
}

/* Nielsen #1: Skeleton-Loader konsistent fuer Listen */
.list-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
}
.list-skeleton-row {
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--slate-100);
    background-image: linear-gradient(
        90deg,
        var(--slate-100) 0%,
        var(--slate-50) 50%,
        var(--slate-100) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

/* Focus-Visible-Ring konsistent ueberall (Nielsen #6 Recognition) */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================================
   Phase 2b.6 E1 - Sidebar Visual-Polish (A3 + A4 + A5)
   ============================================================
   Mike's Feedback:
   - lila->hellblau-Verlauf wirkt inkonsistent -> einheitliches slate-900
   - Active-Indicator zu auffaellig -> linker 3px primary, kein Verlauf
   - Badges (neu/bald/admin) optisch einheitlich
   - Icons konsistent outline (stroke-width 2)
   ============================================================ */

.sidebar {
    background: var(--slate-900) !important;
    color: white;
}
.sidebar::before { display: none !important; }

.logo-area {
    border-bottom: 1px solid var(--slate-800, #1e293b) !important;
    padding: var(--space-6) var(--space-5) var(--space-5) var(--space-5) !important;
}
.sidebar-footer {
    border-top: 1px solid var(--slate-800, #1e293b) !important;
}

.nav-section {
    color: var(--slate-400, #94a3b8) !important;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    padding: var(--space-4) var(--space-3) var(--space-1) var(--space-3) !important;
}

.nav-item {
    color: var(--slate-300, #cbd5e1) !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--text-sm) !important;
    font-weight: 500;
    transition: background var(--duration-fast) var(--easing-default),
                color var(--duration-fast) var(--easing-default),
                border-color var(--duration-fast) var(--easing-default) !important;
}
.nav-item:hover {
    background: rgba(30, 41, 59, 0.7) !important;
    color: white !important;
    transform: none !important;
}
.nav-item.active {
    background: var(--slate-800, #1e293b) !important;
    color: white !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--primary) !important;
    box-shadow: none !important;
}
/* Alte Indicator-Striche aus 2b.4 G3 + Anfangs-Stil entfernen */
.nav-item.active::before,
.nav-item.active::after {
    display: none !important;
    content: none !important;
}

.nav-icon {
    flex-shrink: 0;
    opacity: 0.9;
    color: currentColor;
}
.nav-item.active .nav-icon { opacity: 1; }

/* Badges einheitlich: gleicher Padding, Radius, Font, drei Varianten */
.nav-badge {
    margin-left: auto;
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    background: var(--slate-700, #334155) !important;
    color: var(--slate-300, #cbd5e1) !important;
}
.nav-badge.new {
    background: var(--primary) !important;
    color: white !important;
}
.nav-badge.soon {
    background: var(--slate-700, #334155) !important;
    color: var(--slate-300, #cbd5e1) !important;
}
.nav-badge.admin {
    background: rgba(234, 179, 8, 0.18) !important;
    color: #FBBF24 !important;
}
.nav-badge.count {
    background: var(--primary) !important;
    color: white !important;
}

/* Pulse-Glow im neuen Sidebar-Stil dezenter (ehemals knalliger Verlauf) */
.nav-pulse::before { display: none !important; }

.nav-item.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.nav-item.disabled:hover {
    background: transparent !important;
    color: var(--slate-300, #cbd5e1) !important;
}

/* Mobile-Drawer: gleicher Look (A6) */
@media (max-width: 768px) {
    .sidebar {
        background: var(--sidebar-grad) !important;
    }
}

/* ============================================================
   Phase 2b.7 A - Sidebar Branding zurueck zum Verlauf + Logo-Gold
   ============================================================
   Mike's Wunsch: der lila->dunkelblaue Verlauf war richtig - flat
   slate-900 wirkt zu kalt. Aktiv-Indicator + Badges in Logo-Gelb
   #eab107 als Brand-Farbe.
   ============================================================ */

:root {
    --logo-gold: #eab107;
    --logo-gold-dark: #b88806;
}

.sidebar {
    background: var(--sidebar-grad) !important;
}
/* Subtiler Glow wieder dazu (war in 2b.6 E1 versteckt) */
.sidebar::before {
    display: block !important;
    content: "" !important;
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.logo-area {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.nav-section {
    color: rgba(255,255,255,0.5) !important;
}

.nav-item {
    color: rgba(255,255,255,0.78) !important;
}
.nav-item:hover {
    background: rgba(255,255,255,0.06) !important;
    color: white !important;
}

.nav-item.active {
    background: rgba(255,255,255,0.08) !important;
    color: white !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--logo-gold) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Badges einheitlich, Akzent in Logo-Gold */
.nav-badge.new {
    background: var(--logo-gold) !important;
    color: var(--slate-900) !important;
}
.nav-badge.admin {
    background: var(--logo-gold) !important;
    color: var(--slate-900) !important;
}
.nav-badge.count {
    background: var(--logo-gold) !important;
    color: var(--slate-900) !important;
}
.nav-badge.soon {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.55) !important;
}

/* Pulse-Glow zurueckhaltend in Gold */
.nav-pulse:not(.active)::before {
    display: none !important;
}

/* ============================================================
   Phase 2b.7 I - Grosser Design-Pass (Premium-Polish)
   Skills: refactoring-ui, ux-heuristics, web-typography,
   microinteractions
   ============================================================ */

/* I2 File-Upload Drag&Drop-Zone (Lucide-Outline) */
.file-drop {
    border: 2px dashed var(--border-strong, var(--slate-300));
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    background: var(--slate-50);
    transition: background var(--duration-fast) var(--easing-default),
                border-color var(--duration-fast) var(--easing-default);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}
.file-drop:hover {
    border-color: var(--primary);
    background: var(--primary-50);
}
.file-drop.dragover {
    border-color: var(--logo-gold);
    background: rgba(234, 179, 8, 0.08);
}
.file-drop-icon {
    color: var(--text-mid);
    width: 36px;
    height: 36px;
}
.file-drop-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
}
.file-drop-hint {
    font-size: var(--text-xs);
    color: var(--text-mid);
}
.file-drop input[type="file"] {
    display: none;
}

/* I3 Form-Inputs Premium-Styling (40px height, focus-shadow 3px) */
input.input,
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select.select,
textarea {
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--slate-200);
    background: var(--slate-50);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text);
    transition: border-color var(--duration-fast) var(--easing-default),
                box-shadow var(--duration-fast) var(--easing-default),
                background var(--duration-fast) var(--easing-default);
}
textarea {
    height: auto;
    min-height: 80px;
    padding: var(--space-2) var(--space-3);
    line-height: var(--lh-normal);
}
input:hover,
select:not(.pulse-glass-select):hover,
textarea:hover {
    background: white;
}
input:focus,
select:not(.pulse-glass-select):focus,
textarea:focus {
    background: white;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-50, rgba(42, 52, 176, 0.15));
    outline: none;
}
input::placeholder,
textarea::placeholder {
    color: var(--slate-400);
    font-style: italic;
}

/* I4 Toast-System Premium */
.toast {
    border-left: 4px solid var(--slate-400) !important;
    box-shadow: var(--shadow-lg);
    animation: toast-slide-in 250ms var(--easing-default);
}
.toast.success { border-left-color: var(--success) !important; }
.toast.error   { border-left-color: var(--error) !important; }
.toast.warn    { border-left-color: var(--warning, #f59e0b) !important; }
.toast.info    { border-left-color: var(--logo-gold) !important; }

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* I5 Mehr Whitespace: Card-Padding bedacht erhoehen */
.card {
    padding: var(--space-6) !important;
}
.module-header {
    padding: var(--space-6) 0 var(--space-4) 0 !important;
}
.module-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
}
.module-subtitle {
    font-size: var(--text-sm);
    color: var(--text-mid);
    margin-top: var(--space-1);
}

/* I6 Microinteractions: Button-Press, Modal-Open, smooth transitions */
.btn,
button.btn {
    transition: background var(--duration-fast) var(--easing-default),
                transform 100ms var(--easing-default),
                box-shadow var(--duration-fast) var(--easing-default);
}
.btn:active {
    transform: scale(0.98);
}

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

/* I7 Empty-State-Polish: groesseres Icon, mehr Atmen */
.empty-state {
    padding: var(--space-12) var(--space-6) !important;
    text-align: center;
}
.empty-state-icon {
    font-size: 48px !important;
    color: var(--slate-400);
    margin-bottom: var(--space-3);
}
.empty-state-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--slate-700);
    margin-bottom: var(--space-1);
}
.empty-state-body {
    color: var(--text-mid);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* I8 Skeleton-Loader fertig ausgerollt - Klassen aus 2b.5 reichen */

/* I9 Akzent-Gold-Highlights fuer Stats und KPIs */
.stat-card.highlight,
.stat-card.gold {
    border-top: 3px solid var(--logo-gold);
}

/* ============================================================
   Phase 2b.8 D - Premium-Design-Pass Hauptbereich
   Skills: refactoring-ui (Hierarchy), microinteractions (Feedback),
           web-typography (Voice), ux-heuristics (Krug)
   ============================================================ */

/* D1: Module-Header-Pattern */
.module {
    padding: var(--space-8) var(--space-8) var(--space-12) var(--space-8) !important;
}
.module-header {
    padding: 0 0 var(--space-6) 0 !important;
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--slate-200);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}
.module-title {
    font-size: var(--text-3xl) !important;
    font-weight: 700 !important;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--slate-900);
}
.module-subtitle {
    font-size: var(--text-base);
    color: var(--slate-500) !important;
    margin-top: var(--space-2);
    max-width: 60ch;
    line-height: var(--lh-relaxed);
}
.module-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}

/* Sweep 2d.5.10.C4.1 Etappe 2: naked `select` durch
 * `select:not(.pulse-glass-select)` ersetzt — sonst ueberschreibt das
 * `!important` jedes Glass-Select app-weit (siehe Audit-Doc). */
/* D5: Premium-Forms */
.input,
input.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select.select:not(.pulse-glass-select),
select:not(.pulse-glass-select),
textarea {
    height: 44px !important;
    padding: 0 var(--space-4) !important;
    background: white !important;
    border: 1px solid var(--slate-300) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm);
    color: var(--slate-900);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
textarea {
    height: auto !important;
    min-height: 96px;
    padding: var(--space-3) var(--space-4) !important;
    line-height: var(--lh-normal);
}
.input:hover,
input:hover,
select:hover,
textarea:hover {
    border-color: var(--slate-400) !important;
}
.input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(42, 52, 176, 0.1) !important;
    outline: none !important;
}
input::placeholder,
textarea::placeholder {
    color: var(--slate-400);
    font-style: normal;
}
input:disabled,
select:disabled,
textarea:disabled {
    background: var(--slate-100) !important;
    color: var(--slate-400) !important;
    cursor: not-allowed;
}
.field-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--slate-700);
    margin-bottom: 6px;
}
.field {
    margin-bottom: var(--space-4);
}
.field-required::after {
    content: " *";
    color: var(--error);
}
.field-helper {
    font-size: var(--text-xs);
    color: var(--slate-500);
    margin-top: 4px;
}

/* Buttons - Premium */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease-out, border-color 150ms ease-out,
                box-shadow 150ms ease-out, transform 100ms ease-out;
    text-decoration: none;
    white-space: nowrap;
    height: 40px !important;
    padding: 0 var(--space-4) !important;
}
.btn:disabled,
.btn[disabled] {
    background: var(--slate-100) !important;
    color: var(--slate-400) !important;
    border-color: var(--slate-200) !important;
    cursor: not-allowed !important;
}
.btn-large,
.btn.btn-lg {
    height: 48px !important;
    padding: 0 var(--space-5) !important;
    font-size: var(--text-md);
}
.btn.btn-sm {
    height: 32px !important;
    padding: 0 var(--space-3) !important;
    font-size: var(--text-xs);
}
.btn-primary {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}
.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: var(--shadow-md);
}
.btn-secondary {
    background: white !important;
    color: var(--slate-700) !important;
    border-color: var(--slate-300) !important;
}
.btn-secondary:hover:not(:disabled) {
    background: var(--slate-50) !important;
    border-color: var(--slate-400) !important;
}
.btn-ghost {
    background: transparent !important;
    color: var(--primary) !important;
    border-color: transparent !important;
}
.btn-ghost:hover:not(:disabled) {
    background: var(--primary-50) !important;
}
.btn-danger {
    background: #dc2626 !important;
    color: white !important;
    border-color: #dc2626 !important;
}
.btn-danger:hover:not(:disabled) {
    background: #b91c1c !important;
}
.btn:active:not(:disabled) {
    transform: scale(0.98);
}

/* D2: Lead-Pool Premium-Tabelle */
.lead-pool-tbl,
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--slate-200);
}
/* Sweep 2d.5.10.C8.7 Teil B.1: kein --slate-50 Header-BG mehr. */
.lead-pool-tbl thead th,
.data-table thead th {
    background: transparent;
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-500);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--slate-200);
    text-align: left;
}
.lead-pool-tbl tbody td,
.data-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--slate-100);
    font-size: var(--text-sm);
    color: var(--slate-900);
    vertical-align: middle;
}
.lead-pool-tbl tbody tr,
.data-table tbody tr {
    transition: background 100ms ease-out;
}
.lead-pool-tbl tbody tr:hover,
.data-table tbody tr:hover {
    background: var(--slate-50);
}
.lead-pool-tbl tbody tr:last-child td,
.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Status-Badges in Border-Style (refactoring-ui: weniger schreien) */
.badge-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: lowercase;
    background: white;
    border: 1px solid currentColor;
    line-height: 1.5;
}
.badge-status.badge-pending,
.badge-status.badge-queued,
.badge-status.badge-running { color: var(--slate-500); }
.badge-status.badge-verified_ok,
.badge-status.badge-completed,
.badge-status.badge-Ja { color: #047857; }
.badge-status.badge-disqualified,
.badge-status.badge-failed,
.badge-status.badge-Schlecht { color: #b91c1c; }
.badge-status.badge-pushed_to_crm { color: var(--primary); }

/* D3: Dashboard Premium Stat-Cards */
.stat-card {
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
    position: relative;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.stat-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--primary-50);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}
.stat-card-icon.success { background: #d1fae5; color: #047857; }
.stat-card-icon.warn    { background: #fef3c7; color: #b45309; }
.stat-card-icon.error   { background: #fee2e2; color: #b91c1c; }
.stat-card-icon.gold    { background: #fef3c7; color: var(--logo-gold-dark); }
.stat-value {
    font-size: var(--text-3xl) !important;
    font-weight: 700 !important;
    line-height: 1.1;
    color: var(--slate-900);
    letter-spacing: -0.02em;
}
.stat-label {
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate-500) !important;
    margin-bottom: 6px;
}
.stat-trend {
    font-size: var(--text-xs);
    color: var(--slate-500);
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.stat-trend.up { color: #047857; }
.stat-trend.down { color: #b91c1c; }

/* 2c.24: D4-Pulse-KI-Premium-Block geloescht (.pulse-messages,
   .pulse-msg + Variants, .pulse-typing + @keyframes pulse-dot).
   Ersatz: .pulse-conv-* (Avatar-Layout) + .pulse-conv-typing. */

/* D6: Score-Pill (Stufe 3) */
.score-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.score-pill.score-low    { background: #fee2e2 !important; color: #b91c1c !important; }
.score-pill.score-mid    { background: #fef3c7 !important; color: #b45309 !important; }
.score-pill.score-high   { background: #d1fae5 !important; color: #047857 !important; }
.score-pill.score-top    { background: var(--logo-gold) !important; color: var(--slate-900) !important; }

/* D8: Login-Page Premium */
.auth-overlay {
    background: linear-gradient(135deg, var(--slate-50) 0%, white 50%, var(--primary-50) 100%) !important;
}
.auth-panel,
#authLoginPanel,
#authSetupPanel {
    background: white !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-xl) !important;
    padding: var(--space-10) !important;
    border: 1px solid var(--slate-200);
}
.auth-form .field { margin-bottom: var(--space-4); }
.auth-form .btn-primary { width: 100%; }

/* D10: Modal-Open-Animation */
.modal-backdrop {
    animation: backdrop-fade-in 200ms ease-out;
}
@keyframes backdrop-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal {
    animation: modal-scale-in 200ms ease-out;
}
@keyframes modal-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .modal,
    .stat-card,
    .btn,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* D11: Empty-States Premium */
.empty-state {
    padding: var(--space-12) var(--space-6) !important;
    text-align: center;
    background: white;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--slate-200);
}
.empty-state-icon {
    font-size: 48px !important;
    color: var(--slate-300) !important;
    margin: 0 auto var(--space-4) auto;
    line-height: 1;
}
.empty-state-title {
    font-size: var(--text-xl) !important;
    font-weight: 600 !important;
    color: var(--slate-700) !important;
    margin-bottom: var(--space-2);
}
.empty-state-body {
    color: var(--slate-500) !important;
    max-width: 480px;
    margin: 0 auto var(--space-6) auto;
    line-height: var(--lh-relaxed);
}

/* D12: Card-Padding generos + Grid-Helper */
.card {
    padding: var(--space-6) !important;
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--slate-900);
    margin-bottom: var(--space-1);
}
.card-subtitle {
    font-size: var(--text-sm);
    color: var(--slate-500);
    margin-bottom: var(--space-4);
}
.cards-grid,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

/* ============================================================
   Phase 2b.9 A - Lead-Detail-Page
   ============================================================ */
/* ============================================================
   Phase 2b.9.1 C - Verifikation/Scoring UI restoren
   ============================================================ */

/* Quellen-Auswahl-Cards */
.source-card {
    background: white;
    border: 2px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    cursor: pointer;
    transition: border-color 150ms ease-out, background 150ms ease-out, transform 100ms ease-out;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.source-card:hover:not(.disabled):not(.active) {
    border-color: var(--slate-400);
    background: var(--slate-50);
}
.source-card.active {
    border-color: var(--primary);
    background: var(--primary-50, #eef0fc);
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.10);
}
.source-card.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--slate-50);
}
.source-card-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: var(--slate-100);
    color: var(--slate-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.source-card.active .source-card-icon {
    background: var(--primary);
    color: white;
}
.source-card-title {
    font-weight: 600;
    color: var(--slate-900);
    font-size: var(--text-md);
}
.source-card-desc {
    font-size: var(--text-xs);
    color: var(--slate-500);
}

/* Big Action-Bar */
.run-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.run-action-info {
    font-size: var(--text-sm);
    color: var(--slate-600);
}

/* Inline-Spinner */
.spinner-inline,
.btn .spinner-inline {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate 0.7s linear infinite;
    display: inline-block;
}
@keyframes spinner-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .spinner-inline { animation: none !important; }
}

.btn.is-running {
    pointer-events: none;
    opacity: 0.85;
}
.btn.is-running .spinner-inline { margin-right: 6px; }

/* Phase 2b.9.1 A: Dirty-Indicator fuer Lead-Detail-Inputs */
.lead-detail-input.dirty {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--primary-50, rgba(42, 52, 176, 0.10)) !important;
    background: var(--primary-50, rgba(42, 52, 176, 0.03)) !important;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-left: var(--space-2);
}
.timeline-item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    position: relative;
}
.timeline-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--slate-300);
    margin-top: 4px;
    flex-shrink: 0;
}
.timeline-dot.done { background: #047857; }
.timeline-dot.gold { background: var(--logo-gold); }
.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: -16px;
    width: 2px;
    background: var(--slate-200);
}

/* ============================================================
   Phase 2b.9 B - Filter-Drawer
   ============================================================ */
.filter-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 9000;
    animation: backdrop-fade-in 200ms ease-out;
}
.filter-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: white;
    box-shadow: var(--shadow-xl);
    z-index: 9001;
    display: flex;
    flex-direction: column;
    animation: drawer-slide-in 250ms ease-out;
}
@keyframes drawer-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.filter-drawer-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--slate-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.filter-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
}
.filter-drawer-footer {
    border-top: 1px solid var(--slate-200);
    padding: var(--space-4) var(--space-6);
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    background: var(--slate-50);
}
.filter-group {
    margin-bottom: var(--space-6);
}
.filter-group-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-500);
    margin-bottom: var(--space-2);
}
.filter-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    background: var(--primary-50);
    color: var(--primary);
    font-size: var(--text-xs);
    font-weight: 500;
    margin-right: 6px;
    margin-bottom: 4px;
}
.filter-active-chip button {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
}
.filter-active-chip button:hover {
    background: rgba(42, 52, 176, 0.15);
}

/* ============================================================
   Phase 2b.9 C - Live-Log Console
   ============================================================ */
.live-log {
    background: var(--slate-900);
    color: var(--slate-100);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--text-xs);
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}
.live-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--slate-700);
    color: white;
    font-weight: 600;
}
.live-log-line {
    padding: 2px 0;
    white-space: pre-wrap;
}
.live-log-line .ts {
    color: var(--slate-500);
    margin-right: 8px;
}
.live-log-line.success { color: #4ade80; }
.live-log-line.error { color: #f87171; }
.live-log-line.warn { color: #facc15; }
.live-log-line.info { color: var(--slate-300); }
.live-log-divider {
    border-top: 1px dashed var(--slate-700);
    margin: var(--space-2) 0;
    color: var(--slate-500);
    padding-top: 4px;
    font-weight: 600;
}

/* Settings-Tabs */
.settings-layout-tabs {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
    align-items: flex-start;
}
.settings-tabs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    box-shadow: var(--shadow-sm);
}
.settings-tabs-list button {
    text-align: left;
    background: transparent;
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--slate-700);
    cursor: pointer;
    transition: background 100ms ease-out;
}
.settings-tabs-list button:hover {
    background: var(--slate-50);
}
.settings-tabs-list button.active {
    background: var(--primary-50);
    color: var(--primary);
    font-weight: 600;
}
.settings-tab-page { display: none; }
.settings-tab-page.active { display: block; }
.settings-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--slate-200);
}

/* Pipeline-Card click + kebab */
.pipeline-card { cursor: pointer; position: relative; }
.pipeline-card:hover { box-shadow: var(--shadow-md); }
.pipeline-card-kebab {
    position: absolute;
    top: 8px; right: 8px;
    background: transparent;
    border: none;
    color: var(--slate-400);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: 16px;
    line-height: 1;
}
.pipeline-card-kebab:hover {
    background: var(--slate-100);
    color: var(--slate-700);
}
.kebab-menu {
    position: absolute;
    top: 32px; right: 8px;
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    min-width: 180px;
    padding: 4px;
}
.kebab-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 6px 10px;
    font-size: var(--text-xs);
    color: var(--slate-700);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.kebab-menu button:hover { background: var(--slate-50); }



/* ============================================================
   Phase 2b.7 C/D/F - Stufen-Badges (Lead-Stufen 1/2/3)
   ============================================================ */
.stage-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.stage-badge.stage-1 {
    background: var(--slate-100);
    color: var(--slate-600);
}
.stage-badge.stage-2 {
    background: var(--primary-100);
    color: var(--primary);
}
.stage-badge.stage-3 {
    background: var(--logo-gold);
    color: var(--slate-900);
}

/* Pipeline-Badge (orthogonal zu stage) */
.pipeline-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--text-2xs);
    font-weight: 600;
    background: rgba(234, 179, 8, 0.15);
    color: var(--logo-gold-dark);
    margin-left: 4px;
}

/* Score-Display (1-100, drei Farben) */
.score-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.score-pill.score-low    { background: #fee2e2; color: #b91c1c; }
.score-pill.score-mid    { background: #fef3c7; color: #b45309; }
.score-pill.score-high   { background: #d1fae5; color: #047857; }

/* Pipeline-Board (Phase 2b.7 E): horizontaler Kanban-Layout.
   Sweep 2.7.2.d Etappe E: flex statt grid mit hardcoded 5 Spalten —
   alle Spalten stretchen gleichmaessig auf Container-Breite, bei zu
   vielen Phasen scrollt der Container horizontal. */
.pipeline-board {
    display: flex;
    flex-direction: row;
    /* Sweep 2.7.2.f: Gap reduziert (var(--space-3)=12px -> 8px),
       damit 3 aktive Spalten + 3 Strips in Standard-Viewport passen. */
    gap: 8px;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    width: 100%;
}
.pipeline-column {
    background: var(--slate-50);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* Sweep 2.7.2.f: min-width 200 -> 180. Card-Inhalt (Firma/Branche/
       Score/Outreach) bleibt lesbar, 3 aktive + 3 Strips passen
       jetzt in ~640px (vorher 860, sprengte 1024-Viewport-Content). */
    flex: 1 1 0;
    min-width: 180px;
    /* Sweep 2.7.2.e Etappe C: Strip-Mode-Transition */
    transition: flex 0.18s var(--ease-out), min-width 0.18s var(--ease-out);
}

/* Sweep 2.7.2.e Etappe C: Strip-Modus fuer Won/Lost/On-Hold-Phasen.
   Kompakte Spalte mit vertikalem Label + Counter, Cards versteckt.
   Click auf Strip toggelt die Expansion (via JS, URL persistiert). */
.pipeline-column--strip {
    /* Sweep 2.7.2.f: Strip 60px -> 50px. Spart 30px ueber 3 Strips. */
    flex: 0 0 50px;
    min-width: 50px;
    max-width: 50px;
    padding: var(--space-2);
    cursor: pointer;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
}
.pipeline-column--strip:hover {
    background: var(--color-bg-hover, var(--slate-100, rgba(255,255,255,0.04)));
}
.pipeline-column--strip .pipeline-column-strip-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    /* writing-mode vertical-rl + rotate(180deg) = Text laeuft oben->unten
       mit Buchstaben aufrecht (klassisches Strip-Label-Pattern). */
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, var(--slate-600));
    letter-spacing: 0.02em;
    margin-top: var(--space-2);
    text-align: left;
    white-space: nowrap;
    user-select: none;
}
.pipeline-column--strip .pipeline-column-strip-count {
    /* Sweep 2.7.2.i Etappe A: Counter oben statt unten. Vorher
       margin-top:auto, was den Counter in einem flex-column-Strip
       ans Ende geschoben hat. Jetzt 0, damit der Counter direkt
       am Top-Padding klebt. DOM-Reihenfolge (Count vor Label) sorgt
       fuer die Anordnung; Label-margin-top fuegt den Abstand ein. */
    margin-top: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated, rgba(255,255,255,0.06));
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 8px;
    min-width: 28px;
    text-align: center;
    align-self: center;
}
.pipeline-column--strip .pipeline-column-body--strip {
    /* Sweep 2.7.2.f.1 Etappe B: Drop-Zone MUSS pointer-events:auto
       haben, sonst blockt sie SortableJS-Drag-Drop-Events. Vorher hatte
       sie pointer-events:none — Mike's Console hatte keine onAdd-Events
       beim Drop in Strip.
       Position bleibt absolute fuer Full-Strip-Drop-Zone. */
    position: absolute;
    inset: 0;
    pointer-events: auto;
    /* Cards sollen unsichtbar bleiben beim Collapse — nur die Drop-Zone
       ist aktiv. Cards die im Body landen (durch Drop) werden ueber
       opacity:0 versteckt; beim Expand erscheinen sie via Re-Render. */
}
.pipeline-column--strip .pipeline-column-body--strip .pipeline-card {
    display: none;
}
/* Strip-State-Tints — analog zur Card-Variante */
.pipeline-column--strip[data-phase-state="won"] {
    background: rgba(34,197,94,0.08);
    border-left: 3px solid rgba(34,197,94,0.6);
}
.pipeline-column--strip[data-phase-state="lost"] {
    background: rgba(248,113,113,0.06);
    border-left: 3px solid rgba(248,113,113,0.5);
}
.pipeline-column--strip[data-phase-state="onhold"] {
    background: rgba(251,191,36,0.06);
    border-left: 3px solid rgba(251,191,36,0.5);
}
/* Drag-Hover-Auto-Expand: Strip wird waehrend Drag temporaer breit */
.pipeline-column--strip.is-drag-expanded {
    flex: 1 1 0;
    /* Sweep 2.7.2.f: min-width 200 -> 180 konsistent mit aktiven Spalten */
    min-width: 180px;
    max-width: none;
    cursor: default;
    align-items: stretch;
    justify-content: flex-start;
}
.pipeline-column--strip.is-drag-expanded .pipeline-column-strip-label {
    writing-mode: horizontal-tb;
    transform: none;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
}
.pipeline-column--strip.is-drag-expanded .pipeline-column-body--strip {
    position: static;
    inset: auto;
    pointer-events: auto;
    flex: 1;
}
/* Collapse-Button im Header der expandierten Archive-Spalten */
.pipeline-column-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    margin-right: 6px;
    padding: 0;
    background: var(--color-bg-elevated, rgba(255,255,255,0.06));
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: all var(--duration-fast) var(--ease-out);
}
.pipeline-column-collapse:hover {
    background: var(--color-brand-glow, var(--color-bg-hover));
    color: var(--color-text-primary);
}
.pipeline-column-header {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--slate-600);
    font-weight: 600;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}
.pipeline-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.pipeline-card-firma {
    font-weight: 600;
    color: var(--text);
    font-size: var(--text-sm);
}
.pipeline-card-meta {
    font-size: var(--text-xs);
    color: var(--text-mid);
}
.pipeline-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
    margin-top: var(--space-2);
}
.pipeline-card-actions select {
    flex: 1 1 100%;
    font-size: var(--text-xs);
    padding: 4px 6px;
}
.btn-sm {
    padding: 4px 8px;
    font-size: var(--text-xs);
}

/* ============================================================
   Phase 2b.10 — Awwwards Visual Reset (Append-Layer)
   Wird ueber die kompletten Vorgaenger-Styles gelegt.
   ============================================================ */

/* Body-Bind an Theme-Tokens */
body {
    background: var(--color-bg-base);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Main-Content respektiert Theme */
.main {
    background: var(--color-bg-base) !important;
    color: var(--color-text-primary);
}
.app, .module {
    background: transparent !important;
    color: var(--color-text-primary);
}

/* Topbar in Theme-Token */
.topbar {
    background: var(--color-bg-elevated) !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-secondary);
}
.breadcrumb,
.breadcrumb-current {
    color: var(--color-text-secondary) !important;
}

/* Theme-Toggle */
.theme-toggle-row {
    display: inline-flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-pill);
    padding: 3px;
    margin: var(--space-2) 0;
}
.theme-toggle-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    width: 30px;
    height: 26px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.theme-toggle-btn:hover { color: white; }
.theme-toggle-btn.active {
    background: rgba(255, 255, 255, 0.18);
    color: white;
    box-shadow: var(--shadow-sm);
}

/* Cards-binding an Theme-Tokens (override frueherer Hardcodes) */
.card {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary);
}
.card-title { color: var(--color-text-primary) !important; }
.card-subtitle { color: var(--color-text-secondary) !important; }

/* Inputs/Selects/Textarea bind an Theme.
 * Sweep 2d.5.10.C4.1 Etappe 2: naked `select` durch
 * `select:not(.pulse-glass-select)` ersetzt. Glass-Selects haben ihren
 * eigenen Theme-Block in Z.4111ff bzw Z.4144ff. */
input.input,
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select.select:not(.pulse-glass-select),
select:not(.pulse-glass-select),
textarea {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text-primary) !important;
}
input:focus, select:not(.pulse-glass-select):focus, textarea:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 0 4px rgba(42, 52, 176, 0.18) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--color-text-muted) !important;
}

[data-theme="light"] input,
[data-theme="light"] select:not(.pulse-glass-select),
[data-theme="light"] textarea {
    background: white !important;
    border-color: var(--color-border-strong) !important;
}

/* Slate-50/100/200 Hardcodes -> Theme-Tokens (subtle override) */
.lead-pool-tbl,
.data-table {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
}
/* Sweep 2d.5.10.C8.7 Teil B.1: Header-BG transparent (Mike-Spec:
   gleich wie Body, KEIN separater Container-BG). Vorher gab
   `--color-bg-elevated` der Lead-Übersicht + Verifikations-Inline-
   Tabellen einen dunkleren Header — Scoring/Verifikation-Pruefung
   (Component-Pfad) hatte das nie → Optik-Drift. */
.lead-pool-tbl thead th,
.data-table thead th {
    background: transparent !important;
    color: var(--color-text-muted) !important;
    border-bottom-color: var(--color-border) !important;
}
.lead-pool-tbl tbody td,
.data-table tbody td {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-border) !important;
}
.lead-pool-tbl tbody tr:hover,
.data-table tbody tr:hover {
    background: var(--color-bg-hover) !important;
}

/* Empty-State theme-aware */
.empty-state {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
}
.empty-state-icon { color: var(--color-text-muted) !important; }
.empty-state-title { color: var(--color-text-primary) !important; }
.empty-state-body { color: var(--color-text-secondary) !important; }

/* Pipeline-Cards theme-bind */
.pipeline-column {
    background: var(--color-bg-elevated) !important;
}
.pipeline-card {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary);
}
.pipeline-card-meta { color: var(--color-text-secondary) !important; }
.pipeline-column-header { color: var(--color-text-muted) !important; }

/* Live-Log theme-bind */
.live-log {
    background: var(--color-bg-base);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
}

/* Filter-Drawer theme-bind */
.filter-drawer {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border-left: 1px solid var(--color-border);
    backdrop-filter: blur(16px);
}
.filter-drawer-header,
.filter-drawer-footer {
    background: var(--color-bg-elevated);
    border-color: var(--color-border) !important;
    color: var(--color-text-primary);
}
.filter-group-title { color: var(--color-text-muted) !important; }
.filter-active-chip {
    background: var(--color-brand-primary) !important;
    color: white !important;
}

/* Source-Cards theme-bind */
.source-card {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary);
}
.source-card.active {
    border-color: var(--color-brand-primary) !important;
    background: rgba(42, 52, 176, 0.10) !important;
    box-shadow: var(--shadow-glow-blue);
}
.source-card-title { color: var(--color-text-primary); }
.source-card-desc { color: var(--color-text-muted); }

/* Run-Action-Bar theme-bind */
.run-action-bar {
    background: var(--color-bg-card);
    border-color: var(--color-border) !important;
}
.run-action-info { color: var(--color-text-secondary); }

/* Modal-Backdrop premium */
.modal-backdrop {
    background: rgba(10, 13, 26, 0.65) !important;
    backdrop-filter: blur(8px);
}
[data-theme="light"] .modal-backdrop {
    background: rgba(15, 23, 42, 0.45) !important;
}
.modal {
    background: var(--color-bg-card) !important;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

/* Toast theme-bind */
.toast {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
    box-shadow: var(--shadow-lg);
}

/* Settings-Tabs theme */
.settings-tabs-list {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}
.settings-tabs-list button {
    color: var(--color-text-secondary);
}
.settings-tabs-list button:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}
.settings-tabs-list button.active {
    background: rgba(42, 52, 176, 0.15);
    color: var(--color-brand-primary);
}
.tabs.app-tabs {
    border-bottom-color: var(--color-border) !important;
}
.tabs.app-tabs .tab-btn {
    color: var(--color-text-secondary);
}
.tabs.app-tabs .tab-btn:hover {
    color: var(--color-text-primary);
}
.tabs.app-tabs .tab-btn.active {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-brand-primary);
}
.settings-tab-header {
    border-bottom-color: var(--color-border) !important;
}

/* ============================================================
   Phase 2b.10 E3 — Sidebar Premium-Polish
   ============================================================ */
.sidebar {
    background: var(--gradient-brand) !important;
    color: white !important;
    position: relative;
    backdrop-filter: blur(8px);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

/* Subtle Noise + Glow-Layer */
.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 800px 400px at top left, rgba(42, 52, 176, 0.45), transparent 60%),
        radial-gradient(ellipse 600px 600px at bottom right, rgba(0, 0, 0, 0.4), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }

/* Logo-Bereich premium */
.logo-area {
    padding: var(--space-6) var(--space-5) var(--space-5) var(--space-5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    position: relative;
    z-index: 1;
}
.sidebar-logo-img {
    transition: filter var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
    filter: drop-shadow(0 0 12px rgba(234, 177, 7, 0.25));
}
.logo-area:hover .sidebar-logo-img {
    filter: drop-shadow(0 0 24px rgba(234, 177, 7, 0.45));
    transform: scale(1.02);
}

/* Nav-Section-Header uppercase + tracking */
.nav-section {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    padding: var(--space-4) var(--space-3) var(--space-2) var(--space-3) !important;
    margin-top: var(--space-2);
}
.nav-section:first-child { margin-top: 0; }

/* Nav-Items premium */
.nav-item {
    color: rgba(255, 255, 255, 0.72) !important;
    padding: var(--space-2) var(--space-3) !important;
    margin: 0 var(--space-2);
    border-radius: var(--radius-md) !important;
    border-left: 3px solid transparent !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-weight-medium);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out) !important;
}
.nav-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: white !important;
}
.nav-item .nav-icon {
    transition: transform var(--duration-fast) var(--ease-out);
}
.nav-item:hover .nav-icon { transform: scale(1.06); }

.nav-item.active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
    border-left: 3px solid var(--color-accent-gold) !important;
    font-weight: var(--font-weight-semibold) !important;
    box-shadow: var(--shadow-glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.nav-item.active .nav-icon {
    color: var(--color-accent-gold);
}

/* Badges premium (gold-Akzent) */
.nav-badge {
    margin-left: auto;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}
.nav-badge.new {
    background: var(--color-accent-gold) !important;
    color: #0a0d1a !important;
    box-shadow: var(--shadow-glow-gold);
}
.nav-badge.admin {
    background: transparent !important;
    color: var(--color-accent-gold) !important;
    border: 1px solid var(--color-accent-gold);
}
.nav-badge.count {
    background: var(--color-accent-gold) !important;
    color: #0a0d1a !important;
    min-width: 22px;
    text-align: center;
}
.nav-badge.soon {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.50) !important;
}

/* Sidebar-Footer */
.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: var(--space-4) !important;
}
.status-row {
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--text-xs);
}
.user-tile {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.user-avatar {
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.10);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
}
.user-name {
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}
.user-role {
    color: rgba(255, 255, 255, 0.50);
    font-size: var(--text-xs);
    transition: color var(--duration-fast) var(--ease-out);
}
.user-role:hover { color: var(--color-accent-gold); }

/* ============================================================
   Phase 2b.10 E4 — Module-Header + Hero
   ============================================================ */
.module {
    padding: var(--space-12) var(--space-8) var(--space-16) var(--space-8) !important;
    max-width: var(--max-content-width);
    position: relative;
}
.module::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 600px; height: 240px;
    background: radial-gradient(ellipse at top left, rgba(42, 52, 176, 0.08), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="light"] .module::before {
    background: radial-gradient(ellipse at top left, rgba(42, 52, 176, 0.04), transparent 70%);
}
.module-header {
    padding: 0 0 var(--space-8) 0 !important;
    margin-bottom: var(--space-10) !important;
    border-bottom: 1px solid var(--color-border) !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    position: relative;
    z-index: 1;
    animation: hero-fade-up var(--duration-slow) var(--ease-out) both;
}
.module-title {
    font-family: var(--font-display) !important;
    font-size: var(--text-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-tight) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
    color: var(--color-text-primary) !important;
    margin: 0;
}
.module-subtitle {
    font-size: var(--text-lg) !important;
    color: var(--color-text-secondary) !important;
    margin-top: var(--space-3) !important;
    max-width: 64ch;
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-regular);
}
.module-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
    animation: hero-fade-up var(--duration-slow) var(--ease-out) 200ms both;
}
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .module-header, .module-actions {
        animation: none !important;
    }
}
.module-title.is-display {
    font-size: var(--text-display) !important;
    line-height: 1;
}

/* ============================================================
   Phase 2b.10 E5 — Typography
   ============================================================ */
body {
    font-size: var(--text-base);
    line-height: var(--line-height-base);
}
h1, .h1 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
}
h2, .h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
}
h3, .h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
}
.body-text {
    font-size: var(--text-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
}
.caption {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}
.label-uppercase {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted);
}

/* ============================================================
   Phase 2b.10 E6 — Button-System Premium
   ============================================================ */
.btn {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform 100ms var(--ease-out);
}
.btn-primary {
    background: var(--color-brand-primary) !important;
    border-color: var(--color-brand-primary) !important;
    color: white !important;
}
.btn-primary:hover:not(:disabled) {
    background: var(--color-brand-deep) !important;
    border-color: var(--color-brand-deep) !important;
    box-shadow: var(--shadow-glow-blue), var(--shadow-md) !important;
    transform: translateY(-1px);
}
.btn-secondary {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text-primary) !important;
}
.btn-secondary:hover:not(:disabled) {
    background: var(--color-bg-hover) !important;
    border-color: var(--color-text-muted) !important;
}
.btn-ghost {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--color-text-primary) !important;
}
.btn-ghost:hover:not(:disabled) {
    background: var(--color-bg-hover) !important;
}
.btn-danger {
    background: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: white !important;
}
.btn-danger:hover:not(:disabled) {
    background: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18) !important;
}
.btn-gold {
    background: var(--color-accent-gold) !important;
    border-color: var(--color-accent-gold) !important;
    color: #0a0d1a !important;
    font-weight: var(--font-weight-semibold) !important;
}
.btn-gold:hover:not(:disabled) {
    background: var(--color-accent-gold-deep) !important;
    border-color: var(--color-accent-gold-deep) !important;
    box-shadow: var(--shadow-glow-gold), var(--shadow-md) !important;
    transform: translateY(-1px);
}
.btn:active:not(:disabled) { transform: scale(0.98) !important; }
@media (prefers-reduced-motion: reduce) {
    .btn:hover, .btn:active { transform: none !important; }
}

/* ============================================================
   Phase 2b.10 E7 — Form-System (Slider, Checkbox, Radio, Drop)
   ============================================================ */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px !important;
    background: var(--color-border) !important;
    border: none !important;
    border-radius: var(--radius-pill);
    padding: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: var(--radius-full);
    background: white;
    border: 2px solid var(--color-brand-primary);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-glow-blue), var(--shadow-md);
}
input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: var(--radius-full);
    background: white;
    border: 2px solid var(--color-brand-primary);
    cursor: pointer;
    box-shadow: var(--shadow-md);
}
input[type="range"]:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(42, 52, 176, 0.18) !important;
}

input[type="checkbox"]:not(.toggle-input) {
    -webkit-appearance: none;
    appearance: none;
    width: 18px !important;
    height: 18px !important;
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    position: relative;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
    vertical-align: middle;
}
input[type="checkbox"]:not(.toggle-input):checked {
    background: var(--color-brand-primary) !important;
    border-color: var(--color-brand-primary) !important;
}
input[type="checkbox"]:not(.toggle-input):checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 6px; height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="checkbox"]:not(.toggle-input):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.25);
}

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px !important;
    height: 18px !important;
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-full) !important;
    cursor: pointer;
    position: relative;
    transition: border-color var(--duration-fast) var(--ease-out);
    vertical-align: middle;
}
input[type="radio"]:checked { border-color: var(--color-brand-primary) !important; }
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
}
input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.25);
}

.file-drop {
    border: 2px dashed var(--color-border-strong) !important;
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-secondary) !important;
}
.file-drop:hover {
    border-color: var(--color-accent-gold) !important;
    background: rgba(234, 177, 7, 0.04) !important;
}
.file-drop.dragover {
    border-color: var(--color-accent-gold) !important;
    background: rgba(234, 177, 7, 0.10) !important;
    box-shadow: var(--shadow-glow-gold);
}
.file-drop-icon { color: var(--color-text-muted) !important; }
.file-drop:hover .file-drop-icon { color: var(--color-accent-gold) !important; }

/* ============================================================
   Phase 2b.10 E8 — Lead-Pool Premium-Tabelle
   ============================================================ */
/* Sweep 2d.5.10.C8.7 Teil B.1: Goldstandard-Header app-weit.
   Selektor-Liste deckt Lead-Übersicht (.lead-pool-tbl), Component-
   Pfad (.pulse-data-table) und Verifikations-Inline-Tabellen
   (.data-table) ab. Konkrete Pixel-Werte:
   - padding: 12px 16px (var(--space-3) var(--space-4))
   - font-size: 11px (var(--text-2xs))
   - font-weight: 600 (semibold)
   - color: var(--color-text-muted) (0.55 alpha)
   - letter-spacing: 0.05em (wide)
   - text-transform: uppercase */
.lead-pool-tbl thead th,
.data-table thead th,
table.pulse-data-table thead th {
    font-family: var(--font-sans) !important;
    font-size: var(--text-2xs) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted) !important;
    padding: var(--space-3) var(--space-4) !important;
}
.lead-pool-tbl tbody td,
.data-table tbody td {
    padding: var(--space-3) var(--space-4) !important;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}
.lead-pool-tbl tbody tr {
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}
.lead-pool-tbl tbody tr:hover {
    background: var(--color-bg-hover) !important;
}

.avatar-initial {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05),
                var(--shadow-sm);
}

.stage-badge {
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.stage-badge.stage-1 {
    background: var(--color-bg-hover) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border-strong);
}
.stage-badge.stage-2 {
    background: var(--color-info-soft) !important;
    color: var(--color-info) !important;
    border: 1px solid var(--color-info-soft);
}
.stage-badge.stage-3 {
    background: linear-gradient(135deg, var(--color-accent-gold), #f5c842) !important;
    color: #0a0d1a !important;
    box-shadow: var(--shadow-glow-gold);
}

.score-pill {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-bold);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
}
.score-pill.score-low {
    background: var(--color-danger-soft) !important;
    color: var(--color-danger) !important;
}
.score-pill.score-mid {
    background: var(--color-warning-soft) !important;
    color: var(--color-warning) !important;
}
.score-pill.score-high {
    background: var(--color-success-soft) !important;
    color: var(--color-success) !important;
}
.score-pill.score-top {
    background: linear-gradient(135deg, var(--color-accent-gold), #f5c842) !important;
    color: #0a0d1a !important;
    box-shadow: var(--shadow-glow-gold);
}

.pipeline-badge {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.badge-status {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: transparent !important;
    border: 1px solid currentColor !important;
}
.badge-status.badge-verified_ok { color: var(--color-success) !important; }
.badge-status.badge-disqualified { color: var(--color-danger) !important; }
.badge-status.badge-pending { color: var(--color-text-muted) !important; }
.badge-status.badge-pushed_to_crm { color: var(--color-info) !important; }
.badge-status.badge-completed { color: var(--color-success) !important; }
.badge-status.badge-running { color: var(--color-info) !important; }
.badge-status.badge-queued { color: var(--color-text-muted) !important; }
.badge-status.badge-failed { color: var(--color-danger) !important; }

/* Sweep 2c.25.2-recheck Etappe 1: Legacy-#leadsBulkBar-ID-Regel
   entfernt. Sie hatte ID-Specificity (1,0,0) plus !important und
   setzte u.a. `animation: bulk-slide-down ... both`, deren `to`-State
   `transform: translateY(0)` das `translateX(-50%)` der v2-Klasse
   ueberschrieben hat -> Bar landete rechts unten statt mittig.
   Die v2-Klassen `.leads-sticky-bulk-bar` + `.leads-sticky-bulk-bar-v2`
   uebernehmen Position, Background (Radial-Akzent), Animation
   (leadsBulkBarUp). */

.filter-active-chip {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    padding: 4px 4px 4px 10px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: var(--space-1);
    margin-bottom: var(--space-1);
}
.filter-active-chip button {
    background: rgba(255,255,255,0.15);
    color: white;
    border-radius: var(--radius-full);
    width: 20px;
    height: 20px;
    border: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
    margin-left: 4px;
}
.filter-active-chip button:hover { background: rgba(255,255,255,0.30); }

/* ============================================================
   Phase 2b.10 E9 — Lead-Detail Bento-Layout
   ============================================================ */
#m-lead-detail .module-title {
    font-size: var(--text-display) !important;
    line-height: 1 !important;
}
#m-lead-detail .module-subtitle {
    margin-top: var(--space-4) !important;
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

#leadDetailRoot .card {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-6) !important;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}
#leadDetailRoot .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong) !important;
}

#leadDetailRoot .timeline {
    padding: var(--space-2) 0;
}
#leadDetailRoot .timeline-item {
    position: relative;
    padding-left: var(--space-6);
    padding-bottom: var(--space-4);
    border-left: 2px solid var(--color-border);
    margin-left: var(--space-2);
}
#leadDetailRoot .timeline-item:last-child {
    border-left-color: transparent;
}
#leadDetailRoot .timeline-item::before {
    content: '';
    position: absolute;
    left: -7px; top: 4px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-bg-card);
    border: 2px solid var(--color-brand-primary);
    box-shadow: var(--shadow-sm);
}
#leadDetailRoot .score-pill.score-top {
    font-size: var(--text-2xl) !important;
    padding: var(--space-2) var(--space-4) !important;
}

.lead-detail-input.dirty {
    border-color: var(--color-brand-primary) !important;
    background: rgba(42, 52, 176, 0.06) !important;
    box-shadow: 0 0 0 1px var(--color-brand-primary) inset !important;
}

/* ============================================================
   Phase 2b.10 E10/E11 — Verifikation/Scoring Stat-Cards
   + Progress-Bar + Live-Log Premium
   ============================================================ */
/* Sweep 2d.5.7.e Etappe 3: Co-Selektor mit .pulse-stat-card +
   .pulse-stat-card-grid. Lead-Pool-/Verify-Stat-Cards bleiben optisch
   identisch, sind aber Pattern-getaggt. */
.run-stat-grid,
.pulse-stat-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.run-stat-card,
.pulse-stat-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}
.run-stat-card:hover,
.pulse-stat-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
    cursor: pointer;
}
.run-stat-card::after,
.pulse-stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, var(--color-brand-primary), transparent 60%);
    opacity: 0.05;
    pointer-events: none;
}
.run-stat-card.success::after,
.pulse-stat-card.is-success::after { background: radial-gradient(circle at top right, var(--color-success), transparent 60%); }
.run-stat-card.danger::after,
.pulse-stat-card.is-danger::after { background: radial-gradient(circle at top right, var(--color-danger), transparent 60%); }
.run-stat-card.warning::after,
.pulse-stat-card.is-warning::after { background: radial-gradient(circle at top right, var(--color-warning), transparent 60%); }
.run-stat-card.gold::after { background: radial-gradient(circle at top right, var(--color-accent-gold), transparent 60%); opacity: 0.10; }
/* 2c.28 Etappe 9: Default-Modifier .brand explizit + Cards-equal-height */
.run-stat-card.brand::after,
.pulse-stat-card.is-brand::after { background: radial-gradient(circle at top right, var(--color-brand-primary), transparent 60%); opacity: 0.06; }
.run-stat-grid,
.pulse-stat-card-grid {
    align-items: stretch;
}
.run-stat-card,
.pulse-stat-card {
    display: flex;
    flex-direction: column;
}

.run-stat-icon,
.pulse-stat-card__icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-lg);
    background: var(--color-brand-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-glow-blue);
}
.run-stat-card.success .run-stat-icon,
.pulse-stat-card.is-success .pulse-stat-card__icon { background: var(--color-success); box-shadow: 0 0 16px rgba(34, 197, 94, 0.25); }
.run-stat-card.danger .run-stat-icon,
.pulse-stat-card.is-danger .pulse-stat-card__icon { background: var(--color-danger); box-shadow: 0 0 16px rgba(239, 68, 68, 0.25); }
.run-stat-card.warning .run-stat-icon,
.pulse-stat-card.is-warning .pulse-stat-card__icon { background: var(--color-warning); box-shadow: 0 0 16px rgba(245, 158, 11, 0.25); }
.run-stat-card.gold .run-stat-icon { background: var(--color-accent-gold); color: #0a0d1a; box-shadow: var(--shadow-glow-gold); }
.pulse-stat-card.is-neutral .pulse-stat-card__icon { background: rgba(255,255,255,0.10); box-shadow: none; }

/* Sweep 2d.5.7.e Etappe 3: pulse-stat-card-Body Sub-Klassen.
   Lead-Pool-/Verify-run-Stat-Cards nutzen Body-Sub-Klassen implizit
   ueber separates HTML-Markup (run-stat-label / run-stat-value);
   Co-Selektor sorgt dafuer dass beide Markup-Varianten gleich aussehen. */
.run-stat-label,
.pulse-stat-card__label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--text-xs, 12px);
    font-weight: 700;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    margin-bottom: 4px;
}
.run-stat-value,
.pulse-stat-card__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl, 32px);
    font-weight: 700;
    color: var(--color-text-primary, #fff);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-tight);
}
.pulse-stat-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Sweep 2d.5.1 Etappe 3: Inline-Live-Card fuer den Verifikations-Run.
   Kompakt (default): einzeilig, Spinner + Status + Counter-Pills.
   Expandiert: Mini-Progress-Bar + Live-Log darunter. */
.verify-live-card {
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    transition: all var(--duration-base) var(--ease-out);
}
.verify-live-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 44px;
}
.verify-live-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-brand-primary);
    flex-shrink: 0;
}
.verify-live-spinner svg {
    animation: verify-live-spin 1.1s linear infinite;
}
@keyframes verify-live-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Sweep 2d.5.10.C7.2 Teil B.7: Animation-Stop bei Terminal-States.
 * Vorher: Check-Icon und Error-Icon erbten die Spinner-Rotation aus
 * .verify-live-spinner svg — wirkte wie "dreht weiter nach Run-Ende".
 * Jetzt: is-finishing / is-error stoppen die Rotation und zeigen
 * statische Icons. */
.verify-live-card.is-finishing .verify-live-spinner svg,
.verify-live-card.is-error .verify-live-spinner svg {
    animation: none;
    transform: none;
}
.verify-live-card.is-finishing .verify-live-spinner { color: var(--color-success); }
.verify-live-card.is-error .verify-live-spinner { color: var(--color-danger); }
.verify-live-text {
    flex: 1 1 auto;
    min-width: 0;
}
.verify-live-headline {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}
.verify-live-eta {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.verify-live-current {
    /* Sweep 2d.5.2 Etappe 3b: heller + groesser, sonst war
       'Aktueller Lead' kaum lesbar (dunkel auf dunkel). */
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.verify-live-counters {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}
.verify-live-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.verify-live-pill-ok {
    color: var(--color-success);
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.10);
}
.verify-live-pill-warn {
    color: var(--color-warning);
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.10);
}
.verify-live-pill-mute {
    color: var(--color-text-secondary);
}
.verify-live-toggle {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.verify-live-toggle:hover {
    background: var(--color-bg-elevated);
}
.verify-live-card[data-expanded="true"] .verify-live-toggle {
    transform: rotate(180deg);
}
.verify-live-detail {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* Sweep 2d.5.3 Etappe 1a: Bug-Fix Toggle.
   Vorher hat 'display:flex' das HTML-hidden-Attribut UEBERSCHRIEBEN —
   Klick auf den Pfeil aenderte den hidden-State + die Klasse, aber
   das Detail-Pane blieb sichtbar. Explizite [hidden]-Regel sorgt
   dafuer dass display:none gewinnt. */
.verify-live-detail[hidden] {
    display: none;
}
.verify-live-progress-track {
    height: 6px;
}
.verify-live-detail-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.verify-live-log {
    max-height: 180px;
    overflow-y: auto;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs);
    line-height: 1.45;
    padding: var(--space-2) var(--space-3);
}
.verify-live-card.is-finishing {
    border-color: var(--color-success);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3);
}

/* Sweep 2d.5.2 Etappe 5: pulse-bulk-bar als kanonisches Sticky-Bulk-Bar-
   Pattern. Vorher hatten Lead-Uebersicht (.leads-sticky-bulk-bar-v2)
   und Verifikations-Modul (.verify-sticky-bulk-bar) eigene Stile —
   visuell unterschiedlich. Mike's Spec: visuell identisch ueber alle
   Module. .pulse-bulk-bar uebernimmt den Premium-Look (Brand-Glow,
   Glass-BG, Aurora-Hint) aus der Lead-Uebersicht.

   Verify-Modul setzt .pulse-bulk-bar als zusaetzliche Klasse —
   .verify-sticky-bulk-bar bleibt fuer altes JS/CSS-Targeting parallel,
   die visuellen Tokens kommen jetzt aber aus dem pulse-bulk-bar-Block.

   Migration des Import-Moduls (Sub-Session 2d.5.3.b) folgt — analog. */
.pulse-bulk-bar {
    /* Sweep 2d.5.7 Etappe 4: Glass-Brand-Pattern als Mittelweg.
     * 2d.5.4 war Glass (zu dezent), 2d.5.6 war Knall (zu dominant).
     * Mike-Spec: "Glass mit Brand-Blau zu Schwarz Verlauf, farbige
     * Border, Glow". Layer-Stack:
     *   1. linear-gradient Brand-Primary (alpha) -> Brand-End (alpha)
     *   2. backdrop-filter blur fuer echten Glass-Effekt
     *   3. rgba(brand-light) Border (sichtbarer Akzent-Rim)
     *   4. inset white-highlight + outer Brand-Glow + drop-shadow
     * Referenz: docs/sweep-2d5-7-reference-pattern.md (Verifiziert-
     * Card-Pattern als Layer-Stack-Vorlage; Bulk-Bar nutzt staerkere
     * Variant weil sie sticky-bottom Hauptaktion hostet). */
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    border-radius: 18px;
    width: auto;
    max-width: min(96%, 1200px);
    flex-wrap: nowrap;  /* Sweep 2d.5.4 Etappe 5: kein zwei-reihiger Bruch */
    background:
        linear-gradient(135deg,
            rgba(42, 52, 176, 0.85) 0%,
            rgba(10, 13, 26, 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #ffffff;
    border: 1px solid rgba(79, 126, 219, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 0 1px rgba(79, 126, 219, 0.15),
        0 0 32px rgba(42, 52, 176, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.55),
        0 24px 48px rgba(0, 0, 0, 0.40);
    animation: leadsBulkBarUp 220ms ease-out;
}
:root[data-theme="light"] .pulse-bulk-bar {
    /* Light-Theme: gleicher Verlauf etwas opaker (Glass vor heller
       Page weniger blur-effektiv), Schatten gedaempft. */
    background:
        linear-gradient(135deg,
            rgba(42, 52, 176, 0.92) 0%,
            rgba(10, 13, 26, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #ffffff;
    border-color: rgba(79, 126, 219, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(79, 126, 219, 0.18),
        0 0 28px rgba(42, 52, 176, 0.30),
        0 8px 20px rgba(0, 0, 0, 0.20),
        0 16px 32px rgba(0, 0, 0, 0.12);
}
/* Sweep 2d.5.7.c.1.2 Etappe 3: Layout-Reihenfolge KANONISCH.
   Linke Group (Counter + Auswahl-leeren gestapelt) | Trennstrich |
   Credits-Group (optional) | Trennstrich | Action-Stack |
   Schliessen-X. */
.pulse-bulk-bar__select-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
}
.pulse-bulk-bar__select-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm, 14px);
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}
.pulse-bulk-bar__select-count .pulse-bulk-bar__select-icon {
    color: rgba(255, 255, 255, 0.78);
    flex-shrink: 0;
}
.pulse-bulk-bar__select-count strong {
    font-size: var(--text-md, 16px);
    font-weight: 700;
    color: #ffffff;
}
.pulse-bulk-bar__select-clear {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: var(--text-xs, 12px);
    cursor: pointer;
    padding: 0;
    transition: color 120ms ease;
}
.pulse-bulk-bar__select-clear:hover {
    color: #ffffff;
}
.pulse-bulk-bar__divider {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}
.pulse-bulk-bar__credits-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm, 14px);
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.pulse-bulk-bar__credits-group .pulse-bulk-bar__credits-icon {
    color: var(--color-brand-light, #7ab8f0);
    font-size: var(--text-md, 16px);
    line-height: 1;
}
.pulse-bulk-bar__action-group {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    /* Sweep 3.0.f1 F1-4: overflow-x:auto raus. Das clippte Status-
       und Export-Dropdowns (position:absolute, bottom:100%), die
       ueber der Bar aufgehen sollen — sie wurden unsichtbar im
       overflow:auto-Scrollcontext geclippt. Die Bar selbst hat
       max-width + nowrap und passt auf normalen Screens. */
    overflow: visible;
}
.pulse-bulk-bar__action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    min-width: 64px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 8px);
    color: #ffffff;
    font-size: var(--text-xs, 12px);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 120ms ease;
}
.pulse-bulk-bar__action svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.pulse-bulk-bar__action:hover {
    background: rgba(255, 255, 255, 0.08);
}
.pulse-bulk-bar__close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 8px);
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms ease, color 120ms ease;
}
.pulse-bulk-bar__close:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

/* === Legacy-Container-Klassen (.pulse-bulk-bar-left / -counter /
       -actions) bleiben fuer Pattern-Bridge in Modulen die noch nicht
       auf neue __select-group / __action-group umgebaut sind. */
.pulse-bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
}
.pulse-bulk-bar-counter {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm, 14px);
    color: #ffffff;
}
.pulse-bulk-bar-counter strong {
    font-size: var(--text-xl, 18px);
    font-weight: 700;
    color: #ffffff;
}
.pulse-bulk-bar-counter .muted {
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-sm, 14px);
}
:root[data-theme="light"] .pulse-bulk-bar-counter .muted {
    color: rgba(255, 255, 255, 0.78);
}
.pulse-bulk-bar-actions {
    /* Sweep 2d.5.7.1 Etappe 2c: Hard-Constraint nowrap. Action-Buttons
       sind gestapelt (Icon oben + Label unten) — passen damit alle
       einreihig nebeneinander, ohne dass Wrapping noetig wird.
       overflow-x:auto als Safety bei extremer Aktion-Anzahl. */
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: stretch;
}
.pulse-bulk-bar .btn-link-muted {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pulse-bulk-bar .btn-link-muted:hover {
    color: var(--color-text-primary, #fff);
}
:root[data-theme="light"] .pulse-bulk-bar .btn-link-muted {
    color: rgba(10, 10, 10, 0.6);
}
/* Sweep 2d.5.7.1 Etappe 2: Action-Button-Pattern KANONISCH gestapelt
   (Icon oben + Label unten). Vorher horizontal — wurde zur Lead-
   Uebersicht-Bulk-Bar konsolidiert weil platzsparender und einreihig
   garantiert. Identisch in Verifikation / Import / Lead-Uebersicht. */
.pulse-bulk-bar-action-primary {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    min-width: 64px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--radius-md, 8px);
}
.pulse-bulk-bar-action-primary svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Sweep 2d.5.7.1 Etappe 2b: Variants nur noch Icon-Akzent, BG bleibt
   transparent damit der Glass-Brand-Bar-BG durchscheint. Hover ist
   ein leichter weisser Layer fuer Feedback. Active-Ring nutzt die
   Variant-Color als dezenten Highlight. */
.pulse-bulk-bar-action-primary {
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.pulse-bulk-bar-action-primary:hover {
    background: rgba(255, 255, 255, 0.08);
}
.pulse-bulk-bar--success .pulse-bulk-bar-action-primary svg {
    color: var(--color-success);
}
.pulse-bulk-bar--success .pulse-bulk-bar-action-primary:hover svg {
    color: var(--color-success);
    filter: brightness(1.15);
}
.pulse-bulk-bar--primary .pulse-bulk-bar-action-primary svg {
    color: var(--color-brand-mid, #4f7edb);
}
.pulse-bulk-bar--primary .pulse-bulk-bar-action-primary:hover svg {
    color: var(--color-brand-light, #7ab8f0);
}
.pulse-bulk-bar--danger .pulse-bulk-bar-action-primary svg {
    color: var(--color-danger);
}
.pulse-bulk-bar--danger .pulse-bulk-bar-action-primary:hover {
    background: rgba(239, 68, 68, 0.12);
}

/* Sweep 2d.5.3 Etappe 8: Tab 'Haendisch pruefen' — Layout + Polish.
   - Tabelle scrollt horizontal in ihrem Container, kein Overflow-Bruch.
   - Action-Buttons als Icon-Buttons (Save/Re-Verify/Bad) mit Tooltip.
   - Anrede dezenter Inline-Edit-Style, 'Divers' als Option.
   - Anleitungs-Box mit Info-Icon ueber der Tabelle. */
.verify-manual-review-card .verify-manual-review-instructions {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--lh-normal, 1.55);
}
.verify-manual-review-instructions svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-brand-primary);
}
.verify-manual-review-instructions strong {
    color: var(--color-text-primary);
}
.verify-manual-review-table-wrap {
    /* Layout-Bruch fix: Tabelle bekommt eigenen scroll-Container,
       Spalten passen sich an Inhaltsbreite an, ohne 'Schlecht'-Spalte
       zu verstecken. */
    overflow-x: auto;
    margin-top: var(--space-3);
    -webkit-overflow-scrolling: touch;
}
.verify-manual-review-table-wrap .data-table {
    min-width: 880px;  /* Sichert dass alle Spalten Platz haben */
}
.verify-manual-input {
    /* Sweep 2d.5.3 Etappe 8c: dezenter Inline-Edit-Style. Vorher
       pulse-glass-input/select war zu prominent fuer Tabellen-Cell. */
    width: 100%;
    padding: 6px 10px;
    font-size: var(--text-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.verify-manual-input:hover {
    background: var(--color-bg-elevated);
}
.verify-manual-input:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    background: var(--color-bg-elevated);
}
.verify-manual-anrede {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'><polyline points='1,1 5,5 9,1'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
/* Action-Icon-Buttons */
.manual-row-actions-cell {
    white-space: nowrap;
}
.manual-row-action {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 6px;
    transition: all var(--duration-fast) var(--ease-out);
}
.manual-row-action:last-child { margin-right: 0; }
.manual-row-action:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}
.manual-row-action--save {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}
.manual-row-action--save:hover {
    background: var(--color-brand-primary);
    color: white;
}
.manual-row-action--reverify {
    border-color: var(--color-warning);
    color: var(--color-warning);
}
.manual-row-action--reverify:hover {
    background: var(--color-warning);
    color: white;
}
.manual-row-action--bad {
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.manual-row-action--bad:hover {
    background: var(--color-danger);
    color: white;
}
/* Sweep 2d.5.8.4 Etappe 1: Pulse Glass Dropdown Component
   ----------------------------------------------------------------
   Custom-Dropdown mit voll kontrolliertem Panel (Glass-BG + blur).
   Trigger nutzt das bestehende pulse-glass-select-trigger-Pattern;
   das Panel ist das neue Bauteil.
   ----------------------------------------------------------------*/
.pulse-glass-dropdown-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}
.pulse-glass-dropdown-trigger {
    /* erbt Look von .pulse-glass-select-trigger; eigene Klasse fuer
       gezielte Pattern-Bridge */
    min-width: 200px;
}
.pulse-glass-dropdown-trigger-label.is-placeholder {
    color: var(--color-text-tertiary, rgba(255, 255, 255, 0.55));
}
.pulse-glass-dropdown-custom-input {
    max-width: 220px;
    font-size: 12px;
    padding: 6px 10px;
}

.pulse-glass-dropdown-panel {
    position: fixed;
    z-index: 10500;
    min-width: 200px;
    max-width: 360px;
    max-height: 320px;
    overflow-y: auto;
    border-radius: 10px;
    background: rgba(15, 15, 20, 0.92);
    border: 1px solid rgba(79, 126, 219, 0.30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(79, 126, 219, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: pulseGlassDropdownIn 140ms ease-out;
}
@keyframes pulseGlassDropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pulse-glass-dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 9px 12px;
    color: var(--color-text-primary, #f5f5f8);
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}
.pulse-glass-dropdown-option:hover,
.pulse-glass-dropdown-option.is-active {
    background: rgba(79, 126, 219, 0.16);
    color: var(--color-brand-light, #7ab8f0);
}
.pulse-glass-dropdown-option.is-selected {
    background: rgba(42, 52, 176, 0.20);
    color: var(--color-brand-light, #7ab8f0);
    font-weight: 500;
}
.pulse-glass-dropdown-option-hint {
    font-size: 11px;
    color: var(--color-text-tertiary, rgba(255, 255, 255, 0.55));
}
:root[data-theme="light"] .pulse-glass-dropdown-panel {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(42, 52, 176, 0.28);
}
:root[data-theme="light"] .pulse-glass-dropdown-option {
    color: #1a1a1a;
}
:root[data-theme="light"] .pulse-glass-dropdown-option:hover,
:root[data-theme="light"] .pulse-glass-dropdown-option.is-active,
:root[data-theme="light"] .pulse-glass-dropdown-option.is-selected {
    background: rgba(42, 52, 176, 0.10);
    color: #2a34b0;
}

/* Sweep 2d.5.8.1 Etappe 3: Tab "Kein Link" Konsistenz mit Manuell-Tab.
   Zellen-Layout fuer URL-Input + Action-Btns + Recherche-Stack. */
.no-link-webseite-cell {
    display: flex;
    gap: 6px;
    align-items: center;
}
.no-link-webseite-cell .verify-manual-input {
    flex: 1;
    min-width: 180px;
}
.no-link-research-cell {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Sweep 2d.5.8 Etappe 9: Clipboard-Paste-Helper */
.manual-row-action--paste {
    border-color: var(--color-brand-mid, var(--color-brand-primary));
    color: var(--color-brand-mid, var(--color-brand-primary));
}
.manual-row-action--paste:hover {
    background: var(--color-brand-mid, var(--color-brand-primary));
    color: white;
}
@keyframes manualPasteFlash {
    0%   { background-color: rgba(79, 126, 219, 0.30); }
    100% { background-color: transparent; }
}
.manual-row-paste-flash {
    animation: manualPasteFlash 1.2s ease-out;
}
.manual-row-weblink {
    color: var(--color-text-secondary);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.manual-row-weblink:hover {
    color: var(--color-text-primary);
}
.manual-row-notes {
    font-size: 12px;
    color: var(--color-text-secondary);
    /* Notes-Spalte kompakter */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Sweep 2d.5.4 Etappe 9: 'Was Pulse fand'-Pills pro Feld. */
.manual-found-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.manual-found-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--color-border);
}
.manual-found-pill--has {
    background: rgba(34, 197, 94, 0.10);
    color: var(--color-text-primary);
    border-color: rgba(34, 197, 94, 0.30);
}
.manual-found-pill--missing {
    background: rgba(239, 68, 68, 0.06);
    color: var(--color-text-secondary);
    border-color: rgba(239, 68, 68, 0.25);
}
.manual-found-label {
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.5px;
    margin-right: 2px;
}

/* Sweep 2d.5.5 Etappe 2: Pulse-Credit-Icon als kanonisches Brand-
   Asset. Diamant-Form, blau-violett-Verlauf via inline SVG-Definition
   in /frontend/assets/icons/brand/credit.svg.

   Verwendung im Markup:
       <span class="pulse-credit-icon"></span>
       <span class="pulse-credit-icon pulse-credit-icon--sm"></span>
       <span class="pulse-credit-icon pulse-credit-icon--lg"></span>

   Wird ueber background-image geladen — color-Override geht ueber
   die mask-image-Variante (siehe pulse-credit-icon--mask). Default
   ist die Brand-Variante mit dem Built-in-Verlauf.

   In JS wird renderCreditIcon(size) als Helper bereitgestellt — alle
   Stellen die Credits anzeigen sollen das nutzen statt eigenen SVG.
*/
/* Sweep 2d.5.5.be Etappe 1: Inline-SVG-Variante (renderCreditIcon
   gibt das SVG direkt aus). Klasse setzt nur die Default-Farbe.
   Polygon-Outline matcht die Top-Bar-Variante (war seit Sweep 2c.x
   schon Brand-Light Polygon). */
.pulse-credit-icon {
    color: var(--color-brand-light, #7ab8f0);
    flex-shrink: 0;
    vertical-align: middle;
}

/* Sweep 2d.5.4 Etappe 8: Verifikations-Tabelle wie Lead-Uebersicht.
   Sortier-Header, Kontakt-Icons, Status-Pills. */
.verify-data-table .verify-sortable {
    cursor: pointer;
    user-select: none;
    transition: color var(--duration-fast) var(--ease-out);
}
.verify-data-table .verify-sortable:hover {
    color: var(--color-text-primary);
}
.verify-data-table .verify-sortable.is-sorted {
    color: var(--color-brand-primary);
}
.verify-sort-arrow {
    font-size: 11px;
    opacity: 0.7;
}
.verify-table-contact {
    width: 110px;
}
/* Sweep 2d.5.7.c.1.2 Etappe 2: Container-Selektoren fuer Verify-
   Kontakt-Icons. Item-Styles kommen aus dem zentralen Token-Block
   (.pulse-data-table__contact-ico-Co-Selektor-Liste). */
.verify-contact-icons {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.verify-status-pill {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--color-border);
}
.verify-status-pill.status-pill-pending {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
}
.verify-status-pill.status-pill-verified {
    background: rgba(34, 197, 94, 0.10);
    color: var(--color-success);
    border-color: rgba(34, 197, 94, 0.30);
}
.verify-status-pill.status-pill-review {
    background: rgba(245, 158, 11, 0.10);
    color: var(--color-warning);
    border-color: rgba(245, 158, 11, 0.30);
}
.verify-status-pill.status-pill-nolink {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
}
.verify-status-pill.status-pill-bad {
    background: rgba(239, 68, 68, 0.10);
    color: var(--color-danger);
    border-color: rgba(239, 68, 68, 0.30);
}

/* Sweep 2d.5.4 Etappe 7b: Filter-Icon-Buttons mit Toggle-State.
   Pill-shape, dezenter Border, aktive Variante Brand-Highlight. */
.verify-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.verify-filter-icon:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}
.verify-filter-icon[aria-pressed="true"] {
    background: var(--color-brand-primary);
    color: white;
    border-color: var(--color-brand-primary);
}

/* Sweep 2d.5.3 Etappe 7: Workflow-Explainer als collapsible
   <details>-Element. Default eingeklappt nach erstem Aufruf
   (localStorage-Flag in app.js). */
.verify-workflow-explainer {
    margin: var(--space-3) 0 var(--space-4) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    overflow: hidden;
}
.verify-workflow-explainer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    list-style: none;
    user-select: none;
}
.verify-workflow-explainer__summary::-webkit-details-marker {
    display: none;
}
.verify-workflow-explainer__summary:hover {
    background: var(--color-bg-elevated);
}
.verify-workflow-explainer[open] .verify-workflow-explainer__summary svg {
    transform: rotate(180deg);
}
.verify-workflow-explainer__summary svg {
    transition: transform var(--duration-base) var(--ease-out);
    color: var(--color-text-secondary);
}
.verify-workflow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
    list-style: none;
}
.verify-workflow-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}
.verify-workflow-step__num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-brand-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
}
.verify-workflow-step__text {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--lh-normal, 1.5);
}
.verify-workflow-step__text strong {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 2px;
}
/* Sweep 2d.5.4 Etappe 2b: Credits-Hinweis im Workflow-Box. */
.verify-workflow-credits-hint {
    margin: 0 var(--space-4) var(--space-4) var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-align: center;
}
.verify-workflow-credits-hint strong {
    color: var(--color-text-primary);
}

/* Sweep 2d.5.2 Etappe 4: Pagination-Footer im Verifikations-Tab.
   50 Leads/Page mit Prev/Next + Counter. Pulse-Glass-Aesthetik. */
.verify-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
}
.verify-pagination-counter {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.verify-pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.verify-pagination-pageinfo {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.verify-pagination .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Sweep 2d.5.3 Etappe 2: Per-Page-Selector (Pill-Group). */
.verify-pagination-perpage {
    display: inline-flex;
    margin-left: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-card);
}
.verify-pagination-perpage-btn {
    padding: 4px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    border-right: 1px solid var(--color-border);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.verify-pagination-perpage-btn:last-child {
    border-right: none;
}
.verify-pagination-perpage-btn:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}
.verify-pagination-perpage-btn.is-active {
    background: var(--color-brand-primary);
    color: white;
}

/* Sweep 2d.5.2 Etappe 1: Stat-Cards sind read-only Uebersicht.
   In 2d.5.1 waren sie als Buttons klickbar; das fuehrte zu doppelter
   Filterlogik (Cards + Tabs). Tabs uebernehmen die Filterung
   komplett. Cards bleiben rein zur Anzeige.

   Hover-Lift wird stark zurueckgenommen — Cards sollen NICHT mehr
   wie klickbare Elemente wirken. Die Akzent-Farben (success/warning/
   brand) bleiben, weil Mike die Pattern-Vorlage in andere Module
   uebertragen will. */
.run-stat-card {
    cursor: default;
}
.run-stat-card:hover {
    /* Original: translateY(-2px) + shadow-md + border-strong.
       Read-Only: kein Lift, nur ganz subtiler Border-Hauch. */
    transform: none;
    box-shadow: none;
    border-color: var(--color-border);
}

.run-stat-label {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.run-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
    font-variant-numeric: tabular-nums;
}

.run-progress {
    margin: var(--space-4) 0 var(--space-6) 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}
.run-progress-track {
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.run-progress-fill {
    height: 100%;
    background: var(--gradient-brand);
    transition: width var(--duration-base) var(--ease-out);
    box-shadow: var(--shadow-glow-blue);
}
.run-progress-meta {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.run-action-bar {
    background: linear-gradient(90deg, var(--color-bg-card) 0%, var(--color-bg-elevated) 100%) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-5) var(--space-6) !important;
}

.live-log {
    background: var(--color-bg-base) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) var(--space-5) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--text-xs);
    line-height: var(--line-height-relaxed);
    max-height: 420px;
}
.live-log-line {
    padding: 4px 0;
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}
.live-log-line .ts {
    color: var(--color-text-muted);
    font-size: var(--text-2xs);
    flex-shrink: 0;
    padding-top: 1px;
}
.live-log-line.success { color: var(--color-success); }
.live-log-line.error { color: var(--color-danger); }
.live-log-line.warn { color: var(--color-warning); }
.live-log-line.info { color: var(--color-text-secondary); }

.live-log-divider {
    margin: var(--space-3) 0 var(--space-2) 0;
    padding: var(--space-2) var(--space-3);
    background: rgba(42, 52, 176, 0.10);
    border-left: 3px solid var(--color-brand-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.spinner-inline {
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin var(--duration-base) linear infinite;
    display: inline-block;
    vertical-align: middle;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .spinner-inline { animation: none !important; }
    .run-stat-card:hover, .run-progress-fill { transition: none !important; transform: none !important; }
}

@keyframes score-reveal {
    0% { opacity: 0; transform: scale(0.5); }
    50% { transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}
.score-pill.score-reveal {
    animation: score-reveal var(--duration-slow) var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) {
    .score-pill.score-reveal { animation: none !important; }
}

/* ============================================================
   Phase 2b.10 E12 — Pipeline Drag&Drop
   HTML5-native, optimistic UI mit Revert.
   ============================================================ */

.pipeline-column-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-height: 80px;
}

.pipeline-column-empty {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-text-muted);
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.pipeline-card[draggable="true"] {
    cursor: grab;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
}
.pipeline-card[draggable="true"]:active {
    cursor: grabbing;
}

.pipeline-card.dragging {
    opacity: 0.5;
    transform: rotate(1.5deg) scale(0.98);
    cursor: grabbing;
    box-shadow: var(--shadow-lg), var(--shadow-glow-blue);
}

.pipeline-column.dragover-target {
    background: rgba(42, 52, 176, 0.10) !important;
    box-shadow: inset 0 0 0 2px var(--color-brand-primary), var(--shadow-glow-blue);
    transition: box-shadow var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}
.pipeline-column.dragover-target .pipeline-column-empty {
    border-color: var(--color-brand-primary);
    background: rgba(42, 52, 176, 0.06);
    color: var(--color-text-primary);
}
.pipeline-column.dragover-target .pipeline-column-header {
    color: var(--color-brand-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-card[draggable="true"] { transition: none !important; }
    .pipeline-card.dragging { transform: none !important; }
    .pipeline-column.dragover-target { transition: none !important; }
    .pipeline-column-empty { transition: none !important; }
}

/* ============================================================
   Phase 2c.22a — Pulse KI Page (Conversation-Layout)
   (loest den frueheren Phase 2b.10 E13-Bubble-Style ab)
   Avatar+Plain-Text statt Bubbles. Aurora-Background hinter einer
   pulse-glass-card. Sidebar im Glass-Stil. Page = Vollansicht des
   Widgets, gleiche Builder, gleiches Look-and-Feel.
   ============================================================ */

/* 2c.23.5: .pulse-conv-page (== #m-pulse, selbes Element) ist jetzt
   selbst der Grid-Container - kein Outer-Card-Wrapper mehr.
   Aurora liegt absolute hinter den Grid-Items.
   Sidebar (280px) + Main (1fr) sind direkte Grid-Items.
   Hoehe: das Modul nutzt das Standard-`.module`-Padding (0 24 24 24)
   aus der `.module:not(#m-verify)`-Regel - das 24px-Bottom-Padding
   liefert die sichtbare Composer-Luft zum Browser-Bottom. Page-Hoehe
   reicht via flex-Layout der Main-Card so weit, wie der Modul-
   Container es erlaubt. Min-height stellt sicher, dass das Modul
   den vollen sichtbaren .main-Bereich ausfuellt, ohne ein
   100vh-calc zu erzwingen. */
/* 2c.23.6: Grid-Layout an `#m-pulse.active` (Spec 1,1,0) gebunden.
   `.module.active { display: block }` (0,2,0) wuerde sonst ein reines
   `.pulse-conv-page { display: grid }` (0,1,0) schlagen - das war die
   Ursache, dass Conv-Sidebar OBEN statt LINKS lag. ID-Specificity
   gewinnt eindeutig.
   min-height-Default 128 = 88 (main margin-top) + 16 (main pad-bottom)
                          + 24 (m-pulse padding-bottom). */
.pulse-conv-page {
    position: relative;
}

#m-pulse.active {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    min-height: calc(100vh - var(--pulse-page-min-offset, 128px));
}

.pulse-conv-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* === Sidebar ===
   2c.23.5: Background komplett raus. Trennung zwischen Conv-Sidebar
   und Main entsteht durch Spacing (Grid-Gap) und durch den
   Glass-Card-Look auf .pulse-conv-main rechts - keine Backgrounds /
   Borders / Gradients als Trenner mehr. Sidebar ist relativ-positioniert
   ueber der Aurora (z-index sichert den Stacking-Context). */
.pulse-conv-sidebar {
    position: relative;
    z-index: 1;
    /* 2c.23.7: padding-top 16 -> 3, damit der „Neuer Chat"-Btn auf
       gleicher y-Linie wie der Card-Header-Title rechts startet.
       Rechnung: Card-Header-Title-Top = Card-Outer + 1 (border) + 16
       (header-pad-top) = +17. Mit Btn-padding-top 14 (Login-Submit)
       muss sidebar-padding-top = 17 - 14 = 3 sein. */
    padding: 3px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    background: transparent;
}

.pulse-conv-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* 2c.23.1: Sidebar-Override fuer den „Neuer Chat"-Btn.
   Erbt vom .pulse-conv-sidebar .login-submit-btn 1:1 alle Effekte
   (Sheen-Sweep, Hover-Glow, Light-Mode-Variante). Hier nur das margin-
   top: 12px aus dem Login-Btn neutralisieren - in der Sidebar steht
   der Btn als erstes Element ohne Vorgaenger und braucht den Abstand
   nicht.
   Rollback (falls zu wuchtig fuer die Sidebar): HTML-Klasse
   wieder auf "pulse-glass-btn pulse-conv-new-chat" setzen, in app
   .auth-overlay .login-submit-btn-Selektoren den .pulse-conv-sidebar-
   Selektor entfernen und diesen Block durch die alte Variante ersetzen
   { width: 100%; justify-content: center; gap: 6px; font-size: 13px;
     padding: 10px; }. */
.pulse-conv-sidebar .login-submit-btn.pulse-conv-new-chat {
    margin-top: 0;
}

.pulse-conv-search {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
}

.pulse-conv-archive-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    line-height: 1.3;
}

.pulse-conv-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: -4px;
    padding: 4px;
}

.pulse-conv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.pulse-conv-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.95);
}

.pulse-conv-item.active {
    background: rgba(42, 52, 176, 0.18);
    border-color: rgba(79, 126, 219, 0.3);
    color: #fff;
}

.pulse-conv-item.archived {
    opacity: 0.55;
}

.pulse-conv-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2c.23b: Hover-Action im Chat-Item (Archivieren bzw. Wiederherstellen).
   Loescht NICHT - daher dezenter neutraler Hover statt destruktivem
   Rot. Klassenname war frueher .pulse-conv-delete. */
.pulse-conv-action {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.pulse-conv-action:hover {
    background: rgba(79, 126, 219, 0.16);
    color: rgba(255, 255, 255, 0.95);
}

/* === Main / Header ===
   2c.23.5: .pulse-conv-main traegt jetzt die Glass-Card-Klasse
   (innerer Card-Look) und sitzt als Grid-Item neben der Sidebar.
   position: relative + z-index 1 sichert Stacking ueber der Aurora.
   min-height: 0 plus overflow: hidden erlauben dem inneren
   Messages-Container, intern zu scrollen statt das Modul zu sprengen. */
.pulse-conv-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.pulse-conv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
}

.pulse-conv-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display, var(--font-sans, inherit));
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.pulse-conv-header-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: #4f7edb;
}

.pulse-conv-header-icon svg {
    width: 100%;
    height: 100%;
}

.pulse-conv-header-meta {
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

/* === Messages === */
.pulse-conv-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@keyframes pulse-conv-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pulse-conv-msg {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 760px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    animation: pulse-conv-msg-in 200ms ease-out;
}

.pulse-conv-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2a34b0 0%, #1a2280 100%);
    border: 1px solid rgba(79, 126, 219, 0.3);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
}

.pulse-conv-msg-avatar svg {
    width: 14px;
    height: 14px;
}

.pulse-conv-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.pulse-conv-msg-content {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    padding-top: 4px;
    flex: 1;
    min-width: 0;
}

.pulse-conv-msg.user {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.pulse-conv-msg.user .pulse-conv-msg-content {
    text-align: right;
}

.pulse-conv-msg-error .pulse-conv-msg-content {
    color: #f87171;
    font-style: italic;
}

.pulse-conv-typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
}
.pulse-conv-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(79, 126, 219, 0.7);
    box-shadow: 0 0 8px rgba(42, 52, 176, 0.6);
    animation: pulseConvTyping 1.2s infinite ease-in-out;
}
.pulse-conv-typing span:nth-child(2) { animation-delay: 0.2s; }
.pulse-conv-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulseConvTyping {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* === Tool-Cards === */
.pulse-conv-tool {
    margin-left: 40px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 720px;
}

.pulse-conv-tool-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pulse-conv-tool-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(42, 52, 176, 0.2);
    color: #4f7edb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pulse-conv-tool-icon svg {
    width: 14px;
    height: 14px;
}

.pulse-conv-tool-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.pulse-conv-tool-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.pulse-conv-tool-status svg {
    width: 12px;
    height: 12px;
}

.pulse-conv-tool-status.loading { color: #eab107; }
.pulse-conv-tool-status.ok      { color: #22c55e; }
.pulse-conv-tool-status.error   { color: #f87171; }

.pulse-conv-tool-filters {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    padding-left: 34px;
    line-height: 1.4;
}

.pulse-conv-tool-result {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    padding-left: 34px;
    white-space: pre-wrap;
    line-height: 1.5;
}
.pulse-conv-tool-result:empty { display: none; }

/* === Quick-Actions / Suggestions === */
.pulse-conv-quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 32px 12px 72px;
}

.pulse-conv-suggestion {
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 999px;
}

/* === Composer (Page) ===
   2c.24: Composer ist ein wiederverwendbares Pattern. Page (.pulse-
   conv-form) und Widget (.pulse-ki-window-form) teilen die identischen
   Struktur-Properties via Multi-Selektoren weiter unten in diesem
   File (~Z12530+). Die Page-spezifischen Werte stehen hier; die
   Widget-Werte beim Widget-Block. Padding-/Sizing-Detail ist im
   Widget-Block dokumentiert. */
.pulse-conv-form {
    padding: 16px 24px 24px;
    background: transparent;
}

.pulse-conv-input {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    max-height: 180px;
    resize: none;
    font-family: inherit;
    border-radius: 12px;
}

/* 2c.23.1 Punkt 4: Padding/Height-Override braucht ID-Specificity,
   sonst schlaegt das globale `textarea { height: 44px; padding: 0 16px
   !important }` aus 3924+ den Class-Override. Mit #pulseInput (Spec
   1,0,0) garantiert. */
#pulseInput {
    height: auto !important;
    min-height: 48px !important;
    padding: 12px 60px 12px 16px !important;
}

/* === Markdown-Content im Bubble === */
.pulse-conv-msg-content p              { margin: 0 0 8px 0; }
.pulse-conv-msg-content p:last-child   { margin-bottom: 0; }
.pulse-conv-msg-content strong         { font-weight: 600; color: #fff; }
.pulse-conv-msg-content em             { font-style: italic; }
.pulse-conv-msg-content ul,
.pulse-conv-msg-content ol             { margin: 8px 0; padding-left: 20px; }
.pulse-conv-msg-content li             { margin: 4px 0; }
.pulse-conv-msg-content code           {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
}
.pulse-conv-msg-content pre {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
    margin: 8px 0;
}
.pulse-conv-msg-content pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.pulse-conv-msg-content blockquote {
    margin: 8px 0;
    padding-left: 12px;
    border-left: 2px solid rgba(79, 126, 219, 0.5);
    color: rgba(255, 255, 255, 0.7);
}
.pulse-conv-msg-content h1,
.pulse-conv-msg-content h2,
.pulse-conv-msg-content h3,
.pulse-conv-msg-content h4 {
    font-family: var(--font-display, var(--font-sans, inherit));
    font-weight: 600;
    margin: 12px 0 6px 0;
    line-height: 1.3;
    color: #fff;
}
.pulse-conv-msg-content h1 { font-size: 18px; }
.pulse-conv-msg-content h2 { font-size: 16px; }
.pulse-conv-msg-content h3 { font-size: 14px; }
.pulse-conv-msg-content h4 { font-size: 13px; }
.pulse-conv-msg-content a {
    color: #4f7edb;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pulse-conv-msg-content hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 12px 0;
}

/* === Light-Mode === */
:root[data-theme="light"] .pulse-conv-sidebar          {
    /* 2c.23.5: Sidebar-Background im Light-Mode ebenfalls transparent.
       Trennung zur Main-Card kommt aus Spacing + Glass-Card-Look. */
    background: transparent;
}
:root[data-theme="light"] .pulse-conv-sidebar,
:root[data-theme="light"] .pulse-conv-header,
:root[data-theme="light"] .pulse-conv-form             { border-color: rgba(0, 0, 0, 0.08); }
:root[data-theme="light"] .pulse-conv-header-title     { color: #18181b; }
:root[data-theme="light"] .pulse-conv-header-meta      { color: rgba(0, 0, 0, 0.5); }
:root[data-theme="light"] .pulse-conv-msg-content      { color: rgba(0, 0, 0, 0.88); }
:root[data-theme="light"] .pulse-conv-msg-content strong,
:root[data-theme="light"] .pulse-conv-msg-content h1,
:root[data-theme="light"] .pulse-conv-msg-content h2,
:root[data-theme="light"] .pulse-conv-msg-content h3,
:root[data-theme="light"] .pulse-conv-msg-content h4   { color: #18181b; }
:root[data-theme="light"] .pulse-conv-msg-content code { background: rgba(0, 0, 0, 0.05); }
:root[data-theme="light"] .pulse-conv-msg-content pre  { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); }
:root[data-theme="light"] .pulse-conv-tool             { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.85); }
:root[data-theme="light"] .pulse-conv-tool-label       { color: rgba(0, 0, 0, 0.9); }
:root[data-theme="light"] .pulse-conv-tool-filters,
:root[data-theme="light"] .pulse-conv-tool-result      { color: rgba(0, 0, 0, 0.7); }
:root[data-theme="light"] .pulse-conv-item             { color: rgba(0, 0, 0, 0.75); }
:root[data-theme="light"] .pulse-conv-item:hover       { background: rgba(0, 0, 0, 0.04); color: #18181b; }
:root[data-theme="light"] .pulse-conv-item.active      { color: #1e3a8a; }

/* === Reduced-Motion === */
@media (prefers-reduced-motion: reduce) {
    .pulse-conv-msg,
    .pulse-conv-typing span,
    .pulse-conv-suggestion {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Phase 2b.10 E14 — Dashboard / Reseller / Settings / Login
   Letzte Module-Sammlung. Theme-Bind + Awwwards-Detail.
   ============================================================ */

/* === Login / Setup-Overlay === */
.auth-overlay {
    background: var(--gradient-brand) !important;
    background-size: 200% 200% !important;
    animation: pulse-gradient-shift 24s ease-in-out infinite;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.auth-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 800px 600px at 20% 20%, rgba(234, 177, 7, 0.08), transparent 60%),
        radial-gradient(ellipse 600px 400px at 80% 80%, rgba(42, 52, 176, 0.30), transparent 60%);
    pointer-events: none;
}

.auth-card {
    background: var(--color-bg-card) !important;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-xl), 0 0 80px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(24px);
    padding: var(--space-12) !important;
    max-width: 420px;
    width: 100%;
    position: relative;
    z-index: 1;
    animation: pulse-msg-in var(--duration-slow) var(--ease-out);
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-8) !important;
}
.auth-logo-img {
    max-height: 56px;
    filter: drop-shadow(0 0 24px rgba(42, 52, 176, 0.25));
}

.auth-title {
    font-family: var(--font-display) !important;
    font-size: var(--text-2xl) !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary) !important;
    margin-bottom: var(--space-2) !important;
    text-align: center;
}
.auth-subtitle {
    font-size: var(--text-sm) !important;
    color: var(--color-text-muted) !important;
    text-align: center;
    margin-bottom: var(--space-8) !important;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.auth-form .field-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-2);
    display: block;
}
.auth-form .input {
    width: 100%;
    background: var(--color-bg-base) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-4) !important;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.auth-form .input:focus {
    outline: none;
    border-color: var(--color-brand-primary) !important;
    box-shadow: var(--shadow-glow-blue);
}
.auth-form .field-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.auth-error {
    background: var(--color-danger-soft) !important;
    color: var(--color-danger) !important;
    border-left: 3px solid var(--color-danger);
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4) !important;
}

/* === Dashboard Stat-Cards (Theme-Bind + Premium) === */
.stat-card {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-6) !important;
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.stat-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-brand);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand-primary) !important;
    box-shadow: var(--shadow-md), var(--shadow-glow-blue);
}
.stat-card:hover::after { opacity: 1; }

.stat-card-icon {
    background: rgba(42, 52, 176, 0.10) !important;
    color: var(--color-brand-primary) !important;
    border-radius: var(--radius-md);
    width: 40px;
    height: 40px;
}
.stat-card-icon.success { background: var(--color-success-soft) !important; color: var(--color-success) !important; }
.stat-card-icon.warn    { background: var(--color-warning-soft) !important; color: var(--color-warning) !important; }
.stat-card-icon.error   { background: var(--color-danger-soft) !important; color: var(--color-danger) !important; }
.stat-card-icon.gold    { background: var(--color-accent-gold-soft) !important; color: var(--color-accent-gold) !important; }

.stat-value {
    font-family: var(--font-display) !important;
    font-size: var(--text-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-primary) !important;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted) !important;
    margin-bottom: var(--space-2);
}
.stat-trend {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}
.stat-trend.up { color: var(--color-success) !important; }
.stat-trend.down { color: var(--color-danger) !important; }

/* Highlight-Variante (Hero-Card) */
.stat-card.highlight,
.stat-card.gold {
    background: var(--gradient-brand) !important;
    border-color: var(--color-brand-deep) !important;
    color: #ffffff;
}
.stat-card.highlight .stat-value,
.stat-card.gold .stat-value,
.stat-card.highlight .stat-label,
.stat-card.gold .stat-label {
    color: #ffffff !important;
}
.stat-card.highlight .stat-card-icon,
.stat-card.gold .stat-card-icon {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--color-accent-gold) !important;
}

/* === Reseller-Cards (theme-bind) === */
.reseller-card-icon {
    background: rgba(42, 52, 176, 0.10) !important;
    color: var(--color-brand-primary) !important;
    border-radius: var(--radius-md);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === Settings-Tabs Premium === */
.settings-tabs-list {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-1);
    gap: var(--space-1);
}
.settings-tabs-list button {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-2) var(--space-4) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    transition: all var(--duration-fast) var(--ease-out);
}
.settings-tabs-list button:hover {
    background: var(--color-bg-hover) !important;
    color: var(--color-text-primary) !important;
}
.settings-tabs-list button.active {
    background: rgba(42, 52, 176, 0.15) !important;
    color: var(--color-brand-primary) !important;
    box-shadow: var(--shadow-glow-blue);
    font-weight: var(--font-weight-semibold) !important;
}

@media (prefers-reduced-motion: reduce) {
    .auth-overlay { animation: none !important; }
    .auth-card { animation: none !important; }
    .stat-card,
    .stat-card:hover,
    .settings-tabs-list button {
        transition: none !important;
        transform: none !important;
    }
    .stat-card::after { transition: none !important; }
}

/* ============================================================
   Phase 2b.10 E15 — Animation-System + Konsistenz-Audit
   Letzter Layer: Page-Transitions, Scroll-Reveal, Safety-Net.
   ============================================================ */

/* === Module Page-Transition === */
@keyframes module-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.module.active {
    animation: module-enter var(--duration-base) var(--ease-out);
}

/* === Scroll-Reveal-System === */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
    will-change: opacity, transform;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger-Variante (per data-reveal-delay="<index>") */
[data-reveal][data-reveal-delay="1"] { transition-delay: 60ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 120ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 180ms; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 240ms; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 300ms; }

/* === Konsistenz: Skeleton-Loaders auf Theme-Tokens === */
.list-skeleton-row,
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-elevated) 0%,
        var(--color-bg-hover) 50%,
        var(--color-bg-elevated) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.4s var(--ease-in-out) infinite;
    border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === Reduced-Motion: pro E15-Komponente === */
@media (prefers-reduced-motion: reduce) {
    .module.active { animation: none !important; }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .list-skeleton-row,
    .skeleton { animation: none !important; }
}

/* Global reduced-motion safety net — letzte Verteidigungslinie.
   Egal welche Komponente vergessen wurde explizit zu cappen,
   diese Regel deckelt alle Animationen auf <=10ms. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Phase 2b.11 — Dashboard als Visual-Pattern-Setter
   Statement-Hero, 12-col Bento, Brand-Glow als Bridge zwischen
   Sidebar und Content. Setzt die Pattern-Sprache fuer Folge-
   Module (Pulse-KI, Login, Lead-Detail, Pool, ...).
   ============================================================ */

/* === Page-Container mit Brand-Glow-Bridge === */
.dashboard-page {
    position: relative;
    min-height: 100vh;
}
.dashboard-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: 400px;
    /* 2b.11.1: subtler glow auf neutral-schwarzem Background (5% statt 8%) */
    background: radial-gradient(
        ellipse at top,
        rgba(42, 52, 176, 0.05) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}
[data-theme="light"] .dashboard-page::before {
    background: radial-gradient(
        ellipse at top,
        rgba(42, 52, 176, 0.03) 0%,
        transparent 70%
    );
}
.dashboard-content {
    position: relative;
    z-index: 1;
    padding: 32px;
}

/* ============================================================
   Sweep 3.1.b DB2 — Demo-Chart-Card (3.1.a CA3) entfernt. Echte
   Dashboard-Charts leben jetzt in .dashboard-chart-card (DB5).
   Die Apex-Tooltip-Overrides bleiben global wirksam — werden von
   allen Dashboard-Charts gleichermassen genutzt.
   ============================================================ */
.apexcharts-tooltip.apexcharts-theme-dark {
    background: var(--color-bg-card-solid, #141416) !important;
    border: 1px solid var(--color-border-strong, rgba(255,255,255,0.10)) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
    border-radius: 10px !important;
    color: var(--color-text-primary, #fff) !important;
}
.apexcharts-tooltip-title {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06)) !important;
    font-family: var(--font-sans, Inter, sans-serif) !important;
    font-weight: 600 !important;
}

/* === Hero === */
.dashboard-hero {
    position: relative;
    width: 100%;
    padding: 64px 48px;
    margin: -32px -32px 48px -32px;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}
.dashboard-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg,
        rgba(42, 52, 176, 0.15) 0%,
        rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="light"] .dashboard-hero::before {
    background: linear-gradient(135deg,
        rgba(42, 52, 176, 0.05) 0%,
        rgba(0, 0, 0, 0) 60%);
}
.dashboard-hero::after {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 600px; height: 600px;
    background: radial-gradient(circle,
        rgba(42, 52, 176, 0.20) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
}
[data-theme="light"] .dashboard-hero::after {
    background: radial-gradient(circle,
        rgba(42, 52, 176, 0.10) 0%,
        transparent 70%);
}
.dashboard-hero-content {
    /* 2b.11.1: Hero ueber volle Breite, kein space-between mehr */
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
}
.dashboard-greeting {
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
    text-wrap: balance;
}
.dashboard-greeting-accent {
    background: linear-gradient(135deg,
        var(--color-brand-primary) 0%,
        #4f7edb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.dashboard-context {
    font-size: 18px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    max-width: 600px;
    margin: 0;
}
.dashboard-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--gradient-brand);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 4px 16px rgba(42, 52, 176, 0.4);
    transition: transform 200ms var(--ease-out),
                box-shadow 200ms var(--ease-out);
    cursor: pointer;
    font-family: var(--font-sans);
}
.dashboard-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(42, 52, 176, 0.5);
}
.dashboard-cta-button:active {
    transform: translateY(0);
}

/* === 12-Col Bento === */
.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

/* === Primary Card === */
.stat-card-primary {
    position: relative;
    grid-column: span 6;
    padding: 48px 40px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    overflow: hidden;
    transition: transform 250ms var(--ease-out),
                border-color 250ms var(--ease-out),
                box-shadow 250ms var(--ease-out);
}
.stat-card-primary::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-brand);
}
.stat-card-primary::after {
    content: '';
    position: absolute;
    bottom: -50%; right: -20%;
    width: 400px; height: 400px;
    background: radial-gradient(circle,
        rgba(234, 177, 7, 0.08) 0%,
        transparent 70%);
    pointer-events: none;
    filter: blur(60px);
}
.stat-card-primary:hover {
    transform: translateY(-4px);
    border-color: rgba(234, 177, 7, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 40px rgba(234, 177, 7, 0.1);
}
[data-theme="light"] .stat-card-primary:hover {
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.10),
                0 0 40px rgba(234, 177, 7, 0.20);
}
.stat-primary-label {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.stat-primary-label-icon {
    color: var(--color-accent-gold);
    flex-shrink: 0;
}
.stat-primary-value {
    font-family: var(--font-display);
    font-size: clamp(80px, 10vw, 120px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.95;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}
.stat-primary-meta {
    display: flex;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.stat-primary-meta-item {
    font-size: 14px;
    color: var(--color-text-secondary);
}
.stat-primary-meta-value {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* === Secondary Cards === */
.stat-card-secondary {
    grid-column: span 3;
    padding: 28px 24px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    transition: transform 200ms var(--ease-out),
                border-color 200ms var(--ease-out),
                background-color 200ms var(--ease-out);
    position: relative;
    overflow: hidden;
}
.stat-card-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    background: var(--color-bg-hover);
}
.stat-secondary-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.stat-secondary-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.stat-secondary-value {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    line-height: 1.05;
}
.stat-secondary-trend {
    font-size: 13px;
    color: var(--color-text-secondary);
    min-height: 1em;
}
.stat-secondary-trend.positive {
    color: var(--color-success);
}

/* === Utility-Row === */
.utility-row {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 32px;
    margin-top: 48px;
}
.utility-card {
    padding: 32px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 20px;
}
.utility-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 12px;
}
.utility-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    font-family: var(--font-sans);
}
.utility-card-meta {
    font-size: 13px;
    color: var(--color-text-muted);
}

.run-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.run-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    transition: background-color 150ms var(--ease-out),
                border-color 150ms var(--ease-out);
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
}
.run-item:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border);
}
.run-item-empty {
    color: var(--color-text-muted);
    font-size: 13px;
    padding: 24px;
    justify-content: center;
}
.run-item-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.run-item-status.success {
    background: var(--color-success);
    box-shadow: 0 0 12px var(--color-success);
}
.run-item-status.failed { background: var(--color-danger); }
.run-item-status.partial { background: var(--color-warning); }
.run-item-info {
    flex: 1;
    min-width: 0;
}
.run-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.run-item-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.run-item-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* === Quota-Bars === */
.quota-block + .quota-block { margin-top: 24px; }
.quota-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.quota-label {
    font-size: 13px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.quota-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.quota-bar {
    height: 6px;
    background: var(--color-bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}
.quota-bar-fill {
    height: 100%;
    background: var(--gradient-brand);
    border-radius: 3px;
    transition: width 600ms var(--ease-out);
    box-shadow: 0 0 12px rgba(42, 52, 176, 0.4);
}
.quota-meta {
    font-size: 12px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* === Stagger-Reveal beim Page-Enter === */
@keyframes dashboard-hero-enter {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.module.active .dashboard-greeting   { animation: dashboard-hero-enter 600ms var(--ease-out)        both; }
.module.active .dashboard-context    { animation: dashboard-hero-enter 600ms var(--ease-out) 100ms both; }
.module.active .dashboard-cta-button { animation: dashboard-hero-enter 600ms var(--ease-out) 200ms both; }
.module.active .stat-card-primary    { animation: dashboard-hero-enter 600ms var(--ease-out) 250ms both; }
.module.active .stat-card-secondary:nth-of-type(2) {
    animation: dashboard-hero-enter 600ms var(--ease-out) 350ms both;
}
.module.active .stat-card-secondary:nth-of-type(3) {
    animation: dashboard-hero-enter 600ms var(--ease-out) 450ms both;
}
.module.active .utility-card         { animation: dashboard-hero-enter 600ms var(--ease-out) 600ms both; }

/* === Responsive Stack === */
@media (max-width: 1100px) {
    .stat-card-primary   { grid-column: span 12; }
    .stat-card-secondary { grid-column: span 6; }
    .utility-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .dashboard-content { padding: 24px 16px; }
    .dashboard-hero { padding: 48px 24px; margin: -24px -16px 32px -16px; }
    .stat-card-secondary { grid-column: span 12; }
    .stat-primary-meta { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-greeting,
    .dashboard-context,
    .dashboard-cta-button,
    .stat-card-primary,
    .stat-card-secondary,
    .utility-card {
        animation: none !important;
    }
    .stat-card-primary,
    .stat-card-secondary,
    .dashboard-cta-button,
    .quota-bar-fill,
    .run-item {
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 2b.12 — Raycast Visual Reset
   Aurora-Page-BG, Floating-Sidebar, Glass-Cards, Bento-Dashboard.
   Mike's Maßstab: 'Wie Raycast, dann hochpreisig anbietbar.'
   ============================================================ */

/* === A) Page-Aurora: drei Brand-Blobs als Eyecatcher === */
.page-aurora {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}

.aurora-blob-1 {
    top: -15%;
    right: -10%;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle,
        var(--aurora-primary) 0%,
        rgba(42, 52, 176, 0.10) 30%,
        transparent 65%);
    animation: aurora-drift-1 24s ease-in-out infinite alternate;
}

.aurora-blob-2 {
    top: 25%;
    left: -8%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle,
        var(--aurora-secondary) 0%,
        transparent 60%);
    filter: blur(100px);
    animation: aurora-drift-2 30s ease-in-out infinite alternate-reverse;
}

.aurora-blob-3 {
    bottom: -10%;
    right: 20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle,
        var(--aurora-tertiary) 0%,
        transparent 70%);
    filter: blur(120px);
    animation: aurora-drift-3 35s ease-in-out infinite alternate;
}

.aurora-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
    opacity: 0.03;
    mix-blend-mode: overlay;
}

@keyframes aurora-drift-1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-60px, 40px) scale(1.08); }
    100% { transform: translate(40px, -30px) scale(0.95); }
}

@keyframes aurora-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(80px, -50px) scale(1.10); }
    100% { transform: translate(-50px, 60px) scale(0.92); }
}

@keyframes aurora-drift-3 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-40px, -60px) scale(1.05); }
    100% { transform: translate(50px, 30px) scale(0.98); }
}

[data-theme="light"] .aurora-blob-1,
[data-theme="light"] .aurora-blob-2,
[data-theme="light"] .aurora-blob-3 {
    opacity: 0.5;
    filter: blur(120px);
}
[data-theme="light"] .aurora-noise { opacity: 0.015; }

/* App-Container: Body bleibt schwarz, Aurora liegt drueber */
body {
    background: var(--color-bg-base) !important;
}
.app, #appRoot {
    position: relative;
    z-index: 1;
}

/* === B) Floating Sidebar === */
.sidebar.sidebar-floating {
    position: fixed;
    top: 16px;
    bottom: 16px;
    left: 16px;
    width: 256px;
    height: auto;

    background: rgba(15, 15, 17, 0.6);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    padding: 20px 12px;
    z-index: 100;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
[data-theme="light"] .sidebar.sidebar-floating {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.sidebar-floating .sidebar-brand {
    padding: 12px 16px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 16px;
    background: transparent !important;
}
[data-theme="light"] .sidebar-floating .sidebar-brand {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
.sidebar-floating .sidebar-logo,
.sidebar-floating .sidebar-logo-img {
    width: 100%;
    max-width: 140px;
    height: auto;
}

/* Section-Label */
.sidebar-floating .nav-section,
.sidebar-floating .sidebar-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: 0 12px;
    margin: 16px 0 6px 0;
    background: transparent !important;
}
.sidebar-floating .nav-section:first-child,
.sidebar-floating .sidebar-section-label:first-child {
    margin-top: 0;
}

/* Nav-Items: Reset + Glass-Hover + Active-Brand-Glow */
.sidebar-floating .nav-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    margin: 1px 0 !important;
    border-radius: 10px !important;
    color: var(--color-text-secondary) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background-color 150ms ease-out,
                color 150ms ease-out;
    border: 1px solid transparent !important;
    position: relative;
}
.sidebar-floating .nav-item .nav-icon,
.sidebar-floating .nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 150ms ease-out, color 150ms ease-out;
}
.sidebar-floating .nav-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="light"] .sidebar-floating .nav-item:hover {
    background: rgba(15, 23, 42, 0.05) !important;
}
.sidebar-floating .nav-item:hover .nav-icon,
.sidebar-floating .nav-item:hover svg {
    opacity: 1;
}

.sidebar-floating .nav-item.active {
    background: linear-gradient(135deg,
        rgba(42, 52, 176, 0.18) 0%,
        rgba(42, 52, 176, 0.08) 100%) !important;
    border-color: rgba(42, 52, 176, 0.3) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 24px rgba(42, 52, 176, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .sidebar-floating .nav-item.active {
    color: var(--color-brand-primary) !important;
}
.sidebar-floating .nav-item.active .nav-icon,
.sidebar-floating .nav-item.active svg {
    opacity: 1;
    color: var(--color-brand-light);
}
.sidebar-floating .nav-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--color-brand-light);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--color-brand-light);
}
.sidebar-floating .nav-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Nav-Badge Glas-Polish */
.sidebar-floating .nav-badge {
    margin-left: auto;
    font-size: 10px !important;
    font-weight: 600;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(234, 177, 7, 0.15) !important;
    color: #eab107 !important;
    border: 1px solid rgba(234, 177, 7, 0.3);
}
.sidebar-floating .nav-badge.soon,
.sidebar-floating .nav-badge.muted {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-text-muted) !important;
    border-color: rgba(255, 255, 255, 0.06);
}
.sidebar-floating .nav-badge.count {
    background: rgba(234, 177, 7, 0.15) !important;
    color: #eab107 !important;
    font-variant-numeric: tabular-nums;
}

/* Sidebar-Footer */
.sidebar-floating .sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: transparent !important;
}
[data-theme="light"] .sidebar-floating .sidebar-footer {
    border-top-color: rgba(15, 23, 42, 0.06) !important;
}

.sidebar-floating .status-row,
.sidebar-floating .sidebar-status {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    color: var(--color-text-muted) !important;
    background: transparent !important;
}
.sidebar-floating .status-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50%;
    background: #22c55e !important;
    box-shadow: 0 0 8px #22c55e;
    animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.sidebar-floating .user-tile,
.sidebar-floating .sidebar-user {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: background 150ms ease-out;
    background: transparent !important;
}
.sidebar-floating .user-tile:hover,
.sidebar-floating .sidebar-user:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
.sidebar-floating .user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #2a34b0, #4f7edb) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar-floating .user-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
}
.sidebar-floating .user-role {
    font-size: 11px !important;
    color: var(--color-text-muted) !important;
}

/* Theme-Toggle wird floating-style */
.sidebar-floating .theme-toggle-row {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px;
    padding: 4px;
    margin: 8px 12px;
    gap: 4px;
}
[data-theme="light"] .sidebar-floating .theme-toggle-row {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Main-Container Offset weil Sidebar floating ist */
.main {
    margin-left: 288px !important; /* 256 + 16 + 16 */
    margin-right: 16px !important;
    padding: 16px 16px 16px 16px !important;
    min-height: calc(100vh - 32px);
    position: relative;
    z-index: 1;
}
@media (max-width: 900px) {
    .main { margin-left: 0 !important; margin-right: 0 !important; }
    .sidebar.sidebar-floating { display: none; }
}

/* === C) Glass-Card-Pattern === */
.glass-card {
    background: rgba(20, 20, 22, 0.5);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 250ms var(--ease-in-out),
                border-color 250ms var(--ease-in-out),
                transform 250ms var(--ease-in-out),
                box-shadow 250ms var(--ease-in-out);
    position: relative;
    overflow: hidden;
    color: var(--color-text-primary);
}
.glass-card:hover {
    background: rgba(28, 28, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
        0 8px 32px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .glass-card:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow:
        0 12px 40px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.glass-card-primary {
    background: rgba(20, 20, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}
.glass-card-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-brand-light) 50%,
        transparent 100%);
    opacity: 0.6;
}
.glass-card-primary:hover {
    background: rgba(28, 28, 32, 0.7);
    border-color: rgba(79, 126, 219, 0.2);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(42, 52, 176, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* === D) Dashboard Bento === */
.dashboard-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.stat-mini {
    padding: 20px 24px;
}
.stat-mini-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(42, 52, 176, 0.15);
    border: 1px solid rgba(42, 52, 176, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--color-brand-light);
}
.stat-mini-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}
.stat-mini-value {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 4px;
}
.stat-mini-trend {
    font-size: 12px;
    color: var(--color-text-muted);
}
.stat-mini-trend.positive { color: #22c55e; }
.stat-mini-trend.negative { color: #ef4444; }

/* Quick-Actions */
.dashboard-actions-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.action-card {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-text-primary);
    font-family: inherit;
}
.action-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--color-text-secondary);
    transition: background 200ms ease-out,
                border-color 200ms ease-out,
                color 200ms ease-out;
}
.action-card-icon.brand {
    background: linear-gradient(135deg,
        rgba(42, 52, 176, 0.30) 0%,
        rgba(79, 126, 219, 0.20) 100%);
    border-color: rgba(79, 126, 219, 0.30);
    color: var(--color-brand-light);
    box-shadow: 0 0 24px rgba(42, 52, 176, 0.20);
}
.action-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}
.action-card-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
}
.action-card-arrow {
    position: absolute;
    top: 28px;
    right: 28px;
    font-size: 18px;
    color: var(--color-text-muted);
    transition: color 200ms ease-out, transform 200ms ease-out;
}
.action-card:hover .action-card-arrow {
    color: var(--color-brand-light);
    transform: translateX(4px);
}
.action-card:hover .action-card-icon {
    border-color: rgba(79, 126, 219, 0.30);
    color: var(--color-brand-light);
}

/* Bento: pipeline-mini + activity */
.dashboard-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.dashboard-pipeline-mini {
    padding: 24px 28px;
    grid-column: span 7;
}
.dashboard-activity {
    padding: 24px 28px;
    grid-column: span 5;
}
@media (max-width: 1100px) {
    .dashboard-pipeline-mini, .dashboard-activity { grid-column: span 12; }
    .dashboard-stats-row { grid-template-columns: repeat(2, 1fr); }
    .dashboard-actions-row { grid-template-columns: 1fr; }
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.widget-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    font-family: var(--font-sans);
}
.widget-action {
    font-size: 13px;
    color: var(--color-brand-light);
    text-decoration: none;
    transition: opacity 150ms ease-out;
}
.widget-action:hover { opacity: 0.8; }
.widget-meta {
    font-size: 13px;
    color: var(--color-text-muted);
}

.pipeline-stages-mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.stage-mini {
    padding: 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}
[data-theme="light"] .stage-mini {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.06);
}
.stage-mini-name {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stage-mini-count {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Activity-Feed */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 280px;
    overflow-y: auto;
}
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
}
.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    margin-top: 6px;
    flex-shrink: 0;
}
.activity-dot.success {
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}
.activity-dot.brand {
    background: var(--color-brand-light);
    box-shadow: 0 0 8px var(--color-brand-light);
}
.activity-content { flex: 1; min-width: 0; }
.activity-title {
    font-size: 13px;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: 2px;
}
.activity-time {
    font-size: 11px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Placeholder-Cards (Mail / Telefon) */
.dashboard-placeholders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
.placeholder-card {
    padding: 28px;
    opacity: 0.55;
    cursor: not-allowed;
    position: relative;
}
.placeholder-card:hover {
    opacity: 0.7;
    transform: none;
}
.placeholder-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(234, 177, 7, 0.10);
    color: #eab107;
    border: 1px solid rgba(234, 177, 7, 0.20);
}
.placeholder-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--color-text-muted);
}
.placeholder-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.placeholder-desc {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Runs-and-Budget-Row im neuen Bento */
.dashboard-runs-and-budget {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 16px;
    margin-top: 0;
}
@media (max-width: 1100px) {
    .dashboard-runs-and-budget { grid-template-columns: 1fr; }
}
/* Bestehende utility-card auf glass-card aliasen */
.utility-card {
    background: rgba(20, 20, 22, 0.5) !important;
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .utility-card {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* === E) Hero — full-width + cinematic === */
.dashboard-hero {
    width: 100%;
    padding: 64px 32px 48px 32px !important;
    margin: 0 0 32px 0 !important;
    border-bottom: none !important;
    background: transparent !important;
}
.dashboard-hero::before,
.dashboard-hero::after {
    display: none !important;
}
.dashboard-greeting {
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 72px) !important;
    font-weight: 700;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    color: #ffffff !important;
    margin: 0 0 16px 0;
}
[data-theme="light"] .dashboard-greeting {
    color: var(--color-text-primary) !important;
}
.dashboard-greeting-accent {
    background: linear-gradient(135deg, #4f7edb 0%, #2a34b0 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
.dashboard-context {
    font-size: 18px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    max-width: 640px;
}

/* Page-Container ohne brand-glow am Top (Aurora uebernimmt jetzt) */
.dashboard-page::before {
    display: none !important;
}
.dashboard-content {
    padding: 16px !important;
    position: relative;
    z-index: 1;
}

/* === F) Module-Background sicher transparent (Aurora durchscheinend) === */
.module {
    background: transparent !important;
}

/* === G) Reduced-Motion-Cap === */
@media (prefers-reduced-motion: reduce) {
    .aurora-blob,
    .glass-card,
    .glass-card:hover,
    .action-card,
    .action-card:hover,
    .action-card-arrow,
    .status-dot,
    .sidebar-floating .nav-item {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 2b.12.1 — Raycast-Bugfix
   - Alter Royal-Blau-Verlauf scheint durchs Glas (Z. 132+)
   - .app{display:grid;240px 1fr} kollidiert mit margin-left:288px
   - body{overflow:hidden;height:100vh} + main{overflow-y:auto}
     erzeugt Doppel-Scroll und schneidet bei height:100vh ab
   ============================================================ */

/* A) Alten Sidebar-Verlauf killen wenn floating aktiv ist */
.sidebar.sidebar-floating {
    background: rgba(15, 15, 17, 0.6);
    background-image: none !important;
    overflow: hidden;
}
[data-theme="light"] .sidebar.sidebar-floating {
    background: rgba(255, 255, 255, 0.7);
    background-image: none !important;
}
.sidebar.sidebar-floating::before,
.sidebar.sidebar-floating::after {
    display: none !important;
    background: none !important;
    background-image: none !important;
}
/* Inneren Scroll-Container der Sidebar selbst nutzbar machen */
.sidebar.sidebar-floating .sidebar-nav,
.sidebar.sidebar-floating > nav {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

/* B) App-Grid raus, Body scrollt, Main fliesst */
body {
    overflow: visible !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh;
    background: var(--color-bg-base) !important;
}

.app, #appRoot {
    display: block !important;
    height: auto !important;
    grid-template-columns: none !important;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.main {
    margin-left: 288px !important; /* 256 sidebar + 16 gap-left + 16 gap-right */
    margin-right: 16px !important;
    padding: 16px 24px !important;
    width: auto !important;
    height: auto !important;
    min-height: calc(100vh - 32px);
    overflow: visible !important;
    background: transparent !important;
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .main {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* C) Aurora liegt sicher hinter allem Content */
.page-aurora {
    z-index: 0;
}

/* D) Topbar war frueher weiss-tinted backdrop — im Dark/Glas-Modus
   stoert das, also transparent + ohne Weiss-Backdrop. */
.topbar {
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--color-border) !important;
}
[data-theme="dark"] .topbar {
    background: transparent !important;
}

/* E) Module bleiben transparent damit Aurora durchscheint;
   Module-Content bekommt die Glas-Cards */
.module {
    background: transparent !important;
}

/* F) Auth-Overlay weiterhin volle Hoehe (das ist KEIN scroll-content) */
.auth-overlay {
    height: 100vh !important;
    overflow: hidden !important;
}

/* ============================================================
   Phase 2b.13 — Raycast-Polish (9 Punkte nach Mike's Live-Test)
   ============================================================ */

/* P1: Aurora deutlicher (mix-blend + groessere Blobs) */
.aurora-blob {
    mix-blend-mode: screen;
}
[data-theme="light"] .aurora-blob {
    mix-blend-mode: multiply;
}
.aurora-blob-1 {
    width: 1100px;
    height: 1100px;
}
.aurora-blob-2 {
    width: 850px;
    height: 850px;
}

/* P3: Logo — Glow + Theme-Switch */
.sidebar-logo {
    filter: drop-shadow(0 0 20px rgba(234, 177, 7, 0.4))
            drop-shadow(0 0 40px rgba(234, 177, 7, 0.2));
    transition: filter var(--duration-base) var(--ease-out);
}
[data-theme="light"] .sidebar-logo {
    filter: drop-shadow(0 0 16px rgba(234, 177, 7, 0.25))
            drop-shadow(0 0 32px rgba(234, 177, 7, 0.15));
}
.sidebar-logo-dark { display: block; }
.sidebar-logo-light { display: none; }
[data-theme="light"] .sidebar-logo-dark { display: none; }
[data-theme="light"] .sidebar-logo-light { display: block; }

/* P4: Modul-Container respektiert .main-Margin (kein negative-margin
   in Pool/Pipeline/Pulse/Reseller/Settings/Lead-Detail). */
.module {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}
.module .module-header,
.module .module-content,
.module .topbar,
.module .breadcrumb-container {
    padding-left: 24px;
    padding-right: 24px;
}

/* P5: Sidebar-Hover neutral (kein Gold) + Padding-Fix */
.sidebar-floating .sidebar-nav,
.sidebar-floating > nav {
    padding: 0 8px;
}
.sidebar-floating .nav-item {
    padding: 10px 14px !important;
    margin: 1px 0 !important;
}
.sidebar-floating .nav-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--color-text-primary) !important;
}
[data-theme="light"] .sidebar-floating .nav-item:hover {
    background: rgba(10, 10, 10, 0.05) !important;
}
.sidebar-floating .nav-item:hover .nav-icon,
.sidebar-floating .nav-item:hover svg {
    opacity: 1;
}
/* Active-Item bleibt einziger starker Highlight (von 2b.12). Active::before
   nicht von Hover ueberschrieben werden. */

/* P6: Greeting "Mike" mit echtem Glow + Pulse-Animation */
.dashboard-greeting-accent {
    filter: drop-shadow(0 0 32px rgba(79, 126, 219, 0.7))
            drop-shadow(0 0 16px rgba(79, 126, 219, 0.5));
    animation: greeting-glow-pulse 4s ease-in-out infinite;
}
@keyframes greeting-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 32px rgba(79, 126, 219, 0.7))
                drop-shadow(0 0 16px rgba(79, 126, 219, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 48px rgba(79, 126, 219, 0.9))
                drop-shadow(0 0 24px rgba(79, 126, 219, 0.6));
    }
}

/* P7: Sidebar-Scrollbar custom (4px, dezent) */
.sidebar-floating::-webkit-scrollbar {
    width: 4px;
}
.sidebar-floating::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-floating::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 2px;
}
.sidebar-floating::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 126, 219, 0.30);
}

/* P8: Global Custom-Scrollbar (Brand-Hover) */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    transition: background 200ms var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 126, 219, 0.35);
}
*::-webkit-scrollbar-corner {
    background: transparent;
}
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
[data-theme="light"] *::-webkit-scrollbar-thumb {
    background: rgba(10, 10, 10, 0.15);
}
[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
    background: rgba(42, 52, 176, 0.40);
}
[data-theme="light"] * {
    scrollbar-color: rgba(10, 10, 10, 0.15) transparent;
}

/* P2 + P9: Lesbarkeit — alle hardcoded grey/rgba in App-Bereichen
   auf Token-Vars zwingen. */
.action-card-desc,
.stat-mini-trend,
.activity-time,
.stage-mini-name,
.sidebar-section-label,
.nav-section,
.placeholder-desc,
.widget-meta,
.quota-meta,
.quota-label,
.dashboard-context,
.run-item-subtitle {
    color: var(--color-text-muted) !important;
}
.activity-title,
.run-item-title,
.action-card-title,
.utility-card-title,
.placeholder-title,
.widget-header h3 {
    color: var(--color-text-primary) !important;
}
.run-item-stats,
.stat-primary-meta-item,
.stat-secondary-trend {
    color: var(--color-text-secondary) !important;
}

/* Reduced-Motion-Cap fuer 2b.13 Animations */
@media (prefers-reduced-motion: reduce) {
    .dashboard-greeting-accent,
    .sidebar-logo {
        animation: none !important;
        transition: none !important;
    }
    *::-webkit-scrollbar-thumb {
        transition: none !important;
    }
}

/* ============================================================
   Phase 2b.14 — Polish-Detail (14 Punkte) + Topbar
   ============================================================ */

/* P1: Greeting "Mike" — solid Color + text-shadow Glow (statt
   text-clip Gradient + drop-shadow, der zerflossen ist) */
.dashboard-greeting-accent {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #4f7edb;
    filter: none;
    text-shadow:
        0 0 24px rgba(79, 126, 219, 0.6),
        0 0 48px rgba(79, 126, 219, 0.4);
    animation: greeting-glow-pulse 4s ease-in-out infinite;
}
@keyframes greeting-glow-pulse {
    0%, 100% {
        text-shadow:
            0 0 24px rgba(79, 126, 219, 0.6),
            0 0 48px rgba(79, 126, 219, 0.4);
    }
    50% {
        text-shadow:
            0 0 36px rgba(79, 126, 219, 0.85),
            0 0 64px rgba(79, 126, 219, 0.5);
    }
}
[data-theme="light"] .dashboard-greeting-accent {
    color: #2a34b0;
    text-shadow:
        0 0 16px rgba(42, 52, 176, 0.30),
        0 0 32px rgba(42, 52, 176, 0.20);
}

/* P2: Mail/Telefon Placeholder lesbar (kein doppeltes Daempfen) */
.placeholder-card {
    opacity: 1;
    cursor: not-allowed;
    position: relative;
    filter: saturate(0.6);
}
.placeholder-card:hover { transform: none; }
.placeholder-title {
    color: var(--color-text-primary) !important;
    opacity: 0.85;
}
.placeholder-desc {
    color: var(--color-text-secondary) !important;
    opacity: 1;
}

/* P3: Sidebar — kein Default-Scroll, nur Inner-Nav scrollt wenn noetig */
.sidebar-floating {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-floating .sidebar-brand { flex-shrink: 0; }
.sidebar-floating .sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
}
.sidebar-floating .sidebar-nav,
.sidebar-floating > nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
.sidebar-floating .sidebar-nav::-webkit-scrollbar,
.sidebar-floating > nav::-webkit-scrollbar {
    width: 0;
}
.sidebar-floating .sidebar-nav:hover::-webkit-scrollbar,
.sidebar-floating > nav:hover::-webkit-scrollbar {
    width: 4px;
}
.sidebar-floating .sidebar-nav::-webkit-scrollbar-thumb,
.sidebar-floating > nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 2px;
}
.sidebar-floating .nav-item {
    padding: 9px 14px !important;
}
.sidebar-floating .nav-section,
.sidebar-floating .sidebar-section-label {
    margin: 12px 0 4px 0 !important;
}

/* P4: Glass-Card-Border deutlicher */
.glass-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

/* P5: Aurora — kein mix-blend (Banding raus), gestaffelte Verlaeufe */
.aurora-blob {
    mix-blend-mode: normal;
}
.aurora-blob-1 {
    background: radial-gradient(circle,
        rgba(42, 52, 176, 0.50) 0%,
        rgba(42, 52, 176, 0.25) 25%,
        rgba(42, 52, 176, 0.08) 50%,
        transparent 70%);
    filter: blur(60px);
}
.aurora-blob-2 {
    background: radial-gradient(circle,
        rgba(79, 126, 219, 0.40) 0%,
        rgba(79, 126, 219, 0.15) 35%,
        transparent 65%);
    filter: blur(70px);
}
.aurora-blob-3 {
    background: radial-gradient(circle,
        rgba(80, 90, 200, 0.30) 0%,
        rgba(80, 90, 200, 0.10) 40%,
        transparent 70%);
    filter: blur(80px);
}

/* P7: Aurora schneller + mehr Movement */
.aurora-blob-1 { animation-duration: 18s; }
.aurora-blob-2 { animation-duration: 22s; }
.aurora-blob-3 { animation-duration: 26s; }
@keyframes aurora-drift-1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-120px, 80px) scale(1.15); }
    100% { transform: translate(80px, -60px) scale(0.92); }
}
@keyframes aurora-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(150px, -100px) scale(1.18); }
    100% { transform: translate(-100px, 120px) scale(0.88); }
}
@keyframes aurora-drift-3 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-80px, -120px) scale(1.10); }
    100% { transform: translate(100px, 60px) scale(0.95); }
}

/* P6: stat-mini = Glass */
.stat-mini {
    background: rgba(20, 20, 22, 0.5);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .stat-mini {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* P8: Theme-Toggle-Buttons sichtbar in beiden Themes */
.sidebar-floating .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.sidebar-floating .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
.sidebar-floating .theme-toggle-btn.active {
    background: rgba(79, 126, 219, 0.15);
    border-color: rgba(79, 126, 219, 0.3);
    color: var(--color-brand-light);
}
[data-theme="light"] .sidebar-floating .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.10);
    color: var(--color-text-primary);
}
[data-theme="light"] .sidebar-floating .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sidebar-floating .theme-toggle-btn.active {
    background: rgba(42, 52, 176, 0.10);
    border-color: rgba(42, 52, 176, 0.30);
    color: var(--color-brand-primary);
}

/* P9: Activity-Feed mit Icon-Container + Type-Akzenten */
.activity-feed { gap: 12px; }
.activity-item {
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background var(--duration-fast) var(--ease-out);
}
.activity-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .activity-item:hover {
    background: rgba(0, 0, 0, 0.04);
}
.activity-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
[data-theme="light"] .activity-icon {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
}
.activity-import .activity-icon {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.25);
    color: #22c55e;
}
.activity-verify .activity-icon {
    background: rgba(79, 126, 219, 0.10);
    border-color: rgba(79, 126, 219, 0.25);
    color: var(--color-brand-light);
}
.activity-score .activity-icon {
    background: rgba(234, 177, 7, 0.10);
    border-color: rgba(234, 177, 7, 0.25);
    color: #eab107;
}
.activity-pipeline .activity-icon {
    background: rgba(80, 90, 200, 0.10);
    border-color: rgba(80, 90, 200, 0.25);
    color: #4f7edb;
}

/* P11: Topbar (floating Glass) */
.topbar-floating {
    position: fixed;
    top: 16px;
    left: 288px;
    right: 16px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: rgba(15, 15, 17, 0.6);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    z-index: 99;
}
[data-theme="light"] .topbar-floating {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.topbar-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.topbar-breadcrumbs .breadcrumb-item {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
.topbar-breadcrumbs .breadcrumb-item:hover { color: var(--color-text-secondary); }
.topbar-breadcrumbs .breadcrumb-item.active {
    color: var(--color-text-primary);
    font-weight: 500;
}
.topbar-breadcrumbs .breadcrumb-separator {
    color: var(--color-text-subtle);
    font-size: 12px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.topbar-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.topbar-time #topbar-time {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.topbar-date {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 3px;
}
.topbar-notifications {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
[data-theme="light"] .topbar-notifications {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
.topbar-notifications:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
}
.topbar-notifications:disabled { cursor: default; }
.topbar-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(234, 177, 7, 0.20);
    color: #eab107;
    border: 1px solid rgba(234, 177, 7, 0.30);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Phase 2d.3 / 2d.4-hotfix: globale Credit-Anzeige (Topbar-Pille rechts).
   Wrapper-Pattern: .topbar-credits-wrap ist position:relative und
   dient als Anker fuer das absolute Popover. Pille selbst ist plain
   (kein Rahmen/Background) wie 2d.4a. */
.topbar-credits-wrap {
    position: relative;
    display: inline-flex;
}
.topbar-credits-wrap[hidden] { display: none; }

.topbar-credits {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 4px;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: color var(--duration-fast) var(--ease-out);
}

/* ============================================================
   Sweep 3.0.c.3.3 S3 — Top-Bar Gruppen-Mail-Progress-Pille
   Sweep 3.0.c.3.4 G3 — Layout-Refactor: zwei Zeilen + Bar.
   ============================================================
   Erscheint LINKS von Credits (Mike-Wunsch G3). Verschwindet wenn
   keine aktive Campaign laeuft. Drei Visual-States:
     .is-running -> brand-mid (Pulse-Blau, sanftes Pulsen am Icon)
     .is-paused  -> warn-orange (Pulse-Orange)
     .is-done    -> success-green, 30s Auto-Hide
   Layout: zweispaltig (Icon + Text oben, Bar darunter) — Bar ist
   2px hoch, schlank wie ein Daumennagel-Strich.
*/
.topbar-bulk-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    min-height: 30px;
    padding: 5px 12px 6px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.35);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    /* tabular-nums damit X/N nicht beim Counter-Update wackelt. */
    font-variant-numeric: tabular-nums;
    min-width: 180px;
}
.topbar-bulk-pill[hidden] {
    display: none !important;
}
.topbar-bulk-pill:hover {
    color: var(--color-text-primary);
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(148, 163, 184, 0.32);
}
.topbar-bulk-pill__row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.topbar-bulk-pill-icon {
    flex-shrink: 0;
    color: var(--color-brand-light, #7ab8f0);
    display: inline-flex;
    align-items: center;
}
.topbar-bulk-pill-icon svg {
    display: block;
}
.topbar-bulk-pill-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sweep 3.0.cleanup R7 + 3.0.ui-foundation U9 — Top-Bar Sequenzen-
 * Pille (dezent, neutral, nur Icon + Count, Tooltip).
 *
 * U9-Befund: Pille war vorher violett mit "X Sequenzen aktiv"-Text;
 * Mike fand sie zu laut und zu auffällig. Neuer Stil: Standard-Top-
 * Bar-Glass-Optik mit Brand-Mid-Icon, Count als kleine tabular-num-
 * Zahl. Lange Beschreibung lebt im Tooltip (title-Attribut). */
.topbar-sequence-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.14));
    background: var(--color-glass-bg, rgba(255, 255, 255, 0.04));
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.78));
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    font-variant-numeric: tabular-nums;
}
.topbar-sequence-pill[hidden] { display: none !important; }
.topbar-sequence-pill:hover {
    background: var(--color-glass-bg-hover, rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.24);
    color: var(--color-text-primary, #ffffff);
}
.topbar-sequence-pill-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-brand-mid, #4f7edb);
}
.topbar-sequence-pill-icon svg { display: block; }
.topbar-sequence-pill:hover .topbar-sequence-pill-icon {
    color: var(--color-brand-light, #7ab8f0);
}
.topbar-sequence-pill-text {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.topbar-bulk-pill__bar {
    position: relative;
    height: 2px;
    border-radius: 1px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}
.topbar-bulk-pill__bar-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: var(--color-brand-mid, #4f7edb);
    transition: width var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.topbar-bulk-pill.is-running {
    border-color: rgba(79, 126, 219, 0.5);
    color: var(--color-text-primary);
}
.topbar-bulk-pill.is-running .topbar-bulk-pill-icon {
    color: var(--color-brand-mid, #4f7edb);
    /* sanftes Puls fuer "aktiv" — Refactoring-UI: bewegt, aber subtil. */
    animation: bulkPillPulse 2s ease-in-out infinite;
}
.topbar-bulk-pill.is-running .topbar-bulk-pill__bar-fill {
    background: var(--color-brand-mid, #4f7edb);
}
.topbar-bulk-pill.is-paused {
    border-color: rgba(212, 164, 55, 0.55);
    color: var(--color-text-primary);
    background: rgba(64, 48, 18, 0.40);
}
.topbar-bulk-pill.is-paused .topbar-bulk-pill-icon {
    color: var(--color-status-warn, #d4a437);
}
.topbar-bulk-pill.is-paused .topbar-bulk-pill__bar-fill {
    background: var(--color-status-warn, #d4a437);
}
.topbar-bulk-pill.is-done {
    border-color: rgba(56, 161, 105, 0.55);
    color: var(--color-text-primary);
    background: rgba(18, 64, 36, 0.30);
}
.topbar-bulk-pill.is-done .topbar-bulk-pill-icon {
    color: var(--color-status-success, #38a169);
}
.topbar-bulk-pill.is-done .topbar-bulk-pill__bar-fill {
    background: var(--color-status-success, #38a169);
    width: 100% !important;
}
@keyframes bulkPillPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}
.topbar-credits:hover {
    color: var(--color-text-primary);
}
.topbar-credits-icon {
    color: var(--color-brand-light, #7ab8f0);
    flex-shrink: 0;
}
.topbar-credits-value {
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.topbar-credits-label {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Low-Balance-Warning (< 50 Credits) - rote Akzentfarbe + sanftes Pulsen.
   2d.4a: nur Text-Color/Pulse, kein Background/Border. */
.topbar-credits.low .topbar-credits-icon,
.topbar-credits.low .topbar-credits-value {
    color: #ef4444;
}
.topbar-credits.low .topbar-credits-value {
    animation: topbar-credits-pulse 2.4s ease-in-out infinite;
}
@keyframes topbar-credits-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Popover unter der Credit-Pille mit Plan/Pakete/Reset-Datum.
   2d.4a: positioniert sich direkt unter der Pille (top: 100% + Gap).
   2d.5 Etappe 0a: rechtsbuendig garantiert mit !important - sonst
   konnte ein anderer Ancestor mit `right`-Property die Position
   versauen. min/max-width fuer stabile Breite auf allen Viewports. */
.topbar-credits-popover {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 260px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 16px 18px;
    background: rgba(20, 20, 28, 0.55);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    z-index: 100;
    color: var(--color-text-secondary);
}
.topbar-credits-popover[hidden] { display: none; }
.topbar-credits-popover-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    font-size: 13px;
}
.topbar-credits-popover-label {
    color: var(--color-text-muted);
}
.topbar-credits-popover-value {
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.topbar-credits-popover-row.total {
    margin-top: 4px;
    font-weight: 600;
}
.topbar-credits-popover-row.total .topbar-credits-popover-label,
.topbar-credits-popover-row.total .topbar-credits-popover-value {
    color: var(--color-text-primary);
    font-size: 14px;
}
.topbar-credits-popover-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 0;
}
.topbar-credits-popover-reset {
    margin-top: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: right;
    min-height: 14px;
}
/* 2d.4a: „Pakete kaufen"-Btn nutzt das login-submit-btn-Pattern.
   Im Tool-Kontext (.app) erbt es automatisch die gedaempfte Glow-
   Variante aus 2c.23.2a. Sidebar-spezifisches margin-top: 12 wird
   nicht ueberschrieben - im Popover hat der Btn sowieso einen Abstand
   zum naechsten Element via margin-top. */
.topbar-credits-popover .login-submit-btn {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 13px;
    width: 100%;
}

/* Light-Mode: Popover bekommt Light-Glass-Look. */
[data-theme="light"] .topbar-credits-popover {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Main weicht der Topbar (88px = 16 + 56 + 16) */
.main {
    margin-top: 88px !important;
    min-height: calc(100vh - 88px - 16px) !important;
}
.dashboard-hero,
.module-hero {
    padding-top: 32px !important;
}

/* Alte inline-Topbar im .main ist neutral wenn noch irgendwo gerendert */
.main .topbar {
    display: none !important;
}

@media (max-width: 900px) {
    .topbar-floating { left: 16px; }
}

/* P12: Light-Card-Schatten konsistent (eine Regel fuer alle Card-Varianten) */
[data-theme="light"] .glass-card,
[data-theme="light"] .stat-mini,
[data-theme="light"] .action-card,
[data-theme="light"] .utility-card,
[data-theme="light"] .placeholder-card {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
[data-theme="light"] .glass-card:hover,
[data-theme="light"] .stat-mini:hover,
[data-theme="light"] .action-card:hover {
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* P13: Active-Sidebar-Item nur Brand, KEIN Gold mehr */
.sidebar-floating .nav-item.active {
    background: linear-gradient(135deg,
        rgba(42, 52, 176, 0.20) 0%,
        rgba(42, 52, 176, 0.10) 100%) !important;
    border-color: rgba(42, 52, 176, 0.35) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 24px rgba(42, 52, 176, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.sidebar-floating .nav-item.active::before {
    background: var(--color-brand-light) !important;
    box-shadow: 0 0 12px var(--color-brand-light) !important;
}
.sidebar-floating .nav-item.active .nav-icon,
.sidebar-floating .nav-item.active svg {
    color: var(--color-brand-light) !important;
}
/* "neu"-Pill behaelt Gold (Highlight-Rolle) - nicht ueberschreiben */

/* P14: Light-Mode Icons neutral (default), brand nur fuer .brand-Variante */
[data-theme="light"] .stat-mini-icon,
[data-theme="light"] .action-card-icon:not(.brand),
[data-theme="light"] .placeholder-icon {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--color-text-secondary);
}
[data-theme="light"] .stat-mini:hover .stat-mini-icon,
[data-theme="light"] .action-card:not(.brand):hover .action-card-icon {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary);
}
[data-theme="light"] .action-card-icon.brand {
    background: linear-gradient(135deg,
        rgba(42, 52, 176, 0.12) 0%,
        rgba(79, 126, 219, 0.08) 100%);
    border-color: rgba(42, 52, 176, 0.20);
    color: var(--color-brand-primary);
    box-shadow: 0 0 16px rgba(42, 52, 176, 0.10);
}

/* Bonus 15: Light-Mode Glas-Optik durchgaengig */
[data-theme="light"] .glass-card,
[data-theme="light"] .action-card {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}
[data-theme="light"] .sidebar-floating {
    background: rgba(255, 255, 255, 0.65);
}
[data-theme="light"] .aurora-blob-1 {
    background: radial-gradient(circle,
        rgba(42, 52, 176, 0.15) 0%,
        rgba(42, 52, 176, 0.06) 40%,
        transparent 70%);
}
[data-theme="light"] .aurora-blob-2 {
    background: radial-gradient(circle,
        rgba(79, 126, 219, 0.12) 0%,
        transparent 60%);
}
[data-theme="light"] .aurora-blob-3 {
    background: radial-gradient(circle,
        rgba(80, 90, 200, 0.10) 0%,
        transparent 70%);
}

/* Reduced-Motion-Cap fuer 2b.14 */
@media (prefers-reduced-motion: reduce) {
    .aurora-blob,
    .dashboard-greeting-accent,
    .activity-item,
    .topbar-notifications,
    .sidebar-floating .theme-toggle-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Phase 2b.15 — Polish-Detail-Round-3 (9 Punkte + 2 Bugs)
   ============================================================ */

/* P1: Topbar mehr Glas-Wirkung (Border-Verlauf-Trick) */
.topbar-floating {
    background: rgba(15, 15, 17, 0.4);
    backdrop-filter: blur(48px) saturate(200%);
    -webkit-backdrop-filter: blur(48px) saturate(200%);
    border: 1px solid transparent;
    background-image:
        linear-gradient(rgba(15, 15, 17, 0.4), rgba(15, 15, 17, 0.4)),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.04) 50%,
            rgba(255, 255, 255, 0.12) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .topbar-floating {
    background: rgba(255, 255, 255, 0.5);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(0, 0, 0, 0.06) 50%,
            rgba(255, 255, 255, 0.9) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Sidebar gleiche Border-Verlauf-Technik */
.sidebar-floating {
    border: 1px solid transparent;
    background-image:
        linear-gradient(rgba(15, 15, 17, 0.5), rgba(15, 15, 17, 0.5)),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.04) 50%,
            rgba(255, 255, 255, 0.12) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    height: calc(100vh - 32px);
}
[data-theme="light"] .sidebar-floating {
    background: rgba(255, 255, 255, 0.6);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(255, 255, 255, 0.9) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* P2: Greeting "Mike" sauber (alle bg-Properties killen, dezenter Glow) */
.dashboard-greeting-accent {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #4f7edb;
    text-shadow:
        0 0 12px rgba(79, 126, 219, 0.5),
        0 0 24px rgba(79, 126, 219, 0.25);
    display: inline-block;
    filter: none;
    animation: greeting-glow-pulse 4s ease-in-out infinite;
}
@keyframes greeting-glow-pulse {
    0%, 100% {
        text-shadow:
            0 0 12px rgba(79, 126, 219, 0.5),
            0 0 24px rgba(79, 126, 219, 0.25);
    }
    50% {
        text-shadow:
            0 0 18px rgba(79, 126, 219, 0.7),
            0 0 36px rgba(79, 126, 219, 0.35);
    }
}
[data-theme="light"] .dashboard-greeting-accent {
    color: #2a34b0;
    text-shadow:
        0 0 8px rgba(42, 52, 176, 0.3),
        0 0 16px rgba(42, 52, 176, 0.15);
    animation: greeting-glow-pulse-light 4s ease-in-out infinite;
}
@keyframes greeting-glow-pulse-light {
    0%, 100% {
        text-shadow:
            0 0 8px rgba(42, 52, 176, 0.3),
            0 0 16px rgba(42, 52, 176, 0.15);
    }
    50% {
        text-shadow:
            0 0 12px rgba(42, 52, 176, 0.4),
            0 0 24px rgba(42, 52, 176, 0.2);
    }
}

/* P3: Aurora groesser/schneller/hoeher */
.aurora-blob-1 {
    top: -25%;
    right: -15%;
    width: 1400px;
    height: 1400px;
    animation-duration: 14s;
}
.aurora-blob-2 {
    top: 15%;
    left: -10%;
    width: 1000px;
    height: 1000px;
    animation-duration: 17s;
}
.aurora-blob-3 {
    bottom: -20%;
    right: 15%;
    width: 700px;
    height: 700px;
    animation-duration: 20s;
}
@keyframes aurora-drift-1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-180px, 120px) scale(1.20); }
    100% { transform: translate(120px, -100px) scale(0.88); }
}
@keyframes aurora-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(200px, -150px) scale(1.22); }
    100% { transform: translate(-140px, 180px) scale(0.85); }
}

/* P4: 3 Recent-Cards (Imports / Verifikationen / Scorings) */
.dashboard-recent-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}
@media (max-width: 1100px) {
    .dashboard-recent-row { grid-template-columns: 1fr; }
}
.recent-card { padding: 24px; }
.recent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.recent-item-empty {
    padding: 16px 0;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}
.recent-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.recent-icon.icon-import {
    background: rgba(79, 126, 219, 0.15);
    color: #4f7edb;
}
.recent-icon.icon-verify {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.recent-icon.icon-score {
    background: rgba(234, 177, 7, 0.15);
    color: #eab107;
}
.recent-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}
.recent-meta {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* P5: Sidebar-Scrollbar definitiv weg */
.sidebar-floating .sidebar-nav,
.sidebar-floating > nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px;
    scrollbar-width: none;
}
.sidebar-floating .sidebar-nav::-webkit-scrollbar,
.sidebar-floating > nav::-webkit-scrollbar {
    width: 0;
    display: none;
}
.sidebar-floating .nav-item {
    padding: 8px 14px !important;
    font-size: 13.5px !important;
}
.sidebar-floating .nav-section,
.sidebar-floating .sidebar-section-label {
    margin: 12px 0 4px 0 !important;
    font-size: 10px !important;
    padding: 0 14px !important;
}
.sidebar-floating .sidebar-footer { padding-top: 12px; }
.sidebar-floating .status-row,
.sidebar-floating .sidebar-status {
    padding: 6px 12px !important;
    font-size: 11px !important;
}
.sidebar-floating .user-tile,
.sidebar-floating .sidebar-user {
    padding: 6px 12px !important;
}
.sidebar-floating .user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
}

/* P6: Light-Cards echt Glas (mehr Transparenz + sichtbarer Blur) */
[data-theme="light"] .glass-card,
[data-theme="light"] .stat-mini,
[data-theme="light"] .action-card,
[data-theme="light"] .utility-card,
[data-theme="light"] .recent-card,
[data-theme="light"] .placeholder-card {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(32px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 4px 16px rgba(31, 38, 135, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
[data-theme="light"] .glass-card:hover,
[data-theme="light"] .action-card:hover,
[data-theme="light"] .stat-mini:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

/* P7: Light-Aurora deutlicher */
[data-theme="light"] .aurora-blob-1 {
    background: radial-gradient(circle,
        rgba(42, 52, 176, 0.22) 0%,
        rgba(42, 52, 176, 0.10) 30%,
        rgba(42, 52, 176, 0.04) 50%,
        transparent 70%);
}
[data-theme="light"] .aurora-blob-2 {
    background: radial-gradient(circle,
        rgba(79, 126, 219, 0.18) 0%,
        rgba(79, 126, 219, 0.08) 35%,
        transparent 65%);
}
[data-theme="light"] .aurora-blob-3 {
    background: radial-gradient(circle,
        rgba(80, 90, 200, 0.15) 0%,
        rgba(80, 90, 200, 0.05) 40%,
        transparent 70%);
}

/* P8: Content kompakter (naeher oben+links) */
.main {
    margin-top: 84px !important;
    margin-left: 280px !important;
    margin-right: 12px !important;
    padding: 12px 20px !important;
}
.dashboard-hero {
    padding: 20px 0 24px 0 !important;
}
.dashboard-stats-row,
.dashboard-actions-row,
.dashboard-recent-row,
.dashboard-bento {
    margin-bottom: 12px !important;
}

/* P9: Action-Cards Hover EINHEITLICH + 4. Card */
.dashboard-actions-row {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
    .dashboard-actions-row { grid-template-columns: repeat(2, 1fr); }
}
.action-card {
    transition: background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}
.action-card:hover {
    background: rgba(28, 28, 32, 0.7);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}
.action-card:hover .action-card-icon {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--color-text-primary);
}
.action-card:hover .action-card-icon.brand {
    background: linear-gradient(135deg,
        rgba(42, 52, 176, 0.40) 0%,
        rgba(79, 126, 219, 0.30) 100%);
    border-color: rgba(79, 126, 219, 0.40);
    color: #ffffff;
}
[data-theme="light"] .action-card:hover .action-card-icon {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .action-card:hover .action-card-icon.brand {
    background: linear-gradient(135deg,
        rgba(42, 52, 176, 0.18) 0%,
        rgba(79, 126, 219, 0.12) 100%);
}

/* Bug 2: Activity-Empty-State explizit */
.activity-feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
    color: var(--color-text-muted);
}
.activity-feed-empty .empty-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
    color: var(--color-text-muted);
}
.activity-feed-empty .empty-title {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
    font-weight: 500;
}
.activity-feed-empty .empty-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    max-width: 280px;
    line-height: 1.4;
}

/* Reduced-Motion-Cap fuer 2b.15 */
@media (prefers-reduced-motion: reduce) {
    .aurora-blob,
    .dashboard-greeting-accent,
    .action-card,
    .recent-item {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 2b.16 — Dashboard-Final-Polish (7 Punkte)
   "Wenn das alles sitzt, dann haben wir das Dashboard."
   ============================================================ */

/* P1: Greeting "Mike" — scharfes Wort, dezente Aura statt Verschmierung */
.dashboard-greeting-accent {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #4f7edb;
    font-weight: 800;
    display: inline-block;
    filter: none;
    text-shadow:
        0 0 6px rgba(79, 126, 219, 0.4),
        0 0 12px rgba(79, 126, 219, 0.2);
    animation: greeting-glow-pulse 4s ease-in-out infinite;
}
@keyframes greeting-glow-pulse {
    0%, 100% {
        text-shadow:
            0 0 6px rgba(79, 126, 219, 0.4),
            0 0 12px rgba(79, 126, 219, 0.2);
    }
    50% {
        text-shadow:
            0 0 10px rgba(79, 126, 219, 0.55),
            0 0 18px rgba(79, 126, 219, 0.3);
    }
}
[data-theme="light"] .dashboard-greeting-accent {
    color: #2a34b0;
    text-shadow:
        0 0 4px rgba(42, 52, 176, 0.25),
        0 0 8px rgba(42, 52, 176, 0.12);
    animation: greeting-glow-pulse-light 4s ease-in-out infinite;
}
@keyframes greeting-glow-pulse-light {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(42, 52, 176, 0.25),
            0 0 8px rgba(42, 52, 176, 0.12);
    }
    50% {
        text-shadow:
            0 0 6px rgba(42, 52, 176, 0.35),
            0 0 12px rgba(42, 52, 176, 0.18);
    }
}

/* P3: Topbar + Sidebar — Border-Lichtkante in Brand-Blau (statt weiss) */
.topbar-floating {
    background: rgba(15, 15, 17, 0.4);
    backdrop-filter: blur(48px) saturate(200%);
    -webkit-backdrop-filter: blur(48px) saturate(200%);
    border: 1px solid transparent;
    background-image:
        linear-gradient(rgba(15, 15, 17, 0.4), rgba(15, 15, 17, 0.4)),
        linear-gradient(135deg,
            rgba(79, 126, 219, 0.4) 0%,
            rgba(42, 52, 176, 0.1) 50%,
            rgba(79, 126, 219, 0.3) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.sidebar-floating {
    border: 1px solid transparent;
    background-image:
        linear-gradient(rgba(15, 15, 17, 0.5), rgba(15, 15, 17, 0.5)),
        linear-gradient(135deg,
            rgba(79, 126, 219, 0.4) 0%,
            rgba(42, 52, 176, 0.08) 50%,
            rgba(79, 126, 219, 0.3) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
[data-theme="light"] .topbar-floating {
    background: rgba(255, 255, 255, 0.5);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        linear-gradient(135deg,
            rgba(42, 52, 176, 0.3) 0%,
            rgba(79, 126, 219, 0.08) 50%,
            rgba(42, 52, 176, 0.25) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
[data-theme="light"] .sidebar-floating {
    background: rgba(255, 255, 255, 0.6);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        linear-gradient(135deg,
            rgba(42, 52, 176, 0.3) 0%,
            rgba(79, 126, 219, 0.08) 50%,
            rgba(42, 52, 176, 0.25) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* P4: Typography-Audit — einheitliche Card-Klassen-Stack */

/* CARD-LABEL — alle Mini-Labels (HOT LEADS, BEREIT, etc.) */
.card-label,
.stat-mini-label,
.stage-mini-name,
.recent-card .recent-meta-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--color-text-muted) !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

/* CARD-VALUE — grosse Numbers (Stat-Mini, Stage-Counts) */
.card-value,
.stat-mini-value,
.stage-mini-count {
    font-family: var(--font-display) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--color-text-primary) !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
}

/* CARD-SUBTEXT — kleine Hint-Texte */
.card-subtext,
.stat-mini-trend,
.stat-mini-context {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.4 !important;
}

/* CARD-TITLE — Card-Headlines */
.card-title,
.action-card-title,
.widget-header h3,
.recent-card-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    letter-spacing: -0.005em !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
}

/* CARD-DESC — Card-Beschreibungen */
.card-desc,
.action-card-desc,
.placeholder-desc {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.4 !important;
}

/* RECENT-LIST-ITEM-TITLE / META */
.recent-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text-primary) !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
}
.recent-meta {
    font-size: 11px !important;
    color: var(--color-text-muted) !important;
    line-height: 1.3 !important;
}

/* WIDGET-META + WIDGET-ACTION */
.widget-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}
.widget-action {
    color: var(--color-brand-light);
    font-size: 12px;
    font-weight: 500;
}
[data-theme="light"] .widget-action {
    color: var(--color-brand-primary);
}

/* P5: Sidebar-Scrollbar nur bei kleinem Screen sichtbar */
.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
@media (max-height: 800px) {
    .sidebar-nav {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
    }
    .sidebar-nav::-webkit-scrollbar {
        width: 4px;
    }
    .sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.10);
        border-radius: 2px;
    }
    .sidebar-nav::-webkit-scrollbar-thumb:hover {
        background: rgba(79, 126, 219, 0.30);
    }
}

/* P6: Mehr Atemraum (Margin/Gap/Padding sanft hochgezogen) */
.main {
    margin-top: 84px !important;
    margin-left: 280px !important;
    margin-right: 16px !important;
    padding: 16px 24px !important;
}
.dashboard-stats-row,
.dashboard-actions-row,
.dashboard-recent-row {
    gap: 18px !important;
    margin-bottom: 18px !important;
}
.dashboard-bento {
    gap: 18px !important;
    margin-bottom: 18px !important;
}
.dashboard-runs-and-budget,
.dashboard-placeholders {
    gap: 18px !important;
    margin-bottom: 18px !important;
}
.stat-mini { padding: 22px 26px !important; }
.action-card { padding: 30px !important; }
.recent-card { padding: 26px !important; }
.utility-card { padding: 30px !important; }

/* P7: Light-Aurora richtig sichtbar (war zu subtle) */
[data-theme="light"] .aurora-blob-1 {
    background: radial-gradient(circle,
        rgba(42, 52, 176, 0.42) 0%,
        rgba(42, 52, 176, 0.20) 25%,
        rgba(42, 52, 176, 0.08) 50%,
        transparent 70%);
}
[data-theme="light"] .aurora-blob-2 {
    background: radial-gradient(circle,
        rgba(79, 126, 219, 0.35) 0%,
        rgba(79, 126, 219, 0.15) 35%,
        transparent 65%);
}
[data-theme="light"] .aurora-blob-3 {
    background: radial-gradient(circle,
        rgba(80, 90, 200, 0.28) 0%,
        rgba(80, 90, 200, 0.12) 40%,
        transparent 70%);
}

/* Reduced-Motion-Cap fuer 2b.16 */
@media (prefers-reduced-motion: reduce) {
    .dashboard-greeting-accent,
    .aurora-blob {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Phase 2b.16.1 — Final-Final Polish (4 Punkte)
   ============================================================ */

/* P1: "Mike"-Glow architektonisch fixen — Aura als ::before
   HINTER Text (z-index:-1), Buchstaben 100% scharf ohne text-shadow */
.dashboard-greeting-accent {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #4f7edb;
    font-weight: 800;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-shadow: none !important;
    filter: none;
    animation: none;
}
.dashboard-greeting-accent::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    background: radial-gradient(ellipse,
        rgba(79, 126, 219, 0.45) 0%,
        rgba(79, 126, 219, 0.20) 30%,
        transparent 65%);
    filter: blur(20px);
    z-index: -1;
    pointer-events: none;
    animation: greeting-aura-pulse 4s ease-in-out infinite;
}
@keyframes greeting-aura-pulse {
    0%, 100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}
[data-theme="light"] .dashboard-greeting-accent {
    color: #2a34b0;
    animation: none;
    text-shadow: none !important;
}
[data-theme="light"] .dashboard-greeting-accent::before {
    background: radial-gradient(ellipse,
        rgba(42, 52, 176, 0.25) 0%,
        rgba(42, 52, 176, 0.10) 35%,
        transparent 70%);
}

/* P2: Logo zentriert in Sidebar (horizontal + vertikal) */
.sidebar-floating .sidebar-brand,
.sidebar-brand {
    padding: 16px 16px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-floating .sidebar-logo,
.sidebar-logo {
    display: block;
    margin: 0 auto;
    max-width: 160px;
    width: auto;
    height: auto;
}

/* P3: Topbar/Sidebar Border-Lichtkante DEZENTER (war 0.4/0.1/0.3) */
.topbar-floating {
    background: rgba(15, 15, 17, 0.4);
    backdrop-filter: blur(48px) saturate(200%);
    -webkit-backdrop-filter: blur(48px) saturate(200%);
    border: 1px solid transparent;
    background-image:
        linear-gradient(rgba(15, 15, 17, 0.4), rgba(15, 15, 17, 0.4)),
        linear-gradient(135deg,
            rgba(79, 126, 219, 0.22) 0%,
            rgba(42, 52, 176, 0.06) 50%,
            rgba(79, 126, 219, 0.18) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.sidebar-floating {
    border: 1px solid transparent;
    background-image:
        linear-gradient(rgba(15, 15, 17, 0.5), rgba(15, 15, 17, 0.5)),
        linear-gradient(135deg,
            rgba(79, 126, 219, 0.22) 0%,
            rgba(42, 52, 176, 0.05) 50%,
            rgba(79, 126, 219, 0.18) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* P4: Light-Mode Aurora als GOLD (Day-Sonne vs. Night-Mond Konzept).
   Plus Cards weniger Blur damit Aurora durchschimmert. */
[data-theme="light"] .aurora-blob-1 {
    background: radial-gradient(circle,
        rgba(234, 177, 7, 0.55) 0%,
        rgba(234, 177, 7, 0.28) 25%,
        rgba(234, 177, 7, 0.12) 50%,
        transparent 70%);
}
[data-theme="light"] .aurora-blob-2 {
    background: radial-gradient(circle,
        rgba(248, 200, 50, 0.45) 0%,
        rgba(248, 200, 50, 0.20) 35%,
        transparent 65%);
}
[data-theme="light"] .aurora-blob-3 {
    background: radial-gradient(circle,
        rgba(220, 160, 0, 0.38) 0%,
        rgba(220, 160, 0, 0.15) 40%,
        transparent 70%);
}

/* Light-Cards: weniger Blur (32 -> 20) damit Aurora durchschimmert */
[data-theme="light"] .glass-card,
[data-theme="light"] .stat-mini,
[data-theme="light"] .action-card,
[data-theme="light"] .recent-card,
[data-theme="light"] .utility-card,
[data-theme="light"] .placeholder-card {
    background: rgba(255, 255, 255, 0.40) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* Light-Topbar/Sidebar: Border-Lichtkante in GOLD passend zur Gold-Aurora */
[data-theme="light"] .topbar-floating,
[data-theme="light"] .sidebar-floating {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
        linear-gradient(135deg,
            rgba(234, 177, 7, 0.30) 0%,
            rgba(234, 177, 7, 0.06) 50%,
            rgba(234, 177, 7, 0.22) 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

/* Reduced-Motion-Cap fuer 2b.16.1 */
@media (prefers-reduced-motion: reduce) {
    .dashboard-greeting-accent,
    .dashboard-greeting-accent::before,
    .aurora-blob {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Phase 2b.16.2 — Bugfix: Greeting unsichtbar / Gold zu kraeftig /
                          Logo-Doppel
   ============================================================ */

/* Bug 1: Greeting komplett-Reset.
   Das ::before-Pseudo aus 2b.16.1 verdeckte den Text durch
   blur(20px) + radial-gradient ueber dem Stacking-Context.
   Hier: ::before/::after KILLEN, Solid-Color mit weit-weggem
   Glow als sanfte Aura. */
.dashboard-greeting-accent::before {
    content: none !important;
    display: none !important;
}
.dashboard-greeting-accent::after {
    content: none !important;
    display: none !important;
}
.dashboard-greeting-accent {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #4f7edb !important;
    font-weight: 800;
    display: inline-block;
    text-shadow:
        0 0 20px rgba(79, 126, 219, 0.35),
        0 0 40px rgba(79, 126, 219, 0.15);
    filter: none;
    animation: none;
    position: static;
    z-index: auto;
}
[data-theme="light"] .dashboard-greeting-accent {
    color: #2a34b0 !important;
    text-shadow:
        0 0 16px rgba(42, 52, 176, 0.25),
        0 0 32px rgba(42, 52, 176, 0.10);
    animation: none;
}

/* Bug 2: Gold-Aurora drastisch reduzieren (war 0.55/0.45/0.38) */
[data-theme="light"] .aurora-blob-1 {
    background: radial-gradient(circle,
        rgba(234, 177, 7, 0.18) 0%,
        rgba(234, 177, 7, 0.08) 25%,
        rgba(234, 177, 7, 0.03) 50%,
        transparent 70%);
}
[data-theme="light"] .aurora-blob-2 {
    background: radial-gradient(circle,
        rgba(248, 200, 50, 0.15) 0%,
        rgba(248, 200, 50, 0.06) 35%,
        transparent 65%);
}
[data-theme="light"] .aurora-blob-3 {
    background: radial-gradient(circle,
        rgba(220, 160, 0, 0.12) 0%,
        rgba(220, 160, 0, 0.05) 40%,
        transparent 70%);
}

/* Topbar/Sidebar Border-Verlauf Gold im Light dezenter */
[data-theme="light"] .topbar-floating,
[data-theme="light"] .sidebar-floating {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        linear-gradient(135deg,
            rgba(234, 177, 7, 0.15) 0%,
            rgba(234, 177, 7, 0.03) 50%,
            rgba(234, 177, 7, 0.12) 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

/* Cards dichter im Light damit Gold-Aurora nicht durchgelb-tintet */
[data-theme="light"] .glass-card,
[data-theme="light"] .stat-mini,
[data-theme="light"] .action-card,
[data-theme="light"] .recent-card,
[data-theme="light"] .utility-card,
[data-theme="light"] .placeholder-card {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* Bug 3: Logo-Display-Switch mit hoeherer Specificity (.sidebar-brand
   als Container im Selector zwingt Override gegen 2b.13/16.1-Layer) */
.sidebar-brand .sidebar-logo-dark {
    display: block !important;
}
.sidebar-brand .sidebar-logo-light {
    display: none !important;
}
[data-theme="light"] .sidebar-brand .sidebar-logo-dark {
    display: none !important;
}
[data-theme="light"] .sidebar-brand .sidebar-logo-light {
    display: block !important;
}

/* ============================================================
   Phase 2b.16.3 — Greeting Glow + Animation zurueck
   "Mike" ist seit 2b.16.2 sichtbar. Jetzt sanfte Aura + Pulse
   zurueck — ohne ::before/filter:blur (war der Compositing-Bug).
   ============================================================ */

.dashboard-greeting-accent {
    color: #4f7edb !important;
    font-weight: 800;
    display: inline-block;
    text-shadow:
        0 0 24px rgba(79, 126, 219, 0.5),
        0 0 48px rgba(79, 126, 219, 0.22) !important;
    animation: greeting-pulse-clean 4s ease-in-out infinite !important;
    background: none !important;
    background-image: none !important;
    filter: none;
    position: static;
}

@keyframes greeting-pulse-clean {
    0%, 100% {
        text-shadow:
            0 0 24px rgba(79, 126, 219, 0.5),
            0 0 48px rgba(79, 126, 219, 0.22);
    }
    50% {
        text-shadow:
            0 0 32px rgba(79, 126, 219, 0.7),
            0 0 64px rgba(79, 126, 219, 0.32);
    }
}

[data-theme="light"] .dashboard-greeting-accent {
    color: #2a34b0 !important;
    text-shadow:
        0 0 20px rgba(42, 52, 176, 0.32),
        0 0 40px rgba(42, 52, 176, 0.15) !important;
    animation: greeting-pulse-clean-light 4s ease-in-out infinite !important;
}

@keyframes greeting-pulse-clean-light {
    0%, 100% {
        text-shadow:
            0 0 20px rgba(42, 52, 176, 0.32),
            0 0 40px rgba(42, 52, 176, 0.15);
    }
    50% {
        text-shadow:
            0 0 28px rgba(42, 52, 176, 0.45),
            0 0 56px rgba(42, 52, 176, 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-greeting-accent { animation: none !important; }
}

/* ============================================================
   Phase 2b.16.4 — Greeting Royal-Blau + Title-Case + Cleanup
   ============================================================ */

/* P1: Greeting auf echtes Royal-Blau (#2a34b0 statt Lila #4f7edb) */
.dashboard-greeting-accent {
    color: #2a34b0 !important;
    font-weight: 800;
    display: inline-block;
    text-shadow:
        0 0 24px rgba(42, 52, 176, 0.55),
        0 0 48px rgba(42, 52, 176, 0.28) !important;
    animation: greeting-pulse-royal 4s ease-in-out infinite !important;
    background: none !important;
    background-image: none !important;
    filter: none;
    position: static;
}
@keyframes greeting-pulse-royal {
    0%, 100% {
        text-shadow:
            0 0 24px rgba(42, 52, 176, 0.55),
            0 0 48px rgba(42, 52, 176, 0.28);
    }
    50% {
        text-shadow:
            0 0 32px rgba(42, 52, 176, 0.75),
            0 0 64px rgba(42, 52, 176, 0.4);
    }
}
[data-theme="light"] .dashboard-greeting-accent {
    color: #2a34b0 !important;
    text-shadow:
        0 0 20px rgba(42, 52, 176, 0.35),
        0 0 40px rgba(42, 52, 176, 0.18) !important;
    animation: greeting-pulse-royal-light 4s ease-in-out infinite !important;
}
@keyframes greeting-pulse-royal-light {
    0%, 100% {
        text-shadow:
            0 0 20px rgba(42, 52, 176, 0.35),
            0 0 40px rgba(42, 52, 176, 0.18);
    }
    50% {
        text-shadow:
            0 0 28px rgba(42, 52, 176, 0.5),
            0 0 56px rgba(42, 52, 176, 0.28);
    }
}

/* P2: Stat-Labels Title-Case + Sub-Headline-Optik (nicht uppercase Geschrei) */
.stat-mini-label,
.stage-mini-name,
.recent-card .recent-meta-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}

/* P3: Letzte-Laeufe-Card Layout-Reste neutralisieren */
.dashboard-runs-and-budget {
    display: none !important;
}
.dashboard-quota-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
.quota-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 900px) {
    .quota-grid { grid-template-columns: 1fr; }
}

/* P4: Kontingent-Card auf Glass-Card-Standard */
.kontingent-card,
.utility-card {
    background: rgba(20, 20, 22, 0.5) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
}
[data-theme="light"] .kontingent-card,
[data-theme="light"] .utility-card {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 4px 16px rgba(31, 38, 135, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Reduced-Motion-Cap fuer 2b.16.4 */
@media (prefers-reduced-motion: reduce) {
    .dashboard-greeting-accent { animation: none !important; }
}

/* ============================================================
   Phase 2b.16.5 — Glow-Boost + Recent-Inhalt + Sidebar-Reorder
                   + Header-Icons
   ============================================================ */

/* P1: Greeting-Glow VIEL deutlicher (3-Layer + breitere Pulse) */
.dashboard-greeting-accent {
    color: #2a34b0 !important;
    font-weight: 800;
    display: inline-block;
    text-shadow:
        0 0 16px rgba(42, 52, 176, 0.95),
        0 0 32px rgba(42, 52, 176, 0.7),
        0 0 64px rgba(42, 52, 176, 0.4) !important;
    animation: greeting-pulse-strong 4s ease-in-out infinite !important;
    background: none !important;
    background-image: none !important;
    filter: none;
    position: static;
}
@keyframes greeting-pulse-strong {
    0%, 100% {
        text-shadow:
            0 0 16px rgba(42, 52, 176, 0.95),
            0 0 32px rgba(42, 52, 176, 0.7),
            0 0 64px rgba(42, 52, 176, 0.4);
    }
    50% {
        text-shadow:
            0 0 24px rgba(42, 52, 176, 1),
            0 0 48px rgba(42, 52, 176, 0.85),
            0 0 96px rgba(42, 52, 176, 0.55);
    }
}
[data-theme="light"] .dashboard-greeting-accent {
    color: #2a34b0 !important;
    text-shadow:
        0 0 14px rgba(42, 52, 176, 0.6),
        0 0 28px rgba(42, 52, 176, 0.35),
        0 0 56px rgba(42, 52, 176, 0.18) !important;
    animation: greeting-pulse-strong-light 4s ease-in-out infinite !important;
}
@keyframes greeting-pulse-strong-light {
    0%, 100% {
        text-shadow:
            0 0 14px rgba(42, 52, 176, 0.6),
            0 0 28px rgba(42, 52, 176, 0.35),
            0 0 56px rgba(42, 52, 176, 0.18);
    }
    50% {
        text-shadow:
            0 0 20px rgba(42, 52, 176, 0.8),
            0 0 40px rgba(42, 52, 176, 0.5),
            0 0 80px rgba(42, 52, 176, 0.3);
    }
}

/* P3: Sidebar-Footer Reorder (User -> Logout -> Status -> Theme mittig) */
.sidebar-floating .sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
}
.sidebar-logout-btn {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.sidebar-logout-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="light"] .sidebar-logout-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-secondary);
}
[data-theme="light"] .sidebar-logout-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary);
}

/* Theme-Toggle-Row mittig */
.sidebar-theme-toggle-row,
.sidebar-floating .sidebar-theme-toggle-row {
    justify-content: center !important;
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
}

/* P4: Stat-Mini-Label = Action-Card-Title-Format (16px / 600 / primary) */
.stat-mini-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    color: var(--color-text-primary) !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}
.stat-mini-trend {
    font-size: 13px !important;
    color: var(--color-text-secondary) !important;
    margin-top: 4px !important;
}

/* P5: Widget-Header-Icon-Pattern (alle Cards bekommen Icon-Box + Title) */
.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}
.widget-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.widget-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.widget-header-icon svg {
    width: 16px;
    height: 16px;
}
[data-theme="light"] .widget-header-icon {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
    color: var(--color-text-secondary);
}
.widget-header h3,
.widget-header h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    margin: 0 !important;
    line-height: 1.3;
}

/* Reduced-Motion-Cap fuer 2b.16.5 */
@media (prefers-reduced-motion: reduce) {
    .dashboard-greeting-accent,
    .sidebar-logout-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Phase 2b.16.6 — Sidebar-Footer Reorder + Topbar-Logout-Icon
   ============================================================ */

/* P1: 2b.16.5 Logout-Button killen (User-Tile uebernimmt Logout) */
.sidebar-logout-btn {
    display: none !important;
}

/* User-Tile als Button-Element (sidebar-user trug onclick frueher) */
.sidebar-floating button.sidebar-user {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background var(--duration-fast) var(--ease-out);
}
.sidebar-floating button.sidebar-user:hover {
    background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .sidebar-floating button.sidebar-user:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* P2: Topbar-Logout-Icon — exakt selber Stil wie .topbar-notifications */
.topbar-logout-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.topbar-logout-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="light"] .topbar-logout-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-secondary);
}
[data-theme="light"] .topbar-logout-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary);
    border-color: rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-floating button.sidebar-user,
    .topbar-logout-btn {
        transition: none !important;
    }
}

/* ============================================================
   Phase 2b.16.7 — Theme-Toggle Border weg + Card-Reihen tauschen
   ============================================================ */

/* P1: Theme-Toggle-Container ohne Border/Background — Buttons stehen frei */
.sidebar-theme-toggle-row {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* P2: Card-Reihen-Tausch ist ein HTML-Reorder — keine zusaetzliche
   CSS-Regel noetig (Stagger-Animations laufen ueber .module.active
   Selectors die order-agnostic sind). */

/* ============================================================
   Phase 2b.16.8 — Theme-Toggle-Container-Border WIRKLICH weg
   Bug: 2b.12 .sidebar-floating .theme-toggle-row hat
   rgba-bg + border + radius mit !important — 2b.16.7-Selector
   .sidebar-theme-toggle-row war zu unspezifisch und hat nicht
   gegriffen. Tatsaechlicher Container im DOM (frontend/index.html
   Z. 176): <div class="theme-toggle-row sidebar-theme-toggle-row">.
   Fix: identische Specificity wie 2b.12-Regel + !important + safety
   net via [class*="theme-toggle"].
   ============================================================ */

/* Identische Specificity-Match auf 2b.12-Regel (Z. 7500) */
.sidebar-floating .theme-toggle-row,
.sidebar-floating .sidebar-theme-toggle-row,
.sidebar-footer .theme-toggle-row,
.sidebar-footer .sidebar-theme-toggle-row {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
}
[data-theme="light"] .sidebar-floating .theme-toggle-row,
[data-theme="light"] .sidebar-floating .sidebar-theme-toggle-row,
[data-theme="light"] .sidebar-footer .theme-toggle-row,
[data-theme="light"] .sidebar-footer .sidebar-theme-toggle-row {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Defense-in-depth: jeder Wrapper-Container im Footer der theme-toggle
   im Klassennamen hat (aber NICHT theme-toggle-btn = die Buttons) */
.sidebar-footer [class*="theme-toggle"]:not(.theme-toggle-btn):not(button) {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ============================================================
   Phase 2c.1 — Login-Modul Premium Visual Pass
   Pattern-Reuse aus Dashboard: glass-card, aurora-blob,
   sidebar-logo Theme-Switch, theme-toggle-row.
   ============================================================ */

/* Auth-Overlay als full-screen Login-Bg */
.auth-overlay.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-base);
    position: fixed;
    inset: 0;
    overflow: hidden;
    margin: 0;
    padding: 24px;
    z-index: 10000;
}

/* Aurora-Layer im Login (eigener Container damit Dashboard-Aurora
   nicht durchscheint) */
.login-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Login-Container ueber Aurora */
.login-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

/* Login-Card mit Mount-Animation */
.login-card {
    width: 100%;
    padding: 40px 36px;
    border-radius: 20px !important;
    display: flex;
    flex-direction: column;
    gap: 28px;
    animation: login-card-enter 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes login-card-enter {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Logo (Sidebar-Switch wiederverwendet) */
.login-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-logo .sidebar-logo {
    max-width: 180px;
    height: auto;
}

/* Hero */
.login-hero {
    text-align: center;
}
.login-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 8px 0;
    color: var(--color-text-primary);
}
.login-title-accent {
    color: #2a34b0;
    font-weight: 800;
    text-shadow:
        0 0 16px rgba(42, 52, 176, 0.85),
        0 0 32px rgba(42, 52, 176, 0.55),
        0 0 64px rgba(42, 52, 176, 0.30);
    animation: login-accent-pulse 4s ease-in-out infinite;
}
@keyframes login-accent-pulse {
    0%, 100% {
        text-shadow:
            0 0 16px rgba(42, 52, 176, 0.85),
            0 0 32px rgba(42, 52, 176, 0.55),
            0 0 64px rgba(42, 52, 176, 0.30);
    }
    50% {
        text-shadow:
            0 0 24px rgba(42, 52, 176, 1),
            0 0 48px rgba(42, 52, 176, 0.75),
            0 0 96px rgba(42, 52, 176, 0.45);
    }
}
.login-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Form */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

/* Input-Group mit Icon links */
.login-input-group {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-icon {
    position: absolute;
    left: 14px;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: color var(--duration-fast) var(--ease-out);
    z-index: 1;
}
.login-input {
    width: 100%;
    padding: 14px 16px 14px 42px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans);
    font-size: 14px !important;
    transition: background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
    height: auto !important;
}
.login-input::placeholder {
    color: var(--color-text-muted);
}
.login-input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow:
        0 0 0 4px rgba(42, 52, 176, 0.15),
        0 0 24px rgba(42, 52, 176, 0.25) !important;
}
.login-input-group:focus-within .login-input-icon {
    color: #4f7edb;
}

/* Eye-Toggle */
.login-input-toggle {
    position: absolute;
    right: 12px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    z-index: 2;
}
.login-input-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
}

/* Error */
.login-error {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 13px;
    line-height: 1.4;
}

/* Submit-Button mit Loading-State */
.login-submit-btn {
    margin-top: 6px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #2a34b0 0%, #1f2790 100%);
    border: 1px solid rgba(79, 126, 219, 0.30);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
    box-shadow:
        0 4px 16px rgba(42, 52, 176, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.login-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 8px 24px rgba(42, 52, 176, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.login-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}
.login-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.login-submit-arrow {
    transition: transform var(--duration-base) var(--ease-out);
}
.login-submit-btn:hover:not(:disabled) .login-submit-arrow {
    /* 2c-7-fix: translateX entfernt — Icon bleibt fest beim Hover */
    transform: none;
}
.login-submit-spinner svg {
    animation: login-spin 0.8s linear infinite;
}
@keyframes login-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Forgot-Link */
.login-forgot-link {
    margin-top: 4px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    text-align: center;
    padding: 8px;
    transition: color var(--duration-fast) var(--ease-out);
}
.login-forgot-link:hover {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-decoration-color: rgba(79, 126, 219, 0.4);
    text-underline-offset: 3px;
}

/* Footer */
.login-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.login-theme-toggle {
    display: flex;
    gap: 8px;
    justify-content: center;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.login-brand-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}

/* Toast */
.login-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    background: rgba(20, 20, 22, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: var(--color-text-primary);
    font-size: 13px;
    z-index: 10001;
    animation: login-toast-enter 300ms ease-out;
}
@keyframes login-toast-enter {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Light-Mode-Bindings */
[data-theme="light"] .login-input {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .login-input:focus {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow:
        0 0 0 4px rgba(42, 52, 176, 0.12),
        0 0 24px rgba(42, 52, 176, 0.20) !important;
}
[data-theme="light"] .login-input-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-primary);
}
[data-theme="light"] .login-error {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.20);
}
[data-theme="light"] .login-toast {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary);
}

/* Reduced-Motion-Cap */
@media (prefers-reduced-motion: reduce) {
    .login-card,
    .login-title-accent,
    .login-submit-spinner svg,
    .login-toast {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Phase 2c.2 — Login NOTFALL-FIX nach Mike's Live-Test
   Schuldige alte Layer:
   - 2b.10 E14 Z. 6358: .auth-overlay { background: var(--gradient-brand) }
     -> vollflaechig blau statt schwarz
   - 2b.10 E14 Z. 6379: .auth-card { background: var(--color-bg-card) }
     -> kein Glass, im Dark wirkte's solid
   - 2b.10 E14 Z. 6391: animation pulse-msg-in clashed mit login-card-enter
   Fix-Strategie: jede Login-Regel mit .auth-overlay-Praefix +
   identische !important-Stack damit die 2c.1-Werte gewinnen.
   ============================================================ */

/* === BG: explizit schwarz statt brand-gradient (E14 raus) === */
body .auth-overlay,
.auth-overlay.login-body,
.auth-overlay {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    background-image: none !important;
    animation: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
}
/* Phase 2c.13.1: Login-Routing-Fix — `display: flex !important` oben
   gewinnt gegen den inline-style.display='none' in bootstrapAuth().
   Nach erfolgreichem Login blieb der Overlay sichtbar. is-hidden
   ueberschreibt mit gleichem !important-Level. */
.auth-overlay.is-hidden {
    display: none !important;
}
.auth-overlay::before,
.auth-overlay::after {
    display: none !important;
    content: none !important;
}
[data-theme="light"] .auth-overlay,
[data-theme="light"] .auth-overlay.login-body {
    background: #fafafa !important;
    background-color: #fafafa !important;
    background-image: none !important;
}

/* === Aurora-Layer im Login-Container — entfernt in 2c.12 === */

/* Aurora-Blobs fuer Login: kleiner + dezenter als Dashboard */

/* Light-Mode Aurora: Gold (Day-Sonnen-Konzept wie Dashboard) */

/* === Login-Card explizit Glass (kill 2b.10-E14-bg-card) === */
.auth-overlay .login-card,
.auth-overlay .login-card.glass-card,
.auth-overlay .auth-card.login-card {
    background: rgba(20, 20, 22, 0.6) !important;
    background-image: none !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    padding: 40px 36px !important;
    width: 100% !important;
    max-width: 440px !important;
    position: relative !important;
    z-index: 2 !important;
    /* Mount-Animation aus 2c.1, kein altes E14-Clash mehr */
    animation: login-card-enter 600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
[data-theme="light"] .auth-overlay .login-card,
[data-theme="light"] .auth-overlay .login-card.glass-card,
[data-theme="light"] .auth-overlay .auth-card.login-card {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* === Text-Colors explizit === */
.auth-overlay .login-title,
.auth-overlay .login-hero h1 {
    color: #ffffff !important;
    font-family: var(--font-display) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
    text-transform: none !important;
}
[data-theme="light"] .auth-overlay .login-title,
[data-theme="light"] .auth-overlay .login-hero h1 {
    color: #0a0a0a !important;
}

.auth-overlay .login-title-accent {
    color: #2a34b0 !important;
    font-weight: 800 !important;
    text-shadow:
        0 0 16px rgba(42, 52, 176, 0.85),
        0 0 32px rgba(42, 52, 176, 0.55),
        0 0 64px rgba(42, 52, 176, 0.30) !important;
    animation: login-accent-pulse 4s ease-in-out infinite !important;
}

.auth-overlay .login-subtitle {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
    text-align: center !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
[data-theme="light"] .auth-overlay .login-subtitle {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* === Logo: Theme-Switch im Login-Context === */
.auth-overlay .login-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}
.auth-overlay .login-logo .sidebar-logo,
.auth-overlay .login-logo .sidebar-logo-dark,
.auth-overlay .login-logo .sidebar-logo-light {
    max-width: 180px !important;
    height: auto !important;
}
.auth-overlay .login-logo .sidebar-logo-dark {
    display: block !important;
}
.auth-overlay .login-logo .sidebar-logo-light {
    display: none !important;
}
[data-theme="light"] .auth-overlay .login-logo .sidebar-logo-dark {
    display: none !important;
}
[data-theme="light"] .auth-overlay .login-logo .sidebar-logo-light {
    display: block !important;
}

/* === Inputs konsistent (2b.10 E14 .auth-form .input override) === */
.auth-overlay .login-input,
.auth-overlay .auth-form .login-input,
.auth-overlay .auth-form .input.login-input {
    width: 100% !important;
    padding: 14px 16px 14px 42px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    box-shadow: none !important;
    height: auto !important;
    transition: background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out) !important;
}
.auth-overlay .login-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.auth-overlay .login-input:focus,
.auth-overlay .auth-form .login-input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow:
        0 0 0 4px rgba(42, 52, 176, 0.15),
        0 0 24px rgba(42, 52, 176, 0.25) !important;
}
[data-theme="light"] .auth-overlay .login-input,
[data-theme="light"] .auth-overlay .auth-form .login-input {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #0a0a0a !important;
}
[data-theme="light"] .auth-overlay .login-input::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}
[data-theme="light"] .auth-overlay .login-input:focus {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow:
        0 0 0 4px rgba(42, 52, 176, 0.12),
        0 0 24px rgba(42, 52, 176, 0.20) !important;
}

/* === Input-Icon links (rgba alpha-Color) === */
.auth-overlay .login-input-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    pointer-events: none !important;
    display: flex !important;
    z-index: 1 !important;
}
.auth-overlay .login-input-group:focus-within .login-input-icon {
    color: #4f7edb !important;
}
[data-theme="light"] .auth-overlay .login-input-icon {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* === Eye-Toggle === */
.auth-overlay .login-input-toggle {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    z-index: 2 !important;
}
.auth-overlay .login-input-toggle:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
[data-theme="light"] .auth-overlay .login-input-toggle {
    color: rgba(0, 0, 0, 0.5) !important;
}
[data-theme="light"] .auth-overlay .login-input-toggle:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: rgba(0, 0, 0, 0.9) !important;
}

/* === Forgot-Link explizit sichtbar === */
.auth-overlay .login-forgot-link {
    display: block !important;
    margin-top: 12px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-align: center !important;
    padding: 8px !important;
    width: 100% !important;
    transition: color var(--duration-fast) var(--ease-out) !important;
}
.auth-overlay .login-forgot-link:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
[data-theme="light"] .auth-overlay .login-forgot-link {
    color: rgba(0, 0, 0, 0.5) !important;
}
[data-theme="light"] .auth-overlay .login-forgot-link:hover {
    color: rgba(0, 0, 0, 0.9) !important;
}

/* === Footer === */
.auth-overlay .login-footer {
    margin-top: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
}
.auth-overlay .login-brand-hint {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 0.04em !important;
}
[data-theme="light"] .auth-overlay .login-brand-hint {
    color: rgba(0, 0, 0, 0.4) !important;
}

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
    .auth-overlay .aurora-blob,
    .auth-overlay .login-card,
    .auth-overlay .login-title-accent {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Phase 2c.3 — Login NOTFALL-FIX 2 (10-Punkte-Bugcluster)
   Diagnose:
   - D8 Z. 4331-4339: #authLoginPanel/#authSetupPanel hat
     background:white + border + shadow !important. Das ist die
     Innen-Card -> Doppel-Border + weiss im Dark-Mode + 'gold-Aurora
     mit weisser Card' visuell verwirrend.
   - D8 Z. 4329: .auth-overlay { background: white-gradient !important }
     ueberschreibt unseren schwarzen BG im Light-Mode-Pfad.
   - 2c.2-Aurora-Werte zu dezent.
   - Theme-Toggle-Buttons im Login-Footer ohne expliziten Style.
   - Card-Hover translateY (aus glass-card-Pattern) clashed mit
     Login-statischer-Anforderung.

   Fix-Strategie: Multi-Theme-Selector-Patterns (root + body + plain
   [data-theme]) damit egal wo das Attribut sitzt. Innen-Panel kill
   via background:transparent + border:none + shadow:none.
   ============================================================ */

/* === LOGIN BODY: D8-Layer killen === */
.auth-overlay,
body .auth-overlay,
.auth-overlay.login-body {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    background-image: none !important;
    animation: none !important;
}
:root[data-theme="light"] .auth-overlay,
[data-theme="light"] .auth-overlay,
body[data-theme="light"] .auth-overlay,
html[data-theme="light"] .auth-overlay {
    background: #fafafa !important;
    background-color: #fafafa !important;
    background-image: none !important;
}

/* === INNER PANEL: D8 Z. 4331 weisse Inner-Card komplett killen === */
.auth-overlay #authLoginPanel,
.auth-overlay #authSetupPanel,
.auth-overlay .auth-panel,
.auth-overlay .login-card > #authLoginPanel,
.auth-overlay .login-card > #authSetupPanel {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    outline: none !important;
}

/* === LOGIN CARD: keine doppelte Border, kein Hover-Lift === */
.auth-overlay .login-card,
.auth-overlay .login-card.glass-card,
.auth-overlay .auth-card.login-card {
    background: rgba(20, 20, 22, 0.6) !important;
    background-image: none !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    outline: none !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    padding: 40px 36px !important;
    width: 100% !important;
    max-width: 440px !important;
    position: relative !important;
    z-index: 2 !important;
    transform: none !important;
    transition: none !important;
    /* Mount-Animation aus 2c.1 erhalten */
    animation: login-card-enter 600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.auth-overlay .login-card:hover,
.auth-overlay .login-card.glass-card:hover {
    transform: none !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(20, 20, 22, 0.6) !important;
}
:root[data-theme="light"] .auth-overlay .login-card,
[data-theme="light"] .auth-overlay .login-card,
body[data-theme="light"] .auth-overlay .login-card,
html[data-theme="light"] .auth-overlay .login-card {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
}
:root[data-theme="light"] .auth-overlay .login-card:hover,
[data-theme="light"] .auth-overlay .login-card:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

/* === AURORA: viel kraeftiger im Dark === */

/* Light-Mode Aurora deutlich Gold (Multi-Selector fuer Robustheit) */

/* === Subtitle Abstand === */
.auth-overlay .login-subtitle {
    margin: 16px 0 0 0 !important;
    padding-top: 4px !important;
}

/* === Text-Colors mit Multi-Theme-Selectoren === */
.auth-overlay .login-title,
.auth-overlay .login-hero h1 {
    color: #ffffff !important;
}
.auth-overlay .login-subtitle {
    color: rgba(255, 255, 255, 0.6) !important;
}
:root[data-theme="light"] .auth-overlay .login-title,
[data-theme="light"] .auth-overlay .login-title,
body[data-theme="light"] .auth-overlay .login-title,
:root[data-theme="light"] .auth-overlay .login-hero h1,
[data-theme="light"] .auth-overlay .login-hero h1 {
    color: #0a0a0a !important;
}
:root[data-theme="light"] .auth-overlay .login-subtitle,
[data-theme="light"] .auth-overlay .login-subtitle,
body[data-theme="light"] .auth-overlay .login-subtitle {
    color: rgba(0, 0, 0, 0.55) !important;
}

/* === ANMELDE-BUTTON: Glass-Pattern mit Lightning-Icon === */

/* === THEME-TOGGLE-BUTTONS im Login-Footer SICHTBAR === */
.auth-overlay .login-footer .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out) !important;
}
.auth-overlay .login-footer .theme-toggle-btn:hover,
.auth-overlay .login-footer .theme-toggle-btn.active {
    background: rgba(79, 126, 219, 0.2) !important;
    border-color: rgba(79, 126, 219, 0.5) !important;
    color: #ffffff !important;
}
:root[data-theme="light"] .auth-overlay .login-footer .theme-toggle-btn,
[data-theme="light"] .auth-overlay .login-footer .theme-toggle-btn,
body[data-theme="light"] .auth-overlay .login-footer .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.6) !important;
}
:root[data-theme="light"] .auth-overlay .login-footer .theme-toggle-btn:hover,
:root[data-theme="light"] .auth-overlay .login-footer .theme-toggle-btn.active,
[data-theme="light"] .auth-overlay .login-footer .theme-toggle-btn:hover,
[data-theme="light"] .auth-overlay .login-footer .theme-toggle-btn.active {
    background: rgba(42, 52, 176, 0.15) !important;
    border-color: rgba(42, 52, 176, 0.4) !important;
    color: #2a34b0 !important;
}

/* === Brand-Hint Optavo.de === */
.auth-overlay .login-brand-hint {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    transition: color var(--duration-fast) var(--ease-out) !important;
}
.auth-overlay .login-brand-hint:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}
:root[data-theme="light"] .auth-overlay .login-brand-hint,
[data-theme="light"] .auth-overlay .login-brand-hint,
body[data-theme="light"] .auth-overlay .login-brand-hint {
    color: rgba(0, 0, 0, 0.4) !important;
}

/* Reduced-Motion 2c.3 (2c.23.1: Sidebar-Btn mitgenommen) */
@media (prefers-reduced-motion: reduce) {
    .auth-overlay .aurora-blob,
    .auth-overlay .login-card,
    .auth-overlay .login-submit-btn,
    .auth-overlay .login-title-accent,
    .pulse-conv-sidebar .login-submit-btn {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 2c.4 — Lavalampe + Raycast-Buttons + Premium-Inputs
   Setzt zentrale Pulse-Komponenten:
   - btn-glass-primary (Pure-Black + Glass-Border + Inner-Highlight)
   - btn-glass-secondary (Subtle alpha-bg)
   - input-glass (Premium-Dark mit Blue-Focus-Glow)
   Dokumentiert in docs/visual-patterns.md fuer alle Folge-Module.
   ============================================================ */

/* === P1: Lavalampe-Aurora (sehr gross + drift + rotate) === */



/* === P2: Premium-Dark Inputs (input-glass-Pattern) === */
.auth-overlay .login-input,
.auth-overlay .auth-form .login-input,
.auth-overlay .auth-form .input.login-input {
    width: 100% !important;
    padding: 14px 16px 14px 42px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    background-image: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition:
        background var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out) !important;
}
.auth-overlay .login-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}
.auth-overlay .login-input:hover {
    background: rgba(0, 0, 0, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.auth-overlay .login-input:focus,
.auth-overlay .auth-form .login-input:focus {
    outline: none !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-color: rgba(79, 126, 219, 0.7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(42, 52, 176, 0.25),
        0 0 24px rgba(42, 52, 176, 0.35) !important;
}
[data-theme="light"] .auth-overlay .login-input,
:root[data-theme="light"] .auth-overlay .login-input,
[data-theme="light"] .auth-overlay .auth-form .login-input {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #0a0a0a !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .auth-overlay .login-input::placeholder,
:root[data-theme="light"] .auth-overlay .login-input::placeholder {
    color: rgba(0, 0, 0, 0.35) !important;
}
[data-theme="light"] .auth-overlay .login-input:focus,
:root[data-theme="light"] .auth-overlay .login-input:focus {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 0 3px rgba(42, 52, 176, 0.15),
        0 0 24px rgba(42, 52, 176, 0.25) !important;
}

/* === P3: Primary-Button Raycast-Style (btn-glass-primary-Pattern) === */

/* Lightning-Icon Skalierung beim Hover */

/* === P4: Secondary-Button (btn-glass-secondary-Pattern) === */
.auth-overlay .login-forgot-link {
    display: block !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 180ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.auth-overlay .login-forgot-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}
[data-theme="light"] .auth-overlay .login-forgot-link,
:root[data-theme="light"] .auth-overlay .login-forgot-link {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: rgba(0, 0, 0, 0.55) !important;
}
[data-theme="light"] .auth-overlay .login-forgot-link:hover,
:root[data-theme="light"] .auth-overlay .login-forgot-link:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.85) !important;
}

/* === P5: Logo + Title groesser === */
.auth-overlay .login-logo .sidebar-logo,
.auth-overlay .login-logo .sidebar-logo-dark,
.auth-overlay .login-logo .sidebar-logo-light {
    max-width: 220px !important;
    height: auto !important;
}
.auth-overlay .login-title,
.auth-overlay .login-hero h1 {
    font-size: 36px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
}
.auth-overlay .login-title-accent {
    font-size: 36px !important;
    font-weight: 800 !important;
}

/* Reduced-Motion 2c.4 */
@media (prefers-reduced-motion: reduce) {
    .auth-overlay .aurora-blob,
    .auth-overlay .login-input,
    .auth-overlay .login-submit-btn,
    .auth-overlay .login-submit-btn svg,
    .auth-overlay .login-forgot-link {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 2c.5 — Login-Polish: Forgot-Link + Aurora-Sync +
                Awwwards-Button + True-Glass-Inputs
   ============================================================ */

/* === P1: Forgot-Link reiner Text-Link (kein Button) === */
.auth-overlay .login-forgot-link {
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding: 4px !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color var(--duration-fast) var(--ease-out) !important;
}
.auth-overlay .login-forgot-link:hover {
    background: transparent !important;
    border: none !important;
    transform: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(79, 126, 219, 0.5) !important;
    text-underline-offset: 3px !important;
    box-shadow: none !important;
}
[data-theme="light"] .auth-overlay .login-forgot-link,
:root[data-theme="light"] .auth-overlay .login-forgot-link {
    color: rgba(0, 0, 0, 0.4) !important;
}
[data-theme="light"] .auth-overlay .login-forgot-link:hover,
:root[data-theme="light"] .auth-overlay .login-forgot-link:hover {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* === P2: Aurora-Farben einheitlich Royal-Blau (alle 3 rgba(42,52,176)) === */

/* === P3: Aurora-Path durch Card-Position + Card-Blur 40px === */

/* Card-BG transparenter + Blur 40px damit Aurora-Pfad durchscheint */
.auth-overlay .login-card,
.auth-overlay .login-card.glass-card,
.auth-overlay .auth-card.login-card {
    background: rgba(15, 15, 18, 0.55) !important;
    background-image: none !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="light"] .auth-overlay .login-card,
:root[data-theme="light"] .auth-overlay .login-card,
[data-theme="light"] .auth-overlay .login-card.glass-card {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
}

/* === P4: Primary-Button True-Glass + Awwwards-Sheen-Hover === */

/* Sheen-Sweep-Pseudo */


/* Text + Icon liegen ueber Sheen */

/* Light-Mode: weiss-Glas + brand-Hover */

/* === P5: Inputs deutlich schwaerzer === */
.auth-overlay .login-input,
.auth-overlay .auth-form .login-input,
.auth-overlay .auth-form .input.login-input {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.auth-overlay .login-input:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.auth-overlay .login-input:focus,
.auth-overlay .auth-form .login-input:focus {
    background: rgba(0, 0, 0, 0.95) !important;
    border-color: rgba(79, 126, 219, 0.7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(42, 52, 176, 0.25),
        0 0 24px rgba(42, 52, 176, 0.4) !important;
}

/* === P6: Subtitle margin-bottom + Form margin-top === */
.auth-overlay .login-subtitle {
    margin: 16px 0 28px 0 !important;
    padding: 0 !important;
}
.auth-overlay .login-form {
    margin-top: 8px !important;
}

/* Reduced-Motion 2c.5 */
@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   Phase 2c.6 — Inputs transparent + Icon fix + True-Glass-Button
                (Webflow-Style Frosted-Glass)
   ============================================================ */

/* === P1: Inputs vollstaendig transparent (Card-Glass scheint durch) === */
.auth-overlay .login-input,
.auth-overlay input.login-input,
.auth-overlay .auth-form .login-input,
.auth-overlay #authLoginPanel .login-input,
.auth-overlay #authSetupPanel .login-input {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 14px 16px 14px 42px !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transition:
        background var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out) !important;
}
.auth-overlay .login-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.auth-overlay .login-input:hover {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
.auth-overlay .login-input:focus,
.auth-overlay .auth-form .login-input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(79, 126, 219, 0.7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 3px rgba(42, 52, 176, 0.22),
        0 0 24px rgba(42, 52, 176, 0.35) !important;
}

/* Light-Mode Inputs */
[data-theme="light"] .auth-overlay .login-input,
:root[data-theme="light"] .auth-overlay .login-input,
[data-theme="light"] .auth-overlay .auth-form .login-input {
    background: transparent !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #0a0a0a !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
[data-theme="light"] .auth-overlay .login-input::placeholder,
:root[data-theme="light"] .auth-overlay .login-input::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}
[data-theme="light"] .auth-overlay .login-input:hover,
:root[data-theme="light"] .auth-overlay .login-input:hover {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}
[data-theme="light"] .auth-overlay .login-input:focus,
:root[data-theme="light"] .auth-overlay .login-input:focus {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 0 3px rgba(42, 52, 176, 0.15),
        0 0 24px rgba(42, 52, 176, 0.25) !important;
}

/* Browser-Autofill killen (sonst weiss/gelb durchschimmernd) */
.auth-overlay .login-input:-webkit-autofill,
.auth-overlay .login-input:-webkit-autofill:hover,
.auth-overlay .login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    caret-color: #ffffff !important;
    transition: background-color 99999s ease-out !important;
}
[data-theme="light"] .auth-overlay .login-input:-webkit-autofill,
:root[data-theme="light"] .auth-overlay .login-input:-webkit-autofill {
    -webkit-text-fill-color: #0a0a0a !important;
    caret-color: #0a0a0a !important;
}

/* === P2: Icon-Hover-Transforms KOMPLETT killen (Icon bleibt fest) === */

/* === P3: Submit-Button True Frosted Glass (Webflow-Style) === */

/* Top-Highlight-Linie statisch (kein Sheen-Sweep mehr) */

/* Hover: Brightening + Brand-Glow + Lift */

/* Light-Mode: gleiche Logik, helleres Glas */

/* Reduced-Motion 2c.6 */
@media (prefers-reduced-motion: reduce) {
    .auth-overlay .login-submit-btn,
    .auth-overlay .login-submit-btn::before,
    .auth-overlay .login-input {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 2c.7 — Sauberer Reset: Inputs solid + Focus-Glow zurueck,
                Button wie 2c.5 leicht transparenter, Icon-Bug an
                der Quelle gekillt, Aurora alle 3 Blobs animieren.

   ICON-BUG-DIAGNOSE:
   4 Quell-Stellen mit transform:translateX auf Submit-Icon:
   - Z. 10398 (2c.1 Layer): translateX(3px) — KEIN !important
   - Z. 11131 (2c.3 Layer): translateX(3px) !important
   - Z. 11476 (2c.4 Layer): translateX(3px) scale(1.05) !important
   - Z. 11746 (2c.5 Layer): translateX(4px) scale(1.08) !important
   Alle 4 wurden direkt an Original-Position auf 'transform: none'
   geaendert. Plus Safety-Net unten via :not(:disabled)-Multi-Selector.

   AURORA-DIAGNOSE:
   2c.5-Layer hat aurora-blob-2/-3 nur Background neu definiert,
   nicht animation. 2c.4-Animation sollte greifen — falls nicht,
   forcen wir hier alle 3 mit !important + final-Cascade-Win.
   ============================================================ */

/* === P1: Inputs solid + Focus-Glow zurueck (2c.5-Style) === */
.auth-overlay .login-input,
.auth-overlay input.login-input,
.auth-overlay .auth-form .login-input,
.auth-overlay #authLoginPanel .login-input,
.auth-overlay #authSetupPanel .login-input {
    background: #0a0a0c !important;
    background-color: #0a0a0c !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 14px 16px 14px 42px !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out) !important;
}
.auth-overlay .login-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.auth-overlay .login-input:hover {
    background: #0f0f12 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.auth-overlay .login-input:focus,
.auth-overlay .auth-form .login-input:focus {
    outline: none !important;
    background: #0f0f12 !important;
    border-color: rgba(79, 126, 219, 0.7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(42, 52, 176, 0.25),
        0 0 24px rgba(42, 52, 176, 0.4) !important;
}

[data-theme="light"] .auth-overlay .login-input,
:root[data-theme="light"] .auth-overlay .login-input {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #0a0a0a !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
[data-theme="light"] .auth-overlay .login-input::placeholder,
:root[data-theme="light"] .auth-overlay .login-input::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}
[data-theme="light"] .auth-overlay .login-input:focus,
:root[data-theme="light"] .auth-overlay .login-input:focus {
    background: #ffffff !important;
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 0 3px rgba(42, 52, 176, 0.15),
        0 0 24px rgba(42, 52, 176, 0.25) !important;
}

/* Autofill-BG matched zum solid Input-BG */
.auth-overlay .login-input:-webkit-autofill,
.auth-overlay .login-input:-webkit-autofill:hover,
.auth-overlay .login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #0a0a0c inset !important;
    caret-color: #ffffff !important;
    transition: background-color 99999s ease-out !important;
}
[data-theme="light"] .auth-overlay .login-input:-webkit-autofill,
:root[data-theme="light"] .auth-overlay .login-input:-webkit-autofill {
    -webkit-text-fill-color: #0a0a0a !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    caret-color: #0a0a0a !important;
}

/* === P2: Button — 2c.5-Style mit reduzierter Opacity === */

/* Sheen-Pseudo aus 2c.5 + Top-Highlight aus 2c.6 neutralisiert
   (zurueck zum reinen 2c.5-Glas-Look ohne ::before-Effekte) */


/* Light-Mode */

/* === P3: Icon-Safety-Net (Quell-Bugs schon eliminiert, hier final guard) === */

/* === Bonus: Aurora alle 3 Blobs animieren (force-cascade-win) === */

/* Reduced-Motion 2c.7 */
@media (prefers-reduced-motion: reduce) {
    .auth-overlay .login-input,
    .auth-overlay .login-submit-btn,
    .auth-overlay .login-submit-btn svg,
    .auth-overlay .aurora-blob-1,
    .auth-overlay .aurora-blob-2,
    .auth-overlay .aurora-blob-3 {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 2c.8 — Login FINAL: Lavalampe durchscheinend +
                Sheen zurueck + Aurora-Sync.

   AURORA-DIAGNOSE (Bug aus 2c.7 immer noch nicht gefixt):
   2c.4-Layer Z. 11244-11258 setzte AUF DEM Blob-2-Element selbst:
       transform: none !important;
   2c.4-Layer Z. 11260-11274 ebenso fuer Blob-3.
   Damit ueberschreibt das die Keyframe-Animation (translate +
   scale + rotate) — Blob blieb stehen, weil 'transform: none'
   IMMER gewann.
   Blob-1 hatte das nicht — animierte deshalb. Klassischer Bug.
   Fix: an den Original-Zeilen entfernen (siehe oben).
   ============================================================ */

/* === P1: Button transparent + Sheen zurueck (1.4s langsam) === */

/* Sheen-Sweep zurueck — 1400ms langsam */


/* Text + Icon ueber Sheen */

/* Icon STEHT (2c.7-Safety-Net erhalten) */

/* Light-Mode Button */

/* === P2: Inputs transparent + weisse Border + Focus-Glow === */
.auth-overlay .login-input,
.auth-overlay input.login-input,
.auth-overlay .auth-form .login-input,
.auth-overlay #authLoginPanel .login-input,
.auth-overlay #authSetupPanel .login-input {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 14px 16px 14px 42px !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out) !important;
}
.auth-overlay .login-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.auth-overlay .login-input:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}
.auth-overlay .login-input:focus,
.auth-overlay .auth-form .login-input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(79, 126, 219, 0.7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(42, 52, 176, 0.25),
        0 0 24px rgba(42, 52, 176, 0.4) !important;
}

/* Light-Mode */
[data-theme="light"] .auth-overlay .login-input,
:root[data-theme="light"] .auth-overlay .login-input {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    color: #0a0a0a !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
[data-theme="light"] .auth-overlay .login-input::placeholder,
:root[data-theme="light"] .auth-overlay .login-input::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}
[data-theme="light"] .auth-overlay .login-input:hover,
:root[data-theme="light"] .auth-overlay .login-input:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}
[data-theme="light"] .auth-overlay .login-input:focus,
:root[data-theme="light"] .auth-overlay .login-input:focus {
    background: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 0 3px rgba(42, 52, 176, 0.15),
        0 0 24px rgba(42, 52, 176, 0.25) !important;
}

/* Autofill: dunkler Alpha-Overlay (kein knallweiss) */
.auth-overlay .login-input:-webkit-autofill,
.auth-overlay .login-input:-webkit-autofill:hover,
.auth-overlay .login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.6) inset !important;
    caret-color: #ffffff !important;
    transition: background-color 99999s ease-out !important;
}
[data-theme="light"] .auth-overlay .login-input:-webkit-autofill,
:root[data-theme="light"] .auth-overlay .login-input:-webkit-autofill {
    -webkit-text-fill-color: #0a0a0a !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.6) inset !important;
    caret-color: #0a0a0a !important;
}

/* === P3: Aurora-Sync (Source-Bug schon eliminiert oben).
   Plus expliziter Force damit alle 3 Blobs animieren. === */

/* Reduced-Motion 2c.8 */
@media (prefers-reduced-motion: reduce) {
    .auth-overlay .login-submit-btn,
    .auth-overlay .login-submit-btn::before,
    .auth-overlay .login-input,
    .auth-overlay .aurora-blob-1,
    .auth-overlay .aurora-blob-2,
    .auth-overlay .aurora-blob-3 {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 2c.9 — DEFINITIV-FIX: Royal-Blau + Focus-Glow + Aurora

   DIAGNOSE-RESULTATE (siehe test_login_definitive_fix_2c9.py-Docstring):

   1. Button-Hover-Lila: 5x rgba(79, 126, 219,...) im 2c.8-Block
      (Brand-Light wirkt LILA, nicht blau). Fix: alle auf
      rgba(42,52,176,...) (Brand-Primary = echtes Royal-Blau).

   2. Input-Focus-Glow: WAR definiert (Z. 12539-12548) aber nutzte
      Brand-Light-Border + zu dezente Glow-Werte. Mike sah's nicht.
      Fix: Royal-Blau-Border 0.8 + Triple-Layer-Glow (3px Ring 0.3 +
      24px outer 0.5 + 48px aura 0.25). Plus Multi-Selector mit
      input[type] + login-input-group fuer Specificity-Sicherheit.

   3. Aurora-Blob-3 STALE-CENTERING-BUG:
      - Element-Setup: top: 30%; left: 30%; (positioniert im Container)
      - Aber @keyframes lava-drift-3 startet bei translate(-50%, -50%)
        — alter Wert aus der Zeit als Blob-3 zentriert war.
      - Damit fliegt Blob-3 bei jedem Animations-Tick 50%/50% nach
        oben-links — RAUS aus dem sichtbaren Bereich.
      Fix: alle 3 keyframes auf translate(0, 0) Start zwingen,
      Element-transform auch translate(0, 0).
   ============================================================ */

/* === P1: Button-Hover Royal-Blau (Brand-Primary) === */


/* === P2: Input-Focus-Glow stark + Multi-Selector-Specificity === */
.auth-overlay .login-input:focus,
.auth-overlay input.login-input:focus,
.auth-overlay input[type="text"].login-input:focus,
.auth-overlay input[type="password"].login-input:focus,
.auth-overlay .login-input-group .login-input:focus,
.auth-overlay .login-form .login-input:focus,
.auth-overlay .auth-form .login-input:focus,
.auth-overlay #authLoginPanel .login-input:focus,
.auth-overlay #authSetupPanel .login-input:focus,
.auth-overlay .login-input:focus-visible {
    outline: none !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(42, 52, 176, 0.8) !important;
    border-width: 1px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(42, 52, 176, 0.3),
        0 0 24px rgba(42, 52, 176, 0.5),
        0 0 48px rgba(42, 52, 176, 0.25) !important;
}

/* Icon im Input-Group beim Focus auf Brand-Light umfaerben */
.auth-overlay .login-input-group:focus-within .login-input-icon {
    color: #4f7edb !important;
}

/* Light-Mode Input-Focus */
[data-theme="light"] .auth-overlay .login-input:focus,
:root[data-theme="light"] .auth-overlay .login-input:focus,
[data-theme="light"] .auth-overlay input.login-input:focus {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(42, 52, 176, 0.7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 0 3px rgba(42, 52, 176, 0.2),
        0 0 24px rgba(42, 52, 176, 0.35) !important;
}

/* === P3: Aurora-Bug AT SOURCE — alle Blobs auf Brand-Primary +
   keyframes-Start translate(0, 0) === */

/* Keyframes — alle starten bei translate(0,0) damit Centering-Bug
   fuer Blob-3 nicht mehr greift */

/* Reduced-Motion 2c.9 */
@media (prefers-reduced-motion: reduce) {
    .auth-overlay .login-submit-btn,
    .auth-overlay .login-submit-btn::before,
    .auth-overlay .login-input,
    .auth-overlay .aurora-blob-1,
    .auth-overlay .aurora-blob-2,
    .auth-overlay .aurora-blob-3 {
        animation: none !important;
        transition: none !important;
        transform: translate(0, 0) !important;
    }
}

/* ============================================================
   Phase 2c.10 — Glow gedimmt + Aurora ECHT animiert + Sheen
                 ohne Lila-Stich.

   AURORA-REGRESSION-DIAGNOSE:
   2c.9 hat 'transform: translate(0, 0) !important' AUF DEM
   Element gesetzt. Das ist eine Static-Property mit !important —
   die Animation versucht den transform via Keyframes zu animieren,
   aber das !important auf dem Element ueberschreibt jeden Frame.
   Resultat: KEIN Movement.

   Fix: Hard-Reset-Block ohne static transform. Plus unique
   Keyframe-Namen (pulse-blob-1/2/3 statt lava-drift) damit es
   keinen Konflikt mit alten Layern gibt.
   ============================================================ */

/* === P1: Input-Focus-Glow gedimmt ca. 50% === */
.auth-overlay .login-input:focus,
.auth-overlay input.login-input:focus,
.auth-overlay input[type="text"].login-input:focus,
.auth-overlay input[type="password"].login-input:focus,
.auth-overlay .login-input-group .login-input:focus,
.auth-overlay .login-form .login-input:focus,
.auth-overlay .auth-form .login-input:focus,
.auth-overlay #authLoginPanel .login-input:focus,
.auth-overlay #authSetupPanel .login-input:focus,
.auth-overlay .login-input:focus-visible {
    outline: none !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 2px rgba(42, 52, 176, 0.18),
        0 0 16px rgba(42, 52, 176, 0.25),
        0 0 32px rgba(42, 52, 176, 0.12) !important;
}
[data-theme="light"] .auth-overlay .login-input:focus,
:root[data-theme="light"] .auth-overlay .login-input:focus,
[data-theme="light"] .auth-overlay input.login-input:focus {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(42, 52, 176, 0.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 0 2px rgba(42, 52, 176, 0.12),
        0 0 16px rgba(42, 52, 176, 0.18),
        0 0 32px rgba(42, 52, 176, 0.08) !important;
}

/* === P2: Aurora ECHT animiert (unique keyframe-Namen) === */

/* Hard-Reset: Common Properties — KEIN static transform mehr */

/* Position via top/left/bottom/right + Animation via eigene keyframes */

/* Unique Keyframes — alle starten bei translate(0, 0) */

/* === P3: Sheen pure white (kein Brand-Blue im Gradient) === */

/* Reduced-Motion 2c.10 */
@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   Phase 2c.11 — Sheen weg + JS-Aurora-Fallback unterstuetzen.

   AURORA-DIAGNOSE:
   - 35 prefers-reduced-motion-Bloecke im File
   - 2 globale Safety-Nets (Z. 3110 + 6676):
     `* { animation-duration: 0.01ms !important; }`
   - Diese Longhand-Caps schlagen jeden CSS-`animation:` shorthand,
     egal welche Specificity, weil `*` mit `!important` greift.
   Wenn Mike's OS prefers-reduced-motion aktiv hat (Win 11 default
   Animations-Reduzierung), kappt das ALLE CSS-Animationen.

   FIX: JS-Animator (frontend/app.js startAuroraAnimation) setzt
   inline-style.transform pro Frame via requestAnimationFrame.
   Inline-styles werden NICHT von prefers-reduced-motion CSS-Caps
   gestoppt — bypass der Cascade.

   CSS hier: nur noch Position + BG, keine animation-Property
   (waere ohnehin gekappt). Plus Sheen-Pseudo komplett killen.
   ============================================================ */

/* === P1: Sheen-Pseudo komplett weg === */

/* === P2: Button-Hover behaelt Brand-Glow + Lift (kein Sheen) === */

/* === P3: Aurora — JS uebernimmt transform, CSS macht nur Position + BG.
   animation-Property hier explizit auf 'none' gesetzt damit JS-inline
   nicht mit irgendeiner restlichen CSS-Animation kollidiert. === */

/* Reduced-Motion 2c.11: Aurora-Position bleibt static-renderable.
   Animation ist via JS implementiert — wenn User reduce-motion hat,
   pruefen wir das im JS und ueberspringen die animation-Loop. */





/* ============================================================
   Phase 2c.12 — HARD-RESET: Aurora + Submit-Button von Null

   Vorgeschichte: 9 Iterationen mit Override-Layern (2c.1 bis 2c.11)
   haben uns mit !important-Schlachten und Cascade-Konflikten
   ausgetrickst. Loesung: 103 alte Login-Aurora/Login-Submit-Btn-
   Bloecke + 12 nicht mehr benoetigte Keyframes (lava-drift,
   pulse-blob) komplett aus style.css ENTFERNT (echtes delete,
   nicht override). Hier folgt FRISCH geschriebener finaler Code
   ohne !important — wenn was bricht, ist die Quelle hier.

   Aurora-Animation: per JS via requestAnimationFrame.style.transform
   (siehe frontend/app.js:startAuroraAnimation). CSS macht NUR
   Position + Background + Filter. Keine CSS-Animation = keine
   Cascade-Probleme = keine prefers-reduced-motion-Caps.
   ============================================================ */

/* === LOGIN AURORA — Phase 2c.12 (Frischer Reset) === */

.auth-overlay .aurora-background,
.auth-overlay .login-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.auth-overlay .aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform;
}

.auth-overlay .aurora-blob-1 {
    top: -25%;
    left: -20%;
    width: 1400px;
    height: 1400px;
    background: radial-gradient(circle,
        rgba(42, 52, 176, 0.7) 0%,
        rgba(42, 52, 176, 0.4) 25%,
        rgba(42, 52, 176, 0.15) 50%,
        transparent 70%);
}

.auth-overlay .aurora-blob-2 {
    bottom: -25%;
    right: -20%;
    width: 1200px;
    height: 1200px;
    background: radial-gradient(circle,
        rgba(42, 52, 176, 0.65) 0%,
        rgba(42, 52, 176, 0.35) 30%,
        rgba(42, 52, 176, 0.12) 55%,
        transparent 70%);
}

.auth-overlay .aurora-blob-3 {
    top: 25%;
    left: 35%;
    width: 1000px;
    height: 1000px;
    filter: blur(90px);
    background: radial-gradient(circle,
        rgba(42, 52, 176, 0.6) 0%,
        rgba(42, 52, 176, 0.3) 40%,
        transparent 70%);
}

/* Light-Mode: Gold-Sonnen-Atmosphaere */
:root[data-theme="light"] .auth-overlay .aurora-blob-1 {
    background: radial-gradient(circle,
        rgba(234, 177, 7, 0.4) 0%,
        rgba(234, 177, 7, 0.2) 25%,
        transparent 65%);
}
:root[data-theme="light"] .auth-overlay .aurora-blob-2 {
    background: radial-gradient(circle,
        rgba(248, 200, 50, 0.35) 0%,
        rgba(248, 200, 50, 0.15) 35%,
        transparent 65%);
}
:root[data-theme="light"] .auth-overlay .aurora-blob-3 {
    background: radial-gradient(circle,
        rgba(220, 160, 0, 0.3) 0%,
        rgba(220, 160, 0, 0.12) 40%,
        transparent 70%);
}


/* === LOGIN SUBMIT BUTTON — Phase 2c.12 (Frischer Reset) ===
   2c.23.1: Selektoren erweitert um .pulse-conv-sidebar .login-submit-btn,
   damit der „Neuer Chat"-Btn in der Pulse-Sidebar EXAKT die selben
   Hover-/Sheen-/Glow-Effekte erbt wie der Login-Submit. Sidebar-spezi-
   fische Anpassung (margin-top auf 0) steht in .pulse-conv-new-chat.

   2c.23.2a: Glow-Staerke ist tokenisiert. Login behaelt volle Intensitaet
   (auth-overlay liegt ausserhalb von .app). Im Tool-Kontext (.app) wird
   die selbe Hover-Komposition mit deutlich gedaempften Werten ueber-
   schrieben - so erbt jeder zukuenftige .login-submit-btn im Pool /
   Pipeline / etc. automatisch die ruhigere Tool-Variante.
   Variablen:
     --login-submit-hover-shadow      (Dark-Mode-Hover-Glow)
     --login-submit-hover-shadow-light (Light-Mode-Hover-Glow)
*/

:root {
    --login-submit-hover-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 24px rgba(42, 52, 176, 0.12),
        0 12px 40px rgba(42, 52, 176, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(42, 52, 176, 0.35);
    --login-submit-hover-shadow-light:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 0 24px rgba(42, 52, 176, 0.05),
        0 12px 40px rgba(42, 52, 176, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 0 60px rgba(42, 52, 176, 0.15);
}

/* Tool-Kontext: .app umschliesst alle Tool-Module (Sidebar/Topbar/
   Module-Wrapper). Dort gedaempfte Hover-Glow-Variante - genug Praesenz
   fuers Feedback, aber kein Lichtfeuerwerk neben Tool-Inhalten. */
.app {
    --login-submit-hover-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 10px rgba(42, 52, 176, 0.06),
        0 4px 14px rgba(42, 52, 176, 0.20),
        0 2px 8px rgba(0, 0, 0, 0.18),
        0 0 22px rgba(42, 52, 176, 0.10);
    --login-submit-hover-shadow-light:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 0 8px rgba(42, 52, 176, 0.03),
        0 4px 14px rgba(42, 52, 176, 0.10),
        0 2px 8px rgba(0, 0, 0, 0.05),
        0 0 22px rgba(42, 52, 176, 0.06);
}

.auth-overlay .login-submit-btn,
.pulse-conv-sidebar .login-submit-btn {
    position: relative;
    width: 100%;
    padding: 14px 20px;
    margin-top: 12px;

    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;

    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.005em;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.25);

    transition:
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 280ms ease-out,
        border-color 220ms ease-out,
        background 220ms ease-out;

    overflow: hidden;
    isolation: isolate;
}

/* Pure-WHITE Sheen-Sweep — kein Brand-Blue im Gradient */
.auth-overlay .login-submit-btn::before,
.pulse-conv-sidebar .login-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0.08) 60%,
        transparent 75%
    );
    transition: left 1400ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}

.auth-overlay .login-submit-btn:hover,
.pulse-conv-sidebar .login-submit-btn:hover {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(42, 52, 176, 0.7);
    transform: translateY(-2px);

    /* 2c.23.2a: Box-Shadow kommt aus --login-submit-hover-shadow. Login
       (auth-overlay) erbt :root-Wert (full); Pulse-Sidebar liegt unter
       .app und nutzt den gedaempften Tool-Override. */
    box-shadow: var(--login-submit-hover-shadow);
}

.auth-overlay .login-submit-btn:hover::before,
.pulse-conv-sidebar .login-submit-btn:hover::before {
    left: 100%;
}

.auth-overlay .login-submit-btn:active,
.pulse-conv-sidebar .login-submit-btn:active {
    transform: translateY(0);
    transition-duration: 80ms;
}

.auth-overlay .login-submit-btn .login-submit-text,
.auth-overlay .login-submit-btn svg,
.pulse-conv-sidebar .login-submit-btn .login-submit-text,
.pulse-conv-sidebar .login-submit-btn svg {
    position: relative;
    z-index: 2;
}

/* Icon STEHT IMMER */
.auth-overlay .login-submit-btn svg,
.pulse-conv-sidebar .login-submit-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transform: none;
    transition: none;
    animation: none;
}
.auth-overlay .login-submit-btn:hover svg,
.auth-overlay .login-submit-btn:active svg,
.pulse-conv-sidebar .login-submit-btn:hover svg,
.pulse-conv-sidebar .login-submit-btn:active svg {
    transform: none;
    animation: none;
    transition: none;
}

/* Light-Mode */
:root[data-theme="light"] .auth-overlay .login-submit-btn,
:root[data-theme="light"] .pulse-conv-sidebar .login-submit-btn {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(0, 0, 0, 0.1);
    color: #0a0a0a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 4px 16px rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .auth-overlay .login-submit-btn:hover,
:root[data-theme="light"] .pulse-conv-sidebar .login-submit-btn:hover {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(42, 52, 176, 0.5);
    /* 2c.23.2a: Light-Mode-Glow kommt aus --login-submit-hover-shadow-light.
       Tool-Kontext (.app) hat eine gedaempfte Override-Variante. */
    box-shadow: var(--login-submit-hover-shadow-light);
}
:root[data-theme="light"] .auth-overlay .login-submit-btn::before,
:root[data-theme="light"] .pulse-conv-sidebar .login-submit-btn::before {
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(255, 255, 255, 0.4) 40%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.4) 60%,
        transparent 75%
    );
}

@media (prefers-reduced-motion: reduce) {
    .auth-overlay .login-submit-btn,
    .auth-overlay .login-submit-btn::before,
    .pulse-conv-sidebar .login-submit-btn,
    .pulse-conv-sidebar .login-submit-btn::before {
        transition: none;
    }
    .auth-overlay .login-submit-btn:hover,
    .pulse-conv-sidebar .login-submit-btn:hover {
        transform: none;
    }
}

/* ============================================================
   Phase 2c.14 — Pulse Visual Patterns (Pulse-Glass-Layer)
   Wird von 2c.14 (Widget), 2c.15 (Page), 2c.16 (Landing) und
   2c.17 (Scoring) wiederverwendet.
   ============================================================ */
.pulse-glass-card {
    background: rgba(20, 20, 28, 0.55);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    /* Phase 2c.18f: 0.08 -> 0.1 (Border etwas heller, matcht andere
       Glass-Cards im Dashboard-Layer). */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pulse-glass-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color 150ms ease-out, background 150ms ease-out;
    outline: none;
}

.pulse-glass-input:focus {
    border-color: rgba(79, 126, 219, 0.5);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.15);
}

.pulse-glass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #2a34b0 0%, #1a2280 100%);
    border: 1px solid rgba(79, 126, 219, 0.4);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 280ms ease-out;
}

.pulse-glass-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(42, 52, 176, 0.4);
}

/* 2c.22f: Icon-only Variante - quadratisch, minimal Padding. Wird vom
   Send-Button im Widget UND der Vollansicht genutzt. */
.pulse-glass-btn-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    gap: 0;
}
.pulse-glass-btn-icon svg {
    width: 16px;
    height: 16px;
}

/* 2c.23.2d / 2c.24: Send-Buttons bleiben bombenfest beim Hover.
   Der globale .pulse-glass-btn:hover { transform: translateY(-1px) }
   verschiebt sonst absolut positionierte Send-Buttons. Generischer
   Reset, falls .pulse-glass-btn-icon irgendwo nicht im Composer-Wrap
   sitzt. Composer-spezifische Centering-Pflege (translateY(-50%) bei
   Page+Widget) ist beim Composer-Pattern weiter unten konsolidiert. */
.pulse-glass-btn-icon:hover {
    transform: none;
}

:root[data-theme="light"] .pulse-glass-card {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .pulse-glass-input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: #0a0a0a;
}

/* ============================================================
   Phase 2c.14 — Pulse KI Chat-Widget
   Sticky bottom-right FAB + Mini-Window (Intercom-style).
   ============================================================ */
.pulse-ki-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    /* Sweep 2c.25.2 Etappe 5: Z-Index-Hierarchie:
       Toast 10000 > Modals 9500 > Filter-Drawer 9000 > Widget 5000 > Bulk-Bar 4000.
       Vorher: 9999 — überlagerte den Filter-Drawer. */
    z-index: 5000;
}

.pulse-ki-widget[data-state="hidden"] { display: none; }

/* 2c.23.5: FAB ausblenden, wenn die m-pulse-Page aktiv ist - dort
   gibt's keinen sinnvollen Grund, den Floating-Button zu zeigen
   (User ist schon im Chat). Auf allen anderen Modulen (Dashboard,
   Pool, Pipeline, Settings) bleibt der FAB sichtbar. */
body:has(#m-pulse.active) .pulse-ki-widget {
    display: none;
}

.pulse-ki-fab {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a34b0 0%, #1a2280 100%);
    border: 1px solid rgba(79, 126, 219, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 24px rgba(42, 52, 176, 0.4),
        0 0 40px rgba(42, 52, 176, 0.25);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 280ms ease-out;
}

.pulse-ki-fab:hover {
    /* Phase 2c.19a: Hover-Glow staerker (3-Schicht statt 2-Schicht).
       Aeusserer Brand-Light-Halo gibt deutlich praesenteres Leuchten. */
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 16px 40px rgba(42, 52, 176, 0.7),
        0 0 80px rgba(42, 52, 176, 0.55),
        0 0 120px rgba(79, 126, 219, 0.35);
}

.pulse-ki-fab-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(79, 126, 219, 0.5);
    pointer-events: none;
    animation: pulse-ki-fab-ring 2.4s ease-out infinite;
}

@keyframes pulse-ki-fab-ring {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}

.pulse-ki-widget[data-state="expanded"] .pulse-ki-fab { display: none; }

.pulse-ki-window {
    width: 380px;
    height: 560px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: pulse-ki-window-enter 320ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom right;
}

.pulse-ki-widget[data-state="expanded"] .pulse-ki-window { display: flex; }

@keyframes pulse-ki-window-enter {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.pulse-ki-window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.pulse-ki-window-title { display: flex; align-items: center; gap: 10px; }

.pulse-ki-window-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #2a34b0 0%, #1a2280 100%);
    border: 1px solid rgba(79, 126, 219, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.pulse-ki-window-name { font-size: 14px; font-weight: 600; color: #fff; }

.pulse-ki-window-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.pulse-ki-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.pulse-ki-window-actions { display: flex; gap: 6px; }

.pulse-ki-window-action {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 150ms ease-out;
}

.pulse-ki-window-action:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.pulse-ki-window-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 2c.22a: Widget rendert jetzt die gleichen .pulse-conv-msg-Bubbles wie
   die Vollansicht. Hier nur kompaktere Abstaende/Sizes fuer den Mini-
   Window-Container. Inhalts-Look (Markdown, Avatar, Tool-Card) kommt
   aus dem zentralen .pulse-conv-* Block. */
.pulse-ki-window-messages .pulse-conv-msg            { gap: 10px; max-width: 100%; }
.pulse-ki-window-messages .pulse-conv-msg-avatar     { width: 24px; height: 24px; border-radius: 7px; }
.pulse-ki-window-messages .pulse-conv-msg-avatar svg { width: 12px; height: 12px; }
.pulse-ki-window-messages .pulse-conv-msg-content    { font-size: 13px; line-height: 1.55; padding-top: 2px; }
.pulse-ki-window-messages .pulse-conv-tool           { margin-left: 32px; padding: 8px 10px; font-size: 11px; }
.pulse-ki-window-messages .pulse-conv-tool-icon      { width: 20px; height: 20px; }
.pulse-ki-window-messages .pulse-conv-tool-icon svg  { width: 12px; height: 12px; }
.pulse-ki-window-messages .pulse-conv-tool-label     { font-size: 12px; }
.pulse-ki-window-messages .pulse-conv-tool-filters,
.pulse-ki-window-messages .pulse-conv-tool-result    { padding-left: 28px; }

.pulse-ki-msg { display: flex; gap: 10px; align-items: flex-start; }

.pulse-ki-msg-avatar {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    /* Phase 2c.18e: User+AI Avatare bekommen gleichen Brand-Gradient,
       Initial-Buchstabe wird nur noch farblich vom AI-Sparkle-Icon
       unterschieden (Initial steht in weiss, Sparkle ebenso weiss). */
    background: linear-gradient(135deg, #2a34b0 0%, #1a2280 100%);
    border: 1px solid rgba(79, 126, 219, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
}

.pulse-ki-msg-ai .pulse-ki-msg-avatar {
    /* Identisch zur Basis (Brand-Gradient) — eigene Definition behalten
       fuer eventuelle spaetere Differenzierung (z.B. unterschiedlicher
       Border-Glow). */
    background: linear-gradient(135deg, #2a34b0 0%, #1a2280 100%);
    color: #fff;
    border-color: rgba(79, 126, 219, 0.3);
}

.pulse-ki-msg-content {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    padding-top: 2px;
}

.pulse-ki-msg-user { flex-direction: row-reverse; }
.pulse-ki-msg-user .pulse-ki-msg-content { text-align: right; }

/* 2c.21b: Tool-Cards + Typing-Indikator + Error-State im Widget. */
.pulse-ki-msg-error .pulse-ki-msg-content {
    color: #f87171;
    font-style: italic;
}

.pulse-ki-typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
}
.pulse-ki-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(79, 126, 219, 0.7);
    animation: pulseKiTyping 1.2s infinite ease-in-out;
}
.pulse-ki-typing span:nth-child(2) { animation-delay: 0.2s; }
.pulse-ki-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulseKiTyping {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

.pulse-ki-tool-card {
    margin-left: 34px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pulse-ki-tool-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pulse-ki-tool-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(42, 52, 176, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.pulse-ki-tool-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
}
.pulse-ki-tool-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}
.pulse-ki-tool-status.loading { color: #eab107; }
.pulse-ki-tool-status.ok      { color: #22c55e; }
.pulse-ki-tool-status.error   { color: #f87171; }
.pulse-ki-tool-filters {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    padding-left: 30px;
}
.pulse-ki-tool-result {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    padding-left: 30px;
    white-space: pre-wrap;
}
.pulse-ki-tool-result:empty { display: none; }

:root[data-theme="light"] .pulse-ki-tool-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.85);
}
:root[data-theme="light"] .pulse-ki-tool-label  { color: rgba(0, 0, 0, 0.9); }
:root[data-theme="light"] .pulse-ki-tool-status { color: rgba(0, 0, 0, 0.55); }
:root[data-theme="light"] .pulse-ki-tool-filters,
:root[data-theme="light"] .pulse-ki-tool-result { color: rgba(0, 0, 0, 0.7); }

.pulse-ki-suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding-left: 34px;
}

.pulse-ki-suggestion {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 150ms ease-out;
}

.pulse-ki-suggestion:hover {
    background: rgba(42, 52, 176, 0.15);
    border-color: rgba(79, 126, 219, 0.4);
    color: #fff;
}

/* === Composer Pattern (shared, 2c.24) ===
   Page (.pulse-conv-form/-input-wrap/-input/-send) und Widget
   (.pulse-ki-window-form/-input-wrap/-input/-send) teilen die
   identischen Struktur-Properties (flex-shrink, position,
   border-top, send-Btn-Centering). Nur Padding, Font-Size und
   Send-Btn-Groesse unterscheiden sich.
   Gemeinsamer Form-Container: kein Shrink, Border zur Trennung
   zwischen Messages und Composer. */
.pulse-conv-form,
.pulse-ki-window-form {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Gemeinsamer Input-Wrap: relative-positionierter flex-Container,
   damit der Send-Btn absolut darin sitzen kann. */
.pulse-conv-input-wrap,
.pulse-ki-window-input-wrap {
    position: relative;
    display: flex;
}

/* Gemeinsamer Send-Btn: absolute rechts, vertikal mittig.
   `.pulse-glass-btn-icon:hover { transform: none }` (2c.23.2d) wuerde
   sonst beim Hover die Centering-Translation killen -> Btn rutscht.
   Beide Hover-Overrides halten translateY(-50%) explizit. */
.pulse-conv-send,
.pulse-ki-window-send {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}
.pulse-conv-input-wrap .pulse-conv-send:hover,
.pulse-ki-window-input-wrap .pulse-ki-window-send:hover {
    transform: translateY(-50%);
}

/* === Composer (Widget) === */
/* Widget ist 33% kompakter als die Page (12px Padding statt 16/24/24). */
.pulse-ki-window-form {
    padding: 12px;
}

.pulse-ki-window-input {
    font-size: 13px !important;
    width: 100%;
}

/* 2c.23.1 Punkt 4: Padding-Override braucht ID-Specificity, sonst
   schlaegt das globale `input[type="text"] { padding: 0 var(--space-4)
   !important }` (Spec 0,1,1) jeden Class-Override (Spec 0,1,0). Mit
   #pulseKiWidgetInput (Spec 1,0,0) gewinnt die Regel garantiert.
   Send-Button im Widget ist 32px+6px right -> 60px PR = 22px Luft. */
#pulseKiWidgetInput {
    height: auto !important;
    padding: 12px 60px 12px 14px !important;
}

/* Widget-Send-Btn-Groesse: 32x32 (kompakter als Page-Send 38x38). */
.pulse-ki-window-send {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
.pulse-ki-window-send svg {
    width: 14px;
    height: 14px;
}

/* Light-Mode */
:root[data-theme="light"] .pulse-ki-window-name { color: #0a0a0a; }
:root[data-theme="light"] .pulse-ki-msg-content { color: rgba(0, 0, 0, 0.85); }
:root[data-theme="light"] .pulse-ki-window-action { color: rgba(0, 0, 0, 0.5); }
:root[data-theme="light"] .pulse-ki-window-action:hover {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.9);
}
:root[data-theme="light"] .pulse-ki-suggestion {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.7);
}

/* ============================================================
   Phase 2c.17 — Scoring Visual + Transparenz-Pass
   Animated Donut + Factor-Stars + scrollable Log.
   ============================================================ */
.scoring-section {
    padding: 24px;
    margin-bottom: 16px;
}

.scoring-empty {
    padding: 24px;
    text-align: center;
}

.scoring-empty-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.scoring-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 20px 0;
}

.scoring-result {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    margin-bottom: 24px;
}

.scoring-donut {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.scoring-donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.scoring-donut-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 8;
}

.scoring-donut-fg {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: scoring-fill 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scoring-fill {
    to { stroke-dashoffset: var(--score-offset, 42); }
}

.scoring-result-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display, 'Inter', system-ui, sans-serif);
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}

.scoring-result-number span {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.scoring-result-label {
    flex: 1;
    min-width: 0;
}

.scoring-result-tier {
    font-size: 18px;
    font-weight: 600;
    color: #4f7edb;
    text-shadow: 0 0 16px rgba(42, 52, 176, 0.5);
    margin-bottom: 6px;
}

.scoring-result-summary {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

.scoring-factors h4 {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px 0;
}

.factor-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.factor-item {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

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

.factor-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.factor-stars {
    display: flex;
    gap: 2px;
}

.factor-star {
    color: rgba(255, 255, 255, 0.15);
}

.factor-star.filled {
    color: #eab107;
    filter: drop-shadow(0 0 4px rgba(234, 177, 7, 0.5));
}

.factor-reasoning {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

.scoring-log {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
}

.scoring-log summary {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    user-select: none;
}

.scoring-log[open] summary {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.scoring-log-entries {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
    font-size: 11px;
}

.log-entry {
    display: flex;
    gap: 12px;
}

.log-time {
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.log-text {
    color: rgba(255, 255, 255, 0.7);
}

/* Light-Mode */
:root[data-theme="light"] .scoring-section-title { color: #0a0a0a; }
:root[data-theme="light"] .scoring-result-number { color: #0a0a0a; }
:root[data-theme="light"] .scoring-result-summary { color: rgba(0, 0, 0, 0.7); }
:root[data-theme="light"] .factor-name { color: #0a0a0a; }
:root[data-theme="light"] .factor-reasoning { color: rgba(0, 0, 0, 0.55); }
:root[data-theme="light"] .log-text { color: rgba(0, 0, 0, 0.7); }
:root[data-theme="light"] .log-time { color: rgba(0, 0, 0, 0.4); }

@media (prefers-reduced-motion: reduce) {
    .scoring-donut-fg {
        animation: none;
        stroke-dashoffset: var(--score-offset, 42);
    }
}

/* ============================================================
   Phase 2c.18e — Avatar-Upload-Section + Render-Helper
   ============================================================ */
.avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
}

.avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #2a34b0 0%, #1a2280 100%);
    border: 2px solid rgba(79, 126, 219, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 42px;
    font-weight: 600;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-upload-actions {
    display: flex;
    gap: 12px;
}

.settings-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin: 0;
}

:root[data-theme="light"] .settings-hint { color: rgba(0, 0, 0, 0.4); }

/* Pulse-KI-Avatar mit Profilbild: img fuellt das runde Quadrat */
.pulse-ki-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Phase 2c.19b: Sidebar-Footer-Avatar im Bild-Modus.
   #userAvatar behaelt seinen runden Brand-Gradient-Style; wenn ein
   Profilbild gesetzt ist, wird text-content gegen <img/> getauscht und
   .has-image entfernt das Padding/Text-Centering. */
#userAvatar.has-image {
    padding: 0;
    overflow: hidden;
}

#userAvatar.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* ============================================================
   Sweep 2c.25 — Leads-Modul Hero + Pillen
   ============================================================ */

.leads-hero {
    margin: 12px 0 24px;
    padding: 4px 0 0;
}

.leads-hero-title {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--color-text-primary, #fff);
}

.leads-hero-subtitle {
    font-size: var(--text-base, 15px);
    line-height: 1.55;
    max-width: 720px;
    margin: 0 0 18px;
    color: var(--color-text-secondary, rgba(255,255,255,0.78));
}

/* Sweep 2d.5.7.f Etappe 1: .leads-hero-num zieht zentral aus
   .module-header__dynamic-Block weiter unten — gleiche Color-Logik
   wie Verifikations-Hero (Light = brand-primary, Dark = brand-mid).
   Hier nur noch der Default-Reset um den Legacy --primary-Pfad
   (war Orange #ffb84d) abzuschalten. */
.leads-hero-num {
    color: inherit;
}

.leads-stage-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Sweep 2d.5.10.C7.3 Teil B.1: Pills wandern INTO die Tabellen-Card.
 * Wenn die Pills im Card-Container leben, brauchen sie keinen vollen
 * Hero-Abstand mehr — Card-Padding uebernimmt die Aussen-Distanz.
 * Hierarchie innerhalb der Card: Stage-Pills oben, Status-Pills,
 * Toolbar, Tabelle (Blueprint A.1.d Pflicht-Reihenfolge). */
.leads-table-card .leads-stage-pills {
    margin-top: 0;
    margin-bottom: 10px;
}
.leads-table-card .leads-status-pills {
    margin-top: 0;
    margin-bottom: 12px;
}
.leads-table-card .pulse-filter-toolbar {
    margin-top: 4px;
}

/* Sweep 2c.25.1 Etappe 1: Pillen mit klarem Inactive/Active-State.
   Inactive: Glass-BG + sichtbare Border, Active: Brand-Outline + Glow,
   Hover: leichter Brightness-Boost. */
.leads-stage-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(255,255,255,0.18));
    background: var(--color-glass-bg, rgba(255,255,255,0.06));
    color: var(--color-text-primary, #fff);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease, filter 160ms ease, color 160ms ease;
}

.leads-stage-pill:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.1));
    border-color: rgba(255,255,255,0.24);
    filter: brightness(1.08);
}

.leads-stage-pill.active {
    /* Sweep 2d.5.7.1 Etappe 3a: Tab-Pill aktiv = Brand-Primary-BG.
       Solid statt Alpha-Tint damit "Alle 160" optisch fuehrt. */
    background: var(--color-brand-primary, #2a34b0);
    border-color: var(--color-brand-primary, #2a34b0);
    box-shadow: var(--color-brand-glow, 0 0 24px rgba(42, 52, 176, 0.3));
    color: #ffffff;
}

.leads-stage-pill .leads-pill-count {
    /* Sweep 2d.5.7.1 Etappe 3b: Counter im inaktiven Pill in
       Brand-Mid fuer leichten Akzent. tabular-nums fuer stabiles Layout. */
    font-variant-numeric: tabular-nums;
    color: var(--color-brand-mid, #4f7edb);
    font-weight: 600;
    margin-left: 2px;
}

.leads-stage-pill.active .leads-pill-count {
    /* Counter im aktiven Tab-Pill in Brand-Light als Akzent (Vorgabe 3a). */
    color: var(--color-brand-light, #7ab8f0);
    opacity: 1;
}

.leads-status-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.leads-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(255,255,255,0.16));
    background: var(--color-glass-bg, rgba(255,255,255,0.04));
    color: var(--color-text-secondary, rgba(255,255,255,0.78));
    font-size: var(--text-xs, 12px);
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease,
                border-color 160ms ease, box-shadow 160ms ease,
                filter 160ms ease;
}

.leads-status-pill:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.09));
    color: var(--color-text-primary, #fff);
    border-color: rgba(255,255,255,0.24);
    filter: brightness(1.05);
}

.leads-status-pill.active {
    /* Sweep 2d.5.7.1 Etappe 3a: Filter-Pill aktiv = Brand-Mid-BG +
       weisse Schrift + dezenter Brand-Glow. Mid statt Primary fuer
       sekundaere Akzent-Hierarchie (Filter ist sekundaer ggue.
       Stage-Tab "Alle/Verifiziert/Bewertet"). */
    background: var(--color-brand-mid, #4f7edb);
    border-color: var(--color-brand-mid, #4f7edb);
    box-shadow: 0 0 16px var(--color-brand-glow-light, rgba(122, 184, 240, 0.35));
    color: #ffffff;
}

.leads-status-pill .leads-pill-count {
    /* Sweep 2d.5.7.1 Etappe 3b: Counter inaktiv in Brand-Mid (leichter
       Akzent), aktiv weiss. tabular-nums fuer stabiles Layout. */
    font-variant-numeric: tabular-nums;
    color: var(--color-brand-mid, #4f7edb);
    font-weight: 600;
}

.leads-status-pill.active .leads-pill-count {
    color: #ffffff;
    opacity: 1;
}

.leads-status-pill.leads-status-pill-muted {
    opacity: 0.5;
    padding: 4px 10px;
    font-size: 11px;
}

.leads-status-pill.leads-status-pill-muted:hover,
.leads-status-pill.leads-status-pill-muted.active {
    opacity: 1;
}

:root[data-theme="light"] .leads-stage-pill {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.12);
}
:root[data-theme="light"] .leads-stage-pill:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.2);
}
:root[data-theme="light"] .leads-stage-pill.active {
    /* Light-Theme: Brand-Primary BG bleibt kraeftig, weisser Text. */
    background: var(--color-brand-primary, #2a34b0);
    border-color: var(--color-brand-primary, #2a34b0);
    color: #ffffff;
}
:root[data-theme="light"] .leads-stage-pill .leads-pill-count {
    /* Inaktive Pill: Counter in Brand-Mid auch im Light-Theme. */
    color: var(--color-brand-mid, #4f7edb);
}
:root[data-theme="light"] .leads-stage-pill.active .leads-pill-count {
    color: var(--color-brand-light, #7ab8f0);
}
:root[data-theme="light"] .leads-status-pill {
    background: rgba(0,0,0,0.02);
    color: rgba(0,0,0,0.7);
    border-color: rgba(0,0,0,0.1);
}
:root[data-theme="light"] .leads-status-pill:hover {
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.9);
    border-color: rgba(0,0,0,0.18);
}
:root[data-theme="light"] .leads-status-pill.active {
    /* Light-Theme: Brand-Mid-BG, weisser Text — gleiche Hierarchie. */
    background: var(--color-brand-mid, #4f7edb);
    border-color: var(--color-brand-mid, #4f7edb);
    color: #ffffff;
    box-shadow: 0 0 16px var(--color-brand-glow-light, rgba(122, 184, 240, 0.20));
}
:root[data-theme="light"] .leads-status-pill.active .leads-pill-count {
    color: #ffffff;
}

/* Sweep 2c.25 Etappe 2b: Status-Pillen in der Lead-Tabelle (kombiniert).
   Aussortiert ist eine durchgestrichene/graue Pille; Pruefen ist eine
   gelbe Warn-Pille; Verifiziert grn; Pipeline + CRM-Pillen blau-tnig. */
.status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    margin-right: 4px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-pill-neu {
    background: rgba(120, 130, 145, 0.18);
    color: var(--color-text-secondary, rgba(255,255,255,0.85));
    border-color: rgba(120, 130, 145, 0.32);
}
.status-pill-verifiziert {
    background: rgba(34, 197, 94, 0.16);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.32);
}
.status-pill-pruefen {
    background: rgba(250, 176, 5, 0.16);
    color: #faa405;
    border-color: rgba(250, 176, 5, 0.36);
}
.status-pill-aussortiert {
    background: rgba(120, 130, 145, 0.10);
    color: rgba(120, 130, 145, 0.85);
    border-color: rgba(120, 130, 145, 0.18);
    text-decoration: line-through;
}
.status-pill-pipeline {
    background: rgba(99, 102, 241, 0.14);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.28);
}
.status-pill-crm {
    background: rgba(168, 85, 247, 0.14);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.28);
}
:root[data-theme="light"] .status-pill-neu {
    background: rgba(120, 130, 145, 0.12);
    color: rgba(0,0,0,0.7);
}
:root[data-theme="light"] .status-pill-verifiziert {
    color: #15803d;
}
:root[data-theme="light"] .status-pill-pruefen {
    color: #b45309;
}
:root[data-theme="light"] .status-pill-pipeline {
    color: #4338ca;
}
:root[data-theme="light"] .status-pill-crm {
    color: var(--primary, #ffb84d);
}

/* Sweep 2c.25 Etappe 3: Leads-Toolbar (Suche + Filter + Sort + Saved Views) */
/* Sweep 2c.25.2 Etappe 4: Toolbar mit korrektem Box-Model + Overflow */
.leads-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
/* Sweep 2c.25.2-recheck Etappe 4: Toolbar-Left als Flex-Container,
   damit das Suchfeld INTRINSISCH per `flex: 1 1 auto; min-width: 0`
   in den verfuegbaren Platz geht und nicht via `width: 100%` ueber
   die Toolbar hinausschiesst. */
.leads-toolbar-left {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
}
.leads-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* Sweep 2c.25.5 Etappe 1: Suchfeld Greenfield-Rebuild als .leads-search-v3.
   Vorgaenger-Klassen .leads-search wurden komplett entfernt (siehe
   index.html). Implementation und Reasoning sind unten in einem
   eigenen Block am Ende der Datei zusammengefasst. */

/* Sweep 2c.25.1 Etappe 5: Toolbar-Buttons (Glass) */
.leads-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border, rgba(255,255,255,0.14));
    background: var(--color-glass-bg, rgba(255,255,255,0.04));
    color: var(--color-text-primary, rgba(255,255,255,0.9));
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease,
                box-shadow 120ms ease;
}
.leads-toolbar-btn:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.08));
    border-color: rgba(255,255,255,0.24);
}
.leads-toolbar-btn-arrow {
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    font-size: 11px;
    margin-left: 2px;
}
.leads-toolbar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-brand-primary, #2a34b0);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: 2px;
}

.leads-toolbar-dropdown {
    position: relative;
}
.leads-toolbar-menu {
    position: fixed;
    z-index: 1000;
    border-radius: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--color-text-primary, rgba(255,255,255,0.92));
    animation: leadsRowMenuIn 140ms ease-out;
}
.leads-toolbar-menu-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.leads-toolbar-menu-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    padding: 6px 12px 4px;
}
.leads-toolbar-menu-empty {
    font-size: 12px;
    color: var(--color-text-muted, rgba(255,255,255,0.45));
    padding: 6px 12px 8px;
    font-style: italic;
}
.leads-toolbar-menu-sep {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 6px;
}
.leads-toolbar-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 9px 12px;
    color: inherit;
    font-size: var(--text-sm, 13px);
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.leads-toolbar-menu-item:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.08));
    color: var(--color-brand-light, #7ab8f0);
}
.leads-toolbar-menu-item.active {
    color: var(--color-brand-light, #7ab8f0);
    background: rgba(42, 52, 176, 0.16);
}
.leads-toolbar-menu-check {
    display: inline-block;
    width: 14px;
    text-align: center;
    color: var(--color-brand-primary, #2a34b0);
    font-weight: 700;
}
.leads-manage-view-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.leads-manage-view-row:last-child {
    border-bottom: 0;
}

:root[data-theme="light"] .leads-toolbar-btn {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.85);
}
:root[data-theme="light"] .leads-toolbar-btn:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.18);
}
:root[data-theme="light"] .leads-toolbar-menu-sep {
    background: rgba(0,0,0,0.08);
}
:root[data-theme="light"] .leads-toolbar-menu-item:hover {
    background: rgba(42, 52, 176, 0.08);
    color: var(--color-brand-primary, #2a34b0);
}
:root[data-theme="light"] .leads-manage-view-row {
    border-bottom-color: rgba(0,0,0,0.06);
}
/* Alte .leads-search-Regeln entfernt — siehe v3-Block am Ende der Datei. */
.leads-views-select {
    max-width: 180px;
}

.leads-sort-th {
    cursor: pointer;
    user-select: none;
    transition: color 120ms ease;
}
.leads-sort-th:hover {
    color: var(--primary, #ffb84d);
}
.leads-sort-th.active {
    color: var(--color-brand-primary, #2a34b0);
}

/* Sweep 2c.25.1 Etappe 3f: klares Sort-Indicator-Icon */
.leads-sort-th-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Sweep 2d.5.10.C8.7 Teil B.2: Sort-Indicator permanent sichtbar
   (nicht erst bei Hover). Inaktive sortable Spalten zeigen dezenten
   ↕ in text-tertiary; aktive Spalte zeigt klaren ▲/▼ in brand-mid.
   Co-Selektor-Liste damit Lead-Pool + PulseDataTable den Master teilen. */
.leads-sort-icon,
.pulse-data-table__sort-icons {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1;
    vertical-align: middle;
    min-width: 12px;
    color: var(--color-brand-mid, #4f7edb);
    transition: color 120ms ease;
}
/* Aktive Indikator-Inhalte (sichtbarer Pfeil ▲ asc / ▼ desc) */
.leads-sort-icon .active,
.pulse-data-table__sort-icon-active {
    display: inline-block;
    color: var(--color-brand-mid, #4f7edb);
}
/* Inaktive sortable Spalten: dezenter ↕ PERMANENT sichtbar. */
.leads-sort-icon[data-state="inactive"]::before,
.pulse-data-table__sort-icons[data-state="inactive"]::before {
    content: "\2195";          /* ↕ */
    opacity: 0.35;
    color: var(--color-text-secondary);
}
/* Hover-Affordance auf sortable Header (BG-Tint + Indikator etwas heller). */
.leads-sort-th:hover,
.pulse-data-table__th--sortable:hover {
    background: var(--color-glass-bg, rgba(255,255,255,0.04));
}
.leads-sort-th:hover .leads-sort-icon[data-state="inactive"]::before,
.pulse-data-table__th--sortable:hover .pulse-data-table__sort-icons[data-state="inactive"]::before {
    opacity: 0.60;
}

/* Sweep 2c.25.1 Etappe 3e + 2c.25.2(-recheck) Etappe 2:
   Trennlinien sichtbar.
   Hintergrund: Tabelle hat `border-collapse: separate` (Zeile ~3957)
   -> TR-Borders rendern NICHT, nur TD/TH-Borders. Frueher v2-Regel
   auf TR hatte 0 Wirkung. Plus existiert ein Theme-Override in Zeile
   ~4780 das `border-bottom-color: var(--color-border) !important`
   auf TD setzt (= rgba(255,255,255,0.06) im Dark = kaum sichtbar).
   Daher hier mit `!important` auf TD/TH ueberschreiben. */
.lead-pool-tbl-v2 tbody tr {
    transition: background 120ms ease;
}
.lead-pool-tbl-v2 tbody tr:hover {
    background: rgba(255,255,255,0.04);
}
.lead-pool-tbl-v2 tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.lead-pool-tbl-v2 tbody tr:last-child td {
    border-bottom: 0 !important;
}
/* Header-Trenner kraeftiger als Zeilen-Trenner fuer klare Hierarchie */
.lead-pool-tbl-v2 thead th {
    border-bottom: 2px solid rgba(255,255,255,0.20) !important;
}
:root[data-theme="light"] .lead-pool-tbl-v2 tbody td {
    border-bottom-color: rgba(0,0,0,0.10) !important;
}
:root[data-theme="light"] .lead-pool-tbl-v2 tbody tr:hover {
    background: rgba(0,0,0,0.03);
}
:root[data-theme="light"] .lead-pool-tbl-v2 thead th {
    border-bottom-color: rgba(0,0,0,0.20) !important;
}

/* Sweep 2c.25 Etappe 4: Tabellen-Spalten neu (Avatare raus, Tags, Icons) */
.lead-pool-tbl-v2 .lead-firma-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}
.lead-firma-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.lead-note-icon {
    color: var(--color-brand-light, #7ab8f0);
    opacity: 0.85;
    display: inline-flex;
}
/* Sweep 2c.25.1 Etappe 10 + 2c.25.2 Etappe 6: Duplikat-Warn-Icon
   (Brand-Orange, kein Gelb). Active-State wenn Filter auf Gruppe. */
.lead-dup-icon {
    color: #f97316;
    font-size: 13px;
    cursor: pointer;
    margin-right: 2px;
    transition: filter 120ms ease, transform 120ms ease,
                background 120ms ease, padding 120ms ease;
    border-radius: 4px;
}
.lead-dup-icon:hover {
    filter: brightness(1.15);
    transform: scale(1.1);
}
.lead-dup-icon.active {
    background: rgba(249, 115, 22, 0.18);
    padding: 1px 5px;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.4);
}
/* Sweep 2d.5.7.c.1.1 Etappe 3: Tag/Topic-Pills KANONISCH ueber
   Lead-Pool + Pulse-Data-Table. Co-Selektor-Liste damit Verify-
   Tabelle dieselben Properties bekommt ohne JS-Migration. */
.lead-tags-row,
.pulse-data-table__topics-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
}
.lead-tag-pill,
.pulse-data-table__topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid transparent;
    line-height: 1.4;
    position: relative;
}
.lead-tag-pill-more,
.pulse-data-table__topic-pill--more {
    background: rgba(120, 130, 145, 0.15) !important;
    color: var(--color-text-muted, rgba(255,255,255,0.55)) !important;
    border-color: transparent !important;
}
.pulse-data-table__topics-empty {
    color: var(--color-text-subtle, rgba(255,255,255,0.32));
    font-size: var(--text-xs, 12px);
}
/* Sweep 2c.25.4 Etappe 3: Hover-X auf Tag-Pille in Lead-Liste fuer
   Schnell-Entfernen. Nur sichtbar bei Hover auf die Pille — bleibt
   die Liste so kompakt wie vorher. */
.lead-tag-pill-x {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    margin-left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 120ms ease, transform 120ms ease, background 120ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lead-tag-pill:hover .lead-tag-pill-x {
    opacity: 0.9;
    transform: scale(1);
}
.lead-tag-pill-x:hover {
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    opacity: 1 !important;
}
.lead-contact-icons {
    display: inline-flex;
    gap: 4px;
}
/* Sweep 2d.5.7.c.1.2 Etappe 2: Item-Styles fuer .lead-contact-ico
   sind in der zentralen Co-Selektor-Liste mit Tokens definiert
   (.pulse-data-table__contact-ico-Block, weiter unten). Hier nur
   Container + a-Cursor. */
a.lead-contact-ico {
    cursor: pointer;
}
/* Sweep 2c.25.1 Etappe 3a/3b: Stufe-Pille mit nur Zahl + neuem Farbschema
   (kein Gelb). Stufe 1 neutral, Stufe 2 Brand-Blau gedämpft, Stufe 3 grün. */
.stage-badge-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.stage-badge-v2.stage-v2-1 {
    background: rgba(255,255,255,0.08);
    color: var(--color-text-primary, rgba(255,255,255,0.85));
    border-color: rgba(255,255,255,0.14);
}
.stage-badge-v2.stage-v2-2 {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-light, #7ab8f0);
    border-color: rgba(79, 126, 219, 0.32);
}
.stage-badge-v2.stage-v2-3 {
    background: rgba(46, 160, 67, 0.18);
    color: #4fd97f;
    border-color: rgba(46, 160, 67, 0.36);
}
:root[data-theme="light"] .stage-badge-v2.stage-v2-1 {
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.7);
    border-color: rgba(0,0,0,0.1);
}
:root[data-theme="light"] .stage-badge-v2.stage-v2-2 {
    color: var(--color-brand-primary, #2a34b0);
}
:root[data-theme="light"] .stage-badge-v2.stage-v2-3 {
    color: #15803d;
}

.lead-pool-tbl-v2 .stage-badge {
    font-size: 12px;
    padding: 3px 9px;
    font-weight: 600;
}
.lead-pool-tbl-v2 .score-pill {
    font-size: 12px;
    padding: 3px 10px;
    font-weight: 700;
    border-radius: 999px;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    transition: box-shadow 200ms ease;
}
/* Sweep 2c.25.1 Etappe 3c: Score-Farbschema rot → orange → hellgrün → grün+Glow */
.lead-pool-tbl-v2 .score-pill.score-low {
    background: rgba(239, 68, 68, 0.16);
    color: #ef4444;
}
.lead-pool-tbl-v2 .score-pill.score-mid {
    background: rgba(249, 115, 22, 0.18);
    color: #f97316;
}
.lead-pool-tbl-v2 .score-pill.score-high {
    background: rgba(132, 204, 22, 0.18);
    color: #84cc16;
}
.lead-pool-tbl-v2 .score-pill.score-top {
    background: rgba(46, 160, 67, 0.22);
    color: #4fd97f;
    box-shadow: 0 0 12px rgba(46, 160, 67, 0.4);
    border: 1px solid rgba(46, 160, 67, 0.5);
}
:root[data-theme="light"] .lead-pool-tbl-v2 .score-pill.score-high {
    color: #65a30d;
}
:root[data-theme="light"] .lead-pool-tbl-v2 .score-pill.score-top {
    color: #15803d;
    box-shadow: 0 0 12px rgba(46, 160, 67, 0.3);
}

.leads-th-actions, .leads-td-actions {
    width: 36px;
    text-align: right;
}
.leads-row-action-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    padding: 4px;
    border-radius: 4px;
    line-height: 0;
    opacity: 0.6;
    transition: opacity 120ms ease, background 120ms ease;
}
.lead-pool-tbl-v2 tr:hover .leads-row-action-btn {
    opacity: 1;
}
.leads-row-action-btn:hover {
    background: var(--color-glass-bg, rgba(255,255,255,0.06));
    color: var(--primary, #ffb84d);
}
/* Sweep 2c.25.1 Etappe 4: 3-Dot-Menu im Glass-Card-Style. */
.leads-row-action-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
    cursor: default;
}
.leads-row-action-popover {
    position: fixed;
    z-index: 1000;
    border-radius: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    color: var(--color-text-primary, rgba(255,255,255,0.9));
    animation: leadsRowMenuIn 140ms ease-out;
}
@keyframes leadsRowMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.leads-row-action-popover.pulse-glass-card {
    /* erbt von pulse-glass-card; nur kleinere Tweaks */
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.leads-row-action-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}
.leads-row-action-close:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.08));
    color: var(--color-text-primary, #fff);
}
.leads-row-action-sep {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 6px;
}
.leads-row-action-item {
    background: transparent;
    border: 0;
    text-align: left;
    padding: 9px 12px;
    color: inherit;
    font-size: var(--text-sm, 13px);
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.leads-row-action-item:first-of-type {
    margin-top: 22px; /* Platz fuer X-Button oben rechts */
}
.leads-row-action-item:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.08));
    color: var(--color-brand-light, #7ab8f0);
}
.leads-row-action-item.destructive {
    color: #ef4444;
}
.leads-row-action-item.destructive:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

:root[data-theme="light"] .leads-row-action-popover {
    color: #111;
}
:root[data-theme="light"] .leads-row-action-sep {
    background: rgba(0,0,0,0.08);
}
:root[data-theme="light"] .leads-row-action-item:hover {
    background: rgba(42, 52, 176, 0.08);
    color: var(--color-brand-primary, #2a34b0);
}
/* Sweep 2d.5.7.c.1.2 Etappe 2: Light-Theme-Override fuer
   .lead-contact-ico kommt zentral aus den Tokens
   (--contact-icon-bg-inactive etc., per Theme automatisch). Alte
   Override-Block mit Gelb-tint (255,184,77) entfernt — Lead-Pool
   nutzt jetzt das Brand-Token-Mapping. */

/* Sweep 2c.25.1 Etappe 8: Tag-Picker-Modal */
.lead-tag-pickable {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease, transform 120ms ease;
}
.lead-tag-pickable:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}
.lead-tag-pickable.selected {
    filter: brightness(1.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}
.lead-tag-pickable-wrap {
    position: relative;
    display: inline-flex;
}
/* Sweep 2c.25.4 Etappe 3: Deselect-X (im Picker auf zugewiesenen Tags).
   Klick entfernt visuell die Zuweisung — kein globaler Delete.
   Brand-Look + immer sichtbar (nicht nur bei Hover), damit Mike's
   Wunsch "intuitiv erkennen wie man Tag entfernt" sofort greift. */
.lead-tag-deselect {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(20, 20, 28, 0.92);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    transition: background 120ms ease, transform 120ms ease;
}
.lead-tag-deselect:hover {
    background: #ef4444;
    transform: scale(1.1);
}
:root[data-theme="light"] .lead-tag-deselect {
    background: #fff;
    color: #1a1a1a;
    border-color: rgba(0,0,0,0.12);
}
:root[data-theme="light"] .lead-tag-deselect:hover {
    background: #ef4444;
    color: #fff;
}
.lead-tag-pickable-wrap.lead-tag-pickable-removed .lead-tag-pickable {
    opacity: 0.4;
    text-decoration: line-through;
    box-shadow: none !important;
    filter: none !important;
}
/* Sweep 2c.25.4 Etappe 3: Picker-Sektionen "Zugewiesen" / "Verfuegbar" */
.lead-tag-picker-section {
    margin-bottom: 12px;
}
.lead-tag-picker-section:last-child {
    margin-bottom: 0;
}
.lead-tag-picker-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    margin-bottom: 6px;
    font-weight: 700;
}
.lead-tag-picker-section-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.lead-tag-color-row {
    display: inline-flex;
    gap: 4px;
}
.lead-tag-color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 120ms ease, transform 120ms ease;
}
.lead-tag-color-dot:hover {
    transform: scale(1.1);
}
.lead-tag-color-dot.active {
    border-color: rgba(255,255,255,0.7);
    transform: scale(1.15);
}

/* Sweep 2c.25.1 Etappe 7: Branchen-Multi-Select im Drawer */
.leads-branche-list {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}
.leads-branche-list::-webkit-scrollbar {
    width: 6px;
}
.leads-branche-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}

/* Sweep 2c.25 Etappe 5: Sticky Bulk-Bar (Basis) */
.leads-sticky-bulk-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    /* Sweep 2c.25.2 Etappe 5: Bulk-Bar in der neuen Hierarchie */
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-radius: 14px;
    background: var(--color-bg-elevated, rgba(20, 20, 24, 0.94));
    color: var(--color-text-primary, #fff);
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    max-width: calc(100% - 32px);
    flex-wrap: wrap;
    animation: leadsBulkBarUp 220ms ease-out;
}

/* Sweep 2c.25.4 Etappe 1: Bulk-Bar Border knalliger.
   Mike's Live-Test: vorheriger Brand-Border zu subtle. Neu:
   Brand-Blau-Border + sichtbarer Brand-Ring + groesserer Brand-Glow,
   Pattern aus dem Login-Input-Focus uebernommen (border-color stark,
   inset-Highlight, doppelt geschichteter Ring + Glow).
   - Border opacity 0.30 -> 0.55 (deutlich sichtbar)
   - Plus aeusserer Brand-Ring 2px (rgba(42,52,176,0.20))
   - Plus Brand-Glow 32px statt 24px, opacity 0.30 statt 0.18
   - Plus inset-Highlight Ring fuer Glas-Look */
.leads-sticky-bulk-bar-v2 {
    bottom: 24px;
    padding: 14px 20px;
    border-radius: 18px;
    gap: 20px;
    width: min(92%, 1200px);
    max-width: calc(100% - 32px);
    background:
        radial-gradient(circle at 12% 100%, rgba(79, 126, 219, 0.22) 0%, rgba(79, 126, 219, 0) 45%),
        radial-gradient(circle at 88% 0%, rgba(79, 126, 219, 0.18) 0%, rgba(79, 126, 219, 0) 50%),
        rgba(20, 20, 28, 0.92);
    border: 1px solid rgba(79, 126, 219, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 0 2px rgba(42, 52, 176, 0.20),
        0 0 32px rgba(42, 52, 176, 0.30),
        0 8px 32px rgba(0, 0, 0, 0.55),
        0 24px 60px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
:root[data-theme="light"] .leads-sticky-bulk-bar-v2 {
    background:
        radial-gradient(circle at 12% 100%, rgba(42, 52, 176, 0.14) 0%, rgba(42, 52, 176, 0) 45%),
        radial-gradient(circle at 88% 0%, rgba(42, 52, 176, 0.12) 0%, rgba(42, 52, 176, 0) 50%),
        rgba(255, 255, 255, 0.96);
    border-color: rgba(42, 52, 176, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.40),
        0 0 0 2px rgba(42, 52, 176, 0.16),
        0 0 28px rgba(42, 52, 176, 0.20),
        0 8px 24px rgba(0, 0, 0, 0.10),
        0 16px 40px rgba(0, 0, 0, 0.08);
}
.leads-sticky-bulk-bar-v2 .leads-bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.12);
    padding-right: 18px;
}
.leads-bulk-counter {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-primary, #fff);
    font-weight: 600;
}
.leads-bulk-counter .muted {
    /* Sweep 2c.25.2 Etappe 1c: 'ausgewählt' soll klar sichtbar sein, nicht muted */
    color: var(--color-text-primary, #fff);
    opacity: 0.95;
}
.leads-bulk-counter strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-brand-light, #7ab8f0);
}
/* Sweep 2c.25.3 Etappe 1a: Action-Icons mittig + gleichmaessig verteilt.
   Gap 8px statt 4px (mehr Luft zwischen den Action-Cards),
   space-evenly statt center damit auch bei freiem Restplatz die
   Buttons gleichmaessig stehen statt sich zur Mitte zu druecken. */
.leads-sticky-bulk-bar-v2 .leads-bulk-bar-actions {
    /* Sweep 2d.5.7.1 Etappe 2c: nowrap — Hard-Constraint. */
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex: 1;
    justify-content: center;
}
.leads-bulk-action-btn {
    /* Sweep 2d.5.7.1 Etappe 2: Zurueck zu gestapelt (Icon oben + Label
       unten). 2d.5.4 hatte horizontal probiert, aber damit wird die
       Bulk-Bar nicht einreihig — gestapelt ist platzsparender und
       erfuellt Hard-Constraint flex-wrap:nowrap auf Container-Ebene.
       Dieses Pattern ist jetzt KANONISCH ueber alle drei Module
       (Lead-Uebersicht / Verifikation / Import). */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    min-width: 64px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 8px);
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 120ms ease, color 120ms ease;
}
.leads-bulk-action-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.leads-bulk-action-btn svg {
    color: var(--color-text-secondary, rgba(255,255,255,0.7));
    transition: color 120ms ease;
}
.leads-bulk-action-btn:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.08));
    color: var(--color-text-primary, #fff);
}
.leads-bulk-action-btn:hover svg {
    color: var(--color-brand-light, #7ab8f0);
}
.leads-bulk-action-btn-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.leads-bulk-action-btn-danger:hover svg {
    color: #ef4444;
}
.leads-bulk-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255,255,255,0.1);
    margin: 4px 4px;
}
.leads-bulk-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms ease, color 120ms ease;
}
.leads-bulk-close:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.1));
    color: var(--color-text-primary, #fff);
}

:root[data-theme="light"] .leads-sticky-bulk-bar-v2 .leads-bulk-bar-left {
    border-right-color: rgba(0,0,0,0.1);
}
:root[data-theme="light"] .leads-bulk-action-btn:hover {
    background: rgba(42,52,176,0.06);
}
:root[data-theme="light"] .leads-bulk-action-btn:hover svg {
    color: var(--color-brand-primary, #2a34b0);
}
:root[data-theme="light"] .leads-bulk-divider {
    background: rgba(0,0,0,0.1);
}
@keyframes leadsBulkBarUp {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.leads-bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm, 13px);
}
.leads-bulk-bar-left strong {
    font-size: 16px;
}
.leads-bulk-bar-actions {
    /* Sweep 2d.5.7.1 Etappe 2c: nowrap — gestapelte Action-Btns einreihig. */
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.leads-bulk-bar-actions .btn-sm {
    padding: 6px 11px;
    font-size: 12px;
}
.btn-link-muted {
    background: transparent;
    border: 0;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    padding: 2px 4px;
}
.btn-link-muted:hover {
    color: var(--primary, #ffb84d);
}
/* Sweep 2c.25.2 Etappe 1c: 'Auswahl leeren' im Bulk-Bar als klarer
   Action-Text (weiß+fett, Hover-Underline). Kein muted, kein Default-Underline. */
.leads-sticky-bulk-bar-v2 .btn-link-muted {
    color: var(--color-text-primary, #fff);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 120ms ease, text-decoration 120ms ease;
}
.leads-sticky-bulk-bar-v2 .btn-link-muted:hover {
    color: var(--color-text-primary, #fff);
    text-decoration: underline;
    background: rgba(255,255,255,0.06);
}
:root[data-theme="light"] .leads-sticky-bulk-bar-v2 .btn-link-muted {
    color: rgba(0,0,0,0.85);
}
:root[data-theme="light"] .leads-sticky-bulk-bar-v2 .btn-link-muted:hover {
    background: rgba(0,0,0,0.04);
}
.leads-bulk-status-wrap {
    position: relative;
}
.leads-bulk-status-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    /* Sweep 3.0.f1 F1-4: z-index ueber die Bar selbst (z-index 4000)
       damit das Menu auf anderem Stacking-Context-Layer sicher oben
       liegt. Plus min-width fuer Layout-Stabilitaet bei kurzen
       Items. */
    z-index: 4100;
    margin-bottom: 6px;
    flex-direction: column;
    background: var(--color-bg, #181818);
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    min-width: 160px;
    padding: 4px;
}
.leads-bulk-status-menu button {
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    font-size: var(--text-sm, 13px);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}
.leads-bulk-status-menu button:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.07));
    color: var(--primary, #ffb84d);
}

:root[data-theme="light"] .leads-sticky-bulk-bar {
    background: rgba(255,255,255,0.95);
    color: #111;
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
:root[data-theme="light"] .leads-bulk-status-menu {
    background: #fff;
    color: #111;
}

/* ============================================================
   Phase 2c.25.4 Etappe 4 — Tenant-Profile UI:
   Multi-Select (Branchen), Autocomplete (Themen), Tag-Input (Regionen).
   2c.25.5 Etappe 3 — Glass-Pattern fuer Selects + Text-Inputs.
   ============================================================ */
/* Sweep 2c.25.6 Etappe 2: echtes Custom-Dropdown.
   Browser-Native-<select> war im 2c.25.5 styled (.tpf-select), aber
   das <option>-Dropdown bleibt Browser-Native und kann nicht zuverlaessig
   gestylt werden (verschiedene Browser/OS rendern es weiss/grau/blau).
   Daher ersetzen wir das <select> komplett durch einen Trigger-Button
   + ein eigenes Glass-Card-Menu, Pattern aus dem Sortier-Dropdown
   (.leads-toolbar-menu). Mit Searchable + "Sonstige"-Marker. */
.tpf-dropdown {
    position: relative;
    display: block;
}
.tpf-dropdown-trigger {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text-primary, rgba(255,255,255,0.92));
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.tpf-dropdown-trigger:hover {
    border-color: rgba(79, 126, 219, 0.35);
    background: rgba(255, 255, 255, 0.06);
}
.tpf-dropdown-trigger[aria-expanded="true"],
.tpf-dropdown-trigger:focus {
    border-color: rgba(79, 126, 219, 0.6);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.18);
    outline: 0;
}
.tpf-dropdown-trigger-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tpf-dropdown-trigger-label.is-placeholder {
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    font-style: italic;
}
.tpf-dropdown-trigger-caret {
    color: var(--color-brand-light, #7ab8f0);
    flex-shrink: 0;
    transition: transform 160ms ease;
}
.tpf-dropdown-trigger[aria-expanded="true"] .tpf-dropdown-trigger-caret {
    transform: rotate(180deg);
}

.tpf-dropdown-menu {
    position: fixed;
    z-index: 9000;
    min-width: 240px;
    max-width: 480px;
    max-height: 360px;
    border-radius: 12px;
    background: var(--color-bg-elevated, rgba(20, 20, 28, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tpfDropdownIn 140ms ease-out;
}
@keyframes tpfDropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.tpf-dropdown-search {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    color: var(--color-text-primary, rgba(255,255,255,0.92));
    padding: 10px 14px;
    font-size: 13px;
    outline: 0;
    flex-shrink: 0;
}
.tpf-dropdown-search::placeholder {
    color: var(--color-text-muted, rgba(255,255,255,0.5));
}
.tpf-dropdown-list {
    overflow-y: auto;
    padding: 4px;
    flex: 1 1 auto;
}
.tpf-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 9px 12px;
    color: inherit;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.tpf-dropdown-item:hover,
.tpf-dropdown-item.is-active {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-light, #7ab8f0);
}
.tpf-dropdown-item.is-selected {
    color: var(--color-brand-light, #7ab8f0);
    background: rgba(42, 52, 176, 0.16);
}
.tpf-dropdown-item-check {
    width: 14px;
    text-align: center;
    color: var(--color-brand-light, #7ab8f0);
    font-weight: 700;
    flex-shrink: 0;
}
.tpf-dropdown-item-other {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
    padding-top: 11px;
}
.tpf-dropdown-empty {
    padding: 12px 14px;
    font-size: 12px;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    font-style: italic;
}

:root[data-theme="light"] .tpf-dropdown-trigger {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
}
:root[data-theme="light"] .tpf-dropdown-trigger:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.20);
}
:root[data-theme="light"] .tpf-dropdown-trigger[aria-expanded="true"],
:root[data-theme="light"] .tpf-dropdown-trigger:focus {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(42, 52, 176, 0.6);
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.16);
}
:root[data-theme="light"] .tpf-dropdown-trigger-caret {
    color: var(--color-brand-primary, #2a34b0);
}
:root[data-theme="light"] .tpf-dropdown-menu {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
:root[data-theme="light"] .tpf-dropdown-search {
    color: #1a1a1a;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .tpf-dropdown-item:hover,
:root[data-theme="light"] .tpf-dropdown-item.is-active {
    background: rgba(42, 52, 176, 0.08);
    color: var(--color-brand-primary, #2a34b0);
}
:root[data-theme="light"] .tpf-dropdown-item.is-selected {
    background: rgba(42, 52, 176, 0.10);
    color: var(--color-brand-primary, #2a34b0);
}
:root[data-theme="light"] .tpf-dropdown-item-other {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Text-Input im Profile (z.B. Sonstige-Freitext) im selben Glass-Look. */
.tpf-text-input.input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text-primary, rgba(255,255,255,0.92));
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.tpf-text-input.input:focus {
    border-color: rgba(79, 126, 219, 0.6);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.18);
    outline: 0;
}
:root[data-theme="light"] .tpf-text-input.input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
}
:root[data-theme="light"] .tpf-text-input.input:focus {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(42, 52, 176, 0.6);
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.16);
}

/* ============================================================
   Sweep 2c.25.5 Etappe 4 — Settings-Optik (Tenant-Profile-Tab):
   Card-Abstände, Card-Header mit Icon, Sticky-Save-Bar unten.
   ============================================================ */
.tpf-card {
    margin-bottom: 24px;
    padding: 24px 28px;
    border-radius: 14px;
}
.tpf-card:last-of-type {
    margin-bottom: 16px;
}
.tpf-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.tpf-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(79, 126, 219, 0.16);
    color: var(--color-brand-light, #7ab8f0);
    flex-shrink: 0;
}
:root[data-theme="light"] .tpf-card-icon {
    background: rgba(42, 52, 176, 0.10);
    color: var(--color-brand-primary, #2a34b0);
}
.tpf-card .card-subtitle {
    margin-bottom: 16px;
    margin-left: 42px; /* Sub-Title an die Icon-Spalte angeglichen */
}
.tpf-card .field {
    margin-bottom: 14px;
}
.tpf-card .field:last-child {
    margin-bottom: 0;
}
.tpf-card .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 720px) {
    .tpf-card .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Sticky-Save-Bar: erscheint wenn Profil dirty ist. Konsistent mit
   .leads-sticky-bulk-bar-v2 (Glass + Brand-Glow), aber etwas breiter. */
.tpf-sticky-save {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    width: min(92%, 760px);
    max-width: calc(100% - 32px);
    z-index: 4000;
    padding: 14px 22px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 100%, rgba(79, 126, 219, 0.22) 0%, rgba(79, 126, 219, 0) 45%),
        radial-gradient(circle at 88% 0%, rgba(79, 126, 219, 0.18) 0%, rgba(79, 126, 219, 0) 50%),
        rgba(20, 20, 28, 0.94);
    border: 1px solid rgba(79, 126, 219, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 0 2px rgba(42, 52, 176, 0.20),
        0 0 32px rgba(42, 52, 176, 0.30),
        0 8px 32px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    color: var(--color-text-primary, #fff);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}
.tpf-sticky-save.is-dirty {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.tpf-sticky-save-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.tpf-sticky-save-msg {
    font-size: 13px;
    color: var(--color-text-primary, rgba(255,255,255,0.92));
    font-weight: 500;
}
.tpf-sticky-save-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
:root[data-theme="light"] .tpf-sticky-save {
    background:
        radial-gradient(circle at 12% 100%, rgba(42, 52, 176, 0.14) 0%, rgba(42, 52, 176, 0) 45%),
        radial-gradient(circle at 88% 0%, rgba(42, 52, 176, 0.12) 0%, rgba(42, 52, 176, 0) 50%),
        rgba(255, 255, 255, 0.96);
    border-color: rgba(42, 52, 176, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.40),
        0 0 0 2px rgba(42, 52, 176, 0.16),
        0 0 28px rgba(42, 52, 176, 0.20),
        0 8px 24px rgba(0, 0, 0, 0.10);
    color: #1a1a1a;
}
:root[data-theme="light"] .tpf-sticky-save-msg {
    color: #1a1a1a;
}

.tpf-multi-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    min-height: 0;
}
.tpf-multi-pills:empty {
    display: none;
}
.tpf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-text-primary, #fff);
    border: 1px solid rgba(79, 126, 219, 0.4);
    line-height: 1.2;
}
.tpf-pill-x {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 120ms ease, background 120ms ease;
}
.tpf-pill-x:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
}
:root[data-theme="light"] .tpf-pill {
    background: rgba(42, 52, 176, 0.10);
    color: #1a2280;
    border-color: rgba(42, 52, 176, 0.32);
}

/* Autocomplete-Wrapper: Eingabefeld + Dropdown unter dem Feld */
.tpf-autocomplete-row {
    position: relative;
}
.tpf-autocomplete-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 280px;
    overflow-y: auto;
    background: var(--color-bg-elevated, rgba(20, 20, 28, 0.96));
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.tpf-autocomplete-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    color: var(--color-text-primary, rgba(255,255,255,0.9));
    font-size: 13px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.tpf-autocomplete-item:hover,
.tpf-autocomplete-item.active {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-light, #7ab8f0);
}
.tpf-autocomplete-item-meta {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    margin-top: 1px;
}
.tpf-autocomplete-empty-state {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
}
:root[data-theme="light"] .tpf-autocomplete-results {
    background: #fff;
    border-color: rgba(0,0,0,0.10);
}
:root[data-theme="light"] .tpf-autocomplete-item:hover,
:root[data-theme="light"] .tpf-autocomplete-item.active {
    background: rgba(42, 52, 176, 0.08);
    color: #1a2280;
}

/* ============================================================
   Sweep 2c.25.5 Etappe 1 — Suchfeld Greenfield-Rebuild (.leads-search-v3)

   VORGESCHICHTE
   2c.25.2 / 2c.25.3 / 2c.25.4 haben das Suchfeld dreimal versucht zu
   reparieren — jedesmal hat Mike weiter doppelte Bounding-Boxes
   gesehen. Ursache war jedesmal eine andere globale Input-Regel die
   den Inner-Input auf nicht-transparent setzte (input:hover { bg
   white }, input:focus { bg white + border-color + box-shadow }, plus
   input[type="search"] { border + bg + height + radius }).

   Specificity-Spiel war nicht mehr gewinnbar — jeder neue Pseudo-
   State (z.B. :focus-visible) hat eine neue Lücke geöffnet. Daher
   diesmal: Greenfield mit einem v3-Klassennamen, der von KEINER
   bestehenden globalen Input-Regel direkt getroffen wird, plus
   harte !important an den vier Eigenschaften (background, border,
   box-shadow, outline) die alle bekannten Quellen treffen.

   STRUKTUR
   .leads-search-v3                  — Outer-Container, Single-Border
     .leads-search-v3-icon            — Lupe (position absolute)
     .leads-search-v3-input           — der eigentliche Input

   Outer-Container hat Border + Background + Padding-Left:44 um Platz
   für die absolute positionierte Lupe zu schaffen. Inner-Input ist
   "unsichtbar" — kein eigener Background, kein Border, keine Shadow.
   Focus-State sitzt am Outer-Container über :focus-within.
   ============================================================ */
.leads-search-v3 {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.leads-search-v3:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
}
.leads-search-v3:focus-within {
    border-color: var(--color-brand-primary, #2a34b0);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 2px rgba(42, 52, 176, 0.18);
}

/* Sweep 2c.25.6 Etappe 1: Lupe + Placeholder ueberlagert sich.
   Icon-Position auf 16px, Input padding-left auf 48px (16 + 16 Icon-
   Breite + 16 Gap). 16px-Icon ist gut sichtbar, der Gap zum Text
   reicht auch fuer breitere deutsche Wortanfaenge ("Suche..."). */
.leads-search-v3-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    pointer-events: none;
}

/* Inner-Input: alle vier Quellen für sichtbare Boxen / Borders /
   Shadows mit !important pinnen, alle Pseudo-States separat
   gepinnt — :hover / :focus / :focus-visible / :active / :autofill. */
/* 2c.25.7: padding + height MUESSEN !important sein, weil die globale
   D5-Premium-Forms-Regel auf Z.3815-3824 padding:0 var(--space-4)
   !important UND height:44px !important setzt. Ohne unser !important
   gewinnt die globale Regel und der Placeholder rutscht unter die
   Lupe. Plus separates `padding-left: 48px !important` als belt-and-
   braces falls jemand das shorthand spaeter aenderbar haelt. Plus
   hoehere Specificity ueber `input.leads-search-v3-input` — bei zwei
   gleich-spezifischen !important gewinnt der spezifischere Selektor. */
.leads-search-v3-input,
.leads-search-v3 input[type="search"],
.leads-search-v3 input.leads-search-v3-input {
    flex: 1 1 auto;
    width: 100%;
    height: 100% !important;
    box-sizing: border-box;
    padding: 0 12px 0 48px !important;
    padding-left: 48px !important;
    margin: 0;
    color: inherit;
    font-size: var(--text-sm, 13px);
    line-height: 1;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-width: 0;
}
.leads-search-v3-input:hover,
.leads-search-v3 input[type="search"]:hover,
.leads-search-v3-input:focus,
.leads-search-v3 input[type="search"]:focus,
.leads-search-v3-input:focus-visible,
.leads-search-v3 input[type="search"]:focus-visible,
.leads-search-v3-input:active,
.leads-search-v3 input[type="search"]:active {
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}
/* Webkit: kein eigener Inner-Container für die search-Decoration */
.leads-search-v3-input::-webkit-search-decoration,
.leads-search-v3-input::-webkit-search-cancel-button,
.leads-search-v3-input::-webkit-search-results-button,
.leads-search-v3-input::-webkit-search-results-decoration {
    display: none;
}
/* Webkit-Autofill würde sonst auch einen sichtbaren Background
   reinbringen — selten relevant für ein Suchfeld, aber sicher ist sicher. */
.leads-search-v3-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s;
}

:root[data-theme="light"] .leads-search-v3 {
    border-color: rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.03);
}
:root[data-theme="light"] .leads-search-v3:hover {
    border-color: rgba(0, 0, 0, 0.18);
    background: rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .leads-search-v3:focus-within {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--color-brand-primary, #2a34b0);
    box-shadow: 0 0 0 2px rgba(42, 52, 176, 0.18);
}


/* ============================================================
   2d.4 Etappe 1 (TAIL): Toast-Status-Token-Override
   ============================================================
   Wegen mehrerer .toast.error/.warn/.success-Defs in style.css
   gewinnt nur der LETZTE — daher als finaler Block. */
.toast.error {
    background: var(--status-error-bg) !important;
    border: 1px solid var(--status-error-border) !important;
    border-left: 4px solid var(--status-error-icon) !important;
    color: var(--status-error-text) !important;
}
.toast.warn,
.toast.warning {
    background: var(--status-warn-bg) !important;
    border: 1px solid var(--status-warn-border) !important;
    border-left: 4px solid var(--status-warn-icon) !important;
    color: var(--status-warn-text) !important;
}
.toast.success {
    background: var(--status-success-bg) !important;
    border: 1px solid var(--status-success-border) !important;
    border-left: 4px solid var(--status-success-icon) !important;
    color: var(--status-success-text) !important;
}
.toast.info {
    background: var(--status-info-bg) !important;
    border: 1px solid var(--status-info-border) !important;
    border-left: 4px solid var(--status-info-icon) !important;
    color: var(--status-info-text) !important;
}

/* ============================================================
   2d.4.4 Etappe 2: Pillen UNTER Input (Mike-Korrektur 2d.4.1)
   ============================================================
   Mike-Korrektur: in 2d.4.1 hatten wir Pillen UEBER Input gemacht —
   Mike will sie aber UNTER. Pattern jetzt:
   - Input-Row OBEN (order: 1, fest in Position)
   - Pillen-Row UNTEN (order: 2, waechst nach unten beim Hinzufuegen)
*/
.tpf-multi-select,
.tpf-autocomplete,
.tpf-tag-input {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
}
/* Input-Row OBEN */
.tpf-multi-select > .tpf-dropdown,
.tpf-autocomplete > .tpf-autocomplete-row,
.tpf-tag-input > input[type="text"] {
    order: 1;
}
/* Pillen-Container UNTEN (haengen unten dran, wachsen nach unten) */
.tpf-multi-select > .tpf-multi-pills,
.tpf-autocomplete > .tpf-multi-pills,
.tpf-tag-input > .tpf-multi-pills {
    margin-bottom: 0 !important;
    order: 2;
}
/* 2d.4.5 Etappe 3: field-hint UNTER Pillen + UNTER Input.
   Vorher hatte .field-hint kein explicit order -> default 0 -> landete
   vor Input. Jetzt order:3 = ganz unten, einheitliche Struktur fuer alle
   4 Region-Inputs. */
.tpf-multi-select > .field-hint,
.tpf-autocomplete > .field-hint,
.tpf-tag-input > .field-hint {
    order: 3;
}
/* Input-Row haelt feste Hoehe, Pillen oben wachsen */
.tpf-autocomplete-row {
    flex-shrink: 0;
}

/* 2d.4.4 Etappe 4: Reset-Button einheitlich Icon + Text.
   Sweep 2d.4.1 Etappe 3 hatte einen 32x32-Round-Icon-Button — Mike will
   Icon + Text in vergleichbarer Groesse zu Action-Buttons. */
.import-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.import-reset-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ============================================================
   2d.4.8 Etappe 3: Bundesland Custom-Dropdown (5. Anlauf)
   ============================================================
   Native <select> bleibt hidden — sichtbar ist ein <button> als
   Trigger. Vorteil: kein Browser-Native-Render-Pfad mehr, 100%
   Custom-Look. Pattern analog zum .tpf-dropdown-trigger fuer den
   Branchen-Cluster, aber als pulse-glass-* fuer Konsistenz mit den
   anderen Form-Inputs. */
.pulse-glass-select-trigger {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--color-text-primary, rgba(255,255,255,0.92));
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.pulse-glass-select-trigger:hover {
    border-color: rgba(79, 126, 219, 0.35);
    background-color: rgba(255, 255, 255, 0.06);
}
.pulse-glass-select-trigger:focus,
.pulse-glass-select-trigger[aria-expanded="true"] {
    border-color: rgba(79, 126, 219, 0.6);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.18);
    outline: 0;
}
.pulse-glass-select-trigger.is-empty-required {
    border-color: rgba(239, 68, 68, 0.55);
}
.pulse-glass-select-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pulse-glass-select-trigger-caret {
    color: var(--color-brand-light, #7ab8f0);
    flex-shrink: 0;
    transition: transform 120ms ease;
}
.pulse-glass-select-trigger[aria-expanded="true"] .pulse-glass-select-trigger-caret {
    transform: rotate(180deg);
}
:root[data-theme="light"] .pulse-glass-select-trigger {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
}
:root[data-theme="light"] .pulse-glass-select-trigger-caret {
    color: #2a34b0;
}

/* ============================================================
   2d.4.6 Etappe 2: Bundesland-Dropdown Glass-Style (3. Anlauf)
   ============================================================
   Diagnose: .pulse-glass-select-Regel ab Zeile 3671 ist korrekt,
   wird aber teilweise von der spaeter definierten Regel
   ".card,.modal,.input,.select,textarea { border-color: !important }"
   (Zeile 4628) ueberschrieben — gleiche Spezifitaet (0,1,1 vs 0,1,0)
   plus Source-Order-Konflikt fuer Properties die nicht !important
   im Glass-Block sind (background-image, background-color).

   Fix: Final-Override-Block am Datei-Ende mit DOPPEL-Klassen-Trick
   fuer hoehere Spezifitaet (0,2,1) + alle relevanten Properties als
   !important. Das stellt sicher, dass Bundesland/Land/Stadt-Selects
   konsistent den Glass-Style zeigen, egal welche andere Regel im
   File spaeter noch hinzukommt. */
select.pulse-glass-select.pulse-glass-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c75e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 9px 36px 9px 12px !important;
    color: var(--color-text-primary, rgba(255,255,255,0.92)) !important;
    font-size: 13px !important;
    font-family: inherit !important;
    cursor: pointer !important;
}
select.pulse-glass-select.pulse-glass-select:hover {
    border-color: rgba(79, 126, 219, 0.35) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}
select.pulse-glass-select.pulse-glass-select:focus {
    border-color: rgba(79, 126, 219, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.18) !important;
    outline: 0 !important;
}
select.pulse-glass-select.pulse-glass-select:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}
:root[data-theme="light"] select.pulse-glass-select.pulse-glass-select {
    background-color: rgba(0, 0, 0, 0.03) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232a34b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1a1a1a !important;
}
:root[data-theme="light"] select.pulse-glass-select.pulse-glass-select:focus {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(42, 52, 176, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.16) !important;
}

/* =========================================================================
   Sweep 2d.5.5.be Etappe 3: Module-Header Single Source.

   Pattern aus Lead-Uebersicht-Hero (.leads-hero / .leads-hero-title /
   .leads-hero-subtitle) wird auf .module-header gespiegelt — alle
   Module die schon das module-header-Markup nutzen, bekommen die
   gleiche Hero-Aesthetik OHNE HTML-Migration. Verifikation, Scoring,
   Pipeline, Settings, Reseller, Mails ziehen automatisch nach.

   Plus: .module-header__dynamic fuer Brand-Blau-Werte (Lead-Anzahl,
   Credits) im Subtitle. JS setzt die Klasse wo dynamische Werte
   stehen.
   ====================================================================== */
.module-header {
    margin: 12px 0 24px !important;
    padding: 4px 0 0 !important;
}
.module-header .module-title {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif !important;
    font-size: clamp(36px, 5vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 8px !important;
    color: var(--color-text-primary, #fff) !important;
}
.module-header .module-subtitle {
    font-size: var(--text-base, 15px) !important;
    line-height: 1.55 !important;
    max-width: 720px !important;
    margin: 0 0 18px !important;
    color: var(--color-text-secondary, rgba(255,255,255,0.78)) !important;
}
/* Sweep 2d.5.7.1 Etappe 4b: Module-Header Dynamic-Values.
   Aktive Anzeigen (Lead-Anzahl, Credits-Wert, Account-Status) nutzen
   Logo-Range Brand-Hue:
   - Light-Theme: --color-brand-primary (#2a34b0 Royal-Blau)
     auf weissem BG Kontrast 7.5:1 (WCAG AA-Plus).
   - Dark-Theme:  --color-brand-mid (#4f7edb Mittelblau)
     auf schwarzem BG kraeftiger Akzent (war zuvor #7ab8f0 Hell-Cyan,
     Mid ist klarer lesbar als Hell-Cyan).

   Verwendung: <span class="module-header__dynamic">160</span> Leads

   Sweep 2d.5.7.f Etappe 1: .leads-hero-num (Lead-Uebersicht-Hero
   "160 Leads / 23 verifiziert / 2 bewertet") in derselben Selektor-
   Liste — damit ist Lead-Hero visuell identisch mit Verifikations-Hero
   (Single-Source, keine Doppel-Pflege). */
.module-header__dynamic,
.module-header .dynamic-value,
.leads-hero-num {
    color: var(--color-brand-primary, #2a34b0);
    font-weight: 700;
}
:root[data-theme="dark"] .module-header__dynamic,
:root[data-theme="dark"] .module-header .dynamic-value,
:root[data-theme="dark"] .leads-hero-num {
    /* Sweep 2d.5.7.1 Etappe 4b: Dark-Theme-Override jetzt Brand-Mid
       statt Brand-Light. Mid (#4f7edb) ist auf dunklem BG kraeftiger
       und leichter lesbar als Hell-Cyan (#7ab8f0) — kraeftiger Akzent
       wo dynamische Werte (Counter, Anzahl, Credits) stehen. */
    color: var(--color-brand-mid, #4f7edb);
}

/* =========================================================================
   Sweep 2d.5.7.c Etappe 2 — Pulse Data-Table Pattern
   =========================================================================
   Zentrales Tabellen-Pattern fuer alle Module. Master-Pattern v2 ist die
   Lead-Pool-Tabelle (.lead-pool-tbl-v2) — visuelle Identitaet uebernommen.

   Verwendung neu: <table class="pulse-data-table">...</table>
   plus optional Modifier:
     - .pulse-data-table--compact     (kleinere Padding, dichter)
     - .pulse-data-table--scrollable  (overflow-x mit sticky-header)
     - .pulse-data-table--striped     (alternierender Row-BG)
   ========================================================================= */
.pulse-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 13px);
    color: var(--color-text-primary, #fff);
    table-layout: auto;
}

.pulse-data-table__header {
    background: transparent;
}

/* Sweep 2d.5.10.C8.7 Teil B.1: Goldstandard-Header-Spec — IDENTISCH
   zu .lead-pool-tbl thead th (Z. 7434+) damit alle Tabellen visuell
   konvergieren. Konkrete Pixel-Werte: 12px 16px Padding, 11px Font,
   0.05em Letter-Spacing, color-text-muted. */
.pulse-data-table__th {
    padding: var(--space-3) var(--space-4);    /* 12px 16px */
    text-align: left;
    font-family: var(--font-sans);
    font-size: var(--text-2xs);                 /* 11px */
    font-weight: var(--font-weight-semibold);   /* 600 */
    color: var(--color-text-muted);             /* 0.55 alpha */
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide); /* 0.05em */
    white-space: nowrap;
    border-bottom: 2px solid rgba(255,255,255,0.20);
    background: transparent;
}
:root[data-theme="light"] .pulse-data-table__th {
    border-bottom-color: rgba(0,0,0,0.20);
}

.pulse-data-table__th--sortable {
    cursor: pointer;
    user-select: none;
    transition: color 120ms ease, background 120ms ease;
}

.pulse-data-table__th--sortable:hover {
    color: var(--color-text-primary, #fff);
    background: rgba(255,255,255,0.04);
}

.pulse-data-table__th-label {
    margin-right: 4px;
}

/* Sweep 2d.5.7.c.1.2 Etappe 1: Legacy-Single-Sort-Icon-Block (Singular
   .pulse-data-table__sort-icon) entfernt — wird nicht mehr gerendert.
   Aktuelles Pattern lebt in style.css ~Z.15991 mit Co-Selektor zu
   .leads-sort-icon. */

/* =========================================================================
   Sweep 2d.5.7.d Etappe 2 — Pulse Filter-Toolbar Pattern
   =========================================================================
   Zentrales Filter-Toolbar-Pattern. Master ist Lead-Uebersicht-Toolbar
   (.leads-toolbar). Co-Selektor-Listen sorgen dafuer dass Verify-
   Toolbar dieselben Properties bekommt — Container-BG bleibt
   modul-spezifisch (Lead nutzt keinen Container-BG, Verify hat eigenen
   Glass-BG fuer optische Card-Trennung).
   ========================================================================= */
.pulse-filter-toolbar,
.pulse-filter-toolbar__main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    box-sizing: border-box;
    min-width: 0;
}

.pulse-filter-toolbar {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pulse-filter-toolbar__main {
    flex: 1 1 280px;
    min-width: 0;
}

.pulse-filter-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* === Status-Tabs (Tab-Pills "Alle 160 / Verifiziert 23 / Bewertet 2") === */
.pulse-filter-toolbar__status-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pulse-filter-toolbar__status-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-pill, 9999px);
    border: 1px solid var(--color-border, rgba(255,255,255,0.18));
    background: var(--color-glass-bg, rgba(255,255,255,0.06));
    color: var(--color-text-primary, #fff);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease,
                color 160ms ease, box-shadow 160ms ease;
}
.pulse-filter-toolbar__status-tab--active {
    background: var(--color-brand-primary, #2a34b0);
    border-color: var(--color-brand-primary, #2a34b0);
    color: #ffffff;
    box-shadow: var(--color-brand-glow, 0 0 24px rgba(42, 52, 176, 0.3));
}
.pulse-filter-toolbar__status-count {
    font-variant-numeric: tabular-nums;
    color: var(--color-brand-mid, #4f7edb);
    font-weight: 600;
    margin-left: 2px;
}
.pulse-filter-toolbar__status-tab--active .pulse-filter-toolbar__status-count {
    color: var(--color-brand-light, #7ab8f0);
}

/* === Status-Filter-Pills (kleine Filter-Pills) === */
.pulse-filter-toolbar__status-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.pulse-filter-toolbar__status-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--radius-pill, 9999px);
    border: 1px solid var(--color-border, rgba(255,255,255,0.16));
    background: var(--color-glass-bg, rgba(255,255,255,0.04));
    color: var(--color-text-secondary, rgba(255,255,255,0.78));
    font-size: var(--text-xs, 12px);
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease,
                border-color 160ms ease, box-shadow 160ms ease;
}
.pulse-filter-toolbar__status-filter--active {
    background: var(--color-brand-mid, #4f7edb);
    border-color: var(--color-brand-mid, #4f7edb);
    color: #ffffff;
    box-shadow: 0 0 16px var(--color-brand-glow-light, rgba(122, 184, 240, 0.35));
}
.pulse-filter-toolbar__filter-count {
    font-variant-numeric: tabular-nums;
    color: var(--color-brand-mid, #4f7edb);
    font-weight: 600;
}
.pulse-filter-toolbar__status-filter--active .pulse-filter-toolbar__filter-count {
    color: #ffffff;
}

/* === Search-Input (Glass) === */
.pulse-filter-toolbar__search,
.leads-search-v3,
.verify-filter-search {
    position: relative;
    flex: 1 1 280px;
    min-width: 200px;
    display: flex;
    align-items: center;
}
.pulse-filter-toolbar__search-icon {
    position: absolute;
    left: 14px;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
    pointer-events: none;
}
.pulse-filter-toolbar__search-input,
.pulse-glass-input {
    width: 100%;
    height: 40px;
    padding: 0 var(--space-3, 12px) 0 40px;
    background: var(--input-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.10));
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-primary, #ffffff);
    font-size: var(--text-sm, 14px);
    transition: background 120ms ease, border-color 120ms ease,
                box-shadow 120ms ease;
}
.pulse-filter-toolbar__search-input:hover,
.pulse-glass-input:hover {
    background: var(--input-bg-hover, rgba(255, 255, 255, 0.06));
    border-color: var(--input-border-hover, rgba(79, 126, 219, 0.35));
}
.pulse-filter-toolbar__search-input:focus,
.pulse-glass-input:focus {
    outline: 0;
    background: var(--input-bg-focus, rgba(255, 255, 255, 0.06));
    border-color: var(--input-border-focus, rgba(79, 126, 219, 0.6));
    box-shadow: var(--input-shadow-focus, 0 0 0 3px rgba(42, 52, 176, 0.18));
}

/* === Quick-Toggles (Mail/Phone Icon-Buttons) === */
.pulse-filter-toolbar__quick-toggles {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.pulse-filter-toolbar__quick-toggle,
.pulse-glass-toggle,
.verify-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.10));
    background: var(--color-glass-bg, rgba(255, 255, 255, 0.04));
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.78));
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease,
                border-color 120ms ease;
}
.pulse-filter-toolbar__quick-toggle:hover,
.pulse-glass-toggle:hover,
.verify-filter-icon:hover {
    background: rgba(79, 126, 219, 0.10);
    border-color: rgba(79, 126, 219, 0.30);
    color: var(--color-text-primary, #ffffff);
}
.pulse-filter-toolbar__quick-toggle--active,
.pulse-filter-toolbar__quick-toggle[aria-pressed="true"],
.verify-filter-icon[aria-pressed="true"] {
    background: var(--color-brand-mid, #4f7edb);
    border-color: var(--color-brand-mid, #4f7edb);
    color: #ffffff;
}

/* === Drawer-Btn === */
.pulse-filter-toolbar__drawer-btn,
.pulse-glass-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.10));
    background: var(--color-glass-bg, rgba(255, 255, 255, 0.04));
    color: var(--color-text-primary, #ffffff);
    font-size: var(--text-sm, 13px);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.pulse-filter-toolbar__drawer-btn:hover,
.pulse-glass-dropdown:hover {
    background: rgba(79, 126, 219, 0.08);
    border-color: rgba(79, 126, 219, 0.25);
}
.pulse-filter-toolbar__drawer-btn[aria-expanded="true"] {
    background: var(--color-brand-mid, #4f7edb);
    border-color: var(--color-brand-mid, #4f7edb);
    color: #ffffff;
}
.pulse-filter-toolbar__drawer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill, 9999px);
    background: var(--color-brand-mid, #4f7edb);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pulse-filter-toolbar__drawer-btn[aria-expanded="true"] .pulse-filter-toolbar__drawer-badge {
    background: #ffffff;
    color: var(--color-brand-primary, #2a34b0);
}

/* === Reset-Link === */
.pulse-filter-toolbar__reset {
    background: transparent;
    border: 0;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.78));
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: var(--text-xs, 12px);
    cursor: pointer;
    padding: 4px 8px;
    transition: color 120ms ease;
}
.pulse-filter-toolbar__reset:hover {
    color: #ffffff;
}

/* === Result-Count === */
.pulse-filter-toolbar__result-count {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
    font-variant-numeric: tabular-nums;
}

/* === Modifier === */
.pulse-filter-toolbar--compact {
    gap: 8px;
    margin-bottom: 8px;
}
.pulse-filter-toolbar--compact .pulse-filter-toolbar__search-input,
.pulse-filter-toolbar--compact .pulse-glass-input {
    height: 34px;
}
.pulse-filter-toolbar--minimal .pulse-filter-toolbar__status-tabs,
.pulse-filter-toolbar--minimal .pulse-filter-toolbar__status-filters,
.pulse-filter-toolbar--minimal .pulse-filter-toolbar__quick-toggles {
    display: none;
}

/* =========================================================================
   Sweep 2d.5.7.e Etappe 4 — Pulse Action-Button Pattern
   =========================================================================
   Zentrales Action-Button-Component fuer Inline-Aktionen, Modal-Footer,
   Form-Submits etc. Co-Selektor-Listen sorgen dafuer dass legacy
   .btn-{primary/success/danger/ghost} dasselbe Aussehen bekommen.
   ========================================================================= */
.pulse-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    height: 36px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid transparent;
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease,
                border-color 120ms ease, transform 120ms ease,
                box-shadow 120ms ease;
    white-space: nowrap;
    user-select: none;
}
.pulse-action-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pulse-action-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pulse-action-button__label {
    line-height: 1;
}

/* === Sizes === */
.pulse-action-button--sm {
    height: 28px;
    padding: 4px 10px;
    font-size: var(--text-xs, 12px);
    gap: 4px;
}
.pulse-action-button--lg {
    height: 44px;
    padding: 12px 20px;
    font-size: var(--text-base, 15px);
    gap: 8px;
}

/* === Layouts === */
.pulse-action-button--icon-only {
    width: 36px;
    padding: 0;
    gap: 0;
}
.pulse-action-button--icon-only.pulse-action-button--sm {
    width: 28px;
}
.pulse-action-button--icon-only.pulse-action-button--lg {
    width: 44px;
}
.pulse-action-button--icon-top {
    flex-direction: column;
    height: auto;
    min-width: 64px;
    padding: 8px 14px;
    gap: 4px;
    font-size: var(--text-xs, 12px);
}

/* === Variants ===
   Co-Selektor-Liste mit legacy .btn-* damit alte Buttons dasselbe Visual
   bekommen ohne JS-Migration. Spezifizitaet match (beide 0,1,0). */
.pulse-action-button--primary,
.btn.btn-primary {
    background: var(--color-brand-primary, #2a34b0);
    color: #ffffff;
    border-color: var(--color-brand-primary, #2a34b0);
}
.pulse-action-button--primary:hover,
.btn.btn-primary:hover {
    background: var(--color-brand-mid, #4f7edb);
    border-color: var(--color-brand-mid, #4f7edb);
}

.pulse-action-button--success {
    background: var(--color-success, #16a34a);
    color: #ffffff;
    border-color: var(--color-success, #16a34a);
}
.pulse-action-button--success:hover {
    filter: brightness(1.10);
}

.pulse-action-button--danger,
.btn.btn-danger {
    background: var(--color-danger, #dc2626);
    color: #ffffff;
    border-color: var(--color-danger, #dc2626);
}
.pulse-action-button--danger:hover,
.btn.btn-danger:hover {
    filter: brightness(1.10);
}

.pulse-action-button--ghost,
.btn.btn-ghost {
    background: transparent;
    color: var(--color-text-primary, #ffffff);
    border-color: var(--color-border, rgba(255, 255, 255, 0.10));
}
.pulse-action-button--ghost:hover,
.btn.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}

.pulse-action-button--neutral {
    background: var(--color-glass-bg, rgba(255, 255, 255, 0.04));
    color: var(--color-text-primary, #ffffff);
    border-color: var(--color-border, rgba(255, 255, 255, 0.10));
}
.pulse-action-button--neutral:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

/* === Loading-State === */
.pulse-action-button--loading {
    pointer-events: none;
}
.pulse-action-button__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pulse-action-spin 600ms linear infinite;
}
@keyframes pulse-action-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* === Light-Theme-Overrides === */
:root[data-theme="light"] .pulse-action-button--ghost,
:root[data-theme="light"] .btn.btn-ghost {
    color: var(--color-text-primary, #0a0a0a);
    border-color: rgba(10, 10, 10, 0.10);
}
:root[data-theme="light"] .pulse-action-button--ghost:hover,
:root[data-theme="light"] .btn.btn-ghost:hover {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.18);
}

:root[data-theme="light"] .pulse-filter-toolbar__search-input,
:root[data-theme="light"] .pulse-glass-input {
    background: var(--input-bg-light, rgba(0, 0, 0, 0.03));
    border-color: var(--input-border-light, rgba(0, 0, 0, 0.10));
    color: var(--color-text-primary, #0a0a0a);
}
:root[data-theme="light"] .pulse-filter-toolbar__quick-toggle,
:root[data-theme="light"] .pulse-glass-toggle {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.10);
}
:root[data-theme="light"] .pulse-filter-toolbar__quick-toggle--active,
:root[data-theme="light"] .verify-filter-icon[aria-pressed="true"] {
    background: var(--color-brand-mid, #4f7edb);
    color: #ffffff;
}

/* Sweep 2d.5.10.C7.2 Teil B.5: Hover-State konsistent.
 * Vorher Hover-Alpha 0.06 — zu dezent, bei striped-Rows oder
 * komplexen Cell-Backgrounds nicht sichtbar (Mike's "manchmal ja,
 * manchmal nicht"-Beobachtung). Jetzt 0.12 — klar sichtbar ueber
 * allen Hintergrund-Varianten. */
.pulse-data-table__row {
    transition: background 120ms ease, box-shadow 120ms ease;
}

.pulse-data-table__row:hover {
    background: rgba(79, 126, 219, 0.12);
}

.pulse-data-table__row--selected {
    background: rgba(79, 126, 219, 0.16);
    box-shadow: inset 3px 0 0 var(--color-brand-mid, #4f7edb);
}

.pulse-data-table__row--selected:hover {
    background: rgba(79, 126, 219, 0.22);
}

/* Stripes-Variante darf den Hover NICHT ueberlagern — Hover muss
 * staerker sein als Striped-Tint (sonst "verschwindet" der Hover auf
 * geraden Rows). striped-Tint ist rgba(255,255,255,0.02), hover ist
 * rgba(79,126,219,0.12) — Brand-Tint dominiert. */
.pulse-data-table--striped .pulse-data-table__row:hover {
    background: rgba(79, 126, 219, 0.14);
}

.pulse-data-table__td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    vertical-align: middle;
}

.pulse-data-table__row:last-child .pulse-data-table__td {
    border-bottom: 0;
}

.pulse-data-table__checkbox {
    width: 36px;
    padding: 10px 0 10px 14px;
    text-align: center;
    vertical-align: middle;
}

.pulse-data-table__checkbox input[type="checkbox"] {
    accent-color: var(--color-brand-mid, #4f7edb);
    cursor: pointer;
}

.pulse-data-table__empty {
    padding: 40px 24px !important;
    text-align: center;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
}

.pulse-data-table__empty-icon {
    margin-bottom: 12px;
    color: var(--color-text-subtle, rgba(255,255,255,0.35));
    display: flex;
    justify-content: center;
}

.pulse-data-table__empty-title {
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--color-text-secondary, rgba(255,255,255,0.78));
    margin-bottom: 6px;
}

.pulse-data-table__empty-text {
    font-size: var(--text-sm, 13px);
    color: var(--color-text-muted, rgba(255,255,255,0.55));
}

/* Cell-Helper-Styles (Pendant zu data-table-cells.js) */
.pulse-data-table__contact-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pulse-data-table__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: var(--color-brand-mid, #4f7edb);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.pulse-data-table__contact-icon--active:hover {
    background: rgba(79, 126, 219, 0.12);
    color: var(--color-brand-light, #7ab8f0);
}

.pulse-data-table__contact-icon--inactive {
    color: var(--color-text-subtle, rgba(255,255,255,0.35));
    cursor: default;
}

/* Sweep 2d.5.7.c.1.2 Etappe 2: Kontakt-Icons KANONISCH ueber alle
   Tabellen. Lead-Uebersicht-Pattern als Master: width/height 24px,
   border-radius 6px (NICHT pill), Default mit subtle glass-bg, Active
   mit brand-mid-tint BG + brand-light Icon. Werte aus tokens.css. */
.pulse-data-table__contact-ico,
.lead-contact-ico,
.verify-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--contact-icon-bg-inactive);
    border: 1px solid var(--contact-icon-border);
    color: var(--contact-icon-fg-inactive);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease,
                border-color 120ms ease, filter 120ms ease;
}

.lead-contact-ico.has,
.verify-contact-icon--active,
.pulse-data-table__contact-ico--has {
    background: var(--contact-icon-bg-active);
    border-color: var(--contact-icon-border-active);
    color: var(--contact-icon-fg-active);
}

a.lead-contact-ico.has:hover,
a.verify-contact-icon--active:hover,
a.pulse-data-table__contact-ico--has:hover {
    background: var(--contact-icon-bg-hover);
    border-color: var(--contact-icon-border-hover);
    color: var(--contact-icon-fg-hover);
    filter: brightness(1.15);
}

.verify-contact-icon--off,
.pulse-data-table__contact-ico--off {
    cursor: default;
}

/* Aktivitaets-Cell-Container (kompakt, tabular-nums, Lead-Pool-Look). */
.pulse-data-table__time-ago {
    display: inline-block;
    font-size: var(--text-2xs, 11px);
    color: var(--color-text-secondary, rgba(255,255,255,0.78));
    font-variant-numeric: tabular-nums;
}

/* Row-Actions: 3-Punkte-Icon am Row-Ende.
   Co-Selektor-Liste fuer Lead-Pool und neue Pulse-Klasse. */
.pulse-data-table__row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.pulse-data-table__row-action-btn,
.leads-row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-subtle, rgba(255,255,255,0.35));
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.pulse-data-table__row-action-btn:hover,
.leads-row-action-btn:hover {
    background: rgba(79, 126, 219, 0.12);
    color: var(--color-brand-mid, #4f7edb);
}

/* Sweep 2d.5.7.c.1 Etappe 1: Verstaerkter Row-Border auch fuer alte
   Klassen die bisher die schwache var(--color-border) genutzt haben.
   !important-Konflikt-Aufloesung mit globalen .data-table-Regeln. */
.pulse-data-table__row .pulse-data-table__td,
table.pulse-data-table tbody tr td,
table.pulse-data-table.data-table tbody tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

table.pulse-data-table tbody tr:last-child td,
table.pulse-data-table.data-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Sweep 2d.5.10.C8.7 Teil B.1: einheitlicher Header — KEIN
   separater Container-BG (Mike-Spec: Header-BG = Body-BG). */
table.pulse-data-table thead th,
table.pulse-data-table.data-table thead th {
    border-bottom: 2px solid rgba(255, 255, 255, 0.20) !important;
    background: transparent;
}

:root[data-theme="light"] .pulse-data-table__row .pulse-data-table__td,
:root[data-theme="light"] table.pulse-data-table tbody tr td,
:root[data-theme="light"] table.pulse-data-table.data-table tbody tr td {
    border-bottom-color: rgba(0, 0, 0, 0.10) !important;
}
:root[data-theme="light"] table.pulse-data-table thead th,
:root[data-theme="light"] table.pulse-data-table.data-table thead th {
    border-bottom-color: rgba(0, 0, 0, 0.20) !important;
    background: transparent;
}

/* Sweep 2d.5.7.c.1 Etappe 1: Verify-Sortable-Header auf Pulse-Pattern
   aliasen (Sortier-Indikator-Standard). */
.verify-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 120ms ease, background 120ms ease;
}
.verify-sortable:hover {
    color: var(--color-text-primary, #fff);
    background: rgba(255, 255, 255, 0.04);
}
.verify-sort-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    line-height: 1;
    color: var(--color-text-subtle, rgba(255,255,255,0.35));
}
.verify-sortable.is-sorted .verify-sort-arrow,
.verify-sortable .verify-sort-arrow:not(:empty) {
    color: var(--color-brand-mid, #4f7edb);
}

/* Sweep 2d.5.7.c.1 Etappe 1: Verify-Status-Pills auf Pulse-Status-
   Pill-Tokens aliasen (visuelle Identitaet zu Lead-Uebersicht). */
.verify-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill, 9999px);
    font-size: var(--text-2xs, 11px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.verify-status-pill.status-pill-pending {
    background: var(--status-color-offen-bg);
    color: var(--status-color-offen-fg);
}
.verify-status-pill.status-pill-verified {
    background: var(--status-color-verified-bg);
    color: var(--status-color-verified-fg);
}
.verify-status-pill.status-pill-review {
    background: var(--status-color-pruefen-bg);
    color: var(--status-color-pruefen-fg);
}
.verify-status-pill.status-pill-nolink {
    background: var(--status-color-kein-link-bg);
    color: var(--status-color-kein-link-fg);
}
.verify-status-pill.status-pill-bad {
    background: var(--status-color-disqualified-bg);
    color: var(--status-color-disqualified-fg);
}
.verify-status-pill.status-pill-neutral {
    background: var(--status-color-kein-link-bg);
    color: var(--status-color-kein-link-fg);
}

.pulse-data-table__time {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-secondary, rgba(255,255,255,0.78));
    font-variant-numeric: tabular-nums;
}

.pulse-data-table__time--empty {
    color: var(--color-text-subtle, rgba(255,255,255,0.35));
}

.pulse-data-table__company {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Sweep 2d.5.10.C8.6 Teil B: cursor:pointer auf Rows mit
 * Click-Handler, ABER KEIN Hover-Underline mehr (Mike-Spec:
 * konsistent mit Lead-Übersicht — Row-Hover liefert eh schon
 * subtle Brand-Mid-Background-Tint als Klick-Affordance). */
.pulse-data-table--clickable .pulse-data-table__row {
    cursor: pointer;
}
/* Sweep 2d.5.10.C8.6: zentrale companyCell ist überall klickbar
 * (auch in Inline-Edit-Tabellen wie Haendisch/Kein-Link wo die
 * Row nicht clickable ist, aber der Firma-Name navigiert).
 * Mike-Spec: cursor:pointer reicht — KEIN Hover-Color, KEIN
 * Underline (Row-Hover-Background ist die einzige Affordance). */
.pulse-data-table__company-name--clickable {
    cursor: pointer;
    /* Sweep 2.7.2.d Etappe D: jetzt als <a href>-Tag — Default-Link-
       Styling neutralisieren. */
    color: inherit;
    text-decoration: none;
}
a.pulse-data-table__company-name--clickable:visited {
    color: inherit;
}

/* Sweep 2.7.1.a Etappe I — Tabellen-Blueprint:
   Firmenname-Hover bekommt jetzt Underline + Brand-Color-Shift als
   visuelle Affordance. Mike-Mandat (vorher: kein Hover, weil Row-Hover-
   Background als Affordance). Mit der neuen Konvention "Row-Click =
   Selection, Name-Click = Detail" braucht der Name explizite Affordance. */
.pulse-data-table__company-name--clickable:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-brand-mid, #4f7edb);
}
/* Auch fuer lead-firma-name (Lead-Pool-Variante, da custom Wrapper) */
.lead-firma-name.pulse-data-table__company-name--clickable:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-brand-mid, #4f7edb);
}

/* Sweep 2d.5.10.C8.6 Teil A: Sonderfall Verifikation/Haendisch +
   Kein-Link: Webseite-Link unter Firmennamen. */
.pulse-data-table__company-website {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.2;
}
.pulse-data-table__company-website-link {
    color: var(--color-text-secondary, var(--slate-500, #64748b));
    text-decoration: none;
}
.pulse-data-table__company-website-link:hover {
    color: var(--color-brand-mid, #4f7edb);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pulse-data-table__company-website--missing {
    color: var(--color-text-tertiary, var(--slate-400, #94a3b8));
    font-style: italic;
}

/* Sweep 2d.5.10.C8.8 Teil C.0: Edit-Cell-Renderer fuer Inline-Edit-
   Tabellen (Verifikation/Haendisch, /Kein-Link). Konsistente Inputs
   und Selects ueber alle Module — kein Modul-spezifisches Styling. */
.pulse-data-table__edit-input,
.pulse-data-table__edit-select {
    width: 100%;
    min-width: 90px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.10));
    color: var(--color-text-primary);
    padding: 6px 10px;
    font-size: 13px;
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-sans);
    transition: border-color 120ms ease, background 120ms ease;
}
.pulse-data-table__edit-input:hover,
.pulse-data-table__edit-select:hover {
    border-color: var(--color-brand-mid, #4f7edb);
}
.pulse-data-table__edit-input:focus,
.pulse-data-table__edit-select:focus {
    outline: none;
    border-color: var(--color-brand-mid, #4f7edb);
    background: rgba(79, 126, 219, 0.06);
}
:root[data-theme="light"] .pulse-data-table__edit-input,
:root[data-theme="light"] .pulse-data-table__edit-select {
    background: rgba(0, 0, 0, 0.02);
    border-color: var(--slate-200, #e2e8f0);
}
.pulse-data-table__edit-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Sweep 2d.5.10.C8.8 Teil D: Glass-Card-Container app-weit fuer alle
   Tabellen. .pulse-data-table-mount ist der Wrapper-Div den alle
   Module um die Component setzen (z.B. <div id="verifyTableMount"
   class="pulse-data-table-mount">). Damit erhalten ALLE Tabellen
   automatisch die gleiche Glass-Card-Optik wie Lead-Uebersicht. */
.pulse-data-table-mount {
    background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.12));
}
.pulse-data-table-mount > table.pulse-data-table {
    margin: 0;
}
:root[data-theme="light"] .pulse-data-table-mount {
    background: #ffffff;
    border-color: var(--slate-200, #e2e8f0);
}

/* Sweep 2d.5.10.C8.6 Teil C: Scoring-Result-Popup (Quick-View).
   Bewusste Ausnahme zum "Kein-Modal-fuer-Leads"-Pattern — nur fuer
   Scoring-Ergebnis-Snapshot, NICHT fuer Lead-Edit. */
.scoring-result-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500;
    padding: 20px;
}
.scoring-result-popup {
    max-width: 720px;
    width: 100%;
    max-height: 88vh;
    overflow: auto;
    padding: 24px;
}
.scoring-result-popup__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}
.scoring-result-popup__title {
    margin: 0 0 6px 0;
    font-size: 22px;
    line-height: 1.2;
}
.scoring-result-popup__meta {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.scoring-result-popup__pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.scoring-result-popup__pill--hot {
    background: rgba(220, 38, 38, 0.16);
    color: #ef4444;
}
.scoring-result-popup__pill--warm {
    background: rgba(234, 88, 12, 0.18);
    color: #f97316;
}
.scoring-result-popup__pill--lauwarm {
    background: rgba(202, 138, 4, 0.18);
    color: #eab308;
}
.scoring-result-popup__pill--kalt {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-mid, #4f7edb);
}
.scoring-result-popup__close {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 24px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
}
.scoring-result-popup__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
}
.scoring-result-popup__score-mount {
    margin-bottom: 18px;
}
.scoring-result-popup__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.pulse-data-table__warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.pulse-data-table__warn--warn {
    background: var(--status-color-pruefen-bg);
    color: var(--status-color-pruefen-fg);
}

.pulse-data-table__warn--danger {
    background: var(--status-color-disqualified-bg);
    color: var(--status-color-disqualified-fg);
}

.pulse-data-table__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pulse-data-table__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-secondary, rgba(255,255,255,0.78));
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.pulse-data-table__action-btn:hover {
    background: rgba(79, 126, 219, 0.12);
    color: var(--color-brand-mid, #4f7edb);
}

/* === Pulse-Status-Pill === */
.pulse-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill, 9999px);
    font-size: var(--text-2xs, 11px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pulse-status-pill--verified {
    background: var(--status-color-verified-bg);
    color: var(--status-color-verified-fg);
}
.pulse-status-pill--pruefen {
    background: var(--status-color-pruefen-bg);
    color: var(--status-color-pruefen-fg);
}
.pulse-status-pill--kein-link {
    background: var(--status-color-kein-link-bg);
    color: var(--status-color-kein-link-fg);
}
.pulse-status-pill--disqualified {
    background: var(--status-color-disqualified-bg);
    color: var(--status-color-disqualified-fg);
}
.pulse-status-pill--offen {
    background: var(--status-color-offen-bg);
    color: var(--status-color-offen-fg);
}
.pulse-status-pill--neu {
    background: var(--status-color-neu-bg);
    color: var(--status-color-neu-fg);
}

/* === Stage-Pill === */
.pulse-stage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 9999px);
    background: rgba(79, 126, 219, 0.12);
    color: var(--color-brand-mid, #4f7edb);
    font-size: var(--text-xs, 12px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Sweep 2d.5.7.e Etappe 1: Stage-Variants pro Stufe + Co-Selektor zu
   Lead-Pool's stage-badge-v2. Stufe 3 = Top-Marker mit Gold/Success. */
.pulse-stage-pill--stage-1,
.stage-badge-v2.stage-v2-1 {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.78));
}
.pulse-stage-pill--stage-2,
.stage-badge-v2.stage-v2-2 {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-light, #7ab8f0);
}
.pulse-stage-pill--stage-3,
.stage-badge-v2.stage-v2-3 {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.20);
}

/* Sweep 2d.5.7.e Etappe 1: Sizes (--sm / --md default / --lg) */
.pulse-status-pill--sm,
.pulse-stage-pill--sm {
    padding: 1px 7px;
    font-size: 10px;
    min-height: 16px;
}
.pulse-status-pill--lg,
.pulse-stage-pill--lg {
    padding: 5px 14px;
    font-size: var(--text-sm, 13px);
    min-height: 26px;
}

/* Sweep 2d.5.7.e Etappe 1: Variants (--filled default / --soft / --outline) */
.pulse-status-pill--soft {
    background: transparent;
    border: 1px solid currentColor;
}
.pulse-status-pill--outline {
    background: transparent;
    border: 1px solid currentColor;
    /* outline ist gleicher Look wie soft, semantisch nur "ohne BG" */
}
/* --filled ist Default — kein Modifier-CSS noetig */

/* === Modifier === */
.pulse-data-table--compact .pulse-data-table__td {
    padding: 6px 10px;
}
.pulse-data-table--compact .pulse-data-table__th {
    padding: 8px 10px;
}

.pulse-data-table--scrollable {
    display: block;
    overflow-x: auto;
}
.pulse-data-table--scrollable thead th {
    position: sticky;
    top: 0;
    background: var(--color-bg-base, #0a0a0a);
    z-index: 1;
}

.pulse-data-table--striped .pulse-data-table__row:nth-child(even) {
    background: rgba(255,255,255,0.02);
}

/* === Light-Theme-Overrides === */
:root[data-theme="light"] .pulse-data-table {
    color: var(--color-text-primary, #0a0a0a);
}
:root[data-theme="light"] .pulse-data-table__th {
    color: var(--color-text-secondary, rgba(10,10,10,0.78));
    border-bottom-color: rgba(0,0,0,0.20);
}
:root[data-theme="light"] .pulse-data-table__td {
    border-bottom-color: rgba(0,0,0,0.10);
}
:root[data-theme="light"] .pulse-data-table__row:hover {
    background: rgba(79, 126, 219, 0.08);
}
:root[data-theme="light"] .pulse-data-table__row--selected {
    background: rgba(79, 126, 219, 0.12);
}
:root[data-theme="light"] .pulse-data-table__row--selected:hover {
    background: rgba(79, 126, 219, 0.18);
}
:root[data-theme="light"] .pulse-data-table--scrollable thead th {
    background: var(--color-bg-base, #ffffff);
}

/* ============================================================
   Sweep 2d.5.10.C3 Etappe 2 — Scoring Empty States (3 Varianten)
   ============================================================ */
.scoring-empty-state {
    margin: var(--space-6) auto;
    max-width: 560px;
    /* Spacing-Skala: 1/2/3/4/5/6/8/10/12/16/24 (kein 7). */
    padding: var(--space-8) var(--space-6);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 24px rgba(0, 0, 0, 0.18);
}
.scoring-empty-state--warn {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(
        180deg,
        rgba(245, 158, 11, 0.06) 0%,
        rgba(245, 158, 11, 0.02) 100%
    );
}
.scoring-empty-state--success {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(
        180deg,
        rgba(34, 197, 94, 0.06) 0%,
        rgba(34, 197, 94, 0.02) 100%
    );
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 24px rgba(34, 197, 94, 0.10);
}
.scoring-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}
.scoring-empty-state__icon--amber {
    color: rgb(245, 158, 11);
    background: rgba(245, 158, 11, 0.12);
}
.scoring-empty-state__icon--neutral {
    color: var(--color-text-tertiary);
    background: rgba(255, 255, 255, 0.06);
}
.scoring-empty-state__icon--success {
    color: rgb(34, 197, 94);
    background: rgba(34, 197, 94, 0.12);
}
.scoring-empty-state__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}
.scoring-empty-state__body {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.scoring-empty-state__progress {
    position: relative;
    height: 10px;
    margin: 0 auto var(--space-4);
    max-width: 360px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.scoring-empty-state__progress-bar {
    height: 100%;
    background: linear-gradient(
        90deg,
        rgb(245, 158, 11) 0%,
        rgb(251, 191, 36) 100%
    );
    border-radius: 999px;
    transition: width var(--duration-base) var(--ease-out);
}
.scoring-empty-state__progress-label {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}
.scoring-empty-state__missing {
    margin: var(--space-2) auto var(--space-4);
    max-width: 360px;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: left;
}
.scoring-empty-state__missing-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-2);
    font-weight: 600;
}
.scoring-empty-state__missing ul {
    margin: 0;
    padding-left: var(--space-5);
    list-style: disc;
}
.scoring-empty-state__missing li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 2px 0;
}
.scoring-empty-state__list {
    margin: 0 auto var(--space-4);
    padding-left: var(--space-5);
    max-width: 420px;
    list-style: disc;
    text-align: left;
}
.scoring-empty-state__list li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 4px 0;
}
.scoring-empty-state__workflow {
    margin: var(--space-3) 0 var(--space-4);
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    text-align: left;
}
.scoring-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-4);
}
.scoring-empty-state__hint {
    margin: var(--space-4) 0 0;
    font-size: var(--text-xs);
}

/* ============================================================
   Sweep 2d.5.10.C3 Etappe 3 — Profil-Completeness-Card in Settings
   ============================================================ */
.profile-completeness-card {
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.profile-completeness-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.profile-completeness-card__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}
.profile-completeness-card__value {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.profile-completeness-card__value strong {
    font-size: var(--text-base);
    color: var(--color-text-primary);
}
.profile-completeness-card__bar {
    position: relative;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.profile-completeness-card__bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width var(--duration-base) var(--ease-out);
}
.profile-completeness-card__hint {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    line-height: 1.5;
}
/* Tier-Color-Schemes — amber < 50 < brand-mid < 75 < success-light < 100 < success+glow */
.profile-completeness-card.tier-low {
    border-color: rgba(245, 158, 11, 0.3);
}
.profile-completeness-card.tier-low .profile-completeness-card__bar-fill {
    background: linear-gradient(90deg, rgb(245, 158, 11), rgb(251, 191, 36));
}
.profile-completeness-card.tier-mid {
    border-color: rgba(79, 126, 219, 0.3);
}
.profile-completeness-card.tier-mid .profile-completeness-card__bar-fill {
    background: linear-gradient(90deg, rgb(42, 52, 176), rgb(79, 126, 219));
}
.profile-completeness-card.tier-high {
    border-color: rgba(34, 197, 94, 0.3);
}
.profile-completeness-card.tier-high .profile-completeness-card__bar-fill {
    background: linear-gradient(90deg, rgb(22, 163, 74), rgb(74, 222, 128));
}
.profile-completeness-card.tier-perfect {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18),
                0 8px 24px rgba(34, 197, 94, 0.16);
}
.profile-completeness-card.tier-perfect .profile-completeness-card__bar-fill {
    background: linear-gradient(90deg, rgb(22, 163, 74), rgb(74, 222, 128));
}

/* ============================================================
   Sweep 2d.5.10.C4 Etappe 3 — Scoring-Faktoren-Card-Reihe
   Skills: refactoring-ui (constrained Grid + de-emphasized
   Labels), ux-heuristics (visible Save-State, recognition über
   recall via Slot-Namen), microinteractions (Save-Indicator
   Pending→OK 100ms-Feedback-Rule)
   ============================================================ */
.pulse-factor-block {
    margin: var(--space-4) 0 var(--space-6);
}
.pulse-factor-block:empty {
    display: none;
}
.pulse-factor-section-header {
    margin-bottom: var(--space-4);
}
.pulse-factor-section-title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
    letter-spacing: var(--letter-spacing-tight);
}
.pulse-factor-section-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin: 0;
    max-width: 720px;
    line-height: var(--line-height-relaxed);
}

/* --- Set-Selector-Toolbar ---------------------------------- */
.pulse-factor-set-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.pulse-factor-set-toolbar__left,
.pulse-factor-set-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.pulse-factor-set-toolbar__lbl {
    font-size: var(--label-font-size);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
}
.pulse-factor-set-select {
    min-width: 200px;
}
.pulse-factor-default-badge {
    font-size: var(--text-xs);
    color: var(--color-accent-gold);
    font-weight: var(--font-weight-semibold);
    padding: 4px 10px;
    background: var(--color-accent-gold-soft);
    border-radius: var(--radius-pill);
}

/* --- Card-Grid (3/2/1 Spalten) ------------------------------ */
.pulse-factor-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
@media (max-width: 1100px) {
    .pulse-factor-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .pulse-factor-cards-grid { grid-template-columns: 1fr; }
}

.pulse-factor-empty-set {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-card);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
}

/* --- Card -------------------------------------------------- */
.pulse-factor-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: opacity var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    position: relative;
}
.pulse-factor-card:hover {
    border-color: var(--color-border-strong);
}
.pulse-factor-card--inactive {
    opacity: 0.55;
}
.pulse-factor-card--inactive .pulse-factor-slider {
    cursor: not-allowed;
}
.pulse-factor-card--custom {
    border-style: dashed;
    border-color: var(--color-border-glass-strong);
}
.pulse-factor-card--custom:not(.pulse-factor-card--inactive) {
    border-style: solid;
    border-color: var(--color-brand-light);
    box-shadow: 0 0 0 1px var(--color-brand-light), 0 8px 24px var(--color-brand-glow-light);
}

.pulse-factor-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.pulse-factor-card__icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--color-brand-light);
    flex-shrink: 0;
}
.pulse-factor-card__name {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pulse-factor-card__head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pulse-factor-custom-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-bold);
    padding: 2px 6px;
    background: var(--color-brand-glow-light);
    color: var(--color-brand-light);
    border-radius: var(--radius-pill);
}

/* --- Save-Indicator ----------------------------------------- */
.pulse-factor-save-indicator {
    width: 16px;
    height: 16px;
    opacity: 0;
    color: var(--color-success);
    transition: opacity var(--duration-fast) var(--ease-out);
}
.pulse-factor-card[data-save-status="pending"] .pulse-factor-save-indicator {
    opacity: 1;
    color: var(--color-text-muted);
    animation: pulse-factor-spin 600ms linear infinite;
}
.pulse-factor-card[data-save-status="ok"] .pulse-factor-save-indicator {
    opacity: 1;
    color: var(--color-success);
}
.pulse-factor-card[data-save-status="error"] .pulse-factor-save-indicator {
    opacity: 1;
    color: var(--color-danger);
}
@keyframes pulse-factor-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Edit-Icon-Button auf Custom-Card ----------------------- */
.pulse-factor-edit-btn {
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    display: inline-flex;
}
.pulse-factor-edit-btn:hover {
    background: var(--input-bg);
    color: var(--color-text-primary);
}

/* --- Toggle (Schalter) -------------------------------------- */
.pulse-factor-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
}
.pulse-factor-toggle input { opacity: 0; width: 0; height: 0; }
.pulse-factor-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--input-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: 20px;
    transition: background var(--duration-fast) var(--ease-out);
}
.pulse-factor-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-text-muted);
    border-radius: 50%;
    transition: transform var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.pulse-factor-toggle input:checked + .pulse-factor-toggle-slider {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-mid);
}
.pulse-factor-toggle input:checked + .pulse-factor-toggle-slider::before {
    transform: translateY(-50%) translateX(15px);
    background: #fff;
}

/* --- Body --------------------------------------------------- */
.pulse-factor-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.pulse-factor-desc {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: var(--line-height-snug);
}
.pulse-factor-slider-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.pulse-factor-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    outline: none;
    cursor: pointer;
}
.pulse-factor-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-brand-mid);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.pulse-factor-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-brand-mid);
    cursor: pointer;
    border: 0;
}
.pulse-factor-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--color-brand-glow);
}
.pulse-factor-slider:disabled {
    opacity: 0.5;
}
.pulse-factor-slider-val {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    text-align: right;
}
.pulse-factor-slider-val b {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

/* --- Custom-Card Empty-Body --------------------------------- */
.pulse-factor-empty-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}
.pulse-factor-empty-text {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}
.pulse-factor-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- Edit-Modal --------------------------------------------- */
.pulse-factor-edit-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--modal-z-base);
    padding: var(--space-4);
}
.pulse-factor-edit-modal {
    background: var(--color-bg-card-solid);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xl);
    max-width: 540px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    color: var(--color-text-primary);
    overflow: hidden;
}
.pulse-factor-edit-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.pulse-factor-edit-modal__header h4 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
}
.pulse-factor-edit-modal__close {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.pulse-factor-edit-modal__close:hover {
    background: var(--input-bg);
    color: var(--color-text-primary);
}
.pulse-factor-edit-modal__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.pulse-factor-edit-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
}
.pulse-factor-edit-label input[type="text"],
.pulse-factor-edit-label textarea {
    padding: 10px 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    resize: vertical;
}
.pulse-factor-edit-label input[type="text"]:focus,
.pulse-factor-edit-label textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
}
.pulse-factor-edit-modal__actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}
.pulse-factor-edit-modal__actions-right {
    display: inline-flex;
    gap: var(--space-2);
}
.pulse-factor-ki-stub-modal {
    max-width: 580px;
}
.pulse-factor-ki-stub-modal .pulse-factor-edit-modal__body p {
    margin: 0 0 8px 0;
    line-height: var(--line-height-relaxed);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.pulse-factor-ki-stub-modal .pulse-factor-edit-modal__body p:first-of-type {
    color: var(--color-text-primary);
    font-size: var(--text-base);
}
.pulse-factor-ki-stub-examples {
    margin: 4px 0 8px 22px;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--line-height-relaxed);
}
.pulse-factor-ki-stub-server-msg {
    margin: 12px 0 0;
    padding: 8px 12px;
    background: var(--input-bg);
    border-left: 2px solid var(--color-border-strong);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

/* --- Light-Theme-Override ----------------------------------- */
:root[data-theme="light"] .pulse-factor-set-toolbar,
:root[data-theme="light"] .pulse-factor-card,
:root[data-theme="light"] .pulse-factor-edit-modal {
    background: var(--color-bg-card);
}
:root[data-theme="light"] .pulse-factor-toggle input:checked + .pulse-factor-toggle-slider::before {
    background: #fff;
}

/* ============================================================
   Sweep 2d.5.10.C10.1 — Mini-UI-Test-Trigger Scoring
   Skills: refactoring-ui (3 visuelle Zustaende form/progress/result
   mit klarer Hierarchie + constrained Distribution-Buckets),
   ux-heuristics (H1 Visibility durch Live-Counter, H9 Recover-from-
   Errors mit klarem API-Key-Hinweis)
   ============================================================ */
.pulse-test-trigger-block {
    margin: var(--space-4) 0 var(--space-6);
}
.pulse-test-trigger-block:empty { display: none; }
.pulse-test-trigger-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.pulse-test-trigger-header {
    margin-bottom: var(--space-4);
}
.pulse-test-trigger-title {
    margin: 0 0 4px 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.pulse-test-trigger-badge {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    background: var(--color-accent-gold-soft);
    color: var(--color-accent-gold);
    border-radius: var(--radius-pill);
}
.pulse-test-trigger-hint {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--line-height-relaxed);
}
.pulse-test-trigger-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.pulse-test-trigger-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
}
.pulse-test-trigger-input {
    padding: 10px 14px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
.pulse-test-trigger-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
}
.pulse-test-trigger-tip {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--line-height-relaxed);
}
.pulse-test-trigger-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.pulse-test-trigger-cost-hint {
    font-size: 11px;
    opacity: 0.85;
    font-weight: var(--font-weight-regular);
}
.pulse-test-trigger-error {
    padding: 10px 14px;
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    border-radius: var(--radius-md);
    color: var(--status-error-text);
    font-size: var(--text-sm);
}

/* --- Progress-State ---------------------------------------- */
.pulse-test-trigger-card--progress {
    border-color: var(--color-brand-light);
    box-shadow: 0 0 0 1px var(--color-brand-light), var(--brand-glow-soft);
}
.pulse-test-progress-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.pulse-test-progress-spinner {
    display: inline-flex;
    color: var(--color-brand-light);
    animation: pulse-test-spin 800ms linear infinite;
}
@keyframes pulse-test-spin { to { transform: rotate(360deg); } }
.pulse-test-progress-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
.pulse-test-progress-bar-wrap {
    height: 8px;
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: var(--space-2);
}
.pulse-test-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-mid));
    transition: width var(--duration-base) var(--ease-out);
}
.pulse-test-progress-counter {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}
.pulse-test-progress-counter b {
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.pulse-test-progress-status {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-xs);
}
.pulse-test-progress-stat.ok { color: var(--color-success); }
.pulse-test-progress-stat.err { color: var(--color-danger); }

/* --- Result-State ------------------------------------------ */
.pulse-test-trigger-card--result {
    border-color: rgba(34, 197, 94, 0.4);
}
.pulse-test-result-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.pulse-test-result-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--status-success-bg);
    color: var(--color-success);
}
.pulse-test-result-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
.pulse-test-result-meta {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
.pulse-test-result-distribution {
    padding: var(--space-3);
    background: var(--input-bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.pulse-test-result-dist-title {
    font-size: var(--label-font-size);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
    margin-bottom: 8px;
}
.pulse-test-dist-row {
    display: grid;
    grid-template-columns: 140px 1fr 40px;
    align-items: center;
    gap: var(--space-2);
    padding: 3px 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.pulse-test-dist-bar-wrap {
    display: flex;
    align-items: center;
    background: var(--color-border-strong);
    height: 10px;
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.pulse-test-dist-bar { height: 100%; display: block; }
.pulse-test-dist-bar--hot { background: var(--color-success); }
.pulse-test-dist-bar--warm { background: var(--color-brand-mid); }
.pulse-test-dist-bar--lauwarm { background: var(--color-warning); }
.pulse-test-dist-bar--kalt { background: var(--color-text-muted); }
.pulse-test-dist-count {
    text-align: right;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.pulse-test-result-actions {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.pulse-test-result-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* --- Mini-Result-Card -------------------------------------- */
.pulse-scoring-result-mini {
    background: var(--color-bg-card-solid);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.pulse-scoring-result-mini--hot {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 4px 16px rgba(34, 197, 94, 0.12);
}
.pulse-scoring-result-mini--warm {
    border-color: rgba(79, 126, 219, 0.35);
}
.pulse-test-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.pulse-test-mini-firma {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
.pulse-test-mini-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.pulse-test-mini-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.pulse-test-mini-score {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pulse-test-mini-badge {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.pulse-test-mini-badge--hot {
    background: var(--status-success-bg);
    color: var(--color-success);
}
.pulse-test-mini-badge--warm {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-mid);
}
.pulse-test-mini-badge--lauwarm {
    background: var(--status-warn-bg);
    color: var(--color-warning);
}
.pulse-test-mini-badge--kalt {
    background: var(--input-bg);
    color: var(--color-text-muted);
}
.pulse-test-mini-reasoning {
    margin: 8px 0 var(--space-3) 0;
    padding: 8px 12px;
    background: var(--input-bg);
    border-left: 3px solid var(--color-brand-mid);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--line-height-relaxed);
    font-style: italic;
}
.pulse-test-mini-factor-section {
    margin-top: var(--space-3);
}
.pulse-test-mini-section-title {
    font-size: var(--label-font-size);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
    margin-bottom: 6px;
}
.pulse-test-factor-row {
    display: grid;
    grid-template-columns: 130px 30px 1fr;
    align-items: center;
    gap: var(--space-2);
    padding: 2px 0;
    font-size: var(--text-xs);
}
.pulse-test-factor-name { color: var(--color-text-secondary); }
.pulse-test-factor-score {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.pulse-test-factor-bar-wrap {
    background: var(--color-border-strong);
    height: 6px;
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.pulse-test-factor-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-brand-mid), var(--color-brand-light));
    display: block;
}
.pulse-test-mini-reasoning-list {
    margin: 0;
    padding-left: 18px;
    font-size: var(--text-xs);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}
.pulse-test-mini-reasoning-list li { margin-bottom: 4px; }
.pulse-test-mini-reasoning-list b { color: var(--color-text-primary); }

/* --- Error-State ------------------------------------------- */
.pulse-test-trigger-card--error {
    border-color: var(--status-error-border);
}
.pulse-test-error-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.pulse-test-error-icon { color: var(--color-danger); }
.pulse-test-error-title {
    margin: 0;
    font-size: var(--text-md);
    color: var(--color-text-primary);
}
.pulse-test-error-message {
    color: var(--status-error-text);
    background: var(--status-error-bg);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}

/* ============================================================
   Sweep 2d.5.10.C5 — Scoring-Tabelle + Filter + Bulk-Bar
   Skills: refactoring-ui (Constrained Score-Buckets 4 Stufen,
   Visual Hierarchy mit Score gross + Pill dezent),
   ux-heuristics (H1 Visibility, H4 Consistency mit Verifikations-
   Tabelle)
   ============================================================ */
.pulse-scoring-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* Sweep 2d.5.10.C7.1 Teil B.2: Filter-Toolbar refactored.
 * Vorher: .pulse-scoring-toolbar (eigenes 1-zeiliges Layout).
 * Jetzt: .pulse-filter-toolbar.scoring-toolbar (Lead-Uebersicht-Pattern).
 * Eigene Stage-Pills-Reihe (.scoring-stage-pills als Modifier auf
 * .leads-stage-pills). Spacing zur Toolbar wird zentral aus
 * .leads-stage-pills/.pulse-filter-toolbar geerbt. */
.scoring-stage-pills {
    margin-bottom: var(--space-3);
}
.scoring-toolbar .leads-toolbar-result-count {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    align-self: center;
    margin-right: var(--space-2);
}
:root[data-theme="light"] .scoring-toolbar .leads-toolbar-result-count {
    color: var(--color-text-secondary);
}

/* Sweep 2d.5.10.C7.5 Teil A.2: Score-Pill kombiniert (Wert + Label).
 * Vorher (C7.1-C7.4): zwei nebeneinanderstehende Elemente (Zahl + Pill)
 * trotz uniform font-size unruhig → Mike's Entscheidung: ein optisches
 * Objekt pro Zeile. Markup ist jetzt eine einzige Pill mit
 * __num + __sep + __label.
 *
 * Eigenschaften:
 *  - Pill-Hoehe einheitlich (gap+padding zentral)
 *  - Wert font-size 14px / 600 (kompakt, nicht mehr 18px)
 *  - Label font-size 11px / 700 / uppercase / letter-spacing
 *  - Separator "·" mit opacity 0.5 als visueller Bindestrich
 *  - Bucket-Klassen setzen nur Color + Background — keine Groesse */
.pulse-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
}
.pulse-score-pill--none {
    display: inline-block;
    height: auto;
    padding: 0;
    border: none;
    color: var(--color-text-tertiary);
    font-style: italic;
}
.pulse-score-pill__num {
    font-size: 14px;
    font-weight: 600;
    min-width: 22px;
    text-align: right;
}
.pulse-score-pill__sep {
    font-size: 11px;
    opacity: 0.5;
}
.pulse-score-pill__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Hot (90+): success-green BG + subtle Glow, alle Texte success. */
.pulse-score-pill--hot {
    background: var(--status-success-bg);
    color: var(--color-success);
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.25);
}

/* Warm (70-89): brand-mid BG-Tint. */
.pulse-score-pill--warm {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-mid);
    border-color: rgba(79, 126, 219, 0.28);
}

/* Lauwarm (50-69): warning-amber BG-Tint. */
.pulse-score-pill--lauwarm {
    background: var(--status-warn-bg);
    color: var(--color-warning);
    border-color: rgba(245, 158, 11, 0.28);
}

/* Kalt (<50): neutral-grey BG, text-secondary. */
.pulse-score-pill--kalt {
    background: var(--input-bg);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

/* ============================================================
   Sweep 2d.5.10.C7.2 Teil B.8 / E.2 — Pulse-Score-Donut.
   SVG-Donut mit zentrierter Prozent-Zahl. Wird verwendet in
   Result-Card-Grid (small 80px) und Lead-Detail-Modal (large 200px).
   ============================================================ */
.pulse-score-donut {
    display: inline-block;
    vertical-align: middle;
    color: var(--color-brand-mid);  /* Default — Bucket-Klassen ueberschreiben */
}
.pulse-score-donut__track {
    /* opacity wird im SVG-Attribut gesetzt — currentColor bleibt */
}
.pulse-score-donut__fill {
    transition: stroke-dasharray 800ms ease-out;
}
.pulse-score-donut__text {
    fill: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.pulse-score-donut__percent {
    fill: var(--color-text-secondary);
    font-weight: 500;
}

/* Color-Buckets — currentColor steuert Track + Fill, Text bleibt
 * separat lesbar. */
.pulse-score-donut--hot {
    color: var(--color-success);
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.40));
}
.pulse-score-donut--hot .pulse-score-donut__text { fill: var(--color-success); }
.pulse-score-donut--warm     { color: var(--color-brand-mid); }
.pulse-score-donut--warm .pulse-score-donut__text { fill: var(--color-brand-mid); }
.pulse-score-donut--lauwarm  { color: var(--color-warning); }
.pulse-score-donut--lauwarm .pulse-score-donut__text { fill: var(--color-warning); }
.pulse-score-donut--kalt     { color: var(--color-text-tertiary); }
.pulse-score-donut--kalt .pulse-score-donut__text { fill: var(--color-text-tertiary); }
.pulse-score-donut--none .pulse-score-donut__text { fill: var(--color-text-tertiary); }

/* Initial-Fill-Animation 0→Score in 800ms. CSS-Klasse wird gesetzt,
 * der Browser interpoliert stroke-dasharray nach dem ersten Frame. */
.pulse-score-donut--animate .pulse-score-donut__fill {
    animation: pulse-score-donut-fill 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes pulse-score-donut-fill {
    from { stroke-dasharray: 0 999; }
    /* to = computed value bleibt erhalten (Animation laeuft auf den
       SVG-Wert hin, da CSS keinen final-Frame haelt) */
}

/* Empty-State innerhalb der Tabelle */
.pulse-scoring-table-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    background: var(--input-bg);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
}
.pulse-scoring-table-empty__icon {
    font-size: 36px;
    display: block;
    margin-bottom: var(--space-2);
    opacity: 0.6;
}
.pulse-scoring-table-empty__title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
}

/* Sweep 2d.5.10.C7.1 Teil B.3: Bulk-Bar refactored auf
 * Lead-Uebersicht-Goldstandard. Frueher: .pulse-scoring-bulk-bar als
 * eigener Container mit __inner-Wrapper, __group-Klassen und eigenem
 * Look. Jetzt: .pulse-bulk-bar + .scoring-bulk-bar als Modifier.
 * Layout, Glass-BG und Action-Stack kommen aus dem zentralen
 * .pulse-bulk-bar-Block — Co-Klasse nur fuer Modul-spezifische Tints. */
.scoring-bulk-bar .scoring-bulk-action-btn:hover svg {
    color: var(--color-brand-light, #7ab8f0);
}
/* Danger-Action (Loeschen) — Hover-Tint in Rot. */
.pulse-bulk-bar__action.pulse-bulk-bar__action--danger {
    color: rgba(255, 255, 255, 0.88);
}
.pulse-bulk-bar__action.pulse-bulk-bar__action--danger:hover {
    background: rgba(220, 38, 38, 0.18);
    color: #fff;
}
.pulse-bulk-bar__action.pulse-bulk-bar__action--danger:hover svg {
    color: #fda4af;
}
.pulse-bulk-bar__action[disabled],
.pulse-bulk-bar__action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ============================================================
   Sweep 2d.5.10.C6 — Confirm-Modal vor Scoring-Run
   Skills: refactoring-ui (3-Block-Layout mit klarer Hierarchie),
   ux-heuristics (H3 User Control mit ESC/Backdrop/Cancel, H5
   Error Prevention mit Budget-Check, H1 Visibility mit Cost-Live-
   Update)
   ============================================================ */
.pulse-confirm-modal__backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--modal-z-base);
    padding: var(--space-4);
}
/* Sweep 3.4a-fix: PulseConfirmModal nutzt pulse-glass-card als
   Wrapper — KEINE eigenen background/border/box-shadow-Overrides.
   Frueher (C6): solid var(--color-bg-card-solid) + Strong-Border
   ueberschrieb den Glass-Look komplett (Backdrop-Blur durch opaken
   Background unsichtbar). Jetzt: nur layout-spezifische Properties
   (max-width, overflow, border-radius), Optik kommt aus glass-card.
   Border-radius wird zu 16px aligned (pulse-glass-card-Standard). */
.pulse-confirm-modal {
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
}
.pulse-confirm-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    /* Subtile Trennlinie statt solider Tokens — passt zum
       Glass-Card-Schimmer. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pulse-confirm-modal__header h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}
.pulse-confirm-modal__close {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.pulse-confirm-modal__close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
}
.pulse-confirm-modal__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Sweep 3.4a-fix: Innere Bloecke (overview / preview / addons) nutzen
   den leichten Glass-Look (transparentes Weiss + heller Border) statt
   solidem var(--input-bg). Konsistent mit .pulse-glass-input. */
.pulse-confirm-modal__overview {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.pulse-confirm-modal__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}
.pulse-confirm-modal__row + .pulse-confirm-modal__row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pulse-confirm-modal__label {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    font-weight: var(--font-weight-medium);
}
.pulse-confirm-modal__row--budget b {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    margin-left: 6px;
}
.pulse-confirm-modal__row--ok b {
    background: var(--status-success-bg);
    color: var(--color-success);
}
.pulse-confirm-modal__row--tight b {
    background: var(--status-warn-bg);
    color: var(--color-warning);
}
.pulse-confirm-modal__row--block b {
    background: var(--status-error-bg);
    color: var(--color-danger);
}

.pulse-confirm-modal__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.pulse-confirm-modal__section-title {
    font-size: var(--label-font-size);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
}
.pulse-confirm-modal__slot-mount {
    margin-bottom: 4px;
}
.pulse-confirm-modal__preview {
    /* Sweep 3.4a-fix: leichter Glass-Look statt solid. */
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}
.pulse-confirm-modal__factors-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-xs);
}
.pulse-confirm-modal__factors-list li {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-secondary);
}
.pulse-confirm-modal__factor-weight {
    color: var(--color-brand-light);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold);
}
.pulse-confirm-modal__warning {
    color: var(--color-warning);
    font-size: var(--text-xs);
}
.pulse-confirm-modal__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    margin-top: 6px;
}
.pulse-confirm-modal__hints {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--line-height-relaxed);
}
.pulse-confirm-modal__hints li { margin-bottom: 3px; }
.pulse-confirm-modal__error {
    padding: 10px 14px;
    background: var(--status-error-bg);
    border-radius: var(--radius-md);
    color: var(--status-error-text);
    font-size: var(--text-sm);
}
.pulse-confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    /* Subtile Trennlinie passt zum Glass-Card-Schimmer. */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Sweep 3.4a — Generische PulseConfirmModal-Slots.
   Erweitert das C6-Pattern um Addons-Block (Toggle-Liste mit
   optionalen Credit-Kosten) und AsyncSlot (Loading-State fuer
   nachgeladene Inhalte z.B. Worst-Case-Block). */
.pulse-confirm-modal__budget-num {
    font-variant-numeric: tabular-nums;
}
.pulse-confirm-modal__addons {
    /* Sweep 3.4a-fix: leichter Glass-Look statt solid var(--input-bg). */
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
}
.pulse-confirm-modal__addon-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}
.pulse-confirm-modal__addon-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.pulse-confirm-modal__addon-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.pulse-confirm-modal__addon-label {
    font-weight: var(--font-weight-medium);
}
.pulse-confirm-modal__addon-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--line-height-snug);
}
.pulse-confirm-modal__addon-credits {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pulse-confirm-modal__async-slot {
    /* Container fuer asynchron nachgeladene Inhalte (z.B. Import-
       Worst-Case-Block). Bringt KEINEN eigenen Background mit —
       das Loaded-Element bringt seinen eigenen Stil mit. */
}
.pulse-confirm-modal__async-loading {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

/* ============================================================
   Sweep 2d.5.10.C7 — Live-Run-Card + Notifications
   Skills: refactoring-ui (4 visuelle States mit klarer Hierarchie),
   ux-heuristics (H1 Visibility live, H3 Minimieren statt Schliessen,
   H6 Recognition mit Score-Filter)
   ============================================================ */
/* Sweep 2d.5.10.C7.1 Teil B.6: Live-Run-Card auf .verify-live-card-
 * Pattern umgebaut. Frueher: eigenes .pulse-live-run-Layout (~230
 * Zeilen). Jetzt: .verify-live-card + .scoring-live-card als Co-Klasse;
 * Modul-spezifische Sub-Blocks (Distribution / Error-Hints / Floater)
 * gestylt mit .scoring-live-*-Klassen. Layout, Glass-BG, Spinner,
 * Counter-Pills, Progress-Track kommen aus dem zentralen .verify-live-
 * card-Block. */
.scoring-live-card {
    margin: var(--space-4) 0;
}
.scoring-live-card[hidden] { display: none; }

/* Minimize-Button im Verify-Toggle-Stil. */
.scoring-live-minimize svg { width: 14px; height: 14px; }

/* Success-State: Score-Distribution-Block in der detail-Sektion. */
.scoring-live-distribution {
    margin: var(--space-2) 0;
    padding: var(--space-3);
    background: var(--input-bg);
    border-radius: var(--radius-md);
}
.scoring-live-dist-title {
    font-size: var(--label-font-size);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    font-weight: var(--label-font-weight);
    color: var(--label-color);
    margin-bottom: 8px;
}
.scoring-live-dist-row {
    display: grid;
    grid-template-columns: 140px 1fr 40px;
    align-items: center;
    gap: var(--space-2);
    padding: 3px 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.scoring-live-dist-bar-wrap {
    background: var(--color-border-strong);
    height: 10px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.scoring-live-dist-bar { height: 100%; display: block; }
.scoring-live-dist-bar--hot     { background: var(--color-success); }
.scoring-live-dist-bar--warm    { background: var(--color-brand-mid); }
.scoring-live-dist-bar--lauwarm { background: var(--color-warning); }
.scoring-live-dist-bar--kalt    { background: var(--color-text-muted); }
.scoring-live-dist-count {
    text-align: right;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Error-State: Hilfe-Bereich unterhalb der Error-Headline. */
/* ============================================================
   Sweep 2d.5.10.C7.2 Teil B.8 — Result-Card-Grid nach Run.
   Pro Card: Donut (small) + Firma/Ort + Pill + Reasoning truncated
   auf 2 Zeilen. Grid responsive: 3 Spalten Desktop / 2 Tablet / 1
   Mobile. Klick öffnet Lead-Detail-Modal.
   ============================================================ */
.scoring-result-card-grid {
    margin-top: var(--space-3);
}
.scoring-result-card-grid__title {
    font-size: var(--label-font-size, 11px);
    letter-spacing: var(--label-letter-spacing, 0.06em);
    text-transform: var(--label-text-transform, uppercase);
    font-weight: var(--label-font-weight, 600);
    color: var(--label-color, var(--color-text-secondary));
    margin-bottom: var(--space-2);
}
.scoring-result-card-grid__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}
@media (max-width: 960px) {
    .scoring-result-card-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .scoring-result-card-grid__list { grid-template-columns: 1fr; }
}
.scoring-result-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-glass-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(255,255,255,0.16));
    border-radius: var(--radius-lg, 12px);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.scoring-result-card:hover {
    background: rgba(79, 126, 219, 0.10);
    border-color: var(--color-brand-mid, #4f7edb);
    transform: translateY(-1px);
}
.scoring-result-card__donut {
    flex-shrink: 0;
}
.scoring-result-card__body {
    flex: 1 1 auto;
    min-width: 0;
}
.scoring-result-card__firma {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--text-sm, 14px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scoring-result-card__ort {
    color: var(--color-text-secondary);
    font-size: var(--text-xs, 12px);
    margin-top: 2px;
}
.scoring-result-card__pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 6px;
    margin-bottom: 6px;
    border: 1px solid transparent;
}
.scoring-result-card__pill--hot {
    background: var(--status-success-bg);
    color: var(--color-success);
    border-color: rgba(34, 197, 94, 0.40);
}
.scoring-result-card__pill--warm {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-mid);
    border-color: rgba(79, 126, 219, 0.28);
}
.scoring-result-card__pill--lauwarm {
    background: var(--status-warn-bg);
    color: var(--color-warning);
    border-color: rgba(245, 158, 11, 0.28);
}
.scoring-result-card__pill--kalt {
    background: var(--input-bg);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.scoring-result-card__reasoning {
    color: var(--color-text-secondary);
    font-size: var(--text-xs, 12px);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   Sweep 2d.5.10.C7.2 Teil E — Lead-Detail Pulse-KI-Score-Sektion.
   Donut (large) + Pill + Reasoning + Faktor-Cards mit 5-Stern +
   Scoring-Log expandable + Re-Score-Button.
   ============================================================ */
.pulse-lead-detail-score {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    transition: opacity 220ms ease;
}

/* Sweep 2d.5.10.C7.5 Teil B.3: Inline-Rescoring-State. Wenn der
 * Re-Score-Run laeuft, wird die ganze Score-Sektion leicht ausgeblendet
 * + ein Spinner-Status-Banner unter dem Header eingeblendet. Donut +
 * Faktor-Cards bleiben sichtbar (User soll vergleichen koennen), nur
 * gedaempft auf opacity 0.55. */
.pulse-lead-detail-score.is-rescoring .pulse-lead-detail-score__hero,
.pulse-lead-detail-score.is-rescoring .pulse-factor-card,
.pulse-lead-detail-score.is-rescoring .pulse-scoring-log {
    opacity: 0.55;
    pointer-events: none;
}
.pulse-lead-detail-score__rescore-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: rgba(79, 126, 219, 0.10);
    border: 1px solid rgba(79, 126, 219, 0.28);
    border-radius: var(--radius-md);
    color: var(--color-brand-mid, #4f7edb);
    font-size: var(--text-sm, 14px);
    font-weight: 500;
}
.pulse-lead-detail-score__rescore-spinner {
    animation: pulse-lead-detail-score-spin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes pulse-lead-detail-score-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.pulse-lead-detail-score__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.pulse-lead-detail-score__icon {
    color: var(--color-brand-light);
    flex-shrink: 0;
}
.pulse-lead-detail-score__title {
    margin: 0;
    flex: 1;
    font-size: var(--text-lg, 18px);
    font-weight: 600;
    color: var(--color-text-primary);
}
.pulse-lead-detail-score__hero {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    margin-bottom: var(--space-5);
}
.pulse-lead-detail-score__donut {
    flex-shrink: 0;
}
.pulse-lead-detail-score__body {
    flex: 1 1 auto;
    min-width: 0;
}
.pulse-lead-detail-score__pill {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm, 14px);
    font-weight: 700;
    border: 1px solid transparent;
    margin-bottom: var(--space-3);
}
.pulse-lead-detail-score__pill--hot {
    background: var(--status-success-bg);
    color: var(--color-success);
    border-color: rgba(34, 197, 94, 0.40);
}
.pulse-lead-detail-score__pill--warm {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-mid);
    border-color: rgba(79, 126, 219, 0.28);
}
.pulse-lead-detail-score__pill--lauwarm {
    background: var(--status-warn-bg);
    color: var(--color-warning);
    border-color: rgba(245, 158, 11, 0.28);
}
.pulse-lead-detail-score__pill--kalt {
    background: var(--input-bg);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.pulse-lead-detail-score__reasoning {
    color: var(--color-text-primary);
    font-size: var(--text-sm, 14px);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pulse-lead-detail-score__reasoning.is-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.pulse-lead-detail-score__more-btn {
    display: inline-block;
    margin-top: var(--space-2);
    background: none;
    border: 0;
    color: var(--color-brand-mid);
    cursor: pointer;
    font-size: var(--text-xs, 12px);
    padding: 0;
    text-decoration: underline;
}

.pulse-lead-detail-score__factors-title {
    font-size: var(--label-font-size, 11px);
    letter-spacing: var(--label-letter-spacing, 0.06em);
    text-transform: var(--label-text-transform, uppercase);
    font-weight: var(--label-font-weight, 600);
    color: var(--label-color, var(--color-text-secondary));
    margin-bottom: var(--space-3);
}
.pulse-lead-detail-score__factors {
    margin-bottom: var(--space-4);
}
.pulse-lead-detail-score__no-factors {
    padding: var(--space-3);
    text-align: center;
    background: var(--input-bg);
    border-radius: var(--radius-md);
}

/* Empty-State */
.pulse-lead-detail-score--empty .pulse-lead-detail-score__empty-body {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
}
.pulse-lead-detail-score--empty .pulse-lead-detail-score__empty-body p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm, 14px);
}

/* Faktor-Cards (.pulse-factor-card) */
.pulse-factor-card {
    padding: var(--space-3);
    background: var(--color-glass-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(255,255,255,0.16));
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}
.pulse-factor-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.pulse-factor-card__name {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--text-sm, 14px);
}
.pulse-factor-card__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.pulse-factor-card__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--color-text-tertiary);
}
.pulse-factor-card__star.is-active {
    color: var(--color-brand-mid);
}
.pulse-factor-card__score {
    color: var(--color-text-secondary);
    font-size: var(--text-xs, 12px);
    font-variant-numeric: tabular-nums;
}
.pulse-factor-card__body {
    color: var(--color-text-secondary);
    font-size: var(--text-xs, 12px);
    line-height: 1.5;
}

/* Scoring-Log expandable (.pulse-scoring-log) */
.pulse-scoring-log {
    margin-top: var(--space-3);
}
.pulse-scoring-log summary {
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--text-sm, 14px);
    padding: var(--space-2) 0;
    user-select: none;
}
.pulse-scoring-log summary:hover {
    color: var(--color-text-primary);
}
.pulse-scoring-log__list {
    list-style: none;
    padding: var(--space-2) 0;
    margin: 0;
}
.pulse-scoring-log__row {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(90px, auto) minmax(80px, auto) minmax(70px, auto) 1fr;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-xs, 12px);
    color: var(--color-text-secondary);
    align-items: center;
}
.pulse-scoring-log__row:last-child { border-bottom: 0; }
.pulse-scoring-log__ts { font-variant-numeric: tabular-nums; }
.pulse-scoring-log__pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pulse-scoring-log__pill--hot     { background: var(--status-success-bg); color: var(--color-success); }
.pulse-scoring-log__pill--warm    { background: rgba(79, 126, 219, 0.18); color: var(--color-brand-mid); }
.pulse-scoring-log__pill--lauwarm { background: var(--status-warn-bg); color: var(--color-warning); }
.pulse-scoring-log__pill--kalt    { background: var(--input-bg); color: var(--color-text-secondary); }
.pulse-scoring-log__model { font-size: 10px; }

.scoring-live-error-hints {
    background: var(--input-bg);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin: var(--space-2) 0;
}
.scoring-live-error-hints-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 6px;
    font-size: var(--text-sm);
}
.scoring-live-error-hints ul {
    margin: 0;
    padding-left: 18px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Action-Buttons-Reihe in success/error detail. */
.scoring-live-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Minimized-Floater (kompakte Pill rechts unten). */
.scoring-live-floater {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-brand-light);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md), var(--brand-glow-soft);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: var(--text-sm);
}
.scoring-live-floater__spinner {
    color: var(--color-brand-light);
    animation: scoring-live-spin 800ms linear infinite;
}
.scoring-live-floater__count {
    background: var(--color-brand-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
@keyframes scoring-live-spin {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* Log im verify-style — kommt aus zentralem .verify-live-log
 * (monospace, dark-bg). Modul muss nichts ergaenzen, ausser dass
 * <pre> die newlines beibehaelt. */
.scoring-live-card .verify-live-log {
    white-space: pre;
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
    font-size: var(--text-xs);
    line-height: 1.55;
    margin: 0;
}

/* Top-Bar-Notifications-Dropdown */
.topbar-notification-badge[hidden] { display: none; }
.topbar-notifications:not([disabled]) .topbar-notification-badge:not([hidden]) {
    background: var(--color-danger);
    color: #fff;
    font-weight: var(--font-weight-bold);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    min-width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Sweep 2.8 Etappe A: Notifications-Panel (notifications-panel.js).
   Ersetzt das alte .pulse-topbar-notif-*-Mini-Dropdown. Eigenstaendige
   Komponente: Header + Filter-Tabs + Liste mit Avatar+Severity+Body. */
.pulse-notif-panel {
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: 540px;
    background: var(--color-bg-card-solid);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 9999;
}
.pulse-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.pulse-notif-title {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}
.pulse-notif-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.pulse-notif-header-actions .btn-link-muted {
    background: none;
    border: 0;
    padding: 4px 6px;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pulse-notif-header-actions .btn-link-muted:hover {
    background: var(--input-bg);
    color: var(--color-text-primary);
}
.pulse-notif-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle, transparent);
}
.pulse-notif-tab {
    background: none;
    border: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.pulse-notif-tab:hover { background: var(--input-bg); color: var(--color-text-primary); }
.pulse-notif-tab.is-active {
    background: var(--color-brand-soft, rgba(122, 184, 240, 0.16));
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}
.pulse-notif-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--color-danger);
    color: #fff;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
}
.pulse-notif-body {
    overflow-y: auto;
    flex: 1 1 auto;
}
.pulse-notif-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}
.pulse-notif-empty svg { opacity: 0.4; margin-bottom: var(--space-2); }
.pulse-notif-empty p { margin: 0; font-size: var(--text-sm); }
.pulse-notif-loading, .pulse-notif-error {
    padding: var(--space-4); text-align: center; font-size: var(--text-sm);
}
.pulse-notif-error { color: var(--color-danger); }
.pulse-notif-list { list-style: none; margin: 0; padding: 0; }
.pulse-notif-item {
    position: relative;
    display: grid;
    grid-template-columns: 6px 32px 1fr auto;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}
.pulse-notif-item:hover { background: var(--input-bg); }
.pulse-notif-item.is-unread { background: rgba(122, 184, 240, 0.06); }
.pulse-notif-item.is-read { opacity: 0.78; }
.pulse-notif-item-sev {
    width: 4px;
    align-self: stretch;
    border-radius: 0 2px 2px 0;
    margin-left: 0;
    background: var(--color-brand-mid);
}
.pulse-notif-item-sev[data-severity="success"] { background: var(--color-success); }
.pulse-notif-item-sev[data-severity="warning"] { background: var(--color-warning); }
.pulse-notif-item-sev[data-severity="error"] { background: var(--color-danger); }
.pulse-notif-item-sev[data-severity="info"] { background: var(--color-brand-mid); }
.pulse-notif-item-avatar { display: inline-flex; align-items: flex-start; padding-top: 2px; }
.pulse-notif-item-content { min-width: 0; }
.pulse-notif-item-title {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
}
.pulse-notif-item.is-unread .pulse-notif-item-title {
    font-weight: var(--font-weight-semibold);
}
.pulse-notif-item-body {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.45;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pulse-notif-item-time {
    color: var(--color-text-muted);
    font-size: 11px;
    margin-top: 4px;
}
.pulse-notif-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.pulse-notif-item:hover .pulse-notif-item-actions { opacity: 1; }
.pulse-notif-item-menu-btn {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pulse-notif-item-menu-btn:hover {
    background: var(--input-bg);
    color: var(--color-text-primary);
}

/* Sweep 2.8 Etappe A: Reusable User-Avatar (user-avatar.js).
   Wird in Notifications-Panel + spaeter Activity-Timeline genutzt.
   Hue-Palette spiegelt avatarHueFor() aus app.js. */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: var(--font-weight-semibold);
    color: #fff;
    background: var(--color-brand-mid);
    overflow: hidden;
    flex-shrink: 0;
    line-height: 1;
}
.user-avatar--image img,
.user-avatar.has-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.user-avatar--initial[data-hue="0"] { background: #7AB8F0; }
.user-avatar--initial[data-hue="1"] { background: #F0A07A; }
.user-avatar--initial[data-hue="2"] { background: #7AF0A8; }
.user-avatar--initial[data-hue="3"] { background: #F07AC9; }
.user-avatar--initial[data-hue="4"] { background: #C97AF0; }
.user-avatar--initial[data-hue="5"] { background: #F0E07A; color: #2a2a2a; }
.user-avatar--initial[data-hue="6"] { background: #7AF0E0; color: #2a2a2a; }
.user-avatar--initial[data-hue="7"] { background: #A87AF0; }
.user-avatar--system {
    background: linear-gradient(135deg, var(--color-brand-mid), var(--color-brand-deep, #4A88C9));
    color: #fff;
}

/* DnD-Indikator (Sweep 2.8.a Etappe C).
   Mike-Findings: alter oranger Pseudo-Kreis sah aus wie eine
   Notification. Neuer Indikator macht klar "Glocke ist AUS":
   1) Glocken-Icon wird durch bell-off-Icon (durchgestrichen) ersetzt,
   2) kleines Mond-Symbol oben rechts statt Notification-Counter,
   3) Counter-Badge bleibt vollstaendig ausgeblendet.
*/
.topbar-notifications { position: relative; }
.topbar-icon-bell { display: inline-block; }
.topbar-icon-bell-off { display: none; }
.topbar-notifications[data-dnd-active="true"] .topbar-icon-bell {
    display: none;
}
.topbar-notifications[data-dnd-active="true"] .topbar-icon-bell-off {
    display: inline-block;
    color: var(--color-text-muted);
}
.topbar-dnd-moon {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-bg-card-solid);
    color: #d0b85a;  /* gedaempftes silber-gold */
    pointer-events: none;
}
.topbar-notifications[data-dnd-active="true"] .topbar-dnd-moon {
    display: inline-flex;
}

/* Notifications-Settings-Tab (notification-settings.js). */
.notif-settings-card { margin-bottom: var(--space-3); }
.notif-dnd-row {
    display: block;
    margin: var(--space-3) 0;
}
.notif-dnd-time-row {
    display: grid;
    grid-template-columns: auto 110px auto 110px;
    gap: var(--space-2);
    align-items: center;
    margin: var(--space-3) 0;
}
.notif-divider {
    border: 0;
    border-top: 1px dashed var(--color-border);
    margin: var(--space-4) 0;
}
.notif-weekday-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.notif-weekday-btn {
    min-width: 38px;
    padding: 6px 8px;
    background: var(--input-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
}
.notif-weekday-btn.is-active {
    background: var(--color-brand-soft, rgba(122, 184, 240, 0.16));
    border-color: var(--color-brand-mid);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}
.notif-event-group { margin-top: var(--space-4); }
.notif-event-group:first-of-type { margin-top: var(--space-2); }
.notif-event-group-title {
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}
.notif-event-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
}
.notif-event-row:last-child { border-bottom: 0; }
.notif-event-label {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}
.notif-event-desc {
    font-size: var(--text-xs);
    line-height: 1.4;
    margin-top: 2px;
}
.notif-event-toggles {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    white-space: nowrap;
}
.notif-event-toggles .switch-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
}
.notif-email-toggle-label { opacity: 0.6; }
#notifSettingsSaveBtn.is-dirty {
    box-shadow: 0 0 0 2px var(--color-warning);
}

/* ============================================================
   Sweep 2d.5.10.C8 — Pulse-Tabs Komponente
   Wiederverwendbare Tab-Navigation mit Counter-Badges +
   optionalem Subtitle + ARIA tablist. Aktuell genutzt im
   Scoring-Modul (4 Tabs); soll Pflicht-Pattern fuer Module mit
   mehrdimensionalen Subviews werden.
   ============================================================ */
/* Sweep 2d.5.10.C8.1 Teil A.2: Goldstandard nach Import-Style.
   Spacing/Padding/Active-Border identisch zu .tabs.app-tabs damit
   alle Module visuell identisch wirken (Mike-Mandat Option C). */
.pulse-tabs {
    display: flex;
    gap: 4px;
    margin: 8px 0 16px;
    border-bottom: 1px solid var(--slate-200, var(--color-border));
    overflow-x: auto;
    flex-wrap: nowrap;
}
/* Sweep 2d.5.10.C8.2 Teil A.1: Active-Tab-Color theme-aware.
   Vorher var(--slate-900) hardcoded → #0f172a (sehr dunkles Slate)
   auf dunklem BG unlesbar. Lösung: var(--color-text-...) das im
   Dark-Theme zu weiß auflöst, im Light-Theme zu schwarz.
   Folgewirkung Bug A.2: "Leads bewerten"-Label war im DOM, nur
   unsichtbar (gleiche Color wie BG) — fixt sich mit. */
.pulse-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 140ms ease, border-color 140ms ease;
}
.pulse-tabs__tab:hover {
    color: var(--color-text-primary);
}
.pulse-tabs__tab.is-active {
    color: var(--color-text-primary);
    font-weight: 600;
    /* Sweep 2d.5.10.C8.3 Teil D.1: var(--primary) ist #2a34b0 (Indigo/
       Lila). Mike's gewuenschtes Brand-Blau ist --color-brand-mid
       (#4f7edb). Active-Underline nutzt jetzt Brand-Blau. */
    border-bottom-color: var(--color-brand-mid, #4f7edb);
}
.pulse-tabs__tab:focus-visible {
    outline: 2px solid var(--color-brand-mid, #4f7edb);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}
.pulse-tabs__tab-label {
    /* Reiner Label-Text — Wrapper damit Counter sich klar absetzt. */
}
/* Sweep 2d.5.10.C8.1 Teil A.2: Counter-Badge dezent (Mike-Spec:
   Counter optional, stilistisch im Hintergrund — nicht im Vordergrund). */
.pulse-tabs__tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    /* Sweep 2d.5.10.C8.2 A.1: theme-aware Badge-Background.
       Vorher slate-100/slate-200 (Light-Tokens) — im Dark-Theme
       falsch invertiert. Jetzt halbtransparenter color-glass-bg. */
    background: rgba(127, 127, 127, 0.16);
    border-radius: var(--radius-pill, 999px);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.pulse-tabs__tab.is-active .pulse-tabs__tab-count {
    /* Sweep 2d.5.10.C8.3 D.1: Active-Counter-Pille in Brand-Blau-Tint
       statt neutral-Grau — verstärkt den Active-State visuell. */
    background: rgba(79, 126, 219, 0.20);
    color: var(--color-brand-mid, #4f7edb);
}
[data-theme="dark"] .pulse-tabs__tab.is-active .pulse-tabs__tab-count {
    /* Im Dark-Mode: Brand-Light fuer besseren Kontrast auf Brand-Tint. */
    color: var(--color-brand-light, #7ab8f0);
}
.pulse-tabs__tab-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-tertiary, rgba(255,255,255,0.55));
    text-transform: none;
    letter-spacing: 0;
}
.pulse-tabs__tab.is-active .pulse-tabs__tab-subtitle {
    color: var(--color-brand-light, #7ab8f0);
}

/* Tab-Panel-Container: nur das aktive Panel sichtbar. Die HTML-
 * Markup-Variante mit `hidden` greift im Default — diese Regel ist
 * Defense-in-depth gegen JS-Race-Conditions. */
.pulse-tab-panel[hidden] {
    display: none !important;
}
.pulse-tab-panel {
    /* Default: sichtbar mit fade-in. */
    animation: pulse-tab-panel-fade 180ms ease;
}
@keyframes pulse-tab-panel-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Sweep 2d.5.10.C8 Teil D — Tab 3 "Re-Scoring" Hinweis-Card oben. */
.rescoring-explainer {
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: var(--text-sm, 14px);
    line-height: 1.55;
    color: var(--color-text-secondary);
}
.rescoring-explainer strong {
    color: var(--color-text-primary);
    margin-right: 4px;
}
.rescoring-toolbar {
    gap: 12px;
}
.rescoring-toolbar select.pulse-glass-select {
    min-width: 180px;
}

/* Sweep 2d.5.10.C8.1 Teil C.4: Backdrop hinter dem Verlauf-Drawer.
   Fade-In/Out + Click schliesst den Drawer (analog Confirm-Modal). */
.verlauf-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 8999;
    opacity: 1;
    transition: opacity 240ms ease;
}
.verlauf-drawer-backdrop[hidden] {
    display: block !important;
    opacity: 0;
    pointer-events: none;
}

/* Sweep 2d.5.10.C8 Teil E — Tab 4 "Verlauf" Drawer (slide-in von rechts). */
.verlauf-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(640px, 90vw);
    background: var(--color-bg-elevated, #1a1f2e);
    border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
    z-index: 9000;
    overflow-y: auto;
    padding: 24px;
    transform: translateX(100%);
    transition: transform 240ms ease;
}
.verlauf-drawer:not([hidden]) {
    transform: translateX(0);
}
.verlauf-drawer[hidden] {
    display: block !important;     /* damit transform-Animation laeuft */
    pointer-events: none;
}
.verlauf-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}
.verlauf-drawer__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.verlauf-drawer__close {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.verlauf-drawer__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
}
.verlauf-drawer__meta {
    font-size: var(--text-sm, 13px);
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}
.verlauf-distribution {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.verlauf-distribution__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
}
.verlauf-distribution__pill--hot {
    background: var(--status-success-bg);
    color: var(--color-success);
}
.verlauf-distribution__pill--warm {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-mid);
}
.verlauf-distribution__pill--lauwarm {
    background: var(--status-warn-bg);
    color: var(--color-warning);
}
.verlauf-distribution__pill--kalt {
    background: var(--input-bg);
    color: var(--color-text-secondary);
}
.verlauf-toolbar {
    gap: 12px;
}
.verlauf-toolbar select.pulse-glass-select {
    min-width: 180px;
}

/* Sweep 2d.5.10.C8 Teil E.2 — Verlauf-Tabelle + Status-Badges. */
.verlauf-table {
    width: 100%;
}
.verlauf-row:hover {
    background: rgba(79, 126, 219, 0.08);
}
.verlauf-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}
.verlauf-status--ok {
    background: var(--status-success-bg);
    color: var(--color-success);
    border-color: rgba(34, 197, 94, 0.35);
}
.verlauf-status--warn {
    background: var(--status-warn-bg);
    color: var(--color-warning);
    border-color: rgba(245, 158, 11, 0.35);
}
.verlauf-status--err {
    background: var(--status-error-bg);
    color: var(--color-danger);
    border-color: rgba(239, 68, 68, 0.35);
}
.verlauf-status--run {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-mid);
    border-color: rgba(79, 126, 219, 0.32);
}
.verlauf-status--queue {
    background: var(--input-bg);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.verlauf-drawer__leads {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.verlauf-drawer__lead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--color-glass-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: background 140ms ease, border-color 140ms ease;
}
.verlauf-drawer__lead:hover {
    background: rgba(79, 126, 219, 0.10);
    border-color: var(--color-brand-mid);
}
.verlauf-drawer__lead-firma {
    flex: 1;
    color: var(--color-text-primary);
    font-weight: 500;
}

/* ============================================================
 * Sweep 2d.5.10.C9 — Lead-Detail-Page Premium-Components
 * ============================================================ */

/* C.1 Sticky-Header */
.pulse-glass-card--sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    transition: padding 0.18s ease, box-shadow 0.18s ease;
}
.lead-detail-header { padding: 18px 24px; margin-bottom: 16px; }
.lead-detail-header.is-compact { padding: 10px 24px; }
.lead-detail-header__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lead-detail-header__row--top { justify-content: space-between; }
.lead-detail-header__row--mid { margin-top: 8px; gap: 12px; }
.lead-detail-header__title { margin: 0; font-size: 22px; line-height: 1.2; color: var(--color-text-primary); }
.lead-detail-header.is-compact .lead-detail-header__title { font-size: 17px; }
.lead-detail-header__subtitle { font-size: 12px; margin-top: 2px; }
.lead-detail-header__score {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(79, 126, 219, 0.10);
    border: 1px solid rgba(79, 126, 219, 0.30);
    color: var(--color-brand-mid); font-weight: 600;
}
.lead-detail-header__score-value { font-size: 22px; line-height: 1; }
.lead-detail-header__score-bucket { font-size: 11px; letter-spacing: 0.08em; opacity: 0.8; }
.lead-detail-header__score--hot { background: rgba(220, 38, 38, 0.10); border-color: rgba(220, 38, 38, 0.30); color: #dc2626; }
.lead-detail-header__score--warm { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); color: #d97706; }
.lead-detail-header__score--lauwarm { background: rgba(96, 165, 250, 0.10); border-color: rgba(96, 165, 250, 0.30); color: var(--color-brand-mid); }
.lead-detail-header__score--kalt { background: rgba(148, 163, 184, 0.10); border-color: rgba(148, 163, 184, 0.30); color: #64748b; }
.lead-detail-header__score--empty { padding: 6px 12px; font-size: 12px; font-weight: 400; }
.lead-detail-header__pipeline-pill {
    display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(34, 197, 94, 0.10); border: 1px solid rgba(34, 197, 94, 0.30);
    color: #16a34a; font-size: 12px; font-weight: 600;
}
.lead-detail-header__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lead-detail-header.is-compact .lead-detail-header__actions { margin-top: 6px; }

/* C.2 Stage-Progress */
.stage-progress { display: inline-flex; align-items: center; gap: 0; }
.stage-progress__pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.stage-progress__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; font-size: 11px;
}
.stage-progress__pill--reached { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.stage-progress__pill--reached .stage-progress__num { background: #16a34a; color: #fff; }
.stage-progress__pill--active { background: rgba(79, 126, 219, 0.14); color: var(--color-brand-mid); }
.stage-progress__pill--active .stage-progress__num { background: var(--color-brand-mid); color: #fff; }
.stage-progress__pill--pending { background: rgba(148, 163, 184, 0.10); color: #64748b; }
.stage-progress__pill--pending .stage-progress__num { background: #cbd5e1; color: #64748b; }
.stage-progress__connector { display: inline-block; width: 28px; height: 2px; margin: 0 4px; }
.stage-progress__connector--reached { background: #16a34a; }
.stage-progress__connector--pending { background: #cbd5e1; }

/* C9.2 Etappe E — Activity-Timeline mit DURCHGEHENDER Linie.
 *
 * Aenderung gegen C9.1: Linie war pro .activity-timeline__items als
 * ::before -> wurde an Tag-Trennern unterbrochen. Jetzt: EINE Linie
 * auf .activity-timeline insgesamt, Day-Header sitzen darueber.
 * Event-Icons sind durchgehende Circles auf der Linie. */
.activity-timeline {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) 36px;
}
.activity-timeline--empty {
    padding: 0;
}
.activity-timeline--empty::before { display: none; }
.activity-timeline::before {
    content: "";
    position: absolute;
    left: 13px; top: 12px; bottom: 12px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--color-border-glass-strong) 0%,
        var(--color-border-glass) 100%
    );
    border-radius: 1px;
}
.activity-timeline--empty .activity-timeline__empty-text {
    padding: 32px 0;
    text-align: center;
    color: var(--color-text-tertiary);
}
.activity-timeline__day {
    /* KEIN margin-bottom mehr — Day-Header floaten ueber der durchgehenden Linie */
    margin-bottom: var(--space-3);
}
.activity-timeline__day-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-text-tertiary);
    padding: var(--space-2) 0 var(--space-2) 0;
    margin-bottom: var(--space-2);
    font-weight: 700;
    position: relative;
    /* Day-Header hat KEINE Underline-Trenner mehr (war Linien-Cut). */
}
.activity-timeline__items {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* Kein eigenes ::before mehr auf __items — Linie ist auf .activity-timeline */

.timeline-event {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}
.timeline-event__icon {
    position: absolute;
    left: -36px;
    top: var(--space-2);
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-bg-base);
    border: 2px solid var(--color-border-glass-strong);
    color: var(--color-text-tertiary);
    z-index: 1;
    flex-shrink: 0;
}
.timeline-event--success .timeline-event__icon {
    border-color: var(--color-success);
    color: var(--color-success);
    background: var(--color-success-soft);
}
.timeline-event--primary .timeline-event__icon {
    border-color: var(--color-brand-mid);
    color: var(--color-brand-mid);
    background: var(--color-brand-glow);
}
.timeline-event--warning .timeline-event__icon {
    border-color: var(--color-warning);
    color: var(--color-warning);
    background: var(--color-warning-soft);
}
.timeline-event--danger .timeline-event__icon {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--color-danger-soft);
}
.timeline-event__body {
    flex: 1; min-width: 0;
    padding-left: var(--space-2);
}
.timeline-event__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
}
.timeline-event__meta {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.timeline-event__sep { margin: 0 var(--space-1); }
/* Sweep 2.7.2.d Etappe A: Avatar links vom Actor-Namen in der Meta-Zeile */
.timeline-event__actor-avatar {
    display: inline-flex;
    margin-right: var(--space-1);
}
.timeline-event__actor-avatar .user-avatar {
    width: 18px !important; height: 18px !important; font-size: 9px !important;
}
.timeline-event__details {
    margin-top: var(--space-1);
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* C.4 Contact-List */
.contact-list__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.contact-list__title { margin: 0; font-size: 16px; }
.contact-primary-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: rgba(245, 158, 11, 0.14); color: #b45309;
    font-size: 11px; font-weight: 600;
}
/* Sweep 3.3.4c C1: <button class="contact-link"> braucht Button-Reset,
   sonst gewinnt der Browser-Default (grauer Block ueber E-Mail). */
.contact-link {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    color: var(--color-brand-mid);
    text-decoration: none;
}
.contact-link:hover { text-decoration: underline; }
.contact-link:focus-visible {
    outline: 2px solid var(--color-brand-mid);
    outline-offset: 2px;
    border-radius: 2px;
}
.contact-action-btn {
    background: none; border: 0; padding: 4px 6px; cursor: pointer;
    font-size: 14px; color: var(--color-text-muted, #64748b); border-radius: 4px;
}
.contact-action-btn:hover { background: rgba(79, 126, 219, 0.08); color: var(--color-brand-mid); }
.contact-action-btn--danger:hover { background: rgba(220, 38, 38, 0.08); color: #dc2626; }
.contact-action-disabled { padding: 4px 6px; }
.contact-actions-cell { white-space: nowrap; }

/* C.5 Contact-Edit-Modal */
/* C9.3 Etappe I: Modal-Backdrop dunkler + Blur damit Inhalt klar lesbar */
.contact-edit-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 12, 24, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
/* Modal-Card SOLID, nicht durchsichtig — sonst leuchtet die
 * Detail-Page durch und ist schwer lesbar (Mike-Befund C9.3). */
.contact-edit-modal {
    background: var(--color-bg-card-solid, #ffffff);
    border: 1px solid var(--color-border-strong);
    border-radius: 12px; padding: 24px; min-width: 480px;
    max-width: 90vw; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.contact-edit-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.contact-edit-modal__header h3 { margin: 0; font-size: 18px; }
.contact-edit-modal__close {
    background: none; border: 0; font-size: 22px; cursor: pointer;
    color: var(--color-text-muted, #64748b);
}
.contact-edit-modal__form .form-row { margin-bottom: 12px; }
.contact-edit-modal__form .form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-edit-modal__form .form-row--checkbox label { display: flex; align-items: center; gap: 8px; }
.contact-edit-modal__form .form-label {
    display: block; font-size: 12px; color: var(--color-text-muted, #64748b); margin-bottom: 4px;
}
.contact-edit-modal__form input,
.contact-edit-modal__form select,
.contact-edit-modal__form textarea { width: 100%; }
.contact-edit-modal__errors { margin: 8px 0 0; padding: 0; }
.contact-edit-modal__errors .form-error { color: #dc2626; font-size: 12px; padding: 4px 0; }
.contact-edit-modal__footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.form-row__hint { font-size: 11px; margin-top: 4px; }

/* C.7 Timeline-Filter-Bar */
.timeline-filter {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding: 8px 0;
}
.timeline-filter__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.timeline-filter__chip {
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 999px; padding: 4px 12px;
    font-size: 12px; cursor: pointer; transition: all 0.15s ease;
    color: var(--color-text-secondary, #475569);
}
.timeline-filter__chip:hover:not(.is-disabled):not(.is-active) {
    background: rgba(79, 126, 219, 0.10); border-color: var(--color-brand-mid);
}
.timeline-filter__chip.is-active {
    background: rgba(79, 126, 219, 0.18); border-color: var(--color-brand-mid);
    color: var(--color-brand-mid); font-weight: 600;
}
.timeline-filter__chip.is-disabled { opacity: 0.45; cursor: not-allowed; }
.timeline-filter__right { display: flex; align-items: center; gap: 12px; }
.timeline-filter__count { font-size: 12px; }

/* C.6 Email-Preview-Card */
.email-preview-card { padding: 14px 16px; margin-bottom: 12px; }
.email-preview-card__header { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px; }
.email-preview-card__sender { font-weight: 600; }
.email-preview-card__status {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: rgba(148, 163, 184, 0.14); color: #64748b;
}
.email-preview-card__subject { font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.email-preview-card__body { font-size: 12px; color: var(--color-text-secondary, #475569); margin: 0 0 8px; }
.email-preview-card__footer { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--color-text-muted, #64748b); }
.email-preview-card__actions { display: flex; gap: 6px; }

/* D Lead-Detail-Page Tab-Layout */
.lead-detail-page { max-width: 1280px; margin: 0 auto; padding: 16px 24px; }
.lead-detail-page__tabs { margin-top: 12px; margin-bottom: 16px; }
.lead-detail-page__layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
.lead-detail-page__main { min-width: 0; }
.lead-detail-page__sidebar { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1100px) {
    .lead-detail-page__layout { grid-template-columns: 1fr; }
    .lead-detail-page__sidebar { order: 2; }
}
.lead-detail-sidebar-card { padding: 14px 16px; }
.lead-detail-sidebar-card h4 {
    margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--color-text-muted, #64748b);
}
.lead-detail-stub {
    padding: 48px 24px; text-align: center; color: var(--color-text-muted, #64748b);
}
.lead-detail-stub__title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.lead-detail-tab-section { margin-bottom: 18px; }
.lead-detail-tab-section h3 { margin: 0 0 8px; font-size: 14px; }
.lead-detail-kv { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: 13px; }
.lead-detail-kv dt { color: var(--color-text-muted, #64748b); }
.lead-detail-kv dd { margin: 0; color: var(--color-text-primary); }

/* F — Multi-Kontakt-Badge im Lead-Pool */
.lead-contact-extra-badge {
    display: inline-flex; align-items: center; justify-content: center;
    height: 22px; min-width: 22px; padding: 0 6px; margin-left: 4px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    font-size: 11px; font-weight: 600;
    border: 1px solid rgba(245, 158, 11, 0.30);
    cursor: pointer; transition: all 0.12s ease;
}
.lead-contact-extra-badge:hover {
    background: rgba(245, 158, 11, 0.20);
    border-color: rgba(245, 158, 11, 0.50);
}

/* ============================================================
 * Sweep 2d.5.10.C9.1 — Lead-Detail-Page Premium-Redesign
 * Nutzt App-eigenes module-header-Pattern + BEM-Stil .lead-detail__*
 * (mit doppeltem Underscore) um den alten C9-Stilblock (.lead-detail-*)
 * konfliktfrei zu lassen.
 * ============================================================ */

/* B — Page-Skeleton */
.lead-detail-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-6) var(--space-8);
}
.lead-detail-page__module-header {
    /* Reuse von .module-header — KEINE umschliessende Card */
    margin-bottom: var(--space-6);
}
.lead-detail__title-block { min-width: 0; }
.lead-detail__tags {
    display: flex; gap: var(--space-2); flex-wrap: wrap;
    margin-top: var(--space-3);
}
.lead-detail__tag-pill {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--color-text-tertiary);
}
/* C9.2 Etappe B: Buttons stapeln nicht bei langem Firmennamen.
   nowrap + flex-shrink:0 + position:relative fuer das absolute
   More-Menu darunter. */
.lead-detail__header-actions {
    display: flex; gap: var(--space-2);
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
    position: relative;
}
.lead-detail__title-block { flex: 1 1 0; min-width: 0; }
/* C9.7 Etappe A: Header-Voll-Breite-Fix (dritter Versuch).
 * Audit ergab: app-weite .module-header-Blocks (Z. 401, 5828, 7157)
 * setzen `align-items: flex-start` und `display: flex` Row-Direction.
 * Mein vorheriger column-Override hatte keine Cross-Axis-Stretch-Regel
 * — Reihen-Container schrumpften auf Content-Breite, space-between
 * verteilte nur ueber intrinsische Breite statt 100%.
 *
 * Fix: !important-Hammer auf die kritischen Layout-Properties +
 * width:100% + align-items:stretch fuer den Container. Siehe
 * docs/sweep-c9-7-header-layout-audit.md.
 */
.lead-detail-page__module-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: var(--space-1);
}
.lead-detail-page__module-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between !important;
    width: 100% !important;
    gap: var(--space-4);
    min-width: 0;
}
.lead-detail-page__module-header-row--subtitle {
    /* C9.6 Etappe A: noch naeher an Headline (war --space-2 in C9.5) */
    margin-top: calc(-1 * var(--space-3));
}
.lead-detail-page__module-header-row--title {
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}
.lead-detail-page__module-header-row--title .lead-detail__title-block {
    flex: 1 1 auto;
    min-width: 0;
}
.lead-detail-page__module-header-row--subtitle {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.lead-detail-page__module-header-row--subtitle .module-subtitle {
    flex: 1 1 auto;
    min-width: 0;
}
.lead-detail__header-stage {
    /* C9.6 Etappe A: explizites margin-left:auto erzwingt Rechtsbuendigkeit,
     * unabhaengig vom Subtitle-Flex-Verhalten. space-between auf dem
     * Parent reicht nicht, wenn der Subtitle-Container leer ist (z.B. bei
     * Leads ohne Branche/Thema/Ort).
     */
    flex: 0 0 auto;
    margin-left: auto;
    display: flex; justify-content: flex-end;
    align-items: center;
}
@media (max-width: 1100px) {
    .lead-detail__header-stage { display: none; }
}
@media (max-width: 720px) {
    .lead-detail-page__module-header-row--title,
    .lead-detail-page__module-header-row--subtitle { flex-wrap: wrap; }
    .lead-detail__header-actions { flex-wrap: wrap; }
}

/* C9.3 Etappe C — stage-hprogress Component */
.stage-hprogress {
    display: inline-block;
    padding: var(--space-2) 0;
}
.stage-hprogress__points {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: flex-start;
    justify-content: center;
}
.stage-hprogress__point {
    display: flex; flex-direction: column;
    align-items: center; gap: var(--space-2);
    min-width: 100px;
    text-align: center;
    flex: 0 0 auto;
}
.stage-hprogress__segment {
    flex: 1 1 60px;
    height: 2px;
    background: var(--color-border);
    margin: 12px 0 0 0;
    border-radius: 1px;
    align-self: flex-start;
    transition: background var(--duration-fast) var(--ease-out);
    min-width: 40px;
}
.stage-hprogress__segment.is-filled {
    background: var(--color-brand-mid);
}
.stage-hprogress__dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.10);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    transition: all var(--duration-fast) var(--ease-out);
}
.stage-hprogress__label {
    color: var(--color-text-tertiary);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* States */
.stage-hprogress__point--reached .stage-hprogress__dot {
    background: var(--color-brand-soft, rgba(79, 126, 219, 0.16));
    border-color: var(--color-brand-mid);
    color: var(--color-brand-mid);
}
.stage-hprogress__point--reached .stage-hprogress__label {
    color: var(--color-text-primary);
}
.stage-hprogress__point--current .stage-hprogress__dot {
    background: var(--color-brand-soft, rgba(79, 126, 219, 0.16));
    border-color: var(--color-brand-mid);
    color: var(--color-brand-mid);
    box-shadow: 0 0 0 4px rgba(79, 126, 219, 0.18);
    animation: stageHProgressPulse 2s ease-in-out infinite;
}
.stage-hprogress__point--current .stage-hprogress__label {
    color: var(--color-text-primary);
    font-weight: 600;
}
@keyframes stageHProgressPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(79, 126, 219, 0.18); }
    50%      { box-shadow: 0 0 0 7px rgba(79, 126, 219, 0.06); }
}

/* 3-Punkte-Dropdown — App-Standard Glass-Style
 * C9.3 Etappe B.1: Default-State `hidden`-konform. Layout-Properties
 * gelten erst wenn das Menu sichtbar ist (via [hidden]-Attribut weg
 * ODER .is-open-Klasse). Vorher hat `display: flex` im Basis-Block das
 * HTML-`hidden`-Attribute uebersprungen — Menu blieb dauerhaft offen.
 */
.lead-detail__more-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 220px;
    background: var(--color-bg-card-solid);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    z-index: 100;
    flex-direction: column;
    animation: leadDetailMoreSlideIn 0.15s var(--ease-out);
}
.lead-detail__more-menu[hidden] { display: none !important; }
.lead-detail__more-menu:not([hidden]) { display: flex; }
@keyframes leadDetailMoreSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lead-detail__more-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: none; border: 0;
    color: var(--color-text-primary);
    font-size: 13px; text-align: left;
    cursor: pointer; border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-out);
}
.lead-detail__more-item:hover { background: var(--color-bg-hover); }
.lead-detail__more-item--danger { color: var(--status-error-icon); }
.lead-detail__more-item--danger:hover { background: var(--status-error-bg); }

.lead-detail__header-cluster {
    display: grid; grid-template-columns: auto auto;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    align-items: start;
}
.lead-detail__pipeline-bar {
    /* C9.6 Etappe D: weniger Abstand zur Vier-Card-Reihe darunter */
    margin-bottom: var(--space-4);
}
.lead-detail__tabs {
    margin-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lead-detail__body {
    display: grid;
    /* C9.3 Etappe J.4: Sidebar 320px → 380px */
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-6);
}
.lead-detail__main { min-width: 0; }
.lead-detail__sidebar {
    display: flex; flex-direction: column; gap: var(--space-4);
}
@media (max-width: 1100px) {
    .lead-detail__body { grid-template-columns: 1fr; }
    .lead-detail__sidebar { order: 2; }
    .lead-detail__header-cluster { grid-template-columns: 1fr; }
}

/* Placeholder-Hint (nur in Teil B sichtbar, wird in C-E ueberschrieben) */
.lead-detail__placeholder {
    padding: var(--space-3) var(--space-4);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md, 10px);
    background: rgba(255, 255, 255, 0.02);
    font-size: 12px;
    text-align: center;
}

/* C — Header-Cluster (Score + Vertical-Progress) */
.lead-detail__score-button {
    background: none; border: 0; padding: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-2);
    transition: transform 0.15s ease;
}
.lead-detail__score-button:hover { transform: translateY(-2px); }
.lead-detail__score-button:focus-visible {
    outline: 2px solid var(--color-brand-mid);
    outline-offset: 4px;
    border-radius: 50%;
}
.lead-detail__score-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}

/* C.4 — Vertical-Stage-Progress */
.stage-vprogress {
    display: grid;
    grid-template-columns: 28px auto;
    gap: var(--space-3);
    align-items: stretch;
    padding: var(--space-2);
    min-height: 200px;
}
.stage-vprogress__track {
    position: relative;
    width: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin: 4px auto;
}
.stage-vprogress__fill {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(
        to top,
        var(--color-brand-mid) 0%,
        var(--color-brand-light, var(--color-brand-mid)) 100%
    );
    border-radius: 3px;
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.stage-vprogress__points {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column-reverse;
    justify-content: space-between;
    min-height: 200px;
}
.stage-vprogress__point {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: 13px;
}
.stage-vprogress__dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.10);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}
.stage-vprogress__label {
    color: var(--color-text-tertiary);
    font-weight: 500;
}
/* States */
.stage-vprogress__point--reached .stage-vprogress__dot {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.55);
    color: #4ade80;
}
.stage-vprogress__point--reached .stage-vprogress__label {
    color: var(--color-text-primary);
}
.stage-vprogress__point--current .stage-vprogress__dot {
    background: rgba(79, 126, 219, 0.18);
    border-color: var(--color-brand-mid);
    color: var(--color-brand-mid);
    box-shadow: 0 0 0 4px rgba(79, 126, 219, 0.18);
    animation: stageVProgressPulse 2s ease-in-out infinite;
}
.stage-vprogress__point--current .stage-vprogress__label {
    color: var(--color-text-primary);
    font-weight: 600;
}
@keyframes stageVProgressPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(79, 126, 219, 0.18); }
    50%      { box-shadow: 0 0 0 7px rgba(79, 126, 219, 0.06); }
}

/* C — Header-Cluster Layout */
.lead-detail__header-cluster {
    /* Auf grossen Screens: Score links, Vertical-Progress rechts.
       Auf 1100px-Breakpoint: 1-Spalten via Media-Query oben. */
    align-items: center;
}

/* C9.2 Etappe C — Pipeline-Bar PREMIUM-Redesign
 * ------------------------------------------------------------
 * Mike-Mandat: "richtig auf die Kacke hauen". Premium-Look,
 * groessere Pills mit deutlichem aktiven State, klare State-
 * Hierarchie (reached/current/pending/inactive), CTA-Button als
 * eigener Element wenn nicht in Pipeline.
 */
/* C9.4 Etappe F: Pipeline-Bar OHNE Card-Wrapper.
 * Voller Breite, transparenter Hintergrund, mehr visuelles Gewicht
 * fuer die Pills selbst. Background/Border/Shadow entfernt.
 */
.pipeline-bar {
    display: flex; flex-direction: column;
    gap: var(--space-3);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.pipeline-bar__phases-row {
    display: flex; align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
/* C9.4 Etappe F: Polish ohne Card. Padding 0 weil voller Breite. */
.pipeline-bar--polish {
    padding: 0;
}
/* C9.5 Etappe E: Selector liegt IN der Bar links als Slot,
 * Main-Row gruppiert Phasen-Bar + CTA in einer Zeile. */
.pipeline-bar__main-row {
    display: flex; align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.pipeline-bar__main-row .pipeline-bar__phases-row {
    flex: 1 1 auto;
    min-width: 0;
}
.pipeline-bar__selector-slot {
    display: inline-flex; align-items: center;
    margin-right: var(--space-2);
    flex-shrink: 0;
}
/* Deprecated (C9.4): selector-row unter der Bar — nicht mehr genutzt */
.pipeline-bar__selector-row {
    display: none;
}
/* C9.5 Etappe E: CTA-compact rechts neben der Bar */
.pipeline-bar__add-cta--compact {
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: var(--brand-glow-soft) !important;
    margin-top: 0 !important;
    align-self: center !important;
}
/* C9.6 Etappe E: Big-CTA wenn Bar ausgeblendet ist (Hide-When-Empty) */
.pipeline-bar--cta-only {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 56px;
}
.pipeline-bar__add-cta--big {
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: var(--brand-glow-soft) !important;
    margin-top: 0 !important;
}
/* Sweep 2.7.1.d Etappe C: Pipeline-Bar Layout-Refactor.
   Phasen-Pills nehmen den Hauptraum, Selector + Aus-Pipeline-Btn
   stapeln sich vertikal rechts in einer kompakten Kontroll-Spalte. */
.pipeline-bar__controls-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1, 4px);
    flex-shrink: 0;
    min-width: 160px;
    margin-left: var(--space-4, 16px);
}
.pipeline-bar__controls-col .pipeline-bar__selector-slot {
    margin-right: 0;
    width: 100%;
}
/* Sweep 2.7.2 Etappe 0: Beide Buttons in der Kontroll-Spalte
   gleich gross (Height 36px, full width, gleiches Padding/Font).
   Mike-Findings 2.7.1.d: Selector und Aus-Pipeline wirkten
   ungleichmaessig — jetzt visuell als Stack erkennbar. */
.pipeline-bar__controls-col .pipeline-bar__selector,
.pipeline-bar__controls-col .pipeline-bar__remove-btn {
    height: 36px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 14px;
    font-size: 13px;
    line-height: 1;
    justify-content: center;
}
.pipeline-bar__controls-col .pipeline-bar__remove-btn {
    margin-left: 0;
}

/* C9.6 Etappe E: Remove-Button rechts in der Bar (Ghost, dezent) */
.pipeline-bar__remove-btn {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-tertiary);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: var(--space-3);
    transition: all var(--duration-fast) var(--ease-out);
}
.pipeline-bar__remove-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}
.pipeline-bar__selector {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 6px 12px;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-primary);
    font-size: 13px; font-weight: 500;
    cursor: default;
}
.pipeline-bar__selector--menu {
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.pipeline-bar__selector--menu:hover {
    background: var(--color-brand-glow);
    border-color: var(--color-brand-mid);
}
.pipeline-bar__selector-name {
    font-weight: 600;
}
.pipeline-bar__selector-hint {
    font-size: 11px; font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: var(--space-2);
}
.pipeline-bar__phase {
    display: inline-flex; align-items: center; gap: var(--space-2);
    /* C9.7 Etappe B: wieder kraftvoll (Mike-Befund Slim-Version zu dezent).
     * Padding + Font auf C9.5-Niveau. Bar-Container-Margin bleibt
     * --space-4 (C9.6) — Pills duerfen Gewicht haben, der Block-Umfang
     * nicht. */
    padding: 14px 22px;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: 15px; font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}
.pipeline-bar__phase:hover:not(:disabled) {
    background: rgba(79, 126, 219, 0.12);
    border-color: rgba(79, 126, 219, 0.35);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}
.pipeline-bar__phase:active:not(:disabled) { transform: scale(0.98); }
.pipeline-bar__phase:focus-visible {
    outline: 2px solid var(--color-brand-mid);
    outline-offset: 2px;
}
.pipeline-bar__phase:disabled {
    cursor: default;
}
.pipeline-bar__phase-state {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    flex-shrink: 0;
}
/* PREMIUM States */
.pipeline-bar__phase--reached {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-icon);
    font-weight: 600;
}
.pipeline-bar__phase--reached .pipeline-bar__phase-state {
    color: var(--status-success-icon);
}
.pipeline-bar__phase--current {
    background: var(--color-brand-glow);
    border-color: var(--color-brand-mid);
    color: var(--color-text-primary);
    /* C9.7 Etappe B: Weight 700 zurueck (Mike-Mandat kraftvoll). */
    font-weight: 700;
    /* C9.7 Etappe B: Glow wieder C9.5-Niveau (Spread 3px, Alpha 0.18). */
    box-shadow: 0 0 0 3px rgba(79, 126, 219, 0.18);
    animation: pipelineBarPulse 3s ease-in-out infinite;
}
.pipeline-bar__phase--current .pipeline-bar__phase-state {
    color: var(--color-brand-light);
}
@keyframes pipelineBarPulse {
    /* C9.7 Etappe B: Pulse-Spread zurueck auf C9.5-Niveau */
    0%, 100% { box-shadow: 0 0 0 3px rgba(79, 126, 219, 0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(79, 126, 219, 0.10); }
}
.pipeline-bar__phase--pending {
    color: var(--color-text-tertiary);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border);
}
.pipeline-bar__phase--inactive {
    color: var(--color-text-disabled);
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--color-border);
}
.pipeline-bar__arrow {
    display: inline-flex; align-items: center;
    color: var(--color-text-disabled);
    padding: 0 var(--space-1);
    flex-shrink: 0;
}
/* PREMIUM CTA wenn Lead nicht in Pipeline */
.pipeline-bar--empty .pipeline-bar__phases-row {
    opacity: 0.45;
}
.pipeline-bar__add-cta {
    display: inline-flex; align-items: center; gap: var(--space-2);
    /* C9.4 Etappe F: CTA prominenter */
    padding: 14px 28px;
    background: var(--color-brand-mid);
    color: #ffffff;
    border: 1px solid var(--color-brand-mid);
    border-radius: var(--radius-pill);
    font-size: 16px; font-weight: 700;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    box-shadow: var(--brand-glow-strong);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: var(--space-2);
}
.pipeline-bar__add-cta:hover {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    box-shadow: var(--brand-glow-strong);
    transform: translateY(-1px);
}
.pipeline-bar__add-cta:active { transform: scale(0.97); }
.pipeline-bar__add-cta:focus-visible {
    outline: 2px solid var(--color-brand-light);
    outline-offset: 3px;
}

/* C9.2 Etappe D — Vier-Card-Reihe (Stammdaten / Kontakte / Stufen / Bewertung) */
.lead-detail__cards-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 1200px) {
    .lead-detail__cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .lead-detail__cards-row { grid-template-columns: 1fr; }
}
.lead-detail-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 220px;
    backdrop-filter: blur(8px);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.lead-detail-card:hover { border-color: var(--color-border-glass-strong); }
.lead-detail-card__header {
    padding: var(--space-3) var(--space-4);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--color-text-tertiary);
    border-bottom: 1px solid var(--color-border-glass);
}
.lead-detail-card__body {
    padding: var(--space-4); flex: 1;
    display: flex; flex-direction: column; gap: var(--space-3);
}
.lead-detail-card__row {
    display: grid; grid-template-columns: 24px 1fr;
    gap: var(--space-3); align-items: start;
}
.lead-detail-card__row-icon {
    color: var(--color-text-tertiary);
    margin-top: 2px; display: inline-flex;
}
.lead-detail-card__row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lead-detail-card__row-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-tertiary); font-weight: 600;
}
.lead-detail-card__row-value {
    font-size: 14px; color: var(--color-text-primary);
    word-break: break-word; line-height: 1.4;
}
.lead-detail-card__link { color: var(--color-brand-light); text-decoration: none; }
.lead-detail-card__link:hover { text-decoration: underline; }
.lead-detail-card__contact {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-glass);
}
.lead-detail-card__contact:last-child { border-bottom: 0; }
/* C9.3 Etappe F — Hover-Tooltip mit Click-to-Contact */
.lead-detail-card__contact--interactive {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-out);
}
.lead-detail-card__contact--interactive:hover,
.lead-detail-card__contact--interactive:focus-within {
    background: var(--color-bg-hover);
}
.lead-detail-card__contact-tooltip {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 220px;
    z-index: 50;
    background: var(--color-bg-card-solid);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    display: flex; flex-direction: column;
    gap: var(--space-1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.lead-detail-card__contact--interactive:hover .lead-detail-card__contact-tooltip,
.lead-detail-card__contact--interactive:focus-within .lead-detail-card__contact-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.lead-detail-card__contact-tip-row {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 13px;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
}
.lead-detail-card__contact-tip-row:hover {
    background: var(--color-bg-hover);
    color: var(--color-brand-light);
}
.lead-detail-card__contact-tip-row.is-empty {
    color: var(--color-text-tertiary);
    cursor: default;
}
.lead-detail-card__contact-tip-row.is-empty:hover {
    background: transparent;
}
.lead-detail-card__contact-tip-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-tertiary);
}
.lead-detail-card__contact-tip-row:not(.is-empty) .lead-detail-card__contact-tip-icon {
    color: var(--color-brand-mid);
}
.lead-detail-card__contact-tip-value {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-detail-card__contact-name {
    font-size: 14px; font-weight: 600;
    color: var(--color-text-primary);
    display: flex; align-items: center; gap: var(--space-2);
}
.lead-detail-card__contact-position {
    font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px;
}
/* C9.4 Etappe D — user-Icon vor Kontakt-Namen */
.lead-detail-card__contact-row {
    display: flex; align-items: center;
    gap: var(--space-2);
}
.lead-detail-card__contact-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-bg-hover);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}
.lead-detail-card__contact-text { min-width: 0; flex: 1; }
.lead-detail-card__primary-badge {
    color: var(--color-accent-gold); font-size: 14px; line-height: 1;
}
.lead-detail-card__cta-link {
    background: none; border: 0;
    padding: var(--space-1) 0;
    color: var(--color-brand-light);
    font-size: 13px; font-weight: 500;
    text-align: left; cursor: pointer;
    align-self: flex-start;
    transition: color var(--duration-fast) var(--ease-out);
}
.lead-detail-card__cta-link:hover {
    color: var(--color-brand-mid); text-decoration: underline;
}
.lead-detail-card__empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; color: var(--color-text-tertiary);
    flex: 1;
}
.lead-detail-card__empty-text { margin: var(--space-2) 0 var(--space-3); font-size: 13px; }
.lead-detail-card__stage-body { align-items: center; justify-content: center; }
.lead-detail-card__bewertung-body {
    background: none; border: 0;
    padding: var(--space-4); flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--space-3);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out);
}
.lead-detail-card__bewertung-body:hover { transform: translateY(-2px); }
.lead-detail-card__bewertung-bucket {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 12px; border-radius: var(--radius-pill);
}
.lead-detail-card__bewertung-bucket--hot {
    background: var(--status-error-bg); color: var(--status-error-icon);
}
.lead-detail-card__bewertung-bucket--warm {
    background: var(--status-warn-bg); color: var(--status-warn-icon);
}
.lead-detail-card__bewertung-bucket--lauwarm {
    background: var(--color-info-soft); color: var(--color-info);
}
.lead-detail-card__bewertung-bucket--kalt {
    background: rgba(255, 255, 255, 0.06); color: var(--color-text-tertiary);
}

/* C9.4 Etappe C — Persoenlichkeits-Card KOMPAKT
 * --------------------------------------------------------------
 * Card matched Hoehe mit Stammdaten/Kontakte/Bewertung. Tags des
 * Primary-Kontakts werden als Read-only-Pills gezeigt; Edit lebt
 * im Modal (PulsePersonalityModal).
 */
.lead-detail-card--persoenlichkeit .lead-detail-card__body {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
}
.lead-detail-card__personality-body {
    display: flex; flex-direction: column;
    gap: var(--space-2);
}
.lead-detail-card__personality-sub {
    font-size: 12px;
    margin-bottom: var(--space-1);
}
/* C9.6 Etappe C — Selector-Row in der Card (>=2 Kontakte) */
.lead-detail-card__personality-selector-row {
    display: flex; align-items: center;
    margin-bottom: var(--space-2);
}
.lead-detail-card__personality-selector-trigger {
    font-size: 12px;
    padding: 4px 10px;
}
/* C9.5 Etappe D — Klickbarer Primary-Kontakt-Name */
.lead-detail-card__personality-sub--clickable {
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: var(--color-text-tertiary);
    transition: color var(--duration-fast) var(--ease-out);
}
.lead-detail-card__personality-sub--clickable:hover {
    color: var(--color-brand-light);
    text-decoration: underline;
}
.lead-detail-card__personality-sub--clickable:focus-visible {
    outline: 2px solid var(--color-brand-mid);
    outline-offset: 2px;
    border-radius: 4px;
}
.lead-detail-card__personality-pills {
    display: flex; flex-wrap: wrap;
    gap: 6px;
}
.lead-detail-card__personality-more {
    font-size: 12px;
    padding: 4px 6px;
    align-self: center;
}
.lead-detail-card__personality-edit {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-text-tertiary);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: all var(--duration-fast) var(--ease-out);
}
.lead-detail-card__personality-edit:hover {
    background: var(--color-bg-hover);
    color: var(--color-brand-mid);
}
.lead-detail-card__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2);
}
.lead-detail-card__header-actions {
    display: inline-flex; align-items: center;
}
.lead-detail-card__personality-group {
    display: flex; flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px dashed var(--color-border);
}
.lead-detail-card__personality-group:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}
.lead-detail-card__personality-pill {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}
.lead-detail-card__personality-pill:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}
.lead-detail-card__personality-pill.is-active {
    background: var(--color-brand-soft, rgba(79, 126, 219, 0.16));
    border-color: var(--color-brand-mid);
    color: var(--color-brand-light, var(--color-brand-mid));
    font-weight: 600;
}
/* C9.5 Etappe B — Gruppen-Farben pro Pill (positiv=success, schwierig=danger) */
.lead-detail-card__personality-pill--positiv {
    border-color: rgba(34, 197, 94, 0.30);
    color: rgba(34, 197, 94, 0.85);
}
.lead-detail-card__personality-pill--positiv.is-active {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-icon);
}
.lead-detail-card__personality-pill--neutral {
    /* neutral nutzt den Default-Look der Basis-Klasse */
}
.lead-detail-card__personality-pill--neutral.is-active {
    background: var(--color-brand-soft, rgba(79, 126, 219, 0.16));
    border-color: var(--color-brand-mid);
    color: var(--color-brand-light, var(--color-brand-mid));
}
.lead-detail-card__personality-pill--schwierig {
    border-color: rgba(239, 68, 68, 0.30);
    color: rgba(239, 68, 68, 0.85);
}
.lead-detail-card__personality-pill--schwierig.is-active {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    color: var(--status-error-icon);
}
/* Backwards-Compat: alte Group-Container-Selectoren bleiben fuer
 * Modal-Layout (group--positiv container). */
.lead-detail-card__personality-group--positiv .lead-detail-card__personality-pill.is-active {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-icon);
}
.lead-detail-card__personality-group--schwierig .lead-detail-card__personality-pill.is-active {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    color: var(--status-error-icon);
}
.lead-detail-card__personality-empty {
    font-size: 12px;
    padding-top: var(--space-2);
}

/* MP1 Etappe B — Stage-Wechsel-Modal */
.stage-change-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 12, 24, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.stage-change-modal {
    background: var(--color-bg-card-solid, #ffffff);
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    padding: var(--space-5);
    min-width: 480px; max-width: 90vw;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.stage-change-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4);
}
.stage-change-modal__header h3 { margin: 0; font-size: 18px; }
.stage-change-modal__close {
    background: none; border: 0; font-size: 22px; cursor: pointer;
    color: var(--color-text-tertiary);
}
.stage-change-modal__options {
    display: flex; flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.stage-change-modal__option {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    text-align: left;
    transition: all var(--duration-fast) var(--ease-out);
}
.stage-change-modal__option:hover {
    background: var(--color-brand-glow);
    border-color: var(--color-brand-mid);
}
.stage-change-modal__option.is-active {
    background: var(--color-brand-soft);
    border-color: var(--color-brand-mid);
}
.stage-change-modal__option.is-current {
    border-style: dashed;
}
.stage-change-modal__option-label { font-weight: 600; }
.stage-change-modal__option-hint {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}
.stage-change-modal__reason-label {
    display: flex; flex-direction: column;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
}
.stage-change-modal__reason {
    font-family: inherit;
    width: 100%;
    resize: vertical;
}
.stage-change-modal__footer {
    display: flex; justify-content: flex-end;
    gap: var(--space-2);
}

/* Sweep 2.7.2.a Etappe B — Automatisierung Test-Lauf Modal */
.automation-test-run-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 12, 24, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.automation-test-run-modal {
    background: var(--color-bg-card-solid, #ffffff);
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    padding: var(--space-5);
    min-width: 520px; max-width: 90vw; max-height: 86vh;
    overflow: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.automation-test-run-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4);
}
.automation-test-run-modal__header h3 { margin: 0; font-size: 18px; }
.automation-test-run-modal__close {
    background: none; border: 0; font-size: 22px; cursor: pointer;
    color: var(--color-text-tertiary);
}
.automation-test-run-modal__body {
    display: flex; flex-direction: column; gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.automation-test-run-modal__hint {
    font-size: 12px;
    padding: 8px 10px;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
}
.automation-test-run-modal__lead-label {
    display: flex; flex-direction: column; gap: var(--space-2);
    font-size: 12px;
    color: var(--color-text-tertiary);
}
.automation-test-run-modal__lead-input {
    width: 180px;
    font-family: inherit;
}
.automation-test-run-modal__result {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated, rgba(255,255,255,0.04));
}
.automation-test-run-modal__status {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600;
    font-size: 14px;
}
.automation-test-run-modal__status.is-match {
    color: var(--status-success-text);
}
.automation-test-run-modal__status.is-no-match {
    color: var(--color-text-tertiary);
}
.automation-test-run-modal__status-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--color-bg-hover);
    font-size: 13px;
    font-weight: 700;
}
.automation-test-run-modal__status.is-match .automation-test-run-modal__status-icon {
    background: rgba(34,197,94,0.15);
    color: var(--status-success-text);
}
.automation-test-run-modal__reason {
    font-size: 12px;
}
.automation-test-run-modal__actions-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    margin-top: 4px;
}
.automation-test-run-modal__actions {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.automation-test-run-modal__action {
    display: grid;
    grid-template-columns: 22px 1fr 2fr;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    background: var(--color-bg-hover);
}
.automation-test-run-modal__action.is-fail {
    background: rgba(252,165,165,0.06);
}
.automation-test-run-modal__action.is-stub {
    opacity: 0.85;
    border: 1px dashed var(--color-border);
    background: transparent;
}
.automation-test-run-modal__action-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
}
.automation-test-run-modal__action.is-ok .automation-test-run-modal__action-icon {
    color: var(--status-success-text);
    background: rgba(34,197,94,0.15);
}
.automation-test-run-modal__action.is-fail .automation-test-run-modal__action-icon {
    color: var(--status-error-text);
    background: rgba(252,165,165,0.15);
}
.automation-test-run-modal__stub-hint {
    font-size: 10px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.automation-test-run-modal__footer {
    display: flex; justify-content: flex-end;
    gap: var(--space-2);
}

/* C9.5 Etappe E — Pipeline-Auswahl-Modal */
.pipeline-select-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 12, 24, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.pipeline-select-modal {
    background: var(--color-bg-card-solid, #ffffff);
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    padding: var(--space-5);
    min-width: 420px; max-width: 90vw;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.pipeline-select-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4);
}
.pipeline-select-modal__header h3 { margin: 0; font-size: 18px; }
.pipeline-select-modal__close {
    background: none; border: 0; font-size: 22px; cursor: pointer;
    color: var(--color-text-tertiary);
}
.pipeline-select-modal__options {
    display: flex; flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.pipeline-select-modal__option {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    text-align: left;
    transition: all var(--duration-fast) var(--ease-out);
}
.pipeline-select-modal__option:hover {
    background: var(--color-brand-glow);
    border-color: var(--color-brand-mid);
}
.pipeline-select-modal__option-name {
    font-weight: 600;
}
.pipeline-select-modal__option-badge {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pipeline-select-modal__footer {
    display: flex; justify-content: flex-end;
    gap: var(--space-2);
}

/* C9.4 Etappe H — Notizen-Modal */
.notes-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 12, 24, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.notes-modal {
    background: var(--color-bg-card-solid, #ffffff);
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    padding: var(--space-5);
    min-width: 520px; max-width: 90vw;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.notes-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4);
}
.notes-modal__header h3 { margin: 0; font-size: 18px; }
.notes-modal__close {
    background: none; border: 0; font-size: 22px; cursor: pointer;
    color: var(--color-text-tertiary);
}
.notes-modal__body {
    margin-bottom: var(--space-4);
}
.notes-modal__textarea {
    width: 100%;
    min-height: 160px;
    resize: vertical;
    font-family: inherit;
}
.notes-modal__hint {
    margin-top: var(--space-2);
    font-size: 12px;
}
/* C9.5 Etappe F — note_type-Badge im Header + System-Hint */
.notes-modal__title-wrap {
    display: flex; align-items: center;
    gap: var(--space-2);
}
.notes-modal__type-badge {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}
.notes-modal__type-badge--verification { background: var(--status-warn-bg); color: var(--status-warn-icon); }
.notes-modal__type-badge--pulse_ai     { background: var(--color-brand-soft); color: var(--color-brand-light); }
.notes-modal__type-badge--import       { background: var(--color-bg-hover); color: var(--color-text-tertiary); }
.notes-modal__system-hint {
    font-size: 12px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-hover);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}
/* C9.5 Etappe F — Sidebar-Note Type-Badge */
.lead-detail__sidebar-note-meta {
    display: flex; align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.lead-detail__sidebar-note-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}
.lead-detail__sidebar-note-type--verification { background: var(--status-warn-bg); color: var(--status-warn-icon); }
.lead-detail__sidebar-note-type--pulse_ai     { background: var(--color-brand-soft); color: var(--color-brand-light); }
.lead-detail__sidebar-note-type--import       { color: var(--color-text-tertiary); }
.notes-modal__footer {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-2);
}
.notes-modal__footer-right {
    display: inline-flex; gap: var(--space-2);
    margin-left: auto;
}

/* C9.4 Etappe C — Persoenlichkeits-Modal
 * --------------------------------------------------------------
 * Glass-Modal mit dunklem/blurry Backdrop. Pattern wie Kontakt-Edit-
 * Modal (C9.3 Etappe I).
 */
.personality-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 12, 24, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.personality-modal {
    background: var(--color-bg-card-solid, #ffffff);
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    padding: var(--space-5);
    min-width: 520px; max-width: 90vw;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.personality-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4);
}
.personality-modal__header h3 { margin: 0; font-size: 18px; }
.personality-modal__close {
    background: none; border: 0; font-size: 22px; cursor: pointer;
    color: var(--color-text-tertiary);
}
.personality-modal__contact-row {
    display: flex; flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.personality-modal__contact-label {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
}
.personality-modal__pills {
    display: flex; flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
/* C9.5 Etappe C — Custom-Tag-Add Bereich */
.personality-modal__custom-add {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    margin-bottom: var(--space-4);
}
.personality-modal__custom-add-title {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-2);
}
.personality-modal__custom-add-row {
    display: flex; align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.personality-modal__custom-input {
    flex: 1 1 200px;
    min-width: 0;
}
/* Custom-Pill: kleines x-Icon bei Hover */
.lead-detail-card__personality-pill--custom {
    padding-right: 8px;
}
.lead-detail-card__personality-pill-delete {
    display: none;
    margin-left: 4px;
    padding: 2px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    transition: all var(--duration-fast) var(--ease-out);
}
.lead-detail-card__personality-pill-delete:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.10);
}
.lead-detail-card__personality-pill--custom:hover .lead-detail-card__personality-pill-delete,
.lead-detail-card__personality-pill--custom:focus-within .lead-detail-card__personality-pill-delete {
    display: inline-flex;
    align-items: center;
}
.personality-modal__footer {
    display: flex; justify-content: flex-end;
    gap: var(--space-2);
}

/* C9.3 Etappe D.3 — Bewertungs-Card plakativer (xl-Variante) */
.lead-detail-card--xl {
    /* Etwas mehr Hoehe + Padding */
}
.lead-detail-card--xl .lead-detail-card__bewertung-body {
    padding: var(--space-6) var(--space-4);
    gap: var(--space-4);
}
.lead-detail-card--xl .lead-detail-card__bewertung-bucket {
    font-size: 13px;
    padding: 6px 16px;
    letter-spacing: 0.14em;
}
.lead-detail-card__bewertung-subinfo {
    font-size: 11px;
    text-align: center;
}
.lead-detail-card__bewertung-empty {
    padding: var(--space-6) var(--space-4) !important;
    gap: var(--space-3);
}
.lead-detail-card__bewertung-cta {
    margin-top: var(--space-2);
    font-size: 14px;
}

/* C9.4 Etappe I — Web-Tab Panel-Header mit Action-Button rechts */
.lead-detail-tab__panel-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.lead-detail-tab__panel-header .lead-detail-tab__section-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.lead-detail-tab__header-action {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: var(--space-2);
}
.lead-detail-tab__panel-actions {
    display: inline-flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* C9.3 Etappe K — Brand-Icons im Web-Tab */
.lead-detail__brand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    flex-shrink: 0;
}
.lead-detail__brand-icon--google      { color: #4285F4; }
.lead-detail__brand-icon--linkedin    { color: #0A66C2; }
.lead-detail__brand-icon--instagram   { color: #E4405F; }
.lead-detail__brand-icon--facebook    { color: #1877F2; }
.lead-detail__brand-icon--youtube     { color: #FF0000; }
.lead-detail__brand-icon--tiktok      { color: var(--color-text-primary); }
.lead-detail__brand-icon--x-twitter   { color: var(--color-text-primary); }

/* C9.2 Etappe G — Dateien-Tab (Dropzone + Liste) */
.lead-detail__files-dropzone {
    text-align: center;
    border: 2px dashed var(--color-border-strong);
    transition: all var(--duration-fast) var(--ease-out);
    color: var(--color-text-tertiary);
}
.lead-detail__files-dropzone.is-dragover {
    border-color: var(--color-brand-mid);
    background: var(--color-brand-glow);
    color: var(--color-brand-light);
}
.lead-detail__files-table {
    width: 100%;
    border-collapse: collapse;
}
.lead-detail__files-table thead th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border-glass);
}
.lead-detail__files-table tbody td {
    padding: var(--space-3) var(--space-3);
    font-size: 13px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-glass);
    vertical-align: middle;
}
.lead-detail__files-table tbody tr:hover {
    background: var(--color-bg-hover);
}
.lead-detail__file-name {
    margin-left: var(--space-2);
}
.lead-detail__file-actions {
    text-align: right; white-space: nowrap;
}

/* C9.2 Etappe H — Stammdaten-Tab Edit-Mode */
.lead-detail__stamm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 720px) {
    .lead-detail__stamm-grid { grid-template-columns: 1fr; }
}
.lead-detail__edit-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--color-text-primary);
    font-size: var(--input-font-size);
    padding: 6px var(--space-3);
    height: 36px;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.lead-detail__edit-input:hover { border-color: var(--input-border-hover); }
.lead-detail__edit-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
}
.lead-detail-tab__header-actions { display: flex; gap: var(--space-2); }

/* C9.2 Etappe I — Web & Online-Tab Grid + Section-Title-Icons */
.lead-detail__web-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 720px) {
    .lead-detail__web-grid { grid-template-columns: 1fr; }
}
.lead-detail-tab__section-title svg {
    vertical-align: -2px;
    margin-right: var(--space-2);
    color: var(--color-text-tertiary);
}

/* E — Tabs / Tab-Panels / Sidebar */
.lead-detail-tab { display: flex; flex-direction: column; gap: var(--space-4); }
.lead-detail-tab__header { display: flex; align-items: center; justify-content: space-between; }
/* C9.3 Etappe H.3: wenn nur Action-Buttons im Header sind (ohne H2),
 * rechts ausrichten. Spacing oben durch tab-gap kompensiert. */
.lead-detail-tab__header--actions-only {
    justify-content: flex-end;
}
.lead-detail-tab__title {
    margin: 0; font-size: 18px; font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}
.lead-detail-tab__panel { padding: var(--space-5) var(--space-5); }
.lead-detail-tab__section-title {
    margin: 0 0 var(--space-3); font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-text-tertiary);
    font-weight: 600;
}
.lead-detail__kv {
    display: grid; grid-template-columns: 160px 1fr; gap: var(--space-2) var(--space-4);
    font-size: 14px; margin: 0;
}
.lead-detail__kv dt { color: var(--color-text-tertiary); font-weight: 500; }
.lead-detail__kv dd { margin: 0; color: var(--color-text-primary); }
.lead-detail__pill {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--color-text-tertiary);
    font-size: 12px; font-weight: 500;
}
.lead-detail__empty-state {
    text-align: center; padding: var(--space-8) var(--space-5);
}
.lead-detail__empty-title { font-size: 16px; font-weight: 600; color: var(--color-text-primary); margin-bottom: var(--space-2); }
.lead-detail__empty-text { color: var(--color-text-tertiary); font-size: 13px; max-width: 480px; margin: 0 auto; }
.lead-detail__loading { padding: var(--space-6); text-align: center; }

/* Sidebar-Cards (immer mit Content) */
/* C9.3 Etappe J.4: Padding +20%, Header-Font 11→12 fuer mehr Ruhe */
.lead-detail__sidebar-card { padding: var(--space-5) var(--space-5); }
.lead-detail__sidebar-card-header {
    font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
    font-weight: 600;
}
/* C9.3 Etappe J.2: Notizen-Card */
.lead-detail__sidebar-notes {
    display: flex; flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.lead-detail__sidebar-note {
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.lead-detail__sidebar-note:hover {
    background: var(--color-brand-glow);
    border-color: var(--color-brand-mid);
}
.lead-detail__sidebar-note-content {
    font-size: 13px;
    color: var(--color-text-primary);
    line-height: 1.4;
}
.lead-detail__sidebar-note-meta {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 4px;
}
.lead-detail__sidebar-notes-add {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-brand-light);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    width: 100%;
    justify-content: center;
}
.lead-detail__sidebar-notes-add:hover {
    background: var(--color-brand-glow);
    border-color: var(--color-brand-mid);
    color: var(--color-brand-mid);
}
.lead-detail__sidebar-card-body {
    font-size: 13px; color: var(--color-text-primary);
}
.lead-detail__sidebar-kv {
    display: grid; grid-template-columns: 70px 1fr; gap: 4px var(--space-2);
    margin: 0; font-size: 12px;
}
.lead-detail__sidebar-kv dt { color: var(--color-text-tertiary); }
.lead-detail__sidebar-kv dd { margin: 0; color: var(--color-text-primary); word-break: break-word; }
.lead-detail__sidebar-link { color: var(--color-brand-mid); text-decoration: none; }
.lead-detail__sidebar-link:hover { text-decoration: underline; }
.lead-detail__sidebar-text { color: var(--color-text-primary); }
.lead-detail__sidebar-text-muted { color: var(--color-text-tertiary); font-size: 11px; margin-top: 2px; }
.lead-detail__sidebar-hint { color: var(--color-text-tertiary); font-size: 12px; font-style: italic; }
.lead-detail__sidebar-tags { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.lead-detail__sidebar-history { list-style: none; margin: 0; padding: 0; }
.lead-detail__sidebar-history li {
    padding: 4px 0; color: var(--color-text-tertiary); font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.lead-detail__sidebar-history li:last-child { border-bottom: 0; }
.lead-detail__sidebar-history li.is-done { color: var(--color-text-primary); }

/* Sweep 2.7.2.b Etappe B — Owner-Card im Lead-Detail-Sidebar */
.lead-detail__owner-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 6px 8px;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    color: var(--color-text-primary);
    font-size: 13px;
    transition: all var(--duration-fast) var(--ease-out);
}
.lead-detail__owner-btn:hover {
    background: var(--color-brand-glow);
    border-color: var(--color-brand-mid);
}
.lead-detail__owner-btn.is-empty {
    border-style: dashed;
}
.lead-detail__owner-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-brand-soft);
    color: var(--color-brand-mid);
    font-weight: 600;
    font-size: 12px;
}
.lead-detail__owner-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lead-detail__owner-edit {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Owner-Picker-Modal */
.lead-detail-owner-picker-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 12, 24, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.lead-detail-owner-picker {
    background: var(--color-bg-card-solid, #ffffff);
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    padding: var(--space-5);
    min-width: 360px; max-width: 90vw; max-height: 76vh;
    overflow: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.lead-detail-owner-picker__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4);
}
.lead-detail-owner-picker__header h3 { margin: 0; font-size: 18px; }
.lead-detail-owner-picker__close {
    background: none; border: 0; font-size: 22px; cursor: pointer;
    color: var(--color-text-tertiary);
}
.lead-detail-owner-picker__body {
    display: flex; flex-direction: column;
    gap: var(--space-2);
}
.lead-detail-owner-picker__option {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    text-align: left;
    transition: all var(--duration-fast) var(--ease-out);
    color: var(--color-text-primary);
    font-size: 13px;
}
.lead-detail-owner-picker__option:hover {
    background: var(--color-brand-glow);
    border-color: var(--color-brand-mid);
}
.lead-detail-owner-picker__option.is-current {
    background: var(--color-brand-soft);
    border-color: var(--color-brand-mid);
}
.lead-detail-owner-picker__option-hint {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}
/* Sweep 2.7.2.d Etappe A: Avatar links neben Username */
.lead-detail-owner-picker__option-main {
    display: flex; align-items: center; gap: var(--space-2);
    flex: 1; min-width: 0;
}
.lead-detail-owner-picker__option-main .user-avatar {
    flex-shrink: 0;
}
.lead-detail-owner-picker__option-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sweep 2.7.2.d Etappe A: Notiz-Author mit Avatar */
.lead-detail__sidebar-note-author {
    display: inline-flex; align-items: center; gap: 4px;
}
.lead-detail__sidebar-note-author .user-avatar {
    width: 16px !important; height: 16px !important; font-size: 9px !important;
}
.lead-detail-owner-picker__spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-brand-mid);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.lead-detail-owner-picker__loading {
    display: flex; align-items: center; gap: 8px;
}
.lead-detail__sidebar-history li.is-done strong { color: #4ade80; }

/* F — Polish: Loading-Skeleton + Konsistente Hover/Focus-Verfeinerung */
.lead-detail__loading::after {
    content: "";
    display: inline-block; width: 14px; height: 14px;
    margin-left: var(--space-2);
    border: 2px solid rgba(255, 255, 255, 0.10);
    border-top-color: var(--color-brand-mid);
    border-radius: 50%;
    animation: leadDetailSpin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes leadDetailSpin {
    to { transform: rotate(360deg); }
}

/* Pipeline-Bar Active-Press-Feedback */
.pipeline-bar__phase:active { transform: scale(0.97); }

/* Sidebar-Card subtle hover */
.lead-detail__sidebar-card { transition: border-color 0.15s ease; }
.lead-detail__sidebar-card:hover { border-color: rgba(255, 255, 255, 0.10); }

/* Globaler Focus-Ring auf interaktive Elemente in der Detail-Page */
.lead-detail-page button:focus-visible,
.lead-detail-page a:focus-visible {
    outline: 2px solid var(--color-brand-mid);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Module-Header in der Detail-Page hat naturgemaess weniger
   margin-bottom als auf Modul-Top-Pages, weil danach der Cluster folgt */
.lead-detail-page__module-header { margin-bottom: var(--space-5); }

/* ============================================================
   Sweep 2.7.1 — Pipeline-Kanban Card-Footer + SortableJS-States
   ============================================================ */

.pipeline-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.pipeline-toolbar .pulse-filter-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 500;
    margin-left: var(--space-2);
}
.pipeline-toolbar .pulse-select,
.pipeline-toolbar .pulse-input {
    height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.pipeline-column-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--color-bg-elevated, rgba(255,255,255,0.06));
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.pipeline-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pipeline-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.pipeline-card-firma {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 2px;
}
.pipeline-card-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.pipeline-card-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.pipeline-card-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--brand-mid), var(--brand-light, var(--brand-mid)));
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.pipeline-card-outreach {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: 500;
    border: 1px solid var(--color-border);
}
.pipeline-card-outreach[data-outreach="cold_mail_gesendet"] { color: #93c5fd; border-color: rgba(147,197,253,0.4); }
.pipeline-card-outreach[data-outreach="cold_mail_geantwortet"] { color: #86efac; border-color: rgba(134,239,172,0.4); }
.pipeline-card-outreach[data-outreach="cold_mail_bounced"] { color: #fca5a5; border-color: rgba(252,165,165,0.4); }
.pipeline-card-outreach[data-outreach="do_not_contact"] { color: #f87171; border-color: rgba(248,113,113,0.5); }
.pipeline-card-ts {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-left: auto;
}

/* SortableJS States */
.pipeline-card--ghost {
    opacity: 0.4;
    background: var(--brand-soft, rgba(99,102,241,0.1));
}
.pipeline-card--chosen {
    box-shadow: 0 0 0 2px var(--brand-mid), var(--shadow-lg);
}
.pipeline-card--dragging {
    cursor: grabbing;
    transform: rotate(1.5deg);
    opacity: 0.95;
}

/* Sweep 3.1.e E2: .pipeline-bulk-bar entfernt (Tabellen-View weg). */

/* ============================================================
   Sweep 2.7.1 Etappe E — Pipeline-Settings (Einstellungen-Tab)
   ============================================================ */

.pipeline-settings-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
}
.pipeline-settings-sidebar {
    border-right: 1px solid var(--color-border);
    padding-right: 16px;
}
.pipeline-settings-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 13px;
}
.pipeline-settings-pipeline-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pipeline-settings-pipeline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-secondary);
    transition: background 0.12s ease;
}
.pipeline-settings-pipeline-item:hover { background: var(--color-bg-elevated, rgba(255,255,255,0.04)); }
.pipeline-settings-pipeline-item.is-active {
    background: var(--brand-soft, rgba(99,102,241,0.12));
    color: var(--color-text-primary);
    font-weight: 600;
}
.pipeline-settings-default-badge {
    color: var(--brand-mid);
    font-size: 14px;
}
.pipeline-settings-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}
.pipeline-settings-detail-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.pipeline-settings-detail-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.pipeline-settings-detail-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pipeline-settings-phase-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pipeline-settings-phase-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-surface);
    align-items: start;
}
.pipeline-settings-phase-handle {
    cursor: grab;
    color: var(--color-text-muted);
    font-size: 16px;
    user-select: none;
    padding-top: 6px;
}
.pipeline-settings-phase-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pipeline-settings-phase-label {
    font-size: 14px;
    font-weight: 600;
}
.pipeline-settings-phase-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-secondary);
}
.pipeline-settings-phase-meta label {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pipeline-settings-phase-input {
    width: 70px;
    padding: 2px 6px;
    height: 26px;
    font-size: 12px;
}
.pipeline-settings-phase-flag {
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--color-bg-elevated, rgba(255,255,255,0.04));
}
.pipeline-settings-phase-required {
    margin-top: 4px;
}
.pipeline-settings-required-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.pipeline-settings-required-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    font-size: 11px;
    cursor: pointer;
}
.pipeline-settings-required-tag.is-active {
    border-color: var(--brand-mid);
    background: var(--brand-soft, rgba(99,102,241,0.12));
    color: var(--color-text-primary);
}
.pipeline-settings-required-tag input { display: none; }
.pipeline-settings-phase-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ============================================================
   Sweep 2.7.1.a Etappe C — Pipeline-Spalten Load-More-Button
   ============================================================ */
.pipeline-column-load-more {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.pipeline-column-load-more:hover {
    border-color: var(--brand-mid);
    color: var(--color-text-primary);
    background: var(--brand-soft, rgba(99,102,241,0.08));
}

/* ============================================================
   Sweep 2.7.1.a Etappe D + 2.7.1.b Etappe D — Kanban Visual-Polish

   Mike-Spec 2.7.1.b:
   - Spalten-Background heller (rgba 0.05 statt 0.03)
   - Card-Background prominenter (rgba 0.08)
   - Card-Border 1.5px statt 1px
   - Card default box-shadow (nicht nur Hover)
   - Top-Border-Akzent 2px in brand-mid (Won=success, Lost=error)
   ============================================================ */

/* Spalten-Container: subtiler Background-Layer + Min-Height.
   Sweep 2.7.2.f.1 Etappe C: Vorher hatte dieser Block ein grid-
   basiertes Layout mit grid-auto-columns: minmax(260px, 1fr), das
   den frueheren flex-basierten 2.7.2.d/f-Block uebersteuerte (späterer
   File-Position = höhere Source-Order). Effektiv: 260px Min-Width
   pro Spalte -> 6 Phasen × 260 + Gaps sprengten 1024-Viewport.
   Jetzt: flex-Layout konsistent mit 2.7.2.d/f-Werten.  */
.pipeline-board {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 8px;
    width: 100%;
}
.pipeline-board .pipeline-column {
    /* Sweep 2.7.1.d Etappe A: Spalten-BG dunkler (rgba 0,0,0,0.20)
       als Cards (opak), damit Cards visuell heraussstechen. Vorher
       war's white-overlay → Spalten und Cards wirkten gleich.
       !important: Theme-Bind line 6866 setzt --color-bg-elevated
       !important — Pipeline-Kontext braucht eigene Werte. */
    background: rgba(0, 0, 0, 0.20) !important;
    border-radius: 10px;
    padding: 12px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Sweep 2.7.2.f.1 Etappe C: hoehere Specificity als nur
       .pipeline-column — erzwingt 180px Min-Width auch wenn ein
       spaeterer Block die Basis-Regel uebersteuert. */
    flex: 1 1 0;
    min-width: 180px;
}
/* Strip-Spalten behalten ihre spezifische Breite — hoehere
   Specificity ueberschreibt die generische .pipeline-board .pipeline-
   column-Regel oben.  */
.pipeline-board .pipeline-column.pipeline-column--strip {
    flex: 0 0 50px;
    min-width: 50px;
    max-width: 50px;
}
.pipeline-board .pipeline-column.pipeline-column--strip.is-drag-expanded {
    flex: 1 1 0;
    min-width: 180px;
    max-width: none;
}
:root[data-theme="light"] .pipeline-board .pipeline-column {
    background: rgba(0, 0, 0, 0.04) !important;
}
/* Sweep 2.7.1.d Etappe A: Phase-Status-Tint im Spalten-BG.
   Subtile Color-Nuance — Won-Spalte grünlich getoent, Lost rötlich
   etc. So sieht der User die Phase-Identität sofort. */
.pipeline-board .pipeline-column[data-phase-state="won"] {
    background: rgba(34, 197, 94, 0.06) !important;
}
.pipeline-board .pipeline-column[data-phase-state="lost"] {
    background: rgba(239, 68, 68, 0.06) !important;
}
.pipeline-board .pipeline-column[data-phase-state="onhold"] {
    background: rgba(245, 158, 11, 0.05) !important;
}
:root[data-theme="light"] .pipeline-board .pipeline-column[data-phase-state="won"] {
    background: rgba(34, 197, 94, 0.08) !important;
}
:root[data-theme="light"] .pipeline-board .pipeline-column[data-phase-state="lost"] {
    background: rgba(239, 68, 68, 0.08) !important;
}
:root[data-theme="light"] .pipeline-board .pipeline-column[data-phase-state="onhold"] {
    background: rgba(245, 158, 11, 0.08) !important;
}
.pipeline-board .pipeline-column-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 60px;
}

/* Spalten-Header: Color-Tint nach Phase-Status. Color-Differenzierung
   wird ueber data-Attribute gesteuert (im JS gesetzt). */
.pipeline-board .pipeline-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--color-border);
    margin-bottom: 4px;
}
.pipeline-board .pipeline-column[data-phase-state="won"] .pipeline-column-header {
    background: var(--status-success-bg, rgba(34,197,94,0.10));
    color: var(--status-success-text, #86efac);
    border-left-color: var(--status-success-border, rgba(34,197,94,0.5));
}
.pipeline-board .pipeline-column[data-phase-state="lost"] .pipeline-column-header {
    background: var(--status-error-bg, rgba(239,68,68,0.10));
    color: var(--status-error-text);
    border-left-color: var(--status-error-border, rgba(239,68,68,0.5));
}
.pipeline-board .pipeline-column[data-phase-state="onhold"] .pipeline-column-header {
    background: rgba(245,158,11,0.10);
    color: #fbbf24;
    border-left-color: rgba(245,158,11,0.5);
}

/* Counter-Badge im Header */
.pipeline-board .pipeline-column-count {
    background: rgba(255,255,255,0.08);
    color: inherit;
    font-weight: 600;
}
.pipeline-board .pipeline-column[data-phase-state="won"] .pipeline-column-count {
    background: rgba(34,197,94,0.20);
}
.pipeline-board .pipeline-column[data-phase-state="lost"] .pipeline-column-count {
    background: rgba(239,68,68,0.20);
}
.pipeline-board .pipeline-column[data-phase-state="onhold"] .pipeline-column-count {
    background: rgba(245,158,11,0.20);
}

/* Cards: klare Border + Background-Lift + Default-Shadow + Top-Akzent.
   Sweep 2.7.1.b Etappe D: Verstaerkter Visual-Polish.
   - Card-Background prominenter (deutlich heller als Spalten-BG)
   - 1.5px Border statt 1px
   - Default-Shadow (nicht nur Hover)
   - Top-Border-Akzent 2px brand-mid (Won=success, Lost=error) */
.pipeline-board .pipeline-card {
    /* Sweep 2.7.1.d Etappe A: Card-BG OPAK (var(--color-bg-card-solid)).
       Vorher rgba(255,255,255,0.10) wirkte ausgewaschen vor dem
       App-Background. --color-bg-card-solid ist Dark=#141416,
       Light=#ffffff — klare Solid-Cards heben sich von den
       semitransparenten Spalten-BGs ab.
       Default-Shadow: brand-mid-Glow (kein generic dark shadow mehr).
       Won/Lost/On-Hold: Status-Color-Glow (siehe weiter unten). */
    background: var(--color-bg-card-solid, #141416) !important;
    border-bottom: 1.5px solid var(--color-border) !important;
    border-left: 1.5px solid var(--color-border) !important;
    border-right: 1.5px solid var(--color-border) !important;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow:
        0 4px 12px rgba(79, 126, 219, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    /* Top-Border-Akzent als 2px-Streifen oben auf jeder Card. */
    border-top: 2px solid var(--brand-mid, #4f7edb) !important;
}
:root[data-theme="light"] .pipeline-board .pipeline-card {
    background: #ffffff !important;
    box-shadow:
        0 4px 12px rgba(79, 126, 219, 0.10),
        0 2px 4px rgba(0, 0, 0, 0.06);
}
/* Sweep 2.7.1.d Etappe A: Status-Color-Glow je Phase-State.
   Box-Shadow farblich passend zum Phase-Status — Won grün-gloht,
   Lost rot, On-Hold amber. */
.pipeline-board .pipeline-column[data-phase-state="won"] .pipeline-card {
    border-top-color: var(--status-success-border, rgba(34,197,94,0.7)) !important;
    box-shadow:
        0 4px 16px rgba(34, 197, 94, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.20);
}
.pipeline-board .pipeline-column[data-phase-state="lost"] .pipeline-card {
    border-top-color: var(--status-error-border, rgba(239,68,68,0.7)) !important;
    box-shadow:
        0 4px 16px rgba(239, 68, 68, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.20);
}
.pipeline-board .pipeline-column[data-phase-state="onhold"] .pipeline-card {
    border-top-color: rgba(245,158,11,0.7) !important;
    box-shadow:
        0 4px 16px rgba(245, 158, 11, 0.20),
        0 2px 4px rgba(0, 0, 0, 0.20);
}
.pipeline-board .pipeline-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(79, 126, 219, 0.28),
        0 4px 8px rgba(0, 0, 0, 0.30);
    border-color: var(--brand-mid, rgba(99,102,241,0.6));
}
/* Hover intensiviert den Status-Glow (Standard, Won, Lost, On-Hold). */
.pipeline-board .pipeline-column[data-phase-state="won"] .pipeline-card:hover {
    border-top-color: var(--status-success-border, rgba(34,197,94,0.9));
    box-shadow:
        0 8px 28px rgba(34, 197, 94, 0.40),
        0 4px 8px rgba(0, 0, 0, 0.25);
}
.pipeline-board .pipeline-column[data-phase-state="lost"] .pipeline-card:hover {
    border-top-color: var(--status-error-border, rgba(239,68,68,0.9));
    box-shadow:
        0 8px 28px rgba(239, 68, 68, 0.40),
        0 4px 8px rgba(0, 0, 0, 0.25);
}
.pipeline-board .pipeline-column[data-phase-state="onhold"] .pipeline-card:hover {
    border-top-color: rgba(245, 158, 11, 0.9);
    box-shadow:
        0 8px 28px rgba(245, 158, 11, 0.35),
        0 4px 8px rgba(0, 0, 0, 0.25);
}
.pipeline-board .pipeline-card-firma {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}
.pipeline-board .pipeline-card-meta {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* ============================================================
   Sweep 2.7.1.b Etappe E — Pool-Bulk-Bar Sticky-Bottom verlässlich

   Mike-Findings: trotz .pulse-bulk-bar { position: fixed } sass die
   Pool-Bulk-Bar im Content-Flow. Wir haerten die Position fuer den
   Pool-Container mit ID-Specificity + explizitem position-Reset, falls
   ein generischer Modul-Container fixed-Position bricht (Animation-
   Transform / contain / will-change). Belt-and-Suspenders fuer die
   bekannt sticky-empfindliche Bulk-Bar.
   ============================================================ */
#leadsBulkBar.pulse-bulk-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 4000;
}
/* Padding-Bottom im Tabellen-Container damit die letzte Zeile nicht
   unter der Bulk-Bar verschwindet wenn sie sichtbar ist. */
.leads-pool-table {
    padding-bottom: 96px;
}

/* Sweep 3.1.e E2: Tabellen-spezifische CSS-Regeln entfernt
   (Bulk-Bar-Sticky-Bottom + pipelineTable-Padding) — Tabellen-View
   ist komplett weg. */

/* ============================================================
   Sweep 3.0.a Etappe 5 — Mail-Modul-Frame
   ============================================================
   Empty-State (kein Account verbunden) und Tab-Placeholder
   ("Inbox lädt …") nutzen den lead-detail-empty-Pattern als
   Vorbild — Grayscale-first, klare Vertikal-Hierarchie:
   Icon → Titel → Body-Text → CTA.
*/
.mail-empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    max-width: 560px;
    margin: var(--space-6) auto 0;
}
.mail-empty-state__icon {
    width: 64px; height: 64px;
    margin: 0 auto var(--space-4);
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.08);
    color: var(--color-text-tertiary);
}
.mail-empty-state__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}
.mail-empty-state__text {
    color: var(--color-text-tertiary);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 auto var(--space-5);
    max-width: 460px;
}

.mail-tab-placeholder {
    padding: var(--space-6) var(--space-5);
    margin-top: var(--space-4);
}
.mail-tab-placeholder__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}
.mail-tab-placeholder__loading {
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Header-Actions: Account-Selector + Refresh-Button nebeneinander. */
#mailModuleHeaderActions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
/* Sweep 3.0.c.1.3 PB1 — "+ Neue Mail" prominenter.
   Mike-Befund nach 3.0.c.1.2: bei nur 3 Header-Tools darf der Primary-
   CTA mehr Praesenz haben. Pattern:
   - Mail-Icon links vor dem Label (visuelle Aufladung)
   - 12px/22px Padding statt Standard 9px/16px (~35% mehr Flaeche)
   - font-weight 600 (statt .btn-default 500), font-size 14px (statt 13)
   - Brand-Glow zusaetzlich zum Standard-Box-Shadow — derselbe Glow-
     Token wie aktive Stage-Pills, sorgt fuer wiedererkennbaren Pulse-
     Akzent. */
.mail-compose-new-btn {
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    box-shadow:
        0 1px 2px rgba(42, 52, 176, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        var(--color-brand-glow, 0 0 24px rgba(42, 52, 176, 0.3));
}
.mail-compose-new-btn:hover:not(:disabled) {
    box-shadow:
        0 2px 4px rgba(42, 52, 176, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 32px rgba(42, 52, 176, 0.45);
}
.mail-compose-new-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mail-compose-new-btn__icon svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke-width: 2;
}
.mail-compose-new-btn__label {
    line-height: 1;
}

/* Sweep 3.0.c.1.2 H1: Account-Selector wohnt jetzt in der Mail-Sub-
   Toolbar (`.mail-inbox-toolbar`) — kompakter als im Header (220 → 200
   px min-width), bleibt aber breit genug fuer typische E-Mail-Adressen.
   Trigger uebernimmt den Glass-Look aus dem zentralen Glass-Dropdown. */
.mail-account-selector {
    min-width: 200px;
}
.mail-account-selector .pulse-glass-dropdown__trigger {
    height: 36px;
}
.mail-inbox-toolbar .mail-account-selector {
    margin-right: var(--space-2);
}

/* Sweep 3.0.a.1 F5 — Refresh-Button-Feedback (.is-loading-Halbtransparenz).
   Sweep 3.0.c.1.2 H2: Label im Button weg, Spinner ersetzt das rotate-cw-
   Icon waehrend Sync. */
#mailRefreshBtn.is-loading {
    opacity: 0.85;
}
.mail-refresh-spin {
    display: inline-block;
    animation: mail-refresh-spin 0.9s linear infinite;
    vertical-align: middle;
}
@keyframes mail-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Sweep 3.0.c.1.2 H2 — Refresh-Button als Icon-Only mit Tooltip.
   Visuell identisch zum Settings-Zahnrad (gleicher btn-ghost-40x40-
   Container, gleiche Hover-Behandlung) — sorgt fuer eine konsistente
   Icon-Tool-Reihe im Header. Mike-Befund nach 3.0.c.1.1: Refresh hatte
   Label, Settings nicht — Inkonsistenz. */
.mail-refresh-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    color: var(--color-text-primary);
    border-radius: 8px;
}
.mail-refresh-icon:hover {
    color: var(--color-text-primary);
    background: rgba(148, 163, 184, 0.12);
}
.mail-refresh-icon svg {
    display: block;
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2 !important;
    margin: auto;
}
.mail-sync-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
}

/* Sweep 3.0.c.1.3 PB1: `.mail-settings-gear`-Klasse entfernt — das
   Solo-Settings-Zahnrad ist als Header-Tool weggefallen, "E-Mail-
   Accounts verwalten" lebt jetzt als Eintrag im Aktionen-Dropdown.
   Historie (F7 / P5 / 3.0.b.2 F2) im Commit-Log + Test-Datei
   test_mail_settings_icon_p5.py dokumentiert. */

/* ============================================================
   Sweep 3.0.a Buendel 3 Teil B / E7 — Inbox-UI: Liste + Detail-Pane
   ============================================================ */

/* Frame: Toolbar oben, darunter zweispaltiges Split (Liste | Detail). */
.mail-inbox-frame {
    margin-top: var(--space-4);
    padding: 0;
    overflow: hidden;
}
.mail-inbox-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.18);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* Sweep 3.0.c.2.1 M2 — Suche rechts FINAL nach 3. Anlauf.
   D6 hatte zwar Two-Wrapper + space-between, aber `__left` war
   `display: inline-flex` ohne `flex: 1` — beide Wrapper waren
   kompakt, `space-between` schiebt sie an die Card-Kanten, aber
   Mike sah die Suche "schwebend" statt satt-rechts-buendig. Im
   Lead-Pool-Pattern (`.leads-toolbar-left`, seit 2c.25.2-recheck)
   nimmt der Left-Wrapper via `flex: 1 1 auto; min-width: 0` den
   Rest-Platz, Right klebt mit `flex-shrink: 0` an der rechten
   Card-Kante — visuell unmissverstaendlich rechts. Wir adoptieren
   das gleiche Pattern. */
.mail-inbox-toolbar__left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
}
.mail-inbox-toolbar__right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}
.mail-inbox-search {
    flex: 0 0 auto;
    width: 280px;
    max-width: 100%;
}
/* Sweep 3.0.c.1.1 F4: Filter-Pill-Reihe in der Mail-Sub-Toolbar.
   Pattern + Counter-Style identisch zur Lead-Uebersicht
   (.leads-stage-pill / .leads-pill-count). Multi-Select moeglich:
   "Nur Lead-Mails" + "Nur ungelesen" gleichzeitig aktivierbar.
   PB3: margin-right: auto entfernt — Suche zieht sich jetzt selbst
   per margin-left: auto an den rechten Rand. */
.mail-filter-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mail-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.18));
    background: var(--color-glass-bg, rgba(255, 255, 255, 0.06));
    color: var(--color-text-primary, #fff);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease, filter 160ms ease, color 160ms ease;
}
.mail-filter-pill:hover {
    background: var(--color-glass-bg-hover, rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.24);
    filter: brightness(1.08);
}
.mail-filter-pill.active {
    background: var(--color-brand-primary, #2a34b0);
    border-color: var(--color-brand-primary, #2a34b0);
    box-shadow: var(--color-brand-glow, 0 0 24px rgba(42, 52, 176, 0.3));
    color: #ffffff;
}
.mail-filter-pill .mail-pill-count {
    font-variant-numeric: tabular-nums;
    color: var(--color-brand-mid, #4f7edb);
    font-weight: 600;
    margin-left: 2px;
}
.mail-filter-pill.active .mail-pill-count {
    color: var(--color-brand-light, #7ab8f0);
}
:root[data-theme="light"] .mail-filter-pill {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(148, 163, 184, 0.30);
    color: var(--color-text-primary, #1f2937);
}
:root[data-theme="light"] .mail-filter-pill.active {
    background: var(--color-brand-primary, #2a34b0);
    color: #ffffff;
}

/* Sweep 3.0.c.1.1 F3: Aktionen-Trigger im Mail-Header — Sekundaer-
   Button-Style mit Icon links + Label rechts. Vorher war es nur ein
   3-Punkte-Icon und Mike sah nicht, dass dort Vorlagen versteckt sind.
   Sweep 3.0.c.1.2 H3: zusaetzlich Chevron-Down rechts als Dropdown-
   Visual-Cue — Mike-Befund nach 3.0.c.1.1: sah aus wie Button, verhielt
   sich wie Dropdown. Chevron dreht sich beim Oeffnen via aria-expanded
   um 180° (CSS-Only, kein JS-Toggle noetig). */
.mail-actions-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mail-actions-trigger__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mail-actions-trigger__label {
    font-size: 13px;
    font-weight: 500;
}
.mail-actions-trigger__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    color: var(--color-text-muted, rgba(148, 163, 184, 0.85));
    transition: transform 160ms ease;
}
.mail-actions-trigger[aria-expanded="true"] .mail-actions-trigger__chevron {
    transform: rotate(180deg);
}

/* Sweep 3.0.c.1 V1: Active-State konsistent mit Pulse-Filter-Quick-
   Toggle — solid Primary-Blau-Background + weiße Schrift, damit der
   AN-Zustand auf den ersten Blick erkennbar ist (Mike-Befund: alte
   18%-Violett-Pill war zu subtil und nicht eindeutig active). */
.mail-inbox-unread-toggle.is-active,
.mail-inbox-lead-only-toggle.is-active {
    background: var(--color-brand-mid, #4f7edb);
    color: #ffffff;
    border-color: var(--color-brand-mid, #4f7edb);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.mail-inbox-unread-toggle.is-active:hover,
.mail-inbox-lead-only-toggle.is-active:hover {
    background: var(--color-brand-deep, #3b66c0);
    border-color: var(--color-brand-deep, #3b66c0);
    color: #ffffff;
}
.mail-inbox-split {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    min-height: 520px;
}
@media (max-width: 900px) {
    .mail-inbox-split { grid-template-columns: 1fr; }
}
.mail-inbox-list-pane {
    border-right: 1px solid rgba(148, 163, 184, 0.12);
    max-height: 70vh;
    overflow-y: auto;
}
.mail-inbox-detail-pane {
    padding: var(--space-4) var(--space-5);
    max-height: 70vh;
    overflow-y: auto;
}
.mail-list-empty,
.mail-detail-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    font-size: 13px;
}

/* Listen-Item */
.mail-list-item-mount + .mail-list-item-mount { /* dezenter Separator */ }
.email-preview-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    cursor: pointer;
    transition: background 0.15s ease;
    color: var(--color-text-primary);
}
.email-preview-card:hover,
.email-preview-card:focus {
    background: rgba(148, 163, 184, 0.06);
    outline: none;
}
.email-preview-card.is-unread .email-preview-card__sender,
.email-preview-card.is-unread .email-preview-card__subject {
    font-weight: 600;
    color: var(--color-text-primary);
}
.email-preview-card.is-bounce {
    border-left: 3px solid #f87171;
}
.email-preview-card__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.email-preview-card__row--top {
    justify-content: space-between;
    font-size: 13px;
}
.email-preview-card__sender {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
}
.email-preview-card__date {
    font-size: 11px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}
.email-preview-card__lead-pill {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-preview-card__row--subject {
    font-size: 13px;
}
.email-preview-card__subject {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
}
.email-preview-card__bounce-icon {
    color: #f87171;
}
.email-preview-card__snippet {
    font-size: 12px;
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Sweep 3.0.f2 F2-4 — Pull-Enroll Lead-Auswahl-Modal (Sequenz-
   Detail-Seite). Suchfeld + Status-Dropdown oben, Lead-Liste
   darunter mit Checkboxen. Schon eingebuchte Leads ausgegraut.
   KEIN Violett — Pulse-Brand-Tokens.
   ============================================================ */
.sequence-add-leads-modal {
    /* Compose-Pattern: lesbare Texte auf Glass-Background. */
    color: var(--color-text-primary);
}
.sequence-add-leads-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.sequence-add-leads-filters .pulse-input {
    flex: 1 1 auto;
    min-width: 0;
}
.sequence-add-leads-filters select.pulse-input {
    flex: 0 0 auto;
    max-width: 200px;
}
.sequence-add-leads-list {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md, 8px);
    background: rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] .sequence-add-leads-list {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(10, 10, 10, 0.08);
}
.sequence-add-lead-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: 13px;
    transition: background 120ms ease;
}
.sequence-add-lead-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.sequence-add-lead-row.is-selected {
    background: rgba(79, 126, 219, 0.10);
}
.sequence-add-lead-row.is-disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.55;
}
.sequence-add-lead-row__firma {
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.sequence-add-lead-row__ort,
.sequence-add-lead-row__email,
.sequence-add-lead-row__status,
.sequence-add-lead-row__hint {
    flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.sequence-add-lead-row__email {
    flex: 1 1 auto;
    min-width: 0;
}
.sequence-add-lead-row__hint {
    margin-left: auto;
    font-style: italic;
}

/* ============================================================
   Sweep 3.0.e4 E2 — Kompakte Mail-Listen (Thunderbird-Stil).
   EINE Zeile pro Mail. Kein Snippet. Unread-Dot vorne (Brand-mid).
   Active = Brand-Akzent + linke Border. KEIN Violett.
   ============================================================ */
.email-preview-card--compact {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 10px;
    min-height: 32px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.07);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    color: var(--color-text-tertiary);
    font-size: 13px;
    line-height: 1.3;
}
.email-preview-card--compact:hover,
.email-preview-card--compact:focus {
    background: rgba(148, 163, 184, 0.06);
    outline: none;
}
.email-preview-card--compact.is-active {
    background: rgba(79, 126, 219, 0.10);
    border-left-color: var(--color-brand-mid);
}
.email-preview-card--compact.is-active .email-preview-card__sender,
.email-preview-card--compact.is-active .email-preview-card__subject {
    color: var(--color-text-primary);
}
.email-preview-card--compact.is-unread .email-preview-card__sender,
.email-preview-card--compact.is-unread .email-preview-card__subject {
    font-weight: 600;
    color: var(--color-text-primary);
}
/* Read-State: dezent gedaempfter Sender/Subject (gelesen != ungelesen
   sichtbar machen). */
.email-preview-card--compact:not(.is-unread) .email-preview-card__sender,
.email-preview-card--compact:not(.is-unread) .email-preview-card__subject {
    font-weight: 400;
    color: var(--color-text-tertiary);
}
.email-preview-card--compact .email-preview-card__unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand-mid);
    flex-shrink: 0;
}
.email-preview-card--compact .email-preview-card__unread-dot.is-placeholder {
    background: transparent;
}
.email-preview-card--compact .email-preview-card__sender {
    flex: 0 0 auto;
    max-width: 38%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}
.email-preview-card--compact .email-preview-card__subject {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.email-preview-card--compact .email-preview-card__date {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    margin-left: auto;
}
.email-preview-card--compact .email-preview-card__lead-pill,
.email-preview-card--compact .email-preview-card__sequence-pill {
    flex: 0 0 auto;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: var(--radius-pill, 9999px);
    background: rgba(79, 126, 219, 0.12);
    color: var(--color-brand-light);
    border: 1px solid rgba(79, 126, 219, 0.20);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-preview-card--compact .email-preview-card__bounce {
    flex: 0 0 auto;
    color: var(--color-danger, #ef4444);
}
.email-preview-card--compact .email-preview-card__attach {
    flex: 0 0 auto;
    color: var(--color-text-muted);
}
.email-preview-card--compact.is-bounce {
    border-left-color: var(--color-danger, #ef4444);
}
.email-preview-card--compact.is-bounce.is-active {
    border-left-color: var(--color-danger, #ef4444);
    background: rgba(239, 68, 68, 0.08);
}

/* Snippet im Compact-Mode unterdruecken (falls Render-Reste vom
   alten Markup auftauchen). */
.email-preview-card--compact .email-preview-card__snippet {
    display: none;
}

/* Auf schmalen Breiten: Sender-Max-Width verkleinern, Pillen evtl.
   ausblenden. */
@media (max-width: 640px) {
    .email-preview-card--compact .email-preview-card__sender {
        max-width: 30%;
    }
    .email-preview-card--compact .email-preview-card__lead-pill,
    .email-preview-card--compact .email-preview-card__sequence-pill {
        display: none;
    }
}

/* Detail-Pane */
.mail-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mail-detail-bounce-banner {
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--color-text-primary);
    font-size: 13px;
}

/* Sweep 3.0.c.5 BO3 — Bounces-Tab Listen-Items + Detail-Pane.
 * refactoring-ui: Klassifikation per Farbe (Hard=rot, Soft=orange) +
 * Typografie-Hierarchie (Empfaenger fett, Code muted, Diagnostic small).
 * Pills nutzen die bestehende .mail-filter-pill-Basis, ergaenzt mit
 * is-bounce-hard / is-bounce-soft-Modifiers fuer Akzentfarbe.
 */
.mail-filter-pill.is-bounce-hard.active {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: rgb(248, 113, 113);
}
.mail-filter-pill.is-bounce-soft.active {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.45);
    color: rgb(251, 191, 36);
}

/* Listen-Items im Bounces-Tab */
.mail-bounce-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-3);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: var(--space-2);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.mail-bounce-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.22);
}
.mail-bounce-item.is-hard {
    border-left: 3px solid rgba(239, 68, 68, 0.55);
}
.mail-bounce-item.is-soft {
    border-left: 3px solid rgba(245, 158, 11, 0.55);
}
.mail-bounce-item.is-unknown {
    border-left: 3px solid rgba(148, 163, 184, 0.4);
}
.mail-bounce-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-right: var(--space-2);
}
.mail-bounce-badge.is-hard {
    background: rgba(239, 68, 68, 0.16);
    color: rgb(248, 113, 113);
    border: 1px solid rgba(239, 68, 68, 0.35);
}
.mail-bounce-badge.is-soft {
    background: rgba(245, 158, 11, 0.16);
    color: rgb(251, 191, 36);
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.mail-bounce-badge.is-unknown {
    background: rgba(148, 163, 184, 0.16);
    color: var(--color-text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.3);
}
.mail-bounce-code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    margin-left: var(--space-1);
}
.mail-bounce-snippet {
    margin-top: 4px;
    font-size: 12px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Detail-Pane Bounce-Panel */
.mail-detail-bounce-panel {
    padding: var(--space-3);
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.025);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mail-detail-bounce-panel.is-hard {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.06);
}
.mail-detail-bounce-panel.is-soft {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.06);
}
.mail-detail-bounce-panel__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mail-detail-bounce-panel__recipient {
    font-size: 13px;
}
.mail-detail-bounce-panel__recipient code {
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.mail-bounce-actions-info {
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.15);
}
.mail-bounce-actions-info.is-soft {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.2);
}
.mail-bounce-actions-info__head {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.mail-bounce-actions-info__list {
    margin: 0;
    padding-left: var(--space-3);
    font-size: 13px;
    line-height: 1.6;
}
.mail-bounce-actions-info__list a {
    color: var(--color-link, #93c5fd);
}
.mail-bounce-diagnostic {
    font-size: 12px;
    color: var(--color-text-secondary);
}
.mail-bounce-diagnostic summary {
    cursor: pointer;
    padding: 2px 0;
}
.mail-bounce-diagnostic pre {
    margin: 4px 0 0;
    padding: var(--space-2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow-x: auto;
    font-size: 11px;
    max-height: 200px;
}
.mail-detail-bounce-panel__actions {
    margin-top: var(--space-1);
}
.mail-bounce-remove-sup {
    font-size: 12px;
}

/* Sweep 3.0.d D4 / 3.0.ui-foundation U6 — Sequenzen-Page.
 * Listen-Toolbar + Pills laufen jetzt über PulseListToolbar +
 * PulseFilterPills. Editor-Modal, Step-Cards, Enrollment-Status-
 * Badges bleiben Modul-spezifisch.
 *
 * Die alten Modul-Custom-Klassen .sequences-toolbar / -left /
 * .sequences-pill wurden in U6 entfernt — sie werden nicht mehr
 * gerendert.
 */
.sequences-row-name-cell { display: flex; flex-direction: column; gap: 2px; }
.sequences-name-link {
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    padding: 0;
}
.sequences-name-link:hover { text-decoration: underline; }
.sequences-row-desc { font-size: 12px; }
.sequences-active-count { font-weight: 600; color: rgb(74, 222, 128); }
.sequences-weekend-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(79, 126, 219, 0.16);
    color: var(--color-brand-light, #7ab8f0);
    border: 1px solid rgba(79, 126, 219, 0.32);
}
.sequences-row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}
.sequences-delete-btn:hover { color: rgb(248, 113, 113); }

/* Editor-Modal */
.sequence-editor-modal {
    max-width: 720px;
    width: 92vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}
.sequence-editor-body {
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.sequence-editor-toggle .pulse-switch-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}
.sequence-editor-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.sequence-step-card {
    padding: var(--space-3);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.sequence-step-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sequence-step-card__title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}
.sequence-step-card__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sequence-step-card__row .pulse-input.sequence-step-delay {
    width: 100px;
}
.sequence-step-card__hint {
    font-size: 11px;
}
.sequence-step-card__inline {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed rgba(148, 163, 184, 0.12);
}
.sequence-add-step-btn { align-self: flex-start; }

/* Enrollments-Detail-View Sweep 3.0.ui-foundation U6:
 * Header bleibt OBERHALB der Glass-Card als Sub-Page-Identität
 * (Back-Link + Sequenz-Name + Count). Pills + Tabelle leben in der
 * .pulse-list-card (gerendert über PulseListToolbar). */
.sequences-enrollments-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-2);
    margin-bottom: var(--space-3);
}
.sequences-enrollments-header__title { flex: 1 1 auto; }
.sequences-enrollments-header__name { font-size: 18px; font-weight: 600; }
/* .sequences-enrollments-filters — entfernt, Pills laufen jetzt
 * über PulseFilterPills innerhalb der PulseListToolbar. */
.enrollment-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.enrollment-status-badge.is-active {
    background: rgba(74, 222, 128, 0.18);
    color: rgb(134, 239, 172);
    border: 1px solid rgba(74, 222, 128, 0.35);
}
.enrollment-status-badge.is-paused {
    background: rgba(245, 158, 11, 0.18);
    color: rgb(251, 191, 36);
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.enrollment-status-badge.is-completed {
    background: rgba(79, 126, 219, 0.18);
    color: var(--color-brand-light, #7ab8f0);
    border: 1px solid rgba(79, 126, 219, 0.35);
}
.enrollment-status-badge.is-stopped {
    background: rgba(148, 163, 184, 0.18);
    color: var(--color-text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.3);
}
.enrollment-status-badge.is-stopped-bounce {
    background: rgba(239, 68, 68, 0.16);
    color: rgb(248, 113, 113);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Sweep 3.0.d D7 — Mail-Modul-Header-Stat-Link. */
.module-stat {
    margin-top: 4px;
    font-size: 12px;
}
.module-stat__link {
    background: none;
    border: none;
    color: rgb(196, 181, 253);
    cursor: pointer;
    padding: 0;
    font-size: 12px;
}
.module-stat__link:hover { text-decoration: underline; }
.module-stat__count { font-weight: 700; }

/* Sweep 3.0.d D6 — Aktive-Sequenz-Banner im Lead-Detail-Mail-Tab. */
.lead-detail-mail-sequence-banner {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    border: 1px solid rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.06);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.lead-detail-mail-sequence-banner__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}
.lead-detail-mail-sequence-banner__main {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 13px;
}
.lead-detail-mail-sequence-banner__actions {
    display: flex;
    gap: 4px;
}

/* Sweep 3.0.d D5 — Sequenz-Step-Pill in der Warteschlange-Liste. */
.email-preview-card__sequence-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: rgba(168, 85, 247, 0.18);
    color: rgb(196, 181, 253);
    border: 1px solid rgba(168, 85, 247, 0.35);
    margin-left: 4px;
}
.mail-detail-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.mail-detail-subject {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.mail-detail-meta-row {
    font-size: 13px;
    color: var(--color-text-secondary);
}
.mail-detail-lead-pill {
    margin-top: var(--space-2);
    font-size: 13px;
    color: var(--color-text-secondary);
}
.mail-detail-link-btn {
    align-self: flex-start;
    margin-top: var(--space-2);
}
.mail-detail-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-primary);
    max-width: 720px;
}
.mail-detail-body img { max-width: 100%; height: auto; }

/* ============================================================
   Sweep 3.0.a Buendel 3 Teil B / E8 — Lead-Detail-Tab "Mail"
   ============================================================ */
.lead-detail-mail__toolbar {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-3);
}
.lead-detail-mail__thread {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.lead-detail-mail__item {
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
.lead-detail-mail__item:last-child { border-bottom: none; }
.lead-detail-mail__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-primary);
    text-align: left;
}
.lead-detail-mail__header:hover { background: rgba(148, 163, 184, 0.04); }
.lead-detail-mail__direction-icon { color: var(--color-text-tertiary); }
.lead-detail-mail__sender {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--color-text-secondary);
}
.lead-detail-mail__account-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--color-text-tertiary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lead-detail-mail__status-pill {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--color-text-tertiary);
    font-weight: 500;
}
.lead-detail-mail__status-pill.is-received {
    background: rgba(99, 102, 241, 0.15); color: #a5b4fc;
}
.lead-detail-mail__status-pill.is-sent {
    background: rgba(34, 197, 94, 0.15); color: #4ade80;
}
.lead-detail-mail__status-pill.is-bounced {
    background: rgba(239, 68, 68, 0.12); color: #fca5a5;
}
.lead-detail-mail__status-pill.is-draft {
    background: rgba(148, 163, 184, 0.12); color: var(--color-text-tertiary);
}
.lead-detail-mail__status-pill.is-queued {
    background: rgba(124, 58, 237, 0.15); color: #c4b5fd;
}
.lead-detail-mail__date {
    font-size: 11px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}
.lead-detail-mail__subject {
    padding: 0 var(--space-4) var(--space-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.lead-detail-mail__body-wrap {
    display: none;
    padding: 0 var(--space-4) var(--space-4);
}
.lead-detail-mail__item.is-expanded .lead-detail-mail__body-wrap {
    display: block;
}
.lead-detail-mail__body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-primary);
    max-width: 720px;
}
.lead-detail-mail__body img { max-width: 100%; height: auto; }
.lead-detail-mail__body-plain {
    white-space: pre-wrap;
    font-family: inherit;
    margin: 0;
}
.lead-detail-mail__sidebar-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: var(--space-2) 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    cursor: pointer;
    text-align: left;
    color: var(--color-text-primary);
}
.lead-detail-mail__sidebar-row:hover {
    background: rgba(148, 163, 184, 0.04);
}
.lead-detail-mail__sidebar-row:last-child { border-bottom: none; }
.lead-detail-mail__sidebar-subject {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lead-detail-mail__sidebar-meta {
    font-size: 11px;
}

/* Link-to-Lead-Modal */
.email-link-modal { width: min(540px, 92vw); }
.email-link-modal__body { padding: var(--space-4) var(--space-5); }
.email-link-modal__search { width: 100%; margin-top: var(--space-1); }
.email-link-modal__results {
    margin-top: var(--space-3);
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
}
.email-link-modal__result-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    text-align: left;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: background 0.15s ease;
}
.email-link-modal__result-row:hover {
    background: rgba(148, 163, 184, 0.06);
}
.email-link-modal__result-firma {
    font-weight: 600;
    font-size: 13px;
}
.email-link-modal__result-meta {
    font-size: 11px;
}

/* ============================================================
   Sweep 3.0.a Etappe 6 — Settings-Tab E-Mail-Accounts
   ============================================================
   Account-Liste, Provider-Picker, Test-Result + WYSIWYG-Editor.
   Grayscale-first, gleiche Card-Hierarchie wie notification-settings.
*/

/* --- Section: Accounts-Liste --- */
.email-accounts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}
.email-accounts-empty {
    padding: var(--space-4);
    text-align: center;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    font-size: 13px;
}
.email-account-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 10px;
}
.email-account-row__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.email-account-row__display {
    font-size: 12px;
    margin-top: 2px;
}
.email-account-row__sync {
    font-size: 12px;
    margin-top: 4px;
    display: inline-block;
}

/* ============================================================
   Sweep 3.0.e.2 L4 — Inline-editierbares Tageslimit in Account-
   Karte. View-Mode: klickbarer Span mit dezentem Stift-Icon, der
   den Edit-Mode aktiviert. Edit-Mode: Input + Save/Cancel (Pulse-
   Standard-Buttons). KEIN Violett.
   ============================================================ */
.email-account-row__limit-wrap {
    margin-top: 4px;
    display: inline-block;
}
.email-account-row__limit {
    font-size: 12px;
    background: transparent;
    border: 0;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    transition: background 120ms var(--ease-out, ease-out);
}
.email-account-row__limit:hover,
.email-account-row__limit:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
    outline: none;
}
:root[data-theme="light"] .email-account-row__limit:hover,
:root[data-theme="light"] .email-account-row__limit:focus-visible {
    background: rgba(10, 10, 10, 0.06);
}
.email-account-row__limit-edit-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.55;
}
.email-account-row__limit:hover .email-account-row__limit-edit-icon,
.email-account-row__limit:focus-visible .email-account-row__limit-edit-icon {
    opacity: 1;
}
.email-account-row__limit-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.email-account-row__limit-input {
    /* Greift Pulse-.input via class — explizite Werte nur fuer
       Inline-Kontext-Verkleinerung. */
    font-variant-numeric: tabular-nums;
}
.email-account-row__default {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    font-weight: 500;
}
.email-account-row__inactive {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    color: var(--color-text-tertiary);
    font-weight: 500;
}
.email-account-row__provider {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}
.email-account-row__menubtn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-tertiary);
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.email-account-row__menubtn:hover {
    background: rgba(148, 163, 184, 0.08);
    color: var(--color-text-primary);
}
.email-account-row-menu {
    position: fixed;
    z-index: 600;
    min-width: 200px;
    background: var(--color-bg-elevated, #1e293b);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
}
.email-account-row-menu button {
    text-align: left;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.email-account-row-menu button:hover { background: rgba(148, 163, 184, 0.08); }
.email-account-row-menu button.is-danger { color: #f87171; }
.email-account-row-menu button.is-danger:hover { background: rgba(248, 113, 113, 0.1); }

.email-accounts-add-row {
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
}

/* --- Account-Modal --- */
.email-account-modal {
    width: min(720px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.email-account-modal__body { padding: var(--space-5); }
.email-account-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.email-modal-block-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--color-text-tertiary);
    margin: var(--space-4) 0 var(--space-2);
}
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.field-row .field:last-child:first-child {
    grid-column: 1 / -1;
}
.email-account-modal .field-row {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .email-account-modal .field-row { grid-template-columns: 1fr 1fr; }
    .email-account-modal .field-row.has-three { grid-template-columns: 2fr 1fr 1fr; }
}

/* Provider-Picker */
.email-provider-picker {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2);
}
@media (max-width: 640px) {
    .email-provider-picker { grid-template-columns: 1fr; }
}
.email-provider-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: var(--space-3);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    transition: border 0.15s ease, background 0.15s ease;
}
.email-provider-opt input[type="radio"] { margin-right: 6px; }
.email-provider-opt:hover { border-color: rgba(148, 163, 184, 0.35); }
.email-provider-opt.is-active {
    border-color: var(--primary);
    background: rgba(124, 58, 237, 0.06);
}
.email-provider-opt.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.email-provider-opt__label { font-weight: 600; font-size: 13px; }
.email-provider-opt__sub { font-size: 11px; }

/* Test-Result */
.email-modal-test-result { margin-top: var(--space-4); }
.email-test-result {
    border-radius: 10px;
    padding: var(--space-3);
    font-size: 13px;
}
.email-test-result--loading {
    background: rgba(148, 163, 184, 0.08);
    color: var(--color-text-secondary);
}
.email-test-result--ok {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.email-test-result--fail {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--color-text-primary);
}
.email-test-result__icon { font-weight: 700; }
.email-test-result__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 2px 0;
    font-size: 13px;
}
.email-test-result__errors {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* --- Signatur-Editor --- */
.signature-editor {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.015);
    overflow: hidden;
}
.signature-editor__toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.3);
    flex-wrap: wrap;
}
.signature-tb-btn {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.signature-tb-btn:hover {
    background: rgba(148, 163, 184, 0.1);
    color: var(--color-text-primary);
}
.signature-tb-sep {
    width: 1px;
    height: 22px;
    background: rgba(148, 163, 184, 0.18);
    margin: 0 6px;
}
.signature-tb-spacer { flex: 1; }
.signature-tb-color {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px;
    cursor: pointer;
}
.signature-tb-color input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}
.signature-tb-color span {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-secondary);
    border-bottom: 2px solid currentColor;
}
.signature-tb-color:hover { background: rgba(148, 163, 184, 0.1); }
.signature-tb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    cursor: pointer;
}
.signature-editor__panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 220px;
}
@media (max-width: 720px) {
    .signature-editor__panes { grid-template-columns: 1fr; }
}
.signature-editor__edit-pane {
    border-right: 1px solid rgba(148, 163, 184, 0.12);
    padding: var(--space-3);
    min-height: 200px;
}
.signature-edit-area {
    min-height: 180px;
    padding: var(--space-2);
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-primary);
    outline: none;
}
.signature-edit-area:focus {
    /* Sweep 3.0.c.0 C0.1: Active-Border konsistent mit Pulse-Standard
       (.input:focus, .select:focus). Vorher: outline 2px lila
       rgba(124, 58, 237, 0.35) — dissonant zum Rest der App. Jetzt:
       Pulse-Primary-Blau-Glow (--primary = #2a34b0 mit Alpha 0.18 fuer
       einen contenteditable-Container, der keinen sichtbaren Border
       hat). box-shadow statt outline → kein Layout-Shift, sauber
       gerundet. */
    outline: none;
    box-shadow: 0 0 0 3px rgba(42, 52, 176, 0.18);
    border-radius: 6px;
}
.signature-edit-html {
    width: 100%;
    min-height: 180px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
}
.signature-editor__preview-pane {
    padding: var(--space-3);
    background: rgba(15, 23, 42, 0.2);
}
.signature-editor__preview-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-2);
}
.signature-preview-area {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-primary);
    min-height: 180px;
}
.signature-editor__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    gap: var(--space-3);
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.signature-editor__hint { font-size: 12px; }
.signature-editor__save-btn.is-dirty {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

/* --- KI-Settings-Section --- */
.email-ki-row {
    margin: var(--space-3) 0;
}
.email-ki-row--sub {
    margin-left: var(--space-5);
    padding-left: var(--space-4);
    border-left: 2px solid rgba(148, 163, 184, 0.15);
}
.email-ki-actions {
    margin-top: var(--space-4);
    display: flex;
    justify-content: flex-end;
}


/* ============================================================
   Sweep 3.0.b Etappe B1 — Compose-Modal fuer Einzelversand
   ============================================================ */
.email-compose-modal {
    /* Sweep 3.0.b.1 P4: Sticky-Footer-Layout. Modal selbst clipped;
       der Body-Bereich scrollt intern, Header + Footer bleiben fix. */
    width: min(820px, 94vw);
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.email-compose-modal .modal-header {
    flex: 0 0 auto;
}
.email-compose-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Sweep 3.0.cleanup R3 — kanonischer Modal-Footer.
 * Pflicht-Pattern (visual-patterns.md): flex-end, gap, border-top,
 * Icon-Buttons. Modal-spezifische Overrides spezialisieren nur Farbe
 * / Background, NICHT das Layout.
 */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.modal-footer .btn-primary {
    min-width: 140px;
}
.modal-footer .btn svg {
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: -2px;
}

.email-compose-modal .modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    background: var(--color-bg-surface);
}
.compose-dusie-hint {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
}
.compose-dusie-hint__label {
    font-size: 13px;
    font-weight: 500;
}
.compose-body-mount {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    overflow: hidden;
}
.compose-body-mount .signature-editor__footer {
    display: none;
}
.compose-body-mount .signature-editor__preview-pane {
    display: none;
}
.compose-body-mount .signature-editor__panes {
    grid-template-columns: 1fr;
}


/* ============================================================
   Sweep 3.0.b.1 P2 - Compose-AN-Combobox
   ============================================================ */
.compose-an-combobox {
    position: relative;
}
.compose-an-input {
    width: 100%;
}
/* Sweep 3.0.c.0.1 L4: z-index hochgesetzt (10500, ueber modal-Stack)
   und opaker Hintergrund — `--color-bg-surface` ist nicht definiert,
   das Panel war semi-transparent und schimmerte ueber den Hint-Text
   und das CC-Label. Pattern matched .pulse-glass-dropdown-panel. */
.compose-an-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10500;
    background: rgba(15, 15, 20, 0.96);
    border: 1px solid rgba(79, 126, 219, 0.30);
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(79, 126, 219, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}
:root[data-theme="light"] .compose-an-panel {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(79, 126, 219, 0.10);
}
.compose-an-panel[hidden] { display: none; }
.compose-an-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--color-text-primary);
}
.compose-an-option:hover,
.compose-an-option:focus {
    background: rgba(99, 102, 241, 0.08);
}
.compose-an-option__primary {
    display: block;
    font-size: 13px;
    font-weight: 500;
}
.compose-an-option__sub {
    display: block;
    font-size: 11px;
    margin-top: 2px;
}
.compose-dusie-hint--default {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
}


/* ============================================================
   Sweep 3.0.b.1 P3 - Button-Spinner waehrend Compose-Modal-Open
   ============================================================ */
.btn .btn-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    vertical-align: middle;
}
.btn .btn-spinner-icon {
    animation: pulse-spin 0.8s linear infinite;
}
@keyframes pulse-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.btn.is-loading {
    cursor: progress;
    opacity: 0.85;
}


/* ============================================================
   Sweep 3.0.c.0.1 L1 — Mail-Modul Tabs-only-Layout (Single-Column)
   ============================================================
   Sidebar entfernt; 6 Ordner sind PulseTabs. Auf engen Viewports
   wrappen die Tabs (statt horizontal zu scrollen) — analog zu
   Lead-Detail-Page mit 7+ Tabs. */
.mail-module-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Tab-Bar darf umbrechen, wenn der Viewport zu schmal wird. */
.pulse-tabs.mail-module-tabs {
    flex-wrap: wrap;
}

/* Warn/Error-Color fuer Tab-Count-Badges (Warteschlange orange, Bounces rot). */
.pulse-tabs__tab .pulse-tabs__tab-count.is-warn {
    background: rgba(234, 88, 12, 0.22);
    color: #ea580c;
    border-color: rgba(234, 88, 12, 0.35);
}
.pulse-tabs__tab .pulse-tabs__tab-count.is-error {
    background: rgba(220, 38, 38, 0.22);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.35);
}

/* Lead-Only-Toggle Active-State ist mit unread-toggle gemeinsam
   definiert (siehe oben — Pulse-V1 Quick-Win). */


/* ============================================================
   Sweep 3.0.c.1 V3 — Mail-Templates-Vollbild-Seite
   ============================================================
   Layout: links Liste (320 px), rechts Editor. Auf engen Viewports
   stapeln sich Liste + Editor untereinander. */
.mail-templates-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-4);
    align-items: start;
    margin-top: var(--space-3);
}
@media (max-width: 1024px) {
    .mail-templates-layout { grid-template-columns: 1fr; }
}

/* ===== Liste links ===== */
.mail-templates-list {
    background: rgba(20, 20, 28, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 480px;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.mail-templates-list__toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mail-templates-list__new {
    width: 100%;
    justify-content: center;
}
.mail-templates-list__search {
    width: 100%;
}
.mail-templates-list__items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
.mail-templates-list__empty {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    font-size: 13px;
}
.mail-templates-list__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: pointer;
    color: var(--color-text-primary, #fff);
    transition: background 120ms ease, border-color 120ms ease;
}
.mail-templates-list__item:hover {
    background: rgba(79, 126, 219, 0.10);
    border-color: rgba(79, 126, 219, 0.25);
}
.mail-templates-list__item.is-active {
    background: rgba(79, 126, 219, 0.18);
    border-color: var(--color-brand-mid, #4f7edb);
    box-shadow: inset 3px 0 0 var(--color-brand-mid, #4f7edb);
}
.mail-templates-list__item-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.mail-templates-list__item-subject {
    font-size: 12px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-templates-list__item-desc {
    font-size: 11px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.8;
}
.mail-templates-list__item-meta {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ===== Editor rechts ===== */
.mail-templates-editor {
    background: rgba(20, 20, 28, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: var(--space-4) var(--space-5);
    min-height: 480px;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.mail-templates-editor__empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    font-size: 14px;
}
.mail-templates-editor__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mail-templates-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: var(--space-3);
}
.mail-templates-editor__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.mail-templates-editor__header-actions {
    display: flex;
    gap: 8px;
}
.mail-templates-editor__body-mount {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    overflow: hidden;
}
.mail-templates-editor__body-mount .signature-editor__footer {
    display: none;
}
.mail-templates-editor__body-mount .signature-editor__preview-pane {
    display: none;
}
.mail-templates-editor__body-mount .signature-editor__panes {
    grid-template-columns: 1fr;
}

/* Variable-Buttons */
.mail-templates-editor__vars {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.mail-templates-editor__vars-hint {
    font-size: 12px;
    margin-bottom: var(--space-1);
}
.mail-templates-var-group {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.mail-templates-var-group legend {
    padding: 0 6px;
    font-size: 11px;
    color: var(--color-text-secondary, rgba(255,255,255,0.7));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mail-templates-var-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(79, 126, 219, 0.10);
    border: 1px solid rgba(79, 126, 219, 0.25);
    border-radius: 8px;
    color: var(--color-text-primary, #fff);
    font-size: 12px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.mail-templates-var-btn:hover {
    background: rgba(79, 126, 219, 0.20);
    border-color: var(--color-brand-mid, #4f7edb);
}
.mail-templates-var-btn code {
    font-family: var(--font-mono, "SF Mono", Menlo, monospace);
    font-size: 11px;
    background: transparent;
    padding: 0;
    color: var(--color-brand-light, #7ab8f0);
}
.mail-templates-var-btn__label {
    color: var(--color-text-secondary, rgba(255,255,255,0.75));
}

.mail-templates-editor__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Light-Theme-Variante */
:root[data-theme="light"] .mail-templates-list,
:root[data-theme="light"] .mail-templates-editor {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(148, 163, 184, 0.25);
}
:root[data-theme="light"] .mail-templates-list__item {
    background: rgba(255, 255, 255, 0.50);
    border-color: rgba(148, 163, 184, 0.18);
    color: #1f2937;
}
:root[data-theme="light"] .mail-templates-list__item.is-active {
    background: rgba(79, 126, 219, 0.12);
}
:root[data-theme="light"] .mail-templates-var-group {
    border-color: rgba(148, 163, 184, 0.25);
}


/* ============================================================
   Sweep 3.0.c.1 V4 — Compose-Modal Template-Picker
   ============================================================
   Toolbar oberhalb des Betreff-Felds + Popover-Picker mit Liste. */
.compose-template-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.compose-template-manage-link {
    text-decoration: none;
}
.compose-template-manage-link:hover {
    text-decoration: underline;
    color: var(--color-brand-light, #7ab8f0);
}

.compose-template-picker__item {
    /* eigener Padding/Spacing-Override fuer die Mehr-Zeilen-Pille */
    padding: 10px 12px;
}
.compose-template-picker__item-name {
    font-size: 13px;
    font-weight: 600;
}
.compose-template-picker__item-subject {
    font-size: 11px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Sweep 3.0.c.2.1 M3 — Variable-Pills im Compose-Modal
   ============================================================
   Wiederverwendung des Templates-Page-Pattern (.mail-templates-var-*)
   damit Pills im Compose visuell IDENTISCH zur Templates-Page sind
   (Mike-Befund: "wie in der Vorlagen-Page"). Container-Margins
   sind Compose-spezifisch, der Pill + Group-Style kommt 1:1 aus
   der Templates-Page. */
.compose-vars {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-1);
    margin-bottom: var(--space-2);
}
.compose-vars__hint {
    font-size: 11px;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
}

/* Fallback-Listen-Item (wird nur genutzt, wenn PulseEmailPreview fehlt). */
.mail-folder-list-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--color-text-primary);
}
.mail-folder-list-item:hover {
    background: rgba(148, 163, 184, 0.08);
}
.mail-folder-list-item__top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px;
}
.mail-folder-list-item__from { font-weight: 600; }
.mail-folder-list-item__subject {
    font-size: 13px;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

/* L2: Action-Bar im Detail-Pane. btn-sm + flex-row. */
.mail-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--space-3);
    align-items: center;
    /* Sweep 3.0.c.2 D7: Action-Bar rechts-aligned, parallel zu
       anderen Pulse-Detail-Patterns (Lead-Detail-Header, Pipeline-
       Card-Aktionen). Loeschen + Endgueltig-Loeschen bleiben am
       rechten Ende mit dem `--separated`-Margin. */
    justify-content: flex-end;
}

/* Sweep 3.0.c.1.3 PB4 — Mail-Detail-Action-Bar als Icon-Buttons.
   Pulse-Pattern (analog Lead-Uebersicht-Kontakt-Icons + Pulse-Header-
   Icon-Buttons): kompakter btn-ghost 36x36-Container, SVG 18x18,
   Hover-Background gleicher Glass-Hauch wie der Header-Settings-Gear.
   Tooltips als title + aria-label fuer Screenreader.
   Disabled-State: opacity 0.4, kein Hover-Effekt, cursor not-allowed.
   `.mail-detail-action--danger`: rote Hover-Farbe + Icon-Tint fuer
   destruktive Aktionen (Loeschen, Endgueltig loeschen).
   `.mail-detail-action--separated`: 8 px linker Abstand grenzt die
   destruktive Aktion visuell von den Communication-/Organize-Actions
   ab. */
.mail-detail-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 8px;
    color: var(--color-text-primary);
    transition: background 140ms ease, color 140ms ease, opacity 140ms ease;
}
.mail-detail-action svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke-width: 2;
}
.mail-detail-action:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.12);
}
.mail-detail-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Sweep 3.0.c.2 D9 — Trash-Icon tatsaechlich rot. PB4 nutzte
   `var(--color-danger, #f87171)` — die Variable existiert nicht im
   Pulse-Stylesheet (Pulse-Konvention heisst `--error`, nicht
   `--color-danger`), der Fallback war zu hellrosa und im Glass-
   Background kaum erkennbar. Jetzt direkt `var(--error)` (= #DC2626
   = Pulse-Standard-Rot), Hover bekommt einen kraeftigeren Background. */
.mail-detail-action--danger {
    color: var(--error) !important;
}
.mail-detail-action--danger svg {
    stroke: var(--error) !important;
}
.mail-detail-action--danger:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.16);
    color: var(--error) !important;
}
.mail-detail-action--separated {
    margin-left: 8px;
}
/* Sweep 3.0.c.2 D8 — Mixed-Mode-Button mit Icon + Label.
   Antworten + Weiterleiten brauchen ein sichtbares Label, weil
   disabled (Future-Feature-Discoverability). Container waechst auto-
   matisch in der Breite, Icon links neben dem Label-Span. */
.mail-detail-action--with-label {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    gap: 6px;
}
.mail-detail-action__label {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}
.mail-detail-status-banner {
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    background: rgba(234, 88, 12, 0.10);
    border: 1px solid rgba(234, 88, 12, 0.25);
    color: var(--color-text-primary);
    font-size: 13px;
    margin-bottom: var(--space-3);
}
.mail-detail-body pre {
    white-space: pre-wrap;
    word-break: break-word;
    font: inherit;
    margin: 0;
}


/* ============================================================
   Sweep 3.0.c.0 C3 — Lead-Detail-Mail Hover-Delete + Deleted-State
   ============================================================ */
.lead-detail-mail__item {
    position: relative;
}
/* Sweep 3.0.c.2.4 P3 — Reserve-Padding fuer Hover-Action-Slot.
   Mike-Befund: Delete-X (position:absolute, right:8px) ueberlagerte
   die Datum-Spalte des Headers, weil der Header rechts nur 16px
   Padding hatte. Hover-Button ist 24px + 8px Offset = 32px Breite,
   plus 8px Sicherheits-Abstand zum Date = 40px Reserve. Reserve
   ist permanent (nicht nur on-hover), damit Text-Reflow beim Hover
   nicht zucken faengt.
   Identisches Padding fuer Subject-Zeile, sonst rutscht der lange
   Betreff unter den absolut-positionierten Button. */
.lead-detail-mail__header {
    padding-right: 48px;
}
.lead-detail-mail__subject {
    padding-right: 48px;
}
.lead-detail-mail__hover-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.12s ease;
    /* z-index sichert dass der Button bei Hover ueber Body-Inhalten
       liegt, auch wenn die Mail expanded ist und Body unter Header
       herangerendert wird. */
    z-index: 2;
}
.lead-detail-mail__item:hover .lead-detail-mail__hover-actions,
.lead-detail-mail__item:focus-within .lead-detail-mail__hover-actions {
    opacity: 1;
}
.lead-detail-mail__delete-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(148, 163, 184, 0.15);
    color: var(--color-text-tertiary);
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lead-detail-mail__delete-btn:hover {
    background: rgba(220, 38, 38, 0.15);
    color: #b91c1c;
}
.lead-detail-mail__item.is-deleted {
    opacity: 0.6;
}
.lead-detail-mail__deleted-badge {
    color: var(--color-text-tertiary);
    font-size: 14px;
}

/* ============================================================
   Sweep 3.0.c.3 B3 — Bulk-Compose-Modal
   ============================================================ */
.bulk-modal {
    width: min(720px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.bulk-modal .modal-body {
    overflow-y: auto;
    padding: var(--space-4);
}
.bulk-recipients {
    margin-bottom: var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: var(--space-2) var(--space-3);
    background: rgba(15, 23, 42, 0.18);
}
.bulk-recipients summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-secondary);
    user-select: none;
}
.bulk-recipients-list {
    list-style: none;
    padding: var(--space-2) 0 0 0;
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
}
.bulk-recipient-item {
    padding: 4px 0;
    font-size: 13px;
    color: var(--color-text-primary);
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}
.bulk-recipient-item:last-child { border-bottom: none; }
.bulk-recipient-firma { font-weight: 500; }
.bulk-recipient-email { font-size: 11px; }
.bulk-rate-field {
    margin-top: var(--space-3);
}

/* ============================================================
   Sweep 3.0.c.3 B4 — Mail-Bulk-Vollbild-Seite
   ============================================================ */
.bulk-page-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--space-4);
    margin-top: var(--space-3);
    align-items: start;
}
.bulk-page-sidebar {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.bulk-page-sidebar__header h3 {
    margin: 0 0 4px 0;
    font-size: 14px;
}
.bulk-page-search {
    width: 100%;
}
.bulk-page-lead-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}
.bulk-page-lead {
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    padding: 6px 0;
}
.bulk-page-lead.is-selected {
    background: rgba(79, 126, 219, 0.06);
}
.bulk-page-lead__row {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    cursor: pointer;
}
.bulk-page-lead__info {
    flex: 1;
    min-width: 0;
}
.bulk-page-lead__firma {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bulk-page-lead__meta {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bulk-page-compose {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.bulk-page-compose__title {
    margin: 0;
    font-size: 16px;
}
.bulk-page-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.text-danger { color: var(--color-error, #ef4444); }

@media (max-width: 1024px) {
    .bulk-page-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Sweep 3.0.c.3 B5 — Bulk-Banner in der Warteschlange
   ============================================================ */
.mail-bulk-banner {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    border-left: 3px solid var(--color-brand-mid, #4f7edb);
}
.mail-bulk-banner__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}
.mail-bulk-banner__meta {
    font-size: 11px;
    margin-bottom: var(--space-2);
}
.mail-bulk-banner__actions {
    display: flex;
    gap: var(--space-2);
}
/* Sweep 3.0.c.3.2 Q1: Status-Severity-Border. Blau = queued/sending,
   Gelb = pausiert/partial (Mike-Sicht: "Hey, hier liegt was rum"). */
.mail-bulk-banner.is-paused {
    border-left-color: var(--color-status-warn, #d4a437);
}
.mail-bulk-banner.is-partial {
    border-left-color: var(--color-status-warn, #d4a437);
}

/* ============================================================
   Sweep 3.0.c.3.1 H3 — Bulk-Modal Footer rechts-aligned
   Sweep 3.0.c.3.2 Q3 — Footer-Polish (Spacing, Hierarchie, Trennlinie)
   ============================================================ */
.bulk-modal .modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* Refactoring-UI: groesserer Gap zwischen unverwandten Buttons,
       damit "Abbrechen" und "Versand starten" optisch separiert sind. */
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    /* Leicht abgesetzter Hintergrund signalisiert "das ist eine
       Aktionsleiste, kein Inhalt" — gleicher Trick wie Mail-Toolbar. */
    background: rgba(15, 23, 42, 0.30);
}
.bulk-modal .modal-footer .btn-primary {
    /* Primary-Button etwas mehr Druck — Refactoring-UI: bigger weight
       on the single most important action on the page. */
    min-width: 168px;
}
/* Vorlage-Picker-Icon: 2px Abstand zum Text, currentColor erbt sich
   vom Button-Foreground (egal ob secondary/loading). */
.bulk-modal .compose-template-toolbar .btn-icon,
.email-compose-modal .compose-template-toolbar .btn-icon {
    vertical-align: -2px;
    margin-right: 4px;
}

/* ============================================================
   Sweep 3.0.c.4 SU4 / 3.0.ui-foundation U5 — Suppression-Liste-Seite
   ============================================================
   Layout: .pulse-list-card-Wrapper mit Pills + Toolbar + Tabelle in
   EINER Glass-Card (U5-Refactor, vorher zwei Cards untereinander).
   Toolbar via PulseListToolbar.renderListToolbar, Pills via
   PulseFilterPills mit Count-Badges. Trash-Button nutzt
   .pulse-row-icon-btn--danger (U4). Die alten Modul-Custom-Klassen
   .suppression-toolbar / -left / -search / -pills / -pill sind in
   U5 entfernt worden — sie werden nicht mehr gerendert.

   Pattern-Cell: Monospace fuer klare Address-/Domain-Optik. */
.suppression-pattern {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 12.5px;
    color: var(--color-text-primary);
    word-break: break-all;
}
.suppression-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(148, 163, 184, 0.22);
}
.suppression-type-address {
    color: var(--color-brand-light, #7ab8f0);
    background: rgba(79, 126, 219, 0.10);
}
.suppression-type-domain {
    color: var(--color-status-warn, #d4a437);
    background: rgba(212, 164, 55, 0.12);
}
.suppression-notes {
    display: inline-block;
    max-width: 280px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Trash-Aktion in der Tabelle: nutzt jetzt .pulse-row-icon-btn--danger
 * (Co-Selektor in U4-Block oben). Aktions-Spalte rechts bündig. */
.pulse-data-table td:last-child:has(.suppression-delete-btn),
.pulse-data-table td:last-child:has(.pulse-row-icon-btn) {
    width: 48px;
    text-align: right;
}

.suppression-add-modal {
    width: min(540px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.suppression-add-modal .modal-body {
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.suppression-add-modal .modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.30);
}

/* ==========================================================================
 * Sweep 3.0.ui-foundation Etappe U2 — PulseFilterPills (kanonisch).
 * ==========================================================================
 *
 * Wiederverwendbare Filter-Pills-Reihe. Zwei Varianten:
 *   - primary (Tab-artig, fett, Brand-Primary-BG aktiv) — entspricht
 *     dem alten .leads-stage-pill
 *   - secondary (Filter-artig, dezenter, Brand-Mid-BG aktiv) —
 *     entspricht dem alten .leads-status-pill
 *
 * Co-Selektoren auf die alten Klassen (.leads-stage-pill /
 * .leads-status-pill / .mail-filter-pill / .filter-pill) halten die
 * Backwards-Compat: jede dieser Stellen sieht durch das gleiche
 * Styling-Block IDENTISCH aus wie eine .pulse-filter-pill. Migration
 * der Markup-Klassen läuft in eigenen Folge-Sweeps.
 */
.pulse-filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pulse-filter-pills--primary {
    margin-bottom: 12px;
}
.pulse-filter-pills--secondary {
    margin-bottom: 4px;
    gap: 6px;
}

/* === Primary-Pill (Tab-artig) — Co-Selektor mit .leads-stage-pill ===
 * Lead-Übersicht ist der Goldstandard, der hier referenziert wird.
 * .pulse-filter-pill--primary erbt exakt die Tokens, .leads-stage-pill
 * läuft via gemeinsamem Selektor mit. */
.pulse-filter-pill--primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(255,255,255,0.18));
    background: var(--color-glass-bg, rgba(255,255,255,0.06));
    color: var(--color-text-primary, #fff);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease, filter 160ms ease, color 160ms ease;
}
.pulse-filter-pill--primary:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.1));
    border-color: rgba(255,255,255,0.24);
    filter: brightness(1.08);
}
.pulse-filter-pill--primary.is-active {
    background: var(--color-brand-primary, #2a34b0);
    border-color: var(--color-brand-primary, #2a34b0);
    box-shadow: var(--color-brand-glow, 0 0 24px rgba(42, 52, 176, 0.3));
    color: #ffffff;
}

/* === Secondary-Pill (Filter-artig) === */
.pulse-filter-pill--secondary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(255,255,255,0.16));
    background: var(--color-glass-bg, rgba(255,255,255,0.04));
    color: var(--color-text-secondary, rgba(255,255,255,0.78));
    font-size: var(--text-xs, 12px);
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease,
                border-color 160ms ease, box-shadow 160ms ease,
                filter 160ms ease;
}
.pulse-filter-pill--secondary:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.09));
    color: var(--color-text-primary, #fff);
    border-color: rgba(255,255,255,0.24);
    filter: brightness(1.05);
}
.pulse-filter-pill--secondary.is-active {
    background: var(--color-brand-mid, #4f7edb);
    border-color: var(--color-brand-mid, #4f7edb);
    box-shadow: 0 0 16px var(--color-brand-glow-light, rgba(122, 184, 240, 0.35));
    color: #ffffff;
}
.pulse-filter-pill--secondary.is-muted {
    opacity: 0.5;
    padding: 4px 10px;
    font-size: 11px;
}
.pulse-filter-pill--secondary.is-muted:hover,
.pulse-filter-pill--secondary.is-muted.is-active {
    opacity: 1;
}

/* === Counter-Badge in Pills === */
.pulse-filter-pill__count {
    font-variant-numeric: tabular-nums;
    color: var(--color-brand-mid, #4f7edb);
    font-weight: 600;
    margin-left: 2px;
}
.pulse-filter-pill--primary.is-active .pulse-filter-pill__count {
    color: var(--color-brand-light, #7ab8f0);
}
.pulse-filter-pill--secondary.is-active .pulse-filter-pill__count {
    color: #ffffff;
}

/* ==========================================================================
 * Sweep 3.0.ui-foundation Etappe U3 — PulseListToolbar (kanonisch).
 * ==========================================================================
 *
 * Listen-Toolbar mit Such-Input + optionalen Filter-Pills + Action-
 * Buttons IN EINER Box. Das Markup wird vom JS-Helper
 * renderListToolbar() erzeugt; die Toolbar lebt INNERHALB der
 * umschließenden Glass-Card (z.B. .pulse-list-card), NICHT als
 * eigenständige Card. Die Card wird von der Aufrufer-Seite gestellt
 * (Pattern: Pills + Toolbar + Tabelle in einer Card — Lead-
 * Übersicht-Goldstandard).
 *
 * Token-Quelle: .leads-toolbar / .leads-search-v3 / .leads-toolbar-btn
 * aus der Lead-Übersicht (style.css Z. 16859ff / 18334ff / 16897ff).
 */
.pulse-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 12px;
}
.pulse-list-toolbar__left {
    /* Sweep 3.0.ui-foundation.a1 — flex-basis + gap 1:1 zum Lead-Pool-
     * Pattern (.leads-toolbar-left: flex 1 1 280px, gap 8px). 320px /
     * 12px aus U3 führten in Kombination mit dem inline-flex-Search
     * zum Überlauf bei schmalen Karten. */
    flex: 1 1 280px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pulse-list-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* === Search-Input ===
 * Sweep 3.0.ui-foundation.a1 — Overflow-Fix: das exakte Lead-Pool-
 * Muster (.leads-search-v3) reproduzieren. Drei Schlüssel:
 *   1. display: flex (NICHT inline-flex). inline-flex hat keine
 *      deterministische Schrumpf-Berechnung im äußeren Flex-Container;
 *      Sub-Pixel-Browser-Defaults konnten das Such-Input über den
 *      Container hinausschieben.
 *   2. flex: 1 1 auto (NICHT 1 1 240px). flex-basis: auto leitet
 *      die initiale Breite vom Inhalt ab, nicht von einer hartcodier-
 *      ten Schwelle, die min-width: 0 effektiv ausgehebelt hat.
 *   3. box-sizing: border-box (war nicht gesetzt). Der 38px-Padding-
 *      Left für die absolute Lupe gehört IN die flex-basis-
 *      Rechnung, nicht obendrauf.
 *
 * Plus am Inner-Input: width: 100% + min-width: 0. <input type="search">
 * hat eine UA-intrinsische Mindestbreite (~200px in Chromium); ohne
 * width: 100% kann der Browser sie gegen min-width: 0 durchsetzen
 * und der Inhalt sprengt den .__search-Container. */
.pulse-list-toolbar__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 0 12px 0 38px;
    border-radius: 10px;
    border: 1px solid var(--color-border, rgba(255,255,255,0.14));
    background: var(--color-glass-bg, rgba(255,255,255,0.04));
    transition: border-color 120ms ease, box-shadow 120ms ease,
                background 120ms ease;
}
.pulse-list-toolbar__search:hover {
    border-color: rgba(255,255,255,0.24);
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.06));
}
.pulse-list-toolbar__search:focus-within {
    border-color: var(--color-brand-mid, #4f7edb);
    box-shadow: 0 0 0 3px var(--color-brand-glow-light,
        rgba(122, 184, 240, 0.18));
}
.pulse-list-toolbar__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted, rgba(255,255,255,0.45));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
/* Sweep 3.0.ui-foundation.a2 — Doppel-Box-Fix.
 *
 * Wurzel-Ursache: die globale D5-Premium-Forms-Regel (style.css
 * Z. 5694ff) trifft `input[type="search"]` mit Specificity 0,1,1 und
 * setzt border + background + border-radius + height. Mein eigenes
 * `.pulse-list-toolbar__search-input` hatte nur Specificity 0,1,0
 * (Klasse) und wurde komplett überstimmt — das Input bekam dadurch
 * sein eigenes Box-Set INNERHALB des Outer-Containers, sichtbar als
 * zweite Box (Mike-Screenshot: zwei gestapelte Felder).
 *
 * Fix — 1:1 das Lead-Pool-Muster (.leads-search-v3-input,
 * style.css Z. 18397ff):
 *   1. Höhere Specificity durch Co-Selektor-Liste (3 Selektoren,
 *      einer mit input[type="search"] um die globale Regel direkt zu
 *      matchen).
 *   2. !important auf JEDE visuelle Eigenschaft die der globale
 *      Pre-Reset sonst durchsetzen kann.
 *   3. Pseudo-States (:hover / :focus / :focus-visible / :active /
 *      :-webkit-autofill) explizit separat überschreiben — sonst
 *      springt der hover-State auf white-Background um.
 *   4. Webkit-Pseudo-Elements (::-webkit-search-cancel-button etc.)
 *      auf display:none für saubere Optik. */
.pulse-list-toolbar__search-input,
.pulse-list-toolbar__search input[type="search"],
.pulse-list-toolbar__search input.pulse-list-toolbar__search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 100% !important;
    padding: 0 !important;
    margin: 0;
    color: inherit;
    font-size: var(--text-sm, 13px);
    line-height: 1;
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
.pulse-list-toolbar__search-input:hover,
.pulse-list-toolbar__search input[type="search"]:hover,
.pulse-list-toolbar__search-input:focus,
.pulse-list-toolbar__search input[type="search"]:focus,
.pulse-list-toolbar__search-input:focus-visible,
.pulse-list-toolbar__search input[type="search"]:focus-visible,
.pulse-list-toolbar__search-input:active,
.pulse-list-toolbar__search input[type="search"]:active {
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}
.pulse-list-toolbar__search-input::placeholder {
    color: var(--color-text-muted, rgba(255,255,255,0.45));
}
.pulse-list-toolbar__search-input::-webkit-search-decoration,
.pulse-list-toolbar__search-input::-webkit-search-cancel-button,
.pulse-list-toolbar__search-input::-webkit-search-results-button,
.pulse-list-toolbar__search-input::-webkit-search-results-decoration {
    display: none;
}
.pulse-list-toolbar__search-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* === Pills-Slot in der Toolbar (Filter-Pills neben der Suche) === */
.pulse-list-toolbar__pills:empty {
    display: none;
}
.pulse-list-toolbar__pills .pulse-filter-pills {
    margin-bottom: 0;
}

/* === Action-Button (rechte Seite) ===
 * Tokens 1:1 aus .leads-toolbar-btn (style.css Z. 16897ff). */
.pulse-list-toolbar__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border, rgba(255,255,255,0.14));
    background: var(--color-glass-bg, rgba(255,255,255,0.04));
    color: var(--color-text-primary, rgba(255,255,255,0.9));
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease,
                box-shadow 120ms ease, color 120ms ease;
}
.pulse-list-toolbar__action-btn:hover {
    background: var(--color-glass-bg-hover, rgba(255,255,255,0.08));
    border-color: rgba(255,255,255,0.24);
}
.pulse-list-toolbar__action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pulse-list-toolbar__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.pulse-list-toolbar__action-btn--primary {
    background: var(--color-brand-primary, #2a34b0);
    border-color: var(--color-brand-primary, #2a34b0);
    color: #ffffff;
}
.pulse-list-toolbar__action-btn--primary:hover {
    filter: brightness(1.1);
    background: var(--color-brand-primary, #2a34b0);
    border-color: var(--color-brand-primary, #2a34b0);
}
.pulse-list-toolbar__action-btn--danger {
    color: #ff6b6b;
}
.pulse-list-toolbar__action-btn--danger:hover {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.32);
    color: #ff6b6b;
}
.pulse-list-toolbar__action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-brand-primary, #2a34b0);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: 2px;
}
.pulse-list-toolbar__slot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
 * Sweep 3.0.ui-foundation Etappe U4 — PulseListCard (Glass-Card-Wrapper)
 * + Row-Icon-Button (kanonisch).
 * ==========================================================================
 *
 * Container-Pattern für eine Listen-Seite: ALLES (Pills + Toolbar +
 * Tabelle) sitzt in EINER Card. Verhindert das Anti-Pattern "zwei
 * Glass-Cards untereinander" (Mike-Befund auf Suppression-Page).
 *
 * Tokens 1:1 aus .card.leads-table-card (style.css Z. 16625ff).
 *
 * Plus: kanonische .pulse-row-icon-btn-Klasse für inline Row-Actions
 * (Trash / Pause / Resume / Stop / Edit) — Tokens 1:1 aus
 * .pulse-data-table__row-action-btn / .leads-row-action-btn
 * (style.css Z. 19412ff). Co-Selektoren auf die alten Custom-Klassen
 * .btn-icon und .suppression-delete-btn garantieren, dass NEUE Stellen
 * konsistent aussehen, und ALTE Aufrufer ohne Re-Markup das gleiche
 * Visual bekommen.
 */
.pulse-row-icon-btn,
.suppression-delete-btn,
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-subtle, rgba(255, 255, 255, 0.55));
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease,
                border-color 120ms ease;
}
.pulse-row-icon-btn:hover,
.btn-icon:hover {
    background: rgba(79, 126, 219, 0.12);
    color: var(--color-brand-mid, #4f7edb);
}
.pulse-row-icon-btn:disabled,
.btn-icon:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.pulse-row-icon-btn--danger,
.suppression-delete-btn {
    color: rgba(248, 113, 113, 0.85);
}
.pulse-row-icon-btn--danger:hover,
.suppression-delete-btn:hover {
    background: rgba(248, 113, 113, 0.10);
    color: rgb(248, 113, 113);
}

/* Row-Action-Container: rechtsbündig in der Tabellen-Zelle. */
.pulse-row-icon-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.pulse-list-card {
    margin-top: 0;
}
.pulse-list-card > .pulse-filter-pills--primary {
    margin-top: 0;
    margin-bottom: 10px;
}
.pulse-list-card > .pulse-filter-pills--secondary {
    margin-top: 0;
    margin-bottom: 12px;
}
.pulse-list-card > .pulse-list-toolbar {
    margin-top: 4px;
}
.pulse-list-card > .pulse-data-table-mount {
    margin-top: 0;
}

/* === Backwards-Compat Aliase ===
 * Suppression/Sequences nutzten bisher die ungestylte Klasse
 * .filter-pill — sie bekommt jetzt das Primary-Styling. Die Mail-
 * Sub-Toolbar-Pille .mail-filter-pill und die alten Lead-Übersicht-
 * Pillen .leads-stage-pill / .leads-status-pill behalten ihr
 * existierendes Styling (siehe Z. 16613ff / 25571ff), Co-Selektoren
 * hier garantieren nur, dass NEUE Stellen, die .filter-pill ohne
 * Variant verwenden, nicht hässlich aussehen. */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.18));
    background: var(--color-glass-bg, rgba(255, 255, 255, 0.06));
    color: var(--color-text-primary, #fff);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease, filter 160ms ease, color 160ms ease;
}
.filter-pill:hover {
    background: var(--color-glass-bg-hover, rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.24);
    filter: brightness(1.08);
}
.filter-pill.is-active,
.filter-pill.active {
    background: var(--color-brand-primary, #2a34b0);
    border-color: var(--color-brand-primary, #2a34b0);
    box-shadow: var(--color-brand-glow, 0 0 24px rgba(42, 52, 176, 0.3));
    color: #ffffff;
}

/* ============================================================
   Sweep 3.0.e3 K4 — KI-Wissens-Page (/mails/wissen)
   ============================================================
   Drei sektionsweise Glass-Cards: Briefing-Textarea, Fakten-Liste mit
   Inline-Add + Edit/Delete, Reply-Templates-Tabelle. KEIN Violett.
*/
.wissen-briefing-card,
.wissen-facts-card,
.wissen-templates-card {
    margin-bottom: var(--space-4, 16px);
}
.wissen-briefing-input {
    width: 100%;
    min-height: 120px;
    margin-top: var(--space-3, 12px);
    resize: vertical;
    font-family: inherit;
}
.wissen-briefing-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px);
}
.wissen-fact-add-row {
    display: flex;
    gap: var(--space-2, 8px);
    margin: var(--space-3, 12px) 0;
}
.wissen-fact-add-row .pulse-input {
    flex: 1 1 auto;
    min-width: 0;
}
.wissen-facts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wissen-fact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
:root[data-theme="light"] .wissen-fact-row {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.06);
}
.wissen-fact-text {
    flex: 1 1 auto;
    color: var(--color-text-primary);
    font-size: 13px;
    line-height: 1.45;
}
.wissen-fact-actions {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}
.wissen-fact-edit-form {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.wissen-fact-edit-form .pulse-input {
    flex: 1 1 auto;
    min-width: 0;
}
.wissen-facts-empty {
    padding: 18px 12px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md, 8px);
}
:root[data-theme="light"] .wissen-facts-empty {
    background: rgba(10, 10, 10, 0.02);
    border-color: rgba(10, 10, 10, 0.10);
}
.wissen-template-title {
    color: var(--color-text-primary);
    font-weight: 500;
}
.wissen-template-body-mount {
    margin-top: 4px;
    min-height: 200px;
}

/* ============================================================
   Sweep 3.0.e.1 P8 — Lead-Übersicht: Score nur Zahl + Sequenz-Spalte
   ============================================================
   - .lead-score-num: nur die Zahl, kompakt, Brand-Text-Farbe
   - .lead-sequence-icons: erbt das Kontakt-Icon-Pattern via
     .lead-contact-icons-Basis. KEIN extra Styling — nur ein
     einzelnes Icon das die has/none-Farben aus .lead-contact-ico
     übernimmt. Pulse-Brand-Farben, KEIN Violett.
*/
.lead-score-num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 14px;
    /* Sweep 3.0.e.2 L3: theme-aware primary-Token statt --text
       (slate-900 dunkel → auf dunkler Tabelle unlesbar). Dark=weiss,
       Light=dunkel. KEIN Violett. */
    color: var(--color-text-primary);
}
.lead-sequence-icons {
    /* erbt von .lead-contact-icons — nur 1 Icon, daher schmaler */
    min-width: auto;
}

/* ============================================================
   Sweep 3.0.e.1 P7 — Sequenz-Block in Lead-Detail-Sidebar
   ============================================================
   Aktive Enrollment-Anzeige in der rechten Sidebar (über Notizen).
   Pulse-Brand-Farben (existierende enrollment-status-badge-Klassen).
   KEIN Violett.
*/
.lead-detail__sidebar-sequence-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.06));
}
.lead-detail__sidebar-sequence-row:last-child {
    border-bottom: 0;
}
.lead-detail__sidebar-sequence-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.lead-detail__sidebar-sequence-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text, #ffffff);
    text-decoration: none;
}
.lead-detail__sidebar-sequence-name:hover {
    text-decoration: underline;
}
.lead-detail__sidebar-sequence-meta {
    font-size: 11px;
    margin-bottom: 8px;
}
.lead-detail__sidebar-sequence-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.lead-detail__sidebar-sequence-actions .btn {
    padding: 4px 10px;
    font-size: 11px;
    height: auto;
}

/* ============================================================
   Sweep 3.0.e.1 P3 — Reply-Loading-Spinner Animation
   ============================================================
   Standalone-Spinner (außerhalb eines .btn-Containers) braucht eine
   eigene Animations-Regel. pulse-spin-Keyframe ist global definiert
   (siehe Sweep 3.0.b.1 P3); wir hängen sie hier nur an die spezifische
   Klasse. color:brand-primary statt Standard-Text — visuelles Echo
   zum "KI"-Branding ohne Violett.
*/
.reply-ai-loading-spinner {
    animation: pulse-spin 0.9s linear infinite;
    color: var(--color-brand-primary, #4a6cf7);
    transform-origin: center;
    display: inline-block;
}

/* ============================================================
   Sweep 3.0.e.1 P2 — Reply-Varianten-Picker (Tab-Layout)
   ============================================================
   3 Tabs (A/B/C), aktiver Tab zeigt vollständige Variante. KEIN
   Truncation. Pulse-Brand-Farben — KEIN Violett.
*/
.reply-ai-picker__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
}
.reply-ai-picker__hint {
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.5;
}
.reply-ai-picker__close {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px;
    color: var(--text-soft, rgba(255,255,255,0.7));
}
.reply-ai-picker__close:hover {
    color: var(--text, #ffffff);
}
.reply-ai-picker__tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.08));
    margin-bottom: 0;
}
.reply-ai-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    /* Sweep 3.0.e.2 L1: theme-aware Token. Inactive = sekundaer-hell,
       hover/active = primary-hell. KEIN Violett. */
    color: var(--color-text-secondary);
    transition: color 0.15s, border-color 0.15s;
}
.reply-ai-tab:hover {
    color: var(--color-text-primary);
}
.reply-ai-tab.is-active {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-brand-mid);
}
.reply-ai-tab__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.reply-ai-tab__desc {
    font-size: 11px;
    color: var(--color-text-tertiary);
    line-height: 1.2;
}
.reply-ai-tab.is-active .reply-ai-tab__desc {
    /* Sweep 3.0.e.2 L1: brand-light fuer guten Kontrast auf dunklem
       Glass-Background (brand-primary war zu dunkel). KEIN Violett. */
    color: var(--color-brand-light);
}
.reply-ai-picker__panels {
    max-height: 65vh;
    overflow-y: auto;
    padding: 16px 20px;
}
.reply-ai-tab-panel[hidden] {
    display: none;
}
.reply-ai-tab-panel__subject {
    font-size: 14px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.08));
    /* Sweep 3.0.e.2 L1: theme-aware primary-Token statt --text
       (das ist immer slate-900 dunkel → auf dunklem Glass unlesbar). */
    color: var(--color-text-primary);
}
/* Sweep 3.0.e3 K5 — Template-Origin-Hinweis im Variante-Tab. Dezent,
   pulse-brand-mid Akzent (KEIN Violett). */
.reply-ai-tab-panel__template-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-pill, 9999px);
    background: rgba(79, 126, 219, 0.10);
    color: var(--color-text-secondary);
    border: 1px solid rgba(79, 126, 219, 0.24);
    margin-bottom: 10px;
}
.reply-ai-tab-panel__template-hint b {
    color: var(--color-text-primary);
    font-weight: 600;
}
.reply-ai-picker__knowledge-hint {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 9999px);
    background: rgba(122, 184, 240, 0.10);
    color: var(--color-text-tertiary);
    border: 1px solid rgba(122, 184, 240, 0.22);
    margin-left: 8px;
    display: inline-block;
}
.reply-ai-tab-panel__body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-primary);
    margin-bottom: 20px;
}
.reply-ai-tab-panel__body p {
    margin: 0 0 12px;
}
.reply-ai-tab-panel__body p:last-child {
    margin-bottom: 0;
}
.reply-ai-tab-panel__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft, rgba(255,255,255,0.08));
}

/* ============================================================
   Sweep 3.0.e.1 P1 — Reply-Buttons im Mail-Detail-Header
   ============================================================
   Echte Buttons (statt schwacher Hover-Ghosts) für "Antworten" und
   "Pulse-KI Antwort". Pulse-Brand-Farben — KEIN Violett. btn-primary
   nutzt die Brand-Primary-Variable, btn-secondary die Soft-Surface.
*/
.mail-detail-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    height: 36px;
    border-radius: 8px;
    line-height: 1;
}
.mail-detail-reply-btn svg {
    flex-shrink: 0;
}
.mail-detail-reply-btn__label {
    line-height: 1;
}
.mail-detail-actions .mail-detail-reply-btn + .mail-detail-reply-btn {
    margin-left: 4px;
}

/* ============================================================
   Sweep 3.0.d.3 A3 — Native-Input-Lesbarkeit
   ============================================================
   time- + date- + datetime-local-Inputs erbten weiß-auf-weiß im
   Dark-Mode (kein UA-Dark-Schema). Drei Maßnahmen:
   1. color-scheme:dark teilt dem Browser den Theme-Kontext mit
      → calendar-picker, spinner, AM/PM-Toggle werden dunkel
   2. Explizite color + caret-color für die Werte selbst
   3. Calendar-picker-indicator wird invertiert, sonst schwarzes
      Icon auf dunklem Hintergrund
*/
input[type="time"].pulse-input,
input[type="time"].input,
input[type="date"].pulse-input,
input[type="date"].input,
input[type="datetime-local"].pulse-input,
input[type="datetime-local"].input,
input[type="month"].pulse-input,
input[type="month"].input,
input[type="week"].pulse-input,
input[type="week"].input {
    color-scheme: dark;
    color: var(--text, #ffffff);
    caret-color: var(--text, #ffffff);
}

/* Calendar-Picker-Icon invertieren (sonst schwarzes Lupen-Icon
   auf dunklem Input). filter:invert macht das User-Agent-SVG
   farb-neutral und damit auf dunklem Hintergrund sichtbar. */
input[type="time"].pulse-input::-webkit-calendar-picker-indicator,
input[type="time"].input::-webkit-calendar-picker-indicator,
input[type="date"].pulse-input::-webkit-calendar-picker-indicator,
input[type="date"].input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].pulse-input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].input::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
    opacity: 0.7;
    cursor: pointer;
}

input[type="time"].pulse-input::-webkit-calendar-picker-indicator:hover,
input[type="date"].pulse-input::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"].pulse-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* =========================================================================
   Sweep 3.1.b DB3 — Dashboard-Handlungs-Bereich
   ========================================================================= */

.dashboard-action-area {
    margin-top: 32px;
    margin-bottom: 32px;
}
.dashboard-action-area__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 16px;
    gap: 12px;
}
.dashboard-action-area__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}
.dashboard-action-area__meta {
    font-size: 13px;
    color: var(--color-text-muted);
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1200px) {
    .dashboard-action-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .dashboard-action-grid { grid-template-columns: 1fr; }
}

.dashboard-action-card {
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    transition: transform 200ms var(--ease-out),
                border-color 200ms var(--ease-out);
}
.dashboard-action-card:hover {
    transform: translateY(-1px);
}
.dashboard-action-card.is-collapsed {
    min-height: 0;
    opacity: 0.55;
}
.dashboard-action-card.is-collapsed .dashboard-action-card__body {
    display: none;
}

.dashboard-action-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.dashboard-action-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-brand-mid, #6B7BD8);
    flex-shrink: 0;
}
[data-theme="light"] .dashboard-action-card__icon {
    background: rgba(15, 23, 42, 0.04);
}
.dashboard-action-card__head-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.dashboard-action-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1 1 auto;
    min-width: 0;
}
.dashboard-action-card__counter {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 1px 9px;
    min-width: 24px;
    text-align: center;
}
[data-theme="light"] .dashboard-action-card__counter {
    background: rgba(15, 23, 42, 0.04);
}

.dashboard-action-card__body {
    flex: 1 1 auto;
    min-height: 0;
}
.dashboard-action-card__empty {
    padding: 18px 0;
    font-size: 13px;
}

.dashboard-action-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dashboard-action-item__btn {
    width: 100%;
    display: block;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 10px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    transition: background 150ms var(--ease-out),
                border-color 150ms var(--ease-out);
}
.dashboard-action-item__btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--color-border);
}
[data-theme="light"] .dashboard-action-item__btn:hover {
    background: rgba(15, 23, 42, 0.03);
}
.dashboard-action-item__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.dashboard-action-item__title {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.dashboard-action-item__meta {
    font-size: 11px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.dashboard-action-item__sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-action-item__snippet {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dashboard-action-item__chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    font-size: 11px;
    color: var(--color-text-secondary);
}
[data-theme="light"] .dashboard-action-item__chip {
    background: rgba(15, 23, 42, 0.04);
}

.dashboard-action-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 4px 14px;
}
.dashboard-action-empty__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(120, 200, 140, 0.10);
    border: 1px solid rgba(120, 200, 140, 0.35);
    color: rgb(120, 200, 140);
}
.dashboard-action-empty__text {
    font-size: 14px;
    color: var(--color-text-primary);
}

/* =========================================================================
   Sweep 3.1.b DB4 — KPI-Reihe (5 Kacheln)
   ========================================================================= */

.dashboard-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 1280px) {
    .dashboard-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .dashboard-kpi-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .dashboard-kpi-row { grid-template-columns: 1fr; }
}

.dashboard-kpi-tile {
    position: relative;
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    min-height: 110px;
    transition: transform 200ms var(--ease-out),
                border-color 200ms var(--ease-out);
}
.dashboard-kpi-tile:hover {
    transform: translateY(-1px);
}
/* Sweep 3.3.4e F3: .dashboard-kpi-tile--accent (blauer Top-Strich an der
   Antwortquote-Kachel) entfernt — die Hervorhebung sah wie ein Fehler
   aus, alle 5 KPI-Kacheln sind jetzt konsistent. */

.dashboard-kpi-tile__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.dashboard-kpi-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    color: var(--color-brand-mid, #6B7BD8);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
}
[data-theme="light"] .dashboard-kpi-tile__icon {
    background: rgba(15, 23, 42, 0.04);
}
.dashboard-kpi-tile__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: 600;
}
.dashboard-kpi-tile__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}
.dashboard-kpi-tile__sub {
    font-size: 12px;
    color: var(--color-text-secondary);
    min-height: 16px;
}
.dashboard-kpi-tile__spark {
    margin-top: 6px;
    width: 100%;
    height: 44px;
    min-height: 44px;
    /* Reset fuer ApexCharts-Mount — keine Padding/Border */
}
.dashboard-kpi-tile__spark .apexcharts-svg {
    overflow: visible;
}
.dashboard-kpi-tile--with-spark .dashboard-kpi-tile__value {
    margin-bottom: 0;
}

/* =========================================================================
   Sweep 3.1.b DB5 — Charts-Reihe (Mail-Performance + Sequenz-Donut)
   ========================================================================= */

.dashboard-charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 48px;
}
@media (max-width: 1100px) {
    .dashboard-charts-row { grid-template-columns: 1fr; }
}

.dashboard-chart-card {
    padding: 18px 18px 8px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}
.dashboard-chart-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.dashboard-chart-card__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}
.dashboard-chart-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}
.dashboard-chart-card__legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.dashboard-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-secondary);
}
.dashboard-chart-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.dashboard-chart-legend-swatch.is-mid {
    background: var(--color-brand-mid, #4f7edb);
}
.dashboard-chart-legend-swatch.is-light {
    background: var(--color-brand-light, #7ab8f0);
}

.dashboard-chart-card__mount {
    flex: 1 1 auto;
    min-height: 280px;
    width: 100%;
    position: relative;
}
.dashboard-chart-card__mount--donut {
    min-height: 280px;
}

.dashboard-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 220px;
    text-align: center;
    padding: 24px;
    font-size: 13px;
}

/* =========================================================================
   Sweep 3.1.b DB6 — Politur + Animation
   Cascading-Reveal + Hover-Politur + Mobile-Feinschliff.
   ========================================================================= */

@keyframes dashboard-card-reveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reveal-Stagger: Action-Cards 3er-Reihe */
.dashboard-action-card {
    opacity: 0;
    animation: dashboard-card-reveal 420ms var(--ease-out, ease-out) forwards;
    animation-delay: 60ms;
}
.dashboard-action-grid .dashboard-action-card:nth-child(2) { animation-delay: 130ms; }
.dashboard-action-grid .dashboard-action-card:nth-child(3) { animation-delay: 200ms; }

/* Reveal-Stagger: KPI-Tiles 5er-Reihe */
.dashboard-kpi-tile {
    opacity: 0;
    animation: dashboard-card-reveal 420ms var(--ease-out, ease-out) forwards;
    animation-delay: 240ms;
}
.dashboard-kpi-row .dashboard-kpi-tile:nth-child(2) { animation-delay: 290ms; }
.dashboard-kpi-row .dashboard-kpi-tile:nth-child(3) { animation-delay: 340ms; }
.dashboard-kpi-row .dashboard-kpi-tile:nth-child(4) { animation-delay: 390ms; }
.dashboard-kpi-row .dashboard-kpi-tile:nth-child(5) { animation-delay: 440ms; }

/* Reveal-Stagger: Chart-Cards 2er-Reihe */
.dashboard-chart-card {
    opacity: 0;
    animation: dashboard-card-reveal 480ms var(--ease-out, ease-out) forwards;
    animation-delay: 500ms;
}
.dashboard-charts-row .dashboard-chart-card:nth-child(2) { animation-delay: 580ms; }

/* Reduzierte Bewegung: alle Reveals ausschalten */
@media (prefers-reduced-motion: reduce) {
    .dashboard-action-card,
    .dashboard-kpi-tile,
    .dashboard-chart-card {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* Hover-Politur: subtiler Brand-Border-Glow */
.dashboard-action-card:hover,
.dashboard-kpi-tile:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18),
                0 0 0 1px var(--color-brand-mid, #4f7edb) inset;
}
[data-theme="light"] .dashboard-action-card:hover,
[data-theme="light"] .dashboard-kpi-tile:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06),
                0 0 0 1px var(--color-brand-mid, #4f7edb) inset;
}

/* Action-Item-Fokus: keyboard-navigation sichtbar.
   Outline ohne Hex-Fallback, weil --color-brand-mid global gesetzt
   ist (sonst loest der C9.1-Outline-Hex-Check Falsch-Positiv aus). */
.dashboard-action-item__btn:focus-visible {
    outline: 2px solid var(--color-brand-mid);
    outline-offset: 2px;
    background: rgba(79, 126, 219, 0.08);
}

/* Hero-Action-Area-Header: leichter Trenner zum Hero */
.dashboard-action-area__header::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg,
        var(--color-border) 0%,
        transparent 70%);
    margin-top: 12px;
    margin-bottom: -4px;
    grid-column: 1 / -1;
}

/* Mobile-Feinschliff: kompaktere Action-Cards + KPI-Werte */
@media (max-width: 760px) {
    .dashboard-action-card {
        min-height: 0;
        padding: 14px 14px 12px;
    }
    .dashboard-action-area__title {
        font-size: 16px;
    }
    .dashboard-kpi-tile__value {
        font-size: 24px;
    }
    .dashboard-chart-card {
        min-height: 280px;
    }
}

/* ============================================================
 * Sweep 3.1.c SB1 — Aufklappbare Sidebar-Gruppen
 * ============================================================
 * .nav-group              — Container (LEADS / E-Mail)
 * .nav-group-header       — Button (Icon + Label + optional Badge + Chevron)
 * .nav-group-children     — Container fuer die Sub-Items (toggle via .is-open)
 * .nav-group--open        — geoeffneter Zustand (Chevron rotiert, Children sichtbar)
 * .nav-subitem            — Indent-Pattern fuer Sub-Items innerhalb der Gruppe
 *
 * Tokens-only (keine Lila-Toene). Icons aus Registry (siehe icon.js +
 * Lint-Regel #28).
 * ------------------------------------------------------------ */

.nav-group {
    display: flex;
    flex-direction: column;
    /* Sweep 3.1.c.2 F2: KEIN horizontaler Margin — der Gruppen-Header
       muss EXAKT auf gleicher linker Kante stehen wie die normalen
       .nav-item Top-Level-Eintraege (Dashboard / Pipeline / Reseller).
       Vertikaler Mini-Margin matched .sidebar-floating .nav-item
       (margin: 1px 0). */
    margin: 1px 0;
}

/* Sweep 3.1.c.1 P4: Ungelesen-Zaehler-Badge an der E-Mail-Gruppe.
   Gelb-toniger Pulse-Stil (analog --logo-gold der alten NEU-Badges),
   sichtbar auch wenn die Gruppe zugeklappt ist. Hidden via
   [hidden]-Attribut wenn Zaehler 0. */
.nav-badge-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    background: var(--logo-gold, #eab107);
    color: #1f1300;
    letter-spacing: 0.02em;
    box-shadow: 0 0 8px rgba(234, 177, 7, 0.30);
}
.nav-badge-unread[hidden] {
    display: none;
}

/* Sweep 3.1.c.1 P3: dezenter Trenner statt Kategorie-Ueberschrift.
   Markiert visuell den Uebergang zwischen logischen Bereichen
   (zwischen Workspace+Akquise, Akquise+System) ohne Text-Label. */
.nav-divider {
    height: 1px;
    margin: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    pointer-events: none;
}
[data-theme="light"] .nav-divider {
    background: rgba(0, 0, 0, 0.08);
}

.nav-group-header {
    /* Button-Reset */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    font-family: inherit;

    /* Visuell mit nav-item identisch (gleiche Padding/Farbe/Radius) */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    font-weight: 500;
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-group-header:hover,
.nav-group-header:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    outline: none;
}

[data-theme="light"] .nav-group-header {
    color: var(--color-text, rgba(0, 0, 0, 0.78));
}
[data-theme="light"] .nav-group-header:hover,
[data-theme="light"] .nav-group-header:focus-visible {
    background: rgba(0, 0, 0, 0.05);
}

.nav-group-header .nav-icon {
    flex-shrink: 0;
    opacity: 0.78;
    transition: opacity 0.15s ease;
}
.nav-group-header:hover .nav-icon {
    opacity: 1;
}

.nav-group-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-group-chevron {
    flex-shrink: 0;
    opacity: 0.55;
    transition: transform 0.2s ease, opacity 0.15s ease;
}
.nav-group:not(.nav-group--open) > .nav-group-header .nav-group-chevron {
    transform: rotate(-90deg);
}
.nav-group--open > .nav-group-header .nav-group-chevron {
    transform: rotate(0deg);
    opacity: 0.85;
}

/* Children: zu = max-height 0; auf = max-height groß genug. Smooth. */
.nav-group-children {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 0.22s ease,
        opacity 0.18s ease;
    /* Sweep 3.1.c.1 P2: Linie links entfernt + Indent reduziert.
       Mike-Befund: starke Einrueckung mit Linie wirkt unruhig.
       Sub-Items sind durch kleinere Schrift + kleinere Icons
       weiterhin klar als Sub-Items erkennbar.
       Zustand vorher (SB1): padding-left 14px / margin-left 9px
       plus dezenter 1px-Strich; jetzt nur noch sanfte Einrueckung. */
    padding-left: 6px;
    margin-left: 4px;
    border-left: 0;
}
.nav-group--open > .nav-group-children {
    max-height: 360px;
    opacity: 1;
    margin-top: 2px;
    margin-bottom: 4px;
}

/* Sub-Items: visuell leichter als Top-Items (kleinere Icons, gedaempfter) */
.nav-subitem {
    font-size: 13px !important;
    padding: 6px 10px !important;
    color: rgba(255, 255, 255, 0.70) !important;
    border-radius: var(--radius-sm);
    margin: 1px 0 !important;
    gap: 10px !important;
}
.nav-subitem .nav-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}
.nav-subitem:hover {
    color: rgba(255, 255, 255, 0.88) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.nav-subitem:hover .nav-icon {
    opacity: 0.95;
}
.nav-subitem.active {
    color: var(--brand-mid, #6088e3) !important;
    background: rgba(96, 136, 227, 0.10) !important;
    border-left: 0 !important;  /* sub-items haben den Indent-Strich der Gruppe */
}
.nav-subitem.active .nav-icon {
    opacity: 1;
}
[data-theme="light"] .nav-subitem {
    color: rgba(0, 0, 0, 0.70) !important;
}
[data-theme="light"] .nav-subitem:hover {
    color: rgba(0, 0, 0, 0.88) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .nav-subitem.active {
    color: var(--brand-mid, #4f7edb) !important;
    background: rgba(79, 126, 219, 0.10) !important;
}

/* Wenn ein Sub-Item aktiv ist, leuchtet die Group-Header-Linie sanft mit */
.nav-group--has-active > .nav-group-header {
    color: rgba(255, 255, 255, 0.92);
}
.nav-group--has-active > .nav-group-header .nav-icon {
    opacity: 0.95;
}
[data-theme="light"] .nav-group--has-active > .nav-group-header {
    color: var(--color-text, rgba(0, 0, 0, 0.92));
}

/* Floating-Sidebar-Anpassung (Padding bleibt konsistent) */
.sidebar-floating .nav-group-header {
    padding: 8px 14px !important;
}
.sidebar-floating .nav-subitem {
    padding: 6px 10px !important;
}

/* ============================================================
 * Sweep 3.1.c.1 P1 — Kompakter Status-Block (3 Mini-Indikatoren)
 * ============================================================
 * .sidebar-status-compact  — flex-row Wrapper (3 nebeneinander)
 * .status-mini[data-status-key] — ein Mini-Indikator
 *   .status-dot  + .status-text
 * .status-dot.is-offline  — roter Dot ohne Puls
 * .status-mini.is-offline .status-text  — ausgegrauter Name
 *
 * Mike-Wunsch (3.1.c.1):
 *  - eine schlanke Zeile statt 3 vollen
 *  - kompakt + nebeneinander
 *  - kundentaugliche Namen (System / Automatisierung / E-Mail)
 *  - hart gruen/rot (KEIN gelb/'langsam' mehr)
 *
 * Verkabelt via frontend/components/sidebar-status.js
 * ------------------------------------------------------------ */

.sidebar-status-compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px 2px;
    flex-wrap: wrap;  /* Fallback wenn Sidebar zu schmal */
}

.status-mini {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.70));
    min-width: 0;
    flex: 0 1 auto;
}

/* Sweep 3.1.c.2 F3: !important + hoehere Specifity (.sidebar-status-
   compact .status-mini ...) noetig, weil eine Legacy-Regel (Z. 10852
   .sidebar-floating .status-dot { background: #22c55e !important; ... })
   den Background hart gruen forcierte. Ohne !important hier gewann
   Legacy und der Dot blieb gruen auch bei offline. */
.sidebar-status-compact .status-mini .status-dot,
.status-mini .status-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--color-success, var(--success, #2bb673)) !important;
    box-shadow: 0 0 5px rgba(43, 182, 115, 0.45) !important;
    animation: pulse 2.4s ease-in-out infinite !important;
    flex-shrink: 0;
}

.status-mini .status-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Hartes Offline — KEIN Puls, ausgegrauter Name. !important
   wegen der Legacy-Regel oben. */
.sidebar-status-compact .status-mini.is-offline .status-dot,
.sidebar-status-compact .status-mini .status-dot.is-offline,
.status-mini.is-offline .status-dot,
.status-mini .status-dot.is-offline {
    background: var(--color-danger, var(--danger, #e25555)) !important;
    box-shadow: 0 0 5px rgba(226, 85, 85, 0.45) !important;
    animation: none !important;
}
.status-mini.is-offline .status-text {
    color: var(--color-text-disabled, rgba(255, 255, 255, 0.40));
    opacity: 0.75;
}

/* ============================================================
 * Sweep 3.2.c C3 — Feature-Gating: locked-Sidebar-Items +
 *                                  Upgrade-Modal
 * ============================================================
 * Schloss-Icon + ausgegrauter Stil fuer gesperrte Features.
 * Klick auf gesperrtes Item -> Upgrade-Modal (von pulse-features.js).
 * Tokens-only, kein Violett. */

.nav-item.is-locked,
.nav-group-header.is-locked {
    color: var(--color-text-disabled, rgba(255, 255, 255, 0.40)) !important;
    opacity: 0.65;
    cursor: not-allowed;
}
.nav-item.is-locked .nav-icon,
.nav-group-header.is-locked .nav-icon {
    opacity: 0.5;
}
.nav-item.is-locked:hover,
.nav-group-header.is-locked:hover {
    background: transparent !important;
    color: var(--color-text-disabled, rgba(255, 255, 255, 0.40)) !important;
}

.nav-lock-icon {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
    flex-shrink: 0;
}
[data-theme="light"] .nav-lock-icon {
    color: rgba(0, 0, 0, 0.45);
}

/* Sweep 6.5 B1 — hidden-Fix: das HTML-Attribut [hidden] (UA-Default
   display:none) wird von .nav-item{display:flex} (style.css ~204) bzw.
   .nav-group-header{display:flex} ueberstimmt (gleiche Spezifitaet,
   Autor schlaegt UA) — es fehlte ein Override. Ohne diese Regel bleibt
   ein per visibility=hidden ausgeblendeter Sidebar-Punkt sichtbar
   (Diagnose 6.4 TEIL 3). !important setzt [hidden] zuverlaessig durch;
   eng auf die zwei Gating-Elemente gefasst -> keine anderen Layouts
   betroffen. Loest auch Pulse-KI "zeigt sich trotz hidden". */
.nav-item[hidden],
.nav-group-header[hidden] {
    display: none !important;
}

/* Upgrade-Modal */
.pulse-upgrade-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pulse-upgrade-modal-backdrop[hidden] {
    display: none;
}

.pulse-upgrade-modal {
    max-width: 440px;
    width: 100%;
    padding: 28px 24px 20px;
    border-radius: var(--radius-lg, 16px);
    position: relative;
    text-align: center;
}

.pulse-upgrade-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: 0;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.pulse-upgrade-modal__close:hover {
    color: var(--color-text-primary, rgba(255, 255, 255, 0.92));
}

.pulse-upgrade-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(234, 177, 7, 0.12);
    color: var(--logo-gold, #eab107);
    margin: 0 auto 16px;
}

.pulse-upgrade-modal__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--color-text-primary);
}

.pulse-upgrade-modal__body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.75));
    margin: 0 0 24px;
}

.pulse-upgrade-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.pulse-upgrade-modal__actions .btn {
    min-width: 120px;
}
/* Disabled-Upgrade-Button (Funktion in Vorbereitung) — wirkt
   sichtbar, klickbar aber blockiert. Mike-Spec: vorbereitet, nicht
   verlinkt. */
.pulse-upgrade-modal__actions .btn.btn-primary[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Sweep 3.2.c C4 — View-as-Plan Test-Modus-Banner (Superadmin-only).
   Sticky am oberen Rand, klar als Testmodus markiert. */
.pulse-view-as-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--logo-gold, #eab107);
    color: #1f1300;
    padding: 8px 16px;
    border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
    z-index: 5500;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
}
.pulse-view-as-banner__label {
    line-height: 1.3;
}
.pulse-view-as-banner__reset {
    background: rgba(0, 0, 0, 0.18);
    color: inherit;
    border: 0;
    padding: 4px 10px;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.pulse-view-as-banner__reset:hover {
    background: rgba(0, 0, 0, 0.28);
}
/* Sweep 6.3 — dezenter Read-only-Hinweis im View-as-Tenant-Banner. */
.pulse-view-as-banner__hint {
    font-size: 12px;
    opacity: 0.78;
    font-style: italic;
}

/* ============================================================
   Sweep 4 4b — Zentrale Plan-Einstell-UI (system-plan-editor.js)
   Glass-Cards, Pulse-Brand-Tokens, kein Violett.
   ============================================================ */
.plan-editor-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.pulse-segmented {
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid var(--color-border, rgba(255,255,255,0.10));
    border-radius: 10px;
}
.pulse-segmented__item {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    padding: 6px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
    color: var(--color-text-secondary); transition: background 120ms, color 120ms;
}
.pulse-segmented__item:hover { color: var(--color-text-primary); }
.pulse-segmented__item.is-active {
    background: var(--color-brand-mid); color: #fff;
}
.plan-editor-viewas { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }

.plan-editor-group {
    border: 1px solid var(--color-border, rgba(255,255,255,0.10));
    border-radius: 10px; margin-bottom: 10px; overflow: hidden;
    background: rgba(255,255,255,0.02);
}
.plan-editor-group__summary {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 12px 14px; font-weight: 600; font-size: 14px; list-style: none;
    user-select: none;
}
.plan-editor-group__summary::-webkit-details-marker { display: none; }
.plan-editor-group__chevron { display: inline-flex; transition: transform 150ms; color: var(--color-text-tertiary); }
.plan-editor-group[open] .plan-editor-group__chevron { transform: rotate(180deg); }
.plan-editor-group__icon { display: inline-flex; color: var(--color-brand-mid); }
.plan-editor-group__title { flex: 1 1 auto; }
.plan-editor-group__count {
    font-size: 12px; font-weight: 600; color: var(--color-text-tertiary);
    background: rgba(148,163,184,0.12); padding: 2px 8px; border-radius: 999px;
}
.plan-editor-group__body {
    padding: 4px 14px 14px 14px;
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.06));
}

.plan-editor-stamm-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px; padding-top: 12px;
}
.plan-editor-field { display: flex; flex-direction: column; gap: 4px; }
.plan-editor-field__label { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; }

.plan-editor-feature {
    display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
    align-items: center; padding: 10px 0;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.05));
}
.plan-editor-feature:last-child { border-bottom: 0; }
.plan-editor-feature__toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.plan-editor-feature__name { font-weight: 500; }
.plan-editor-feature__controls { display: inline-flex; align-items: center; gap: 8px; }
.plan-editor-feature__credit { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-tertiary); }
.plan-editor-feature__credit input { width: 92px; }
/* Sweep 4.1 a3: dezentes Label + "greift wenn aktiv"-Hinweis am Credit-Feld.
   Label de-emphasized (Refactoring-UI: Label < Wert). Hint neutral-grau,
   kein Alarm — es ist vorbereitet, kein Fehler. */
.plan-editor-feature__credit-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
}
.plan-editor-feature__credit-pending {
    font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
    background: rgba(148, 163, 184, 0.18); color: var(--color-text-secondary);
}
.plan-editor-feature__credit.is-pending input { opacity: 0.75; }
.plan-editor-feature__desc { grid-column: 1 / -1; font-size: 12px; line-height: 1.4; }
.plan-editor-feature.is-parent-off { opacity: 0.45; }
.plan-editor-feature.is-parent-off input,
.plan-editor-feature.is-parent-off select { pointer-events: none; }

.plan-editor-badge {
    display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px;
    border-radius: 999px; vertical-align: middle;
}
.plan-editor-badge--soon {
    background: rgba(148, 163, 184, 0.18); color: var(--color-text-secondary);
}

.plan-editor-save-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.plan-editor-save { display: inline-flex; align-items: center; gap: 6px; }
.plan-editor-save-hint { font-size: 13px; }
.plan-editor-save-hint--ok { color: var(--color-success, #16a34a); }
.plan-editor-save-hint--err { color: var(--color-danger, #dc2626); }

/* ============================================================
   Sweep 5 S3 — Kunden- (Tenant-) + User-Verwaltung
   (system-kunden.js). Kein Modul-Praefix-Konflikt (kunden-* ist
   nicht in der Lint-Praefix-Liste); Glass-Cards + Pulse-Tokens.
   ============================================================ */
.kunden-card { padding: 0; }
.kunden-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 20px; flex-wrap: wrap;
}
.kunden-name { font-weight: 600; color: var(--color-text-primary); }

.kunden-detail { display: flex; flex-direction: column; gap: 16px; }
.kunden-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.kunden-head-card { padding: 20px; }
.kunden-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.kunden-head__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kunden-kv { display: inline-flex; align-items: center; gap: 8px; }
.kunden-kv__key {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
}
.kunden-kv__val { font-weight: 600; }

.kunden-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}
.kunden-stat {
    background: var(--color-surface-subtle, rgba(148,163,184,0.08));
    border-radius: 12px; padding: 12px 14px;
}
.kunden-stat__label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-text-tertiary); margin-bottom: 4px;
}
.kunden-stat__value { font-size: 20px; font-weight: 700; color: var(--color-text-primary); }

/* Modal-Felder (zentrale .modal-* Klassen bleiben unveraendert) */
.kunden-modal { max-width: 460px; }
.kunden-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.kunden-field > span {
    font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
}
.kunden-field-row { display: flex; gap: 12px; }
.kunden-field-row .kunden-field { flex: 1 1 0; min-width: 0; }
.kunden-checkbox {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
    font-size: 13px; color: var(--color-text-secondary); cursor: pointer;
}
.kunden-hint {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 12px; line-height: 1.4; color: var(--color-text-tertiary);
    background: rgba(79,126,219,0.08); border-radius: 8px; padding: 8px 10px;
}

/* ------------------------------------------------------------
   Sweep 6 — Plan-Abweichungen (Override-Bereich im Kunden-Detail).
   Gruppen-/Feature-Optik spiegelt den Plan-Editor (plan-editor-group),
   die Override-spezifischen Teile nutzen Pulse-Brand-Tokens (kein
   Violett). Akzent fuer "abweichend" = brand-mid.
   ------------------------------------------------------------ */
.kunden-override-card { padding: 20px; }
.kunden-override-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
/* Sweep 6.3 — rechte Seite des Override-Headers: Zaehler + "Ansehen als". */
.kunden-override-head__actions {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.kunden-override-devcount {
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(79,126,219,0.14); color: var(--color-brand-mid);
}
.kunden-override-devcount--none {
    background: rgba(148,163,184,0.14); color: var(--color-text-tertiary);
    font-weight: 600;
}
.kunden-override-sub { font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
.kunden-override-empty {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 13px; line-height: 1.45; color: var(--color-text-secondary);
    background: rgba(79,126,219,0.08); border-radius: 10px; padding: 12px 14px;
}

.kunden-override-feature {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.05));
}
.kunden-override-feature:last-child { border-bottom: 0; }
.kunden-override-feature__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
.kunden-override-feature__controls {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
}
.kunden-override-ctrl { display: flex; flex-direction: column; gap: 4px; }
.kunden-override-ctrl__label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-tertiary); font-weight: 500;
}
.kunden-override-ctrl select.pulse-glass-select { min-width: 168px; }
.kunden-override-ctrl input.kunden-override-credit { width: 130px; }

/* Abweichende Zeile dezent mit Brand-Akzent hervorheben (Recognition:
   der Admin sieht auf einen Blick, wo der Kunde vom Plan abweicht). */
.kunden-override-feature.is-override {
    background: rgba(79,126,219,0.06);
    border-left: 2px solid var(--color-brand-mid);
    border-radius: 0 8px 8px 0;
    padding-left: 12px; margin-left: -2px;
}
.kunden-override-badge--dev {
    background: rgba(79,126,219,0.18); color: var(--color-brand-mid);
}
.kunden-override-group__count {
    font-size: 12px; font-weight: 600; color: var(--color-text-tertiary);
    background: rgba(148,163,184,0.12); padding: 2px 8px; border-radius: 999px;
}
.kunden-override-group__count.is-dev {
    background: rgba(79,126,219,0.16); color: var(--color-brand-mid);
}
.kunden-override-reset {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-size: 12px; font-weight: 500; color: var(--color-text-secondary);
    background: transparent; border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: 8px; padding: 4px 10px; cursor: pointer;
    transition: background 120ms, color 120ms;
}
.kunden-override-reset:hover {
    background: rgba(79,126,219,0.10); color: var(--color-brand-mid);
}
.kunden-override-save-row {
    display: flex; align-items: center; gap: 12px; margin-top: 18px;
}
.kunden-override-save-hint { font-size: 13px; }
.kunden-override-save-hint--err { color: var(--color-danger, #dc2626); }