/* =====================================================
   Focus Navigation Styles
   WCAG 2.4.7 Focus Visible (AA)
   WCAG 2.4.11 Focus Appearance (AAA)
   WCAG 2.4.12 Focus Not Obscured (AAA)

   Farbkonzept:
     Helle Hintergründe  → blauer Ring  #005fcc
     Dunkle/blaue Bg     → gelber Ring  #ffcc00
   Jeder Fokus-Indikator hat min. 3:1 Kontrast
   zum angrenzenden Hintergrund (WCAG 2.4.11).
===================================================== */

/* ── 1. Browser-Standard entfernen, eigener kommt unten ── */
*:focus {
    outline: none;
}

/* ── 2. Universeller Fallback (alle fokussierbaren Elemente) ── */
*:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
    border-radius: 3px;
}

/* =====================================================
   LINKS – helle Hintergründe
===================================================== */
a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    background-color: rgba(0, 95, 204, 0.1);
    border-radius: 3px;
    text-decoration: underline;
    color: #003a8c;
}

/* =====================================================
   HAUPT-NAVIGATION
===================================================== */

/* Menü-Links (Desktop) */
.menu-links li a:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
    background-color: rgba(255, 204, 0, 0.18);
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none;
}

/* Aktiver Menü-Link fokussiert */
.menu-links li.active a:focus-visible {
    outline: 3px solid #ffee66;
    outline-offset: 3px;
}

/* Logo-Link */
.menu-logo a:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 4px;
    border-radius: 4px;
    display: inline-block;
}

/* Topbar-Links (E-Mail, Telefon, Impressum, Datenschutz) */
.topbar a:focus-visible,
.topbar-call a:focus-visible,
.topbar-social a:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 3px;
    background-color: rgba(0, 95, 204, 0.1);
    border-radius: 3px;
    text-decoration: underline;
}

/* Footer-Navigation */
footer a:focus-visible,
.copyright a:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
    background-color: rgba(255, 204, 0, 0.15);
    border-radius: 3px;
    text-decoration: underline;
}

/* =====================================================
   BUTTONS – hell
===================================================== */
button:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
    box-shadow:
        0 0 0 1px #fff,
        0 0 0 4px #005fcc;
    border-radius: 4px;
}

/* =====================================================
   BUTTONS – auf dunklem/blauem Hintergrund (.theme-bg)
===================================================== */
.theme-bg a:focus-visible,
.theme-bg button:focus-visible,
.action-box a:focus-visible,
.action-box button:focus-visible,
.topbar.gray-bg ~ * .theme-bg a:focus-visible {
    outline: 3px solid #ffcc00 !important;
    outline-offset: 3px !important;
    box-shadow:
        0 0 0 1px #003080,
        0 0 0 5px #ffcc00 !important;
    border-radius: 4px !important;
}

/* Notfall-Telefon-Button (dunkles Listing-Search) */
.listing-search a.button:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
    box-shadow:
        0 0 0 1px #001f5c,
        0 0 0 5px #ffcc00;
    border-radius: 6px;
}

/* =====================================================
   .button Klasse (Satzungen-Download, Formulare etc.)
===================================================== */
.button:focus-visible,
a.button:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
    box-shadow:
        0 0 0 1px #fff,
        0 0 0 5px #005fcc;
    border-radius: 5px;
    text-decoration: none;
}

/* =====================================================
   ACCORDION – Buttons (Amtsblätter)
===================================================== */
.acd-heading-btn:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    background-color: rgba(0, 95, 204, 0.07);
    border-radius: 4px;
}

.acd-heading-btn:focus-visible h3 {
    text-decoration: underline;
}

/* =====================================================
   DOWNLOAD-LINKS (PDF)
===================================================== */
a.download_info:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
    background-color: rgba(0, 95, 204, 0.09);
    border-radius: 3px;
    text-decoration: underline;
}

/* =====================================================
   TEAM – Kontakt-Links
===================================================== */
.team-contact a:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 3px;
    background-color: rgba(0, 95, 204, 0.09);
    border-radius: 3px;
    text-decoration: underline;
}

/* =====================================================
   KONTAKT-SEKTION – Links
===================================================== */
.contact a:focus-visible,
.link_kontakt:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
    background-color: rgba(0, 95, 204, 0.09);
    border-radius: 3px;
    text-decoration: underline;
    color: #003a8c;
}

/* =====================================================
   FORMULARE (falls aktiv)
===================================================== */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 0;
    box-shadow:
        0 0 0 1px #fff,
        0 0 0 4px #005fcc;
    border-color: #005fcc !important;
    border-radius: 4px;
}

/* =====================================================
   SKIP-LINK (bereits im index.html definiert,
   hier als Verstärkung)
===================================================== */
.skip-link:focus {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px #003080;
}

/* =====================================================
   BACK-TO-TOP
===================================================== */
#back-to-top a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
    border-radius: 4px;
    background-color: rgba(0, 95, 204, 0.12);
}

/* =====================================================
   ACCESSIBILITY WIDGET – eigene Elemente
   (bereits in accessibility-widget.css vorhanden,
   hier als globale Verstärkung)
===================================================== */
#a11y-toggle:focus-visible {
    outline: 3px solid #ffcc00 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px #003080 !important;
}

#a11y-close:focus-visible,
.a11y-btn:focus-visible,
.a11y-reset:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow:
        0 0 0 1px #fff,
        0 0 0 4px #005fcc !important;
}

/* =====================================================
   FOKUS-ANIMATION – sanfter Puls für bessere
   Wahrnehmbarkeit (WCAG 2.4.11 unterstützend)
===================================================== */
@keyframes focusPulse {
    0%   { box-shadow: 0 0 0 1px #fff, 0 0 0 4px #005fcc; }
    50%  { box-shadow: 0 0 0 1px #fff, 0 0 0 7px rgba(0, 95, 204, 0.4); }
    100% { box-shadow: 0 0 0 1px #fff, 0 0 0 4px #005fcc; }
}

@media (prefers-reduced-motion: no-preference) {
    a:focus-visible,
    button:focus-visible,
    .button:focus-visible,
    input:focus-visible,
    textarea:focus-visible {
        animation: focusPulse 1.4s ease-in-out infinite;
    }
}

/* Puls-Animation für dunkle Hintergründe */
@keyframes focusPulseDark {
    0%   { box-shadow: 0 0 0 1px #003080, 0 0 0 5px #ffcc00; }
    50%  { box-shadow: 0 0 0 1px #003080, 0 0 0 8px rgba(255, 204, 0, 0.45); }
    100% { box-shadow: 0 0 0 1px #003080, 0 0 0 5px #ffcc00; }
}

@media (prefers-reduced-motion: no-preference) {
    .theme-bg a:focus-visible,
    .theme-bg button:focus-visible,
    .action-box a:focus-visible,
    .listing-search a.button:focus-visible {
        animation: focusPulseDark 1.4s ease-in-out infinite;
    }
}

/* ── Animation deaktivieren wenn Nutzer das bevorzugt ── */
@media (prefers-reduced-motion: reduce) {
    *:focus-visible {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================
   HOCHKONTRAST-MODUS: Fokus-Anpassungen
===================================================== */

/* Dunkel-Modus: Widget re-invertiert → Fokusring passt */
html[data-a11y-contrast="dark"] *:focus-visible {
    outline-color: #ffff00 !important;
    box-shadow: 0 0 0 2px #000, 0 0 0 5px #ffff00 !important;
}

/* Hell-Modus: Schwarzer Ring mit weißem Innenrand */
html[data-a11y-contrast="light"] *:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 1px #fff, 0 0 0 5px #000 !important;
    animation: none !important;
}