/* Mobiles Menü nach dem Sketch-Artboard „Menü" (390 pt breit).
   Maße von dort: Sekundärlogo oben links bei 54/74 in 141×50, Schließen-Kreuz
   oben rechts bei 324/25 in 23×23, sechs Punkte ab y 159 im 64-pt-Raster,
   Illustration unten rechts mit 40 pt Überstand über die Unterkante.

   Zur Spezifität: WordPress lädt die Block-Stylesheets erst beim Rendern der
   Blöcke, also nach diesem Stylesheet. Bei gleicher Spezifität gewinnen sie.
   Die Kernregeln für das Overlay arbeiten mit vier Klassen — die Selektoren
   hier spiegeln diese Struktur und stellen `body` davor. */

/* --- Umschaltpunkt --- */
/* Von sich aus zeigt WordPress das Overlay erst unter 600 px. Die Spalten
   brechen aber schon bei 782 px um. Beides gehört zusammen, sonst steht auf
   dem Tablet eine Kopfzeile mit sechs Punkten über gestapelten Inhalten. */
@media (max-width: 781.98px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

body .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--main);
}

/* --- Das geöffnete Overlay --- */
body .wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
	background-color: var(--wp--preset--color--base);
	/* Logo und Illustration sind Schmuck und tragen keine Information, die
	   nicht anderswo steht — deshalb Hintergrundbilder statt Bildblöcke. */
	background-image:
		url("../../uploads/2026/09/logo-sekundaer.png"),
		url("../../uploads/2026/09/menue-illustration.png");
	background-repeat: no-repeat, no-repeat;
	background-position: left 3.375rem top 4.625rem, right 1.875rem bottom -2.5rem;
	background-size: 8.8125rem auto, 9.6875rem auto;
	padding: 9.9375rem 1.5rem 2rem 3.6875rem;
}

body .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog {
	margin-top: 0;
}

body .wp-block-navigation__responsive-container.is-menu-open.has-modal-open
.wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: 0;
}

body .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: flex-start;
	/* 64 pt Raster bei 32 pt Zeilenhöhe ergibt 32 pt Abstand.
	   Ollie setzt hier selbst `gap: 5px !important` — dagegen kommt man
	   nur mit gleicher Waffe. */
	gap: 2rem !important;
}

body .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--display);
	line-height: 2rem;
	/* Ohne eigene Polsterung geht das 64-pt-Raster genau auf:
	   32 pt Zeile plus 32 pt Abstand. */
	padding: 0;
	text-transform: none;
}

/* Schließen-Kreuz oben rechts. Die Zwischenebenen werden statisch gestellt,
   damit sich die absolute Lage auf das fixierte Overlay bezieht und nicht auf
   den eingerückten Dialog. */
body .wp-block-navigation__responsive-container.is-menu-open.has-modal-open
.wp-block-navigation__responsive-close,
body .wp-block-navigation__responsive-container.is-menu-open.has-modal-open
.wp-block-navigation__responsive-dialog {
	position: static;
}

body .wp-block-navigation__responsive-container.is-menu-open.has-modal-open
.wp-block-navigation__responsive-container-close {
	/* Im Entwurf steht dort nur das Kreuz, keine Schaltflächenfläche */
	background-color: transparent;
	border: 0;
	color: var(--wp--preset--color--main);
	padding: 0;
	position: absolute;
	right: 2.6875rem;
	top: 1.5625rem;
}

body .wp-block-navigation__responsive-container-close svg {
	height: 1.4375rem;
	width: 1.4375rem;
}

/* Sichtbarer Tastaturfokus, auch im Overlay */
body .wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
body .wp-block-navigation__responsive-container-open:focus-visible,
body .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--main);
	outline-offset: 3px;
}

/* Auf sehr niedrigen Fenstern darf die Liste scrollen statt zu überlaufen */
@media (max-height: 40rem) {
	body .wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
		background-position: left 2rem top 2rem, right 1.875rem bottom -2.5rem;
		overflow-y: auto;
		padding-top: 6.5rem;
	}
}