/* ==========================================================================
   Bestattungen Joisten — Bausteine der Inhaltsseiten
   Jeder Baustein ist eine CSS-Klasse am Artikel oder an einem Element (Feld
   „CSS-ID/Klasse“). Maße aus dem Figma-Entwurf „JOISTEN_design“ bei 1280 px.
   Abstände zwischen den Abschnitten: Pixelklassen AbstandOben<N>/AbstandUnten<N>
   (abstaende-pixel.css, Werte aus dem Entwurf).
   ========================================================================== */

/* ------------------------------------------------------------------ Abschnitte (Artikel) */
main .mod_article {
	position: relative;
	padding: 0 var(--horizontal_spacing);
}
main .mod_article__inner {
	max-width: var(--content_width);
	margin-inline: auto;
	& > * { margin-top: 0; margin-bottom: 0; }
}
/* Letzter Abschnitt vor der Fußzeile: Entwurf ~140 px Luft (Video-Bedienleiste → Fußzeilen-Oberkante) */
main .mod_article:last-child { padding-bottom: 140px; }

/* ------------------------------------------------------------------ Textrhythmus
   Abstände aus dem Entwurf (Auto-Layout der Textrahmen):
   Titel (70/80) → Text 15 px · Absätze 33 px (eine Leerzeile) · Kasten: 20 px zwischen allen Teilen ·
   Schmuckschrift-Titel (65) → Text 15 px, (40) → Text 8–20 px · Text → Schaltfläche 20 px */
main .rte {
	& > * + * { margin-top: calc(var(--line_height) * 1em); }
	& > :is(h1, h2) + * { margin-top: 40px; }   /* sichtbare Lücke im Entwurf 36–46 px (Textfelder sind höher als die Zeilen) */
	& > :is(h1, h2) + h3 + * { margin-top: 38px; }
	& > :is(h3, h4) + * { margin-top: 20px; }
	& > .Schmuck + * { margin-top: 15px; }
	& > .SchmuckKlein + * { margin-top: 15px; }
	& ul {
		padding-left: 1.1em;
		list-style: disc;
		& li + li { margin-top: 0; }
	}
}
main :is(.content-text, .content-headline) + :is(.Schaltfläche, .SchaltflächeKlein) { margin-top: 20px; }
main :is(.Schaltfläche, .SchaltflächeKlein) + :is(.Schaltfläche, .SchaltflächeKlein) { margin-top: 11px; }

/* Liste „Was wir für Sie tun“, Dokumente: Punkte eng, Zeilen 20/26, Abstand zwischen den Punkten 26 px */
main .ListeLuftig .rte ul li + li { margin-top: calc(var(--zeilen_text) * 1em); }

/* ------------------------------------------------------------------ Bildkopf (Unterseiten)
   Artikel „Bildkopf“: Foto 1280 × 620 über die volle Breite (Kopfzeile liegt darüber),
   darunter auf hellem Grund der Seitentitel (x = 60, 52 px unter dem Bild):
   Schmuckschrift Great Vibes 65 + Lexend 250 70 in einer Zeile, Grundlinien bündig;
   darunter die Ankerleiste (Schaltflächen mit Pfeil nach unten, 31 px unter dem Titel). */
main .mod_article.Bildkopf {
	padding: 0;
	& .mod_article__inner { max-width: none; }
	& .mod_article__inner > :is(.content-image, .content-swiper) {
		width: 100%;
		& img { width: 100%; height: auto; aspect-ratio: 1280 / 620; max-height: 100svh; object-fit: cover; }
	}
	& .mod_article__inner > :not(.content-image, .content-swiper) {
		max-width: calc(var(--content_width) + 2 * var(--horizontal_spacing));
		margin-inline: auto;
		padding-inline: var(--horizontal_spacing);
	}
	& .mod_article__inner > .content-text { margin-top: 52px; }
	& h1 {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 0.33em;
		& .Schmuck { font-size: var(--schrift_schmuck); line-height: 1.0769; }
	}
}
/* Ankerleiste: Schaltflächen bei x = 62, 280, 580 … (Abstand 59–67 px) */
main .Ankerleiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 59px;
	row-gap: 12px;
	margin-top: 31px !important;
	& > * { margin: 0 !important; }
}
@media (max-width: 767px) {
	main .mod_article.Bildkopf .mod_article__inner > .content-text { margin-top: 28px; }
	main .Ankerleiste { column-gap: 28px; margin-top: 20px !important; }
}

/* ------------------------------------------------------------------ Bildkopf der Startseite
   Video 1280 × 852 über die volle Breite, oben ein weißer Verlauf (377 px, unter der Kopfzeile),
   Titel weiß: „Auf den Spuren“ Great Vibes 100 mit Schatten (10/10/10 schwarz) bei x = 67, y = 571,
   „des Abschieds“ Lexend 100 130/130 rechtsbündig bis x = 1220, y = 649. */
main .mod_article.StartKopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 0;
	isolation: isolate;
	& .mod_article__inner { display: contents; }
	& .mod_article__inner > * { grid-area: 1 / 1; margin: 0; max-width: none; }
	& .content-player, & .content-player figure { height: 100%; margin: 0; }
	& video { width: 100%; height: 100%; aspect-ratio: 1280 / 852; max-height: 100svh; object-fit: cover; display: block; }
	&::before {
		content: '';
		position: absolute;
		inset: 0 0 auto;
		height: min(377px, 44%);
		background: linear-gradient(#fff, rgb(255 255 255 / 0));
		z-index: 1;
		pointer-events: none;
	}
	& .content-text {
		align-self: end;
		z-index: 2;
		width: 100%;
		max-width: 1280px;
		margin-inline: auto;
		padding: 0 var(--horizontal_spacing) clamp(24px, 5.7vw, 73px);   /* Entwurf: Zeile „des Abschieds“ endet 73 px über der Videounterkante */
		color: var(--color_3);
	}
	& h1 { display: grid; font-weight: 100; line-height: 1; }
	& h1 .SchmuckGroß { padding-left: 7px; text-shadow: 10px 10px 10px rgb(0 0 0 / 0.75); line-height: 0.95; }
	& h1 .Riesig { justify-self: end; margin-top: -17px; font-size: var(--schrift_riesig); line-height: 1; }
}
@media (max-width: 767px) {
	main .mod_article.StartKopf video { aspect-ratio: 4 / 5; }
	main .mod_article.StartKopf h1 .Riesig { margin-top: 2px; }
}

/* ------------------------------------------------------------------ Zwei Spalten
   Inhaltsbreite 1160 px (x = 60 … 1220), Spalten 528 px bei x = 60 und 692 (Lücke 104 px).
   Klasse „Zweispalter“ an einer Elementgruppe: jedes Kind ist eine Spalte. */
.Zweispalter {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 8.966%;
	row-gap: 48px;
	align-items: start;
	& > * { margin: 0 !important; }
	&.mittig { align-items: center; }
	/* Titel-Textfelder im Entwurf 581 px breit (Spalte 528 px): dürfen in die Lücke ragen */
	@media (min-width: 768px) { & > :first-child :is(h1, h2) { margin-right: -10.04%; } }
	& > .content-element-group > * + * { margin-top: 33px; }
	& > .content-element-group > :is(.Kasten, .KastenWeiß, .KastenDunkel) + :is(.Kasten, .KastenWeiß, .KastenDunkel) { margin-top: 41px; }
	@media (max-width: 767px) {
		grid-template-columns: minmax(0, 1fr);
		& > .content-element-group > * + * { margin-top: 24px; }
	}
}
/* Bild in der rechten Spalte bündig rechts (Fotos 523 px bei x = 697) */
.Zweispalter > .content-image:nth-child(2) { justify-self: end; }

/* ------------------------------------------------------------------ Fotos
   Foto: Ecken 20 px. Rundbild: 442 × 411 mit Radius 300 (= Stadion-Form wie im Entwurf).
   Freisteller: PNG ohne Rahmen (Statue, Sternenkinderfeld, Fingerabdruck). */
.Foto img { border-radius: 20px; }
.Rundbild img { border-radius: 300px; }
.Rundbild { max-width: 442px; }

/* Bildpaar: Rundbild und kleines Foto schräg darunter (überlappend), Lage laut Entwurf.
   Standard (Was wir bieten): Rundbild bei x = +33, kleines Foto 261 × 202 bei x = +316, y = +336.
   „BildpaarRechts“ (Trauerfall): Rundbild bei x = −18 der rechten Spalte, kleines Foto bei x = +218, y = +367.
   „BildpaarBreit“ (Startseite): kleines Foto 373 × 202 bei x = +260, y = +327 vom Rundbild. */
.Bildpaar {
	--rx: 33px; --kx: 316px; --ky: 336px;
	position: relative;
	min-height: calc(var(--ky) + 202px);
	& > * { margin: 0 !important; }
	& > .Rundbild { margin-left: var(--rx) !important; }
	& > .Kleinbild { position: absolute; left: var(--kx); top: var(--ky); z-index: 1; }
	& > .Kleinbild img { border-radius: 20px; }
	&.BildpaarRechts { --rx: -18px; --kx: 218px; --ky: 367px; }
	&.BildpaarBreit { --rx: 0px; --kx: 260px; --ky: 327px; }
	@media (max-width: 1100px) {
		--kx: 46%; --ky: 64%;
		min-height: 0;
		padding-bottom: 22%;
		& > .Rundbild { margin-left: 0 !important; width: 84%; }
		& > .Kleinbild { width: 50%; }
		&.BildpaarRechts { --rx: 0px; --kx: 46%; --ky: 64%; }
		&.BildpaarBreit { --kx: 40%; & > .Kleinbild { width: 60%; } }
	}
}

/* ------------------------------------------------------------------ Kästen
   Rahmen 2 px aubergine, Ecken 20 px, Innenabstand 30 px (Rahmen innen), Teile 20 px auseinander.
   Kasten: ohne Fläche · KastenWeiß: weiße Fläche · KastenDunkel: aubergine Fläche, Schrift flieder.
   Rollkasten: feste Höhe 925 px, Inhalt scrollt („Was wir für Sie tun“). */
:is(.Kasten, .KastenWeiß, .KastenDunkel) {
	padding: 28px;
	border: 2px solid var(--color_1);
	border-radius: 20px;
	& .rte { font-size: var(--schrift_text); line-height: var(--zeilen_text); }
	& .rte > * + * { margin-top: 20px; }
	& .rte > :is(.Schmuck, .SchmuckKlein) + * { margin-top: 20px; }
	& > * + * { margin-top: 20px !important; }
	& h3:not(.Schmuck, .SchmuckKlein) { font-size: var(--font_size); line-height: var(--line_height); }
	& .rte > .TextGroß { font-size: var(--font_size); line-height: var(--line_height); }
	@media (max-width: 599px) { padding: 20px; }
}
.KastenWeiß { background: var(--color_3); }
.KastenDunkel { background: var(--color_1); color: var(--color_2); }
.Rollkasten {
	position: relative;
	max-height: 925px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-color: var(--color_1) transparent;
	scrollbar-width: thin;
	@media (max-width: 767px) { max-height: 70svh; }
}
/* Kasten als Gruppe (Titel + Text + Schaltfläche als eigene Elemente) */
:is(.Kasten, .KastenWeiß, .KastenDunkel).content-element-group > * { margin: 0; }

/* ------------------------------------------------------------------ Bildband
   Foto bzw. Bildwechsel über die volle Breite, 1280 × 548 (Startseite auch 1280 × 620). */
main .mod_article.Bildband {
	padding: 0;
	& .mod_article__inner { max-width: none; }
	& img { width: 100%; height: auto; aspect-ratio: 1280 / 548; object-fit: cover; }
	&.BildbandHoch img { aspect-ratio: 1280 / 620; }
}
@media (max-width: 767px) {
	main .mod_article.Bildband img { aspect-ratio: 3 / 2; }
}

/* Swiper fügt eigene Pfeil-Grafiken ein — ersetzt durch die Pfeile aus dem Entwurf */
:is(.swiper-button-prev, .swiper-button-next) svg { display: none; }

/* Bildwechsel (Kern-Element „Swiper“, Klasse „Bildwechsel“): Überblenden ohne Pfeile/Punkte
   (Prototyp: 1,5 s stehen, 3 s überblenden) */
.Bildwechsel {
	& :is(.swiper-button-prev, .swiper-button-next, .swiper-pagination) { display: none; }
	& .swiper-slide { overflow: hidden; }
	& .swiper-slide figure { margin: 0; }
}

/* ------------------------------------------------------------------ Dreispalter
   Drei Spalten à 335 px bei x = 61, 486, 904 (Beisetzungsformen): Schmuckschrift-Titel (65),
   Text 20/26, kleine Schaltflächen. */
.Dreispalter {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 7.6%;
	row-gap: 80px;
	align-items: start;
	& > * { margin: 0 !important; }
	& > .content-element-group > * + * { margin-top: 0; }
	& .rte { font-size: var(--schrift_text); line-height: var(--zeilen_text); }
	& .rte > .Schmuck + * { margin-top: 30px; }
	& .content-text + .SchaltflächeKlein { margin-top: 26px !important; }
	& .SchaltflächeKlein + .SchaltflächeKlein { margin-top: 15px !important; }
	@media (max-width: 1023px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	@media (max-width: 599px) { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
}

/* ------------------------------------------------------------------ Farbwechsel (Trauerblumen)
   Swiper „Farbwechsel“: drei Einträge sichtbar (428 px, Abstand 129 px), der mittlere kräftig,
   die äußeren mit 50 % Deckkraft und am Rand angeschnitten; weiße Pfeilkästchen 42 × 42
   (Radius 5) links und rechts neben dem mittleren Eintrag. */
.Farbwechsel {
	position: relative;
	margin-inline: calc(var(--horizontal_spacing) * -1);
	& .swiper { overflow: hidden; }
	& .swiper-slide { width: 428px; max-width: 70vw; text-align: center; opacity: 0.5; transition: opacity 0.4s ease; }
	& .swiper-slide-active { opacity: 1; }
	& .rte { max-width: 242px; margin-inline: auto; }
	& .rte > .SchmuckKlein + * { margin-top: 8px; }
	& .swiper-pagination { display: none; }
	& :is(.swiper-button-prev, .swiper-button-next) {
		top: 51px;
		width: 42px;
		height: 42px;
		margin: 0;
		border-radius: 5px;
		background: var(--color_3) url('../img/pfeil.svg') center / 17px no-repeat;
		&::after { content: none; }
		&.swiper-button-disabled { opacity: 0.4; }
	}
	& .swiper-button-prev { left: calc(50% - 282px); rotate: 180deg; }
	& .swiper-button-next { right: calc(50% - 284px); }
	@media (max-width: 599px) {
		& .swiper-button-prev { left: 8px; }
		& .swiper-button-next { right: 8px; }
	}
}

/* ------------------------------------------------------------------ Musikbibliothek (Deezer)
   Loser Entwurf „Musikbibliothek“: zwei Kästen 531 × 324 (aubergine) mit „Klassik“ und „Modern“.
   Die Musiklisten laden erst nach einem Klick (keine Verbindung zu Deezer vorher). */
.DeezerKästen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8.966%;
	& > * { margin: 0 !important; }
	& .content-hyperlink a {
		display: grid;
		place-items: center;
		aspect-ratio: 531 / 324;
		border-radius: 20px;
		background: var(--color_1);
		color: var(--color_2);
		font-size: var(--font_size);
		text-decoration: none;
		transition: opacity 0.3s ease;
		&:hover { opacity: 0.9; text-decoration: underline; }
	}
	& iframe { width: 100%; border: 0; border-radius: 20px; }
	@media (max-width: 599px) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.Ladehinweis .rte { font-size: var(--schrift_text); line-height: var(--zeilen_text); max-width: 760px; }
.Nachladen-geladen .Ladehinweis { display: none; }

/* ------------------------------------------------------------------ Videogalerie
   Komponente „Video_muster“: „Unsere Videos zum Thema“ (Lexend 25) mittig, darunter Videos
   860 × 484 (mittig, das nächste angeschnitten, Abstand 259 px), unter jedem Video die
   Bedienleiste (weißer Kasten 369 × 98, Ecken 5 px, Symbole aubergine, Schrift 16/20).
   Pfeile: Kreise 33 px bei x = 127 und 1117, senkrecht mittig zum Video. */
.Videogalerie {
	--video: 860px;
	position: relative;
	margin-inline: calc(var(--horizontal_spacing) * -1);
	& .swiper { overflow: hidden; }
	& .swiper-slide { width: var(--video); max-width: 84vw; }
	& video { width: 100%; height: auto; aspect-ratio: 860 / 484; object-fit: cover; background: #000; cursor: pointer; }
	& .content-player figure { margin: 0; }
	& figcaption { display: none; }
	& :is(.swiper-button-prev, .swiper-button-next) {
		top: calc(min(var(--video), 84vw) * 484 / 860 / 2);
		width: 40px;
		height: 40px;
		margin: 0;
		&::after {
			content: ''; width: 33px; height: 33px; font-size: 0;
			background: var(--color_1);
			-webkit-mask: url('../img/pfeil-rund.svg') center / 40px no-repeat;
			mask: url('../img/pfeil-rund.svg') center / 40px no-repeat;
		}
		&.swiper-button-disabled { opacity: 0; }
	}
	& .swiper-button-prev { left: max(4px, calc(50% - var(--video) / 2 - 85px)); &::after { rotate: 180deg; } }
	& .swiper-button-next { right: max(4px, calc(50% - var(--video) / 2 - 85px)); }
	& .swiper-pagination { display: none; }
}
.Bedienleiste {
	display: flex;
	justify-content: space-between;
	width: 369px;
	max-width: 100%;
	margin: 12px auto 0;
	padding: 20px 30px;
	border-radius: 5px;
	background: var(--color_3);
	& button {
		display: grid;
		justify-items: center;
		gap: 4px;
		width: 60px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color_1);
		font: 400 16px/20px var(--font_family);
		cursor: pointer;
		&.blass { opacity: 0.5; }
		&:hover { opacity: 1; }
	}
	& .Symbol { width: 34px; height: 34px; background: currentColor; -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat; }
	& .abspielen { --symbol: url('../img/video-play.svg'); }
	& .stoppen { --symbol: url('../img/video-stop.svg'); }
	& .tonAn { --symbol: url('../img/ton-an.svg'); }
	& .tonAus { --symbol: url('../img/ton-aus.svg'); }
}
@media (max-width: 599px) {
	.Bedienleiste { padding: 14px 12px; gap: 4px; & button { width: auto; font-size: 14px; } & .Symbol { width: 26px; height: 26px; } }
}
/* Abschnitt mit Videogalerie: Titel → Video 42 px (Entwurf 158 + 33 → 233) */
.Videoabschnitt .content-text .rte { text-align: center; }
.Videoabschnitt .content-text + .Videogalerie { margin-top: 42px; }
.Videoabschnitt .Videogalerie + .content-text { margin-top: 0; }

/* Schmuckschrift-Titel nie mitten im Wort trennen (Entwurf: „Baumbestattung“ füllt die 335-px-Spalte ganz) */
:is(.Schmuck, .SchmuckKlein, .SchmuckGroß) { overflow-wrap: normal; hyphens: manual; }

/* Rollkasten: Verlauf am unteren Rand zeigt weiteren Inhalt an (klebt am Kastenboden, verschwindet am Ende —
   Klasse „amEnde“ setzt script.js). Vorgabe Auftraggeber 13.11.2026 für alle Rollkästen. */
.Rollkasten .rte::after {
	content: '';
	position: sticky;
	bottom: -28px;
	display: block;
	height: 110px;
	margin: -110px -28px -28px;
	background: linear-gradient(rgb(231 223 230 / 0), var(--color_2) 85%);
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.KastenWeiß.Rollkasten .rte::after { background: linear-gradient(rgb(255 255 255 / 0), var(--color_3) 85%); }
.Rollkasten.amEnde .rte::after { opacity: 0; }

/* Nachgeladene Inhalte: ausgeblendete Hinweise wirklich ausblenden (eigene display-Regeln schlagen [hidden]) */
.Hinweis[hidden] { display: none !important; }
.Nachgeladen { margin-top: 42px; }

/* Nach oben: Pfeilkästchen wie im Entwurf (weiß, 42 × 42, Ecken 5, Pfeil 17 px aubergine), unten rechts */
.NachOben {
	position: fixed;
	right: max(16px, calc((100vw - 1280px) / 2 + 20px));
	bottom: 24px;
	z-index: 25;
	width: 42px;
	height: 42px;
	border-radius: 5px;
	background: var(--color_3) url('../img/pfeil.svg') center / 17px no-repeat;
	box-shadow: 0 0 0 2px var(--color_1);
	rotate: -90deg;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s, background-size 0.3s ease;
	&.sichtbar { opacity: 1; visibility: visible; transition: opacity 0.3s ease, background-size 0.3s ease; }
	&:hover, &:focus-visible { background-size: 21px; }
}
body.navigation-open .NachOben { visibility: hidden; }