/**
 * Accessibility Styles - NordwestZentrum Frankfurt 2026
 *
 * Author: Frahm und Wandelt Werbeagentur GmbH
 * Version: 1.0
 * Last Modified: 2026-01-05
 */

 /* utility class to visually hide elements but keep them accessible to screen readers */
 .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==============================================================================
   Skip-to-Content Link
   Ermöglicht Tastatur-Nutzern, direkt zum Hauptinhalt zu springen
   ============================================================================== */
.skip-to-content {
    --focus-offset: 0;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.4em 1em;
    background: var(--clr-surface);
    color: var(--clr-brand);
    text-decoration: none;
    font-weight: 700;
}

.skip-to-content:focus{
    position: absolute;
    left: 1em;
    top: 1em;
}

.skip-to-content:hover {
    color: var(--clr-brand-dark);
}

/* ==============================================================================
   Focus Styles
   Verbesserte Fokus-Indikatoren für bessere Tastatur-Navigation
   ============================================================================== */
/* Globale Focus-Styles werden hier hinzugefügt */

*:focus-visible {
    outline: var(--focus-width, 2px) var(--focus-style, solid) var(--focus-color, currentColor);
    outline-offset: var(--focus-offset, 2px);
}


/* ==============================================================================
   Plugin-Fix: Animated Fullscreen Menu
   Verhindert, dass versteckte Menü-Links fokussiert werden können
   TODO: Plugin später entfernen und durch barrierefreie Navigation ersetzen
   ============================================================================== */

@media screen and (min-width:993px) {
    /* Verstecktes Menü: Links nicht fokussierbar */
    #animatedfsmenu_css:not(.active) {
        visibility: hidden !important;
    }

    /* Wenn Menü aktiv ist, wieder sichtbar machen */
    #animatedfsmenu_css.active {
        visibility: visible !important;
    }
}


/* ==============================================================================
   Weitere Barrierefreiheits-Styles folgen hier
   ============================================================================== */