/* ==========================================================
   BITV / WCAG 2.4.7 – Sichtbarer Tastaturfokus
   ========================================================== */

/*
 * Grundfarbe:
 * Dunkelblau ist auf hellen Hintergründen besser erkennbar
 * als das relativ helle Orange.
 */
:root {
    --focus-color: #005a9c;
    --focus-light: #ffffff;
    --focus-dark: #111111;
}


/* ==========================================================
   1. Globaler Fokus
   ========================================================== */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus {
    outline: 3px solid var(--focus-color) !important;
    outline-offset: 3px !important;
}


/*
 * Moderne Browser:
 * Fokusrahmen bevorzugt bei Tastaturbedienung anzeigen.
 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus-color) !important;
    outline-offset: 3px !important;
}


/* ==========================================================
   2. Normale Textlinks
   ========================================================== */

main a:focus-visible,
#g-expanded a:focus-visible,
#g-main a:focus-visible,
article a:focus-visible {
    border-radius: 2px;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px;
}


/* ==========================================================
   3. Skip-Link
   ========================================================== */

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2147483647;

    padding: 12px 18px;

    border: 3px solid #ffffff;
    border-radius: 4px;

    background: #026fb4;
    color: #ffffff !important;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;

    transform: translateY(-180%);
    transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);

    outline: 3px solid #111111 !important;
    outline-offset: 3px !important;

    color: #ffffff !important;
}


/* ==========================================================
   4. Logo
   ========================================================== */

.g-logo:focus-visible,
.g-logo a:focus-visible,
.logo:focus-visible,
.logo a:focus-visible {
    display: inline-block;
    border-radius: 4px;

    outline: 3px solid var(--focus-color) !important;
    outline-offset: 5px !important;
}


/* ==========================================================
   5. Desktop-Hauptnavigation
   ========================================================== */

.g-main-nav .g-menu-item-container:focus,
.g-main-nav .g-menu-item-container:focus-visible,
.g-main-nav a:focus,
.g-main-nav a:focus-visible {
    position: relative;
    z-index: 20;

    outline: 3px solid #ffffff !important;
    outline-offset: -3px !important;

    background: #005a9c !important;
    color: #ffffff !important;

    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px;

    box-shadow: 0 0 0 3px #005a9c !important;
}


/* Fokus in geöffneten Dropdowns */
.g-main-nav .g-dropdown a:focus,
.g-main-nav .g-dropdown a:focus-visible,
.g-main-nav .g-sublevel a:focus,
.g-main-nav .g-sublevel a:focus-visible {
    background: #005a9c !important;
    color: #ffffff !important;

    outline: 3px solid #ffffff !important;
    outline-offset: -4px !important;

    box-shadow: 0 0 0 3px #005a9c !important;
}


/* ==========================================================
   6. Offcanvas-/Mobilmenü
   ========================================================== */

.g-offcanvas-toggle:focus,
.g-offcanvas-toggle:focus-visible {
    outline: 3px solid #005a9c !important;
    outline-offset: 4px !important;

    border-radius: 4px;
    box-shadow: 0 0 0 2px #ffffff !important;
}

#g-offcanvas a:focus,
#g-offcanvas a:focus-visible,
#g-offcanvas button:focus,
#g-offcanvas button:focus-visible,
#g-offcanvas [tabindex]:focus,
#g-offcanvas [tabindex]:focus-visible {
    background: #ffffff !important;
    color: #111111 !important;

    outline: 3px solid #005a9c !important;
    outline-offset: -4px !important;

    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px;
}


/* ==========================================================
   7. Buttons
   ========================================================== */

button:focus-visible,
.btn:focus-visible,
.button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: 3px solid #005a9c !important;
    outline-offset: 3px !important;

    box-shadow: 0 0 0 2px #ffffff !important;
}


/* Button auf dunklem Hintergrund */
#g-footer button:focus-visible,
#g-footer .btn:focus-visible,
#g-footer .button:focus-visible,
#g-footer a:focus-visible,
#g-bottom button:focus-visible,
#g-bottom a:focus-visible {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 3px #005a9c !important;
}


/* ==========================================================
   8. Formulare
   ========================================================== */

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
    border-color: #005a9c !important;

    outline: 3px solid #005a9c !important;
    outline-offset: 2px !important;

    box-shadow: 0 0 0 2px #ffffff !important;
}


/* Checkboxen und Radiobuttons */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 3px solid #005a9c !important;
    outline-offset: 3px !important;
}


/* ==========================================================
   9. LayerSlider und Video
   ========================================================== */

.ls-container a:focus,
.ls-container a:focus-visible,
.ls-container button:focus,
.ls-container button:focus-visible,
.videoToggle:focus,
.videoToggle:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px !important;

    box-shadow: 0 0 0 6px #005a9c !important;
}


/* ==========================================================
   10. Social-Media-Links und Symbol-Links
   ========================================================== */

.g-social a:focus,
.g-social a:focus-visible,
.social a:focus,
.social a:focus-visible,
a[aria-label*="Instagram"]:focus,
a[aria-label*="Instagram"]:focus-visible,
a[aria-label*="Facebook"]:focus,
a[aria-label*="Facebook"]:focus-visible {
    border-radius: 50%;

    outline: 3px solid #005a9c !important;
    outline-offset: 4px !important;

    box-shadow: 0 0 0 2px #ffffff !important;
}


/* ==========================================================
   11. Tabellen, Downloadlinks und besondere Elemente
   ========================================================== */

table a:focus-visible,
.download a:focus-visible,
.downloads a:focus-visible,
.edocman-document a:focus-visible {
    outline: 3px solid #005a9c !important;
    outline-offset: 3px !important;

    background: #ffffff !important;
    color: #111111 !important;

    text-decoration: underline !important;
}


/* ==========================================================
   12. Zielbereich des Skip-Links
   ========================================================== */

#g-expanded {
    scroll-margin-top: 30px;
}


/* Hauptbereich bei programmatischem Fokus */
#g-expanded:focus,
#g-expanded:focus-visible {
    outline: none;
}


/* ==========================================================
   13. Bewegung reduzieren
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .skip-link {
        transition: none;
    }
}