/* ==========================================================================
   Abendfriede Bestattungen — Kopfzeile, Bildkopf, 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.
   ========================================================================== */

/* ------------------------------------------------------------------ Kopfzeile */
header {
	position: relative;
	z-index: 30;
	background: var(--color_3);
}

.Kopfzeile {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-areas: "logo abzeichen rechts";
	align-items: start;
	column-gap: 54px;                 /* Logo-Ende 373 → Abzeichen 427 */
	width: calc(var(--content_width) + var(--horizontal_spacing) * 2);
	max-width: 100%;
	min-height: 299px;
	margin-inline: auto;
	padding: 43px var(--horizontal_spacing) 25px 34px;

	& > * { margin: 0; }

	& .Logo {
		grid-area: logo;
		margin-top: 33px;             /* Logo bei y = 76 */
		& a { display: block; }
		& img { width: 339px; height: auto; }
	}

	& .Abzeichen {
		grid-area: abzeichen;
		margin-top: 69px;             /* Abzeichen bei y = 112 */
		& img { width: 128px; height: auto; }
	}

	& .KopfzeileRechts {
		grid-area: rechts;
		justify-self: end;
		display: grid;
		grid-template-columns: 1fr auto;            /* Knöpfe rechtsbündig, Reihe endet bei x = 1240 */
		grid-template-areas: "barrierefrei menue" "telefon telefon";
		justify-content: end;
		align-items: start;
		column-gap: 24px;
		row-gap: 25px;                /* Schaltflächen 43–100, Telefon ab 125 */

		& > * { margin: 0; }
		& .Barrierefrei { grid-area: barrierefrei; justify-self: end; }
		& .nav-wrapper { grid-area: menue; }
		& .Telefonleiste { grid-area: telefon; justify-self: end; }
	}
}

/* Telefonkästen: Symbol, Ort, Nummer (Kasten 377 × 45, Ecken 8 px) */
.Telefonleiste .rte {
	display: grid;
	gap: 7px;
	& > p { margin: 0; }
	& a {
		display: flex;
		align-items: center;
		gap: 14px;
		width: 377px;
		max-width: 100%;
		padding: 8.5px 10px;
		border-radius: 8px;
		background: var(--color_3);
		color: var(--color_1);
		text-decoration: none;
		white-space: nowrap;
		&::before {
			content: '';
			flex: 0 0 28px;
			height: 28px;
			background: currentColor;
			mask: url('../img/icons/icon-telefon.svg') center / contain no-repeat;
		}
		&:hover { box-shadow: inset 0 0 0 2px var(--color_1); }
	}
	& a span { min-width: 122px; }
}

/* Startseite: Kopfzeile liegt auf dem Bildkopf */
body.SeiteStart header {
	position: absolute;
	inset: 0 0 auto;
	background: transparent;
}

/* Kopfzeile auf schmalen Bildschirmen: Logo + Menü oben, Telefon darunter */
@media (max-width: 1100px) {
	.Kopfzeile {
		grid-template-columns: 1fr auto;
		grid-template-areas: "logo rechts";
		min-height: 0;
		padding: 20px var(--horizontal_spacing) 20px;
		& .Logo { margin-top: 0; & img { width: clamp(170px, 30vw, 260px); } }
		& .Abzeichen { display: none; }
		& .KopfzeileRechts { row-gap: 14px; }
	}
	body.SeiteStart header { position: absolute; }
}
@media (max-width: 700px) {
	.Kopfzeile {
		grid-template-columns: 1fr auto;
		grid-template-areas: "logo rechts" "telefon telefon" "barrierefrei barrierefrei";
		& .KopfzeileRechts {
			display: contents;
			& .Barrierefrei { grid-area: barrierefrei; justify-self: start; margin-top: 12px; }
			& .nav-wrapper { grid-area: rechts; justify-self: end; }
			& .Telefonleiste { grid-area: telefon; justify-self: stretch; margin-top: 14px; }
		}
	}
	.Telefonleiste .rte a { width: 100%; font-size: 17px; gap: 10px; }
	.Telefonleiste .rte a span { min-width: 100px; }
	body.SeiteStart header { position: relative; background: var(--color_3); }
}

/* ------------------------------------------------------------------ Bildkopf
   Artikel mit Klasse „Bildkopf“: Bild über die volle Breite, Seitentitel (h1)
   darüber. Bildhöhe ergibt sich aus der Bildgröße „Bildkopf“ (1282 × 610). */
/* Höhe: wie im Entwurf (Seitenverhältnis 1282 × 610), aber höchstens so hoch, dass
   Kopfzeile + Bildkopf samt Titel auf einen Bildschirm passen. Das Bild füllt die Fläche
   (object-fit) — der Ausschnitt richtet sich nach dem „wichtigen Teil“ der Bildgröße. */
main .mod_article.Bildkopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: clamp(260px, min(47.6vw, 100svh - 299px), 914px);
	padding: 0;
	isolation: isolate;
	& > * {
		grid-area: 1 / 1;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	& .content-image img,
	& .content-player video { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
	& :is(.content-image, .content-player), & :is(.content-image, .content-player) figure { height: 100%; }
	& :is(.content-headline, .content-text) {
		align-self: end;
		z-index: 1;
		padding: 0 var(--horizontal_spacing) 120px;
		text-align: center;
		& :is(h1, h2), &:is(h1, h2) { color: var(--color_3); }
	}
	@media (max-width: 700px) {
		& :is(.content-headline, .content-text) { padding-bottom: 40px; }
	}
}
/* Startseite: Kopfzeile liegt auf dem Bild; Bildkopf füllt den Bildschirm
   (höchstens Entwurfsverhältnis 1280 × 856) */
body.SeiteStart main .mod_article.Bildkopf { grid-template-rows: clamp(520px, min(66.9vw, 100svh), 1284px); }
@media (max-width: 700px) {
	main .mod_article.Bildkopf { grid-template-rows: clamp(240px, 62vw, 420px); }
	body.SeiteStart main .mod_article.Bildkopf { grid-template-rows: clamp(360px, 110vw, 560px); }
}
/* Startseite: Titel zweizeilig, 125 px über der Unterkante */
body.SeiteStart main .mod_article.Bildkopf :is(.content-headline, .content-text) { padding-bottom: 125px; }
/* Tablet: Kopfzeile (Logo + drei Telefonzeilen) liegt auf dem Bild — Bild höher, Titel tiefer, damit er nicht
   an der Telefonliste klebt */
@media (min-width: 701px) and (max-width: 1023px) {
	body.SeiteStart main .mod_article.Bildkopf { grid-template-rows: clamp(600px, 78vw, 800px); }
	body.SeiteStart main .mod_article.Bildkopf :is(.content-headline, .content-text) { padding-bottom: 70px; }
}

/* ------------------------------------------------------------------ Menü
   Barrierefreie Kern-Navigation (mod_navigation_accessible). Der Knopf zeigt
   „Menü“ (rot) und das Menüsymbol; geöffnet füllt das Menü den Bildschirm
   (Hellblau) mit sechs Rubriken in drei Spalten. */
body { --nav-breakpoint: 99999px; }
body.navigation-open { overflow: hidden; }

.nav-wrapper .nav-burger {
	position: relative;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: #fff;
	font: inherit;

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

	/* „Menü“: rote Schaltfläche mit weißem Innenrahmen (90 × 57) */
	& .nav-burger__text {
		display: block;
		padding: 6px;
		border-radius: 8px;
		background: var(--color_1);
		& > span {
			display: block;
			padding: 5px 8px 8px;                   /* Innenrahmen 78 × 45 inkl. Rahmen, wie im Entwurf */
			border: 2px solid #fff;
			border-radius: 3px;
			line-height: 28px;
		}
	}
	/* Menüsymbol (59 × 57, Creme) */
	& .nav-burger__symbol {
		display: block;
		width: 59px;
		height: 57px;
		border-radius: 8px;
		background: var(--color_3) url('../img/icons/icon-kopf-rechts.svg') center / 59px 57px no-repeat;
	}
	&:hover .nav-burger__text { box-shadow: inset 0 0 0 2px #fff; }
	/* Startseite: im Entwurf 27 px zwischen „Menü“ und Symbol, auf Unterseiten 1 px */
	body.SeiteStart & { gap: 27px; }
	align-items: flex-start;
	& .nav-burger__text { margin-top: 1px; }      /* Entwurf: Menü y = 44, Symbol y = 46 */
	& .nav-burger__symbol { margin-top: 3px; }
	&:hover .nav-burger__symbol { box-shadow: inset 0 0 0 2px var(--color_1); }

	/* geöffnet: nur das Schließen-Symbol (41 × 41) */
	&.is-active {
		position: fixed;
		top: 46px;
		right: max(var(--horizontal_spacing), calc((100vw - var(--content_width)) / 2));
		& .nav-burger__text { display: none; }
		& .nav-burger__symbol {
			margin-top: 0;
			background: url('../img/icons/icon-menue-schliessen.svg') center / 41px 41px no-repeat;
		}
	}
}

/* Overlay */
body .navigation-main {
	--nav-mobile-background: var(--color_2);
	--nav-mobile-color: var(--color_4);
	--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;
	overflow-y: auto;
	padding: 127px var(--horizontal_spacing) 80px;
	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; }
	@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: 401px 384px 354px;   /* Spalten bei x = 76, 477, 861 */
		justify-content: start;
		column-gap: 0;
		row-gap: 92px;                              /* zweite Rubrikenzeile bei y = 461 */
		max-width: 1128px;
		margin: 0 auto;
		padding: 0 0 0 0;
		list-style: none;
		& > li { padding: 0; }
		/* Rubrik: Schmuckschrift 70 px, Rostrot */
		& > li > :is(a, strong) {
			display: block;
			width: auto;
			padding: 0;
			margin-bottom: 20px;
			font-family: var(--font_schmuck);
			font-size: var(--schrift_schmuck_klein);
			letter-spacing: 0.01em;
			font-weight: 400;
			line-height: 1;
			color: var(--color_1) !important;
			text-decoration: none;
		}
	}
	& ul.level_2 {
		display: grid;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
		opacity: 1 !important;
		visibility: visible !important;
		max-height: none !important;
		& li { padding: 0; }
		& :is(a, strong) {
			display: block;
			width: fit-content;
			padding: 0;
			font-size: var(--font_size);
			font-weight: 700;
			line-height: 28px;
			color: var(--color_4);
			text-decoration: none;
		}
		& a:hover, & strong { color: var(--color_1); }
	}
	& .ul-wrapper { display: block !important; height: auto !important; opacity: 1 !important; visibility: visible !important; }
	& .btn-toggle-submenu { display: none !important; }

	@media (max-width: 1180px) {
		& ul.level_1 { grid-template-columns: repeat(2, minmax(0, 354px)); row-gap: 56px; }
	}
	@media (max-width: 760px) {
		padding-top: 110px;
		& ul.level_1 { grid-template-columns: 1fr; row-gap: 36px; }
		& ul.level_1 > li > :is(a, strong) { margin-bottom: 12px; }
	}
}

/* ------------------------------------------------------------------ Fußzeile */
footer {
	background: var(--color_3);
}
.Fußzeile {
	width: calc(var(--content_width) + var(--horizontal_spacing) * 2);
	max-width: 100%;
	margin: 0 auto;
	padding: 68px var(--horizontal_spacing) 139px;   /* letzte Magdeburger Nummer → Unterkante 139 px */
	@media (max-width: 767px) { padding-bottom: 60px; }

	& > * { margin: 0; }
	& .FußzeileLogo { & figure { display: flex; justify-content: center; } & img { width: min(598px, 100%); }
		@media (min-width: 1024px) { & figure { margin-left: -32px; } }   /* Entwurf: Logo 16 px links der Mitte */
	}
	& .Leitsatz { margin-top: 29px; }

	& .FußzeileSpalten {
		display: grid;
		grid-template-columns: 434fr 445fr 218fr;
		max-width: 1097px;
		margin: 113px 0 0 auto;                    /* Leitsatz → Ortsnamen 113 px */
		@media (max-width: 767px) { margin-top: 50px; }
		@media (max-width: 1023px) { grid-template-columns: 1fr 1fr; row-gap: 50px; margin-left: 0; }
		@media (max-width: 640px) { grid-template-columns: 1fr; }
		& > * { margin: 0; }
	}
	& .FußzeileSpalte > * { margin: 0; }
	& .FußzeileSpalte > .content-headline + * { margin-top: 25px; }
	& .FußzeileSpalte > .content-text + .content-headline { margin-top: 91px; @media (max-width: 1023px) { margin-top: 50px; } }
	& .FußzeileSpalte > .content-text + :is(.content-hyperlink, .content-accordion) { margin-top: 52px; }
	& .FußzeileSpalte > :is(.content-hyperlink, .content-accordion) + :is(.content-hyperlink, .content-accordion) { margin-top: 17px; }

	/* Links Kontakt / Impressum / Datenschutz */
	& .FußzeileLinks { margin-top: 11px; }
	& .FußzeileLinks .rte {
		display: grid; gap: 25px;
		& p { margin: 0; }
		& a { color: var(--color_4); text-decoration: none; }
		& a:hover { color: var(--color_1); }
	}
	& .FußzeileSymbole {
		display: grid;
		justify-items: start;
		gap: 22px;
		margin-top: 95px;
		& > * { margin: 0; }
		& img { border-radius: 0; width: auto; max-width: 148px; }
		& > :nth-child(4) img { width: 134px; }
		& > :nth-child(5) img { width: 148px; }
		& .content-image a:hover { opacity: 0.75; }
	}
	@media (max-width: 1023px) {
		& .FußzeileLogo img { width: min(598px, 80vw); }
		& .FußzeileSymbole { margin-top: 40px; }
	}
}

/* Adressliste: je Absatz Straße (Ort-Symbol) und Telefon (Telefon-Symbol).
   Entwurf: Block 68 px (Ort-Symbol 33 px, Straße 3 px tiefer, Telefon 37 px unter der Straße), 38 px Abstand */
.Adressliste .rte {
	display: grid;
	gap: 38px;
	& p {
		position: relative;
		margin: 0;
		padding: 3px 0 0 42px;
		line-height: 28px;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 33px;
			height: 33px;
			background: var(--color_4);
			mask: url('../img/icons/icon-ort.svg') center / contain no-repeat;
		}
		& br + a, & a[href^="tel:"] { display: inline-block; margin-top: 9px; }
		& a[href^="tel:"] { position: relative; color: inherit; text-decoration: none; }
		& a[href^="tel:"]::before {
			content: '';
			position: absolute;
			left: -42px;
			top: 0;
			width: 34px;
			height: 28px;
			background: var(--color_4);
			mask: url('../img/icons/icon-telefon.svg') center / 28px no-repeat;
		}
		& a[href^="tel:"]:hover { color: var(--color_1); }
	}
}

/* Genderhinweis (Akkordeon in der Fußzeile): Kopf als Schaltfläche, Text darunter */
.Genderhinweis {
	border: 0;
	& .handorgel__header { margin: 0; }
	& .handorgel__header__button {
		position: relative;
		display: inline-block;
		width: auto;
		padding: 13px 16px 16px;
		border: 0;
		border-radius: 8px;
		background: var(--color_2);
		color: var(--color_1);
		font: 700 var(--font_size)/28px var(--font_family);
		cursor: pointer;
		&::after { content: ''; position: absolute; inset: 6px; border: 2px solid currentColor; border-radius: 3px; pointer-events: none; }
		&:hover { box-shadow: inset 0 0 0 2px var(--color_1); }
	}
	& .handorgel__content { border: 0; background: transparent; }
	& .handorgel__content__inner { padding: 11px 0 0; opacity: 1 !important; }
	& .handorgel__header--opened .handorgel__header__button { box-shadow: inset 0 0 0 2px var(--color_1); }
}

/* Weiche Videoschleife (script.js): zweite Wiedergabe liegt deckungsgleich darüber */
.VideoSchleife { position: relative; }
.VideoÜberblendung {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 1.2s linear;
	pointer-events: none;
}