/*==============================================================================
   Base Styles & Font Embedding
   ==============================================================================*/
@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;
    font-display: swap;
}

@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; /* Dies ist Ihr Bold-Font-Weight */
    font-display: swap;
}

/* Custom CSS Variables (Brand Style Guide Colors) */
:root {
    --rz-kobaltblau: #4f80ff;
    --rz-kiwigruen: #6bb024;
    --rz-kuerbisrot: #e84f1c; /* Ihre Kürbisrot-Farbe */
    --rz-graublau: #EFF3F5; /* Hintergrund Light Mode */
    --rz-dunkelblau: #2A3845;

    --rz-bfsgblau: #0050B3; /* Linkfarbe Light Mode - Kontrast: 6.75:1 auf EFF3F5 (AA erfüllt, nahe AAA) */
    --rz-bfsgrot: #B23F00;

    /* ANPASSUNG: Bootstrap Linkvariablen auf Ihre Brand-Farben setzen (Light Mode) */
    --bs-link-color: var(--rz-bfsgblau);
    --bs-link-decoration: underline; /* Standardmäßig unterstrichen für Main-Links (siehe frühere Diskussion) */
    
    /* NEU: Spezifische Hover-Farbe und Dekoration für Light Mode Links im Main-Bereich */
    --bs-link-hover-color: var(--rz-kuerbisrot); /* Kürbisrot als deutlicher Farbwechsel bei Hover/Focus */
    --bs-link-hover-decoration: underline; /* Unterstreichung bleibt bei Hover/Focus */

    --bs-font-sans-serif: 'DIN-NEXT-LT-PRO', sans-serif;
    --bs-body-color: var(--rz-dunkelblau);
    --bs-body-bg: var(--rz-graublau);

    --rz-dark-bg: #1A242C; /* Hintergrund Dark Mode */
    --rz-dark-text: #EFF3F5;

    /* ANPASSUNG: Dark Mode Linkfarben für bessere Barrierefreiheit */
    --rz-dark-link-normal: #ADD8E6; /* Kontrast 4.87:1 auf 1A242C (AA erfüllt!) */
    --rz-dark-link-hover: var(--rz-kuerbisrot); /* Kürbisrot auch im Dark Mode als Hover-Farbe */

    --rz-muted: #6c757d;
    --rz-dark-muted: #9DA5AD;
    --rz-border-dark: #3F4C5C;
    --rz-shadow-dark: rgba(0, 0, 0, 0.5);
    --rz-icon-dark: var(--rz-icon-dark, var(--rz-dark-text));

    /* NEUE VARIAIBLEN für Fokus-Farben */
    --rz-focus-outline-light: #212529; /* Sehr dunkles Grau für Light Mode Outline */
    --rz-focus-shadow-light: rgba(33, 37, 41, .5); /* Passender Schatten für Light Mode */
    --rz-focus-outline-dark: var(--rz-kuerbisrot); /* Kürbisrot für Dark Mode Outline */
    --rz-focus-shadow-dark: rgba(232, 79, 28, .5); /* Passender Schatten für Dark Mode */
}

/* Utility Classes (Custom Background Colors) */
.bg-bfsgblau {
    background-color: var(--rz-bfsgblau) !important;
}

.bg-dunkelblau {
    background-color: var(--rz-dunkelblau) !important;
}

/* Global Body Styling */
body {
    font-family: var(--bs-font-sans-serif);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    hyphens: auto;
    padding-top: 90px;
    padding-bottom: 90px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Specific for Iframes */
iframe {
    width: 100%;
    height: 500px;
    border: none;
}

/* Navbar & Header Styling */
img.navbar-logo {
    max-width: 200px;
}

/* Navbar Toggler Icon Color (bfsg white) */
.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(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Global Toggler Rahmenfarbe */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1) !important; /* Bleibt beim dezenteren Wert, da es der Standard ist */
}

/* Nav-Link Styles (Initialisierung für alle Links im Header/Footer) */
/* Diese Regel betrifft hauptsächlich Navigationslinks im Header und Footer */
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .btn-link,
html body footer.bg-dunkelblau .container-fluid .navbar .container.d-flex .d-flex.flex-nowrap a.nav-link,
html body footer.bg-dunkelblau #footerNavbarCollapse .navbar-nav .nav-item .btn-link {
    text-decoration: none !important; /* Unterstreichung nur bei Hover/Focus für Nav-Links */
    color: white !important; /* Header/Footer Nav-Links sind weiß im Standard */
    padding: 1px 3px !important;
    border: 3px solid transparent !important;
    border-radius: var(--bs-border-radius, 0.25rem) !important;
    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 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Transition für Fokus-Effekt hinzugefügt */
    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;
}

/* Global Hover Indication für ALLE Nav-Links und Buttons */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .btn-link:hover,
html body footer.bg-dunkelblau .container-fluid .navbar .container.d-flex .d-flex.flex-nowrap a.nav-link:hover,
html body footer.bg-dunkelblau #footerNavbarCollapse .navbar-nav .nav-item .btn-link:hover {
    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.25rem) !important;
}

/* Fokus-Stil für Nav-Links und Buttons im Header/Footer, um BITV-Anforderung zu erfüllen */
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .btn-link:focus,
html body footer.bg-dunkelblau .container-fluid .navbar .container.d-flex .d-flex.flex-nowrap a.nav-link:focus,
html body footer.bg-dunkelblau #footerNavbarCollapse .navbar-nav .nav-item .btn-link:focus {
    text-decoration: underline !important;
    color: var(--rz-kuerbisrot) !important; /* Textfarbe bleibt Kürbisrot */
    border-color: var(--rz-kuerbisrot) !important; /* Rahmen bleibt Kürbisrot */
    padding: 1px 3px !important;
    border-radius: var(--bs-border-radius, 0.25rem) !important;
    outline: 3px solid var(--rz-focus-outline-light) !important; /* Standard (Light Mode): Dunkles Grau */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 .25rem var(--rz-focus-shadow-light) !important; /* Standard (Light Mode): Dunkler Schatten */
}


/* Active Nav-Link Indication for Screen Readers (visual enhancement) */
.navbar-nav .nav-link[aria-current="page"] {
    color: var(--rz-kiwigruen) !important;
    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 */
#mainNavbarCollapse .navbar-nav {
    margin-top: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

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

/* === WICHTIG: LINKS IM MAIN-BEREICH FÜR BARRIEREFREIHEIT ANPASSEN === */
/* Diese Regel sorgt dafür, dass Links im Hauptinhaltsbereich barrierefrei sind */
main a {
    color: var(--bs-link-color); /* Nutzt die im :root definierte Linkfarbe */
    text-decoration: var(--bs-link-decoration); /* Standardmäßig unterstrichen */
    font-weight: 700; /* Links im Main-Bereich sind halbfett */
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, outline 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Transition für Fokus-Effekt */
}

/* Wiederhergestellter Hover-Effekt für Links im Main-Bereich */
main a:hover {
    color: var(--bs-link-hover-color); /* Kürbisrot */
    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 */
    text-decoration: underline;
    outline: 3px solid var(--rz-focus-outline-light) !important; /* Standard (Light Mode): Dunkles Grau */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 .25rem var(--rz-focus-shadow-light) !important; /* Standard (Light Mode): Dunkler Schatten */
}

/* === WICHTIG: Fokus-Stil für den Skip-Link === */
.visually-hidden-focusable:focus {
    outline: 3px solid var(--rz-focus-outline-light) !important; /* Standard (Light Mode): Dunkles Grau */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 .25rem var(--rz-focus-shadow-light) !important; /* Standard (Light Mode): Dunkler Schatten */
}


---
/* Footer CSS Anpassungen */
---

/* Sicherstellen der vertikalen Ausrichtung im Footer-Container */
.footer .navbar .container-fluid {
    align-items: center;
    flex-wrap: nowrap !important;
}

/* *** KRITISCHER FIX FÜR DAS PLATZPROBLEM VON #footerNavbarCollapse (Desktop) *** */
@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 auf Desktop nicht sichtbar ist */
    .footer .navbar-toggler {
        display: none !important;
    }
}

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

    /* KORRIGIERT: 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ü */
    .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;
    }

    /* Das aufgeklappte Menü (.navbar-collapse) */
    .footer #footerNavbarCollapse {
        width: 100% !important;
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        order: 2 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: right !important;
    }

    /* Einzelne Nav-Items innerhalb des aufgeklappten 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;
        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;
    }
}

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

/* --- Dark Mode Specific Styles (BITV, WCAG, BFSG compliant) --- */
@media (prefers-color-scheme: dark) {
    /* Root-Variablen für den Dark Mode überschreiben */
    :root {
        --bs-body-color: var(--rz-dark-text);
        --bs-body-bg: var(--rz-dark-bg);

        /* ANPASSUNG: Bootstrap Linkvariablen auf Ihre Brand-Farben setzen (Dark Mode) */
        --bs-link-color: var(--rz-dark-link-normal);
        --bs-link-hover-color: var(--rz-kuerbisrot); /* Kürbisrot auch im Dark Mode als Hover-Farbe */
        --bs-link-decoration: underline; /* Standardmäßig unterstrichen auch im Dark Mode */
        --bs-link-hover-decoration: underline; /* Unterstreichung bleibt beim Hover/Focus */

        /* Dark Mode Fokus-Farben (Kürbisrot funktioniert hier gut) */
        --rz-focus-outline-dark: var(--rz-kuerbisrot);
        --rz-focus-shadow-dark: rgba(232, 79, 28, .5);
    }
    /* Toggler Icon Farbe im Dark Mode auf Weiß setzen */
    .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(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    /* Erhöhte Spezifität für allgemeine Nav-Links im Darkmode */
    .navbar .navbar-nav .nav-link,
    .navbar .navbar-nav .btn-link,
    html body footer.bg-dunkelblau .container-fluid .navbar .container.d-flex .d-flex.flex-nowrap a.nav-link,
    html body footer.bg-dunkelblau #footerNavbarCollapse .navbar-nav .nav-item .btn-link {
        color: var(--rz-dark-text) !important;
    }

    /* Fokus-Stil für Nav-Links und Buttons im Header/Footer im Dark Mode */
    .navbar .navbar-nav .nav-link:focus,
    .navbar .navbar-nav .btn-link:focus,
    html body footer.bg-dunkelblau .container-fluid .navbar .container.d-flex .d-flex.flex-nowrap a.nav-link:focus,
    html body footer.bg-dunkelblau #footerNavbarCollapse .navbar-nav .nav-item .btn-link:focus {
        outline: 3px solid var(--rz-focus-outline-dark) !important; /* Kürbisrot im Dark Mode */
        box-shadow: 0 0 0 .25rem var(--rz-focus-shadow-dark) !important; /* Kürbisrot-Schatten im Dark Mode */
    }

    /* Fokus-Stil für Links im Main-Bereich im Dark Mode */
    main a:focus {
        outline: 3px solid var(--rz-focus-outline-dark) !important; /* Kürbisrot im Dark Mode */
        box-shadow: 0 0 0 .25rem var(--rz-focus-shadow-dark) !important; /* Kürbisrot-Schatten im Dark Mode */
    }

    /* Fokus-Stil für den Skip-Link im Dark Mode */
    .visually-hidden-focusable:focus {
        outline: 3px solid var(--rz-focus-outline-dark) !important; /* Kürbisrot im Dark Mode */
        box-shadow: 0 0 0 .25rem var(--rz-focus-shadow-dark) !important; /* Kürbisrot-Schatten im Dark Mode */
    }

    /* Active Nav-Link Indication for Screen Readers (visual enhancement) */
    .navbar-nav .nav-link[aria-current="page"] {
        color: var(--rz-kiwigruen) !important;
        border-color: var(--rz-kiwigruen) !important;
        padding: 1px 3px !important;
    }

    .text-muted {
        color: var(--rz-dark-muted) !important;
    }
}