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

:root {
    --bg: #0d0f15;
    --s1: #13161f;
    --s2: #1a1d29;
    --s3: #222638;
    --border: rgba(255, 255, 255, 0.07);
    --text: #dde0ec;
    --muted: #5a5f7e;
    --muted2: #3e4260;
    --green: #00d68f;
    --blue: #4a8fff;
    --amber: #f0a500;
    --red: #ff4f6a;
    --purple: #9f7aea;
    --font: 'Syne', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --radius: 8px;
}

/* ── Light Mode ────────────────────────────────────────────────── */
body.light-mode {
    --bg:     #f4f5f9;
    --s1:     #ffffff;
    --s2:     #eef0f6;
    --s3:     #e2e5ef;
    --border: rgba(0, 0, 0, 0.08);
    --text:   #1a1d2e;
    --muted:  #6b7080;
    --muted2: #9ca3b0;
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    padding-bottom: 40px; /* Platz für den fixierten Footer */
    line-height: 1.5;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   GLOBALE SCROLLBARS — passen zum Dark-Theme + Brand-Akzent.
   Greift auf alle scrollbaren Container im Dashboard.
   ════════════════════════════════════════════════════════════════ */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(74,143,255,0.35) transparent;
}

/* WebKit / Chromium / Edge / Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(74,143,255,0.35), rgba(0,214,143,0.35));
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(74,143,255,0.65), rgba(0,214,143,0.65));
    background-clip: padding-box;
    border: 2px solid transparent;
}
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #4a8fff, #00d68f);
    background-clip: padding-box;
    border: 2px solid transparent;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Schmalere Variante für Modal-Bodies / kleine Listen — opt-in via Klasse */
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { border: 1px solid transparent; }

#particles-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; pointer-events: none; opacity: 0.6;
}

.editable-target {
    cursor: pointer; padding: 0 4px; border-radius: 4px; transition: background 0.2s;
}
.editable-target:hover { background: rgba(240, 165, 0, 0.2); color: var(--amber); }

@keyframes rl-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes rl-text-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.logo { display: flex; align-items: center; gap: 9px; }
.logo-mark {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, #4a8fff, #00d68f, #4a8fff);
    background-size: 300% 300%;
    animation: rl-gradient-shift 8s ease infinite;
    display: flex; align-items: center; justify-content: center;
}
.logo-mark svg { width: 16px; height: 16px; fill: none; stroke: var(--bg); stroke-width: 2; }
.logo-name {
    font-size: 18px; font-weight: 800; letter-spacing: -.4px;
    background: linear-gradient(135deg, #4a8fff, #00d68f, #4a8fff);
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rl-text-shift 8s ease infinite;
    animation-delay: 0.5s;
}
.logo-name em { font-style: normal; }

#login-view, #dashboard-view {
    display: none; height: 100%; opacity: 0; transition: opacity 0.4s ease;
}
#login-view.active, #dashboard-view.active { display: flex; opacity: 1; }

#login-view {
    align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 0%, var(--s2) 0%, transparent 60%);
}

.login-box {
    background: var(--s1); border: 1px solid var(--border);
    padding: 40px; border-radius: 12px; width: 100%; max-width: 380px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.login-box .logo { justify-content: center; margin-bottom: 30px; }
.input-group { margin-bottom: 15px; }
.input-group label {
    display: block; font-size: 11px; font-weight: 700; color: var(--muted);
    margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em;
}
.input-group input {
    width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border);
    color: var(--text); border-radius: var(--radius); font-family: var(--font); font-size: 14px;
    outline: none; transition: border 0.2s;
}
.input-group input:focus { border-color: var(--blue); }
.btn-login {
    width: 100%; padding: 12px; margin-top: 10px; background: var(--green); color: var(--bg);
    border: none; border-radius: var(--radius); font-family: var(--font); font-size: 14px; font-weight: 700;
    cursor: pointer; transition: transform 0.1s, opacity 0.2s;
}
.btn-login:hover { opacity: 0.9; transform: translateY(-1px); }

#dashboard-view { flex-direction: column; }

/* Board-Mode: Board füllt Viewport, Leaderboard darunter scrollbar */
.dashboard-content {
    padding: 10px 16px 46px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ─── Slim Top Bar ─────────────────────────────────────────── */
.dash-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 0 4px;
}
.dash-topbar-info { display: flex; align-items: baseline; gap: 12px; }
.dash-topbar-title { font-size: 17px; font-weight: 800; }
.dash-topbar-sub   { font-size: 12px; color: var(--muted); }
.dash-topbar-actions { display: flex; align-items: center; gap: 8px; }
.btn-arbeitsplatz {
    padding: 8px 18px;
    background: var(--green); color: var(--bg);
    border-radius: var(--radius); font-weight: 700; font-size: 13px;
    text-decoration: none; white-space: nowrap;
    transition: opacity .15s, transform .1s;
}
.btn-arbeitsplatz:hover { opacity: .88; transform: translateY(-1px); }
.btn-icon-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--s1);
    color: var(--muted); text-decoration: none; font-size: 14px;
    transition: all .15s;
}
.btn-icon-link:hover { border-color: var(--green); color: var(--green); }

/* ─── KPI Board Grid ────────────────────────────────────────── */
.kpi-board {
    flex: none;
    min-height: calc(100% - 10px); /* füllt Viewport, Leaderboard beginnt unter der Falte */
    display: grid;
    gap: 0;
    grid-template-areas:
        "termine  brutto   netto    entscheider"
        "meter    meter    chart    chart"
        "umsatz   effektiv quote7d  bottom";
    grid-template-rows: 116px 1fr 88px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* KEIN overflow:hidden — sonst clippt es Chart.js Tooltips */
    overflow: visible;
    position: relative;
}

/* Zellen: overflow visible damit Tooltips über Nachbarzellen erscheinen */
.kpi-board > * { min-height: 0; min-width: 0; overflow: visible; position: relative; }

/* Hover: hovered Zelle liegt oben — Tooltip überdeckt Nachbarzelle */
.kpi-board > .kpi-card:hover { z-index: 20; }

/* Override min-height constraints */
.kpi-board .kpi-hero     { min-height: 0; }
.kpi-board .kpi-gauge-card { min-height: 0; }
.kpi-board .kpi-money    { min-height: 0; }

/* ── Board-spezifische Typography: Geckoboard-Proportionen ── */
/* Zahlen dominieren die Zelle, Labels sind winzig */
.kpi-board > .kpi-card { padding: 14px 16px 12px; }
.kpi-board > .kpi-card .kpi-label {
    font-size: 9px; letter-spacing: .12em; margin-bottom: 4px; opacity: .7;
}
.kpi-board > .kpi-card .kpi-head { margin-bottom: 2px; }
.kpi-board > .kpi-card .kpi-value-xl {
    font-size: 58px; line-height: .92; margin-bottom: 6px;
}
.kpi-board > .kpi-card .kpi-trend {
    font-size: 10px; padding: 2px 6px;
}
.kpi-board > .kpi-card .kpi-foot-label { font-size: 10px; opacity: .7; }
.kpi-board > .kpi-card .kpi-sparkline-wrap { height: 32px; margin: 0 0 4px; }

/* Progress-bar kompakter im Board */
.kpi-board .kpi-progress-wrap { margin-top: 4px; }
.kpi-board .kpi-progress-meta { font-size: 11px; margin-top: 5px; }

/* Gauge im Board: SVG kleiner, zentriert */
.kpi-board > .kpi-gauge-card { padding: 12px 16px 10px; }
.kpi-board > .kpi-gauge-card .gauge-svg { max-width: 170px; }
.kpi-board > .kpi-gauge-card .gauge-value { font-size: 22px; }
.kpi-board > .kpi-gauge-card .gauge-center { margin-top: -16px; }

/* Chart-Panel füllt Zelle vertikal */
.kpi-chart-panel {
    display: flex; flex-direction: column;
    overflow: hidden; /* chart braucht overflow:hidden intern */
    background: transparent; border: none; border-radius: 0; padding: 14px 16px;
}
.kpi-chart-inner {
    flex: 1; position: relative; min-height: 0;
    overflow: hidden;
}
.kpi-chart-inner canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* Leaderboard-Panel */
.kpi-leader-panel {
    display: flex; flex-direction: column;
    background: transparent; border: none; border-radius: 0; padding: 14px 16px;
}
.kpi-leader-panel #leaderboard { flex: 1; overflow-y: auto; }

/* Bottom-Row Cards */
.kpi-bottom-card {
    display: flex; flex-direction: column; justify-content: center;
    padding: 10px 16px;
}
.kpi-bottom-card .kpi-head { margin-bottom: 2px; }

/* kpi-value-lg: für bottom-row — im Board etwas kleiner */
.kpi-value-lg { font-family: var(--mono); font-size: 28px; font-weight: 700; line-height: 1.05; }
.kpi-board .kpi-value-lg { font-size: 26px; }

/* Kleiner Donut für bottom-row */
.kpi-donut-sm { width: 60px; height: 60px; margin: 2px 0; }
.kpi-donut-sm .donut-center { font-size: 13px; }

/* Micro-Stats Grid (3 KPIs in einer Karte) */
.kpi-micro-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    padding: 0; overflow: hidden;
}
.micro-stat {
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 14px; position: relative;
    border-right: 1px solid var(--border);
}
.micro-stat:last-child { border-right: none; }
.micro-stat::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
}
.micro-stat.b::before { background: var(--blue); }
.micro-stat.a::before { background: var(--amber); }
.micro-label {
    font-size: 10px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.micro-value {
    font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1.15;
}

/* ─── Dashboard Help Button ─────────────────────────────────── */
.dash-help-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--s2); border: 1px solid var(--border);
    color: var(--muted); font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all .15s;
    font-family: var(--font); line-height: 1;
    flex-shrink: 0;
}
.dash-help-btn:hover {
    background: var(--blue); border-color: var(--blue);
    color: #fff; transform: scale(1.15);
}

/* ─── Dashboard FAQ / Help Modal ────────────────────────────── */
.dash-help-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
    z-index: 1200; align-items: center; justify-content: center;
}
.dash-help-overlay.open { display: flex; animation: overlayIn .2s ease; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.dash-help-modal {
    background: var(--s1); border: 1px solid var(--border);
    border-radius: 16px; width: 100%; max-width: 560px;
    max-height: 82vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    animation: modalUp .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalUp {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

.dash-help-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 20px 16px; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.dash-help-title { font-size: 15px; font-weight: 800; }
.dash-help-close {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--s2); border: 1px solid var(--border);
    color: var(--muted); font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.dash-help-close:hover { background: var(--red); border-color: var(--red); color: #fff; }

.dash-help-body {
    overflow-y: auto; padding: 16px 20px 20px;
    display: flex; flex-direction: column; gap: 20px;
}

.faq-section { display: flex; flex-direction: column; gap: 1px; }
.faq-section-title {
    font-size: 10px; font-weight: 800; color: var(--muted);
    text-transform: uppercase; letter-spacing: .08em;
    padding: 0 0 8px;
}

.faq-item {
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border);
    background: var(--s1);
    margin-bottom: 6px;
}
.faq-q {
    padding: 11px 14px; font-size: 13px; font-weight: 700;
    cursor: pointer; user-select: none;
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; transition: background .15s;
}
.faq-q::after { content: '›'; color: var(--muted); font-size: 16px; flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-q::after { transform: rotate(90deg); }
.faq-q:hover { background: var(--s2); }
.faq-a {
    display: none; padding: 0 14px 12px;
    font-size: 13px; color: var(--muted); line-height: 1.65;
    border-top: 1px solid var(--border);
}
.faq-a strong { color: var(--text); }
.faq-item.open .faq-a { display: block; animation: faqOpen .18s ease; }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Global Modal Overlay — wird seitenspezifisch überschrieben ─ */
/* z-index 910 = über topbar (800) und subnav (699–700), unter dash-help (1200) */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.72); backdrop-filter: blur(3px);
    z-index: 910;
    align-items: flex-start; justify-content: center;
    padding: 90px 16px 40px;
    overflow-y: auto;
}
.modal-overlay.show { display: flex; }

/* ════════════════════════════════════════════════════════════════
   UNIFIED BOARD — Cards verschmelzen zu einer Einheit (v156)
   Board ist ein Panel, innen nur Trennlinien, keine Einzelkarten
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   UNIFIED BOARD — ein Panel, interne Trennlinien, kein overflow:hidden
   Tooltip-Problem gelöst: Board hat overflow:visible, Ecken via corner-cells
   ════════════════════════════════════════════════════════════════ */

/* Äußerer Rahmen + Hintergrund des Boards */
.kpi-board {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: 14px;
    /* KEIN overflow:hidden — Tooltips müssen raus können */
    animation: boardIn .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes boardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ecken: die 4 Eckzellen bekommen border-radius statt das Board */
.kpi-board > [style*="grid-area:termine"]     { border-radius: 14px 0 0 0; }
.kpi-board > [style*="grid-area:entscheider"] { border-radius: 0 14px 0 0; }
.kpi-board > [style*="grid-area:umsatz"]      { border-radius: 0 0 0 14px; }
.kpi-board > [style*="grid-area:bottom"]      { border-radius: 0 0 14px 0; }

/* Alle direkten Kinder: transparent, keine eigene Border */
.kpi-board > .kpi-card,
.kpi-board > .panel {
    background: transparent !important;
    border: none !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    animation: none;
}

/* Hover: subtiles Highlight der Zelle */
.kpi-board > .kpi-card:hover {
    transform: none !important;
    background: rgba(255,255,255,.03) !important;
    box-shadow: none !important;
}

/* Letzte Spalte: kein rechter Rand */
.kpi-board > [style*="grid-area:entscheider"],
.kpi-board > [style*="grid-area:leader"],
.kpi-board > [style*="grid-area:bottom"] {
    border-right: none !important;
}

/* Letzte Zeile: kein unterer Rand */
.kpi-board > [style*="grid-area:umsatz"],
.kpi-board > [style*="grid-area:effektiv"],
.kpi-board > [style*="grid-area:quote7d"],
.kpi-board > [style*="grid-area:bottom"] {
    border-bottom: none !important;
}

/* Board hover: leichter Außen-Glow */
.kpi-board:hover {
    border-color: rgba(255,255,255,.13);
    box-shadow: 0 0 0 1px rgba(74,143,255,.07), 0 16px 48px rgba(0,0,0,.28);
    transition: border-color .3s, box-shadow .3s;
}

/* Micro-grid */
.kpi-micro-grid { background: transparent !important; }
.micro-stat { border-color: var(--border); }

/* Legacy-Entfernungen — alte .dash-header Klasse brauchen wir nicht mehr */
.dash-header h1 { font-size: 24px; margin-bottom: 4px; }
.dash-header p { color: var(--muted); font-size: 14px; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kpi-card { background: var(--s1); border: 1px solid var(--border); padding: 20px; border-radius: 12px; position: relative; overflow: hidden; }
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; }
.kpi-card.g::before { background: var(--green); }
.kpi-card.b::before { background: var(--blue); }
.kpi-card.a::before { background: var(--amber); }
.kpi-card.p::before { background: var(--purple); }
.kpi-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }
.kpi-value { font-family: var(--mono); font-size: 32px; font-weight: 600; margin-bottom: 4px; }
.kpi-sub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi-sub .pos { color: var(--green); background: rgba(0, 214, 143, 0.1); padding: 2px 6px; border-radius: 4px; }

/* ════════════════════════════════════════════════════════════════
   KPI DASHBOARD — Geckoboard-Style Visualisierungen (v155)
   ════════════════════════════════════════════════════════════════ */

/* Card-Lift on hover + smoother corners */
.kpi-card {
    transition: transform .25s cubic-bezier(.2,.8,.2,1),
                border-color .25s,
                box-shadow .25s;
}
.kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.kpi-card.g:hover { box-shadow: 0 10px 30px rgba(0,214,143,.12); }
.kpi-card.b:hover { box-shadow: 0 10px 30px rgba(74,143,255,.12); }
.kpi-card.a:hover { box-shadow: 0 10px 30px rgba(240,165,0,.12); }
.kpi-card.p:hover { box-shadow: 0 10px 30px rgba(159,122,234,.12); }

/* Animated entrance */
@keyframes kpiFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kpi-row > .kpi-card { animation: kpiFadeUp .45s cubic-bezier(.2,.8,.2,1) both; }
.kpi-row > .kpi-card:nth-child(1) { animation-delay: .02s; }
.kpi-row > .kpi-card:nth-child(2) { animation-delay: .08s; }
.kpi-row > .kpi-card:nth-child(3) { animation-delay: .14s; }
.kpi-row > .kpi-card:nth-child(4) { animation-delay: .20s; }

/* Head row: label + trend pill */
.kpi-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; gap: 8px;
}
.kpi-head .kpi-label { margin-bottom: 0; }

/* Hero cards: bigger numbers, taller */
.kpi-hero { min-height: 180px; display: flex; flex-direction: column; }
.kpi-value-xl { font-size: 44px; line-height: 1.05; margin-bottom: 12px; }
.kpi-value-xxl { font-size: 52px; line-height: 1.05; margin-bottom: 8px; }

/* Foot label */
.kpi-foot-label {
    font-size: 11px; color: var(--muted);
    margin-top: auto; padding-top: 6px;
    letter-spacing: .02em;
}

/* ─── Trend-Pill ────────────────────────────────── */
.kpi-trend {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 999px;
    background: var(--s2); color: var(--muted);
    border: 1px solid var(--border);
    white-space: nowrap;
    transition: all .3s;
}
.kpi-trend.up    { color: var(--green); background: rgba(0,214,143,.10);  border-color: rgba(0,214,143,.25); }
.kpi-trend.down  { color: var(--red);   background: rgba(255,79,106,.10); border-color: rgba(255,79,106,.25); }
.kpi-trend.flat  { color: var(--muted); }

/* ─── Sparkline ────────────────────────────────── */
.kpi-sparkline-wrap {
    position: relative;
    height: 48px;
    margin: 4px 0 8px;
}
.kpi-sparkline-wrap canvas { width: 100% !important; height: 100% !important; }
.spark-hint {
    position: absolute; bottom: -11px; right: 0;
    font-size: 9px; color: var(--muted2); letter-spacing: .03em;
    pointer-events: none; transition: opacity .2s, color .2s;
    opacity: .6;
}
.kpi-strip-cell:hover .spark-hint { opacity: 1; color: var(--muted); }

/* ─── Progress-Bar (Termine vs. Ziel) ─────────── */
.kpi-progress-wrap { margin-top: 6px; }
.kpi-progress-bar {
    width: 100%; height: 8px;
    background: var(--s2);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.kpi-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--amber), #ffc94a);
    transition: width 1.2s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 0 12px rgba(240,165,0,.5);
    position: relative;
}
.kpi-progress-fill.g { background: linear-gradient(90deg, var(--green), #4ee5b5); box-shadow: 0 0 12px rgba(0,214,143,.5); }
.kpi-progress-fill.b { background: linear-gradient(90deg, var(--blue), #7ab0ff);  box-shadow: 0 0 12px rgba(74,143,255,.5); }
.kpi-progress-fill::after {
    /* Shimmer-Effekt */
    content: '';
    position: absolute; top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: shimmer 2.4s infinite;
}
@keyframes shimmer { to { left: 130%; } }
.kpi-progress-meta {
    display: flex; justify-content: space-between;
    margin-top: 8px;
    font-size: 12px; color: var(--muted);
}
.kpi-progress-meta strong { color: var(--text); font-family: var(--mono); }

/* Zielerreicht-Animation */
.kpi-hero.goal-reached {
    border-color: rgba(0,214,143,.4);
    box-shadow: 0 0 0 1px rgba(0,214,143,.25), 0 10px 30px rgba(0,214,143,.18);
}
.kpi-hero.goal-reached .kpi-progress-fill { background: linear-gradient(90deg, var(--green), #4ee5b5); box-shadow: 0 0 16px rgba(0,214,143,.6); }

/* ─── Halbkreis-Gauge ─────────────────────────── */
.kpi-gauge-card { display: flex; flex-direction: column; min-height: 180px; }
.kpi-gauge {
    position: relative;
    margin: 8px 0 4px;
}
.gauge-svg {
    width: 100%; max-width: 200px;
    margin: 0 auto;
    display: block;
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
}
.gauge-track { stroke: var(--s2); }
.gauge-fill {
    stroke: url(#gauge-gradient);
    stroke: var(--purple);
    transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);
    filter: drop-shadow(0 0 6px rgba(159,122,234,.5));
}
.gauge-center {
    text-align: center;
    margin-top: -22px;
}
.gauge-value {
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
}
.gauge-sub {
    font-size: 11px;
    color: var(--muted);
}

/* ─── Donut-Ring ──────────────────────────────── */
.kpi-donut-card { display: flex; flex-direction: column; align-items: stretch; }
.kpi-donut-wrap {
    position: relative;
    width: 100px; height: 100px;
    margin: 8px auto;
}
.donut-svg {
    width: 100%; height: 100%;
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}
.donut-track { stroke: var(--s2); }
.donut-fill {
    stroke: var(--amber);
    transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);
    filter: drop-shadow(0 0 6px rgba(240,165,0,.4));
}
.donut-center {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

/* ─── Live-Pulse-Dot (für Live-Daten wie Umsatz Monat) ─── */
.kpi-pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(0,214,143,.7);
    animation: pulse 1.8s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0    rgba(0,214,143,.6); }
    70%  { box-shadow: 0 0 0 12px rgba(0,214,143,0); }
    100% { box-shadow: 0 0 0 0    rgba(0,214,143,0); }
}
.kpi-money { display: flex; flex-direction: column; min-height: 180px; }
.kpi-money-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }

/* ─── Count-Up zähler glow während Animation ─── */
.kpi-value.counting { color: var(--text); }

/* ════════════════════════════════════════════════════════════════
   PREMIUM TOUCH v172
   1. Dot-Grid Hintergrund   2. Ambient Resting-Glow
   3. Gradient Hero-Zahlen   4. Farbige Labels
   ════════════════════════════════════════════════════════════════ */

/* 1 ── Subtiles Dot-Grid auf dem Dashboard-Hintergrund ───────── */
#dashboard-view {
    background-image: radial-gradient(circle, rgba(255,255,255,.038) 1px, transparent 1px);
    background-size: 24px 24px;
    background-attachment: local;
}

/* 2 ── Ambient Resting-Glow (immer sichtbar, sehr subtil) ──────── */
.kpi-card.g { box-shadow: 0 0 28px rgba(0,214,143,.07),   0 2px 6px rgba(0,0,0,.2); }
.kpi-card.b { box-shadow: 0 0 28px rgba(74,143,255,.07),  0 2px 6px rgba(0,0,0,.2); }
.kpi-card.a { box-shadow: 0 0 28px rgba(240,165,0,.07),   0 2px 6px rgba(0,0,0,.2); }
.kpi-card.p { box-shadow: 0 0 28px rgba(159,122,234,.07), 0 2px 6px rgba(0,0,0,.2); }

/* Hover: Glow intensivieren + Lift */
.kpi-card.g:hover { box-shadow: 0 14px 38px rgba(0,214,143,.20),   0 0 32px rgba(0,214,143,.12);   transform: translateY(-2px); }
.kpi-card.b:hover { box-shadow: 0 14px 38px rgba(74,143,255,.20),  0 0 32px rgba(74,143,255,.12);  transform: translateY(-2px); }
.kpi-card.a:hover { box-shadow: 0 14px 38px rgba(240,165,0,.20),   0 0 32px rgba(240,165,0,.12);   transform: translateY(-2px); }
.kpi-card.p:hover { box-shadow: 0 14px 38px rgba(159,122,234,.20), 0 0 32px rgba(159,122,234,.12); transform: translateY(-2px); }

/* 3 ── Gradient-Text auf Hero-Zahlen & Bottom-Werte ────────────── */
.kpi-card.a .kpi-value-xl,
.kpi-card.a .kpi-value-lg {
    background: linear-gradient(135deg, #f0a500 25%, #ffd060 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.kpi-card.b .kpi-value-xl,
.kpi-card.b .kpi-value-lg {
    background: linear-gradient(135deg, #4a8fff 25%, #93c4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.kpi-card.g .kpi-value-xl,
.kpi-card.g .kpi-value-lg {
    background: linear-gradient(135deg, #00d68f 25%, #4ee5b5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.kpi-card.p .kpi-value-xl,
.kpi-card.p .kpi-value-lg {
    background: linear-gradient(135deg, #9f7aea 25%, #c4a8ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gauge-Zahl & Donut-Zahl ebenfalls */
.kpi-card.p .gauge-value {
    background: linear-gradient(135deg, #9f7aea 25%, #c4a8ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.kpi-card.a .donut-center {
    background: linear-gradient(135deg, #f0a500 25%, #ffd060 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 4 ── Labels in Akzentfarbe der Card ──────────────────────────── */
.kpi-board > .kpi-card.a .kpi-label { color: rgba(240,165,0,.82);  opacity: 1; }
.kpi-board > .kpi-card.b .kpi-label { color: rgba(74,143,255,.82); opacity: 1; }
.kpi-board > .kpi-card.g .kpi-label { color: rgba(0,214,143,.82);  opacity: 1; }
.kpi-board > .kpi-card.p .kpi-label { color: rgba(159,122,234,.82);opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   REDESIGN v174 — KPI Strip · Speedometer · Leaderboard Bars · Secondary Strip
   ════════════════════════════════════════════════════════════════ */

/* ── KPI Strip (Top 4 Zellen = verbundenes Band) ─────────────── */
.kpi-strip-cell {
    border: none !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    box-shadow: none !important;
    padding: 14px 20px 12px !important;
    transition: background .2s !important;
}
.kpi-strip-cell:hover {
    background: rgba(255,255,255,.022) !important;
    transform: none !important;
    box-shadow: none !important;
}
.kpi-strip-last {
    border-right: none !important;
}
/* Strip-Zahlen: etwas kompakter für 116px Zeile */
.kpi-strip-cell .kpi-value-xl { font-size: 52px !important; line-height: .9 !important; margin-bottom: 4px !important; }
.kpi-strip-cell .kpi-sparkline-wrap { height: 26px !important; margin: 2px 0 14px !important; }
.kpi-strip-cell .kpi-foot-label { font-size: 9px !important; }
.kpi-strip-cell .kpi-head { margin-bottom: 2px !important; }
.kpi-strip-cell .kpi-progress-wrap { margin-top: 3px !important; }
.kpi-strip-cell .kpi-progress-meta { font-size: 10px !important; margin-top: 3px !important; }

/* ── Secondary Strip (Bottom 4 Zellen = verbundenes Band) ────── */
.kpi-secondary-cell {
    border: none !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
    transition: background .2s !important;
}
.kpi-secondary-cell:hover {
    background: rgba(255,255,255,.022) !important;
    transform: none !important;
    box-shadow: none !important;
}
.kpi-secondary-last { border-right: none !important; }

/* ── Speedometer Card ────────────────────────────────────────── */
.kpi-speedometer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px 10px !important;
    overflow: hidden;
    border-right: 1px solid var(--border);
    border-radius: 0 !important;
    border-top: none; border-left: none; border-bottom: 1px solid var(--border);
}
.sp-label {
    font-size: 9px; font-weight: 800;
    letter-spacing: .14em; color: rgba(159,122,234,.9);
    text-transform: uppercase;
    align-self: flex-start;
    margin-bottom: 2px;
}
.speedometer-wrap {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.speedometer-svg {
    width: 100%;
    max-width: 300px;
    display: block;
    overflow: visible;
}
/* SVG Zone-Arcs */
.sp-track {
    fill: none;
    stroke: rgba(255,255,255,.06);
    stroke-width: 10;
    stroke-linecap: round;
}
.sp-zone {
    fill: none;
    stroke-width: 5;
    stroke-linecap: butt;
}
.sp-zone-low  { stroke: rgba(255,79,106,.38); }   /* Rot   < 80   */
.sp-zone-mid  { stroke: rgba(240,165,0,.42); }    /* Orange 80–120 */
.sp-zone-high { stroke: rgba(0,214,143,.40); }    /* Grün  120+   */
.sp-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke: rgba(159,122,234,.5);
    transition: stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1), stroke .4s, filter .4s;
}
/* Nadel */
.sp-needle {
    stroke: white;
    stroke-width: 2.5;
    stroke-linecap: round;
    transform-origin: 140px 130px;
    transform: rotate(-90deg);
    transition: transform 1.4s cubic-bezier(.15,.85,.15,1);
    filter: drop-shadow(0 0 5px rgba(255,255,255,.55));
}
.sp-hub       { fill: var(--bg); stroke: rgba(255,255,255,.2); stroke-width: 1.5; }
.sp-hub-inner { fill: rgba(255,255,255,.7); }
.sp-tick      { fill: rgba(255,255,255,.18); }
.sp-range-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    fill: rgba(255,255,255,.3);
}
/* Text-Overlay über dem SVG */
.sp-text-overlay {
    position: absolute;
    left: 50%;
    top: 59%;          /* ~= y107 / viewbox150 ≈ 71 % — zentral über dem Hub */
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    line-height: 1.2;
}
.sp-value {
    font-family: var(--mono);
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 800;
    background: linear-gradient(135deg, #9f7aea 20%, #c4a8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sp-sublabel {
    font-size: 10px;
    color: rgba(255,255,255,.4);
    letter-spacing: .04em;
    margin-top: 1px;
}
.sp-footer {
    font-size: 10px;
    color: var(--muted);
    align-self: flex-start;
    margin-top: 4px;
}
.sp-footer strong { color: var(--text); font-family: var(--mono); }

/* ── Leaderboard Bars (kpi-leader-bar-panel) ─────────────────── */
.kpi-leader-bar-panel {
    border-radius: 0 !important;
    border-left: none; border-right: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: transparent !important;
    box-shadow: none !important;
    display: flex; flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}
.kpi-leader-bar-panel .panel-header {
    padding: 8px 16px 7px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: rgba(255,255,255,.015);
}
/* Tabellen-Header */
.lb-table-header {
    display: grid;
    grid-template-columns: 36px 30px 1fr 1.6fr 56px 52px;
    gap: 0 10px;
    padding: 7px 20px;
    font-size: 9px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted2);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    flex-shrink: 0;
}
.lb-th-right { text-align: right; }

.kpi-leader-bar-panel #leaderboard {
    flex: 1;
    padding: 2px 0;
}
/* lb-row: gilt für Panel UND freistehende lb-section */
.kpi-leader-bar-panel .lb-row,
.lb-section .lb-row {
    display: grid;
    grid-template-columns: 36px 30px 1fr 1.6fr 56px 52px;
    align-items: center;
    gap: 0 10px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,.035);
    transition: background .15s;
}
.kpi-leader-bar-panel .lb-row:last-child,
.lb-section .lb-row:last-child { border-bottom: none; }
.kpi-leader-bar-panel .lb-row:hover,
.lb-section .lb-row:hover { background: rgba(255,255,255,.03); }
.kpi-leader-bar-panel .lb-me,
.lb-section .lb-me { background: rgba(74,143,255,.04) !important; }
.kpi-leader-bar-panel .lb-rank,
.lb-section .lb-rank {
    font-family: var(--mono); font-size: 13px; font-weight: 700;
    text-align: center; color: var(--muted2);
}
.kpi-leader-bar-panel .lb-rank.r1 { color: var(--green); }
.kpi-leader-bar-panel .lb-rank.r2 { color: var(--amber); }
.kpi-leader-bar-panel .lb-rank.r3 { color: var(--purple); }
.kpi-leader-bar-panel .lb-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800;
}
.kpi-leader-bar-panel .lb-name-col { min-width: 0; }
.kpi-leader-bar-panel .lb-name {
    font-size: 12px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-leader-bar-panel .lb-stat {
    font-size: 10px; color: var(--muted); margin-top: 1px;
}
.lb-me-tag {
    font-size: 9px; background: rgba(74,143,255,.15);
    color: var(--blue); padding: 1px 5px; border-radius: 4px;
    font-weight: 700; margin-left: 5px;
    -webkit-text-fill-color: var(--blue);
}
.kpi-leader-bar-panel .lb-bar-col { display: flex; align-items: center; }
.lb-bar-track {
    position: relative;
    width: 100%; height: 24px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 6px;
    overflow: hidden;
}
.lb-bar-fill {
    position: absolute; inset: 0;
    width: 0; height: 100%;
    border-radius: 6px;
    opacity: .35;
    transition: width 1.3s cubic-bezier(.2,.8,.2,1);
}
.lb-bar-label {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,.8);
    letter-spacing: .03em;
    pointer-events: none;
    white-space: nowrap;
}
.kpi-leader-bar-panel .lb-score-num {
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    text-align: right; color: var(--text);
}
.kpi-leader-bar-panel .lb-termine-num {
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    text-align: right; color: var(--text);
}
.kpi-leader-bar-panel .lb-quote-num {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    text-align: right; color: var(--muted);
}

/* ── Leaderboard-Sektion (außerhalb des Boards, scrollbar) ──────── */
.lb-section {
    flex-shrink: 0;
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.lb-section-header {
    display: flex; align-items: center;
    padding: 13px 20px 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.02);
}
.lb-section-header .panel-title {
    font-size: 14px; font-weight: 700;
}
.lb-info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 7px;
    font-size: 13px; color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    transition: color .15s;
}
.lb-info-icon:hover,
.lb-info-icon.open { color: #7eb3ff; }
/* Tooltip wird per JS als position:fixed in <body> gerendert — entkommt overflow:hidden */
.lb-tooltip-popup {
    position: fixed;
    background: #1a1a2e; border: 1px solid rgba(255,255,255,.13);
    color: #b0b8c8; font-size: 12px; font-weight: 400;
    padding: 6px 12px; border-radius: 7px;
    white-space: nowrap; pointer-events: none;
    z-index: 9999;
    animation: lb-tip-in .12s ease;
}
@keyframes lb-tip-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── Board Mobile Breakpoints ─────────────────────────── */
@media (max-width: 1200px) {
    .kpi-board {
        grid-template-rows: 110px minmax(180px,1fr) 106px 84px;
        gap: 0;
    }
    .kpi-board > .kpi-card .kpi-value-xl { font-size: 44px; }
    .kpi-value-lg { font-size: 22px; }
    .micro-value  { font-size: 17px; }
}
@media (max-width: 900px) {
    .dashboard-content { overflow-y: auto; }  /* ab Tablet: Scroll wieder erlaubt */
    .kpi-board {
        grid-template-areas:
            "termine  brutto"
            "netto    entscheider"
            "meter    chart"
            "umsatz   effektiv"
            "quote7d  bottom";
        grid-template-rows: repeat(5, auto);
        grid-template-columns: 1fr 1fr;
    }
    .kpi-chart-inner { min-height: 200px; }
}
@media (max-width: 480px) {
    .kpi-board {
        grid-template-areas:
            "termine" "brutto" "netto" "entscheider"
            "meter"   "chart"
            "umsatz"  "effektiv" "quote7d" "bottom";
        grid-template-columns: 1fr;
        grid-template-rows: repeat(auto-fill, auto);
    }
    .dash-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .kpi-value-xl { font-size: 30px; }
}

.main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.panel { background: var(--s1); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.panel-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
.panel-title { font-size: 14px; font-weight: 700; }

.lb-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.lb-row:last-child { border-bottom: none; }
.lb-rank { font-family: var(--mono); font-size: 14px; font-weight: 600; width: 24px; text-align: center; }
.lb-rank.r1 { color: var(--green); }
.lb-rank.r2 { color: var(--amber); }
.lb-rank.r3 { color: var(--purple); }
.lb-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* FIXES FÜR DIE RANGLISTE (Verhindert Quetschen & Zeilenumbrüche) */
.lb-info { 
    flex: 1; 
    min-width: 0; /* Zwingt die Box, den Text abzuschneiden */
}
.lb-name { 
    font-weight: 600; 
    font-size: 14px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; /* Baut "..." bei langen Namen ein */
}
.lb-sub { 
    font-size: 12px; 
    color: var(--muted); 
}
.lb-score { 
    text-align: right; 
    flex-shrink: 0; /* Verhindert, dass der Score vom Namen gequetscht wird */
    white-space: nowrap; /* Kein Zeilenumbruch beim Eurozeichen */
    margin-left: 10px;
}
.lb-score-val {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}

/* ════════════════════════════════════════════════════════════════
   MOBILE FOUNDATION — Schritt 1
   Globale Basis für mobile Geräte. Spezifische Layouts kommen in
   den jeweiligen CSS-Dateien (navbar.css, arbeitsplatz.css, etc.)
   in den nächsten Schritten.

   Breakpoints (projektweit gültig):
     ≤ 1024px → Tablet / kleines Laptop
     ≤ 768px  → Tablet hochkant / großes Phone
     ≤ 480px  → Phone
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   TERMIN-RECHNER WIDGET (Agent + Admin Dashboard)
   ════════════════════════════════════════════════════════════════ */
.panel.termin-calc { padding: 18px 20px; }
.tc-quote-display {
    font-size: 12px; color: var(--muted);
}
.tc-quote-display strong {
    color: var(--green);
    font-family: var(--mono);
    font-size: 14px;
    margin: 0 4px;
}
.tc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}
.tc-box {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color .2s;
}
.tc-box:hover { border-color: rgba(74,143,255,.35); }
.tc-box-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: 10px;
}
.tc-input-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.tc-input-row input[type="number"] {
    width: 100px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    outline: none;
    transition: border-color .15s;
}
.tc-input-row input[type="number"]:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(74,143,255,.15);
}
/* Spinner-Pfeile dezent halten */
.tc-input-row input[type="number"]::-webkit-inner-spin-button {
    opacity: .5;
}
.tc-unit { color: var(--muted); font-size: 13px; }
.tc-result {
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.tc-result-line {
    font-size: 14px;
    color: var(--text);
}
.tc-result-line strong {
    color: var(--green);
    font-family: var(--mono);
    font-size: 22px;
    margin-right: 4px;
}
.tc-result-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

.tc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    flex-wrap: wrap;
}
.tc-quote-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}
.tc-quote-edit input {
    width: 70px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    outline: none;
}
.tc-quote-edit input:focus { border-color: var(--blue); }
.tc-hint {
    font-size: 11px;
    color: var(--amber);
}

/* Mobile */
@media (max-width: 768px) {
    .tc-grid { grid-template-columns: 1fr; }
    .tc-footer { flex-direction: column; align-items: flex-start; }
}

/* Globale Anti-Overflow-Absicherung — verhindert seitliches Scrollen */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ── Follow-Up Reminder Banner (lebt jetzt inline in der Sub-Nav) ── */
#fu-global-banner {
    display: none;
    align-items: center;
}

/* Inline-Slot in der Arbeitsplatz Stats-Bar */
#followup-reminder {
    display: none;
    flex: 1;
    justify-content: center;
    align-items: center;
}
.fu-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.4);
    border-radius: 8px;
    padding: 5px 12px 5px 10px;
    font-size: 12px;
    animation: fuPulse 2s ease-in-out infinite;
}
@keyframes fuPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.25); }
    50%       { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}
.fu-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #f59e0b; flex-shrink: 0;
    animation: fuDotPulse 1.4s ease-in-out infinite;
}
@keyframes fuDotPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}
.fu-text {
    color: #fbbf24; font-weight: 700;
    white-space: nowrap; max-width: 280px;
    overflow: hidden; text-overflow: ellipsis;
}
.fu-text span { color: var(--muted); font-weight: 600; margin-left: 4px; }
.fu-btn {
    border: none; cursor: pointer; border-radius: 5px;
    font-size: 11px; font-weight: 700; padding: 3px 9px;
    font-family: var(--font); white-space: nowrap;
    transition: opacity .15s;
}
.fu-btn:hover { opacity: .8; }
.fu-btn-call   { background: #f59e0b; color: #0d0f15; }
.fu-btn-snooze { background: var(--s3); color: var(--muted); }
.fu-btn-dismiss {
    background: transparent; color: var(--muted2);
    border: 1px solid var(--border) !important; padding: 2px 8px;
}

/* iOS: Eingabefelder sollen NICHT auto-zoomen (Trick: ≥16px Schriftgröße) */
@media (max-width: 768px) {
    input, select, textarea, button {
        font-size: 16px;
    }
}

/* Touch-Target-Mindestgröße (Apple HIG: 44px) für interaktive Elemente */
@media (max-width: 768px) {
    button,
    .btn,
    .btn-login,
    .nav-item,
    .pm-item,
    a.icon-btn,
    .icon-btn {
        min-height: 44px;
    }
    /* Kleine Action-Icons in Tabellen dürfen kompakter bleiben — sonst
       sprengt das Cleanup-Tabellen — aber min. 36px für Tap-Komfort */
    td .icon-btn {
        min-height: 36px;
        min-width: 36px;
    }
}

/* Bilder + SVGs nie über die Breite hinaus */
img, svg, video {
    max-width: 100%;
    height: auto;
}

/* Tabellen unter 768px: horizontal scrollbar mit Touch-Momentum.
   Wer eine Tabelle nicht stapeln will, packt sie in <div class="table-scroll">. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Globaler Phone-Polster: weniger Padding, kleinere Headlines */
@media (max-width: 480px) {
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    .dashboard-content { padding: 16px 14px; }
    .kpi-row { gap: 10px; }
}

/* ────────── DASHBOARD MOBILE — Schritt 3 ────────── */

/* Tablet: KPI-Row 4 → 2 Spalten, Hauptgrid stapelt */
@media (max-width: 1024px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .main-grid { grid-template-columns: 1fr; }
}

/* Tablet hochkant + Phone: dash-header stapelt, Buttons full-width */
@media (max-width: 768px) {
    .dashboard-content { padding: 18px 16px; gap: 16px; }
    .dash-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 14px;
    }
    .dash-header h1 { font-size: 20px; }
    .dash-header > div:last-child {
        /* Wrap-Container von ZUM ARBEITSPLATZ + ↗ */
        width: 100%;
        justify-content: stretch;
    }
    .dash-header .btn-login {
        flex: 1;
        text-align: center;
    }
    .kpi-card { padding: 14px; }
    .kpi-value { font-size: 22px; }
    .kpi-label { font-size: 11px; }
    .panel { padding: 14px; }
}

/* Phone: KPI 1-spaltig, Chart-Höhe reduziert */
@media (max-width: 480px) {
    .kpi-row { grid-template-columns: 1fr; }
    .panel-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .main-grid canvas { max-height: 240px; }
}

/* Reduce-Motion-Respekt — wer Bewegung minimiert haben will, kriegt sie. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ────────── LOGIN MOBILE — Schritt 7 ──────────
   Login-Screen auf Phone: Box wird randvoll mit etwas Außenabstand,
   weniger Padding innen, Touch-freundliche Felder. Safe-Area für
   iPhones mit Notch. */
@media (max-width: 768px) {
    #login-view {
        padding: 24px 16px;
        align-items: flex-start;
        padding-top: max(24px, env(safe-area-inset-top));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    .login-box {
        padding: 28px 22px;
        max-width: 100%;
        margin-top: 8vh;
    }
    .login-box .logo { margin-bottom: 22px; }
    .input-group input { padding: 14px; }   /* fettere Tap-Targets */
    .btn-login { padding: 14px; font-size: 15px; min-height: 48px; }
}
@media (max-width: 480px) {
    .login-box {
        padding: 22px 18px;
        margin-top: 4vh;
    }
    .login-box .logo-name { font-size: 16px; }
    /* Bei Landscape-Phones (sehr flach): kein riesiger Top-Abstand */
}
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
    .login-box { margin-top: 0; padding: 18px 22px; }
    .login-box .logo { margin-bottom: 14px; }
    .input-group { margin-bottom: 10px; }
}

/* ────────── BRAND-DIALOG MOBILE — Schritt 5 ──────────
   alert/confirm/prompt aus app.js — Buttons stapeln auf kleinen Phones,
   Box wird nahezu full-width damit Eingabefelder Platz haben. */
@media (max-width: 480px) {
    .bd-box { width: 94vw !important; }
    .bd-head { padding: 14px 16px 10px !important; }
    .bd-body { padding: 14px 16px 4px !important; }
    .bd-foot {
        flex-direction: column-reverse !important;
        gap: 8px !important;
        padding: 12px 16px 16px !important;
    }
    .bd-foot button { width: 100%; }
    .bd-message { font-size: 14px !important; }
}

/* ════════════════════════════════════════════════════════════════
   FOLLOW-UP REMINDER BANNER
   Inline (Arbeitsplatz stats-bar) + Global nach Topbar (alle anderen Seiten)
   ════════════════════════════════════════════════════════════════ */
.fu-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
}
.fu-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
    animation: fuPulse 1.5s ease-in-out infinite;
}
@keyframes fuPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}
.fu-text {
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fu-text span { color: var(--muted); margin-left: 3px; }
.fu-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    background: transparent;
    transition: background .15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.fu-btn-call    { color: #22c55e; border-color: rgba(34,197,94,.4); }
.fu-btn-call:hover    { background: rgba(34,197,94,.15); }
.fu-btn-snooze  { color: #f59e0b; border-color: rgba(245,158,11,.4); }
.fu-btn-snooze:hover  { background: rgba(245,158,11,.15); }
.fu-btn-dismiss { color: var(--muted); border-color: var(--border); }
.fu-btn-dismiss:hover { background: var(--s2); }

/* Sub-Navs: sticky unter der Topbar (+ Banner wenn aktiv via --nav-top) */
:root { --nav-top: 60px; }
.admin-tabs {
    position: fixed;
    top: var(--nav-top);
    left: 0;
    right: 0;
    z-index: 700;
    background: var(--s1);
}
/* Follow-Up-Banner als Dropdown unter dem Schaltzentrale-Button */
.admin-zentrale-wrap {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}
.admin-zentrale-wrap #followup-reminder {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 1px;
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    padding: 8px 14px;
    white-space: nowrap;
    z-index: 699;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    min-width: 300px;
    justify-content: flex-end;
}
.crm-subnav {
    position: fixed;
    top: var(--nav-top);
    left: 0;
    right: 0;
    z-index: 700;
    background: var(--s1);
}

/* ════════════════════════════════════════════════════════════════
   LIVELINESS v313 — Dashboard Animationen: Pulsing, Glow, Breathing
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Board-Container: langsamer Grenz-Puls ─────────────────── */
@keyframes boardPulse {
    0%,100% { border-color: var(--border); box-shadow: none; }
    50%      { border-color: rgba(74,143,255,.22); box-shadow: 0 0 48px rgba(74,143,255,.08), 0 16px 52px rgba(0,0,0,.22); }
}
.kpi-board {
    animation: boardIn .4s cubic-bezier(.2,.8,.2,1) both,
               boardPulse 10s ease-in-out 2s infinite;
}

/* ── 2. Strip-Zellen: Eingangs-Animation mit Stagger ──────────── */
.kpi-board > .kpi-card.kpi-strip-cell {
    animation: kpiFadeUp .55s cubic-bezier(.2,.8,.2,1) both;
}
.kpi-board > .kpi-card.kpi-strip-cell[style*="grid-area:termine"]     { animation-delay: .07s; }
.kpi-board > .kpi-card.kpi-strip-cell[style*="grid-area:brutto"]      { animation-delay: .16s; }
.kpi-board > .kpi-card.kpi-strip-cell[style*="grid-area:netto"]       { animation-delay: .25s; }
.kpi-board > .kpi-card.kpi-strip-cell[style*="grid-area:entscheider"] { animation-delay: .34s; }

/* ── 3. Left Accent Bars: Breathing Glow pro Farbe ────────────── */
@keyframes barPulseG {
    0%,100% { box-shadow: none; opacity: .65; }
    50%      { box-shadow: 5px 0 22px rgba(0,214,143,.75); opacity: 1; }
}
@keyframes barPulseB {
    0%,100% { box-shadow: none; opacity: .65; }
    50%      { box-shadow: 5px 0 22px rgba(74,143,255,.75); opacity: 1; }
}
@keyframes barPulseA {
    0%,100% { box-shadow: none; opacity: .65; }
    50%      { box-shadow: 5px 0 22px rgba(240,165,0,.75); opacity: 1; }
}
@keyframes barPulseP {
    0%,100% { box-shadow: none; opacity: .65; }
    50%      { box-shadow: 5px 0 22px rgba(159,122,234,.75); opacity: 1; }
}
.kpi-card.g::before { animation: barPulseG 3.5s ease-in-out infinite; }
.kpi-card.b::before { animation: barPulseB 4s ease-in-out .6s infinite; }
.kpi-card.a::before { animation: barPulseA 4.5s ease-in-out 1.2s infinite; }
.kpi-card.p::before { animation: barPulseP 5s ease-in-out 1.8s infinite; }

/* ── 4. Hero-Zahlen: Drop-Shadow Glow atmet ───────────────────── */
@keyframes numGlowG { 0%,100%{filter:none} 50%{filter:drop-shadow(0 0 12px rgba(0,214,143,.5))} }
@keyframes numGlowB { 0%,100%{filter:none} 50%{filter:drop-shadow(0 0 12px rgba(74,143,255,.5))} }
@keyframes numGlowA { 0%,100%{filter:none} 50%{filter:drop-shadow(0 0 12px rgba(240,165,0,.5))} }
@keyframes numGlowP { 0%,100%{filter:none} 50%{filter:drop-shadow(0 0 12px rgba(159,122,234,.5))} }

.kpi-card.g .kpi-value-xl,
.kpi-card.g .kpi-value-lg  { animation: numGlowG 3.5s ease-in-out 1s infinite; }
.kpi-card.b .kpi-value-xl,
.kpi-card.b .kpi-value-lg  { animation: numGlowB 4s ease-in-out 1.8s infinite; }
.kpi-card.a .kpi-value-xl,
.kpi-card.a .kpi-value-lg  { animation: numGlowA 4.5s ease-in-out .5s infinite; }
.kpi-card.p .kpi-value-xl,
.kpi-card.p .kpi-value-lg  { animation: numGlowP 5s ease-in-out 2.5s infinite; }

/* ── 5. Speedometer: Gesamtkarte + SVG-Fill Glow ──────────────── */
@keyframes spCardGlow {
    0%,100% { filter: none; }
    50%      { filter: drop-shadow(0 0 20px rgba(159,122,234,.28)); }
}
@keyframes spFillPulse {
    0%,100% { filter: none; }
    50%      { filter: drop-shadow(0 0 10px rgba(159,122,234,.65)); }
}
.kpi-board > .kpi-speedometer-card { animation: spCardGlow 5s ease-in-out 1s infinite; }
.sp-fill                            { animation: spFillPulse 3s ease-in-out infinite; }
.sp-needle { filter: drop-shadow(0 0 7px rgba(255,255,255,.75)); }

/* ── 6. Chart-Panel: Grenz-Glow ───────────────────────────────── */
@keyframes chartBorderGlow {
    0%,100% { box-shadow: none; border-color: var(--border); }
    50%      { box-shadow: inset 0 0 28px rgba(74,143,255,.06); border-color: rgba(74,143,255,.28); }
}
.kpi-board > .panel.kpi-chart-panel {
    animation: chartBorderGlow 8s ease-in-out 3s infinite;
    transition: border-color .6s, box-shadow .6s;
}

/* ── 7. Leaderboard: Platz #1 gold, #2 silber, #3 bronze ──────── */
@keyframes goldRow  { 0%,100%{background:transparent} 50%{background:rgba(240,165,0,.055)} }
@keyframes silverRow{ 0%,100%{background:transparent} 50%{background:rgba(180,190,200,.04)} }
@keyframes bronzeRow{ 0%,100%{background:transparent} 50%{background:rgba(180,120,60,.04)} }
.lb-section .lb-row:nth-child(1) { animation: goldRow   4s ease-in-out infinite; }
.lb-section .lb-row:nth-child(2) { animation: silverRow 5s ease-in-out .8s infinite; }
.lb-section .lb-row:nth-child(3) { animation: bronzeRow 6s ease-in-out 1.6s infinite; }

/* ── 8. Donut-Fill: pulsierender Glow ─────────────────────────── */
@keyframes donutGlow {
    0%,100% { filter: none; }
    50%      { filter: drop-shadow(0 0 8px rgba(240,165,0,.55)); }
}
.donut-fill { animation: donutGlow 4s ease-in-out 1s infinite; }

/* ── 9. Trend-Pill: kurzes Pop wenn Wert sich ändert ──────────── */
@keyframes trendPop { 0%{transform:scale(1)} 45%{transform:scale(1.15)} 100%{transform:scale(1)} }
.kpi-trend.updated { animation: trendPop .38s cubic-bezier(.2,.8,.2,1); }

/* ── 10. Dashboard Load Sequence — Boot Overlay & Entrance Animations ── */
@keyframes rl-boot-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes rl-card-enter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes rl-topbar-enter {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

/* Initial-State: Karten unsichtbar bis triggerDashboardEntrance() feuert */
.rl-entrance-pending {
    opacity: 0;
}

/* Karten-Entrance: 0.45s easeInOutCubic */
.rl-entrance-active {
    animation: rl-card-enter 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Topbar-Entrance */
.rl-topbar-active {
    animation: rl-topbar-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}