/* ============================================================ BERATUNG: Dark Mode (Opt-in) ============================================================ Dark Mode wird vom Benutzer explizit über die Buttons in der Fußzeile gewählt. Standard = Hell. Die Auswahl wird per localStorage (Schlüssel "beratung-theme") gemerkt und beim nächsten Besuch automatisch wiederhergestellt. Aktivierung erfolgt über data-theme="dark" am -Element. Ein Inline-Skript in html_head.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; --bg: #0F1419; --surface: #1A1F26; --border: #2D333B; --border-light: #242930; --text: #EBEBEB; --text-mid: #B4B4B0; --text-muted: #9A9A95; --navy: #4A6AA8; --navy-light: #5C7DBF; --navy-muted: #4C5F85; --navy-wash: #1D2A42; --navy-tint: #161F30; --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; --danger: #DB5746; --danger-light: #371611; --success: #4AA366; --success-light: #10301A; --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); --focus-ring: rgba(92, 125, 191, 0.45); } /* ── Site-Header: eigener ruhiger dunkler Ton ─────────────── */ html[data-theme="dark"] .site-header { background: #11182A; color: #EBEBEB; } /* Avatar im Header */ html[data-theme="dark"] .avatar { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.85); } /* ── Site-Footer ──────────────────────────────────────────── */ html[data-theme="dark"] .site-footer { background: var(--surface); border-top-color: var(--border); color: var(--text-mid); } html[data-theme="dark"] .footer-inner { color: var(--text-mid); } html[data-theme="dark"] .footer-inner a { color: var(--copper); } html[data-theme="dark"] .footer-inner strong { color: var(--text); } /* ── Cards & Widgets ───────────────────────────────────── */ html[data-theme="dark"] .content-card, html[data-theme="dark"] .widget, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .stat-group-box, html[data-theme="dark"] .login-card, html[data-theme="dark"] .settings-nav { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .content-card h2 { color: var(--text); } html[data-theme="dark"] .widget h3 { color: var(--text); } /* QA-Cards (Hauptnavigationsbuttons) – im Dark Mode dunkle Hintergründe mit farbigem Akzent (Border + Icon), damit auf dunklem Grund nicht überstrahlen. Übernimmt die FT-Strategie. */ 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, 0.4); } html[data-theme="dark"] .qa-card--copper i { color: var(--copper); } html[data-theme="dark"] .qa-card--copper:hover { background: #3A2820; box-shadow: 0 8px 24px rgba(217, 143, 94, 0.25); color: var(--text); } 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, 0.4); } html[data-theme="dark"] .qa-card--navy i { color: var(--navy-light); } html[data-theme="dark"] .qa-card--navy:hover { background: var(--navy-wash); box-shadow: 0 8px 24px rgba(74, 106, 168, 0.3); color: var(--text); } 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, 0.4); } html[data-theme="dark"] .qa-card--sea i { color: var(--sea); } html[data-theme="dark"] .qa-card--sea:hover { background: #1E4341; box-shadow: 0 8px 24px rgba(69, 160, 157, 0.25); color: var(--text); } 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, 0.4); } html[data-theme="dark"] .qa-card--plum i { color: var(--plum); } html[data-theme="dark"] .qa-card--plum:hover { background: #3A2A45; box-shadow: 0 8px 24px rgba(162, 132, 190, 0.25); color: var(--text); } html[data-theme="dark"] .qa-card small { opacity: 1; color: var(--text-mid); } html[data-theme="dark"] .qa-card--active { outline-color: rgba(255, 255, 255, 0.35); } html[data-theme="dark"] .qa-card--active::after { background: var(--copper); } /* Admin-Bar */ html[data-theme="dark"] .admin-bar { background: var(--navy-tint); border-color: var(--border); } html[data-theme="dark"] .admin-chip { background: var(--surface); color: var(--text-mid); border-color: var(--border); } html[data-theme="dark"] .admin-chip i { color: var(--text-muted); } html[data-theme="dark"] .admin-chip:hover { color: var(--text); border-color: var(--navy-muted); background: var(--navy-wash); } html[data-theme="dark"] .admin-chip:hover i { color: var(--copper); } html[data-theme="dark"] .admin-chip--active { background: var(--navy); color: #fff; border-color: var(--navy); } html[data-theme="dark"] .admin-chip--active i { color: var(--copper); } /* Stat-Card */ html[data-theme="dark"] .stat-card .stat-number { color: var(--text); } html[data-theme="dark"] .stat-card h3 { color: var(--text-muted); } /* Page-Header */ html[data-theme="dark"] .page-header h1 { color: var(--text); } /* ── Tabellen ──────────────────────────────────────────── */ html[data-theme="dark"] .item-list-table, html[data-theme="dark"] .item-table, html[data-theme="dark"] .stat-table { color: var(--text); } html[data-theme="dark"] .item-list-table th, html[data-theme="dark"] .item-table th, html[data-theme="dark"] .stat-table th { background: var(--navy-wash); color: var(--text); border-bottom-color: var(--border); } html[data-theme="dark"] .item-list-table td, html[data-theme="dark"] .item-table td, html[data-theme="dark"] .stat-table td { border-bottom-color: var(--border-light); } html[data-theme="dark"] .item-list-table tbody tr:hover, html[data-theme="dark"] .item-table tbody tr:hover { background: var(--navy-wash); } html[data-theme="dark"] .table-responsive { background: var(--surface); border-color: var(--border); } /* ── Inputs / Selects / Textarea ────────────────────────── WICHTIG: hier nur `background-color` (statt shorthand `background`), damit die im Light-Mode gesetzten background-image / -repeat / -position / -size für das Select-Pfeil-Icon nicht zurückgesetzt werden. */ 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"] .form-control, 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="time"], html[data-theme="dark"] input[type="datetime-local"], 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-color: var(--bg); color: var(--text); border-color: var(--border); } /* Native Date-/Time-Picker im Dark Mode: Icon invertieren, damit es auf dem dunklen Hintergrund sichtbar ist. Auch Safari (color-scheme) wird Hint, dass wir dunkle Form-Controls möchten. */ html[data-theme="dark"] .form-group input[type="date"], html[data-theme="dark"] .form-group input[type="time"], html[data-theme="dark"] .form-group input[type="datetime-local"] { color-scheme: dark; } html[data-theme="dark"] .form-group input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] .form-group input[type="time"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] .form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.85); opacity: 0.7; } html[data-theme="dark"] .form-group input:focus, html[data-theme="dark"] .form-group select:focus, html[data-theme="dark"] .form-group textarea:focus, html[data-theme="dark"] .form-control:focus { background-color: var(--surface); } html[data-theme="dark"] .form-group select { /* Hellerer Pfeil für Dark-Mode (graut leicht); die restlichen background-* Eigenschaften (no-repeat, right 12px center, 12px) bleiben aus dem Light-Mode-CSS bestehen. */ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23B4B4B0' d='M6 8L1 3h10z'/%3e%3c/svg%3e"); } html[data-theme="dark"] .form-group input::placeholder, html[data-theme="dark"] .form-group textarea::placeholder, html[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } /* Checkboxen */ html[data-theme="dark"] .form-group input[type="checkbox"], html[data-theme="dark"] .checkbox-grid input[type="checkbox"] { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .form-group input[type="checkbox"]:checked, html[data-theme="dark"] .checkbox-grid input[type="checkbox"]:checked { background-color: var(--copper); border-color: var(--copper); } html[data-theme="dark"] .checkbox-grid label { background: var(--surface); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .checkbox-grid label:hover { background: var(--navy-wash); border-color: var(--navy-muted); } /* ── Modale ────────────────────────────────────────────── */ html[data-theme="dark"] .modal-backdrop, html[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.65); } html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-box { background: var(--surface); color: var(--text); box-shadow: var(--sh-lg); } html[data-theme="dark"] .modal-content h2, html[data-theme="dark"] .modal-header h3 { color: var(--text); } html[data-theme="dark"] .modal-header { border-bottom-color: var(--border); } html[data-theme="dark"] .btn-close-modal:hover { background: var(--navy-wash); } /* Tree-Filter (Wissens-Druck) */ html[data-theme="dark"] .filter-tree { background: var(--bg); border-color: var(--border); } html[data-theme="dark"] .tree-group-title { color: var(--text); border-bottom-color: var(--border); } html[data-theme="dark"] .cat-label { color: var(--text); } html[data-theme="dark"] .entry-label { background: var(--surface); color: var(--text-mid); border-color: var(--border-light); } html[data-theme="dark"] .entry-label:hover { background: var(--navy-wash); border-color: var(--navy-muted); } /* ── Buttons ───────────────────────────────────────────── */ /* Primärbutton: Kupfer-Hintergrund + Weiß braucht im Dark Mode einen dunkleren Kupferton, damit Kontrast ≥ 4.5:1 */ html[data-theme="dark"] .btn-primary { background: #AD5F33; border-color: #AD5F33; color: #fff; } html[data-theme="dark"] .btn-primary:hover { background: #8F4A21; border-color: #8F4A21; color: #fff; } html[data-theme="dark"] .btn-secondary { color: var(--text); border-color: var(--border); } html[data-theme="dark"] .btn-secondary:hover { background: var(--navy-wash); border-color: var(--navy-muted); color: var(--text); } html[data-theme="dark"] .btn-small { background: var(--surface); color: var(--text); border-color: var(--border); } html[data-theme="dark"] .btn-small:hover { background: var(--navy-wash); border-color: var(--navy-muted); color: var(--text); } /* Skip-Link gleiches Problem wie .btn-primary */ html[data-theme="dark"] .skip-link, html[data-theme="dark"] .skip-link:focus { background: #AD5F33; color: #fff; } /* Status-Badges */ html[data-theme="dark"] .status-badge.status-active { background: var(--success-light); color: #8DD4A1; } html[data-theme="dark"] .status-badge.status-inactive { background: var(--bg); color: var(--text-muted); border-color: var(--border); } html[data-theme="dark"] .status-badge.status-warning { background: var(--amber-light); color: #F0D17A; border-color: #6E5320; } html[data-theme="dark"] .status-badge.status-danger { background: var(--danger-light); color: #F5B1A7; border-color: #6B3429; } /* Dashboard-Termin-Tabelle */ html[data-theme="dark"] .dashboard-termine .anmeldeform { background: var(--navy-wash); color: var(--text); } html[data-theme="dark"] .dashboard-termine .termin-relativ, html[data-theme="dark"] .dashboard-termine .termin-teilnehmer-max { color: var(--text-muted); } /* ── Erfolgs- und Fehlerboxen ──────────────────────────── */ html[data-theme="dark"] .success-box { background: var(--success-light); color: #8DD4A1; border-color: #2B5A3B; } html[data-theme="dark"] .error-box { background: var(--danger-light); color: #F5B1A7; border-color: #6B3429; } html[data-theme="dark"] .warning-box { background: var(--amber-light); color: #F0D17A; border-color: #6E5320; } /* Action-Result Cards im Dark Mode */ html[data-theme="dark"] .action-result { border-color: var(--border); } html[data-theme="dark"] .action-result--success { background: var(--success-light); border-color: #2B5A3B; } html[data-theme="dark"] .action-result--success .action-result__text { color: #8DD4A1; } html[data-theme="dark"] .action-result--success .action-result__icon { color: #8DD4A1; } html[data-theme="dark"] .action-result--danger { background: var(--danger-light); border-color: #6B3429; } html[data-theme="dark"] .action-result--danger .action-result__text { color: #F5B1A7; } html[data-theme="dark"] .action-result--danger .action-result__icon { color: #F5B1A7; } html[data-theme="dark"] .action-result--warning { background: var(--amber-light); border-color: #6E5320; } html[data-theme="dark"] .action-result--warning .action-result__text { color: #F0D17A; } html[data-theme="dark"] .action-result--warning .action-result__icon { color: #F0D17A; } /* Inline-Editor */ html[data-theme="dark"] .inline-editor { background: var(--navy-tint); border-color: var(--border); } /* Sortierbare Tabellen-Spaltenköpfe */ html[data-theme="dark"] .sortable-table thead th.th-sortable:hover { color: var(--copper-light); } /* SHG-Filter-Leiste */ html[data-theme="dark"] .list-filter { background: var(--navy-tint); border-color: var(--border); } html[data-theme="dark"] .list-filter select { background-color: var(--surface); border-color: var(--border); color: var(--text); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23B4B4B0' d='M6 8L1 3h10z'/%3e%3c/svg%3e"); } html[data-theme="dark"] .list-filter__reset:hover { color: var(--copper); } /* Filter-Tabs */ html[data-theme="dark"] .filter-tabs { border-bottom-color: var(--border); } html[data-theme="dark"] .filter-tab { background: var(--bg); color: var(--text-mid); border-color: var(--border); } html[data-theme="dark"] .filter-tab:hover { background: var(--navy-wash); color: var(--text); border-color: var(--navy-wash); } html[data-theme="dark"] .filter-tab--active { background: var(--copper); color: #fff; border-color: var(--copper); } html[data-theme="dark"] .filter-tab--active:hover { background: var(--copper-dark); border-color: var(--copper-dark); } html[data-theme="dark"] .filter-tab__count { background: rgba(255, 255, 255, 0.10); } /* Activity-Liste */ html[data-theme="dark"] .activity-list li { border-bottom-color: var(--border); } html[data-theme="dark"] .activity-icon--success { background: var(--success-light); color: #8DD4A1; } html[data-theme="dark"] .activity-icon--danger { background: var(--danger-light); color: #F5B1A7; } html[data-theme="dark"] .activity-icon--navy { background: var(--navy-wash); color: var(--text); } html[data-theme="dark"] .activity-detail { color: var(--text-mid); } /* Form-Abschnitt-Trennlinien dunkler */ html[data-theme="dark"] .form-section { border-top-color: var(--border); } /* ── Wizard-Tabs ───────────────────────────────────────── */ html[data-theme="dark"] .wizard-navigation { background: var(--surface); border-bottom-color: var(--border); } html[data-theme="dark"] .wizard-tab-link { color: var(--text-muted); } html[data-theme="dark"] .wizard-tab-link:hover { background: var(--navy-tint); color: var(--text); } html[data-theme="dark"] .wizard-tab-link.active { color: var(--text); background: var(--surface); border-bottom-color: var(--copper); } /* Grouped checkboxes */ html[data-theme="dark"] .grouped-checkboxes fieldset { background: var(--navy-tint); border-color: var(--border-light); } html[data-theme="dark"] .grouped-checkboxes fieldset legend { color: var(--text); } /* Knowledge-Box */ html[data-theme="dark"] .knowledge-box { background: var(--navy-wash); border-left-color: var(--copper); } html[data-theme="dark"] .kb-entry strong { color: var(--text); } html[data-theme="dark"] .kb-entry { border-bottom-color: var(--border-light); } html[data-theme="dark"] .kb-entry p { color: var(--text); } /* Add-Item-Form / Filter-Form */ html[data-theme="dark"] .add-item-form { background: var(--navy-tint); border-color: var(--border-light); } html[data-theme="dark"] .add-item-form h3 { color: var(--text); } html[data-theme="dark"] .filter-form { background: var(--surface); border-color: var(--border); } /* File-List */ html[data-theme="dark"] .file-list li { background: var(--bg); } /* Settings-Nav */ html[data-theme="dark"] .settings-nav ul li a { color: var(--text-mid); } html[data-theme="dark"] .settings-nav ul li a:hover { background: var(--navy-wash); color: var(--text); } html[data-theme="dark"] .settings-nav ul li a.active { background: var(--navy); color: #fff; } /* Stat-Category-Group / Stat-Table */ html[data-theme="dark"] .stat-category-group { background: var(--bg); border-color: var(--border-light); } html[data-theme="dark"] .stat-table th { background: var(--navy-tint); color: var(--text-muted); border-bottom-color: var(--border-light); } html[data-theme="dark"] .stat-table td { color: var(--text); border-bottom-color: var(--border-light); } /* ── Preferences-Buttons (Footer) ──────────────────────── */ html[data-theme="dark"] .user-prefs { background: var(--bg); border-bottom-color: var(--border-light); } html[data-theme="dark"] .user-prefs__btn { background: var(--surface); border-color: var(--border); color: var(--text-mid); } html[data-theme="dark"] .user-prefs__btn:hover { background: var(--navy-tint); border-color: var(--navy-light); color: var(--text); } 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); } /* ── Scrollbars (WebKit) ───────────────────────────────── */ html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ── Links ─────────────────────────────────────────────── */ html[data-theme="dark"] a { color: var(--copper); } html[data-theme="dark"] a:hover { color: var(--copper-dark); } html[data-theme="dark"] .widget-link { color: var(--copper); } html[data-theme="dark"] .widget-link:hover { color: var(--copper-dark); } /* Bilder dezenter */ html[data-theme="dark"] img:not([src*=".svg"]) { opacity: 0.92; } /* Kontakt-Live-Suche */ html[data-theme="dark"] .contact-search-results { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .contact-search-item { color: var(--text); } html[data-theme="dark"] .contact-search-item:hover, html[data-theme="dark"] .contact-search-item:focus { background: var(--navy-wash); } html[data-theme="dark"] .contact-search-item__title { color: var(--text); } html[data-theme="dark"] .contact-search-item__meta { color: var(--text-muted); } html[data-theme="dark"] .contact-search-empty { color: var(--text-muted); } /* Print: niemals Dark drucken */ @media print { html[data-theme="dark"] { color-scheme: light; } }