/* * Dark-Mode-Overrides für alexandermunz.de. * * Warum eine eigene CSS-Datei statt überall "dark:"-Klassen in die HTML/PHP * einzubauen: Große Teile von index.php nutzen feste Farbklassen wie * bg-white oder text-gray-500 an sehr vielen Stellen. Diese Datei überschreibt * genau diese vorhandenen Tailwind-Klassen, sobald gesetzt * ist (siehe js/theme.js) — ohne dass jede einzelne Stelle im Markup * angefasst werden muss. Neuer Code (Ratgeber-Seite, Rechtsseiten-Shell) * nutzt zusätzlich echte Tailwind "dark:"-Klassen; beides funktioniert * zusammen, weil beides an .dark auf hängt. * * Kontrast-Ziel: WCAG AA (mind. 4.5:1 für Fließtext, 3:1 für große Texte/UI). */ html.dark { color-scheme: dark; } /* ---------- Seiten- und Sektionshintergründe ---------- */ html.dark .bg-\[\#FBFBFD\] { background-color: #0B0B0D; } html.dark .bg-white { background-color: #16161A; } html.dark .bg-\[\#F5F5F7\] { background-color: #1C1C21; } html.dark .bg-gray-50 { background-color: #1A1A1F; } html.dark .bg-gray-100 { background-color: #232329; } /* Nav-Leiste im gescrollten Zustand (main.js setzt bg-white/80 dynamisch) */ html.dark .bg-white\/80 { background-color: rgba(11, 11, 13, 0.85); } /* Bereits dunkle Flächen (Footer, "Popular"-Preiskarte, dunkle Service-Kachel) bleiben dunkel, bekommen aber einen Tick mehr Kontrast zur Seite. */ html.dark .bg-\[\#1D1D1F\] { background-color: #1A1A1F; } /* ---------- Text ---------- */ html.dark .text-\[\#1D1D1F\] { color: #F5F5F7; } html.dark .text-gray-900 { color: #F5F5F7; } html.dark .text-gray-700 { color: #E4E4E7; } html.dark .text-gray-600 { color: #C7C7CC; } html.dark .text-gray-500 { color: #A8A8AE; } html.dark .text-gray-400 { color: #8E8E96; } html.dark .text-gray-300 { color: #8E8E96; } html.dark .text-gray-200 { color: #3A3A40; } /* ---------- Rahmen ---------- */ html.dark .border-gray-100 { border-color: rgba(255, 255, 255, 0.08); } html.dark .border-gray-200 { border-color: rgba(255, 255, 255, 0.12); } html.dark .border-gray-800 { border-color: rgba(255, 255, 255, 0.12); } /* ---------- Akzent-/Badge-Farben (Icon-Kreise, Pillen) ---------- */ html.dark .bg-red-100 { background-color: rgba(248, 113, 113, 0.16); } html.dark .bg-orange-100 { background-color: rgba(251, 146, 60, 0.16); } html.dark .bg-blue-50 { background-color: rgba(96, 165, 250, 0.12); } html.dark .bg-blue-100 { background-color: rgba(96, 165, 250, 0.18); } html.dark .text-red-600 { color: #FCA5A5; } html.dark .text-orange-600 { color: #FDBA74; } html.dark .text-blue-600 { color: #60A5FA; } html.dark .text-blue-900 { color: #DBEAFE; } /* Warnbox "Widerspruchsrecht" in der Datenschutzerklärung */ html.dark .bg-red-50 { background-color: rgba(248, 113, 113, 0.12); } html.dark .border-red-100 { border-color: rgba(248, 113, 113, 0.25); } /* Erfolgs-Kreis auf der Danke-Seite */ html.dark .bg-green-100 { background-color: rgba(74, 222, 128, 0.18); } html.dark .text-green-600 { color: #86EFAC; } /* ---------- Legal-Content (Impressum/Datenschutz/Ratgeber) ---------- */ html.dark .legal-content h1, html.dark .legal-content h2, html.dark .legal-content h3, html.dark .legal-content h4 { color: #F5F5F7; } html.dark .legal-content p, html.dark .legal-content ul, html.dark .legal-content li { color: #C7C7CC; } html.dark .legal-content h2 { border-bottom-color: rgba(255, 255, 255, 0.1); } /* ---------- Fokus-Sichtbarkeit (Barrierefreiheit, in beiden Modi kräftig) ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #0071E3; outline-offset: 2px; } html.dark a:focus-visible, html.dark button:focus-visible, html.dark input:focus-visible, html.dark textarea:focus-visible, html.dark select:focus-visible { outline-color: #60A5FA; } /* Sanfter Übergang beim Umschalten, ohne dass Animationen (CLS!) ausgelöst werden - nur Farben, nie Layout-Eigenschaften. */ body, section, nav, footer, .legal-content, div { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }