@import url("../Fonts/stylesheet.css");

/* =========================================================
   ALLGEMEINE STYLES
   ========================================================= */

* {
    color: #192a3d;
}

/* =========================================================
   TYPOGRAFIE - Basis-Konfiguration mit lokaler Roboto
   ========================================================= */

body {
    /* Schriftfamilie: Lokale Roboto mit Fallback */
    font-family: "Roboto", sans-serif;
    font-weight: 400; /* Regular für Fließtext */
    
    /* Lesbarkeit */
    line-height: 1.65;
    letter-spacing: 0;
    
    /* Responsive Schriftgrößen */
    font-size: 0.9rem;   /* ~10pt für kleine Screens */
    color: #222;
}

/* Standard Desktop (ab 576px) */
@media (min-width: 576px) {
    body {
        font-size: 1rem;  /* ~12pt */
    }
}

/* Große Screens für bessere Lesbarkeit (ab 1200px) */
@media (min-width: 1200px) {
    body {
        font-size: 1.17rem; /* ~14pt */
    }
}

/* =========================================================
   ÜBERSCHRIFTEN - Hierarchie mit Roboto Bold
   Basis: 1rem = 16px
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto", sans-serif;
    font-weight: 700; /* Roboto Bold für klare Hierarchie */
}

/* Hauptüberschrift (~23pt / 30-31px) */
h1 {
    font-size: 1.92rem;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 0.75em;
}

/* Abschnittsüberschrift (~25-26px) */
h2 {
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 0.7em;
}

/* Unterabschnitt (~21-22px) */
h3 {
    font-size: 1.35rem;
    line-height: 1.35;
    font-weight: 600;
    margin-bottom: 0.6em;
}

/* Kleine Überschrift / Einleitung (~18-19px) */
h4 {
    font-size: 1.15rem;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 0.5em;
}

/* Feinstruktur / Meta-Ebene (16px) */
h5 {
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 600;
    margin-bottom: 0.4em;
}

/* Sonderfälle / Labels (~14px) */
h6 {
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em; /* Bessere Lesbarkeit bei Versalien */
    margin-bottom: 0.3em;
}

/* =========================================================
   FLIEßTEXT - Standard-Elemente
   ========================================================= */

p, li, td, th {
    font-size: 1rem; /* Responsiv (Standard: 16px, responsive durch body) */
    font-weight: 400; /* Regular */
    line-height: 1.65;
    font-family: "Roboto", sans-serif;
}

/* =========================================================
   NAVIGATION - Desktop-Layout mit rechtsbündiger Ausrichtung
   Betrifft: #page-header > .container-mainnavigation
   ========================================================= */

@media (min-width: 992px) {
    /* Header-Container: Flex-Layout für Logo links, Navigation rechts */
    #page-header .container-mainnavigation {
        display: flex;
        align-items: center;
    }

    /* Navigation-Wrapper: nimmt restlichen Platz und schiebt Inhalt nach rechts */
    #page-header #mainnavigation.navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        justify-content: flex-end !important;
    }

    /* UL: verhindert volle Breite und erzwingt rechtsbündige Position */
    #page-header #mainnavigation.navbar-collapse > ul.navbar-nav {
        width: auto !important; /* Überschreibt width:100% */
        flex: 0 0 auto !important; /* Überschreibt flex:1 */
        justify-content: flex-end !important;
        margin-left: 0 !important;
    }
}

/* =========================================================
   CAROUSEL - Header-Styles
   ========================================================= */

/* Entfernt oberen Abstand für Carousel */
.frame-space-before-none {
    padding-top: 0 !important;
}

/* Haupt-Header im Carousel: orangener Hintergrund */
.carousel-header {
    display: inline-block;
    background-color: #F39100;
    color: #fff !important;
    padding: 0.5rem 1rem;
    font-weight: bold !important;
    border-radius: 0.25rem;
}

/* Sub-Header im Carousel: gleicher Style wie Header */
.carousel-subheader {
    display: inline-block;
    background-color: #F39100;
    color: #fff !important;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

/* Desktop: volle Breite für Carousel-Text */
@media (min-width: 992px) {
    .carousel-item-type-header .carousel-text-inner {
        width: 100%;
    }
}

/* =========================================================
   NAVIGATION LINKS - Größe und Spacing
   ========================================================= */

.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: 0.9rem !important;
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: none;
    border: 0;
    transition: color 0.15s ease-in-out, 
                background-color 0.15s ease-in-out, 
                border-color 0.15s ease-in-out;
}

/* =========================================================
   LOGO - Positionierung und Größe
   ========================================================= */

.site_logo {
    height: 100px;
}

/* Logo-Bild: vertikale Zentrierung */
.navbar-mainnavigation .navbar-brand-image img {
    position: relative;
    top: 100%;
    transform: translate(0, -50%);
    width: auto;
    max-height: calc(var(--mainnavigation-nav-height));
}

/* =========================================================
   HAUPTNAVIGATION - CSS Custom Properties und Layout
   ========================================================= */

.navbar-mainnavigation {
    /* Farben */
    --mainnavigation-hightlight: #F39100;
    
    /* Abstände zwischen Nav-Items */
    --mainnavigation-nav-spacing-y: 1px;
    --mainnavigation-nav-spacing-x: 0 !important;

    /* Link-Typo */
    --mainnavigation-link-font-size: 0.8rem;
    --mainnavigation-link-line-height: 1.45;
    --mainnavigation-link-padding-y: .5rem;
    --mainnavigation-link-padding-x: .75rem;

    /* Berechnete Link-Höhe */
    --mainnavigation-link-height: calc(
        (var(--mainnavigation-link-padding-y) * 1) +
        (var(--mainnavigation-link-line-height) * var(--mainnavigation-link-font-size))
    );

    /* Dropdown-Einstellungen */
    --mainnavigation-dropdown-column-spacing: 1px;
    --mainnavigation-dropdown-column-min-width: 220px;
    --mainnavigation-dropdown-padding-y: 1rem;
    --mainnavigation-dropdown-padding-x: 1rem;
    --mainnavigation-dropdown-link-padding-y: .2rem;
    --mainnavigation-dropdown-link-padding-x: .5rem;
    --mainnavigation-dropdown-spacer: 0;

    /* Visuelle Effekte */
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);

    /* Navigationshöhe (halbiert von ursprünglich 180px) */
    --mainnavigation-nav-height: 90px !important;

    /* Vertikale Zentrierung - Korrektur-Werte für Design-Anpassung */
    --mainnavigation-padding-top-offset: 25px;
    --mainnavigation-padding-bottom-offset: 50px;
    
    padding-top: calc((var(--mainnavigation-nav-height) - var(--mainnavigation-link-height)) - var(--mainnavigation-padding-top-offset));
    padding-bottom: calc((var(--mainnavigation-nav-height) - var(--mainnavigation-link-height)) - var(--mainnavigation-padding-bottom-offset));
}

/* =========================================================
   FORM-STYLES (BZL Anpassungen für TYPO3 EXT:form)
   =========================================================
   Klassen-Struktur von EXT:form:
   - .form-group = Container für jedes Feld
   - .form-label = Label über dem Feld
   - .form-control = Eingabefelder (input, textarea, select)
   - .form-check = Checkbox/Radio Container
   - .form-navigation = Button-Bereich
   ========================================================= */

/* ------------------------------------------------------------
   FORM-GROUP: Container für jedes Formularfeld
   ------------------------------------------------------------ */
.form-group {
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------
   LABELS: Fett, dunkel, über dem Feld
   ------------------------------------------------------------ */
.form-group .form-label,
.form-group > label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #192a3d;
    font-size: 1rem;
}

/* Pflichtfeld-Stern in Orange */
.form-group .form-label .required,
.form-group .form-label span[style*="color"] {
    color: #F39100 !important;
}

/* ------------------------------------------------------------
   EINGABEFELDER: Dezenter Rahmen, größere Padding
   ------------------------------------------------------------ */
.form-group .form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Placeholder-Farbe */
.form-group .form-control::placeholder {
    color: #adb5bd;
}

/* Focus-State: Orange Rahmen */
.form-group .form-control:focus {
    border-color: #F39100;
    box-shadow: 0 0 0 0.2rem rgba(243, 145, 0, 0.15);
    outline: none;
}

/* Textarea: Mindesthöhe */
.form-group textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

/* ------------------------------------------------------------
   FEHLER-STYLING
   ------------------------------------------------------------ */
.form-group.has-error .form-control {
    border-color: #dc3545;
}
.form-group .error.form-text {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Hilfetext unter Feldern */
.form-group .form-text:not(.error) {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ------------------------------------------------------------
   CHECKBOX / RADIO: Inline-Layout mit Text
   ------------------------------------------------------------ */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 0;
}

.form-check .form-check-input {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.2rem;
    cursor: pointer;
}

.form-check .form-check-input:checked {
    background-color: #F39100;
    border-color: #F39100;
}

.form-check .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(243, 145, 0, 0.25);
    border-color: #F39100;
}

.form-check .form-check-label,
.form-check label {
    font-weight: 400;
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: pointer;
}

/* Links innerhalb von Checkbox-Labels (z.B. Datenschutzerklärung) */
.form-check a,
.form-check-label a {
    color: #F39100;
    text-decoration: underline;
}
.form-check a:hover,
.form-check-label a:hover {
    color: #c57500;
}

/* ------------------------------------------------------------
   SUBMIT-BUTTON: BZL Orange
   ------------------------------------------------------------ */
.form-navigation,
.form-group button[type="submit"],
form button[type="submit"],
.btn-primary {
    margin-top: 1rem;
}

.form-navigation .btn,
.form-group button[type="submit"],
form button[type="submit"],
.btn-primary,
button.btn-primary {
    background-color: #F39100;
    border-color: #F39100;
    color: #fff;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.form-navigation .btn:hover,
.form-group button[type="submit"]:hover,
form button[type="submit"]:hover,
.btn-primary:hover,
button.btn-primary:hover {
    background-color: #d98200;
    border-color: #d98200;
    color: #fff;
}

.form-navigation .btn:focus,
.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(243, 145, 0, 0.5);
}
.required{
    color: #F39100 !important;
}
/* ------------------------------------------------------------
   LEGACY: .form-container Kompatibilität (falls verwendet)
   ------------------------------------------------------------ */
.form-container {
    max-width: 100%;
    margin: 0 auto;
}

/* Mobile Navigation (unter 992px) */
@media (max-width: 991px) {
    /* Logo: kleinere Darstellung für Mobile */
    .navbar-mainnavigation .navbar-brand-image img {
        position: relative;
        top: 70%;
        transform: translate(0, -50%);
        width: auto;
        max-height: calc(var(--mainnavigation-nav-height) - 50px);
    }

    /* Mobile Navigation: symmetrische vertikale Zentrierung */
    .navbar-mainnavigation {
        --mainnavigation-hightlight: #F39100;
        --mainnavigation-nav-spacing-y: 1px;
        --mainnavigation-nav-spacing-x: 0 !important;

        --mainnavigation-link-font-size: 0.8rem;
        --mainnavigation-link-line-height: 1.45;
        --mainnavigation-link-padding-y: .5rem;
        --mainnavigation-link-padding-x: .75rem;

        --mainnavigation-link-height: calc(
            (var(--mainnavigation-link-padding-y) * 1) +
            (var(--mainnavigation-link-line-height) * var(--mainnavigation-link-font-size))
        );

        --mainnavigation-dropdown-column-spacing: 1px;
        --mainnavigation-dropdown-column-min-width: 220px;
        --mainnavigation-dropdown-padding-y: 1rem;
        --mainnavigation-dropdown-padding-x: 1rem;
        --mainnavigation-dropdown-link-padding-y: .2rem;
        --mainnavigation-dropdown-link-padding-x: .5rem;
        --mainnavigation-dropdown-spacer: 0;

        box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
        --mainnavigation-nav-height: 90px !important;

        /* Symmetrische Zentrierung für Mobile */
        padding-top: calc((var(--mainnavigation-nav-height) - var(--mainnavigation-link-height)) / 2);
        padding-bottom: calc((var(--mainnavigation-nav-height) - var(--mainnavigation-link-height)) / 2);
    }
}

/* =========================================================
   DROPDOWN-MENÜS - Hover-Effekt mit Animation
   Nur für Desktop (ab 992px)
   ========================================================= */

@media (min-width: 992px) {

    /* Grundzustand: Dropdown versteckt mit Animation vorbereitet */
    .navbar-mainnavigation .nav-item.nav-style-simple > .dropdown-menu {
        display: block; /* Wichtig für CSS-Transitions */
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* Verhindert Klicks im unsichtbaren Zustand */

        margin-top: 3rem; /* Abstand vom Nav-Item */
        transform: translateY(-8px); /* Leichte Bewegung von oben nach unten */

        /* Transition mit Delay für visibility */
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0s linear 0.18s;
    }

    /* Hover-Brücke: verlängert Hover-Fläche nach unten zum Dropdown */
    .navbar-mainnavigation .nav-item.nav-style-simple {
        position: relative;
        padding-bottom: 3rem; /* Muss mit margin-top des Dropdowns übereinstimmen */
    }

    /* Hover-Zustand: Dropdown sichtbar und animiert */
    .navbar-mainnavigation .nav-item.nav-style-simple:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);

        /* Sofortige Transition ohne Delay */
        transition:
            opacity 0.18s ease,
            transform 0.18s ease;
    }

    /* Hover-Effekt für den Nav-Link */
    .navbar-mainnavigation .nav-item.nav-style-simple:hover > .nav-link,
    .navbar-mainnavigation .nav-item.nav-style-simple:hover > .nav-link-toggle {
        color: var(--bs-navbar-hover-color);
    }
}

/* =========================================================
   MAIN CONTENT - Überschriften und Links
   ========================================================= */

/* Link-Hover in Hauptinhalt: BZL-Orange */
main a:hover {
    color: #F39100 !important;
}

/* Link-Focus für Accessibility */
main a:focus-visible {
    outline: 2px solid #F39100;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Oberer Abstand für alle Überschriften im Main */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    margin-top: 30px;
}

/* --------------------------------------------------
   Frame outer spacing – BEFORE
   -------------------------------------------------- */

.frame-space-before-none {
    --frame-outer-spacing-before: 0.25rem !important;
}


/* --------------------------------------------------
   Frame outer spacing – AFTER
   -------------------------------------------------- */

.frame-space-after-none {
    --frame-outer-spacing-after: 0.25rem !important;
}

.textpic-item a, .text-column a{
    color: #F39100 !important;
    text-decoration: none;
}
/* =========================================================
   NEWS / ARTIKEL - Card-Layout und Styling
   ========================================================= */

/* Hintergrundfarbe für Artikel-Cards */
.article_bg {
    background-color: #f7f7f7 !important;
}

/* Bild füllt Ratio-Container vollständig aus */
.article_bg .ratio img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Beschneidet Bild proportional */
}

/* Teaser-Text: auf 4 Zeilen begrenzt mit Ellipsis */
.article_bg .news-teaser {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Legacy-Browser */
    line-clamp: 4; /* Moderne Browser (Standard seit 2023) */
    /* autoprefixer: off */
    -webkit-box-orient: vertical; /* Wird von manchen Minifiern entfernt, daher geschützt */
    /* autoprefixer: on */
    overflow: hidden;
}

/* Kleine Metadaten unter Artikel */
.article p.small {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 5px;
}

/* Bildunterschrift bei News */
.news-img-caption {
    color: #555;
    margin-top: 0.2rem;
    margin-bottom: 2rem;
    background-color: #ECECEC !important;
}

/* Datum / Kategorien / Autor */
.datetime-categories-author {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
}

/* Bullet-Point für News-Listen */
.news-bullet {
    width: 16px;
    height: 16px;
    background-color: #F39100; /* BZL-Orange */
    flex-shrink: 0;
    margin-top: 3px; /* Optische Ausrichtung zur ersten Textzeile */
}

/* =========================================================
   BACKGROUND FRAMES - CI-Hintergrundfarben (bootstrap_package)
   Gesteuert über "Background Color" im TYPO3 Backend
   ========================================================= */

/* --- BZL ORANGE --- */
.frame-background-bzl-orange {
    background-color: #F39100;
    color: #ffffff !important;
    padding-left: var(--frame-spacing);
    padding-right: var(--frame-spacing);
}

/* Links in Orange-Frames */
.frame-background-bzl-orange a {
    color: #ffffff;
}

.frame-background-bzl-orange a:hover,
.frame-background-bzl-orange a:focus-visible {
    color: #192a3d !important;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Hover-Effekt für Orange-Frame */
.frame-background-bzl-orange:hover {
    background-color: #e2921a;
}

/* Textfarbe in Orange-Frame erzwingen */
.frame-background-bzl-orange h2 span,
.frame-background-bzl-orange p {
    color: #ffffff !important;
}

/* Button in Orange */
.btn-orange {
    background-color: #F39100;
}

/* Button in Warning */
.btn-warning {
    --bs-btn-color: #ffffff !important;
    --bs-btn-bg: #f39100;
    --bs-btn-border-color: #f39100;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #f39100;
    --bs-btn-hover-border-color: #f39100;
    --bs-btn-focus-shadow-rgb: 207, 123, 0;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #f39100;
    --bs-btn-active-border-color: #f39100;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #f39100;
    --bs-btn-disabled-border-color: #f39100;
    --bs-btn-border: 0px !important
}

.btn-orange {
    display: inline-block;
    background-color: #F39100;
    color: #fff !important;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    text-decoration: none;
    border-color: #e78b00;
}
.btn-orange a{
    text-decoration: none;
}
.btn-orange:hover {
    display: inline-block;
    background-color: #e78b00;
    color: #fff !important;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    text-decoration: none;
    border-color: #e78b00;
}
.btn-orange a:hover{
    text-decoration: none;
}

/* Link in dunkler Farbe für Orange-Hintergrund */
.link-orange-dark {
    color: #192a3d !important;
}

/* --- BZL HELLGRAU --- */
.frame-background-bzl-gray {
    background-color: #f7f7f7 !important;
    color: #0b2a4a;
    padding-left: var(--frame-spacing);
    padding-right: var(--frame-spacing);
}

.frame-background-bzl-gray:hover {
    background-color: #f7f7f7;
}

/* Sekundäre Hintergrundfarbe Grau */
.bg-secondary-gray {
    background-color: #f7f7f7 !important;
}

/* --- BZL CREME --- */
.frame-background-bzl-cream {
    background-color: #fdefd6;
    color: #0b2a4a;
    padding-left: var(--frame-spacing);
    padding-right: var(--frame-spacing);
}

.frame-background-bzl-cream:hover {
    background-color: #fdefd6;
}

/* Links in Grau und Creme Frames */
.frame-background-bzl-gray a,
.frame-background-bzl-cream a {
    color: #f39100 !important;
    text-decoration: none;
}

.frame-background-bzl-gray a:focus-visible,
.frame-background-bzl-cream a:focus-visible {
    outline: 2px solid #192a3d;
    outline-offset: 2px;
}

/* Gemeinsame Transition für alle BZL-Background-Frames */
.frame-background-bzl-orange,
.frame-background-bzl-gray,
.frame-background-bzl-cream {
    transition:
        background-color 0.35s ease,
        transform 0.2s ease;
    will-change: transform; /* Performance-Optimierung für Animationen */
}

/* Gemeinsamer Hover-Lift-Effekt */
.frame-background-bzl-orange:hover,
.frame-background-bzl-gray:hover,
.frame-background-bzl-cream:hover {
    transform: translateY(-2px);
}

/* =========================================================
   WEITERLESEN-LINK - Mit Plus-Icon (Pseudo-Element)
   Verwendung: <a class="bzl-readmore">Text</a>
   ========================================================= */

a.bzl-readmore {
    font-weight: 600;
    text-decoration: none;
}

/* Plus-Icon wird per ::after eingefügt (kein HTML-Markup nötig) */
a.bzl-readmore::after {
    content: "+";
    display: inline-block;
    margin-left: 0.45rem;

    /* Größe und Gewicht des Plus */
    font-size: 1.8em; /* Macht das Plus deutlich größer */
    font-weight: 700;

    line-height: 1;
    vertical-align: middle; /* Bessere Ausrichtung zur Textzeile */
    transform: translateY(-0.05em); /* Optische Feinausrichtung */
}

/* Hover und Focus für Accessibility */
a.bzl-readmore:hover,
a.bzl-readmore:focus-visible {
    text-decoration: underline;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* =========================================================
   PAGINATION / PAGER - News-Listen
   ========================================================= */

/* Basis: Zahlen als Kacheln ohne Rahmen */
.news-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: .375rem;
    text-decoration: none;
    font-weight: 600;
    color: #0b2a4a; /* BZL Dunkelblau */
    border: 2px solid transparent; /* Verhindert Layout-Shift bei Hover */
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* Hover und Focus: orange Outline */
.news-pager__page:hover,
.news-pager__page:focus-visible {
    border-color: #F39100;
    color: #F39100;
    outline: none;
}

/* Aktive Seite: orange gefüllt */
.news-pager__page--active {
    background: #F39100;
    border-color: #F39100;
    color: #fff;
}

/* Pagination Buttons (ZURÜCK / NÄCHSTE): Orange Outline bei Hover */
.news-pager .btn-outline-secondary:hover,
.news-pager .btn-outline-secondary:focus-visible {
    border-color: #F39100;
    color: #F39100;
    background-color: transparent;
    outline: none;
}

/* Icon-Farbe in Buttons synchron halten */
.news-pager .btn-outline-secondary:hover i,
.news-pager .btn-outline-secondary:focus-visible i {
    color: #F39100;
}

/* =========================================================
   ACCORDION - Custom Layout mit Thumbnail und Toggle-Icon
   Layout: [Thumbnail links] [Titel mittig] [+/- rechts]
   ========================================================= */

/* Bootstrap-Standard-Chevron ausblenden (wird durch eigenes Icon ersetzt) */
.accordion-button.accordion-button--withthumb::after {
    display: none !important;
}

/* Inneres Flex-Layout des Accordion-Buttons */
.accordion-button__inner {
    display: flex;
    align-items: center;
    gap: .75rem; /* Abstand zwischen Thumbnail und Titel */
    width: 100%; /* Ermöglicht rechtsbündiges Icon */
}

/* Thumbnail-Container: feste Breite */
.accordion-button__thumb {
    flex: 0 0 auto; /* Nicht schrumpfen lassen */
    display: inline-flex;
    width: 100px;
    text-align: center;
    align-items: center;
}

/* Thumbnail-Bild */
.accordion-button__thumbimg {
    display: block;
    width: 60px;
    height: auto;
    margin-left: 10px;
}

/* Titel: nimmt verfügbaren Platz ein */
.accordion-button__title {
    flex: 1 1 auto; /* Wächst, damit Icon rechts bleibt */
    min-width: 0; /* Verhindert Überlaufen bei langen Titeln */
}

/* Toggle-Icon: rechtsbündig */
.accordion-button__toggleicon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-left: auto; /* Schiebt Icon ganz nach rechts */
    font-weight: 700;
}

/* Icon-Basis */
.accordion-icon {
    line-height: 1;
}

/* Default: Plus sichtbar, Minus versteckt */
.accordion-icon--minus {
    display: none;
}

/* Geöffnet (aria-expanded="true"): Plus ausblenden, Minus einblenden */
.accordion-button[aria-expanded="true"] .accordion-icon--plus {
    display: none;
}

.accordion-button[aria-expanded="true"] .accordion-icon--minus {
    display: inline-block;
}

/* =========================================================
   FOOTER - Sections und Styling
   ========================================================= */

/* Meta-Section des Footers */
.footer-section-meta {
    background: #ECECEC;
    --frame-color: #222;
    --frame-background: #ECECEC;
    --frame-link-color: #eb525b;
    --frame-link-hover-color: #eb525b;
}

/* Content-Section des Footers */
.footer-section-content {
    background: #ECECEC;
    --frame-color: #222;
    --frame-background: #ECECEC;
    --frame-link-color: #eb737c;
    --frame-link-hover-color: #eb737c;
}

/* Frame-Element im Footer */
footer .frame {
    position: relative;
    margin-top: var(--frame-outer-spacing-before);
    margin-bottom: var(--frame-outer-spacing-after);
    padding-top: 0 !important;
    padding-bottom: var(--frame-spacing);
    color: var(--frame-color);
    background: var(--frame-background);
    --frame-spacing: var(--frame-spacing-xs);
}

/* Desktop: Footer-Spalten gleichmäßig verteilen */
@media (min-width: 768px) {
    .footer-section-content-column-left,
    .footer-section-content-column-middle,
    .footer-section-content-column-right {
        --section-gaps: 3;
        --section-colspan: 3;
    }
}

/* Social Media Icons: größere Darstellung */
.sociallinks span {
    font-size: 2.5rem !important;
}

/* =========================================================
   COPYRIGHT - Footer-Copyright-Bereich
   ========================================================= */

.footer-copyright-text {
    background-color: #fafafa;
}

a.text-white, a.text-white:hover, a.text-white:focus {
    color: #ffffff !important;
}