/*==============================================================================
    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('/inc/fonts/DINNextLTW05-Regular.woff2') format('woff2'),
         url('/inc/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('/inc/fonts/DINNextLTW05-Bold.woff2') format('woff2'),
         url('/inc/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: #293139; /* Dunkelblau vormals #2A3845 (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) */

    /* --- 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(--rz-kuerbisrot) !important; /* Hintergrundfarbe beim Hover */
    --bs-btn-hover-border-color: var(--rz-kuerbisrot) !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;
}

---

## Vertikale Zentrierung des `<main>`-Bereichs zwischen festem Header und Footer

```css
/* ==============================================================================
    Globale Body- und Basis-Stile
    Allgemeine Layout- und Typografie-Regeln für den gesamten Body.
    ==============================================================================*/

/* EXTREM WICHTIG: Stellt sicher, dass das HTML-Element die volle Höhe einnimmt.
   Dies ist notwendig, damit 'body' seine 'min-height: 100vh' korrekt interpretieren
   und den Flexbox-Mechanismus über die gesamte Viewport-Höhe anwenden kann. */
html {
    height: 100%;
}

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 */
    
    display: flex;
    flex-direction: column; /* Anordnung der Elemente untereinander (von oben nach unten) */
    min-height: 100vh; /* Mindesthöhe des Bodys ist die volle Viewporthöhe */
    margin: 0; /* Standard-Margin des Bodys entfernen, um ungewollte Abstände zu vermeiden */
    overflow-y: scroll; /* WICHTIG: Erlaubt Scrollen im Body, falls der Inhalt die Viewporthöhe überschreitet.
                            Dies vermeidet Doppel-Scrollbalken und unerwartetes Layout-Verhalten. */

    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;
}

/* --- MAIN CONTENT STYLING FÜR VERTIKALE ZENTRIERUNG --- */
main {
    /* flex-grow: 1 sorgt dafür, dass der <main>-Bereich den gesamten
       verfügbaren vertikalen Platz zwischen Header und Footer einnimmt.
       Ohne dies würde <main> nur so hoch sein wie sein Inhalt, und die Zentrierung
       würde nicht sichtbar, da kein "Extra-Platz" zum Zentrieren vorhanden wäre. */
    flex-grow: 1;

    /* Das <main>-Element wird selbst zum Flex-Container, um seinen *eigenen Inhalt*
       (hier: die <section class="page">) zu zentrieren. */
    display: flex;
    flex-direction: column; /* Inhalt von <main> vertikal anordnen (Standard für Textfluss) */
    align-items: center;   /* Zentriert den Inhalt von <main> HORIZONTAL (entlang der Kreuzachse) */
    justify-content: center; /* Zentriert den Inhalt von <main> VERTIKAL (entlang der Hauptachse, da flex-direction: column) */
    
    /* Wichtig: Diese paddings sind notwendig, um zu verhindern, dass der Inhalt
       von <main> vom fixed Header und Footer überlappt wird.
       Die Werte (90px) müssen an die tatsächliche Höhe deines Headers und Footers
       angepasst werden, idealerweise mit Media Queries für unterschiedliche Bildschirmgrößen,
       falls die Header/Footer-Höhe variiert. */
    padding-top: 60px;   /* ANPASSEN an die maximale Höhe deines Headers */
    padding-bottom: 60px; /* ANPASSEN an die maximale Höhe deines Footers */
    
    width: 100%; /* Sicherstellen, dass <main> die volle Breite einnimmt */
    box-sizing: border-box; /* WICHTIG: Stellt sicher, dass Padding in die Gesamtbreite/-höhe einbezogen wird.
                               Dies verhindert, dass das Padding die Breite von 100% überschreitet. */
    overflow-y: auto; /* Erlaubt Scrollen NUR innerhalb des Main-Bereichs, wenn der Inhalt länger ist,
                          ohne den festen Header/Footer zu beeinflussen. */
}

/* Wenn du einen inneren Container hast, wie <section class="page">,
   der den zentrierten Inhalt umschließt, musst du ihn ggf. auch anpassen. */
main .page {
    text-align: center; /* Zentriert Text und Inline-Elemente horizontal innerhalb von .page */
    max-width: 800px; /* Optional: Setzt eine maximale Breite für den zentrierten Inhalt,
                         um die Lesbarkeit zu verbessern. */
    margin: 0 auto; /* Horizontal zentriert den .page-Container selbst, wenn er schmaler als 100% ist. */
    padding: 20px; /* Optional: Inneres Padding für den Inhalt innerhalb von .page */
    /* Weitere Stile für den Inhalt innerhalb des Hauptbereichs */
}
/* --- ENDE MAIN CONTENT STYLING --- */


/* ==============================================================================
    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(--rz-bfsgblau);
    /* Wichtig für Fixed-Elemente: Eine hohe z-index, damit sie über anderen Inhalten liegen */
    z-index: 1040; /* Höher als die Bootstrap-Standard-Z-Indices für Navbars */
}

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

/* 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 {
    /* ÄNDERUNG HIER: stroke='rgb(255, 255, 255)' für Weiß */
    background-image: 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") !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;
}

/* Globaler Hover-Indikator für ALLE Nav-Links und Buttons im Header/Footer (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-kuerbisrot) !important; /* Kürbisrot als Hover-Farbe */
    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-kuerbisrot) !important;
    border-color: var(--rz-kuerbisrot) !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 */
}

/* Zusätzliche Regel für das umschließende Skiplink-Div */
div[role="navigation"][aria-label="Sprunglinks"] {
    position: absolute; /* Setzt das Div absolut */
    top: 0;
    left: 0;
    /* Optional: Eine kleine Breite/Höhe, wenn es nicht fokussiert ist */
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 99999; /* Muss sehr hoch sein, um alles zu überlappen */
}

/* Wichtig: Beim Fokus muss dieses Div auch sichtbar werden */
div[role="navigation"][aria-label="Sprunglinks"]:focus-within {
    position: static; /* Bringt es in den normalen Fluss zurück */
    width: auto;
    height: auto;
    overflow: visible;
}

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

/* Standard für visuell versteckte Elemente, die aber von Screenreadern erfasst werden */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Fokus-Stil für visuell versteckte, fokussierbare Elemente (Skip Links) */
.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 */
    color: white !important; /* Textfarbe für Kontrast */
    /* Restore visibility: */
    position: static !important; /* Make it visible in flow */
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 0.5rem 1rem !important; /* Add some padding for better appearance */
    display: inline-block !important; /* or block, depending on desired layout */
    z-index: 9999; /* Ensure it's on top */
}

/* Sicherstellen, dass .visually-hidden-focusable in nicht-fokussiertem Zustand versteckt ist */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==============================================================================
    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);
    /* Wichtig für Fixed-Elemente: Eine hohe z-index, damit sie über anderen Inhalten liegen */
    z-index: 1040; /* Höher als die Bootstrap-Standard-Z-Indices für Footer */
}

/* 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) */
/* Ziel: Das RZ Plus Logo im Footer beim Hover/Focus rot einfärben */
#bfsg-footer .nav-link:hover .footer-rz-logo,
#bfsg-footer .nav-link:focus .footer-rz-logo {
    /* Optimierte 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; /* Macht Platz für das Icon */
    position: relative; /* Für die Positionierung des Icons */
}

a[target="_blank"]::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)' viewBox='0 0 24 24' fill='%233B5B9E'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
    width: 0.9em; /* Größe des Icons anpassen */
    height: 0.9em;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.2em; /* Abstand zum Text */
}

/* Hover/Focus Effekt für das externe Link-Icon im Light Mode (BF-Blau zu Orange) */
main a[target="_blank"]:hover::after,
main a[target="_blank"]:focus::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)' viewBox='0 0 24 24' fill='%23e84f1c'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
}

/* Spezifische Anpassungen für die HTTPAuth-Box */
.wrap {
    margin: 20px auto; /* Zentriert die Box horizontal */
    padding: 20px;
    background-color: var(--bs-body-bg); /* Nutzt die Body-Hintergrundfarbe */
    border: 1px solid var(--rz-dunkelblau); /* Dunkler Rahmen */
    border-radius: var(--bs-border-radius, 0.25rem); /* Abgerundete Ecken */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    max-width: 500px; /* Maximale Breite der Box */
    text-align: center; /* Text in der Box zentrieren */
}

/* Zusätzliche Anpassungen für Überschriften im Main-Bereich */
main h1, main h2, main h3, main h4, main h5, main h6 {
    color: var(--rz-dunkelblau); /* Einheitliche dunkle Farbe für Überschriften */
    margin-bottom: 1rem;
}

/* Anpassung für Paragraphen im Main-Bereich */
main p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Letzte Footer-Anpassung, falls bootstrap's fixed-bottom überschrieben werden muss */
.fixed-bottom {
    z-index: 1030; /* Sicherstellen, dass der Footer über anderem Inhalt liegt (wie Navbar) */
}

/* Allgemeine Abstände für Bootstrap Container, um Überlappung mit Fixed-Elementen zu vermeiden */
.container {
    /* Diese Abstände werden jetzt hauptsächlich durch das padding-top/bottom auf <main> gehandhabt.
       Die Bootstrap-Container in <main> erben diese dann. */
}