/* ==========================================================================
   Herz Bestattungen — 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 mittig (291 × 119, y = 37), Telefonnummern rechts (x = 866, y = 46/83),
   Menüsymbol 48 × 48 bei x = 1183, y = 39. Auf Seiten mit Bildkopf liegt die
   Kopfzeile über dem Bild. */
header {
	position: relative;
	z-index: 30;
}
body:has(main .Bildkopf) header {
	position: absolute;
	inset: 0 0 auto;
}

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

	& > * { margin: 0; }
	& .Logo {
		position: absolute;
		left: 50%;
		top: 37px;
		width: 291px;
		translate: -50% 0;
		& a { display: block; }
		& img { width: 291px; height: auto; }
	}
	& .Telefonleiste {
		position: absolute;
		right: 201px;
		top: 46px;
	}
	& .nav-wrapper {
		position: absolute !important;   /* Kern-CSS setzt im Mobilmodus relative */
		right: 49px;
		top: 39px;
		width: 48px;
		height: 48px;
	}
}

/* Telefonnummern mit Symbol (Roboto Flex 500 22/26, Symbol 20 × 20, Text 34 px nach dem Symbol) */
.Telefonleiste .rte, .FußzeileTelefon .rte {
	display: grid;
	row-gap: 8px;                  /* Entwurf: Zeilen bei y = 46 und 83 */
	& > p { margin: 0; }
}
a.Telefon {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	&::before {
		content: '';
		flex: 0 0 20px;
		height: 20px;
		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; text-decoration-thickness: 1px; }
}

@media (max-width: 1023px) {
	body:has(main .Bildkopf) header { position: relative; }
	header { background: var(--color_2); }
	.Kopfzeile {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "logo menue" "telefon telefon";
		align-items: center;
		height: auto;
		padding: 16px var(--horizontal_spacing) 14px;
		row-gap: 10px;
		& .Logo { position: static; translate: none; grid-area: logo; width: auto; & img { width: clamp(170px, 30vw, 240px); } }
		& .Telefonleiste { position: static; grid-area: telefon; }
		& .nav-wrapper { position: static !important; grid-area: menue; }
	}
	.Telefonleiste .rte { grid-auto-flow: column; justify-content: start; column-gap: 28px; font-size: 18px; }
}
@media (max-width: 479px) {
	.Telefonleiste .rte { grid-auto-flow: row; row-gap: 6px; }
}

/* ------------------------------------------------------------------ Menü
   Barrierefreie Kern-Navigation (mod_navigation_accessible) als Vollbild-Ebene wie im
   Rahmen „menu“: Beerengrund, Rubriken in Schmuckschrift (weiß, 55 px) in drei Spalten
   (x = 131, 495, 871), darunter die Abschnitte als Schaltflächen ohne Pfeil. */
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: weißes Schließen-Kreuz an derselben Stelle (Entwurf x = 1186, y = 39) */
	&.is-active {
		color: var(--color_4);
		& .nav-burger__symbol {
			-webkit-mask-image: url('../img/schliessen.svg');
			mask-image: url('../img/schliessen.svg');
		}
	}
}
/* Bildköpfe mit heller Schrift (Klasse „TitelWeiß“ am Bildkopf) behalten die beerenfarbene Kopfzeile
   wie im Entwurf; auf dunklen Bildern hilft ein leichter Schatten nicht — der Entwurf zeigt keinen. */

body .navigation-main {
	--nav-mobile-background: var(--color_1);
	--nav-mobile-color: var(--color_4);
	--nav-mobile-active-color: var(--color_4);
	--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: 103px var(--horizontal_spacing) 80px max(var(--horizontal_spacing), calc((100vw - 1280px) / 2 + 131px));
	background: var(--color_1);
	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;
		grid-template-columns: 364px 376px 349px;   /* Spalten bei x = 131, 495, 871 */
		justify-content: start;
		column-gap: 0;
		row-gap: 72px;                              /* zweite Rubrikenzeile bei y = 460 */
		max-width: 1089px;
		margin: 0;
		padding: 0;
		list-style: none;
		& > li { padding: 0; }
		/* Rubrik: Smithen 55/52, weiß */
		& > li > :is(a, strong) {
			display: inline-block;
			width: auto;
			padding: 0 !important;
			margin: 0 0 6px;
			font-family: var(--font_schmuck);
			font-size: var(--schrift_schmuck);
			font-weight: 400;
			line-height: 0.945;
			color: var(--color_4) !important;
			text-decoration: none;
			&:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
		}
	}
	/* Abschnitte: Schaltflächen „red“ ohne Pfeil (Fläche = Grund), beim Überfahren schwarz */
	& ul.level_2 {
		display: grid;
		justify-items: start;
		gap: 5px;
		margin: 0;
		padding: 0;
		list-style: none;
		opacity: 1 !important;
		visibility: visible !important;
		max-height: none !important;
		transform: none !important;
		& li { padding: 0; }
		& :is(a, strong) {
			display: block;
			width: fit-content;
			margin: 0 !important;
			padding: 6.4px 12px 7.6px !important;
			border-radius: 40px;
			background: var(--color_1);
			box-shadow: 0 0 0 2.5px var(--color_1);
			font-family: var(--font_family);
			font-size: var(--font_size);
			font-weight: 500;
			line-height: 1.1818;
			color: var(--color_4) !important;
			text-decoration: none;
			transition: background-color 0.3s ease;
		}
		& a:hover, & a:focus-visible { background: var(--schwarz); }
	}
	& .ul-wrapper { display: block !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, 376px)); row-gap: 56px; }
	}
	@media (max-width: 760px) {
		padding-top: 96px;
		& ul.level_1 { grid-template-columns: 1fr; row-gap: 36px; }
	}
}
/* Geöffnet: Logo und Telefonnummern liegen unter der Ebene, nur das Kreuz bleibt sichtbar */
body.navigation-open .Kopfzeile .nav-wrapper { z-index: 40; }

/* ------------------------------------------------------------------ Fußzeile
   Hintergrund Flieder hell, 533 px hoch. Logo bei x = 133, Spalten bei x = 273, 699, 1117. */
footer { background: var(--color_2); }
.Fußzeile {
	display: grid;
	grid-template-columns: 140px 426px 418px minmax(0, 1fr);
	grid-template-areas:
		"logo     logo      email      .     "
		".        winsen    salzhausen links "
		".        telwinsen telsalz    links "
		".        verband   treuhand   insta ";
	align-items: start;
	max-width: 1280px;
	margin: 0 auto;
	padding: 69px var(--horizontal_spacing) 71px 133px;

	& > * { margin: 0; }
	& .FußzeileLogo { grid-area: logo; & img { width: 291px; height: auto; } }
	& .FußzeileEmail { grid-area: email; align-self: start; margin-top: 59px; }
	& .FußzeileStandortWinsen { grid-area: winsen; margin-top: 43px; }
	& .FußzeileStandortSalzhausen { grid-area: salzhausen; margin-top: 42px; }
	& .FußzeileLinks { grid-area: links; margin-top: 46px; }
	& .FußzeileTelefonWinsen { grid-area: telwinsen; margin-top: 10px; }
	& .FußzeileTelefonSalzhausen { grid-area: telsalz; margin-top: 7px; padding-left: 3px; }
	& .FußzeileVerband { grid-area: verband; margin-top: 51px; & img { width: 160px; height: auto; } }
	& .FußzeileTreuhand { grid-area: treuhand; margin-top: 58px; }
	& .FußzeileInstagram { grid-area: insta; margin-top: 63px; & img { width: 29px; height: auto; } }
	& .content-image a:hover img { opacity: 0.75; }
}
/* Standorte: Kartennadel 20 × 20 links, Text 34 px eingerückt, Zeilen 26 + 5 px */
.FußzeileStandort .rte p {
	position: relative;
	padding-left: 34px;
	line-height: 31px;
	margin-top: -2.5px;
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 3px;
		width: 20px;
		height: 20px;
		background: currentColor;
		-webkit-mask: url('../img/ort.svg') center / contain no-repeat;
		mask: url('../img/ort.svg') center / contain no-repeat;
	}
}
/* E-Mail mit Briefsymbol (29 × 18), unterstrichen wie im Entwurf */
.FußzeileEmail .rte p a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	&::before {
		content: '';
		flex: 0 0 29px;
		height: 18px;
		background: currentColor;
		-webkit-mask: url('../img/e-mail.svg') center / contain no-repeat;
		mask: url('../img/e-mail.svg') center / contain no-repeat;
	}
}
/* Kontakt, Impressum, Datenschutz, AGB: 16/19, Abstand 34 px */
.FußzeileLinks .rte {
	display: grid;
	row-gap: 15px;
	font-size: var(--schrift_klein);
	line-height: 1.1875;
	& p { margin: 0; }
	& a { text-decoration: none; }
	& a:hover { text-decoration: underline; }
}
/* BT Bestattungstreuhand: Zeichen 36 × 38, Text 16 px */
.FußzeileTreuhand a {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	font-size: var(--schrift_klein);
	line-height: 1.1875;
	text-decoration: none;
	&::before {
		content: '';
		flex: 0 0 36px;
		height: 38px;
		background: url('../img/logo-bestattungstreuhand.svg') center / contain no-repeat;
	}
	&:hover { text-decoration: underline; }
}

@media (max-width: 1180px) {
	.Fußzeile {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-areas:
			"logo       logo       logo "
			"winsen     salzhausen links"
			"telwinsen  telsalz    links"
			"email      email      email"
			"verband    treuhand   insta";
		column-gap: 32px;
		padding: 56px var(--horizontal_spacing) 64px;
		& > * { margin-top: 0 !important; }
		& :is(.FußzeileStandortWinsen, .FußzeileStandortSalzhausen, .FußzeileLinks) { margin-top: 40px !important; }
		& :is(.FußzeileTelefonWinsen, .FußzeileTelefonSalzhausen) { margin-top: 12px !important; }
		& .FußzeileEmail { margin-top: 32px !important; }
		& :is(.FußzeileVerband, .FußzeileTreuhand, .FußzeileInstagram) { margin-top: 40px !important; align-self: center; }
	}
}
@media (max-width: 767px) {
	.Fußzeile {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "logo" "winsen" "telwinsen" "salzhausen" "telsalz" "email" "links" "verband" "treuhand" "insta";
		& .FußzeileLogo img { width: min(240px, 70vw); }
		& .FußzeileStandortSalzhausen { margin-top: 32px !important; }
		& .FußzeileLinks { margin-top: 32px !important; }
		& .FußzeileLinks .rte { grid-auto-flow: column; justify-content: start; column-gap: 24px; }
		& :is(.FußzeileTreuhand, .FußzeileInstagram) { margin-top: 24px !important; justify-self: start; }
	}
}