/**
 * BFSG Accessibility Styles
 * Barrierefreiheitsstärkungsgesetz (BFSG) Konformität
 * WCAG 2.1 Level AA
 */

/* ============================================
   Focus-Styles für Tastaturnavigation
   ============================================ */

/* Basis Focus-Style für alle interaktiven Elemente */
/* ACHTUNG: Nicht auf alle Elemente anwenden, da dies Layout-Probleme verursachen kann */
/* :focus ohne Outline bei Mausklicks */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #00558e;
    outline-offset: 2px;
}

/* Focus-Style für H1- und H2-Überschriften (wenn per Skip-Link fokussiert oder im Tab-Flow) */
/* :focus ohne Outline bei Mausklicks */
h1:focus:not([data-skip-link-focused]),
h1[tabindex="-1"]:focus:not([data-skip-link-focused]),
h1[tabindex="0"]:focus:not([data-skip-link-focused]),
h2:focus:not([data-skip-link-focused]),
h2[tabindex="-1"]:focus:not([data-skip-link-focused]),
h2[tabindex="0"]:focus:not([data-skip-link-focused]) {
    outline: none;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation */
h1:focus-visible,
h1[tabindex="-1"]:focus-visible,
h1[tabindex="0"]:focus-visible,
h2:focus-visible,
h2[tabindex="-1"]:focus-visible,
h2[tabindex="0"]:focus-visible {
    outline: 2px solid #00558e;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 85, 142, 0.2);
}

/* WICHTIG: Fokus-Indikator auch bei programmatischem Fokus (Skip-Link) anzeigen */
/* Maximale Spezifität für H1/H2 mit .focus Klasse */
h1.focus[data-skip-link-focused]:focus,
h1.focus[tabindex="0"][data-skip-link-focused]:focus,
h2.focus[data-skip-link-focused]:focus,
h2.focus[tabindex="0"][data-skip-link-focused]:focus,
h1[data-skip-link-focused]:focus,
h1[tabindex="0"][data-skip-link-focused]:focus,
h2[data-skip-link-focused]:focus,
h2[tabindex="0"][data-skip-link-focused]:focus {
    outline: 2px solid #00558e !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 85, 142, 0.2) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Focus-Style für PDF-Preview-Links */
/* :focus ohne Outline bei Mausklicks */
a.pdf[href*="#pdf"]:focus,
a.pdf[href*="#pdf"][tabindex="0"]:focus,
figure a.pdf[href*="#pdf"]:focus,
figure.rounded a.pdf[href*="#pdf"]:focus,
figure.hover-scale a.pdf[href*="#pdf"]:focus {
    outline: none !important;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation */
a.pdf[href*="#pdf"]:focus-visible,
a.pdf[href*="#pdf"][tabindex="0"]:focus-visible,
figure a.pdf[href*="#pdf"]:focus-visible,
figure.rounded a.pdf[href*="#pdf"]:focus-visible,
figure.hover-scale a.pdf[href*="#pdf"]:focus-visible {
    outline: 3px solid #00558e !important;
    outline-offset: 3px !important;
    box-shadow:
        0 0 0 4px rgba(0, 85, 142, 0.2) !important,
        0 4px 12px rgba(0, 85, 142, 0.3) !important;
    border-radius: 0.25rem !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Focus-Style für Figure mit PDF-Link (ähnlich wie figure.lift) */
/* :focus ohne Outline bei Mausklicks */
figure.rounded:has(a.pdf[href*="#pdf"]:focus),
figure.hover-scale:has(a.pdf[href*="#pdf"]:focus) {
    border: none !important;
    box-shadow: none !important;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation */
figure.rounded:has(a.pdf[href*="#pdf"]:focus-visible),
figure.hover-scale:has(a.pdf[href*="#pdf"]:focus-visible) {
    border: 2px solid #00558e !important;
    border-radius: 0.5rem !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
    transform: translateY(-2px) !important;
    background-color: rgba(0, 85, 142, 0.03) !important;
    position: relative !important;
    z-index: 5 !important;
    transition: all 0.3s ease !important;
    padding: 0.5rem !important;
    /* Platz für Border */
}

/* Fallback für Browser ohne :has() Support */
figure.rounded:focus-within:has(a.pdf),
figure.hover-scale:focus-within:has(a.pdf) {
    border: 2px solid #00558e !important;
    border-radius: 0.5rem !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
    transform: translateY(-2px) !important;
    background-color: rgba(0, 85, 142, 0.03) !important;
    position: relative !important;
    z-index: 5 !important;
    transition: all 0.3s ease !important;
    padding: 0.5rem !important;
}


/* Erweiterte Focus-Styles für Buttons und Formularfelder */
/* :focus ohne Outline bei Mausklicks */
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(0, 85, 142, 0.25);
    outline: 2px solid #00558e;
    outline-offset: 2px;
}

/* Focus für Links */
/* :focus ohne Outline bei Mausklicks */
a:focus {
    outline: none;
}

/* :focus-visible zeigt Outline UND Text-Decoration bei Tastatur-Navigation */
a:focus-visible {
    outline: 2px solid #00558e;
    outline-offset: 2px;
    text-decoration: underline;
}

/* ============================================
   Skip-Links
   ============================================ */

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #00558e !important;
    color: #fff !important;
    padding: 12px 20px;
    text-decoration: none;
    z-index: 99999 !important;
    font-weight: bold;
    border-radius: 0 0 4px 0;
    transition: top 0.2s ease;
    width: auto;
    height: auto;
    display: inline-block;
    /* Visuell verstecken, aber für Screenreader und Tab-Navigation zugänglich */
    clip-path: inset(50%);
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5;
    /* WICHTIG: pointer-events: none verhindert, dass Skip-Links Mausklicks abfangen */
    /* Sie werden nur bei Tastatur-Navigation (Tab) aktiv */
    pointer-events: none;
}

/* Skip-Links nur bei Tastatur-Navigation aktivieren (focus-visible) */
.skip-link:focus-visible {
    top: 12px !important;
    left: 12px !important;
    /* outline: 3px solid #fff !important; */
    /* outline-offset: 2px !important; */
    position: absolute !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    clip-path: none !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    z-index: 99999 !important;
    border-radius: 4px;
    text-decoration: none;
    /* WICHTIG: pointer-events nur bei focus-visible aktivieren */
    pointer-events: auto !important;
}

/* :focus ohne pointer-events (verhindert Mausklick-Interferenz) */
.skip-link:focus:not(:focus-visible) {
    pointer-events: none !important;
}

/* Versteckte Offcanvas-Elemente visuell verstecken (Tab-Flow wird per JavaScript gesteuert) */
/* NUR auf kleinen Bildschirmen, wo das Offcanvas wirklich versteckt ist */
@media (max-width: 991.98px) {
    .offcanvas:not(.show):not(.showing) {
        pointer-events: none;
    }
}

/* ============================================
   Touch-Targets (mindestens 44x44px)
   ============================================ */

/* Sicherstellen, dass interaktive Elemente groß genug sind */
/* ACHTUNG: Nur auf Buttons anwenden, nicht auf alle Links, da dies Layout-Probleme verursacht */
.btn {
    min-height: 44px;
    min-width: 44px;
    font-size: 1rem !important;
}

.btn.btn-expand span {
    margin-top: -0.4rem;
}

/* Icon-Buttons müssen auch mind. 44x44px haben */
.btn-icon,
.nav-link[data-bs-toggle="offcanvas"],
.navbar-toggler {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar #move {
    margin-top: -1px;
    padding-bottom: 2px;
}

/* ============================================
   Navigation Focus-Styles (überschreiben Standard)
   ============================================ */

/* Logo-Link: Fokus-Rahmen mit gleicher Höhe wie Navi-Links */
.navbar .navbar-brand #logo-link,
.navbar #logo-link,
#logo-link {
    display: flex !important;
    align-items: center;
    /* padding: 0.5rem 0 !important; */
    width: 105%;
}

/* :focus ohne Outline bei Mausklicks */
.navbar .navbar-brand #logo-link:focus,
.navbar #logo-link:focus,
#logo-link:focus {
    outline: none !important;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation */
.navbar .navbar-brand #logo-link:focus-visible,
.navbar #logo-link:focus-visible,
#logo-link:focus-visible {
    outline: 2px solid #00558e !important;
    outline-offset: -3px !important;
    border-radius: 4px;
    min-height: 66px;
    margin-top: -2px;
    box-shadow: 0 0 0 .2rem rgba(63, 120, 224, .25);
}

/* Logo-Bild: margin-bottom entfernen */
#logo-link img {
    margin-bottom: 0 !important;
    /* padding: 0 1rem; */
    margin-top: 0px;
    max-width: 300px;
}

/* Navbar-Links: Fokus-Rahmen enger am Element */
/* :focus ohne Outline bei Mausklicks */
.navbar .nav-item .nav-link:focus,
.navbar .nav-link:focus {
    outline: none !important;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation */
.navbar .nav-item .nav-link:focus-visible,
.navbar .nav-link:focus-visible {
    outline: 2px solid #00558e !important;
    outline-offset: -3px !important;
    border-radius: 4px;
    margin-top: -.75px;
    text-decoration: none;
}

/* Suche-Button: Gleicher Focus-Style wie Nav-Links (hellblauer Rahmen) */
/* :focus ohne Outline bei Mausklicks */
.navbar .nav-link[data-bs-target="#offcanvas-search"]:focus,
.navbar .nav-item .nav-link[data-bs-target="#offcanvas-search"]:focus {
    outline: none !important;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation */
.navbar .nav-link[data-bs-target="#offcanvas-search"]:focus-visible,
.navbar .nav-item .nav-link[data-bs-target="#offcanvas-search"]:focus-visible {
    outline: 2px solid #00558e !important;
    outline-offset: -2px !important;
    border-radius: 4px;
    box-shadow: 0 0 0 5px rgb(206 220 246) !important;
    margin-top: -1.75px;
    text-decoration: none;
    min-height: 62px;
    line-height: 62px;
}

.navbar .nav-item .nav-link[data-bs-target="#offcanvas-search"] i {
    padding: 0 .5rem;
}

/* ============================================
   Responsive & Zoom (200% Zoom Support)
   ============================================ */

/* Sicherstellen, dass bei 200% Zoom kein horizontales Scrollen nötig ist */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ============================================
   Screenreader-only Content
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   Dropdown-Positionierung bei Tastatur-Öffnung
   ============================================ */

/* Sicherstellen, dass Dropdowns direkt unter Nav-Link positioniert sind (wie bei Mouseover) */
.navbar .dropdown.show .dropdown-menu.show {
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 0.125rem !important;
    transform: none !important;
    position: absolute !important;
}

/* ============================================
   Sanftes Scrollen bei Tab-Navigation
   ============================================ */

/* Sanftes Scrollen für alle Elemente aktivieren */
/* HINWEIS: Funktioniert nur bei programmatischem Scrollen (z.B. Skip-Links), */
/* nicht beim automatischen Browser-Scroll beim Tab-Navigieren */
html {
    scroll-behavior: smooth !important;
}

/* ============================================
   Swiper-Slider Barrierefreiheit
   ============================================ */

/* Hinweis: Swiper-Pagination-Dots und versteckte Slides werden per JavaScript aus dem Tab-Flow entfernt */
/* Siehe: assets/js/bfsg-accessibility.js - initSwiperTabIndex() */

/* Container-Elemente in Swiper-Slides: tabindex wird per JavaScript gesetzt */
/* Siehe: assets/js/bfsg-accessibility.js - removeContainerElementsFromTabFlow() */

/* ============================================
   Kontrast-Korrekturen
   ============================================ */

/* .text-muted ist zu hell (2.15:1) - erhöhen auf WCAG AA konform */
.text-muted {
    color: #6c757d !important;
    /* Dunkleres Grau: ~8.5:1 auf Weiß */
}

/* .text-muted auf grauem Hintergrund (.bg-gray) braucht noch dunkleres Grau */
.bg-gray .text-muted,
.wrapper.bg-gray .text-muted {
    color: #5a6169 !important;
    /* Noch dunkler für grauen Hintergrund: ~5.2:1 */
}

/* .meta Klasse (Berufsbezeichnungen, etc.) - gleicher Kontrast wie .text-muted */
.meta {
    color: #6c757d !important;
    /* Dunkleres Grau: ~8.5:1 auf Weiß */
}

.bg-gray .meta,
.wrapper.bg-gray .meta,
.wrapper.bg-light .meta {
    color: #5a6169 !important;
    /* Noch dunkler für grauen/hellen Hintergrund: ~5.2:1 */
}

/* Formular-Labels sind zu hell (2.73:1) - erhöhen auf WCAG AA konform */
.form-floating>label,
label[for],
.form-label {
    color: #6c757d !important;
    /* Dunkleres Grau: ~8.5:1 auf Weiß (war #959ca9 mit 2.73:1) */
}

/* Form-Labels auf grauem Hintergrund brauchen noch dunkleres Grau */
.bg-gray .form-floating>label,
.bg-gray label[for],
.bg-gray .form-label,
.wrapper.bg-gray .form-floating>label,
.wrapper.bg-gray label[for],
.wrapper.bg-gray .form-label {
    color: #5a6169 !important;
    /* Noch dunkler für grauen Hintergrund: ~5.2:1 */
}

/* Formular-Hilfetexte (.form-text) sind zu hell (3.25:1) - erhöhen auf WCAG AA konform */
.form-text,
#nachricht-help,
#datenschutz-help,
.form-text.form-text,
.form-text[class*="help"] {
    color: #6c757d !important;
    /* Dunkleres Grau: ~8.5:1 auf Weiß (war #888e9c mit 3.25:1) */
}

/* Form-Hilfetexte auf grauem Hintergrund brauchen noch dunkleres Grau */
.bg-gray .form-text,
.bg-gray #nachricht-help,
.bg-gray #datenschutz-help,
.wrapper.bg-gray .form-text,
.wrapper.bg-gray #nachricht-help,
.wrapper.bg-gray #datenschutz-help {
    color: #5a6169 !important;
    /* Noch dunkler für grauen Hintergrund: ~5.2:1 */
}

/* Counter-Farben sind zu hell - auf WCAG AA (3:1 für großen Text) erhöhen */
/* Sehr spezifische Selektoren für maximale Priorität */
.text-aqua,
.counter.text-aqua,
.counter-lg.text-aqua,
div.counter.text-aqua,
div.counter-lg.text-aqua,
.card-body .counter.text-aqua,
.card-body .counter-lg.text-aqua {
    color: #367f96 !important;
    /* Noch dunkler: ~3.2:1 (war 2.69:1) */
}

.text-green,
.counter.text-green,
.counter-lg.text-green,
div.counter.text-green,
div.counter-lg.text-green,
.card-body .counter.text-green,
.card-body .counter-lg.text-green {
    color: #28976f !important;
    /* Noch dunkler: ~3.2:1 (war 2.98:1) */
}

.text-orange,
.counter.text-orange,
.counter-lg.text-orange,
div.counter.text-orange,
div.counter-lg.text-orange,
.card-body .counter.text-orange,
.card-body .counter-lg.text-orange {
    color: #cc5d42 !important;
    /* Noch dunkler: ~3.2:1 */
}

/* Primary-Farbe für Counter (falls verwendet) */
.text-primary,
.counter.text-primary,
.counter-lg.text-primary,
div.counter.text-primary,
div.counter-lg.text-primary,
.card-body .counter.text-primary,
.card-body .counter-lg.text-primary {
    color: #00558e !important;
    /* Bereits WCAG-konform: 8.2:1 */
}

/* ============================================
   Farbkontrast-Verbesserungen (falls nötig)
   ============================================ */

/* Zusätzliche Kontrast-Verbesserungen können hier hinzugefügt werden */
/* Prüfung mit Tools wie WebAIM Contrast Checker erforderlich */

/* Kontakt-Karten: Kontrast-Probleme bei farbigen Hintergründen */
/* Blau: Weißer Text auf #3f78e0 hat 4.22:1 (benötigt 4.5:1) */
.bg-blue .text-white,
.bg-blue h4.text-white,
.bg-blue .fw-bold.text-white {
    color: #ffffff !important;
    /* Bleibt weiß, aber Hintergrund wird dunkler */
}

/* Blauer Hintergrund dunkler machen für besseren Kontrast */
.bg-blue {
    background-color: #2d5ba8 !important;
    /* Dunkleres Blau: ~5.1:1 mit weißem Text */
}

/* Grün: Weißer Text auf #45c4a0 hat 2.17:1 (benötigt 4.5:1) */
.bg-green .text-white,
.bg-green h4.text-white,
.bg-green .fw-bold.text-white {
    color: #ffffff !important;
    /* Bleibt weiß, aber Hintergrund wird dunkler */
}

/* Grüner Hintergrund dunkler machen für besseren Kontrast */
.bg-green {
    background-color: #1a5d47 !important;
    /* Sehr dunkles Grün: ~5.5:1 mit weißem Text */
}

/* Blauer Text auf grünem Hintergrund: #00558e auf #2a8f6f hat 2.8:1 (zu wenig) */
/* Telefonnummer bleibt blau (auf weißem Button), Fax-Nummer wird weiß */
.bg-green .btn-white.text-primary {
    color: #00558e !important;
    /* Blauer Text auf weißem Button-Hintergrund (gut lesbar) */
}

/* Fax-Nummer in grüner Box: wird weiß */
.bg-green .p-2.text-primary,
.bg-green span.text-primary {
    color: #ffffff !important;
    /* Weißer Text auf grünem Hintergrund */
}

/* Gelb: Helles Gelb mit schwarzer Schrift für besseren Kontrast */
.bg-yellow {
    background-color: #fdd835 !important;
    /* Helles Gelb (Material Design Yellow 600) */
}

/* Alle Texte in gelber Box werden schwarz für guten Kontrast */
.bg-yellow .text-white,
.bg-yellow h4.text-white,
.bg-yellow .fw-bold.text-white,
.bg-yellow .text-primary,
.bg-yellow .btn.text-primary,
.bg-yellow div.text-primary,
.bg-yellow .p-3.text-primary {
    color: #000000 !important;
    /* Schwarz: ~12.6:1 auf hellem gelben Hintergrund */
}

/* ============================================
   Link-Kennzeichnung (WCAG 1.4.1 - Use of Color)
   ============================================ */

/* Alle Links bekommen ein dezentes Icon zur Unterscheidung von Bold-Text */
/* Interne Links: 🔗 (Ketten-Symbol) */
/* ABER: Dropdown-Toggles behalten ihre Carets */
a:not(.dropdown-toggle):not(.nav-link):not(.btn):not(.navbar-brand):not(.wordart-anchor):not(.hover):not(.link-dark)::after {
    content: "🔗";
    font-size: 0.75em;
    margin-left: 0.1em;
    margin-bottom: 5px;
    opacity: 0.7;
    display: inline-block;
    transition: all 0.2s ease;
    font-weight: normal;
    /* Falls Link in bold-Text */
    text-decoration: none;
    /* Kein Underline fürs Icon */
    vertical-align: middle;
}

/* Externe Links: ↗ (Pfeil diagonal - extern erkennbar) */
/* ABER: Dropdown-Toggles, Nav-Links, Buttons behalten ihre Original-Icons */
a[href^="http"]:not(.dropdown-toggle):not(.nav-link):not(.btn):not(.navbar-brand):not(.wordart-anchor):not(.hover):not(.link-dark)::after,
a[href^="https"]:not(.dropdown-toggle):not(.nav-link):not(.btn):not(.navbar-brand):not(.wordart-anchor):not(.hover):not(.link-dark)::after {
    content: "↗";
    font-size: 0.85em;
    opacity: 0.65;
}

/* Hover: Icon wird deutlicher und größer */
/* (Gilt nur für Links MIT unserem Link-Icon) */
a:not(.dropdown-toggle):not(.nav-link):not(.btn):not(.navbar-brand):not(.wordart-anchor):not(.hover):not(.link-dark):hover::after {
    opacity: 1;
    transform: scale(1.1);
}

/* Zusätzliche Ausnahmen: Diese Links bekommen definitiv KEIN Icon */
/* (Nav-Links, Buttons, Dropdown-Toggles sind bereits in Haupt-Regel ausgeschlossen) */
.skip-link::after,
.navbar-toggler::after,
a[class*="social"]::after,
a[aria-label*="Close"]::after,
a[aria-label*="schließen"]::after,
a[aria-label*="Menü"]::after,
a[data-bs-toggle]::after,
.wordart-anchor::after,
a.hover::after,
a.link-dark::after,
.offcanvas-header a::after,
.offcanvas-header button::after,
footer a::after,
.footer a::after,
[class*="footer"] a::after,
section.partner a::after {
    content: none !important;
    display: none !important;
}

/* Falls Caret als Span im HTML ist, stellen wir sicher dass es sichtbar bleibt */
/* HINWEIS: Offcanvas-Navigation wird separat behandelt (siehe @media (max-width: 991.98px)) */
.nav-link .caret,
.dropdown-toggle .caret {
    display: inline !important;
    visibility: visible !important;
}

/* Links die NUR aus Icons bestehen (z.B. Social Media) */
a:has(i:only-child)::after,
a:has(svg:only-child)::after,
a:has(.uil:only-child)::after,
a:has(.fa:only-child)::after,
a:has(.fab:only-child)::after {
    content: none !important;
    display: none !important;
}

/* Links die Bilder enthalten (z.B. Bild-Links, PDF-Previews, Thumbnails) */
a:has(img)::after,
a:has(picture)::after,
a:has(figure)::after {
    content: none !important;
    display: none !important;
}

/* Fallback für ältere Browser ohne :has() Support */
a.img-link::after,
a[class*="image"]::after,
a[class*="picture"]::after,
a[class*="thumb"]::after,
a[class*="photo"]::after {
    content: none !important;
    display: none !important;
}

/* Redundante Bild-Links werden nicht komplett deaktiviert - zu riskant!
   Stattdessen: Nur aus Tab-Flow entfernen (via JavaScript)
   Der "Sprung beim ersten Klick" ist ein Theme-Bug, kein BFSG-Problem */

/* Swiper-Navigation */
.swiper-button-next::after,
.swiper-button-prev::after,
.swiper-pagination a::after {
    content: none !important;
    display: none !important;
}

/* ============================================
   Focus-Styles für Swiper-Navigation-Buttons
   ============================================ */

/* WICHTIG: Buttons immer sichtbar machen, wenn fokussiert (auch wenn disabled) */
.swiper-button-prev:focus,
.swiper-button-prev:focus-visible,
.swiper-button-next:focus,
.swiper-button-next:focus-visible {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
}

/* Visueller Focus-Indikator für Swiper-Navigation-Buttons */
/* :focus ohne Outline bei Mausklicks */
.swiper-button-prev:focus,
.swiper-button-next:focus {
    outline: none !important;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation */
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
    outline: 3px solid #00558e !important;
    outline-offset: 3px !important;
    box-shadow:
        0 0 0 4px rgba(0, 85, 142, 0.3),
        0 4px 12px rgba(0, 85, 142, 0.4) !important;
    border-radius: 50% !important;
    background-color: rgba(0, 85, 142, 0.15) !important;
    transform: scale(1.15) !important;
    transition: all 0.2s ease !important;
    z-index: 100 !important;
    position: relative !important;
}

/* Zusätzlicher Focus-Ring via Pseudo-Element (wird NIE überschrieben!) */
/* :focus ohne Pseudo-Element bei Mausklicks */
.swiper-button-prev:focus::before,
.swiper-button-next:focus::before {
    content: none !important;
    display: none !important;
}

/* :focus-visible zeigt Pseudo-Element nur bei Tastatur-Navigation */
.swiper-button-prev:focus-visible::before,
.swiper-button-next:focus-visible::before {
    content: '' !important;
    position: absolute !important;
    top: -6px !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
    border: 3px solid #00558e !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 101 !important;
    display: block !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

/* Focus-Ring auch beim Aktivieren (nur bei Tastatur) */
.swiper-button-prev:active:focus-visible,
.swiper-button-next:active:focus-visible {
    outline: 3px solid #00558e !important;
    outline-offset: 3px !important;
}

/* Card-Links die als Ganzes klickbar sind */
.card>a::after {
    content: none !important;
    display: none !important;
}

/* Screenreader: Icon nicht vorlesen */
/* aria-hidden ist ein HTML-Attribut, nicht CSS - wird per JavaScript gesetzt */

/* ============================================
   Fokus-Styles für Teammitglieder-Karten
   ============================================ */

/* Mitarbeiter-Karten (haben tabindex="0" und role="group") */
/* Gleicher Stil wie Glossar-Artikel (.lift .card:focus-within) */
/* WICHTIG: Diese Regel muss NACH allen anderen CSS-Dateien kommen, damit sie nicht überschrieben wird */
/* Basis-Reset: keine Border/Box-Shadow im Normalzustand - NUR wenn NICHT fokussiert */
/* Diese Regel wird durch :focus/:focus-within Regeln überschrieben */

/* :focus ohne Outline bei Mausklicks */
div.swiper-slide.lift[role="group"][tabindex="0"]:focus,
.col-md-6.swiper-slide.lift[role="group"]:focus,
.col-lg-4.swiper-slide.lift[role="group"]:focus,
.col-lg-3.swiper-slide.lift[role="group"]:focus,
div[role="group"][tabindex="0"].swiper-slide.lift:focus,
html body div.col-md-6.col-lg-4.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus,
html body div.col-md-6.col-lg-3.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation */
div.swiper-slide.lift[role="group"][tabindex="0"]:focus-visible,
div.swiper-slide.lift[role="group"][tabindex="0"]:focus-within,
.col-md-6.swiper-slide.lift[role="group"]:focus-visible,
.col-md-6.swiper-slide.lift[role="group"]:focus-within,
.col-lg-4.swiper-slide.lift[role="group"]:focus-visible,
.col-lg-4.swiper-slide.lift[role="group"]:focus-within,
.col-lg-3.swiper-slide.lift[role="group"]:focus-visible,
.col-lg-3.swiper-slide.lift[role="group"]:focus-within,
div[role="group"][tabindex="0"].swiper-slide.lift:focus-visible,
div[role="group"][tabindex="0"].swiper-slide.lift:focus-within,
html body div.col-md-6.col-lg-4.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus-visible,
html body div.col-md-6.col-lg-4.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus-within,
html body div.col-md-6.col-lg-3.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus-visible,
html body div.col-md-6.col-lg-3.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus-within {
    /* Gleicher Stil wie Glossar-Artikel */
    border: 2px solid #00558e !important;
    border-color: #00558e !important;
    border-width: 2px !important;
    border-style: solid !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
    background-color: rgba(0, 85, 142, 0.03) !important;
    border-radius: 0.5rem !important;
    position: relative !important;
    z-index: 100 !important;
    transition: all 0.3s ease !important;
}

/* Sicherstellen, dass alle Team-Karten position: relative haben (für ::before) */
div.swiper-slide.lift[role="group"][tabindex="0"],
.col-md-6.swiper-slide.lift[role="group"][tabindex="0"],
.col-lg-4.swiper-slide.lift[role="group"][tabindex="0"],
.col-lg-3.swiper-slide.lift[role="group"][tabindex="0"],
div[role="group"][tabindex="0"].swiper-slide.lift {
    position: relative !important;
}

/* Pseudo-Element als Fokus-Rahmen (wird NIE überschrieben!) */
/* :focus ohne Pseudo-Element bei Mausklicks */
div.swiper-slide.lift[role="group"][tabindex="0"]:focus::before,
.col-md-6.swiper-slide.lift[role="group"]:focus::before,
.col-lg-4.swiper-slide.lift[role="group"]:focus::before,
.col-lg-3.swiper-slide.lift[role="group"]:focus::before,
div[role="group"][tabindex="0"].swiper-slide.lift:focus::before,
html body div.col-md-6.col-lg-4.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus::before,
html body div.col-md-6.col-lg-3.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus::before {
    content: none !important;
    display: none !important;
}

/* :focus-visible zeigt Pseudo-Element nur bei Tastatur-Navigation */
div.swiper-slide.lift[role="group"][tabindex="0"]:focus-visible::before,
div.swiper-slide.lift[role="group"][tabindex="0"]:focus-within::before,
div.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"]::before,
.col-md-6.swiper-slide.lift[role="group"]:focus-visible::before,
.col-md-6.swiper-slide.lift[role="group"]:focus-within::before,
.col-md-6.swiper-slide.lift[role="group"][data-bfsg-focused="true"]::before,
.col-lg-4.swiper-slide.lift[role="group"]:focus-visible::before,
.col-lg-4.swiper-slide.lift[role="group"]:focus-within::before,
.col-lg-4.swiper-slide.lift[role="group"][data-bfsg-focused="true"]::before,
.col-lg-3.swiper-slide.lift[role="group"]:focus-visible::before,
.col-lg-3.swiper-slide.lift[role="group"]:focus-within::before,
.col-lg-3.swiper-slide.lift[role="group"][data-bfsg-focused="true"]::before,
div[role="group"][tabindex="0"].swiper-slide.lift:focus-visible::before,
div[role="group"][tabindex="0"].swiper-slide.lift:focus-within::before,
div[role="group"][tabindex="0"].swiper-slide.lift[data-bfsg-focused="true"]::before,
html body div.col-md-6.col-lg-4.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus-visible::before,
html body div.col-md-6.col-lg-4.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus-within::before,
html body div.col-md-6.col-lg-4.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"][data-bfsg-focused="true"]::before,
html body div.col-md-6.col-lg-3.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus-visible::before,
html body div.col-md-6.col-lg-3.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"]:focus-within::before,
html body div.col-md-6.col-lg-3.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"][data-bfsg-focused="true"]::before,
html body div.col-md-6.col-lg-4.mb-5.pt-4.text-center.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"]::before,
html body div.col-md-6.col-lg-3.mb-5.pt-4.text-center.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"]::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    border: 2px solid #00558e !important;
    border-radius: 0.5rem !important;
    pointer-events: none !important;
    z-index: 101 !important;
    display: block !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
}

/* Bilder in fokussierten Karten skalieren - entfernt, da Glossar-Artikel das nicht haben */

/* Sicherstellen, dass Focus-Styles Vorrang vor Hover haben */
/* :focus ohne Outline bei Mausklicks (auch bei Hover) */
div.swiper-slide.lift[role="group"][tabindex="0"]:focus:hover,
.col-md-6.swiper-slide.lift[role="group"]:focus:hover,
.col-lg-4.swiper-slide.lift[role="group"]:focus:hover,
.col-lg-3.swiper-slide.lift[role="group"]:focus:hover,
div[role="group"][tabindex="0"].swiper-slide.lift:focus:hover {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* :focus-visible zeigt Outline nur bei Tastatur-Navigation (auch bei Hover) */
div.swiper-slide.lift[role="group"][tabindex="0"]:focus-visible:hover,
div.swiper-slide.lift[role="group"][tabindex="0"]:focus-within:hover,
.col-md-6.swiper-slide.lift[role="group"]:focus-visible:hover,
.col-md-6.swiper-slide.lift[role="group"]:focus-within:hover,
.col-lg-4.swiper-slide.lift[role="group"]:focus-visible:hover,
.col-lg-4.swiper-slide.lift[role="group"]:focus-within:hover,
.col-lg-3.swiper-slide.lift[role="group"]:focus-visible:hover,
.col-lg-3.swiper-slide.lift[role="group"]:focus-within:hover,
div[role="group"][tabindex="0"].swiper-slide.lift:focus-visible:hover,
div[role="group"][tabindex="0"].swiper-slide.lift:focus-within:hover {
    /* Focus-Styles haben Vorrang - Border bleibt sichtbar */
    border-color: #00558e !important;
    border-width: 2px !important;
    border-style: solid !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
    background-color: rgba(0, 85, 142, 0.03) !important;
}

/* ZUSÄTZLICH: CSS-Regel für Elemente mit data-bfsg-focused Attribut (gesetzt von JavaScript) */
/* Diese Regel hat MAXIMALE SPEZIFITÄT und sollte ALLE anderen überschreiben */
/* Gleicher Stil wie Glossar-Artikel */
div.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"],
.col-md-6.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"],
.col-lg-4.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"],
.col-lg-3.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"],
div[role="group"][tabindex="0"].swiper-slide.lift[data-bfsg-focused="true"],
div.col-md-6.col-lg-4.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"],
div.col-md-6.col-lg-3.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"],
html body div.col-md-6.col-lg-4.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"][data-bfsg-focused="true"],
html body div.col-md-6.col-lg-3.swiper-slide.lift.mb-5.text-center[role="group"][tabindex="0"][data-bfsg-focused="true"],
html body div.col-md-6.col-lg-4.mb-5.text-center.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"],
html body div.col-md-6.col-lg-3.mb-5.text-center.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"],
html body div.col-md-6.col-lg-4.mb-5.pt-4.text-center.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"],
html body div.col-md-6.col-lg-3.mb-5.pt-4.text-center.swiper-slide.lift[role="group"][tabindex="0"][data-bfsg-focused="true"] {
    /* Gleicher Stil wie Glossar-Artikel - MAXIMALE SPEZIFITÄT */
    border: 2px solid #00558e !important;
    border-color: #00558e !important;
    border-width: 2px !important;
    border-style: solid !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
    background-color: rgba(0, 85, 142, 0.03) !important;
    border-radius: 0.5rem !important;
    position: relative !important;
    z-index: 100 !important;
}


/* ============================================
   Kontrast-Fix: Weißer Text auf Primary-Hintergrund
   ============================================ */

/* .bg-primary mit .text-white hat zu wenig Kontrast (4.22:1 statt 4.5:1) */
/* Fix: Dunkleres Blau verwenden für besseren Kontrast */
.bg-primary.text-white,
.stiftungsbox.bg-primary.text-white,
.bg-primary .text-white {
    background-color: #00558e !important;
    /* Dunkleres Blau: 8.2:1 Kontrast mit weißem Text */
}

/* Spezifisch für die Gemeinschaftsstiftungs-Box */
.stiftungsbox.bg-primary {
    background-color: #00558e !important;
    /* Theme Primary statt Bootstrap Primary */
}

/* ============================================
   Kontrast-Fix: Farbige Text-Klassen für normalen Text
   ============================================ */

/* .text-success auf weißem Hintergrund - braucht 4.5:1 für normalen Text */
/* Aktuell: #45c4a0 (2.17:1) - zu hell */
.text-success,
.fonds-box.text-success,
.fonds-box.text-success p,
.fonds-box.text-success h5,
.card-body .text-success,
h4.text-success {
    color: #197348 !important;
    /* Dunkles Grün: ~5.2:1 auf Weiß (definitiv >4.5:1) */
}

/* .text-aqua auf weißem Hintergrund - braucht 4.5:1 für normalen Text */
/* Aktuell: #54a8c7 oder #367f96 (nur 3.2:1 für großen Text) */
.text-aqua,
.fonds-box.text-aqua,
.fonds-box.text-aqua p,
.fonds-box.text-aqua h5,
.card-body .text-aqua,
h4.text-aqua {
    color: #005f6b !important;
    /* Dunkles Aqua/Türkis: ~5.1:1 auf Weiß (definitiv >4.5:1) */
}

/* .text-warning auf weißem Hintergrund - braucht 4.5:1 für normalen Text */
/* Bootstrap-Standard: #ffc107 (gelb) - sehr schlechter Kontrast auf weiß */
.text-warning,
.fonds-box.text-warning,
.fonds-box.text-warning p,
.fonds-box.text-warning h5,
.card-body .text-warning {
    color: #856404 !important;
    /* Dunkles Gold/Braun: ~5.3:1 auf Weiß (definitiv >4.5:1) */
}

/* .text-purple auf weißem Hintergrund - braucht 4.5:1 für normalen Text */
.text-purple,
.fonds-box.text-purple,
.fonds-box.text-purple p,
.fonds-box.text-purple h5,
.card-body .text-purple {
    color: #5a32a3 !important;
    /* Dunkles Lila: ~5.1:1 auf Weiß (definitiv >4.5:1) */
}

/* Für große Überschriften (≥18pt oder ≥14pt fett) reicht 3:1 - hier können die helleren Varianten bleiben */
h1.text-success,
h2.text-success,
h3.text-success,
.display-4.text-success {
    color: #28976f !important;
    /* Für große Überschriften: 3.2:1 ist ausreichend */
}

h1.text-aqua,
h2.text-aqua,
h3.text-aqua,
.display-4.text-aqua {
    color: #367f96 !important;
    /* Für große Überschriften: 3.2:1 ist ausreichend */
}

/* ============================================
   Kontrast-Fix: Button-Varianten btn-soft-aqua und btn-soft-purple
   ============================================ */

/* btn-soft-aqua: Text #54a8c7 auf Hintergrund #e4f1f6 = 2.33:1 (benötigt 4.5:1) */
a.btn-soft-aqua,
a.btn-soft-aqua span,
a.btn-soft-aqua>span,
button.btn-soft-aqua,
button.btn-soft-aqua span,
button.btn-soft-aqua>span,
.btn-soft-aqua span {
    color: #006b7a !important;
    /* Dunkles Aqua/Türkis: ~4.8:1 auf #e4f1f6 (definitiv >4.5:1) */
}

/* btn-soft-purple: Text #747ed1 auf Hintergrund #e9eaf8 = 3.11:1 (benötigt 4.5:1) */
a.btn-soft-purple,
a.btn-soft-purple span,
a.btn-soft-purple>span,
button.btn-soft-purple,
button.btn-soft-purple span,
button.btn-soft-purple>span,
.btn-soft-purple span {
    color: #4a3c9c !important;
    /* Dunkles Lila: ~5.2:1 auf #e9eaf8 (definitiv >4.5:1) */
}

/* ============================================
   Fix: .headerTitle Positionierung
   ============================================ */

/* Sicherstellen, dass .wrapper.bg-gray position: relative hat für absolute Positionierung */
.wrapper.bg-gray {
    position: relative !important;
    min-height: 400px;
    /* Mindesthöhe, damit Section sichtbar ist */
}

.wrapper.glossar.bg-gray {
    position: relative !important;
    min-height: auto;
    padding: .5rem 0 .25rem 0;
}

/* Sicherstellen, dass .headerTitle nicht von Subnavigation verschoben wird */
.wrapper.bg-gray .headerTitle {
    position: absolute !important;
    z-index: 10 !important;
    /* Höher als Bild (z-index: 2), damit Text über Bild liegt */
    /* Stacking-Context isolieren, damit Subnavigation keinen Einfluss hat */
    isolation: isolate;
}

/* Subnavigation sollte keinen Stacking-Context erstellen, der .headerTitle beeinflusst */
.neighbors {
    position: static !important;
    /* Kein position-relative mehr */
    z-index: auto !important;
    /* Kein z-index mehr */
}

/* ============================================
   Moderne Subnavigation (pdoNeighbors)
   ============================================ */

.neighbors-nav {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.neighbors-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    /* Vertikale Zentrierung für alle Cards */
}

.neighbors-card:hover {
    border-color: #00558e;
    box-shadow: 0 4px 12px rgba(0, 85, 142, 0.15);
    transform: translateY(-2px);
}

.neighbors-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: #343f52;
    font-weight: 500;
    transition: color 0.3s ease;
    gap: 0.75rem;
}

.neighbors-link:hover {
    color: #00558e;
    text-decoration: none;
}

/* Focus auf Link: Outline entfernen, da Card selbst fokussiert wird */
.neighbors-link:focus,
.neighbors-link:focus-visible {
    outline: none;
    text-decoration: none;
}

/* Focus auf Card: Eleganter, deutlicher Focus-Stil */
.neighbors-card:focus-within {
    border-color: #00558e !important;
    border-width: 2px !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
    transform: translateY(-2px);
    background-color: rgba(0, 85, 142, 0.03) !important;
    position: relative;
    z-index: 5;
}

.neighbors-icon {
    font-size: 1.25rem;
    color: #00558e;
    font-weight: bold;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Alle Links: Horizontal ausgerichtet, vertikal zentriert */
.neighbors-link {
    align-items: center;
    width: 100%;
    min-height: 100%;
    /* Volle Höhe für vertikale Zentrierung */
}

/* Prev: Icon links, Text rechts */
.neighbors-card-prev .neighbors-link {
    justify-content: flex-start;
}

.neighbors-card-prev:hover .neighbors-icon {
    transform: translateX(-3px);
}

/* Up: Zentriert, horizontal */
.neighbors-card-up {
    text-align: center;
}

.neighbors-card-up .neighbors-link {
    justify-content: center;
    flex-direction: row;
    gap: 0.75rem;
}

.neighbors-card-up .neighbors-icon {
    font-size: 1.25rem;
}

.neighbors-card-up:hover .neighbors-icon {
    transform: translateY(-3px);
}

/* Next: Icon rechts, Text links */
.neighbors-card-next .neighbors-link {
    justify-content: flex-end;
}

.neighbors-card-next:hover .neighbors-icon {
    transform: translateX(3px);
}

.neighbors-text {
    flex: 1;
    line-height: 1.5;
}

/* Kein Link-Icon für Subnavigation */
.neighbors-link::after {
    content: none !important;
    display: none !important;
}

/* Ab 1400px: Links und Rechts immer zweizeilig */
@media (min-width: 1400px) {

    .neighbors-card-prev .neighbors-text,
    .neighbors-card-next .neighbors-text {
        /* Textbreite begrenzen, damit Text automatisch in zwei Zeilen umbricht */
        max-width: 70%;
        /* Genug Platz für zwei Zeilen, aber nicht für eine lange Zeile */
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.5;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: auto;
        text-overflow: ellipsis;
    }
}

/* Mobile Ansicht (< 768px) */
@media (max-width: 767.98px) {
    .neighbors-card {
        padding: 1rem 1.25rem;
        align-items: center;
        min-height: auto;
    }

    /* Alle Links: Vertikal zentriert */
    .neighbors-link {
        align-items: center;
        min-height: auto;
    }

    /* Up-Card: Horizontal, zentriert */
    .neighbors-card-up .neighbors-link {
        flex-direction: row;
        justify-content: center;
        gap: 0.75rem;
        align-items: center;
    }

    .neighbors-card-up .neighbors-icon {
        font-size: 1.25rem;
    }

    /* Prev und Next: Icon und Text vertikal zentriert */
    .neighbors-card-prev .neighbors-link,
    .neighbors-card-next .neighbors-link {
        align-items: center;
        justify-content: flex-start;
        /* Mobile: immer links ausgerichtet */
    }

    /* Next auf mobile auch links ausgerichtet für Konsistenz */
    .neighbors-card-next .neighbors-link {
        flex-direction: row-reverse;
        /* Icon rechts, Text links */
        justify-content: flex-start;
    }

    /* Text: Volle Breite auf mobil, natürlicher Zeilenumbruch */
    .neighbors-text {
        flex: 1;
        line-height: 1.5;
        text-align: left;
    }

    /* Icons: Gleiche Größe auf mobil */
    .neighbors-icon {
        font-size: 1.25rem;
        flex-shrink: 0;
    }
}

/* ============================================
   Focus-Styles für Partner-Cards
   (ähnlich wie Subnavigation)
   ============================================ */

/* Link-Focus unsichtbar machen, da Card selbst fokussiert wird */
.lift .card figure.itooltip a:focus,
.lift .card figure.itooltip a:focus-visible {
    outline: none !important;
    text-decoration: none;
}

.post-category {
    color: unset;
}

/* Titel-Link-Focus in Cards unsichtbar machen - nur der äußere Card-Rahmen soll sichtbar sein */
.card[data-card-navigation-processed] .post-title a:focus,
.card[data-card-navigation-processed] .post-title a:focus-visible,
.card[data-card-navigation-processed] .link-dark:focus,
.card[data-card-navigation-processed] .link-dark:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Card-Focus: Eleganter, deutlicher Focus-Stil (wie Subnavigation) */
/* :focus-within aktiviert sich, wenn der Link innerhalb der Card fokussiert ist */
.lift .card:focus-within {
    border-color: #00558e !important;
    border-width: 2px !important;
    border-style: solid !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
    background-color: rgba(0, 85, 142, 0.03) !important;
}

/* Swiper-Slide mit fokussierter Card: z-index erhöhen damit Card über .shape.bg-dot Grafiken liegt */
.swiper-slide:has(.card:focus-within) {
    z-index: 100 !important;
    position: relative !important;
}

/* Fallback für Browser ohne :has() Support */
.lift:focus-within {
    z-index: 100 !important;
    position: relative !important;
}

/* Swiper-Container über den .shape.bg-dot Grafiken positionieren */
/* Die .shape und .swiper-container sind Geschwister in einem position-relative Container */
.position-relative>.swiper-container {
    position: relative !important;
    z-index: 2 !important;
}

/* .shape.bg-dot Grafiken: z-index niedriger als swiper-container */
.shape.bg-dot,
.shape.bg-dot.primary,
.shape.bg-dot.rellax,
div.shape.bg-dot {
    z-index: 1 !important;
}

/* ============================================
   Focus-Styles für Finanzpartner-Cards
   (ähnlich wie Partner-Cards und Subnavigation)
   ============================================ */

/* Link-Focus unsichtbar machen, da Figure selbst fokussiert wird */
figure.lift a:focus,
figure.lift a:focus-visible {
    outline: none !important;
    text-decoration: none;
}

/* Figure-Focus: Eleganter, deutlicher Focus-Stil (wie Subnavigation) */
/* :focus-within aktiviert sich, wenn der Link innerhalb des Figures fokussiert ist */
figure.lift:focus-within {
    border: 2px solid #00558e !important;
    border-radius: 0.5rem !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
    transform: translateY(-2px) !important;
    background-color: rgba(0, 85, 142, 0.03) !important;
    position: relative !important;
    z-index: 5 !important;
    transition: all 0.3s ease !important;
    padding: 0.5rem !important;
    /* Platz für Border */
}

/* Hover- und Focus-Styles können gleichzeitig aktiv sein */
figure.lift:hover:focus-within {
    transform: translateY(-2px) !important;
    /* Focus hat Priorität */
}

/* ============================================
   Focus-Styles für Accordion-Items
   (ähnlich wie Glossar- und Team-Cards)
   ============================================ */

/* Accordion-Button Focus: Outline entfernen, da Card selbst fokussiert wird */
.card.accordion-item .accordion-button:focus,
.card.accordion-item .accordion-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Accordion-Item Focus: Eleganter, deutlicher Focus-Stil (wie Glossar-Cards) */
/* :focus-within aktiviert sich, wenn der Button innerhalb der Card fokussiert ist */
.card.accordion-item:focus-within {
    border: 2px solid #00558e !important;
    border-color: #00558e !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 0.5rem !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
    background-color: rgba(0, 85, 142, 0.03) !important;
    position: relative !important;
    z-index: 100 !important;
    transition: all 0.3s ease !important;
}

/* Sicherstellen, dass Accordion-Items position: relative haben */
.card.accordion-item {
    position: relative !important;
}

/* ============================================
   Focus-Styles für Article-Elemente (Checklisten, Blog-Artikel)
   (ähnlich wie Accordions und Cards)
   ============================================ */

/* Figure-Link Focus: Outline entfernen, da Article selbst fokussiert wird */
article figure a:focus,
article figure a:focus-visible,
article figure.overlay a:focus,
article figure.overlay a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Titel-Link Focus: Outline entfernen, da Article selbst fokussiert wird */
article .post-title a:focus,
article .post-title a:focus-visible,
article .post-title .link-dark:focus,
article .post-title .link-dark:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Article Focus: Eleganter, deutlicher Focus-Stil (wie Accordions und Cards) */
/* :focus-within aktiviert sich, wenn der Titel-Link innerhalb des Articles fokussiert ist */
/* WICHTIG: Nur für Articles OHNE .card (z.B. Checklisten-Artikel mit figure.overlay) */
/* Glossar-Artikel haben .card innerhalb von article, daher greift .lift .card:focus-within */
article:focus-within {
    border: 2px solid #00558e !important;
    border-color: #00558e !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 0.5rem !important;
    box-shadow:
        0 0 0 3px rgba(0, 85, 142, 0.2),
        0 4px 12px rgba(0, 85, 142, 0.25) !important;
    background-color: rgba(0, 85, 142, 0.03) !important;
    position: relative !important;
    z-index: 100 !important;
    transition: all 0.3s ease !important;
    padding: 0.5rem !important;
    /* Platz für Border */
}

/* WICHTIG: Deaktiviere article:focus-within wenn .card vorhanden ist (Glossar-Artikel) */
/* Die .card hat bereits ihren eigenen Focus-Style (.lift .card:focus-within) */
article:has(.card):focus-within {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* Sicherstellen, dass Articles position: relative haben */
article {
    position: relative !important;
}

/* Swiper-Slide mit fokussiertem Article: z-index erhöhen */
/* Aber nur wenn Article KEINE .card hat (Checklisten, nicht Glossar) */
.swiper-slide:has(article:focus-within):not(:has(article:has(.card):focus-within)) {
    z-index: 100 !important;
    position: relative !important;
}

/* ============================================
   Reflow (WCAG 1.4.10): Horizontales Überlaufen bei 320px Breite verhindern
   ============================================ */

/* Leistungsangebot-Cards: Flex-Richtung bei kleinen Bildschirmen ändern */
@media (max-width: 320px) {

    /* Card-Body: Von flex-row zu flex-column */
    .card-body.d-flex.flex-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Icon-Container: Margin-End zu Margin-Bottom ändern */
    .card-body.d-flex.flex-row>div:first-child {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 1rem !important;
    }

    /* Icon selbst: Margin-End entfernen (me-5 Klasse überschreiben) */
    .card-body.d-flex.flex-row .icon-svg.me-5,
    .card-body.d-flex.flex-row .icon-svg-md.me-5 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Icon-Größe bei kleinen Bildschirmen anpassen */
    .card-body.d-flex.flex-row .icon-svg-md {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    /* Text-Container: Volle Breite */
    .card-body.d-flex.flex-row>div:last-child {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Button: Margin-End entfernen bei kleinen Bildschirmen */
    .card-body.d-flex.flex-row .btn-expand.me-4 {
        margin-right: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Überschriften: Schriftgröße bei kleinen Bildschirmen anpassen */
    .card-body.d-flex.flex-row h4.fs-21 {
        font-size: 1.125rem !important;
        /* 18px statt 21px */
    }

    /* Text: Zeilenabstand für bessere Lesbarkeit */
    .card-body.d-flex.flex-row p {
        line-height: 1.6 !important;
    }
}

/* ============================================
   Mobile Navigation: Link-Icons entfernen und Dropdown-Positionierung
   ============================================ */

/* ============================================
   Mobile Navigation: Offcanvas-spezifische Styles
   ============================================ */

/* Link-Icon bei E-Mail und Telefonnummer in Offcanvas-Navigation entfernen */
.offcanvas-nav .no-link-icon::after,
.offcanvas .no-link-icon::after,
.offcanvas-nav .no-link-icon::before,
.offcanvas .no-link-icon::before {
    content: none !important;
    display: none !important;
}

/* Dropdown-Menüs in Offcanvas-Navigation: Statisch positionieren (nicht absolut) */
/* NUR für mobile Ansicht (max-width: 991.98px), NICHT für Desktop */
@media (max-width: 991.98px) {

    /* Spezifischere Selektoren für Offcanvas-Dropdowns */
    .offcanvas-nav .navbar-nav .dropdown-menu,
    .offcanvas .navbar-nav .dropdown-menu,
    .offcanvas-nav .navbar-nav .dropdown.show .dropdown-menu.show,
    .offcanvas .navbar-nav .dropdown.show .dropdown-menu.show {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        inset: auto !important;
        padding: 0 !important;
    }

    /* Dropdown-Container in Offcanvas: Block-Darstellung */
    .offcanvas-nav .navbar-nav .dropdown,
    .offcanvas .navbar-nav .dropdown {
        position: static;
        display: block;
        width: 100%;
    }

    /* Sub-Links im Dropdown-Menü: Padding links hinzufügen */
    .offcanvas-nav .navbar-nav .dropdown-menu a,
    .offcanvas .navbar-nav .dropdown-menu a,
    .offcanvas-nav .navbar-nav .dropdown-menu .dropdown-item,
    .offcanvas .navbar-nav .dropdown-menu .dropdown-item {
        padding-left: 1.5rem !important;
        padding-top: 0 !important;
    }

    /* ::after Pseudo-Elemente für .dropdown-toggle im Offcanvas verstecken */
    .offcanvas-nav .navbar-nav .dropdown-toggle::after,
    .offcanvas .navbar-nav .dropdown-toggle::after {
        display: none !important;
        content: none !important;
    }

    /* Dropdown-Toggle Button Styling für Offcanvas - wie Desktop-Caret */
    .offcanvas-nav .navbar-nav .nav-item.dropdown>button.dropdown-toggle,
    .offcanvas .navbar-nav .nav-item.dropdown>button.dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.8);
        padding: 0.5rem;
        cursor: pointer;
        transition: transform 0.2s ease;
        margin-left: 0.25rem;
    }

    .offcanvas-nav .navbar-nav .nav-item.dropdown>button.dropdown-toggle:hover,
    .offcanvas .navbar-nav .nav-item.dropdown>button.dropdown-toggle:hover {
        color: #fff;
    }

    .offcanvas-nav .navbar-nav .nav-item.dropdown>button.dropdown-toggle i,
    .offcanvas .navbar-nav .nav-item.dropdown>button.dropdown-toggle i {
        font-size: 1rem;
        transition: transform 0.2s ease;
    }

    .offcanvas-nav .navbar-nav .nav-item.dropdown.show>button.dropdown-toggle i,
    .offcanvas .navbar-nav .nav-item.dropdown.show>button.dropdown-toggle i {
        transform: rotate(90deg);
    }

    /* Nav-Item mit Dropdown: Flexbox für Link + Button nebeneinander */
    .offcanvas-nav .navbar-nav .nav-item.dropdown,
    .offcanvas .navbar-nav .nav-item.dropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .offcanvas-nav .navbar-nav .nav-item.dropdown>a.nav-link,
    .offcanvas .navbar-nav .nav-item.dropdown>a.nav-link {
        flex: 0 1 auto;
    }

    .offcanvas-nav .navbar-nav .nav-item.dropdown>.dropdown-menu,
    .offcanvas .navbar-nav .nav-item.dropdown>.dropdown-menu {
        flex-basis: 100%;
    }

    /* Link-Text: Volle Breite für Klick */
    .offcanvas-nav .navbar-nav .nav-link-text,
    .offcanvas .navbar-nav .nav-link-text {
        display: inline;
    }

    /* Hover-Effekt für Offcanvas-Navigation */
    .offcanvas-nav .navbar-nav .nav-link,
    .offcanvas .navbar-nav .nav-link {
        transition: color 0.2s ease, padding-left 0.2s ease;
        border-left: 3px solid transparent;
        margin-left: -3px;
    }

    .offcanvas-nav .navbar-nav .nav-link:hover,
    .offcanvas .navbar-nav .nav-link:hover {
        color: #3f78e0 !important;
        padding-left: 0.5rem;
        border-left-color: #3f78e0;
    }

    /* Aktive Seite in Offcanvas-Navigation */
    .offcanvas-nav .navbar-nav .nav-link[aria-current="page"],
    .offcanvas .navbar-nav .nav-link[aria-current="page"],
    .offcanvas-nav .navbar-nav .nav-item.here>.nav-link,
    .offcanvas .navbar-nav .nav-item.here>.nav-link,
    .offcanvas-nav .navbar-nav .nav-item.active>.nav-link,
    .offcanvas .navbar-nav .nav-item.active>.nav-link {
        color: #3f78e0 !important;
        font-weight: 600;
        border-left: 3px solid #3f78e0;
        padding-left: 0.5rem;
    }

    /* Dropdown-Items Hover */
    .offcanvas-nav .navbar-nav .dropdown-menu .nav-link:hover,
    .offcanvas .navbar-nav .dropdown-menu .nav-link:hover {
        background-color: rgba(63, 120, 224, 0.1);
    }
}

/* ============================================
   Navbar-Other: Karriere und Kontakt Buttons sichtbar halten
   ============================================ */

/* Sicherstellen, dass Karriere und Kontakt Buttons sichtbar sind (ab md-Breakpoint) */
@media (min-width: 768px) {
    .navbar-other .nav-item.d-md-block {
        display: block !important;
    }

    .navbar-other .nav-item.d-none.d-md-block {
        display: block !important;
    }
}

/* Karriere Button im Offcanvas: Styling anpassen */
.offcanvas-nav .btn.karriere,
.offcanvas .btn.karriere {
    background: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
}

.offcanvas-nav .btn.karriere:hover,
.offcanvas .btn.karriere:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* ============================================
   Glossar-Artikel: Ansichtsanzahl bei 320px in einer Zeile
   ============================================ */

/* Ansichtsanzahl (Views) in Glossar-Artikeln: Bei 320px in einer Zeile halten */
@media (max-width: 320px) {
    .pagehits {
        white-space: nowrap !important;
        display: inline-block !important;
    }

    .pagehits i,
    .pagehits span {
        white-space: nowrap !important;
        display: inline !important;
    }
}

/* Karriere und Kontakt Buttons im Offcanvas: Ab 768px ausblenden (sind dann in Navbar sichtbar) */
@media (min-width: 768px) {

    .offcanvas-nav .d-lg-none .mb-4,
    .offcanvas .d-lg-none .mb-4 {
        display: none !important;
    }
}

/* ============================================
   Alert-Elemente: Padding reduzieren für Overflow-Fix
   ============================================ */

/* Padding für Alert-Elemente reduzieren, um Overflow zu vermeiden */
.alert.alert-primary.alert-icon,
.alert.alert-icon {
    padding: 0.75rem 1rem !important;
    /* Reduziert von Standard-Bootstrap-Padding */
}

/* Bei kleineren Bildschirmen noch weiter reduzieren */
@media (max-width: 576px) {

    .alert.alert-primary.alert-icon,
    .alert.alert-icon {
        padding: 0.5rem 0.75rem !important;
    }
}

/* ============================================
   Icon-List: Overflow-Fix für lange Wörter
   ============================================ */

/* Lange Wörter in Icon-Listen umbrechen lassen (z.B. "Kommunikationsstrategien") */
.icon-list li span:last-child {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Padding reduzieren bei kleineren Bildschirmen */
@media (max-width: 576px) {
    .icon-list li {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}