/* Skip Link */
.skip-link {
    position: fixed;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 1em 2em;
    background-color: #000;
    color: white;
    text-decoration: none;
    transition: top 0.2s ease-in-out;
    font-weight: bold;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid white;
    outline-offset: -2px;
}

/* Tastatur-Fokus für Menüs 
.main-navigation a:focus {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}
*/

/* Untermenü-Anzeige bei Tastatur-Fokus */
#header_main nav ul li .sub-menu {
    display: none;
    position: absolute;
    background: #fff;
    min-width: 200px;
    padding: 1em 0;
    z-index: 999;
    top: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Zeige Untermenü bei Fokus und Hover */
#header_main nav ul li:hover > .sub-menu,
#header_main nav ul li > a:focus + .sub-menu,
#header_main nav ul li .sub-menu:focus-within {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Visueller Indikator für Menüpunkte mit Untermenü */
#header_main nav ul li.menu-item-has-children > a {
    position: relative;
    padding-right: 1.2em;
}

#header_main nav ul li.menu-item-has-children > a::after {
    content: '▼';
    font-size: 0.7em;
    margin-left: 0.5em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
    display:none;
}

#header_main nav ul li.menu-item-has-children > a[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Fokus-Styles für aktuelle Navigation */
#header_main nav ul li a:focus,
#header_main nav ul li a[aria-expanded="true"] {
}

#header_main nav ul li .sub-menu a:focus {
}

/* Tastatur-Navigationshilfen */
#header_main nav ul li.menu-item-has-children > a::before {
    content: attr(data-key-hint);
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 0.3em 0.6em;
    border-radius: 3px;
    font-size: 0.8em;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    pointer-events: none;
    
    display: none;
}

#header_main nav ul li.menu-item-has-children > a:focus::before {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menü Toggle Button */
.menu-toggle:focus {
}

/* ARIA-Expanded Zustände */
[aria-expanded="true"] + .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}