/* 2026-10-15 (Rückmeldung 3, Farben): weisse Schrift auf hellen Akzenten → dunklere Töne (grün #047857, amber #b45309, cyan #0e7490, sky #0369a1, orange #c2410c), Gold mit dunkler Schrift (3 Stellen) */
/* 2026-10-15 (Rückmeldung 3, Farben): harte Hex-Textfarben → Ton-Variablen (6 Stellen; Kontrast in beiden Modi) */
/* 2026-10-15 (Rückmeldung 3, Farben): Textfarben theme-sicher — color:var(--primary) → var(--link) (1×); color:var(--danger) → var(--bad) (1×); color:var(--success) → var(--tone-green) (1×) (Hellmodus: --link = --primary; Kontrast ≥ 4.5:1 in beiden Modi) */
/* SaaS Premium Styling */ 
:root {  
    --primary: #2563eb;  
    --primary-hover: #4f46e5;  
    --primary-soft: rgba(37, 99, 235, 0.05); 
    --dark: #0f172a;  
    --bg: #f3f4f6; 
    --white: #ffffff;  
    --border: rgba(0,0,0,0.08);  
    --danger: #dc2626; /* 2026-10-15 (Rückmeldung 3, Farben): vorher #ef4444 — weisse Schrift darauf 3.8:1, jetzt 4.5:1 (Löschknöpfe, rote Badges) */
    --gray-text: #5b6b7f; /* 2026-10-15 (Rückmeldung 3, Farben): vorher #64748b — auf getönten Flächen (Chips, Hinweise) 4.1, jetzt ≥ 4.8:1 */
    --success: #10b981;  
    --warning: #f59e0b; 
    --card-radius: 16px; 
} 

:root[data-theme="dark"] {  
    --bg: #0f172a;  
    --white: #1e293b;  
    --dark: #f8fafc;  
    --border: rgba(255,255,255,0.1);  
    --gray-text: #94a3b8;  
    --primary-soft: rgba(96, 165, 250, 0.1); 
} 

/* ═══════════════════════════════════════════════════════════════════════════
   NACHTMODUS-TOKENS (2026-09-24): Semantische Farben für beide Themes. Views
   nutzen diese statt fester Hex-Werte (#fff, #f8fafc, #152438 …), damit jede
   Fläche, jeder Text und jedes Badge im Dunkeln stimmig bleibt.
   · Flächen:  --surface (Karte) · --surface-2 (leise Zone, Zebra, Gantt-Ebene)
               --surface-3 (Chips, Pillen, Hinweise) · --line (solide Linie)
   · Text:     --ink (Überschrift) · --ink-2 (Fliesstext) · --muted
   · Töne:     --tone-<farbe> (Text) und --tone-<farbe>-bg (Fläche) für Badges
   · Aliasse:  --card-bg, --border-color, --border-solid, --light,
               --text-main, --text-muted (bisher in Views benutzt, nie definiert)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --line: #e2e8f0;
    --ink: #0f172a; --ink-2: #334155; --muted: #64748b;
    --shadow-1: rgba(0,0,0,0.06); --shadow-2: rgba(0,0,0,0.12);
    --card-bg: #ffffff; --border-color: rgba(0,0,0,0.08); --border-solid: #e2e8f0; --light: #f8fafc; --text-main: #0f172a; --text-muted: #64748b;
    --tone-blue: #0369a1;   --tone-blue-bg: rgba(14,165,233,0.14);
    --tone-green: #047857;  --tone-green-bg: rgba(16,185,129,0.14);
    --tone-amber: #92400e;  --tone-amber-bg: rgba(245,158,11,0.16);
    --tone-red: #991b1b;    --tone-red-bg: rgba(239,68,68,0.12);
    --tone-violet: #6d28d9; --tone-violet-bg: rgba(139,92,246,0.14);
    --tone-indigo: #3730a3; --tone-indigo-bg: rgba(99,102,241,0.14);
    --tone-orange: #9a3412; --tone-orange-bg: rgba(234,88,12,0.14);
    --tone-pink: #86198f;   --tone-pink-bg: rgba(217,70,239,0.14);
    --tone-slate: #475569;  --tone-slate-bg: rgba(100,116,139,0.14);
    --tone-navy: #1e3a8a;   --tone-navy-bg: #eff6ff;
    --tone-amber-soft: #fffbeb; --tone-amber-line: #fde68a;
    --link: #2563eb;
    --muted-2: #6b7a8c; --steel: #2e5f8a; --ok: #15803d; --bad: #b94848; --warn: #b45309; /* 2026-10-15 (Rückmeldung 3, Farben): muted-2 2.5→4.6:1, ok 3.4→4.9:1, warn 2.7→4.5:1 auf Weiss */
    --tone-gold: #7c5e12; --tone-gold-bg: rgba(185,151,62,0.16);
    /* ELWIN (2026-09-27): eigene Identitätsfarbe des Assistenten — Magenta → Violett, abgesetzt vom Cyan/Blau der App */
    --elwin: #d946ef; --elwin-2: #9333ea; --elwin-text: #a21caf; --elwin-soft: rgba(217,70,239,0.10); --elwin-soft-2: rgba(147,51,234,0.10); --elwin-line: rgba(217,70,239,0.38); --elwin-spark: #e879f9;
}
:root[data-theme="dark"] {
    --surface: #1e293b; --surface-2: #192338; --surface-3: #283548; --line: #334155;
    --ink: #f8fafc; --ink-2: #cbd5e1; --muted: #94a3b8;
    --shadow-1: rgba(0,0,0,0.35); --shadow-2: rgba(0,0,0,0.55);
    --card-bg: #1e293b; --border-color: rgba(255,255,255,0.1); --border-solid: #334155; --light: #172033; --text-main: #f8fafc; --text-muted: #94a3b8;
    --tone-blue: #7dd3fc;   --tone-blue-bg: rgba(14,165,233,0.2);
    --tone-green: #6ee7b7;  --tone-green-bg: rgba(16,185,129,0.2);
    --tone-amber: #fcd34d;  --tone-amber-bg: rgba(245,158,11,0.2);
    --tone-red: #fca5a5;    --tone-red-bg: rgba(239,68,68,0.2);
    --tone-violet: #c4b5fd; --tone-violet-bg: rgba(139,92,246,0.22);
    --tone-indigo: #a5b4fc; --tone-indigo-bg: rgba(99,102,241,0.22);
    --tone-orange: #fdba74; --tone-orange-bg: rgba(234,88,12,0.22);
    --tone-pink: #f0abfc;   --tone-pink-bg: rgba(217,70,239,0.2);
    --tone-slate: #cbd5e1;  --tone-slate-bg: rgba(148,163,184,0.18);
    --tone-navy: #bfdbfe;   --tone-navy-bg: rgba(59,130,246,0.12);
    --tone-amber-soft: rgba(245,158,11,0.1); --tone-amber-line: rgba(245,158,11,0.35);
    --link: #93c5fd;
    --muted-2: #8b9bb0; --steel: #7fb0dc; --ok: #4ade80; --bad: #f87171; --warn: #fbbf24; /* 2026-10-15 (Rückmeldung 3, Farben): muted-2 2.3→5.6:1 auf der dunklen Karte */
    --tone-gold: #e9c46a; --tone-gold-bg: rgba(185,151,62,0.22);
    --elwin: #e879f9; --elwin-2: #a855f7; --elwin-text: #f0abfc; --elwin-soft: rgba(217,70,239,0.14); --elwin-soft-2: rgba(147,51,234,0.14); --elwin-line: rgba(232,121,249,0.45); --elwin-spark: #f0abfc;
}
/* Nachtmodus: Basiselemente, die bisher Browser-Standard oder helle Werte trugen (2026-09-24) */
:root[data-theme="dark"] main a:not([class]), :root[data-theme="dark"] .container a:not([class]), :root[data-theme="dark"] .card a:not([class]) { color: var(--link); } /* Browser-Standardblau (#0000ee) war im Dunkeln unlesbar */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }
:root[data-theme="dark"] hr { border-color: var(--border); }
:root[data-theme="dark"] code, :root[data-theme="dark"] pre { background: rgba(255,255,255,0.06); color: #e2e8f0; }
:root[data-theme="dark"] .toggle-slider { background-color: #475569; box-shadow: inset 0 1px 3px rgba(0,0,0,0.4); }
:root[data-theme="dark"] .btn-save:not(.active-btn) { background: transparent; color: var(--gray-text); border-color: var(--border); } /* 2026-10-25 (UX I, P1-11) */ /* 2026-10-15 (Rückmeldung 3, Farben): graue Knöpfe (Add, Approve, Create …) trugen weisse Schrift auf #94a3b8 = 2.6:1 — jetzt Schiefer, 7:1 */
:root[data-theme="dark"] .toggle-slider:before { background-color: #e2e8f0; }
:root[data-theme="dark"] .badge-scope { background: rgba(99,102,241,0.22); color: #c7d2fe; border-color: rgba(99,102,241,0.4); }
:root[data-theme="dark"] .badge-danger { background: rgba(239,68,68,0.2); color: #fca5a5; border-color: rgba(239,68,68,0.35); }
:root[data-theme="dark"] .badge-warning { background: rgba(245,158,11,0.2); color: #fcd34d; border-color: rgba(245,158,11,0.35); }
:root[data-theme="dark"] .badge-success { background: rgba(16,185,129,0.2); color: #6ee7b7; border-color: rgba(16,185,129,0.35); }
:root[data-theme="dark"] .premium-alert.success { color: #6ee7b7; } :root[data-theme="dark"] .premium-alert.danger { color: #fca5a5; }
:root[data-theme="dark"] .filter-btn:hover { color: #93c5fd; border-color: #60a5fa; }
:root[data-theme="dark"] .filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color:var(--gray-text); }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
:root[data-theme="dark"] select option { background: #0f172a; color: #f8fafc; }
:root[data-theme="dark"] tbody tr:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.35); }
:root[data-theme="dark"] .card:hover { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.6); }
:root[data-theme="dark"] .form-row { background: var(--surface-2); }
:root[data-theme="dark"] .settings-fieldset { background: var(--surface-2); }
:root[data-theme="dark"] .summary-table .total-row td { background: var(--surface-2); }
:root[data-theme="dark"] .g-date { background: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .tech-hint { color:var(--gray-text); }
:root[data-theme="dark"] ::selection { background: rgba(96,165,250,0.35); }
:root[data-theme="dark"] .text-primary { color: #60a5fa !important; } 
:root[data-theme="dark"] .header-title-icon { color: #60a5fa !important; } 
:root[data-theme="dark"] body { color: #cbd5e1; } 
:root[data-theme="dark"] .card { background: var(--white); border-color: var(--border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5); } 
:root[data-theme="dark"] header a { color: #f8fafc; } 
:root[data-theme="dark"] th { background: #0f172a; color: #cbd5e1; border-bottom-color: var(--border); box-shadow: 0 1px 0px var(--border); } 
:root[data-theme="dark"] td { border-bottom-color: var(--border); } 
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: #0f172a; border-color: #475569; color: #f8fafc; } 
:root[data-theme="dark"] .filter-bar { background: #1e293b; border-color: var(--border); } 
:root[data-theme="dark"] .filter-btn { background: #0f172a; border-color: #475569; color: #cbd5e1; } 
:root[data-theme="dark"] .kpi-card { background: var(--white); border-color: var(--border); } 
:root[data-theme="dark"] .kpi-card.dimmed { border-left-color: #475569; opacity: 0.5; } 
:root[data-theme="dark"] .kpi-value { color: var(--dark); } 
:root[data-theme="dark"] .chart-box { background: var(--white); border-color: var(--border); } 
:root[data-theme="dark"] .chart-box h3 { color: #e2e8f0 !important; } 
:root[data-theme="dark"] .summary-table th { background: #312e81; color: #e0e7ff; border-bottom-color: #4338ca; } 
:root[data-theme="dark"] .summary-table .total-row td { background: #0f172a; border-top-color: #475569; } 
:root[data-theme="dark"] .badge { background: #334155; color: #e2e8f0; border-color: #475569; } /* 2026-09-24 Nachtmodus: ohne !important — bewusst gesetzte Inline-Farben (Status, Ergebnis) bleiben sichtbar */ 
:root[data-theme="dark"] .site-footer { background: var(--white); border-top-color: var(--border); color: var(--gray-text); } 
:root[data-theme="dark"] .settings-fieldset { background: #1e293b; border-color: var(--border); } 
:root[data-theme="dark"] .settings-grid label { color: #cbd5e1; } 
:root[data-theme="dark"] .selection-box { background: #1e293b; border-color: var(--border); } 
:root[data-theme="dark"] .readonly-val { color: #f8fafc; } 
:root[data-theme="dark"] .form-row { background: #0f172a; border-color: var(--border); } 
:root[data-theme="dark"] .last-comment-box { color: #94a3b8; } 
:root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { color: #f8fafc !important; } 

* { box-sizing: border-box; } 
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); margin: 0; padding: 0; font-size: 13px; color: #334155; display: flex; flex-direction: column; min-height: 100vh; transition: background 0.4s ease, color 0.4s ease; } 

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } 
::-webkit-scrollbar { width: 8px; height: 8px; } 
::-webkit-scrollbar-track { background: transparent; } 
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } 
::-webkit-scrollbar-thumb:hover { background: #94a3b8; } 

.sticky-topbar { position: sticky; top: 0; z-index: 1000; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); transition: background 0.4s ease, border-color 0.4s ease; } 
.sticky-topbar nav a { color: #cbd5e1; text-decoration: none; padding: 4px 12px; font-weight: 600; border-radius: 14px; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; } 
.sticky-topbar nav a.active { background: var(--primary); color: white; box-shadow: 0 4px 10px rgba(37,99,235,0.3); } 
.sticky-topbar nav a:hover:not(.active) { background: rgba(255,255,255,0.1); color: #fff; } 

header { padding: 12px 30px; display: flex; justify-content: space-between; align-items: center; } 
nav { padding: 8px 30px 12px 30px; display: flex; gap: 10px; flex-wrap: wrap; } 
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; } 

.container { padding: 30px 20px; max-width: 1600px; margin: auto; flex: 1; width: 100%; } 
.card { background: var(--white); padding: 30px; border-radius: var(--card-radius); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 10px 15px -3px rgba(0,0,0,0.05); margin-bottom: 25px; border: 1px solid var(--border); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.3s ease; animation: fadeIn 0.4s ease-out; } 
.card:hover { box-shadow: 0 10px 20px -5px rgba(0,0,0,0.05), 0 20px 25px -5px rgba(0,0,0,0.03); } 

.header-title-flex { display: flex; align-items: center; gap: 8px; margin-top: 0; margin-bottom: 20px; color: var(--gray-text); text-transform: uppercase; letter-spacing: 0.5px; } 
.header-title-flex h2 { margin: 0 !important; font-size: 13px !important; font-weight: 700; color: inherit !important; }
.header-title-icon { width: 16px; height: 16px; opacity: 0.8; } 

.table-responsive { width: 100%; max-height: 65vh; overflow-y: auto; overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); background: transparent; -webkit-overflow-scrolling: touch; } 
table { width: 100%; border-collapse: collapse; min-width: 900px; } 
th { background: #f8fafc; color: #475569; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 12px; text-align: left; position: sticky; top: 0; border-bottom: 2px solid var(--border); z-index: 10; box-shadow: 0 1px 0px var(--border); user-select: none; transition: background 0.2s; } 
td { padding: 14px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; transition: background 0.2s; } 
tbody tr { transition: transform 0.2s ease, box-shadow 0.2s ease; } 
tbody tr:hover { background-color: var(--primary-soft) !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.03); z-index: 2; position: relative; } 

.reporting-table th:nth-child(3), .reporting-table td:nth-child(3) { position: sticky; left: 0; background: var(--white); z-index: 5; border-right: 2px solid var(--border); box-shadow: 2px 0 5px rgba(0,0,0,0.02); } 
.reporting-table th:nth-child(3) { z-index: 11; } 
:root[data-theme="dark"] .reporting-table th:nth-child(3) { background: #0f172a; } 
:root[data-theme="dark"] .reporting-table td:nth-child(3) { background: var(--white); } 

.summary-table th { background: #e0e7ff; color: #3730a3; border-bottom: 2px solid #c7d2fe; box-shadow:none; pointer-events:none;} 
.summary-table td { font-size: 14px; } 
.summary-table .total-row td { font-weight: bold; background: #f8fafc; border-top: 2px solid #cbd5e1; font-size:15px;} 

.input-group { display: flex; flex-direction: column; } 
.ghost-value { font-size: 11px; color: var(--gray-text); margin-top: 4px; font-style: italic; opacity: 0.7; } 
.last-comment-box { font-size: 11px; color:var(--gray-text); margin-top: 8px; line-height: 1.5; padding-left: 8px; border-left: 2px solid var(--primary-soft); } 
.timestamp { color: var(--gray-text); font-weight: bold; margin-right: 5px; } 
.readonly-val { font-weight: 700; color: var(--dark); } 

input, select, textarea { font-size: 13px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; width: 100%; transition: all 0.3s ease; font-family: inherit; background: var(--white); } 
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); transform: translateY(-1px); } 
textarea { height: 40px; resize: vertical; } 
input[type="file"] { padding: 5px; background: transparent; border: none; } 
input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(239,68,68,0.15); } 

@keyframes pulse-save {  
    0% { transform: scale(1); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }  
    50% { transform: scale(1.02); box-shadow: 0 0 15px rgba(37,99,235,0.5); }  
    100% { transform: scale(1); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }  
} 
/* 2026-10-25 (UX I, P1-11): KNOPF-HIERARCHIE — primär (.btn-save.active-btn, .filter-btn.active, .wv-primary) = Blau, genau einer je Bereich · sekundär (.filter-btn) = Umriss ·
   Konfiguration (.filter-btn.wv-cta) = Umriss mit dunklem Text, kein Gold mehr · Gefahr (.btn-delete) = Rot · Elwin (.elwin-btn) = Violett ·
   «nichts zu speichern» (.btn-save ohne active-btn) = Umriss, gedämpft, nicht klickbar — vorher 50 % transparentes Grau, das wie «deaktiviert» wirkte (Clients «Save changes», Approve). */
.btn-save { background: transparent; color: var(--gray-text); border: 1px solid var(--border); padding: 12px 20px; border-radius: 8px; cursor: default; font-weight: 600; width: 100%; opacity: 1; pointer-events: none; transition: all 0.3s ease; } 
.btn-save.active-btn { opacity: 1; pointer-events: auto; cursor: pointer; color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); animation: pulse-save 2s infinite; } 
.btn-save.active-btn:hover { animation: none; transform: translateY(-2px); box-shadow: 0 8px 12px rgba(37,99,235,0.25); } 

.btn-delete { background: var(--danger); color: white; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.2s ease; text-align: center; text-decoration:none; display:inline-block; } 
.btn-delete:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(239,68,68,0.2); } 
.btn-export { background:linear-gradient(135deg, #047857, #059669); color: white; border: none; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-weight: 600; text-decoration:none; display:inline-flex; align-items:center; gap:8px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(16,185,129,0.25); transition: transform 0.2s ease; } 
.btn-export:hover { transform: translateY(-2px); } 

.badge { background: #f1f5f9; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #475569; border: 1px solid var(--border); display: inline-block;} 
.badge-scope { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; } 
.badge-danger { background: #fee2e2; color: #991b1b; border-color: #fca5a5; } 
.badge-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; } 
.badge-success { background: #d1fae5; color:var(--tone-green); border-color: #a7f3d0; } 

.filter-bar { background: var(--white); padding: 12px 20px; border-radius: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.02); } 
.filter-title { font-weight: 600; margin-right: 10px; color: var(--dark); min-width: 80px; } 
.filter-btn { background: transparent; border: 1px solid var(--border); padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 12px; color: var(--gray-text); font-weight: 600; text-decoration: none; transition: all 0.2s ease; user-select:none; } 
.filter-btn:hover { border-color: var(--primary); color: var(--link); background: var(--primary-soft); } 
.filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 10px rgba(37,99,235,0.2); } 
.filter-btn input[type="checkbox"] { display:none; } 

.filter-btn-green { border-color: #10b981; color:var(--tone-green); } 
.filter-btn-green:hover { border-color: #059669; color:var(--tone-green); background: rgba(16,185,129,0.1); } 
.filter-btn-green.active { background:#047857; color: #fff; border-color:#047857; box-shadow: 0 4px 10px rgba(16,185,129,0.2); } 

.filter-btn.active-danger { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 4px 10px rgba(239,68,68,0.2); } 

.global-filter-btn { background: #0f172a; border: 1px solid #1e293b; color: #cbd5e1; } 
.global-filter-btn:hover { background: #1e293b; border-color: #334155; color: #ffffff; } 
.global-filter-btn.active { background: var(--primary); border-color: var(--primary); color: #ffffff; box-shadow: 0 4px 10px rgba(37,99,235,0.4); } 

.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; vertical-align: middle; } 
.toggle-switch input { opacity: 0; width: 0; height: 0; } 
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .3s; border-radius: 24px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); } 
.toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } 
input:checked + .toggle-slider.active-slider { background-color: #10b981; } 
input:checked + .toggle-slider.demo-slider { background-color: #8b5cf6; } 
input:focus + .toggle-slider { box-shadow: 0 0 0 2px rgba(37,99,235,0.2); } 
input:checked + .toggle-slider:before { transform: translateX(18px); } 

.settings-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 25px; margin-bottom: 20px; background: rgba(0,0,0,0.01);} 
.settings-grid { display: grid; grid-template-columns: 250px 1fr; gap: 15px; align-items: center; max-width: 700px; margin-bottom: 15px; } 
.tech-hint { font-size: 11px; color: var(--gray-text); margin-left: 5px; font-family: monospace; } /* 2026-10-15 (Rückmeldung 3, Farben): 2.5 → 4.8:1 */ 
.form-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; align-items: flex-end; background: var(--white); padding: 25px; border-radius: 12px; border: 1px dashed var(--border); } 
.selection-box { background: transparent; padding: 20px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 25px; } 

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 25px; } 
.kpi-card { background: var(--white); padding: 25px; border-radius: 16px; border: 1px solid var(--border); border-left: 6px solid var(--primary); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); cursor: pointer; transition: all 0.3s ease; animation: fadeIn 0.5s ease-out; } 
.kpi-card:hover { transform: translateY(-5px); box-shadow: 0 15px 25px -5px rgba(0,0,0,0.08); } 
.kpi-card.danger { border-left-color: var(--danger); } 
.kpi-card.warning { border-left-color: var(--warning); } 
.kpi-card.success { border-left-color: var(--success); } 
.kpi-title { font-size: 12px; text-transform: uppercase; color: var(--gray-text); font-weight: 700; letter-spacing: 0.5px;} 
.kpi-value { font-size: 34px; font-weight: 800; color: var(--dark); margin-top: 10px; letter-spacing: -1px;} 

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 25px; } 
.charts-grid.single { grid-template-columns: 1fr; } 
.chart-box { background: transparent; padding: 25px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); animation: fadeIn 0.6s ease-out; min-width: 0;} 
.chart-box > div { position: relative; width: 100%; min-height: 0; } 
.site-footer { text-align: center; padding: 30px; color: var(--gray-text); font-size: 13px; margin-top: auto; border-top: 1px solid var(--border); background: transparent; } 
/* 2026-10-15 (Rückmeldung 2): Links in der Fusszeile (wilvista.com, hostblock.ch) in der Textfarbe statt Browser-Blau, ohne Unterstreichung — nur beim Überfahren unterstrichen; im Dunkelmodus eine Stufe heller als der Text */
.site-footer a { color: inherit; text-decoration: none; font-weight: 600; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .site-footer a { color: #cbd5e1; }

.login-bg {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100vw;  
    height: 100vh;  
    background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=1920'); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    z-index: 9999;  
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;  
    overflow: hidden;  
} 
.login-center-wrapper { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
} 
.login-card {  
    background: rgba(255, 255, 255, 0.05);  
    backdrop-filter: blur(24px);  
    border: 1px solid rgba(255, 255, 255, 0.15);  
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.5);  
    padding: 50px;  
    border-radius: 24px;  
    width: 400px;  
    position: relative;  
    z-index: 10000;  
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);  
} 
.login-footer { 
    width: 100%; 
    background: rgba(15, 23, 42, 0.65); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    text-align: center; 
    padding: 1.5rem; 
    color: #e2e8f0; 
    font-size: 0.9rem; 
    letter-spacing: 0.5px; 
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); 
    z-index: 10000; 
} 

.premium-alert { padding: 15px 20px; border-radius: 8px; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; animation: fadeIn 0.3s ease; } 
.premium-alert.success { background: rgba(16, 185, 129, 0.1); border-left: 4px solid var(--success); color: var(--tone-green); } 
.premium-alert.danger { background: rgba(239, 68, 68, 0.1); border-left: 4px solid var(--danger); color: var(--bad); } 

.heatmap-cell:hover { transform: scale(1.02); z-index: 10; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

@media (max-width: 992px) { .charts-grid { grid-template-columns: 1fr; } } 
@media (max-width: 768px) { 
    header { flex-direction: column; align-items: flex-start; gap: 15px; padding: 15px 20px; } 
    nav { padding: 0 20px 15px 20px; gap: 5px; } 
}