/* ==========================================================================
   Bestattungen Joisten — Kopfzeile, Menü, Fußzeile
   Kopf- und Fußzeile sind „seitenübergreifende Inhalte“ (Theme → Inhalte):
   Elementgruppen „- Kopfzeile -“ und „- Fußzeile -“ mit normalen Elementen.
   Maße aus dem Figma-Entwurf bei 1280 px Breite (Komponenten „Headder“, „Footer“, Rahmen „menu“).
   ========================================================================== */

/* ------------------------------------------------------------------ Kopfzeile
   Logo 414 × 162 bei x = 389, y = 27; rechts drei Zeilen (Telefon, Gedenkportal, Soforthilfe)
   bei x = 927, y = 58, Zeilenabstand 46 px; Menüsymbol 48 × 48 bei x = 1181, y = 53.
   Auf Seiten mit Bildkopf liegt die Kopfzeile über dem Bild. */
header {
	position: relative;
	z-index: 30;
}
body:has(main :is(.Bildkopf, .StartKopf)) header {
	position: absolute;
	inset: 0 0 auto;
}

.Kopfzeile {
	position: relative;
	max-width: 1280px;
	height: 190px;
	margin: 0 auto;

	& > * { margin: 0; }
	& .Logo {
		position: absolute;
		left: 389px;
		top: 27px;
		width: 414px;
		& a { display: block; }
		& img { width: 414px; height: auto; }
	}
	& .Kopfleiste {
		position: absolute;
		left: 927px;
		top: 58px;
	}
	& .nav-wrapper {
		position: absolute !important;   /* Kern-CSS setzt im Mobilmodus relative */
		left: 1181px;
		top: 53px;
		width: 48px;
		height: 48px;
	}
}
/* Zwischen 1024 und 1280 px wandert alles mit der Breite (Logo bleibt mittig wie im Entwurf) */
@media (min-width: 1024px) and (max-width: 1279px) {
	.Kopfzeile {
		& .Logo { left: calc(50% - 251px); }
		& .Kopfleiste { left: auto; right: 153px; }
		& .nav-wrapper { left: auto; right: 51px; }
	}
}

/* Telefon, Gedenkportal, Soforthilfe: Lexend 25/33, Symbole 28–31 px (Strich aubergine) */
.Kopfleiste .rte {
	display: grid;
	row-gap: 13px;
	& > p { display: flex; align-items: center; height: 33px; margin: 0; }   /* Zeilen 33 px, Abstand 13 px (Entwurf y = 58/104/150) */
	& a {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		color: inherit;
		text-decoration: none;
		white-space: nowrap;
		&::before {
			content: '';
			flex: 0 0 29px;
			height: 29px;
			background: currentColor;
			-webkit-mask: var(--symbol) center / contain no-repeat;
			mask: var(--symbol) center / contain no-repeat;
		}
		&:hover { text-decoration: underline; text-decoration-thickness: 1px; }
	}
	& a.Telefon { gap: 12px; --symbol: url('../img/telefon.svg'); }
	& a.Gedenkportal { --symbol: url('../img/gedenkportal.svg'); }
	& a.Soforthilfe { --symbol: url('../img/soforthilfe.svg'); &::before { flex-basis: 31px; height: 31px; } }
}

/* Telefonnummer mit Symbol im Inhalt (Kästen „Dann sind wir für Sie da.“, „Übrigens“) */
.rte a.Telefon, p > a.Telefon {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	white-space: nowrap;
	&::before {
		content: '';
		flex: 0 0 28px;
		height: 28px;
		background: currentColor;
		-webkit-mask: url('../img/telefon.svg') center / contain no-repeat;
		mask: url('../img/telefon.svg') center / contain no-repeat;
	}
	&:hover { text-decoration: underline; }
}

@media (max-width: 1023px) {
	body:has(main :is(.Bildkopf, .StartKopf)) header { position: relative; }
	header { background: var(--color_2); }
	.Kopfzeile {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "logo menue" "leiste leiste";
		align-items: center;
		height: auto;
		padding: 16px var(--horizontal_spacing) 14px;
		row-gap: 12px;
		& .Logo { position: static; grid-area: logo; width: auto; & img { width: clamp(190px, 38vw, 300px); } }
		& .Kopfleiste { position: static; grid-area: leiste; }
		& .nav-wrapper { position: static !important; grid-area: menue; }
	}
	.Kopfleiste .rte { grid-auto-flow: column; justify-content: start; column-gap: 28px; font-size: 18px; }
	.Kopfleiste .rte a::before { flex-basis: 22px !important; height: 22px !important; }
}
@media (max-width: 559px) {
	.Kopfleiste .rte { grid-auto-flow: row; row-gap: 6px; }
}

/* ------------------------------------------------------------------ Menü
   Barrierefreie Kern-Navigation (mod_navigation_accessible) als Vollbild-Ebene wie im
   Rahmen „menu“: Auberginegrund, Rubriken in Schmuckschrift (Great Vibes 65, flieder),
   darunter die Abschnitte als Schaltflächen „dark“. Erste Zeile Rubriken bei x = 53, 482, 832
   (y = 183), zweite bei x = 254, 693 (y = 529); „Erklärfilme“ oben links (x = 54, y = 48). */
body { --nav-breakpoint: 99999px; }
body.navigation-open { overflow: hidden; }

.nav-wrapper .nav-burger {
	position: relative;
	z-index: 40;
	display: block;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--color_1);

	& .nav-burger__inner { display: none !important; }
	& .nav-burger__symbol {
		display: block;
		width: 48px;
		height: 48px;
		background: currentColor;
		-webkit-mask: url('../img/menue.svg') center / 48px no-repeat;
		mask: url('../img/menue.svg') center / 48px no-repeat;
		transition: transform 0.3s ease;
	}
	&:hover .nav-burger__symbol { transform: scale(1.08); }

	/* geöffnet: Schließen-Zeichen (36 × 25, flieder) an derselben Stelle */
	&.is-active {
		color: var(--color_2);
		& .nav-burger__symbol {
			-webkit-mask: url('../img/schliessen.svg') center / 36px no-repeat;
			mask: url('../img/schliessen.svg') center / 36px no-repeat;
		}
	}
}

body .navigation-main {
	--nav-mobile-background: var(--color_1);
	--nav-mobile-color: var(--color_2);
	--nav-mobile-active-color: var(--color_2);
	--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;
	overflow-y: auto;
	padding: 183px var(--horizontal_spacing) 80px max(var(--horizontal_spacing), calc((100vw - 1280px) / 2 + 53px));
	background: var(--color_1);
	color: 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; }
	@media (prefers-reduced-motion: reduce) { transition: none; &.is-active { transition: none; } }

	& a.skip-link:not(:focus) {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
	}

	& ul.level_1 {
		display: grid;
		/* Spaltenanfänge 53 · 254 · 482 · 693 · 832 (Entwurf) */
		grid-template-columns: 201px 228px 211px 139px minmax(0, 1fr);
		grid-template-areas:
			"bieten bieten trauer trauer abschied"
			".      rat    rat    vorsorge vorsorge";
		row-gap: 94px;
		max-width: 1180px;
		margin: 0;
		padding: 0;
		list-style: none;
		& > li { padding: 0; }
		& > li:nth-child(2) { grid-area: bieten; }
		& > li:nth-child(3) { grid-area: trauer; }
		& > li:nth-child(4) { grid-area: abschied; }
		& > li:nth-child(5) { grid-area: rat; }
		& > li:nth-child(6) { grid-area: vorsorge; }
		/* Rubrik: Great Vibes 65/70 */
		& > li > :is(a, strong) {
			display: inline-block;
			width: auto;
			padding: 0 !important;
			margin: 0 0 14px;
			font-family: var(--font_schmuck);
			font-size: var(--schrift_schmuck);
			font-weight: 400;
			line-height: 1.0769;
			color: var(--color_2) !important;
			text-decoration: none;
			&:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
		}
		/* „Erklärfilme“ (Seite ohne Unterpunkte) als Schaltfläche oben links */
		& > li.MenüErklärfilme, & > li:first-child {
			position: absolute;
			top: 48px;
			left: max(var(--horizontal_spacing), calc((100vw - 1280px) / 2 + 54px));
			& > :is(a, strong) {
				margin: 0;
				font-family: var(--font_family);
				font-size: var(--font_size);
				line-height: var(--line_height);
			}
		}
	}
	/* Abschnitte und „Erklärfilme“: Schaltfläche „dark“ (Text flieder, Kästchen flieder, Pfeil aubergine) */
	& ul.level_2 > li > :is(a, strong), & ul.level_1 > li:first-child > :is(a, strong) {
		display: inline-flex !important;
		align-items: center;
		gap: 18px;
		width: auto;
		margin: 0 !important;
		padding: 0 !important;
		font-family: var(--font_family) !important;
		font-size: var(--font_size) !important;
		line-height: var(--line_height) !important;
		color: var(--color_2) !important;
		text-decoration: none;
		transition: gap 0.3s ease;
		&::after {
			content: '';
			flex: 0 0 29px;
			width: 29px;
			height: 29px;
			border-radius: 3.5px;
			background: var(--color_2) url('../img/pfeil.svg') center / 12px no-repeat;
			transition: all 0.3s ease;
		}
		&:hover, &:focus-visible {
			gap: 25px;
			&::after { flex-basis: 33px; width: 33px; height: 33px; background-size: 19px; }
		}
	}
	& ul.level_2 {
		display: grid;
		justify-items: start;
		row-gap: 12px;
		margin: 0;
		padding: 0 0 0 7px;
		list-style: none;
		opacity: 1 !important;
		visibility: visible !important;
		max-height: none !important;
		transform: none !important;
		& li { padding: 0; }
	}
	& .ul-wrapper { display: block !important; position: static !important; height: auto !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; }
	& .btn-toggle-submenu { display: none !important; }

	@media (max-width: 1180px) {
		& ul.level_1 {
			grid-template-columns: repeat(2, minmax(0, 420px));
			grid-template-areas: "bieten trauer" "abschied rat" "vorsorge .";
			row-gap: 56px;
		}
	}
	@media (max-width: 720px) {
		padding-top: 130px;
		& ul.level_1 { grid-template-columns: 1fr; grid-template-areas: "bieten" "trauer" "abschied" "rat" "vorsorge"; row-gap: 36px; }
	}
}
/* Geöffnet: Logo und Kopfleiste liegen unter der Ebene, nur das Schließen-Zeichen bleibt sichtbar */
body.navigation-open .Kopfzeile .nav-wrapper { z-index: 40; }

/* ------------------------------------------------------------------ Fußzeile
   Komponente „Footer“ (458 px hoch): Logo 414 × 162 bei x = 156, y = 106; darunter Kontakt,
   Impressum, Datenschutz (Lexend 20, x = 164/297/462, y = 286); rechts bei x = 692 Telefon (y = 129),
   Anschrift (y = 187) und E-Mail (y = 282), Symbole 40 × 40, Text 52 px nach dem Symbol. */
footer { background: var(--color_2); }
.Fußzeile {
	display: grid;
	grid-template-columns: 536px minmax(0, 1fr);
	grid-template-areas: "logo kontakt" "links kontakt";
	align-items: start;
	max-width: 1280px;
	margin: 0 auto;
	padding: 106px var(--horizontal_spacing) 146px 156px;

	& > * { margin: 0; }
	& .FußzeileLogo { grid-area: logo; & img { width: 414px; height: auto; } }
	& .FußzeileLinks { grid-area: links; margin-top: 18px; padding-left: 8px; }
	& .FußzeileKontakt { grid-area: kontakt; margin-top: 23px; }
	& .content-image a:hover img { opacity: 0.8; }
}
.FußzeileLinks .rte {
	display: flex;
	column-gap: 55px;
	font-size: var(--schrift_text);
	line-height: var(--zeilen_text);
	& p { margin: 0; }
	& a { text-decoration: none; }
	& a:hover { text-decoration: underline; }
}
.FußzeileKontakt .rte {
	& p { position: relative; margin: 0; padding-left: 52px; }
	& p::before {
		content: '';
		position: absolute;
		left: 0;
		top: -4px;
		width: 40px;
		height: 40px;
		background: currentColor;
		-webkit-mask: var(--symbol) center / contain no-repeat;
		mask: var(--symbol) center / contain no-repeat;
	}
	& .Telefonzeile { --symbol: url('../img/telefon.svg'); }
	& .Telefonzeile a { text-decoration: none; &::before { content: none; } &:hover { text-decoration: underline; } }
	& .Anschrift { --symbol: url('../img/ort.svg'); margin-top: 25px; &::before { top: 13px; } }
	& .Mailzeile { --symbol: url('../img/e-mail.svg'); margin-top: 29px; }
	& .Mailzeile a { text-decoration: underline; text-decoration-thickness: 1px; }
}

@media (max-width: 1100px) {
	.Fußzeile {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 40px;
		padding: 106px var(--horizontal_spacing) 110px;
		& .FußzeileLogo img { width: min(414px, 100%); }
	}
}
@media (max-width: 767px) {
	.Fußzeile {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "logo" "kontakt" "links";
		row-gap: 36px;
		padding: 56px var(--horizontal_spacing) 64px;
		& .FußzeileLogo img { width: min(300px, 80vw); }
		& .FußzeileLinks { margin-top: 0; padding-left: 0; }
		& .FußzeileKontakt { margin-top: 0; }
	}
	.FußzeileLinks .rte { column-gap: 28px; flex-wrap: wrap; }
	.FußzeileKontakt .rte { font-size: 19px; & p { padding-left: 46px; } & p::before { width: 32px; height: 32px; top: -2px; } }
}