/* Mobilmenü: Panel #mobile-menu klappt unter dem Header auf, Button #menu-toggle zeigt drei Striche bzw. ein X */
#mobile-menu.is-open { display: flex; }

@media (max-width: 1024px) {
	#menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		cursor: pointer;
	}
	#menu-toggle::before,
	#menu-toggle::after {
		content: "";
		position: absolute;
		left: 50%; top: 50%;
		width: 20px; height: 2px;
		margin: -1px 0 0 -10px;
		border-radius: 1px;
		background-color: currentColor;
		transition: transform .2s ease, box-shadow .2s ease;
	}
	#menu-toggle::before { box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
	#menu-toggle::after { opacity: 0; }
	#menu-toggle[aria-expanded="true"]::before { box-shadow: none; transform: rotate(45deg); }
	#menu-toggle[aria-expanded="true"]::after { opacity: 1; transform: rotate(-45deg); }
	#menu-toggle:focus-visible { outline: 2px solid var(--color-brand-primary-hover); outline-offset: 2px; }
	#mobile-menu a:focus-visible { outline: 2px solid var(--color-brand-primary-hover); outline-offset: 2px; }
}

/* Desktop: Panel nie sichtbar */
@media (min-width: 1025px) {
	#mobile-menu, #mobile-menu.is-open { display: none; }
}