/*==============================================================================
   Basis-Stile & Font Embedding
   Diese Sektion definiert globale Einstellungen wie Schriftarten und die wichtigsten
   CSS-Variablen, die für das gesamte Design relevant sind.
   ==============================================================================*/

/* Schriftart 'DIN-NEXT-LT-PRO' für regulären Schriftschnitt einbetten */
@font-face {
    font-family: 'DIN-NEXT-LT-PRO';
    src: url('/bl-themes/remszeitung/css/fonts/DINNextLTW05-Regular.woff2') format('woff2'),
         url('/bl-themes/remszeitung/css/fonts/DINNextLTW05-Regular.woff') format('woff');
    font-weight: 400; /* Definiert den Font-Weight für den regulären Schnitt */
    font-display: fallback; /* Optimiert das Laden der Schriftart */
}

/* Schriftart 'DIN-NEXT-LT-PRO' für fetten Schriftschnitt einbetten */
@font-face {
    font-family: 'DIN-NEXT-LT-PRO';
    src: url('/bl-themes/remszeitung/css/fonts/DINNextLTW05-Bold.woff2') format('woff2'),
         url('/bl-themes/remszeitung/css/fonts/DINNextLTW05-Bold.woff') format('woff');
    font-weight: 700; /* Definiert den Font-Weight für den fetten Schnitt */
    font-display: fallback; /* Optimiert das Laden der Schriftart */
}

/* ==============================================================================
   Benutzerdefinierte CSS-Variablen (Brand Style Guide Farben und globale Einstellungen)
   Hier werden alle Farb-, Schrift- und andere Basis-Variablen definiert,
   die seitenweit verwendet werden.
   ==============================================================================*/
:root {
    /* --- Brand Style Guide Farben --- */
    --rz-kobaltblau: #4f80ff; /* Kobaltblau (Hinweis: Nicht barrierefrei für Text auf bestimmten Hintergründen) */
    --rz-kiwigruen: #6bb024; /* Kiwigrün */
    --rz-kuerbisrot: #e84f1c; /* Kürbisrot (Angepasst für verbesserte Barrierefreiheit) */
    --rz-graublau: #EFF3F5; /* Grau-Blau (Hintergrund Light Mode, Text Darkmode) */
    --rz-dunkelblau: #2A3845; /* Dunkelblau (Hintergrund Dark Mode & Footer, Text Light Mode) */

    /* --- Spezifische Farben für Barrierefreiheit (BFSG/BITV) --- */
    --rz-bfsgblau: #3B5B9E; /* Hintergrund Navbar und Linkfarbe */
    --rz-hellblau: #6BA8FF; /* Linkfarbe Darkmode */
    --rz-bfsgrot: #B23F00; /* Hover Effekt für Links (alternative Rot-Nuance) */
    --lokal-rot: #dc3545; /* LOKAL Anzeigenblatt */

    /* --- Schriftarten-Definition --- */
    --bs-font-sans-serif: 'DIN-NEXT-LT-PRO', sans-serif; /* Primäre Schriftart für Bootstrap-Komponenten */

    /* --- Standard-Farben für Light Mode (Body Text & Hintergrund) --- */
    --bs-body-color: var(--rz-dunkelblau); /* Standardtextfarbe im Light Mode */
    --bs-body-bg: var(--rz-graublau); /* Standardhintergrundfarbe im Light Mode */

    /* --- Link-Farben im Light Mode (Main-Bereich) --- */
    --bs-link-color: var(--rz-bfsgblau); /* Standard-Linkfarbe im Light Mode */
    --bs-link-decoration: underline; /* Links standardmäßig unterstrichen */
    --bs-link-hover-color: var(--rz-kuerbisrot); /* Hover-Farbe für Links im Main-Bereich */
    --bs-link-hover-decoration: underline; /* Unterstreichung beim Hover beibehalten */

    /* --- Standard-Farben für Dark Mode (werden in style-dark.css überschrieben) --- */
    --rz-dark-bg: var(--rz-dunkelblau); /* Hintergrundfarbe für Dark Mode */
    --rz-dark-text: var(--rz-graublau); /* Textfarbe für Dark Mode */
    --rz-dark-link-normal: var(--rz-hellblau); /* Linkfarbe für Dark Mode */
    --rz-dark-link-hover: var(--rz-kuerbisrot); /* Hover-Farbe für Links im Dark Mode (Kürbisrot) */

    /* --- Weitere globale Variablen --- */
    --rz-muted: #6c757d; /* Standard 'muted' Textfarbe */
    --rz-dark-muted: #9DA5AD; /* 'Muted' Textfarbe im Dark Mode */
    --rz-border-dark: #3F4C5C; /* Dunkle Rahmenfarbe (z.B. für Cards, Formulare im Dark Mode) */
    --rz-shadow-dark: rgba(0, 0, 0, 0.5); /* Dunkler Schatten (z.B. für Cards im Dark Mode) */
    --rz-icon-dark: var(--rz-icon-dark, var(--rz-dark-text)); /* Standard-Iconfarbe im Dark Mode */

    /* --- Fokus-Farben (für Barrierefreiheit, visuelle Indikatoren) --- */
    --rz-focus-outline-light: white; /* Outline-Farbe für Fokus im Light Mode (z.B. für Links, Buttons) */
    --rz-focus-shadow-light: rgba(0, 0, 0, 0.2); /* Schattenfarbe für Fokus im Light Mode */
    --rz-focus-outline-dark: white; /* Outline-Farbe für Fokus im Dark Mode */
    --rz-focus-shadow-dark: rgba(255, 255, 255, 0.2); /* Schattenfarbe für Fokus im Dark Mode */

    /* NEU / KORRIGIERT: Bootstrap-Variable für das Toggler-Icon im Light Mode
        Diese Variable wird von Bootstrap verwendet, um das Burger-Icon zu rendern.
        Wir setzen es hier global auf Weiß für den Light Mode. Im Dark Mode
        wird es in style-dark.css überschrieben. */
    --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 Button-Anpassungen (speziell für .btn-primary)
   Diese Regeln überschreiben Bootstrap-Standardstile für primäre Buttons.
   ==============================================================================*/
.btn-primary {
    --bs-btn-bg: var(--rz-bfsgblau) !important; /* Hintergrundfarbe des primären Buttons */
    --bs-btn-border-color: var(--rz-bfsgblau) !important; /* Rahmenfarbe des primären Buttons */
    --bs-btn-hover-bg: var(--lokal-rot) !important; /* Hintergrundfarbe beim Hover */
    --bs-btn-hover-border-color: var(--lokal-rot) !important; /* Rahmenfarbe beim Hover */
    --bs-btn-active-bg: #b23f00 !important; /* Hintergrundfarbe im aktiven Zustand */
    --bs-btn-active-border-color: #b23f00 !important; /* Rahmenfarbe im aktiven Zustand */
    --bs-btn-focus-shadow-rgb: 59, 91, 158 !important; /* RGB für den Fokus-Schatten (basierend auf BFSG-Blau) */
}

/* Sicherstellen, dass die Textfarbe der primären Buttons weiß bleibt */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #fff !important;
}

/* ==============================================================================
   Globale Body- und Basis-Stile
   Allgemeine Layout- und Typografie-Regeln für den gesamten Body.
   ==============================================================================*/
body {
    font-family: var(--bs-font-sans-serif); /* Primäre Schriftart für den Body */
    color: var(--bs-body-color); /* Textfarbe des Bodys */
    background-color: var(--bs-body-bg); /* Hintergrundfarbe des Bodys */
    hyphens: auto; /* Automatische Silbentrennung */
    padding-top: 90px; /* Oberer Abstand (für Fixed Navbar) */
    padding-bottom: 90px; /* Unterer Abstand (für Fixed Footer) */
    transition: background-color 0.3s ease, color 0.3s ease; /* Sanfter Übergang bei Farbwechsel (z.B. Dark Mode) */
}

/* Globales Zurücksetzen des Browser-Outline für Fokus-Elemente
   Wichtig für Barrierefreiheit: Browser-Standard-Outline entfernen, da eigene
   Fokus-Stile (outline/box-shadow) definiert werden. */
*:focus {
    outline: none !important;
}

/* ==============================================================================
   Navbar & Header Styling
   Stile, die spezifisch die obere Navigationsleiste und den Header betreffen.
   ==============================================================================*/

/* Hintergrundfarbe für die Hauptnavigation im Light Mode */
.navbar.fixed-top {
    background-color: var(--lokal-rot);
}

/* Logo-Größe in der Navbar anpassen */
img.navbar-logo {
    max-width: 100px;
}

/* Rahmenfarbe des Navbar Toggler Buttons im Light Mode */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1) !important; /* Dezenter weißlicher Rahmen */
}

/* KORRIGIERT: Hover/Focus Effekt für das Toggler Icon (Balken) im Light Mode
   Hier wird der direkte `background-image` Wert im Hover-Zustand für `navbar-toggler-icon` gesetzt,
   da dies eine spezifische Änderung ist, die nicht unbedingt über die Bootstrap-Variable gesteuert wird.
   Dies ist OK, da es sich um einen Hover-Zustand handelt und die Basis-Variable bereits gesetzt ist. */
.navbar-toggler:hover .navbar-toggler-icon,
.navbar-toggler:focus .navbar-toggler-icon {
    background-image: 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") !important;
    transition: background-image 0.2s ease-in-out; /* Optionaler Übergang für das Hintergrundbild */
}

/* ==============================================================================
   Navigationslink-Stile (Header & Footer)
   Diese Regeln betreffen Navigationslinks, insbesondere im Header und Footer,
   und legen deren Standard-, Hover- und Fokus-Zustände fest.
   ==============================================================================*/

/* Initialisierung für alle Nav-Links und Buttons (z.B. "Cookies") im Header/Footer */
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .btn-link,
#bfsg-footer .nav-link,
#bfsg-footer .btn-link {
    text-decoration: none !important; /* Standardmäßig keine Unterstreichung */
    color: white !important; /* Weiße Textfarbe im Standard */
    padding: 1px 3px !important; /* Leichtes Padding */
    /* Wichtig für konsistenten Platz: Transparente Border, Outline und Box-Shadow */
    border: 3px solid transparent !important;
    outline: 3px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px transparent !important;
    /* Sanfte Übergänge für verschiedene Eigenschaften beim Interagieren */
    transition: border-color 0.2s ease-in-out, padding 0.2s ease-in-out, text-decoration 0.2s ease-in-out, color 0.2s ease-in-out, outline-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: none !important;
    display: inline-block !important;
    min-width: 0 !important;
    position: relative;
    z-index: 1;
}

/* override color for footer */
#bfsg-footer .nav-link,
#bfsg-footer .btn-link {
    color: white !important; /* Weiße Textfarbe im Standard */
}

/* Globaler Hover-Indikator für ALLE Nav-Links und Buttons im Header (Light Mode) */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .btn-link:hover,
#bfsg-footer .nav-link:hover,
#bfsg-footer .btn-link:hover {
    text-decoration: underline !important; /* Unterstreichung beim Hover */
    color: var(--rz-dunkelblau) !important; /* Kürbisrot als Hover-Farbe */
    border-color: var(--rz-dunkelblau) !important; /* Rahmenfarbe an Hover-Farbe anpassen */
    padding: 1px 3px !important;
    border-radius: var(--bs-border-radius, 0.25rem) !important; /* Leichte Abrundung */
}

/* Globaler Hover-Indikator für Nav-Links und Buttons im Footer (Light Mode) */
#bfsg-footer .nav-link:hover,
#bfsg-footer .btn-link:hover {
    text-decoration: underline !important; /* Unterstreichung beim Hover */
    color: var(--rz-kuerbisrot) !important; /* Kürbisrot als Hover-Farbe beibehalten */
    border-color: var(--rz-kuerbisrot) !important; /* Rahmenfarbe an Hover-Farbe anpassen */
    padding: 1px 3px !important;
    border-radius: var(--bs-border-radius, 0.25rem) !important; /* Leichte Abrundung */
}

/* Fokus-Stil für Nav-Links und Buttons im Header/Footer (Light Mode)
   Erfüllt BITV-Anforderungen für sichtbare Fokus-Indikatoren. */
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .btn-link:focus,
#bfsg-footer .nav-link:focus,
#bfsg-footer .btn-link:focus {
    text-decoration: underline !important;
    color: var(--rz-hellblau) !important;
    border-color: var(--rz-hellblau) !important;
    padding: 1px 3px !important;
    border-radius: var(--bs-border-radius, 0.1rem) !important;
    outline-color: var(--rz-focus-outline-light) !important; /* Weiße Outline */
    box-shadow: 0 0 0 3px var(--rz-focus-shadow-light) !important; /* Heller Schatten */
}

/* Visuelle Hervorhebung für den aktuell aktiven Nav-Link (für Screenreader) */
.navbar-nav .nav-link[aria-current="page"] {
    color: var(--rz-kiwigruen) !important; /* Kiwigrün für den aktiven Link */
    text-decoration: underline !important;
    border-color: var(--rz-kiwigruen) !important;
    padding: 1px 3px !important;
}

/* Erhöhe den oberen Abstand des aufgeklappten Burger-Menüs im Header (mobile Ansicht) */
#mainNavbarCollapse .navbar-nav {
    margin-top: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Sicherstellen, dass die einzelnen Nav-Links im aufgeklappten Menü konsistentes vertikales Padding haben */
#mainNavbarCollapse .navbar-nav .nav-item .nav-link {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* ==============================================================================
   Main Content Link Styling
   Spezifische Regeln für Links, die im Hauptinhaltsbereich der Seite erscheinen.
   ==============================================================================*/

/* Diese Regel sorgt dafür, dass Links im Hauptinhaltsbereich barrierefrei sind */
main a {
    color: var(--bs-link-color); /* Nutzt die im :root definierte Standard-Linkfarbe (rz-bfsgblau) */
    text-decoration: var(--bs-link-decoration); /* Standardmäßig unterstrichen */
    font-weight: 700; /* Links im Main-Bereich sind halbfett */
    /* Wichtig: Transparente Outline und Box-Shadow für konsistenten Platz und Fokus */
    outline: 3px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px transparent !important;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, outline-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Übergang für Fokus-Effekt */
}

/* Wiederhergestellter Hover-Effekt für Links im Main-Bereich */
main a:hover {
    color: var(--bs-link-hover-color); /* Kürbisrot als Hover-Farbe */
    text-decoration: underline; /* Unterstreichung bleibt beim Hover */
}

/* Fokus-Stil für Links im Main-Bereich */
main a:focus {
    color: var(--bs-link-hover-color); /* Kürbisrot als Fokus-Farbe */
    text-decoration: underline;
    outline-color: var(--rz-focus-outline-light) !important; /* Weiße Outline */
    box-shadow: 0 0 0 3px var(--rz-focus-shadow-light) !important; /* Heller Schatten */
    border-radius: var(--bs-border-radius, 0.1rem) !important; /* Leichte Abrundung */
}

/* ==============================================================================
   Skip-Link Stil
   Der Stil für den "Skip to content"-Link, der für Tastatur-Navigation wichtig ist.
   ==============================================================================*/

/* Fokus-Stil für den Skip-Link (für visuell versteckte, fokussierbare Elemente) */
.visually-hidden-focusable:focus {
    outline-color: var(--rz-focus-outline-light) !important; /* Weiße Outline */
    box-shadow: 0 0 0 3px var(--rz-focus-shadow-light) !important; /* Heller Schatten */
    background-color: var(--rz-bfsgblau) !important; /* Hintergrundfarbe für den Skip-Link im Fokus */
}

/* ==============================================================================
   Footer Styling & Responsive Anpassungen
   Stile für den Footer-Bereich und dessen Verhalten auf verschiedenen Bildschirmgrößen.
   ==============================================================================*/

/* Hintergrundfarbe für den Footer-Bereich im Light Mode */
footer#bfsg-footer {
    background-color: var(--rz-dunkelblau);
}

/* Sicherstellen der vertikalen Ausrichtung im Footer-Container */
.footer .navbar .container-fluid {
    align-items: center;
    flex-wrap: nowrap !important; /* Verhindert Umbruch auf größeren Bildschirmen */
}

/* Media Query für Desktop-Ansicht (ab 992px) */
@media (min-width: 992px) {
    .footer #footerNavbarCollapse {
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        width: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Korrigiert: Abstände und Verhalten für RZ+, E-Paper, Kontakt auf Desktop */
    .footer .d-flex.flex-nowrap {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        margin-right: auto !important;
    }

    /* Stellt sicher, dass der Toggler im Footer auf Desktop nicht sichtbar ist */
    .footer .navbar-toggler {
        display: none !important;
    }
}

/* Media Query für mobile Ansicht (bis 991.98px) */
@media (max-width: 991.98px) {
    /* Wichtig: Haupt-Container im Footer für mobile Ansicht */
    .footer .navbar .container-fluid {
        flex-wrap: wrap !important; /* Ermöglicht Umbruch der Elemente */
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    /* Service Links (RZ+, E-Paper, Kontakt) im mobilen Footer */
    .footer .d-flex.flex-nowrap {
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        padding-right: 0.5rem !important;
    }

    /* Toggler für mobiles Menü im Footer */
    .footer .navbar-toggler {
        display: block !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        order: 1 !important; /* Stellt die Reihenfolge im Flex-Layout sicher */
    }

    /* Das aufgeklappte Menü (.navbar-collapse) im Footer */
    .footer #footerNavbarCollapse {
        width: 100% !important;
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        order: 2 !important; /* Stellt die Reihenfolge im Flex-Layout sicher */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: right !important; /* Links im mobilen Footer rechts ausrichten */
    }

    /* Einzelne Nav-Items innerhalb des aufgeklappten Footer-Menüs */
    #footerNavbarCollapse .navbar-nav {
        width: 100% !important;
        margin-top: 1.5rem !important; /* Passt den Abstand vom Toggler an */
    }

    #footerNavbarCollapse .navbar-nav .nav-item {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
        margin-bottom: 0.25rem !important;
    }

    /* Gezielte Ausrichtung für den "Cookies"-Button im aufgeklappten mobilen Menü */
    #footerNavbarCollapse .navbar-nav .nav-item .btn-link {
        text-align: right !important;
        display: block !important;
        width: auto !important;
    }
}

/* Media Query für SEHR KLEINE BILDSCHIRME (Link-Umbruch für RZ+, E-Paper, Kontakt) */
@media (max-width: 399.98px) {
    .footer .d-flex.flex-nowrap {
        flex-wrap: wrap !important;
        justify-content: center !important; /* Zentriert Links auf sehr kleinen Bildschirmen */
        padding-right: 0 !important;
        width: 100% !important;
    }
    .footer .d-flex.flex-nowrap a.nav-link {
        white-space: normal !important;
        display: block !important;
        margin-bottom: 0.25rem !important;
        margin-right: 0 !important;
    }
}

/* ==============================================================================
   Footer Logo & SVG Filter
   Stile für das RZ Plus Logo im Footer und dessen Hover/Fokus-Farbanpassung.
   ==============================================================================*/

/* Spezifische Größe für das RZ Plus Logo im Footer */
.footer-rz-logo {
    width: 30px !important; /* Gewünschte feste Breite */
    height: auto !important; /* Höhe automatisch anpassen */
    display: inline-block !important; /* Wichtig für SVGs, die sich wie Text verhalten */
    vertical-align: middle; /* Optional: Für bessere vertikale Ausrichtung */
}

/* SVG Logo Hover/Focus Coloring (RZ Plus Logo im Footer) - rz-kuerbisrot */
#bfsg-footer .nav-link:hover .footer-rz-logo,
#bfsg-footer .nav-link:focus .footer-rz-logo {
    /* Filterwerte für eine präzisere Umwandlung von Weiß nach #e84f1c (Kürbisrot) */
    filter: invert(30%) sepia(85%) saturate(3000%) hue-rotate(-38deg) brightness(85%) contrast(100%);
    transition: filter 0.2s ease-in-out; /* Weicher Übergang für den Filter-Effekt */
}

/* ==============================================================================
   Formularfelder - Barrierefreie Rahmenlinien und Fokus-Effekte (Standard & Light Mode)
   Diese Sektion gewährleistet, dass Formularelemente zugänglich und visuell klar sind.
   ==============================================================================*/

/* Standardrahmen für alle Formularfelder (input, textarea, select) */
.form-control {
    border-color: var(--rz-dunkelblau) !important; /* Kräftiges Dunkelblau für guten Kontrast im Light Mode */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Rahmenfarbe beim Hover (Mouse-Over) für Formularfelder */
.form-control:hover {
    border-color: var(--rz-bfsgblau) !important; /* BFSG-Blau beim Hover */
}

/* Rahmenfarbe und Box-Shadow beim Fokus (Feld ist aktiv/ausgewählt) für Formularfelder */
.form-control:focus {
    border-color: var(--rz-kuerbisrot) !important; /* Kürbisrot als starker Fokus-Indikator */
    box-shadow: 0 0 0 0.25rem rgba(232, 79, 28, .25) !important; /* Leichter roter Schatten */
    outline: 0 !important; /* Entfernt den Standard-Outline des Browsers, da wir Box-Shadow verwenden */
}

/* Spezifische Anpassung für Checkboxen und Radio-Buttons */
.form-check-input {
    border-color: var(--rz-dunkelblau) !important; /* Dunkelblau für Checkbox/Radio-Rahmen im Light Mode */
}

/* Hover-Effekt für Checkboxen/Radio-Buttons */
.form-check-input:hover {
    border-color: var(--rz-bfsgblau) !important;
}

/* Fokus-Effekt für Checkboxen und Radio-Buttons */
.form-check-input:focus {
    border-color: var(--rz-kuerbisrot) !important;
    box-shadow: 0 0 0 0.25rem rgba(232, 79, 28, .25) !important;
    outline: 0 !important;
}

/* Platzhaltertext (Placeholder) - Barrierefreiheit im Light Mode */
.form-control::placeholder {
    color: var(--rz-dunkelblau); /* Dunkel genug für guten Kontrast */
    opacity: 0.6; /* Leichte Transparenz für den Platzhaltercharakter */
}
/* Für Firefox (spezifischer Vendor-Prefix) */
.form-control::-moz-placeholder {
    color: var(--rz-dunkelblau);
    opacity: 0.6;
}

/* Anpassung für den "Datei auswählen"-Button im Light Mode (Webkit-Browser) */
.form-control[type="file"]::-webkit-file-upload-button {
    background-color: var(--rz-graublau) !important; /* Hellgrau als Hintergrund für den Button */
    color: var(--rz-dunkelblau) !important; /* Dunkelblauer Text für guten Kontrast */
    border: 1px solid var(--rz-dunkelblau) !important; /* Dunkelblauer Rand */
    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;
}

/* Anpassung für den "Datei auswählen"-Button im Light Mode (Standard) */
.form-control[type="file"]::file-selector-button {
    background-color: var(--rz-graublau) !important;
    color: var(--rz-dunkelblau) !important;
    border: 1px solid var(--rz-dunkelblau) !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 auswählen"-Button im Light Mode (Webkit-Browser) */
.form-control[type="file"]::-webkit-file-upload-button:hover,
.form-control[type="file"]::-webkit-file-upload-button:focus {
    background-color: var(--rz-bfsgblau) !important; /* BFSG-Blau beim Hover/Fokus */
    border-color: var(--rz-bfsgblau) !important;
    color: white !important; /* Weißer Text beim Hover/Fokus */
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 91, 158, .25) !important; /* Passender Schatten mit BFSG-Blau */
}

/* Hover- und Fokus-Effekte für den "Datei auswählen"-Button im Light Mode (Standard) */
.form-control[type="file"]::file-selector-button:hover,
.form-control[type="file"]::file-selector-button:focus {
    background-color: var(--rz-bfsgblau) !important;
    border-color: var(--rz-bfsgblau) !important;
    color: white !important;
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 91, 158, .25) !important;
}

/* ==============================================================================
   Validierungsstile (Rot/Grün)
   Diese Stile stellen sicher, dass Formularvalidierungen visuell klar sind.
   Sie müssen nach den allgemeinen Formularfeld-Regeln stehen, um diese zu überschreiben.
   ==============================================================================*/

/* Stil für gültige (grüne) Felder */
.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 */
.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) */
.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;
}

/* Für Checkboxen/Radiobuttons (sicherstellen, dass Label-Textfarbe nicht überschrieben wird) */
.form-check-input.is-valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .form-check-label {
    color: inherit; /* Behält die Textfarbe des Labels bei */
}
.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label {
    color: inherit; /* Behält die Textfarbe des Labels bei */
}

/* NEU: Visuelle Markierung für ungültige Checkboxen/Radio-Buttons im Light Mode */
.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: var(--bs-form-invalid-border-color) !important; /* Rote Rahmenfarbe */
}

/* Optional: Besserer Fokus für ungültige Checkboxen/Radio-Buttons im Light Mode */
.form-check-input.is-invalid:focus,
.was-validated .form-check-input: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;
    outline: 0 !important;
}

/* Farbe für Fehlermeldungen (invalid-feedback) */
.invalid-feedback {
    color: var(--rz-bfsgrot); /* bfsgrot für Fehlermeldungen */
}

/* ==============================================================================
   Sonstige globale Stile
   Hier werden allgemeine, nicht-kategorisierte Stile definiert.
   ==============================================================================*/

/* Spezifisch für Iframes (Video-Einbettungen etc.) */
iframe {
    width: 100%; /* Iframes nehmen die volle Breite ein */
    height: 500px; /* Feste Höhe */
    border: none; /* Kein Standardrahmen */
}

/* Spezifisch für responsive Bilder ohne Bootstrap-Klasse 'img-fluid' */
img {
    max-width: 100%; /* Bilder skalieren nicht über ihre Container hinaus */
}

a[target="_blank"] {
    padding-right: 1.5em; 
    position: relative; 
}

a[target="_blank"]::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
    display: inline-block; 
    margin-left: 0.4em; 
    vertical-align: middle; 
    position: absolute; 
    right: 0.5em;    
    top: 50%;
    transform: translateY(-50%); 
    font-size: 0.8em; 

    /* WICHTIG: Visuell verstecken des Icons für Screenreader */
    speak: none; 
}

/* Stellt sicher, dass das Label einen größeren klickbaren Bereich hat
   und die Checkbox korrekt ausgerichtet ist. */
.form-check .form-check-label {
    min-height: 44px; /* Mindesthöhe für den klickbaren Bereich gemäß WCAG 2.5.5 (Enhanced AAA) */
    display: flex; /* Flexbox für eine saubere Ausrichtung von Checkbox und Text */
    align-items: center; /* Vertikale Zentrierung der Elemente innerhalb des Labels */
    cursor: pointer; /* Zeigt an, dass das Label anklickbar ist */
}

/* Stellt sicher, dass die Checkbox selbst eine gute Basisgröße hat und
   genügend Abstand zum Label-Text. */
.form-check-input {
    min-width: 24px; /* Mindestbreite des Checkbox-Quadrats */
    min-height: 24px; /* Mindesthöhe des Checkbox-Quadrats */
    margin-right: 0.5rem; /* Abstand zwischen Checkbox und dem Label-Text */
    margin-top: 0; /* Setzt oberen Rand zurück, um die Zentrierung zu unterstützen */
}

/* Erhöht den Abstand zum nachfolgenden Element */
/* Dies ist besonders wichtig, um die geforderten 12px Abstand zu gewährleisten. */
.form-check {
    margin-bottom: 1.5rem; /* Erhöht den unteren Rand des gesamten Checkbox-Containers */
    /* Der Standardwert für .mb-3 ist 1rem. Durch 1.5rem haben Sie hier mindestens 0.5rem zusätzlichen Abstand.
       Prüfen Sie, ob dieser Wert in Ihrem Layout ausreichend ist oder angepasst werden muss. */
}