/*==============================================================================
    style-dark.css - Dark Mode Stile für Bludit Theme "remszeitung"
    ------------------------------------------------------------------------------
    Diese Datei enthält CSS-Regeln, die spezifisch für den Dark Mode der Website
    gelten. Sie überschreibt oder ergänzt die Standard-Stile aus 'style.css'
    basierend auf der Benutzereinstellung für das Farbschema (prefers-color-scheme).
    Das Ziel ist es, eine barrierefreie und optisch ansprechende Dark-Mode-Erfahrung
    gemäß BITV, WCAG und BFSG-Richtlinien zu bieten.
    ==============================================================================*/

/* ==============================================================================
    Media Query für Dark Mode Aktivierung
    Alle Dark-Mode-spezifischen Stile sind innerhalb dieser Media Query gekapselt.
    Sie werden nur angewendet, wenn das Betriebssystem oder der Browser des Benutzers
    ein dunkles Farbschema bevorzugt.
    ==============================================================================*/
@media (prefers-color-scheme: dark) {

    /* ==========================================================================
        1. Globale CSS-Variablen (im Dark Mode überschreiben)
        --------------------------------------------------------------------------
        Dieser :root-Block definiert oder überschreibt wichtige CSS-Variablen,
        die im gesamten Design verwendet werden, um Farben und andere grundlegende
        Eigenschaften für den Dark Mode anzupassen.
        ==========================================================================*/
    :root {
        /* --- Basis-Farben für Body und Text im Dark Mode --- */
        --bs-body-color: var(--rz-dark-text);       /* Standardtextfarbe (helles Grau) */
        --bs-body-bg: var(--rz-dunkelblau);         /* Standardhintergrundfarbe (dunkelblau) */

        /* --- Link-Farben im Dark Mode --- */
        --bs-link-color: var(--rz-dark-link-normal);        /* Normale Linkfarbe (hellblau) */
        --bs-link-hover-color: var(--rz-kuerbisrot);        /* Linkfarbe beim Hover (Kürbisrot) */
        --bs-link-decoration: underline;                    /* Links standardmäßig unterstrichen */
        --bs-link-hover-decoration: underline;              /* Unterstreichung beim Hover beibehalten */

        /* --- Fokus-Indikatoren (für Barrierefreiheit) im Dark Mode --- */
        --rz-focus-outline-dark: white;                     /* Farbe der Outline beim Fokus */
        --rz-focus-shadow-dark: rgba(255, 255, 255, 0.2);   /* Farbe des Schattens beim Fokus */

        /* --- Weitere globale Dark Mode Variablen --- */
        --rz-border-dark: #3F4C5C;      /* Eine etwas hellere Dunkelblau-Variante für Rahmen */
        --rz-shadow-dark: rgba(0, 0, 0, 0.5); /* Dunkler Schatten für visuelle Tiefe */
        --rz-icon-dark: var(--rz-dark-text); /* Standard-Iconfarbe im Dark Mode (Textfarbe) */
        --rz-dark-muted: #9DA5AD;       /* 'Muted' Textfarbe im Dark Mode */


        /* --- Bootstrap-spezifische RGB-Variablen an Dark Mode anpassen --- */
        /* Diese sind wichtig für Bootstrap-Komponenten, die dynamische Farben
            oder Schatten basierend auf diesen RGB-Werten generieren. */
        --bs-light-rgb: 42, 56, 69;     /* Angepasste RGB-Werte für 'light' im Dark Mode */
        --bs-dark-rgb: 243, 247, 250; /* Angepasste RGB-Werte für 'dark' im Dark Mode */

        /* Bootstrap-Variable für das Toggler-Icon im Dark Mode
            Stellt sicher, dass das Burger-Menü-Icon im Dark Mode weiß ist. */
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

        /* Globale Bootstrap-Variable für die Standard-Randfarbe
            von Formularfeldern und anderen Komponenten im Dark Mode.
            Wird auf '--rz-graublau' gesetzt, um Sichtbarkeit auf dem dunklen
            Hintergrund zu gewährleisten. */
        --bs-border-color: var(--rz-graublau);

        /* NEU: Farbe für Fehlermeldungen im Dark Mode
            Dies ist ein helleres Rot (#FF8F8F), das auf dem --rz-dunkelblau
            Hintergrund einen WCAG AA-konformen Kontrast (5.56:1) bietet. */
        --rz-invalid-dark-mode-color: #FF8F8F;
    }

    /* ==========================================================================
        2. Navbar & Header Styling im Dark Mode
        --------------------------------------------------------------------------
        Anpassungen der Hauptnavigation und des Toggler-Buttons, um sie an
        das dunkle Farbschema anzupassen.
        ==========================================================================*/

    /* Hintergrundfarbe für die Hauptnavigation (fixed-top) im Dark Mode */
    .navbar.fixed-top {
        background-color: var(--rz-bfsgblau) !important; /* Dunkelblau als Header-Hintergrund */
        border-color: rgba(255, 255, 255, 0.1) !important; /* Dezenter weißlicher Rahmen */
    }

    /* Hover/Focus Effekt für den Navbar Toggler Button und sein Icon im Dark Mode
        Das Icon wird beim Hover/Fokus auf Kürbisrot gesetzt. */
    .navbar-toggler:hover,
    .navbar-toggler:focus {
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(232, 79, 28)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        transition: background-image 0.2s ease-in-out; /* Sanfter Übergang für den Icon-Farbenwechsel */
        outline: var(--rz-focus-outline-dark) solid 2px; /* Fokus-Outline für Barrierefreiheit */
        box-shadow: 0 0 0 var(--rz-focus-shadow-dark); /* Fokus-Schatten für Barrierefreiheit */
    }

    /* ==========================================================================
        3. Footer Styling im Dark Mode
        --------------------------------------------------------------------------
        Anpassungen des Fußbereichs der Webseite.
        ==========================================================================*/

    /* Hintergrund- und Textfarbe für den Footer im Dark Mode */
    footer#bfsg-footer {
        background-color: var(--rz-dunkelblau) !important; /* Hintergrundfarbe des Footers */
        color: var(--rz-dark-text); /* Textfarbe im Footer */
    }

    /* ==========================================================================
        4. Texte, Überschriften und allgemeine Elemente im Dark Mode
        --------------------------------------------------------------------------
        Definiert die Farben für verschiedene Textelemente, um guten Kontrast
        auf dem dunklen Hintergrund zu gewährleisten.
        ==========================================================================*/

    /* Überschriften im Dark Mode */
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        color: var(--rz-dark-text); /* Überschriftenfarbe ist die helle Textfarbe */
    }

    /* Standard-Linkfarbe und Hover-Farbe für den Hauptinhalt im Dark Mode */
    a {
        color: var(--rz-dark-link-normal); /* Helle Linkfarbe */
    }
    a:hover {
        color: var(--rz-kuerbisrot); /* Kürbisrot beim Hover */
    }

    /* 'Muted' Textfarbe im Dark Mode */
    .text-muted {
        color: var(--rz-dark-muted) !important; /* Eine etwas dunklere Variante der Textfarbe */
    }

    /* Tabellen-Anpassungen im Dark Mode */
    .table {
        --bs-table-color: var(--rz-dark-text);              /* Textfarbe in Tabellen */
        --bs-table-bg: var(--rz-dunkelblau);                /* Hintergrundfarbe der Tabelle */
        --bs-table-border-color: var(--rz-border-dark);     /* Rahmenfarbe der Tabelle */
        --bs-table-striped-bg: #2d3e4e;                     /* Hintergrund für gestreifte Zeilen */
        --bs-table-striped-color: var(--rz-dark-text);      /* Textfarbe für gestreifte Zeilen */
        --bs-table-active-bg: #324354;                      /* Hintergrund für aktive Zeilen */
        --bs-table-active-color: var(--rz-dark-text);       /* Textfarbe für aktive Zeilen */
        --bs-table-hover-bg: #2d3e4e;                       /* Hintergrund beim Hover über Zeilen */
        --bs-table-hover-color: var(--rz-dark-text);        /* Textfarbe beim Hover über Zeilen */
    }

    /* Card-Komponenten im Dark Mode */
    .card {
        background-color: var(--rz-dunkelblau); /* Hintergrundfarbe der Card */
        color: var(--rz-dark-text);             /* Textfarbe in der Card */
        border-color: var(--rz-border-dark);    /* Rahmenfarbe der Card */
        box-shadow: var(--rz-shadow-dark);      /* Schatten der Card */
    }
    .card-header,
    .card-footer {
        background-color: var(--rz-border-dark); /* Hintergrundfarbe für Header/Footer der Card */
        border-color: var(--rz-border-dark);    /* Rahmenfarbe für Header/Footer der Card */
        color: var(--rz-dark-text);             /* Textfarbe für Header/Footer der Card */
    }

    /* ==========================================================================
        5. Formularfelder im Dark Mode
        --------------------------------------------------------------------------
        Spezifische Stile für Input-Felder, Textareas, Select-Boxen, Checkboxen
        und Radio-Buttons, um ihre Sichtbarkeit und Fokus-Indikatoren
        im Dark Mode zu gewährleisten.
        ==========================================================================*/

    /* Standardstile für Input-, Textarea- und Select-Felder im Dark Mode */
    .form-control {
        background-color: var(--rz-dunkelblau); /* Hintergrundfarbe des Feldes (dunkelblau) */
        color: var(--rz-dark-text);             /* Textfarbe im Feld (helles Grau) */
        /* Rahmenfarbe des Feldes. Nutzt die hellere `--bs-border-color`,
            die im :root-Block für den Dark Mode auf `--rz-graublau` gesetzt wurde. */
        border-color: var(--bs-border-color) !important;
    }
    /* Fokus-Stil für Input-, Textarea- und Select-Felder im Dark Mode */
    .form-control:focus {
        background-color: var(--rz-dunkelblau); /* Hintergrund bleibt dunkelblau */
        color: var(--rz-dark-text);             /* Textfarbe bleibt helles Grau */
        border-color: var(--rz-hellblau);       /* Akzentfarbe für den Fokus (hellblau) */
        box-shadow: 0 0 0 0.25rem rgba(107, 168, 255, 0.25); /* Angepasster Fokus-Schatten */
    }
    /* Platzhaltertext (Placeholder) in Formularfeldern im Dark Mode */
    .form-control::placeholder {
        color: var(--rz-dark-muted); /* Eine gedämpfte Farbe für den Platzhalter */
    }

    /* Checkboxen und Radio-Buttons im Dark Mode */
    .form-check-input {
        background-color: var(--rz-dunkelblau); /* Hintergrundfarbe der Checkbox/Radio-Box */
        /* Rahmenfarbe der Checkbox/Radio-Box im Dark Mode.
            Nutzt die hellere `--bs-border-color`. */
        border-color: var(--bs-border-color) !important;
    }
    /* Hover-Effekt für Checkboxen/Radio-Buttons im Dark Mode */
    .form-check-input:hover {
        border-color: var(--rz-hellblau) !important; /* Hellerer Rahmen beim Hover */
    }
    /* Fokus-Effekt für Checkboxen und Radio-Buttons im Dark Mode */
    .form-check-input:focus {
        border-color: var(--rz-kuerbisrot) !important; /* Kürbisrot für Fokus */
        box-shadow: 0 0 0 0.25rem rgba(232, 79, 28, .25) !important; /* Roter Schatten */
        outline: 0 !important; /* Entfernt den Browser-Standard-Outline */
    }


    /* Datei-Upload-Button (file-selector-button) im Dark Mode */
    .form-control[type="file"]::-webkit-file-upload-button { /* Für Webkit-Browser (Chrome, Safari) */
        background-color: var(--rz-border-dark) !important; /* Etwas heller als Hintergrund */
        color: var(--rz-dark-text) !important; /* Heller Text */
        border: 1px solid var(--bs-border-color) !important; /* Nutzt die hellere Rahmenfarbe */
        border-radius: var(--bs-border-radius, 0.25rem) !important;
        padding: 0.375rem 0.75rem !important;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .form-control[type="file"]::file-selector-button { /* Standard für andere Browser */
        background-color: var(--rz-border-dark) !important;
        color: var(--rz-dark-text) !important;
        border: 1px solid var(--bs-border-color) !important;
        border-radius: var(--bs-border-radius, 0.25rem) !important;
        padding: 0.375rem 0.75rem !important;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    /* Hover- und Fokus-Effekte für den Datei-Upload-Button im Dark Mode */
    .form-control[type="file"]::-webkit-file-upload-button:hover,
    .form-control[type="file"]::-webkit-file-upload-button:focus,
    .form-control[type="file"]::file-selector-button:hover,
    .form-control[type="file"]::file-selector-button:focus {
        background-color: var(--rz-hellblau) !important; /* Hellblau beim Hover/Fokus */
        border-color: var(--rz-hellblau) !important;
        color: var(--rz-dunkelblau) !important; /* Dunkler Text auf hellem Hintergrund */
        outline: none !important;
        box-shadow: 0 0 0 0.25rem rgba(107, 168, 255, .25) !important;
    }


    /* ==========================================================================
        6. Validierungsstile (Rot/Grün) im Dark Mode
        --------------------------------------------------------------------------
        Sicherstellt, dass Formularvalidierungen (z.B. Fehler- oder Erfolgsmeldungen)
        auch im Dark Mode klar sichtbar und verständlich sind.
        Diese Regeln überschreiben Bootstrap-Standardstile für Validierungen.
        ==========================================================================*/

    /* Stil für gültige (grüne) Felder im Dark Mode */
    .form-control.is-valid, .was-validated .form-control:valid {
        border-color: var(--bs-form-valid-border-color) !important; /* Bootstraps Grün */
        padding-right: calc(1.5em + 0.75rem) !important; /* Platz für Validierungs-Icon */
        background-image: var(--bs-form-valid-bg) !important; /* Bootstraps Validierungs-Icon */
        background-repeat: no-repeat !important;
        background-position: right calc(0.375em + 0.1875rem) center !important;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
    }

    /* Stil für ungültige (rote) Felder im Dark Mode */
    .form-control.is-invalid, .was-validated .form-control:invalid {
        border-color: var(--bs-form-invalid-border-color) !important; /* Bootstraps Rot */
        padding-right: calc(1.5em + 0.75rem) !important; /* Platz für Validierungs-Icon */
        background-image: var(--bs-form-invalid-bg) !important; /* Bootstraps Validierungs-Icon */
        background-repeat: no-repeat !important;
        background-position: right calc(0.375em + 0.1875rem) center !important;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
    }

    /* Fokus-Zustand für gültige/ungültige Felder (Schatten anpassen) im Dark Mode */
    .form-control.is-valid:focus, .was-validated .form-control:valid:focus {
        border-color: var(--bs-form-valid-border-color) !important;
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-form-valid-color-rgb), .25) !important;
    }

    .form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
        border-color: var(--bs-form-invalid-border-color) !important;
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-form-invalid-color-rgb), .25) !important;
    }

    /* Farbe für Fehlermeldungen (invalid-feedback) im Dark Mode */
    .invalid-feedback {
        color: var(--rz-invalid-dark-mode-color) !important; /* Verwendet das helle Rot (#FF8F8F) */
    }


    /* ==========================================================================
        7. Bilder und SVGs anpassen (falls nötig) im Dark Mode
        --------------------------------------------------------------------------
        Hier können Regeln hinzugefügt werden, um die Darstellung von Bildern
        oder SVG-Grafiken im Dark Mode zu optimieren (z.B. Invertierung).
        ==========================================================================*/

    /* Beispiel: Wenn du SVGs oder Bilder hast, die im Dark Mode invertiert
        oder farblich angepasst werden müssen. Die Klasse müsste dem Bild
        im HTML hinzugefügt werden. */
    /* img.invert-on-dark-mode {
        filter: invert(1) hue-rotate(180deg);
    } */

    /* Beispiel: Wenn du dein Logo im Dark Mode ändern möchtest,
        das in style.css über background-image definiert ist. */
    /*
    .your-logo-class {
        background-image: url('../img/your-dark-mode-logo.svg') !important;
    }
    */
}