/* === styles-01.css — Teil 1/4 (urspr. Zeilen 1-931) — in Reihenfolge laden === */
/* ===== Block 1/5 (urspr. inline) ===== */
:root {
  /* Eigenes Theme-Management — verhindert, dass Android/Samsung Internet "Dunkles
     Layout" die helle App zwangsweise dunkel rendert (Toggle wechselte sonst nur das
     Icon, nicht die Farben). "only light" ist das stärkste Signal gegen Force-Dark.
     Im manuellen Dunkelmodus überschreibt html[data-theme="dark"] auf color-scheme:dark. */
  color-scheme: only light;
  /* === Modern Teal/Slate-Palette === */
  --primary: #0F766E;        /* Teal 700 */
  --primary-light: #14B8A6;  /* Teal 500 */
  --primary-dark: #134E4A;   /* Teal 900 */
  --primary-bg: #F0FDF4;     /* Mint 50 - light teal bg */
  --primary-bg-strong: #ECFDF5; /* Mint 100 - hero subtitle */
  --primary-border: #BBF7D0; /* Mint 200 */

  --accent: #DC2626;         /* Red 600 - bestätigen-Balken etc. */
  --accent-dark: #991B1B;    /* Red 900 */
  --accent-bg: #FEF2F2;      /* Red 50 */
  --accent-text: #7F1D1D;    /* Red 950 */

  --warn: #F59E0B;           /* Amber 500 */
  --warn-dark: #D97706;      /* Amber 600 */
  --warn-bg: #FFFBEB;        /* Amber 50 */
  --warn-bg-strong: #FEF3C7; /* Amber 100 */
  --warn-border: #FDE68A;    /* Amber 200 */
  --warn-text: #854F0B;      /* Amber 800 */
  --warn-text-dark: #451A03; /* Amber 950 */

  --info: #2563EB;           /* Blue 600 */
  --info-bg: #EFF6FF;        /* Blue 50 */
  --info-bg-strong: #DBEAFE; /* Blue 100 */
  --info-border: #BFDBFE;    /* Blue 200 */
  --info-text: #1E40AF;      /* Blue 800 */
  --info-text-dark: #1E3A8A; /* Blue 900 */

  --success: #16A34A;        /* Green 600 */
  --success-bg: #F0FDF4;     /* Green 50 */
  --success-bg-strong: #DCFCE7; /* Green 100 */
  --success-text: #15803D;   /* Green 700 */

  /* Slate-Scale (neutrals) */
  --bg: #F8FAFC;             /* Slate 50 */
  --panel: #FFFFFF;
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --text: var(--slate-900);
  --text-muted: var(--slate-500);
  --text-faint: var(--slate-400);
  --muted: var(--slate-500);
  --band: var(--slate-100);

  /* Legacy-Aliase (vorhanden, weiter genutzt) */
  --green: #D1FAE5;
  --yellow: #FEF3C7;
  --red: #FFC7CE;
  --red-text: #9C0006;
  --blue: #BDD7EE;
  --dark-blue: #8EA9DB;

  /* === Type-Scale === */
  --fs-tiny: 10px;
  --fs-small: 11px;
  --fs-body: 13px;
  --fs-md: 14px;
  --fs-h3: 16px;
  --fs-h2: 18px;
  --fs-h1: 20px;
  --fs-display: 24px;

  /* === Spacing-Scale (4/8 grid) === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* === Border-Radius === */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;

  /* === Animation === */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* === Layout === */
  --sidebar-width: 220px;
}

/* === Dark Mode Tokens (toggleable via [data-theme="dark"] auf html) === */
html[data-theme="dark"] {
  color-scheme: dark;
  --primary: #14B8A6;
  --primary-light: #2DD4BF;
  --primary-dark: #0F766E;
  --primary-bg: #042F2E;
  --primary-bg-strong: #134E4A;
  --primary-border: #0F766E;

  --bg: #0F172A;
  --panel: #1E293B;
  --slate-50: #1E293B;
  --slate-100: #334155;
  --slate-200: #475569;
  --slate-300: #64748B;
  --slate-400: #94A3B8;
  --slate-500: #CBD5E1;
  --slate-600: #E2E8F0;
  --slate-700: #F1F5F9;
  --slate-800: #F8FAFC;
  --slate-900: #FFFFFF;

  --border: #334155;
  --border-strong: #475569;
  --text: #F8FAFC;
  --text-muted: #CBD5E1;
  --text-faint: #94A3B8;
  --muted: #CBD5E1;
  --band: #1E293B;

  --warn-bg: #422006;
  --warn-bg-strong: #78350F;
  --warn-text: #FCD34D;
  --warn-text-dark: #FEF3C7;
  --warn-border: #78350F;

  --info-bg: #172554;
  --info-bg-strong: #1E3A8A;
  --info-text: #BFDBFE;
  --info-border: #1E40AF;

  --success-bg: #052E16;
  --success-bg-strong: #14532D;
  --success-text: #86EFAC;

  --accent-bg: #450A0A;
  --accent-text: #FCA5A5;
}
/* Bilder/Charts in Dark Mode etwas abdämpfen */
html[data-theme="dark"] img:not(.no-dark-filter) { opacity: 0.92; }

/* === Dark Mode Override für hartkodierte Inline-Hex-Werte === */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td,
html[data-theme="dark"] th { color: var(--text); }

/* Inline weiß/sehr-helle Hintergründe in Dark Mode auf Panel umfärben */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background: #FFF"],
html[data-theme="dark"] [style*="background:#FFFFFF"],
html[data-theme="dark"] [style*="background: #FFFFFF"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"] {
  background: var(--panel) !important;
  color: var(--text);
}
/* Slate-50 / Slate-100 (#F8FAFC, #F1F5F9, #FAFAF9) Hintergründe → dunkler Slate-Ton */
html[data-theme="dark"] [style*="background:#F8FAFC"],
html[data-theme="dark"] [style*="background: #F8FAFC"],
html[data-theme="dark"] [style*="background:#F1F5F9"],
html[data-theme="dark"] [style*="background: #F1F5F9"],
html[data-theme="dark"] [style*="background:#FAFAF9"],
html[data-theme="dark"] [style*="background: #FAFAF9"],
html[data-theme="dark"] [style*="background:#F5F5F5"],
html[data-theme="dark"] [style*="background: #F5F5F5"],
html[data-theme="dark"] [style*="background:#F3F4F6"],
html[data-theme="dark"] [style*="background: #F3F4F6"],
html[data-theme="dark"] [style*="background:#FAFAFA"],
html[data-theme="dark"] [style*="background: #FAFAFA"] {
  background: var(--slate-100) !important;
  color: var(--text);
}
/* Gelbe Sicherungsaufsicht-Boxen (#FFFBEB, #FEF3C7, #FFF8E1) — Text dunkler beibehalten, aber Bg etwas anpassen */
html[data-theme="dark"] [style*="background:#FFFBEB"],
html[data-theme="dark"] [style*="background: #FFFBEB"],
html[data-theme="dark"] [style*="background:#FEF3C7"],
html[data-theme="dark"] [style*="background: #FEF3C7"],
html[data-theme="dark"] [style*="background:#FFF8E1"],
html[data-theme="dark"] [style*="background: #FFF8E1"] {
  background: #422006 !important;
  color: #FCD34D !important;
}
/* Grüne Erfolgs-Boxen (Urlaub/verschickt) → tieferes Grün */
html[data-theme="dark"] [style*="background:#F0FDF4"],
html[data-theme="dark"] [style*="background: #F0FDF4"],
html[data-theme="dark"] [style*="background:#DCFCE7"],
html[data-theme="dark"] [style*="background: #DCFCE7"],
html[data-theme="dark"] [style*="background:#E8F5E9"],
html[data-theme="dark"] [style*="background: #E8F5E9"],
html[data-theme="dark"] [style*="background:#D9EAD3"],
html[data-theme="dark"] [style*="background: #D9EAD3"] {
  background: #052E16 !important;
  color: #86EFAC !important;
}
/* Rosa/rote Krank-Boxen */
html[data-theme="dark"] [style*="background:#FEF2F2"],
html[data-theme="dark"] [style*="background: #FEF2F2"],
html[data-theme="dark"] [style*="background:#F4CCCC"],
html[data-theme="dark"] [style*="background: #F4CCCC"],
html[data-theme="dark"] [style*="background:#FFE4E1"],
html[data-theme="dark"] [style*="background: #FFE4E1"],
html[data-theme="dark"] [style*="background:#FCEBEB"],
html[data-theme="dark"] [style*="background: #FCEBEB"] {
  background: #450A0A !important;
  color: #FCA5A5 !important;
}
/* Helle Blau-Boxen (Frei, Info-Card, Adresse) */
html[data-theme="dark"] [style*="background:#EFF6FF"],
html[data-theme="dark"] [style*="background: #EFF6FF"],
html[data-theme="dark"] [style*="background:#DBEAFE"],
html[data-theme="dark"] [style*="background: #DBEAFE"],
html[data-theme="dark"] [style*="background:#CFE2F3"],
html[data-theme="dark"] [style*="background: #CFE2F3"],
html[data-theme="dark"] [style*="background:#F0F9FF"],
html[data-theme="dark"] [style*="background: #F0F9FF"],
html[data-theme="dark"] [style*="background:#E0F2FE"],
html[data-theme="dark"] [style*="background: #E0F2FE"] {
  background: #172554 !important;
  color: #BFDBFE !important;
}
/* === Dark Mode: dunkle Text-Farben (color:#xxx) in Inline-Styles aufhellen,
   damit sie auf dunklem Background lesbar bleiben. WICHTIG: !important nötig,
   um Inline-Styles auf Children zu überschreiben. === */
html[data-theme="dark"] [style*="color:#15803D"],
html[data-theme="dark"] [style*="color: #15803D"],
html[data-theme="dark"] [style*="color:#166534"],
html[data-theme="dark"] [style*="color: #166534"] { color: #86EFAC !important; }
html[data-theme="dark"] [style*="color:#92400E"],
html[data-theme="dark"] [style*="color: #92400E"],
html[data-theme="dark"] [style*="color:#854F0B"],
html[data-theme="dark"] [style*="color: #854F0B"],
html[data-theme="dark"] [style*="color:#9A3412"],
html[data-theme="dark"] [style*="color: #9A3412"],
html[data-theme="dark"] [style*="color:#7C2D12"],
html[data-theme="dark"] [style*="color: #7C2D12"],
html[data-theme="dark"] [style*="color:#422006"],
html[data-theme="dark"] [style*="color: #422006"] { color: #FCD34D !important; }
html[data-theme="dark"] [style*="color:#B91C1C"],
html[data-theme="dark"] [style*="color: #B91C1C"],
html[data-theme="dark"] [style*="color:#9C0006"],
html[data-theme="dark"] [style*="color: #9C0006"] { color: #FCA5A5 !important; }
html[data-theme="dark"] [style*="color:#1E40AF"],
html[data-theme="dark"] [style*="color: #1E40AF"],
html[data-theme="dark"] [style*="color:#1F3D65"],
html[data-theme="dark"] [style*="color: #1F3D65"] { color: #BFDBFE !important; }
html[data-theme="dark"] [style*="color:#0F766E"],
html[data-theme="dark"] [style*="color: #0F766E"],
html[data-theme="dark"] [style*="color:#134E4A"],
html[data-theme="dark"] [style*="color: #134E4A"] { color: #5EEAD4 !important; }
html[data-theme="dark"] [style*="color:#0F172A"],
html[data-theme="dark"] [style*="color: #0F172A"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #475569"] { color: var(--text) !important; }
html[data-theme="dark"] [style*="color:#7B6E55"],
html[data-theme="dark"] [style*="color: #7B6E55"],
html[data-theme="dark"] [style*="color:#5D2E00"],
html[data-theme="dark"] [style*="color: #5D2E00"] { color: #FCD34D !important; }
/* Dunkler Border auf hellem Hintergrund → im Dark Mode aufhellen */
html[data-theme="dark"] [style*="border:1px solid #FCD34D"],
html[data-theme="dark"] [style*="border:1px solid #86EFAC"],
html[data-theme="dark"] [style*="border:1px solid #F59E0B"],
html[data-theme="dark"] [style*="border:1px solid #16A34A"],
html[data-theme="dark"] [style*="border:1px solid #FCA5A5"] { border-color: var(--border-strong) !important; }
/* Slate-Borders → dunkle Border */
html[data-theme="dark"] [style*="border:1px solid #E0E0E0"],
html[data-theme="dark"] [style*="border:1px solid #E2E8F0"],
html[data-theme="dark"] [style*="border:1px solid #DDD"],
html[data-theme="dark"] [style*="border-color:#E0E0E0"],
html[data-theme="dark"] [style*="border-color:#E2E8F0"] {
  border-color: var(--border) !important;
}
/* Standard-Texte mit hellem Slate (#0F172A, #1F2937, #334155) → invertiert */
html[data-theme="dark"] [style*="color:#0F172A"],
html[data-theme="dark"] [style*="color: #0F172A"],
html[data-theme="dark"] [style*="color:#1F2937"],
html[data-theme="dark"] [style*="color: #1F2937"],
html[data-theme="dark"] [style*="color:#1E293B"],
html[data-theme="dark"] [style*="color: #1E293B"],
html[data-theme="dark"] [style*="color:#222"],
html[data-theme="dark"] [style*="color: #222"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"] { color: var(--text) !important; }
/* Muted text */
html[data-theme="dark"] [style*="color:#64748B"],
html[data-theme="dark"] [style*="color: #64748B"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #475569"],
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#888"],
html[data-theme="dark"] [style*="color: #888"] { color: var(--text-muted) !important; }
html[data-theme="dark"] [style*="color:#94A3B8"],
html[data-theme="dark"] [style*="color: #94A3B8"],
html[data-theme="dark"] [style*="color:#999"],
html[data-theme="dark"] [style*="color: #999"],
html[data-theme="dark"] [style*="color:#CBD5E1"],
html[data-theme="dark"] [style*="color: #CBD5E1"] { color: var(--text-faint) !important; }
/* Inputs — Hintergrund und Border */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--slate-100) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-faint) !important; }
/* Hero-Selectoren bleiben transparenter Glas-Look */
html[data-theme="dark"] .page-hero select,
html[data-theme="dark"] .page-hero input[type="month"],
html[data-theme="dark"] .page-hero input[type="date"] {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.3) !important;
}
/* Dropdown-Optionen im Hero — weiß bleiben für Lesbarkeit */
html[data-theme="dark"] .page-hero select option { background: var(--panel) !important; color: var(--text) !important; }
/* Tabellen in Dark — header/row contrast */
html[data-theme="dark"] table th { color: var(--text); }
html[data-theme="dark"] table td { color: var(--text); }
/* Dark-Mode Hover für Schichten-Tabelle: hellerer Slate-Ton */
html[data-theme="dark"] .shifts-modern tr:hover,
html[data-theme="dark"] tr:hover { background: var(--slate-100) !important; }
/* Globale Table-Hover (Zeile 571 setzt #F0F7FF) im Dark Mode überschreiben */
html[data-theme="dark"] table tr:hover td { background: var(--slate-100) !important; color: var(--text) !important; }
/* Tabellen-Header (Teal-light Background mit weißer Schrift) — im Dark Mode in dunkleres Teal */
html[data-theme="dark"] table th { background: var(--primary-dark) !important; color: #fff !important; }
/* Geradzahlige Zeilen (var(--band) wird in Dark Mode zu Slate-100 = ok, aber explizit) */
html[data-theme="dark"] table tr:nth-child(even) td { background: var(--band) !important; }
/* KPI-Cards: starke Inline-Backgrounds (#fff) und farbige Linke Border bleiben — wir machen den Inhalt dunkel */
html[data-theme="dark"] .kpi-card { background: var(--panel) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .kpi-card * { color: var(--text); }
html[data-theme="dark"] .kpi-card .kpi-label, html[data-theme="dark"] .kpi-card [style*="color:#666"], html[data-theme="dark"] .kpi-card [style*="color: #666"] { color: var(--text-muted) !important; }
/* Login-Screen: Branding-Seite und Form-Seite explizit eindunkeln */
html[data-theme="dark"] .auth-box { background: var(--panel) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .auth-brand { background: linear-gradient(180deg, #042F2E, #0F766E) !important; }
html[data-theme="dark"] .auth-form-side { background: var(--panel) !important; color: var(--text) !important; }
html[data-theme="dark"] .auth-form-side h2, html[data-theme="dark"] .auth-form-side label, html[data-theme="dark"] .auth-form-side .hint { color: var(--text); }
html[data-theme="dark"] .auth-form-side input { background: var(--slate-100) !important; color: var(--text) !important; border-color: var(--border-strong) !important; }
/* Schichten-Action-Sidebar (dunkelblau) bleibt im Dark Mode wie sie ist — nur Konsistenz mit Tab/Hover sicherstellen */
html[data-theme="dark"] .schichten-action-sidebar { background: #0E2440 !important; }
/* .stat-Cards (Stat-Grid auf Baustellen / Suche / Tagesplan) — heller Blau-Verlauf wird zu Dark-Slate */
html[data-theme="dark"] .stat {
  background: linear-gradient(135deg, var(--slate-100), var(--panel)) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .stat .label { color: var(--text-muted) !important; }
html[data-theme="dark"] .stat .value { color: var(--primary-light) !important; }
html[data-theme="dark"] .stat .unit { color: var(--text-muted) !important; }
/* KPI-Bar in Dark Mode — Inline-Hex-Werte für Border-Color (border-left:4px solid #1976D2) bleiben farbig sichtbar als Akzent */
html[data-theme="dark"] .kpi-bar .kpi-card { background: linear-gradient(135deg, var(--slate-100), var(--panel)) !important; }
html[data-theme="dark"] .kpi-bar .kpi-card .kpi-label,
html[data-theme="dark"] .kpi-bar .kpi-card .kpi-sub { color: var(--text-muted) !important; }
html[data-theme="dark"] .kpi-bar .kpi-card .kpi-value { color: var(--primary-light) !important; }
/* Chips (Schicht-Code-Pills): farbige Backgrounds in Dark Mode etwas eindunkeln und Text-Kontrast halten */
html[data-theme="dark"] .chip { filter: brightness(0.85); }

/* === Leistungsnachweis-Tabelle (#ln-tbl-tage) im Dark Mode === */
html[data-theme="dark"] #ln-tbl-tage { background: var(--panel) !important; color: var(--text); }
html[data-theme="dark"] #ln-tbl-tage thead tr {
  background: linear-gradient(180deg, var(--slate-100), var(--panel)) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] #ln-tbl-tage thead th { color: var(--text) !important; border-bottom-color: var(--border-strong) !important; border-right-color: var(--border) !important; }
html[data-theme="dark"] #ln-tbl-tage tbody td { border-bottom-color: var(--border) !important; color: var(--text); }
html[data-theme="dark"] #ln-tbl-tage tbody td:nth-child(6),
html[data-theme="dark"] #ln-tbl-tage tbody td:nth-child(9),
html[data-theme="dark"] #ln-tbl-tage tbody td:nth-child(14),
html[data-theme="dark"] #ln-tbl-tage tbody td:nth-child(18) { border-right-color: var(--border) !important; }
/* Inputs in der Lohn-Tabelle (Quell- + Calc-Felder) */
html[data-theme="dark"] #ln-tbl-tage .ln-inp-src,
html[data-theme="dark"] #ln-tbl-tage .ln-inp-calc {
  color: var(--text) !important;
  background: transparent !important;
}
html[data-theme="dark"] #ln-tbl-tage .ln-inp-src:hover,
html[data-theme="dark"] #ln-tbl-tage .ln-inp-calc:hover {
  border-color: var(--border-strong) !important;
  background: var(--slate-100) !important;
}
html[data-theme="dark"] #ln-tbl-tage .ln-inp-src:focus,
html[data-theme="dark"] #ln-tbl-tage .ln-inp-calc:focus {
  border-color: var(--primary-light) !important;
  background: var(--primary-bg) !important;
}
html[data-theme="dark"] #ln-tbl-tage .ln-inp-calc::placeholder,
html[data-theme="dark"] #ln-tbl-tage .ln-inp-src::placeholder { color: var(--text-faint) !important; }
/* Override-Felder (gelb hinterlegt) im Dark Mode */
html[data-theme="dark"] #ln-tbl-tage .ln-inp-calc[style*="background:#FEF3C7"],
html[data-theme="dark"] #ln-tbl-tage .ln-inp-calc[style*="background: #FEF3C7"] {
  background: #422006 !important;
  color: #FCD34D !important;
  border-color: #78350F !important;
}
/* Wochentag-Badges in der ersten Spalte: Hintergrund leicht anpassen für Dark Mode */
html[data-theme="dark"] #ln-tbl-tage tbody tr[style*="background:#FFFBEB"] td:not(:first-child),
html[data-theme="dark"] #ln-tbl-tage tbody tr[style*="background: #FFFBEB"] td:not(:first-child) { background: transparent !important; }
/* Lohnarten-Tabelle (zweite Tabelle unter der Tag-Tabelle) — heller Header umstellen */
html[data-theme="dark"] .ln-document-sheet table { color: var(--text); }
html[data-theme="dark"] .ln-document-sheet thead { background: var(--slate-100) !important; }
html[data-theme="dark"] .ln-document-sheet thead th { background: var(--slate-100) !important; color: var(--text) !important; }
html[data-theme="dark"] .ln-document-sheet tbody td { color: var(--text); border-color: var(--border) !important; }
/* Lohnarten-Inputs (Bezeichnung / Lohnart / Menge / Faktor) im Dark Mode */
html[data-theme="dark"] .ln-inp-lohnart {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .ln-inp-lohnart[style*="background:#FFE082"],
html[data-theme="dark"] .ln-inp-lohnart[style*="background: #FFE082"] {
  background: #422006 !important;
  color: #FCD34D !important;
  border-color: #78350F !important;
}
/* Bemerkung-Textbox (contenteditable) */
html[data-theme="dark"] .ln-inp-bemerkung {
  background: var(--slate-100) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
/* Urlaubskonto-Inputs */
html[data-theme="dark"] .ln-inp-urlaubskonto {
  background: var(--slate-100) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
/* Document-Sheet-Container (Hauptcontainer der Leistungsnachweis-Seite) */
html[data-theme="dark"] .ln-document-sheet {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
/* Gesamt-Lohn-Footer — dicke schwarze Linie auf hellen Slate umstellen */
html[data-theme="dark"] .ln-document-sheet div[style*="border-top:2px solid #0F172A"],
html[data-theme="dark"] .ln-document-sheet div[style*="border-bottom:2px solid #0F172A"] {
  border-color: var(--border-strong) !important;
}

/* === Spezifische Schrift- und Hintergrund-Konflikte in den Lohn-Tabellen === */
/* Override-gelbes Background bei Lohnart-Inputs (#FFE082) → tiefes Bernstein mit hellem Gelb-Text */
html[data-theme="dark"] [style*="background:#FFE082"],
html[data-theme="dark"] [style*="background: #FFE082"] {
  background: #422006 !important;
  color: #FCD34D !important;
}
/* Gold-Gesamt-Row (#FFD75A) → tiefes Gold mit hellem Gelb-Text */
html[data-theme="dark"] [style*="background:#FFD75A"],
html[data-theme="dark"] [style*="background: #FFD75A"] {
  background: #78350F !important;
  color: #FEF3C7 !important;
}
/* Lohnarten-Tabelle Header (#EEE) → dunkler Slate */
html[data-theme="dark"] [style*="background:#EEE"],
html[data-theme="dark"] [style*="background: #EEE"],
html[data-theme="dark"] thead[style*="background:#EEE"] {
  background: var(--slate-100) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] thead[style*="background:#EEE"] th { color: var(--text) !important; }
/* Korrektur-Rows (#FFF8E1) sind schon abgedeckt durch früheren Override für #FEF3C7 etc. — sicherheitshalber ergänzen */
html[data-theme="dark"] [style*="background:#FFF8E1"],
html[data-theme="dark"] [style*="background: #FFF8E1"] {
  background: #422006 !important;
  color: #FCD34D !important;
}
/* === Inline-Color-Werte für farbige Lohn-Spalten und Status-Labels === */
/* Bernstein-Texte (Grundlohn-Spalten 15/17/20€) — dunkelbernstein → hellbernstein */
html[data-theme="dark"] [style*="color:#854F0B"],
html[data-theme="dark"] [style*="color: #854F0B"],
html[data-theme="dark"] [style*="color:#92400E"],
html[data-theme="dark"] [style*="color: #92400E"] { color: #FCD34D !important; }
/* Blaue Texte (Funktionszuschläge SAS/Bediener/BÜP/...) — dunkelblau → hellblau */
html[data-theme="dark"] [style*="color:#1E40AF"],
html[data-theme="dark"] [style*="color: #1E40AF"],
html[data-theme="dark"] [style*="color:#1E3A8A"],
html[data-theme="dark"] [style*="color: #1E3A8A"],
html[data-theme="dark"] [style*="color:#1565C0"],
html[data-theme="dark"] [style*="color: #1565C0"],
html[data-theme="dark"] [style*="color:#1976D2"],
html[data-theme="dark"] [style*="color: #1976D2"],
html[data-theme="dark"] [style*="color:#0B5394"],
html[data-theme="dark"] [style*="color: #0B5394"] { color: #93C5FD !important; }
/* Indigo-Texte (Sonderzeiten Üstd/Nacht/Sonn/Ft) — dunkelindigo → hellindigo */
html[data-theme="dark"] [style*="color:#3730A3"],
html[data-theme="dark"] [style*="color: #3730A3"],
html[data-theme="dark"] [style*="color:#6B21A8"],
html[data-theme="dark"] [style*="color: #6B21A8"],
html[data-theme="dark"] [style*="color:#7B1FA2"],
html[data-theme="dark"] [style*="color: #7B1FA2"],
html[data-theme="dark"] [style*="color:#6A1B9A"],
html[data-theme="dark"] [style*="color: #6A1B9A"] { color: #C4B5FD !important; }
/* Grüne Texte (Urlaub-Label, Lohnfortzahlung) — dunkelgrün → hellgrün */
html[data-theme="dark"] [style*="color:#166534"],
html[data-theme="dark"] [style*="color: #166534"],
html[data-theme="dark"] [style*="color:#15803D"],
html[data-theme="dark"] [style*="color: #15803D"],
html[data-theme="dark"] [style*="color:#1D5B33"],
html[data-theme="dark"] [style*="color: #1D5B33"],
html[data-theme="dark"] [style*="color:#274E13"],
html[data-theme="dark"] [style*="color: #274E13"],
html[data-theme="dark"] [style*="color:#388E3C"],
html[data-theme="dark"] [style*="color: #388E3C"] { color: #86EFAC !important; }
/* Rote Texte (Krank-Label) — dunkelrot → hellrot */
html[data-theme="dark"] [style*="color:#991B1B"],
html[data-theme="dark"] [style*="color: #991B1B"],
html[data-theme="dark"] [style*="color:#990000"],
html[data-theme="dark"] [style*="color: #990000"],
html[data-theme="dark"] [style*="color:#a00"],
html[data-theme="dark"] [style*="color: #a00"],
html[data-theme="dark"] [style*="color:#9C0006"],
html[data-theme="dark"] [style*="color: #9C0006"],
html[data-theme="dark"] [style*="color:#C62828"],
html[data-theme="dark"] [style*="color: #C62828"] { color: #FCA5A5 !important; }
/* Bernstein-Border in Override-Inputs (#BA7517) → hellbernstein */
html[data-theme="dark"] [style*="border:1px solid #BA7517"],
html[data-theme="dark"] [style*="border-color:#BA7517"],
html[data-theme="dark"] [style*="border:1px solid #FDE68A"],
html[data-theme="dark"] [style*="border-color:#FDE68A"] {
  border-color: #78350F !important;
}
/* Dashed Borders in Lohnarten-Inputs (#BBB) → mittlerer Slate */
html[data-theme="dark"] [style*="border:1px dashed #BBB"] { border-color: var(--slate-300) !important; }

/* === Klassen-basierte Status-Farben für Dark Mode (Zertifikate, Chips, MA-Entries, Row-Status) === */
/* Zertifikate: Grün (gültig) / Gelb (läuft ab) / Rot (abgelaufen) — komplett invertieren */
html[data-theme="dark"] .cert-ok { background: #052E16 !important; color: #86EFAC !important; }
html[data-theme="dark"] .cert-soon { background: #422006 !important; color: #FCD34D !important; }
html[data-theme="dark"] .cert-expired { background: #450A0A !important; color: #FCA5A5 !important; }

/* Code-Chips */
html[data-theme="dark"] .chip { filter: none; }
html[data-theme="dark"] .chip.F { background: #052E16 !important; color: #86EFAC !important; }
html[data-theme="dark"] .chip.S { background: #172554 !important; color: #BFDBFE !important; }
html[data-theme="dark"] .chip.N { background: #1E1B4B !important; color: #C7D2FE !important; }
html[data-theme="dark"] .chip.T { background: var(--slate-100) !important; color: var(--text) !important; }
html[data-theme="dark"] .chip.FR { background: var(--slate-100) !important; color: var(--text-muted) !important; }
html[data-theme="dark"] .chip.U { background: #4A1B0C !important; color: #FED7AA !important; }
html[data-theme="dark"] .chip.K { background: #450A0A !important; color: #FCA5A5 !important; }
html[data-theme="dark"] .chip.B { background: #422006 !important; color: #FCD34D !important; }
html[data-theme="dark"] .chip.X { background: #1E1B4B !important; color: #C7D2FE !important; }

/* Mitarbeiter-Entry Status (in der Sidebar-Liste) */
html[data-theme="dark"] .ma-entry.ma-urlaub { background: #052E16 !important; color: #86EFAC !important; border-color: #14532D !important; }
html[data-theme="dark"] .ma-entry.ma-krank { background: #450A0A !important; color: #FCA5A5 !important; border-color: #7F1D1D !important; }
html[data-theme="dark"] .ma-entry.ma-frei { background: #172554 !important; color: #BFDBFE !important; border-color: #1E40AF !important; }
html[data-theme="dark"] .ma-entry.ma-doppelt { background: #422006 !important; color: #FCD34D !important; border-color: #78350F !important; }
/* Side-Legend (gleiches Color-Schema) */
html[data-theme="dark"] .side-legend .side-item.ma-urlaub { background: #052E16 !important; color: #86EFAC !important; border-color: #14532D !important; }
html[data-theme="dark"] .side-legend .side-item.ma-krank { background: #450A0A !important; color: #FCA5A5 !important; border-color: #7F1D1D !important; }
html[data-theme="dark"] .side-legend .side-item.ma-frei { background: #172554 !important; color: #BFDBFE !important; border-color: #1E40AF !important; }
html[data-theme="dark"] .side-legend .side-item.ma-doppelt { background: #422006 !important; color: #FCD34D !important; border-color: #78350F !important; }

/* Zeilen-Status (verschickt / unbenannt / kombiniert) in den Tabellen */
html[data-theme="dark"] tr.row-unnamed td { background: #422006 !important; color: #FCD34D !important; }
html[data-theme="dark"] tr.row-verschickt td { background: #052E16 !important; color: #86EFAC !important; }
html[data-theme="dark"] tr.row-verschickt.row-unnamed td { background: #2D2410 !important; color: #FDE68A !important; }
/* Monatsmatrix-Zellen (Wochenende / Feiertag / Name-Spalte) */
html[data-theme="dark"] .monat-matrix td.weekend { background: var(--slate-100) !important; color: var(--text); }
html[data-theme="dark"] .monat-matrix td.feiertag,
html[data-theme="dark"] .monat-matrix th.feiertag { background: #78350F !important; color: #FED7AA !important; }
html[data-theme="dark"] .monat-matrix td.name-cell { background: var(--panel) !important; color: var(--text); }
/* Drop-Target Highlight (für Drag&Drop Mitarbeiter auf Schicht) */
html[data-theme="dark"] tr.drop-target td { background: #422006 !important; box-shadow: inset 0 0 0 2px #F59E0B !important; color: #FCD34D !important; }
/* Baustellen-Hover (.baustellen-liste a:hover bg=primary, color=#fff — bleibt OK in Dark Mode) */
/* Verschickt-Button bleibt auch im Dark Mode dunkles Grün — passt */
/* Schichten-Action-Sidebar Buttons (sa-btn-primary mit gelb #FFD75A): in Dark Mode sichtbar lassen, ggf. dunkler */
html[data-theme="dark"] .schichten-action-sidebar .sa-btn-primary { background: #B8860B !important; color: #FFFFFF !important; border-color: #8B6508 !important; }
html[data-theme="dark"] .schichten-action-sidebar .sa-btn-primary:hover { background: #DAA520 !important; }
/* Login-Brand-Logo bleibt sichtbar (KD-Initialen) — wird im .auth-brand bereits dunkler */
/* Datums-Zelle der Tag-Tabelle (border-left mit hartem Grün/Rot/Bernstein) bleibt — der Text in der Zelle hat color:#0F172A bereits abgedeckt */
/* Verkettungs-Symbol bei Schichten-Tabelle in Gruppen-Folgezeile — color: gFarbe — nicht überschreiben damit Gruppen-Farbe sichtbar bleibt */

/* === Dark Mode für Cockpit-Elemente === */
/* KPI-Karten — hatten var(--card,#fff) Fallback der im Dark-Mode trotzdem weiß bleibt */
html[data-theme="dark"] .ckpi-card {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ckpi-num { color: var(--text) !important; }
html[data-theme="dark"] .ckpi-lbl { color: var(--text-muted) !important; }

/* Block-Karten im Cockpit-Grid */
html[data-theme="dark"] .ck-block {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .ck-block .ck-baustelle,
html[data-theme="dark"] .ck-block .ck-vorhaben,
html[data-theme="dark"] .ck-block .ck-row,
html[data-theme="dark"] .ck-block .ck-lbl,
html[data-theme="dark"] .ck-block .ck-footer,
html[data-theme="dark"] .ck-block .ck-header { color: var(--text) !important; }
html[data-theme="dark"] .ck-block .ck-lbl { color: var(--text-muted) !important; }
html[data-theme="dark"] .ck-block.empty {
  background: var(--bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .ck-block .ck-add-row {
  background: rgba(255,255,255,0.04) !important;
  border-top-color: var(--border) !important;
}
html[data-theme="dark"] .ck-block .ck-info-yellow {
  background: #422006 !important;
  color: #FCD34D !important;
}
html[data-theme="dark"] .ck-block .ck-ext-input,
html[data-theme="dark"] .ck-block .ck-ext-val {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ck-block .ck-ext-val.empty { color: var(--text-faint) !important; }
html[data-theme="dark"] .ck-block .ck-ext-prefix { color: var(--text-muted) !important; }

/* MA-Tabelle im Block */
html[data-theme="dark"] table.ck-ma thead {
  background: var(--slate-100) !important;
}
html[data-theme="dark"] table.ck-ma thead th { color: var(--text-muted) !important; }
html[data-theme="dark"] table.ck-ma th,
html[data-theme="dark"] table.ck-ma td {
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] table.ck-ma td.ck-zeit { color: #93C5FD !important; }
html[data-theme="dark"] table.ck-ma td.ck-zeit small { color: var(--text-muted) !important; }
html[data-theme="dark"] table.ck-ma td.ck-kfz { color: #FDBA74 !important; }
/* Verbundene MA-Karte im Dark-Mode */
html[data-theme="dark"] .ck-fnk-card { border-color: var(--border) !important; }
html[data-theme="dark"] .ck-fnk-card .ck-fnk-meta { color: var(--text-muted) !important; }
html[data-theme="dark"] .ck-fnk-card .ck-fnk-kfz { color: #FDBA74 !important; }
html[data-theme="dark"] .ck-fnk-card .ck-fnk-phone { color: var(--text-muted) !important; }
/* K/U/FR/Reserve im Dark-Mode */
html[data-theme="dark"] table.ck-ma tr.ck-row-krank  td { background: #450A0A !important; color: #FCA5A5 !important; }
html[data-theme="dark"] table.ck-ma tr.ck-row-urlaub td { background: #422006 !important; color: #FED7AA !important; }
html[data-theme="dark"] table.ck-ma tr.ck-row-frei   td { background: #052E16 !important; color: #86EFAC !important; }
html[data-theme="dark"] table.ck-ma .ck-reserve-name { background: #134E4A !important; color: #86EFAC !important; }

/* MA-Status-Sidebar (Tabs + Suche) */
html[data-theme="dark"] .ck-ma-tabs button { color: var(--text-muted) !important; }
html[data-theme="dark"] .ck-ma-tabs button:hover { background: rgba(255,255,255,0.06) !important; color: var(--text) !important; }
html[data-theme="dark"] .ck-ma-tabs button.active { color: var(--primary-light) !important; background: rgba(20,184,166,0.12) !important; }
html[data-theme="dark"] .ck-ma-search-input,
html[data-theme="dark"] .ck-sidebar .ck-ma-search {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Tab-Wechsel (Schichten/Einweisungen + Cockpit/Einweisungen) */
html[data-theme="dark"] .sch-tab { color: var(--text-muted) !important; }
html[data-theme="dark"] .sch-tab:hover { color: var(--text) !important; background: rgba(255,255,255,0.04) !important; }
html[data-theme="dark"] .sch-tab.active { color: var(--primary-light) !important; border-bottom-color: var(--primary-light) !important; }
html[data-theme="dark"] .sch-tabs { border-bottom-color: var(--border) !important; }

/* Lohnart-Cards (Verwaltungs-Tab) */
.lohnart-card { background: var(--card, #fff); border: 1px solid var(--border, #E2E8F0); border-radius: 8px; overflow: hidden; }
.lohnart-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; transition: background 0.15s; }
.lohnart-head:hover { background: var(--slate-100, #F8FAFC); }
.lohnart-head code { background: var(--slate-100, #F1F5F9); padding: 1px 5px; border-radius: 3px; font-size: 11px; color: var(--text-muted, #64748B); }
.lohnart-btn { padding: 5px 10px; border: 1px solid var(--border, #CBD5E1); border-radius: 4px; background: var(--card, #fff); color: var(--text); font-size: 11px; cursor: pointer; white-space: nowrap; }
.lohnart-btn:hover { background: var(--slate-100, #F1F5F9); }
.lohnart-btn.primary { background: var(--primary, #0F766E); color: #fff; border-color: var(--primary, #0F766E); font-weight: 600; }
.lohnart-btn.primary:hover { opacity: 0.9; }
.lohnart-hist { background: var(--slate-100, #F8FAFC); border-top: 1px solid var(--border, #E2E8F0); padding: 8px 16px; }
.lohnart-hist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lohnart-hist-table th { text-align: left; padding: 6px 10px; color: var(--muted, #64748B); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.lohnart-hist-table td { padding: 6px 10px; border-top: 1px solid var(--border, #F1F5F9); vertical-align: top; }
.lohnart-btn-del { background: #FEE2E2; border: 1px solid #FCA5A5; color: #B91C1C; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; }
.lohnart-btn-del:hover { background: #FECACA; }
/* Dark-Mode */
html[data-theme="dark"] .lohnart-card { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .lohnart-head:hover { background: var(--slate-100); }
html[data-theme="dark"] .lohnart-hist { background: var(--bg); }
html[data-theme="dark"] .lohnart-btn { background: var(--bg); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .lohnart-btn:hover { background: var(--slate-100); }
html[data-theme="dark"] .lohnart-btn-del { background: #450A0A; border-color: #7F1D1D; color: #FCA5A5; }

/* Einweisungs-Toolbar + Tabelle */
html[data-theme="dark"] .ew-toolbar {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ew-search-input,
html[data-theme="dark"] .ew-select,
html[data-theme="dark"] .ew-btn-reset {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .ew-btn-reset:hover { background: var(--slate-100) !important; }
html[data-theme="dark"] .ew-counter { color: var(--text-muted) !important; }
html[data-theme="dark"] table.ew-table {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] table.ew-table thead {
  background: var(--slate-100) !important;
}
html[data-theme="dark"] table.ew-table th {
  color: var(--text-muted) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] table.ew-table td {
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] table.ew-table tr:hover { background: var(--slate-100) !important; }
html[data-theme="dark"] table.ew-table tr.ew-row-storniert td { background: var(--bg) !important; color: var(--text-faint) !important; }
html[data-theme="dark"] table.ew-table tr.ew-row-eingesetzt td { background: rgba(20,184,166,0.08) !important; }
html[data-theme="dark"] table.ew-table tr.ew-row-abgelaufen td { background: rgba(220,38,38,0.10) !important; }
html[data-theme="dark"] .ew-status-offen      { background: #422006 !important; color: #FCD34D !important; }
html[data-theme="dark"] .ew-status-eingesetzt { background: #052E16 !important; color: #86EFAC !important; }
html[data-theme="dark"] .ew-status-abgelaufen { background: #450A0A !important; color: #FCA5A5 !important; }
html[data-theme="dark"] .ew-status-storniert  { background: var(--slate-100) !important; color: var(--text-muted) !important; }
html[data-theme="dark"] .ew-action-btn {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .ew-action-btn:hover { background: var(--slate-100) !important; }
html[data-theme="dark"] .ew-action-btn.primary { background: var(--primary-dark) !important; color: #fff !important; border-color: var(--primary-dark) !important; }
html[data-theme="dark"] .ew-action-btn.ew-action-del { background: #450A0A !important; border-color: #7F1D1D !important; color: #FCA5A5 !important; }
html[data-theme="dark"] .ew-empty {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* Cockpit Block-Aktionen (Buttons oben im Block) */
html[data-theme="dark"] .ck-actions .ck-action {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .ck-actions .ck-action:hover { background: var(--slate-100) !important; }
html[data-theme="dark"] .ck-entwurf-badge {
  background: #422006 !important;
  color: #FCD34D !important;
  border-color: #78350F !important;
}

/* Edit-Mode: Speichern/Abbrechen-Bar (war hartcodiertes Hellgelb #FEF3C7) */
html[data-theme="dark"] .ck-edit-save-bar {
  background: #422006 !important;
  border-top-color: #78350F !important;
}
html[data-theme="dark"] .ck-edit-save-bar button {
  background: var(--bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .ck-edit-save-bar button:not(.primary):hover { background: var(--slate-100) !important; }
html[data-theme="dark"] .ck-edit-save-bar button.primary {
  background: var(--primary-dark) !important;
  color: #fff !important;
  border-color: var(--primary-dark) !important;
}
html[data-theme="dark"] .ck-edit-save-bar button.primary:hover { background: var(--primary) !important; }

/* Edit-Mode: Inputs / Selects / Textareas im Block (waren mit hartcodierten Light-Mode-Farben) */
html[data-theme="dark"] .ck-block.ck-edit input,
html[data-theme="dark"] .ck-block.ck-edit select,
html[data-theme="dark"] .ck-block.ck-edit textarea {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .ck-block.ck-edit input::placeholder,
html[data-theme="dark"] .ck-block.ck-edit textarea::placeholder { color: var(--text-faint) !important; }
html[data-theme="dark"] .ck-block.ck-edit table.ck-ma input,
html[data-theme="dark"] .ck-block.ck-edit table.ck-ma select {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ck-block.ck-edit .ceb-zeit-cell { background: var(--slate-100) !important; }
html[data-theme="dark"] .ck-block.ck-edit .ck-del-row-btn {
  background: var(--bg) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ck-block.ck-edit .ck-del-row-btn:hover { background: #450A0A !important; color: #FCA5A5 !important; }
/* Datalist + Picker-Popover in Edit-Mode */
html[data-theme="dark"] .ck-picker-pop,
html[data-theme="dark"] .ck-picker-list {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .ck-picker-item:hover { background: var(--slate-100) !important; }

* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
/* App Shell — vertikale Sidebar links, Topbar oben rechts, Main darunter */
body { margin: 0; }
.app-shell { display: flex; min-height: 100vh; }