/**
 * Barrierefreies Hauptmenü (WCAG 2.2 AA) fuer den nativen Divi-5-Header
 * (Link-Modul mit verschachteltem Dropdown-Modul als Mega-Menü).
 *
 * Die nativen Module bringen keinen sichtbaren Fokusring und keine
 * Hover-unabhaengige Zustandsanzeige mit. Sichtbarkeit des Dropdown-Panels
 * selbst (display:none/block ueber die Klasse "et_pb_dropdown_hidden")
 * verwaltet ausschliesslich das native Divi-Skript bzw. zw-accessible-menu.js
 * – hier geht es nur um sichtbare Fokus-/Hover-Zustaende.
 */

/* ---------- Skip-Link (WCAG 2.4.1 Bypass Blocks) ---------- */
.zw-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	background: #3D3635;
	color: #ffffff;
	padding: 0.9rem 1.4rem;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: underline;
	border-radius: 0 0 4px 0;
}
.zw-skip-link:focus {
	left: 0;
	top: 0;
}

/* ---------- Sichtbarer Fokusindikator im Header (WCAG 2.4.7 / 2.4.11) ----------
 * Header-Hintergrund ist dunkel (gcid-heading-color): heller, kontrastreicher
 * Ring mit dunklem Schatten als zusaetzlicher Abstandshalter. Das Mega-Menü
 * (.et_pb_dropdown) hat einen hellen Hintergrund und bekommt weiter unten
 * bewusst einen eigenen, dunklen Fokusring – hier daher ausgeschlossen, sonst
 * wuerde diese Regel (gleiche bzw. hoehere Spezifitaet durch "header"-Element)
 * die dunkle Variante im Panel ueberschreiben.
 */
header.et-l--header a:not(.et_pb_dropdown *):focus-visible,
header.et-l--header [role="link"]:not(.et_pb_dropdown *):focus-visible,
header.et-l--header [tabindex]:not(.et_pb_dropdown *):focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #3D3635;
	border-radius: 2px;
}

/* Fallback fuer Browser ohne :focus-visible-Unterstuetzung */
header.et-l--header a:not(.et_pb_dropdown *):focus,
header.et-l--header [role="link"]:not(.et_pb_dropdown *):focus,
header.et-l--header [tabindex]:not(.et_pb_dropdown *):focus {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

/* ---------- Mega-Menü (Dropdown-Panel): heller Hintergrund, dunkler Fokusring ----------
 * Innerhalb des Panels (Primärfarbe/beige Hintergrund) waere ein weisser Ring
 * kaum sichtbar – hier stattdessen dunkler Ring mit hellem Schatten.
 */
.et_pb_dropdown a:focus-visible,
.et_pb_dropdown [role="link"]:focus-visible,
.et_pb_dropdown [tabindex]:focus-visible {
	outline: 3px solid #3D3635;
	outline-offset: -3px;
	box-shadow: 0 0 0 5px #ffffff;
	border-radius: 2px;
}
.et_pb_dropdown a:focus,
.et_pb_dropdown [role="link"]:focus,
.et_pb_dropdown [tabindex]:focus {
	outline: 3px solid #3D3635;
	outline-offset: -3px;
}

/* ---------- Hover-/Fokuszustand ohne alleinige Farbabhaengigkeit ----------
 * WCAG 1.4.1 (Use of Color): Zustand zusaetzlich per Unterstreichung statt
 * ausschliesslich per Farbwechsel erkennbar machen.
 */
header.et-l--header .et_pb_text[role="link"]:hover,
header.et-l--header .et_pb_text[role="link"]:focus-visible,
header.et-l--header .et_pb_link:hover,
header.et-l--header .et_pb_link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.et_pb_dropdown .et_pb_icon_list_item:hover,
.et_pb_dropdown .et_pb_icon_list_item:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Aktuelle Seite: zusaetzlich zur ARIA-Markierung auch visuell erkennbar. */
header.et-l--header [aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 4px;
}