:root {
            /* Airy-DARK (warm ink statt reinem Schwarz) */
            --b12-black: #0d0b09;
            --b12-dark: #131110;
            --b12-dark-1: #181511;
            --b12-dark-2: #1b1815;
            --b12-dark-3: #24201b;
            --b12-dark-4: #2e2820;
            --b12-gold: #f1a728;
            --b12-gold-dim: rgba(241,167,40,0.15);
            --b12-gold-hover: #f5b94d;
            --b12-gold-text: #f5b94d;
            --b12-red: #d87350;
            --b12-green: #4ad3ac;
            --b12-green-text: #4ad3ac;
            --b12-purple: #826aed;
            --b12-purple-text: #a48fff;
            --b12-white: #ffffff;
            --on-accent: #1a1207;
            --b12-gray-1: #f5f5f5;
            --b12-gray-2: #e0e0e0;
            --b12-gray-3: #999999;
            --b12-gray-4: #666666;
            --b12-gray-5: #444444;
            --b12-gray-6: #333333;
            --text-primary: #f6f1e9;
            --text-secondary: #d5cdc0;
            --text-muted: #a99e8f;
            --border-color: #2c261f;
            --sidebar-width: 250px;
            --header-height: 56px;
            --radius-sm: 9px;
            --radius-md: 14px;
            --radius-lg: 20px;
            --radius-pill: 999px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
            --shadow-md: 0 6px 20px rgba(0,0,0,0.42);
            --shadow-lg: 0 12px 34px rgba(0,0,0,0.55);
            --font-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
            --transition: all 0.2s ease;
        }

        [data-theme="light"] {
            /* Airy-LIGHT (cremeweiß, warm) — Standard-Design */
            --b12-black: #ffffff;
            --b12-dark: #fbf9f4;
            --b12-dark-1: #ffffff;
            --b12-dark-2: #ffffff;
            --b12-dark-3: #f4efe6;
            --b12-dark-4: #ece5d8;
            --b12-gold-text: #b0760c;
            --b12-green-text: #128a6c;
            --b12-purple-text: #5b43c7;
            --on-accent: #1a1207;
            --text-primary: #171412;
            --text-secondary: #4a433b;
            /* Phase D3, Kontrast: vormals #837a6d — das erreichte gegen Weiss
               nur 4,23:1 und gegen die Kartenflaeche #f4efe6 sogar nur 3,69:1,
               beides unter WCAG AA (4,5:1). #6b6357 haelt AA auf allen hellen
               Flaechen: 5,92:1 auf #ffffff, 5,63:1 auf #fbf9f4 (Seitenhintergrund),
               5,17:1 auf #f4efe6 (Karte) und 4,73:1 auf #ece5d8 (Chips/Tabs).
               Der Dunkelmodus bleibt unveraendert: #a99e8f liegt dort bei
               7,15:1 / 6,15:1 / 5,54:1 und ist damit schon ueber AA. */
            --text-muted: #6b6357;
            --border-color: #eae2d3;
            --shadow-sm: 0 1px 3px rgba(90,64,24,0.05);
            --shadow-md: 0 4px 16px rgba(90,64,24,0.07);
            --shadow-lg: 0 12px 30px rgba(90,64,24,0.12);
        }
        [data-theme="light"] .login-page {
            background: #f0f0f0;
            background-image: radial-gradient(circle at 30% 50%, rgba(241,167,40,0.08) 0%, transparent 50%),
                             radial-gradient(circle at 70% 80%, rgba(130,106,237,0.05) 0%, transparent 50%);
        }
        [data-theme="light"] .sidebar { background: var(--b12-dark-2); }
        [data-theme="light"] ::-webkit-scrollbar-track { background: var(--b12-dark-3); }
        [data-theme="light"] ::-webkit-scrollbar-thumb { background: #d8cfbf; }

        /* ===== AIRY: Display-Schrift + Feinschliff ===== */
        h1, h2, h3, .page-title, .stat-value, .stat-card .stat-value,
        .card-title, .section-title, .kpi .value {
            font-family: var(--font-display);
            font-weight: 800; letter-spacing:-0.02em;
        }
        .page-title { font-weight:800; }
        /* Echtes B12-Media-Logo, theme-abhängig (Tinte auf Hell, Weiß auf Dunkel) */
        /* ===== FOKUS (Phase D3) =====
           Sichtbarer Fokus fuer Tastaturbedienung. :focus-visible trifft nur
           die Tastatur-Navigation, Mausklicks bleiben ohne Ring. Die
           bestehenden :focus-Regeln fuer Eingabefelder (goldener Rahmen +
           Schein) bleiben unberuehrt. */
        :focus-visible {
            outline: 2px solid var(--b12-gold);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }
        .modal:focus { outline: none; }

        .brand-logo { display:inline-flex; align-items:center; }
        .brand-logo img { height:22px; width:auto; max-width:150px; display:block; }
        .brand-logo .logo-white { display:none; }
        [data-theme="dark"] .brand-logo .logo-ink { display:none; }
        [data-theme="dark"] .brand-logo .logo-white { display:block; }
        .mobile-topbar .brand-logo img { height:20px; }
        .logo-dropzone {
            border: 2px dashed var(--border-color); border-radius: var(--radius-md);
            padding: 30px; text-align: center; cursor: pointer; transition: var(--transition);
        }
        .logo-dropzone:hover, .logo-dropzone.drag-over { border-color: var(--b12-gold); background: var(--b12-gold-dim); }
        .logo-dropzone img { max-height: 60px; max-width: 200px; object-fit: contain; }
        .theme-option {
            flex:1; padding: 20px; border: 2px solid var(--border-color); border-radius: var(--radius-md);
            cursor: pointer; text-align: center; transition: var(--transition);
        }
        .theme-option:hover { border-color: var(--b12-gray-4); }
        .theme-option.active { border-color: var(--b12-gold); background: var(--b12-gold-dim); }
        .theme-option .icon { font-size: 28px; margin-bottom: 8px; }
        .theme-option .label { font-size: 13px; font-weight: 600; }
        .source-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
        .source-badge { display: flex; align-items: center; gap: 6px; padding: 6px 10px;
            background: var(--b12-dark-3); border-radius: var(--radius-sm); font-size: 11px; color: var(--text-secondary); }
        .source-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .kategorie-dropdown { position: relative; z-index: 50; }
        .kategorie-dropdown .dd-trigger {
            display: flex; align-items: center; justify-content: space-between;
            width: 100%; padding: 10px 14px; background: var(--b12-dark-3); border: 1px solid var(--border-color);
            border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; cursor: pointer;
            font-family: Manrope, sans-serif; transition: var(--transition); min-height: 42px;
        }
        .kategorie-dropdown .dd-trigger:hover { border-color: var(--b12-gray-4); }
        .kategorie-dropdown .dd-trigger.open { border-color: var(--b12-gold); }
        .kategorie-dropdown .dd-trigger .placeholder { color: var(--text-muted); }
        .kategorie-dropdown .dd-trigger .arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
        .kategorie-dropdown .dd-trigger.open .arrow { transform: rotate(180deg); }
        .kategorie-dropdown .dd-panel {
            position: fixed; z-index: 9999;
            background: var(--b12-dark-2); border: 1px solid var(--border-color); border-radius: var(--radius-md);
            box-shadow: 0 12px 40px rgba(0,0,0,0.5); max-height: 380px;
            display: flex; flex-direction: column;
        }
        .kategorie-dropdown .dd-search {
            padding: 8px 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
        }
        .kategorie-dropdown .dd-search input {
            width: 100%; padding: 8px 12px; background: var(--b12-dark-3); border: 1px solid var(--border-color);
            border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px;
            font-family: Manrope, sans-serif; outline: none;
        }
        .kategorie-dropdown .dd-search input::placeholder { color: var(--text-muted); }
        .kategorie-dropdown .dd-search input:focus { border-color: var(--b12-gold); }
        .kategorie-dropdown .dd-list { overflow-y: auto; padding: 4px 0; flex: 1; min-height: 0; }
        .kategorie-dropdown .dd-list::-webkit-scrollbar { width: 6px; }
        .kategorie-dropdown .dd-list::-webkit-scrollbar-track { background: transparent; }
        .kategorie-dropdown .dd-list::-webkit-scrollbar-thumb { background: var(--b12-gray-5); border-radius: 3px; }
        .kategorie-dropdown .dd-group-label {
            padding: 10px 12px 5px; font-size: 10px; font-weight: 700; text-transform: uppercase;
            letter-spacing: 1.2px; color: var(--b12-gold); font-family: 'Geist Mono', monospace;
            position: sticky; top: 0; background: var(--b12-dark-2); z-index: 1;
            border-bottom: 1px solid var(--border-color); margin-top: 2px;
        }
        .kategorie-dropdown .dd-group-label:first-child { margin-top: 0; }
        .kategorie-dropdown .dd-item {
            padding: 7px 12px 7px 22px; font-size: 13px; color: var(--text-secondary); cursor: pointer;
            transition: background 0.12s, color 0.12s;
        }
        .kategorie-dropdown .dd-item:hover { background: var(--b12-gold-dim); color: var(--text-primary); }
        .kategorie-dropdown .dd-item.selected { color: var(--b12-gold); font-weight: 600; }
        .kategorie-dropdown .dd-custom-item {
            padding: 8px 12px; font-size: 13px; color: var(--b12-gold); cursor: pointer;
            border-bottom: 1px solid var(--border-color); transition: background 0.12s;
        }
        .kategorie-dropdown .dd-custom-item:hover { background: var(--b12-gold-dim); }
        .kategorie-dropdown .dd-empty { padding: 20px 12px; text-align: center; font-size: 13px; color: var(--text-muted); }
        @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family:'Manrope',system-ui,-apple-system,sans-serif;
            background:var(--b12-dark);
            color:var(--text-primary);
            overflow:hidden;
            height:100vh;
        }
        ::-webkit-scrollbar { width:6px; }
        ::-webkit-scrollbar-track { background:var(--b12-dark-2); }
        ::-webkit-scrollbar-thumb { background:var(--b12-gray-5); border-radius:3px; }
        ::-webkit-scrollbar-thumb:hover { background:var(--b12-gray-4); }
        input,select,textarea,button { font-family:inherit; }

        /* ===== LOGIN ===== */
        .login-page {
            display:flex; align-items:center; justify-content:center;
            height:100vh; background:var(--b12-black);
            background-image: radial-gradient(circle at 30% 50%, rgba(241,167,40,0.05) 0%, transparent 50%),
                             radial-gradient(circle at 70% 80%, rgba(130,106,237,0.03) 0%, transparent 50%);
        }
        .login-box {
            width:400px; padding:48px; background:var(--b12-dark-2);
            border:1px solid var(--border-color); border-radius:var(--radius-lg);
        }
        .login-logo { font-size:32px; font-weight:800; margin-bottom:8px; letter-spacing:-0.5px; }
        .login-logo { color:var(--text-primary); }
        .login-logo .b { color:var(--text-primary); }
        .login-logo .dot { color:var(--b12-gold); }
        .login-subtitle { color:var(--text-secondary); font-size:14px; margin-bottom:32px; font-family:'Geist Mono',monospace; }
        .form-group { margin-bottom:20px; }
        .form-label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary);
                      margin-bottom:6px; text-transform:uppercase; letter-spacing:1px; font-family:'Geist Mono',monospace; }
        .form-input {
            width:100%; padding:12px 14px; background:var(--b12-dark-3); border:1px solid var(--border-color);
            border-radius:var(--radius-sm); color:var(--text-primary); font-size:14px; transition:var(--transition);
        }
        .form-input:focus { outline:none; border-color:var(--b12-gold); box-shadow:0 0 0 3px var(--b12-gold-dim); }
        .form-input::placeholder { color:var(--text-muted); }
        select.form-input { cursor:pointer; appearance:none;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
            background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
        }
        /* resize:vertical (nicht 'both'): die Breite bleibt am Formular
           ausgerichtet, aufziehen geht nur nach unten. max-width als Riegel,
           falls jemand das spaeter auf 'both' stellt — dann waere sonst
           waagerechtes Scrollen im Dialog moeglich. */
        textarea.form-input { resize:vertical; min-height:80px; max-width:100%; }
        .btn {
            display:inline-flex; align-items:center; gap:8px; padding:10px 20px;
            border:none; border-radius:var(--radius-pill); font-size:14px; font-weight:700;
            cursor:pointer; transition:var(--transition); text-decoration:none;
        }
        .btn-primary { background:var(--b12-gold); color:var(--on-accent); box-shadow:var(--shadow-sm); }
        .btn-primary:hover { background:var(--b12-gold-hover); transform:translateY(-1px); }
        .btn-secondary { background:var(--b12-dark-3); color:var(--text-primary); border:1px solid var(--border-color); }
        .btn-secondary:hover { background:var(--b12-dark-4); border-color:var(--b12-gray-5); }
        .btn-danger { background:rgba(216,115,80,0.15); color:var(--b12-red); border:1px solid rgba(216,115,80,0.3); }
        .btn-danger:hover { background:rgba(216,115,80,0.25); }
        .btn-sm { padding:6px 14px; font-size:12px; }
        .btn-full { width:100%; justify-content:center; }
        .btn:disabled { opacity:0.5; cursor:not-allowed; }
        .login-error { color:var(--b12-red); font-size:13px; margin-bottom:16px; padding:10px;
                       background:rgba(216,115,80,0.1); border-radius:var(--radius-sm); }

        /* ===== LAYOUT ===== */
        .app-layout { display:flex; height:100vh; }
        .sidebar {
            width:var(--sidebar-width); background:var(--b12-dark-2); border-right:1px solid var(--border-color);
            display:flex; flex-direction:column; flex-shrink:0; position:relative; z-index:10;
        }
        .sidebar-logo { padding:18px 22px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; row-gap:8px;
                        font-family:var(--font-display);
                        font-size:24px; font-weight:800; letter-spacing:-0.03em;
                        border-bottom:1px solid var(--border-color); }
        .sidebar-nav { flex:1; padding:12px 8px; overflow-y:auto; }
        .nav-section { margin-bottom:8px; }
        /* Nav-Abschnitt und Nav-Eintrag sind seit Phase D3 echte <button>:
           per Tab erreichbar, per Enter/Leertaste bedienbar. Die
           Button-Grundformatierung des Browsers wird hier zurueckgesetzt,
           das Aussehen bleibt unveraendert. */
        .nav-section-title { font-size:10px; font-weight:600; color:var(--text-muted);
                            text-transform:uppercase; letter-spacing:1.5px; padding:12px 12px 6px;
                            font-family:'Geist Mono',monospace;
                            cursor:pointer; user-select:none;
                            display:flex; align-items:center; justify-content:space-between;
                            transition:color 0.12s;
                            width:100%; background:none; border:none; text-align:left; }
        .nav-section-title:hover { color:var(--b12-gold); }
        .nav-section-title .chev { font-size:11px; opacity:0.5; transition:transform 0.18s; }
        .nav-section.collapsed .chev { transform:rotate(-90deg); }
        .nav-section.collapsed .nav-item { display:none; }
        .nav-item {
            display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px;
            cursor:pointer; transition:var(--transition); font-size:13.5px; font-weight:600;
            color:var(--text-secondary); margin-bottom:2px;
            width:100%; background:none; border:none; text-align:left; font-family:inherit;
        }
        .nav-item:hover { background:var(--b12-dark-3); color:var(--text-primary); }
        .nav-item.active { background:var(--b12-gold-dim); color:var(--b12-gold-text); font-weight:700; }
        .nav-item .icon { width:18px; text-align:center; font-size:15px; }
        .nav-badge { margin-left:auto; background:var(--b12-gold); color:var(--b12-black);
                     font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }
        .sidebar-user {
            padding:14px 16px; border-top:1px solid var(--border-color);
            display:flex; align-items:center; gap:10px;
        }
        .avatar {
            width:32px; height:32px; border-radius:50%; display:flex; align-items:center;
            justify-content:center; font-weight:700; font-size:13px; color:var(--b12-black); flex-shrink:0;
        }
        .user-info { flex:1; min-width:0; }
        .user-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .user-role { font-size:11px; color:var(--text-muted); font-family:'Geist Mono',monospace; }
        .logout-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px;
                      font-size:16px; transition:var(--transition); }
        .logout-btn:hover { color:var(--b12-red); }

        /* ===== MAIN CONTENT ===== */
        .main-content { flex:1; display:flex; flex-direction:column; overflow:hidden; }
        .page-header {
            padding:16px 28px; border-bottom:1px solid var(--border-color);
            display:flex; align-items:center; justify-content:space-between;
            background:var(--b12-dark); flex-shrink:0;
        }
        .page-title { font-size:20px; font-weight:700; letter-spacing:-0.3px; }
        .page-subtitle { font-size:12px; color:var(--text-muted); font-family:'Geist Mono',monospace; margin-top:2px; }
        .page-actions { display:flex; gap:8px; align-items:center; }
        .page-body { flex:1; overflow-y:auto; padding:24px 28px; }
        .page-container { flex:1; min-height:0; overflow-y:auto; }

        /* ===== CARDS & PANELS ===== */
        .card {
            background:var(--b12-dark-2); border:1px solid var(--border-color);
            border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
        }
        .card-header {
            padding:14px 18px; border-bottom:1px solid var(--border-color);
            display:flex; align-items:center; justify-content:space-between;
            font-size:14px; font-weight:600;
        }
        .card-body { padding:18px; }
        .stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom:24px; }
        .stat-card {
            background:var(--b12-dark-2); border:1px solid var(--border-color);
            border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm);
            transition:transform 0.13s, box-shadow 0.13s;
        }
        .stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
        .stat-label { font-size:11px; font-weight:700; color:var(--text-muted);
                      text-transform:uppercase; letter-spacing:1px; font-family:'Geist Mono',monospace; margin-bottom:10px; }
        .stat-value { font-size:30px; font-weight:800; letter-spacing:-0.03em; }
        .stat-sub { font-size:12px; color:var(--text-muted); margin-top:6px; }
        /* Airy-Verläufe aus B12-Farben (funktionieren in Hell + Dunkel via --b12-dark-2) */
        .stat-card.gold   { background:linear-gradient(140deg, color-mix(in srgb, var(--b12-gold) 16%, var(--b12-dark-2)), var(--b12-dark-2) 74%); }
        .stat-card.gold   .stat-value { color:var(--b12-gold-text); }
        .stat-card.green  { background:linear-gradient(140deg, color-mix(in srgb, var(--b12-green) 20%, var(--b12-dark-2)), var(--b12-dark-2) 74%); }
        .stat-card.green  .stat-value { color:var(--b12-green-text); }
        .stat-card.purple { background:linear-gradient(140deg, color-mix(in srgb, var(--b12-purple) 16%, var(--b12-dark-2)), var(--b12-dark-2) 74%); }
        .stat-card.purple .stat-value { color:var(--b12-purple-text); }
        .stat-card.red    { background:linear-gradient(140deg, color-mix(in srgb, var(--b12-red) 17%, var(--b12-dark-2)), var(--b12-dark-2) 74%); }

        /* ===== TABLE ===== */
        .table-wrap { overflow-x:auto; }
        table { width:100%; border-collapse:collapse; font-size:13px; }
        th { text-align:left; padding:10px 14px; font-size:11px; font-weight:600;
             color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;
             font-family:'Geist Mono',monospace; border-bottom:1px solid var(--border-color);
             background:var(--b12-dark-3); white-space:nowrap; }
        td { padding:10px 14px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
        tr:hover td { background:rgba(255,255,255,0.02); }
        .table-empty { padding:40px; text-align:center; color:var(--text-muted); }

        /* ===== BADGES ===== */
        .badge {
            display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px;
            font-size:11px; font-weight:600; font-family:'Geist Mono',monospace;
        }
        .badge-neu, .badge-entwurf { background:rgba(130,106,237,0.15); color:var(--b12-purple); }
        .badge-kontaktiert, .badge-gesendet, .badge-in-bearbeitung, .badge-aktiv, .badge-laeuft, .badge-geplant, .badge-scraping, .badge-crawling {
            background:var(--b12-gold-dim); color:var(--b12-gold); }
        .badge-gestoppt, .badge-pausiert { background:rgba(130,106,237,0.2); color:var(--b12-purple); }
        .badge-qualifiziert, .badge-angebot { background:rgba(74,211,172,0.15); color:var(--b12-green); }
        .badge-gewonnen, .badge-angenommen, .badge-bezahlt, .badge-fertig, .badge-erledigt, .badge-geschlossen {
            background:rgba(74,211,172,0.2); color:var(--b12-green); }
        .badge-verloren, .badge-abgelehnt, .badge-fehler, .badge-kritisch, .badge-kuendigung {
            background:rgba(216,115,80,0.15); color:var(--b12-red); }
        .badge-offen { background:rgba(241,167,40,0.15); color:var(--b12-gold); }
        .badge-verhandlung { background:rgba(130,106,237,0.2); color:var(--b12-purple); }
        .badge-hoch { background:rgba(216,115,80,0.12); color:var(--b12-red); }
        .badge-normal { background:rgba(153,153,153,0.12); color:var(--b12-gray-3); }
        .badge-niedrig { background:rgba(74,211,172,0.1); color:var(--b12-green); }
        .badge-wartend { background:rgba(153,153,153,0.15); color:var(--b12-gray-3); }
        /* Kanban-Status (Task Manager „Mein Tag", 2026-08-24). Die Farben sind
           die Spaltenfarben des Boards (ProjektBoardPage.jsx STATUSES) —
           dieselbe Aufgabe soll im Board und in „Mein Tag" nicht
           unterschiedlich aussehen. Rot kommt hier bewusst nicht vor: es ist
           harten Kundenfristen vorbehalten (E9). */
        .badge-backlog { background:rgba(153,153,153,0.15); color:var(--b12-gray-3); }
        .badge-todo { background:rgba(59,130,246,0.16); color:#6ea8fa; }
        .badge-in_arbeit { background:var(--b12-gold-dim); color:var(--b12-gold-text); }
        .badge-review { background:rgba(155,89,182,0.18); color:var(--b12-purple-text); }
        .badge-dringend { background:rgba(216,115,80,0.12); color:var(--b12-red); }
        /* Abgebrochen ist ein Ergebnis, kein Alarm — deshalb grau und
           ausdruecklich NICHT rot (E9). Rot bleibt harten Kundenfristen
           vorbehalten. */
        .badge-abgebrochen { background:rgba(153,153,153,0.15); color:var(--b12-gray-3);
                             text-decoration:line-through; }

        /* ===== PIPELINE BOARD ===== */
        .pipeline-board { display:flex; gap:12px; overflow-x:auto; padding-bottom:16px; min-height:400px; }
        .pipeline-col {
            min-width:260px; width:260px; background:var(--b12-dark-2);
            border:1px solid var(--border-color); border-radius:var(--radius-md);
            display:flex; flex-direction:column; max-height:calc(100vh - 200px);
        }
        .pipeline-col-header {
            padding:12px 14px; border-bottom:1px solid var(--border-color);
            font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
            font-family:'Geist Mono',monospace; display:flex; align-items:center; justify-content:space-between;
        }
        .pipeline-col-body { flex:1; overflow-y:auto; padding:8px; }
        .pipeline-card {
            background:var(--b12-dark-3); border:1px solid var(--border-color);
            border-radius:var(--radius-sm); padding:12px; margin-bottom:8px; cursor:pointer;
            transition:var(--transition);
        }
        .pipeline-card:hover { border-color:var(--b12-gold); transform:translateY(-1px); }
        .pipeline-card-title { font-size:13px; font-weight:600; margin-bottom:4px; }
        .pipeline-card-sub { font-size:11px; color:var(--text-muted); }
        .pipeline-card-value { font-size:14px; font-weight:700; color:var(--b12-gold); margin-top:6px; }
        .pipeline-count { background:var(--b12-dark-4); padding:2px 8px; border-radius:10px; font-size:11px; }

        /* ===== MODAL ===== */
        .modal-overlay {
            position:fixed; inset:0; background:rgba(0,0,0,0.7); display:flex;
            align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(4px);
        }
        .modal {
            background:var(--b12-dark-2); border:1px solid var(--border-color);
            border-radius:var(--radius-lg); width:90%; max-width:600px; max-height:85vh;
            display:flex; flex-direction:column;
        }
        .modal-lg { max-width:800px; }
        .modal-header {
            padding:18px 22px; border-bottom:1px solid var(--border-color);
            display:flex; align-items:center; justify-content:space-between;
        }
        .modal-title { font-size:16px; font-weight:700; }
        .modal-close { background:none; border:none; color:var(--text-muted); cursor:pointer;
                       font-size:20px; padding:4px 8px; transition:var(--transition); }
        .modal-close:hover { color:var(--text-primary); }
        /* min-height:0 haelt den Koerper schrumpffaehig. Heute greift schon
           overflow-y:auto (ein Flex-Element mit eigenem Scroll hat als
           automatische Mindesthoehe 0), gemessen am 24.08.2026: der Dialog
           bleibt bei 85vh und der Inhalt scrollt innen. Faellt das overflow
           bei einer spaeteren Aenderung weg, wuerde der Koerper wieder auf
           Inhaltshoehe bestehen und Kopf und Fuss aus dem Dialog druecken. */
        .modal-body { padding:22px; overflow-y:auto; flex:1; min-height:0; }
        .modal-footer { padding:14px 22px; border-top:1px solid var(--border-color);
                        display:flex; justify-content:flex-end; gap:8px; }
        .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
        .form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

        /* ===== TABS ===== */
        .tabs { display:flex; gap:0; border-bottom:1px solid var(--border-color); margin-bottom:20px; }
        .tab {
            padding:10px 18px; font-size:13px; font-weight:500; color:var(--text-muted);
            cursor:pointer; border-bottom:2px solid transparent; transition:var(--transition);
        }
        .tab:hover { color:var(--text-primary); }
        .tab.active { color:var(--b12-gold); border-bottom-color:var(--b12-gold); }

        /* ===== FILTER BAR ===== */
        .filter-bar { display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
        .search-input {
            padding:8px 14px; background:var(--b12-dark-3); border:1px solid var(--border-color);
            border-radius:var(--radius-sm); color:var(--text-primary); font-size:13px;
            min-width:220px; transition:var(--transition);
        }
        .search-input:focus { outline:none; border-color:var(--b12-gold); }
        .filter-select {
            padding:8px 30px 8px 12px; background:var(--b12-dark-3); border:1px solid var(--border-color);
            border-radius:var(--radius-sm); color:var(--text-primary); font-size:13px; cursor:pointer;
            appearance:none;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
            background-repeat:no-repeat; background-position:right 10px center;
        }

        /* ===== KALENDER ===== */
        .calendar-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:1px; background:var(--border-color); border-radius:var(--radius-md); overflow:hidden; }
        .calendar-day-header {
            padding:8px; text-align:center; font-size:11px; font-weight:600;
            color:var(--text-muted); background:var(--b12-dark-3);
            text-transform:uppercase; font-family:'Geist Mono',monospace;
        }
        .calendar-day {
            min-height:90px; padding:6px 8px; background:var(--b12-dark-2);
            cursor:pointer; transition:var(--transition);
        }
        .calendar-day:hover { background:var(--b12-dark-3); }
        .calendar-day.today { background:var(--b12-gold-dim); }
        .calendar-day.other-month { opacity:0.3; }
        .calendar-day-num { font-size:12px; font-weight:600; margin-bottom:4px; }
        .calendar-event {
            font-size:10px; padding:2px 5px; border-radius:3px; margin-bottom:2px;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
            background:var(--b12-gold-dim); color:var(--b12-gold); font-weight:500;
        }

        /* ===== NOTIFICATION BELL ===== */
        .notif-bell { position:relative; cursor:pointer; font-size:18px; color:var(--text-muted); transition:var(--transition); }
        .notif-bell:hover { color:var(--text-primary); }
        .notif-count {
            position:absolute; top:-6px; right:-8px; background:var(--b12-red);
            color:white; font-size:9px; font-weight:700; padding:1px 5px;
            border-radius:8px; min-width:16px; text-align:center;
        }
        .notif-panel {
            position:absolute; top:calc(var(--header-height)); right:20px;
            width:340px; background:var(--b12-dark-2); border:1px solid var(--border-color);
            border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:50; max-height:400px; overflow-y:auto;
        }
        .notif-item { padding:12px 16px; border-bottom:1px solid var(--border-color);
                      cursor:pointer; transition:var(--transition); }
        .notif-item:hover { background:var(--b12-dark-3); }
        .notif-item.unread { border-left:3px solid var(--b12-gold); }
        .notif-title { font-size:13px; font-weight:600; }
        .notif-msg { font-size:12px; color:var(--text-muted); margin-top:2px; }
        .notif-time { font-size:10px; color:var(--text-muted); margin-top:4px; font-family:'Geist Mono',monospace; }

        /* ===== ACTIVITY ===== */
        .activity-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-color); }
        .activity-dot { width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
        .activity-text { font-size:13px; }
        .activity-time { font-size:11px; color:var(--text-muted); font-family:'Geist Mono',monospace; }
        .activity-user { font-weight:600; color:var(--b12-gold); }

        /* ===== EMPTY STATE ===== */
        .empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); }
        .empty-state .icon { font-size:48px; margin-bottom:16px; opacity:0.3; }
        .empty-state h3 { font-size:16px; color:var(--text-secondary); margin-bottom:8px; }
        .empty-state p { font-size:13px; margin-bottom:20px; }

        /* ===== RESPONSIVE ===== */
        .detail-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
        .detail-section { margin-bottom:20px; }
        .detail-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border-color); font-size:13px; }
        .detail-label { color:var(--text-muted); font-family:'Geist Mono',monospace; font-size:12px; }
        .detail-value { font-weight:500; text-align:right; }
        .tag { display:inline-flex; padding:3px 8px; background:var(--b12-dark-4); border-radius:4px; font-size:11px; margin-right:4px; margin-bottom:4px; }

        /* Toast Notifications */
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        /* KPI Tooltip — appears BELOW the ? icon */
        .kpi-help { position:absolute; top:6px; right:8px; cursor:pointer; z-index:10; }
        .kpi-help .kpi-q { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); font-size:10px; color:rgba(255,255,255,0.35); font-weight:600; transition: all 0.15s; }
        .kpi-help:hover .kpi-q { border-color:var(--b12-gold); color:var(--b12-gold); }
        .kpi-help .kpi-tip { display:none; position:absolute; top:calc(100% + 8px); right:-8px; width:220px; padding:10px 12px; background:#211d18; border:1px solid var(--b12-gold); border-radius:8px; font-size:12px; line-height:1.4; color:#ece5d8; text-align:left; text-transform:none; font-weight:400; box-shadow:0 8px 24px rgba(0,0,0,0.28); z-index:999; pointer-events:none; }
        .kpi-help .kpi-tip::after { content:''; position:absolute; bottom:100%; right:14px; border:6px solid transparent; border-bottom-color:var(--b12-gold); }
        .kpi-help:hover .kpi-tip { display:block; }

        /* ============================================================
         * MOBILE / RESPONSIVE LAYOUT (<= 900px)
         * Sidebar wird zum Drawer, Tabellen scrollen horizontal,
         * Page-Padding reduziert, Stat-Grids 1-spaltig.
         * ============================================================ */

        /* Hamburger-Button Default unsichtbar (nur mobile) */
        .mobile-menu-btn { display:none; background:none; border:none; color:var(--text-color);
                           cursor:pointer; padding:8px; margin-right:6px; font-size:22px; line-height:1; }
        /* Backdrop hinter dem mobilen Drawer */
        .sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55);
                            z-index:90; }

        /* Mobile-Topbar: Logo links + Burger rechts, sticky oben */
        .mobile-topbar { display:none; }

        /* Tablet + Mobile: Sidebar wird zum Drawer */
        @media (max-width: 1024px) {
            .mobile-topbar {
                display:flex; align-items:center; justify-content:space-between;
                position:fixed; top:0; left:0; right:0; height:52px;
                padding:0 12px; z-index:120;
                background:var(--b12-dark); border-bottom:1px solid var(--border-color);
                box-shadow:0 1px 4px rgba(0,0,0,0.25);
            }
            .mobile-topbar-logo {
                display:flex; align-items:center; gap:6px;
                font-size:20px; font-weight:800; letter-spacing:-0.5px;
                cursor:pointer; padding:6px 8px; border-radius:var(--radius-sm);
                user-select:none; -webkit-tap-highlight-color:transparent;
                transition:background 0.15s;
            }
            .mobile-topbar-logo:hover { background:var(--b12-dark-3); }
            .mobile-topbar-logo img { max-height:30px; }
            .mobile-topbar-burger {
                width:42px; height:42px; display:flex; align-items:center; justify-content:center;
                background:var(--b12-dark-2); border:1px solid var(--border-color);
                border-radius:var(--radius-sm); color:var(--text-primary);
                font-size:20px; cursor:pointer; transition:var(--transition);
                -webkit-tap-highlight-color:transparent;
            }
            .mobile-topbar-burger:hover,
            .mobile-topbar-burger:active { background:var(--b12-dark-3); border-color:var(--b12-gold); color:var(--b12-gold); }

            /* Floating-Hamburger ausblenden — wird durch Topbar-Burger ersetzt */
            .mobile-hamburger { display:none !important; }

            /* Main-Content rueckt unter die Topbar */
            .main-content { padding-top:52px; }

            /* Page-Header braucht keinen extra Burger-Platz mehr */
            .page-header { padding:14px 18px !important; }
            .page-body { padding:18px; }
            /* Sidebar wird zum Slide-In-Drawer */
            .sidebar {
                position:fixed; top:0; left:0; bottom:0; width:280px; max-width:80vw;
                transform: translateX(-100%); transition: transform 0.25s ease;
                z-index:100; box-shadow: 4px 0 24px rgba(0,0,0,0.4);
            }
            .sidebar.mobile-open { transform: translateX(0); }
            .sidebar-backdrop.show { display:block; }
            .mobile-menu-btn { display:inline-flex; align-items:center; justify-content:center; }
            .mobile-hamburger { display:flex !important; }

            /* CRITICAL: body hat per Default overflow:hidden + height:100vh — blockt Scroll auf Mobile */
            html, body {
                height:auto !important; min-height:100% !important;
                overflow-x:hidden !important; overflow-y:auto !important;
                -webkit-overflow-scrolling:touch;
            }
            .app-layout { display:block !important; height:auto !important; min-height:100vh; overflow:visible !important; }
            .main-content {
                width:100%; min-height:100vh; height:auto !important;
                display:block !important; overflow:visible !important;
            }
            .page-body {
                flex:none !important; overflow:visible !important; height:auto !important;
            }
            .page-header { position:relative; }

            /* INLINE-STYLE OVERRIDES — App nutzt viel inline gridTemplateColumns */
            /* Multi-Spalten-Grids auf 1-spaltig, ausser Calendar/Stat-Grids mit auto-fit */
            [style*="gridTemplateColumns: '1fr 340px'"],
            [style*="gridTemplateColumns:'1fr 340px'"],
            [style*="gridTemplateColumns: '1fr 320px'"],
            [style*="gridTemplateColumns:'1fr 320px'"],
            [style*="gridTemplateColumns: '320px 1fr'"],
            [style*="gridTemplateColumns:'320px 1fr'"],
            [style*="gridTemplateColumns: '2fr 1fr'"],
            [style*="gridTemplateColumns:'2fr 1fr'"],
            [style*="gridTemplateColumns: '1fr 2fr'"],
            [style*="gridTemplateColumns:'1fr 2fr'"],
            [style*="gridTemplateColumns: '1fr 1fr 1fr'"],
            [style*="gridTemplateColumns:'1fr 1fr 1fr'"],
            [style*="grid-template-columns: 1fr 340px"],
            [style*="grid-template-columns: 2fr 1fr"],
            [style*="grid-template-columns: 1fr 2fr"] {
                grid-template-columns: 1fr !important;
            }
            /* Inline 2-Spalten 1fr 1fr bleibt auf Tablet, wird auf Mobile 1-spaltig */

            /* Inline-Flex-Container: forcieren von flex-wrap */
            .page-actions, .filter-bar, .zeit-bar { flex-wrap:wrap !important; }

            /* ZeiterfassungBar margin reduzieren (16px 24px 0 → 10px 14px 0) */
            .main-content > div[style*="background: var(--b12-dark-2)"][style*="display: 'flex'"][style*="flexWrap"] {
                margin:10px 14px 0 !important;
            }

            /* Floating Chat Widget: kleiner + näher am Rand */
            div[style*="position: 'fixed'"][style*="bottom"][style*="right"][style*="zIndex"] {
                bottom:14px !important; right:14px !important;
            }

            /* Bilder & Videos clampen */
            img, video, iframe, canvas { max-width:100%; height:auto; }

            /* Inputs/Selects clampen */
            input, select, textarea { max-width:100%; }

            /* Pre/Code Blocks scrollen statt sprengen */
            pre, code { max-width:100%; overflow-x:auto; word-wrap:break-word; }

            /* Anything mit minWidth in px sollte schrumpfen koennen */
            [style*="minWidth: '"], [style*="min-width:"] { min-width:0 !important; }

            /* Anything mit width: 'XXXpx' clampen */
            [style*="width: '600px"], [style*="width:'600px"],
            [style*="width: '500px"], [style*="width:'500px"],
            [style*="width: '480px"], [style*="width:'480px"],
            [style*="width: '420px"], [style*="width:'420px"],
            [style*="width: '400px"], [style*="width:'400px"] {
                width:100% !important; max-width:100% !important;
            }

            /* Position:absolute/fixed Phasen-Tracker-Linien (AnrufModus) ausblenden — sprengen Layout */
            .anruf-phase-tracker-line { display:none !important; }

            /* ErrorLogPanel auf Mobile komplett ausblenden */
            .error-log-panel { display:none !important; }

            /* Kontakt-Edit-Grid auf Mobile 1-spaltig */
            .kontakt-edit-grid { grid-template-columns:1fr !important; }

            /* ===== ANGEBOTS-MAIL EDITOR (Mobile) ===== */
            .angebot-editor-overlay { padding:0 !important; }
            .angebot-editor-modal {
                width:100% !important; height:100% !important;
                max-height:100vh !important; border-radius:0 !important;
                border:none !important;
            }
            /* Editor + Preview vertikal stacken statt nebeneinander */
            .angebot-editor-body { flex-direction:column !important; }
            .angebot-editor-source {
                border-right:none !important;
                border-bottom:1px solid var(--border-color) !important;
                min-height:40vh; max-height:50vh;
            }
            .angebot-editor-preview { min-height:30vh; }

            /* ===== EMAIL POSTEINGANG ===== */
            .email-inbox-page {
                height:auto !important; min-height:calc(100vh - 90px) !important;
                padding:14px 12px;
            }
            .email-inbox-topbar { flex-wrap:wrap !important; gap:8px !important; }
            .email-inbox-topbar h2 { font-size:16px !important; }
            .email-inbox-topbar > span { width:100%; font-size:11px !important; }
            .email-inbox-search { width:100% !important; flex:1 1 100%; }
            .email-inbox-split { flex-direction:column !important; }
            .email-inbox-labels {
                width:100% !important; max-width:100% !important;
                max-height:140px;
                overflow-y:auto !important; overflow-x:hidden !important;
                border-right:none !important;
                border-bottom:1px solid var(--border-color) !important;
                padding-right:0 !important;
                padding-bottom:8px !important;
                margin-bottom:10px !important;
            }
            .email-inbox-content { padding-left:0 !important; }

            /* Page-Container generell auf mobile entkrampfen (Inbox + andere die page-container nutzen) */
            .page-container { padding:14px 12px !important; }
            .page-container[style*="100vh"] {
                height:auto !important; min-height:calc(100vh - 80px) !important;
            }

            /* Page-Header: Platz fuer Hamburger oben links */
            .page-header { padding:14px 18px 14px 64px; flex-wrap:wrap; gap:8px; position:relative; }
            .page-actions { flex-wrap:wrap; gap:6px; }
            .page-body { padding:18px; }

            /* Detail-Splits einspaltig */
            .detail-grid { grid-template-columns:1fr; }

            /* Form-Row: 3-spaltig wird 2-spaltig */
            .form-row-3 { grid-template-columns:1fr 1fr; }
            .source-grid { grid-template-columns:repeat(3, 1fr); }

            /* Tabellen scrollen horizontal */
            .table-wrap, .card .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

            /* Modal etwas schlanker */
            .modal { width:96%; max-height:92vh; }
            .modal-lg { max-width:96%; }

            /* iOS-Zoom-Prevention auf ALLEN Inputs (Safari zoomt rein wenn font-size < 16px) */
            input, select, textarea,
            .form-input, .form-input-select, select.form-input, textarea.form-input,
            input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], input[type="time"], input[type="url"] {
                font-size:16px !important;
            }

            /* Notif-Panel passt sich an */
            .notif-panel { right:10px; width:min(340px, calc(100vw - 20px)); }

            /* Touch-Tap-Targets */
            .btn { min-height:40px; }
            .btn-sm { min-height:32px; }
        }

        /* Mobile only: kompakter, alle Grids 1-spaltig */
        @media (max-width: 640px) {
            .sidebar { width:min(86vw, 320px); }

            /* Page-Header noch kompakter */
            .page-header { padding:12px 14px 12px 60px; }
            .page-title { font-size:16px; }
            .page-subtitle { font-size:11px; }
            .page-actions { width:100%; }
            .page-actions .btn,
            .page-actions button { font-size:12px; padding:7px 11px; }
            .page-body { padding:14px 12px; }
            .page-container { padding:0 !important; }

            /* Cards weniger Innenabstand */
            .card-body { padding:12px; }
            .card-header { padding:10px 12px; font-size:13px; }

            /* Stat-Grid 1-spaltig */
            .stat-grid { grid-template-columns:1fr !important; gap:10px; margin-bottom:14px; }
            .stat-card { padding:14px; }
            .stat-value { font-size:22px; }

            /* Forms 1-spaltig */
            .form-row, .form-row-3 { grid-template-columns:1fr; gap:12px; }
            .form-group { margin-bottom:12px; }
            .source-grid { grid-template-columns:repeat(2, 1fr); }

            /* Tabellen kleiner */
            table { min-width:600px; font-size:12px; }
            th, td { padding:8px 10px !important; }

            /* Modal Vollbild */
            .modal-overlay, [class*="modal"][class*="overlay"] { padding:0 !important; }
            .modal, .modal-content {
                width:100% !important; max-width:100% !important; max-height:100vh !important;
                height:100vh; margin:0 !important; border-radius:0 !important; border:none !important;
            }
            .modal-header { padding:14px 16px; }
            .modal-body { padding:16px; }
            .modal-footer { padding:12px 16px; flex-wrap:wrap; }

            /* Tabs scrollbar */
            .tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
            .tab { white-space:nowrap; padding:9px 14px; font-size:12px; }

            /* Filter-Bar gestapelt */
            .filter-bar { flex-direction:column; align-items:stretch; }
            .filter-bar .search-input,
            .filter-bar .filter-select { width:100%; min-width:0; }

            /* Login-Box auf kleinen Screens */
            .login-box { width:100% !important; max-width:380px !important; padding:24px !important; margin:20px; }
            .login-page { padding:16px; }

            /* Zeiterfassungs-Bar weniger sperrig */
            .zeit-bar { padding:8px 12px !important; gap:8px !important; flex-wrap:wrap !important; }

            /* 2-Spalten-Grids per inline style auch auf 1-spaltig zwingen */
            div[style*="grid-template-columns"][style*="2fr 1fr"],
            div[style*="grid-template-columns"][style*="1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }

            /* Notif-Panel als Bottom-Sheet */
            .notif-panel {
                position:fixed; top:60px; right:10px; left:10px; width:auto;
                max-height:calc(100vh - 80px);
            }

            /* Sidebar-User kompakter */
            .sidebar-user { padding:10px 12px; gap:8px; }
            .user-name { font-size:12px; }
            .user-role { font-size:10px; }

            /* Kalender kompakter */
            .calendar-day { min-height:54px; padding:4px; }
            .calendar-day-num { font-size:11px; }
            .calendar-event { font-size:9px; padding:1px 4px; }
        }

        @media (max-width: 480px) {
            .page-header { padding:10px 12px 10px 56px; }
            .page-title { font-size:15px; }
            .page-body { padding:12px 10px; }
            .card-body { padding:10px; }
            th, td { padding:6px 8px !important; font-size:11px; }
            .nav-item { font-size:14px; padding:11px 12px; }
        }

        /* iOS-Body-Scroll lock wenn Drawer offen */
        body.sidebar-locked { overflow:hidden; }
        /* Kundenportal rendert ausserhalb von .app-layout/.page-body — der globale
           body-Scrollstopp (overflow:hidden, 100vh) wuerde dort jedes Scrollen blocken. */
        body.portal-page { overflow-x:hidden; overflow-y:auto; height:auto; min-height:100vh; }