/* ==========================================================================
   Der neue Bestattertag — Kopfzeile, Menü, Fußzeile (Unterseiten)
   Kopf- und Fußzeile sind „seitenübergreifende Inhalte“ (Theme → Inhalte):
   Elementgruppen „- Kopfzeile -“ und „- Fußzeile -“ mit normalen Elementen.
   Maße aus dem XD-Entwurf bei 1920 px Breite.
   ========================================================================== */

/* ------------------------------------------------------------------ Kopfzeile
   Logo 609 × 103 mittig bei y = 208, Schaltfläche „menü“ 136 × 57 bei x = 1669, y = 282 */
header { position: relative; z-index: 30; }

.Kopfzeile {
	position: relative;
	display: flex;
	justify-content: center;
	padding: clamp(24px, 8.65vw, 166px) var(--rand) clamp(24px, 2.5vw, 48px);
	& > * { margin: 0; }

	& .Logo {
		position: relative;
		z-index: 40;
		width: clamp(200px, 31.72vw, 609px);
		& a { display: block; }
		& img { width: 100%; height: auto; }
	}

	@media (max-width: 767px) {
		justify-content: flex-start;
		align-items: center;
		min-height: 84px;
		padding: 16px 20px;
		/* Platz rechts für „menü“ (84 px + 20 px Rand) und 16 px Luft freihalten */
		& .Logo { width: min(220px, calc(100vw - 40px - 84px - 16px)); }
	}
}

/* ------------------------------------------------------------------ Menü
   Barrierefreie Kern-Navigation (mod_navigation_accessible), auf allen Breiten
   hinter der Schaltfläche „menü“. Geöffnet füllt das Menü den Bildschirm
   (Nachtblau) und zeigt die Punkte wie auf der Startseite. */
body { --nav-breakpoint: 99999px; }
body.navigation-open { overflow: hidden; }

.nav-wrapper .nav-burger {
	position: absolute;
	z-index: 40;
	top: clamp(24px, 14.69vw, 282px);
	right: clamp(20px, 5.99vw, 115px);
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;

	& .nav-burger__inner { display: none !important; }

	/* „menü“: orange Pille 136 × 57, Schrift 30 fett Blaugrau */
	& .nav-burger__text {
		display: grid;
		place-items: center;
		min-width: clamp(96px, 7.08vw, 136px);
		height: clamp(44px, 2.97vw, 57px);
		padding: 0 0.7em 0.08em;
		border-radius: 999px;
		background: var(--color_1);
		color: var(--color_3);
		font-size: clamp(22px, 1.5625vw, 30px);
		font-weight: 700;
		line-height: 1;
		transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
		& .offen { display: none; }
	}
	&:hover .nav-burger__text { background: #fff; transform: scale(1.04); }
	&.is-active .nav-burger__text {
		background: #fff;
		& .zu { display: none; }
		& .offen { display: inline; }
	}

	@media (max-width: 767px) {
		top: 20px;
		right: 20px;
		& .nav-burger__text { min-width: 84px; height: 44px; font-size: 20px; }
		&.is-active .nav-burger__text { padding-inline: 0.55em; font-size: 17px; }
	}
}

/* Nach dem Herunterscrollen bleibt „menü“ oben rechts erreichbar (script.js setzt die Klasse) */
body.KopfzeileVerlassen .nav-wrapper .nav-burger,
.nav-wrapper .nav-burger.is-active {
	position: fixed;
}
body.KopfzeileVerlassen .nav-wrapper .nav-burger:not(.is-active) {
	top: 20px;
	animation: menueEinblenden 0.4s ease both;
	& .nav-burger__text { box-shadow: 0 6px 24px rgb(0 0 0 / 0.25); }
}
body.KopfzeileVerlassen .nav-wrapper .nav-burger.is-active { top: 20px; }
@keyframes menueEinblenden { from { opacity: 0; transform: translateY(-12px); } }

/* Overlay */
body .navigation-main {
	--nav-mobile-background: var(--color_2);
	--nav-mobile-color: #fff;
	--nav-mobile-active-color: var(--color_1);
	--nav-mobile-active-background: transparent;
	--nav-mobile-separator-color: transparent;
	--nav-mobile-padding: 0;
	--nav-mobile-backdrop-height: 0px;
}
body.nav-is-mobile header .navigation-main,
header .navigation-main {
	position: fixed;
	inset: 0;
	z-index: 35;
	display: grid;
	place-items: center;
	overflow-y: auto;
	padding: clamp(120px, 20vh, 220px) 20px 60px;
	background: var(--color_2);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
	&.is-active { opacity: 1; visibility: visible; transition: opacity 0.4s ease; }

	& a.skip-link:not(:focus) {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
	}
	& .ul-wrapper { display: block !important; height: auto !important; opacity: 1 !important; visibility: visible !important; }
	& ul.level_1 {
		display: grid;
		gap: clamp(18px, 4.07vh, 44px);
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
		& > li { padding: 0; border: 0; }
		& > li > :is(a, strong) {
			display: inline-block;
			width: auto;
			margin: 0 !important;
			padding: 0 0 0.12em !important;
			font-size: var(--schrift_menue);
			font-weight: 700;
			line-height: 1;
			color: #fff !important;
			background: none !important;
			text-decoration: none;
			background-image: linear-gradient(var(--color_1), var(--color_1)) !important;
			background-size: 0 3px !important;
			background-position: 50% 100% !important;
			background-repeat: no-repeat !important;
			transition: background-size 0.35s ease;
		}
		& > li > :is(a:hover, a:focus-visible, strong) { background-size: 100% 3px !important; }
	}
	& .btn-toggle-submenu { display: none !important; }
}

/* ------------------------------------------------------------------ Fußzeile (Unterseiten)
   Im Entwurf nur auf der Startseite gezeigt; Impressum und Datenschutz müssen aber
   von jeder Seite aus erreichbar sein. */
.Fußzeile {
	padding: clamp(40px, 4vw, 80px) var(--rand) 40px;
	text-align: center;
	& > * { margin: 0; }
}

/* Das Navigationsmodul nimmt in der Kopfzeile keinen Platz ein (Knopf absolut, Menü fixiert) */
body .Kopfzeile .mod_navigation.nav-wrapper { position: static; }