/* ═══════════════════════════════════════════════════════════════════════
   CRM Intelligence – Design-System (A4L Platform)
   Neutrale Farben, Abstände, Karten, Tabellen, Panels = identisch zu
   A4L Virtual Office (eine Produktfamilie). Eigene Akzentfarbe: LS-V-Spektrum
   (Logistic System Vision) – interaktiv das warme Ende Orange→Rot ("das V").
   Dark/Light über CSS-Variablen; zentral konfigurierbar (window.a4l.setAccent).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* LS-V-Markenspektrum (Logo). Blau → Türkis → Gelb → Orange → Rot. */
    --brand-blue: #2166d8;
    --brand-teal: #14b58a;
    --brand-amber: #f3c013;
    --brand-orange: #f5811f;
    --brand-red: #e42b22;
    --brand-gradient: linear-gradient(90deg, #2166d8 0%, #14b58a 30%, #f3c013 55%, #f5811f 76%, #e42b22 100%);

    /* Statusfarben (in beiden Themes identisch nutzbar) – gemeinsame Plattform-Palette */
    --st-available: #22c55e;
    --st-busy: #e11d48;
    --st-meeting: #3b82f6;
    --st-customer: #a855f7;
    --st-phone: #14b8a6;
    --st-focus: #eab308;
    --st-break: #f97316;
    --st-away: #94a3b8;
    --st-road: #38bdf8;
    --st-offline: #64748b;

    /* Semantik (Priorität, Score, Freigabe) */
    --sev-crit: #e42b22;
    --sev-high: #f5811f;
    --sev-mid: #f3c013;
    --sev-low: #22c55e;

    --radius: 12px;
    --radius-sm: 8px;
    --topbar-h: 60px;
    --sidebar-w: 240px;
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
    --bg: #0e1117;
    --bg-soft: #12161e;
    --surface: #171c26;
    --surface-2: #1e2530;
    --surface-hover: #232b38;
    --border: #262f3d;
    --border-soft: #1f2735;
    --text: #e8ecf4;
    --text-dim: #9aa5b8;
    --text-muted: #647084;
    /* LS-V-Akzent (warmes Ende) – auf Dunkel leuchtstark */
    --accent: #f5811f;
    --accent-soft: #f5811f22;
    --accent-2: #e42b22;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --backdrop: rgba(5, 8, 14, 0.55);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg: #eef1f6;
    --bg-soft: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #f2f5fa;
    --surface-hover: #e9eef6;
    --border: #dde3ee;
    --border-soft: #e7ecf4;
    --text: #1b2333;
    --text-dim: #56617a;
    --text-muted: #8a94a8;
    /* LS-V-Akzent (warmes Ende) – auf Hell abgedunkelt für Kontrast */
    --accent: #d2551a;
    --accent-soft: #d2551a14;
    --accent-2: #cc2019;
    --shadow: 0 8px 28px rgba(23, 32, 55, 0.10);
    --shadow-sm: 0 2px 8px rgba(23, 32, 55, 0.07);
    --backdrop: rgba(23, 32, 55, 0.35);
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 14.5px;
}

a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; }
button { font-family: var(--font); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ── App-Shell ─────────────────────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas: "sidebar topbar" "sidebar main";
    height: 100vh;
}

.app-main {
    grid-area: main;
    overflow-y: auto;
    padding: 22px 26px 40px;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
    grid-area: sidebar;
    background: var(--bg-soft);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
    gap: 3px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 16px;
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: 0.2px;
}

.sidebar-brand .logo {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--brand-gradient);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(228, 43, 34, 0.25);
}

.sidebar-brand .brand-text { line-height: 1.2; }

.sidebar-brand small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.nav-section {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    font-weight: 700;
    padding: 14px 12px 5px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    position: relative;
}

.nav-link:hover { background: var(--surface-hover); color: var(--text); }

.nav-link.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.nav-link.active::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 3px;
    background: var(--accent);
}

.nav-link svg { flex-shrink: 0; }
.nav-badge {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}

.sidebar-footer {
    margin-top: auto;
    padding: 12px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.6;
    border-top: 1px solid var(--border-soft);
}

.sidebar-footer .src-dot { color: var(--st-away); }

.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--st-available);
    margin-right: 6px;
    animation: livePulse 2.4s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-soft);
}

.topbar .spacer { flex: 1; }

.topbar-clock {
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    font-size: 13px;
    white-space: nowrap;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.icon-btn:hover { background: var(--surface-hover); color: var(--text); }

/* ── App-Umschalter (A4L Platform) ─────────────────────────────────────── */
.app-switcher { position: relative; }

.app-switcher-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.app-switcher-btn:hover { background: var(--surface-hover); border-color: var(--accent); }
.app-switcher-btn .grid-ico { color: var(--text-dim); display: grid; }
.app-switcher-btn .cur { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.app-switcher-btn .cur small { font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.app-switcher-btn .chev { color: var(--text-muted); }

.app-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 300px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 70;
    padding: 8px;
    animation: dropIn 0.16s ease;
}

.app-menu .app-menu-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    font-weight: 700;
    padding: 6px 10px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: none;
    color: var(--text);
    cursor: pointer;
    font-family: var(--font);
    transition: background 0.14s;
}

.app-item:hover { background: var(--surface-hover); }
.app-item.current { border-color: var(--accent); background: var(--accent-soft); }
.app-item .app-ico {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px;
}
.app-item .app-ico.ta { background: linear-gradient(135deg, #4f46e5, #06b6d4); }
.app-item .app-ico.vo { background: linear-gradient(135deg, #4f7cff, #8b5cf6); }
.app-item .app-ico.crm { background: var(--brand-gradient); }
.app-item .app-name { font-weight: 650; font-size: 13.5px; }
.app-item .app-desc { color: var(--text-dim); font-size: 11.5px; margin-top: 1px; }
.app-item .app-cur-tag { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Dropdown-Menü (Sprache/Profil) ────────────────────────────────────── */
.menu { position: relative; }
.menu-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 70;
    padding: 6px;
    animation: dropIn 0.16s ease;
}
.menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    padding: 8px 10px; border-radius: var(--radius-sm);
    background: none; border: 0; color: var(--text);
    cursor: pointer; font-family: var(--font); font-size: 13.5px;
}
.menu-item:hover { background: var(--surface-hover); }
.menu-item.disabled { color: var(--text-muted); cursor: default; }
.menu-item.disabled:hover { background: none; }
.menu-sep { height: 1px; background: var(--border-soft); margin: 5px 4px; }
.menu-item .check { margin-left: auto; color: var(--accent); }

.profile-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 6px;
    border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    cursor: pointer; font-size: 13px; font-weight: 600;
    transition: background 0.15s;
}
.profile-btn:hover { background: var(--surface-hover); }

.role-select {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-dim); white-space: nowrap;
}

select, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-family: var(--font);
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.15s;
}

select:focus, input:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; line-height: 1.5; }

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

/* ── Globale Suche ─────────────────────────────────────────────────────── */
.global-search { position: relative; width: min(380px, 30vw); }
.global-search input { width: 100%; padding: 8px 12px 8px 36px; }
.global-search .search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none; display: grid; place-items: center;
}

/* ── Seiten-Header ─────────────────────────────────────────────────────── */
.page-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.page-head h1 { font-size: 22px; }
.page-head .sub { color: var(--text-dim); font-size: 13.5px; }
.page-head .head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 15px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
    font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--font);
    transition: all 0.15s; white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--accent); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 0; color: #fff; }
.btn.primary:hover { filter: brightness(1.08); color: #fff; }
.btn.ghost { background: none; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-hover); }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.btn.danger:hover { border-color: var(--st-busy); color: var(--st-busy); }

/* ── Filterleiste ──────────────────────────────────────────────────────── */
.filter-bar {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; background: var(--surface);
    border: 1px solid var(--border-soft); border-radius: var(--radius);
    margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.filter-bar label { font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; }

.chip-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-dim); font-size: 12.5px; font-weight: 500;
    cursor: pointer; transition: all 0.15s; white-space: nowrap; font-family: var(--font);
}
.chip-toggle:hover { background: var(--surface-hover); }
.chip-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.filter-reset { background: none; border: 0; color: var(--text-muted); font-size: 12.5px; cursor: pointer; padding: 6px 8px; }
.filter-reset:hover { color: var(--text); text-decoration: underline; }

/* Segmented control (Ansichtsumschalter) */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.segmented button {
    border: 0; background: none; color: var(--text-dim); cursor: pointer;
    padding: 6px 13px; border-radius: 6px; font-size: 12.5px; font-weight: 600; font-family: var(--font);
    display: inline-flex; align-items: center; gap: 6px;
}
.segmented button.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

/* ── Karten & Grids ────────────────────────────────────────────────────── */
.card {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px;
}
.card h3 { font-size: 15px; margin-bottom: 4px; }
.card .card-sub { color: var(--text-dim); font-size: 12.5px; margin-bottom: 14px; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }

.tile-in { animation: tileIn 0.35s ease; }
@keyframes tileIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* KPI-Kacheln (Dashboard/Sales) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 15px 17px;
    display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden;
    animation: tileIn 0.35s ease;
}
.kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kpi-accent, var(--accent)); }
.kpi .kpi-val { font-size: 26px; font-weight: 750; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.kpi .kpi-label { color: var(--text-dim); font-size: 12.5px; }
.kpi .kpi-ico { position: absolute; right: 12px; top: 12px; color: var(--text-muted); opacity: 0.55; }
.kpi .kpi-trend { font-size: 11.5px; font-weight: 600; }
.kpi .kpi-trend.up { color: var(--st-available); }
.kpi .kpi-trend.down { color: var(--st-busy); }

/* Sektion */
.section { margin-bottom: 28px; }
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.section-head h2 { font-size: 16px; }
.section-head .count { color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.section-head .section-actions { margin-left: auto; display: flex; gap: 8px; }

/* ── Badges / Chips ────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
    white-space: nowrap;
}
.badge.soft { background: var(--surface-2); color: var(--text-dim); }
.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Prioritäts-/Severity-Farben */
.sev-crit { color: var(--sev-crit); } .bg-sev-crit { background: color-mix(in srgb, var(--sev-crit) 14%, transparent); color: var(--sev-crit); }
.sev-high { color: var(--sev-high); } .bg-sev-high { background: color-mix(in srgb, var(--sev-high) 16%, transparent); color: var(--sev-high); }
.sev-mid  { color: var(--sev-mid); }  .bg-sev-mid  { background: color-mix(in srgb, var(--sev-mid) 18%, transparent); color: #b98900; }
.sev-low  { color: var(--sev-low); }  .bg-sev-low  { background: color-mix(in srgb, var(--sev-low) 14%, transparent); color: var(--sev-low); }
:root[data-theme="dark"] .bg-sev-mid { color: var(--sev-mid); }

/* Statusfarben (Aufträge/Kandidaten/Berichte) */
.st-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.st-neutral { background: var(--surface-2); color: var(--text-dim); }
.st-info { background: color-mix(in srgb, var(--st-meeting) 14%, transparent); color: var(--st-meeting); }
.st-go { background: color-mix(in srgb, var(--st-available) 14%, transparent); color: var(--st-available); }
.st-warn { background: color-mix(in srgb, var(--st-break) 15%, transparent); color: var(--st-break); }
.st-stop { background: color-mix(in srgb, var(--st-busy) 14%, transparent); color: var(--st-busy); }
.st-accent { background: var(--accent-soft); color: var(--accent); }
.st-purple { background: color-mix(in srgb, var(--st-customer) 14%, transparent); color: var(--st-customer); }

/* ── Score-Meter (Akquise-Score / TMS-Sicherheit) ──────────────────────── */
.score { display: inline-flex; align-items: center; gap: 8px; }
.score-bar { width: 68px; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; flex-shrink: 0; }
.score-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sev-mid), var(--sev-low)); }
.score-bar.warm > span { background: linear-gradient(90deg, var(--sev-high), var(--sev-crit)); }
.score-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; }
.score-num .max { color: var(--text-muted); font-weight: 500; font-size: 11px; }

.score-ring { --p: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0); }
.score-ring .inner { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }

/* Vertrauens-/Sicherheits-Meter für Tabellen */
.conf { display: inline-flex; flex-direction: column; gap: 3px; min-width: 90px; }
.conf .conf-top { display: flex; justify-content: space-between; font-size: 12px; }
.conf .conf-track { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.conf .conf-track > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* ── Tabellen ──────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13.5px; }
.data-table th {
    text-align: left; padding: 11px 14px; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted);
    border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap;
}
.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { cursor: pointer; transition: background 0.12s; }
.data-table tbody tr:hover { background: var(--surface-hover); }
.data-table td.num { font-variant-numeric: tabular-nums; }
.cell-strong { font-weight: 650; }
.cell-sub { color: var(--text-dim); font-size: 12px; }

/* ── Listenkarten (Aufträge, Nachbereitung, Berichte) ──────────────────── */
.list-card {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 15px 17px;
    transition: border-color 0.2s, box-shadow 0.2s; animation: tileIn 0.35s ease;
    border-left: 3px solid var(--card-accent, var(--border-soft));
}
.list-card:hover { border-color: var(--border); box-shadow: var(--shadow); }
.list-card .lc-main { flex: 1; min-width: 0; }
.list-card .lc-title { font-weight: 650; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-card .lc-meta { color: var(--text-dim); font-size: 12.5px; margin-top: 4px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.list-card .lc-meta strong { color: var(--text); font-weight: 600; }
.list-card .lc-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.list-card .lc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

.meta-row { display: flex; gap: 6px 14px; flex-wrap: wrap; color: var(--text-dim); font-size: 12.5px; }
.meta-row .mi { display: inline-flex; align-items: center; gap: 5px; }
.meta-row strong { color: var(--text); font-weight: 600; }

/* ── Dashboard: Tages-Timeline ─────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: 14px; }
.tl-time { width: 58px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13.5px; color: var(--text); padding-top: 13px; }
.tl-rail { position: relative; width: 16px; flex-shrink: 0; display: flex; justify-content: center; }
.tl-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border); }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); margin-top: 15px; z-index: 1; box-shadow: 0 0 0 1px var(--border); }
.tl-item.free .tl-dot { background: var(--st-away); }
.tl-body { flex: 1; padding: 10px 0 14px; }
.tl-card {
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 12px 15px; transition: border-color 0.2s;
    border-left: 3px solid var(--card-accent, var(--accent));
}
.tl-card:hover { border-color: var(--border); }
.tl-card.free { border-left-color: var(--st-away); background: var(--surface-2); }
.tl-title { font-weight: 650; font-size: 14px; }
.tl-sub { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.tl-actions { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }

/* ── KI-Empfehlungs-Banner ─────────────────────────────────────────────── */
.ai-banner {
    display: flex; gap: 16px; align-items: flex-start;
    border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px;
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand-orange) 14%, transparent), transparent 55%),
        radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--brand-red) 12%, transparent), transparent 55%),
        var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.ai-banner .ai-ico {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    display: grid; place-items: center; box-shadow: 0 4px 14px rgba(228,43,34,0.3);
}
.ai-banner .ai-body { flex: 1; }
.ai-banner .ai-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent); }
.ai-banner .ai-text { font-size: 14px; margin-top: 3px; line-height: 1.5; }
.ai-banner .ai-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ai-banner .ai-close { position: absolute; top: 10px; right: 10px; background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.ai-banner .ai-close:hover { background: var(--surface-hover); color: var(--text); }

/* ── SmartRoute-Layout ─────────────────────────────────────────────────── */
.route-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.route-panel { display: flex; flex-direction: column; gap: 14px; }
.map-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.filter-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }
.filter-card h3 { font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field > label { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); padding: 5px 0; cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

/* Simulierte Karte */
.sim-map {
    position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 300px;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    background: var(--surface-2);
}
.sim-map svg { width: 100%; height: 100%; display: block; }
.map-overlay { position: absolute; left: 12px; top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.map-badge {
    background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(6px);
    border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px;
    font-size: 12px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 6px;
}
.map-legend { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px;
    background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(6px);
    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 11px; font-size: 11.5px; color: var(--text-dim); }
.map-legend .row { display: flex; align-items: center; gap: 7px; }
.map-legend .pin-dot { width: 9px; height: 9px; border-radius: 50%; }
.map-attr { position: absolute; right: 10px; top: 10px; font-size: 10.5px; color: var(--text-muted); }

.map-pin { cursor: pointer; transition: transform 0.15s; transform-origin: center bottom; }
.map-pin:hover { transform: scale(1.18); }
.map-pin.sel { transform: scale(1.25); }

/* Ergebnis-Karten SmartRoute */
.result-card {
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 15px 17px; display: flex; gap: 14px;
    animation: tileIn 0.35s ease; transition: border-color 0.2s, box-shadow 0.2s;
}
.result-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.result-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.result-card .rc-main { flex: 1; min-width: 0; }
.result-card .rc-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.result-card .rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 16px; margin-top: 10px; font-size: 12.5px; }
.result-card .rc-grid .k { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.result-card .rc-grid .v { color: var(--text); font-weight: 600; }
.result-card .rc-actions { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.result-card .rc-side { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }

/* Tourenliste */
.tour-list { display: flex; flex-direction: column; gap: 8px; }
.tour-stop {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: 11px 13px; cursor: grab; transition: border-color 0.15s, box-shadow 0.15s;
}
.tour-stop:hover { border-color: var(--border); }
.tour-stop.dragging { opacity: 0.5; cursor: grabbing; }
.tour-stop.drop-target { border-color: var(--accent); box-shadow: 0 -2px 0 var(--accent) inset; }
.tour-stop .seq { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 750; font-size: 12.5px; display: grid; place-items: center; flex-shrink: 0; }
.tour-stop .ts-main { flex: 1; min-width: 0; }
.tour-stop .ts-name { font-weight: 650; font-size: 13.5px; }
.tour-stop .ts-meta { color: var(--text-dim); font-size: 12px; display: flex; gap: 4px 12px; flex-wrap: wrap; margin-top: 2px; }
.tour-stop .drag-handle { color: var(--text-muted); cursor: grab; display: grid; }
.tour-connector { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 39px; color: var(--text-muted); font-size: 11.5px; }
.tour-connector .dash { flex: 0 0 20px; border-top: 2px dashed var(--border); }
.tour-summary { display: flex; justify-content: space-between; padding: 12px 4px 4px; font-size: 13px; border-top: 1px dashed var(--border-soft); margin-top: 6px; }
.tour-summary strong { font-variant-numeric: tabular-nums; }

/* ── Kundenbericht / KI-Ergebnis ───────────────────────────────────────── */
.report-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.report-form .full { grid-column: 1 / -1; }
.plaud-field { position: relative; }
.plaud-field textarea { width: 100%; min-height: 130px; }
.plaud-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin-top: 6px; }

.ai-result { display: flex; flex-direction: column; gap: 18px; animation: tileIn 0.4s ease; }
.ai-result-head {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}
.ai-result-head .ico { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: grid; place-items: center; flex-shrink: 0; }

.result-block { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.result-block > h3 { font-size: 14.5px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.result-block > h3 .count { margin-left: auto; color: var(--text-muted); font-size: 12px; font-weight: 600; }

.theme-groups { display: flex; flex-direction: column; gap: 16px; }
.theme-group-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

.mini-card { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-2); margin-bottom: 8px; }
.mini-card:last-child { margin-bottom: 0; }
.mini-card .mc-head { display: flex; align-items: center; gap: 8px; }
.mini-card .mc-title { font-weight: 650; font-size: 13.5px; flex: 1; }
.mini-card .mc-desc { color: var(--text-dim); font-size: 12.5px; margin-top: 5px; line-height: 1.5; }
.mini-card .mc-foot { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 9px; font-size: 12px; color: var(--text-dim); }
.mini-card .mc-foot strong { color: var(--text); }
.mini-card .mc-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* Freigabe-Fortschritt (Bericht) */
.flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.flow-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.flow-step .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.flow-step.done { color: var(--st-available); }
.flow-step.done .dot { background: color-mix(in srgb, var(--st-available) 18%, transparent); border-color: var(--st-available); color: var(--st-available); }
.flow-step.current { color: var(--accent); }
.flow-step.current .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.flow-arrow { width: 26px; border-top: 2px dashed var(--border); margin: 0 6px; }

/* ── Kalender ──────────────────────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-head { text-align: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 700; padding-bottom: 4px; }
.cal-cell { min-height: 96px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell.other { opacity: 0.45; }
.cal-cell.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cal-date { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.cal-cell.today .cal-date { color: var(--accent); }
.cal-ev { font-size: 11px; padding: 3px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-left: 2px solid var(--accent); }

/* ── Detail-Sidepanel ──────────────────────────────────────────────────── */
.panel-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 80; animation: fadeIn 0.2s ease; border: 0; padding: 0; cursor: default; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.side-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 96vw);
    background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow);
    z-index: 90; display: flex; flex-direction: column;
    animation: slideIn 0.25s cubic-bezier(0.22, 0.8, 0.36, 1);
}
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.panel-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 16px; border-bottom: 1px solid var(--border-soft); }
.panel-head .who { flex: 1; min-width: 0; }
.panel-head h2 { font-size: 17px; }
.panel-head .sub { color: var(--text-dim); font-size: 13px; margin-top: 3px; }
.panel-close { align-self: flex-start; background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.panel-close:hover { background: var(--surface-hover); color: var(--text); }
.panel-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.info-grid { display: grid; grid-template-columns: 140px 1fr; gap: 9px 12px; font-size: 13.5px; margin: 0; }
.info-grid dt { color: var(--text-dim); }
.info-grid dd { margin: 0; font-weight: 500; }
.panel-section-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); font-weight: 700; margin: 20px 0 10px; }
.panel-actions { padding: 14px 20px 18px; border-top: 1px solid var(--border-soft); display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.action-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 13px;
    cursor: pointer; transition: all 0.15s; font-family: var(--font);
}
.action-btn:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--accent); }
.action-btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 0; color: #fff; }
.action-btn.primary:hover { filter: brightness(1.08); color: #fff; }

.source-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.source-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border-soft); }

/* Datenschutz-Hinweis */
.privacy-note {
    display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--st-meeting) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--st-meeting) 25%, transparent);
    color: var(--text-dim); font-size: 12.5px; line-height: 1.5; margin-bottom: 18px;
}
.privacy-note .pn-ico { color: var(--st-meeting); flex-shrink: 0; }

/* ── Einstellungen ─────────────────────────────────────────────────────── */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.setting-row:last-child { border-bottom: 0; }
.setting-row .s-label { font-weight: 550; }
.setting-row .hint { color: var(--text-muted); font-size: 12px; margin-top: 2px; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background 0.2s; cursor: pointer; }
.switch .slider::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; left: 3px; top: 3px; background: #fff; transition: transform 0.2s; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }

.accent-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.accent-swatch { width: 40px; height: 40px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; position: relative; transition: transform 0.12s; }
.accent-swatch:hover { transform: translateY(-2px); }
.accent-swatch.sel { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.accent-swatch .chk { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }

/* Mock-Schnittstellenstatus */
.conn-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; }
.conn-card .conn-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-dim); flex-shrink: 0; }
.conn-card .conn-main { flex: 1; min-width: 0; }
.conn-card .conn-name { font-weight: 650; font-size: 13.5px; }
.conn-card .conn-state { font-size: 12px; color: var(--text-dim); margin-top: 1px; }

.dot-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.dot-status .d { width: 8px; height: 8px; border-radius: 50%; }
.dot-status.off .d { background: var(--st-offline); } .dot-status.off { color: var(--text-muted); }
.dot-status.mock .d { background: var(--st-focus); } .dot-status.mock { color: var(--st-focus); }
.dot-status.on .d { background: var(--st-available); } .dot-status.on { color: var(--st-available); }
.dot-status.manual .d { background: var(--st-meeting); } .dot-status.manual { color: var(--st-meeting); }

/* ── Selma-Chat ────────────────────────────────────────────────────────── */
.selma-page { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 62px); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 6px 4px 14px; display: flex; flex-direction: column; gap: 12px; }

.selma-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand-gradient); color: #fff;
    display: grid; place-items: center; box-shadow: 0 2px 8px rgba(228,43,34,0.28);
}
.selma-avatar.lg { width: 44px; height: 44px; }

.selma-welcome { text-align: center; padding: 46px 20px 26px; color: var(--text-dim); }
.selma-welcome .selma-avatar { margin: 0 auto 14px; }
.selma-welcome h2 { color: var(--text); font-size: 19px; margin-bottom: 6px; }
.selma-examples { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.chat-row { display: flex; gap: 10px; align-items: flex-end; }
.chat-row.from-user { justify-content: flex-end; }

.bubble {
    max-width: min(860px, 88%);
    border-radius: var(--radius);
    padding: 11px 14px;
    box-shadow: var(--shadow-sm);
    animation: tileIn 0.25s ease;
}
.bubble.user { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-bottom-right-radius: 4px; }
.bubble.selma { background: var(--surface); border: 1px solid var(--border-soft); border-bottom-left-radius: 4px; }
.bubble-text { font-size: 13.5px; line-height: 1.55; white-space: normal; }
.bubble-time { font-size: 10.5px; opacity: 0.65; margin-top: 5px; text-align: right; }

.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: typingBlink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBlink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.draft-card { margin-top: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-2); }
.draft-card .dc-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.draft-card .dc-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-soft); }

.mail-preview { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); padding: 12px 14px; }
.mail-preview .mail-subject { font-weight: 650; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; }
.mail-preview .mail-body { font-family: var(--font); font-size: 13px; line-height: 1.55; white-space: pre-wrap; margin: 0; color: var(--text); }

.selma-hint {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12.5px; color: var(--text-dim);
    padding: 6px 10px; border-radius: var(--radius-sm);
    background: var(--accent-soft); margin-bottom: 5px;
}
.selma-hint svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.chat-input {
    display: flex; gap: 10px; align-items: flex-end;
    padding: 12px 0 0; border-top: 1px solid var(--border-soft);
}
.chat-input textarea { flex: 1; min-height: 46px; max-height: 140px; resize: vertical; }

@media (max-width: 760px) {
    .selma-page { height: calc(100vh - var(--topbar-h) - 46px); }
    .bubble { max-width: 94%; }
}

/* ── Leere Zustände ────────────────────────────────────────────────────── */
.empty-state { text-align: center; color: var(--text-dim); padding: 56px 20px; font-size: 14px; }
.empty-state .big { font-size: 34px; margin-bottom: 10px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .route-layout { grid-template-columns: 300px 1fr; }
}
@media (max-width: 1050px) {
    :root { --sidebar-w: 66px; }
    .dash-cols { grid-template-columns: 1fr !important; }
    .sidebar { padding: 14px 8px; align-items: center; }
    .sidebar-brand { padding: 6px 0 16px; }
    .sidebar-brand .brand-text { display: none; }
    .nav-section { display: none; }
    .nav-link { justify-content: center; padding: 10px; }
    .nav-link .nav-text { display: none; }
    .nav-link.active::before { display: none; }
    .nav-badge { position: absolute; top: 3px; right: 3px; margin: 0; padding: 0 5px; }
    .sidebar-footer { display: none; }
    .route-layout { grid-template-columns: 1fr; }
    .app-switcher-btn .cur { display: none; }
}
@media (max-width: 760px) {
    .app-main { padding: 14px 12px 30px; }
    .cards-grid, .settings-grid, .kpi-grid { grid-template-columns: 1fr; }
    .topbar { padding: 0 12px; gap: 8px; }
    .topbar-clock, .role-select .role-label { display: none; }
    .global-search { width: 100%; }
    .report-form { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .info-grid { grid-template-columns: 116px 1fr; }
    .panel-actions { grid-template-columns: 1fr; }
    .cal-grid { font-size: 11px; }
    .cal-cell { min-height: 62px; }
    .flow { gap: 4px; } .flow-arrow { width: 14px; }
}
@media (min-width: 2200px) {
    .cards-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
    html { font-size: 15.5px; }
}

/* Fehler-UI der Vorlage */
#blazor-error-ui {
    background: #b91c1c; color: #fff; bottom: 0; box-shadow: var(--shadow);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed; width: 100%; z-index: 1000; font-size: 13.5px;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }