/* ============================================================ FKT-Manager: Dark Mode v2 (Opt-in) ============================================================ Ab dieser Version wird Dark Mode NICHT mehr automatisch an die OS-Einstellung gekoppelt, sondern vom Benutzer explizit über die Buttons in der Fußzeile gewählt. Standard = Hell. Die Auswahl wird per localStorage gemerkt und beim nächsten Besuch automatisch wiederhergestellt. Aktivierung erfolgt über das Attribut data-theme="dark" am -Element. Ein kleines Inline-Skript in text_header.php setzt es noch vor dem ersten Rendering, damit es kein Hell-zu-Dunkel-Flackern beim Seitenwechsel gibt. ============================================================ */ :root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; /* ── Token-Overrides für Dark Mode ────────────────────── */ /* Neutralfarben – dunkler Hintergrund, heller Text. text-muted wurde von #7C7C78 auf #9A9A95 angehoben, damit Labels wie "DESIGN" / "SCHRIFT" in der Preferences-Leiste auch auf dunklem Hintergrund klar lesbar sind (vorher 4.4:1 auf bg, jetzt ~6.5:1 → AA-konform). */ --bg: #0F1419; --surface: #1A1F26; --border: #2D333B; --border-light: #242930; --text: #EBEBEB; --text-mid: #B4B4B0; --text-muted: #9A9A95; /* Navy-Token werden im Dark Mode nicht heller gesetzt, weil sie als Hintergrund für weiße Schrift (in aktiven Buttons) genug Tiefe brauchen. Hover-Lesbarkeit wird stattdessen über gezielte Component-Überschreibungen weiter unten gelöst. */ --navy: #4A6AA8; --navy-light: #5C7DBF; --navy-muted: #4C5F85; --navy-wash: #1D2A42; --navy-tint: #161F30; /* Akzent-Farben heller, damit auf dunklem Grund lesbar */ --copper: #D98F5E; --copper-dark: #BC7645; --copper-light: #2D1F17; --copper-wash: #351F14; --sea: #45A09D; --sea-light: #14312F; --plum: #A284BE; --plum-light: #2A1E32; --amber: #D1A445; --amber-light: #2A2217; --rose: #D18697; --rose-light: #2E1D23; /* Status: dunklere Grün-/Rot-Untertöne */ --danger: #DB5746; --danger-light: #371611; --success: #4AA366; --success-light: #10301A; /* Shadows stärker, damit Abstufungen sichtbar bleiben */ --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --sh-md: 0 4px 12px rgba(0, 0, 0, 0.50); --sh-lg: 0 12px 28px rgba(0, 0, 0, 0.60); --sh-focus: 0 0 0 3px rgba(92, 125, 191, 0.45); } /* ── Header: eigener, ruhiger dunkler Ton ─────────────── */ html[data-theme="dark"] .site-header { background: #11182A; color: #EBEBEB; } /* ── Login-Seite ───────────────────────────────────────── */ html[data-theme="dark"] .login-page { background: var(--bg); } html[data-theme="dark"] .login-card { background: var(--surface); } html[data-theme="dark"] .login-header { background: #11182A; } html[data-theme="dark"] .login-alert--fehler { background: #2A1714; color: #F5B1A7; border-color: #6B3429; } html[data-theme="dark"] .login-alert--timeout { background: #2A241A; color: #F4D35E; border-color: #6B5C28; } /* ── Alerts: feste Hex-Farben aus style.css überschreiben ── */ html[data-theme="dark"] .alert--ok { background: var(--success-light); color: #8DD4A1; border-color: #2B5A3B; } html[data-theme="dark"] .alert--fehler { background: var(--danger-light); color: #F5B1A7; border-color: #6B3429; } /* ── Tabellen: Hover, Header, Trennlinien ─────────────── */ html[data-theme="dark"] .data-table tbody tr:hover { background: var(--navy-wash); } html[data-theme="dark"] .data-table thead th { background: var(--navy-wash); color: var(--text); border-bottom-color: var(--border); } html[data-theme="dark"] .data-table td { border-bottom-color: var(--border-light); } /* ── Inputs/Selects ───────────────────────────────────── */ html[data-theme="dark"] .form-group input, html[data-theme="dark"] .form-group select, html[data-theme="dark"] .form-group textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--bg); color: var(--text); border-color: var(--border); } html[data-theme="dark"] .form-group input:focus, html[data-theme="dark"] .form-group select:focus, html[data-theme="dark"] .form-group textarea:focus { background: var(--surface); } /* ── Modal-Dialog ──────────────────────────────────────── */ html[data-theme="dark"] .gen-modal { background: rgba(0, 0, 0, 0.65); } html[data-theme="dark"] .gen-modal__dialog { background: var(--surface); color: var(--text); } /* ── Sticky-Save-Bar ───────────────────────────────────── */ html[data-theme="dark"] .form-actions--sticky { background: var(--surface); border-top-color: var(--border); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3); } /* ── Card-Layout ──────────────────────────────────────── */ html[data-theme="dark"] .data-table--cards tr { background: var(--surface); border-color: var(--border); } /* ── Button-Outlines ──────────────────────────────────── */ html[data-theme="dark"] .btn--outline { color: var(--text); } html[data-theme="dark"] .btn--outline:hover { background: var(--navy-wash); color: var(--text); } /* ── Avatar im Header ─────────────────────────────────── */ html[data-theme="dark"] .avatar { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.85); } /* ── Links etwas dezenter ─────────────────────────────── */ html[data-theme="dark"] a { color: var(--copper); } html[data-theme="dark"] a:hover { color: var(--copper-dark); } /* ── Scrollbars (nur WebKit) ──────────────────────────── */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ── Bilder leicht dezenter ──────────────────────────── */ html[data-theme="dark"] img:not([src*=".svg"]) { opacity: 0.92; } /* ── Footer-Hintergrund passt ─────────────────────────── */ html[data-theme="dark"] .site-footer { background: var(--surface); color: var(--text-mid); } html[data-theme="dark"] .site-footer a { color: var(--copper); } /* ── Quick-Action-Cards (Dashboard-Hero) ───────────────── */ /* Im Light Mode sind die qa-card-Hintergründe satte Akzentfarben mit weißer Schrift. Im Dark Mode wären die hellen Token-Werte (z.B. copper #D98F5E) als Hintergrund mit weißer Schrift schlecht lesbar (2.6:1). Stattdessen verwenden wir dunkle, getönte Hintergründe mit hellem farbigen Akzent für Icon und Border – das wirkt "richtig" für Dark Mode und erfüllt AA. */ html[data-theme="dark"] .qa-card--copper { background: #2D1F17; color: var(--text); border: 1px solid var(--copper); box-shadow: 0 4px 12px rgba(0,0,0,.4); } html[data-theme="dark"] .qa-card--copper svg { color: var(--copper); } html[data-theme="dark"] .qa-card--copper:hover { background: #3A2820; color: var(--text); box-shadow: 0 8px 24px rgba(217,143,94,.25); } html[data-theme="dark"] .qa-card--navy { background: var(--navy-tint); color: var(--text); border: 1px solid var(--navy); box-shadow: 0 4px 12px rgba(0,0,0,.4); } html[data-theme="dark"] .qa-card--navy svg { color: var(--navy-light); } html[data-theme="dark"] .qa-card--navy:hover { background: var(--navy-wash); color: var(--text); box-shadow: 0 8px 24px rgba(74,106,168,.3); } html[data-theme="dark"] .qa-card--sea { background: var(--sea-light); color: var(--text); border: 1px solid var(--sea); box-shadow: 0 4px 12px rgba(0,0,0,.4); } html[data-theme="dark"] .qa-card--sea svg { color: var(--sea); } html[data-theme="dark"] .qa-card--sea:hover { background: #1E4341; color: var(--text); box-shadow: 0 8px 24px rgba(69,160,157,.25); } html[data-theme="dark"] .qa-card--plum { background: var(--plum-light); color: var(--text); border: 1px solid var(--plum); box-shadow: 0 4px 12px rgba(0,0,0,.4); } html[data-theme="dark"] .qa-card--plum svg { color: var(--plum); } html[data-theme="dark"] .qa-card--plum:hover { background: #3A2A45; color: var(--text); box-shadow: 0 8px 24px rgba(162,132,190,.25); } /* small-Text in den qa-cards: nicht mehr opacity:0.7, sondern definierte mid-Farbe, damit Lesbarkeit erhalten bleibt. */ html[data-theme="dark"] .qa-card small { opacity: 1; color: var(--text-mid); } /* ── Module Cards (Dashboard-Module) ──────────────────── */ /* Auch hier im Dark Mode farbige Akzente nur als Border und Icon, nicht als Hintergrund. */ html[data-theme="dark"] .mod { background: var(--surface); border: 1px solid var(--border); } /* ── Status-Cards in der Status-Bar ───────────────────── */ /* Die Status-Cards mit Zahlen (Verordnungen ablaufend etc.) sollen ihre Bedeutungs-Farbe behalten, aber lesbar sein. */ html[data-theme="dark"] .status-card { background: var(--surface); } html[data-theme="dark"] .status-card .status-count { color: var(--text); } html[data-theme="dark"] .status-card .status-label { color: var(--text-mid); } /* ── Preferences-Buttons (Design/Schrift) ──────────────── */ /* Im Dark Mode hat der Standard-Hover (navy-Schrift auf navy-wash) zu wenig Kontrast (~2.7:1). Wir verwenden stattdessen helleren Text auf etwas dunklerem Wash. */ html[data-theme="dark"] .user-prefs__btn:hover { background: var(--navy-tint); border-color: var(--navy-light); color: var(--text); } /* Aktiver Button: Im Dark Mode den helleren Navy-Ton (navy-light) für Hintergrund nutzen statt navy-base, damit der Kontrast zur weißen Schrift visuell als „angeleuchtet" wirkt – passt besser zum dunklen Umfeld. */ html[data-theme="dark"] .user-prefs__btn--aktiv { background: var(--navy); color: #fff; border-color: var(--navy-light); } html[data-theme="dark"] .user-prefs__btn--aktiv:hover { background: var(--navy-light); color: #fff; border-color: var(--navy-light); } /* Print: niemals Dark drucken */ @media print { html[data-theme="dark"] { color-scheme: light; } }