/* ============================================================
   Dark Mode: Überschreibt CSS-Variablen aus main.css
   Aktiviert per prefers-color-scheme ODER .dark-mode Klasse
   ============================================================ */

/* Systemeinstellung */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) {
        --color-primary: #1e6091;
        --color-secondary: #3498db;
        --color-accent: #5dade2;
        --color-cta: #42a5f5;
        --color-cta-dark: #1e88e5;
        --color-danger: #e74c3c;
        --color-alert: #e53935;

        --color-text: #e0e0e0;
        --color-text-muted: #aaa;
        --color-text-light: #888;

        --color-bg: #121212;
        --color-bg-white: #1e1e1e;
        --color-bg-light: #252525;
        --color-bg-card: #2a2a2a;

        --color-border: #3a3a3a;
        --color-border-light: #333;
    }
}

/* Manuelle Aktivierung per Toggle */
:root.dark-mode {
    --color-primary: #1e6091;
    --color-secondary: #3498db;
    --color-accent: #5dade2;
    --color-cta: #42a5f5;
    --color-cta-dark: #1e88e5;
    --color-danger: #e74c3c;
    --color-alert: #e53935;

    --color-text: #e0e0e0;
    --color-text-muted: #aaa;
    --color-text-light: #888;

    --color-bg: #121212;
    --color-bg-white: #1e1e1e;
    --color-bg-light: #252525;
    --color-bg-card: #2a2a2a;

    --color-border: #3a3a3a;
    --color-border-light: #333;
}

/* ============================================================
   Element-spezifische Overrides (hardcoded Farben in main.css)
   ============================================================ */

/* Shared selector für beide Trigger-Varianten */
@media (prefers-color-scheme: dark) { :root:not(.light-mode) { --dm-active: 1; } }
:root.dark-mode { --dm-active: 1; }

/* Header-Titel: hardcoded #fff ist bereits dunkelmode-tauglich */

/* Navigation: Hintergrund */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .site-nav,
    :root:not(.light-mode) .nav-menu {
        background-color: var(--color-bg-light);
    }
    :root:not(.light-mode) .nav-item a {
        color: var(--color-text);
    }
    :root:not(.light-mode) .nav-item.selected a,
    :root:not(.light-mode) .nav-item a:hover {
        color: #fff;
    }
}
.dark-mode .site-nav,
.dark-mode .nav-menu {
    background-color: var(--color-bg-light);
}
.dark-mode .nav-item a {
    color: var(--color-text);
}
.dark-mode .nav-item.selected a,
.dark-mode .nav-item a:hover {
    color: #fff;
}

/* Tabs */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .tab-list {
        background: var(--color-bg-light);
    }
    :root:not(.light-mode) .tab-item a {
        color: var(--color-text-muted);
    }
    :root:not(.light-mode) .tab-item.active a {
        background: var(--color-bg-card);
        color: var(--color-text);
    }
    :root:not(.light-mode) .tab-dropdown {
        background: var(--color-bg-card);
        color: var(--color-text);
        border-color: var(--color-border);
    }
}
.dark-mode .tab-list {
    background: var(--color-bg-light);
}
.dark-mode .tab-item a {
    color: var(--color-text-muted);
}
.dark-mode .tab-item.active a {
    background: var(--color-bg-card);
    color: var(--color-text);
}
.dark-mode .tab-dropdown {
    background: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* Timetable */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .timetable {
        background-color: var(--color-bg-card);
    }
    :root:not(.light-mode) .timetable td {
        color: var(--color-text);
    }
    :root:not(.light-mode) .timetable-header {
        color: var(--color-text);
    }
}
.dark-mode .timetable {
    background-color: var(--color-bg-card);
}
.dark-mode .timetable td {
    color: var(--color-text);
}
.dark-mode .timetable-header {
    color: var(--color-text);
}

/* Links */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) a { color: var(--color-accent); }
    :root:not(.light-mode) a:hover { color: var(--color-secondary); }
}
.dark-mode a { color: var(--color-accent); }
.dark-mode a:hover { color: var(--color-secondary); }

/* Formular-Elemente */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) input,
    :root:not(.light-mode) textarea,
    :root:not(.light-mode) select {
        background-color: var(--color-bg-card);
        color: var(--color-text);
        border-color: var(--color-border);
    }
    :root:not(.light-mode) input::placeholder,
    :root:not(.light-mode) textarea::placeholder {
        color: var(--color-text-light);
    }
}
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border);
}
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--color-text-light);
}

/* Tabellen */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) table {
        border-color: var(--color-border);
    }
    :root:not(.light-mode) th {
        background-color: var(--color-bg-light);
        color: var(--color-text);
    }
    :root:not(.light-mode) td {
        border-color: var(--color-border);
    }
    :root:not(.light-mode) tr:nth-child(even) {
        background-color: var(--color-bg-card);
    }
}
.dark-mode table {
    border-color: var(--color-border);
}
.dark-mode th {
    background-color: var(--color-bg-light);
    color: var(--color-text);
}
.dark-mode td {
    border-color: var(--color-border);
}
.dark-mode tr:nth-child(even) {
    background-color: var(--color-bg-card);
}

/* Karten / Boxen mit hardcoded Hintergründen */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .news-item,
    :root:not(.light-mode) .team-card,
    :root:not(.light-mode) .info-box,
    :root:not(.light-mode) .leistungen-card {
        background-color: var(--color-bg-card);
        border-color: var(--color-border);
    }
}
.dark-mode .news-item,
.dark-mode .team-card,
.dark-mode .info-box,
.dark-mode .leistungen-card {
    background-color: var(--color-bg-card);
    border-color: var(--color-border);
}

/* Feedback-Kacheln */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .fb-tile {
        background-color: var(--color-bg-card);
        border-color: var(--color-border);
    }
    :root:not(.light-mode) .fb-alert--ok {
        background-color: #1b3a1b;
        border-color: #2e7d32;
        color: #a5d6a7;
    }
    :root:not(.light-mode) .fb-alert--error {
        background-color: #3a1b1b;
        border-color: #c62828;
        color: #ef9a9a;
    }
}
.dark-mode .fb-tile {
    background-color: var(--color-bg-card);
    border-color: var(--color-border);
}
.dark-mode .fb-alert--ok {
    background-color: #1b3a1b;
    border-color: #2e7d32;
    color: #a5d6a7;
}
.dark-mode .fb-alert--error {
    background-color: #3a1b1b;
    border-color: #c62828;
    color: #ef9a9a;
}

/* Modal-Overlays */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .fb-modal__content,
    :root:not(.light-mode) .cc-overlay,
    :root:not(.light-mode) .leave-modal__content {
        background-color: var(--color-bg-white);
        color: var(--color-text);
    }
}
.dark-mode .fb-modal__content,
.dark-mode .cc-overlay,
.dark-mode .leave-modal__content {
    background-color: var(--color-bg-white);
    color: var(--color-text);
}

/* Cookie-Consent Banner */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .cc-bar {
        background-color: var(--color-bg-white);
        border-color: var(--color-border);
        color: var(--color-text);
    }
}
.dark-mode .cc-bar {
    background-color: var(--color-bg-white);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Skip-Link */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .skip-link:focus {
        background: var(--color-bg-white);
        color: var(--color-text);
    }
}
.dark-mode .skip-link:focus {
    background: var(--color-bg-white);
    color: var(--color-text);
}

/* ============================================================
   Content-Text: Hardcodierte Farben überschreiben
   (.dse, timetable-events, feedback, leave-modal etc.)
   ============================================================ */

/* DSE (Datenschutz, Impressum, Barrierefreiheit) */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .dse { color: var(--color-text); }
    :root:not(.light-mode) .dse-updated { color: var(--color-text-muted); }
    :root:not(.light-mode) .dse h3 { color: var(--color-text); }
    :root:not(.light-mode) .dse h2 { border-bottom-color: var(--color-border); }
    :root:not(.light-mode) .dse-right-item { background-color: var(--color-bg-card); }
}
.dark-mode .dse { color: var(--color-text); }
.dark-mode .dse-updated { color: var(--color-text-muted); }
.dark-mode .dse h3 { color: var(--color-text); }
.dark-mode .dse h2 { border-bottom-color: var(--color-border); }
.dark-mode .dse-right-item { background-color: var(--color-bg-card); }

/* Timetable: Event-Box */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .timetable-next-event__title { color: var(--color-text); }
    :root:not(.light-mode) .timetable-next-event__date { color: var(--color-text-muted); }
    :root:not(.light-mode) .timetable-next-event__hours { color: var(--color-text); }
    :root:not(.light-mode) .timetable-next-event__detail { color: var(--color-text-muted); }
    :root:not(.light-mode) .timetable-next-event { background-color: var(--color-bg-card); }
}
.dark-mode .timetable-next-event__title { color: var(--color-text); }
.dark-mode .timetable-next-event__date { color: var(--color-text-muted); }
.dark-mode .timetable-next-event__hours { color: var(--color-text); }
.dark-mode .timetable-next-event__detail { color: var(--color-text-muted); }
.dark-mode .timetable-next-event { background-color: var(--color-bg-card); }

/* Feedback-Formular */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .fb-checkbox { color: var(--color-text-muted); }
    :root:not(.light-mode) .fb-info-box { color: var(--color-text); background-color: var(--color-bg-card); }
}
.dark-mode .fb-checkbox { color: var(--color-text-muted); }
.dark-mode .fb-info-box { color: var(--color-text); background-color: var(--color-bg-card); }

/* Leave-Site Modal */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) #leave-site-cancel { background: var(--color-bg-card); color: var(--color-text); }
}
.dark-mode #leave-site-cancel { background: var(--color-bg-card); color: var(--color-text); }

/* Sprechzeiten-Sondertext */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .sz-closed-text { color: var(--color-text-muted); }
    :root:not(.light-mode) .sz-termin-hint { color: #e8a74e; }
}
.dark-mode .sz-closed-text { color: var(--color-text-muted); }
.dark-mode .sz-termin-hint { color: #e8a74e; }

/* Index-Cards (Startseite: Sprechzeiten, Akutsprechstunde, Telefon) */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .index-card {
        background: var(--color-bg-card);
        border-color: var(--color-border);
    }
    :root:not(.light-mode) .index-card--highlight {
        border-left-color: var(--color-accent);
    }
    :root:not(.light-mode) .index-card p,
    :root:not(.light-mode) .index-card li,
    :root:not(.light-mode) .index-card td {
        color: var(--color-text);
    }
    :root:not(.light-mode) .index-aside img {
        border-radius: 14px;
    }
}
.dark-mode .index-card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}
.dark-mode .index-card--highlight {
    border-left-color: var(--color-accent);
}
.dark-mode .index-card p,
.dark-mode .index-card li,
.dark-mode .index-card td {
    color: var(--color-text);
}
.dark-mode .index-aside img {
    border-radius: 14px;
}

/* Google Maps Consent + Iframe-Wrapper */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .map-wrapper {
        border-color: var(--color-border);
    }
    :root:not(.light-mode) .map-iframe {
        filter: invert(1) hue-rotate(180deg);
    }
    :root:not(.light-mode) #map-consent-btn:hover {
        background: var(--color-accent);
        color: #fff;
    }
}
.dark-mode .map-wrapper {
    border-color: var(--color-border);
}
.dark-mode .map-iframe {
    filter: invert(1) hue-rotate(180deg);
}
.dark-mode #map-consent-btn:hover {
    background: var(--color-accent);
    color: #fff;
}

/* Cookie-Consent-Dialog (ccv4) */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) #ccv4-modal {
        background: #1e1e1e !important;
        color: #e0e0e0 !important;
    }
    :root:not(.light-mode) #ccv4-tabs {
        background: #252525 !important;
        border-bottom-color: #3a3a3a !important;
    }
    :root:not(.light-mode) #ccv4-tabs button {
        color: #5dade2 !important;
    }
    :root:not(.light-mode) #ccv4-tabs button[aria-selected='true'] {
        background: #1e1e1e !important;
    }
    :root:not(.light-mode) #ccv4-panels h2 {
        color: #5dade2 !important;
    }
    :root:not(.light-mode) #ccv4-panels p {
        color: #bbb !important;
    }
    :root:not(.light-mode) .ccv4-cat {
        border-top-color: #3a3a3a !important;
    }
    :root:not(.light-mode) .ccv4-title {
        color: #e0e0e0 !important;
    }
    :root:not(.light-mode) .ccv4-cat p {
        color: #aaa !important;
    }
    :root:not(.light-mode) #ccv4-actions {
        border-top-color: #3a3a3a !important;
    }
    :root:not(.light-mode) #ccv4-decline,
    :root:not(.light-mode) #ccv4-custom {
        background: #252525 !important;
        color: #e0e0e0 !important;
        border-color: #3a3a3a !important;
    }
    :root:not(.light-mode) #ccv4-decline:hover,
    :root:not(.light-mode) #ccv4-custom:hover {
        background: #333 !important;
    }
}
.dark-mode #ccv4-modal {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}
.dark-mode #ccv4-tabs {
    background: #252525 !important;
    border-bottom-color: #3a3a3a !important;
}
.dark-mode #ccv4-tabs button {
    color: #5dade2 !important;
}
.dark-mode #ccv4-tabs button[aria-selected='true'] {
    background: #1e1e1e !important;
}
.dark-mode #ccv4-panels h2 {
    color: #5dade2 !important;
}
.dark-mode #ccv4-panels p {
    color: #bbb !important;
}
.dark-mode .ccv4-cat {
    border-top-color: #3a3a3a !important;
}
.dark-mode .ccv4-title {
    color: #e0e0e0 !important;
}
.dark-mode .ccv4-cat p {
    color: #aaa !important;
}
.dark-mode #ccv4-actions {
    border-top-color: #3a3a3a !important;
}
.dark-mode #ccv4-decline,
.dark-mode #ccv4-custom {
    background: #252525 !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}
.dark-mode #ccv4-decline:hover,
.dark-mode #ccv4-custom:hover {
    background: #333 !important;
}

/* Cookie-Tabelle (Datenschutzseite) */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .dse-cookie-table tbody tr:nth-child(even) {
        background: var(--color-bg-light);
    }
    :root:not(.light-mode) .dse-cookie-table tbody tr:nth-child(odd) {
        background: var(--color-bg-card);
    }
    :root:not(.light-mode) .dse-cookie-table th,
    :root:not(.light-mode) .dse-cookie-table td {
        border-color: var(--color-border);
        color: var(--color-text);
    }
    :root:not(.light-mode) .dse-cookie-table code {
        background: var(--color-bg-light);
        color: var(--color-accent);
    }
}
.dark-mode .dse-cookie-table tbody tr:nth-child(even) {
    background: var(--color-bg-light);
}
.dark-mode .dse-cookie-table tbody tr:nth-child(odd) {
    background: var(--color-bg-card);
}
.dark-mode .dse-cookie-table th,
.dark-mode .dse-cookie-table td {
    border-color: var(--color-border);
    color: var(--color-text);
}
.dark-mode .dse-cookie-table code {
    background: var(--color-bg-light);
    color: var(--color-accent);
}

/* Feedback-Formulare und -Modals */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .fb-input,
    :root:not(.light-mode) .fb-type-card,
    :root:not(.light-mode) .fb-modal .fb-input {
        background: var(--color-bg-card);
        color: var(--color-text);
        border-color: var(--color-border);
    }
    :root:not(.light-mode) .fb-modal select.fb-input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    }
    :root:not(.light-mode) .fb-alert--success {
        background: #0d3320;
        color: #6ee7b7;
        border-color: #065f46;
    }
    :root:not(.light-mode) .fb-alert--error {
        background: #3b1018;
        color: #fca5a5;
        border-color: #7f1d1d;
    }
    :root:not(.light-mode) .fb-fieldset-hint {
        background: #3b2f10;
        color: #fbbf24;
        border-color: #854d0e;
    }
    :root:not(.light-mode) .fb-modal__cancel,
    :root:not(.light-mode) .leave-actions button {
        background: var(--color-bg-light);
        color: var(--color-text);
        border-color: var(--color-border);
    }
    :root:not(.light-mode) .fb-modal__cancel:hover {
        background: var(--color-bg-card);
    }
    :root:not(.light-mode) #leave-site-cancel {
        background: var(--color-bg-light);
        color: var(--color-text);
    }
    /* Online-Formulare */
    :root:not(.light-mode) .form-type-card {
        background: var(--color-bg-card);
        border-color: var(--color-border);
    }
    :root:not(.light-mode) .form-type-card__label {
        color: var(--color-accent);
    }
    :root:not(.light-mode) .form-type-card__desc {
        color: var(--color-text-muted);
    }
    :root:not(.light-mode) .form-type-card--rezept:hover {
        border-color: #27ae60;
        background: rgba(39,174,96,.12);
    }
    :root:not(.light-mode) .form-type-card--ueberweisung:hover {
        border-color: #2980b9;
        background: rgba(41,128,185,.12);
    }
    :root:not(.light-mode) .form-type-card--termin:hover {
        border-color: #e67e22;
        background: rgba(230,126,34,.12);
    }
    :root:not(.light-mode) .form-avail-action {
        border-color: var(--color-border);
        color: var(--color-text-muted);
    }
    :root:not(.light-mode) .form-avail-cb {
        background: var(--color-bg-card);
        border-color: var(--color-border);
    }
    :root:not(.light-mode) .form-avail-cb.active {
        border-color: #e67e22;
        background: rgba(230, 126, 34, .15);
    }
    :root:not(.light-mode) .form-avail-closed {
        background: var(--color-bg-light);
    }
}
.dark-mode .fb-input,
.dark-mode .fb-type-card,
.dark-mode .fb-modal .fb-input {
    background: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border);
}
.dark-mode .fb-modal select.fb-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
.dark-mode .fb-alert--success {
    background: #0d3320;
    color: #6ee7b7;
    border-color: #065f46;
}
.dark-mode .fb-alert--error {
    background: #3b1018;
    color: #fca5a5;
    border-color: #7f1d1d;
}
.dark-mode .fb-fieldset-hint {
    background: #3b2f10;
    color: #fbbf24;
    border-color: #854d0e;
}
.dark-mode .fb-modal__cancel,
.dark-mode .leave-actions button {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-border);
}
.dark-mode .fb-modal__cancel:hover {
    background: var(--color-bg-card);
}
/* Online-Formulare: Typ-Kacheln */
.dark-mode .form-type-card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}
.dark-mode .form-type-card__label {
    color: var(--color-accent);
}
.dark-mode .form-type-card__desc {
    color: var(--color-text-muted);
}
.dark-mode .form-type-card--rezept:hover {
    border-color: #27ae60;
    background: rgba(39,174,96,.12);
}
.dark-mode .form-type-card--ueberweisung:hover {
    border-color: #2980b9;
    background: rgba(41,128,185,.12);
}
.dark-mode .form-type-card--termin:hover {
    border-color: #e67e22;
    background: rgba(230,126,34,.12);
}
.dark-mode .form-avail-action {
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
.dark-mode .form-avail-cb {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}
.dark-mode .form-avail-cb.active {
    border-color: #e67e22;
    background: rgba(230, 126, 34, .15);
}
.dark-mode .form-avail-closed {
    background: var(--color-bg-light);
}
.dark-mode #leave-site-cancel {
    background: var(--color-bg-light);
    color: var(--color-text);
}

/* Allgemeiner Catch-all: alle verbleibenden Content-Bereiche */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) main article,
    :root:not(.light-mode) main p,
    :root:not(.light-mode) main li,
    :root:not(.light-mode) main dd,
    :root:not(.light-mode) main blockquote {
        color: var(--color-text);
    }
    :root:not(.light-mode) main h1,
    :root:not(.light-mode) main h2,
    :root:not(.light-mode) main h3,
    :root:not(.light-mode) main h4 {
        color: var(--color-accent);
    }
    :root:not(.light-mode) main hr {
        border-color: var(--color-border);
    }
}
.dark-mode main article,
.dark-mode main p,
.dark-mode main li,
.dark-mode main dd,
.dark-mode main blockquote {
    color: var(--color-text);
}
.dark-mode main h1,
.dark-mode main h2,
.dark-mode main h3,
.dark-mode main h4 {
    color: var(--color-accent);
}
.dark-mode main hr {
    border-color: var(--color-border);
}

/* Kalender (Abwesenheitskalender auf Aktuelles-Seite) */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .tablenote {
        background: var(--color-bg-card);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }
    :root:not(.light-mode) table.tablenote td {
        border-color: var(--color-border);
        color: var(--color-text);
    }
    :root:not(.light-mode) table.tablenote .weekday {
        background: var(--color-bg-card);
    }
    :root:not(.light-mode) table.tablenote .weekend {
        background: var(--color-bg-light);
    }
    :root:not(.light-mode) table.tablenote .event {
        background: #1e3a5f;
        color: #93c5fd;
    }
    :root:not(.light-mode) table.tablenote .holiday {
        background: #3b1018;
        color: #fca5a5;
    }
    :root:not(.light-mode) table.tablenote td.cal-month {
        color: var(--color-accent);
    }
    :root:not(.light-mode) .cal-ev {
        background: var(--color-bg-light);
        border-color: var(--color-border);
    }
    :root:not(.light-mode) .cal-ev-name {
        color: var(--color-text);
    }
    :root:not(.light-mode) .cal-ev-details {
        color: var(--color-text-muted);
    }
    :root:not(.light-mode) .cal-ev-details strong {
        color: var(--color-text);
    }
    :root:not(.light-mode) .cal-ev-sep {
        color: var(--color-border);
    }
    :root:not(.light-mode) .cal-badge--closed {
        background: #5c1a1a;
        color: #fca5a5;
    }
    :root:not(.light-mode) .cal-badge--changed {
        background: #1e3a5f;
        color: #93c5fd;
    }
    :root:not(.light-mode) .cal-badge--notdienst {
        background: #3b2f10;
        color: #fbbf24;
    }
    :root:not(.light-mode) .cal-badge--fortbildung {
        background: var(--color-bg-light);
        color: var(--color-text-muted);
    }
    :root:not(.light-mode) .cal-badge--sonstiges {
        background: var(--color-bg-light);
        color: var(--color-text-muted);
    }
    :root:not(.light-mode) .popup {
        background: var(--color-bg-card);
        border-color: var(--color-border);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
    :root:not(.light-mode) .cal-events-title {
        color: var(--color-accent);
    }
}
.dark-mode .tablenote {
    background: var(--color-bg-card);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.dark-mode table.tablenote td {
    border-color: var(--color-border);
    color: var(--color-text);
}
.dark-mode table.tablenote .weekday {
    background: var(--color-bg-card);
}
.dark-mode table.tablenote .weekend {
    background: var(--color-bg-light);
}
.dark-mode table.tablenote .event {
    background: #1e3a5f;
    color: #93c5fd;
}
.dark-mode table.tablenote .holiday {
    background: #3b1018;
    color: #fca5a5;
}
.dark-mode table.tablenote td.cal-month {
    color: var(--color-accent);
}
.dark-mode .cal-ev {
    background: var(--color-bg-light);
    border-color: var(--color-border);
}
.dark-mode .cal-ev-name {
    color: var(--color-text);
}
.dark-mode .cal-ev-details {
    color: var(--color-text-muted);
}
.dark-mode .cal-ev-details strong {
    color: var(--color-text);
}
.dark-mode .cal-ev-sep {
    color: var(--color-border);
}
.dark-mode .cal-badge--closed {
    background: #5c1a1a;
    color: #fca5a5;
}
.dark-mode .cal-badge--changed {
    background: #1e3a5f;
    color: #93c5fd;
}
.dark-mode .cal-badge--notdienst {
    background: #3b2f10;
    color: #fbbf24;
}
.dark-mode .cal-badge--fortbildung {
    background: var(--color-bg-light);
    color: var(--color-text-muted);
}
.dark-mode .cal-badge--sonstiges {
    background: var(--color-bg-light);
    color: var(--color-text-muted);
}
.dark-mode .popup {
    background: var(--color-bg-card);
    border-color: var(--color-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.dark-mode .cal-events-title {
    color: var(--color-accent);
}

/* Bilder: leichte Helligkeitsreduktion */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) main img:not([src*="logo"]) {
        filter: brightness(0.85);
    }
}
.dark-mode main img:not([src*="logo"]) {
    filter: brightness(0.85);
}

/* ============================================================
   Dark-Mode-Toggle Button (im Footer)
   ============================================================ */
.dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    vertical-align: middle;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    line-height: 1;
}
.dark-mode-toggle:hover {
    color: #fff;
}
.dark-mode-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
.dark-mode-toggle svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    fill: currentColor;
}

/* Mond-Icon im Light-Mode, Sonnen-Icon im Dark-Mode */
.dark-mode-toggle .icon-sun { display: none; }
.dark-mode-toggle .icon-moon { display: inline; }

@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) .dark-mode-toggle .icon-sun { display: inline; }
    :root:not(.light-mode) .dark-mode-toggle .icon-moon { display: none; }
}
.dark-mode .dark-mode-toggle .icon-sun { display: inline; }
.dark-mode .dark-mode-toggle .icon-moon { display: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dark-mode-toggle { transition: none; }
}