/* Automatisch bei System-Darkmode aktivieren */ @media (prefers-color-scheme: dark) { html, body { background-color: #0d0f12; color: #e3e3e3; } /* Allgemeine Textelemente */ body, p, span, li, td, th { color: #e3e3e3; background-color: transparent; } /* Header / Navigation / Footer anpassen */ header, .navbar, .nav, #navigation, footer, #footer { background-color: #14171d; color: #f0f0f0; border-color: #2a2f3a; } header a, .navbar a, .nav a, #navigation a, footer a, #footer a { color: #e0e6ff; } header a:hover, .navbar a:hover, .nav a:hover, #navigation a:hover, footer a:hover, #footer a:hover { color: #ffffff; } /* Haupt-Contentboxen */ #content, .content, .container, .box, .panel, .card { background-color: #171b22; color: #e3e3e3; border-color: #2a2f3a; } /* Tabellen (z.B. Event-Kalender) */ table { background-color: #171b22; color: #e3e3e3; border-color: #2a2f3a; } th { background-color: #202633; color: #f0f0f0; } tr:nth-child(even) { background-color: #141922; } tr:nth-child(odd) { background-color: #171b22; } /* Formulare / Inputs */ input, select, textarea { background-color: #10141b; color: #e3e3e3; border: 1px solid #2a2f3a; } input::placeholder, textarea::placeholder { color: #888; } /* Buttons */ button, input[type="submit"], .btn { background-color: #2563eb; color: #f9fafb; border: 1px solid #1d4ed8; } button:hover, input[type="submit"]:hover, .btn:hover { background-color: #1d4ed8; } /* Links allgemein */ a { color: #60a5fa; } a:hover { color: #93c5fd; } /* Rahmen/Trenner */ hr { border-color: #2a2f3a; } /* Schatten bei Boxen etwas dezenter halten */ .box, .panel, .card, .content, .container { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); } } /* Optional: Darkmode via Klasse .dark-mode auf oder erzwingen */ html.dark-mode, body.dark-mode { background-color: #0d0f12; color: #e3e3e3; } html.dark-mode header, html.dark-mode .navbar, html.dark-mode #navigation, html.dark-mode footer, html.dark-mode #footer { background-color: #14171d; color: #f0f0f0; border-color: #2a2f3a; } /* etc. – du kannst hier die gleichen Regeln wie oben ohne @media noch einmal mit .dark-mode-Präfix verwenden */