/* ===== Design-Umschalter: Dunkel / Hoher Kontrast (Einstellungen → Anzeige) ===== Lädt nach style.css und design.css. i18n.js setzt die Klasse am (html.dark / html.high-contrast). Schriftfarben aus fest eingetragenen Farben (z.B. color:#666) korrigiert a11y.js automatisch, hier werden vor allem die Flächen umgefärbt. */ /* ---------- Dunkel ---------- */ html.dark { color-scheme: dark; --d-bg: #121412; --d-card: #1e211e; --d-card2: #272b27; --d-line: #3a3f3a; --d-text: #e8ebe6; --d-muted: #b4bbb3; --d-shadow: none; --light-bg: #272b27; --border-color: #3a3f3a; --text-color: #e8ebe6; --light-text: #b4bbb3; } html.dark, html.dark body, html.dark .as-layout, html.dark .admin-layout, html.dark #app { background: var(--d-bg) !important; color: var(--d-text); } html.dark :is(.card, .admin-card, .tasks-container, .modal-content, .login-container, .comment-item, .news-post, .stats-info, .admin-info-banner, .admin-news-banner, .guide-box, .bottom-nav, #driveNoteBody, table.stacked tr, .putzplan-table .putz-col-sticky, .vac-unit button, #helpPanel, .task-item, .my-info-item, .my-info-text) { background: var(--d-card) !important; color: var(--d-text); border-color: var(--d-line) !important; } html.dark :is(.admin-card, .card) :is(.admin-card, .card) { background: var(--d-card2) !important; } /* fest eingetragene helle Flächen (style="background:#fff" usw.) */ html.dark [style*="background:#fff"], html.dark [style*="background: #fff"], html.dark [style*="background:white"], html.dark [style*="background: white"], html.dark [style*="background-color:#fff"], html.dark [style*="background-color: #fff"] { background: var(--d-card) !important; } html.dark [style*="background:#f"]:not([style*="background:#fff"]), html.dark [style*="background: #f"]:not([style*="background: #fff"]), html.dark [style*="background:#e"], html.dark [style*="background: #e"] { background: var(--d-card2) !important; } /* Farbige Hinweise (gelb/rot/grün) als dunkle Tönung statt Pastell */ html.dark :is(.task-item.task-warning, .extra-chip, .my-info-banner, .backup-state.bad) { background: #3a3218 !important; } html.dark :is(.task-item.task-error, .task-item.incomplete-late, .my-info-item.unread, .my-info-text.unread, .btn-danger:hover) { background: #3d1f1d !important; } html.dark :is(.shift-chip, .backup-state.ok, .bottom-nav button.active) { background: #1f3322 !important; } html.dark #asGrid .shift-chip.mine { background: #1b2c3d !important; } html.dark .day-progress-bar { background: #3a3f3a; } html.dark .ls-intro { background: #3a3218 !important; color: #f3ecd0 !important; border-color: #8a7a2a !important; } /* Eingabefelder, Tabellen, Knöpfe */ html.dark :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea, .ql-container, .ql-toolbar) { background: #161916 !important; color: var(--d-text) !important; border-color: #555c55 !important; } html.dark .ql-editor { color: var(--d-text); } html.dark .ql-snow .ql-stroke { stroke: var(--d-text); } html.dark .ql-snow .ql-fill { fill: var(--d-text); } html.dark .ql-snow .ql-picker { color: var(--d-text); } html.dark :is(table, th, td) { border-color: var(--d-line) !important; } html.dark :is(th, thead td) { background: var(--d-card2) !important; color: var(--d-text); } html.dark .btn:not(.btn-primary):not(.btn-success):not(.btn-warning), html.dark .page-tab, html.dark .pw-toggle, html.dark .drive-toolbar-btn, html.dark .date-nav .btn-sm, html.dark button[style*="#2ea6ff"] { background: var(--d-card2) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; } html.dark .btn-danger { color: #ff9a92 !important; border-color: #7a3a35 !important; } html.dark .page-tab.active, html.dark .page-tab[aria-selected="true"] { background: var(--d-card) !important; } html.dark a:not(.btn) { color: #9fd4ff; } html.dark :is(h1, h2, h3, h4, .as-header h1, .admin-header h1) { color: #9ed36a !important; } html.dark hr { border-color: var(--d-line); } html.dark img, html.dark video { filter: brightness(.92); } html.dark #helpBubble { background: #3a3218 !important; color: #fff !important; border-color: #8a7a2a !important; } html.dark #helpPanel .hp-q { background: #1b2c3d !important; } /* ---------- Hoher Kontrast: Schwarz / Weiß / Gelb (WCAG AAA, mind. 7:1) ---------- */ html.high-contrast { color-scheme: dark; --d-bg: #000; --d-card: #000; --d-line: #fff; --d-text: #fff; --d-muted: #fff; --d-shadow: none; --primary-color: #ffe600; --light-bg: #000; --border-color: #fff; --text-color: #fff; --light-text: #fff; } html.high-contrast, html.high-contrast body, html.high-contrast .as-layout, html.high-contrast .admin-layout, html.high-contrast #app { background: #000 !important; color: #fff !important; } /* Alle Flächen schwarz, alle Schrift weiß – farbige Pastellflächen gibt es hier nicht */ html.high-contrast body *:not(svg):not(svg *):not(img):not(video):not(canvas):not(iframe):not(.btn-primary):not(.btn-primary *):not(button.active):not(button.active *):not(.page-tab.active):not(.page-tab.active *):not([aria-pressed="true"]):not([aria-pressed="true"] *):not([aria-selected="true"]):not([aria-selected="true"] *):not([aria-checked="true"]):not([aria-checked="true"] *) { background-color: #000 !important; background-image: none !important; color: #fff !important; text-shadow: none !important; box-shadow: none !important; } html.high-contrast :is(.card, .admin-card, .tasks-container, .modal-content, .login-container, .news-post, .comment-item, .task-item, table.stacked tr, .guide-box, #helpPanel, .bottom-nav, .stats-info) { border: 2px solid #fff !important; } html.high-contrast :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea, .ql-container, .ql-toolbar, .btn, button, .page-tab) { border: 2px solid #fff !important; } /* Gewählt / Hauptaktion: Gelb mit schwarzer Schrift */ html.high-contrast :is(.btn-primary, button.active, .page-tab.active, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]), html.high-contrast :is(.btn-primary, button.active, .page-tab.active, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) * { background-color: #ffe600 !important; background-image: none !important; color: #000 !important; border-color: #ffe600 !important; } html.high-contrast :is(.btn-primary, button.active, .page-tab.active, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) * { border-color: transparent !important; } html.high-contrast a:not(.btn) { color: #ffe600 !important; text-decoration: underline !important; } html.high-contrast :is(.btn-danger, .info-badge) { color: #ff8c8c !important; border-color: #ff8c8c !important; } html.high-contrast .day-progress-bar { background: #000 !important; border: 2px solid #fff; } html.high-contrast .day-progress-bar > * { background: #ffe600 !important; } html.high-contrast :focus-visible { outline: 4px solid #ffe600 !important; outline-offset: 2px !important; } html.high-contrast ::placeholder { color: #ddd !important; opacity: 1; } html.high-contrast input[type="checkbox"], html.high-contrast input[type="radio"] { accent-color: #ffe600; } html.dark .duty-banner, html.dark .duty-banner * { background: #1f3322 !important; color: #d6f0d8 !important; border-color: #3f6b44 !important; } /* Menü links (und „Mehr“-Blatt am Handy) im Dunkel-Modus schwarz */ html.dark .as-sidebar, html.dark .admin-sidebar { background: #000 !important; color: #fff !important; border-right: 1px solid var(--d-line); box-shadow: none !important; } html.dark :is(.as-sidebar, .admin-sidebar) :is(button, a) { color: #fff !important; } html.dark :is(.as-sidebar, .admin-sidebar) :is(button, a):hover { background: #1f2a20 !important; } html.dark :is(.as-sidebar, .admin-sidebar) :is(.active, [aria-current="page"]) { background: #2f5a1a !important; color: #fff !important; }