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

        /* Native Controls (Select-Popups, Datepicker, Scrollbars) folgen dem
           APP-Theme, nicht dem OS — sonst rendert macOS im OS-Dunkelmodus die
           nativen <select>-Menüs dunkel, obwohl die App hell ist
           (Walter-Vorgabe 04.07.2026, gilt ÜBERALL). */
        html { color-scheme: light; }
        body.theme-dark { color-scheme: dark; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #f8fafc; color: #0f172a;
            height: 100vh; overflow: hidden;
        }

        /* ══ UI-Skalierung schmale Bildschirme (Walter 27.07.2026) ══
           McBooks / kleine GF-Laptops: die GESAMTE Oberfläche proportional
           verkleinern (wie Browser-Zoom), damit Sidebar + Listen + ⋮ +
           Detail gleichzeitig sichtbar bleiben — ohne Layout auf grossen
           Monitoren umzubauen (keine schmaleren Spalten).
           ≥1500 px Breite = 100 % (unverändert). */
        @media (max-width: 1499px) {
            html { zoom: 0.92; }
        }
        @media (max-width: 1360px) {
            html { zoom: 0.88; }
        }
        @media (max-width: 1280px) {
            html { zoom: 0.84; }
        }
        @media (max-width: 1180px) {
            html { zoom: 0.78; }
        }
        /* Fallback ohne CSS-zoom (ältere Firefox): #app transformieren.
           Chrome/Edge/Safari (McBook) nutzen zoom oben. */
        @supports not (zoom: 1) {
            @media (max-width: 1499px) {
                html { zoom: unset; }
                #app {
                    transform: scale(0.92);
                    transform-origin: top left;
                    width: calc(100% / 0.92);
                    height: calc(100vh / 0.92);
                }
            }
            @media (max-width: 1360px) {
                #app {
                    transform: scale(0.88);
                    width: calc(100% / 0.88);
                    height: calc(100vh / 0.88);
                }
            }
            @media (max-width: 1280px) {
                #app {
                    transform: scale(0.84);
                    width: calc(100% / 0.84);
                    height: calc(100vh / 0.84);
                }
            }
            @media (max-width: 1180px) {
                #app {
                    transform: scale(0.78);
                    width: calc(100% / 0.78);
                    height: calc(100vh / 0.78);
                }
            }
        }

        /* ── DARK MODE — Mittelweg mit Tiefe (Walter 18.07.2026) ──
           Karten schweben: dunklerer Grund + opaker Innen-Verlauf +
           heller Eisblau-Rim + gestaffelte Schatten. Text bleibt klar
           (kein Backdrop-Blur / keine Milchfläche). */
        body.theme-dark {
            --dlg-bg:
                radial-gradient(ellipse 78% 54% at 82% -8%, rgba(80, 165, 245, 0.22) 0%, transparent 60%),
                radial-gradient(ellipse 60% 48% at 8% 110%, rgba(40, 105, 190, 0.16) 0%, transparent 58%),
                radial-gradient(ellipse 50% 40% at 50% 50%, rgba(20, 50, 100, 0.12) 0%, transparent 70%),
                linear-gradient(160deg, #060c16 0%, #0e1a2e 45%, #081220 100%);
            --dlg-glass:        #183049;
            --dlg-glass-strong: #1d3652;
            --dlg-glass-field:  #0d1a2c;
            --dlg-glass-border: rgba(165, 215, 255, 0.48);
            --dlg-glass-inner:  rgba(210, 235, 255, 0.20);
            /* Opak — stärkerer Innen-Verlauf = Volumen */
            --dlg-fill:         #183049;
            --dlg-fill-strong:  #1d3652;
            --dlg-fill-field:   #0d1a2c;
            --dlg-fill-grad:    linear-gradient(160deg,
                                    #243f5e 0%,
                                    #1a334f 38%,
                                    #14283f 72%,
                                    #101f34 100%);
            /* Rim: hell oben-links, dunkler unten — klarer Glasrand */
            --dlg-rim:
                linear-gradient(135deg,
                    rgba(240, 250, 255, 0.98) 0%,
                    rgba(140, 195, 250, 0.55) 28%,
                    rgba(60, 120, 195, 0.28) 58%,
                    rgba(180, 225, 255, 0.82) 100%);
            --dlg-rim-soft:
                linear-gradient(135deg,
                    rgba(205, 230, 255, 0.62) 0%,
                    rgba(80, 140, 210, 0.24) 100%);
            --dlg-rim-hot:
                linear-gradient(135deg,
                    rgba(245, 252, 255, 1) 0%,
                    rgba(130, 195, 255, 0.58) 48%,
                    rgba(185, 230, 255, 0.88) 100%);
            /* Gestaffelte Tiefe: Ring → Ambient → Drop → Bevel */
            --dlg-shadow:
                0 0 0 1px rgba(170, 220, 255, 0.28),
                0 0 22px rgba(70, 150, 235, 0.22),
                0 4px 10px rgba(0, 4, 14, 0.35),
                0 18px 40px rgba(0, 4, 14, 0.55),
                inset 0 1px 0 rgba(235, 248, 255, 0.32),
                inset 0 -1px 0 rgba(0, 8, 24, 0.35);
            --dlg-text-strong:  #ffffff;
            --dlg-text:         #e8f0fa;
            --dlg-text-soft:    #a9bfd8;
            --dlg-text-muted:   #8ba1ba;
            --dlg-active:       rgba(45, 105, 180, 0.50);
            --dlg-active-text:  #ffffff;
            --dlg-active-border: rgba(155, 210, 255, 0.52);

            background: var(--dlg-bg);
            background-attachment: fixed;
            color: var(--dlg-text);
        }
        /* Karten: opaker Innen-Verlauf + klarer Rim — kein Blur */
        body.theme-dark .dlg-rim,
        body.theme-dark .kd-day,
        body.theme-dark .iv-modal-box,
        body.theme-dark .card,
        body.theme-dark .emp-detail-panel,
        body.theme-dark .emp-list,
        body.theme-dark .emp-list-panel,
        body.theme-dark .lohn-emp-list,
        body.theme-dark .ov-card,
        body.theme-dark .admin-card,
        body.theme-dark .hr-card,
        body.theme-dark .stat-card,
        body.theme-dark .ktg-side-card,
        body.theme-dark .dok-list,
        body.theme-dark .dok-tree,
        body.theme-dark .emp-family-card,
        body.theme-dark .vf-card,
        body.theme-dark .vf-empty,
        body.theme-dark .fam-tile,
        body.theme-dark .mw-section,
        body.theme-dark .liquid-role-el,
        body.theme-dark .ma-modal-box,
        body.theme-dark .family-modal-box,
        body.theme-dark .stamp-modal,
        body.theme-dark .modal-content {
            border: 1px solid transparent !important;
            background-color: var(--dlg-fill) !important;
            background-image: var(--dlg-fill-grad), var(--dlg-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow: var(--dlg-shadow) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            color: var(--dlg-text) !important;
        }
        body.theme-dark .main {
            background: var(--dlg-bg);
            background-attachment: fixed;
        }
        body.theme-dark .page-head {
            background: transparent;
            border-color: var(--dlg-glass-border);
        }
        body.theme-dark .page-title { color: var(--dlg-text-strong); }
        body.theme-dark .page-sub   { color: var(--dlg-text-soft); }
        body.theme-dark .page-body  { color: var(--dlg-text); }
        body.theme-dark .emp-list-search { border-color: var(--dlg-glass-border) !important; }
        body.theme-dark .emp-list-item { border-bottom-color: rgba(255,255,255,.04) !important; color: var(--dlg-text) !important; }
        body.theme-dark .emp-list-name { color: var(--dlg-text-strong) !important; }
        body.theme-dark .emp-list-nr { color: var(--dlg-text-soft) !important; }
        body.theme-dark .emp-detail-header,
        body.theme-dark .emp-detail-tabs {
            background: transparent !important;
            border-color: rgba(122,145,165,.16) !important;
        }
        body.theme-dark .emp-detail-name,
        body.theme-dark .emp-list-item-name,
        body.theme-dark .lohn-emp-name { color: var(--dlg-text-strong) !important; }
        body.theme-dark .emp-detail-meta,
        body.theme-dark .emp-list-item-nr,
        body.theme-dark .lohn-emp-nr { color: var(--dlg-text-soft) !important; }
        body.theme-dark .emp-list-item:hover { background: rgba(255,255,255,.06) !important; }
        body.theme-dark .emp-list-item.active,
        body.theme-dark .emp-list-item.lohn-emp-active {
            background: var(--dlg-active) !important;
            border-left: 3px solid rgba(126,167,210,.55) !important;
            box-shadow: inset 0 1px 0 var(--dlg-glass-inner);
        }
        body.theme-dark .emp-tab { color: var(--dlg-text-soft) !important; }
        body.theme-dark .emp-tab.active { color: var(--dlg-active-text) !important; }

        /* Primär-Buttons = Kohle-Pille (Walter-Spec). Active-Nav/Filter getrennt. */
        body.theme-dark button.btn-primary {
            background: #3f3f3f !important;
            color: #ffffff !important;
            border-color: #1a1a1a !important;
        }
        body.theme-dark .filter-active {
            border: 1px solid rgba(120, 175, 235, 0.36) !important;
            background: rgba(40, 90, 160, 0.45) !important;
            background-image: none !important;
            color: #ffffff !important;
        }

        /* Werte und Labels in der Detail-Maske */
        body.theme-dark .emp-field { background: transparent !important; border: none !important; }
        body.theme-dark .emp-field-grid,
        body.theme-dark .emp-field-grid-2,
        body.theme-dark .emp-field-grid-3 {
            background: rgba(255,255,255,.03) !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .emp-field-grid.emp-grid-attached,
        body.theme-dark .emp-field-grid-2.emp-grid-attached,
        body.theme-dark .emp-field-grid-3.emp-grid-attached {
            border-top: none !important;
        }
        body.theme-dark .emp-field-value {
            color: #ffffff !important;
            border: 1px solid rgba(120, 170, 230, 0.18) !important;
            background: rgba(8, 18, 34, 0.55) !important;
            background-image: none !important;
            box-shadow: none !important;
        }
        body.theme-dark .emp-field-value:hover {
            border-color: rgba(140, 195, 245, 0.32) !important;
            background: rgba(10, 22, 40, 0.70) !important;
        }
        body.theme-dark .emp-field-value.empty {
            color: var(--dlg-text-muted) !important;
            background: rgba(60,100,160,.10) !important;
        }
        body.theme-dark .emp-field-label { color: var(--dlg-text-muted) !important; }
        body.theme-dark .emp-field-hint  { color: var(--dlg-text-muted) !important; }
        body.theme-dark .emp-section-title {
            color: var(--dlg-text-strong) !important;
            border-left-color: rgba(126,167,210,.45) !important;
            background: linear-gradient(to right, rgba(72,100,132,.22) 0%, transparent 72%) !important;
        }

        /* Inputs — etwas klarerer Rand als flach, aber ohne Glow */
        body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
        body.theme-dark select,
        body.theme-dark textarea,
        body.theme-dark .ef-input,
        body.theme-dark .form-control,
        body.theme-dark .f-input,
        body.theme-dark .f-select,
        body.theme-dark .ov-softin,
        body.theme-dark .emp-search-input,
        body.theme-dark .lqsel-btn {
            border: 1px solid rgba(130, 185, 240, 0.30) !important;
            background: rgba(8, 18, 34, 0.88) !important;
            background-image: none !important;
            color: #ffffff !important;
            box-shadow: inset 0 1px 0 rgba(180, 210, 245, 0.06) !important;
        }
        body.theme-dark input:not([type="checkbox"]):not([type="radio"]):focus,
        body.theme-dark select:focus,
        body.theme-dark textarea:focus,
        body.theme-dark .ef-input:focus,
        body.theme-dark .ov-softin:focus,
        body.theme-dark .lqsel-btn:focus {
            border-color: rgba(155, 205, 255, 0.52) !important;
            background: rgba(10, 22, 40, 0.95) !important;
            box-shadow: 0 0 0 2px rgba(80, 140, 210, 0.16) !important;
        }
        body.theme-dark input::placeholder,
        body.theme-dark textarea::placeholder { color: var(--dlg-text-muted); }

        /* Tabellen — Glas-Header statt opaker Platte */
        body.theme-dark table,
        body.theme-dark .tbl-wrap table { color: var(--dlg-text); }
        body.theme-dark th {
            background: rgba(255,255,255,.04) !important;
            color: var(--dlg-text-soft) !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark td { border-color: rgba(122,145,165,.14) !important; }
        /* Globales Dark-Mode-Hover-Sicherheitsnetz (Walter 28.06.2026) */
        body.theme-dark tbody tr:hover,
        body.theme-dark tr:hover td { background: rgba(125,160,205,.12) !important; }
        body.theme-dark #stempelFilterRow {
            background: #161e2a !important;
            box-shadow: inset 0 -1px 0 var(--dlg-glass-border) !important;
        }

        /* ── Mindestlöhne (L-GAV) — kompakt, damit alles auf eine Seite passt ── */
        .mw-section { margin-bottom: 10px; overflow: hidden; }
        .mw-section-head {
            padding: 7px 14px; font-weight: 600; font-size: 12.5px; color: #0f172a;
            background: #f8fafc; border-bottom: 1px solid #e2e8f0;
        }
        .mw-section-head .mw-unit { font-weight: 400; font-size: 11.5px; color: #94a3b8; margin-left: 7px; }
        .mw-section-head.mw-youth { background: #fffbeb; border-bottom-color: #fde68a; color: #92400e; }
        .mw-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
        .mw-table th {
            padding: 5px 12px; text-align: right; font-weight: 600; font-size: 10px;
            color: #64748b; border-bottom: 1px solid #e2e8f0; white-space: nowrap; line-height: 1.15;
        }
        .mw-table th.mw-th-row { text-align: left; }
        .mw-table th .mw-sub { display: block; font-weight: 400; font-size: 9px; color: #cbd5e1; }
        .mw-table td { padding: 4px 12px; border-bottom: 1px solid #f1f5f9; }
        .mw-table tbody tr:last-child td { border-bottom: none; }
        .mw-table tbody tr:hover { background: #f8fafc; }
        .mw-row-label { color: #1e293b; font-weight: 500; white-space: nowrap; }
        .mw-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #0f172a; cursor: pointer; }
        .mw-amount span { display: inline-block; min-width: 56px; padding: 2px 8px; border-radius: 6px; transition: background .12s, color .12s, box-shadow .12s; }
        .mw-amount:hover span { background: #f6f3ee; color: #6b7280; box-shadow: inset 0 0 0 1px #e5e0d6; }
        .mw-empty { text-align: right; color: #cbd5e1; }
        .mw-badge { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; margin-left: 7px; letter-spacing: .02em; vertical-align: 1px; }
        .mw-muted { color: #64748b; }

        /* Geplante Sätze als eigene Spalte NEBEN der aktuellen (Variante B) */
        .mw-scroll { overflow-x: auto; }
        .mw-lock { font-size: 10px; opacity: .65; margin-right: 2px; }
        .mw-edu-top { text-align: center; }
        .mw-sub-cur { font-weight: 600; font-size: 9px; color: #94a3b8; }
        .mw-sub-fut { font-weight: 700; font-size: 9px; color: #6d28d9; white-space: nowrap; }
        /* Spalten-Tönung der Planungs-Spalte (Kopf + Zellen) */
        .mw-table th.mw-fut-col, .mw-table td.mw-fut-col { background: #f5f3ff; }
        .mw-table tbody tr:hover td.mw-fut-col { background: #ede9fe; }
        /* aktueller Satz: gesperrt (im Lohnlauf verwendet) → hellgrau, read-only,
           kein Schloss-Icon mehr (Spalte ist reine Referenz) */
        .mw-amount.mw-cur-ro { cursor: default; color: #94a3b8; }
        .mw-amount.mw-cur-ro:hover span { background: none; color: #94a3b8; box-shadow: none; }
        /* gesperrte Zeile in der Versions-Tabelle (mit Schloss) → kein Hover-Edit */
        .mw-amount.mw-locked { cursor: default; }
        .mw-amount.mw-locked:hover span { background: none; color: #0f172a; box-shadow: none; }
        /* geplanter Betrag: GRÜN = geändert, ORANGE = bestätigt&unverändert,
           ROT = nicht bestätigt, „–" = keine Folge-Version */
        .mw-amount.mw-fut-changed  span { color: #047857; font-weight: 700; }
        .mw-amount.mw-fut-reviewed span { color: #d97706; font-weight: 600; }
        .mw-amount.mw-fut-same     span { color: #dc2626; }
        .mw-amount.mw-fut-none { cursor: default; color: #cbd5e1; }
        .mw-amount.mw-fut-none:hover span { background: none; color: #cbd5e1; box-shadow: none; }
        .mw-planhint { font-size: 11.5px; color: #6366f1; background: #f1efe9; border-bottom: 1px solid #e0e7ff; padding: 5px 12px; border-radius: 8px; }

        body.theme-dark .mw-section-head { background: var(--dlg-glass); color: #f1f5f9; border-color: var(--dlg-glass-border); }
        body.theme-dark .mw-section-head.mw-youth { background: #2a2410; color: #fcd34d; border-bottom-color: #57430f; }
        body.theme-dark .mw-table th { color: #94a3b8; border-color: var(--dlg-glass-border); }
        body.theme-dark .mw-table th .mw-sub { color: #64748b; }
        body.theme-dark .mw-table td { border-color: var(--dlg-glass-border); }
        body.theme-dark .mw-table tbody tr:hover { background: var(--dlg-glass); }
        body.theme-dark .mw-row-label { color: #e2e8f0; }
        body.theme-dark .mw-amount { color: #f1f5f9; }
        body.theme-dark .mw-amount:hover span { background: #5a5348; color: #fff; box-shadow: inset 0 0 0 1px #3f3f3f; }
        body.theme-dark .mw-empty { color: #475569; }
        body.theme-dark .mw-muted { color: #94a3b8; }
        body.theme-dark .mw-sub-cur { color: #64748b; }
        body.theme-dark .mw-sub-fut { color: #c4b5fd; }
        body.theme-dark .mw-table th.mw-fut-col, body.theme-dark .mw-table td.mw-fut-col { background: #211c33; }
        body.theme-dark .mw-table tbody tr:hover td.mw-fut-col { background: #2d2547; }
        body.theme-dark .mw-amount.mw-locked:hover span { background: none; color: #f1f5f9; box-shadow: none; }
        body.theme-dark .mw-amount.mw-fut-changed  span { color: #34d399; }
        body.theme-dark .mw-amount.mw-fut-reviewed span { color: #fbbf24; }
        body.theme-dark .mw-amount.mw-fut-same     span { color: #f87171; }
        body.theme-dark .mw-amount.mw-fut-none, body.theme-dark .mw-amount.mw-fut-none:hover span { color: #475569; background: none; box-shadow: none; }
        body.theme-dark .mw-planhint { color: #a5b4fc; background: var(--dlg-glass); border-bottom-color: var(--dlg-glass-border); }
        /* ─── easy@work API page ─── */
        .eaw-result { border-radius:8px; padding:12px; margin-bottom:18px; font-size:13px; border:1px solid; }
        .eaw-result-ok  { background:#ecfdf5; border-color:#86efac; color:#064e3b; }
        .eaw-result-err { background:#fef2f2; border-color:#fca5a5; color:#7f1d1d; }
        .eaw-result-title { font-weight:600; margin-bottom:6px; }
        .eaw-result-msg { font-size:12px; }
        .eaw-result-table { font-size:12px; border-collapse:collapse; width:100%; margin-top:6px; }
        .eaw-result-table th { background:#d1fae5; padding:4px 10px; text-align:left; color:#064e3b; }
        .eaw-result-table td { padding:4px 10px; }
        .eaw-result-table .eaw-empty { color:#64748b; padding:6px; }
        body.theme-dark .eaw-result-ok  { background:#0b2920; border-color:#065f46; color:#a7f3d0; }
        body.theme-dark .eaw-result-err { background:#2a0e0e; border-color:#7f1d1d; color:#fecaca; }
        body.theme-dark .eaw-result-table th { background:#064e3b; color:#a7f3d0; }
        body.theme-dark .eaw-result-table td { color:#e2e8f0; }
        body.theme-dark .eaw-result-table .eaw-empty { color:#94a3b8; }
        .eaw-map-table { width:100%; border-collapse:collapse; font-size:13px; }
        .eaw-map-table thead tr { background:#f1f5f9; }
        .eaw-map-table th { padding:8px 10px; text-align:left; color:#0f172a; font-weight:600; }
        .eaw-map-table td { padding:8px 10px; border-bottom:1px solid #e2e8f0; color:#0f172a; vertical-align:middle; }
        .eaw-map-table tbody tr:hover td { background:#f8fafc; }
        .eaw-map-table td.eaw-actions { text-align:right; white-space:nowrap; }
        .eaw-map-table select { padding:5px 8px; border:1px solid #cbd5e1; border-radius:6px; font-size:13px; min-width:280px; background:#fff; color:#0f172a; }
        body.theme-dark .eaw-map-table thead tr { background: var(--dlg-glass); }
        body.theme-dark .eaw-map-table th { color:#f1f5f9; }
        body.theme-dark .eaw-map-table td { color:#f1f5f9; border-bottom-color: var(--dlg-glass-border); }
        body.theme-dark .eaw-map-table tbody tr:hover td { background: var(--dlg-glass); }
        body.theme-dark .eaw-map-table select { background: var(--dlg-glass-field); color:#f1f5f9; border-color: var(--dlg-glass-border); }
        .eaw-input { padding:5px 8px; border:1px solid #cbd5e1; border-radius:6px; font-size:13px; background:#fff; color:#0f172a; color-scheme: light; }
        body.theme-dark .eaw-input { background: var(--dlg-glass-field); color:#f1f5f9; border-color: var(--dlg-glass-border); color-scheme: dark; }

        /* Wiederverwendbares helles Custom-Dropdown (ersetzt native <select>,
           deren OS-Popup im macOS-Dunkelmodus dunkel rendert). Helfer: lightSelect().
           (Walter-Vorgabe 05.07.2026) */
        .ls2 { position: relative; display: inline-block; }
        .ls2-btn {
            width: 100%; min-width: 200px; padding: 6px 10px;
            background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
            color: #0f172a; font-size: 13px; font-family: inherit; cursor: pointer;
            display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
        }
        .ls2-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ls2-btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #64748b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .ls2-opts {
            position: fixed; z-index: 5000; min-width: 240px;
            background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 5px;
            max-height: min(60vh, 420px); overflow-y: auto;
            box-shadow: 0 20px 50px rgba(15,23,42,0.18); display: none;
        }
        .ls2.open .ls2-opts { display: block; }
        .ls2-opt {
            width: 100%; display: flex; align-items: center; gap: 8px;
            padding: 8px 9px; border: none; background: transparent; border-radius: 8px;
            color: #334155; font-size: 13px; font-family: inherit; cursor: pointer; text-align: left; white-space: nowrap;
        }
        .ls2-opt:hover { background: #f1f5f9; }
        .ls2-opt.active { background: #eef2f7; font-weight: 700; color: #0f172a; }
        .ls2-chk { width: 12px; flex: none; color: #0f172a; }
        body.theme-dark .ls2-btn { background: var(--dlg-glass-field); color:#f1f5f9; border-color: var(--dlg-glass-border); }
        body.theme-dark .ls2-opts { background:#111827; border-color:#374151; }
        body.theme-dark .ls2-opt { color:#cbd5e1; }
        body.theme-dark .ls2-opt:hover { background:#1f2937; }
        body.theme-dark .ls2-opt.active { background:#374151; color:#f1f5f9; }
        body.theme-dark .ls2-chk { color:#f1f5f9; }
        .eaw-sync-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:10px; }
        .eaw-sync-table th { background:#f1f5f9; padding:6px 8px; text-align:left; color:#0f172a; font-weight:600; }
        .eaw-sync-table td { padding:5px 8px; border-bottom:1px solid #e2e8f0; color:#0f172a; vertical-align:top; }
        body.theme-dark .eaw-sync-table th { background: var(--dlg-glass); color:#f1f5f9; }
        body.theme-dark .eaw-sync-table td { color:#f1f5f9; border-bottom-color: var(--dlg-glass-border); }
        .eaw-pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
        .eaw-pill-new        { background:#dcfce7; color:#166534; }
        .eaw-pill-duplicate  { background:#fef9c3; color:#854d0e; }
        .eaw-pill-unmatched  { background:#fee2e2; color:#991b1b; }
        .eaw-pill-soft       { background:#e2e8f0; color:#475569; }
        .eaw-pill-invalid    { background:#fee2e2; color:#991b1b; }
        body.theme-dark .eaw-pill-new       { background:#064e3b; color:#a7f3d0; }
        body.theme-dark .eaw-pill-duplicate { background:#422006; color:#fde68a; }
        body.theme-dark .eaw-pill-unmatched { background:#450a0a; color:#fecaca; }
        body.theme-dark .eaw-pill-soft     { background: var(--dlg-glass-strong); color:#e2e8f0; }
        body.theme-dark .eaw-pill-invalid  { background:#450a0a; color:#fecaca; }
        .eaw-sync-summary { display:flex; gap:14px; flex-wrap:wrap; margin:10px 0; font-size:13px; }
        .eaw-sync-summary span { background:#f1f5f9; padding:4px 10px; border-radius:6px; color:#0f172a; }
        body.theme-dark .eaw-sync-summary span { background: var(--dlg-glass); color:#f1f5f9; }

        /* Search-Box, Filter, etc. — falls nicht durch input-Selektor abgedeckt */
        body.theme-dark .emp-search,
        body.theme-dark .lohn-search { background: var(--dlg-glass-strong) !important; color: #f1f5f9 !important; border-color: var(--dlg-glass-border) !important; }

        /* Modals — dunkles Glas + Verlaufs-Rand (Rim kommt über .modal-content/.stamp-modal) */
        body.theme-dark .modal {
            background: transparent !important;
        }
        body.theme-dark [class*="modal"] > [class*="content"]:not(.ls-wrap) {
            border: 1px solid transparent !important;
            background-image: var(--dlg-fill-strong), var(--dlg-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            color: var(--dlg-text) !important;
            box-shadow: var(--dlg-shadow), 0 28px 70px rgba(0,10,40,.50) !important;
        }
        body.theme-dark .modal-hd {
            background: rgba(12, 22, 34, 0.55) !important;
            border-bottom: 1px solid rgba(140,200,255,.28) !important;
            color: var(--dlg-text-strong) !important;
        }

        /* Hinweisboxen — ruhiges Glas, kein knalliges Blau */
        body.theme-dark .alert,
        body.theme-dark .info-box,
        body.theme-dark .compliance-box {
            background: rgba(56, 100, 140, 0.22) !important;
            color: var(--dlg-text) !important;
            border-color: rgba(126,167,210,.28) !important;
        }

        body.theme-dark .hr-card-title  { color: var(--dlg-text-strong) !important; }
        body.theme-dark .hr-card-status { color: var(--dlg-text-muted) !important; }
        body.theme-dark .hr-card ul     { color: var(--dlg-text) !important; }
        body.theme-dark .hr-card ul li::marker { color: var(--dlg-text-muted) !important; }
        body.theme-dark .hr-card b      { color: var(--dlg-text-strong) !important; }

        /* Geplant vs. realisiert im HR-Hub (Walter 09.07.2026) — Dark-Pendants
           zu .hr-plan/.hr-done/.hr-idea (Light-Regeln im page-lokalen Style). */
        body.theme-dark .hr-card.hr-plan { background: #172032 !important; border-color: #22304a !important; }
        body.theme-dark .hr-card.hr-plan .hr-card-icon { filter: grayscale(1); opacity: 0.3; }
        body.theme-dark .hr-card.hr-plan .hr-card-title  { color: #45536b !important; }
        body.theme-dark .hr-card.hr-plan .hr-card-status { color: #3a475c !important; }
        body.theme-dark .hr-card.hr-plan ul,
        body.theme-dark .hr-card.hr-plan ul li,
        body.theme-dark .hr-card.hr-plan b,
        body.theme-dark .hr-card.hr-plan ul li span { color: #45536b !important; }
        body.theme-dark .hr-card ul li.hr-done,
        body.theme-dark .hr-card ul li.hr-done b { color: #e2e8f0 !important; }
        body.theme-dark .hr-card ul li.hr-done span { color: #4ade80 !important; }
        body.theme-dark .hr-card ul li.hr-idea,
        body.theme-dark .hr-card ul li.hr-idea b,
        body.theme-dark .hr-card ul li.hr-idea span { color: #45536b !important; }

        /* Admin-Hub-Cards — Glas (wie hr-card) */
        body.theme-dark .admin-card {
            background: var(--dlg-glass) !important;
            border-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text) !important;
            box-shadow: var(--dlg-shadow) !important;
            backdrop-filter: blur(16px) saturate(120%);
            -webkit-backdrop-filter: blur(16px) saturate(120%);
        }
        body.theme-dark .admin-card-title { color: var(--dlg-text-strong) !important; }
        body.theme-dark .admin-card-desc  { color: var(--dlg-text-soft) !important; }
        body.theme-dark .admin-card:hover {
            border-color: rgba(126,167,210,.40) !important;
            box-shadow: 0 16px 40px rgba(0,0,0,.32), inset 0 1px 0 var(--dlg-glass-inner) !important;
        }
        body.theme-dark .stat-card {
            background: var(--dlg-glass) !important;
            border-color: var(--dlg-glass-border) !important;
            box-shadow: var(--dlg-shadow) !important;
        }

        /* ── DARK MODE — STUFE 3: Inline-Styles + Komponenten-Polish ──
           Das HR-System hat tausende Inline-Styles (background:white,
           #f8fafc, #fff). Da !important auf Klassen-Selektoren NICHT
           gegen Inline-Styles gewinnt, brauchen wir Attribut-Selektoren
           [style*="..."]. Damit bekommen wir auch Modals, Vorschau-
           Frames, SV-/LP-Forms, QST-Anmeldungs-Dialog, etc. dunkel.   */

        /* Inline weiß/hellgrau → dunkel.
           CSS-Attribut-Selektoren brauchen exakte Substring-Matches.
           `background:#fff` in einem Inline-Style endet entweder auf
           `;` (weitere CSS-Props folgen), Leerzeichen (Whitespace) oder
           direkt vor `"` (Ende des Attributs). Letzteres fangen wir
           über $= ab — ohne diese Variante bleibt eine Tabelle wie
           `<table style="...;background:#fff">` im Dark Mode weiß und
           der ganze Inhalt unsichtbar. */
        body.theme-dark [style*="background:white"],
        body.theme-dark [style*="background: white"],
        body.theme-dark [style*="background:#fff;"],
        body.theme-dark [style*="background: #fff;"],
        body.theme-dark [style*="background:#fff "],
        body.theme-dark [style*="background: #fff "],
        body.theme-dark [style$="background:#fff"],
        body.theme-dark [style$="background: #fff"],
        body.theme-dark [style*="background:#ffffff"],
        body.theme-dark [style*="background: #ffffff"] {
            background: rgba(48, 62, 82, 0.92) !important;
            color: #e8eef5 !important;
        }
        body.theme-dark [style*="background:#f8fafc"],
        body.theme-dark [style*="background: #f8fafc"],
        body.theme-dark [style*="background:#fafafa"],
        body.theme-dark [style*="background: #fafafa"],
        body.theme-dark [style*="background:#f1f5f9"],
        body.theme-dark [style*="background: #f1f5f9"] {
            background: rgba(36, 48, 64, 0.90) !important;
            color: #e8eef5 !important;
        }
        /* iframes mit explizit weißem Hintergrund (PDF-Vorschau) bleiben
           weiß — das PDF selbst ist auch weiß, das passt ästhetisch. */
        body.theme-dark iframe[style*="background:white"],
        body.theme-dark iframe[style*="background: white"] {
            background: white !important;
        }

        /* Inline-Border-Farben in Modals/Forms */
        body.theme-dark [style*="border:1px solid #e2e8f0"],
        body.theme-dark [style*="border: 1px solid #e2e8f0"],
        body.theme-dark [style*="border:1.5px solid #e2e8f0"],
        body.theme-dark [style*="border-top:1px solid #e2e8f0"],
        body.theme-dark [style*="border-bottom:1px solid #e2e8f0"] {
            border-color: var(--dlg-glass-border) !important;
        }
        /* Inline-Text-Farben dunkel auf #475569/#64748b → heller.
           Bewusst hell genug damit auch im Augenwinkel zwischen
           kräftigen Akzenten (rot, grün, blau) keine "matschige Mitte"
           entsteht. Werte sind primärer Inhalt — `#e2e8f0` statt
           `#cbd5e1`, sonst wirken Tabellen-Werte zu blass. */
        body.theme-dark [style*="color:#475569"],
        body.theme-dark [style*="color: #475569"] { color: #e2e8f0 !important; }
        body.theme-dark [style*="color:#64748b"],
        body.theme-dark [style*="color: #64748b"] { color: #cbd5e1 !important; }
        body.theme-dark [style*="color:#0f172a"],
        body.theme-dark [style*="color: #0f172a"] { color: #f1f5f9 !important; }
        body.theme-dark [style*="color:#1e293b"],
        body.theme-dark [style*="color: #1e293b"] { color: #f1f5f9 !important; }

        /* Stat-Cards (Dashboard) — Glas */
        body.theme-dark .stat-card {
            background: var(--dlg-glass) !important;
            border-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text) !important;
            box-shadow: var(--dlg-shadow) !important;
            backdrop-filter: blur(16px) saturate(120%);
            -webkit-backdrop-filter: blur(16px) saturate(120%);
        }
        body.theme-dark .stat-label { color: var(--dlg-text-soft) !important; }
        body.theme-dark .stat-value { color: var(--dlg-text-strong) !important; }
        body.theme-dark .stat-hint  { color: var(--dlg-text-muted) !important; }

        /* Buttons — leichter Eisblau-Rand, ohne Glow */
        body.theme-dark .btn-outline,
        body.theme-dark .btn-secondary,
        body.theme-dark .btn-emp-add,
        body.theme-dark .ov-hbtn:not(.ov-hbtn-primary),
        body.theme-dark .emp-contract-btn {
            border: 1px solid transparent !important;
            background-image: linear-gradient(rgba(16,30,50,.78), rgba(16,30,50,.78)), var(--dlg-rim-soft) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            color: var(--dlg-text) !important;
            box-shadow: none !important;
        }
        body.theme-dark .btn-outline:hover,
        body.theme-dark .btn-secondary:hover,
        body.theme-dark .btn-emp-add:hover,
        body.theme-dark .ov-hbtn:not(.ov-hbtn-primary):hover,
        body.theme-dark .emp-contract-btn:hover {
            background-image: linear-gradient(rgba(24,42,68,.88), rgba(24,42,68,.88)), var(--dlg-rim) !important;
            color: #ffffff !important;
        }

        /* Dokumenten-Liste / Tabelle / Menu — Glas */
        body.theme-dark .dok-list {
            background: var(--dlg-glass) !important;
            border-color: var(--dlg-glass-border) !important;
            box-shadow: var(--dlg-shadow) !important;
        }
        body.theme-dark .dok-list-header,
        body.theme-dark .dok-list-empty {
            background: rgba(255,255,255,.03) !important;
            border-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text-soft) !important;
        }
        body.theme-dark .dok-table thead th {
            background: rgba(255,255,255,.04) !important;
            color: var(--dlg-text-soft) !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .dok-table tbody td {
            border-color: rgba(122,145,165,.14) !important;
            color: var(--dlg-text) !important;
        }
        body.theme-dark .dok-table tbody tr:hover td { background: rgba(125,160,205,.10) !important; }
        body.theme-dark .dok-date-cell { color: var(--dlg-text) !important; }
        body.theme-dark .dok-table thead th.dok-sort-th:hover {
            background: rgba(255,255,255,.07) !important;
            color: var(--dlg-active-text) !important;
        }
        body.theme-dark .dok-menu-btn {
            background: rgba(255,255,255,.06) !important;
            border-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text) !important;
        }
        body.theme-dark .dok-menu-btn:hover { background: rgba(255,255,255,.12) !important; }
        body.theme-dark .dok-menu {
            background: var(--dlg-glass) !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .dok-menu-item {
            background: transparent !important;
            color: #e2e8f0 !important;
        }
        body.theme-dark .dok-menu-item:hover { background: var(--dlg-glass-strong) !important; }
        body.theme-dark .dok-menu-item.danger { color: #fca5a5 !important; border-top-color: var(--dlg-glass-border) !important; }
        body.theme-dark .dok-menu-item.danger:hover { background: #450a0a !important; }
        body.theme-dark .dok-cat-pill {
            background: var(--dlg-glass-strong) !important;
            color: #cbd5e1 !important;
            border-color: var(--dlg-glass-border) !important;
        }
        /* Kategorie-Farben Dark Mode — gleiche Hue wie im Light Mode,
           aber mit dunklem Hintergrund + heller Schrift. */
        body.theme-dark .dok-cat-pill.cat-persoenliche-angaben     { background: var(--dlg-active) !important; color:#d0c8b8 !important; }
        body.theme-dark .dok-cat-pill.cat-vertragsunterlagen       { background:#064e3b !important; color:#6ee7b7 !important; }
        body.theme-dark .dok-cat-pill.cat-lohn-arbeitszeit         { background:#422006 !important; color:#fcd34d !important; }
        body.theme-dark .dok-cat-pill.cat-absenzen                 { background:#450a0a !important; color:#fca5a5 !important; }
        body.theme-dark .dok-cat-pill.cat-mitarbeiterentwicklung   { background:#2e1065 !important; color:#c4b5fd !important; }
        body.theme-dark .dok-cat-pill.cat-aemter-behoerden         { background:#5a5348 !important; color:#d0c8b8 !important; }
        body.theme-dark .dokstruktur-row { border-color: var(--dlg-glass-border) !important; color: #e2e8f0 !important; }
        body.theme-dark .dokstruktur-row:hover { background: var(--dlg-glass-field) !important; }
        body.theme-dark .dokstruktur-row.active {
            background: var(--dlg-active) !important;
            border-left-color: #3f3f3f !important;
        }

        /* Dok-Bulk-Tabelle (Upload-Vorschau) */
        body.theme-dark .dok-bulk-table th { background: var(--dlg-glass-field) !important; color: #94a3b8 !important; }
        body.theme-dark .dok-bulk-table tr.row-warn { background: #422006 !important; }

        /* Dokumenten-Status-Pills + Ablauf-Badges:
           dunklere Hintergründe + helle Schrift, damit lesbar */
        body.theme-dark .dok-bulk-status.ok,
        body.theme-dark .dok-expiry-ok      { background: #064e3b !important; color: #6ee7b7 !important; }
        body.theme-dark .dok-bulk-status.warn,
        body.theme-dark .dok-expiry-warn    { background: #422006 !important; color: #fcd34d !important; }
        body.theme-dark .dok-bulk-status.error,
        body.theme-dark .dok-expiry-expired { background: #450a0a !important; color: #fca5a5 !important; }
        body.theme-dark .dok-bulk-status.uploading { background: var(--dlg-active) !important; color: #d0c8b8 !important; }
        body.theme-dark .dok-bulk-status.done      { background: #064e3b !important; color: #6ee7b7 !important; }
        body.theme-dark .dok-bulk-status.duplicate { background: var(--dlg-glass-strong) !important; color: #cbd5e1 !important; }

        /* Allgemeine Status-Badges (User-Liste, Filiale, Rolle) */
        body.theme-dark .badge { color: #e2e8f0; }
        body.theme-dark .b-admin     { background: #422006 !important; color: #fcd34d !important; }
        body.theme-dark .b-superuser { background: #2e1065 !important; color: #c4b5fd !important; }
        body.theme-dark .b-user      { background: #064e3b !important; color: #6ee7b7 !important; }
        body.theme-dark .b-lowuser   { background: var(--dlg-glass) !important; color: #cbd5e1 !important; }
        body.theme-dark .b-super-admin { background: #0f0a2e !important; color: #fde047 !important; }
        body.theme-dark .b-active    { background: #064e3b !important; color: #6ee7b7 !important; }
        body.theme-dark .b-inactive  { background: #450a0a !important; color: #fca5a5 !important; }
        body.theme-dark .b-code      { background: var(--dlg-active) !important; color: #d0c8b8 !important; }

        /* Stamp-Modell-Badges (FIX/FIX-M/MTP/UTP) */
        body.theme-dark .stamp-model-fix   { background: var(--dlg-active) !important; color: #d0c8b8 !important; }
        body.theme-dark .stamp-model-fix-m { background: #2e1065 !important; color: #c4b5fd !important; }
        body.theme-dark .stamp-model-mtp   { background: #064e3b !important; color: #6ee7b7 !important; }
        body.theme-dark .stamp-model-utp   { background: #422006 !important; color: #fcd34d !important; }

        /* Globale Vertragsmodell-Farben: MTP grün, FIX-M violett, UTP gelb, FIX blau */
        .model-badge-mtp, .emp-model-mtp, .sv-vertrag-badge.mtp, .stamp-model-mtp { background:#d1fae5 !important; color:#065f46 !important; }
        .model-badge-utp, .emp-model-utp, .sv-vertrag-badge.utp, .stamp-model-utp { background:#fef3c7 !important; color:#92400e !important; }
        .model-badge-fix, .emp-model-fix, .sv-vertrag-badge.fix, .stamp-model-fix { background:#ece9e2 !important; color:#6b7280 !important; }
        .model-badge-fix-m, .emp-model-fix-m, .sv-vertrag-badge.fix-m, .stamp-model-fix-m { background:#ede9fe !important; color:#6d28d9 !important; }
        body.theme-dark .model-badge-mtp, body.theme-dark .emp-model-mtp, body.theme-dark .sv-vertrag-badge.mtp, body.theme-dark .stamp-model-mtp { background:#064e3b !important; color:#6ee7b7 !important; }
        body.theme-dark .model-badge-utp, body.theme-dark .emp-model-utp, body.theme-dark .sv-vertrag-badge.utp, body.theme-dark .stamp-model-utp { background:#422006 !important; color:#fcd34d !important; }
        body.theme-dark .model-badge-fix, body.theme-dark .emp-model-fix, body.theme-dark .sv-vertrag-badge.fix, body.theme-dark .stamp-model-fix { background: var(--dlg-active) !important; color:#d0c8b8 !important; }
        body.theme-dark .model-badge-fix-m, body.theme-dark .emp-model-fix-m, body.theme-dark .sv-vertrag-badge.fix-m, body.theme-dark .stamp-model-fix-m { background:#2e1065 !important; color:#c4b5fd !important; }

        /* Stempelzeiten-Toolbar / Hours-Summary */
        body.theme-dark .stamp-toolbar,
        body.theme-dark .stamp-hours-summary {
            background: var(--dlg-glass) !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .stamp-month-label,
        body.theme-dark .stamp-hours-value,
        body.theme-dark .stamp-date { color: #f1f5f9 !important; }
        body.theme-dark .stamp-summary,
        body.theme-dark .stamp-hours-label { color: #94a3b8 !important; }
        body.theme-dark .stamp-weekday     { color: #64748b !important; }
        body.theme-dark .stamp-hours-sep   { border-color: var(--dlg-glass-border) !important; }
        body.theme-dark .btn-stamp-nav {
            background: var(--dlg-glass-strong) !important;
            color: #e2e8f0 !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .btn-stamp-nav:hover { background: rgba(255,255,255,.10) !important; }
        body.theme-dark .btn-stamp-edit {
            background: var(--dlg-glass-strong) !important;
            color: #cbd5e1 !important;
        }
        body.theme-dark .btn-stamp-edit:hover { background: rgba(255,255,255,.10) !important; }
        body.theme-dark .btn-stamp-del {
            background: #450a0a !important;
            color: #fca5a5 !important;
        }
        body.theme-dark .btn-stamp-del:hover { background: #7f1d1d !important; }

        /* Stempel-Tabelle */
        body.theme-dark .stamp-table th {
            background: var(--dlg-glass-field) !important;
            color: #94a3b8 !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .stamp-table td { border-color: var(--dlg-glass-border) !important; color: #e2e8f0 !important; }
        body.theme-dark .stamp-day-first td { border-top-color: #475569 !important; }
        body.theme-dark .stamp-abs-row td   { background: #064e3b !important; }
        body.theme-dark .stamp-row-edited td { background: #422006 !important; }
        body.theme-dark .stamp-row-edited .stamp-time,
        body.theme-dark .stamp-row-edited .stamp-hrs { color: #fcd34d !important; }

        /* Absenz-Tabelle — Glas */
        body.theme-dark .abs-table th {
            background: rgba(255,255,255,.04) !important;
            color: var(--dlg-text-soft) !important;
        }
        body.theme-dark .abs-table td {
            border-color: rgba(122,145,165,.14) !important;
            color: var(--dlg-text) !important;
        }
        body.theme-dark .abs-modal-box {
            background: var(--dlg-glass-strong) !important;
            color: var(--dlg-text) !important;
            border: 1px solid var(--dlg-glass-border) !important;
        }
        body.theme-dark .abs-hours-preview-box {
            background: rgba(255,255,255,.04) !important;
            border-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text) !important;
        }

        /* Lohn-Hours-Box (Summary unter Stempelzeiten) */
        body.theme-dark .ls-hours-box {
            background: var(--dlg-glass-field) !important;
            color: #cbd5e1 !important;
            border: 1px solid var(--dlg-glass-border) !important;
        }
        body.theme-dark .ls-hours-row { color: #cbd5e1 !important; }

        /* Compliance-Boxen */
        body.theme-dark .c-warn {
            background: #450a0a !important;
            border-color: #b91c1c !important;
            color: #fca5a5 !important;
        }
        body.theme-dark .c-info {
            background: #422006 !important;
            border-color: #d97706 !important;
            color: #fcd34d !important;
        }

        /* Deduktions-Panel (rechtes Slide-In) */
        body.theme-dark .ded-panel {
            background: var(--dlg-glass) !important;
            color: #e2e8f0 !important;
        }
        body.theme-dark .ded-cat {
            background: transparent !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .ded-cat-head {
            background: var(--dlg-glass-field) !important;
            color: #f1f5f9 !important;
        }
        body.theme-dark .ded-edit-box {
            background: var(--dlg-glass) !important;
            color: #e2e8f0 !important;
        }

        /* Form-Hints */
        body.theme-dark .f-hint { color: #64748b !important; }

        /* User-Role-Badge im Sidebar-Footer (Theme-Toggle Bereich) */
        body.theme-dark .user-role-badge { color: #94a3b8 !important; }

        /* Behoerde-Modal Inputs (sehr eigener Stil) */
        body.theme-dark #behoerdeModal .be-inp {
            background: var(--dlg-glass-strong) !important;
            color: #f1f5f9 !important;
            border-color: var(--dlg-glass-border) !important;
        }

        /* Filter-Dropdowns mit inline `background:white` werden vom
           Attribut-Selektor oben gefangen, aber wir setzen explizit
           Border und Color um sicher zu gehen. */
        body.theme-dark select[style*="background:white"],
        body.theme-dark select[style*="background: white"],
        body.theme-dark input[style*="background:white"],
        body.theme-dark input[style*="background: white"] {
            background: var(--dlg-glass-strong) !important;
            color: #f1f5f9 !important;
            border-color: var(--dlg-glass-border) !important;
        }

        /* Generische divs mit inline `border:1px solid #e2e8f0`-
           Containern in Modals haben oft auch hellen Inhalt. Schon
           via Inline-Border-Override oben abgedeckt. */

        /* Code-Snippets / monospaced Inline-Boxen (PLZ-Lookup, Formel-
           Vorschau in Lohnposition-Edit) */
        body.theme-dark code,
        body.theme-dark pre {
            background: var(--dlg-glass-field) !important;
            color: #d0c8b8 !important;
        }

        /* Drop-Zone (Datei-Upload). Walter mag den saturierten Deep-Navy-
           Look — gleicher Stil wie der Mitarbeiter-Import in import.html.
           Normal: dunkles Marineblau, blau-dashed Border, helle Schrift.
           Hover/Drag-Over: noch eine Stufe dunkler-blauer + heller Border
           damit das Feedback klar erkennbar bleibt. */
        body.theme-dark [style*="border:2px dashed"] {
            background: var(--dlg-active) !important;
            border-color: #3f3f3f !important;
            color: #cbd5e1 !important;
        }
        body.theme-dark .import-drop-zone {
            background: var(--dlg-active) !important;
            border-color: #3f3f3f !important;
            color: #cbd5e1 !important;
        }
        body.theme-dark .import-drop-zone:hover,
        body.theme-dark .import-drop-zone.drag-over {
            background: #5a5348 !important;
            border-color: #cfc9bd !important;
        }
        /* Innentext der Drop-Zonen ("PDF hier ablegen…") hat oft ein
           inline `color:#475569` o.ä. — meine generelle Stufe-3-Map
           macht das schon hell, aber explizit pures Weiß ist hier
           lesbarer auf dem saturierten Blau. */
        body.theme-dark .import-drop-zone [style*="color:#475569"],
        body.theme-dark .import-drop-zone [style*="color: #475569"],
        body.theme-dark .import-drop-zone [style*="color:#374151"] {
            color: #f1f5f9 !important;
        }

        /* Save-/Print-Footer in PDF-Preview-Modals */
        body.theme-dark [style*="border-top:1px solid #e2e8f0"][style*="background:#f8fafc"],
        body.theme-dark [style*="border-top:1px solid #e2e8f0"][style*="background: #f8fafc"] {
            background: var(--dlg-glass-field) !important;
            border-top-color: var(--dlg-glass-border) !important;
        }

        /* Pastell-Badges & Hinweis-Boxen via Inline-Style:
           Original: heller Pastell + dunkler Text → Wir machen den
           Hintergrund deutlich dunkler (gleiche Hue) und holen die
           Text-Farbe als helle Variante zurück, damit die semantische
           Bedeutung (gelb=Warnung, rot=Fehler, grün=OK, blau=Info)
           erhalten bleibt aber lesbar wird. */
        body.theme-dark [style*="background:#fef3c7"],
        body.theme-dark [style*="background: #fef3c7"],
        body.theme-dark [style*="background:#fffbeb"],
        body.theme-dark [style*="background: #fffbeb"] {
            background: #422006 !important;
            color: #fcd34d !important;
        }
        body.theme-dark [style*="background:#fee2e2"],
        body.theme-dark [style*="background: #fee2e2"],
        body.theme-dark [style*="background:#fef2f2"],
        body.theme-dark [style*="background: #fef2f2"] {
            background: #450a0a !important;
            color: #fca5a5 !important;
        }
        body.theme-dark [style*="background:#ece9e2"],
        body.theme-dark [style*="background: #ece9e2"],
        /* Warme Light-Glas-Töne → dunkles Nachtglas (nicht Kaltblau) */
        body.theme-dark [style*="background:#f6f3ee"],
        body.theme-dark [style*="background: #f6f3ee"],
        body.theme-dark [style*="background:#faf8f5"],
        body.theme-dark [style*="background: #faf8f5"],
        body.theme-dark [style*="background:#efeae2"],
        body.theme-dark [style*="background: #efeae2"] {
            /* Walter 06.08.2026: warme Liquid-Karten (Modals/Masken) im
               Dunkelmodus SOLIDE wie die Weiss-Karten (Referenz: «Zulage /
               Abzug erfassen») — nicht mehr durchscheinend-grau. */
            background: rgba(48, 62, 82, 0.96) !important;
            color: #e8eef5 !important;
            border-color: rgba(140,180,220,.28) !important;
        }
        /* Liquid-Glas-Weiss (Sektionen/Buttons in Masken mit inline
           rgba-Weiss) → dezente hellere Panels auf der Navy-Karte. */
        body.theme-dark [style*="background:rgba(255,255,255,0.38)"],
        body.theme-dark [style*="background:rgba(255,255,255,0.45)"],
        body.theme-dark [style*="background:rgba(255,255,255,0.55)"],
        body.theme-dark [style*="background:rgba(255,255,255,0.58)"],
        body.theme-dark [style*="background:rgba(255,255,255,.38)"],
        body.theme-dark [style*="background:rgba(255,255,255,.45)"],
        body.theme-dark [style*="background:rgba(255,255,255,.55)"],
        body.theme-dark [style*="background:rgba(255,255,255,.58)"] {
            background: rgba(255, 255, 255, 0.06) !important;
            color: var(--dlg-text, #d5dee8) !important;
            border-color: rgba(180,200,220,.22) !important;
        }
        /* Warme Grau-Texte der Liquid-Masken (Titel/Labels/Hints) →
           lesbare Nacht-Töne. Substring-Match trifft NUR color:… —
           background:#3f3f3f (Kohle-Buttons) bleibt unberührt. */
        body.theme-dark [style*="color:#3f3f3f"] { color: #e8edf4 !important; }
        body.theme-dark [style*="color:#646464"] { color: #b7c1cc !important; }
        body.theme-dark [style*="color:#8b8b8b"] { color: #93a1b0 !important; }
        body.theme-dark .ahv-f { color: #93a1b0; }
        body.theme-dark [style*="background:#f0fdf4"],
        body.theme-dark [style*="background: #f0fdf4"],
        body.theme-dark [style*="background:#dcfce7"],
        body.theme-dark [style*="background: #dcfce7"] {
            background: #064e3b !important;
            color: #6ee7b7 !important;
        }
        body.theme-dark [style*="background:#ede9fe"],
        body.theme-dark [style*="background: #ede9fe"] {
            background: #2e1065 !important;
            color: #c4b5fd !important;
        }
        /* Pastell-Grün (MTP-Badge), helles Pastell-Lila, helles Grau (Avatar) */
        body.theme-dark [style*="background:#d1fae5"],
        body.theme-dark [style*="background: #d1fae5"] {
            background: #064e3b !important;
            color: #6ee7b7 !important;
        }
        body.theme-dark [style*="background:#e2e8f0"],
        body.theme-dark [style*="background: #e2e8f0"],
        body.theme-dark [style*="background:#cbd5e1"],
        body.theme-dark [style*="background: #cbd5e1"] {
            background: rgba(255,255,255,.10) !important;
            color: #e2e8f0 !important;
        }

        /* Inline-Color-Codes die im Detail-Panel als Wert-Farbe verwendet
           werden (Personal-Nr., Funktion, Lohn etc. — `<b style="color:#374151">`).
           Werden sonst dunkel auf dunkel und unsichtbar. */
        body.theme-dark [style*="color:#374151"],
        body.theme-dark [style*="color: #374151"] { color: #f1f5f9 !important; }
        body.theme-dark [style*="color:#1f2937"],
        body.theme-dark [style*="color: #1f2937"] { color: #f1f5f9 !important; }
        body.theme-dark [style*="color:#334155"],
        body.theme-dark [style*="color: #334155"] { color: #e2e8f0 !important; }

        /* Tabellen-Inhalte (TDs) außerhalb des Lohnzettels: hell-weiß mit
           leichter Gewichtung. Die Monospace-Beträge (z.B. "CHF 2'399.77")
           wirken ohne diese Boost optisch matschig, weil dünne Ziffer-
           Striche bei 12 px weniger "Tinte" auf dem Bildschirm haben als
           proportionale Buchstaben gleicher Farbe. !important nötig
           gegen Inheritance + Stufe-1-Tabellenregel. */
        body.theme-dark table td { color: #f1f5f9; }
        body.theme-dark [style*="font-family:monospace"]:not([style*="color:"]),
        body.theme-dark td[style*="font-family:monospace"]:not([style*="color:"]) {
            color: #f1f5f9 !important;
        }
        /* Innerhalb des Lohnzettels: zurück zum dunklen Papier-Look. */
        body.theme-dark .ls-wrap table td,
        body.theme-dark .ls-wrap td[style*="font-family:monospace"] { color: #1e293b !important; }

        /* Familien-/QST-/Adress-Cards — Glas */
        body.theme-dark .emp-family-card {
            background: var(--dlg-glass) !important;
            border-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text) !important;
            box-shadow: var(--dlg-shadow) !important;
        }
        body.theme-dark .emp-family-name { color: var(--dlg-text-strong) !important; }
        body.theme-dark .emp-family-meta { color: var(--dlg-text) !important; }
        body.theme-dark .emp-fam-headrow {
            background: rgba(255,255,255,.05) !important;
            border-color: var(--dlg-glass-border) !important;
            box-shadow: inset 0 1px 0 var(--dlg-glass-inner) !important;
        }
        body.theme-dark .emp-fam-headrow > span:first-child { color: var(--dlg-text-strong) !important; }
        body.theme-dark .emp-fam-allow-empty {
            background: rgba(255,255,255,.03) !important;
            border-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text-muted) !important;
        }
        body.theme-dark .btn-emp-edit {
            background: rgba(255,255,255,.06) !important;
            color: var(--dlg-text) !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .btn-emp-edit:hover {
            background: rgba(255,255,255,.12) !important;
            color: var(--dlg-text-strong) !important;
        }

        /* Zeilen-Trenner in Tabellen mit hellem Inline-Border (#f1f5f9):
           sonst verschwinden sie auf dem dunklen Hintergrund komplett —
           Krankheits-Karenz-Tabelle etwa wirkt dann wie ein Block ohne
           Zeilen-Trennung. */
        body.theme-dark [style*="border-top:1px solid #f1f5f9"],
        body.theme-dark [style*="border-top: 1px solid #f1f5f9"] {
            border-top-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark [style*="border-bottom:1px solid #f1f5f9"],
        body.theme-dark [style*="border-bottom: 1px solid #f1f5f9"] {
            border-bottom-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark [style*="border-bottom:1px dashed #fde68a"] {
            border-bottom-color: #92400e !important;
        }
        body.theme-dark [style*="border-top:1px dashed #fde68a"] {
            border-top-color: #92400e !important;
        }

        /* Dokumenten-Sidebar (Kategorien-Tree) — Glas */
        body.theme-dark .dok-tree {
            background: var(--dlg-glass) !important;
            border-color: var(--dlg-glass-border) !important;
            box-shadow: var(--dlg-shadow) !important;
        }
        body.theme-dark .dok-tree-node {
            color: var(--dlg-text) !important;
        }
        body.theme-dark .dok-tree-node:hover {
            background: rgba(255,255,255,.08) !important;
        }
        body.theme-dark .dok-tree-node.active {
            background: var(--dlg-active) !important;
            color: var(--dlg-active-text) !important;
        }
        body.theme-dark .dok-tree-cat   { color: var(--dlg-text-strong) !important; }
        body.theme-dark .dok-tree-typ   { color: var(--dlg-text) !important; }
        body.theme-dark .dok-tree-count {
            background: rgba(255,255,255,.08) !important;
            color: var(--dlg-text) !important;
        }
        body.theme-dark .dok-tree-node.active .dok-tree-count {
            background: rgba(255,255,255,.14) !important;
            color: var(--dlg-active-text) !important;
        }
        body.theme-dark .dok-tree-chevron { color: var(--dlg-text-muted) !important; }
        /* Sidebar-Kategorie-Akzente: hellere Variante als Light Mode,
           damit der 3px-Strich auf dem dunklen Karten-Background sichtbar
           ist. */
        body.theme-dark .dok-tree-cat.cat-persoenliche-angaben      { border-left-color: #cfc9bd !important; }
        body.theme-dark .dok-tree-cat.cat-vertragsunterlagen        { border-left-color: #4ade80 !important; }
        body.theme-dark .dok-tree-cat.cat-lohn-arbeitszeit          { border-left-color: #fbbf24 !important; }
        body.theme-dark .dok-tree-cat.cat-absenzen                  { border-left-color: #f87171 !important; }
        body.theme-dark .dok-tree-cat.cat-mitarbeiterentwicklung    { border-left-color: #a78bfa !important; }
        body.theme-dark .dok-tree-cat.cat-aemter-behoerden          { border-left-color: #d0c8b8 !important; }
        /* Untertypen-Connection-Line im Dark Mode: höhere Alpha als Light,
           damit die zarte Linie auf dem dunklen Card-Background sichtbar
           bleibt. */
        body.theme-dark .dok-tree-typ.cat-persoenliche-angaben      { border-left-color: rgba(96,165,250,0.45) !important; }
        body.theme-dark .dok-tree-typ.cat-vertragsunterlagen        { border-left-color: rgba(74,222,128,0.45) !important; }
        body.theme-dark .dok-tree-typ.cat-lohn-arbeitszeit          { border-left-color: rgba(251,191,36,0.45) !important; }
        body.theme-dark .dok-tree-typ.cat-absenzen                  { border-left-color: rgba(248,113,113,0.45) !important; }
        body.theme-dark .dok-tree-typ.cat-mitarbeiterentwicklung    { border-left-color: rgba(167,139,250,0.45) !important; }
        body.theme-dark .dok-tree-typ.cat-aemter-behoerden          { border-left-color: rgba(56,189,248,0.45) !important; }

        /* Semantische dunkle Akzentfarben (Amber/Grün/Blau/Lila/Rot) die
           als Inline-`color:#xxxxxx` auf farbigen Pastell-Pillen oder
           Highlight-Zeilen liegen. Im Light Mode ist das z.B.
           dunkelgrün auf hellgrün; im Dark Mode wird der Hintergrund
           dunkelgrün, der Text muss dann hell-grün werden, sonst
           verschwimmt alles. */
        /* Amber / Orange */
        body.theme-dark [style*="color:#92400e"],
        body.theme-dark [style*="color: #92400e"] { color: #fcd34d !important; }
        body.theme-dark [style*="color:#78350f"],
        body.theme-dark [style*="color: #78350f"] { color: #fcd34d !important; }
        body.theme-dark [style*="color:#a16207"],
        body.theme-dark [style*="color: #a16207"] { color: #fcd34d !important; }
        body.theme-dark [style*="color:#b45309"],
        body.theme-dark [style*="color: #b45309"] { color: #fcd34d !important; }
        body.theme-dark [style*="color:#c2410c"],
        body.theme-dark [style*="color: #c2410c"] { color: #fdba74 !important; }
        body.theme-dark [style*="color:#9a3412"],
        body.theme-dark [style*="color: #9a3412"] { color: #fdba74 !important; }
        /* Grün */
        body.theme-dark [style*="color:#15803d"],
        body.theme-dark [style*="color: #15803d"] { color: #6ee7b7 !important; }
        body.theme-dark [style*="color:#166534"],
        body.theme-dark [style*="color: #166534"] { color: #6ee7b7 !important; }
        body.theme-dark [style*="color:#16a34a"],
        body.theme-dark [style*="color: #16a34a"] { color: #4ade80 !important; }
        /* Blau */
        body.theme-dark [style*="color:#6b7280"],
        body.theme-dark [style*="color: #6b7280"] { color: #d0c8b8 !important; }
        body.theme-dark [style*="color:#6b6152"],
        body.theme-dark [style*="color: #6b6152"] { color: #d0c8b8 !important; }
        /* Lila */
        body.theme-dark [style*="color:#5b21b6"],
        body.theme-dark [style*="color: #5b21b6"] { color: #c4b5fd !important; }
        body.theme-dark [style*="color:#6d28d9"],
        body.theme-dark [style*="color: #6d28d9"] { color: #c4b5fd !important; }
        body.theme-dark [style*="color:#7c3aed"],
        body.theme-dark [style*="color: #7c3aed"] { color: #c4b5fd !important; }
        /* Rot */
        body.theme-dark [style*="color:#b91c1c"],
        body.theme-dark [style*="color: #b91c1c"] { color: #fca5a5 !important; }
        body.theme-dark [style*="color:#991b1b"],
        body.theme-dark [style*="color: #991b1b"] { color: #fca5a5 !important; }
        body.theme-dark [style*="color:#dc2626"],
        body.theme-dark [style*="color: #dc2626"] { color: #f87171 !important; }
        /* Innerhalb des Lohnzettels: alle obigen wieder neutralisieren,
           damit der "Papier"-Look intakt bleibt (Lohnzettel hat ja
           weißes Hintergrund). */
        body.theme-dark .ls-wrap [style*="color:#92400e"] { color: #92400e !important; }
        body.theme-dark .ls-wrap [style*="color:#78350f"] { color: #78350f !important; }
        body.theme-dark .ls-wrap [style*="color:#a16207"] { color: #a16207 !important; }
        body.theme-dark .ls-wrap [style*="color:#b45309"] { color: #b45309 !important; }
        body.theme-dark .ls-wrap [style*="color:#c2410c"] { color: #c2410c !important; }
        body.theme-dark .ls-wrap [style*="color:#9a3412"] { color: #9a3412 !important; }
        body.theme-dark .ls-wrap [style*="color:#15803d"] { color: #15803d !important; }
        body.theme-dark .ls-wrap [style*="color:#166534"] { color: #166534 !important; }
        body.theme-dark .ls-wrap [style*="color:#16a34a"] { color: #16a34a !important; }
        body.theme-dark .ls-wrap [style*="color:#6b7280"] { color: #6b7280 !important; }
        body.theme-dark .ls-wrap [style*="color:#6b6152"] { color: #6b6152 !important; }
        body.theme-dark .ls-wrap [style*="color:#5b21b6"] { color: #5b21b6 !important; }
        body.theme-dark .ls-wrap [style*="color:#6d28d9"] { color: #6d28d9 !important; }
        body.theme-dark .ls-wrap [style*="color:#7c3aed"] { color: #7c3aed !important; }
        body.theme-dark .ls-wrap [style*="color:#b91c1c"] { color: #b91c1c !important; }
        body.theme-dark .ls-wrap [style*="color:#991b1b"] { color: #991b1b !important; }
        body.theme-dark .ls-wrap [style*="color:#dc2626"] { color: #dc2626 !important; }
        /* Im Lohnzettel auch diese Farben neutralisieren, damit dort die
           Original-Werte (dunkel auf weiß) erhalten bleiben. */
        body.theme-dark .ls-wrap [style*="color:#374151"],
        body.theme-dark .ls-wrap [style*="color: #374151"] { color: #374151 !important; }
        body.theme-dark .ls-wrap [style*="color:#1f2937"],
        body.theme-dark .ls-wrap [style*="color: #1f2937"] { color: #1f2937 !important; }
        body.theme-dark .ls-wrap [style*="color:#334155"],
        body.theme-dark .ls-wrap [style*="color: #334155"] { color: #334155 !important; }

        /* Lohn-Liste: elevated Glas + ice-blue Active (Mockup) */
        body.theme-dark .lohn-emp-row {
            border-bottom-color: rgba(180,200,220,.12) !important;
            color: var(--dlg-text) !important;
        }
        body.theme-dark .lohn-emp-row:hover { background: rgba(255,255,255,.06) !important; }
        body.theme-dark .lohn-emp-row.lohn-emp-active,
        body.theme-dark .lohn-emp-active {
            background: var(--dlg-active) !important;
            border-left: 3px solid rgba(150,190,230,.55) !important;
            padding-left: 11px !important;
            box-shadow: inset 0 1px 0 var(--dlg-glass-inner);
        }
        body.theme-dark .lohn-emp-row.lohn-emp-active .lohn-emp-name,
        body.theme-dark .lohn-emp-active .lohn-emp-name { color: var(--dlg-active-text) !important; }
        body.theme-dark .lohn-emp-row.lohn-emp-active .lohn-emp-nr,
        body.theme-dark .lohn-emp-active .lohn-emp-nr { color: var(--dlg-text-soft) !important; }

        /* Lohn-Vertrag-Panel: hellerer Sub-Card-Look — der Container ist
           ja schon eine Card auf Body-Background. Damit die Felder Trennung
           bekommen, kein extra Background — aber Text-Farbe muss klar sein. */
        body.theme-dark #lohnVertragPanel { color: #e2e8f0 !important; }
        body.theme-dark #lohnVertragPanel b { color: #f1f5f9 !important; }
        body.theme-dark #lohnVertragName    { color: #f1f5f9 !important; }
        body.theme-dark #lohnVertragInfo    { color: #94a3b8 !important; }

        /* ── Lohnzettel als "Papier auf dunklem Tisch" ───────────────
           Im Dark Mode bleibt der Lohnzettel hell wie das gedruckte
           PDF. Das ist gewollt: er ist ein Dokument-Preview, kein UI-
           Chrome. Mit Schatten wirkt er wie eine Papierfläche, die
           auf der dunklen Tisch-Oberfläche liegt — bekannt aus Google
           Docs / PDF-Viewern im Dark Mode. */
        /* Walter-Vorgabe 01.06.2026 (final): Lohnzettel komplett dunkel statt
           „weißes Papier auf dunklem Tisch". Dunkler Hintergrund, helle Schrift,
           heller Akzent für Beträge, gedämpfte Sub-Labels — wie der Rest der
           Page im Dark-Mode. */
        body.theme-dark #lohnSlipCard {
            background: var(--dlg-glass-strong) !important;
            color: var(--dlg-text) !important;
            box-shadow: var(--dlg-shadow) !important;
            border-color: var(--dlg-glass-border) !important;
            backdrop-filter: blur(18px) saturate(130%);
            -webkit-backdrop-filter: blur(18px) saturate(130%);
        }
        body.theme-dark #lohnSlipEmpty {
            background: var(--dlg-glass) !important;
            color: var(--dlg-text-soft) !important;
            border: 1px dashed var(--dlg-glass-border) !important;
            box-shadow: none !important;
        }
        body.theme-dark .ls-wrap {
            background: transparent !important;
            color: #e2e8f0 !important;
        }
        /* Inline-Color-Overrides: Walter-Vorgabe 01.06.2026 (final): ALLE Texte
           und Zahlen voll hell — keine Sub-Lable-Dämpfung mehr. Rot/Grün/Lila
           bleiben farbig erhalten (Akzente), grau/dunkel → fast weiß. */
        body.theme-dark .ls-wrap [style*="color:#475569"],
        body.theme-dark .ls-wrap [style*="color: #475569"] { color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap [style*="color:#334155"],
        body.theme-dark .ls-wrap [style*="color: #334155"] { color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap [style*="color:#64748b"],
        body.theme-dark .ls-wrap [style*="color: #64748b"] { color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap [style*="color:#0f172a"],
        body.theme-dark .ls-wrap [style*="color: #0f172a"] { color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap [style*="color:#1e293b"],
        body.theme-dark .ls-wrap [style*="color: #1e293b"] { color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap [style*="color:#94a3b8"],
        body.theme-dark .ls-wrap [style*="color: #94a3b8"] { color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap [style*="color:#dc2626"],
        body.theme-dark .ls-wrap [style*="color: #dc2626"] { color: #f87171 !important; }
        body.theme-dark .ls-wrap [style*="color:#b91c1c"],
        body.theme-dark .ls-wrap [style*="color: #b91c1c"] { color: #f87171 !important; }
        body.theme-dark .ls-wrap [style*="color:#15803d"],
        body.theme-dark .ls-wrap [style*="color: #15803d"] { color: #4ade80 !important; }
        body.theme-dark .ls-wrap [style*="color:#16a34a"],
        body.theme-dark .ls-wrap [style*="color: #16a34a"] { color: #4ade80 !important; }
        body.theme-dark .ls-wrap [style*="color:#cbd5e1"],
        body.theme-dark .ls-wrap [style*="color: #cbd5e1"] { color: #475569 !important; }
        body.theme-dark .ls-wrap [style*="color:#6d28d9"],
        body.theme-dark .ls-wrap [style*="color: #6d28d9"] { color: #c084fc !important; }
        body.theme-dark .ls-wrap [style*="color:#b45309"],
        body.theme-dark .ls-wrap [style*="color: #b45309"] { color: #fbbf24 !important; }
        body.theme-dark .ls-wrap [style*="color:#6b7280"],
        body.theme-dark .ls-wrap [style*="color: #6b7280"] { color: #cfc9bd !important; }
        /* Lila/Grüne/Rote Saldo-Zeilen in der unteren Übersicht (Inline-Klassen) */
        body.theme-dark .ls-wrap [style*="color:#7c3aed"],
        body.theme-dark .ls-wrap [style*="color: #7c3aed"] { color: #c084fc !important; }
        /* Tabellen — transparenter Hintergrund, Schrift hell. */
        body.theme-dark .ls-wrap table,
        body.theme-dark .ls-wrap .ls-table { color: #e2e8f0 !important; background: transparent !important; }
        body.theme-dark .ls-wrap th {
            background: transparent !important;
            color: #94a3b8 !important;
        }
        body.theme-dark .ls-wrap td {
            background: transparent !important;
            color: #f1f5f9 !important;
            border-color: #334155 !important;
        }
        body.theme-dark .ls-wrap tr:hover td { background: rgba(148,163,184,0.06) !important; }
        body.theme-dark .ls-wrap .ls-table th { color: #f1f5f9 !important; border-bottom-color: #475569 !important; }
        /* Walter-Vorgabe 01.06.2026: globale tbody-tr-Trennlinie (#f1f5f9, Z.1156)
           wird im Dark-Mode des Lohnzettels auf dezenten blau-slate gedämpft
           — Zeilenstruktur bleibt erkennbar, kein weißes Aufflackern mehr. */
        body.theme-dark .ls-wrap tbody tr { border-bottom-color: #243044 !important; }
        /* Walter-Vorgabe 01.06.2026: Detail-Bezeichnungen (Festlohn, AHV, etc.)
           im gleichen hellen Blau-Grau wie der Filial-/Periode-Kopf oben — gut
           lesbar, aber dezent. Total-/Netto-/Auszahlungs-Zeilen behalten ihre
           kräftige helle Schrift (eigene Klassen, höhere Spezifität). */
        body.theme-dark .ls-wrap td.ls-desc { color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap .ls-section-hd td.ls-desc,
        body.theme-dark .ls-wrap .ls-total-row td.ls-desc,
        body.theme-dark .ls-wrap .ls-netto-row td.ls-desc { color: #f1f5f9 !important; }
        /* „Weitere Abzüge" wie Akonto-Vorauszahlung: Bezeichnung in hellrot,
           damit sie sich vom normalen blau-grauen Detail abhebt — passend zum
           roten Betrag rechts. */
        body.theme-dark .ls-wrap tr.ls-extra-abzug td.ls-desc { color: #f87171 !important; }
        /* Zahlen-Spalten (Anzahl, %, Basis, Ausbezahlt) und Auszahlungs-an-
           Beträge im Dark-Mode kräftig hell — damit sie nicht in den
           gedämpfteren Bezeichnungs-Farbtönen verschwinden. Gerechnet-Spalte
           hat einen Inline-style color:#64748b → wird vom [style*="color:#64748b"]-
           Mapping auf #94a3b8 (dezenter) gehalten. */
        body.theme-dark .ls-wrap td.ls-num:not([style*="color:"]),
        body.theme-dark .ls-wrap td.ls-amt:not([style*="color:"]) { color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap .ls-section-hd td { color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap .ls-total-row td { border-top-color: #475569 !important; color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap .ls-netto-row td { border-top-color: #94a3b8 !important; color: #f1f5f9 !important; }
        body.theme-dark .ls-wrap .ls-col-hd th {
            background: transparent !important;
            color: #f1f5f9 !important;
            border-bottom-color: #334155 !important;
        }
        body.theme-dark .ls-hours-box {
            background: var(--dlg-glass-field) !important;
            color: #f1f5f9 !important;
            border: 1px solid var(--dlg-glass-border) !important;
        }
        body.theme-dark .ls-hours-row { color: #f1f5f9 !important; }
        body.theme-dark .ls-thirteenth { color: #f1f5f9 !important; border-top-color: #475569 !important; }
        body.theme-dark .ls-company { color: #f1f5f9 !important; }
        body.theme-dark .ls-title-center { color: #f1f5f9 !important; }
        /* Falls "Berechne…"-Placeholder im Lohnzettel — ebenfalls hell */
        body.theme-dark #lohnSlip > div[style*="text-align:center"] {
            color: #94a3b8 !important;
        }

        /* ── LOGIN — OneCrew (Walter-Spec 28.06.2026) ───────────────
           Editorial / Dieter Rams / Schweizer Typografie. Extrem
           reduziert: Off-White, viel Weissraum, keine Karten/Schatten/
           Verläufe/Glas. Nur Typografie + Architektur-Sketch. */
        /* McDonald's Speedee für den OneCrew-Schriftzug. Font-Dateien unter
           wwwroot/fonts/ ablegen (Speedee_Lt.woff2 / Speedee_Bd.woff2);
           fehlen sie, greift der Fallback-Sans automatisch. */
        @font-face { font-family: 'Speedee'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/Speedee_Lt.woff2') format('woff2'); }
        @font-face { font-family: 'Speedee'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Speedee_Bd.woff2') format('woff2'); }
        #loginScreen {
            position: fixed; inset: 0; z-index: 1000;
            color: #111111;
            /* Beige-Hintergrund wie im Hauptmenü (Dashboard) */
            background:
                radial-gradient(circle at 58% 47%, rgba(255, 255, 255, 0.78), transparent 25%),
                radial-gradient(circle at 28% 50%, rgba(224, 218, 209, 0.42), transparent 36%),
                linear-gradient(135deg, #f7f4ef 0%, #efebe3 48%, #faf8f5 100%);
            display: flex; flex-direction: column;
            overflow: auto;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
        }
        /* Header — ~30% höher als gewöhnlich */
        .login-header { padding: 7vh 24px 0; text-align: center; flex-shrink: 0; }
        /* Offizielles OneCrew-Logo (Master-Bild, 1:1 eingebunden — nicht
           nachgezeichnet, kein SVG, keine Proportions-Änderung). */
        .login-logo {
            display: block; margin: 0 auto;
            width: auto; max-width: 660px; max-height: 188px; height: auto;
        }
        .login-rule {
            width: min(825px, 88%); height: 1px; background: #BFBFBF;
            border: 0; margin: 38px auto 0;
        }
        .login-tagline {
            margin: 20px 0 0; font-size: 15px; line-height: 1;
            letter-spacing: 0.34em; color: #555555;
            text-transform: uppercase; font-weight: 500;
        }
        /* Loginbereich — perfekt zentriert */
        .login-main {
            flex: 1; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            padding: 48px 24px;
        }
        .login-inner { width: 100%; max-width: 360px; }
        .login-title {
            font-size: 42px; font-weight: 600; letter-spacing: -0.6px;
            color: #111111; margin: 0; text-align: center; line-height: 1.05;
        }
        .login-sub {
            color: #777777; font-size: 14px; margin: 10px 0 46px;
            text-align: center;
        }
        /* Felder — nur Unterlinien, keine Rahmen */
        .login-field { position: relative; margin-bottom: 30px; }
        .login-field .lf-icon {
            position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
            color: #777777; pointer-events: none; display: flex;
        }
        .login-input {
            width: 100%; box-sizing: border-box;
            border: 0; border-bottom: 1px solid #BFBFBF;
            background: transparent; color: #111111;
            padding: 10px 30px 10px 32px; font-size: 15px;
            font-family: inherit; outline: none;
            transition: border-color 0.2s;
        }
        .login-input::placeholder { color: #999999; }
        .login-input:focus { border-bottom-color: #111111; }
        .login-eye {
            position: absolute; right: 0; top: 50%; transform: translateY(-50%);
            background: none; border: 0; padding: 4px; cursor: pointer;
            color: #999999; display: flex; line-height: 0;
        }
        .login-eye:hover { color: #111111; }
        /* Button — schwarz, leicht strukturiert */
        .login-btn {
            width: 100%; margin-top: 10px; padding: 16px 20px;
            background-color: #111111;
            background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, rgba(255,255,255,0) 2px 4px);
            color: #ffffff; border: 0; cursor: pointer;
            font-family: inherit; font-size: 14px; font-weight: 500;
            letter-spacing: 1.5px;
            display: flex; align-items: center; justify-content: center; gap: 12px;
            transition: background-color 0.2s;
        }
        .login-btn:hover { background-color: #000000; }
        .login-btn .login-arrow { font-size: 16px; transition: transform 0.2s; }
        .login-btn:hover .login-arrow { transform: translateX(4px); }
        .login-forgot {
            display: block; text-align: center; margin-top: 22px;
            font-size: 13px; color: #aaaaaa; text-decoration: none;
            cursor: pointer; transition: color 0.2s;
        }
        .login-forgot:hover { color: #777777; }
        .login-error {
            background: transparent; border: 0; color: #b4322a;
            padding: 0 0 18px; font-size: 13px; text-align: center;
            display: none;
        }
        /* Footer — eine Zeile, ~30% grösser, viel Laufweite */
        .login-footer {
            flex-shrink: 0; padding: 24px 24px 36px; text-align: center;
        }
        .login-footer-line {
            font-size: 13px; letter-spacing: 0.28em; color: #111111;
            text-transform: uppercase; font-weight: 500;
        }
        .login-footer-line .sep { color: #BFBFBF; margin: 0 14px; font-weight: 400; }
        @media (max-width: 600px) {
            .login-header { padding-top: 5vh; }
            .login-logo { max-width: 88%; }
            .login-title { font-size: 34px; }
            .login-footer-line { font-size: 11px; letter-spacing: 0.18em; }
            .login-footer-line .sep { margin: 0 7px; }
        }

        /* Impersonation-/Testmodus-Hinweisbalken (zentrierte Pille oben). */
        #impersonationBanner {
            position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 4000;
            background: #f59e0b; color: #1f2937;
            font-size: 13px; font-weight: 600; border-radius: 999px;
            padding: 6px 8px 6px 16px; display: inline-flex; align-items: center; gap: 12px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.22);
        }
        #impersonationBanner button {
            background: #1f2937; color: #fff; border: 0; border-radius: 999px;
            padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
        }
        #impersonationBanner button:hover { background: #111827; }

        /* ── APP SHELL ─────────────────────────────────────────── */
        #app { display: none; height: 100vh; }
        .layout { display: flex; height: 100vh; }

        /* ── SIDEBAR ───────────────────────────────────────────── */
        /* Globale Sidebar im warmen Liquid-Look (Walter-Vorgabe 27.06.2026) —
           gilt auf allen Seiten (ausser den Liquid-Shells Dashboard/Mitarbeiter,
           die ihre eigene Nav haben). Dark-Mode-Varianten weiter unten. */
        /* Globale Sidebar = exakt die schmale Liquid-Rail der Mitarbeiter-Seite
           (Walter-Vorgabe 28.06.2026). Alter Marken-/Label-Code entfernt. */
        .sidebar {
            width: 160px; min-width: 160px;
            background: linear-gradient(135deg, #f7f4ef 0%, #efebe3 48%, #faf8f5 100%);
            border-right: 1px solid rgba(120,110,95,0.12);
            display: flex; flex-direction: column; overflow-y: auto;
            padding: 6px 8px 8px;
        }
        .sidebar-header { padding: 6px 2px 8px; border: 0; }
        /* Offizielles OneCrew-Logo (Master-Bild, 1:1) in der Sidebar. */
        .sidebar-logo { display: block; width: 100%; max-width: 124px; height: auto; margin: 0 auto; }
        body.theme-dark .sidebar-logo { filter: invert(1) brightness(1.12); }

        .branch-selector { padding: 2px 2px 8px; border: 0; }
        .branch-label { display: block; font-size: 10px; font-weight: 700; color: #8b96a5; text-transform: uppercase; letter-spacing: 0.1em; padding: 0 2px 4px; }
        .branch-select {
            width: 100%; padding: 8px 10px; background: rgba(255,255,255,0.55);
            border: 1px solid rgba(255,255,255,0.62); border-radius: 12px;
            color: #364152; font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer; outline: none;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 14px rgba(72,63,53,0.06);
        }
        .branch-select option { background: #fff; color: #364152; }

        /* Helles Glas-Dropdown für die Filialauswahl in der Sidebar (wie Dashboard) */
        .sb-branch-menu { position: relative; }
        /* Walter 04.08.2026: gewählte Filiale MARKANT — Kohle-Pille
           (Liquid-Glass-Primär) statt dezentem Glas, weisser fetter Text. */
        .sb-branch-btn {
            width: 100%; padding: 10px 12px; background: #3f3f3f;
            border: 1px solid rgba(255,255,255,0.14); border-radius: 12px;
            color: #fff; font-size: 12.5px; font-weight: 750; font-family: inherit;
            letter-spacing: 0.01em;
            cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 16px rgba(60,55,48,0.22);
            text-align: left;
            transition: background 0.15s;
        }
        .sb-branch-btn:hover { background: #1a1a1a; }
        .sb-branch-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sb-branch-btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: rgba(255,255,255,0.75); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .sb-branch-options {
            position: fixed; min-width: 260px;
            z-index: 4000; background: rgba(250,248,245,0.98);
            border: 1px solid rgba(255,255,255,0.72); border-radius: 14px; padding: 6px;
            max-height: min(70vh, 520px); overflow-y: auto;
            box-shadow: 0 24px 60px rgba(72,63,53,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
            backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
            display: none;
        }
        .sb-branch-menu.open .sb-branch-options { display: block; }
        .sb-branch-option {
            width: 100%; display: flex; align-items: center; gap: 8px;
            padding: 9px 10px; border: none; background: transparent; border-radius: 10px;
            color: #3f3f3f; font-size: 12.5px; font-weight: 600; font-family: inherit;
            cursor: pointer; text-align: left; white-space: nowrap;
        }
        .sb-branch-option:hover { background: rgba(120,110,95,0.09); }
        .sb-branch-option.active { background: rgba(255,255,255,0.92); font-weight: 750; box-shadow: 0 3px 10px rgba(72,63,53,0.10); }
        .sb-branch-check { width: 13px; flex: none; color: #3f3f3f; }
        body.theme-dark .sb-branch-btn {
            /* Kohle-Pille auch im Dunkel-Modus — heller Rand als Kontrast */
            background: #1a1a1a !important;
            border: 1px solid rgba(255,255,255,0.22) !important;
            color: #fff;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
        }
        body.theme-dark .sb-branch-btn:hover { background: #000 !important; }
        body.theme-dark .sb-branch-options {
            border: 1px solid transparent !important;
            background-image: var(--dlg-fill-strong), var(--dlg-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow: var(--dlg-shadow), 0 24px 60px rgba(0,10,40,.45) !important;
        }
        body.theme-dark .sb-branch-option { color: #cbd5e1; }
        body.theme-dark .sb-branch-option.active { background: rgba(51,65,85,.7); }
        body.theme-dark .sb-branch-check { color: #e2e8f0; }

        .sidebar-nav { flex: 1; padding: 4px 0; display: flex; flex-direction: column; gap: 6px; }
        .nav-section { margin: 0; display: flex; flex-direction: column; gap: 6px; }
        .nav-item {
            position: relative;
            width: 100%; min-height: 46px;
            display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px;
            padding: 7px 8px; border-radius: 16px;
            cursor: pointer; color: #626d78; font-size: 11px; font-weight: 720; line-height: 1.12;
            background: rgba(255,255,255,0.34); border: 1px solid rgba(255,255,255,0.46);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
            transition: transform .14s ease, background .14s ease, box-shadow .14s ease; user-select: none;
        }
        .nav-item:hover { background: rgba(255,255,255,0.58); color: #364152; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(72,63,53,0.10), inset 0 1px 0 rgba(255,255,255,0.70); }
        .nav-item.active { background: rgba(219,234,254,0.68); color: #245b92; border-color: rgba(147,197,253,0.6); }
        .nav-icon { width: 24px; height: 24px; flex-shrink: 0; opacity: 1; }
        .nav-icon-img { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; mix-blend-mode: multiply; }
        body.theme-dark .nav-icon-img { mix-blend-mode: screen; filter: invert(1) brightness(1.12); }
        #posteingangBadge { position: absolute !important; right: 6px; top: 6px; margin: 0 !important; }
        /* Footer kompakt: nur Logout-Icon (Rail-Breite) */
        .sidebar-footer { padding: 8px 2px; }
        .sidebar-footer .user-avatar, .sidebar-footer .user-info { display: none; }
        .sidebar-footer .user-row { justify-content: center; }
        .sidebar-footer .logout-btn { margin: 0 !important; }

        /* Dark-Mode Sidebar — blaues Glas-Rail (Mockup) */
        body.theme-dark .sidebar {
            background:
                radial-gradient(circle at 20% 0%, rgba(60,120,200,.14) 0, transparent 240px),
                linear-gradient(180deg, rgba(14, 26, 44, 0.88) 0%, rgba(8, 16, 30, 0.94) 100%);
            border-right: 1px solid rgba(120,180,255,.22);
            backdrop-filter: blur(20px) saturate(120%);
            -webkit-backdrop-filter: blur(20px) saturate(120%);
            box-shadow: inset -1px 0 0 rgba(160,210,255,.08), 4px 0 28px rgba(0,8,24,.40);
        }
        body.theme-dark .sidebar-header,
        body.theme-dark .branch-selector,
        body.theme-dark .sidebar-footer { border-color: rgba(122,145,165,.12); }
        body.theme-dark .branch-label { color: var(--dlg-text-soft); }
        body.theme-dark .branch-select {
            background: rgba(255,255,255,.06);
            border-color: var(--dlg-glass-border);
            color: var(--dlg-text);
            box-shadow: inset 0 1px 0 var(--dlg-glass-inner);
        }
        body.theme-dark .branch-select option { background: #121c28; color: var(--dlg-text); }
        body.theme-dark .nav-item {
            border: 1px solid transparent !important;
            background-image: linear-gradient(rgba(14,26,44,.62), rgba(14,26,44,.62)), var(--dlg-rim-soft) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            color: var(--dlg-text);
            box-shadow: inset 0 1px 0 rgba(180,210,245,.06);
        }
        body.theme-dark .nav-item:hover {
            background-image: linear-gradient(rgba(22,40,66,.78), rgba(22,40,66,.78)), var(--dlg-rim) !important;
            color: #ffffff;
            box-shadow: none;
            transform: none;
        }
        body.theme-dark .nav-item.active {
            border: 1px solid transparent !important;
            background-image: linear-gradient(rgba(40,90,160,.50), rgba(28,70,130,.48)), var(--dlg-rim-hot) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            color: #ffffff !important;
            box-shadow: inset 0 1px 0 rgba(200,230,255,.14);
        }
        body.theme-dark .user-name { color: var(--dlg-text-strong); }
        .nav-soon {
            margin-left: auto; font-size: 10px; font-weight: 600; color: #e2e8f0;
            background: rgba(255,255,255,0.14); padding: 2px 8px; border-radius: 10px;
        }

        /* Admin-Hub Kacheln */
        .admin-card {
            background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
            padding: 20px; cursor: pointer; transition: all 0.15s;
            display: flex; flex-direction: column; gap: 8px;
        }
        .admin-card:hover {
            border-color: #3f3f3f;
            box-shadow: 0 4px 12px rgba(63,63,63,0.15);
            transform: translateY(-2px);
        }
        .admin-card-icon {
            width: 44px; height: 44px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 4px;
        }
        .admin-card-title { font-weight: 700; font-size: 15px; color: #0f172a; }
        .admin-card-desc  { font-size: 12px; color: #64748b; line-height: 1.4; }

        .sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(120,110,95,0.12); }
        .user-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .user-row > .user-info { flex: 1 1 0; min-width: 0; overflow: hidden; }
        .user-row > .user-info .user-name,
        .user-row > .user-info .user-role-badge {
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .user-avatar {
            width: 32px; height: 32px; background: #3f3f3f; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: 700; font-size: 13px; flex-shrink: 0;
        }
        .user-name { color: #364152; font-size: 13px; font-weight: 500; }
        .user-role-badge { color: #8b96a5; font-size: 11px; }
        .logout-btn {
            margin-left: auto; padding: 6px 12px;
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.45);
            border-radius: 6px;
            color: #fca5a5; cursor: pointer; font-size: 12px;
            font-weight: 600; font-family: inherit;
            transition: all 0.15s;
            white-space: nowrap;
        }
        .logout-btn:hover {
            background: rgba(239, 68, 68, 0.25);
            border-color: rgba(239, 68, 68, 0.8);
            color: #fee2e2;
        }

        /* ── Floating Topbar-Widget (oben rechts, jeder Screen) ──
           Muss auf dem hellen Liquid-Glass-Hintergrund klar sichtbar bleiben
           (Walter 17.07.2026: fast-transparentes Glas machte Theme-Toggle
           unbenutzbar — «Dunkelmodus lässt sich nicht aktivieren»). */
        #langSwitcher {
            background: rgba(255,255,255,.92) !important;
            border-color: rgba(60,55,48,.14) !important;
            box-shadow: 0 10px 28px rgba(60,55,48,.12), inset 0 1px 0 rgba(255,255,255,.70) !important;
            backdrop-filter: blur(22px) saturate(145%) !important;
            -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
        }
        #langSwitcher .lang-control {
            display: none !important;
        }
        body.theme-dark #langSwitcher {
            background: rgba(40, 54, 72, 0.82) !important;
            border-color: var(--dlg-glass-border) !important;
            box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 1px 0 var(--dlg-glass-inner) !important;
            backdrop-filter: blur(22px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
        }
        body.theme-dark #langSwitcher .ls-label   { color: var(--dlg-text) !important; }
        body.theme-dark #langSwitcher .ls-divider { background: rgba(122,145,165,.28) !important; }

        /* Theme-Toggle: Kohle-Pille hell; im Dark = ruhige Glas-Pille
           (kein grelles Gelb — passt zum Liquid-Glass-Dunkel). */
        #themeToggleBtn {
            display: inline-flex; align-items: center; gap: 6px;
            background: #3f3f3f; color: #ffffff;
            border: 1px solid #1a1a1a; border-radius: 16px;
            cursor: pointer; padding: 7px 13px;
            font-size: 12px; font-weight: 700; font-family: inherit;
            line-height: 1; transition: background .15s, color .15s, transform .15s, border-color .15s;
            box-shadow: 0 6px 16px rgba(60,55,48,.18);
        }
        #themeToggleBtn .tt-icon  { font-size: 14px; line-height: 1; }
        #themeToggleBtn:hover     { background: #1a1a1a; transform: translateY(-1px); }
        body.theme-dark #themeToggleBtn {
            background: rgba(233, 236, 240, 0.92);
            color: #1a1a1a;
            border-color: rgba(255,255,255,.35);
            box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45);
        }
        body.theme-dark #themeToggleBtn:hover {
            background: #ffffff;
            transform: translateY(-1px);
        }

        /* ── MAIN CONTENT ──────────────────────────────────────── */
        .main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; background: #f8fafc; }
        .page-head {
            padding: 28px 32px 0; display: flex;
            align-items: flex-start; justify-content: space-between;
        }
        .page-title { font-size: 22px; font-weight: 700; color: #0f172a; }
        .page-sub { color: #64748b; font-size: 13px; margin-top: 5px; }
        .page-body { padding: 20px 32px 40px; }
        .page { display: none; }
        .page.active { display: block; }

        /* ── CARDS ─────────────────────────────────────────────── */
        .card {
            background: white; border-radius: 12px;
            border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .card-hd {
            padding: 16px 20px; border-bottom: 1px solid #f1f5f9;
            display: flex; align-items: center; justify-content: space-between;
        }
        .card-hd-title { font-size: 15px; font-weight: 600; }
        .card-hd-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }

        /* ── STATS GRID ────────────────────────────────────────── */
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
        .stat-card { background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; }
        .stat-label { font-size: 12px; color: #64748b; font-weight: 500; margin-bottom: 10px; }
        .stat-value { font-size: 30px; font-weight: 700; line-height: 1; }
        .stat-hint { font-size: 11px; color: #94a3b8; margin-top: 6px; }

        /* ── TABLES ────────────────────────────────────────────── */
        .tbl-wrap { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
        thead th {
            padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 700;
            color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;
            background: #f8fafc; border-bottom: 1px solid #e2e8f0;
        }
        tbody tr { border-bottom: 1px solid #f1f5f9; transition: background 0.1s; }
        tbody tr:hover { background: #f8fafc; }
        tbody tr:last-child { border-bottom: none; }
        tbody td { padding: 12px 16px; color: #374151; vertical-align: middle; }

        /* ── BADGES ────────────────────────────────────────────── */
        .badge {
            display: inline-flex; align-items: center; padding: 3px 10px;
            border-radius: 20px; font-size: 11px; font-weight: 600;
        }
        .b-admin { background: #fef3c7; color: #92400e; }
        .b-superuser { background: #ede9fe; color: #6d28d9; }
        .b-user { background: #f0fdf4; color: #166534; }
        .b-lowuser { background: #f1f5f9; color: #475569; }
        .b-super-admin { background: #1e1b4b; color: #fde047; font-weight: 700; }
        .b-active { background: #f0fdf4; color: #166534; }
        .b-inactive { background: #fef2f2; color: #991b1b; }
        .b-code { background: #f6f3ee; color: #6b7280; }

        /* ── BUTTONS ───────────────────────────────────────────── */
        .btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 16px; border-radius: 8px; font-size: 13px;
            font-weight: 600; cursor: pointer; border: none; font-family: inherit;
            transition: all 0.15s; white-space: nowrap; text-decoration: none;
        }
        .btn-primary { background: #3f3f3f; color: white; box-shadow: 0 5px 14px rgba(60,55,48,.16); }
        .btn-primary:hover { background: #1a1a1a; }
        /* Speichern / bestätigen — kräftiges Grün */
        .btn-success { background: #10b981; color: white; border: 1px solid #10b981; }
        .btn-success:hover { background: #059669; border-color: #059669; }
        /* Löschen — kräftiges Rot mit weisser Schrift */
        .btn-danger { background: #ef4444; color: white; border: 1px solid #ef4444; }
        .btn-danger:hover { background: #dc2626; border-color: #dc2626; }
        /* Abbrechen / Sekundär — sichtbar (kein Weiss auf Weiss) */
        .btn-outline { background: white; color: #475569; border: 1.5px solid #94a3b8; }
        .btn-outline:hover { background: #f1f5f9; border-color: #64748b; }
        .btn-ghost { background: transparent; color: #64748b; padding: 5px 10px; }
        .btn-ghost:hover { background: #f1f5f9; color: #0f172a; }
        .btn-sm { padding: 5px 10px; font-size: 12px; }

        /* ── ⋯-DROPDOWN-MENÜ (Walter-Vorgabe 31.05.2026) ───────
           Wiederverwendbares Pattern für Sekundär-Aktionen in
           Action-Bars. Hauptaktionen bleiben sichtbar, alles
           Seltene (Reports, Admin, Wartung) wandert ins Menü. */
        .action-menu { position: relative; display: inline-block; }
        .action-menu-trigger {
            background: white; color: #475569; border: 1.5px solid #94a3b8;
            border-radius: 8px; padding: 5px 10px; font-size: 13px;
            font-weight: 500; cursor: pointer; line-height: 1; transition: background .15s;
        }
        .action-menu-trigger:hover { background: #f1f5f9; border-color: #64748b; }
        .action-menu-list {
            position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px;
            background: white; border: 1px solid #e2e8f0; border-radius: 10px;
            box-shadow: 0 8px 20px rgba(0,0,0,.12); padding: 6px;
            z-index: 100; display: none;
        }
        .action-menu.open .action-menu-list { display: block; }
        .action-menu-item {
            display: flex; align-items: center; gap: 8px; width: 100%;
            background: transparent; border: none; padding: 7px 10px;
            font-size: 13px; color: #334155; text-align: left;
            border-radius: 6px; cursor: pointer; transition: background .12s;
        }
        .action-menu-item:hover { background: #f1f5f9; }
        .action-menu-item.danger { color: #b91c1c; }
        .action-menu-item.danger:hover { background: #fee2e2; }
        .action-menu-divider { height: 1px; background: #e2e8f0; margin: 4px 0; }
        body.theme-dark .action-menu-trigger { background: var(--dlg-glass); color: #e2e8f0; border-color: var(--dlg-glass-border); }
        body.theme-dark .action-menu-trigger:hover { background: var(--dlg-glass-strong); }
        body.theme-dark .action-menu-list { background: var(--dlg-glass); border-color: var(--dlg-glass-border); }
        body.theme-dark .action-menu-item { color: #e2e8f0; }
        body.theme-dark .action-menu-item:hover { background: var(--dlg-glass-strong); }

        /* ── MODAL ─────────────────────────────────────────────── */
        .modal-bg {
            position: fixed; inset: 0; background: rgba(0,0,0,0.45);
            backdrop-filter: blur(4px); display: none;
            align-items: center; justify-content: center; z-index: 500;
        }
        .modal-bg.open { display: flex; }
        .modal {
            background: white; border-radius: 16px; width: 580px;
            max-width: 95vw; max-height: 90vh; overflow-y: auto;
            box-shadow: 0 24px 48px rgba(0,0,0,0.2);
        }
        .modal-hd {
            padding: 22px 26px; border-bottom: 1px solid #f1f5f9;
            display: flex; align-items: center; justify-content: space-between;
            position: sticky; top: 0; background: white; z-index: 1;
        }
        .modal-hd-title { font-size: 18px; font-weight: 700; }
        .modal-x {
            width: 32px; height: 32px; background: #f1f5f9; border: none;
            border-radius: 8px; cursor: pointer; font-size: 20px; color: #64748b;
            display: flex; align-items: center; justify-content: center;
            line-height: 1; transition: all 0.15s;
        }
        .modal-x:hover { background: #e2e8f0; color: #0f172a; }
        /* Sichtbare-Bereiche-Häkchen im Benutzer-Modal. */
        .um-area-cb { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: #364152; padding: 6px 4px; }
        .um-area-cb input { width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; }
        body.theme-dark .um-area-cb { color: #cbd5e1; }
        .modal-body { padding: 26px; }
        .modal-ft { padding: 16px 26px; border-top: 1px solid #f1f5f9; display: flex; gap: 10px; justify-content: flex-end; }

        /* ── FORM ──────────────────────────────────────────────── */
        .f-group { margin-bottom: 18px; }
        .f-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 7px; }
        .f-input, .f-select {
            width: 100%; padding: 10px 13px; border: 1.5px solid #e2e8f0; border-radius: 9px;
            font-size: 14px; font-family: inherit; color: #0f172a;
            outline: none; transition: all 0.2s; background: white;
        }
        .f-input:focus, .f-select:focus { border-color: #3f3f3f; box-shadow: 0 0 0 3px rgba(63,63,63,0.1); }
        .f-hint { font-size: 12px; color: #94a3b8; margin-top: 5px; }
        .f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .f-divider { border: none; border-top: 1px solid #f1f5f9; margin: 22px 0; }

        /* ── BRANCH CHECKBOXES ─────────────────────────────────── */
        .branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
        .branch-cb {
            display: flex; align-items: center; gap: 9px; padding: 9px 11px;
            border-radius: 8px; border: 1.5px solid #e2e8f0; cursor: pointer;
            transition: all 0.15s; user-select: none;
        }
        .branch-cb:hover { border-color: #d0c8b8; background: #f6f3ee; }
        .branch-cb input { accent-color: #3f3f3f; width: 15px; height: 15px; flex-shrink: 0; }
        .branch-cb-name { font-size: 12.5px; font-weight: 500; color: #374151; }
        .branch-cb-code { font-size: 11px; color: #94a3b8; }

        /* ── ALERTS ────────────────────────────────────────────── */
        .alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
        .alert-ok { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
        .alert-err { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
        .alert-info { background: #f6f3ee; color: #6b7280; border: 1px solid #e5e0d6; }

        /* ── COMING SOON ───────────────────────────────────────── */
        /* ── MITARBEITER LAYOUT ────────────────────────────────── */
        .emp-layout { display: flex; gap: 0; height: calc(100vh - 130px); overflow: hidden; }
        /* Hinweis: früher wurde die MA-Liste im Dokumente-Tab ausgeblendet
           (volle Breite für die Dokumenten-Tabelle). Walter hat das geändert
           — die Liste bleibt jetzt überall sichtbar, damit man im Doku-Tab
           genauso schnell zwischen MA wechseln kann wie bei Stempelzeiten. */

        /* Linke Liste — Walter 06.06.2026: schlanker (230 statt 300 px), damit
           die Dokumenten-Tabelle rechts genug Platz behält. */
        .emp-list-panel {
            width: 230px; min-width: 230px; border-right: 1px solid #e2e8f0;
            display: flex; flex-direction: column; background: white; border-radius: 12px 0 0 12px;
        }
        .emp-list-search {
            padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
        }
        .emp-search-input {
            width: 100%; padding: 8px 12px 8px 34px; border: 1.5px solid #e2e8f0;
            border-radius: 8px; font-size: 13px; font-family: inherit; outline: none;
            background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
            transition: border-color 0.2s;
        }
        .emp-search-input:focus { border-color: #3f3f3f; background-color: white; }
        .emp-list-scroll { flex: 1; overflow-y: auto; }
        .emp-list-item {
            display: flex; align-items: center; gap: 8px;
            padding: 6px 12px; cursor: pointer; border-bottom: 1px solid #f8fafc;
            transition: background 0.1s;
        }
        .emp-list-item:hover { background: #f8fafc; }
        .emp-list-item.active { background: #f6f3ee; border-left: 3px solid #3f3f3f; }
        .emp-avatar {
            width: 28px; height: 28px; border-radius: 50%; background: #ece9e2;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 700; color: #3f3f3f; flex-shrink: 0;
        }
        .emp-avatar.female { background: #fce7f3; color: #ec4899; }
        .emp-list-name { font-size: 12.5px; font-weight: 600; color: #0f172a; }
        .emp-list-nr { font-size: 10.5px; color: #94a3b8; margin-top: 1px; }

        /* Rechtes Detail-Panel */
        .emp-detail-panel {
            flex: 1; display: flex; flex-direction: column;
            background: white; border-radius: 0 12px 12px 0; overflow: hidden;
        }
        .emp-detail-header {
            padding: 0 22px 0; border-bottom: 1px solid #e2e8f0;
            /* Walter-Vorgabe 01.06.2026: MA-Header sticky — Name + Header-Aktions-
               Buttons (Postfach-Passwort, Bearbeiten) und Tab-Bar bleiben immer
               oben sichtbar, auch wenn der äußere Container scrollt. */
            position: sticky; top: 0; z-index: 20;
            background: white;
        }
        /* Anti-Flackern: opake dunkle Basis — kein Milch-Nebel */
        body.theme-dark .emp-detail-panel,
        body.theme-dark #empDetailPanel {
            background-color: var(--dlg-fill) !important;
        }
        body.theme-dark .emp-detail-header {
            background: var(--dlg-fill-strong) !important;
            border-bottom-color: rgba(140, 195, 255, 0.18) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        body.theme-dark .emp-detail-body {
            background: transparent !important;
        }
        body.theme-dark .ov-card {
            background-color: var(--dlg-fill) !important;
        }
        /* Postfach-Passwort-Button visuell hervorgehoben (orange/amber), damit
           er sich von „Bearbeiten" abhebt — Walter-Vorgabe 01.06.2026. */
        .btn-emp-edit.btn-postfach {
            background: #fef3c7; color: #92400e; border-color: #fcd34d;
        }
        .btn-emp-edit.btn-postfach:hover { background: #fde68a; }
        body.theme-dark .btn-emp-edit.btn-postfach {
            background: #422006; color: #fde68a; border-color: #78350f;
        }
        /* Zulagen-/Abzüge-Modal Dark-Mode (Walter-Vorgabe 01.06.2026):
           weisses Modal blendet stark im Dunkelmodus — auf Dark-Slate umstellen. */
        body.theme-dark #lohnZulagenForm {
            background: var(--dlg-glass-strong) !important;
            color: var(--dlg-text-strong) !important;
            border: 1px solid var(--dlg-glass-border) !important;
            box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 var(--dlg-glass-inner) !important;
            backdrop-filter: blur(22px) saturate(130%);
            -webkit-backdrop-filter: blur(22px) saturate(130%);
        }
        body.theme-dark #lohnZulagenForm > div:first-child {
            color: var(--dlg-text-strong) !important;
        }
        body.theme-dark #lohnZulagenForm .f-label { color: var(--dlg-text-soft) !important; }
        body.theme-dark #lohnZulagenForm .f-input {
            background: var(--dlg-glass-field) !important;
            color: var(--dlg-text-strong) !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark #lohnZulagenForm .f-input::placeholder { color: var(--dlg-text-muted) !important; }
        body.theme-dark #lohnZulagenForm .btn-secondary {
            background: rgba(255,255,255,.08) !important;
            color: var(--dlg-text) !important;
            border-color: var(--dlg-glass-border) !important;
        }

        /* Ausbezahlt-Status-Badge (Walter-Vorgabe 01.06.2026):
           Light-Mode hellgrün/dunkelgrün, Dark-Mode invertiert (dunkelgrüner
           Hintergrund + hellgrüner Text) für gute Lesbarkeit. */
        .ak-ausbezahlt-badge {
            background: #bbf7d0;
            color: #15803d;
        }
        body.theme-dark .ak-ausbezahlt-badge {
            background: #14532d;
            color: #bbf7d0;
        }

        /* Bearbeiten-Button im MA-Header (Walter-Vorgabe 01.06.2026):
           volles Primary-Blau (gleich wie „+ Neuer Vertrag" / .btn-primary)
           — klare Primär-Aktion neben dem orangen Postfach-Button. */
        .btn-emp-edit.btn-edit-blue {
            background: #3f3f3f; color: #ffffff; border-color: #3f3f3f;
        }
        .btn-emp-edit.btn-edit-blue:hover {
            background: #1a1a1a; border-color: #1a1a1a;
        }
        body.theme-dark .btn-emp-edit.btn-edit-blue {
            background: #3f3f3f; color: #ffffff; border-color: #3f3f3f;
        }
        .emp-detail-name { font-size: 17px; font-weight: 700; color: #0f172a; }
        .emp-detail-meta { font-size: 11px; color: #64748b; margin-top: 1px; margin-bottom: 5px; }
        /* flex-wrap: bei 8 Sub-Tabs (inkl. „Bank & Postfach") dürfen sie
           bei schmalem Detail-Panel auf eine 2. Zeile umbrechen statt zu
           überlaufen. */
        .emp-detail-tabs { display: flex; gap: 0; flex-wrap: wrap; }
        .emp-tab {
            padding: 4px 13px; font-size: 12px; font-weight: 500; color: #64748b;
            cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
            white-space: nowrap;
        }
        .emp-tab:hover { color: #3f3f3f; }
        .emp-tab.active { color: #3f3f3f; border-bottom-color: #3f3f3f; font-weight: 600; }
        .emp-detail-body { flex: 1; overflow-y: auto; padding: 8px 20px 12px; }
        .emp-tab-content { display: none; }
        .emp-tab-content.active { display: block; }

        /* Felder im Detail — Walter-Vorgabe 26.05.2026 (V5: kompakt, ohne harte
           Border um die Wert-Boxen). Sektion-Cards in slate-200, Wert-Boxen
           weiss mit nur leichtem Schatten — die Form entsteht durch den
           Background-Kontrast, NICHT durch eine schwarze Border.
           „emp-grid-attached" docks die Card oben an die vorherige Card,
           ohne Gap und ohne wiederholten Section-Title. */
        .emp-field-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 10px;
                            background: #f6f3ee; border: 1px solid #e7e1d8; border-radius: 14px;
                            padding: 9px 12px 11px; margin-bottom: 6px; }
        .emp-field-grid-3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 10px;
                            background: #f6f3ee; border: 1px solid #e7e1d8; border-radius: 14px;
                            padding: 9px 12px 11px; margin-bottom: 6px; }
        .emp-field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px;
                            background: #f6f3ee; border: 1px solid #e7e1d8; border-radius: 14px;
                            padding: 9px 12px 11px; margin-bottom: 6px; }
        /* „attached"-Variante: docks die Card nahtlos an die vorherige an
           (keine Top-Border, keine obere Rundung, kein Top-Margin). Wird in
           der MA-Maske benutzt, um Adresse/Kontakt-Felder als Fortsetzung
           der Personalien-Card zu zeigen — ohne eigene Section-Headers. */
        .emp-field-grid.emp-grid-attached,
        .emp-field-grid-3.emp-grid-attached,
        .emp-field-grid-2.emp-grid-attached {
            margin-top: -7px;
            border-top: none;
            border-radius: 0 0 6px 6px;
            padding-top: 4px;
        }
        /* Anstellungs-Block: drei gleiche Spalten (Eintritt, Austritt, Aktiv). */
        .emp-field-grid-3.emp-grid-3col { grid-template-columns: repeat(3, 1fr); }
        /* Aufenthalt-Block: Bewilligungs-Text breit, Datums-Felder schmal —
           Walter-Vorgabe 06.06.2026: Bewilligung muss immer einzeilig sein. */
        .emp-field-grid-3.emp-grid-permit { grid-template-columns: 2fr 1fr 1fr; }
        .emp-field-grid-3.emp-grid-permit .emp-field-value {
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        /* Optionaler kleiner Hint UNTER dem Eingabe-Feld. Wird vom eField()-
           Helper gerendert, wenn ein dritter Parameter übergeben wird. So
           bleibt das Label einzeilig und alle Inputs liegen auf einer Linie. */
        .emp-field-hint {
            font-size: 10px; color: #94a3b8;
            padding: 2px 4px 0; line-height: 1.3;
            font-style: italic;
        }
        .emp-field {
            display: flex; flex-direction: column; gap: 2px;
            background: transparent; border: none; padding: 0;
            min-height: auto;
        }
        .emp-field-label {
            font-size: 9.5px; font-weight: 700; color: #475569;
            text-transform: uppercase; letter-spacing: 0.06em;
            padding-left: 2px; line-height: 1.2;
        }
        /* Wert-Container: WEISS auf grauem Card-Background mit DEUTLICHER
           Border + Schatten. Walter-Vorgabe 27.05.2026: Felder müssen klar
           sichtbar als Daten-Container erkennbar sein, nicht im Card-
           Background untergehen. */
        .emp-field-value {
            font-size: 13px; color: #0f172a; font-weight: 500;
            background: #fff; border: 1px solid #e2ddd3; border-radius: 9px;
            padding: 4px 9px; min-height: 27px;
            display: flex; align-items: center; gap: 6px;
            line-height: 1.2;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
            transition: border-color .12s, box-shadow .12s;
        }
        .emp-field-value:hover { border-color: #1a1a1a; box-shadow: 0 2px 4px rgba(60,55,48, 0.15); }
        .emp-field-value.empty { color: #94a3b8; font-style: italic; font-weight: 400; background: #faf8f5; border-color: #e7e1d8; border-style: dashed; box-shadow: none; }
        /* Sektions-Titel: kompakter blauer Akzent-Block, oben angedockt an
           die Card. */
        .emp-section-title {
            font-size: 10.5px; font-weight: 800; color: #5a5348; text-transform: uppercase;
            letter-spacing: 0.08em; margin: 10px 0 0;
            padding: 4px 0 4px 10px;
            border-left: 4px solid #1a1a1a;
            border-bottom: none;
            background: linear-gradient(to right, #ece9e2 0%, #f6f3ee 60%, transparent 90%);
            border-radius: 3px 3px 0 0;
        }
        .emp-section-title:first-child { margin-top: 0; }

        /* ── WIEDERVERWENDBARER LIQUID-GLASS-LOOK FÜR ERFASSUNGSMASKEN ──
           (Walter-Vorgabe 04.07.2026) — Klasse `liquid-mask` auf einer Seite
           mit .emp-*-Layout gibt ihr denselben warmen Glas-Look wie die
           MA-Maske. Höher-spezifische MA-Regeln (#page-mitarbeiter…) bleiben
           unberührt. */
        .page.liquid-mask {
            --emp-glass-bg: rgba(255,255,255,.38);
            --emp-glass-strong: rgba(255,255,255,.58);
            --emp-glass-field: rgba(255,255,255,.94);
            --emp-glass-border: rgba(255,255,255,.70);
            --emp-text-strong: #364152;
            --emp-text: #526071;
            --emp-text-soft: #8b96a5;
            --emp-shadow: 0 22px 70px rgba(70,64,55,.14), inset 0 1px 0 rgba(255,255,255,.58);
            background: linear-gradient(135deg, #f7f4ef 0%, #efebe3 48%, #faf8f5 100%);
            color: var(--emp-text);
        }
        /* Walter-Bug 16.07.2026 («warum ist der untere Bereich weiss?»):
           der Verlauf deckte nur die Inhaltshoehe — bei kurzen Seiten
           (z.B. Kuendigung) schien darunter das weisse .main durch.
           Aktive liquid-Seiten fuellen jetzt die volle Resthoehe. */
        .main > .page.liquid-mask.active { flex: 1 0 auto; }
        .liquid-mask .page-body { padding: 12px 14px 14px !important; }
        .liquid-mask .emp-layout { gap: 10px; height: calc(100vh - 86px); }
        .liquid-mask .emp-detail-panel {
            background: var(--emp-glass-bg);
            border: 1px solid var(--emp-glass-border);
            border-radius: 16px;
            box-shadow: var(--emp-shadow);
            backdrop-filter: blur(26px) saturate(160%);
            -webkit-backdrop-filter: blur(26px) saturate(160%);
        }
        .liquid-mask .emp-list-panel {
            background: var(--emp-glass-bg);
            border: 1px solid var(--emp-glass-border);
            border-radius: 16px;
            box-shadow: var(--emp-shadow);
            backdrop-filter: blur(26px) saturate(160%);
            -webkit-backdrop-filter: blur(26px) saturate(160%);
            overflow: hidden;
        }
        .liquid-mask .emp-search-input {
            border: 1px solid rgba(160,169,180,.30);
            background: rgba(255,255,255,.90);
            border-radius: 10px;
        }
        .liquid-mask .emp-tab {
            padding: 6px 13px;
            border: 1px solid transparent;
            border-radius: 10px;
            color: var(--emp-text);
            font-size: 12px;
            font-weight: 650;
        }
        .liquid-mask .emp-tab:hover { background: rgba(255,255,255,.38); color: var(--emp-text-strong); }
        .liquid-mask .emp-tab.active {
            background: rgba(255,255,255,.72);
            border-color: rgba(255,255,255,.64);
            color: #3f3f3f;
            box-shadow: 0 8px 22px rgba(72,63,53,.10), inset 0 1px 0 rgba(255,255,255,.74);
        }
        .liquid-mask .emp-detail-body { padding: 10px 16px 16px; }
        .liquid-mask .emp-section-title {
            margin: 12px 0 5px;
            padding: 0 0 0 3px;
            border-left: none;
            background: transparent;
            color: var(--emp-text-strong);
            font-size: 13px;
            letter-spacing: -.01em;
            text-transform: none;
            font-weight: 760;
        }
        /* Feld-Raster-Karte: warmes Glas statt slate-blauem #e2e8f0 */
        .liquid-mask .emp-field-grid,
        .liquid-mask .emp-field-grid-2,
        .liquid-mask .emp-field-grid-3 {
            background: rgba(255,255,255,.28);
            border: 1px solid rgba(255,255,255,.55);
            border-radius: 12px;
        }
        /* Anzeige-/Eingabefelder als warmes Glas (kein blauer Rand/Hover) */
        .liquid-mask .emp-field-label {
            color: var(--emp-text-soft);
        }
        .liquid-mask .emp-field-value {
            background: var(--emp-glass-field);
            border: 1px solid rgba(184,194,206,.34);
            border-radius: 8px;
            color: var(--emp-text-strong);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 8px 18px rgba(86,76,63,.08);
        }
        .liquid-mask .emp-field-value:hover {
            border-color: rgba(63,63,63,.30);
            background: rgba(255,255,255,.99);
            box-shadow: 0 0 0 3px rgba(120,110,95,.09), 0 8px 18px rgba(86,76,63,.08);
        }
        .liquid-mask .emp-field-value.empty {
            background: rgba(255,255,255,.34);
            border-color: rgba(166,176,188,.22);
            color: #a2acb8;
        }
        /* Buttons im Masken-Kontext: Kohle-Pille statt grellem Blau.
           Inline eingefärbte Buttons (z.B. grüne Speichern) bleiben unberührt. */
        .liquid-mask .btn-primary {
            background: #3f3f3f; border: none; color: #fff;
            border-radius: 12px; box-shadow: 0 6px 16px rgba(60,55,48,.18);
        }
        .liquid-mask .btn-primary:hover { background: #1a1a1a; }
        .liquid-mask .btn-outline, .liquid-mask .btn-secondary {
            background: rgba(255,255,255,.55);
            border: 1px solid rgba(255,255,255,.72);
            color: #3f3f3f; border-radius: 12px;
        }
        .liquid-mask .btn-outline:hover, .liquid-mask .btn-secondary:hover { background: rgba(255,255,255,.80); }
        /* Tabellen in Masken: weicher, ohne harte Linien */
        .liquid-mask .data-table th { color: var(--emp-text-soft); border-bottom: 1px solid rgba(90,80,66,.12); }
        .liquid-mask .data-table td { border-bottom: 1px solid rgba(90,80,66,.08); }
        body.theme-dark .page.liquid-mask {
            --emp-glass-bg: rgba(120,165,230,.10);
            --emp-glass-border: rgba(130,190,255,.38);
            --emp-text-strong: #f2f7ff;
            --emp-text: #d4e2f4;
            --emp-text-soft: #9eb6d4;
            background: var(--dlg-bg);
        }

        /* ── LIQUID GLASS: MITARBEITER-MASKE (Hell = Kohle + Tiefe) ──
           Walter 18.07.2026: dasselbe Prinzip wie Dark (Fill-Grad + Rim +
           gestaffelte Schatten), aber warmes Off-White / Kohle — kein
           Eisblau, kein Milch-Blur. */
        #page-mitarbeiter.liquid-employee {
            --emp-glass-bg: #f4f0e8;
            --emp-glass-strong: #faf7f2;
            --emp-glass-field: #ffffff;
            --emp-glass-border: rgba(255, 255, 255, 0.78);
            --emp-glass-inner: rgba(255, 255, 255, 0.72);
            --emp-text-strong: #2f2f2f;
            --emp-text: #4a4a4a;
            --emp-text-soft: #7a7a7a;
            --emp-blue: #3f3f3f;
            /* Opaker Innen-Verlauf = Volumen (analog Dark) */
            --emp-fill: #f4f0e8;
            --emp-fill-grad: linear-gradient(160deg,
                                #fffcf8 0%,
                                #f7f3eb 42%,
                                #efe9df 78%,
                                #e8e1d6 100%);
            /* Pearl/Kohle-Rim statt Eisblau */
            --emp-rim: linear-gradient(135deg,
                                rgba(255, 255, 255, 0.98) 0%,
                                rgba(210, 200, 185, 0.55) 35%,
                                rgba(120, 110, 95, 0.22) 62%,
                                rgba(255, 255, 255, 0.88) 100%);
            /* Gestaffelte Tiefe: Ring → Ambient → Drop → Bevel */
            --emp-shadow:
                0 0 0 1px rgba(90, 80, 65, 0.10),
                0 0 18px rgba(90, 80, 65, 0.06),
                0 4px 12px rgba(60, 55, 48, 0.08),
                0 16px 36px rgba(60, 55, 48, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.85),
                inset 0 -1px 0 rgba(90, 80, 65, 0.06);
            --emp-shadow-lift:
                0 0 0 1px rgba(90, 80, 65, 0.12),
                0 0 22px rgba(90, 80, 65, 0.08),
                0 6px 14px rgba(60, 55, 48, 0.10),
                0 20px 42px rgba(60, 55, 48, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.92),
                inset 0 -1px 0 rgba(90, 80, 65, 0.08);
            background:
                radial-gradient(ellipse 70% 50% at 85% -5%, rgba(255, 255, 255, 0.70) 0%, transparent 55%),
                radial-gradient(ellipse 55% 45% at 8% 100%, rgba(180, 165, 140, 0.14) 0%, transparent 55%),
                linear-gradient(160deg, #f6f3ee 0%, #efebe3 48%, #faf8f5 100%);
            color: var(--emp-text);
        }
        #page-mitarbeiter.liquid-employee .page-body {
            padding: 12px 14px 14px !important;
        }
        #page-mitarbeiter.liquid-employee .emp-layout,
        #page-mitarbeiter.liquid-employee .liquid-employee-layout-grid {
            gap: 12px;
            /* Bildschirm bis ganz unten nutzen (Walter 17.07.2026): page-body
               hat effektiv 12px oben + 14px unten (!important-Padding) —
               die frueheren 86px liessen unten einen weissen Streifen. */
            height: calc(100vh - 27px);
        }
        /* In-Page-Menü der Mitarbeiter-Seite ausgeblendet — die globale Sidebar
           übernimmt jetzt überall die Navigation (Walter 28.06.2026, kein Springen
           mehr). Elemente bleiben im DOM, damit Branch-JS nicht bricht. */
        #page-mitarbeiter.liquid-employee .liquid-employee-nav { display: none !important; }
        #page-mitarbeiter.liquid-employee .liquid-employee-nav-OLD {
            width: 132px;
            min-width: 132px;
            padding: 10px 8px;
            border: 1px solid var(--emp-glass-border);
            border-radius: 18px;
            background: rgba(255,255,255,.34);
            box-shadow: 0 18px 50px rgba(92,78,57,.12), inset 0 1px 0 rgba(255,255,255,.56);
            backdrop-filter: blur(24px) saturate(150%);
            -webkit-backdrop-filter: blur(24px) saturate(150%);
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 6px;
            overflow-y: auto;
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-brand { padding: 2px 2px 8px; }
        #page-mitarbeiter.liquid-employee .liquid-employee-brand .sidebar-logo { max-width: 116px; }
        #page-mitarbeiter.liquid-employee .liquid-employee-nav-btn {
            width: 100%;
            min-height: 46px;
            border: 1px solid rgba(255,255,255,.46);
            border-radius: 16px;
            padding: 7px 8px;
            background: rgba(255,255,255,.34);
            color: #626d78;
            display: grid;
            grid-template-columns: 28px 1fr;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            text-align: left;
            font: inherit;
            font-size: 11px;
            font-weight: 720;
            line-height: 1.12;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.50);
            transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-nav-btn:hover {
            transform: translateY(-1px);
            background: rgba(255,255,255,.58);
            color: var(--emp-text-strong);
            box-shadow: 0 10px 24px rgba(72,63,53,.10), inset 0 1px 0 rgba(255,255,255,.70);
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-nav-btn.active {
            background: rgba(219,234,254,.68);
            color: #245b92;
            border-color: rgba(147,197,253,.60);
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-nav-btn[hidden] {
            display: none;
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-nav-btn svg {
            width: 24px;
            height: 24px;
            stroke-width: 1.9;
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-nav-btn img.le-nav-img {
            width: 32px; height: 32px; object-fit: contain; mix-blend-mode: multiply;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-employee-nav-btn img.le-nav-img {
            mix-blend-mode: screen; filter: invert(1) brightness(1.12);
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-branch {
            padding: 6px 4px 8px;
            display: grid;
            gap: 4px;
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-branch[hidden] {
            display: none !important;
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-branch label {
            color: var(--emp-text-soft);
            font-size: 10px;
            font-weight: 760;
            padding-left: 4px;
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-branch-btn {
            width: 100%;
            min-height: 34px;
            border: 1px solid rgba(255,255,255,.42);
            border-radius: 14px;
            padding: 5px 8px;
            background: rgba(255,255,255,.30);
            color: var(--emp-text-strong);
            font: inherit;
            font-size: 11px;
            font-weight: 720;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 8px 20px rgba(72,63,53,.08);
            backdrop-filter: blur(18px) saturate(145%);
            -webkit-backdrop-filter: blur(18px) saturate(145%);
            display: grid;
            grid-template-columns: minmax(0,1fr) 14px;
            align-items: center;
            gap: 6px;
            text-align: left;
            cursor: pointer;
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-branch-btn span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #page-mitarbeiter.liquid-employee .liquid-employee-branch-btn svg {
            width: 14px;
            height: 14px;
        }
        /* Dropdown wird beim Öffnen an <body> portalt (siehe toggleLiquidEmployeeBranchMenu),
           damit es NICHT vom backdrop-filter + overflow der Glas-Nav eingefangen/abgeschnitten
           wird. Deshalb sind diese Regeln global (kein #page-mitarbeiter-Scope) und nutzen feste
           Farben statt der --emp-*-Variablen, die nur auf der Seite definiert sind. */
        .liquid-employee-branch-options {
            display: none;
            position: fixed;
            z-index: 3000;
            width: 230px;
            max-height: 340px;
            overflow-y: auto;
            border: 1px solid rgba(255,255,255,.42);
            border-radius: 18px;
            padding: 6px;
            background: rgba(255,255,255,.42);
            box-shadow: 0 18px 56px rgba(70,64,55,.20), inset 0 1px 0 rgba(255,255,255,.55);
            backdrop-filter: blur(28px) saturate(145%);
            -webkit-backdrop-filter: blur(28px) saturate(145%);
        }
        .liquid-employee-branch-options.open {
            display: grid;
            gap: 3px;
        }
        .liquid-employee-branch-option {
            border: 0;
            border-radius: 13px;
            padding: 8px 10px;
            background: transparent;
            color: #526071;
            font: inherit;
            font-size: 12px;
            font-weight: 680;
            text-align: left;
            cursor: pointer;
            display: grid;
            grid-template-columns: 16px minmax(0,1fr);
            gap: 7px;
            align-items: center;
        }
        .liquid-employee-branch-option:hover,
        .liquid-employee-branch-option.active {
            background: rgba(255,255,255,.48);
            color: #364152;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-employee-branch-btn,
        body.theme-dark .liquid-employee-branch-options {
            background: rgba(24,36,49,.54);
            border-color: rgba(122,145,165,.20);
            color: #cbd5e1;
        }
        body.theme-dark .liquid-employee-branch-option {
            color: #cbd5e1;
        }
        body.theme-dark .liquid-employee-branch-option:hover,
        body.theme-dark .liquid-employee-branch-option.active {
            background: rgba(255,255,255,.10);
            color: #f8fafc;
        }
        #page-mitarbeiter.liquid-employee .emp-list-panel,
        #page-mitarbeiter.liquid-employee .liquid-employee-list,
        #page-mitarbeiter.liquid-employee .emp-detail-panel {
            border: 1px solid transparent;
            border-radius: 16px;
            background-color: var(--emp-fill);
            background-image: var(--emp-fill-grad), var(--emp-rim);
            background-origin: padding-box, border-box;
            background-clip: padding-box, border-box;
            box-shadow: var(--emp-shadow);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        /* Liste etwas breiter (Walter 18.07.2026) — Platz sparsam aus Detail */
        #page-mitarbeiter.liquid-employee .emp-list-panel,
        #page-mitarbeiter.liquid-employee .liquid-employee-list {
            width: 278px;
            min-width: 278px;
            overflow: hidden;
        }
        /* «Neuer MA aus easy@work» = selber Weiss-Pill-Look wie #lsEmpSyncBtn */
        #page-mitarbeiter .emp-eaw-new-btn {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 6px 11px;
            font-size: 12px;
            font-weight: 600;
            font-family: inherit;
            color: #3f3f3f;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(60, 55, 48, 0.08);
            transition: transform .14s ease, box-shadow .14s ease;
        }
        #page-mitarbeiter .emp-eaw-new-btn img {
            width: 16px;
            height: 16px;
            object-fit: contain;
            flex-shrink: 0;
        }
        #page-mitarbeiter .emp-eaw-new-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(60, 55, 48, 0.14);
        }
        body.theme-dark #page-mitarbeiter .emp-eaw-new-btn {
            background: #fff;
            border-color: #e2e8f0;
            color: #3f3f3f;
        }
        #page-mitarbeiter.liquid-employee .emp-list-panel::before {
            content: "Mitarbeiter";
            display: block;
            padding: 14px 14px 8px;
            padding-right: 150px; /* Platz für «letzte Nr.» rechts daneben */
            font-size: 17px;
            font-weight: 760;
            letter-spacing: -.02em;
            color: var(--emp-text-strong);
        }
        /* Letzte vergebene Personalnummern der Filiale (Walter 12.07.2026) —
           Erfassungs-Hilfe für die fortlaufende Nummernvergabe. Inhalt kommt
           per data-lastnums aus applyEmpFilter (employees.js) — eine Zeile. */
        #page-mitarbeiter.liquid-employee .emp-list-panel { position: relative; }
        #page-mitarbeiter.liquid-employee .emp-list-panel::after {
            content: attr(data-lastnums);
            position: absolute;
            top: 16px;
            right: 12px;
            max-width: 58%;
            font-size: 10px;
            font-weight: 600;
            line-height: 1.2;
            color: #8b8b8b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: right;
            pointer-events: none;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-list-panel::after { color: #a9a294; }
        /* ── Liquid-Select (Walter-Vorgabe 13.07.2026) ─────────────────────
           Generisches Liquid-Glass-Dropdown als Ersatz für native Selects
           (js/liquid-select.js). Original-Select bleibt versteckt im DOM. */
        .lqsel-wrap { position: relative; display: inline-block; min-width: 140px; max-width: 100%; vertical-align: middle; }
        .lqsel-btn {
            display: inline-flex; align-items: center; justify-content: space-between;
            gap: 10px; width: 100%;
            background: rgba(255,255,255,0.55);
            border: 1px solid rgba(139,139,139,0.35);
            border-radius: 12px;
            padding: 8px 14px;
            font-size: 13px; font-weight: 600; color: #3f3f3f;
            cursor: pointer; text-align: left;
            transition: background .15s, box-shadow .15s;
        }
        .lqsel-btn:hover { background: rgba(255,255,255,0.8); box-shadow: 0 2px 8px rgba(60,55,48,0.14); }
        .lqsel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
        .lqsel-chev { flex-shrink: 0; color: #8b8b8b; font-size: 11px; }
        .lqsel-panel {
            position: absolute; top: calc(100% + 4px); left: 0; z-index: 3000;
            min-width: 100%; max-height: 340px; overflow-y: auto;
            background: #faf8f5;
            border: 1px solid rgba(255,255,255,0.62);
            border-radius: 12px;
            box-shadow: 0 16px 40px rgba(60,55,48,0.22);
            padding: 6px;
        }
        .lqsel-group {
            padding: 8px 10px 3px;
            font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
            text-transform: uppercase; color: #8b8b8b;
        }
        .lqsel-opt {
            padding: 8px 12px; border-radius: 8px;
            font-size: 13px; color: #3f3f3f; cursor: pointer;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .lqsel-opt:hover { background: #ece9e2; }
        .lqsel-opt.sel { font-weight: 700; }
        .lqsel-opt.sel::before { content: "✓ "; color: #6b7280; }
        .lqsel-opt.dis { color: #b8b2a7; cursor: default; }
        body.theme-dark .lqsel-btn { color: var(--dlg-text-strong) !important; }
        body.theme-dark .lqsel-btn:hover {
            background-image: var(--dlg-fill), var(--dlg-rim) !important;
        }
        body.theme-dark .lqsel-panel {
            border: 1px solid transparent !important;
            background-image: var(--dlg-fill-strong), var(--dlg-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow: var(--dlg-shadow), 0 18px 40px rgba(0,10,40,.45) !important;
            color: var(--dlg-text);
        }
        body.theme-dark .lqsel-group { color: var(--dlg-text-soft); }
        body.theme-dark .lqsel-opt { color: var(--dlg-text); }
        body.theme-dark .lqsel-opt:hover { background: rgba(120,170,240,.16); }

        /* Drehender Spinner im «easy@work synchronisieren»-Button
           (Walter-Vorgabe 13.07.2026) — sichtbares Laufzeichen. */
        .eaw-spin {
            display: inline-block;
            width: 13px;
            height: 13px;
            border: 2px solid rgba(63,63,63,0.25);
            border-top-color: #3f3f3f;
            border-radius: 50%;
            animation: eawspin 0.8s linear infinite;
            vertical-align: -2px;
        }
        @keyframes eawspin { to { transform: rotate(360deg); } }
        body.theme-dark .eaw-spin {
            border-color: rgba(239,233,220,0.25);
            border-top-color: #efe9dc;
        }
        #page-mitarbeiter.liquid-employee .emp-list-search {
            padding: 10px 12px 8px;
            border-bottom: none;
        }
        #page-mitarbeiter.liquid-employee .emp-search-input {
            height: 31px;
            border: 1px solid rgba(160,169,180,.30);
            border-radius: 10px;
            background-color: rgba(255,255,255,.42);
            color: var(--emp-text-strong);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 6px 18px rgba(75,67,56,.06);
        }
        #page-mitarbeiter.liquid-employee .emp-search-input:focus {
            border-color: rgba(63,63,63,.42);
            background-color: rgba(255,255,255,.70);
            box-shadow: 0 0 0 3px rgba(63,63,63,.10);
        }
        #page-mitarbeiter.liquid-employee #empFilterAktiv,
        #page-mitarbeiter.liquid-employee #empFilterInaktiv,
        #page-mitarbeiter.liquid-employee #empFilterAlle {
            border-radius: 10px !important;
            background: rgba(255,255,255,.38) !important;
            color: var(--emp-text) !important;
            border: 1px solid rgba(255,255,255,.42) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
        }
        #page-mitarbeiter.liquid-employee #empFilterAktiv[style*="color:white"],
        #page-mitarbeiter.liquid-employee #empFilterInaktiv[style*="color:white"],
        #page-mitarbeiter.liquid-employee #empFilterAlle[style*="color:white"] {
            background: rgba(255,255,255,.72) !important;
            color: var(--emp-text-strong) !important;
            box-shadow: 0 8px 24px rgba(78,68,55,.10), inset 0 1px 0 rgba(255,255,255,.72);
        }
        #page-mitarbeiter.liquid-employee #empSpecialFilter,
        #page-mitarbeiter.liquid-employee #empExitDateAfter {
            border-radius: 10px !important;
            border-color: rgba(160,169,180,.28) !important;
            background: rgba(255,255,255,.45) !important;
            color: var(--emp-text) !important;
        }
        #page-mitarbeiter.liquid-employee .emp-list-scroll {
            padding: 2px 6px 12px;
        }
        #page-mitarbeiter.liquid-employee .emp-list-item,
        #page-mitarbeiter.liquid-employee .liquid-employee-row {
            min-height: 30px;
            gap: 5px;
            padding: 5px 6px;
            border: 1px solid transparent;
            border-bottom: none;
            border-radius: 10px;
            color: var(--emp-text);
        }
        #page-mitarbeiter.liquid-employee .emp-list-item:hover,
        #page-mitarbeiter.liquid-employee .liquid-employee-row:hover {
            background: rgba(255,255,255,.38);
            border-color: rgba(255,255,255,.44);
        }
        #page-mitarbeiter.liquid-employee .emp-list-item.active,
        #page-mitarbeiter.liquid-employee .liquid-employee-row-active {
            /* Kohle-Aktiv statt Hellblau — passt zum Hell-Kohle-Look */
            background: rgba(63, 63, 63, 0.10);
            border-left: 3px solid #3f3f3f;
            border-color: rgba(63, 63, 63, 0.18);
            box-shadow: 0 6px 16px rgba(60, 55, 48, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70);
        }
        #page-mitarbeiter.liquid-employee .emp-list-panel .emp-avatar,
        #page-mitarbeiter.liquid-employee .emp-list-nr {
            display: none;
        }
        #page-mitarbeiter.liquid-employee .emp-list-name {
            font-size: 13.5px;
            font-weight: 680;
            color: var(--emp-text-strong);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #page-mitarbeiter.liquid-employee .emp-model-badge,
        #page-mitarbeiter.liquid-employee .liquid-contract-pill {
            min-width: 32px;
            text-align: center;
            padding: 2px 5px !important;
            border-radius: 999px !important;
            font-size: 9.5px !important;
            line-height: 1.15;
            border: 1px solid rgba(255,255,255,.55);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
        }
        #page-mitarbeiter.liquid-employee .emp-detail-panel,
        #page-mitarbeiter.liquid-employee .liquid-employee-detail {
            overflow: hidden;
        }
        /* .emp-detail-header (Gradient-Variante) entfernt 22.07.2026 — Gewinner ist der
           Karten-Block weiter unten (padding/background/border dort, border-bottom:0 !important). */
        #page-mitarbeiter.liquid-employee #empDetailPhoto {
            width: 112px !important;
            height: 112px !important;
            font-size: 36px !important;
            border: 2px solid rgba(255,255,255,.72);
            box-shadow: 0 15px 36px rgba(72,63,53,.18), inset 0 1px 0 rgba(255,255,255,.60);
        }
        #page-mitarbeiter.liquid-employee .emp-detail-name {
            font-size: 17px;
            font-weight: 780;
            letter-spacing: -.02em;
            color: var(--emp-text-strong);
        }
        #page-mitarbeiter.liquid-employee .emp-detail-meta {
            font-size: 12px;
            color: var(--emp-text-soft);
            margin-top: 6px;
        }
        #page-mitarbeiter.liquid-employee #empNumberAliases span {
            background: transparent !important;
            border-color: transparent !important;
        }
        #page-mitarbeiter.liquid-employee .emp-old-number {
            display: inline-flex;
            align-items: center;
            margin-left: 2px;
            color: #94a3b8;
            font-size: 13px;
            font-weight: 650;
            letter-spacing: 0;
        }
        #page-mitarbeiter.liquid-employee .btn-emp-edit,
        #page-mitarbeiter.liquid-employee .btn-emp-add {
            border-radius: 10px !important;
            background: rgba(255,255,255,.55) !important;
            color: var(--emp-text-strong) !important;
            border: 1px solid rgba(255,255,255,.62) !important;
            box-shadow: 0 10px 26px rgba(72,63,53,.09), inset 0 1px 0 rgba(255,255,255,.62);
        }
        #page-mitarbeiter.liquid-employee .btn-emp-edit.btn-postfach {
            background: rgba(255,255,255,.52) !important;
            color: var(--emp-text) !important;
        }
        #page-mitarbeiter.liquid-employee .btn-emp-edit.btn-edit-blue {
            background: rgba(255,255,255,.62) !important;
            color: #455264 !important;
        }
        #page-mitarbeiter.liquid-employee .btn-emp-edit:hover,
        #page-mitarbeiter.liquid-employee .btn-emp-add:hover {
            transform: translateY(-1px);
            background: rgba(255,255,255,.72) !important;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-tabs {
            margin-top: 12px;
            padding: 5px;
            gap: 4px;
            border: 1px solid rgba(255,255,255,.48);
            border-radius: 13px;
            background: rgba(255,255,255,.24);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
        }
        #page-mitarbeiter.liquid-employee .emp-tab {
            padding: 6px 13px;
            border: 1px solid transparent;
            border-radius: 10px;
            color: var(--emp-text);
            font-size: 11px;
            font-weight: 650;
        }
        #page-mitarbeiter.liquid-employee .emp-tab:hover {
            background: rgba(255,255,255,.38);
            color: var(--emp-text-strong);
        }
        /* .emp-tab.active (weisse Pille) entfernt 22.07.2026 — Gewinner: Kohle-Pille (!important) weiter unten. */
        #page-mitarbeiter.liquid-employee .emp-detail-body {
            padding: 8px 12px 12px;
            background: transparent;
        }
        #page-mitarbeiter.liquid-employee .emp-section-title {
            /* Hell: weiche Kohle-Leiste (Walter 18.07.2026) — kein hartes
               Schwarz mehr; analog Dark als sanfter Verlauf, Text Kohle. */
            margin: 7px 0 5px;
            padding: 5px 12px;
            border-left: none;
            border-top: none;
            border-radius: 8px;
            background: linear-gradient(90deg,
                rgba(90, 80, 65, 0.14) 0%,
                rgba(90, 80, 65, 0.05) 55%,
                transparent 100%);
            color: #3f3f3f;
            font-size: 12.5px;
            letter-spacing: .02em;
            text-transform: none;
            font-weight: 720;
        }
        #page-mitarbeiter.liquid-employee .emp-section-title:first-child {
            margin-top: 2px;
        }
        /* Hinweis-Text in der Leiste */
        #page-mitarbeiter.liquid-employee .emp-section-title span span {
            color: rgba(63, 63, 63, 0.55) !important;
        }
        /* Buttons in der Section-Leiste (z.B. + Schwangerschaft) */
        #page-mitarbeiter.liquid-employee .emp-section-title .btn-emp-add {
            background: #ffffff !important;
            color: #3f3f3f !important;
            border: 1px solid rgba(90, 80, 65, 0.22) !important;
            box-shadow: 0 2px 8px rgba(60, 55, 48, 0.08) !important;
        }
        /* Dark Section-Titel: siehe Mockup-Block weiter unten (Eisblau-Label) */
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-section-title span span {
            color: rgba(200, 225, 250, 0.55) !important;
        }
        #page-mitarbeiter.liquid-employee .emp-field-grid,
        #page-mitarbeiter.liquid-employee .emp-field-grid-2,
        #page-mitarbeiter.liquid-employee .emp-field-grid-3 {
            background: rgba(255,255,255,.20);
            border: 1px solid rgba(255,255,255,.42);
            border-radius: 12px;
            padding: 8px 9px;
            gap: 7px 9px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 10px 30px rgba(83,72,60,.05);
        }
        #page-mitarbeiter.liquid-employee .emp-field-grid-3 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        #page-mitarbeiter.liquid-employee .emp-field-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        #page-mitarbeiter.liquid-employee .emp-field-grid[style*="grid-template-columns"] {
            grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
            gap: 7px 9px !important;
        }
        #page-mitarbeiter.liquid-employee .emp-grid-attached {
            margin-top: -7px !important;
            padding-top: 8px !important;
            border-top: 1px solid rgba(255,255,255,.38) !important;
            border-radius: 12px !important;
        }
        #page-mitarbeiter.liquid-employee .easywork-info-grid {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
        }
        #page-mitarbeiter.liquid-employee .easywork-info-grid.emp-grid-attached {
            border-top-color: transparent !important;
        }
        #page-mitarbeiter.liquid-employee .emp-identity-grid {
            margin-bottom: 3px;
        }
        #page-mitarbeiter.liquid-employee .emp-identity-grid .emp-field-value.easywork-info,
        #page-mitarbeiter.liquid-employee .emp-identity-grid .ef-input[readonly],
        #page-mitarbeiter.liquid-employee .emp-identity-grid .ef-input:disabled {
            font-size: 20px;
            line-height: 1.15;
            font-weight: 850;
            color: var(--emp-text-strong);
            letter-spacing: -.02em;
        }
        #page-mitarbeiter.liquid-employee .emp-identity-grid .emp-field-label {
            font-size: 10px;
        }
        #page-mitarbeiter.liquid-employee .emp-identity-subgrid {
            margin-bottom: 18px;
        }
        #page-mitarbeiter.liquid-employee .emp-identity-subgrid .emp-field-value.easywork-info,
        #page-mitarbeiter.liquid-employee .emp-identity-subgrid .ef-input[readonly],
        #page-mitarbeiter.liquid-employee .emp-identity-subgrid .ef-input:disabled {
            font-size: 14px;
            font-weight: 760;
        }
        #page-mitarbeiter.liquid-employee .emp-personal-main-line .emp-field-value,
        #page-mitarbeiter.liquid-employee .emp-personal-main-line .ef-input,
        #page-mitarbeiter.liquid-employee .emp-address-line .emp-field-value,
        #page-mitarbeiter.liquid-employee .emp-address-line .ef-input {
            min-height: 22px;
            padding-top: 2px;
            padding-bottom: 2px;
        }
        #page-mitarbeiter.liquid-employee .emp-flow-line {
            display: flex !important;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 5px 10px !important;
        }
        #page-mitarbeiter.liquid-employee .emp-flow-line .emp-field {
            flex: 0 0 auto;
            min-width: 0;
        }
        #page-mitarbeiter.liquid-employee .emp-flow-line .emp-field-label,
        #page-mitarbeiter.liquid-employee .emp-flow-line .emp-field-value.easywork-info {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #page-mitarbeiter.liquid-employee .emp-flow-line .ef-input {
            width: 100%;
            box-sizing: border-box;
        }
        #page-mitarbeiter.liquid-employee .emp-personal-main-line .emp-field:nth-child(1) { width: 72px; }
        #page-mitarbeiter.liquid-employee .emp-personal-main-line .emp-field:nth-child(2) { width: 250px; }
        #page-mitarbeiter.liquid-employee .emp-personal-main-line .emp-field:nth-child(3) { width: 185px; }
        #page-mitarbeiter.liquid-employee .emp-personal-main-line .emp-field:nth-child(4) { width: 165px; }
        #page-mitarbeiter.liquid-employee .emp-personal-main-line .emp-field:nth-child(5) { width: 105px; }
        #page-mitarbeiter.liquid-employee .emp-address-line .emp-field:nth-child(1) { width: 250px; }
        #page-mitarbeiter.liquid-employee .emp-address-line .emp-field:nth-child(2) { width: 70px; }
        #page-mitarbeiter.liquid-employee .emp-address-line .emp-field:nth-child(3) { width: 170px; }
        #page-mitarbeiter.liquid-employee .emp-address-line .emp-field:nth-child(4) { width: 150px; }
        #page-mitarbeiter.liquid-employee .emp-address-line .emp-field:nth-child(5) { width: 58px; }
        /* Zivilstand-Zeile (Walter 17.07.2026): Nationalitaet flexibel, damit
           auch lange Laendernamen Platz haben; Zivilstand wachsend (groessere
           Read-only-Schrift + Doku-Button), Datum/Konfession/ZEMIS fix. */
        #page-mitarbeiter.liquid-employee .emp-personal-extra-line .emp-field:nth-child(1) { width: auto; min-width: 160px; flex: 0 1 auto; }
        #page-mitarbeiter.liquid-employee .emp-personal-extra-line .emp-field:nth-child(2) { width: 155px; }
        #page-mitarbeiter.liquid-employee .emp-personal-extra-line .emp-field:nth-child(3) { width: 150px; }
        #page-mitarbeiter.liquid-employee .emp-personal-extra-line .emp-field:nth-child(4) { width: auto; min-width: 260px; flex: 1 1 auto; }
        #page-mitarbeiter.liquid-employee .emp-personal-extra-line .emp-field:nth-child(5) { width: 200px; flex: 0 0 auto; }
        #page-mitarbeiter.liquid-employee .emp-personal-extra-line .emp-field:nth-child(4) .emp-field-value {
            white-space: nowrap;
        }
        #page-mitarbeiter.liquid-employee .emp-contact-line .emp-field:nth-child(1) { width: 150px; }
        #page-mitarbeiter.liquid-employee .emp-contact-line .emp-field:nth-child(2) { width: 150px; }
        #page-mitarbeiter.liquid-employee .emp-contact-line .emp-field:nth-child(3) { width: 280px; }
        #page-mitarbeiter.liquid-employee .emp-employment-line {
            gap: 3px 10px !important;
            padding-top: 1px !important;
            padding-bottom: 1px !important;
        }
        #page-mitarbeiter.liquid-employee .emp-employment-line .emp-field:nth-child(1) { width: 120px; }
        #page-mitarbeiter.liquid-employee .emp-employment-line .emp-field:nth-child(2) { width: 68px; }
        #page-mitarbeiter.liquid-employee .emp-employment-line .emp-field:nth-child(3) { width: 82px; }
        #page-mitarbeiter.liquid-employee .emp-employment-line .emp-field-value,
        #page-mitarbeiter.liquid-employee .emp-employment-line .ef-input {
            min-height: 20px;
            padding-top: 1px;
            padding-bottom: 1px;
        }
        #page-mitarbeiter.liquid-employee .emp-employment-line .emp-field-value {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
            padding-left: 0;
        }
        #page-mitarbeiter.liquid-employee .emp-yesno-select {
            appearance: none;
            -webkit-appearance: none;
            min-height: 24px !important;
            padding: 3px 24px 3px 10px !important;
            border-radius: 13px !important;
            border: 1px solid rgba(255,255,255,.42) !important;
            background:
                linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.14)),
                url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%23475569' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 7px !important;
            color: var(--emp-text-strong) !important;
            font-weight: 800;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 8px 18px rgba(72,63,53,.08) !important;
            cursor: pointer;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-yesno-select {
            background:
                linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
                url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%23cbd5e1' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 7px !important;
            border-color: rgba(122,145,165,.22) !important;
        }
        /* ja/nein: aktiver Zustand als Kohle-Pille (Walter 17.07.2026) —
           weiss-auf-hell war auf der Übersicht-Karte kaum sichtbar. */
        #page-mitarbeiter.liquid-employee .emp-yesno-toggle {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 3px;
            border: 1px solid rgba(60,55,48,.16);
            border-radius: 15px;
            background: #f0ece4;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
        }
        #page-mitarbeiter.liquid-employee .emp-yesno-toggle button {
            border: 0;
            border-radius: 12px;
            background: transparent;
            color: #8b8b8b;
            font: inherit;
            font-size: 12px;
            font-weight: 760;
            line-height: 1;
            padding: 6px 12px;
            cursor: pointer;
        }
        #page-mitarbeiter.liquid-employee .emp-yesno-toggle button.active {
            background: #3f3f3f;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(60,55,48,.18);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-yesno-toggle {
            background: rgba(255,255,255,.08);
            border-color: rgba(122,145,165,.28);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-yesno-toggle button {
            color: #94a3b8;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-yesno-toggle button.active {
            background: #e8e4dc;
            color: #1a1a1a;
            box-shadow: 0 4px 12px rgba(0,0,0,.22);
        }
        /* Walter 16.07.2026: Gruen ist nicht die Standard-Farbe — Inline-
           Speichern als Kohle-Pille (Liquid-Glass-Palette, wie Primaer-Buttons). */
        #page-mitarbeiter.liquid-employee .emp-inline-save {
            margin: 6px 0 2px;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 12px;
            padding: 8px 20px;
            background: #3f3f3f;
            color: #ffffff;
            font: inherit;
            font-size: 12.5px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 10px 24px rgba(60,55,48,.22);
        }
        #page-mitarbeiter.liquid-employee .emp-inline-save:hover {
            transform: translateY(-1px);
            background: #1a1a1a;
        }
        #page-mitarbeiter.liquid-employee .emp-personal-main-line .emp-field-label,
        #page-mitarbeiter.liquid-employee .emp-address-line .emp-field-label,
        #page-mitarbeiter.liquid-employee .emp-employment-line .emp-field-label {
            margin-bottom: 1px;
        }
        #page-mitarbeiter.liquid-employee .emp-field-label,
        #page-mitarbeiter.liquid-employee .liquid-field .emp-field-label {
            color: #7a8694;
            font-size: 9px;
            letter-spacing: .02em;
            text-transform: none;
            font-weight: 700;
            line-height: 1.05;
        }
        #page-mitarbeiter.liquid-employee .emp-field-value,
        #page-mitarbeiter.liquid-employee .liquid-field .emp-field-value {
            min-height: 29px;
            padding: 5px 9px;
            border-radius: 8px;
            background: var(--emp-glass-field);
            border: 1px solid rgba(184,194,206,.34);
            color: var(--emp-text-strong);
            font-size: 12px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 8px 18px rgba(86,76,63,.08);
        }
        #page-mitarbeiter.liquid-employee .emp-field-value:hover,
        #page-mitarbeiter.liquid-employee .liquid-field .emp-field-value:hover {
            border-color: rgba(63,63,63,.32);
            background: rgba(255,255,255,.98);
            box-shadow: 0 0 0 3px rgba(63,63,63,.07), 0 8px 18px rgba(86,76,63,.08);
        }
        #page-mitarbeiter.liquid-employee .emp-field-value.easywork-info,
        #page-mitarbeiter.liquid-employee .emp-field-value.easywork-info:hover {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
            color: var(--emp-text-strong);
            padding-left: 0;
        }
        #page-mitarbeiter.liquid-employee .emp-field-value.empty {
            background: rgba(255,255,255,.32);
            border-color: rgba(166,176,188,.22);
            color: #a2acb8;
        }
        #page-mitarbeiter.liquid-employee .emp-field-value.easywork-info.empty {
            background: transparent;
            border-color: transparent;
            color: var(--emp-text-soft);
        }
        #page-mitarbeiter.liquid-employee .emp-contract-strip {
            margin: 8px 0 2px;
            border: 1px solid rgba(255,255,255,.48);
            border-radius: 13px;
            background: rgba(255,255,255,.28);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 8px 24px rgba(83,72,60,.06);
            overflow: hidden;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-strip.empty {
            padding: 8px 10px;
            color: var(--emp-text-soft);
            font-size: 12px;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-head {
            /* Invertiert wie .emp-section-title (Walter 17.07.2026) */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 12px;
            background: #3f3f3f;
            color: #ffffff;
            font-size: 12.5px;
            font-weight: 720;
            letter-spacing: .02em;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-scroll {
            max-height: 112px;
            overflow-y: auto;
            padding: 0 6px 6px;
            display: grid;
            gap: 5px;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 2px 8px;
            align-items: center;
            padding: 6px 8px;
            border: 1px solid rgba(166,176,188,.18);
            border-radius: 10px;
            background: rgba(255,255,255,.46);
        }
        #page-mitarbeiter.liquid-employee .emp-contract-main {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-model,
        #page-mitarbeiter.liquid-employee .emp-contract-status {
            flex-shrink: 0;
            padding: 2px 7px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 760;
            background: rgba(219,234,254,.68);
            color: #245b92;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-status {
            background: rgba(241,245,249,.72);
            color: #64748b;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-status.active {
            background: rgba(220,252,231,.78);
            color: #166534;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-title {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--emp-text-strong);
            font-size: 12px;
            font-weight: 720;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-meta {
            grid-column: 1;
            color: var(--emp-text-soft);
            font-size: 11px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-actions {
            grid-column: 2;
            grid-row: 1 / span 2;
            display: flex;
            gap: 5px;
        }
        #page-mitarbeiter.liquid-employee .emp-contract-btn {
            border: 1px solid rgba(147,197,253,.52);
            border-radius: 8px;
            background: rgba(239,246,255,.70);
            color: #6b7280;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 720;
            cursor: pointer;
        }
        #page-mitarbeiter.liquid-employee .emp-placeholder,
        #page-mitarbeiter.liquid-employee .emp-no-selection {
            color: var(--emp-text-soft);
        }
        #page-mitarbeiter.liquid-employee .sticky-section-head,
        #page-mitarbeiter.liquid-employee .sticky-top-bars,
        #page-mitarbeiter.liquid-employee .sticky-status-bar {
            background: rgba(255,255,255,.54);
            backdrop-filter: blur(18px) saturate(150%);
            -webkit-backdrop-filter: blur(18px) saturate(150%);
        }
        #page-mitarbeiter.liquid-employee .ef-input {
            width: 100%;
            min-height: 25px;
            padding: 3px 7px;
            border-radius: 7px;
            border: 1px solid rgba(184,194,206,.34);
            background: rgba(255,255,255,.96);
            color: var(--emp-text-strong);
            font: inherit;
            font-size: 12px;
            outline: none;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 6px 14px rgba(70,64,55,.06);
        }
        #page-mitarbeiter.liquid-employee .emp-field-value:has(.ef-input:not([readonly]):not(:disabled)) {
            background: rgba(255,255,255,.82);
            border-color: rgba(184,194,206,.38);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 22px rgba(66,75,88,.10);
        }
        #page-mitarbeiter.liquid-employee .emp-field-value:has(.ef-input[data-easywork-locked]) {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
        }
        #page-mitarbeiter.liquid-employee .ef-input:focus {
            border-color: rgba(63,63,63,.46);
            background: rgba(255,255,255,.86);
            box-shadow: 0 0 0 3px rgba(63,63,63,.10), inset 0 1px 0 rgba(255,255,255,.70);
        }
        #page-mitarbeiter.liquid-employee .ef-input[readonly],
        #page-mitarbeiter.liquid-employee .ef-input:disabled {
            cursor: not-allowed;
            opacity: 1;
            color: var(--emp-text);
            background: transparent;
            border-color: transparent;
            box-shadow: none;
            padding-left: 0;
        }
        #page-mitarbeiter.liquid-employee #empHeaderActions .btn-primary,
        #page-mitarbeiter.liquid-employee #empHeaderActions .btn-secondary {
            border-radius: 10px !important;
            border: 1px solid rgba(255,255,255,.62) !important;
            box-shadow: 0 10px 26px rgba(72,63,53,.09), inset 0 1px 0 rgba(255,255,255,.62);
        }

        body.theme-dark #page-mitarbeiter.liquid-employee {
            --emp-glass-bg: var(--dlg-fill);
            --emp-glass-strong: var(--dlg-fill-strong);
            --emp-glass-field: var(--dlg-fill-field);
            --emp-glass-border: var(--dlg-glass-border);
            --emp-glass-inner: var(--dlg-glass-inner);
            --emp-text-strong: #ffffff;
            --emp-text: #e4eef8;
            --emp-text-soft: #a4bbd4;
            --emp-shadow: var(--dlg-shadow);
            background: var(--dlg-bg);
            background-attachment: fixed;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-list-panel,
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-employee-nav,
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-employee-list,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-panel,
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-employee-detail {
            border: 1px solid transparent !important;
            background-color: var(--dlg-fill) !important;
            background-image: var(--dlg-fill-grad), var(--dlg-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            color: var(--emp-text) !important;
            box-shadow: var(--dlg-shadow) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        /* Innenraster rahmenlos — Karten-Look kommt von .ov-card / Panels */
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-tabs,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-grid,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-grid-2,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-grid-3 {
            background: transparent !important;
            border-color: transparent !important;
            color: var(--emp-text) !important;
            box-shadow: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-header {
            background: var(--dlg-fill-strong) !important;
            border-color: transparent !important;
            color: var(--emp-text) !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-employee-nav-btn {
            border: 1px solid rgba(120, 170, 230, 0.16) !important;
            background: rgba(14, 26, 44, 0.55) !important;
            background-image: none !important;
            color: var(--emp-text-soft);
            box-shadow: none;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-employee-nav-btn:hover {
            background: rgba(22, 40, 66, 0.72) !important;
            color: #ffffff;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-employee-nav-btn.active {
            border: 1px solid rgba(120, 175, 235, 0.36) !important;
            background: rgba(40, 90, 160, 0.42) !important;
            background-image: none !important;
            color: #ffffff;
            box-shadow: none;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-body {
            background: transparent;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-search-input,
        body.theme-dark #page-mitarbeiter.liquid-employee #empSpecialFilter,
        body.theme-dark #page-mitarbeiter.liquid-employee #empExitDateAfter {
            border: 1px solid rgba(120, 170, 230, 0.22) !important;
            background: rgba(8, 18, 34, 0.88) !important;
            background-image: none !important;
            color: #ffffff !important;
            box-shadow: none;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee #empFilterAktiv,
        body.theme-dark #page-mitarbeiter.liquid-employee #empFilterInaktiv,
        body.theme-dark #page-mitarbeiter.liquid-employee #empFilterAlle,
        body.theme-dark #page-mitarbeiter.liquid-employee .btn-emp-edit,
        body.theme-dark #page-mitarbeiter.liquid-employee .btn-emp-add {
            border: 1px solid rgba(120, 170, 230, 0.22) !important;
            background: rgba(14, 26, 44, 0.65) !important;
            background-image: none !important;
            color: var(--emp-text) !important;
            box-shadow: none;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee #empFilterAktiv[style*="color:white"],
        body.theme-dark #page-mitarbeiter.liquid-employee #empFilterInaktiv[style*="color:white"],
        body.theme-dark #page-mitarbeiter.liquid-employee #empFilterAlle[style*="color:white"] {
            border: 1px solid rgba(120, 175, 235, 0.36) !important;
            background: rgba(40, 90, 160, 0.45) !important;
            background-image: none !important;
            color: #ffffff !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-list-name,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-name {
            color: var(--emp-text-strong) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-list-item:hover {
            background: rgba(255,255,255,.06) !important;
            border-color: rgba(122,145,165,.18) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-list-item.active {
            background: rgba(45, 100, 175, 0.42) !important;
            border-color: rgba(145, 200, 255, 0.36) !important;
            box-shadow: inset 0 1px 0 rgba(210, 235, 255, 0.12);
        }
        /* Section-Titel: weiches Eisblau-Label (Mockup), keine helle Platte */
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-section-title {
            color: #c5dff5 !important;
            background: linear-gradient(90deg, rgba(70, 130, 200, 0.18) 0%, transparent 78%) !important;
            border-top: none !important;
            border-radius: 8px !important;
            padding: 5px 12px !important;
            font-weight: 720 !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-label {
            color: #93a8c0 !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value,
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-field .emp-field-value {
            border: 1px solid rgba(140, 195, 245, 0.22) !important;
            background: rgba(6, 16, 32, 0.52) !important;
            background-image: none !important;
            color: #ffffff !important;
            box-shadow: inset 0 1px 0 rgba(200, 230, 255, 0.06);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value:hover {
            border-color: rgba(140, 195, 245, 0.30) !important;
            background: rgba(10, 22, 40, 0.65) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value.easywork-info,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value.easywork-info:hover {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
            color: var(--emp-text-strong) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value.empty {
            background: rgba(255,255,255,.04) !important;
            color: #8a9aab !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value.easywork-info.empty {
            background: transparent !important;
            border-color: transparent !important;
            color: var(--emp-text-soft) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-contract-strip {
            border: 1px solid transparent !important;
            background-image: var(--dlg-fill), var(--dlg-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow: var(--dlg-shadow);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-contract-head {
            background: linear-gradient(90deg, rgba(130,180,255,.22), rgba(90,140,210,.12));
            color: #eaf4ff;
            border-color: rgba(140,200,255,.28);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-contract-row {
            border: 1px solid transparent !important;
            background-image: var(--dlg-fill-field), var(--dlg-rim-soft) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .ef-input {
            /* Rim über globale Input-Regel */
            color: var(--emp-text-strong);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value:has(.ef-input:not([readonly]):not(:disabled)) {
            background-image: var(--dlg-fill), var(--dlg-rim) !important;
            box-shadow: inset 0 1px 0 rgba(210,235,255,.20), 0 0 12px rgba(80,150,255,.10);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value:has(.ef-input[data-easywork-locked]) {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .ef-input:focus {
            background: rgba(255,255,255,.12);
            border-color: rgba(150,190,230,.44);
            box-shadow: 0 0 0 3px rgba(120,170,220,.16);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .ef-input[readonly],
        body.theme-dark #page-mitarbeiter.liquid-employee .ef-input:disabled {
            color: var(--emp-text);
            background: transparent;
            border-color: transparent;
            box-shadow: none;
        }

        /* ══ SCHLICHTE EDIT-FELDER IM MA-DETAIL (Walter 17.07.2026) ══
           Die editierbaren Inline-Felder wirkten «komisch»: doppelte Pille
           (Glas-Wrapper MIT Schatten UM den Input MIT eigenem Schatten) und
           das Liquid-Select fiel aus der Reihe. Ab jetzt: EIN flacher,
           schlichter Rahmen fuer ALLE editierbaren Felder — Input, Datum
           und Select identisch. Steht bewusst NACH den aelteren Regeln. */
        #page-mitarbeiter.liquid-employee .emp-field-value:has(.ef-input:not([readonly]):not(:disabled)),
        #page-mitarbeiter.liquid-employee .emp-field-value:has(.lqsel-wrap) {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
            padding: 0;
        }
        #page-mitarbeiter.liquid-employee .ef-input {
            min-height: 29px;
            padding: 3px 9px;
            border-radius: 6px;
            border: 1px solid rgba(140, 132, 120, 0.38);
            background: #ffffff;
            font-size: 14px;
            box-shadow: none;
        }
        #page-mitarbeiter.liquid-employee .ef-input:focus {
            border-color: rgba(63, 63, 63, 0.55);
            background: #ffffff;
            box-shadow: none;
        }
        /* Liquid-Select (z.B. Konfession) exakt im selben Look wie die Inputs */
        #page-mitarbeiter.liquid-employee .emp-field-value .lqsel-wrap {
            min-width: 0;
            width: 100%;
            display: block;
        }
        #page-mitarbeiter.liquid-employee .emp-field-value .lqsel-btn {
            min-height: 29px;
            padding: 3px 9px;
            border-radius: 6px;
            border: 1px solid rgba(140, 132, 120, 0.38);
            background: #ffffff;
            font-size: 14px;
            font-weight: 500;
            color: var(--emp-text-strong);
            box-shadow: none;
        }
        #page-mitarbeiter.liquid-employee .emp-field-value .lqsel-btn:hover {
            background: #ffffff;
            box-shadow: none;
            border-color: rgba(63, 63, 63, 0.45);
        }
        /* Dark-Mode: gleiche Flach-Logik */
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value:has(.ef-input:not([readonly]):not(:disabled)),
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value:has(.lqsel-wrap) {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .ef-input {
            background: rgba(13, 24, 35, 0.68);
            border: 1px solid rgba(122, 145, 165, 0.32);
            box-shadow: none;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .ef-input:focus {
            border-color: rgba(112, 164, 214, 0.5);
            box-shadow: none;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value .lqsel-btn {
            background: rgba(13, 24, 35, 0.68);
            border: 1px solid rgba(122, 145, 165, 0.32);
            color: var(--emp-text-strong);
            box-shadow: none;
        }

        /* ── Nicht editierbare Werte DEUTLICHER (Walter 17.07.2026):
           groessere Schrift + tiefes Schwarz. Leere Felder («–») bleiben
           bewusst blass (die .empty-Regeln sind spezifischer). ── */
        #page-mitarbeiter.liquid-employee .emp-field-value.easywork-info {
            font-size: 15.5px;
            font-weight: 650;
            letter-spacing: -0.01em;
            color: #0a0a0a;
        }
        #page-mitarbeiter.liquid-employee .ef-input[readonly],
        #page-mitarbeiter.liquid-employee .ef-input:disabled {
            font-size: 15.5px;
            font-weight: 650;
            letter-spacing: -0.01em;
            color: #0a0a0a;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-value.easywork-info {
            color: #f2f5f8;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .ef-input[readonly],
        body.theme-dark #page-mitarbeiter.liquid-employee .ef-input:disabled {
            color: #f2f5f8;
        }

        /* ══ KOPF-CARD ETAPPE 1 (Walter 17.07.2026, nach Mockup) ══
           Der Detail-Header wird zur weissen Karte: Avatar 92px, Name +
           Badges, Fakten-Zeile (Eintritt · Geburtstag · Vertrag · Telefon ·
           E-Mail), Buttons rechts. Tab-Bar bleibt am Karten-Fuss. */
        #page-mitarbeiter.liquid-employee .emp-detail-header {
            position: relative;
            margin: 0 0 10px;
            padding: 16px 18px 0;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.72);
            background: #ffffff;
            box-shadow: 0 10px 30px rgba(60, 55, 48, 0.08);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #page-mitarbeiter.liquid-employee #empDetailPhoto {
            width: 112px !important;
            height: 112px !important;
            font-size: 36px !important;
        }
        .emp-hbadge {
            font-size: 12px; font-weight: 700; padding: 3px 10px;
            border-radius: 8px; display: inline-flex; align-items: center;
            gap: 5px; vertical-align: 2px; white-space: nowrap;
        }
        .emp-hbadge.hb-ok    { background: #e7f0e4; color: #2f7d32; }
        .emp-hbadge.hb-inak  { background: #f1f5f9; color: #64748b; }
        .emp-hbadge.hb-mut   { background: #fde7ef; color: #be185d; }
        /* MA-Liste: Schwangerschaft / Mutterschutz (Walter 20.07.2026) */
        .emp-schwanger-badge {
            font-size: 10px; font-weight: 700; padding: 2px 7px;
            border-radius: 8px; flex-shrink: 0; align-self: center;
            background: #fde7ef; color: #be185d; white-space: nowrap;
        }
        body.theme-dark .emp-schwanger-badge {
            background: rgba(190, 24, 93, 0.28); color: #f9a8d4;
        }
        .emp-hbadge.hb-kuend { background: #fee2e2; color: #b91c1c; }
        .emp-hbadge.hb-prob,
        .emp-hbadge.hb-exit  { background: #fdf1dc; color: #96690f; }
        /* Probezeit-Badge: Status + «eintragen» (Walter 02.08.2026) */
        .emp-hbadge.hb-prob {
            gap: 6px;
            align-items: center;
        }
        .emp-hpz-status { font-weight: 750; }
        .emp-hpz-status.open { color: #9f1239; }
        .emp-hpz-status.ok { color: #166534; }
        .emp-hpz-btn {
            margin: 0 0 0 2px;
            background: #3f3f3f;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 2px 8px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            flex-shrink: 0;
        }
        .emp-hpz-btn:hover { background: #1a1a1a; }
        /* Vertrags-Zeile OHNE Huellen-Pille (Walter 17.07.2026: die drei
           Zeilen links buendig — die 10px-Innenpolsterung der hellen Pille
           rueckte den Chip optisch ein). Chip + Text starten flush bei 0. */
        .emp-hbadge.hb-vert  {
            background: transparent; color: #1a1a1a;
            padding: 0; border-radius: 0;
            font-size: 13.5px; font-weight: 750;
        }
        .emp-hvertrag { margin-top: 7px; white-space: nowrap; }
        /* Rechte Aktions-Spalte: aus dem Fluss genommen, oben rechts fixiert
           (unterhalb der langSwitcher-Zone) — Namen-/Fakten-Zeilen behalten
           die volle Breite, nichts wrappt mehr. */
        .emp-head-right {
            position: absolute;
            top: 54px; right: 16px;
            display: flex; flex-direction: column;
            align-items: flex-end; gap: 8px;
            max-width: 480px;
            z-index: 6;
        }
        body.theme-dark .emp-hbadge.hb-vert { background: transparent; color: #f2f5f8; }
        /* EINE Fakten-Zeile mit fixen Spalten-Positionen (Walter 17.07.2026):
           Eintritt | Geburtstag | Telefon | E-Mail — alles linksbuendig an
           festen X-Positionen, springt bei keinem MA. Spart eine Zeile. */
        .emp-hfacts {
            display: grid;
            grid-template-columns: 150px 250px 230px minmax(0, 1fr);
            margin-top: 10px;
        }
        .emp-hfact { min-width: 0; padding: 0 16px 0 0; }
        .emp-hfacts .emp-hfact:nth-child(n+2) {
            border-left: 1px solid #eee8de;
            padding-left: 16px;
        }
        .emp-hfact-l {
            font-size: 10.5px; font-weight: 700; color: #8b8b8b;
            letter-spacing: 0.04em; margin-bottom: 2px; text-transform: uppercase;
        }
        .emp-hfact-v {
            font-size: 15px; font-weight: 700; color: #0a0a0a;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            max-width: 340px;
        }
        /* Direkt-Anruf / E-Mail-Icon VOR dem Wert, kohle-gefüllt (Walter 19.07.2026) */
        .emp-hfact-with-act {
            display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0;
        }
        .emp-hfact-with-act .emp-hfact-txt {
            overflow: hidden; text-overflow: ellipsis; min-width: 0;
        }
        .emp-hfact-act {
            flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            width: 28px; height: 28px; border-radius: 9px;
            color: #fff; background: #3f3f3f;
            border: 1px solid #3f3f3f;
            box-shadow: 0 2px 8px rgba(60,55,48,0.18);
            text-decoration: none; transition: background .15s, transform .15s, box-shadow .15s;
        }
        .emp-hfact-act:hover {
            background: #1a1a1a;
            border-color: #1a1a1a;
            box-shadow: 0 4px 12px rgba(60,55,48,0.22);
            transform: translateY(-1px);
            color: #fff;
        }
        body.theme-dark .emp-hfact-act {
            color: #0f172a; background: #e8eef5;
            border-color: rgba(232,238,245,0.9);
            box-shadow: 0 2px 10px rgba(0,0,0,0.28);
        }
        body.theme-dark .emp-hfact-act:hover {
            background: #fff; border-color: #fff; color: #0a0a0a;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-header {
            background: var(--dlg-fill-strong) !important;
            border-color: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        body.theme-dark .emp-hfact { border-left-color: rgba(150, 200, 255, 0.14); }
        body.theme-dark .emp-hfact-l { color: var(--dlg-text-muted) !important; }
        body.theme-dark .emp-hfact-v { color: #ffffff !important; }
        body.theme-dark .emp-hbadge.hb-inak { background: rgba(255,255,255,.08); color: #94a3b8; }

        /* ══ TAB «UEBERSICHT» — Karten-Grid (Etappe 2, Walter 17.07.2026) ══ */
        /* Walter 17.07.2026: gesamte Übersicht FIX im Viewport — kein Scrollen,
           kein Springen. Andere MA-Tabs behalten .emp-detail-body-Scroll. */
        .main:has(#page-mitarbeiter.active) { overflow: hidden; }
        #page-mitarbeiter.liquid-employee.active {
            height: 100%; max-height: 100%; overflow: hidden;
            display: flex; flex-direction: column; min-height: 0;
        }
        #page-mitarbeiter.liquid-employee .page-body {
            flex: 1 1 auto; min-height: 0; overflow: hidden;
            display: flex; flex-direction: column;
        }
        #page-mitarbeiter.liquid-employee .emp-layout,
        #page-mitarbeiter.liquid-employee .liquid-employee-layout-grid {
            flex: 1 1 auto; min-height: 0; height: auto !important;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-panel {
            min-height: 0;
            flex: 1 1 auto;
            align-self: stretch;
        }
        #page-mitarbeiter.liquid-employee .emp-list-panel,
        #page-mitarbeiter.liquid-employee .liquid-employee-list {
            align-self: stretch;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll {
            overflow: hidden;
            display: flex; flex-direction: column;
            min-height: 0;
            flex: 1 1 auto;
            padding-bottom: 6px;
            background: transparent !important;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll #emp-tab-uebersicht.active {
            display: flex; flex-direction: column;
            flex: 1 1 auto; min-height: 0; overflow: hidden;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll #uebersichtContent {
            flex: 1 1 auto; min-height: 0; overflow: hidden;
            display: flex; flex-direction: column;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-wrap {
            flex: 1 1 auto; min-height: 0;
            /* Walter 02.08.2026: gleiche Abstände; Verträge/Saldi wachsen
               (1fr); Weitere Adressen unten fix inhaltshoch. */
            overflow-x: hidden;
            overflow-y: auto;
            height: 100%;
            align-content: stretch;
            grid-template-rows: max-content minmax(140px, auto) minmax(160px, 1fr) auto;
        }
        .ov-wrap {
            display: grid;
            /* Anstellung breiter, Nachtarbeit schmaler (Walter 31.07.2026) */
            grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.9fr);
            gap: 10px; /* gleiche Abstände zwischen allen Boxen */
            /* Knappes Boden-Padding — Schatten knapp sichtbar, ohne Leerraum */
            padding: 2px 2px 8px;
        }
        /* Volle Breite (Walter 17.07.2026): Personalien & Adresse spannt
           ueber beide Spalten. */
        .ov-full { grid-column: 1 / -1; min-width: 0; }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full {
            grid-row: 1;
            min-height: min-content;
            height: auto;
            overflow: visible;
            align-self: start;
        }
        /* MA-Daten: Hauptblock — genug Platz für Felder + Zusatzadresse */
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full > .ov-card {
            min-height: min-content;
            height: auto;
            overflow: visible;
            box-sizing: border-box;
            padding: 12px 14px 10px !important;
        }
        /* Weitere Adressen — eigene volle Breite unten (Walter 02.08.2026) */
        .ov-addr-full {
            grid-column: 1 / -1;
            min-width: 0;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-addr-full {
            grid-row: 4;
            align-self: start;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-addr-full > .ov-card {
            padding: 10px 14px 10px !important;
            box-sizing: border-box;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-addr-full > .ov-card > .ov-card-h {
            font-size: 13.5px;
            margin-bottom: 6px;
            align-items: baseline;
            gap: 8px;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-addr-full > .ov-card > .ov-card-h > span:first-child {
            display: inline-flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 0 6px;
            min-width: 0;
            font-weight: 700;
        }
        .ov-addr-count {
            font-weight: 700;
            color: inherit;
        }
        .ov-addr-hint {
            font-size: 11.5px;
            font-weight: 500;
            color: #a2acb8;
            margin: 0;
            line-height: 1.3;
            text-transform: none;
            letter-spacing: 0;
        }
        body.theme-dark .ov-addr-hint { color: rgba(210, 220, 232, 0.55); }
        /* Box fix: immer 1 Adresszeile sichtbar, weitere scrollen (Walter 02.08.2026) */
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-addr-full #otherAddressesContent {
            min-height: 40px;
            height: 40px;
            max-height: 40px;
            overflow-x: hidden;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-addr-full #otherAddressesContent .emp-addr-row {
            flex: 0 0 40px;
            height: 40px;
            box-sizing: border-box;
            margin-bottom: 0;
            padding: 0 12px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #fafafa;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 12px;
            min-width: 0;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full > .ov-card > .ov-card-h {
            font-size: 15px;
            margin-bottom: 10px;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-frow {
            gap: 10px 16px;
            margin-bottom: 10px;
            padding-bottom: 0;
            width: 100%;
            justify-content: flex-start;
        }
        /* Personalien: ein 5-Spalten-Raster über Z1–Z3 (Walter 19.07.2026)
           Z1: Strasse | PLZ | Ort+Kt. | Telefon 2 | AHV
           Z2: Briefanrede | Nickname | Sex | Konfession | —
           Z3: Zivilstand | seit | Ledigname | Nationalität | ZEMIS
           Zeilenabstand etwas luftiger (Walter 02.08.2026). */
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pers-aligned {
            display: grid;
            grid-template-columns:
                minmax(150px, 1.35fr)  /* Strasse / Ledigname / Zivilstand */
                minmax(120px, 1.2fr)   /* PLZ / Briefanrede / seit */
                minmax(120px, 1.1fr)   /* Ort+Kt / Kurzname / Konfession */
                minmax(140px, 1.2fr)   /* Tel2 / Sex / Nationalität */
                minmax(150px, 1.25fr); /* — / AHV / ZEMIS */
            column-gap: 12px;
            row-gap: 15px;
            align-items: start;
            margin-bottom: 10px;
        }
        /* Z1 vom Rest trennen */
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pers-aligned > .ov-pf:nth-child(-n+5) {
            padding-bottom: 11px;
            border-bottom: 1px solid rgba(90, 80, 65, 0.10);
            margin-bottom: 4px;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pers-aligned > .ov-pf {
            min-width: 0;
            margin-bottom: 0;
            width: auto;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pers-aligned .ov-softin {
            width: 100%;
            box-sizing: border-box;
            min-width: 0;
            /* Wie .ov-pfv (Strasse): gleiche Schrift + linksbündig unter dem Label */
            font-size: 14.5px;
            font-weight: 700;
            color: #2a2a2a;
            line-height: 30px;
            min-height: 30px;
            height: 30px;
            padding: 0 28px 0 0; /* links 0 = bündig mit Strasse; rechts Platz für Datums-Icon */
            border-radius: 8px;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pers-aligned select.ov-softin {
            padding-right: 22px;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-ortkt {
            display: flex;
            gap: 8px;
            align-items: start;
            min-width: 0;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-ortkt > .ov-pf {
            margin-bottom: 0;
            min-width: 0;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-ortkt > .ov-pf-city {
            flex: 1 1 auto;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-ortkt > .ov-pf-kt {
            flex: 0 0 36px; /* Kt. = 3 Zeichen */
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pf-sex {
            max-width: 44px;
        }
        /* ZEMIS-Nr. ist kurz (z.B. 22295241.0) — Feld nicht auf Spaltenbreite strecken */
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pf-zemis .ov-softin {
            width: 118px;
            max-width: 118px;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pf-slot > .ov-pf {
            width: 100%;
            margin-bottom: 0;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pfl {
            font-size: 10.5px;
            letter-spacing: 0.05em;
            margin-bottom: 3px;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pfv {
            font-size: 14.5px;
            font-weight: 700;
            min-height: 30px;
            line-height: 30px;
            color: #2a2a2a;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-softin {
            font-size: 14.5px;
            font-weight: 700;
            color: #2a2a2a;
            min-height: 30px;
            height: 30px;
            line-height: 30px;
            padding: 0 28px 0 0;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pfl {
            color: rgba(210, 220, 232, 0.78) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-full .ov-pers-aligned > .ov-pf:nth-child(-n+5) {
            border-bottom-color: rgba(255, 255, 255, 0.10);
        }
        /* Anstellung / Nachtarbeit = mittlere Zeile (kompakt, Walter 26.07.2026) */
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-wrap > .ov-card {
            grid-row: 2;
            min-height: 0;
            height: 100%;
            max-height: 100%;
            overflow: hidden;
            align-self: stretch;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 1px;
            padding-top: 6px;
            padding-bottom: 4px;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-wrap > .ov-card > .nw-card-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            padding-top: 0;
            display: flex;
            flex-direction: column;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-wrap > .ov-card > .ov-card-h {
            flex: 0 0 auto;
            font-size: 12.5px;
            margin-bottom: 2px;
            line-height: 1.2;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-wrap > .ov-card > .ov-anst-grid {
            flex: 1 1 auto;
            min-height: 0;
            align-content: start;
        }
        /* Verträge + Stundenbox: gleiche Spaltenbreite wie Anstellung/Nachtarbeit
           (Walter Aug 2026) — rechte Kante Nachtarbeit = rechte Kante Saldi. */
        .ov-vertraege-ktg {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.9fr);
            gap: 10px; /* wie .ov-wrap */
            min-width: 0;
            align-items: stretch;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-vertraege-ktg {
            grid-row: 3;
            height: 100%;
            min-height: 160px;
            max-height: none;
            overflow: hidden;
            align-self: stretch;
        }
        /* Verträge/Saldi füllen die mittlere Flex-Zeile (Walter 02.08.2026) */
        .ov-vertraege-ktg > .ov-card {
            min-height: 0;
            height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        /* Unterste Karten: Schatten nur leicht tiefer als Standard-Lift */
        #page-mitarbeiter.liquid-employee .ov-vertraege-ktg > .ov-card {
            box-shadow:
                0 0 0 1px rgba(90, 80, 65, 0.12),
                0 0 20px rgba(90, 80, 65, 0.07),
                0 6px 14px rgba(60, 55, 48, 0.10),
                0 14px 28px rgba(60, 55, 48, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.92),
                inset 0 -1px 0 rgba(90, 80, 65, 0.08);
        }
        .ov-vertraege-ktg > .ov-card > .ov-card-h { flex: 0 0 auto; }
        .ov-vertraege-ktg > .ov-card > .ov-vlist {
            flex: 1 1 auto;
            min-height: calc(2 * 36px + 3px); /* mind. 2 Vertragszeilen */
            height: auto;
            max-height: none;
            overflow-y: auto;
        }
        .ov-vertraege-ktg > .ov-card > #ovSaldiContent,
        .ov-vertraege-ktg > .ov-card > .ov-saldi-slot {
            flex: 1 1 auto; min-height: 0; overflow: hidden;
        }
        .ov-saldi-card {
            padding: 6px 10px 8px !important;
            display: flex;
            flex-direction: column;
        }
        .ov-saldi-head {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex: 0 0 auto;
            margin-bottom: 2px;
        }
        .ov-saldi-switch {
            display: inline-flex;
            gap: 2px;
            padding: 2px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.45);
            border: 1px solid rgba(90, 80, 65, 0.14);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
        }
        .ov-saldi-sw {
            border: none;
            background: transparent;
            color: #646464;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 999px;
            cursor: pointer;
            line-height: 1.2;
        }
        .ov-saldi-sw:hover { color: #3f3f3f; }
        .ov-saldi-sw.on {
            background: #3f3f3f;
            color: #fff;
            box-shadow: 0 2px 6px rgba(60, 55, 48, 0.18);
        }
        .ov-saldi-slot {
            display: flex;
            flex-direction: column;
            min-height: 0;
            flex: 1 1 auto;
            overflow: hidden;
        }
        .ov-saldi-tbl {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            font-size: 12px;
        }
        .ov-saldi-tbl th,
        .ov-saldi-tbl td {
            padding: 4px 5px;
            text-align: right;
            font-variant-numeric: tabular-nums;
            border-bottom: 1px solid rgba(90, 80, 65, 0.10);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ov-saldi-tbl th:first-child,
        .ov-saldi-tbl td:first-child {
            text-align: left;
            width: 72px;
            font-weight: 760;
            color: #3f3f3f;
        }
        .ov-saldi-tbl thead th {
            font-size: 10.5px;
            font-weight: 700;
            color: #8b8b8b;
            border-bottom: 1px solid rgba(90, 80, 65, 0.18);
            padding-top: 1px;
            padding-bottom: 5px;
        }
        .ov-saldi-tbl tbody tr:last-child td { border-bottom: none; }
        .ov-saldi-tbl .ov-saldi-n { font-weight: 650; color: #3f3f3f; }
        .ov-saldi-tbl .ov-saldi-pos { color: #166534; font-weight: 780; }
        .ov-saldi-tbl .ov-saldi-neg { color: #9f1239; font-weight: 780; }
        .ov-saldi-tbl .ov-saldi-dash { color: #b0b0b0; font-weight: 500; }
        .ov-saldi-msg {
            display: flex; align-items: center; justify-content: center;
            height: 100%; min-height: 120px;
            font-size: 13px; color: #8b8b8b; text-align: center; padding: 12px;
        }
        .ov-saldi-msg.ov-saldi-err { color: #dc2626; }
        /* Zusatzadressen: 1 Zeile sichtbar, Rest scrollt (Walter 02.08.2026) */
        #otherAddressesContent {
            min-height: 40px;
            max-height: 40px;
            overflow-x: hidden;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .emp-addr-row {
            flex: 0 0 40px;
            height: 40px;
            box-sizing: border-box;
            margin-bottom: 0;
            padding: 0 12px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #fafafa;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 12px;
            min-width: 0;
        }
        .emp-addr-type {
            flex-shrink: 0;
            font-size: 11px; font-weight: 700;
            padding: 2px 10px; border-radius: 10px;
            background: #ece9e2; color: #6b7280;
        }
        .emp-addr-text {
            flex: 1; min-width: 0;
            font-size: 13.5px; font-weight: 600; color: #0f172a;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .emp-addr-empty { color: #94a3b8; font-style: italic; font-weight: 400; }
        .emp-addr-valid {
            flex-shrink: 0;
            font-size: 11.5px; color: #64748b; white-space: nowrap;
        }
        .emp-addr-actions { flex-shrink: 0; display: flex; gap: 6px; }
        body.theme-dark .emp-addr-type { background: rgba(255,255,255,.10); color: #cbd5e1; }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-addr-full #otherAddressesContent .emp-addr-row {
            background: rgba(255,255,255,.04);
            border-color: rgba(255,255,255,.12);
        }
        body.theme-dark .emp-addr-text { color: #f1f5f9; }
        body.theme-dark .emp-addr-valid { color: #94a3b8; }
        @media (max-width: 1100px) {
            .ov-wrap { grid-template-columns: 1fr; }
            #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-wrap {
                grid-template-rows: max-content minmax(140px, auto) minmax(140px, auto) minmax(140px, 1fr) auto;
                gap: 10px;
            }
            #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-wrap > .ov-card {
                grid-row: auto;
            }
            .ov-vertraege-ktg { grid-template-columns: 1fr; }
            #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-vertraege-ktg {
                grid-row: 4;
                height: 100%;
                min-height: 140px;
                max-height: none;
                align-self: stretch;
            }
            #page-mitarbeiter.liquid-employee .emp-detail-body.ov-noscroll .ov-addr-full {
                grid-row: 5;
            }
        }
        .ov-card {
            background: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.72);
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(60, 55, 48, 0.06);
            padding: 10px 14px 10px;
            min-width: 0;
        }
        /* Hell: Übersicht-Karten mit Kohle-Tiefe (Rim + Fill-Grad + Lift) */
        #page-mitarbeiter.liquid-employee .ov-card {
            border: 1px solid transparent;
            border-radius: 16px;
            padding: 12px 16px 12px;
            background-color: var(--emp-fill);
            background-image: var(--emp-fill-grad), var(--emp-rim);
            background-origin: padding-box, border-box;
            background-clip: padding-box, border-box;
            box-shadow: var(--emp-shadow-lift);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            color: var(--emp-text);
        }
        #page-mitarbeiter.liquid-employee .ov-card-h {
            color: var(--emp-text-strong);
            letter-spacing: -0.01em;
        }
        #page-mitarbeiter.liquid-employee .ov-pfl,
        #page-mitarbeiter.liquid-employee .ov-fl {
            color: #8b8b8b;
        }
        #page-mitarbeiter.liquid-employee .ov-pfv,
        #page-mitarbeiter.liquid-employee .ov-fv,
        #page-mitarbeiter.liquid-employee .ov-vrole {
            color: #2a2a2a;
        }
        #page-mitarbeiter.liquid-employee .ov-softin {
            background: #ffffff;
            border: 1px solid rgba(90, 80, 65, 0.18);
            color: #2a2a2a;
            box-shadow: inset 0 1px 2px rgba(60, 55, 48, 0.05);
        }
        #page-mitarbeiter.liquid-employee .ov-softin:focus {
            border-color: #3f3f3f;
            box-shadow: 0 0 0 2px rgba(63, 63, 63, 0.10);
        }
        #page-mitarbeiter.liquid-employee .ov-addrsep {
            border-top-color: rgba(90, 80, 65, 0.12);
        }
        .ov-card-h {
            display: flex; align-items: center; justify-content: space-between;
            font-size: 13.5px; font-weight: 760; color: #1a1a1a;
            margin-bottom: 7px;
        }
        .ov-count { font-weight: 650; color: #8b8b8b; font-size: 13px; margin-left: 4px; }
        .ov-jump {
            background: #fff; border: 1px solid rgba(140,132,120,.3); border-radius: 8px;
            width: 28px; height: 26px; cursor: pointer; color: #64748b;
            font-size: 14px; font-weight: 700; line-height: 1;
        }
        .ov-jump:hover { border-color: #3f3f3f; color: #1a1a1a; }
        .ov-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
        .ov-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
        .ov-f { min-width: 0; }
        .ov-span3 { grid-column: span 3; }
        .ov-span2 { grid-column: span 2; }
        /* Freie Fluss-Zeilen (Walter 17.07.2026): proportionale Breiten
           statt starrem Raster — Edit-Felder bekommen genug Platz. */
        .ov-row { display: flex; gap: 18px; align-items: flex-end; }
        .ov-row + .ov-row { margin-top: 12px; }
        /* Edit-Feld im Text-Look (Walter 17.07.2026): identisch zu den
           Read-only-Werten, nur gestrichelte Unterlinie als Hinweis —
           Rahmen erscheint erst beim Fokus. */
        .ov-editin {
            width: 100%;
            font: inherit; font-size: 14px; font-weight: 700; color: #0a0a0a;
            background: transparent;
            border: none;
            border-bottom: 1px dashed transparent;
            border-radius: 0;
            padding: 0 0 2px;
            outline: none;
        }
        .ov-editin::placeholder { color: #b8c0ca; font-weight: 500; }
        input[type="date"].ov-editin { min-height: 22px; }
        .ov-editin:hover { border-bottom-color: rgba(140, 132, 120, 0.55); }
        /* 3-Spalten-Steckbrief mit buendigen Label-Wert-Zeilen */
        .ov-cols { display: flex; }
        .ov-col { flex: 1; min-width: 0; }
        .ov-colsep { border-left: 1px solid #eee8de; padding-left: 24px; margin-left: 24px; }
        .ov-kv { display: flex; align-items: center; gap: 12px; padding: 4.5px 0; min-height: 27px; }
        /* NUR editierbare Zeilen reagieren (Walter 17.07.2026): dezentes ✎
           kennzeichnet sie dauerhaft, Hover/Fokus gibt sanften Ton. */
        /* ── Unter-Panels PERSON/KONTAKT/AMTLICH (Walter 17.07.2026, nach
           Mockup-Richtung): ruhige Inset-Flaechen, Label ueber Wert.
           Ansichtsmodus ohne Input-Optik; «Bearbeiten» schaltet die
           editierbaren Felder auf sanfte Soft-Inputs um. ── */
        .ov-panels {
            display: grid;
            grid-template-columns: 1.15fr 1fr 0.95fr;
            gap: 14px;
        }
        @media (max-width: 1200px) { .ov-panels { grid-template-columns: 1fr; } }
        .ov-panel {
            background: #faf8f5;
            border: 1px solid #f0ece4;
            border-radius: 14px;
            padding: 13px 16px 6px;
            min-width: 0;
        }
        .ov-ptitle {
            font-size: 10.5px; font-weight: 780; color: #a89f8d;
            letter-spacing: 0.09em; text-transform: uppercase;
            margin-bottom: 10px;
        }
        .ov-pf { margin-bottom: 11px; min-width: 0; }
        /* Fliessendes Feld-Layout (Walter 17.07.2026: KEINE starren Spalten
           — Felder sind unterschiedlich lang und nehmen ihre natuerliche
           Breite, der Rest fliesst nach). */
        .ov-pflow { display: flex; flex-wrap: wrap; gap: 11px 30px; }
        .ov-pflow .ov-pf { margin-bottom: 0; width: auto; }
        /* Vier logische Fluss-Zeilen (Walter 17.07.2026, final): jede Zeile
           eine Themengruppe, Felder in natuerlicher Breite, kein Raster. */
        /* Hoehen-Ausrichtung (Walter 17.07.2026): Labels alle auf gleicher
           OBERKANTE, Werte vertikal mittig auf Input-Hoehe — Text-Felder
           und Input-Felder stehen damit exakt auf einer Linie. */
        /* nowrap (Walter 17.07.2026): lange Strasse darf KEINE 2. Zeile
           erzeugen — sonst springt die ganze Maske. Stattdessen Ellipsis. */
        .ov-frow {
            display: flex; flex-wrap: nowrap; gap: 8px 18px;
            align-items: flex-start; margin-bottom: 8px;
            overflow: hidden; min-width: 0;
        }
        /* Anstellung (Walter 02.08.2026):
           Zeile 1 Eintritt|Austritt|Probezeit|L-GAV · Zeile 2 Kündigung.
           Eintritt/Austritt nur so breit wie die Daten brauchen. */
        .ov-anst-grid {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: stretch;
            min-width: 0;
        }
        .ov-anst-top {
            display: flex;
            flex-wrap: nowrap;
            align-items: flex-end;
            gap: 8px 14px;
            min-width: 0;
        }
        .ov-anst-datum {
            flex: 0 0 auto;
            width: 7.6em;
            margin-bottom: 0;
            min-width: 0;
        }
        .ov-anst-datum .ov-pfl {
            margin-bottom: 1px;
        }
        .ov-anst-datum .ov-pfv {
            font-size: 14px;
            line-height: 28px;
            min-height: 28px;
            white-space: nowrap;
        }
        /* Probezeit direkt nach Austritt — restlicher Platz bis L-GAV */
        .ov-anst-pz-slot {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            min-height: 28px;
            padding-bottom: 0;
            overflow: hidden;
        }
        .ov-anst-pz {
            font-size: 11.5px;
            font-weight: 600;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px 6px;
            line-height: 1.25;
            min-height: 26px;
        }
        .ov-anst-pz-empty {
            visibility: hidden;
            pointer-events: none;
        }
        .ov-anst-pz-status { font-weight: 650; }
        .ov-anst-pz-status.open { color: #9f1239; }
        .ov-anst-pz-status.ok { color: #166534; }
        .ov-anst-pz-btn {
            margin: 0;
            background: #3f3f3f;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 3px 9px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            flex-shrink: 0;
        }
        body.theme-dark .ov-anst-pz { color: #94a3b8; }
        .ov-anst-kuend-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
            gap: 6px 14px;
            align-items: start;
            min-width: 0;
        }
        .ov-anst-kuend-row > .ov-pf {
            margin-bottom: 0;
            min-width: 0;
        }
        /* L-GAV + Probezeit nebeneinander (Walter 31.07.2026):
           Titelzeile: L-GAV links | Probezeit bis Datum rechts
           Wertzeile:  Toggle links | offen + Button rechts */
        .ov-anst-lgav-pz-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 1px;
            min-width: 0;
        }
        .ov-anst-lgav-pz-head .ov-pfl {
            flex: 0 0 auto;
            margin-bottom: 0;
        }
        .ov-anst-pz-title {
            flex: 0 1 auto;
            margin-left: auto;
            min-width: 0;
            font-size: 10px;
            font-weight: 700;
            color: #9a9a9a;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: right;
        }
        .ov-anst-lgav-pz-body {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 28px;
            min-width: 0;
        }
        .ov-anst-lgav-pz-body > .ov-pfv {
            flex: 0 0 auto;
            min-height: 28px;
            display: flex;
            align-items: center;
        }
        .ov-anst-pz-line {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
            min-width: 0;
            flex-wrap: nowrap;
            justify-content: flex-end;
        }
        .ov-anst-pz-status {
            font-size: 12px;
            font-weight: 650;
            line-height: 1.2;
        }
        .ov-anst-pz-status.open { color: #9f1239; }
        .ov-anst-pz-status.ok { color: #166534; }
        .ov-anst-pz-btn {
            margin: 0;
            background: #3f3f3f;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 3px 9px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            flex-shrink: 0;
        }
        .ov-anst-pz-btn:hover { background: #1a1a1a; }
        body.theme-dark .ov-anst-pz-title { color: #94a3b8; }
        body.theme-dark .ov-anst-pz-btn { background: #e9ecf0; color: #1a1a1a; }
        body.theme-dark .ov-anst-pz-btn:hover { background: #fff; }
        .ov-anst-grid .ov-anst-date .ov-softin {
            width: 100%;
            min-width: 0;
            max-width: 160px;
            box-sizing: border-box;
            font-size: 14.5px;
            font-weight: 700;
            color: #2a2a2a;
            line-height: 30px;
            min-height: 30px;
            height: 30px;
            padding: 0 28px 0 0;
            text-align: left;
            border-radius: 8px;
        }
        .ov-anst-grid .ov-anst-date .ov-softin::-webkit-datetime-edit,
        .ov-anst-grid .ov-anst-date .ov-softin::-webkit-datetime-edit-fields-wrapper {
            padding: 0;
            text-align: left;
        }
        .ov-anst-grid .ov-anst-date .ov-softin::placeholder {
            font-size: 14.5px;
            font-weight: 700;
            text-align: left;
        }
        .ov-anst-grid .ov-anst-date select.ov-softin {
            padding-right: 22px;
            max-width: 200px;
            cursor: pointer;
        }
        /* Kündigung + Austrittsgrund: etwas kleiner als Personalien, gut lesbar */
        .ov-anst-grid .ov-anst-kuend .ov-pfl {
            font-size: 10px;
            letter-spacing: 0.03em;
            margin-bottom: 0;
            color: #9a9a9a;
        }
        .ov-anst-grid .ov-anst-kuend .ov-softin {
            font-size: 13px;
            font-weight: 600;
            line-height: 26px;
            min-height: 26px;
            height: 26px;
            max-width: 152px;
            padding: 0 24px 0 0;
            border-radius: 7px;
        }
        .ov-anst-grid .ov-anst-kuend .ov-softin::placeholder {
            font-size: 13px;
            font-weight: 600;
        }
        .ov-anst-grid .ov-anst-kuend select.ov-softin {
            max-width: 100%;
            padding-right: 18px;
        }
        /* L-GAV rechts in Zeile 1 */
        .ov-anst-top .ov-anst-tog {
            flex: 0 0 auto;
            margin-left: auto;
            margin-bottom: 0;
        }
        .ov-anst-grid .ov-anst-tog .ov-pfl {
            font-size: 10px;
            margin-bottom: 0;
        }
        .ov-anst-grid .ov-anst-tog .ov-pfv {
            min-height: 28px;
            display: flex;
            align-items: center;
        }
        .ov-vmenu { align-self: center; }
        /* Legacy-Klassen (falls noch referenziert) */
        .ov-anst-row { margin-bottom: 8px; gap: 10px 20px; }
        .ov-anst-row:last-child { margin-bottom: 2px; }
        /* Fussbereich «Weitere Adressen» — kompakt (selten belegt) */
        .ov-addrsep {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px;
            border-top: 1px solid #eee8de;
            margin-top: 2px; padding-top: 4px; margin-bottom: 0;
        }
        body.theme-dark .ov-addrsep { border-top-color: rgba(255,255,255,.12); }
        .ov-frow .ov-pf { margin-bottom: 0; width: auto; min-width: 0; flex: 0 1 auto; }
        .ov-frow .ov-pfl { margin-bottom: 2px; }
        .ov-frow .ov-pfv {
            min-height: 32px; display: flex; align-items: center; gap: 6px;
            max-width: 100%; overflow: hidden;
        }
        .ov-frow .ov-pfv > span,
        .ov-frow .ov-pfv {
            text-overflow: ellipsis; white-space: nowrap;
        }
        /* Strasse / Ort: mehr Platz, Truncate nur als Notbremse */
        .ov-frow .ov-pf-shrink {
            flex: 1 1 140px; min-width: 100px; max-width: 280px;
        }
        .ov-frow .ov-pf-shrink .ov-pfv {
            display: block; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; line-height: 32px; min-height: 32px;
        }
        .ov-frow .lqsel-wrap { width: 170px; }
        .ov-pfl {
            font-size: 10.5px; font-weight: 700; color: #8b8b8b;
            letter-spacing: 0.04em; text-transform: uppercase;
            margin-bottom: 2px;
        }
        .ov-pfv {
            font-size: 14.5px; font-weight: 650; color: #0a0a0a;
            white-space: nowrap;
        }
        /* Dark: Labels lesbar, Werte klar weiss — Inhalt vor Effekt */
        body.theme-dark .ov-pfl,
        body.theme-dark .ov-fl {
            color: var(--dlg-text-muted) !important;
        }
        body.theme-dark .ov-card-h {
            color: #ffffff !important;
            letter-spacing: -0.01em;
        }
        body.theme-dark .ov-card {
            border-radius: 16px !important;
            padding: 12px 16px 12px !important;
            /* Extra Lift gegenüber Panel — Karten schweben sichtbar */
            box-shadow:
                0 0 0 1px rgba(175, 225, 255, 0.30),
                0 0 26px rgba(70, 150, 235, 0.24),
                0 6px 14px rgba(0, 4, 14, 0.38),
                0 20px 44px rgba(0, 4, 14, 0.58),
                inset 0 1px 0 rgba(235, 248, 255, 0.34),
                inset 0 -1px 0 rgba(0, 8, 24, 0.38) !important;
        }
        body.theme-dark .ov-pfv,
        body.theme-dark .ov-fv,
        body.theme-dark .ov-vrole,
        body.theme-dark .ov-dname {
            color: #ffffff !important;
            font-weight: 650;
        }
        body.theme-dark .ov-empty { color: #7a8fa8 !important; }
        /* Soft-Inputs im Bearbeiten-Modus */
        .ov-softin {
            max-width: 100%;
            font: inherit; font-size: 13.5px; font-weight: 600; color: #0a0a0a;
            background: #ffffff;
            border: 1px solid #e7e1d6;
            border-radius: 9px;
            padding: 5px 9px;
            outline: none;
            box-shadow: inset 0 1px 2px rgba(60, 55, 48, 0.04);
            box-sizing: border-box;
        }
        .ov-softin:focus { border-color: #3f3f3f; }
        .ov-softin::placeholder { color: #b8c0ca; font-weight: 500; }
        /* Karten-Kopf-Buttons: Bearbeiten (hell) / Speichern (Kohle) */
        .ov-hbtn {
            background: #fff; border: 1px solid rgba(140, 132, 120, 0.32);
            border-radius: 10px; padding: 6px 15px;
            font-size: 12.5px; font-weight: 700; color: #3f3f3f;
            cursor: pointer;
        }
        .ov-hbtn:hover { border-color: #3f3f3f; }
        .ov-hbtn-primary { background: #3f3f3f; border-color: #3f3f3f; color: #fff; }
        .ov-hbtn-primary:hover { background: #1a1a1a; }
        /* Liquid-Select-Trigger IN der kv-Zeile flach im Text-Look (kein
           Pill-Rahmen — das PANEL bleibt das normale Liquid-Menue). */
        .ov-kval .lqsel-wrap { flex: 1; min-width: 0; display: block; }
        .ov-kval .lqsel-btn {
            background: transparent !important;
            border: none !important;
            border-radius: 0;
            padding: 0 0 2px;
            min-height: 0;
            font-size: 14px; font-weight: 700; color: #0a0a0a;
            box-shadow: none !important;
        }
        .ov-kval .lqsel-chev { font-size: 10px; color: #c9c2b4; }
        .ov-kv-edit:hover .ov-kval .lqsel-chev { color: #3f3f3f; }
        .ov-kl {
            width: 104px; flex-shrink: 0;
            font-size: 10.5px; font-weight: 700; color: #8b8b8b;
            letter-spacing: 0.04em; text-transform: uppercase;
        }
        .ov-kval {
            flex: 1; min-width: 0;
            display: flex; align-items: center; gap: 6px;
            font-size: 14px; font-weight: 700; color: #0a0a0a;
        }
        .ov-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        body.theme-dark .ov-colsep { border-left-color: rgba(255,255,255,.12); }
        body.theme-dark .ov-kval { color: #f2f5f8; }
        body.theme-dark .ov-panel { background: rgba(255,255,255,.04); border-color: rgba(122,145,165,.2); }
        body.theme-dark .ov-pfv { color: #f2f5f8; }
        body.theme-dark .ov-softin {
            background: rgba(6, 16, 32, 0.62);
            border-color: rgba(145, 200, 255, 0.28);
            color: #ffffff;
            box-shadow: inset 0 1px 0 rgba(200, 230, 255, 0.06);
        }
        body.theme-dark .ov-softin:focus {
            border-color: rgba(165, 220, 255, 0.50);
            background: rgba(8, 20, 38, 0.78);
            box-shadow: 0 0 0 2px rgba(60, 140, 230, 0.16);
        }
        body.theme-dark .ov-hbtn { background: transparent; color: #cbd5e1; border-color: rgba(122,145,165,.4); }
        body.theme-dark .ov-hbtn-primary { background: #e9ecf0; color: #1a1a1a; border-color: #e9ecf0; }
        body.theme-dark .ov-kval .lqsel-btn { color: #f2f5f8; }
        .ov-editin:focus {
            background: #ffffff;
            border-bottom: 1px solid #3f3f3f;
        }
        body.theme-dark .ov-editin { color: #f2f5f8; border-bottom-color: rgba(255,255,255,.25); }
        body.theme-dark .ov-editin:focus { background: rgba(255,255,255,.08); border-bottom-color: #b8c8d8; }
        .ov-fl {
            font-size: 10.5px; font-weight: 700; color: #8b8b8b;
            letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px;
        }
        .ov-fv {
            font-size: 14px; font-weight: 700; color: #0a0a0a;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .ov-empty { color: #a2acb8; font-weight: 500; }
        .ov-code { color: #94a3b8; font-weight: 500; font-size: 11.5px; }
        .ov-tag { font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 7px; }
        .ov-tag.ok  { background: #e7f0e4; color: #2f7d32; }
        .ov-tag.min { background: #f1f5f9; color: #94a3b8; }
        /* Feste Liste = 3 dichte Zeilen (Walter 17.07.2026): 4 passten nicht
           ohne Seiten-Scroll. Mehr Verträge → nur innere Liste scrollt. */
        .ov-vlist {
            height: calc(3 * 36px + 2 * 3px);
            overflow-x: hidden;
            overflow-y: auto;
            min-width: 0;
        }
        .ov-vrow {
            display: flex; align-items: center; gap: 7px;
            background: #fbfaf7; border: 1px solid #f0ece4; border-radius: 9px;
            padding: 4px 10px; margin-bottom: 3px; min-width: 0;
            height: 36px; box-sizing: border-box;
        }
        .ov-vlist .ov-vrow:last-child { margin-bottom: 0; }
        .ov-vlist + .contractShareBox { margin-top: 4px !important; }
        .ov-vrow.archiv { opacity: .65; }
        .ov-vdot { width: 8px; height: 8px; border-radius: 50%; background: #b9b2a6; flex-shrink: 0; }
        .ov-vdot.g { background: #34a853; }
        .ov-vrole { font-size: 13px; font-weight: 750; color: #1a1a1a; white-space: nowrap; }
        .ov-vmeta { font-size: 12.5px; font-weight: 600; color: #8b8b8b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ov-drow {
            display: flex; align-items: center; gap: 10px;
            border: 1px solid #f0ece4; border-radius: 11px; background: #fbfaf7;
            padding: 8px 12px; margin-bottom: 7px; cursor: pointer; min-width: 0;
        }
        .ov-drow:hover { border-color: rgba(63,63,63,.35); }
        .ov-dname { flex: 1; font-size: 13px; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ov-dmeta { font-size: 12px; font-weight: 600; color: #8b8b8b; white-space: nowrap; }
        .ov-more { font-size: 12.5px; font-weight: 650; color: #2374b7; cursor: pointer; margin-top: 3px; }
        .ov-more:hover { text-decoration: underline; }
        /* Dark-Mode Overview-Cards (volle Glas-Regel weiter unten) */
        body.theme-dark .ov-card-h { color: #ffffff !important; }

        /* ══ Absenzen + KTG-Tagessatz zweispaltig (Walter 17.07.2026) ══ */
        .abs-ktg-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
            gap: 16px;
            align-items: start;
        }
        @media (max-width: 1100px) {
            .abs-ktg-layout { grid-template-columns: 1fr; }
            .abs-ktg-side { position: static; }
        }
        .abs-ktg-main { min-width: 0; }
        .abs-ktg-side {
            position: sticky;
            top: 8px;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .ktg-side-card {
            background: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.72);
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(60, 55, 48, 0.06);
            overflow: hidden;
        }
        .ktg-panel-side { padding: 12px 14px; }
        .ktg-panel-side .ktg-panel-meta { margin-bottom: 8px; }
        .ktg-panel-side .ktg-compact-rows { gap: 4px; margin-bottom: 2px; }
        .ktg-panel-side .ktg-panel-actions { margin-top: 8px; }
        .ktg-side-berechnung { margin-top: 10px; }
        .ktg-side-berechnung-label {
            font-size: 11px; font-weight: 700; color: #64748b;
            text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
        }
        .ktg-side-berechnung > div[style*="margin-top"] { margin-top: 0 !important; }
        body.theme-dark .ktg-side-berechnung-label { color: var(--dlg-text-soft); }
        /* Karenz unter Tagessatz — gleiche Sidebar-Breite (Walter 25.07.2026) */
        .karenz-side-card {
            border-radius: 16px;
            padding: 12px 14px;
            box-shadow: 0 8px 24px rgba(60, 55, 48, 0.06);
            border: 1px solid transparent;
        }
        .karenz-side-card.karenz-ok {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }
        .karenz-side-card.karenz-reached {
            background: #fef2f2;
            border-color: #fecaca;
        }
        .karenz-side-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .karenz-side-card.karenz-ok .karenz-side-label { color: #166534; }
        .karenz-side-card.karenz-reached .karenz-side-label { color: #b91c1c; }
        .karenz-side-year {
            font-size: 14px;
            font-weight: 750;
            color: #0f172a;
            line-height: 1.3;
            margin-bottom: 8px;
        }
        .karenz-side-count {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 4px;
        }
        .karenz-side-count strong {
            font-size: 22px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            line-height: 1;
        }
        .karenz-side-card.karenz-ok .karenz-side-count strong { color: #166534; }
        .karenz-side-card.karenz-reached .karenz-side-count strong { color: #b91c1c; }
        .karenz-side-count span {
            font-size: 12.5px;
            color: #475569;
            font-weight: 600;
        }
        .karenz-side-status {
            font-size: 12px;
            font-weight: 650;
            color: #64748b;
            line-height: 1.35;
        }
        .karenz-side-card.karenz-reached .karenz-side-status { color: #b91c1c; }
        .ktg-panel-h {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            margin-bottom: 4px;
        }
        .ktg-panel-title { font-weight: 700; font-size: 14px; color: #0f172a; }
        .ktg-panel-meta { font-size: 12px; color: #64748b; margin-bottom: 12px; line-height: 1.45; }
        .ktg-badge {
            padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
        }
        .ktg-badge-a { background: #fef3c7; color: #92400e; }
        .ktg-badge-b { background: #ece9e2; color: #6b6152; }
        .ktg-badge-man { background: #fee2e2; color: #991b1b; }
        .ktg-rates-table {
            width: 100%; border-collapse: collapse;
            background: #f8fafc; border-radius: 10px; overflow: hidden;
        }
        .ktg-rates-table th {
            padding: 8px 12px; text-align: left; font-size: 11px;
            color: #64748b; font-weight: 600; background: #f1f5f9;
        }
        .ktg-rates-table th:last-child,
        .ktg-rates-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
        .ktg-rates-table td {
            padding: 10px 12px; font-size: 13px; color: #334155;
            border-top: 1px solid #e2e8f0; font-family: ui-monospace, Menlo, Consolas, monospace;
        }
        .ktg-rates-table td:first-child { font-family: inherit; }
        .ktg-rates-table tr.ktg-row-88 { background: #fef3c7; }
        .ktg-rates-table tr.ktg-row-88 td { font-weight: 700; color: #92400e; border-top-color: #f1f5f9; }
        .ktg-rates-table tr.ktg-row-80 { background: #dcfce7; }
        .ktg-rates-table tr.ktg-row-80 td { font-weight: 700; color: #15803d; border-top-color: #f1f5f9; }
        .ktg-rates-table tr.ktg-row-muted td {
            font-size: 11.5px; color: #64748b; font-style: italic;
            font-family: inherit; font-weight: 500; background: #f1f5f9;
        }
        .ktg-panel-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
        .ktg-ov-btn { font-size: 11.5px !important; padding: 5px 12px !important; }
        .ktg-details { margin-top: 10px; font-size: 12px; color: #475569; }
        .ktg-details summary {
            cursor: pointer; font-weight: 600; color: #64748b; padding: 4px 0;
            list-style: none;
        }
        .ktg-details summary::-webkit-details-marker { display: none; }
        .ktg-details summary::before { content: '▸ '; }
        .ktg-details[open] summary::before { content: '▾ '; }
        .ktg-compact-top { margin-bottom: 4px; }
        .ktg-compact-meta { font-size: 11px; color: #64748b; margin-bottom: 5px; line-height: 1.3; }
        .ktg-compact-rows { display: flex; flex-direction: column; gap: 3px; }
        /* Übersicht-KTG: Link darf nicht abgeschnitten werden */
        #ovKtgContent .ktg-compact .ov-more,
        #ovKtgContent .ktg-compact button.ov-more {
            margin-top: 4px !important;
            font-size: 12px;
            line-height: 1.25;
            flex-shrink: 0;
        }
        #ovKtgContent.ov-ktg-slot {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #ovKtgContent .ktg-compact {
            display: flex;
            flex-direction: column;
            min-height: 0;
            flex: 1 1 auto;
        }
        .ktg-compact-rows > div {
            display: flex; justify-content: space-between; align-items: baseline;
            gap: 8px; font-size: 12.5px; color: #334155;
        }
        .ktg-compact-rows strong { font-variant-numeric: tabular-nums; font-weight: 750; color: #0f172a; white-space: nowrap; }
        .ktg-compact-rows .r88 strong { color: #92400e; }
        .ktg-compact-rows .r80 strong { color: #15803d; }
        .ktg-compact-rows .muted { color: #94a3b8; }
        .ov-vertraege-ktg .ov-card:last-child:not(.ov-saldi-card) { padding: 12px 14px; }
        .ov-vertraege-ktg .ktg-badge { font-size: 10px; padding: 2px 7px; }
        .ktg-tab-hint {
            margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
            background: #f6f3ee; border: 1px solid #e5e0d6;
            font-size: 12.5px; color: #646464;
        }
        .ktg-tab-hint-link {
            background: none; border: none; padding: 0; cursor: pointer;
            color: #3f3f3f; font-weight: 700; text-decoration: underline;
            font: inherit;
        }
        body.theme-dark .ktg-side-card { background: rgba(255,255,255,.10); border-color: rgba(180,200,220,.22); }
        body.theme-dark .karenz-side-card.karenz-ok {
            background: rgba(34, 120, 70, 0.18);
            border-color: rgba(74, 180, 110, 0.35);
        }
        body.theme-dark .karenz-side-card.karenz-reached {
            background: rgba(160, 40, 40, 0.22);
            border-color: rgba(220, 100, 100, 0.35);
        }
        body.theme-dark .karenz-side-year { color: #f2f5f8; }
        body.theme-dark .karenz-side-count span { color: var(--dlg-text-soft); }
        body.theme-dark .ktg-panel-title { color: #f2f5f8; }
        body.theme-dark .ktg-panel-meta,
        body.theme-dark .ktg-compact-meta {
            color: var(--dlg-text-soft) !important;
        }
        body.theme-dark .ktg-panel-meta b,
        body.theme-dark .ktg-compact-meta b {
            color: #ffffff !important;
            font-weight: 750;
        }
        /* KTG-Zeilen: Light-Farben (#0f172a / #334155) waren unsichtbar */
        body.theme-dark .ktg-compact-rows > div {
            color: var(--dlg-text) !important;
        }
        body.theme-dark .ktg-compact-rows > div span {
            color: var(--dlg-text-soft) !important;
            font-weight: 650;
        }
        body.theme-dark .ktg-compact-rows strong {
            color: #ffffff !important;
        }
        body.theme-dark .ktg-compact-rows .r88 span,
        body.theme-dark .ktg-compact-rows .r88 strong {
            color: #fdba74 !important;
        }
        body.theme-dark .ktg-compact-rows .r80 span,
        body.theme-dark .ktg-compact-rows .r80 strong {
            color: #6ee7b7 !important;
        }
        body.theme-dark .ktg-compact-rows .muted,
        body.theme-dark .ktg-compact-rows .muted span,
        body.theme-dark .ktg-compact-rows .muted strong {
            color: var(--dlg-text-muted) !important;
        }
        body.theme-dark .ktg-rates-table,
        body.theme-dark .ktg-rates-table th { background: rgba(255,255,255,.04); }
        body.theme-dark .ktg-rates-table td {
            color: #ffffff !important;
            border-top-color: rgba(140, 190, 240, 0.14) !important;
        }
        body.theme-dark .ktg-rates-table tr.ktg-row-88 {
            background: rgba(180, 100, 40, 0.22) !important;
        }
        body.theme-dark .ktg-rates-table tr.ktg-row-88 td {
            color: #fdba74 !important;
        }
        body.theme-dark .ktg-rates-table tr.ktg-row-80 {
            background: rgba(40, 120, 80, 0.22) !important;
        }
        body.theme-dark .ktg-rates-table tr.ktg-row-80 td {
            color: #6ee7b7 !important;
        }
        body.theme-dark .ktg-rates-table tr.ktg-row-muted td {
            color: var(--dlg-text-muted) !important;
        }
        body.theme-dark .ktg-details { color: var(--dlg-text-soft) !important; }
        body.theme-dark .ktg-details summary { color: var(--dlg-text) !important; }
        body.theme-dark .ov-more {
            color: #93c5fd !important;
            font-weight: 650;
        }
        body.theme-dark .ov-more:hover { color: #bfdbfe !important; }
        body.theme-dark .ov-count { color: var(--dlg-text-soft) !important; }
        body.theme-dark .ov-code { color: var(--dlg-text-soft) !important; }
        body.theme-dark .ktg-tab-hint { background: rgba(255,255,255,.04); border-color: rgba(122,145,165,.25); color: #cbd5e1; }
        body.theme-dark .ov-fv { color: #f2f5f8; }
        body.theme-dark .ov-vrow, body.theme-dark .ov-drow { background: rgba(255,255,255,.05); border-color: rgba(122,145,165,.2); }
        body.theme-dark .ov-vrole, body.theme-dark .ov-dname { color: #f2f5f8; }
        body.theme-dark .ov-jump { background: transparent; color: #94a3b8; }
        body.theme-dark .ov-tag.min { background: rgba(255,255,255,.08); }
        body.theme-dark .ov-tag.ok {
            background: rgba(52, 130, 80, 0.28) !important;
            color: #6ee7b7 !important;
        }
        /* ov-card / ov-softin: Rim kommt aus der zentralen Surface-/Input-Liste.
           Hier nur Innenzeilen (Vertragszeilen) nachschärfen. */
        body.theme-dark .ov-vrow,
        body.theme-dark .ov-drow {
            border: 1px solid rgba(120, 170, 230, 0.16) !important;
            background: rgba(8, 18, 34, 0.45) !important;
            background-image: none !important;
            box-shadow: none;
        }

        /* ── Dark Liquid Glass: MA-Tab-Flächen (Verfügbarkeit, Leerstates) ── */
        .vf-card {
            background: #f6f3ee; border: 1px solid #e7e1d8; border-radius: 14px;
            padding: 14px 16px; margin-bottom: 12px;
        }
        .vf-empty {
            background: #f6f3ee; border: 1px solid #e7e1d8; border-radius: 14px;
            padding: 18px; color: #8b8b8b; font-size: 13px;
        }
        .vf-th {
            text-align: center; padding: 4px 6px; background: #efeae2;
            font-size: 12px; color: #3f3f3f; border: 1px solid #e7e1d8;
        }
        .vf-td {
            text-align: center; padding: 6px; font-size: 12px;
            border: 1px solid #e7e1d8; color: #3f3f3f;
        }
        .vf-td.empty { color: #c2bbae; background: #faf8f5; }
        .vf-title { font-weight: 700; font-size: 13.5px; color: #3f3f3f; }
        .vf-foot { font-size: 11.5px; color: #8b8b8b; margin-top: 4px; }
        body.theme-dark .vf-card,
        body.theme-dark .vf-empty {
            background: var(--dlg-glass) !important;
            border-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text) !important;
            box-shadow: var(--dlg-shadow);
        }
        body.theme-dark .vf-th {
            background: rgba(255,255,255,.06) !important;
            color: var(--dlg-text-strong) !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .vf-td {
            color: var(--dlg-text) !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .vf-td.empty {
            color: var(--dlg-text-muted) !important;
            background: rgba(255,255,255,.03) !important;
        }
        body.theme-dark .vf-title { color: var(--dlg-text-strong) !important; }
        body.theme-dark .vf-foot { color: var(--dlg-text-soft) !important; }

        /* MA-Tabs: aktive Emp-Tabs als Glas-Pillen (auch ausserhalb liquid overrides) */
        body.theme-dark #page-mitarbeiter .emp-tab {
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(122,145,165,.14);
            border-radius: 12px;
            color: var(--dlg-text-soft) !important;
        }
        body.theme-dark #page-mitarbeiter .emp-tab.active {
            background: var(--dlg-active) !important;
            border-color: var(--dlg-active-border) !important;
            color: var(--dlg-active-text) !important;
            box-shadow: inset 0 1px 0 var(--dlg-glass-inner);
        }
        /* Leerstates mit dashed Border → ruhiges Glas */
        body.theme-dark [style*="border:1px dashed"],
        body.theme-dark [style*="border: 1px dashed"] {
            border-color: var(--dlg-glass-border) !important;
            background: rgba(255,255,255,.03) !important;
        }


        /* Liquid-Employee Light: Innen-Frames rahmenlos — Aussen-Schalen
           (Liste + Detail) behalten Kohle-Fill bis ganz unten, sonst scheint
           .main-Weiss durch (Walter 18.07.2026). */
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .liquid-employee-nav,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .emp-detail-header,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .emp-detail-tabs,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .emp-detail-body,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .emp-field-grid,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .emp-field-grid-2,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .emp-field-grid-3,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .emp-contract-strip,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .emp-contract-row {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        /* Hell: Aussen-Schalen warm durchgezogen (kein Weiss-Streifen unten) */
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .emp-list-panel,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .liquid-employee-list,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .emp-detail-panel,
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee .liquid-employee-detail {
            background-color: var(--emp-fill) !important;
            background-image: var(--emp-fill-grad), var(--emp-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow: var(--emp-shadow) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        body:not(.theme-dark) .main:has(#page-mitarbeiter.active),
        body:not(.theme-dark) #page-mitarbeiter.liquid-employee {
            background:
                radial-gradient(ellipse 70% 50% at 85% -5%, rgba(255, 255, 255, 0.70) 0%, transparent 55%),
                radial-gradient(ellipse 55% 45% at 8% 100%, rgba(180, 165, 140, 0.14) 0%, transparent 55%),
                linear-gradient(160deg, #f6f3ee 0%, #efebe3 48%, #faf8f5 100%) !important;
        }
        /* Dark: Innen-Raster rahmenlos — Header bleibt Glas (Mockup),
           Tabs bekommen eigene Pillen-Regeln weiter unten. */
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-tabs,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-body,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-grid,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-grid-2,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-field-grid-3 {
            background: transparent !important;
            background-image: none !important;
            border-color: transparent !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-header {
            border-bottom: 0 !important;
        }
        #page-mitarbeiter.liquid-employee .emp-grid-attached {
            border-top-color: transparent !important;
        }
        #page-mitarbeiter.liquid-employee .emp-tab,
        #page-mitarbeiter.liquid-employee .emp-tab.active,
        #page-mitarbeiter.liquid-employee .emp-list-item,
        #page-mitarbeiter.liquid-employee .liquid-employee-row,
        #page-mitarbeiter.liquid-employee .emp-list-item.active,
        #page-mitarbeiter.liquid-employee .liquid-employee-row-active,
        #page-mitarbeiter.liquid-employee .emp-contract-row {
            border-color: transparent !important;
            box-shadow: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-list-item,
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-employee-row {
            border-color: transparent !important;
            box-shadow: none !important;
        }
        /* .emp-tab.active (Underline-Variante) entfernt 22.07.2026 — Gewinner: Kohle-Pille (!important) weiter unten. */
        #page-mitarbeiter.liquid-employee .emp-contract-row {
            padding-left: 0;
            padding-right: 0;
        }

        /* Liquid-Glass Tab-Leiste im MA-Detail (Walter-Wunsch 27.06.2026): Pillen
           im selben Look wie die Seiten-Nav. Steht bewusst NACH dem „keine
           Innen-Frames"-Override oben und gewinnt dadurch (gleiche Spezifität,
           spätere Quelle + !important). */
        #page-mitarbeiter.liquid-employee .emp-detail-tabs {
            margin-top: 12px;
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
            gap: 8px !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        /* Hell-Tabs: weiche Kohle-Glas-Pillen (Walter 18.07.2026) —
           gleiche Technik wie Dark (Fill-Grad + Rim + Bevel), ohne
           flaches Hart-Schwarz und ohne Milch-Blur. */
        #page-mitarbeiter.liquid-employee .emp-tab {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 46px;
            padding: 7px 10px !important;
            border: 1px solid transparent !important;
            border-radius: 14px !important;
            background-color: #f4f0e8 !important;
            background-image:
                linear-gradient(160deg, #fffcf8 0%, #f5f1e9 48%, #ebe4d8 100%),
                linear-gradient(135deg,
                    rgba(255, 255, 255, 0.96) 0%,
                    rgba(210, 200, 185, 0.42) 40%,
                    rgba(120, 110, 95, 0.14) 68%,
                    rgba(255, 255, 255, 0.78) 100%) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            color: #5a554f !important;
            font-size: 11px;
            font-weight: 680 !important;
            box-shadow:
                0 0 0 1px rgba(90, 80, 65, 0.07),
                0 4px 12px rgba(60, 55, 48, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            text-decoration: none !important;
            transition: transform .14s ease, background .14s ease, box-shadow .14s ease, color .14s ease;
        }
        #page-mitarbeiter.liquid-employee .emp-tab:hover {
            transform: translateY(-1px);
            background-image:
                linear-gradient(160deg, #ffffff 0%, #f8f4ec 48%, #efe8dc 100%),
                linear-gradient(135deg,
                    rgba(255, 255, 255, 0.98) 0%,
                    rgba(210, 200, 185, 0.48) 42%,
                    rgba(255, 255, 255, 0.85) 100%) !important;
            color: #3f3f3f !important;
            box-shadow:
                0 0 0 1px rgba(90, 80, 65, 0.10),
                0 6px 16px rgba(60, 55, 48, 0.09),
                inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
        }
        #page-mitarbeiter.liquid-employee .emp-tab.active {
            /* EINZIGE .emp-tab.active-Regel (Gewinner; Dubletten am 22.07.2026 entfernt).
               Weiche Kohle-Aktiv-Pille — Verlauf + Pearl-Rim, kein Flachblock */
            background-color: #4a4640 !important;
            background-image:
                linear-gradient(160deg, #6a655c 0%, #4a4640 42%, #35322d 100%),
                linear-gradient(135deg,
                    rgba(255, 255, 255, 0.55) 0%,
                    rgba(200, 190, 170, 0.35) 38%,
                    rgba(80, 70, 55, 0.35) 68%,
                    rgba(255, 245, 230, 0.28) 100%) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            color: #ffffff !important;
            box-shadow:
                0 0 0 1px rgba(90, 80, 65, 0.14),
                0 4px 12px rgba(60, 55, 48, 0.14),
                0 12px 26px rgba(60, 55, 48, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.28),
                inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
            text-decoration: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-detail-tabs {
            background: transparent !important;
            border-color: transparent !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-tab {
            border: 1px solid transparent !important;
            background-color: var(--dlg-fill-field) !important;
            background-image: linear-gradient(#152a42, #0f1c30), var(--dlg-rim-soft) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            color: var(--dlg-text-soft) !important;
            box-shadow:
                0 4px 12px rgba(0, 4, 14, 0.32),
                inset 0 1px 0 rgba(210, 235, 255, 0.14) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-tab:hover {
            background-image: linear-gradient(#1c3650, #152a42), var(--dlg-rim) !important;
            color: #ffffff !important;
            box-shadow:
                0 6px 16px rgba(0, 4, 14, 0.38),
                0 0 12px rgba(70, 150, 235, 0.12),
                inset 0 1px 0 rgba(220, 240, 255, 0.18) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-tab.active {
            border: 1px solid transparent !important;
            background-image: linear-gradient(#2563a0, #1a4a7a), var(--dlg-rim-hot) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            color: #ffffff !important;
            box-shadow:
                0 0 18px rgba(70, 150, 235, 0.28),
                0 8px 18px rgba(0, 4, 14, 0.40),
                inset 0 1px 0 rgba(235, 248, 255, 0.28) !important;
            text-decoration: none !important;
        }

        /* ── Liquid-Glass Tab-INHALTE (Walter-Wunsch 27.06.2026) ──────────
           Legt sich über die bestehenden Karten/Tabellen der MA-Detail-Tabs.
           Logik/IDs/Handler bleiben unangetastet — reiner Look. */
        /* Familien-Karten (Ehepartner, Kinder) → Glas statt massiv grau */
        #page-mitarbeiter.liquid-employee .emp-family-card {
            background: rgba(255,255,255,.32) !important;
            border: 1px solid rgba(255,255,255,.52) !important;
            border-radius: 16px !important;
            box-shadow: 0 12px 32px rgba(72,63,53,.08), inset 0 1px 0 rgba(255,255,255,.52) !important;
            backdrop-filter: blur(18px) saturate(150%);
            -webkit-backdrop-filter: blur(18px) saturate(150%);
        }
        #page-mitarbeiter.liquid-employee .emp-family-card table.fm-subtable td,
        #page-mitarbeiter.liquid-employee .emp-family-card .fm-subrow {
            background: rgba(255,255,255,.62) !important;
            border: 1px solid rgba(255,255,255,.70) !important;
            border-radius: 10px !important;
        }
        /* Tabellen (Bank, Absenzen, KTG, Dokumente) → Glas-Header + leichte Zeilen */
        #page-mitarbeiter.liquid-employee .dok-table thead th,
        #page-mitarbeiter.liquid-employee .abs-table th {
            background: rgba(255,255,255,.40) !important;
            color: #526071 !important;
            border-bottom: 1px solid rgba(255,255,255,.55) !important;
        }
        #page-mitarbeiter.liquid-employee .dok-table tbody td,
        #page-mitarbeiter.liquid-employee .abs-table td {
            border-bottom: 1px solid rgba(255,255,255,.42) !important;
        }
        #page-mitarbeiter.liquid-employee .dok-table tbody tr:hover td,
        #page-mitarbeiter.liquid-employee .abs-table tbody tr:hover td {
            background: rgba(255,255,255,.35) !important;
        }
        /* Dark-Mode-Hover (Walter 28.06.2026): Die generische Regel
           `tbody tr:hover { background:#f8fafc }` (oben) macht JEDE Zeile beim
           Hover fast weiss — im Dunkelmodus unlesbar. Darum hier die TR-
           Weissfärbung neutralisieren und stattdessen ein dezentes, deckendes
           Highlight auf den Zellen setzen (helle Schrift bleibt lesbar). */
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-table tbody tr:hover,
        body.theme-dark #page-mitarbeiter.liquid-employee .abs-table tbody tr:hover {
            background: transparent !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-table tbody tr:hover td,
        body.theme-dark #page-mitarbeiter.liquid-employee .abs-table tbody tr:hover td {
            background: rgba(125,160,205,.16) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-family-card table.fm-subtable td,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-family-card .fm-subrow {
            border: 1px solid transparent !important;
            background-image: var(--dlg-fill-field), var(--dlg-rim-soft) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-table thead th,
        body.theme-dark #page-mitarbeiter.liquid-employee .abs-table th {
            background: rgba(255,255,255,.05) !important;
            color: #94a3b8 !important;
            border-bottom-color: rgba(255,255,255,.10) !important;
        }

        /* ── Absenzen-Tab: nur Datenzeilen scrollen (Walter 19.07.2026) ──
           Info-Panels + Spaltenköpfe FIX ausserhalb Scroll (kein sticky) —
           sonst hüpfen sie bei Top/Bottom. Analog Stempelzeiten/Dokumente. */
        #page-mitarbeiter.liquid-employee .emp-detail-body.abs-noscroll {
            overflow: hidden !important;
            overscroll-behavior: none;
            display: flex;
            flex-direction: column;
            min-height: 0;
            flex: 1 1 auto;
            padding-bottom: 6px;
            background: transparent !important;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.abs-noscroll #emp-tab-absenzen.active {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            overscroll-behavior: none;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.abs-noscroll .abs-ktg-layout {
            flex: 1 1 auto;
            min-height: 0;
            height: 100%;
            align-items: stretch;
            overflow: hidden;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.abs-noscroll .abs-ktg-main {
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.abs-noscroll .abs-ktg-main > .emp-section-title {
            flex: 0 0 auto;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.abs-noscroll #absenzenContent {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            height: 100%;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.abs-noscroll .abs-ktg-side {
            position: static;
            min-height: 0;
            max-height: 100%;
            overflow: auto;
            overscroll-behavior: contain;
        }
        #page-mitarbeiter.liquid-employee .abs-list-shell {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            height: 100%;
            overflow: hidden;
            overscroll-behavior: none;
            border: 1px solid transparent;
            border-radius: 16px;
            background-color: var(--emp-fill);
            background-image: var(--emp-fill-grad), var(--emp-rim);
            background-origin: padding-box, border-box;
            background-clip: padding-box, border-box;
            box-shadow: var(--emp-shadow);
        }
        #page-mitarbeiter.liquid-employee .abs-list-fixed {
            flex: 0 0 auto;
            overflow: hidden;
        }
        #page-mitarbeiter.liquid-employee .abs-info-panels {
            padding: 10px 12px 0;
        }
        #page-mitarbeiter.liquid-employee .abs-info-panels > div:last-child {
            margin-bottom: 8px;
        }
        #page-mitarbeiter.liquid-employee .abs-cols {
            flex: 0 0 auto;
            overflow: hidden;
            background: #f6f3ee;
            border-bottom: 1px solid rgba(90, 80, 65, 0.12);
        }
        #page-mitarbeiter.liquid-employee .abs-list-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            overscroll-behavior: none;
        }
        /* McBook-Fix: nicht mehr table-layout:fixed — sonst wird die Aktions-
           Spalte (Doku+⋮) auf schmalen Panels abgeschnitten ohne Scroll.
           Breite = Inhalt, min 100%; horizontal scrollen im .abs-list-scroll. */
        #page-mitarbeiter.liquid-employee .abs-table {
            width: max-content;
            min-width: 100%;
            table-layout: auto;
            border-collapse: separate;
            border-spacing: 0;
        }
        #page-mitarbeiter.liquid-employee .abs-col-type { width: 7rem; }
        #page-mitarbeiter.liquid-employee .abs-col-period { width: 11rem; }
        #page-mitarbeiter.liquid-employee .abs-col-days { width: 5rem; }
        #page-mitarbeiter.liquid-employee .abs-col-hours { width: 9rem; }
        #page-mitarbeiter.liquid-employee .abs-col-notes { width: auto; min-width: 6rem; }
        #page-mitarbeiter.liquid-employee .abs-col-actions { width: 1%; min-width: 5.5rem; }
        /* Aktionszelle = Teil der Zeile (kein sticky-Streifen mit eigener Farbe) —
           gleiches Muster wie .dok-td-actions. Auf schmalen Macs überdeckte der
           opaque Sticky-Streifen die Bemerkung und liess Doku/⋮ «schweben». */
        #page-mitarbeiter.liquid-employee .abs-table th:last-child,
        #page-mitarbeiter.liquid-employee .abs-table td.abs-actions {
            position: static;
            right: auto;
            z-index: auto;
            background: transparent !important;
            box-shadow: none !important;
            padding: 6px 10px 6px 6px !important;
            vertical-align: middle;
            white-space: nowrap;
            text-align: right;
        }
        #page-mitarbeiter.liquid-employee .abs-cols .abs-table th:last-child {
            background: transparent !important;
            z-index: auto;
        }
        #page-mitarbeiter.liquid-employee .abs-actions {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            width: auto;
        }
        #page-mitarbeiter.liquid-employee .abs-actions > * + * { margin-left: 0; }
        #page-mitarbeiter.liquid-employee .abs-dok-btn {
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid rgba(90, 80, 65, 0.14);
            color: #646464;
            padding: 4px 8px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            line-height: 1;
            height: 30px;
            box-shadow: 0 1px 2px rgba(60, 55, 48, 0.06);
            flex-shrink: 0;
        }
        #page-mitarbeiter.liquid-employee .abs-dok-btn:hover {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(90, 80, 65, 0.28);
            color: #3f3f3f;
            box-shadow: 0 2px 8px rgba(60, 55, 48, 0.10);
        }
        #page-mitarbeiter.liquid-employee .abs-notes {
            max-width: 14rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .abs-dok-btn {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(165, 215, 255, 0.22);
            color: #cbd5e1;
            box-shadow: none;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .abs-dok-btn:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(165, 215, 255, 0.40);
            color: #f1f5f9;
        }
        #page-mitarbeiter.liquid-employee .abs-cols .abs-table thead th {
            position: static !important;
            top: auto !important;
            background: #f6f3ee !important;
            background-image: none !important;
            box-shadow: none !important;
            border-bottom: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .abs-list-shell {
            background-color: var(--dlg-fill) !important;
            background-image: var(--dlg-fill-grad), var(--dlg-rim) !important;
            box-shadow: var(--dlg-shadow) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .abs-cols {
            background: #1c2634 !important;
            border-bottom-color: rgba(150, 200, 255, 0.14) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .abs-cols .abs-table thead th {
            background: #1c2634 !important;
            color: var(--dlg-text-soft) !important;
        }

        /* ── Dokumente-Tab: Liquid Glass / Kohle (Walter 18.07.2026) ──
           Baum + Liste als durchgehende Glas-Karten (gleiche Höhe), kein
           flaches Weiss-Panel das unten abbricht.
           Walter 19.07.2026: nur die Doku-Liste scrollt — Titel + Spaltenköpfe
           bleiben fix (analog Übersicht / ov-noscroll). */
        #page-mitarbeiter.liquid-employee .emp-detail-body.dok-noscroll {
            overflow: hidden !important;
            overscroll-behavior: none;
            display: flex;
            flex-direction: column;
            min-height: 0;
            flex: 1 1 auto;
            padding-bottom: 6px;
            background: transparent !important;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.dok-noscroll #emp-tab-dokumente.active {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            overscroll-behavior: none;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.dok-noscroll #empTabDokumente {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            overscroll-behavior: none;
            height: 100%;
        }
        #page-mitarbeiter.liquid-employee #empTabDokumente > .dok-toolbar {
            flex: 0 0 auto;
            margin-bottom: 10px;
        }
        #page-mitarbeiter.liquid-employee #empTabDokumente > .dok-layout {
            flex: 1 1 auto;
            min-height: 0;
            height: 100%;
            align-items: stretch;
            gap: 12px;
            grid-template-columns: 220px minmax(0, 1fr);
            overflow: hidden;
        }
        #page-mitarbeiter.liquid-employee .dok-search {
            max-width: none;
            border: 1px solid transparent !important;
            border-radius: 12px !important;
            background-color: #fff !important;
            background-image:
                linear-gradient(#ffffff, #ffffff),
                linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(210,200,185,0.45) 40%, rgba(255,255,255,0.88) 100%) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow:
                0 0 0 1px rgba(90, 80, 65, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
            color: #3f3f3f;
        }
        #page-mitarbeiter.liquid-employee .dok-toolbar button[onclick*="dokRunSearchNow"] {
            background: #3f3f3f !important;
            border: 1px solid #3f3f3f !important;
            border-radius: 12px !important;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(60, 55, 48, 0.16) !important;
        }
        #page-mitarbeiter.liquid-employee .dok-toolbar button[onclick*="dokRunSearchNow"]:hover {
            background: #2a2a2a !important;
        }
        #page-mitarbeiter.liquid-employee .dok-tree,
        #page-mitarbeiter.liquid-employee .dok-list {
            border: 1px solid transparent !important;
            border-radius: 16px !important;
            background-color: var(--emp-fill) !important;
            background-image: var(--emp-fill-grad), var(--emp-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow: var(--emp-shadow) !important;
            max-height: none !important;
            height: 100%;
            min-height: 0;
            overflow: auto;
            overscroll-behavior: contain;
        }
        #page-mitarbeiter.liquid-employee .dok-tree {
            padding: 8px !important;
        }
        #page-mitarbeiter.liquid-employee .dok-tree-node {
            border-radius: 10px;
            color: var(--emp-text);
            padding: 6px 8px;
        }
        #page-mitarbeiter.liquid-employee .dok-tree-node:hover {
            background: rgba(63, 63, 63, 0.06) !important;
        }
        #page-mitarbeiter.liquid-employee .dok-tree-node.active {
            background: rgba(63, 63, 63, 0.10) !important;
            color: #3f3f3f !important;
            box-shadow: inset 0 0 0 1px rgba(63, 63, 63, 0.12);
        }
        #page-mitarbeiter.liquid-employee .dok-tree-cat { color: var(--emp-text-strong) !important; }
        #page-mitarbeiter.liquid-employee .dok-tree-typ { color: var(--emp-text) !important; }
        #page-mitarbeiter.liquid-employee .dok-tree-count {
            background: rgba(63, 63, 63, 0.08) !important;
            color: #646464 !important;
            border-radius: 999px;
        }
        #page-mitarbeiter.liquid-employee .dok-tree-node.active .dok-tree-count {
            background: rgba(63, 63, 63, 0.14) !important;
            color: #3f3f3f !important;
        }
        #page-mitarbeiter.liquid-employee .dok-list {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            overscroll-behavior: none;
            min-height: 0;
        }
        #page-mitarbeiter.liquid-employee .dok-list-header {
            flex: 0 0 auto;
            z-index: 3;
            background: #faf8f5 !important;
            background-image: none !important;
            border-bottom: 1px solid rgba(90, 80, 65, 0.10) !important;
            color: var(--emp-text-strong) !important;
            padding: 12px 14px !important;
        }
        /* Spaltenköpfe FIX ausserhalb Scroll — kein sticky, kein Bounce. */
        #page-mitarbeiter.liquid-employee .dok-list-cols {
            flex: 0 0 auto;
            overflow: hidden;
            background: #f6f3ee !important;
            border-bottom: 1px solid rgba(90, 80, 65, 0.12) !important;
        }
        #page-mitarbeiter.liquid-employee .dok-list-cols .dok-table thead th {
            position: static !important;
            background: #f6f3ee !important;
            background-image: none !important;
        }
        /* Nur Zeilen scrollen. overscroll none + JS-Isolation (documents.js). */
        #page-mitarbeiter.liquid-employee .dok-list-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            overscroll-behavior: none;
        }
        #page-mitarbeiter.liquid-employee .dok-list-scroll .dok-table {
            border-collapse: separate;
            border-spacing: 0;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-list-header {
            background: #161e2a !important;
            background-image: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-list-cols {
            background: #1c2634 !important;
            border-bottom-color: rgba(150, 200, 255, 0.14) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-list-cols .dok-table thead th {
            background: #1c2634 !important;
        }
        /* Inhaltsschmal (kein 100%-Stretch) — bei vielen Spalten horizontal scrollen. */
        #page-mitarbeiter.liquid-employee .dok-list .dok-table {
            width: max-content;
            max-width: none;
            table-layout: auto;
        }
        /* Nicht 52vw — das bezieht sich aufs ganze Fenster und drückt die
           Aktions-Spalte auf McBooks aus dem sichtbaren Panel. */
        #page-mitarbeiter.liquid-employee .dok-name-line {
            max-width: min(22rem, 100%);
        }
        #page-mitarbeiter.liquid-employee .dok-date-cell {
            width: 4.6rem;
            min-width: 4.6rem;
            max-width: 4.6rem;
            padding: 5px 6px !important;
            box-sizing: border-box;
        }
        #page-mitarbeiter.liquid-employee .dok-table thead th.dok-sort-th[onclick*="erstellt"],
        #page-mitarbeiter.liquid-employee .dok-table thead th.dok-sort-th[onclick*="geaendert"] {
            width: 4.6rem;
            min-width: 4.6rem;
            max-width: 4.6rem;
            padding: 6px 6px !important;
            box-sizing: border-box;
        }
        #page-mitarbeiter.liquid-employee .dok-table tbody td {
            padding: 5px 8px;
        }
        /* Aktionszelle = Teil der Zeile (kein sticky-Streifen mit eigener Farbe). */
        #page-mitarbeiter.liquid-employee .dok-td-actions,
        #page-mitarbeiter.liquid-employee .dok-th-actions {
            padding: 4px 12px 4px 8px !important;
            position: static;
            background: transparent !important;
            box-shadow: none !important;
            width: 3rem;
            min-width: 3rem;
            text-align: center;
            vertical-align: middle;
        }
        #page-mitarbeiter.liquid-employee .dok-list-empty {
            color: #8b8b8b !important;
        }
        #page-mitarbeiter.liquid-employee .dok-list-header .btn-primary {
            background: #3f3f3f !important;
            border-color: #3f3f3f !important;
            border-radius: 12px !important;
            box-shadow: 0 4px 12px rgba(60, 55, 48, 0.14) !important;
        }
        #page-mitarbeiter.liquid-employee .dok-list-header .btn-outline {
            background: rgba(255, 255, 255, 0.72) !important;
            border: 1px solid rgba(90, 80, 65, 0.18) !important;
            border-radius: 12px !important;
            color: #3f3f3f !important;
        }
        #page-mitarbeiter.liquid-employee .dok-table thead th {
            background: rgba(90, 80, 65, 0.06) !important;
            color: #646464 !important;
            border-bottom: 1px solid rgba(90, 80, 65, 0.10) !important;
        }
        #page-mitarbeiter.liquid-employee .dok-table tbody td {
            border-bottom: 1px solid rgba(90, 80, 65, 0.07) !important;
            color: #2f2f2f !important;
        }
        #page-mitarbeiter.liquid-employee .dok-table tbody tr:hover td {
            background: rgba(63, 63, 63, 0.04) !important;
        }
        #page-mitarbeiter.liquid-employee .dok-menu-btn.dok-menu-btn-soft {
            background: rgba(255, 255, 255, 0.55) !important;
            border: 1px solid rgba(90, 80, 65, 0.14) !important;
            border-radius: 10px !important;
            color: #646464 !important;
            box-shadow: 0 1px 2px rgba(60, 55, 48, 0.06);
        }
        #page-mitarbeiter.liquid-employee .dok-menu-btn.dok-menu-btn-soft:hover {
            background: rgba(255, 255, 255, 0.92) !important;
            border-color: rgba(90, 80, 65, 0.28) !important;
            color: #3f3f3f !important;
            box-shadow: 0 2px 8px rgba(60, 55, 48, 0.10);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-menu-btn.dok-menu-btn-soft {
            background: rgba(255, 255, 255, 0.06) !important;
            border-color: rgba(165, 215, 255, 0.22) !important;
            color: #cbd5e1 !important;
            box-shadow: none;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-menu-btn.dok-menu-btn-soft:hover {
            background: rgba(255, 255, 255, 0.12) !important;
            border-color: rgba(165, 215, 255, 0.40) !important;
            color: #f1f5f9 !important;
        }
        /* Dark: Dokumente-Karten mit dlg-Tokens */
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-tree,
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-list {
            background-color: var(--dlg-fill) !important;
            background-image: var(--dlg-fill-grad), var(--dlg-rim) !important;
            box-shadow: var(--dlg-shadow) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-list-header {
            border-bottom-color: rgba(165, 215, 255, 0.12) !important;
            color: var(--dlg-text-strong) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-search {
            background-color: var(--dlg-fill-field) !important;
            background-image: linear-gradient(var(--dlg-fill-field), var(--dlg-fill-field)), var(--dlg-rim-soft) !important;
            color: var(--dlg-text-strong) !important;
            box-shadow: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-tree-node:hover {
            background: rgba(80, 140, 210, 0.12) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-tree-node.active {
            background: rgba(45, 105, 180, 0.35) !important;
            color: #fff !important;
            box-shadow: inset 0 0 0 1px rgba(165, 215, 255, 0.22);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-tree-cat { color: var(--dlg-text-strong) !important; }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-tree-typ { color: var(--dlg-text) !important; }
        body.theme-dark #page-mitarbeiter.liquid-employee .dok-tree-count {
            background: rgba(80, 140, 210, 0.18) !important;
            color: var(--dlg-text-soft) !important;
        }

        /* ── Stempelzeiten-Tab: Liquid Glass / Kohle (Walter 18.07.2026) ──
           Walter 19.07.2026: Filter + Spaltenköpfe FIX ausserhalb Scroll
           (kein sticky) — sonst hüpfen sie bei Top/Bottom. */
        #page-mitarbeiter.liquid-employee .emp-detail-body.stempel-noscroll {
            overflow: hidden !important;
            overscroll-behavior: none;
            display: flex;
            flex-direction: column;
            min-height: 0;
            flex: 1 1 auto;
            padding-bottom: 6px;
            background: transparent !important;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.stempel-noscroll #emp-tab-stempelzeiten.active {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            overscroll-behavior: none;
        }
        #page-mitarbeiter.liquid-employee .emp-detail-body.stempel-noscroll #stempelzeitenContent {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            height: 100%;
        }
        #page-mitarbeiter.liquid-employee .stempel-tab-wrap {
            padding: 0 14px 10px;
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            overscroll-behavior: none;
            height: 100%;
        }
        #page-mitarbeiter.liquid-employee .stempel-filter-row,
        #page-mitarbeiter.liquid-employee #stempelFilterRow.stempel-filter-row {
            position: relative;
            top: auto;
            z-index: 3;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            padding: 10px 4px 12px;
            margin: 0;
            background: #faf8f5 !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: inset 0 -1px 0 rgba(90, 80, 65, 0.10) !important;
        }
        #page-mitarbeiter.liquid-employee .stempel-period-sel {
            border: 1px solid transparent !important;
            border-radius: 12px !important;
            font-size: 13px !important;
            color: #3f3f3f !important;
            background-color: #fff !important;
            background-image:
                linear-gradient(#ffffff, #ffffff),
                linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(210,200,185,0.45) 40%, rgba(255,255,255,0.88) 100%) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow:
                0 0 0 1px rgba(90, 80, 65, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
            padding: 7px 10px !important;
        }
        #page-mitarbeiter.liquid-employee .stempel-period-year { width: 96px; }
        #page-mitarbeiter.liquid-employee .stempel-period-month { width: 150px; }
        #page-mitarbeiter.liquid-employee .stempel-count {
            font-size: 12.5px;
            color: #8b8b8b;
            letter-spacing: 0.01em;
        }
        #page-mitarbeiter.liquid-employee .stempel-liste {
            flex: 1 1 auto;
            min-height: 0;
            margin-top: 0;
            overflow: auto;
            overscroll-behavior: none;
        }
        #page-mitarbeiter.liquid-employee .stempel-loading,
        #page-mitarbeiter.liquid-employee .stempel-empty {
            padding: 28px 16px;
            text-align: center;
            font-size: 13px;
            color: #8b8b8b;
        }
        #page-mitarbeiter.liquid-employee .stempel-quick-nav {
            margin-top: 12px;
            text-align: left;
        }
        #page-mitarbeiter.liquid-employee .stempel-table-card {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            border: 1px solid transparent;
            border-radius: 16px;
            overflow: hidden;
            background-color: var(--emp-fill);
            background-image: var(--emp-fill-grad), var(--emp-rim);
            background-origin: padding-box, border-box;
            background-clip: padding-box, border-box;
            box-shadow: var(--emp-shadow);
        }
        #page-mitarbeiter.liquid-employee .stempel-cols {
            flex: 0 0 auto;
            overflow: hidden;
            background: #f6f3ee;
            border-bottom: 1px solid rgba(90, 80, 65, 0.12);
        }
        #page-mitarbeiter.liquid-employee .stempel-table {
            width: 100%;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0;
            background: transparent;
            font-size: 12.5px;
            color: var(--emp-text-strong, #2f2f2f);
        }
        #page-mitarbeiter.liquid-employee .stempel-col-date { width: 12%; }
        #page-mitarbeiter.liquid-employee .stempel-col-time { width: 7%; }
        #page-mitarbeiter.liquid-employee .stempel-col-num { width: 7%; }
        #page-mitarbeiter.liquid-employee .stempel-col-comment { width: auto; }
        #page-mitarbeiter.liquid-employee .stempel-th {
            padding: 9px 10px;
            font-size: 10.5px;
            font-weight: 650;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #646464 !important;
            background: #f6f3ee !important;
            position: static;
            top: auto;
            z-index: auto;
            box-shadow: none !important;
            border: none;
            white-space: nowrap;
        }
        #page-mitarbeiter.liquid-employee .stempel-th:first-child {
            border-top-left-radius: 15px;
        }
        #page-mitarbeiter.liquid-employee .stempel-th:last-child {
            border-top-right-radius: 15px;
        }
        #page-mitarbeiter.liquid-employee .stempel-th-left { text-align: left; }
        #page-mitarbeiter.liquid-employee .stempel-th-right { text-align: right; }
        #page-mitarbeiter.liquid-employee .stempel-td {
            padding: 7px 10px;
            vertical-align: top;
            border-top: 1px solid rgba(90, 80, 65, 0.07);
            color: #3f3f3f;
        }
        #page-mitarbeiter.liquid-employee .stempel-row:first-child .stempel-td {
            border-top: none;
        }
        #page-mitarbeiter.liquid-employee .stempel-row:hover .stempel-td {
            background: rgba(63, 63, 63, 0.035);
        }
        #page-mitarbeiter.liquid-employee .stempel-row-week-end .stempel-td {
            border-bottom: 2px solid rgba(90, 80, 65, 0.14);
        }
        #page-mitarbeiter.liquid-employee .stempel-td-date {
            white-space: nowrap;
            width: 98px;
            color: #646464;
            font-variant-numeric: tabular-nums;
        }
        #page-mitarbeiter.liquid-employee .stempel-td-time,
        #page-mitarbeiter.liquid-employee .stempel-td-num {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-variant-numeric: tabular-nums;
            font-size: 12px;
            width: 58px;
        }
        #page-mitarbeiter.liquid-employee .stempel-td-num { text-align: right; }
        #page-mitarbeiter.liquid-employee .stempel-td-total {
            width: 64px;
            font-weight: 650;
            color: #2f2f2f;
        }
        #page-mitarbeiter.liquid-employee .stempel-night { color: #646464; }
        #page-mitarbeiter.liquid-employee .stempel-night-zero { color: #b0aaa0; }
        #page-mitarbeiter.liquid-employee .stempel-td-comment {
            font-size: 12px;
            color: #646464;
        }
        #page-mitarbeiter.liquid-employee .stempel-kommentar-wrap {
            display: flex;
            gap: 22px;
            align-items: baseline;
            flex-wrap: wrap;
        }
        #page-mitarbeiter.liquid-employee .stempel-week-badge {
            display: inline-flex;
            align-items: baseline;
            gap: 10px;
            white-space: nowrap;
            margin-right: 8px;
            padding: 3px 10px;
            border-radius: 999px;
            background: rgba(63, 63, 63, 0.06);
            box-shadow: inset 0 0 0 1px rgba(90, 80, 65, 0.08);
            font-size: 11.5px;
        }
        #page-mitarbeiter.liquid-employee .stempel-week-kw {
            font-weight: 500;
            color: #8b8b8b;
        }
        #page-mitarbeiter.liquid-employee .stempel-week-hrs {
            font-weight: 700;
            color: #2f2f2f;
            font-variant-numeric: tabular-nums;
        }
        #page-mitarbeiter.liquid-employee .stempel-week-hrs.over {
            color: #b45309;
        }
        #page-mitarbeiter.liquid-employee .stempel-time-edited {
            color: #b45309 !important;
            font-weight: 650;
        }
        #page-mitarbeiter.liquid-employee .stempel-edit-meta {
            color: #8b8b8b;
        }
        #page-mitarbeiter.liquid-employee .stempel-orig-row td,
        #page-mitarbeiter.liquid-employee .stempel-orig-row .stempel-td {
            background: rgba(245, 210, 140, 0.28) !important;
            border-top: 1px dashed rgba(180, 140, 60, 0.40) !important;
            color: #7c5a1a !important;
            font-size: 11.5px !important;
        }
        #page-mitarbeiter.liquid-employee .stempel-orig-label {
            padding-left: 22px !important;
            font-weight: 600;
            white-space: nowrap;
        }
        #page-mitarbeiter.liquid-employee .stempel-orig-time {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
            font-weight: 650 !important;
            color: #7c5a1a !important;
            min-width: 52px;
        }
        #page-mitarbeiter.liquid-employee .stempel-orig-comment {
            font-style: italic;
        }
        #page-mitarbeiter.liquid-employee .stempel-ft {
            padding: 10px;
            font-weight: 650;
            background: rgba(90, 80, 65, 0.07) !important;
            border-top: 1px solid rgba(90, 80, 65, 0.14);
            color: #646464;
        }
        #page-mitarbeiter.liquid-employee .stempel-foot-row .stempel-ft:first-child {
            border-bottom-left-radius: 15px;
        }
        #page-mitarbeiter.liquid-employee .stempel-foot-row .stempel-ft:last-child {
            border-bottom-right-radius: 15px;
        }
        #page-mitarbeiter.liquid-employee .stempel-ft-label {
            font-size: 12px;
            font-weight: 600;
        }
        #page-mitarbeiter.liquid-employee .stempel-ft-num {
            text-align: right;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 12.5px;
            font-variant-numeric: tabular-nums;
        }
        #page-mitarbeiter.liquid-employee .stempel-ft-total {
            font-weight: 750;
            color: #2f2f2f;
        }

        /* Dark: Stempelzeiten mit dlg-Tokens */
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-filter-row,
        body.theme-dark #page-mitarbeiter.liquid-employee #stempelFilterRow.stempel-filter-row {
            background: #161e2a !important;
            box-shadow: inset 0 -1px 0 var(--dlg-glass-border) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-period-sel {
            background-color: var(--dlg-fill-field) !important;
            background-image:
                linear-gradient(var(--dlg-fill-field), var(--dlg-fill-field)),
                var(--dlg-rim-soft) !important;
            color: var(--dlg-text-strong) !important;
            box-shadow: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-count {
            color: var(--dlg-text-soft);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-loading,
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-empty {
            color: var(--dlg-text-muted);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-table-card {
            background-color: var(--dlg-fill) !important;
            background-image: var(--dlg-fill-grad), var(--dlg-rim) !important;
            box-shadow: var(--dlg-shadow) !important;
            overflow: hidden !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-cols {
            background: #1c2634 !important;
            border-bottom-color: rgba(150, 200, 255, 0.14) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-th {
            background: #1c2634 !important;
            color: var(--dlg-text-soft) !important;
            box-shadow: none !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-td {
            border-top-color: rgba(165, 215, 255, 0.10);
            color: var(--dlg-text);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-row:hover .stempel-td {
            background: rgba(125, 160, 205, 0.10) !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-row-week-end .stempel-td {
            border-bottom-color: rgba(165, 215, 255, 0.18);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-td-date,
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-td-comment {
            color: var(--dlg-text-soft);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-td-total {
            color: var(--dlg-text-strong);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-night { color: var(--dlg-text-soft); }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-night-zero { color: var(--dlg-text-muted); }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-week-badge {
            background: rgba(80, 140, 210, 0.14);
            box-shadow: inset 0 0 0 1px rgba(165, 215, 255, 0.14);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-week-kw { color: var(--dlg-text-muted); }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-week-hrs { color: var(--dlg-text-strong); }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-week-hrs.over { color: #fbbf24; }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-time-edited { color: #fbbf24 !important; }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-orig-row td,
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-orig-row .stempel-td {
            background: rgba(120, 80, 20, 0.34) !important;
            border-top-color: rgba(252, 211, 77, 0.32) !important;
            color: #fcd34d !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-orig-time {
            color: #fcd34d !important;
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-ft {
            background: rgba(80, 140, 210, 0.10) !important;
            border-top-color: var(--dlg-glass-border);
            color: var(--dlg-text-soft);
        }
        body.theme-dark #page-mitarbeiter.liquid-employee .stempel-ft-total {
            color: var(--dlg-text-strong);
        }

        /* Datumsfeld tippbar + Kalender-Button daneben (Walter 27.07.2026).
           Klick aufs Feld = Tippen; 📅 öffnet das Jahresmenü. */
        .yp-field-wrap {
            display: flex;
            align-items: stretch;
            gap: 6px;
            width: 100%;
            min-width: 0;
        }
        .yp-field-wrap > input[type="date"] {
            flex: 1 1 auto;
            min-width: 0;
        }
        .yp-cal-btn {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            min-height: 36px;
            padding: 0;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,.62);
            background: rgba(255,255,255,.55);
            color: #646464;
            cursor: pointer;
            box-shadow: 0 6px 16px rgba(72,63,53,.08), inset 0 1px 0 rgba(255,255,255,.62);
        }
        .yp-cal-btn:hover {
            background: rgba(255,255,255,.72);
            color: #3f3f3f;
            transform: translateY(-1px);
        }
        body.theme-dark .yp-cal-btn {
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.12);
            color: #cbd5e1;
        }
        /* Kompaktes Jahres-/Monats-Datumsmenü (Walter 26.07.2026):
           Chrome-ähnlich klein, öffnet sofort die Jahresliste mit Vorjahr
           (2025) sichtbar oberhalb des aktuellen Jahres (2026). */
        .yp-menu {
            position: fixed;
            z-index: 10050;
            width: 200px;
            max-width: calc(100vw - 16px);
            background: #fff;
            border: 1px solid #d8d1c4;
            border-radius: 8px;
            box-shadow: 0 6px 18px rgba(60, 55, 48, 0.14);
            padding: 4px 4px 2px;
            display: none;
            color: #3f3f3f;
            font-family: inherit;
        }
        .yp-menu-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            margin-bottom: 2px;
            padding: 0 1px 1px;
        }
        .yp-menu-title, .yp-back {
            font-size: 11.5px;
            font-weight: 700;
            color: #1a1a1a;
            background: none;
            border: none;
            cursor: pointer;
            padding: 1px 0;
        }
        .yp-back:hover { color: #3f3f3f; }
        .yp-menu-close {
            width: 20px; height: 20px;
            border-radius: 5px;
            border: 1px solid #e2ddd3;
            background: #fff;
            color: #8b8b8b;
            cursor: pointer;
            font-size: 11px;
            line-height: 1;
        }
        .yp-menu-close:hover { background: #f6f3ee; color: #3f3f3f; }
        .yp-year-list {
            overflow-y: auto;
            max-height: 200px;
            border-radius: 5px;
            border: 1px solid #efeae2;
        }
        .yp-year-row {
            display: block;
            width: 100%;
            text-align: left;
            padding: 5px 8px;
            border: none;
            border-bottom: 1px solid #f0ebe3;
            border-radius: 0;
            background: #f5f3ef;
            color: #3f3f3f;
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
        }
        .yp-year-row:hover { background: #ebe7df; }
        .yp-year-row.is-open {
            background: #ebe7df;
            font-weight: 700;
            color: #1a1a1a;
        }
        .yp-year-row.is-prev { color: #1a1a1a; }
        .yp-months {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            padding: 4px 4px 5px;
            background: #fff;
            border-bottom: 1px solid #f0ebe3;
        }
        .yp-month {
            padding: 5px 1px;
            border-radius: 5px;
            border: none;
            background: transparent;
            color: #3f3f3f;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
        }
        .yp-month:hover { background: #f6f3ee; }
        .yp-month.is-active {
            background: #3f3f3f;
            color: #fff;
        }
        .yp-dow {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1px;
            margin-bottom: 1px;
            text-align: center;
            font-size: 10px;
            font-weight: 700;
            color: #8b8b8b;
        }
        .yp-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1px;
        }
        .yp-day {
            height: 24px;
            border: none;
            border-radius: 5px;
            background: transparent;
            color: #3f3f3f;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
        }
        .yp-day.is-empty { cursor: default; }
        .yp-day:not(.is-empty):hover { background: #f6f3ee; }
        .yp-day.is-today { box-shadow: inset 0 0 0 1px #cbd5e1; }
        .yp-day.is-active {
            background: #3f3f3f;
            color: #fff;
        }
        .yp-menu-foot {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px;
            padding: 1px 1px 0;
        }
        .yp-link {
            background: none;
            border: none;
            color: #64748b;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            padding: 3px 2px;
        }
        .yp-link:hover { color: #1a1a1a; }
        body.theme-dark .yp-menu {
            background: #1e2430;
            border-color: var(--dlg-glass-border, #334155);
            color: #e2e8f0;
        }
        body.theme-dark .yp-menu-title,
        body.theme-dark .yp-back { color: #f1f5f9; }
        body.theme-dark .yp-year-list { border-color: var(--dlg-glass-border, #334155); }
        body.theme-dark .yp-year-row {
            background: rgba(255,255,255,0.04);
            border-bottom-color: var(--dlg-glass-border, #334155);
            color: #e2e8f0;
        }
        body.theme-dark .yp-year-row:hover,
        body.theme-dark .yp-year-row.is-open { background: rgba(255,255,255,0.08); }
        body.theme-dark .yp-months {
            background: #1e2430;
            border-bottom-color: var(--dlg-glass-border, #334155);
        }
        body.theme-dark .yp-month:hover,
        body.theme-dark .yp-day:not(.is-empty):hover { background: rgba(255,255,255,0.06); }
        body.theme-dark .yp-menu-close {
            background: rgba(255,255,255,0.04);
            border-color: var(--dlg-glass-border, #334155);
            color: #94a3b8;
        }

        /* Sticky-Kopfzeile für lange Detail-/Tab-Ansichten (Walter-Vorgabe
           15.05.2026): Titel + Aktions-Buttons (Speichern, Übertragen …)
           bleiben beim Scrollen oben sichtbar — nie Buttons, die wegscrollen.
           Auf die Kopfzeile mit den Aktions-Buttons anwenden; der scrollende
           Container ist .emp-detail-body. */
        .sticky-section-head {
            position: sticky; top: 0; z-index: 5;
            background: #fff;
            box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.10);
        }
        body.theme-dark .sticky-section-head {
            background: rgba(26, 36, 51, 0.88) !important;
            border-bottom: 1px solid var(--dlg-glass-border);
            backdrop-filter: blur(18px) saturate(130%);
            -webkit-backdrop-filter: blur(18px) saturate(130%);
        }

        /* Sticky-Kopfbereich für Voll-Seiten mit Liste darunter (Import-
           Seiten etc., Walter-Vorgabe 15.05.2026): Titel + Eingaben +
           Aktions-Buttons bleiben oben fix, nur die Ergebnis-Liste darunter
           scrollt. Scroll-Container ist .main. */
        .sticky-page-head {
            position: sticky; top: 0; z-index: 10;
            background: #f8fafc;
            padding-bottom: 6px;
            box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.18);
        }
        body.theme-dark .sticky-page-head {
            background: rgba(26, 36, 51, 0.90) !important;
            border-bottom: 1px solid var(--dlg-glass-border);
            backdrop-filter: blur(18px) saturate(130%);
            -webkit-backdrop-filter: blur(18px) saturate(130%);
        }
        /* Benutzerverwaltung: Kopf fix, NUR die Liste scrollt (Walter 22.07.2026).
           position:sticky griff hier nicht zuverlässig → robusteres Muster:
           Seite als Flex-Spalte, page-body ist der eigene Scroll-Container. */
        /* Generisch als Klasse (Walter 22.07.2026): .page.fixhead — Seite als
           Flex-Spalte, page-head (+ alles VOR page-body) bleibt fix, NUR
           page-body scrollt intern. Toolbars, die im page-body liegen und
           mitfixiert werden sollen, bekommen .sticky-section-head (sticky
           innerhalb des scrollenden page-body — das greift dort zuverlässig). */
        /* !important auf flex: die Regel `.main > .page.liquid-mask.active
           { flex: 1 0 auto }` (Z.~2065) hat 4-Klassen-Spezifität und gewann
           sonst — Seite konnte nicht schrumpfen, .main scrollte samt Titel
           (Walter-Bug 22.07.2026, Benutzerverwaltung). */
        .page.fixhead.active { display: flex !important; flex-direction: column; flex: 1 1 auto !important; min-height: 0; }
        .page.fixhead .sticky-page-head { position: static; background: transparent !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; }
        .page.fixhead .page-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
        /* KEIN padding-top am scrollenden page-body (Walter-Bug 22.07.2026:
           Daten scrollten im Padding-Streifen SICHTBAR ÜBER die klebende
           Kopfzeile — sticky pinnt erst unterhalb des Paddings). Auch KEIN
           Ersatz-Spacer: jeder Abstand über dem klebenden Element wäre
           Anlauf-Weg → die Kopfzeile «hüpft» beim Andocken (Walter-Feedback
           22.07.2026 v2). Inhalt startet bündig an der Pinn-Position. */
        .page.fixhead .page-body { padding-top: 0 !important; }
        /* Seiten mit .page-header (statt page-head): Header bekommt beim
           fixhead-Wrap einen zum page-body passenden Innenabstand. */
        .page.fixhead > .page-header,
        .page.fixhead .fh-page-head > .page-header { padding: 20px 32px 0; }
        /* Toolbars im scrollenden page-body (.sticky-section-head) — auf den
           Liquid-Seiten warmes Halbtransparent statt hartem Weiss. */
        .page.fixhead .page-body > .sticky-section-head {
            background: rgba(246, 243, 238, 0.92);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding-top: 6px;
            box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.12);
        }
        /* GENERISCH (Walter-Vorgabe 22.07.2026: «Titel sind Titel — auch die
           Spaltentitel bleiben stehen»): auf ALLEN fixhead-Seiten kleben die
           Tabellen-Kopfzeilen beim Scrollen oben — unterhalb einer allfällig
           mitklebenden Filter-Toolbar (Versatz --ssh wird in app-core.js
           gemessen). Overflow-Wrapper um die Tabellen brechen sticky und sind
           auf den betroffenen Seiten entfernt. */
        .page.fixhead .page-body table {
            border-collapse: separate;
            border-spacing: 0;
        }
        .page.fixhead .page-body table thead th {
            position: sticky; top: var(--ssh, 0px); z-index: 4;
            background: #f1f5f9 !important;
            box-shadow: 0 1px 0 #e2e8f0;
        }
        body.theme-dark .page.fixhead .page-body table thead th {
            background: #2a3446 !important;
            box-shadow: 0 1px 0 var(--dlg-glass-border);
        }
        /* Fluktuation-Report: Spaltentitel kleben unter der Filter-Toolbar
           (Walter 26.07.2026) — kein overflow-x-Wrapper um die Tabelle
           (bricht sticky). Warmton statt Standard-Blau-Grau. */
        #page-fluktuation-report.page.fixhead .page-body table.fluk-table thead th {
            position: sticky !important;
            top: var(--ssh, 0px) !important;
            z-index: 5;
            background: #efeae2 !important;
            box-shadow: 0 1px 0 #d8d1c4;
            text-transform: uppercase;
            font-size: 10.5px !important;
            letter-spacing: 0.04em;
            font-weight: 700;
            color: #475569;
        }
        body.theme-dark #page-fluktuation-report.page.fixhead .page-body table.fluk-table thead th {
            background: #2a3446 !important;
            box-shadow: 0 1px 0 var(--dlg-glass-border);
            color: #94a3b8;
        }

        /* Austritts-Feedback: eine Zeile pro Antwort (Walter 26.07.2026).
           Gründe-Spalte schrumpft auf max. Inhaltsbreite (width:1% + nowrap),
           Bemerkung liegt direkt rechts davon. */
        #page-exit-survey-report .es-kpi-row {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 14px;
        }
        #page-exit-survey-report .es-kpi {
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.72);
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(60, 55, 48, 0.06);
            padding: 14px 16px;
        }
        #page-exit-survey-report .es-kpi-label {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #8b8b8b;
        }
        #page-exit-survey-report .es-kpi-value {
            font-size: 26px;
            font-weight: 760;
            color: #1a1a1a;
            margin-top: 4px;
            letter-spacing: -0.02em;
        }
        #page-exit-survey-report .es-kpi-hint {
            font-size: 11.5px;
            color: #8b8b8b;
            margin-top: 4px;
        }
        #page-exit-survey-report .es-empty {
            padding: 28px 18px;
            text-align: center;
            color: #8b8b8b;
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid #e7e1d8;
            border-radius: 14px;
            line-height: 1.5;
        }
        #page-exit-survey-report .es-empty span { font-size: 12.5px; }
        #page-exit-survey-report .es-table-card {
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid #e7e1d8;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(60, 55, 48, 0.06);
            padding: 4px 0 2px;
        }
        #page-exit-survey-report .es-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            table-layout: auto;
            font-size: 13px;
        }
        #page-exit-survey-report.page.fixhead .page-body table.es-table thead th {
            position: sticky;
            top: var(--ssh, 0px);
            z-index: 5;
            background: #efeae2 !important;
            box-shadow: 0 1px 0 #d8d1c4;
            text-transform: uppercase;
            font-size: 10.5px !important;
            letter-spacing: 0.04em;
            font-weight: 700;
            color: #475569;
            text-align: left;
            padding: 10px 14px;
            white-space: nowrap;
        }
        #page-exit-survey-report.page.fixhead .page-body table.es-table thead th.es-th-note {
            text-align: center;
        }
        body.theme-dark #page-exit-survey-report.page.fixhead .page-body table.es-table thead th {
            background: #2a3446 !important;
            box-shadow: 0 1px 0 var(--dlg-glass-border);
            color: #94a3b8;
        }
        #page-exit-survey-report .es-table tbody td {
            padding: 12px 14px;
            border-bottom: 1px solid #f0ebe3;
            color: #3f3f3f;
            vertical-align: top;
            background: transparent;
        }
        #page-exit-survey-report .es-table tbody tr:last-child td { border-bottom: none; }
        #page-exit-survey-report .es-table tbody tr:hover td { background: rgba(246, 243, 238, 0.65); }
        #page-exit-survey-report .es-td-date {
            white-space: nowrap;
            color: #646464;
            font-variant-numeric: tabular-nums;
        }
        #page-exit-survey-report .es-td-filiale {
            white-space: nowrap;
            font-weight: 650;
            color: #1a1a1a;
        }
        #page-exit-survey-report .es-td-note {
            text-align: center;
            white-space: nowrap;
            width: 1%;
        }
        #page-exit-survey-report .es-note {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 28px;
            padding: 0 8px;
            border-radius: 9px;
            background: #3f3f3f;
            color: #fff;
            font-weight: 760;
            font-size: 13px;
            font-variant-numeric: tabular-nums;
        }
        /* Max. Breite aller Gründe: Spalte so schmal wie möglich, so breit wie nötig */
        #page-exit-survey-report .es-td-gruende {
            width: 1%;
            white-space: nowrap;
            padding-right: 22px;
        }
        #page-exit-survey-report .es-reason {
            line-height: 1.45;
            color: #1a1a1a;
            font-weight: 550;
        }
        #page-exit-survey-report .es-reason + .es-reason { margin-top: 3px; }
        #page-exit-survey-report .es-td-bemerkung {
            width: auto;
            line-height: 1.5;
            color: #3f3f3f;
            white-space: pre-wrap;
            word-break: break-word;
        }
        #page-exit-survey-report .es-muted { color: #8b8b8b; }
        #page-exit-survey-report .es-foot {
            font-size: 11.5px;
            color: #8b8b8b;
            margin-top: 12px;
        }
        body.theme-dark #page-exit-survey-report .es-kpi,
        body.theme-dark #page-exit-survey-report .es-table-card,
        body.theme-dark #page-exit-survey-report .es-empty {
            background: var(--dlg-glass);
            border-color: var(--dlg-glass-border);
            box-shadow: none;
        }
        body.theme-dark #page-exit-survey-report .es-kpi-value,
        body.theme-dark #page-exit-survey-report .es-td-filiale,
        body.theme-dark #page-exit-survey-report .es-reason { color: #e8e6e1; }
        body.theme-dark #page-exit-survey-report .es-table tbody td {
            border-bottom-color: var(--dlg-glass-border);
            color: #c9c4bb;
        }
        body.theme-dark #page-exit-survey-report .es-table tbody tr:hover td {
            background: rgba(125, 160, 205, 0.08);
        }
        body.theme-dark #page-exit-survey-report .es-note {
            background: #e8e6e1;
            color: #1a1a1a;
        }
        @media (max-width: 860px) {
            #page-exit-survey-report .es-kpi-row { grid-template-columns: 1fr; }
            #page-exit-survey-report .es-td-gruende { white-space: normal; width: auto; }
        }

        /* Austritts-Feedback Insights (Walter 26.07.2026) — Ø Note, Gründe %, Themen, Trend */
        #page-exit-survey-report .es-insights {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 14px;
        }
        #page-exit-survey-report .es-insight-card {
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid #e7e1d8;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(60, 55, 48, 0.06);
            padding: 18px 20px 16px;
        }
        #page-exit-survey-report .es-insight-q,
        #page-exit-survey-report .es-insight-title {
            font-size: 15px;
            font-weight: 700;
            color: #1a1a1a;
            letter-spacing: -0.01em;
            margin: 0 0 14px;
        }
        #page-exit-survey-report .es-insight-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }
        #page-exit-survey-report .es-insight-title-row .es-insight-title { margin: 0; }
        #page-exit-survey-report .es-insight-rating-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            flex-wrap: wrap;
        }
        #page-exit-survey-report .es-avg-num {
            font-size: 42px;
            font-weight: 760;
            letter-spacing: -0.03em;
            color: #1a1a1a;
            line-height: 1;
        }
        #page-exit-survey-report .es-avg-of {
            font-size: 16px;
            font-weight: 600;
            color: #646464;
            margin-left: 6px;
        }
        #page-exit-survey-report .es-avg-label {
            margin-top: 6px;
            font-size: 12.5px;
            color: #8b8b8b;
        }
        #page-exit-survey-report .es-score-circles {
            display: flex;
            gap: 8px;
            flex-wrap: nowrap;
        }
        #page-exit-survey-report .es-score-circle {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            color: #3f3f3f;
            background: rgba(255, 255, 255, 0.45);
            border: 1.4px solid rgba(70, 64, 56, 0.28);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
        }
        #page-exit-survey-report .es-score-circle.is-mid {
            border-color: rgba(40, 36, 32, 0.45);
            background: rgba(63, 63, 63, 0.08);
        }
        #page-exit-survey-report .es-score-circle.is-strong {
            background: #1a1a1a;
            border-color: #1a1a1a;
            color: #fff;
        }
        #page-exit-survey-report .es-scale-legend {
            margin-top: 14px;
            font-size: 12px;
            color: #8b8b8b;
        }
        #page-exit-survey-report .es-insight-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        #page-exit-survey-report .es-bars { display: flex; flex-direction: column; gap: 10px; }
        #page-exit-survey-report .es-bar-row {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.4fr) 42px;
            align-items: center;
            gap: 10px;
        }
        #page-exit-survey-report .es-bar-label {
            font-size: 12.5px;
            color: #3f3f3f;
            line-height: 1.3;
        }
        #page-exit-survey-report .es-bar-track {
            height: 11px;
            border-radius: 999px;
            background: #efeae2;
            overflow: hidden;
        }
        #page-exit-survey-report .es-bar-fill {
            height: 100%;
            border-radius: 999px;
            background:
                repeating-linear-gradient(
                    -18deg,
                    rgba(26, 26, 26, 0.92) 0 3px,
                    rgba(55, 52, 48, 0.78) 3px 5px
                );
            min-width: 6px;
        }
        #page-exit-survey-report .es-bar-val {
            font-size: 12.5px;
            font-weight: 700;
            color: #1a1a1a;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        #page-exit-survey-report .es-bars-empty {
            font-size: 13px;
            color: #8b8b8b;
            padding: 8px 0 4px;
        }
        #page-exit-survey-report .es-trend-badge {
            font-size: 11.5px;
            font-weight: 650;
            color: #646464;
            background: #efeae2;
            border: 1px solid #e2ddd3;
            border-radius: 999px;
            padding: 4px 10px;
            white-space: nowrap;
        }
        #page-exit-survey-report .es-trend-badge.is-up { color: #1a1a1a; }
        #page-exit-survey-report .es-trend-badge.is-down { color: #6b4f3a; }
        #page-exit-survey-report .es-trend-svg {
            width: 100%;
            height: auto;
            display: block;
            margin-top: 4px;
        }
        #page-exit-survey-report .es-trend-line {
            stroke: #2a2a2a;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        #page-exit-survey-report .es-trend-dot { fill: #1a1a1a; }
        #page-exit-survey-report .es-trend-val {
            fill: #1a1a1a;
            font-size: 11px;
            font-weight: 700;
            font-family: inherit;
        }
        #page-exit-survey-report .es-trend-lbl {
            fill: #8b8b8b;
            font-size: 11px;
            font-family: inherit;
        }
        #page-exit-survey-report .es-trend-axis {
            fill: #a3a3a3;
            font-size: 10px;
            font-family: inherit;
        }
        #page-exit-survey-report .es-trend-grid {
            stroke: #ebe4da;
            stroke-width: 1;
        }
        body.theme-dark #page-exit-survey-report .es-insight-card {
            background: var(--dlg-glass);
            border-color: var(--dlg-glass-border);
            box-shadow: none;
        }
        body.theme-dark #page-exit-survey-report .es-insight-q,
        body.theme-dark #page-exit-survey-report .es-insight-title,
        body.theme-dark #page-exit-survey-report .es-avg-num,
        body.theme-dark #page-exit-survey-report .es-bar-val { color: #e8e6e1; }
        body.theme-dark #page-exit-survey-report .es-bar-label { color: #c9c4bb; }
        body.theme-dark #page-exit-survey-report .es-bar-track { background: rgba(255, 255, 255, 0.06); }
        body.theme-dark #page-exit-survey-report .es-score-circle {
            color: #e8e6e1;
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(232, 230, 225, 0.28);
        }
        body.theme-dark #page-exit-survey-report .es-score-circle.is-strong {
            background: #e8e6e1;
            border-color: #e8e6e1;
            color: #1a1a1a;
        }
        body.theme-dark #page-exit-survey-report .es-trend-line { stroke: #e8e6e1; }
        body.theme-dark #page-exit-survey-report .es-trend-dot { fill: #e8e6e1; }
        body.theme-dark #page-exit-survey-report .es-trend-val { fill: #e8e6e1; }
        body.theme-dark #page-exit-survey-report .es-trend-grid { stroke: rgba(255, 255, 255, 0.08); }
        body.theme-dark #page-exit-survey-report .es-trend-badge {
            background: rgba(255, 255, 255, 0.06);
            border-color: var(--dlg-glass-border);
            color: #c9c4bb;
        }
        @media (max-width: 960px) {
            #page-exit-survey-report .es-insight-grid { grid-template-columns: 1fr; }
            #page-exit-survey-report .es-bar-row {
                grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 40px;
            }
        }

        /* Aktivitäts-Log: Spaltentitel im sticky Filter-Kopf (kein sticky-thead).
           Sonst rutscht der thead beim Scrollen mitten zwischen die Zeilen
           (Walter-Bug 26.07.2026). */
        #page-audit-log.page.fixhead .page-body > .al-sticky-head {
            padding: 10px 0 0;
            margin-bottom: 0;
        }
        #page-audit-log.page.fixhead .page-body table.al-cols-head {
            width: 100%;
            margin-top: 8px;
            border-collapse: separate;
            border-spacing: 0;
            table-layout: fixed;
            font-size: 12px;
        }
        #page-audit-log.page.fixhead .page-body table.al-cols-head thead th {
            position: static !important;
            top: auto !important;
            text-align: left;
            padding: 6px 8px;
            font-size: 10.5px;
            font-weight: 700;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: .06em;
            white-space: nowrap;
            background: #f1f5f9 !important;
            border-bottom: 1px solid #e2e8f0;
            box-shadow: none;
        }
        #page-audit-log.page.fixhead .page-body #alResults table.al-data {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            font-size: 12px;
        }
        #page-audit-log.page.fixhead .page-body #alResults table.al-data thead {
            display: none; /* Spaltentitel leben im sticky Kopf */
        }
        #page-audit-log .al-col-zeit { width: 9.5rem; }
        #page-audit-log .al-col-user { width: 14rem; }
        #page-audit-log .al-col-aktion { width: 5.5rem; }
        #page-audit-log .al-col-entity { width: 11rem; }
        #page-audit-log .al-col-changes { width: auto; }
        #page-audit-log .al-col-detail { width: 4.5rem; }
        body.theme-dark #page-audit-log.page.fixhead .page-body table.al-cols-head thead th {
            background: #2a3446 !important;
            color: #94a3b8;
            border-bottom-color: var(--dlg-glass-border);
        }
        .page.fixhead .page-body .tbl-wrap { overflow: visible; }
        .main:has(.page.fixhead.active) { overflow: hidden !important; }
        /* ── Fixhead + Spaltenköpfe im Kopf (Walter 22.07.2026) ───────────
           Generisches Muster: Titel/Filter + Spaltenköpfe = EIN fixer Block,
           darunter scrollen NUR die Datenzeilen. Kein position:sticky thead. */
        .page.fixhead .fh-page-head {
            flex: 0 0 auto;
            box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.14);
            z-index: 5;
        }
        .page.fixhead .fh-toolbar {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
            margin: 10px 32px 4px;
        }
        .page.fixhead .fh-cols-head-wrap {
            margin: 10px 14px 0;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-bottom: none;
            border-radius: 12px 12px 0 0;
            overflow-y: auto;
            scrollbar-gutter: stable;
        }
        body.theme-dark .page.fixhead .fh-cols-head-wrap {
            background: #2a3446;
            border-color: var(--dlg-glass-border);
        }
        .page.fixhead .fh-body {
            overflow: hidden !important;
            display: flex;
            flex-direction: column;
            padding-top: 0 !important;
            padding-bottom: 16px !important;
        }
        .page.fixhead .fh-list-card {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin-top: 0;
            padding: 0;
            border-top: none;
            border-radius: 0 0 12px 12px;
        }
        .page.fixhead .fh-list-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            scrollbar-gutter: stable;
        }
        .page.fixhead .fh-table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
            font-size: 13px;
        }
        .page.fixhead .fh-table-head thead th {
            position: static !important;
            top: auto !important;
            background: transparent !important;
            box-shadow: none !important;
            padding: 10px 12px;
            text-align: left;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #64748b;
            white-space: nowrap;
        }
        .page.fixhead .fh-table-head thead th.fh-th-center { text-align: center; }
        .page.fixhead .fh-table-head thead th.fh-th-right { text-align: right; }
        body.theme-dark .page.fixhead .fh-table-head thead th { color: #94a3b8; }
        .page.fixhead .fh-table-body td {
            padding: 10px 12px;
            vertical-align: middle;
            border-bottom: 1px solid #f1f5f9;
        }
        body.theme-dark .page.fixhead .fh-table-body td { border-bottom-color: var(--dlg-glass-border); }

        /* Benutzerverwaltung: Spaltentitel SITZEN IM fixen Kopf (Walter 22.07.2026).
           Kein position:sticky mehr — Titel/View-as/Spaltenköpfe = ein Block,
           darunter scrollen nur die Datenzeilen. */
        #page-benutzer .um-page-head {
            flex: 0 0 auto;
            box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.14);
            z-index: 5;
        }
        /* Spaltenkopf + Datenkarte teilen denselben 14px-Inset wie .liquid-mask .page-body */
        #page-benutzer .um-cols-head-wrap {
            margin: 10px 14px 0;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-bottom: none;
            border-radius: 12px 12px 0 0;
            overflow-y: auto;
            scrollbar-gutter: stable;
        }
        body.theme-dark #page-benutzer .um-cols-head-wrap {
            background: #2a3446;
            border-color: var(--dlg-glass-border);
        }
        #page-benutzer .page-body.um-body {
            overflow: hidden !important;
            display: flex;
            flex-direction: column;
            padding-top: 0 !important;
            padding-bottom: 16px !important;
        }
        #page-benutzer .um-list-card {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin-top: 0;
            border-top: none;
            border-radius: 0 0 12px 12px;
        }
        #page-benutzer .um-list-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            scrollbar-gutter: stable;
        }
        #page-benutzer .um-table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
            font-size: 13.5px;
        }
        #page-benutzer .um-c-user { width: 22%; }
        #page-benutzer .um-c-email { width: 18%; }
        #page-benutzer .um-c-role { width: 12%; }
        #page-benutzer .um-c-branch { width: 12%; }
        #page-benutzer .um-c-status { width: 9%; }
        #page-benutzer .um-c-created { width: 10%; }
        #page-benutzer .um-c-login { width: 12%; }
        #page-benutzer .um-c-actions { width: 5%; }
        #page-benutzer .um-table-head thead th {
            position: static !important;
            top: auto !important;
            background: transparent !important;
            box-shadow: none !important;
            padding: 10px 14px;
            text-align: left;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #64748b;
            white-space: nowrap;
        }
        body.theme-dark #page-benutzer .um-table-head thead th { color: #94a3b8; }
        #page-benutzer .um-table-body td {
            padding: 12px 14px;
            vertical-align: middle;
            border-bottom: 1px solid #f1f5f9;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.theme-dark #page-benutzer .um-table-body td { border-bottom-color: var(--dlg-glass-border); }
        /* Lohnperioden: Spaltentitel SITZEN IM fixen Kopf (Walter 22.07.2026) —
           gleiches Muster wie Benutzerverwaltung. */
        #page-perioden .per-page-head {
            flex: 0 0 auto;
            box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.14);
            z-index: 5;
        }
        #page-perioden .per-cols-head-wrap {
            margin: 10px 14px 0;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-bottom: none;
            border-radius: 12px 12px 0 0;
            overflow-y: auto;
            scrollbar-gutter: stable;
        }
        body.theme-dark #page-perioden .per-cols-head-wrap {
            background: #2a3446;
            border-color: var(--dlg-glass-border);
        }
        #page-perioden .page-body.per-body {
            overflow: hidden !important;
            display: flex;
            flex-direction: column;
            padding-top: 0 !important;
            padding-bottom: 16px !important;
        }
        #page-perioden .per-list-card {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin-top: 0;
            padding: 0;
            border-top: none;
            border-radius: 0 0 12px 12px;
        }
        #page-perioden .per-list-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            scrollbar-gutter: stable;
        }
        #page-perioden .per-table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
            font-size: 13.5px;
        }
        #page-perioden .per-c-label { width: 14%; }
        #page-perioden .per-c-range { width: 10%; }
        #page-perioden .per-c-slip { width: 8%; }
        #page-perioden .per-c-final { width: 8%; }
        #page-perioden .per-c-status { width: 14%; }
        #page-perioden .per-c-done { width: 14%; }
        #page-perioden .per-c-actions { width: 32%; }
        #page-perioden .per-table-head thead th {
            position: static !important;
            top: auto !important;
            background: transparent !important;
            box-shadow: none !important;
            padding: 10px 14px;
            text-align: left;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #64748b;
            white-space: nowrap;
        }
        #page-perioden .per-table-head thead th.per-th-center { text-align: center; }
        body.theme-dark #page-perioden .per-table-head thead th { color: #94a3b8; }
        #page-perioden .per-table-body td {
            padding: 12px 14px;
            vertical-align: middle;
            border-bottom: 1px solid #f1f5f9;
        }
        body.theme-dark #page-perioden .per-table-body td { border-bottom-color: var(--dlg-glass-border); }

        /* Spaltenbreiten pro Admin-Liste (fh-Muster) */
        /* Neu verteilt (Walter 06.08.2026): Name + Basis brauchen Platz
           («Nichtberufsunfallversicherung» + 🔒-Pille bzw. die BVG-Limits-
           Zeile liefen sonst optisch in die Nachbarspalten). */
        /* Walter 06.08.2026 (2. Runde): «in Lohn»-Pille bleibt HINTER dem
           Namen in EINER Zeile — Platz kommt aus den Zahlen-/Kurzspalten. */
        #page-sv-saetze .sv-c-nr { width: 3%; }
        #page-sv-saetze .sv-c-typ { width: 6%; }
        #page-sv-saetze .sv-c-name { width: 22%; }
        #page-sv-saetze .sv-c-an { width: 6%; }
        #page-sv-saetze .sv-c-ag { width: 6%; }
        #page-sv-saetze .sv-c-basis { width: 13%; }
        #page-sv-saetze .sv-c-alter { width: 5%; }
        #page-sv-saetze .sv-c-vertrag { width: 6%; }
        #page-sv-saetze .sv-c-fibu { width: 8.5%; }
        #page-sv-saetze .sv-c-ab { width: 6.5%; }
        #page-sv-saetze .sv-c-bis { width: 6.5%; }
        #page-sv-saetze .sv-c-status { width: 5.5%; }
        #page-sv-saetze .sv-c-act { width: 4%; }

        #page-lohnpositionen .lp-c-code { width: 7%; }
        #page-lohnpositionen .lp-c-name { width: 15%; }
        #page-lohnpositionen .lp-c-kat { width: 10%; }
        #page-lohnpositionen .lp-c-flag { width: 4.5%; }
        #page-lohnpositionen .lp-c-fei,
        #page-lohnpositionen .lp-c-fer,
        #page-lohnpositionen .lp-c-ml { width: 4.5%; }
        #page-lohnpositionen .lp-c-la { width: 7%; }
        #page-lohnpositionen .lp-c-typ { width: 8%; }
        #page-lohnpositionen .lp-c-act { width: 5%; }
        #page-lohnpositionen .fh-table-head thead th.lp-th-green {
            color: #166534;
            background: #f0fdf4 !important;
        }
        #page-lohnpositionen .fh-table-head thead th.lp-th-green-l { border-left: 2px solid #86efac; }
        #page-lohnpositionen .fh-table-head thead th.lp-th-green-r { border-right: 2px solid #86efac; }

        #page-warnungen .wc-c-drag { width: 5%; }
        #page-warnungen .wc-c-label { width: 28%; }
        #page-warnungen .wc-c-aktiv { width: 7%; }
        #page-warnungen .wc-c-farbe { width: 14%; }
        #page-warnungen .wc-c-vorlauf { width: 10%; }
        #page-warnungen .wc-c-krit { width: 12%; }
        #page-warnungen .wc-c-sev { width: 12%; }
        #page-warnungen .wc-c-esk { width: 12%; }

        #page-kontoplan .kp-c-sub { width: 62px; }
        #page-kontoplan .kp-c-kst { width: 172px; }
        #page-kontoplan .kp-c-bez { width: auto; }
        #page-kontoplan .kp-c-soll { width: 74px; }
        #page-kontoplan .kp-c-gegen { width: 74px; }
        #page-kontoplan .kp-c-typ { width: 120px; }
        #page-kontoplan .kp-c-act { width: 92px; }

        /* Mutterschafts-Regeln — Spaltenbreiten (fixhead, Walter 23.07.2026) */
        #page-pregnancy-rules .pr-c-sort { width: 48px; }
        #page-pregnancy-rules .pr-c-code { width: 110px; }
        #page-pregnancy-rules .pr-c-bez { width: 16%; }
        #page-pregnancy-rules .pr-c-besch { width: auto; }
        #page-pregnancy-rules .pr-c-gesetz { width: 140px; }
        #page-pregnancy-rules .pr-c-phase { width: 150px; }
        #page-pregnancy-rules .pr-c-lohn { width: 130px; }
        #page-pregnancy-rules .pr-c-status { width: 150px; }
        #page-pregnancy-rules .pr-c-act { width: 52px; }

        #page-absenz-typen .at-c-code { width: 8%; }
        #page-absenz-typen .at-c-name { width: 15%; }
        #page-absenz-typen .at-c-zg { width: 10%; }
        #page-absenz-typen .at-c-modus { width: 7%; }
        #page-absenz-typen .at-c-basis { width: 8%; }
        #page-absenz-typen .at-c-flex { width: 8%; }
        #page-absenz-typen .at-c-verl { width: 10%; }
        #page-absenz-typen .at-c-red { width: 10%; }
        #page-absenz-typen .at-c-sort { width: 6%; }
        #page-absenz-typen .at-c-status { width: 8%; }
        #page-absenz-typen .at-c-act { width: 5%; }
        #page-absenz-typen .at-info-box {
            margin: 8px 32px 0;
            background: #f6f3ee;
            border: 1px solid #e5e0d6;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 12.5px;
            color: #6b6152;
        }

        #page-behoerden .bh-c-name { width: 22%; }
        #page-behoerden .bh-c-typ { width: 14%; }
        #page-behoerden .bh-c-addr { width: 28%; }
        #page-behoerden .bh-c-iban { width: 20%; }
        #page-behoerden .bh-c-status { width: 10%; }
        #page-behoerden .bh-c-act { width: 6%; }

        /* Warnungen: Spaltenköpfe im fixen Kopf (Walter 22.07.2026, fh-Muster). */
        #page-warnungen .wc-page-head {
            background:
                radial-gradient(ellipse 70% 50% at 85% -5%, rgba(255, 255, 255, 0.70) 0%, transparent 55%),
                linear-gradient(160deg, #f6f3ee 0%, #efebe3 48%, #faf8f5 100%);
        }
        body.theme-dark #page-warnungen .wc-page-head {
            background: rgba(26, 36, 51, 0.96) !important;
        }
        #page-warnungen .fh-cols-head-wrap {
            background: #f6f3ee;
            border-color: #ece7df;
        }
        body.theme-dark #page-warnungen .fh-cols-head-wrap { background: #2a3340; }
        #page-warnungen .wc-hint {
            flex: 0 0 auto;
            margin: 8px 0 0;
            font-size: 12px;
            color: #8b8b8b;
            line-height: 1.45;
        }

        /* Moments-Texte: Titel + Emotionsgrade + Vorlagen-Toolbar fix;
           nur Vorlagen-Liste scrollt (Walter 21.07.2026). */
        .main:has(#page-moment-texte.active) { overflow: hidden !important; }
        #page-moment-texte.active {
            height: 100% !important; max-height: 100% !important;
            overflow: hidden !important; min-height: 0 !important;
            display: flex !important; flex-direction: column !important;
        }
        #page-moment-texte .mom-texte-head {
            flex: 0 0 auto;
            background: #f8fafc;
            box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.14);
            z-index: 5;
        }
        body.theme-dark #page-moment-texte .mom-texte-head {
            background: rgba(26, 36, 51, 0.96) !important;
            border-bottom: 1px solid var(--dlg-glass-border);
        }
        #page-moment-texte .mom-texte-title {
            margin-bottom: 0;
            padding: 8px 32px 0;
        }
        #page-moment-texte .mom-texte-title .page-title { font-size: 18px; line-height: 1.2; }
        #page-moment-texte .mom-texte-title .page-sub { margin-top: 1px; font-size: 12.5px; }
        #page-moment-texte .mom-texte-head-body {
            padding: 6px 32px 8px;
            max-width: 840px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        #page-moment-texte .mom-texte-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 8px 12px;
        }
        #page-moment-texte .mom-texte-card-title {
            font-weight: 700;
            font-size: 13.5px;
            color: #0f172a;
            margin-bottom: 4px;
        }
        #page-moment-texte .mom-texte-toolbar {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 0;
        }
        #page-moment-texte .mom-texte-toolbar .mom-texte-card-title {
            margin-bottom: 0;
            margin-right: 4px;
        }
        #page-moment-texte .mom-tone-list > div {
            padding: 3px 0 !important;
        }
        #page-moment-texte .mom-tone-add {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            align-items: flex-end;
            margin-top: 4px;
        }
        #page-moment-texte .mom-tone-add .f-label { margin-bottom: 2px; }
        #page-moment-texte .mom-texte-scroll {
            flex: 1 1 auto; min-height: 0; overflow: auto;
            padding: 6px 32px 24px !important;
            max-width: 840px;
        }
        #page-moment-texte .mom-texte-list-card {
            padding: 10px 12px;
        }
        body.theme-dark #page-moment-texte .mom-texte-card {
            background: rgba(255,255,255,0.06);
            border-color: var(--dlg-glass-border);
        }

        /* Zweizeilige Sticky-Toolbar (Walter-Vorgabe 01.06.2026, programmweit):
           Titel-/Modus-Zeile UND Action-/Status-Zeile bleiben beim Scrollen
           oben kleben. Pattern: .sticky-top-bars umschließt beide Zeilen,
           .sticky-status-bar wird auf die zweite Zeile (oder einzelne Status-
           bars) angewendet, wenn sie NICHT direktes Geschwister von
           .sticky-top-bars ist (z.B. in Sub-Views). */
        .sticky-top-bars {
            position: sticky; top: 0; z-index: 20;
            background: #f8fafc;
            padding-top: 4px;
            padding-bottom: 6px;
            box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.18);
        }
        body.theme-dark .sticky-top-bars {
            background: rgba(26, 36, 51, 0.90) !important;
            border-bottom: 1px solid var(--dlg-glass-border);
            backdrop-filter: blur(18px) saturate(130%);
            -webkit-backdrop-filter: blur(18px) saturate(130%);
        }
        /* Status-/Aktions-Zeile, die in einer Sub-View liegt, aber direkt
           unter der sticky-top-bars kleben soll (z.B. lohnDefinitivStatusBar
           / akontoStatusBar in den dynamisch geswitchten Views). Wird via
           CSS-Variable --sticky-top-bars-height angesteuert; Default 60px
           fängt den Standardfall ab, kann pro Seite überschrieben werden. */
        .sticky-status-bar {
            position: sticky;
            top: var(--sticky-top-bars-height, 60px);
            z-index: 15;
            background: #f8fafc;
            padding: 6px 0;
            margin-bottom: 0 !important;
        }
        body.theme-dark .sticky-status-bar {
            background: rgba(26, 36, 51, 0.88) !important;
            border-bottom: 1px solid var(--dlg-glass-border);
            backdrop-filter: blur(16px) saturate(130%);
            -webkit-backdrop-filter: blur(16px) saturate(130%);
        }

        /* Kompakter Filial-Einstellungen-Tab (Walter-Vorgabe 15.05.2026):
           möglichst alles ohne Scrollen — engere Gruppentitel, flachere
           Feld-Karten, dichtere Raster. Scoped, wirkt nur auf diesen Tab.
           padding-left auf dem Gruppentitel = innerer Abstand der Feld-Karten
           (1px Rahmen + 8px Padding), damit Titel und Feld-Labels exakt
           linksbündig stehen (Walter-Vorgabe 15.05.2026). */
        /* Walter-Vorgabe 27.05.2026: Filial-Einstellungen-Override entfernt —
           Filial-Tab nutzt jetzt den gleichen Card-Look wie der MA-Tab
           (graue Sektion-Cards + weisse Wert-Boxen + blauer Akzent-Streifen). */
        #fil-tab-f-einstellungen .ein-group-title { margin: 12px 0 4px; padding-left: 10px; }

        /* ── Dokumentenverwaltung ─────────────────────────────────────── */
        .dok-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
        .dok-search { flex:1; padding:7px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; max-width:280px; }
        .dok-upload-btn { padding:8px 16px; background:#3f3f3f; color:white; border:none; border-radius:8px;
            font-size:13px; font-weight:600; cursor:pointer; }
        .dok-upload-btn:hover { background:#1a1a1a; }
        .dok-layout { display:grid; grid-template-columns: 215px 1fr; gap:10px; min-height:400px; }
        .dok-tree {
            background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:6px;
            font-size:12.5px; overflow-y:auto; max-height:600px;
        }
        .dok-tree-node {
            padding:5px 6px; cursor:pointer; border-radius:6px; user-select:none;
            display:flex; align-items:center; justify-content:space-between;
        }
        .dok-tree-node:hover { background:#f6f3ee; }
        .dok-tree-node.active { background:#ece9e2; color:#6b7280; font-weight:600; }
        .dok-tree-cat { font-weight:600; color:#0f172a; margin-top:4px; }
        .dok-tree-typ { padding-left:18px; color:#475569; font-size:12.5px; }
        .dok-tree-count { font-size:11px; color:#94a3b8; background:#f1f5f9; padding:1px 7px; border-radius:9px; }
        .dok-tree-node.active .dok-tree-count { background:#e5e0d6; color:#6b7280; }
        .dok-tree-chevron { font-size:10px; color:#94a3b8; width:12px; display:inline-block; }

        /* Kategorie-Farbakzent als 3px-Linke-Border in der Sidebar.
           Padding-left wird kompensiert, damit die Texte trotz Border
           bündig stehen. Hue-Codes synchron zu .dok-cat-pill. */
        .dok-tree-cat[class*="cat-"] { border-left: 3px solid transparent; padding-left: 5px; }
        .dok-tree-cat.cat-persoenliche-angaben      { border-left-color: #6b6152; }
        .dok-tree-cat.cat-vertragsunterlagen        { border-left-color: #166534; }
        .dok-tree-cat.cat-lohn-arbeitszeit          { border-left-color: #92400e; }
        .dok-tree-cat.cat-absenzen                  { border-left-color: #991b1b; }
        .dok-tree-cat.cat-mitarbeiterentwicklung    { border-left-color: #6d28d9; }
        .dok-tree-cat.cat-aemter-behoerden          { border-left-color: #5a5348; }
        /* Untertypen erben Eltern-Kategoriefarbe als zarte 2-px-Connection-Line.
           Wirkt wie ein Tree-View Schienen-Strich, der das Kind visuell mit der
           Eltern-Kategorie verbindet — ohne dass jeder Typ seinen eigenen
           Farbton braucht. Padding-Anpassung kompensiert die Border. */
        .dok-tree-typ[class*="cat-"] { border-left: 2px solid; margin-left: 7px; padding-left: 16px; }
        .dok-tree-typ.cat-persoenliche-angaben      { border-left-color: rgba(30,64,175,0.35); }
        .dok-tree-typ.cat-vertragsunterlagen        { border-left-color: rgba(22,101,52,0.35); }
        .dok-tree-typ.cat-lohn-arbeitszeit          { border-left-color: rgba(146,64,14,0.35); }
        .dok-tree-typ.cat-absenzen                  { border-left-color: rgba(153,27,27,0.35); }
        .dok-tree-typ.cat-mitarbeiterentwicklung    { border-left-color: rgba(109,40,217,0.35); }
        .dok-tree-typ.cat-aemter-behoerden          { border-left-color: rgba(7,89,133,0.35); }

        .dok-list { background:white; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
        .dok-list-header {
            padding:10px 16px; font-size:13px; font-weight:600; color:#0f172a;
            background:#f8fafc; border-bottom:1px solid #e2e8f0; flex:0 0 auto;
        }
        .dok-list-cols {
            flex:0 0 auto; overflow:hidden; background:#f8fafc;
            border-bottom:1px solid #e2e8f0;
        }
        .dok-list-cols .dok-table thead th { position:static; background:#f8fafc; }
        .dok-list-scroll {
            flex:1 1 auto; min-height:0; overflow:auto;
            overscroll-behavior:none;
        }
        .dok-list-scroll .dok-table {
            border-collapse:separate; border-spacing:0;
        }
        .dok-list-empty {
            padding:36px; text-align:center; color:#cbd5e1; font-size:13px;
        }
        /* width:max-content — Tabelle folgt dem Inhalt, nicht der Panel-Breite.
           border-collapse:separate nötig für stabiles sticky-thead (Walter 19.07.2026). */
        .dok-table { width:max-content; max-width:none; border-collapse:separate; border-spacing:0; font-size:12.5px; }
        .dok-table thead th {
            background:#f8fafc; color:#64748b; font-weight:600;
            text-transform:uppercase; font-size:10px; letter-spacing:0.03em;
            padding:6px 8px; text-align:left; border-bottom:1px solid #e2e8f0;
            white-space:nowrap;
        }
        .dok-table tbody td {
            padding:5px 8px; border-bottom:1px solid #f1f5f9; vertical-align:middle;
            color:#0f172a; line-height:1.25;
        }
        /* Datumszeile dichter an den Dateinamen rücken (Walter 24.05.2026) */
        .dok-table tbody td .dok-meta-inline { display:inline-block; margin-top:1px; }
        .dok-table tbody tr:hover td { background:#f8fafc; }
        .dok-table tbody tr:last-child td { border-bottom:none; }
        .dok-cat-pill {
            display:inline-block; background:#f6f3ee; color:#6b7280;
            font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:6px;
            white-space:nowrap;
        }
        /* Kategorie-spezifische Farben — Slug-Klasse wird in
           renderDokTableRow() generiert. Light-Mode hier, Dark-Mode
           weiter unten. Idee: jede Kategorie bekommt eine ruhige
           Pastellfarbe, die im Sehfeld sofort als "anders" wahrnehmbar
           ist, ohne den Überblick zu erschlagen. */
        .dok-cat-pill.cat-persoenliche-angaben     { background:#ece9e2; color:#6b6152; }
        .dok-cat-pill.cat-vertragsunterlagen       { background:#dcfce7; color:#166534; }
        .dok-cat-pill.cat-lohn-arbeitszeit         { background:#fef3c7; color:#92400e; }
        .dok-cat-pill.cat-absenzen                 { background:#fee2e2; color:#991b1b; }
        .dok-cat-pill.cat-mitarbeiterentwicklung   { background:#ede9fe; color:#6d28d9; }
        .dok-cat-pill.cat-aemter-behoerden         { background:#efece5; color:#5a5348; }
        .dok-meta-inline { font-size:11.5px; color:#64748b; }
        /* Dateiname/Beschreibung: immer EINE Zeile, abschneiden mit … (Walter 24.05.2026)
           max-width in rem (nicht vw) — sonst wirkt die Liste auf breiten Panels
           wie auseinandergezogen (Walter 19.07.2026). */
        .dok-name-line { display:inline-block; max-width:28rem; overflow:hidden;
                         text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;
                         font-size:12.5px; }
        .dok-bemerkung-line { font-size:11.5px; color:#64748b; font-style:italic; margin-top:3px; }
        .dok-td-date { white-space:nowrap; color:#475569; font-size:12px; }
        /* Aktionen rechts nach den Datumsspalten (Tabelle max-content). */
        .dok-td-actions,
        .dok-th-actions {
            white-space:nowrap; text-align:center; width:1%;
            padding-left:8px !important; padding-right:12px !important;
            vertical-align:middle;
        }
        /* Feste Datums-Spaltenbreite — Header und Werte stehen übereinander,
           eng aneinander, ohne Lücke zur Beschreibung. */
        .dok-date-cell {
            white-space:nowrap; color:#475569; font-size:11.5px;
            font-variant-numeric:tabular-nums; padding:5px 6px !important;
            width:4.6rem; min-width:4.6rem; max-width:4.6rem;
            text-align:right; box-sizing:border-box;
        }
        .dok-table thead th.dok-sort-th[onclick*="erstellt"],
        .dok-table thead th.dok-sort-th[onclick*="geaendert"] {
            text-align:right; padding:6px 6px !important;
            width:4.6rem; min-width:4.6rem; max-width:4.6rem;
            box-sizing:border-box;
        }
        /* Sanfte ⋯ (Liquid Glass) — runde Pille, drei Punkte horizontal */
        .dok-menu-btn.dok-menu-btn-soft {
            width: 30px; height: 30px; min-width: 30px; padding: 0;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid rgba(90, 80, 65, 0.14);
            color: #8b8b8b;
            box-shadow: 0 1px 2px rgba(60, 55, 48, 0.06);
            letter-spacing: 0;
            font-size: 0;
        }
        .dok-menu-btn.dok-menu-btn-soft:hover {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(90, 80, 65, 0.28);
            color: #3f3f3f;
            box-shadow: 0 2px 8px rgba(60, 55, 48, 0.10);
        }
        .dok-menu-dots {
            display: block;
            width: 3.5px; height: 3.5px;
            border-radius: 50%;
            background: currentColor;
            box-shadow: -6px 0 0 currentColor, 6px 0 0 currentColor;
        }
        .dok-table thead th.dok-sort-th:hover { background:#f6f3ee; color:#6b7280; }
        .dok-icon { font-size:16px; margin-right:6px; vertical-align:middle; }
        /* Walter-Vorgabe 06.06.2026: farbige Dateityp-Pille im d.velop-Stil —
           statt Emoji ein klares Format-Badge mit Typ-spezifischer Farbe. */
        .dok-ft {
            display:inline-block; font-family:monospace; font-size:9.5px;
            font-weight:700; color:#fff; background:#94a3b8;
            padding:2px 5px; border-radius:3px; margin-right:7px;
            vertical-align:middle; letter-spacing:0.04em;
            min-width:30px; text-align:center;
        }
        .dok-ft.ft-pdf   { background:#dc2626; }
        .dok-ft.ft-doc   { background:#6b7280; }
        .dok-ft.ft-xls   { background:#15803d; }
        .dok-ft.ft-ppt   { background:#d97706; }
        .dok-ft.ft-img   { background:#6b6152; }
        .dok-ft.ft-zip   { background:#475569; }
        .dok-ft.ft-other { background:#94a3b8; }
        body.theme-dark .dok-ft.ft-other { background: rgba(255,255,255,.10); }

        /* Walter-Vorgabe 09.06.2026: einheitlicher Icon-Button-Standard für ALLE
           Tabellen — gleiche Größe, gleiche Farben, sofort sichtbar (nicht erst
           bei Hover). Edit = blau-getönt mit blauem Icon, ⋮-Menü = grau mit
           dunkleren Punkten. Auf Höhe der btn-emp-edit/btn-emp-delete im Rest
           des Programms. */
        .dok-menu-wrap { position:relative; display:inline-block; }
        .dok-action-btn,
        .dok-menu-btn  {
            border:1px solid #cbd5e1; background:white; padding:4px 8px;
            border-radius:6px; cursor:pointer; line-height:1;
            display:inline-flex; align-items:center; justify-content:center;
            transition: all .12s; min-width:28px; height:28px;
        }
        .dok-action-btn { color:#1a1a1a; border-color:#e5e0d6; background:#f6f3ee; }
        .dok-action-btn:hover { background:#ece9e2; border-color:#d0c8b8; }
        /* Walter 09.06.2026: rote „Danger"-Variante für direkten Löschen-Button
           (gleicher Stil wie Edit, aber rot). Standard bleibt: Löschen im ⋮-Menü;
           Danger-Variante nur, wenn Löschen in der Zeile häufig gebraucht wird
           (z.B. Absenzen, Familie). */
        .dok-action-btn.danger { color:#dc2626; border-color:#fecaca; background:#fef2f2; }
        .dok-action-btn.danger:hover { background:#fee2e2; border-color:#fca5a5; }
        /* Walter 09.06.2026 (Schärfung): die ⋮-Buttons waren in der Tabelle zu
           dezent — heller Hintergrund + dünner Rand + helle Punkte. Jetzt
           dunkler Rand (#94a3b8), grauer Hintergrund (#f1f5f9), kräftigere
           Punkte (#1e293b, 19px). Damit klar als klickbarer Button erkennbar. */
        .dok-menu-btn  {
            color:#1e293b; font-size:19px; font-weight:900; line-height:1;
            background:#f1f5f9; border-color:#94a3b8;
            letter-spacing:1px;
        }
        .dok-menu-btn:hover { background:#cbd5e1; color:#0f172a; border-color:#475569; }
        body.theme-dark .dok-action-btn {
            background:#5a5348 !important; color:#ece9e2 !important; border-color:#3f3f3f !important;
        }
        body.theme-dark .dok-action-btn:hover { background:#6b6152 !important; }
        body.theme-dark .dok-action-btn.danger {
            background:#7f1d1d !important; color:#fecaca !important; border-color:#dc2626 !important;
        }
        body.theme-dark .dok-action-btn.danger:hover { background:#991b1b !important; }
        body.theme-dark .dok-menu-btn { background: var(--dlg-glass-strong) !important; color:#cbd5e1 !important; border-color: var(--dlg-glass-border) !important; }
        body.theme-dark .dok-menu-btn:hover { background: rgba(255,255,255,.10) !important; color:#f1f5f9 !important; }
        .dok-menu {
            display:none; position:absolute; top:calc(100% + 4px); right:0; min-width:140px;
            background:white; border:1px solid #e2e8f0; border-radius:8px;
            box-shadow:0 8px 24px rgba(15,23,42,0.12); z-index:200; overflow:hidden;
        }
        .dok-menu.show { display:block; }
        /* Drop-up wenn unten kein Platz mehr ist (Walter-Vorgabe 14.06.2026):
           dokToggleMenu hängt die Klasse .up dynamisch ran. */
        .dok-menu.up { top:auto; bottom:calc(100% + 4px); }
        .dok-menu-item {
            display:block; width:100%; padding:9px 14px; border:none; background:white;
            text-align:left; cursor:pointer; font-size:13px; color:#0f172a;
        }
        .dok-menu-item:hover { background:#f8fafc; }
        .dok-menu-item.danger { color:#b91c1c; border-top:1px solid #f1f5f9; }
        .dok-menu-item.danger:hover { background:#fef2f2; }
        .dok-menu-locked {
            display:block; width:100%; padding:9px 14px; border-top:1px solid #f1f5f9;
            text-align:left; font-size:12px; color:#94a3b8; cursor:default; background:#f8fafc;
        }
        body.theme-dark .dok-menu-locked { color:#64748b; background: var(--dlg-glass); border-top-color: var(--dlg-glass-border); }

        /* Walter-Vorgabe 14.06.2026: Lohnpositionen-Tabellenzeilen mit
           Theme-fähigem Hover. Vorher gab es gar keinen Hover-Effekt, im
           Dark Mode war die Liste optisch tot. */
        tr.lp-row { transition: background 0.12s; }
        tr.lp-row:hover { background: #f0f9ff; }
        body.theme-dark tr.lp-row:hover { background: #5a5348; }

        /* Massen-Import Tabelle */
        .dok-bulk-table { width:100%; border-collapse:collapse; font-size:12.5px; margin-top:10px; }
        .dok-bulk-table th { background:#f8fafc; font-weight:600; color:#64748b;
            text-transform:uppercase; font-size:10.5px; padding:6px 10px; text-align:left;
            border-bottom:1px solid #e2e8f0; position:sticky; top:0; z-index:1; }
        .dok-bulk-table td { padding:5px 8px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
        .dok-bulk-table tr.row-ok        { background:#f0fdf4; }
        .dok-bulk-table tr.row-warn      { background:#fffbeb; }
        .dok-bulk-table tr.row-error     { background:#fef2f2; }
        .dok-bulk-table tr.row-uploading { background:#f6f3ee; }
        .dok-bulk-table tr.row-done      { background:#f0fdf4; opacity:0.6; }
        .dok-bulk-table tr.row-duplicate { background:#f1f5f9; opacity:0.7; }
        .dok-bulk-status {
            display:inline-block; font-size:10.5px; font-weight:600;
            padding:1px 7px; border-radius:8px;
        }
        .dok-bulk-status.ok       { background:#dcfce7; color:#15803d; }
        .dok-bulk-status.warn     { background:#fef3c7; color:#a16207; }
        .dok-bulk-status.error    { background:#fee2e2; color:#b91c1c; }
        .dok-bulk-status.uploading { background:#ece9e2; color:#6b7280; }
        .dok-bulk-status.done     { background:#dcfce7; color:#15803d; }
        .dok-bulk-status.duplicate { background:#e2e8f0; color:#475569; }
        .dok-bulk-table select {
            padding:3px 6px; font-size:11.5px; border:1px solid #e2e8f0;
            border-radius:5px; background:white; max-width:160px;
        }
        .dok-bulk-table .filename {
            font-size:11.5px; color:#475569; max-width:280px;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        }
        .dok-bulk-progress {
            height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden;
            margin:8px 0;
        }
        .dok-bulk-progress-bar {
            height:100%; background:#3f3f3f; transition:width 0.2s;
        }

        /* Dokument-Struktur Admin */
        .dokstruktur-row {
            display:flex; align-items:center; gap:10px;
            padding:10px 14px; border-bottom:1px solid #f1f5f9; cursor:pointer;
        }
        .dokstruktur-row:hover { background:#f8fafc; }
        .dokstruktur-row.active { background:#f6f3ee; border-left:3px solid #3f3f3f; padding-left:11px; }
        .dokstruktur-row:last-child { border-bottom:none; }
        .dokstruktur-actions { display:flex; gap:4px; }
        .dokstruktur-actions button:disabled {
            opacity:0.4; cursor:not-allowed;
        }
        .dok-expiry-badge { display:inline-block; font-size:10.5px; font-weight:600;
            padding:1px 7px; border-radius:8px; margin-left:6px; }
        .dok-expiry-ok      { background:#dcfce7; color:#15803d; }
        .dok-expiry-warn    { background:#fef3c7; color:#a16207; }
        .dok-expiry-expired { background:#fee2e2; color:#b91c1c; }
        .dok-actions { display:flex; gap:3px; justify-content:flex-end; }
        .dok-action {
            border:1px solid #e2e8f0; background:white; padding:5px 10px; border-radius:6px;
            font-size:11.5px; font-weight:500; color:#475569; cursor:pointer; white-space:nowrap;
        }
        .dok-action:hover { background:#f1f5f9; }
        .dok-action.danger:hover { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }

        /* Upload-Modal */
        .dok-upload-form { display:flex; flex-direction:column; gap:12px; }
        .dok-upload-form label { font-size:12px; font-weight:600; color:#475569; display:block; margin-bottom:4px; }
        .dok-upload-form input, .dok-upload-form select, .dok-upload-form textarea {
            width:100%; padding:8px 10px; border:1px solid #e2e8f0; border-radius:7px; font-size:13px;
            font-family:inherit;
        }
        .dok-upload-form textarea { resize:vertical; min-height:60px; }
        .dok-upload-dropzone {
            border:2px dashed #cbd5e1; border-radius:10px; padding:24px; text-align:center;
            background:#f8fafc; transition:all 0.15s; cursor:pointer;
        }
        .dok-upload-dropzone:hover, .dok-upload-dropzone.dragover {
            border-color:#3f3f3f; background:#f6f3ee;
        }
        .dok-upload-dropzone-text { color:#64748b; font-size:13px; }
        .dok-upload-dropzone-file { color:#0f172a; font-weight:600; font-size:13.5px; word-break:break-all; }

        .emp-placeholder {
            display: flex; align-items: center; justify-content: center;
            height: 100%; color: #cbd5e1; font-size: 14px; flex-direction: column; gap: 8px;
        }
        /* Familie: Leerzeile mit Text + Button in einer Zeile (Walter 27.07.2026). */
        .emp-familie-empty-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            padding: 18px 4px 10px;
            min-height: 56px;
        }
        .emp-familie-empty-msg {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #8b8b8b;
            font-size: 14px;
            font-weight: 500;
        }
        .emp-familie-empty-msg svg { color: #cbd5e1; flex-shrink: 0; }
        body.theme-dark .emp-familie-empty-msg { color: #94a3b8; }
        body.theme-dark .emp-familie-empty-msg svg { color: #64748b; }
        /* Tab-Toolbars (Bank, Permit, Zulagen etc.) — sticky oben. */
        .emp-familie-toolbar,
        .emp-tab-toolbar {
            display: flex; justify-content: flex-end; margin-bottom: 16px;
            position: sticky; top: 0; z-index: 5;
            background: white; padding: 6px 0;
        }
        body.theme-dark .emp-familie-toolbar,
        body.theme-dark .emp-tab-toolbar { background: var(--dlg-glass); }
        .btn-emp-add {
            display: flex; align-items: center; gap: 6px;
            padding: 7px 14px; background: #3f3f3f; color: white;
            border: none; border-radius: 8px; font-size: 13px; font-weight: 600;
            cursor: pointer; font-family: inherit; transition: background 0.2s;
        }
        .btn-emp-add:hover { background: #1a1a1a; }
        .btn-emp-edit {
            padding: 4px 10px; background: transparent; border: 1px solid #e2e8f0;
            border-radius: 6px; font-size: 12px; color: #64748b; cursor: pointer;
            font-family: inherit; transition: all 0.15s;
        }
        .btn-emp-edit:hover { background: #f1f5f9; color: #0f172a; }
        .btn-emp-del {
            padding: 4px 10px; background: transparent; border: 1px solid #fecaca;
            border-radius: 6px; font-size: 12px; color: #ef4444; cursor: pointer;
            font-family: inherit; transition: all 0.15s;
        }
        .btn-emp-del:hover { background: #fef2f2; }

        /* Edit-Modus Inputs — sitzen IM .emp-field-Container (der hat Border
           + Background), daher transparent + ohne eigenen Rahmen. So sind
           Felder im Edit- und Read-Modus optisch deckungsgleich gross. */
        .ef-input {
            width: 100%; padding: 0; border: none; border-radius: 0;
            font-size: 13px; font-weight: 500; font-family: inherit;
            color: #0f172a; background: transparent;
            box-sizing: border-box; transition: background .15s;
            line-height: 1.3; min-height: 18px;
        }
        .ef-input:focus { outline: none; background: #f6f3ee; }
        .ef-input:hover { background: #f1f5f9; }
        select.ef-input { appearance: auto; padding-right: 18px; }
        /* Date-Inputs zeigen den Calendar-Picker-Knopf rechts — kompakt halten */
        input[type="date"].ef-input { padding-right: 0; }
        /* Gruppen-Zwischentitel im Filial-Einstellungen-Tab (Arbeitszeit,
           Karenz, L-GAV …) — gleicher Stil wie .emp-section-title in der
           MA-Maske (Walter-Vorgabe 27.05.2026). */
        .ein-group-title {
            font-size: 10.5px; font-weight: 800; color: #5a5348; text-transform: uppercase;
            letter-spacing: 0.08em; margin: 12px 0 0;
            padding: 4px 0 4px 10px;
            border-left: 4px solid #1a1a1a;
            background: linear-gradient(to right, #ece9e2 0%, #f6f3ee 60%, transparent 90%);
            border-radius: 3px 3px 0 0;
        }
        body.theme-dark .ein-group-title {
            color: #e2e8f0 !important;
            border-left-color: #3f3f3f !important;
            background: linear-gradient(to right, #1e293b 0%, transparent 70%) !important;
        }
        /* Primär-Button = ruhige Kohle-Pille (Walter-Vorgabe: kein grelles #3f3f3f mehr) */
        .btn-primary {
            background: #3f3f3f; color: #fff; border: none; border-radius: 10px;
            font-size: 13px; font-family: inherit; cursor: pointer; font-weight: 600;
            box-shadow: 0 5px 14px rgba(60,55,48,.16);
            transition: background .15s, box-shadow .15s;
        }
        .btn-primary:hover { background: #1a1a1a; box-shadow: 0 7px 18px rgba(60,55,48,.22); }
        .btn-secondary {
            background: #f1f5f9; color: #374151; border: 1px solid #e2e8f0; border-radius: 7px;
            font-size: 13px; font-family: inherit; cursor: pointer; font-weight: 500;
            transition: background .15s;
        }
        .btn-secondary:hover { background: #e2e8f0; }

        /* Saldi-Vortrag — Felder im Modal (Light Mode) */
        .sv-field label {
            display:block; font-size:12px; font-weight:600;
            color:#475569; margin-bottom:5px;
        }
        .sv-field .sv-unit { color:#94a3b8; font-weight:400; }
        .sv-field input {
            width:100%; padding:8px 12px;
            border:1.5px solid #e2e8f0; border-radius:8px;
            font-size:14px; font-family:monospace; background:white;
        }
        .sv-field input:focus {
            outline:none; border-color:#3f3f3f;
            box-shadow:0 0 0 3px rgba(63,63,63,0.12);
        }
        .sv-field .sv-hint { font-size:11px; color:#94a3b8; margin-top:3px; }
        /* Vertragstyp-spezifische Hervorhebung */
        .sv-field.sv-active label { color:#0f172a; }
        .sv-field.sv-active input { border-color:#3f3f3f; background:#f6f3ee; }
        .sv-field.sv-inactive { opacity:0.45; }
        .sv-field.sv-inactive .sv-hint::before {
            content:'⊘ '; color:#94a3b8;
        }
        /* Saldi-Vortrag — Vertragstyp-Badge (Modal-Header und List-Row) */
        .sv-vertrag-badge {
            display:inline-block;
            padding:2px 9px; border-radius:10px;
            font-size:11px; font-weight:700; letter-spacing:0.04em;
            min-width:42px; text-align:center;
        }
        /* Im Modal-Header braucht's Abstand zum vorherigen Text */
        #svModalSubtitle .sv-vertrag-badge { margin-left:10px; }
        .sv-vertrag-badge.utp   { background:#fef3c7; color:#92400e; }
        .sv-vertrag-badge.mtp   { background:#d1fae5; color:#065f46; }
        .sv-vertrag-badge.fix   { background:#ece9e2; color:#6b7280; }
        .sv-vertrag-badge.fix-m { background:#ede9fe; color:#6d28d9; }
        .sv-vertrag-badge.none  { background:#fee2e2; color:#991b1b; }

        /* Saldi-Vortrag — Felder im Modal (Dark Mode) */
        body.theme-dark .sv-field label    { color:#cbd5e1 !important; }
        body.theme-dark .sv-field .sv-unit { color:#94a3b8 !important; }
        body.theme-dark .sv-field input    {
            background: var(--dlg-glass-strong) !important;
            color:#f1f5f9 !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .sv-field .sv-hint { color:#94a3b8 !important; }
        body.theme-dark .sv-field.sv-active label { color:#f1f5f9 !important; }
        body.theme-dark .sv-field.sv-active input {
            border-color:#3f3f3f !important;
            background: var(--dlg-active) !important;
        }
        body.theme-dark .sv-vertrag-badge.utp   { background:#422006 !important; color:#fcd34d !important; }
        body.theme-dark .sv-vertrag-badge.mtp   { background:#064e3b !important; color:#6ee7b7 !important; }
        body.theme-dark .sv-vertrag-badge.fix   { background: var(--dlg-active) !important; color:#d0c8b8 !important; }
        body.theme-dark .sv-vertrag-badge.fix-m { background:#2e1065 !important; color:#c4b5fd !important; }
        body.theme-dark .sv-vertrag-badge.none  { background:#450a0a !important; color:#fca5a5 !important; }

        /* Saldi-Vortrag-Liste — Light Mode */
        .sv-list-row {
            display:flex; align-items:center; gap:12px;
            padding:10px 14px; border-bottom:1px solid #f1f5f9;
            cursor:pointer; background:white; transition:background .12s;
        }
        .sv-list-row:hover { background:#f8fafc; }
        .sv-list-row:last-child { border-bottom:none; }
        .sv-avatar {
            width:34px; height:34px; border-radius:50%;
            background:#e2e8f0; color:#475569;
            display:flex; align-items:center; justify-content:center;
            font-weight:700; font-size:12px; flex-shrink:0;
        }
        .sv-row-text { flex:1; min-width:0; }
        .sv-row-name { font-weight:600; font-size:13px; color:#0f172a; }
        .sv-row-nr   { font-size:11px; color:#94a3b8; }
        .sv-status-ok {
            background:#dcfce7; color:#15803d;
            padding:2px 9px; border-radius:10px;
            font-size:11px; font-weight:600;
        }
        .sv-status-open {
            background:#fef3c7; color:#92400e;
            padding:2px 9px; border-radius:10px;
            font-size:11px; font-weight:600;
        }
        /* Saldi-Vortrag-Liste — Dark Mode Overrides */
        body.theme-dark .sv-list-row {
            background:transparent !important;
            border-bottom-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .sv-list-row:hover {
            background: var(--dlg-active) !important;
        }
        body.theme-dark .sv-avatar {
            background: var(--dlg-glass-strong) !important;
            color:#cbd5e1 !important;
        }
        body.theme-dark .sv-row-name { color:#f1f5f9 !important; }
        body.theme-dark .sv-row-nr   { color:#94a3b8 !important; }
        body.theme-dark .sv-status-ok {
            background:#064e3b !important;
            color:#6ee7b7 !important;
        }
        body.theme-dark .sv-status-open {
            background:#422006 !important;
            color:#fcd34d !important;
        }

        /* Import */
        .import-drop-zone {
            border: 2px dashed #cbd5e1; border-radius: 12px; padding: 36px 24px;
            text-align: center; cursor: pointer; transition: all .2s;
        }
        .import-drop-zone:hover, .import-drop-zone.drag-over {
            border-color: #3f3f3f; background: #f6f3ee;
        }
        .import-spinner {
            width: 18px; height: 18px; border: 2.5px solid #e5e0d6;
            border-top-color: #3f3f3f; border-radius: 50%;
            animation: spin .7s linear infinite; flex-shrink: 0;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .import-result-ok {
            background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
            padding: 16px 20px; color: #166534;
        }
        .import-result-warn {
            background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
            padding: 16px 20px; color: #92400e; margin-top: 10px;
        }
        .import-result-err {
            background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
            padding: 16px 20px; color: #991b1b;
        }

        /* Stempelzeiten */
        .stamp-toolbar {
            display: flex; align-items: center; gap: 12px;
            flex-wrap: wrap;
            position: sticky; top: 0; z-index: 20;
            background: white;
            margin: 0 -24px; padding: 14px 24px 12px;
            border-bottom: 1px solid #e2e8f0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .stamp-nav { display: flex; align-items: center; gap: 8px; }
        .btn-stamp-nav {
            background: #f1f5f9; border: none; border-radius: 6px;
            width: 28px; height: 28px; cursor: pointer; font-size: 16px;
            display: flex; align-items: center; justify-content: center; color: #475569;
        }
        .btn-stamp-nav:hover { background: #e2e8f0; }
        .stamp-month-label { font-weight: 600; font-size: 14px; color: #1e293b; min-width: 140px; text-align: center; }
        .stamp-summary { margin-left: auto; font-size: 13px; color: #64748b; }
        .stamp-hours-summary {
            display: flex; align-items: center; gap: 20px;
            margin-left: auto; background: #f8fafc;
            border: 1px solid #e2e8f0; border-radius: 10px;
            padding: 8px 16px;
        }
        .stamp-hours-item { display: flex; flex-direction: column; align-items: center; gap: 1px; }
        .stamp-hours-sep { border-left: 1px solid #e2e8f0; padding-left: 16px; margin-left: 4px; }
        .stamp-hours-label { font-size: 10px; font-weight: 600; text-transform: uppercase;
            letter-spacing: 0.05em; color: #94a3b8; }
        .stamp-hours-value { font-size: 14px; font-weight: 700; color: #1e293b; }
        .stamp-diff-pos { color: #16a34a; }
        .stamp-diff-neg { color: #dc2626; }
        .stamp-model-badge {
            display: inline-block; font-size: 11px; font-weight: 700;
            padding: 2px 8px; border-radius: 99px; letter-spacing: 0.06em;
            text-transform: uppercase; margin-left: 6px; vertical-align: middle;
        }
        .stamp-model-fix   { background: #ece9e2; color: #6b7280; }
        .stamp-model-fix-m { background: #ede9fe; color: #6d28d9; }
        .stamp-model-mtp   { background: #d1fae5; color: #065f46; }
        .stamp-model-utp   { background: #fef3c7; color: #92400e; }

        /* ── Absenzen ─────────────────────────────────────────────── */
        .abs-toolbar { display:flex; align-items:center; justify-content:flex-end; padding:12px 0 10px; }
        .abs-table { width:100%; border-collapse:collapse; font-size:13px; }
        .abs-table th { background:#f8fafc; color:#64748b; font-weight:600;
            padding:8px 10px; text-align:left; border-bottom:1px solid #e2e8f0;
            font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
        .abs-table td { padding:8px 10px; border-bottom:1px solid #f1f5f9; vertical-align:top; }
        .abs-days-cell { font-size:12px; color:#475569; max-width:260px; line-height:1.5; }
        .abs-notes { font-size:12px; color:#64748b; }
        /* Walter-Vorgabe 09.06.2026: Aktions-Buttons rechtsbündig in der Zeile
           — gleiche Position wie in der Doku-Tabelle. */
        .abs-actions {
            white-space:nowrap; text-align:right; width:1%;
            padding-right:14px !important;
        }
        .abs-actions > * { vertical-align:middle; }
        .abs-actions > * + * { margin-left:6px; }
        .abs-type-badge { display:inline-block; font-size:11px; font-weight:700;
            padding:2px 9px; border-radius:99px; letter-spacing:.05em; white-space:nowrap; }
        .abs-type-krank    { background:#fee2e2; color:#991b1b; }
        .abs-type-unfall   { background:#ffedd5; color:#9a3412; }
        .abs-type-schulung { background:#ece9e2; color:#6b6152; }
        .abs-type-ferien   { background:#d1fae5; color:#065f46; }
        .abs-type-feiertag { background:#fef3c7; color:#92400e; }
        .abs-type-nacht    { background:#ede9fe; color:#5b21b6; }
        .abs-hours-pos   { color:#16a34a; font-weight:700; }
        .abs-hours-neg   { color:#dc2626; font-weight:700; }
        .abs-hours-label { font-size:11px; color:#64748b; margin-left:4px; }

        /* Kritische Bestands-Absenzen: Überlappung / AU-Unterbrechung (Walter 26.07.2026) */
        .abs-critical-banner {
            margin: 0 0 10px;
            padding: 10px 12px;
            border-radius: 12px;
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #7f1d1d;
            font-size: 12.5px;
            line-height: 1.45;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .abs-critical-banner strong { font-size: 13px; font-weight: 700; }
        .abs-critical-banner span { color: #991b1b; }
        .abs-table-body tr.abs-row-critical td {
            background: #fef2f2 !important;
            box-shadow: inset 3px 0 0 #dc2626;
        }
        .abs-critical-badge {
            display: inline-block;
            margin-left: 6px;
            margin-top: 3px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #fff;
            background: #b91c1c;
            padding: 2px 7px;
            border-radius: 99px;
            vertical-align: middle;
        }
        .abs-critical-hint {
            margin-top: 4px;
            font-size: 11px;
            font-weight: 600;
            color: #b91c1c;
            line-height: 1.35;
        }
        body.theme-dark .abs-critical-banner {
            background: rgba(127, 29, 29, 0.35);
            border-color: rgba(248, 113, 113, 0.45);
            color: #fecaca;
        }
        body.theme-dark .abs-critical-banner span { color: #fca5a5; }
        body.theme-dark .abs-table-body tr.abs-row-critical td {
            background: rgba(127, 29, 29, 0.28) !important;
            box-shadow: inset 3px 0 0 #f87171;
        }
        body.theme-dark .abs-critical-hint { color: #fca5a5; }

        /* Absenz-Modal */
        .abs-modal-box { background:#fff; border-radius:12px; width:100%; max-width:560px;
            box-shadow:0 20px 60px rgba(0,0,0,.2); }
        .abs-hours-preview-box { background:#f8fafc; border:1px solid #e2e8f0;
            border-radius:8px; padding:12px 16px; display:flex; align-items:center; gap:10px; }
        .abs-hours-preview-title { font-size:12px; font-weight:600; color:#64748b;
            text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
        .abs-day-label { font-size:12px; font-weight:600; color:#475569; margin-bottom:8px; }
        .abs-day-info  { font-size:13px; color:#64748b; padding:8px 0; }
        /* Walter-Vorgabe 28.05.2026: 7-Spalten-Wochenraster Mo-So.
           Leere Vor-Zellen für den Wochen-Versatz halten die Spalten ausgerichtet. */
        .abs-day-grid  { display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; }
        .abs-day-item  { display:flex; flex-direction:column; align-items:center;
            border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; cursor:pointer;
            background:#f8fafc; gap:3px; transition:background .15s; min-width:0; }
        .abs-day-item:has(input:checked) { background:#ece9e2; border-color:#d0c8b8; }
        /* Walter-Vorgabe 30.05.2026: Sa+So sind in der Gastro normale Arbeitstage —
           sie sollen visuell GLEICHWERTIG aussehen, nicht ausgegraut. Eine dezente
           gelbliche Tönung kennzeichnet sie nur als "Wochenende", ohne Disabled-Look. */
        .abs-day-weekend { background:#fefce8; }
        .abs-day-weekend:has(input:checked) { background:#ece9e2; }
        .abs-day-empty { /* unsichtbarer Platzhalter für Tage vor Mo der ersten Woche */
            background:transparent; border:none; cursor:default; visibility:hidden; }
        /* Schnellauswahl-Buttons (Mo-Fr / 5-2-Muster / Alle / Keine) */
        .abs-day-quick { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
        .abs-day-quick button {
            font-size:11px; padding:4px 10px; border:1px solid #cbd5e1; border-radius:6px;
            background:#fff; color:#475569; cursor:pointer; font-weight:500;
        }
        .abs-day-quick button:hover { background:#f1f5f9; border-color:#94a3b8; }
        .abs-day-name  { font-size:12px; font-weight:600; color:#1e293b; }
        .abs-day-date  { font-size:11px; color:#64748b; }
        .abs-day-item input { display:none; }
        /* Mini-Header-Zeile mit Wochentag-Buchstaben (Mo Di Mi Do Fr Sa So) */
        .abs-day-grid-head {
            display:grid; grid-template-columns:repeat(7, 1fr); gap:8px;
            font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase;
            letter-spacing:.06em; text-align:center; margin-bottom:4px;
        }

        /* Vertragstypen-Tabs */
        .vt-tab { padding:10px 18px; border:none; background:none; font-size:14px; font-weight:600;
            color:#64748b; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
            transition:color .15s, border-color .15s; }
        .vt-tab:hover { color:#334155; }
        .vt-tab.active { color:#9d174d; border-bottom-color:#9d174d; }

        .stamp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
        .stamp-table th {
            background: #f8fafc; color: #64748b; font-weight: 600;
            padding: 8px 10px; text-align: left;
            border-bottom: 2px solid #e2e8f0; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
            position: sticky; top: var(--stamp-thead-top, 62px); z-index: 10;
        }
        .stamp-table td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
        .stamp-day-first td { border-top: 2px solid #e2e8f0; }
        .stamp-date-cell { white-space: nowrap; min-width: 80px; }
        .stamp-weekday { font-size: 11px; color: #94a3b8; text-transform: uppercase; }
        .stamp-date { font-weight: 600; font-size: 13px; color: #1e293b; }
        .stamp-day-total { font-size: 11px; color: #3f3f3f; margin-top: 2px; }
        .stamp-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
        .stamp-hrs { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
        .stamp-night { font-size: 11px; color: #7c3aed; margin-left: 6px; }
        .stamp-comment { font-size: 12px; color: #f59e0b; font-style: italic; }
        .stamp-actions { text-align: right; white-space: nowrap; }
        .stamp-abs-row td { background: #f0fdf4; }
        /* Audit: geänderte Zeilen */
        .stamp-row-edited td { background: #fff7ed; }
        .stamp-row-edited .stamp-time,
        .stamp-row-edited .stamp-hrs { color: #c2410c; }
        .stamp-audit-info {
            font-size: 11px; color: #9a3412; margin-top: 3px;
            font-style: italic; opacity: 0.85;
        }
        .stamp-abs-cell { padding: 5px 10px; }

        /* ── Lohnabrechnung ─────────────────────────────────── */
        .lohn-emp-row { display:flex;align-items:center;gap:10px;padding:6px 14px;cursor:pointer;border-bottom:1px solid #f8fafc;transition:background .12s; }
        .lohn-emp-row:hover { background:#f8fafc; }
        /* Auswahl klar sichtbar auch auf hellen Monitoren (Walter 02.08.2026) */
        .lohn-emp-active {
            background: #ddd5c8 !important;
            border-left: 3px solid #3f3f3f !important;
            padding-left: 11px !important;
            box-shadow: inset 0 0 0 1px rgba(60,55,48,0.10);
        }
        /* Akonto-Modus: Definitivlauf-spezifische Elemente hart verstecken.
           Walter-Bug-Fix 16.05.2026 — die Definitivlauf-Loader (loadLohnSlip,
           loadLohnPeriodBanner) laufen async parallel zum Akonto-Init und
           re-aktivieren ihre Elemente via inline display:block/flex. Diese
           CSS-Regel überschreibt das mit !important, solange die Body-Klasse
           lohn-mode-akonto gesetzt ist (von setLohnMode in akonto-workflow.js). */
        body.lohn-mode-akonto #lohnPeriodBanner,
        body.lohn-mode-akonto #lohnTopActions,
        body.lohn-mode-akonto #lohnDefinitivView {
            display: none !important;
        }
        /* Kompakt-Modus: Schriften wie im Original, aber Padding/Margins
           und Line-Heights deutlich reduziert. Macht den Lohnzettel
           kompakter ohne Lesbarkeit zu opfern. */
        /* Walter 19.05.2026: enger als Original, aber Schrift wieder etwas
           grösser (Walter-Update: MA-Name aus Header ist raus → mehr Platz
           → Lesbarkeit über Kompaktheit). */
        .ls-wrap { padding:6px 18px 4px;font-size:13px;color:#1e293b;max-width:860px;line-height:1.25; }
        .ls-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px; }
        .ls-company { font-size:12px;line-height:1.3;color:#334155; }
        .ls-title-center { font-size:15px;font-weight:700;color:#1e293b;text-align:right; }
        .ls-recipient { font-size:13px;line-height:1.3;margin-bottom:5px; }
        .ls-date-line { font-size:13px;margin-bottom:1px; }
        .ls-period-label { font-size:13px;font-weight:600;margin-bottom:4px; }
        /* Walter-Vorgabe 27.05.2026: Lohnzettel-Tabelle muss IMMER in den
           Card-Container passen — die Spalten werden kompakter (kleineres
           Padding, kleinere Schrift in den Zahlen-Spalten), Description-
           Spalte darf umbrechen wenn zu lang. ls-wrap clipped horizontal. */
        .ls-wrap { max-width:100%; overflow-x:hidden; }
        /* Walter-Vorgabe 01.06.2026: Schriftgröße angehoben für bessere
           Lesbarkeit auf dem Bildschirm. Beim PDF-Export greifen separate
           Layout-Regeln im PayrollPdfService — diese Anpassung wirkt nur
           in der Web-Anzeige des Lohnzettels. */
        .ls-table { width:100%;border-collapse:collapse;font-size:13.5px;table-layout:auto; }
        .ls-table th { text-align:left;border-bottom:1px solid #1e293b;padding:3px 4px;font-size:12px;font-weight:600;color:#475569; }
        .ls-table th.ls-num, .ls-table th.ls-amt { text-align:right; }
        .ls-table td { padding:2px 4px;vertical-align:top;line-height:1.35; }
        .ls-desc { width:auto;white-space:normal;word-break:break-word; }
        .ls-num  { width:1%;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:6px;font-size:13px; }
        .ls-amt  { width:1%;text-align:right;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap;padding-left:6px;font-size:13px; }
        .ls-section-hd td { font-weight:600;padding-top:3px;padding-bottom:1px;color:#1e293b; }
        .ls-total-row td { font-weight:700;border-top:1px solid #e2e8f0;padding-top:2px; }
        .ls-netto-row td { font-weight:700;font-size:14px;border-top:2px solid #1e293b;padding-top:3px;padding-bottom:2px; }
        .ls-col-hd th { border-bottom:1px solid #e2e8f0;padding:3px 5px 1px;font-size:10.5px;font-weight:500;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px; }
        .ls-hours-box { margin-top:6px;background:#f8fafc;border-radius:6px;padding:6px 10px;font-size:12px; }
        .ls-hours-row { display:flex;justify-content:space-between;padding:1px 0;color:#475569; }
        .ls-thirteenth { margin-top:5px;border-top:1px solid #e2e8f0;padding-top:4px;font-size:12px;line-height:1.4;color:#475569; }
        .stamp-abs-hours { font-size: 12px; font-weight: 600; color: #16a34a; margin-left: 8px; }
        .btn-stamp-edit, .btn-stamp-del {
            border: none; border-radius: 5px; padding: 3px 7px; cursor: pointer; font-size: 13px;
            transition: background .15s;
        }
        .btn-stamp-edit { background: #f1f5f9; color: #475569; }
        .btn-stamp-edit:hover { background: #e2e8f0; }
        .btn-stamp-del  { background: #fff0f0; color: #dc2626; margin-left: 4px; }
        .btn-stamp-del:hover { background: #fecaca; }

        /* ── Abzüge-Drawer ──────────────────────────────────── */
        #deductionDrawer { position:fixed;inset:0;z-index:1500;display:none; }
        #deductionDrawer.open { display:flex; }
        .ded-overlay { position:absolute;inset:0;background:rgba(0,0,0,0.35); }
        .ded-panel { position:absolute;right:0;top:0;bottom:0;width:720px;max-width:100vw;background:#fff;
                     box-shadow:-4px 0 32px rgba(0,0,0,0.14);display:flex;flex-direction:column;overflow:hidden; }
        .ded-head { padding:22px 28px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
        .ded-head-title { font-size:16px;font-weight:700;color:#1e293b; }
        .ded-head-sub   { font-size:12px;color:#94a3b8;margin-top:2px; }
        .ded-body { flex:1;overflow-y:auto;padding:20px 28px; }
        .ded-foot { padding:16px 28px;border-top:1px solid #f1f5f9;display:flex;gap:10px;justify-content:flex-end;flex-shrink:0; }

        /* Kategorie-Karten */
        .ded-cat { margin-bottom:14px;border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden; }
        .ded-cat-head { padding:12px 16px;background:#f8fafc;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none; }
        .ded-cat-head:hover { background:#f1f5f9; }
        .ded-cat-code { font-size:11px;font-weight:700;color:#64748b;min-width:36px; }
        .ded-cat-name { font-size:13px;font-weight:600;color:#1e293b;flex:1;margin-left:10px; }
        .ded-cat-chevron { font-size:13px;color:#94a3b8;transition:transform .2s; }
        .ded-cat.collapsed .ded-cat-chevron { transform:rotate(-90deg); }
        .ded-cat-body { border-top:1px solid #e2e8f0; }
        .ded-cat.collapsed .ded-cat-body { display:none; }

        /* Regel-Zeilen */
        .ded-rule { display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid #f8fafc;font-size:12.5px; }
        .ded-rule:last-child { border-bottom:none; }
        .ded-rule-name { flex:1;color:#334155; }
        .ded-rule-rate { width:90px;text-align:right;font-weight:600;color:#0f172a;font-variant-numeric:tabular-nums; }
        .ded-rule-basis { width:100px;color:#64748b;font-size:11.5px; }
        .ded-rule-age   { width:80px;color:#64748b;font-size:11.5px; }
        .ded-rule-acts  { display:flex;gap:6px; }
        .ded-rule-add   { display:flex;align-items:center;padding:8px 16px;border-top:1px solid #f1f5f9; }

        /* Abzugs-Edit-Modal */
        #dedEditModal { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:2500;display:none;align-items:center;justify-content:center; }
        #dedEditModal.open { display:flex; }
        .ded-edit-box { background:#fff;border-radius:14px;width:520px;max-width:96vw;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.2); }
        .ded-edit-hd { padding:20px 24px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f1f5f9;padding-bottom:16px; }
        .ded-edit-body { padding:20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:14px; }
        .ded-edit-full { grid-column:1/-1; }
        .ded-edit-ft   { padding:16px 24px;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end;gap:10px; }

        /* Stempel-Modal */
        #timeEntryModal {
            position: fixed; inset: 0; background: rgba(0,0,0,0.45);
            display: none; align-items: center; justify-content: center; z-index: 2000;
        }
        .stamp-modal-box {
            background: white; border-radius: 16px; width: 440px;
            display: flex; flex-direction: column; box-shadow: 0 24px 48px rgba(0,0,0,0.25); overflow: hidden;
        }
        .stamp-modal-head {
            padding: 20px 24px 16px; border-bottom: 1px solid #f1f5f9;
            display: flex; align-items: center; justify-content: space-between;
        }
        .stamp-modal-title { font-weight: 700; font-size: 16px; color: #1e293b; }
        .stamp-modal-close { background: none; border: none; cursor: pointer; font-size: 18px; color: #94a3b8; padding: 4px 8px; border-radius: 6px; }
        .stamp-modal-close:hover { background: #f1f5f9; }
        .stamp-modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
        .stamp-modal-foot { padding: 16px 24px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 10px; }
        .stamp-field { display: flex; flex-direction: column; gap: 5px; }
        .stamp-label { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .5px; }
        .stamp-input { border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 9px 12px; font-size: 14px; color: #1e293b; outline: none; transition: border-color .15s; }
        .stamp-input:focus { border-color: #3f3f3f; }
        .stamp-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

        /* Familien-Modal */
        #familyModal {
            position: fixed; inset: 0; background: rgba(0,0,0,0.45);
            display: flex; align-items: center; justify-content: center;
            z-index: 2000; display: none;
        }
        #familyModal.open { display: flex; }
        .family-modal-box {
            /* OneCrew-Standard (Walter 12.08.2026): warmer Verlauf statt Weiss. */
            background: linear-gradient(135deg, #f7f4ef 0%, #efebe3 48%, #faf8f5 100%); border-radius: 16px;
            width: min(1080px, calc(100vw - 40px)); max-height: 92vh;
            display: flex; flex-direction: column; box-shadow: 0 24px 48px rgba(0,0,0,0.25);
        }
        .family-modal-head {
            padding: 20px 24px 16px; border-bottom: 1px solid #f1f5f9;
            display: flex; align-items: center; justify-content: space-between;
        }
        .family-modal-title { font-size: 16px; font-weight: 700; color: #0f172a; }
        .family-modal-close {
            width: 28px; height: 28px; border-radius: 50%; border: none;
            background: #f1f5f9; cursor: pointer; font-size: 16px; color: #64748b;
            display: flex; align-items: center; justify-content: center;
        }
        .family-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
        .family-modal-foot {
            padding: 14px 24px; border-top: 1px solid #f1f5f9;
            display: flex; justify-content: flex-end; gap: 10px;
        }
        .fmf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
        .fmf-row.single { grid-template-columns: 1fr; }
        .fmf-row.triple { grid-template-columns: 1fr 1fr 1fr; }
        .fmf-field { display: flex; flex-direction: column; gap: 5px; }
        .fmf-label { font-size: 12px; font-weight: 600; color: #374151; }
        .fmf-input, .fmf-select {
            padding: 8px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px;
            font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.2s;
        }
        .fmf-input:focus, .fmf-select:focus { border-color: #3f3f3f; }

        /* ── Familien-Modal im neuen warmen Look (Walter 27.06.2026) ──────
           Kein Blau mehr: Sektions-Köpfe neutral, Feld-/Adress-Boxen warm
           statt blau-grau (#e2e8f0), warmer Fokus statt Blau. */
        #familyModal .emp-section-title {
            background: transparent !important;
            border-left: none !important;
            border-radius: 0 !important;
            color: #364152 !important;
            text-transform: none !important;
            letter-spacing: -.01em !important;
            font-size: 12px !important;
            font-weight: 760 !important;
            padding: 0 0 0 3px !important;
            margin: 14px 0 5px !important;
        }
        #familyModal .emp-field-grid,
        #familyModal .emp-field-grid-3,
        #familyModal .fmf-addr-card {
            background: #f6f3ee !important;
            border: 1px solid #e7e1d8 !important;
            border-radius: 14px !important;
        }
        #familyModal .fmf-input,
        #familyModal .fmf-select {
            border: 1px solid #e2ddd3 !important;
            border-radius: 9px !important;
        }
        #familyModal .fmf-input:focus,
        #familyModal .fmf-select:focus {
            border-color: #c9bfb0 !important;
            box-shadow: 0 0 0 3px rgba(180,165,140,.14) !important;
        }
        .fmf-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; margin-bottom: 14px; }
        .fmf-section { font-size: 11px; font-weight: 700; color: #3f3f3f; text-transform: uppercase;
            letter-spacing: 0.08em; margin: 18px 0 10px; padding-bottom: 5px; border-bottom: 1px solid #e2e8f0; }

        /* Walter-Vorgabe 27.05.2026: Familien-Modal nutzt MA-Maske-Look
           (emp-field-grid-3 + emp-section-title). Inputs innerhalb der
           grauen Card werden zur weissen Wert-Box passend gestylt. */
        #familyModal .emp-field-grid-3 .fmf-input,
        #familyModal .emp-field-grid-3 .fmf-select,
        #familyModal .emp-field-grid-2 .fmf-input,
        #familyModal .emp-field-grid-2 .fmf-select,
        #familyModal .emp-field-grid   .fmf-input,
        #familyModal .emp-field-grid   .fmf-select {
            background: #fff;
            border: 1px solid #e2ddd3;
            border-radius: 9px;
            padding: 4px 9px;
            min-height: 27px;
            font-size: 13px;
            color: #0f172a;
            font-weight: 500;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
            transition: border-color .12s, box-shadow .12s;
        }
        #familyModal .emp-field-grid-3 .fmf-input:hover,
        #familyModal .emp-field-grid-3 .fmf-select:hover,
        #familyModal .emp-field-grid-2 .fmf-input:hover,
        #familyModal .emp-field-grid-2 .fmf-select:hover,
        #familyModal .emp-field-grid   .fmf-input:hover,
        #familyModal .emp-field-grid   .fmf-select:hover { border-color: #1a1a1a; box-shadow: 0 2px 4px rgba(60,55,48, 0.15); }
        #familyModal .emp-field-grid-3 .fmf-input:focus,
        #familyModal .emp-field-grid-3 .fmf-select:focus,
        #familyModal .emp-field-grid-2 .fmf-input:focus,
        #familyModal .emp-field-grid-2 .fmf-select:focus,
        #familyModal .emp-field-grid   .fmf-input:focus,
        #familyModal .emp-field-grid   .fmf-select:focus { border-color: #1a1a1a; box-shadow: 0 0 0 3px rgba(60,55,48, 0.15); }
        #familyModal .emp-field-grid-3 .fmf-label,
        #familyModal .emp-field-grid-2 .fmf-label,
        #familyModal .emp-field-grid   .fmf-label {
            font-size: 9.5px; font-weight: 700; color: #475569;
            text-transform: uppercase; letter-spacing: 0.06em;
            padding-left: 2px; line-height: 1.2;
        }
        #familyModal .fmf-checkbox-card {
            background: #fff; border: 1px solid #e2ddd3; border-radius: 9px;
            padding: 4px 9px; min-height: 27px;
            display: flex; align-items: center; gap: 8px;
            font-size: 13px; color: #0f172a;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
        }
        #familyModal .fmf-checkbox-text {
            font-size: 12px; color: #475569; font-weight: 500;
        }
        #familyModal .fmf-addr-card {
            background: #f6f3ee; border: 1px solid #e7e1d8; border-radius: 14px;
            padding: 9px 12px 11px; margin-bottom: 6px;
            display: flex; flex-direction: column; gap: 8px;
        }
        /* Adress-Wahl: eigene Klassen statt Inline-Farben (Dark Mode bricht Inline) */
        #familyModal .fmf-radio-row {
            display: flex; align-items: flex-start; gap: 10px;
            cursor: pointer; margin: 0;
            padding: 10px 12px; border-radius: 10px;
            background: #fff; border: 1px solid #e2ddd3;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            transition: border-color .12s, box-shadow .12s, background .12s;
        }
        #familyModal .fmf-radio-row:hover {
            border-color: #c9bfb0;
            box-shadow: 0 2px 6px rgba(60, 55, 48, 0.10);
        }
        #familyModal .fmf-radio-row:has(input:checked) {
            border-color: #3f3f3f;
            background: #faf8f5;
            box-shadow: 0 0 0 1px #3f3f3f inset;
        }
        #familyModal .fmf-radio-row > input[type="radio"] {
            margin-top: 3px; flex: none; accent-color: #3f3f3f;
        }
        #familyModal .fmf-radio-body { flex: 1; min-width: 0; }
        #familyModal .fmf-radio-title {
            display: block; font-weight: 650; font-size: 13px;
            color: #0f172a; line-height: 1.3;
        }
        #familyModal .fmf-radio-hint {
            display: block; color: #64748b; font-size: 11.5px;
            margin-top: 2px; line-height: 1.35;
        }
        #familyModal .fmf-addr-alt-box { padding: 2px 2px 2px 8px; }
        #familyModal .fmf-addr-alt-row {
            display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
        }
        #familyModal .fmf-addr-select {
            flex: 1; min-width: 180px;
            background: #fff; border: 1px solid #e2ddd3; border-radius: 9px;
            padding: 4px 9px; font-size: 13px; min-height: 27px;
            color: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
        }
        #familyModal .fmf-addr-add-btn {
            font-size: 11.5px; padding: 6px 12px; border-radius: 8px;
            border: 1px solid #cbd5e1; background: #fff; color: #1e293b;
            cursor: pointer; font-weight: 600; white-space: nowrap;
        }
        #familyModal .fmf-addr-add-btn:hover {
            background: #f8fafc; border-color: #94a3b8;
        }
        #familyModal .fmf-addr-alt-hint {
            font-size: 11.5px; color: #94a3b8; margin-top: 5px; line-height: 1.35;
        }

        /* Familienmitglied-Maske = MA-Übersicht-Standard (Walter 18.07.2026)
           Opake Sektions-Karten mit Verlaufs-Rim, Labels/Inputs wie .ov-card. */
        body.theme-dark #familyModal {
            background: rgba(4, 10, 20, 0.68);
        }
        body.theme-dark #familyModal .family-modal-box {
            border-radius: 16px;
        }
        body.theme-dark #familyModal .family-modal-head,
        body.theme-dark #familyModal .family-modal-foot {
            border-color: rgba(140, 195, 255, 0.14) !important;
        }
        body.theme-dark #familyModal .family-modal-title {
            color: #ffffff !important;
            font-size: 16px;
            font-weight: 760;
            letter-spacing: -0.01em;
        }
        body.theme-dark #familyModal .family-modal-close {
            background: var(--dlg-fill-field) !important;
            color: var(--dlg-text-soft) !important;
        }
        /* Section-Titel wie .ov-card-h */
        body.theme-dark #familyModal .emp-section-title {
            color: #ffffff !important;
            background: transparent !important;
            border-left: none !important;
            font-size: 13.5px !important;
            font-weight: 760 !important;
            letter-spacing: -0.01em !important;
            text-transform: none !important;
            margin: 16px 0 8px !important;
            padding: 0 !important;
        }
        /* Sektions-Karten wie .ov-card: Innen-Verlauf + klarer Rim */
        body.theme-dark #familyModal .emp-field-grid,
        body.theme-dark #familyModal .emp-field-grid-3,
        body.theme-dark #familyModal .fmf-addr-card {
            border: 1px solid transparent !important;
            background-color: var(--dlg-fill) !important;
            background-image: var(--dlg-fill-grad), var(--dlg-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow: var(--dlg-shadow) !important;
            border-radius: 14px !important;
            padding: 12px 14px !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        /* Labels wie .ov-pfl / .ov-fl */
        body.theme-dark #familyModal .fmf-label {
            color: var(--dlg-text-muted) !important;
            font-size: 10.5px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.04em !important;
        }
        /* Inputs wie .ov-softin / MA-Dark-Felder */
        body.theme-dark #familyModal .fmf-input,
        body.theme-dark #familyModal .fmf-select,
        body.theme-dark #familyModal .emp-field-grid-3 .fmf-input,
        body.theme-dark #familyModal .emp-field-grid-3 .fmf-select,
        body.theme-dark #familyModal .emp-field-grid-2 .fmf-input,
        body.theme-dark #familyModal .emp-field-grid-2 .fmf-select,
        body.theme-dark #familyModal .emp-field-grid .fmf-input,
        body.theme-dark #familyModal .emp-field-grid .fmf-select,
        body.theme-dark #familyModal .fmf-addr-select {
            background: var(--dlg-fill-field) !important;
            border: 1px solid rgba(145, 200, 255, 0.28) !important;
            border-radius: 8px !important;
            color: #ffffff !important;
            font-weight: 600 !important;
            font-size: 13px !important;
            min-height: 29px !important;
            padding: 4px 10px !important;
            box-shadow: inset 0 1px 0 rgba(200, 230, 255, 0.05) !important;
        }
        body.theme-dark #familyModal .fmf-input:focus,
        body.theme-dark #familyModal .fmf-select:focus,
        body.theme-dark #familyModal .emp-field-grid-3 .fmf-input:focus,
        body.theme-dark #familyModal .emp-field-grid-3 .fmf-select:focus,
        body.theme-dark #familyModal .fmf-addr-select:focus {
            border-color: rgba(165, 220, 255, 0.50) !important;
            background: #0c1a30 !important;
            box-shadow: 0 0 0 2px rgba(60, 140, 230, 0.14) !important;
        }
        body.theme-dark #familyModal .fmf-checkbox-card {
            background: var(--dlg-fill-field) !important;
            border: 1px solid rgba(145, 200, 255, 0.28) !important;
            color: #ffffff !important;
            box-shadow: none !important;
            border-radius: 8px !important;
            min-height: 29px !important;
        }
        body.theme-dark #familyModal .fmf-checkbox-text {
            color: var(--dlg-text) !important;
            font-size: 13px !important;
            font-weight: 600 !important;
        }
        body.theme-dark #familyModal .fmf-radio-row {
            background: var(--dlg-fill-field) !important;
            border: 1px solid rgba(145, 200, 255, 0.26) !important;
            box-shadow: none !important;
            border-radius: 10px !important;
        }
        body.theme-dark #familyModal .fmf-radio-row:hover {
            border-color: rgba(165, 220, 255, 0.42) !important;
            background: #12263e !important;
        }
        body.theme-dark #familyModal .fmf-radio-row:has(input:checked) {
            border-color: transparent !important;
            background-color: #1a3a5c !important;
            background-image: linear-gradient(#1a3a5c, #1a3a5c), var(--dlg-rim-hot) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow: inset 0 1px 0 rgba(210, 235, 255, 0.12) !important;
        }
        body.theme-dark #familyModal .fmf-radio-title {
            color: #ffffff !important;
            font-weight: 700 !important;
        }
        body.theme-dark #familyModal .fmf-radio-hint,
        body.theme-dark #familyModal .fmf-addr-alt-hint,
        body.theme-dark #familyModal #fmAgeDisplay {
            color: var(--dlg-text-soft) !important;
        }
        body.theme-dark #familyModal .fmf-addr-add-btn {
            background: var(--dlg-fill-field) !important;
            border: 1px solid rgba(145, 200, 255, 0.28) !important;
            color: #ffffff !important;
            border-radius: 8px !important;
            font-weight: 650 !important;
            box-shadow: none !important;
        }
        body.theme-dark #familyModal .fmf-addr-add-btn:hover {
            background: #12263e !important;
            border-color: rgba(165, 220, 255, 0.45) !important;
        }
        body.theme-dark #familyModal #fmSpouseDocBtn {
            background: #3f3f3f !important;
            color: #fff !important;
            border-color: #1a1a1a !important;
            border-radius: 8px !important;
        }
        body.theme-dark #familyModal .family-modal-foot .btn-outline {
            background: var(--dlg-fill-field) !important;
            color: var(--dlg-text) !important;
            border-color: rgba(145, 200, 255, 0.28) !important;
        }
        body.theme-dark #familyModal .family-modal-foot .btn-primary {
            background: #3f3f3f !important;
            color: #fff !important;
            border-color: #1a1a1a !important;
        }

        .emp-family-card {
            background: #f6f3ee; border: 1px solid #e7e1d8; border-radius: 14px;
            padding: 10px 14px 12px; margin-bottom: 8px;
        }
        .emp-family-card-head { display: flex; align-items: baseline; gap: 12px; }
        .emp-family-name { font-size: 15px; font-weight: 600; color: #0f172a; }
        .emp-family-meta { font-size: 12px; color: #64748b; }

        /* Familie-Tab: kompakte Kacheln (Walter 18.07.2026) */
        .fam-tile-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 10px;
            margin-bottom: 4px;
        }
        .fam-tile {
            display: flex; flex-direction: column; gap: 6px;
            padding: 12px 14px 10px;
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,.62);
            background: rgba(255,255,255,.42);
            box-shadow: 0 8px 22px rgba(60,55,48,.08), inset 0 1px 0 rgba(255,255,255,.55);
            backdrop-filter: blur(16px) saturate(140%);
            -webkit-backdrop-filter: blur(16px) saturate(140%);
            cursor: pointer;
            transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
            min-width: 0;
        }
        .fam-tile:hover {
            transform: translateY(-1px);
            border-color: rgba(63,63,63,.28);
            box-shadow: 0 12px 28px rgba(60,55,48,.12), inset 0 1px 0 rgba(255,255,255,.65);
        }
        .fam-tile-wide { grid-column: span 1; min-width: 0; }
        @media (min-width: 900px) {
            .fam-tile-wide { grid-column: span 2; max-width: 480px; }
        }
        .fam-tile-top {
            display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
        }
        .fam-tile-name {
            font-size: 14.5px; font-weight: 700; color: #1a1a1a;
            line-height: 1.25; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .fam-tile-meta {
            font-size: 12px; font-weight: 550; color: #8b8b8b;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .fam-tile-badges {
            display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
        }
        .fam-tile-badge {
            font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 999px;
            white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
        }
        .fam-tile-badge-permit { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
        .fam-tile-badge-ch { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
        .fam-tile-badge-warn { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; }
        .fam-tile-badge-addr { background: #efece5; color: #6b6152; border: 1px solid #ddd5c8; }
        .fam-tile-doc {
            background: rgba(255,255,255,.7); border: 1px solid #d4cfc4; border-radius: 8px;
            padding: 3px 8px; cursor: pointer; color: #526071;
            font-size: 11px; font-weight: 650; line-height: 1.2;
        }
        .fam-tile-doc:hover { border-color: #3f3f3f; color: #1a1a1a; }
        .fam-tile-doc-ok { background: #dcfce7; border-color: #86efac; color: #15803d; }
        .fam-tile-doc-danger { border-color: #fecaca; color: #b91c1c; }
        .fam-tile-foot {
            display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
            margin-top: 2px; padding-top: 8px;
            border-top: 1px solid rgba(120,110,95,.12);
        }
        .fam-tile-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
        .fam-tile-chip {
            background: rgba(255,255,255,.72); border: 1px solid #d8d2c6; border-radius: 999px;
            padding: 3px 9px; font-size: 11px; font-weight: 650; color: #3f3f3f;
            cursor: pointer; white-space: nowrap; max-width: 100%;
            overflow: hidden; text-overflow: ellipsis;
        }
        .fam-tile-chip:hover { border-color: #3f3f3f; }
        .fam-tile-chip.is-locked { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
        .fam-tile-zulage-btn {
            background: transparent; border: 1px dashed rgba(100,90,75,.35); border-radius: 8px;
            padding: 3px 9px; font-size: 11px; font-weight: 700; color: #8b8b8b;
            cursor: pointer; white-space: nowrap;
        }
        .fam-tile-zulage-btn:hover { border-color: #3f3f3f; color: #3f3f3f; background: rgba(255,255,255,.5); }
        body.theme-dark .fam-tile {
            border-radius: 14px !important;
            padding: 12px 14px 10px !important;
            /* Rim kommt global — kein Extra-Glow (Milch) */
        }
        body.theme-dark .fam-tile:hover {
            transform: translateY(-1px);
            box-shadow:
                0 0 0 1px rgba(145, 200, 255, 0.18),
                0 16px 34px rgba(0, 6, 18, 0.48),
                inset 0 1px 0 rgba(210, 235, 255, 0.18) !important;
        }
        body.theme-dark .fam-tile-name { color: #ffffff; font-size: 15px; }
        body.theme-dark .fam-tile-meta { color: var(--dlg-text-soft); }
        body.theme-dark .fam-tile-foot { border-top-color: rgba(140, 200, 255, 0.20); }
        body.theme-dark .fam-tile-chip {
            background: rgba(70, 130, 210, 0.22); border-color: rgba(145, 205, 255, 0.38); color: #ffffff;
        }
        body.theme-dark .fam-tile-zulage-btn {
            border-color: rgba(145, 205, 255, 0.40); color: var(--dlg-text-soft);
            border-style: dashed;
        }
        body.theme-dark .fam-tile-zulage-btn:hover {
            border-color: rgba(175, 225, 255, 0.60); color: #ffffff;
            background: rgba(70, 130, 210, 0.18);
        }
        body.theme-dark .fam-tile-doc {
            background: rgba(12, 26, 46, 0.65); border-color: rgba(160, 210, 255, 0.42); color: #ffffff;
        }
        body.theme-dark .fam-tile-badge-warn {
            background: rgba(180, 90, 40, 0.35); color: #ffd7b0; border-color: rgba(230, 140, 80, 0.45);
        }
        body.theme-dark .fam-tile-badge-ch {
            background: rgba(40, 120, 80, 0.35); color: #b8f0d0; border-color: rgba(90, 190, 140, 0.40);
        }
        body.theme-dark .fam-tile-badge-permit {
            background: rgba(90, 70, 160, 0.35); color: #ddd0ff; border-color: rgba(160, 140, 230, 0.40);
        }
        body.theme-dark .fam-tile-badge-addr {
            background: rgba(70, 90, 120, 0.35); color: #d0dde8; border-color: rgba(140, 170, 200, 0.35);
        }

        /* Walter-Vorgabe 27.05.2026: Sub-Datenfelder innerhalb der Familie-Card
           (z.B. Zulagen-Tabelle für Kinderzulagen) — Tabellen-Zellen mit
           weisser Background-Box + Border, damit sie nicht „weiss auf weiss"
           verschwinden. Einheitlicher Look mit MA-Maske. */
        .emp-family-card table.fm-subtable td,
        .emp-family-card .fm-subrow {
            background: #fff;
            border: 1px solid #e2ddd3;
            border-radius: 9px;
            padding: 5px 10px;
        }
        .emp-family-card table.fm-subtable {
            border-collapse: separate; border-spacing: 6px 4px;
            margin-top: 4px; width: 100%;
        }
        .emp-family-card table.fm-subtable th {
            font-size: 9.5px; font-weight: 700; color: #475569;
            text-transform: uppercase; letter-spacing: 0.06em;
            padding: 2px 10px; text-align: left;
        }
        body.theme-dark .emp-family-card {
            background: var(--dlg-glass-field) !important; border-color: #1e293b !important;
        }
        body.theme-dark .emp-family-card table.fm-subtable td,
        body.theme-dark .emp-family-card .fm-subrow {
            background: var(--dlg-glass) !important; border-color: var(--dlg-glass-border) !important;
        }

        /* ════════════════════════════════════════════════════════════════
           Walter-Vorgabe 27.05.2026: Programmweiter Erfassungsmasken-Stil
           (analog MA-Maske). JEDES Modal/Formular im Programm soll diesen
           Look haben: blauer Section-Streifen + graue Card + weisse
           Wert-Boxen mit border #94a3b8 + 4px-Ecken.
           Klassen-Konvention: .ma-modal-box  (Container — eckiger),
                               .ma-modal-head / .ma-modal-foot,
                               .ma-section    (= .emp-section-title-Look),
                               .ma-grid       (Wrapper grau, 1–4 Spalten),
                               .ma-field      (Label + Wert-Box),
                               .ma-input/.ma-select/.ma-textarea (Wert-Box).
        ════════════════════════════════════════════════════════════════ */
        .ma-modal-box {
            /* OneCrew-Standard (Walter 12.08.2026): warmer Verlauf statt Weiss. */
            background: linear-gradient(135deg, #f7f4ef 0%, #efebe3 48%, #faf8f5 100%); border-radius: 14px;
            width: min(1080px, calc(100vw - 40px)); max-height: 92vh;
            display: flex; flex-direction: column;
            box-shadow: 0 24px 48px rgba(0,0,0,0.25);
        }
        .ma-modal-box.narrow { width: min(720px, calc(100vw - 40px)); }
        .ma-modal-box.wide   { width: min(1280px, calc(100vw - 40px)); }
        .ma-modal-head {
            padding: 14px 20px 12px; border-bottom: 1px solid #e2e8f0;
            display: flex; align-items: center; justify-content: space-between;
        }
        .ma-modal-title { font-size: 15px; font-weight: 700; color: #0f172a; }
        .ma-modal-sub   { font-size: 11.5px; color: #64748b; margin-top: 1px; }
        .ma-modal-close {
            width: 28px; height: 28px; border-radius: 4px; border: none;
            background: #f1f5f9; cursor: pointer; font-size: 16px; color: #64748b;
            display: flex; align-items: center; justify-content: center;
        }
        .ma-modal-body { padding: 14px 20px; overflow-y: auto; flex: 1; }
        .ma-modal-foot {
            padding: 12px 20px; border-top: 1px solid #e2e8f0;
            display: flex; justify-content: flex-end; gap: 10px;
        }
        .ma-modal-foot .ma-foot-left { margin-right: auto; }

        /* Inputs in den Wert-Box-Karten innerhalb des Modals (analog
           emp-field-value): weiss auf grauer Card, kaum gerundet,
           leichte Border + Schatten. */
        .ma-grid .ma-input,
        .ma-grid .ma-select,
        .ma-grid .ma-textarea {
            background: #fff; border: 1px solid #e2ddd3; border-radius: 9px;
            padding: 4px 9px; min-height: 27px;
            font-size: 13px; color: #0f172a; font-weight: 500;
            font-family: inherit; outline: none;
            box-shadow: 0 1px 2px rgba(15,23,42,0.08);
            transition: border-color .12s, box-shadow .12s;
            width: 100%;
        }
        .ma-grid .ma-textarea { min-height: 60px; padding: 6px 9px; line-height: 1.4; resize: vertical; }
        .ma-grid .ma-input:hover,
        .ma-grid .ma-select:hover,
        .ma-grid .ma-textarea:hover { border-color: #1a1a1a; box-shadow: 0 2px 4px rgba(60,55,48,0.15); }
        .ma-grid .ma-input:focus,
        .ma-grid .ma-select:focus,
        .ma-grid .ma-textarea:focus { border-color: #1a1a1a; box-shadow: 0 0 0 3px rgba(60,55,48,0.15); }
        .ma-field { display: flex; flex-direction: column; gap: 2px; }
        .ma-field-label {
            font-size: 9.5px; font-weight: 700; color: #475569;
            text-transform: uppercase; letter-spacing: 0.06em;
            padding-left: 2px; line-height: 1.2;
        }
        .ma-field-label .opt { color: #94a3b8; font-weight: 500; text-transform: none; letter-spacing: 0; }
        /* Card-Wrapper analog .emp-field-grid */
        .ma-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 10px;
                     background: #f6f3ee; border: 1px solid #e7e1d8; border-radius: 14px;
                     padding: 9px 12px 11px; margin-bottom: 6px; }
        .ma-grid.cols-1 { grid-template-columns: 1fr; }
        .ma-grid.cols-2 { grid-template-columns: 1fr 1fr; }
        .ma-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

        body.theme-dark .ma-modal-box { background: var(--dlg-glass); }
        body.theme-dark .ma-modal-head,
        body.theme-dark .ma-modal-foot { border-color: var(--dlg-glass-border); }
        body.theme-dark .ma-modal-title { color: #f1f5f9; }
        body.theme-dark .ma-modal-sub { color: #94a3b8; }
        body.theme-dark .ma-modal-close { background: var(--dlg-glass-field); color: #cbd5e1; }
        body.theme-dark .ma-grid { background: var(--dlg-glass-field); border-color: #1e293b; }
        body.theme-dark .ma-grid .ma-input,
        body.theme-dark .ma-grid .ma-select,
        body.theme-dark .ma-grid .ma-textarea {
            background: var(--dlg-glass); border-color: var(--dlg-glass-border); color: #f1f5f9;
        }

        /* ── MA-Modals im neuen warmen Look (Walter 27.06.2026) ────────────
           Gilt für ALLE .ma-modal-box-Dialoge (Absenz, Bankverbindung, …):
           kein Blau — Sektions-Köpfe neutral, Feld-Boxen warm statt blau-grau
           (#e2e8f0), warmer Fokus. Analog Familien-Modal. */
        .ma-modal-box .emp-section-title {
            background: transparent !important;
            border-left: none !important;
            border-radius: 0 !important;
            color: #364152 !important;
            text-transform: none !important;
            letter-spacing: -.01em !important;
            font-size: 12px !important;
            font-weight: 760 !important;
            padding: 0 0 0 3px !important;
            margin: 14px 0 5px !important;
        }
        .ma-modal-box .ma-grid {
            background: #f6f3ee !important;
            border: 1px solid #e7e1d8 !important;
            border-radius: 14px !important;
        }
        .ma-modal-box .ma-input,
        .ma-modal-box .ma-select,
        .ma-modal-box .ma-textarea {
            border: 1px solid #e2ddd3 !important;
            border-radius: 9px !important;
        }
        .ma-modal-box .ma-input:focus,
        .ma-modal-box .ma-select:focus,
        .ma-modal-box .ma-textarea:focus {
            border-color: #c9bfb0 !important;
            box-shadow: 0 0 0 3px rgba(180,165,140,.14) !important;
        }

        .emp-no-selection {
            display: flex; align-items: center; justify-content: center;
            flex-direction: column; gap: 10px; height: 100%; color: #94a3b8;
        }
        .emp-no-selection svg { opacity: 0.3; }

        .empty-state {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; padding: 80px 32px; text-align: center;
        }
        .empty-icon {
            width: 64px; height: 64px; background: #f1f5f9; border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; margin-bottom: 16px;
        }
        .empty-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
        .empty-text { color: #64748b; font-size: 14px; max-width: 340px; line-height: 1.6; }

        /* ── CONTRACT PAGE (embedded styles) ───────────────────── */
        .contract-wrap { max-width: 100%; }
        .c-section {
            margin-bottom: 20px; padding: 20px 22px; border: 1px solid #e2e8f0;
            border-radius: 12px; background: white;
        }
        .c-section-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: #0f172a; }
        .c-grid { display: grid; grid-template-columns: 240px 1fr; gap: 10px 16px; align-items: center; }
        .c-grid label { font-weight: 500; font-size: 13.5px; color: #374151; }
        .c-grid input, .c-grid select, .c-grid textarea {
            width: 100%; padding: 8px 10px; font-size: 14px; font-family: inherit;
            border: 1.5px solid #e2e8f0; border-radius: 8px; background: white;
            outline: none; transition: all 0.2s; box-sizing: border-box;
        }
        .c-grid input:focus, .c-grid select:focus { border-color: #3f3f3f; box-shadow: 0 0 0 3px rgba(63,63,63,0.1); }
        .c-readonly {
            padding: 9px 10px; background: #f8fafc; border-radius: 8px;
            font-size: 14px; color: #374151; border: 1px solid #e2e8f0; min-height: 22px;
        }
        .c-top { display: grid; grid-template-columns: 1fr 360px; gap: 20px; }

        /* Vertragshistorie */
        .ch-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
        .ch-table th { padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.04em; color: #64748b;
            border-bottom: 2px solid #e2e8f0; }
        .ch-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
        .ch-active td { background: #f0fdf4; }
        .ch-past td { color: #64748b; }
        .ch-badge-active { background: #dcfce7; color: #16a34a; font-size: 11px;
            font-weight: 700; padding: 2px 8px; border-radius: 20px; }
        .ch-badge-past { background: #f1f5f9; color: #64748b; font-size: 11px;
            font-weight: 600; padding: 2px 8px; border-radius: 20px; }
        .c-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
        .c-btn {
            padding: 9px 18px; border: none; border-radius: 8px; cursor: pointer;
            font-size: 14px; font-weight: 600; font-family: inherit; transition: all 0.15s;
        }
        .c-btn-blue { background: #3f3f3f; color: white; }
        .c-btn-blue:hover { background: #1a1a1a; }
        .c-btn-orange { background: #f97316; color: white; }
        .c-btn-orange:hover { background: #ea580c; }
        .c-btn-gray { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
        .c-btn-gray:hover { background: #e2e8f0; }
        .c-status { margin-top: 12px; padding: 12px 14px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 13.5px; }
        .c-ok { background: #f0fdf4; border-color: #86efac; }
        .c-warn { background: #fef2f2; border-color: #fca5a5; }
        .c-info { background: #fffbeb; border-color: #fcd34d; }
        .txt-ok { color: #16a34a; font-weight: 600; }
        .txt-warn { color: #dc2626; font-weight: 600; }
        .txt-info { color: #d97706; font-weight: 600; }
        .txt-muted { color: #94a3b8; }
        .dropzone {
            border: 2px dashed #d1d5db; border-radius: 10px; padding: 24px;
            background: #f8fafc; text-align: center; cursor: pointer; transition: 0.2s;
        }
        .dropzone:hover, .dropzone.dragover { border-color: #3f3f3f; background: #f6f3ee; }
        .hidden { display: none !important; }

        /* ── SCROLLBAR ─────────────────────────────────────────── */
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

        /* ── Liquid Glass Prototype: Dashboard only ───────────────────────
           Rücknehmbar über Klassen .liquid-ui / .liquid-dashboard.
           Keine IDs, Handler oder Fetch-Logik werden verändert. */
        .liquid-ui {
            --liquid-cream-1: #f7f4ef;
            --liquid-cream-2: #efebe3;
            --liquid-glass: rgba(255, 255, 255, 0.36);
            --liquid-glass-strong: rgba(255, 255, 255, 0.58);
            --liquid-border: rgba(255, 255, 255, 0.68);
            --liquid-text: #3f3f3f;
            --liquid-muted: #686868;
            --liquid-shadow: 0 22px 70px rgba(70, 64, 55, 0.16);
            --liquid-shadow-strong: 0 28px 78px rgba(70, 64, 55, 0.24);
            --liquid-inset: inset 0 1px 1px rgba(255, 255, 255, 0.86), inset 0 -1px 2px rgba(255, 255, 255, 0.22);
        }
        .liquid-dashboard {
            position: relative;
            min-height: 100%;
            overflow: hidden;
            background:
                radial-gradient(circle at 58% 47%, rgba(255, 255, 255, 0.78), transparent 25%),
                radial-gradient(circle at 28% 50%, rgba(224, 218, 209, 0.42), transparent 36%),
                linear-gradient(135deg, var(--liquid-cream-1) 0%, var(--liquid-cream-2) 48%, #faf8f5 100%);
            color: var(--liquid-text);
        }
        .liquid-dashboard::before {
            content: "";
            position: absolute;
            inset: -10vh -8vw;
            pointer-events: none;
            opacity: .24;
            transform: none;
            background-image: url('img/liquid-glass-arches-reference.png');
            background-repeat: no-repeat;
            background-position: calc(50% + 10vw) center;
            background-size: 95% auto;
        }
        .liquid-dashboard::after {
            content: "";
            position: absolute;
            inset: -10vh -8vw;
            pointer-events: none;
            opacity: .18;
            background:
                linear-gradient(88deg, transparent 0 34%, rgba(80, 80, 80, 0.07) 34.2% 34.35%, transparent 34.6% 100%),
                linear-gradient(1deg, transparent 0 78%, rgba(80, 80, 80, 0.08) 78.1% 78.22%, transparent 78.45% 100%),
                linear-gradient(90deg, transparent 0 97.5%, rgba(80, 80, 80, 0.12) 97.55% 97.8%, transparent 98% 100%);
        }
        .liquid-dashboard > .page-head,
        .liquid-dashboard > .page-body {
            position: relative;
            z-index: 1;
        }
        /* Globale Sidebar nur noch auf dem Dashboard ausblenden (Walter 28.06.2026).
           Auf der Mitarbeiter-Seite zeigt jetzt dieselbe globale Sidebar wie überall
           — kein Springen mehr beim Seitenwechsel. */
        body.dashboard-shell-active .sidebar {
            display: none;
        }
        body.dashboard-shell-active .main {
            width: 100%;
            min-width: 0;
        }
        body.dashboard-shell-active .liquid-dashboard > .page-head {
            display: none !important;
        }
        body.dashboard-shell-active .liquid-dashboard > .page-body {
            padding-top: 26px !important;
        }
        .liquid-dashboard .liquid-home-top-left {
            position: fixed;
            z-index: 20;
            top: 24px;
            left: 28px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            pointer-events: auto;
        }
        .liquid-dashboard .liquid-branch-select {
            display: none;
        }
        .liquid-dashboard .liquid-branch-menu {
            position: relative;
        }
        .liquid-dashboard .liquid-branch-btn {
            width: 215px;
            height: 34px;
            border: 1px solid var(--liquid-border);
            border-radius: 15px;
            padding: 0 10px 0 14px;
            background: var(--liquid-glass);
            color: var(--liquid-muted);
            font: inherit;
            font-size: 12px;
            box-shadow: 0 22px 70px rgba(70, 64, 55, 0.16), var(--liquid-inset);
            backdrop-filter: blur(24px) saturate(132%);
            -webkit-backdrop-filter: blur(24px) saturate(132%);
            outline: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .liquid-dashboard .liquid-branch-btn span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .liquid-dashboard .liquid-branch-btn svg {
            width: 14px;
            height: 14px;
            flex: 0 0 auto;
        }
        .liquid-dashboard .liquid-branch-options {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 236px;
            border: 1px solid var(--liquid-border);
            border-radius: 22px;
            padding: 8px;
            background: rgba(255, 255, 255, 0.50);
            color: var(--liquid-text);
            box-shadow: 0 28px 78px rgba(70, 64, 55, 0.22), var(--liquid-inset);
            backdrop-filter: blur(30px) saturate(138%);
            -webkit-backdrop-filter: blur(30px) saturate(138%);
        }
        .liquid-dashboard .liquid-branch-menu.open .liquid-branch-options {
            display: grid;
            gap: 3px;
        }
        .liquid-dashboard .liquid-branch-option {
            height: 34px;
            border: 0;
            border-radius: 14px;
            padding: 0 10px;
            background: transparent;
            color: inherit;
            font: inherit;
            font-size: 13px;
            text-align: left;
            cursor: pointer;
            display: grid;
            grid-template-columns: 18px 1fr;
            align-items: center;
            gap: 8px;
        }
        .liquid-dashboard .liquid-branch-option:hover {
            background: rgba(255, 255, 255, 0.34);
        }
        .liquid-dashboard .liquid-branch-option.active {
            background: rgba(255, 255, 255, 0.58);
            box-shadow: inset 0 1px 1px rgba(255,255,255,.85);
            font-weight: 650;
        }
        .liquid-dashboard .liquid-branch-check {
            color: #6b7280;
            font-weight: 800;
        }
        .liquid-dashboard .liquid-home-user {
            position: fixed;
            z-index: 4;
            left: 28px;
            bottom: 24px;
            min-width: 230px;
            border: 1px solid rgba(255,255,255,.62);
            border-radius: 24px;
            padding: 12px 12px 12px 14px;
            background: rgba(255,255,255,.44);
            color: #4f4a43;
            display: flex;
            align-items: center;
            gap: 11px;
            box-shadow: 0 18px 54px rgba(74,55,34,.12), var(--liquid-inset);
            backdrop-filter: blur(22px) saturate(145%);
            -webkit-backdrop-filter: blur(22px) saturate(145%);
        }
        .liquid-dashboard .liquid-user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: linear-gradient(145deg, #5f6b73, #b9c0c3);
            color: white;
            font-weight: 800;
            flex-shrink: 0;
        }
        .liquid-dashboard .liquid-user-copy {
            min-width: 0;
            flex: 1;
        }
        .liquid-dashboard .liquid-user-name {
            font-size: 13px;
            font-weight: 750;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .liquid-dashboard .liquid-user-role {
            font-size: 11px;
            color: #7e766c;
            margin-top: 1px;
        }
        .liquid-dashboard .liquid-logout {
            width: 34px;
            height: 34px;
            border-radius: 14px;
            border: 1px solid rgba(185, 28, 28, .28);
            background: rgba(254,226,226,.42);
            color: #b91c1c;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .liquid-dashboard > .page-head {
            margin: 18px 24px 0;
            padding: 22px 24px !important;
            border: 1px solid var(--liquid-border);
            border-radius: 26px;
            background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.34));
            box-shadow: var(--liquid-shadow), var(--liquid-inset);
            backdrop-filter: blur(22px) saturate(155%);
            -webkit-backdrop-filter: blur(22px) saturate(155%);
        }
        .liquid-dashboard .page-title {
            font-size: 30px;
            letter-spacing: -0.035em;
            color: var(--liquid-text);
        }
        .liquid-dashboard .page-sub {
            color: var(--liquid-muted);
            font-size: 13px;
            margin-top: 6px;
        }
        .liquid-dashboard > .page-body {
            padding: 18px 24px 40px !important;
        }
        .liquid-dashboard .liquid-home-shell {
            position: relative;
            min-height: calc(100vh - 66px);
        }
        .liquid-dashboard .liquid-module-grid {
            position: absolute;
            top: 43%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: grid;
            grid-template-columns: repeat(5, 112px);
            gap: 12px;
            align-items: center;
            max-width: none;
            width: auto;
        }
        .liquid-dashboard .liquid-module-card {
            width: 112px;
            height: 136px;
            min-height: 136px;
            border: 1px solid var(--liquid-border);
            border-radius: 20px;
            background: var(--liquid-glass);
            box-shadow: var(--liquid-shadow), var(--liquid-inset);
            backdrop-filter: blur(24px) saturate(132%);
            -webkit-backdrop-filter: blur(24px) saturate(132%);
            color: #5f5f5f;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
        }
        .liquid-dashboard .liquid-module-card::before {
            content: "";
            position: absolute;
            top: 27px;
            left: 50%;
            width: 54px;
            height: 54px;
            border-radius: 19px;
            transform: translateX(-50%);
            background:
                radial-gradient(circle at 30% 22%, rgba(255,255,255,.28), transparent 32%),
                linear-gradient(145deg, rgba(128,128,128,.07), rgba(255,255,255,.04));
            border: 1px solid rgba(255,255,255,.18);
            box-shadow: inset 0 1px 1px rgba(255,255,255,.24), inset 0 -1px 2px rgba(255,255,255,.06), 0 14px 28px rgba(70,64,55,.035);
            backdrop-filter: blur(18px) saturate(120%);
            -webkit-backdrop-filter: blur(18px) saturate(120%);
            pointer-events: none;
        }
        .liquid-dashboard .liquid-module-card:hover {
            transform: translateY(-2px);
            background: var(--liquid-glass-strong);
            box-shadow: var(--liquid-shadow-strong), inset 0 1px 1px rgba(255, 255, 255, 0.9);
        }
        .liquid-dashboard .liquid-module-card[hidden] {
            display: none;
        }
        .liquid-dashboard .liquid-module-card svg {
            width: 43px;
            height: 43px;
            stroke-width: 1.85;
            color: rgba(92,92,92,.72);
            filter: drop-shadow(0 4px 8px rgba(255,255,255,.28));
            position: relative;
            z-index: 1;
        }
        /* Bild-Icon (Mitarbeiter-Sketch) im Dark-Mode: invertieren + screen,
           damit die Bleistift-Linien hell auf der dunklen Kachel erscheinen
           (multiply würde sie sonst schlucken). Walter 28.06.2026 */
        body.theme-dark .liquid-dashboard .liquid-module-card img {
            mix-blend-mode: screen !important;
            filter: invert(1) brightness(1.1);
        }
        .liquid-dashboard .liquid-module-card span {
            font-size: 13px;
            font-weight: 650;
            letter-spacing: 0;
            text-align: center;
            line-height: 1.18;
            position: relative;
            z-index: 1;
        }
        /* To-dos jetzt als Kachel + eigene Seite — Seiten-Panel ausgeblendet (Walter 04.07.2026) */
        .liquid-dashboard .liquid-todo-panel { display: none !important; }
        /* Badge-Marker auf der To-dos-Kachel */
        #dashTodoTile { position: relative; }
        /* Höhere Spezifität als „.liquid-module-card span { position:relative }",
           sonst würde das Badge als Flex-Element Icon+Text nach oben schieben
           (Walter-Bug 04.07.2026). */
        .liquid-dashboard .liquid-module-card span.liquid-todo-badge {
            position: absolute;
            top: 6px;
            right: 14px;
            min-width: 22px;
            height: 22px;
            padding: 0 6px;
            border-radius: 11px;
            background: #b91c1c;
            color: #fff;
            font-size: 12px;
            font-weight: 750;
            line-height: 22px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(150,30,30,0.35);
            z-index: 3;
        }
        /* ── To-dos: Liquid Glass wie MA-Maske (Walter 18.07.2026) ──
           Sketch-Papier bewusst verlassen — gleiche Tokens/Rim/Schatten
           wie Übersicht-Karten, damit ToDo nicht «fremd» wirkt. */
        #page-todos {
            padding: 12px 16px 16px;
            background:
                radial-gradient(ellipse 70% 50% at 85% -5%, rgba(255, 255, 255, 0.70) 0%, transparent 55%),
                radial-gradient(ellipse 55% 45% at 8% 100%, rgba(180, 165, 140, 0.14) 0%, transparent 55%),
                linear-gradient(160deg, #f6f3ee 0%, #efebe3 48%, #faf8f5 100%);
        }
        body.theme-dark #page-todos {
            background: transparent;
        }
        #page-todos .todo-paper {
            position: relative;
            min-height: calc(100vh - 48px);
            padding: 58px 22px 32px;
            color: #3f3f3f;
            background: transparent;
            border-radius: 0;
            overflow: visible;
        }
        body.theme-dark #page-todos .todo-paper {
            color: var(--dlg-text);
        }
        /* Alter Sketch-Rahmen + rauhe Filter: ausblenden */
        #page-todos .todo-frame { display: none !important; }
        #page-todos .todo-back {
            position: absolute; top: 18px; left: 22px; z-index: 3;
            background: transparent; border: none; cursor: pointer;
            color: #8b8b8b; font-size: 13px; font-weight: 600;
            letter-spacing: 0.3px; padding: 6px 4px;
        }
        #page-todos .todo-back:hover { color: #3f3f3f; }
        body.theme-dark #page-todos .todo-back { color: var(--dlg-text-muted); }
        body.theme-dark #page-todos .todo-back:hover { color: var(--dlg-text-strong); }

        /* PDF unter der reservierten #langSwitcher-Zone (y≥60) */
        #page-todos .todo-pdf {
            position: absolute; top: 62px; right: 22px; z-index: 3;
            background: #3f3f3f; color: #fff; border: none; cursor: pointer;
            font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
            padding: 7px 14px; border-radius: 12px;
            box-shadow: 0 6px 16px rgba(60, 55, 48, 0.18);
        }
        #page-todos .todo-pdf:hover { background: #1a1a1a; }
        body.theme-dark #page-todos .todo-pdf {
            background: #3f3f3f;
            color: #ffffff;
            border: 1px solid rgba(165, 215, 255, 0.28);
            box-shadow:
                0 4px 12px rgba(0, 4, 14, 0.35),
                inset 0 1px 0 rgba(235, 248, 255, 0.12);
        }
        body.theme-dark #page-todos .todo-pdf:hover {
            background: #2a2a2a;
        }

        /* Druck / PDF: nur die ToDo-Seite, Chrome ausblenden */
        /* Saubere, klassische Druck-/PDF-Ansicht der To-do-Liste (nicht der
           Sketch-Bildschirm). Am Bildschirm versteckt, nur beim Drucken sichtbar. */
        #todosPrintArea { display: none; }
        @media print {
            body * { visibility: hidden !important; }
            #todosPrintArea, #todosPrintArea * { visibility: visible !important; }
            #todosPrintArea {
                display: block !important; position: absolute; left: 0; top: 0; width: 100%;
                color: #111; font-family: 'Helvetica Neue', Arial, sans-serif;
            }
            /* margin:0 unterdrueckt die Browser-Kopf-/Fusszeile (Datum/URL/Seitenzahl)
               — Walter-Vorgabe 14.07.2026. Rand kommt als Padding auf den Container. */
            @page { size: portrait; margin: 0; }
            #todosPrintArea { padding: 14mm 14mm 16mm; box-sizing: border-box; }
        }
        #todosPrintArea .tp-head { border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 14px; }
/* ── Menuepunkte in der HR-Hub-Karte «Kuendigung / Zeugnisse»
   (Walter 15.07.2026): schlichte klickbare Zeilen, Liquid-Look. ── */
.kz-menu-item {
    display: block; text-align: left; width: 100%;
    background: none; border: none; padding: 4px 0; cursor: pointer;
    font-size: 13px; font-weight: 600; color: #3f3f3f;
    transition: color .15s ease;
}
.kz-menu-item:hover { color: #0f172a; text-decoration: underline; }
body.theme-dark .kz-menu-item { color: #d6d3cc; }
body.theme-dark .kz-menu-item:hover { color: #ffffff; }

/* ── Restaurant-Admin-Kacheln (Walter 15.07.2026, v5): wie die Modul-
   Kacheln der Startseite — Glas-Kachel, freigestelltes Sketch-Icon,
   Beschriftung darunter. Hover hebt sanft (Liquid-Regel 2-4px). ── */
.ra-tile-row {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;
    margin: 4px 0 22px;
}
/* Farbschema exakt wie die Startseiten-Modulkacheln (Walter 15.07.2026):
   Grundzustand cremig (36% Weiss ueber warmem Hintergrund), angewaehlt/
   Hover WEISS (58%) mit staerkerem Schatten — Werte = .liquid-ui-Tokens. */
.ra-tile {
    /* Masse exakt wie .liquid-module-card der Startseite (112x136, Icon 96).
       height fix — 2-Zeilen-Labels («Arbeits Aufforderung», «Face ID …»)
       dürfen die Kachel nicht höher machen (Walter 30.07.2026). */
    width: 112px;
    height: 136px;
    min-height: 136px;
    max-height: 136px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.68);
    border-radius: 20px;
    background: rgba(255,255,255,0.36);
    box-shadow: 0 22px 70px rgba(70,64,55,0.16),
                inset 0 1px 1px rgba(255,255,255,0.86), inset 0 -1px 2px rgba(255,255,255,0.22);
    backdrop-filter: blur(24px) saturate(132%);
    -webkit-backdrop-filter: blur(24px) saturate(132%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 6px 4px 6px; cursor: pointer;
    color: #3f3f3f; font-size: 11.5px; font-weight: 650; line-height: 1.15; text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    overflow: hidden;
}
.ra-tile:hover, .ra-tile:focus-visible {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.58);
    box-shadow: 0 28px 78px rgba(70,64,55,0.24), inset 0 1px 1px rgba(255,255,255,0.9);
}
/* Icon fuellt die Kachel fast aus (Walter 15.07.2026) — 96px wie Startseite */
.ra-tile img { width: 96px; height: 96px; flex: 0 0 96px; object-fit: contain; display: block; }
/* Label: immer Platz für 2 Zeilen — alle Kacheln gleich hoch */
.ra-tile > span {
    flex: 0 0 auto;
    min-height: calc(2 * 1.15em);
    max-height: calc(2 * 1.15em);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding: 0 2px;
}
/* Bewerbungsbogen: Motiv enger zugeschnitten → etwas groesser in der Kachel */
.ra-tile img[src*="bewerbungsbogen.png"] { width: 104px; height: 104px; }
body.theme-dark .ra-tile { background: rgba(255,255,255,0.08); color: #d6d3cc; }
body.theme-dark .ra-tile img { filter: invert(0.88) hue-rotate(180deg); }
/* Bewerbungsbogen-Icon 1:1 — nicht invertieren (Walter 28.07.2026). */
body.theme-dark .ra-tile img[src*="bewerbungsbogen.png"] { filter: none; }
/* Aufforderung-Icon 1:1 — ebenfalls nicht invertieren (Walter 30.07.2026). */
body.theme-dark .ra-tile img[src*="Aufforderung.png"] { filter: none; }

        /* OneCrew-Logo oben links auf allen Druck-Listen (Walter-Vorgabe 14.07.2026) */
        #todosPrintArea .tp-logo { display: block; height: 30px; width: auto; margin-bottom: 10px; }
        #todosPrintArea .tp-head h1 { font-size: 22px; margin: 0; font-weight: 800; letter-spacing: 0.3px; }
        #todosPrintArea .tp-meta { font-size: 12px; color: #444; margin-top: 3px; }
        #todosPrintArea .tp-h {
            font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
            margin: 18px 0 4px; padding-bottom: 3px; border-bottom: 1px solid #999;
        }
        #todosPrintArea .tp-h span { font-weight: 600; color: #666; }
        #todosPrintArea .tp-critical { color: #8a1010; border-bottom-color: #d99; }
        #todosPrintArea .tp-warning  { color: #8a5a10; border-bottom-color: #dcb37a; }
        #todosPrintArea .tp-info     { color: #1e3a5a; border-bottom-color: #a9bdd6; }
        #todosPrintArea .tp-tbl { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
        #todosPrintArea .tp-tbl td { padding: 5px 8px 5px 0; vertical-align: top; border-bottom: 1px solid #eee; font-size: 12px; }
        #todosPrintArea .tp-t { font-weight: 700; color: #111; width: 42%; }
        #todosPrintArea .tp-t.tp-crit { color: #b91c1c; }
        #todosPrintArea .tp-s { color: #444; }
        #todosPrintArea .tp-empty { color: #999; font-style: italic; }

        /* Sketch-Logo ersetzen durch ruhigen Seitentitel (wie page-title) */
        #page-todos .todo-logo {
            text-align: left; margin: 0 0 18px; position: relative; z-index: 2;
            padding: 0 2px;
        }
        #page-todos .todo-logo img { display: none !important; }
        #page-todos .todo-logo::after {
            content: 'To do';
            display: block;
            font-size: 22px; font-weight: 750; letter-spacing: -0.02em;
            color: #2f2f2f; line-height: 1.2;
        }
        body.theme-dark #page-todos .todo-logo::after { color: var(--dlg-text-strong); }

        #page-todos .todo-cols {
            position: relative; z-index: 2;
            display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px; align-items: stretch;
            max-width: 1320px; margin: 0 auto;
        }
        /* Spalten = gleiche Glas-Karten wie MA-Übersicht */
        #page-todos .todo-col {
            min-width: 0;
            overflow: hidden;
            padding: 14px 16px 16px;
            border-radius: 16px;
            border: 1px solid transparent;
            background-color: #f4f0e8;
            background-image:
                linear-gradient(160deg, #fffcf8 0%, #f7f3eb 42%, #efe9df 78%, #e8e1d6 100%),
                linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(210,200,185,0.55) 35%, rgba(120,110,95,0.22) 62%, rgba(255,255,255,0.88) 100%);
            background-origin: padding-box, border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 0 0 1px rgba(90, 80, 65, 0.10),
                0 0 18px rgba(90, 80, 65, 0.06),
                0 4px 12px rgba(60, 55, 48, 0.08),
                0 16px 36px rgba(60, 55, 48, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.85),
                inset 0 -1px 0 rgba(90, 80, 65, 0.06);
        }
        body.theme-dark #page-todos .todo-col {
            background-color: var(--dlg-fill) !important;
            background-image: var(--dlg-fill-grad), var(--dlg-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow: var(--dlg-shadow) !important;
            color: var(--dlg-text);
        }

        #page-todos .todo-col-head {
            display: flex; align-items: center; gap: 10px;
            padding: 0 2px 10px;
            margin-bottom: 4px;
            border-bottom: 1px solid rgba(90, 80, 65, 0.12);
            position: relative;
        }
        body.theme-dark #page-todos .todo-col-head {
            border-bottom-color: rgba(165, 215, 255, 0.14);
        }
        #page-todos .todo-col-head::after { display: none; }
        #page-todos .tch-ico {
            width: 26px; height: 26px; flex: none;
            color: #646464;
        }
        #page-todos .tch-ico circle[fill],
        #page-todos .tch-ico [fill]:not([fill="none"]) { fill: currentColor; }
        #page-todos .tch-ico circle,
        #page-todos .tch-ico line { stroke: currentColor; }
        body.theme-dark #page-todos .tch-ico { color: var(--dlg-text-soft); }
        #page-todos .todo-col[data-sev="critical"] .tch-ico { color: #b91c1c; }
        body.theme-dark #page-todos .todo-col[data-sev="critical"] .tch-ico { color: #fca5a5; }
        #page-todos .tch-label {
            flex: 1; font-size: 15px; font-weight: 720; letter-spacing: -0.01em;
            font-family: inherit; color: #2f2f2f;
        }
        body.theme-dark #page-todos .tch-label { color: var(--dlg-text-strong); }
        #page-todos .tch-cnt {
            font-size: 12px; font-weight: 700; color: #8b8b8b;
            min-width: 22px; height: 22px; line-height: 22px;
            text-align: center; border-radius: 999px;
            background: rgba(63, 63, 63, 0.08);
        }
        body.theme-dark #page-todos .tch-cnt {
            color: var(--dlg-text-soft);
            background: rgba(80, 140, 210, 0.18);
        }
        #page-todos .todo-col-body { padding-top: 4px; }

        #page-todos .td-row {
            display: grid; grid-template-columns: 28px minmax(0,1fr) 22px;
            align-items: center; gap: 10px;
            padding: 10px 8px; cursor: pointer;
            position: relative;
            border-radius: 10px;
            border-bottom: 1px solid rgba(90, 80, 65, 0.08);
            transition: background .15s ease;
        }
        #page-todos .td-row:last-child { border-bottom: none; }
        #page-todos .td-row::after { display: none; }
        body.theme-dark #page-todos .td-row {
            border-bottom-color: rgba(165, 215, 255, 0.08);
        }
        #page-todos .td-row:hover {
            background: rgba(63, 63, 63, 0.05);
        }
        body.theme-dark #page-todos .td-row:hover {
            background: rgba(80, 140, 210, 0.12);
        }
        #page-todos .td-check {
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: #8b8b8b;
        }
        #page-todos .td-check svg { width: 20px; height: 20px; display: block; }
        #page-todos .td-check circle { stroke: currentColor; fill: none; }
        body.theme-dark #page-todos .td-check { color: var(--dlg-text-muted); }
        #page-todos .td-text { min-width: 0; overflow: hidden; }
        #page-todos .td-title {
            display: block;
            font-size: 13.5px; color: #2f2f2f; line-height: 1.3;
            font-family: inherit; font-weight: 650;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        body.theme-dark #page-todos .td-title { color: var(--dlg-text-strong); }
        /* Kritische Punkte in ROTER Schrift (Walter-Vorgabe 12.07.2026) */
        #page-todos .td-title.td-crit { color: #b91c1c; font-weight: 700; }
        body.theme-dark #page-todos .td-title.td-crit { color: #fca5a5; }
        #page-todos .td-sub { display: block; font-size: 11.5px; color: #8b8b8b; margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        body.theme-dark #page-todos .td-sub { color: var(--dlg-text-muted); }
        #page-todos .td-arrow {
            display: flex; align-items: center; justify-content: center;
            color: #8b8b8b; opacity: 0.7;
        }
        #page-todos .td-arrow svg { width: 16px; height: 16px; display: block; }
        #page-todos .td-arrow path { stroke: currentColor; fill: none; }
        body.theme-dark #page-todos .td-arrow { color: var(--dlg-text-muted); }
        #page-todos .todo-empty {
            padding: 20px 8px; color: #8b8b8b; font-size: 13px;
            font-family: inherit;
        }
        body.theme-dark #page-todos .todo-empty { color: var(--dlg-text-muted); }
        @media (max-width: 900px) {
            #page-todos .todo-cols { grid-template-columns: 1fr; }
        }
        .liquid-dashboard .liquid-todo-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 8px 10px;
            color: #5a554f;
            font-size: 16px;
            font-weight: 750;
        }
        .liquid-dashboard .liquid-more {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.55);
            background: rgba(255,255,255,.32);
            color: #8b8378;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }
        .liquid-dashboard .liquid-legacy-dashboard {
            display: none;
        }
        .liquid-dashboard .liquid-todo-panel #dashAlertsContainer {
            display: flex;
            flex-direction: column;
            gap: 2px;
            max-height: calc(min(560px, 100vh - 150px) - 58px);
            overflow-y: auto;
            padding-right: 3px;
        }
        .liquid-dashboard .liquid-todo-row {
            min-height: 42px;
            border-radius: 18px;
            display: grid;
            grid-template-columns: 24px minmax(0, 1fr) 14px;
            gap: 10px;
            align-items: center;
            padding: 7px 10px;
            color: #666;
            font-size: 11px;
            background: transparent;
            border: 1px solid transparent;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            cursor: pointer;
            transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
        }
        .liquid-dashboard .liquid-todo-row:hover {
            transform: translateY(-2px);
            background: rgba(255,255,255,.38);
            border-color: rgba(255,255,255,.42);
            box-shadow: 0 12px 30px rgba(70, 64, 55, 0.10), var(--liquid-inset);
        }
        .liquid-dashboard .liquid-todo-row > span:nth-child(2) {
            min-width: 0;
        }
        .liquid-dashboard .liquid-todo-row .liquid-todo-title {
            font-size: 12px;
            font-weight: 620;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Kritische Punkte in ROTER Schrift (Walter-Vorgabe 12.07.2026). */
        .liquid-dashboard .liquid-todo-row .liquid-todo-title.liquid-todo-crit {
            color: #b91c1c;
            font-weight: 700;
        }
        body.theme-dark .liquid-dashboard .liquid-todo-row .liquid-todo-title.liquid-todo-crit {
            color: #f87171;
        }
        .liquid-dashboard .liquid-todo-row .liquid-todo-sub {
            font-size: 10.5px;
            color: #8c867c;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* To-do-Wichtigkeitsstufen (Kritisch offen, Achtung/Info eingeklappt) — Walter 04.07.2026 */
        .liquid-dashboard .liquid-todo-sev { margin-bottom: 6px; }
        .liquid-dashboard .liquid-todo-sev-head {
            display: flex; align-items: center; gap: 11px;
            padding: 12px 12px; cursor: pointer; border-radius: 16px;
            background: rgba(255,255,255,.30); border: 1px solid rgba(255,255,255,.42);
            transition: background .18s ease;
        }
        .liquid-dashboard .liquid-todo-sev-head:hover { background: rgba(255,255,255,.48); }
        .liquid-dashboard .liquid-todo-sev-head .lts-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
        .liquid-dashboard .liquid-todo-sev-head .liquid-todo-sev-label {
            font-size: 13px; font-weight: 720; text-transform: uppercase; letter-spacing: 0.4px;
        }
        .liquid-dashboard .liquid-todo-sev-head .ltg-count {
            font-size: 11.5px; font-weight: 700; color: #646464;
            background: rgba(60,55,48,0.08); border-radius: 11px; padding: 1px 9px; flex-shrink: 0;
        }
        .liquid-dashboard .liquid-todo-sev-head .ltg-chevron { color: #b3a99a; font-size: 16px; flex-shrink: 0; transition: transform .2s ease; }
        .liquid-dashboard .liquid-todo-sev.open .ltg-chevron { transform: rotate(90deg); }
        .liquid-dashboard .liquid-todo-sev-body { display: none; padding: 6px 0 4px 4px; }
        .liquid-dashboard .liquid-todo-sev.open .liquid-todo-sev-body { display: block; }

        /* To-do-Hauptgruppen (ausklappbar) — Walter 04.07.2026 */
        .liquid-dashboard .liquid-todo-group { margin-bottom: 2px; }
        .liquid-dashboard .liquid-todo-group-head {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 10px; cursor: pointer; border-radius: 16px;
            transition: background .18s ease;
        }
        .liquid-dashboard .liquid-todo-group-head:hover { background: rgba(255,255,255,.42); }
        .liquid-dashboard .liquid-todo-group-head .ltg-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
        .liquid-dashboard .liquid-todo-group-head .liquid-todo-title {
            font-size: 13.5px; font-weight: 680; color: #3f3f3f;
        }
        .liquid-dashboard .liquid-todo-group-head .ltg-count {
            font-size: 11.5px; font-weight: 700; color: #646464;
            background: rgba(60,55,48,0.08); border-radius: 11px; padding: 1px 9px; flex-shrink: 0;
        }
        .liquid-dashboard .liquid-todo-group-head .ltg-chevron {
            color: #b3a99a; font-size: 16px; flex-shrink: 0;
            transition: transform .2s ease;
        }
        .liquid-dashboard .liquid-todo-group.open .ltg-chevron { transform: rotate(90deg); }
        .liquid-dashboard .liquid-todo-group-body { display: none; padding: 2px 0 8px 14px; }
        .liquid-dashboard .liquid-todo-group.open .liquid-todo-group-body { display: block; }
        .liquid-dashboard #dashWageAdjustBanner > * {
            border-radius: 20px !important;
            background: rgba(255, 244, 205, .62) !important;
            border-color: rgba(234, 179, 8, .42) !important;
            box-shadow: 0 14px 34px rgba(120, 82, 20, .10), var(--liquid-inset) !important;
            backdrop-filter: blur(18px) saturate(140%);
            -webkit-backdrop-filter: blur(18px) saturate(140%);
        }
        .liquid-dashboard #dashSeverityRow {
            gap: 14px !important;
            margin-bottom: 16px !important;
        }
        .liquid-dashboard #dashSeverityRow button,
        .liquid-dashboard #dashFilterRow button,
        .liquid-dashboard #dashAlertsContainer .card,
        .liquid-dashboard #dashAlertsContainer [style*="border-radius"] {
            background: linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,255,255,.34)) !important;
            border: 1px solid rgba(255,255,255,.58) !important;
            color: var(--liquid-text) !important;
            box-shadow: 0 16px 42px rgba(74, 55, 34, .10), var(--liquid-inset) !important;
            backdrop-filter: blur(20px) saturate(150%);
            -webkit-backdrop-filter: blur(20px) saturate(150%);
        }
        .liquid-dashboard #dashSeverityRow button {
            min-height: 88px;
            border-radius: 24px !important;
            padding: 16px 18px !important;
            transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
        }
        .liquid-dashboard #dashSeverityRow button:hover,
        .liquid-dashboard #dashFilterRow button:hover {
            transform: translateY(-1px);
            border-color: rgba(255,255,255,.82) !important;
            box-shadow: 0 20px 54px rgba(74, 55, 34, .14), var(--liquid-inset) !important;
        }
        .liquid-dashboard #dashSeverityRow button > div:first-child {
            font-size: 34px !important;
            letter-spacing: -0.04em;
            color: #3a3125;
        }
        .liquid-dashboard #dashSeverityRow button > div:last-child {
            color: #6b6258 !important;
            font-size: 12px !important;
        }
        .liquid-dashboard #dashFilterRow {
            gap: 8px !important;
            margin-bottom: 16px !important;
        }
        .liquid-dashboard #dashFilterRow button {
            border-radius: 999px !important;
            padding: 7px 12px !important;
            font-size: 12px !important;
        }
        .liquid-dashboard #dashAlertsContainer > div {
            margin-bottom: 18px !important;
        }
        .liquid-dashboard #dashAlertsContainer h2 {
            color: #4e3d26 !important;
            letter-spacing: .08em !important;
        }
        .liquid-dashboard #dashAlertsContainer [onclick] {
            border-radius: 18px !important;
            padding: 12px 16px !important;
            transition: transform .14s ease, box-shadow .14s ease;
        }
        .liquid-dashboard #dashAlertsContainer [onclick]:hover {
            transform: translateY(-1px);
        }

        /* Dashboard Dark = Mockup elevated Liquid Glass (Walter 18.07.2026) */
        body.theme-dark .liquid-ui {
            --liquid-glass: var(--dlg-glass);
            --liquid-glass-strong: var(--dlg-glass-strong);
            --liquid-border: var(--dlg-glass-border);
            --liquid-text: var(--dlg-text-strong);
            --liquid-muted: var(--dlg-text-soft);
            --liquid-shadow: var(--dlg-shadow);
            --liquid-inset: inset 0 1px 0 var(--dlg-glass-inner);
        }
        body.theme-dark .liquid-dashboard {
            background: var(--dlg-bg);
            color: var(--liquid-text);
        }
        body.theme-dark .liquid-dashboard::before {
            opacity: .18;
            background-image: url('img/liquid-glass-arches-reference.png');
            background-repeat: no-repeat;
            background-position: calc(50% + 10vw) center;
            background-size: 95% auto;
            filter: invert(1) brightness(.85) contrast(1.05);
            mix-blend-mode: screen;
        }
        body.theme-dark .liquid-dashboard > .page-head,
        body.theme-dark .liquid-dashboard #dashSeverityRow button,
        body.theme-dark .liquid-dashboard #dashFilterRow button,
        body.theme-dark .liquid-dashboard #dashAlertsContainer .card,
        body.theme-dark .liquid-dashboard #dashAlertsContainer [style*="border-radius"] {
            background: var(--dlg-glass) !important;
            border-color: var(--liquid-border) !important;
            color: var(--liquid-text) !important;
            box-shadow: var(--liquid-shadow), var(--liquid-inset) !important;
            backdrop-filter: blur(18px) saturate(130%);
            -webkit-backdrop-filter: blur(18px) saturate(130%);
        }
        body.theme-dark .liquid-dashboard .page-title,
        body.theme-dark .liquid-dashboard #dashSeverityRow button > div:first-child {
            color: var(--liquid-text) !important;
        }
        body.theme-dark .liquid-dashboard .page-sub,
        body.theme-dark .liquid-dashboard #dashSeverityRow button > div:last-child {
            color: var(--liquid-muted) !important;
        }
        body.theme-dark .liquid-dashboard #dashAlertsContainer h2 {
            color: var(--dlg-text-soft) !important;
        }
        body.theme-dark .liquid-dashboard .liquid-module-card {
            background: var(--dlg-glass);
            border-color: var(--dlg-glass-border);
            color: var(--liquid-text);
            box-shadow: var(--dlg-shadow);
        }
        body.theme-dark .liquid-dashboard .liquid-todo-panel {
            background: var(--dlg-glass);
            border-color: var(--dlg-glass-border);
            box-shadow: var(--dlg-shadow), var(--liquid-inset);
        }
        body.theme-dark .liquid-dashboard .liquid-module-card:hover {
            background: rgba(255,255,255,.12);
        }
        body.theme-dark .liquid-dashboard .liquid-module-card svg,
        body.theme-dark .liquid-dashboard .liquid-module-card span,
        body.theme-dark .liquid-dashboard .liquid-todo-head {
            color: var(--dlg-text-strong);
        }
        body.theme-dark .liquid-dashboard .liquid-module-card::before {
            background:
                radial-gradient(circle at 30% 22%, rgba(255,255,255,.14), transparent 32%),
                linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
            border-color: rgba(255,255,255,.10);
            box-shadow: inset 0 1px 1px rgba(255,255,255,.12), inset 0 -1px 2px rgba(255,255,255,.04), 0 14px 30px rgba(0,0,0,.10);
        }
        body.theme-dark .liquid-dashboard .liquid-module-card svg {
            color: rgba(235,235,235,.88);
            filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
        }
        body.theme-dark .liquid-dashboard .liquid-todo-row {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
            color: var(--dlg-text);
        }
        body.theme-dark .liquid-dashboard .liquid-todo-row:hover {
            background: rgba(255,255,255,.10);
            border-color: var(--dlg-glass-border);
            box-shadow: 0 12px 30px rgba(0,0,0,.16), var(--liquid-inset);
        }
        body.theme-dark .liquid-dashboard .liquid-todo-row .liquid-todo-sub {
            color: var(--dlg-text-soft);
        }
        body.theme-dark .liquid-dashboard .liquid-branch-btn,
        body.theme-dark .liquid-dashboard .liquid-branch-options,
        body.theme-dark .liquid-dashboard .liquid-home-user {
            background: var(--dlg-glass-strong);
            border-color: var(--dlg-glass-border);
            color: var(--dlg-text-strong);
            box-shadow: var(--dlg-shadow), var(--liquid-inset);
            backdrop-filter: blur(18px) saturate(130%);
            -webkit-backdrop-filter: blur(18px) saturate(130%);
        }
        body.theme-dark .liquid-dashboard .liquid-branch-option:hover {
            background: rgba(255,255,255,.10);
        }
        body.theme-dark .liquid-dashboard .liquid-branch-option.active {
            background: var(--dlg-active);
            color: var(--dlg-active-text);
        }
        body.theme-dark .liquid-dashboard .liquid-user-role {
            color: var(--dlg-text-soft);
        }

        /* ══ Auswahl in Listen klar sichtbar (Walter 02.08.2026) ══
           War zu blass (rgba 0.13) — auf manchen Monitoren unsichtbar.
           Jetzt: warmer Kohle-Hintergrund + linker Rand + fette Schrift.
           Gilt: Mitarbeiter, Verträge/Dok-Struktur, Lohnlauf Definitiv+Akonto. */
        .emp-list-item.active,
        .dokstruktur-row.active,
        .lohn-emp-active,
        .lohn-emp-row.lohn-emp-active,
        #page-mitarbeiter.liquid-employee .emp-list-item.active,
        #page-mitarbeiter.liquid-employee .liquid-employee-row-active {
            background: #ddd5c8 !important;
            border-left: 3px solid #3f3f3f !important;
            box-shadow: inset 0 0 0 1px rgba(60,55,48,0.10) !important;
            color: #000 !important;
            font-weight: 700;
        }
        .emp-list-item.active,
        #page-mitarbeiter.liquid-employee .emp-list-item.active {
            opacity: 1 !important;   /* Inaktiv-Zeilen haben inline opacity:0.65 */
            padding-left: 11px !important;
        }
        .lohn-emp-row.lohn-emp-active { padding-left: 11px !important; }
        .emp-list-item.active .emp-list-name,
        #page-mitarbeiter.liquid-employee .emp-list-item.active .emp-list-name,
        .lohn-emp-active .lohn-emp-name,
        .lohn-emp-row.lohn-emp-active .lohn-emp-name,
        .dokstruktur-row.active {
            color: #000 !important;
            font-weight: 800 !important;
        }
        .emp-list-item.active .emp-list-nr,
        .lohn-emp-active .lohn-emp-nr { color: #3f3f3f !important; }
        body.theme-dark .emp-list-item.active,
        body.theme-dark .dokstruktur-row.active,
        body.theme-dark .lohn-emp-active,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-list-item.active,
        body.theme-dark #page-mitarbeiter.liquid-employee .liquid-employee-row-active {
            background: var(--dlg-active) !important;
            border-left-color: transparent !important;
            color: var(--dlg-active-text) !important;
            box-shadow: inset 0 1px 0 var(--dlg-glass-inner);
        }
        body.theme-dark .emp-list-item.active .emp-list-name,
        body.theme-dark #page-mitarbeiter.liquid-employee .emp-list-item.active .emp-list-name,
        body.theme-dark .lohn-emp-active .lohn-emp-name {
            color: var(--dlg-active-text) !important; font-weight: 800 !important;
        }

        /* ══ DARK MOCKUP UNIFY (Walter 18.07.2026) ══
           Letzte Schicht: Rest-Screens (Admin, HR-Hub, Perioden, Import)
           auf elevated Liquid Glass — ohne .ls-wrap anzutasten. */
        body.theme-dark .card-hd {
            border-bottom-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text-strong);
        }
        body.theme-dark .card-hd-title { color: var(--dlg-text-strong) !important; }
        body.theme-dark .card-hd-sub { color: var(--dlg-text-soft) !important; }
        body.theme-dark .btn-ghost {
            background: rgba(255,255,255,.06) !important;
            color: var(--dlg-text) !important;
            border-color: var(--dlg-glass-border) !important;
        }
        body.theme-dark .btn-ghost:hover {
            background: rgba(255,255,255,.12) !important;
            color: var(--dlg-text-strong) !important;
        }
        body.theme-dark .emp-search-input,
        body.theme-dark .dok-search,
        body.theme-dark input[type="search"] {
            background: var(--dlg-glass-field) !important;
            border-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text-strong) !important;
        }
        body.theme-dark .page-head {
            background: transparent !important;
        }
        body.theme-dark #page-lohn .card,
        body.theme-dark #page-lohnlauf .card,
        body.theme-dark #page-perioden .card,
        body.theme-dark #page-admin-hub .card,
        body.theme-dark #page-hr-hub .card,
        body.theme-dark #page-fibu .card,
        body.theme-dark #page-vertraege .card {
            background: var(--dlg-glass) !important;
            border-color: var(--dlg-glass-border) !important;
            box-shadow: var(--dlg-shadow) !important;
            backdrop-filter: blur(16px) saturate(130%);
            -webkit-backdrop-filter: blur(16px) saturate(130%);
        }
        body.theme-dark .lqsel-btn {
            background: var(--dlg-glass-field) !important;
            border-color: var(--dlg-glass-border) !important;
            color: var(--dlg-text-strong) !important;
        }
        body.theme-dark .lqsel-panel {
            background: rgba(32, 44, 60, 0.96) !important;
            border-color: var(--dlg-glass-border) !important;
            box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 var(--dlg-glass-inner) !important;
            backdrop-filter: blur(22px) saturate(140%);
            -webkit-backdrop-filter: blur(22px) saturate(140%);
        }
        body.theme-dark .lqsel-opt { color: var(--dlg-text) !important; }
        body.theme-dark .lqsel-opt:hover,
        body.theme-dark .lqsel-opt.active {
            background: var(--dlg-active) !important;
            color: var(--dlg-active-text) !important;
        }


        /* ── Nachtarbeit-Karte (Walter 19.07.2026) ──
           Z1: Badge · Nächte · ⋮
           Z2: Ausgestellt · gültig bis
           Z3: Warn-Chips
           Z4: Actions unten fix — Kartenhöhe unverändert */
        .nw-card-body { padding: 0; box-sizing: border-box; }
        .nw-layout {
            display: flex;
            flex-direction: column;
            gap: 3px;
            flex: 1 1 auto;
            min-height: 0;
            height: 100%;
            justify-content: flex-start;
        }
        .nw-row1,
        .nw-row2,
        .nw-row3,
        .nw-row4 {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap;
            min-width: 0;
            flex: 0 0 auto;
        }
        .nw-row1 { gap: 8px; }
        .nw-row2 { gap: 6px; flex-wrap: wrap; }
        .nw-row3 { gap: 5px; }
        /* Schmalere Nachtarbeit-Karte: Aktions-Buttons umbrechen */
        .nw-row4.nw-actions {
            margin-top: auto; /* Buttons immer am Kartenboden */
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 5px;
        }
        .nw-col-menu {
            margin-left: auto;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
        }
        .nw-duty-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .nw-duty-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .nw-duty-on {
            background: rgba(220, 38, 38, 0.08);
            color: #9f1239;
            border: 1px solid rgba(244, 63, 94, 0.28);
        }
        .nw-duty-on .nw-duty-dot { background: #e11d48; }
        /* Pflicht besteht, Nachweise aber vollständig — ruhiges Grün, kein Alarm. */
        .nw-duty-met {
            background: rgba(22, 163, 74, 0.09);
            color: #166534;
            border: 1px solid rgba(34, 197, 94, 0.28);
        }
        .nw-duty-met .nw-duty-dot { background: #16a34a; }
        .nw-duty-off {
            background: rgba(22, 163, 74, 0.09);
            color: #166534;
            border: 1px solid rgba(34, 197, 94, 0.28);
        }
        .nw-duty-off .nw-duty-dot { background: #16a34a; }
        .nw-duty-count {
            font-size: 12px;
            font-weight: 650;
            color: #3f3f3f;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .nw-duty-count-on { color: #9f1239; }
        .nw-dotsep {
            color: #c4bdb2;
            font-weight: 600;
            flex: 0 0 auto;
        }
        .nw-dates {
            min-width: 0;
            flex: 1 1 auto;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #57534e;
            line-height: 1.25;
        }
        .nw-row2 .nw-dates {
            /* Eigene Zeile: Daten vollständig lesbar, kein Abschneiden durch Badge */
            white-space: nowrap;
        }
        .nw-inline-lbl { color: #8b8b8b; font-weight: 550; }
        .nw-inline-val { color: #3f3f3f; font-weight: 650; }
        .nw-inline-muted { color: #8b8b8b; font-style: italic; font-weight: 500; }
        .nw-date-ok { color: #166534 !important; }
        .nw-date-expired { color: #9f1239 !important; }
        .nw-date-tag {
            font-size: 10.5px;
            font-weight: 700;
            color: #9f1239;
        }
        .nw-dates-empty { font-style: italic; }
        .nw-warns {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            align-items: center;
            min-width: 0;
            flex: 1 1 auto;
            min-height: 0;
        }
        .nw-warns:empty { display: none; }
        .nw-warn-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 10.5px;
            font-weight: 650;
            white-space: nowrap;
            color: #9f1239;
            background: rgba(244, 63, 94, 0.08);
            border: 1px solid rgba(244, 63, 94, 0.22);
        }
        .nw-warn-chip::before {
            content: '';
            width: 5px; height: 5px;
            border-radius: 50%;
            background: #e11d48;
            flex-shrink: 0;
        }
        .nw-warn-chip-sm { font-size: 10px; padding: 1px 7px; }
        .nw-ok-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 10.5px;
            font-weight: 650;
            white-space: nowrap;
            color: #166534;
            background: rgba(22, 163, 74, 0.09);
            border: 1px solid rgba(34, 197, 94, 0.28);
        }
        .nw-ok-chip::before {
            content: '';
            width: 5px; height: 5px;
            border-radius: 50%;
            background: #16a34a;
            flex-shrink: 0;
        }
        .nw-actions {
            display: flex;
            gap: 5px;
            flex-wrap: nowrap;
            align-items: center;
            flex: 0 0 auto;
        }
        .nw-act-btn {
            background: rgba(255,255,255,0.55);
            border: 1px solid rgba(90,80,65,0.14);
            border-radius: 8px;
            padding: 2px 7px;
            cursor: pointer;
            color: #525252;
            font-size: 10.5px;
            font-weight: 600;
            white-space: nowrap;
            line-height: 1.25;
        }
        .nw-act-btn:hover { background: rgba(255,255,255,0.85); }
        .nw-act-btn.nw-act-view {
            background: rgba(63,63,63,0.06);
            border-color: rgba(63,63,63,0.12);
            color: #3f3f3f;
        }
        .nw-edit {
            display: none;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .nw-edit-label {
            font-size: 11px;
            font-weight: 650;
            color: #8b8b8b;
        }
        .nw-edit-input {
            width: auto;
            min-width: 130px;
            padding: 4px 8px;
            border: 1px solid #e5e0d6;
            border-radius: 8px;
            font-size: 12.5px;
            background: #fff;
        }
        .nw-edit-save {
            background: #3f3f3f;
            border: 0;
            border-radius: 10px;
            padding: 5px 12px;
            cursor: pointer;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
        }
        .nw-edit-cancel {
            background: #fff;
            border: 1px solid #e5e0d6;
            border-radius: 10px;
            padding: 5px 12px;
            cursor: pointer;
            color: #646464;
            font-size: 12px;
            font-weight: 600;
        }
        @media (max-width: 900px) {
            .nw-row1, .nw-row2, .nw-row3, .nw-row4 { flex-wrap: wrap; }
            .nw-col-menu { margin-left: 0; }
            .nw-actions { flex-wrap: wrap; }
        }
        body.theme-dark .nw-act-btn {
            background: var(--dlg-glass-field, rgba(255,255,255,.08));
            border-color: var(--dlg-glass-border, rgba(255,255,255,.18));
            color: var(--dlg-text, #e2e8f0);
        }
        body.theme-dark .nw-act-btn.nw-act-view {
            background: rgba(148,163,184,.15);
            border-color: rgba(148,163,184,.35);
            color: #e2e8f0;
        }
        body.theme-dark .nw-duty-count,
        body.theme-dark .nw-inline-val { color: #e2e8f0; }
        body.theme-dark .nw-inline-lbl,
        body.theme-dark .nw-inline-muted,
        body.theme-dark .nw-edit-label,
        body.theme-dark .nw-dates { color: #94a3b8; }
        body.theme-dark .nw-date-ok { color: #86efac !important; }
        body.theme-dark .nw-date-expired,
        body.theme-dark .nw-date-tag,
        body.theme-dark .nw-duty-count-on { color: #fda4af !important; }
        /* Pflicht-Pillen: dunkles Grün/Rot auf dunklem Glas war unlesbar (Walter 20.07.2026). */
        body.theme-dark .nw-duty-off,
        body.theme-dark .nw-duty-met {
            background: rgba(16, 185, 129, 0.16);
            color: #86efac;
            border-color: rgba(52, 211, 153, 0.45);
        }
        body.theme-dark .nw-duty-off .nw-duty-dot,
        body.theme-dark .nw-duty-met .nw-duty-dot { background: #4ade80; }
        body.theme-dark .nw-duty-on {
            background: rgba(244, 63, 94, 0.16);
            color: #fda4af;
            border-color: rgba(251, 113, 133, 0.45);
        }
        body.theme-dark .nw-duty-on .nw-duty-dot { background: #fb7185; }
        body.theme-dark .nw-warn-chip {
            color: #fda4af;
            background: rgba(244, 63, 94, 0.16);
            border-color: rgba(251, 113, 133, 0.40);
        }
        body.theme-dark .nw-warn-chip::before { background: #fb7185; }
        body.theme-dark .nw-ok-chip {
            color: #86efac;
            background: rgba(16, 185, 129, 0.16);
            border-color: rgba(52, 211, 153, 0.45);
        }
        body.theme-dark .nw-ok-chip::before { background: #4ade80; }

/* ═══ Absenz- & Ferienkalender pro Filiale (Walter 22.07.2026) ═══ */
        .akal-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
        .akal-monthnav {
            display: flex; align-items: center; gap: 4px;
            background: rgba(255,255,255,0.48); border: 1px solid rgba(255,255,255,0.62);
            border-radius: 12px; padding: 4px 6px;
            box-shadow: 0 8px 22px rgba(60,55,48,0.10);
        }
        .akal-monthnav button {
            border: none; background: transparent; font-size: 15px; color: #646464;
            cursor: pointer; padding: 4px 9px; border-radius: 8px;
        }
        .akal-monthnav button:hover { background: rgba(255,255,255,0.6); }
        .akal-monthnav .cur { font-size: 13.5px; font-weight: 800; color: #3f3f3f; padding: 0 8px; min-width: 118px; text-align: center; }
        .akal-btn-heute {
            background: #3f3f3f; color: #fff; border: none; border-radius: 12px;
            padding: 8px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer;
            box-shadow: 0 8px 20px rgba(60,55,48,0.18);
        }
        .akal-filterrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
        .akal-fpill {
            font-size: 12px; font-weight: 700; color: #646464; cursor: pointer;
            background: rgba(255,255,255,0.46); border: 1px solid rgba(255,255,255,0.62);
            border-radius: 999px; padding: 5px 13px; user-select: none;
        }
        .akal-fpill.on { background: #3f3f3f; color: #fff; border-color: #3f3f3f; }
        .akal-fsep { width: 1px; height: 18px; background: rgba(90,80,65,0.18); margin: 0 4px; }
        .akal-namecol.akal-inaktiv { color: #a8a29a; }
        .akal-inaktiv-chip {
            background: rgba(90,80,65,0.10); border-radius: 8px; padding: 1px 7px;
            color: #8b8b8b !important; font-size: 9px !important;
        }
        .akal-legend { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; }
        .akal-legend span { font-size: 11.5px; color: #646464; display: flex; align-items: center; gap: 5px; }
        .akal-dot { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }
        .akal-card {
            background: rgba(255,255,255,0.44);
            border: 1px solid rgba(255,255,255,0.62);
            border-radius: 18px;
            box-shadow: 0 18px 50px rgba(60,55,48,0.14), inset 0 1px 0 rgba(255,255,255,0.7);
            padding: 14px 14px 10px;
            overflow-x: auto;
        }
        /* table-layout fixed: Fenster (31 Tage) wird IMMER auf volle Breite
           eingepasst — kein horizontaler Scroll (Walter 22.07.2026 v2). */
        .akal-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
        .akal-table th, .akal-table td { padding: 0; }
        .akal-table thead .dmon { font-size: 8.5px; font-weight: 800; color: #b07940; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
        .akal-table thead .dnum { font-size: 10px; font-weight: 700; color: #646464; text-align: center; padding-bottom: 1px; }
        .akal-table thead .dwd  { font-size: 8.5px; font-weight: 600; color: #a8a29a; text-align: center; padding-bottom: 5px; }
        .akal-table thead .we .dnum, .akal-table thead .we .dwd { color: #c2b8a8; }
        .akal-table thead .today .dnum { background: #3f3f3f; color: #fff; border-radius: 6px; width: 20px; margin: 0 auto; }
        .akal-namecol {
            text-align: left; font-size: 12px; font-weight: 700; color: #3f3f3f;
            padding: 0 8px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            width: 205px; cursor: pointer;
        }
        tbody .akal-namecol:hover { text-decoration: underline; text-underline-offset: 3px; }
        .akal-namecol .mod { font-size: 9.5px; font-weight: 700; color: #8b8b8b; margin-left: 5px; }
        .akal-namecol .saldo { color: #a8a29a; font-weight: 500; }
        .akal-table tbody tr { height: 26px; }
        .akal-table tbody tr + tr td { border-top: 1px solid rgba(90,80,65,0.07); }
        /* kleine Lücke zwischen den Modell-Gruppen (FIX-M | FIX | MTP | FLEX) */
        .akal-table tbody tr.akal-gap { height: 8px; }
        .akal-table tbody tr.akal-gap td { border-top: none !important; }
        td.akal-day { position: relative; }
        td.akal-day.we,   th.we    { background: rgba(90,80,65,0.045); }
        td.akal-day.today { background: rgba(63,63,63,0.06); }
        td.akal-day.mstart, .akal-table thead th.mstart { border-left: 2px solid rgba(90,80,65,0.22); }
        .akal-seg {
            position: absolute; top: 4px; bottom: 4px; left: 0; right: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.92); cursor: pointer;
        }
        .akal-seg.start { left: 2px; border-radius: 7px 0 0 7px; }
        .akal-seg.end   { right: 2px; border-radius: 0 7px 7px 0; }
        .akal-seg.start.end { border-radius: 7px; }
        .akal-seg.halb { top: 9px; }
        .akal-ferien   { background: linear-gradient(180deg,#7fb08a,#5f9970); }
        .akal-krank    { background: linear-gradient(180deg,#d98a8a,#c96a6a); }
        .akal-unfall   { background: linear-gradient(180deg,#e0a468,#d18b45); }
        .akal-mutter   { background: linear-gradient(180deg,#a48ec4,#8a70b0); }
        .akal-militaer { background: linear-gradient(180deg,#8fa3b8,#71879e); }
        .akal-frei     { background: repeating-linear-gradient(135deg,#cfc8bc 0 4px,#dfd9cf 4px 8px); color: #646464; }
        .akal-seg .tip {
            display: none; position: absolute; bottom: calc(100% + 6px); left: 50%;
            transform: translateX(-50%); background: #3f3f3f; color: #fff;
            font-size: 10.5px; font-weight: 600; padding: 5px 9px; border-radius: 8px;
            white-space: nowrap; z-index: 5; box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        }
        .akal-seg:hover .tip { display: block; }
        .akal-table tfoot td { border-top: 2px solid rgba(90,80,65,0.14); padding-top: 6px; padding-bottom: 4px; }
        .akal-table tfoot .akal-namecol { font-size: 11px; color: #8b8b8b; font-weight: 700; cursor: default; }
        .akal-cnt { font-size: 10.5px; font-weight: 800; color: #a8a29a; text-align: center; }
        .akal-cnt.mid  { color: #b07940; }
        .akal-cnt.warn { color: #fff; background: #c96a6a; border-radius: 7px; width: 22px; margin: 0 auto; }
        .akal-footnote {
            display: flex; gap: 10px; align-items: center; margin-top: 12px;
            font-size: 12px; color: #646464;
            background: rgba(255,246,240,0.7); border: 1px solid rgba(201,106,106,0.25);
            border-radius: 12px; padding: 9px 13px;
        }
        .akal-footnote b { color: #b05555; }
        /* Dark-Mode */
        body.theme-dark .akal-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
        body.theme-dark .akal-namecol { color: #d6d3cc; }
        body.theme-dark .akal-monthnav, body.theme-dark .akal-fpill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #d6d3cc; }
        body.theme-dark .akal-fpill.on { background: #d6d3cc; color: #26241f; border-color: #d6d3cc; }
        body.theme-dark .akal-monthnav .cur, body.theme-dark .akal-table thead .dnum { color: #d6d3cc; }
        body.theme-dark td.akal-day.we { background: rgba(255,255,255,0.04); }
        body.theme-dark .akal-table thead .today .dnum { background: #d6d3cc; color: #26241f; }

        /* ── Vertrags-Modal (Walter 01.08.2026): EXAKT MA-Übersicht-Palette ──
           Dieselben --emp-* Variablen wie #page-mitarbeiter.liquid-employee:
           warmes Cream, Pearl-Rim, weisse Soft-Inputs, Uppercase-Labels. */
        #contractEditModal {
            --emp-glass-bg: #f4f0e8;
            --emp-glass-strong: #faf7f2;
            --emp-glass-field: #ffffff;
            --emp-glass-border: rgba(255, 255, 255, 0.78);
            --emp-glass-inner: rgba(255, 255, 255, 0.72);
            --emp-text-strong: #2f2f2f;
            --emp-text: #4a4a4a;
            --emp-text-soft: #7a7a7a;
            --emp-blue: #3f3f3f;
            --emp-fill: #f4f0e8;
            --emp-fill-grad: linear-gradient(160deg,
                                #fffcf8 0%,
                                #f7f3eb 42%,
                                #efe9df 78%,
                                #e8e1d6 100%);
            --emp-rim: linear-gradient(135deg,
                                rgba(255, 255, 255, 0.98) 0%,
                                rgba(210, 200, 185, 0.55) 35%,
                                rgba(120, 110, 95, 0.22) 62%,
                                rgba(255, 255, 255, 0.88) 100%);
            --emp-shadow:
                0 0 0 1px rgba(90, 80, 65, 0.10),
                0 0 18px rgba(90, 80, 65, 0.06),
                0 4px 12px rgba(60, 55, 48, 0.08),
                0 16px 36px rgba(60, 55, 48, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.85),
                inset 0 -1px 0 rgba(90, 80, 65, 0.06);
            --emp-shadow-lift:
                0 0 0 1px rgba(90, 80, 65, 0.12),
                0 0 22px rgba(90, 80, 65, 0.08),
                0 6px 14px rgba(60, 55, 48, 0.10),
                0 20px 42px rgba(60, 55, 48, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.92),
                inset 0 -1px 0 rgba(90, 80, 65, 0.08);
        }
        #contractEditModal.ce-overlay {
            position: fixed;
            inset: 0;
            z-index: 3000;
            display: none;
            align-items: flex-start;
            justify-content: center;
            overflow-y: auto;
            padding: 28px 16px;
            background:
                radial-gradient(ellipse 70% 50% at 85% -5%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
                radial-gradient(ellipse 55% 45% at 8% 100%, rgba(180, 165, 140, 0.18) 0%, transparent 55%),
                linear-gradient(160deg, rgba(246,243,238,.92) 0%, rgba(239,235,227,.94) 48%, rgba(250,248,245,.92) 100%),
                rgba(60, 55, 48, 0.28);
        }
        #contractEditModal .ce-modal-box {
            margin: auto;
            width: min(1040px, calc(100vw - 32px));
            max-width: 1040px;
            border-radius: 16px;
            border: 1px solid transparent;
            background-color: var(--emp-fill);
            background-image: var(--emp-fill-grad), var(--emp-rim);
            background-origin: padding-box, border-box;
            background-clip: padding-box, border-box;
            box-shadow: var(--emp-shadow-lift);
            color: var(--emp-text);
            font-size: 12.5px;
            overflow: hidden;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #contractEditModal .ce-modal-head {
            padding: 16px 20px 14px;
            border-bottom: 1px solid rgba(90, 80, 65, 0.10);
            background: transparent;
        }
        #contractEditModal .ce-modal-head .ma-modal-title {
            font-size: 16px;
            font-weight: 760;
            letter-spacing: -0.02em;
            color: var(--emp-text-strong);
        }
        #contractEditModal .ce-modal-head .ma-modal-sub {
            margin-top: 2px;
            font-size: 12px;
            font-weight: 600;
            color: #8b8b8b;
        }
        #contractEditModal .ce-modal-head .ma-modal-close {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            background: #ffffff;
            border: 1px solid rgba(90, 80, 65, 0.14);
            color: #7a7a7a;
            box-shadow: 0 2px 8px rgba(60, 55, 48, 0.06);
        }
        #contractEditModal .ce-modal-head .ma-modal-close:hover {
            background: #fff;
            color: #1a1a1a;
            border-color: rgba(90, 80, 65, 0.28);
        }
        #contractEditModal .ce-modal-body {
            padding: 12px 16px 14px;
            background: transparent;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        /* Sektions-Karten = .ov-card auf der MA-Übersicht */
        #contractEditModal .ce-block {
            border: 1px solid transparent;
            border-radius: 16px;
            padding: 12px 16px 14px;
            background-color: var(--emp-fill);
            background-image: var(--emp-fill-grad), var(--emp-rim);
            background-origin: padding-box, border-box;
            background-clip: padding-box, border-box;
            box-shadow: var(--emp-shadow);
        }
        #contractEditModal .emp-section-title {
            background: transparent !important;
            border-left: none !important;
            border-radius: 0 !important;
            color: var(--emp-text-strong) !important;
            text-transform: none !important;
            letter-spacing: -0.01em !important;
            font-size: 15px !important;
            font-weight: 760 !important;
            padding: 0 0 10px 0 !important;
            margin: 0 !important;
        }
        #contractEditModal .ce-grid {
            display: grid;
            gap: 10px 16px;
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
        }
        #contractEditModal .ce-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        #contractEditModal .ce-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #contractEditModal .ce-field {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }
        #contractEditModal .ce-span-2 { grid-column: span 2; }
        #contractEditModal .ce-span-4 { grid-column: 1 / -1; }
        /* Labels = .ov-pfl */
        #contractEditModal .ce-lbl {
            display: block;
            font-size: 10.5px;
            font-weight: 700;
            color: #8b8b8b;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 0;
            padding-left: 0;
            line-height: 1.2;
        }
        /* Inputs = .ov-softin */
        #contractEditModal .ce-inp {
            width: 100%;
            box-sizing: border-box;
            min-height: 32px;
            height: 32px;
            padding: 0 10px;
            border-radius: 9px;
            border: 1px solid rgba(90, 80, 65, 0.18);
            background: #ffffff;
            color: #2a2a2a;
            font: inherit;
            font-size: 14px;
            font-weight: 700;
            outline: none;
            box-shadow: inset 0 1px 2px rgba(60, 55, 48, 0.05);
            transition: border-color .12s, box-shadow .12s;
        }
        #contractEditModal select.ce-inp {
            height: 32px;
            padding-right: 28px;
        }
        #contractEditModal .ce-inp:hover {
            border-color: rgba(90, 80, 65, 0.28);
        }
        #contractEditModal .ce-inp:focus {
            border-color: #3f3f3f;
            box-shadow: 0 0 0 2px rgba(63, 63, 63, 0.10);
        }
        #contractEditModal .ce-inp-ro {
            background: #faf7f2;
            color: #8b8b8b;
            font-weight: 650;
        }
        #contractEditModal #ceTeilzeitUnter8hWrap {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-width: 0;
        }
        /* L-GAV-Toggle 1:1 */
        #contractEditModal .emp-yesno-toggle {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            width: fit-content;
            padding: 3px;
            border: 1px solid rgba(60, 55, 48, 0.16);
            border-radius: 15px;
            background: #f0ece4;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
            min-height: 32px;
            box-sizing: border-box;
        }
        #contractEditModal .emp-yesno-toggle button {
            border: 0;
            border-radius: 12px;
            background: transparent;
            color: #8b8b8b;
            font: inherit;
            font-size: 12px;
            font-weight: 760;
            line-height: 1;
            padding: 6px 12px;
            cursor: pointer;
        }
        #contractEditModal .emp-yesno-toggle button.active {
            background: #3f3f3f;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(60, 55, 48, 0.18);
        }
        #contractEditModal .ce-eaw {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 2px;
            padding: 9px 12px;
            border-radius: 12px;
            background: #ffffff;
            border: 1px solid rgba(90, 80, 65, 0.14);
            box-shadow: inset 0 1px 2px rgba(60, 55, 48, 0.03);
        }
        #contractEditModal .ce-eaw-cb {
            width: 15px;
            height: 15px;
            margin-top: 2px;
            accent-color: #3f3f3f;
            flex-shrink: 0;
        }
        #contractEditModal .ce-eaw-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        #contractEditModal .ce-eaw-text label {
            font-size: 12.5px;
            font-weight: 700;
            color: #2f2f2f;
            cursor: pointer;
        }
        #contractEditModal .ce-eaw-text span {
            font-size: 11.5px;
            color: #8b8b8b;
            font-weight: 500;
        }
        #contractEditModal .ce-mw-slot {
            margin-top: 10px;
        }
        #contractEditModal .ce-compl-slot {
            margin-top: 2px;
        }
        #contractEditModal .ce-mw-info,
        #contractEditModal .ce-compl-card {
            display: flex;
            align-items: center;
            gap: 12px 16px;
            flex-wrap: wrap;
            padding: 10px 13px;
            border-radius: 12px;
            background: #ffffff;
            border: 1px solid rgba(90, 80, 65, 0.12);
            box-shadow: 0 4px 12px rgba(60, 55, 48, 0.04);
            color: #4a4a4a;
            font-size: 12.5px;
        }
        #contractEditModal .ce-mw-info .ce-mw-k {
            font-weight: 760;
            color: #2f2f2f;
        }
        #contractEditModal .ce-mw-info .ce-mw-meta {
            color: #8b8b8b;
            font-size: 11.5px;
        }
        #contractEditModal .ce-compl-card {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }
        #contractEditModal .ce-compl-card.ok {
            background: #ffffff;
            border-color: rgba(90, 80, 65, 0.12);
        }
        #contractEditModal .ce-compl-card.bad {
            background: #ffffff;
            border-color: rgba(150, 90, 80, 0.22);
        }
        #contractEditModal .ce-compl-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        #contractEditModal .ce-compl-title {
            font-size: 13.5px;
            font-weight: 760;
            color: #2f2f2f;
        }
        #contractEditModal .ce-compl-card.ok .ce-compl-title { color: #2f2f2f; }
        #contractEditModal .ce-compl-card.bad .ce-compl-title { color: #7a4038; }
        #contractEditModal .ce-compl-grid {
            display: grid;
            grid-template-columns: auto 1fr 1fr;
            gap: 4px 16px;
            font-size: 12px;
            color: #4a4a4a;
        }
        #contractEditModal .ce-compl-apply {
            border: none;
            border-radius: 10px;
            padding: 6px 14px;
            background: #3f3f3f;
            color: #fff;
            font: inherit;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 6px 14px rgba(60, 55, 48, 0.16);
        }
        #contractEditModal .ce-compl-apply:hover { background: #1a1a1a; }
        #contractEditModal .ce-hint {
            font-size: 11.5px;
            color: #8b8b8b;
            padding: 2px 1px;
        }
        #contractEditModal .ce-hint.warn { color: #8a6a3f; }
        #contractEditModal .ce-modal-foot {
            padding: 12px 16px 16px;
            border-top: 1px solid rgba(90, 80, 65, 0.10);
            background: transparent;
            gap: 8px;
        }
        #contractEditModal .ce-error {
            color: #8a4038;
            font-size: 12px;
            font-weight: 650;
        }
        #contractEditModal .ce-btn {
            border-radius: 10px;
            padding: 8px 16px;
            font: inherit;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            transition: transform .12s, background .12s, box-shadow .12s;
        }
        #contractEditModal .ce-btn:hover { transform: translateY(-1px); }
        #contractEditModal .ce-btn-ghost {
            background: #ffffff;
            border: 1px solid rgba(140, 132, 120, 0.32);
            color: #3f3f3f;
            box-shadow: 0 2px 8px rgba(60, 55, 48, 0.06);
        }
        #contractEditModal .ce-btn-ghost:hover {
            border-color: #3f3f3f;
        }
        #contractEditModal .ce-btn-primary {
            background: #3f3f3f;
            border: 1px solid #3f3f3f;
            color: #fff;
            box-shadow: 0 8px 20px rgba(60, 55, 48, 0.16);
        }
        #contractEditModal .ce-btn-primary:hover { background: #1a1a1a; border-color: #1a1a1a; }
        @media (max-width: 820px) {
            #contractEditModal .ce-grid-4,
            #contractEditModal .ce-grid-2 { grid-template-columns: 1fr 1fr; }
            #contractEditModal .ce-span-2 { grid-column: span 2; }
        }
        @media (max-width: 560px) {
            #contractEditModal .ce-grid-4,
            #contractEditModal .ce-grid-2 { grid-template-columns: 1fr; }
            #contractEditModal .ce-span-2,
            #contractEditModal .ce-span-4 { grid-column: auto; }
        }
        /* Dark: gleiche dlg-Palette wie MA-Karten */
        body.theme-dark #contractEditModal.ce-overlay {
            background:
                radial-gradient(900px 500px at 30% 0%, rgba(80,140,210,.16), transparent 55%),
                rgba(0, 4, 14, 0.62);
        }
        body.theme-dark #contractEditModal .ce-modal-box,
        body.theme-dark #contractEditModal .ce-block {
            border: 1px solid transparent !important;
            background-color: var(--dlg-fill) !important;
            background-image: var(--dlg-fill-grad), var(--dlg-rim) !important;
            background-origin: padding-box, border-box !important;
            background-clip: padding-box, border-box !important;
            box-shadow: var(--dlg-shadow) !important;
            color: var(--dlg-text) !important;
        }
        body.theme-dark #contractEditModal .ce-modal-head,
        body.theme-dark #contractEditModal .ce-modal-foot {
            background: transparent;
            border-color: rgba(165, 215, 255, 0.14);
        }
        body.theme-dark #contractEditModal .ce-modal-head .ma-modal-title,
        body.theme-dark #contractEditModal .emp-section-title,
        body.theme-dark #contractEditModal .ce-compl-title,
        body.theme-dark #contractEditModal .ce-mw-info .ce-mw-k,
        body.theme-dark #contractEditModal .ce-eaw-text label {
            color: #ffffff !important;
        }
        body.theme-dark #contractEditModal .ce-modal-head .ma-modal-sub,
        body.theme-dark #contractEditModal .ce-lbl,
        body.theme-dark #contractEditModal .ce-eaw-text span,
        body.theme-dark #contractEditModal .ce-mw-info .ce-mw-meta,
        body.theme-dark #contractEditModal .ce-hint {
            color: var(--dlg-text-muted) !important;
        }
        body.theme-dark #contractEditModal .ce-modal-head .ma-modal-close,
        body.theme-dark #contractEditModal .ce-inp,
        body.theme-dark #contractEditModal .ce-eaw,
        body.theme-dark #contractEditModal .ce-mw-info,
        body.theme-dark #contractEditModal .ce-compl-card,
        body.theme-dark #contractEditModal .ce-btn-ghost {
            background: var(--dlg-fill-field) !important;
            border-color: rgba(165, 215, 255, 0.28) !important;
            color: #f1f5f9 !important;
            box-shadow: none !important;
        }
        body.theme-dark #contractEditModal .ce-inp:focus {
            border-color: rgba(155, 210, 255, 0.72) !important;
            box-shadow: 0 0 0 2px rgba(70, 150, 235, 0.18) !important;
        }
        body.theme-dark #contractEditModal .ce-inp-ro {
            background: rgba(0, 0, 0, 0.22) !important;
            color: var(--dlg-text-muted) !important;
        }
        body.theme-dark #contractEditModal .emp-yesno-toggle {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(122, 145, 165, 0.28);
        }
        body.theme-dark #contractEditModal .emp-yesno-toggle button { color: #94a3b8; }
        body.theme-dark #contractEditModal .emp-yesno-toggle button.active {
            background: #e8e4dc;
            color: #1a1a1a;
        }
        body.theme-dark #contractEditModal .ce-btn-primary {
            background: #e8e4dc !important;
            border-color: #e8e4dc !important;
            color: #1a1a1a !important;
        }

/* ── AHV-Anmeldung 318.260 (Walter 06.08.2026) ─────────────────────── */
.ahv-f { display:block; font-size:12px; font-weight:600; color:#64748b; }
.ahv-f input:not([type=checkbox]), .ahv-f select {
    display:block; width:100%; margin-top:4px; padding:7px 10px;
    border:1px solid #e2e8f0; border-radius:7px; font-size:13px;
    background:#fff; box-sizing:border-box; font-family:inherit; color:#0f172a;
}

/* Filialen-Seite mit fixhead (Walter 06.08.2026): emp-layout füllt den
   page-body statt 100vh zu erzwingen — Panels scrollen intern, kein
   Ganzseiten-Scroll mehr. */
#page-filialen .emp-layout { height: 100%; }

/* ── Manager-Dienstplan (Walter 08.08.2026) ─────────────────────────── */
.dp-scroll { overflow:auto; border:1px solid rgba(60,55,48,0.14); border-radius:12px; background:#fff; }
.dp-table { border-collapse:collapse; font-size:11.5px; width:max-content; }
.dp-table th, .dp-table td { border:1px solid rgba(60,55,48,0.12); text-align:center; min-width:27px; padding:2px 3px; }
.dp-table thead th { background:#f6f3ee; font-weight:700; color:#646464; position:sticky; top:0; z-index:2; height:24px; box-sizing:border-box; }
/* Alle DREI Kopfzeilen fixieren (Walter 09.08.2026): jede Zeile braucht ihren
   eigenen top-Offset, sonst überdeckt die letzte (TAG) die anderen beiden. */
.dp-table thead tr:nth-child(1) th { top:0; }
.dp-table thead tr:nth-child(2) th { top:24px; }
.dp-table thead tr:nth-child(3) th { top:48px; }
.dp-side { position:sticky; left:0; background:#f6f3ee !important; z-index:3; text-align:left !important; padding:2px 8px !important; min-width:110px; max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-name { font-weight:600; color:#3f3f3f; background:#fff !important; }
.dp-gf { font-weight:800; }
body.theme-dark .dp-gf { color:#fff !important; }
.dp-we { background:#efece6; }
.dp-branch td { background:#3f3f3f !important; color:#fff !important; font-weight:700; font-size:11px; letter-spacing:.4px; text-align:left; padding:3px 8px; }
.dp-cell { font-weight:700; color:#3f3f3f; user-select:none; }
.dp-cell:focus { outline:2px solid #6b7280; outline-offset:-2px; }
.dp-abs { cursor:default; }
/* Feiertag-/Schulferien-Marker (Walter 09.08.2026): in der Filial-Zeile pro
   Tag — Feiertag rot (★), Schulferien blaues Band; Tageszellen am Feiertag
   leicht rot getönt. !important nötig gegen .dp-branch td. */
.dp-branch td.dp-brday { padding:0; font-size:10px; text-align:center; }
.dp-tip { position:fixed; z-index:9500; background:#3f3f3f; color:#fff; font-size:12px; font-weight:600;
          padding:5px 10px; border-radius:8px; box-shadow:0 6px 18px rgba(60,55,48,0.3);
          pointer-events:none; white-space:nowrap; display:none; }
/* Wochen-Trennlinie vor jedem Montag + F/M/S-Summenspalten (Walter 09.08.2026).
   Wochenende wird NUR noch im Kopf (dp-we auf th) gefärbt. */
.dp-table .dp-mo { border-left:2px solid #a39c8f !important; }
.dp-table .dp-sum { background:#f6f3ee; font-weight:700; color:#3f3f3f; min-width:26px; }
.dp-table td.dp-weok { color:#166534; font-size:10.5px; letter-spacing:.3px; }
.dp-table td.dp-wenok { color:#b91c1c; font-size:10.5px; letter-spacing:.3px; }
.dp-table .dp-sumfirst { border-left:2px solid #a39c8f !important; }
.dp-branch td.dp-sumfirst { border-left-color:#a39c8f; }
body.theme-dark .dp-table .dp-mo, body.theme-dark .dp-table .dp-sumfirst { border-left-color:#4a5a72 !important; }
body.theme-dark .dp-table .dp-sum { background:#1c2a40; color:#cbd5e1; }
.dp-branch td.dp-brft { background:#f87171 !important; color:#fff !important; }
.dp-branch td.dp-brsf { background:#93c5fd !important; }
td.dp-cell.dp-ftday { background:#fdeaea; }
body.theme-dark td.dp-cell.dp-ftday { background:rgba(248,113,113,0.16); }
body.theme-dark .dp-scroll { background:rgba(8,18,34,0.6); }
body.theme-dark .dp-table thead th, body.theme-dark .dp-side { background:#1c2a40 !important; color:#cbd5e1; }
body.theme-dark .dp-name { background:rgba(8,18,34,0.6) !important; color:#e8edf4; }
body.theme-dark .dp-we { background:rgba(255,255,255,0.05); }
body.theme-dark .dp-cell { color:#e8edf4; }
/* Grid scrollt INTERN (nicht der page-body) — nur so bleiben die sticky
   Datum-/Tag-Kopfzeilen und die Namensspalte beim Scrollen stehen.
   (Der frühere @media-print-Hack ist raus — Drucken läuft übers PDF.) */
.dp-scroll { max-height: calc(100vh - 245px); }

/* ── Kandidaten/Onboarding-Modal (kandidaten.js, Walter 11.08.2026) ──────
   Tages-Karten im Stil des MA-Hauptbildschirms + Dark-Mode-taugliche
   Status-Pillen. Die Dark-Karten-Optik kommt über die zentrale
   body.theme-dark .kd-day-Regel (Selektor-Liste oben). */
/* Onboarding-Modals: warmer Verlauf wie die MA-Maske (Walter 11.08.2026). */
.iv-modal-box { background: linear-gradient(135deg, #f7f4ef 0%, #efebe3 48%, #faf8f5 100%); }
.kd-day { background:rgba(255,255,255,0.48); border:1px solid rgba(255,255,255,0.70); border-radius:16px;
          padding:16px 18px; margin-bottom:12px;
          box-shadow:0 10px 30px rgba(70,64,55,0.12), inset 0 1px 0 rgba(255,255,255,0.58); }
.kd-day-title { font-size:17px; font-weight:800; color:#3f3f3f; }
.kd-dim { color:#8b8b8b; }
.kd-link { color:#1d4ed8; cursor:pointer; font-weight:700; }
.kd-sect { font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
           color:#8b8b8b; white-space:nowrap; }
.kd-sect-line { flex:1; height:1px; background:rgba(60,55,48,0.12); }
/* Feste Spalten (Walter 11.08.2026): Filiale | Name | Telefon | Zustand | Aktionen.
   ALLE Info-Spalten haben FIXE Breiten (kein fr vor den Aktionen) — sonst
   verschieben unterschiedlich breite Aktions-Blöcke die Spalten pro Zeile. */
.kd-row { display:grid; grid-template-columns:112px 230px 150px 380px 1fr;
          gap:10px; align-items:center; padding:7px 4px; border-top:1px solid rgba(60,55,48,0.08); }
.kd-chip { display:inline-block; border-radius:8px; padding:2px 9px; font-size:11.5px;
           font-weight:700; white-space:nowrap; }
.kd-chip-gelb   { background:#fef9c3; color:#854d0e; }
.kd-chip-gruen  { background:#dcfce7; color:#166534; }
.kd-chip-rot    { background:#fecaca; color:#991b1b; }
.kd-chip-indigo { background:#e0e7ff; color:#3730a3; }
.kd-chip-grau   { background:#f1efe9; color:#646464; }
.kd-chip-kohle  { background:#3f3f3f; color:#fff; }
.kd-chip-orange { background:#fff7ed; color:#9a3412; border:1px solid #fdba74; }
.kd-btn-glass { background:rgba(255,255,255,0.7); border:1px solid rgba(60,55,48,0.18);
                border-radius:10px; padding:4px 10px; font-size:11.5px; cursor:pointer;
                color:#3f3f3f; font-weight:600; }
body.theme-dark .kd-day-title { color:var(--dlg-text); }
body.theme-dark .kd-dim { color:#94a3b8; }
body.theme-dark .kd-link { color:#93c5fd; }
body.theme-dark .kd-sect-line { background:rgba(255,255,255,0.14); }
body.theme-dark .kd-row { border-top-color:rgba(255,255,255,0.10); }
body.theme-dark .kd-chip-gelb   { background:rgba(250,204,21,0.22); color:#fde68a; }
body.theme-dark .kd-chip-gruen  { background:rgba(34,197,94,0.22); color:#86efac; }
body.theme-dark .kd-chip-rot    { background:rgba(239,68,68,0.24); color:#fca5a5; }
body.theme-dark .kd-chip-indigo { background:rgba(99,102,241,0.28); color:#c7d2fe; }
body.theme-dark .kd-chip-grau   { background:rgba(255,255,255,0.13); color:#cbd5e1; }
body.theme-dark .kd-chip-kohle  { background:#e2e8f0; color:#1a1a1a; }
body.theme-dark .kd-chip-orange { background:rgba(251,146,60,0.20); color:#fdba74; border-color:rgba(251,146,60,0.45); }
body.theme-dark .kd-btn-glass { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.22); color:var(--dlg-text); }

/* ── Zustellart-Wahl auf HR-Dokumenten (Walter 12.08.2026) ───────────────
   Wichtige Eingabe → markante Segment-Pillen: gewählt = Kohle, sonst Glas.
   Steuert den Unterzeichner (Abgabe = Allgemein-Unterzeichner der Filiale,
   Versand = angemeldeter Benutzer). */
/* Kompakter Segment-Toggle (Walter 12.08.2026 v2: wie «Aktive | Inaktive |
   Alle» — klein, zusammenhängend, gewähltes Segment Kohle). */
.zst-wrap { display:inline-flex; margin:4px 0 2px; }
.zst-pill { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px;
            padding:6px 14px; border:1px solid rgba(60,55,48,0.28);
            background:rgba(255,255,255,0.75); font-size:12.5px; font-weight:700; color:#3f3f3f;
            cursor:pointer; text-align:center; line-height:1.2; white-space:nowrap;
            transition:background .15s, color .15s; }
.zst-pill:first-child { border-radius:10px 0 0 10px; }
.zst-pill:last-child { border-radius:0 10px 10px 0; }
.zst-pill + .zst-pill { border-left:none; } /* auch bei 3+ Segmenten kein Doppel-Rand */
.zst-pill input { position:absolute; opacity:0; pointer-events:none; }
.zst-pill:has(input:checked) { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.zst-pill:hover:not(:has(input:checked)) { background:rgba(255,255,255,0.95); }
body.theme-dark .zst-pill { background:rgba(255,255,255,0.08); color:var(--dlg-text); border-color:rgba(255,255,255,0.22); }
body.theme-dark .zst-pill:has(input:checked) { background:#e2e8f0; color:#1a1a1a; border-color:#e2e8f0; }