/*
 * Menü-Overlay der Landingpage – Figma 1836:5513 "Menü" (1512 × 983).
 *
 * Ersetzt die Optik des Immobilien-Menüs (4 Spalten + Adressen) durch:
 *   Hauptpunkte mittig  – Nunito Sans Light 38 / 1.2, Versalien, weiß,
 *                         goldener Pfeil 27 × 21 px, 28 px neben dem Text,
 *                         Zeilenabstand ~104 px (46 px Zeile + 58 px)
 *   Links unten mittig  – Mada Light 16 / 1.6, weiß, 31 px Abstand,
 *                         Text endet 75 px über der Unterkante
 * Hintergrund König-Sylt-Blau. Logo + X liefert der Header darüber.
 * Breakpoints wie Header/Menü: Handy < 768 px (24 px Rand), sonst 36 px.
 * Einblend-Staffelung: assets/css/menu-animation.css (.menu-overlay__group/__list).
 */

#menu-overlay.menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--color-blue, #232c3c);
	color: var(--color-surface, #fff);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.menu-is-open #menu-overlay.menu-overlay {
	opacity: 1;
	visibility: visible;
}

/* Header im offenen Zustand: Fläche in Overlay-Blau statt König-Grau
   (header.css blendet ::after in --color-overlay-bg ein). */
.koenig-header-shrink::after {
	background-color: var(--color-blue, #232c3c);
}

/* Burger: nie König-Rot (02.11.2026).
   Startseite: weiß auf dem blauen Header, König-Sylt-Blau sobald der
   Header gescrollt weiß hinterlegt ist (header.css).
   Unterseiten (alles außer body.home, weißer Header): immer Blau.
   Offenes Menü: überall weißes X.
   ID-Selektor + !important, weil menu-trigger.php die Farben als
   Tailwind-Klassen mit !important trägt (auch für :hover/:focus). */
body #menu-trigger,
body #menu-trigger:hover,
body #menu-trigger:focus,
body #menu-trigger:active,
body.menu-is-open #menu-trigger {
	color: var(--color-surface, #fff) !important;
}

body.header-scrolled:not(.menu-is-open) #menu-trigger,
body.header-scrolled:not(.menu-is-open) #menu-trigger:hover,
body.header-scrolled:not(.menu-is-open) #menu-trigger:focus,
body.header-scrolled:not(.menu-is-open) #menu-trigger:active,
body:not(.home):not(.menu-is-open) #menu-trigger,
body:not(.home):not(.menu-is-open) #menu-trigger:hover,
body:not(.home):not(.menu-is-open) #menu-trigger:focus,
body:not(.home):not(.menu-is-open) #menu-trigger:active {
	color: var(--color-blue, #232c3c) !important;
}

body #menu-trigger:focus-visible {
	outline-color: var(--color-gold, #907947) !important;
}

/* Scrollbereich unter dem Header (Höhe misst menu.js beim Öffnen). */
#menu-overlay .menu-overlay__scroll {
	position: absolute;
	top: var(--koenig-header-height, 189px);
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#menu-overlay .menu-overlay__inhalt {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 100%;
	padding: 24px 36px 0;
}

/* Hauptpunkte: vertikal mittig, leicht nach oben versetzt wie im Design
   (Figma: Block 346–600 px bei 983 px Höhe). */
#menu-overlay .menu-overlay__haupt {
	display: flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	padding-bottom: 154px;
}

#menu-overlay .menu-overlay__haupt ul,
#menu-overlay .menu-overlay__unten ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu-overlay .menu-overlay__liste {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 58px;
	text-align: center;
}

#menu-overlay .menu-overlay__liste > li {
	margin: 0;
	padding: 0;
}

#menu-overlay a.menu-overlay__link,
#menu-overlay a.menu-overlay__link:hover,
#menu-overlay a.menu-overlay__link:focus,
#menu-overlay a.menu-overlay__link:active {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	color: var(--color-surface, #fff);
	font-family: var(--font-heading, 'Nunito Sans', sans-serif);
	font-weight: 300;
	font-size: 38px;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: uppercase;
}

#menu-overlay a.menu-overlay__link:focus-visible,
#menu-overlay a.menu-overlay__link-klein:focus-visible {
	outline: 1px solid var(--color-gold, #907947);
	outline-offset: 6px;
}

#menu-overlay .menu-overlay__pfeil {
	display: block;
	flex: none;
	width: 27px;
	height: 21px;
	color: var(--color-gold, #907947);
	transition: transform 0.25s ease;
}

#menu-overlay a.menu-overlay__link:hover .menu-overlay__pfeil,
#menu-overlay a.menu-overlay__link:focus-visible .menu-overlay__pfeil {
	transform: translateX(6px);
}

/* Aktuelle Seite: Text gold. */
#menu-overlay .current-menu-item > a.menu-overlay__link,
#menu-overlay .current-menu-item > a.menu-overlay__link:hover {
	color: var(--color-gold, #907947);
}

/* Kleine Links unten */
#menu-overlay .menu-overlay__unten {
	flex: none;
	padding-bottom: 72px;
}

#menu-overlay .menu-overlay__liste-klein {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 31px;
}

#menu-overlay .menu-overlay__liste-klein > li {
	margin: 0;
	padding: 0;
}

#menu-overlay a.menu-overlay__link-klein,
#menu-overlay a.menu-overlay__link-klein:hover,
#menu-overlay a.menu-overlay__link-klein:focus,
#menu-overlay a.menu-overlay__link-klein:active {
	color: var(--color-surface, #fff);
	font-family: var(--font-body, 'Mada', sans-serif);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	text-decoration: none;
}

/* Laptop mit wenig Höhe: Abstände enger. */
@media (min-width: 768px) and (max-height: 850px) {
	#menu-overlay .menu-overlay__liste {
		gap: 40px;
	}

	#menu-overlay .menu-overlay__haupt {
		padding-bottom: 60px;
	}

	#menu-overlay .menu-overlay__unten {
		padding-bottom: 48px;
	}
}

/* Handy */
@media (max-width: 767px) {
	#menu-overlay .menu-overlay__scroll {
		top: var(--koenig-menu-top-mobile, calc(var(--koenig-header-height, 192px) - 44px));
	}

	#menu-overlay .menu-overlay__inhalt {
		padding: 24px 24px 0;
	}

	#menu-overlay .menu-overlay__haupt {
		padding-bottom: 48px;
	}

	#menu-overlay .menu-overlay__liste {
		gap: 32px;
	}

	#menu-overlay a.menu-overlay__link,
	#menu-overlay a.menu-overlay__link:hover,
	#menu-overlay a.menu-overlay__link:focus,
	#menu-overlay a.menu-overlay__link:active {
		gap: 18px;
		font-size: 30px;
		line-height: 36px;
	}

	#menu-overlay .menu-overlay__pfeil {
		width: 22px;
		height: 17px;
	}

	#menu-overlay .menu-overlay__unten {
		padding-bottom: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#menu-overlay.menu-overlay,
	#menu-overlay .menu-overlay__pfeil {
		transition: none;
	}
}