/* ALLGEMEIN */
.content-area {
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
    min-height: 0;      /* Flex-Falle: ohne das kein funktionierendes overflow-y */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════════════════════════
   SCHALTZENTRALE — Slide-in Dialer rechts
   ════════════════════════════════════════════════════════════════ */

.btn-zentrale {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: linear-gradient(135deg, rgba(74,143,255,.15), rgba(120,180,255,.10));
    border: 1px solid rgba(120,180,255,.35);
    color: #cfe1ff;
    border-radius: 8px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s;
}
.btn-zentrale:hover {
    background: linear-gradient(135deg, rgba(74,143,255,.3), rgba(120,180,255,.2));
    border-color: rgba(150,200,255,.55);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(74,143,255,.25);
}
.btn-zentrale .bz-icon { font-size: 14px; }
.btn-zentrale.active {
    background: linear-gradient(135deg, #4a8fff, #2563eb);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(74,143,255,.45);
}
/* Recording-Play-Button in Anruf-History */
.zh-rec {
    background: rgba(74,143,255,.12);
    border: 1px solid rgba(74,143,255,.35);
    color: #cfe1ff;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s;
    margin: 0 4px;
}
.zh-rec:hover {
    background: linear-gradient(135deg, var(--blue), var(--green));
    border-color: transparent;
    color: #fff;
    transform: scale(1.05);
}

/* Recording-Play-Button in „Letzter Anruf"-Zeile auf Lead-Karte */
.lc-rec {
    background: rgba(74,143,255,.12);
    border: 1px solid rgba(74,143,255,.35);
    color: #cfe1ff;
    border-radius: 8px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 8px;
    transition: all .15s;
    vertical-align: middle;
}
.lc-rec:hover {
    background: linear-gradient(135deg, var(--blue), var(--green));
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════
   GAMIFICATION — Overlay + Konfetti
   ════════════════════════════════════════════════════════════════ */
.game-overlay {
    position: fixed;
    top: 78px;                       /* unter der Navbar (~64px) + Stats-Bar (~40px halb) */
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 200;
    padding: 14px 48px;
    border-radius: 999px;
    background: rgba(20,24,38, 0.72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}
.game-overlay.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.game-overlay-text {
    font-family: var(--font, 'Syne', system-ui, sans-serif);
    font-weight: 800;
    font-size: 42px;
    letter-spacing: 6px;
    line-height: 1;
    text-align: center;
}
.game-overlay.ja  .game-overlay-text {
    background: linear-gradient(135deg, #00d68f, #4dd9ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0,214,143,.4);
    animation: ja-pulse .6s ease-out;
}
.game-overlay.nein .game-overlay-text {
    color: #ff4f6a;
    text-shadow: 0 0 20px rgba(255,79,106,.35);
    animation: nein-shake .4s ease-in-out;
}
@keyframes ja-pulse {
    0%   { transform: scale(0.7); opacity: 0; }
    50%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}
@keyframes nein-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

.confetti-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 199;
    display: none;
}
.confetti-canvas.active { display: block; }

/* ════════════════════════════════════════════════════════════════
   QUOTE-HERO + SELBST-RECHNER im Arbeitsplatz
   ════════════════════════════════════════════════════════════════ */
.quote-hero {
    margin-bottom: 18px;
    padding: 18px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(74,143,255,.08), rgba(0,214,143,.06));
    border: 1px solid rgba(74,143,255,.25);
}
.qh-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.qh-block {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 180px;
}
.qh-icon {
    font-size: 28px;
    line-height: 1;
    opacity: .85;
}
.qh-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: 4px;
}
.qh-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--mono);
    line-height: 1.1;
}
.qh-highlight {
    background: linear-gradient(135deg, #4a8fff, #00d68f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 26px;
}
.qh-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
}
.qh-arrow {
    font-size: 24px;
    color: var(--muted2);
    font-weight: 300;
    user-select: none;
}
.qh-progress {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.qh-progress-bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,.05);
    overflow: hidden;
    margin-bottom: 6px;
}
.qh-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a8fff, #00d68f);
    width: 0%;
    transition: width .6s ease;
    border-radius: 4px;
}
.qh-progress-text {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
}

/* Selbst-Rechner Collapse */
.termin-calc.collapsed #self-calc-body { display: none; }
.termin-calc.collapsed #self-calc-chev { transform: rotate(-90deg); }

@media (max-width: 768px) {
    .qh-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .qh-arrow { display: none; }
    .qh-block { min-width: 0; }
    .qh-highlight { font-size: 22px; }
}

/* Skript- + Schaltzentrale-Button als Gruppe rechts ausrichten, dazwischen 8px. */
.stats-bar-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stats-bar-actions .btn-zentrale {
    margin-left: 0;   /* Auto-Margin nicht mehr nötig — übernimmt der Wrapper */
}

/* Verpasste-Anrufe-Badge auf dem Schaltzentrale-Trigger */
.btn-zentrale {
    position: relative;
}
.bz-missed-badge {
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 12px rgba(255,79,106,.6);
    animation: bz-missed-pulse 1.6s ease-in-out infinite;
}
@keyframes bz-missed-pulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.12); }
}

/* ─── Verpasste-Anrufe-Sektion in der Schaltzentrale ─── */
.zentrale-missed {
    margin-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 14px;
}
.zm-count {
    color: var(--red);
    font-weight: 700;
    margin-left: 4px;
}
/* Verpasst = rot links, Angenommen = grün links */
.zm-row-missed {
    border-left: 2px solid var(--red);
    background: rgba(255,79,106,.06);
}
.zm-row-missed:hover {
    background: rgba(255,79,106,.12);
}
.zm-row-answered {
    border-left: 2px solid var(--green);
    background: rgba(0,214,143,.05);
}
.zm-row-answered:hover {
    background: rgba(0,214,143,.10);
}
.zm-meta-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.zm-status {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.zm-status-missed {
    background: rgba(255,79,106,.15);
    color: var(--red);
}
.zm-status-answered {
    background: rgba(0,214,143,.15);
    color: var(--green);
}
.zm-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.zm-mid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.zm-lead {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zm-lead.zm-unknown {
    font-style: italic;
    color: var(--muted2);
}

/* Layout-Shift entfernt — Schaltzentrale liegt über dem Content (kein Einrücken) */

/* Panel selbst */
.zentrale {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 50vw;
    min-width: 380px;
    max-width: 720px;
    background: linear-gradient(160deg,
        rgba(28, 32, 60, .85) 0%,
        rgba(15, 18, 38, .92) 100%);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-left: 1px solid rgba(255,255,255,.1);
    box-shadow: -24px 0 60px rgba(0,0,0,.5);
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
    z-index: 9100;  /* über Topbar (9000) aber unter Profil-Menü (99999) */
    display: flex;
    flex-direction: column;
}
.zentrale.open { transform: translateX(0); }

/* Collapse-Pfeil an der linken Kante */
.zentrale-collapse {
    position: absolute;
    left: calc(-22px - 2.5vw);
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--blue, #4a8fff);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(74,143,255,.45);
    transition: transform .2s, background .2s;
    z-index: 201;
}
.zentrale-collapse:hover {
    background: #2563eb;
    transform: translateY(-50%) scale(1.08);
}
/* Im Lead-Call-Modus: Pfeil bleibt sichtbar — einziger Schließ-Weg wenn Panel offen ist */
/* body.in-call-mode .zentrale-collapse { display: none; } ← entfernt v418 */

/* ── Stats-Bar: Elemente dürfen schrumpfen aber nie umbrechen ─────────────
   Alle stat-items sind shrinkable — bei Platzmangel werden Labels kürzer,
   nicht umgebrochen. Nur wenn WIRKLICH ein Anruf läuft (#stat-call-timer-wrap
   sichtbar) werden die weniger wichtigen Stats per JS-Klasse ausgeblendet. */
.stat-item {
    flex-shrink: 1;
    min-width: 0;
}
.stat-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* rec-warning kompakt: weniger Padding, kleinere Schrift */
#rec-warning {
    padding: 3px 9px !important;
    gap: 5px !important;
    flex-shrink: 0;
    white-space: nowrap;
}
#rec-warning span:last-child {
    font-size: 10px !important;
    letter-spacing: .04em !important;
}

/* followup-reminder darf schrumpfen aber nicht auf 0 */
#followup-reminder {
    min-width: 0;
    overflow: hidden;
}

/* Nur wenn Twilio aktiv verbunden (Klasse .twilio-live auf body):
   unwichtige Stats ausblenden um Platz für rec-warning + followup zu schaffen */
body.twilio-live .stat-item:not(.stat-call-timer) {
    display: none !important;
}

.zentrale-inner {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Header */
.zentrale-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.zh-icon {
    font-size: 28px;
    filter: drop-shadow(0 0 12px rgba(74,143,255,.4));
}
.zh-title { font-size: 16px; font-weight: 700; color: #fff; }
.zh-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Display */
/* ─── Live-Call-Status in der Schaltzentrale ─── */
.zentrale-live-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 4px;
    background: linear-gradient(135deg,
        rgba(0, 214, 143, .15) 0%,
        rgba(0, 214, 143, .08) 100%);
    border: 1px solid rgba(0, 214, 143, .35);
    border-radius: 10px;
    color: var(--green, #00d68f);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(0,214,143,.06) inset,
                0 4px 16px rgba(0,214,143,.10);
}
/* Pulsierender grüner Punkt (live) */
.zls-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green, #00d68f);
    box-shadow: 0 0 12px rgba(0,214,143,.7);
    animation: zls-pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes zls-pulse {
    0%,100% { transform: scale(1);   opacity: 1; }
    50%     { transform: scale(1.3); opacity: .55; }
}
.zls-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.zls-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(0,214,143,.85);
    font-weight: 700;
}
.zls-number {
    font-size: 13px;
    color: #fff;
    font-family: var(--mono, monospace);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zls-timer {
    font-size: 18px;
    font-weight: 800;
    font-family: var(--mono, monospace);
    color: #fff;
    letter-spacing: .04em;
    flex-shrink: 0;
    padding: 4px 10px;
    background: rgba(0,0,0,.25);
    border-radius: 6px;
    min-width: 60px;
    text-align: center;
}

/* Während Klingelphase: gelblich/blau, kein grüner Pulse */
.zentrale-live-status.calling {
    background: linear-gradient(135deg,
        rgba(74, 143, 255, .15) 0%,
        rgba(74, 143, 255, .08) 100%);
    border-color: rgba(74, 143, 255, .35);
    color: var(--blue, #4a8fff);
}
.zentrale-live-status.calling .zls-label {
    color: rgba(74,143,255,.85);
}
.zentrale-live-status.calling .zls-dot {
    background: var(--blue, #4a8fff);
    box-shadow: 0 0 12px rgba(74,143,255,.7);
}

/* Endzustand: "Anruf beendet" — neutral grau, kein Pulse, fade out nach 10s */
.zentrale-live-status.ended {
    background: linear-gradient(135deg,
        rgba(255,255,255,.06) 0%,
        rgba(255,255,255,.02) 100%);
    border-color: rgba(255,255,255,.12);
    color: var(--muted, #98a2b3);
    animation: zls-fade-out 10s forwards;
}
.zentrale-live-status.ended .zls-label {
    color: rgba(255,255,255,.6);
}
.zentrale-live-status.ended .zls-dot {
    background: var(--muted2, #5a6478);
    box-shadow: none;
    animation: none;
}
@keyframes zls-fade-out {
    0%, 80% { opacity: 1; }     /* 8 von 10 Sek voll sichtbar */
    100%    { opacity: 0; }     /* letzte 2 Sek sanft ausblenden */
}

.zentrale-display-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}
.zentrale-display {
    flex: 1;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 14px 16px;
    color: #fff;
    font-family: var(--mono, monospace);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .04em;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.zentrale-display:focus {
    border-color: rgba(74,143,255,.55);
    box-shadow: 0 0 0 3px rgba(74,143,255,.15);
}
.zentrale-backspace {
    width: 50px; height: 50px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.3);
    color: #cfe1ff;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: all .15s;
}
.zentrale-backspace:hover {
    background: rgba(232,90,120,.15);
    border-color: rgba(232,90,120,.4);
    color: #ff8da0;
}

/* Tastatur */
.zentrale-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.zk {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    border-radius: 10px;
    padding: 14px 0;
    cursor: pointer;
    font-family: var(--font);
    transition: all .12s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.zk:hover {
    background: rgba(74,143,255,.12);
    border-color: rgba(74,143,255,.35);
    transform: translateY(-1px);
}
.zk:active {
    transform: translateY(1px);
    background: rgba(74,143,255,.25);
}
.zk-num { font-size: 22px; font-weight: 600; line-height: 1; }
.zk-sub {
    font-size: 9px;
    color: var(--muted);
    letter-spacing: .12em;
    font-weight: 600;
    min-height: 11px;
}

/* ─── DTMF-Modus während aktiver Calls ─────────────────────────────── */
/* Keypad bekommt einen subtilen grünen Touch + Glow → klar erkennbar
   dass die Tasten jetzt Töne senden statt Nummer zu tippen. */
.zentrale-keypad.dtmf-mode .zk {
    border-color: rgba(0,214,143,.35);
    background: rgba(0,214,143,.06);
}
.zentrale-keypad.dtmf-mode .zk:hover {
    background: rgba(0,214,143,.18);
    border-color: rgba(0,214,143,.55);
}
.zentrale-keypad.dtmf-mode .zk:active {
    background: rgba(0,214,143,.32);
}
/* Kurzer Puls am gedrückten Button beim DTMF-Senden */
.zk.zk-dtmf-flash {
    animation: zk-dtmf-pulse .28s ease-out;
    background: rgba(0,214,143,.5) !important;
    border-color: rgba(0,214,143,.9) !important;
    box-shadow: 0 0 0 4px rgba(0,214,143,.25);
}
@keyframes zk-dtmf-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.zentrale-dtmf-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    border-radius: 8px;
    background: rgba(0,214,143,.08);
    border: 1px solid rgba(0,214,143,.3);
    color: #99f5d0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}
.zdh-icon { font-size: 14px; }
.zentrale-dtmf-sent {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-size: 11px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .15em;
}

/* Anruf-Button */
.zentrale-call {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #00e89c 0%, #00b87a 100%);
    color: #001a10;
    font-family: var(--font);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .08em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow:
        0 12px 28px rgba(0,214,143,.35),
        0 0 0 1px rgba(0,255,170,.3) inset;
    transition: all .2s;
}
.zentrale-call:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 18px 36px rgba(0,214,143,.5),
        0 0 0 1px rgba(0,255,170,.5) inset;
}
.zentrale-call:disabled {
    background: rgba(255,255,255,.05);
    color: var(--muted2);
    cursor: not-allowed;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,.08);
}
/* Während aktiver Schaltzentralen-Call: Button = rot AUFLEGEN */
.zentrale-call.hangup {
    background: linear-gradient(135deg, #ff6b85 0%, #d63a5a 100%);
    color: #fff;
    box-shadow:
        0 12px 28px rgba(232,90,120,.4),
        0 0 0 1px rgba(255,140,160,.35) inset;
    animation: zc-hangup-pulse 1.6s ease-in-out infinite;
}
.zentrale-call.hangup:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 36px rgba(232,90,120,.55),
        0 0 0 1px rgba(255,140,160,.55) inset;
}
@keyframes zc-hangup-pulse {
    0%, 100% { box-shadow: 0 12px 28px rgba(232,90,120,.4),  0 0 0 1px rgba(255,140,160,.35) inset, 0 0 0 0 rgba(232,90,120,.4); }
    50%      { box-shadow: 0 14px 32px rgba(232,90,120,.55), 0 0 0 1px rgba(255,140,160,.55) inset, 0 0 0 8px rgba(232,90,120,0); }
}
.zentrale-call .zc-icon { font-size: 18px; }

.zentrale-hint {
    font-size: 11px;
    color: var(--amber, #f0a500);
    text-align: center;
    background: rgba(240,165,0,.08);
    border: 1px solid rgba(240,165,0,.2);
    padding: 8px 12px;
    border-radius: 8px;
}

/* Verlauf */
.zentrale-history {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;       /* nicht mehr 'flex:1' — würde auf 0px schrumpfen
                             wenn die verpasste-Anrufe-Sektion oberhalb wächst */
}
.zh-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 10px;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
    transition: color .15s;
}
.zh-section-title:hover { color: var(--text); }
.zh-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.zh-chevron {
    display: inline-block;
    font-size: 10px;
    width: 12px;
    text-align: center;
    transition: transform .2s;
    color: var(--muted2);
}
.zh-clear {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted2);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all .15s;
    line-height: 1;
}
.zh-clear:hover {
    color: var(--red, #e85a78);
    background: rgba(255,79,106,.1);
    border-color: rgba(255,79,106,.3);
}

/* Eingeklappte Sektion: Liste komplett raus aus dem Layout
   (kein max-height-Trick — das würde flex:1 der Verlauf-Liste zerschießen) */
.zsection.collapsed .zh-list { display: none; }
.zsection.collapsed .zh-section-title { margin-bottom: 0; }
.zsection.collapsed { flex: 0 0 auto; }
.zh-chevron { transition: transform .2s; }
.zsection.collapsed .zh-chevron { transform: rotate(-90deg); }
.zh-list {
    /* Eigene Scroll-Begrenzung statt flex:1 — sonst kollabiert die Liste auf 0px,
       wenn das Eltern-Element auch flex-Kinder mit Inhalt hat. */
    max-height: 280px;
    overflow-y: auto;
}
.zh-empty {
    color: var(--muted2);
    font-size: 12px;
    text-align: center;
    padding: 24px 0;
    font-style: italic;
}
.zh-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
.zh-row:hover { background: rgba(74,143,255,.08); }
.zh-row .zh-num {
    font-family: var(--mono, monospace);
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    flex: 1;
}
.zh-row .zh-dur {
    font-family: var(--mono, monospace);
    font-size: 11px;
    color: var(--green, #00d68f);
    background: rgba(0,214,143,.08);
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 600;
    white-space: nowrap;
}
.zh-row .zh-dur.zh-dur-empty {
    color: var(--muted2);
    background: transparent;
    font-weight: 400;
}
.zh-row .zh-time {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}
.zh-row .zh-redial {
    background: transparent;
    border: 1px solid rgba(74,143,255,.3);
    color: #cfe1ff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    font-family: var(--font);
}
.zh-row .zh-redial:hover {
    background: var(--blue, #4a8fff);
    color: #fff;
    border-color: var(--blue, #4a8fff);
}

/* Mobile / Schmal: Panel nimmt fast volle Breite */
@media (max-width: 900px) {
    /* padding-right entfernt — Panel liegt über dem Content */
    .zentrale { width: 92vw; }
}

.back-btn {
    display: inline-block;
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 20px;
    transition: color 0.2s;
}

.back-btn:hover {
    color: var(--blue);
}

/* EBENE 1: AUFTRAGS-GRID */
/* Global Lead-Suche Dropdown */
.ws-search-wrap {
    position: relative;
}
.ws-search-input {
    width: 260px;
    padding: 8px 14px 8px 36px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}
.ws-search-input:focus { border-color: var(--blue); }
.ws-search-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 14px; pointer-events: none; opacity: .45;
}
.ws-search-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 360px; max-height: 380px; overflow-y: auto;
    background: var(--s1); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.4);
    z-index: 200; display: none;
}
.ws-search-dropdown.open { display: block; }
.ws-sd-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.ws-sd-item:last-child { border-bottom: none; }
.ws-sd-item:hover { background: var(--hover); }
.ws-sd-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--blue); color: #fff;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ws-sd-body { flex: 1; min-width: 0; }
.ws-sd-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-sd-meta { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-sd-project { font-size: 11px; color: var(--blue); margin-top: 2px; }
.ws-sd-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.ws-sd-loading { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; }

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.project-card {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.project-card:hover {
    transform: translateY(-5px);
    border-color: var(--blue);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.project-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--blue);
    opacity: 0;
    transition: 0.3s;
}

.project-card:hover::before {
    opacity: 1;
}

.pc-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 5px;
}

.pc-type {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* Ersetzt das alte .pc-stats */
.pc-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    font-size: 12px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.pc-stat-item {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
}

.pc-stat-item strong {
    color: var(--text);
    font-family: var(--mono);
}

.pc-stat strong {
    color: var(--text);
    font-family: var(--mono);
}

/* EBENE 2: TABELLE & UPLOAD */
.lead-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin-top: 10px;
    table-layout: fixed;
}
.lead-table th:nth-child(1), .lead-table td:nth-child(1) { width: 18%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-table th:nth-child(2), .lead-table td:nth-child(2) { width: 18%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-table th:nth-child(3), .lead-table td:nth-child(3) { width: 14%; }
.lead-table th:nth-child(4), .lead-table td:nth-child(4) { width: 18%; }
.lead-table th:nth-child(5), .lead-table td:nth-child(5) { width: 18%; }
.lead-table th:nth-child(6), .lead-table td:nth-child(6) { width: 14%; text-align: right; }

.lead-table th {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Sortierbare Spalten */
.th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color .15s;
}
.th-sort:hover { color: var(--text); }
.th-sort.th-active { color: var(--blue); }
.sort-icon {
    display: inline-block;
    min-width: 14px;
    width: auto;
    font-size: 9px;
    opacity: .7;
    margin-left: 2px;
    vertical-align: middle;
}
.th-sort:not(.th-active) .sort-icon { opacity: .25; }

.lead-table td {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.lead-table tr:hover {
    background: var(--s2);
}

.btn-small {
    background: var(--s2);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
}

.btn-small:hover {
    background: var(--blue);
    border-color: var(--blue);
}

.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 40px 20px;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
}

.upload-zone:hover {
    border-color: var(--blue);
    background: rgba(74, 143, 255, 0.05);
}

/* EBENE 3: SPLIT SCREEN
   KEINE feste Höhe (war calc(100vh - 100px) — kaputt seit Stats-Bar dazukam).
   Stattdessen flex:1 + min-height:0 damit der Footer immer sichtbar bleibt. */
.workspace-container {
    display: flex;
    flex: 1;
    min-height: 0;          /* Flex-Falle: ohne das wachsen Kinder mit overflow nach außen */
    border-top: 1px solid var(--border);
}

.lead-queue {
    width: 350px;
    background: var(--s1);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.queue-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.queue-header h2 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
}

.lead-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.lead-card {
    padding: 15px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.lead-card:hover {
    background: var(--s2);
}

.lead-card.active {
    border-left-color: var(--blue);
    background: var(--s2);
}

.active-workspace {
    padding: 40px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.workspace-header h1 {
    font-size: 32px;
    margin: 10px 0 5px 0;
}

.company {
    font-size: 16px;
    color: var(--muted);
}

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--s1);
    border: 1px solid var(--border);
    padding: 20px 30px;
    border-radius: var(--radius);
}

.phone-display {
    font-family: var(--mono);
    font-size: 28px;
    font-weight: 600;
}

.btn-call {
    background: var(--green);
    color: var(--bg);
    font-weight: 800;
    font-size: 16px;
    padding: 15px 40px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    gap: 10px;
    transition: 0.2s;
}

.btn-call:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0, 214, 143, 0.3);
}

/* Mute-Button — sitzt direkt über dem Anrufen/Auflegen-Button.
   Wird nur eingeblendet, sobald ein Wählvorgang oder Call läuft;
   bei Lead-Wechsel zurückgesetzt + ausgeblendet. */
.btn-mute {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 14px;
    font-family: var(--font);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-align: center;
    letter-spacing: .03em;
}
.btn-mute:hover { color: var(--text); border-color: var(--muted2); }
.btn-mute.muted {
    background: var(--amber);
    color: #000;
    border-color: var(--amber);
}

.section-title {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 15px;
    font-weight: 700;
}

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

.status-btn {
    padding: 15px;
    border-radius: var(--radius);
    font-weight: 700;
    background: var(--s1);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

/* Basis-Styles + Hover für alle Type-Klassen.
   --btn-color erlaubt Admin-Farbanpassung via JS ohne Inline-style.color zu setzen. */
.status-btn.success  { background: rgba(34, 197, 94, .08);   color: var(--btn-color, #22c55e); border-color: rgba(34, 197, 94, .35); }
.status-btn.warning  { background: rgba(245, 158, 11, .08);  color: var(--btn-color, #f59e0b); border-color: rgba(245, 158, 11, .35); }
.status-btn.danger   { background: rgba(239, 68, 68, .08);   color: var(--btn-color, #ef4444); border-color: rgba(239, 68, 68, .35); }
.status-btn.muted    { background: rgba(107, 114, 128, .08); color: var(--btn-color, #6b7280); border-color: rgba(107, 114, 128, .35); }

.status-btn.success:hover  { background: rgba(34, 197, 94, .18);   border-color: var(--btn-color, #22c55e); color: var(--btn-color, #22c55e); }
.status-btn.warning:hover  { background: rgba(245, 158, 11, .18);  border-color: var(--btn-color, #f59e0b); color: var(--btn-color, #f59e0b); }
.status-btn.danger:hover   { background: rgba(239, 68, 68, .18);   border-color: var(--btn-color, #ef4444); color: var(--btn-color, #ef4444); }
.status-btn.muted:hover    { background: rgba(107, 114, 128, .18); border-color: var(--btn-color, #6b7280); color: var(--btn-color, #6b7280); }

.notes-area {
    width: 100%;
    height: 150px;
    background: var(--s1);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    padding: 15px;
    font-family: var(--font);
    outline: none;
    resize: vertical;
}

.btn-save {
    margin-top: 10px;
    background: var(--s2);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.btn-save:hover {
    background: var(--blue);
    color: #fff;
}

/* ── Notiz-Verlauf ────────────────────────────────────────────── */
.notes-log-section {
    margin-top: 18px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.notes-log-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.notes-log-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}

.notes-log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notes-log-entry {
    background: var(--s1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: 6px;
    padding: 10px 12px;
}

.notes-log-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.notes-log-user {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
}

.notes-log-date {
    font-size: 10px;
    color: var(--muted);
}

.notes-log-text {
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.notes-log-empty {
    font-size: 12px;
    color: var(--muted2);
    font-style: italic;
    padding: 6px 0;
}

/* --- SKIP BUTTONS & MODAL --- */
.btn-primary-sm {
    background: var(--blue); color: #fff; border: none;
    padding: 10px 20px; border-radius: var(--radius); cursor: pointer;
    font-weight: 600; font-family: var(--font); font-size: 13px; transition: opacity .15s;
}
.btn-primary-sm:hover { opacity: .85; }

.btn-secondary {
    background: var(--s2); color: var(--text); border: 1px solid var(--border);
    padding: 15px 25px; border-radius: var(--radius); cursor: pointer;
    font-weight: 600; font-family: var(--font); transition: all 0.2s;
}
.btn-secondary:hover { background: var(--muted2); }

/* ── Premium Primary Button ─────────────────────────────────────── */
.btn-primary {
    position: relative;
    padding: 11px 22px;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #4a8fff 0%, #00d68f 100%);
    color: #0d0f15;
    font-family: var(--font);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .03em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform .15s, box-shadow .25s;
    /* Idle: sanftes Pulsieren zwischen Blue-Glow und Green-Glow */
    animation: btn-idle-pulse 3s ease-in-out infinite;
}

/* Idle Glow Pulse */
@keyframes btn-idle-pulse {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(74,143,255,.35),
            0 0 0 0 rgba(0,214,143,0);
    }
    50% {
        box-shadow:
            0 4px 22px rgba(0,214,143,.45),
            0 0 26px 4px rgba(0,214,143,.13);
    }
}

/* Periodischer Shimmer-Sweep (Lichtstrahl der diagonal drüber zieht) */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        108deg,
        transparent 30%,
        rgba(255,255,255,.32) 50%,
        transparent 70%
    );
    transform: translateX(-130%) skewX(-12deg);
    animation: btn-shimmer-idle 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes btn-shimmer-idle {
    0%        { transform: translateX(-130%) skewX(-12deg); }
    28%, 100% { transform: translateX(160%)  skewX(-12deg); }
}

/* Hover: anheben + starker Glow + sofortiger Shimmer */
.btn-primary:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow:
        0 0 0 1px rgba(0,214,143,.55),
        0 8px 32px rgba(0,214,143,.55),
        0 0 50px rgba(74,143,255,.3),
        0 2px 12px rgba(0,0,0,.4);
    animation: none;
}
.btn-primary:hover::after {
    animation: btn-shimmer-hover .55s ease-out forwards;
}
@keyframes btn-shimmer-hover {
    from { transform: translateX(-130%) skewX(-12deg); }
    to   { transform: translateX(160%)  skewX(-12deg); }
}

/* Klick: schnell zurückschnappen */
.btn-primary:active {
    transform: translateY(0) scale(1);
    transition: transform .07s;
    box-shadow:
        0 0 0 1px rgba(0,214,143,.4),
        0 4px 16px rgba(0,214,143,.35);
    animation: none;
}

.btn-modal-stay {
    padding: 10px 20px; border: 1px solid var(--border);
    background: var(--s1); color: var(--text);
    border-radius: var(--radius); font-weight: 700;
    font-family: var(--font); cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}
.btn-modal-stay:hover {
    background: var(--s2);
    border-color: var(--green);
    color: var(--green);
}

.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(13, 15, 21, 0.85); backdrop-filter: blur(8px);
    z-index: 2000; align-items: center; justify-content: center;
}
.modal-box {
    background: var(--s1); border: 1px solid var(--border);
    padding: 32px 36px; border-radius: 16px; width: 100%; max-width: 560px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.modal-box h2 { font-size: 20px; margin-bottom: 20px; font-weight: 800; }
.modal-actions {
    display: flex; justify-content: flex-end;
    gap: 10px; margin-top: 28px;
}
/* Einheitliche Höhe für alle Buttons in modal-actions */
.modal-actions button {
    padding: 11px 22px;
    font-size: 13px;
}

/* Notizen — Section-Title als Flex-Row (Titel + Hint + Badge in einer Zeile) */
.section-title.notes-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.notes-title-text { flex-shrink: 0; }
.notes-hint {
    font-size: 10px;
    color: var(--muted2);
    font-weight: 500;
    text-transform: none;
    letter-spacing: .04em;
    font-family: var(--mono, monospace);
    opacity: .7;
    flex-shrink: 0;
}
.notes-saved-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(0,232,156,.18), rgba(0,184,122,.12));
    border: 1px solid rgba(0,232,156,.45);
    color: var(--green, #00d68f);
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    opacity: 0;
    transform: translateX(-8px) scale(.95);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,214,143,.0);
}
.notes-saved-badge.show {
    opacity: 1;
    transform: translateX(0) scale(1);
    box-shadow: 0 6px 20px rgba(0,214,143,.25);
    animation: notes-saved-pop .4s cubic-bezier(.22,1,.36,1);
}
@keyframes notes-saved-pop {
    0%   { transform: translateX(-8px) scale(.85); }
    60%  { transform: translateX(2px)  scale(1.06); }
    100% { transform: translateX(0)    scale(1); }
}

/* Quick-Picker für Wiedervorlage-Termine */
.quick-followup {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(74,143,255,.05);
    border: 1px solid rgba(74,143,255,.18);
    border-radius: var(--radius);
}
.quick-followup .qf-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 8px;
}
.quick-followup .qf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.qf-btn {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    border-radius: 8px;
    padding: 10px 6px;
    cursor: pointer;
    font-family: var(--font);
    transition: all .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.qf-btn:hover {
    background: rgba(74,143,255,.18);
    border-color: rgba(120,180,255,.45);
    transform: translateY(-1px);
}
.qf-btn.active {
    background: linear-gradient(135deg, rgba(74,143,255,.35), rgba(120,180,255,.25));
    border-color: rgba(150,200,255,.6);
    box-shadow: 0 4px 16px rgba(74,143,255,.3);
}
.qf-btn-num {
    font-size: 14px;
    font-weight: 700;
    color: #cfe1ff;
    letter-spacing: .02em;
}
.qf-btn-sub {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Kalender-Icon bei Datum/Uhrzeit in Weiß zwingen (Chrome/Edge Fix) */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}
/* ────────────────────────────────────────────────────────────────
   ERWEITERUNGEN — Inline-Edit im Workspace + Bad-Data-Button
   ──────────────────────────────────────────────────────────────── */

/* Editierbarer Lead-Name (war früher h1) */
.ws-name-input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: 26px;
    font-weight: 700;
    width: 100%;
    padding: 4px 8px;
    border-radius: 4px;
    outline: none;
    margin: 6px 0;
    transition: border-color .15s, background .15s;
}
.ws-name-input:hover, .ws-name-input:focus {
    border-color: var(--border);
    background: var(--bg);
}

/* Editierbares Unternehmen (war früher p.company) */
.ws-company-input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    padding: 4px 8px;
    border-radius: 4px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.ws-company-input:hover, .ws-company-input:focus {
    border-color: var(--border);
    background: var(--bg);
    color: var(--text);
}

/* Editierbares Telefon (war früher .phone-display) */
.phone-input {
    border: 1px solid transparent;
    outline: none;
    transition: border-color .15s, background .15s;
}
.phone-input:hover, .phone-input:focus {
    border-color: var(--blue);
    background: var(--bg);
}

/* Lead-Edit-Section */
.lead-edit-section {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.lead-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.led-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.led-field input {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font);
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}
.led-field input:focus {
    border-color: var(--blue);
}

/* Bad-Data-Button */
.status-btn.bad-data  { background: rgba(220, 38, 38, .08);  color: var(--btn-color, #dc2626); border: 1px solid rgba(220, 38, 38, .35); }
.status-btn.bad-data:hover { background: rgba(220, 38, 38, .18); border-color: var(--btn-color, #dc2626); color: var(--btn-color, #dc2626); }

/* Phone mit Edit-Button (read-only by default) */
.phone-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.phone-input[readonly] {
    cursor: default;
    background: transparent;
    border-color: transparent;
}
.phone-input[readonly]:hover, .phone-input[readonly]:focus {
    border-color: transparent;
    background: transparent;
}
.phone-input:not([readonly]) {
    border: 1px solid var(--blue);
    background: var(--bg);
    outline: none;
}
.btn-phone-edit {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.btn-phone-edit:hover {
    border-color: var(--blue);
    color: var(--text);
}
.btn-phone-edit.editing {
    border-color: var(--green);
    color: var(--green);
}

/* ────────────────────────────────────────────────────────────────
   ROUND 2 — Phone weiß, Field-Edit-Icons, Yellow Followups, BadData-Modal
   ──────────────────────────────────────────────────────────────── */

/* Phone-Anzeige in Weiß (read-only sah vorher dunkelgrau aus) */
.phone-input,
.phone-input[readonly] {
    color: var(--text) !important;
}

/* Generisches Edit-Icon (✏ / 💾) */
.btn-field-edit {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    padding: 5px 9px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    flex-shrink: 0;
    transition: all .15s;
}
.btn-field-edit:hover {
    border-color: var(--border);
    color: var(--text);
}
.btn-field-edit.editing {
    border-color: var(--green);
    color: var(--green);
}

/* Field-Row für Workspace-Header (Name, Firma) */
.ws-field-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.ws-field-row > input { flex: 1; min-width: 0; }

/* Field-Row in Lead-Edit-Grid (Email, Ansprechpartner) */
.led-field .ws-field-row > input { flex: 1; }

/* Website-Zeile direkt unter dem Firmennamen */
.ws-website-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 2px;
}
.ws-website-link {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 8px;
    border-radius: 6px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-family: var(--font);
    transition: all .15s;
    cursor: pointer;
    min-width: 0;
}
.ws-website-link:hover {
    background: rgba(74,143,255,.1);
    color: #cfe1ff;
}
.ws-website-link.has-url:hover .ws-website-arrow { opacity: 1; transform: translateX(2px); }
.ws-website-link.has-url { color: #cfe1ff; }
.ws-website-link.is-empty {
    color: var(--muted2);
    font-style: italic;
    cursor: default;
}
.ws-website-link.is-empty:hover { background: transparent; }
.ws-globe { font-size: 12px; opacity: .85; flex-shrink: 0; }
.ws-website-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-website-arrow {
    font-size: 11px;
    opacity: 0;
    transition: opacity .15s, transform .15s;
    color: var(--blue, #4a8fff);
    flex-shrink: 0;
}
.ws-website-link.has-url .ws-website-arrow::before { content: '↗'; }
.ws-website-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 10px;
    font-family: var(--font);
    font-size: 13px;
}
.ws-website-input:not([readonly]) {
    background: var(--bg);
    border-color: var(--border);
}
.ws-website-input:focus {
    outline: none;
    border-color: var(--blue);
}

/* Wiedervorlage-Karten: Gelb hervorgehoben in der Queue */
.lead-card.lead-followup {
    border-left: 3px solid var(--amber);
    background: rgba(240, 165, 0, 0.06);
    padding-left: 12px;
}
.lead-card.lead-followup div:first-child {
    color: var(--amber);
}

/* Bad-Data-Modal: Reason-Auswahl */
.bad-reason-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.reason-btn {
    padding: 14px 14px;
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
}
.reason-btn:hover {
    border-color: #e85a78;
    background: rgba(232, 90, 120, 0.08);
}

/* ────────────────────────────────────────────────────────────────
   AUTO-DIALER UI — Countdown-Overlay + Footer-Indikator
   ──────────────────────────────────────────────────────────────── */

.autodialer-countdown {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(74,143,255,0.08) 0%, rgba(0,0,0,0) 65%);
    opacity: 0;
    transition: opacity .25s ease;
}
.autodialer-countdown.show {
    display: flex;
    opacity: 1;
}

.ac-number {
    font-family: var(--mono);
    font-size: 220px;
    font-weight: 700;
    color: var(--blue);
    line-height: 0.9;
    text-shadow: 0 0 60px rgba(74,143,255,0.5);
    animation: ac-pulse 1s infinite ease-in-out;
}
.ac-number.next {
    color: var(--green);
    text-shadow: 0 0 60px rgba(0,214,143,0.5);
    font-size: 130px;
    letter-spacing: 0.15em;
    animation: ac-popout 0.4s ease forwards;
}

@keyframes ac-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.96; }
    50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes ac-popout {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

.ac-label {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 22px;
}
.ac-hint {
    font-family: var(--font);
    font-size: 12px;
    color: var(--muted2);
    margin-top: 36px;
    background: rgba(0,0,0,0.55);
    padding: 9px 18px;
    border-radius: 99px;
    border: 1px solid var(--border);
    backdrop-filter: blur(4px);
}

/* Footer-Indikator: pulsierender Punkt + Label */
.footer-autodialer {
    color: var(--blue);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.footer-autodialer .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 8px var(--blue);
    animation: ac-pulsedot 1.4s ease-in-out infinite;
}
@keyframes ac-pulsedot {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

/* Footer-Auto-Dialer Toggle: aktiv vs deaktiviert */
.footer-autodialer:hover { filter: brightness(1.2); }
.footer-autodialer.is-off {
    color: var(--muted);
    opacity: 0.65;
}
.footer-autodialer.is-off .pulse-dot {
    background: var(--muted2);
    box-shadow: none;
    animation: none;
}

/* ════════════════════════════════════════════════════════════════
   STATS-BAR unter der Navbar
   ════════════════════════════════════════════════════════════════ */
.stats-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 22px;
    padding: 9px 30px;
    min-height: 48px;
    background: var(--s1);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stat-emoji { font-size: 13px; }
.stat-label {
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.stat-value {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text);
}
.stat-call-timer .stat-value {
    color: var(--green);
    text-shadow: 0 0 8px rgba(0,214,143,0.4);
}
.stat-call-timer .live-dot {
    animation: stat-live-pulse 1.4s ease-in-out infinite;
}
@keyframes stat-live-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}
@keyframes recPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,38,38,.6); }
    50%      { opacity: .6; box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* ════════════════════════════════════════════════════════════════
   QUEUE-FILTER (Status-Chips über der Lead-Liste)
   ════════════════════════════════════════════════════════════════ */
.queue-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--border);
}
.qf-chip {
    width: 100%;
    text-align: left;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-family: var(--font);
    transition: all .15s;
}
.qf-chip:hover { color: var(--text); border-color: var(--muted2); }
.qf-chip.active {
    background: var(--s3);
    color: var(--blue);
    border-color: var(--blue);
}

/* ════════════════════════════════════════════════════════════════
   LEAD-CARD STATUS-FARBEN in der Queue
   ════════════════════════════════════════════════════════════════ */
/* Nicht erreicht: hell-rot */
.lead-card.lead-nichterreicht {
    border-left: 3px solid #ff6b85;
    background: rgba(255, 107, 133, 0.08);
    padding-left: 12px;
}
.lead-card.lead-nichterreicht div:first-child { color: #ff8da0; }

/* Entscheider nicht erreicht: orange — Skip im Auto Dialer */
.lead-card.lead-entscheider {
    border-left: 3px solid #ff9632;
    background: rgba(255, 150, 50, 0.08);
    padding-left: 12px;
}
.lead-card.lead-entscheider div:first-child { color: #ffb266; }

/* Kein Interesse: dunkel-rot, ausgegraut */
.lead-card.lead-keininteresse {
    border-left: 3px solid #8b1a2b;
    background: rgba(139, 26, 43, 0.08);
    padding-left: 12px;
    opacity: 0.55;
}
.lead-card.lead-keininteresse div:first-child {
    color: #c5556a;
    text-decoration: line-through;
    text-decoration-color: rgba(197, 85, 106, 0.5);
}

/* Terminiert: grün, dezent ausgegraut (Lead bleibt sichtbar als „erledigt") */
.lead-card.lead-terminiert {
    border-left: 3px solid var(--green, #00d68f);
    background: rgba(0, 214, 143, 0.08);
    padding-left: 12px;
    opacity: 0.65;
}
.lead-card.lead-terminiert div:first-child {
    color: #4fe3b1;
}
.lead-card.lead-terminiert::after {
    content: '✅ Termin';
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--green, #00d68f);
    background: rgba(0, 214, 143, 0.12);
    padding: 2px 8px;
    border-radius: 99px;
}

/* Follow-Up Datums-Zeile auf der Card (3. Zeile, klein) */
.lead-card .lead-followup-date {
    font-size: 10px;
    font-weight: 600;
    color: var(--amber);
    margin-top: 3px;
    font-family: var(--mono);
}

/* ────────────────────────────────────────────────────────────────
   ROUND 3 — Info-Mail-Button + Last-Called-Zeile + Wählen-Confirm
   ──────────────────────────────────────────────────────────────── */

/* Info-Mail Button (blau) */
.status-btn.info-mail  { background: rgba(59, 130, 246, .08);  color: var(--btn-color, #3b82f6); border: 1px solid rgba(59, 130, 246, .35); }
.status-btn.info-mail:hover { background: rgba(59, 130, 246, .18); border-color: var(--btn-color, #3b82f6); color: var(--btn-color, #3b82f6); }

/* Sonstiges-Button (lila) */
.status-btn.other  { background: rgba(168, 85, 247, .08);  color: var(--btn-color, #a855f7); border: 1px solid rgba(168, 85, 247, .35); }
.status-btn.other:hover { background: rgba(168, 85, 247, .18); border-color: var(--btn-color, #a855f7); color: var(--btn-color, #a855f7);
}

/* ── Dialer-Info Button ── */
.dialer-info-btn {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--muted2); color: var(--bg);
    border: none; font-size: 11px; font-weight: 700;
    line-height: 18px; text-align: center;
    cursor: pointer; flex-shrink: 0; padding: 0;
    transition: background .15s;
}
.dialer-info-btn:hover { background: var(--blue); }

/* ── Dialer-Info Modal Content ── */
.dinfo-section { margin-bottom: 12px; }
.dinfo-label {
    font-size: 12px; font-weight: 700; margin-bottom: 3px; color: var(--text);
}
.dinfo-text { font-size: 12px; color: var(--muted); line-height: 1.6; }
.dinfo-divider {
    border: none; border-top: 1px solid var(--border); margin: 16px 0;
}

/* Letzter-Anruf-Zeile unter der Firma im Workspace */
.ws-last-called {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    font-family: var(--mono);
    display: flex;
    align-items: center;
    gap: 4px;
}
.ws-last-called.never { color: var(--muted2); font-style: italic; }
.ws-last-called .lc-count {
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 1px 7px;
    font-size: 10px;
    color: var(--muted);
    margin-left: 4px;
}

/* Skip-Button-Hint (ESC) */
.btn-call.calling-state { cursor: pointer !important; }


/* ────────────────────────────────────────────────────────────────
   FOOTER-FIX: Footer soll ALWAYS sichtbar sein, in jeder View
   ──────────────────────────────────────────────────────────────── */

/* Damit der Footer immer am unteren Rand klebt:
   1. dashboard-view fluid auf 100vh + flex column
   2. Der content-Bereich (view-projects/-detail/workspace) bekommt flex:1
   3. footer-placeholder ist flex-shrink:0 → kann nie wegfallen */
#dashboard-view {
    min-height: 100vh;
    min-height: 100dvh;   /* dvh = dynamic viewport — korrekt auf Mobile-Safari */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;     /* CRITICAL: verhindert Body-Scroll der über interne Scroll-Container geht */
    padding-bottom: 0;    /* Body hat padding-bottom:40px — hier auf 0 zurücksetzen */
}

#footer-placeholder {
    flex-shrink: 0;       /* niemals zusammenstauchen */
    margin-top: auto;     /* falls darüber kein flex:1 greift, drückt's nach unten */
}

/* content-area + workspace-container fluiden Höhen-Handling */
.content-area {
    min-height: 0;        /* flex-Kinder mit overflow brauchen das */
}

/* Mein-Dashboard-Variante: dashboard-content kann scrollen, Footer bleibt aber */
.dashboard-content {
    min-height: 0;
}

/* ════════════════════════════════════════════════════════════════
   ARBEITSPLATZ MOBILE — Schritt 4
   Twilio-Telefonie bleibt voll funktional. Layout stapelt:
     ≤1024 → Queue schmaler, action-bar wrapt
     ≤768  → Queue oben (kompakt), Workspace darunter, Lists einspaltig
     ≤480  → Schaltzentrale full-screen, Tap-optimiert
   ════════════════════════════════════════════════════════════════ */

/* Tablet — KPIs / Layout / Filter weichen kompakter */
@media (max-width: 1024px) {
    .lead-queue { width: 280px; }
    .active-workspace { padding: 24px; }
    .workspace-header h1 { font-size: 26px; }
    .main-layout { grid-template-columns: 1fr; }
    .status-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet hochkant + großes Phone — Queue oben gestapelt */
@media (max-width: 768px) {
    /* Stats-Bar: kompakter, kein Wrap der die Höhe sprengt */
    .stats-bar {
        gap: 10px;
        padding: 6px 12px;
        min-height: 44px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .stat-item { font-size: 11px; flex-shrink: 0; }
    .stats-bar-actions { flex-shrink: 0; }

    /* Workspace stapelt vertikal — beide Kinder müssen exakt in den Flex-Container passen */
    .workspace-container {
        flex-direction: column;
        overflow: hidden;   /* clippt alle Kinder — verhindert das Scroll-über-Scroll-Bug */
    }

    /* Queue: feste Kompakthöhe, kein Überlauf nach außen */
    .lead-queue {
        width: 100%;
        height: 38vh;       /* feste Höhe statt max-height → verlässlicheres Layout */
        max-height: 38vh;
        min-height: 110px;
        flex-shrink: 0;     /* darf nicht zusammengedrückt werden */
        overflow: hidden;   /* clippt auf die gesetzten Höhe */
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .queue-header { padding: 10px 12px; }

    /* Queue-Filter: horizontal scrollbar statt vertikaler Stapel → spart ~120px Höhe */
    .queue-filter {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding: 6px 10px 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;  /* Firefox */
    }
    .queue-filter::-webkit-scrollbar { display: none; }
    .qf-chip {
        padding: 5px 10px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
        width: auto;        /* override der Desktop-100%-Breite */
    }

    /* Workspace: nimmt exakt den Rest — min-height:0 ist Pflicht für overflow-y in Flex */
    .active-workspace {
        flex: 1;
        min-height: 0;      /* Flex-Falle fix: ohne das funktioniert overflow-y nicht */
        padding: 14px 16px;
        gap: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .workspace-header h1 { font-size: 20px; margin: 4px 0 3px; }
    .ws-name-input { font-size: 17px; }

    /* Action-Bar: Phone oben, Buttons darunter — Tap-Targets fett */
    .action-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }
    .action-bar .phone-wrap { width: 100%; }
    .action-bar > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 8px !important;
    }
    .btn-call { padding: 14px; font-size: 14px; }
    .btn-mute { width: 100%; }

    /* Status-Grid: 2 Spalten — alle Buttons gleich groß und gut tappbar */
    .status-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .status-btn { padding: 14px 8px; font-size: 12px; min-height: 52px; }

    /* Lead-Edit-Grid: 1 Spalte */
    .lead-edit-grid { grid-template-columns: 1fr; gap: 10px; }

    /* Modals — fast volle Breite, weniger Padding, scrollbar wenn Inhalt lang */
    .modal-box {
        width: min(96vw, 560px);
        padding: 20px 18px;
        max-height: 90dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-actions { flex-direction: column-reverse; gap: 8px; }
    .modal-actions button { width: 100%; }
    .qf-grid { grid-template-columns: 1fr; }
    .bad-reason-grid { grid-template-columns: 1fr 1fr; }

    /* Schaltzentrale: nahezu full-width Slide-In */
    .zentrale { width: 92vw; min-width: 0; max-width: 92vw; }
    .zentrale-collapse { left: -22px; }
    /* body.in-call-mode .zentrale-collapse — entfernt v418, Button muss immer sichtbar sein */

    /* iOS safe-area: Abstand vom Home-Indicator */
    .active-workspace { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* Phone — kleinste Geräte: Schaltzentrale komplett full-screen */
@media (max-width: 480px) {
    .zentrale {
        width: 100vw;
        max-width: 100vw;
    }
    .zentrale-collapse {
        left: auto;
        right: 12px;
        top: 12px;
        transform: none;
    }
    .zentrale-inner { padding: 16px 14px; }
    .zentrale-keypad { gap: 8px; }
    .zk { min-height: 56px; }
    .zk-num { font-size: 22px; }
    .zentrale-display { font-size: 22px; }
    .zentrale-call { padding: 16px; font-size: 14px; }

    /* Queue etwas kleiner auf kleinen Phones */
    .lead-queue { height: 32vh; max-height: 32vh; }
    .lead-card { padding: 10px 12px; margin-bottom: 6px; }

    /* Bad-Reason-Modal: 1 Spalte auf Phone */
    .bad-reason-grid { grid-template-columns: 1fr; }

    /* Action-Bar Buttons gleich groß */
    .action-bar > div:last-child {
        grid-template-columns: 1fr 1fr;
    }
    .action-bar > div:last-child > button:nth-child(1) { grid-column: 1 / 2; }
    .action-bar > div:last-child > div { grid-column: 1 / -1; order: 3; }
    .action-bar > div:last-child > button:last-child { grid-column: 2 / 3; }

    /* Notes kompakter */
    .notes-area { min-height: 80px; }
    .notes-hint { display: none; }
}

/* Wake-Lock-/Live-Call-Hinweis — auf Mobile etwas größer */
@media (max-width: 480px) {
    #live-call-banner {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   AUFTRAGSÜBERSICHT — Eingangsanimation
   ═══════════════════════════════════════════════════════ */

/* Header (Titel + Suche) gleitet von oben rein */
@keyframes apHeaderEnter {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ap-header-enter {
    animation: apHeaderEnter .38s cubic-bezier(.4,0,.2,1) both;
}

/* Einzelne Karte: von unten rein + leichtes Scale */
@keyframes cardEnter {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.project-card.card-enter {
    animation: cardEnter .44s cubic-bezier(.22,1,.36,1) both;
}

/* ═══════════════════════════════════════════════════════
   SKIP-ANIMATION — Neuer Lead
   ═══════════════════════════════════════════════════════ */

@keyframes wsSkipOut {
    from { opacity: 1; transform: translateX(0)     scale(1);   }
    to   { opacity: 0; transform: translateX(-36px) scale(.98); }
}
@keyframes wsSkipIn {
    from { opacity: 0; transform: translateX(36px)  scale(.98); }
    to   { opacity: 1; transform: translateX(0)     scale(1);   }
}
@keyframes wsBackOut {
    from { opacity: 1; transform: translateX(0)    scale(1);   }
    to   { opacity: 0; transform: translateX(36px) scale(.98); }
}
@keyframes wsBackIn {
    from { opacity: 0; transform: translateX(-36px) scale(.98); }
    to   { opacity: 1; transform: translateX(0)     scale(1);   }
}
.active-workspace.skip-out {
    animation: wsSkipOut .2s cubic-bezier(.4,0,.2,1) both;
    pointer-events: none;
}
.active-workspace.skip-in {
    animation: wsSkipIn .28s cubic-bezier(.4,0,.2,1) both;
}
.active-workspace.back-out {
    animation: wsBackOut .2s cubic-bezier(.4,0,.2,1) both;
    pointer-events: none;
}
.active-workspace.back-in {
    animation: wsBackIn .28s cubic-bezier(.4,0,.2,1) both;
}

/* Skip-Toast: "⏭ Nächster Lead" */
#skip-toast {
    position: fixed;
    bottom: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(74,143,255,.13);
    border: 1px solid rgba(74,143,255,.35);
    border-radius: 10px;
    padding: .5rem 1.3rem;
    font-size: .82rem;
    font-weight: 600;
    color: #c8d0e8;
    letter-spacing: .02em;
    pointer-events: none;
    z-index: 9990;
    opacity: 0;
    white-space: nowrap;
}
#skip-toast.show {
    animation: skipToastAnim 1.6s ease forwards;
}
@keyframes skipToastAnim {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px);  }
    18%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
    72%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
    100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════
   KI-GESPRÄCHSBERATER — Einwandbehandlung
   ═══════════════════════════════════════════════════════ */

.ki-coach-bar {
    background: var(--s1);
    border: 1px solid rgba(167, 139, 250, .25);
    border-left: 3px solid #a78bfa;
    border-radius: var(--radius);
    transition: border-color .3s;
}
.ki-coach-bar.ki-has-result {
    border-color: rgba(167, 139, 250, .5);
    border-left-color: #a78bfa;
    box-shadow: 0 0 0 1px rgba(167, 139, 250, .12);
}

/* Header-Zeile */
.ki-coach-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #a78bfa;
}

/* Idle — kompakter Ein-Zeiler */
.ki-idle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    color: var(--muted);
}
.ki-idle-label {
    font-weight: 700;
    color: #a78bfa;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ki-idle-hint {
    font-size: 11px;
    color: var(--muted);
    opacity: .7;
}

/* Live (analyzing + result) */
.ki-live { padding: 10px 0 14px; }

.ki-live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 8px;
    border-bottom: 1px solid rgba(167,139,250,.15);
    margin-bottom: 4px;
}

.ki-analyzing-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #a78bfa;
}

.ki-spin {
    width: 12px; height: 12px;
    border: 2px solid rgba(167,139,250,.25);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: ki-rotate .7s linear infinite;
    flex-shrink: 0;
}
@keyframes ki-rotate { to { transform: rotate(360deg); } }

.ki-tip-placeholder {
    color: var(--muted) !important;
    font-style: normal !important;
    opacity: .5;
}

/* Eingabezeile */
.ki-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid rgba(167,139,250,.1);
}
.ki-input {
    flex: 1;
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}
.ki-input::placeholder { color: var(--muted); opacity: .6; }
.ki-input:focus { border-color: rgba(167,139,250,.5); }
.ki-send-btn {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: #a78bfa;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, opacity .15s;
}
.ki-send-btn:hover { background: #9167f5; }
.ki-send-btn:disabled { opacity: .4; cursor: default; }

/* Ergebnis */
.ki-result {
    padding: 10px 16px 14px;
}

/* Ergebnis-Row */
.ki-result-row {
    display: flex;
    align-items: stretch;
    min-height: 80px;
    margin-top: 8px;
}

.ki-sep {
    width: 1px;
    background: var(--border);
    flex-shrink: 0;
    margin: 10px 0;
}

/* Tiles */
.ki-tile {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.ki-tile-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Wahrscheinlichkeit */
.ki-prob-tile {
    flex: 0 0 110px;
    align-items: center;
}
.ki-prob-ring {
    position: relative;
    width: 48px; height: 48px;
}
.ki-ring-svg {
    width: 48px; height: 48px;
    transform: rotate(-90deg);
}
.ki-ring-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 4;
}
.ki-ring-fill {
    fill: none;
    stroke: var(--green);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray .6s ease, stroke .4s;
}
.ki-ring-fill.warn  { stroke: #f59e0b; }
.ki-ring-fill.danger{ stroke: var(--red); }
.ki-prob-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
}

/* Einwand */
.ki-obj-tile { flex: 0 0 200px; }
.ki-obj-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 6px;
    padding: 3px 9px;
    width: fit-content;
}
.ki-obj-tag.none {
    background: rgba(255,255,255,.04);
    border-color: var(--border);
    color: var(--muted);
    font-weight: 500;
}
.ki-obj-sub {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}

/* Gesprächstipp */
.ki-tip-tile { flex: 1; min-width: 0; }
.ki-copy-btn {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--muted);
    padding: 2px 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color .15s, border-color .15s;
}
.ki-copy-btn:hover { color: var(--text); border-color: var(--accent); }
.ki-copy-btn.copied { color: var(--green); border-color: var(--green); }
.ki-tip-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
    font-style: italic;
}


@media (max-width: 768px) {
    .ki-result { flex-direction: column; }
    .ki-sep { width: auto; height: 1px; margin: 0 14px; }
    .ki-prob-tile { flex-direction: row; gap: 12px; align-items: center; flex: none; }
    .ki-obj-tile, .ki-tip-tile { flex: none; }
}

/* ── Live-Transcript Area ─────────────────────────────────────────────────── */
.ki-transcript-area {
    max-height: 110px;
    overflow-y: auto;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(167,139,250,.1);
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(167,139,250,.3) transparent;
}
.ki-transcript-area::-webkit-scrollbar { width: 4px; }
.ki-transcript-area::-webkit-scrollbar-thumb { background: rgba(167,139,250,.3); border-radius: 4px; }

.ki-transcript-empty {
    font-size: 11px;
    color: var(--muted);
    opacity: .5;
    font-style: italic;
}

.ki-seg-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text);
}
.ki-seg-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 1px 5px;
    border-radius: 4px;
}
.ki-seg-agent {
    background: rgba(139,92,246,.15);
    color: #a78bfa;
}
.ki-seg-lead {
    background: rgba(251,191,36,.12);
    color: #fbbf24;
}
.ki-seg-text {
    color: rgba(255,255,255,.75);
}

/* ── Coach-Status-Banner (Live-Einschätzung) ──────────────────────────────── */
.ki-coach-feedback-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(167,139,250,.08);
    border-bottom: 1px solid rgba(167,139,250,.15);
    font-size: 12px;
    font-weight: 600;
    color: #e2d9ff;
    line-height: 1.35;
}

.ki-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(167,139,250,.4);
    animation: kiDotPulse 2s ease-in-out infinite;
}
.ki-status-dot.dot-green  { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.5); }
.ki-status-dot.dot-yellow { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.5); }
.ki-status-dot.dot-red    { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.5); }

@keyframes kiDotPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* ══════════════════════════════════════════════════════════════════
   KI-PANEL ERWEITERUNGEN — Metriken, Coaching-Bar, Einwand, Phase
   ══════════════════════════════════════════════════════════════════ */

/* Header-Rechts: Phase-Badge + Spinner nebeneinander */
.ki-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Gesprächsphase-Badge ──────────────────────────────────────── */
.ki-phase-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background .3s, color .3s, border-color .3s;
}
/* Phasen-Farben: grau → blau → orange → grün */
.ki-phase-badge.phase-intro         { background: rgba(90,95,126,.18);  color: var(--muted);   border-color: rgba(90,95,126,.3); }
.ki-phase-badge.phase-qualifizierung{ background: rgba(74,143,255,.15); color: var(--blue);   border-color: rgba(74,143,255,.3); }
.ki-phase-badge.phase-angebot       { background: rgba(240,165,0,.15);  color: var(--amber);  border-color: rgba(240,165,0,.3); }
.ki-phase-badge.phase-abschluss     { background: rgba(0,214,143,.15);  color: var(--green);  border-color: rgba(0,214,143,.3); }

/* ── Metriken-Kacheln ─────────────────────────────────────────── */
.ki-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid rgba(167,139,250,.12);
    margin-bottom: 0;
}

.ki-metric-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    border-right: 1px solid rgba(167,139,250,.1);
    text-align: center;
    min-width: 0;
}
.ki-metric-tile:last-child { border-right: none; }

.ki-metric-icon {
    font-size: 14px;
    line-height: 1;
}

.ki-metric-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    white-space: nowrap;
}

.ki-metric-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    font-family: var(--mono);
    line-height: 1.1;
    transition: color .3s;
}
/* Platzhalter: gedimmt bis echte Daten kommen */
.ki-metric-placeholder {
    color: var(--muted2);
    font-size: 15px;
}
/* Redeanteil: rot wenn Agent > 70% */
.ki-metric-value.ki-talk-danger { color: var(--red); }

.ki-metric-bar-wrap {
    width: 100%;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin: 1px 0;
}
.ki-metric-bar {
    height: 100%;
    background: var(--green);
    border-radius: 2px;
    transition: width .5s ease, background .3s;
}
/* Bar-Farbe rot wenn Agent redet zu viel */
.ki-metric-bar.ki-bar-danger { background: var(--red); }

.ki-metric-sub {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
}

/* Mobile: Kacheln umbrechen auf 2×2 */
@media (max-width: 600px) {
    .ki-metrics-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .ki-metric-tile:nth-child(2) { border-right: none; }
    .ki-metric-tile:nth-child(3) { border-right: 1px solid rgba(167,139,250,.1); border-top: 1px solid rgba(167,139,250,.1); }
    .ki-metric-tile:nth-child(4) { border-right: none; border-top: 1px solid rgba(167,139,250,.1); }
}

/* ── Coaching-Hinweis-Bar ─────────────────────────────────────── */
.ki-coaching-bar {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(240,165,0,.09);
    border-bottom: 1px solid rgba(240,165,0,.2);
    font-size: 12px;
    color: #fcd34d;
    line-height: 1.45;
}

.ki-coaching-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ki-coaching-text {
    font-weight: 500;
    color: #fde68a;
}

/* ── Einwand-Block ────────────────────────────────────────────── */
.ki-objection-block {
    margin: 8px 14px;
    border-left: 3px solid var(--red);
    background: rgba(255,79,106,.06);
    border-radius: 0 6px 6px 0;
    padding: 8px 12px;
}

.ki-obj-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ki-obj-label {
    font-size: 13px;
    font-weight: 800;
    color: #ff8099;
    line-height: 1.2;
}

.ki-obj-sub-new {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.35;
}

.ki-obj-tip {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
    opacity: .85;
    /* Gegenstrategie als kursiver Hinweis */
    font-style: italic;
    border-top: 1px solid rgba(255,79,106,.15);
    padding-top: 5px;
}

/* ── Post-Call Analyse-Box ────────────────────────────────────── */
.ki-postcall {
    margin: 10px 14px;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid var(--border, #2a2a3e);
    border-radius: 10px;
    padding: 14px 16px;
    animation: ki-fadein 0.4s ease;
}

.ki-postcall-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
}

.ki-postcall-title {
    flex: 1;
    font-size: 13px;
    color: var(--text, #fff);
}

.ki-postcall-prob {
    font-size: 13px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--accent, #6c63ff);
    color: #fff;
}

.ki-postcall-body {
    font-size: 12px;
    color: var(--text-muted, #aaa);
    line-height: 1.6;
    margin-bottom: 10px;
}

.ki-postcall-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted, #aaa);
}

.ki-postcall-metric {
    background: var(--bg-input, #12121f);
    border-radius: 6px;
    padding: 6px 8px;
    text-align: center;
}

.ki-postcall-metric strong {
    display: block;
    font-size: 16px;
    color: var(--text, #fff);
}

/* ── Skript-Panel — Live Step-by-Step Leitfaden ─────────────── */
.ki-script-panel {
    margin-top: 10px;
    border: 1px solid rgba(108,99,255,0.3);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg, #0e0e1a);
}
.ki-script-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    background: rgba(108,99,255,0.12);
    font-size: 12px;
    font-weight: 600;
    color: #a78bfa;
}
.ki-script-step-badge {
    font-size: 10px;
    font-weight: 600;
    background: rgba(108,99,255,0.25);
    color: #c4b5fd;
    padding: 2px 8px;
    border-radius: 20px;
}
/* Steps-Liste */
.ki-script-steps {
    padding: 8px 0;
    max-height: 280px;
    overflow-y: auto;
}
.ki-script-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--muted, #666);
    line-height: 1.5;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    cursor: default;
}
/* Erledigter Schritt */
.ki-script-step.done {
    color: #4a4a6a;
    text-decoration: line-through;
    opacity: 0.5;
}
.ki-script-step.done .ki-step-num { background: #2a2a3e; color: #4a4a6a; }
/* Aktueller Schritt — hervorgehoben */
.ki-script-step.active {
    color: #fff;
    background: rgba(108,99,255,0.1);
    border-left-color: #6c63ff;
}
.ki-script-step.active .ki-step-num {
    background: #6c63ff;
    color: #fff;
}
/* Nächster Schritt */
.ki-script-step.next {
    color: #aaa;
}
.ki-script-step.next .ki-step-num { background: #2a2a3e; color: #888; }
/* Schritt-Nummer */
.ki-step-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1e1e30;
    color: #666;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: all 0.3s ease;
}
.ki-step-text { flex: 1; }

/* ── ki-metric-tile Zustandsfarben (WPM, Geduld) ─────────────── */
.ki-metric-tile.danger .ki-metric-value { color: #f87171; }
.ki-metric-tile.ok     .ki-metric-value { color: #4ade80; }

/* ── Redeanteil-Warnung in der Coaching-Bar ───────────────────── */
.ki-talk-warning {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #fca5a5;
    white-space: nowrap;
    flex-shrink: 0;
}