/* ==========================================================================
   Herz Bestattungen — 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 „HERZ_design“ bei 1280 px.
   Hintergründe kommen aus dem Lesbaren CSS-Framework: Hintergrund1 = Beere,
   Hintergrund2 = Flieder hell (Seitengrund), Hintergrund3 = Pink.
   ========================================================================== */

/* ------------------------------------------------------------------ Abschnitte (Artikel) */
main .mod_article {
	position: relative;
	padding: var(--vertical_spacing) var(--horizontal_spacing);
}
main .mod_article__inner {
	max-width: var(--content_width);
	margin-inline: auto;
	& > * { margin-top: 0; margin-bottom: 0; }
	& > * + * { margin-top: var(--block_abstand); }
}
/* Dunkle Flächen: Schrift weiß */
main :is(.Hintergrund1, .Hintergrund3) { color: var(--color_4); }
/* Abschnitte ohne Abstand oben bzw. unten (z. B. direkt nach einem Bildband) */
main .mod_article.ohneAbstandOben { padding-top: 0; }
main .mod_article.ohneAbstandUnten { padding-bottom: 0; }
/* Abstand nach einem Bildband: Text beginnt ~48 px unter dem Bild (Entwurf 37–73 px) */
main .mod_article.nachBildband { padding-top: 60px; }

/* Spalten im Abschnitt (Inhaltsbreite 1160 px bei x = 60):
   SpalteMitte 950 px mittig (x = 165), SpalteLinks 739 px (x = 60), SpalteRechts 739 px (x = 376) */
.SpalteMitte { max-width: var(--spalte_mitte); margin-inline: auto; }
.SpalteLinks { max-width: var(--spalte_text); }
.SpalteRechts { max-width: var(--spalte_text); margin-left: 27.24%; }
@media (max-width: 1023px) { .SpalteRechts { margin-left: 0; } }

/* ------------------------------------------------------------------ Textrhythmus
   Abstände aus dem Entwurf (sichtbare Lücken zwischen den Textfeldern):
   Titel (80) → Text 46 px · Text → Zwischentitel (35) 30 px · Zwischentitel → Text 11 px ·
   Schmuckschrift-Zeile (55) → Text 12 px · Text → Schaltfläche 20 px */
main .rte {
	& > * + * { margin-top: calc(var(--line_height) * 1em); }
	& > :is(h1, h2) + * { margin-top: 46px; }
	& > * + :is(h3, h4) { margin-top: 30px; }
	& > :is(h3, h4) + * { margin-top: 11px; }
	& > .Schmuck + * { margin-top: 12px; }
	& > * + .Schmuck { margin-top: 30px; }
	& ul {
		padding-left: 1.15em;
		list-style: disc;
		& li + li { margin-top: 0; }
	}
}
@media (max-width: 767px) {
	main .rte > :is(h1, h2) + * { margin-top: 24px; }
}
main :is(.content-text, .content-headline) + :is(.content-hyperlink, .Schaltfläche) { margin-top: 20px !important; }
main :is(.content-hyperlink) + :is(.content-hyperlink) { margin-top: 10px !important; }
main .content-text + .content-text { margin-top: 30px; }

/* ------------------------------------------------------------------ Bildkopf
   Artikel „Bildkopf“: Bild bzw. Bildwechsel über die volle Breite (1280 × 832),
   Seitentitel unten links: erste Zeile Roboto Flex 600 35/41 (x = 60, y = 637),
   zweite Zeile Smithen 130/122 (x = 71, y = 685). Höhe höchstens Bildschirmhöhe. */
main .mod_article.Bildkopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: clamp(420px, min(65vw, 100svh), 1100px);
	padding: 0;
	isolation: isolate;
	& .mod_article__inner { display: contents; }
	& .mod_article__inner > * {
		grid-area: 1 / 1;
		width: 100%;
		max-width: none;
		margin: 0;
	}
	& .content-image, & .content-image figure, & .content-swiper, & .swiper, & .swiper-wrapper, & .swiper-slide,
	& .swiper-slide figure, & .swiper-slide .content-image { height: 100%; }
	& img { width: 100%; height: 100%; object-fit: cover; }
	& .content-text {
		align-self: end;
		z-index: 2;
		padding: 0 max(var(--horizontal_spacing), (100% - var(--content_width)) / 2) 25px;
	}
	/* Titel: „Mit ♥ begleiten,“ / „was das Herz bewegt“ */
	& h1 {
		display: grid;
		justify-items: start;
		row-gap: 7px;
		font-size: var(--schrift_zwischentitel);
		line-height: 1.1714;
		& .Schmuck {
			margin-left: 0.085em;
			font-size: var(--schrift_schmuck_gross);
			line-height: 0.9385;
		}
	}
	&.TitelWeiß h1 { color: var(--color_4); }
	& .Herz { vertical-align: -0.62em; }
	&.TitelWeiß .Herz { background-image: url('../img/herz.svg'); }
}
/* Unterkante: Entwurf 832 − 807 = 25 px unter der Schmuckzeile */
main .mod_article.Bildkopf .content-text { padding-bottom: 25px; }
@media (max-width: 1023px) {
	main .mod_article.Bildkopf { grid-template-rows: clamp(320px, 78vw, 640px); }
}
/* Handy: Titel unter dem Bild (auf dem kleinen Foto würde er die Hälfte verdecken und wäre
   v. a. in Beere schlecht lesbar) — Schrift dann immer Beere auf hellem Grund */
@media (max-width: 767px) {
	main .mod_article.Bildkopf {
		grid-template-rows: clamp(260px, 75vw, 420px) auto;
		& .mod_article__inner > .content-text {
			grid-area: 2 / 1;
			padding: 24px var(--horizontal_spacing) 8px;
			color: var(--color_1);
		}
		&.TitelWeiß h1 { color: var(--color_1); }
		& h1 .Schmuck { font-size: clamp(52px, 15vw, 72px); }
	}
}

/* ------------------------------------------------------------------ Ankerleiste
   Leiste unter dem Bildkopf (126 px hoch): Schaltflächen „white, arrow=down“ zu den
   Abschnitten der Seite, Abstand 30 px. Grund: Flieder hell (Standard) oder Pink (Über Herz). */
main .mod_article.Ankerleiste {
	padding-block: 41px;
	& .mod_article__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 25px;
		row-gap: 14px;
		padding-left: 7px;
		& > * + * { margin-top: 0; }
	}
}
@media (max-width: 767px) {
	main .mod_article.Ankerleiste { padding-block: 28px; & .mod_article__inner { column-gap: 14px; padding-left: 0; } }
}

/* ------------------------------------------------------------------ Bild und Text
   Elementgruppe „BildUndText“ mit Bild (rund) und Textgruppe; beide senkrecht mittig.
   RundbildRechts: Text 739 px links, Bild 328 px rechts (x = 860)
   RundbildLinks:  Bild 328 px bei x = 72, Text bei x = 482
   RundbildGroßRechts: Text 528 px links, Bild 573 px rechts (x = 650) */
.BildUndText {
	display: grid;
	align-items: center;
	& > * { margin: 0 !important; }
	& > .content-element-group > * + * { margin-top: 0; }
	&.RundbildRechts { grid-template-columns: minmax(0, 739fr) minmax(0, 59fr) minmax(0, 328fr) minmax(0, 34fr); grid-template-areas: "text . bild ."; }
	&.RundbildLinks { grid-template-columns: minmax(0, 12fr) minmax(0, 328fr) minmax(0, 82fr) minmax(0, 738fr); grid-template-areas: ". bild . text"; }
	&.RundbildGroßRechts { grid-template-columns: minmax(0, 528fr) minmax(0, 62fr) minmax(0, 573fr); grid-template-areas: "text . bild"; }
	&.RundbildGroßLinks { grid-template-columns: minmax(0, 573fr) minmax(0, 62fr) minmax(0, 528fr); grid-template-areas: "bild . text"; }
	& > .content-image { grid-area: bild; }
	& > :not(.content-image) { grid-area: text; }
}
.BildUndText > .content-element-group > :is(.content-text, .content-headline, .content-hyperlink) + * { margin-top: 20px; }
@media (max-width: 899px) {
	.BildUndText {
		&.RundbildRechts, &.RundbildLinks, &.RundbildGroßRechts, &.RundbildGroßLinks {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "bild" "text";
			row-gap: 36px;
		}
		& > .content-image { max-width: min(380px, 80vw); }
	}
}

/* ------------------------------------------------------------------ Pinselkonturen
   Der Entwurf zeichnet Rundbilder, Teamfotos und Rahmen mit dem Figma-Pinsel „Slasher“. Die Konturen
   stammen 1:1 aus dem Datei-JSON (strokeGeometry) und liegen als SVG in img/pinsel/ (erzeugt mit
   tools/py/pinsel_svg.py). Lage der Kontur relativ zum Bild/Rahmen ebenfalls aus dem Skript. */

/* Rundbild: Stadion-Form wie im Entwurf (Radius = halbe kurze Seite), darüber die Pinselkontur in
   Flieder (auf hellem Grund frisst sie den Bildrand aus, auf Beere ist sie als Ring sichtbar).
   Größen: „Rundbild“ 328 × 319, „Rundbild mittel“ 472 × 458 (+ Klasse RundbildMittel),
   „Rundbild groß“ 573 × 557 (+ Klasse RundbildGroß). */
.Rundbild {
	--ring-farbe: var(--color_2);
	--pinsel: url('../img/pinsel/rundbild.svg');
	--pinsel-lage: -3.072% auto auto -3.323%;   /* top right bottom left; Breite/Höhe darunter */
	& figure { position: relative; isolation: isolate; }
	& img { display: block; width: 100%; height: auto; border-radius: 9999px; }
	& figure::after {
		content: '';
		position: absolute;
		inset: var(--pinsel-lage);
		width: var(--pinsel-breite, 104.939%);
		height: var(--pinsel-hoehe, 105.517%);
		background: var(--ring-farbe);
		-webkit-mask: var(--pinsel) 0 0 / 100% 100% no-repeat;
		mask: var(--pinsel) 0 0 / 100% 100% no-repeat;
		pointer-events: none;
	}
	&.RundbildMittel {
		--pinsel: url('../img/pinsel/rundbild-mittel.svg');
		--pinsel-lage: -2.116% auto auto -2.310%;
		--pinsel-breite: 103.434%;
		--pinsel-hoehe: 103.817%;
	}
	&.RundbildGroß {
		--pinsel: url('../img/pinsel/rundbild-gross.svg');
		--pinsel-lage: -2.101% auto auto -2.287%;
		--pinsel-breite: 103.386%;
		--pinsel-hoehe: 103.781%;
	}
}

/* Pinselrahmen (Dokumente, Szenario: Beere 16 px · Rollkasten: Flieder 18 px). Das Element selbst ist
   die Mittellinie der Kontur wie im Entwurf; die Kontur liegt als border-image auf ::before, damit die
   Ecken bei jeder Höhe ihre Form behalten (nur die geraden Stücke werden gedehnt). */
:is(.Rahmenkasten, .SzenarioRahmen, .Rollkasten) {
	position: relative;
	&::before {
		content: '';
		position: absolute;
		inset: var(--pinsel-lage);
		border: 60px solid transparent;
		border-image: var(--pinsel) 60 / 60px stretch;
		pointer-events: none;
		z-index: 1;
	}
}
.Rahmenkasten, .SzenarioRahmen {
	--pinsel: url('../img/pinsel/rahmen-beere.svg');
	--pinsel-lage: -5.4px -8.5px -6px -4.9px;
}
.Rollkasten {
	--pinsel: url('../img/pinsel/rahmen-flieder.svg');
	--pinsel-lage: -9.1px -9.5px -6.7px -4.5px;
}
@media (max-width: 599px) {
	:is(.Rahmenkasten, .SzenarioRahmen, .Rollkasten)::before { border-width: 40px; border-image-width: 40px; }
}

/* Spaltenpaar: zwei Textspalten à 528 px (x = 62 und 693). („zweispaltig“ ist im Framework der Mehrspaltensatz.) */
.Spaltenpaar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 8.9%;
	row-gap: 40px;
	& > * { margin: 0 !important; }
	@media (max-width: 767px) { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ Bildband
   Artikel „Bildband“: Foto bzw. Bildwechsel über die volle Breite (1280 × 832 bzw. 809).
   Ein Text mit Klasse „TitelAufBild“ liegt unten links auf dem Bild (x = 165, Unterkante
   der letzten Zeile ~55 px über dem Bildrand), weiß. */
main .mod_article.Bildband {
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	& .mod_article__inner { display: contents; }
	& .mod_article__inner > * { grid-area: 1 / 1; margin: 0; max-width: none; }
	& :is(.content-image, .content-swiper) { width: 100%; }
	& img { width: 100%; height: auto; aspect-ratio: 1280 / 832; object-fit: cover; }
	&.Bildbandflach img { aspect-ratio: 1280 / 809; }
	& .TitelAufBild {
		align-self: end;
		z-index: 2;
		width: 100%;
		max-width: calc(var(--spalte_mitte) + 2 * var(--horizontal_spacing));
		margin-inline: auto;
		padding: 0 var(--horizontal_spacing) clamp(20px, 4.3vw, 55px);
		color: var(--color_4);
		pointer-events: none;
		& a { pointer-events: auto; }
	}
	& .TitelAufBild.TitelBeere { color: var(--color_1); }
}
/* Weiterer Text auf dem Bild oben links (z. B. „Kostenlose und unverbindliche Beratung“, x = 60, y = +128) */
main .mod_article.Bildband .TextAufBildOben {
	align-self: start;
	z-index: 2;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding: clamp(24px, 10vw, 128px) var(--horizontal_spacing) 0;
	color: var(--color_4);
	& .rte { max-width: 415px; }
}
@media (max-width: 767px) {
	main .mod_article.Bildband img { aspect-ratio: 4 / 3; }
	main .mod_article.Bildband:has(.TextAufBildOben) {
		& .mod_article__inner > .TextAufBildOben { grid-area: auto; order: 2; padding: 32px var(--horizontal_spacing) 0; color: var(--color_1); background: var(--color_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 */
.Bildwechsel {
	& :is(.swiper-button-prev, .swiper-button-next, .swiper-pagination) { display: none; }
	& .swiper-slide { overflow: hidden; }
	& .swiper-slide figure { margin: 0; }
}

/* ------------------------------------------------------------------ Teamreihe
   Slider mit den Mitarbeitenden auf Beere: Karte 415 px (Foto 346 × 448 mit 30-px-Kontur
   in Beere, Name Smithen 55, Text 16/19, alles mittig), Abstand 128 px, Nachbarn angeschnitten.
   Pfeile: Kreise in Flieder (33 px) links und rechts der mittleren Karte. */
.Teamreihe {
	--karte: 415px;
	position: relative;
	margin-inline: calc(var(--horizontal_spacing) * -1);
	& .swiper { overflow: hidden; padding-bottom: 4px; }
	& .swiper-slide { width: var(--karte); max-width: 82vw; text-align: center; }
	& .content-image { max-width: 346px; margin-inline: auto; }
	& .content-image figure { position: relative; }
	& .content-image img { display: block; }
	/* Pinselkontur 30 px in Beere aus dem Entwurf (img/pinsel/teamfoto.svg, Lage aus tools/py/pinsel_svg.py) */
	& .content-image figure::after {
		content: ''; position: absolute; left: -2.225%; top: -2.165%; width: 106.705%; height: 104.576%;
		background: var(--color_1);
		-webkit-mask: url('../img/pinsel/teamfoto.svg') 0 0 / 100% 100% no-repeat;
		mask: url('../img/pinsel/teamfoto.svg') 0 0 / 100% 100% no-repeat;
		pointer-events: none;
	}
	& .content-text { margin-top: 0; }
	& .content-image + .content-text { margin-top: -72px; position: relative; z-index: 1; }
	& h3 { font-family: var(--font_schmuck); font-size: var(--schrift_schmuck); font-weight: 400; line-height: 0.945; }
	& .rte { font-size: var(--schrift_klein); line-height: 1.1875; }
	& .rte > h3 + * { margin-top: 60px; }   /* Entwurf: Name bei Foto + 376, Text bei Foto + 488 */
	& .rte > p + p { margin-top: 19px; }
	& .rte p { max-width: 357px; margin-inline: auto; }
	& :is(.swiper-button-prev, .swiper-button-next) {
		top: 237px;
		width: 33px;
		height: 33px;
		margin: 0;
		border-radius: 50%;
		background: var(--color_2);
		color: var(--color_1);
		&::after {
			content: '';
			width: 21px;
			height: 21px;
			background: currentColor;
			-webkit-mask: url('../img/pfeil.svg') center / contain no-repeat;
			mask: url('../img/pfeil.svg') center / contain no-repeat;
			font-size: 0;
		}
		&:hover { background: var(--color_4); }
	}
	/* Pfeile an der mittleren Karte: x = 391 und 852 im Entwurf (Kartenrand ± 39 px) */
	& .swiper-button-prev { left: calc(50% - var(--karte) / 2 - 39px); &::after { rotate: 180deg; } }
	& .swiper-button-next { right: calc(50% - var(--karte) / 2 - 40px); }
	& .swiper-pagination { display: none; }
}
@media (max-width: 599px) {
	.Teamreihe {
		--karte: 82vw;
		& .swiper-button-prev { left: 8px; }
		& .swiper-button-next { right: 8px; }
		& :is(.swiper-button-prev, .swiper-button-next) { top: 40vw; }
	}
}

/* ------------------------------------------------------------------ Videogalerie
   Komponente „Video_muster“: Titel in Schmuckschrift mittig, darunter Videos 860 × 484
   (mittig, das nächste angeschnitten), unter jedem Video die Bedienleiste (weißer Kasten
   369 × 98, Ecken 5 px, Symbole in #521149, 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;
		color: var(--video, #521149);
		&::after {
			content: ''; width: 33px; height: 33px; font-size: 0;
			background: #521149;
			-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_4);
	& button {
		display: grid;
		justify-items: center;
		gap: 4px;
		width: 60px;
		padding: 0;
		border: 0;
		background: none;
		color: #521149;
		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 23 px (Entwurf 3180 + 52 → 3255) */
.Videoabschnitt .rte { text-align: center; }
.Videoabschnitt .content-text + .Videogalerie { margin-top: 23px; }

/* ------------------------------------------------------------------ Kästen
   Rahmenkasten („framebrush“ 801 × 1165 bei x = 227): Pinselkontur 16 px in Beere (siehe Pinselrahmen),
   Text 149 px vom linken und 107 px vom oberen Rand der Konturmitte, letzte Textzeile 121 px über dem unteren
   (Unterkante „Versicherungspolicen“ 3014 → Rahmen 3135). */
.Rahmenkasten {
	max-width: 801px;
	margin-left: max(0px, calc(50% - 413px));   /* Entwurf: x = 227 … 1028 (12,5 px links der Mitte) */
	padding: 107px 68px 121px 149px;
	& > * { margin: 0; }
	& > * + * { margin-top: 23px; }
	/* Aufzählungen: Punkt innerhalb der Textkante (Entwurf: Text bei x = 376 inkl. Punkt) */
	& .rte ul { padding-left: 0; list-style-position: inside; }
	/* „Dokumente / im Trauerfall“: zweite Zeile 61 px (Textfeld 146 hoch: 85 + 61), Liste 23 px darunter */
	& .rte > h2 .Schmuck { display: block; line-height: 61px; }
	& .rte > h2 + ul { margin-top: 23px; }
	& .rte > .Schmuck + ul { margin-top: 0; }
	/* Liste → Schmuckzeile: im Entwurf 31,6 / 33,2 / 33,2 / 37,4 / 37,4 px (Textfelder teils mit leerer
	   Zeile) — einheitlich 34 px, so liegt jede Schmuckzeile höchstens 4 px neben dem Entwurf */
	& .rte > ul + .Schmuck { margin-top: 34px; }
	@media (max-width: 767px) { margin-left: 0; padding: 48px 30px 48px 34px; }
}
/* Rollkasten (Friedhöfe, Bücher): Pinselkontur 18 px in Flieder, Konturmitte 970 × 460, innen rollbar;
   Text 40 px vom Rand der Konturmitte; dreispaltiges Raster (290 px, Abstand 25 px, Zeilenabstand 80 px). */
.Rollkasten {
	max-width: 970px;
	margin-inline: auto;
	& > .content-element-group, & > .Rollinhalt {
		max-height: 460px;
		overflow-y: auto;
		padding: 40px 40px 48px;
		scrollbar-width: thin;
		scrollbar-color: var(--color_2) transparent;
	}
	& .Raster3 { display: grid; grid-template-columns: repeat(3, minmax(0, 290px)); column-gap: 25px; row-gap: 80px; & > * { margin: 0 !important; } }
	@media (max-width: 899px) { & .Raster3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
	@media (max-width: 599px) { & .Raster3 { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } & > :is(.content-element-group, .Rollinhalt) { max-height: 60svh; padding: 28px 24px 40px; } }
	& h3 { font-size: var(--schrift_zwischentitel); }
	& .Schmuck, & h3.Schmuck { font-family: var(--font_schmuck); font-size: var(--schrift_schmuck); font-weight: 400; line-height: 0.945; }
	& .rte > * + * { margin-top: 15px; }
}
/* Hinweis auf den rollbaren Inhalt: Verlauf am unteren Rand */
.Rollkasten::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 40px;
	background: linear-gradient(transparent, var(--rollgrund, var(--color_1)));
	pointer-events: none;
}

/* ------------------------------------------------------------------ Partner (Kooperationen)
   Zwei Spalten: links Schaltflächen weiß (x = 165), rechts Floristen in Beere (x = 663). */
.Partnerliste {
	display: grid;
	grid-template-columns: minmax(0, 418px) minmax(0, 565px);
	column-gap: 80px;
	& > * { margin: 0 !important; }
	& > .content-element-group > * + * { margin-top: 10px; }
	& .Etikett + .content-text { margin-top: 6px !important; }
	& .content-text:not(.Etikett) + .content-hyperlink { margin-top: 15px !important; }
	@media (max-width: 899px) { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}

/* ------------------------------------------------------------------ Startseite
   Teaser „Wir sorgen für Ruhe und Klarheit.“: Rundbild 573 × 557 bei x = 352, Titel rechts
   darüber (x = 693, y = Bild + 367), Schaltfläche darunter rechtsbündig (x = 921). */
.StartTeaser {
	display: grid;
	grid-template-columns: minmax(0, 292fr) minmax(0, 341fr) minmax(0, 232fr) minmax(0, 295fr);
	grid-template-rows: auto auto;
	align-items: start;
	& > * { margin: 0 !important; }
	& > .content-image { grid-column: 2 / 4; grid-row: 1 / 3; z-index: 0; }
	& > .content-text { grid-column: 3 / 5; grid-row: 1; margin-top: min(367px, 28.67vw) !important; margin-right: max(-89px, -6.95vw) !important; z-index: 1; }
	& > .content-hyperlink { grid-column: 3 / 5; grid-row: 2; justify-self: end; margin-top: 0 !important; margin-right: 7px; z-index: 1; }
	&.TeaserLinks {
		grid-template-columns: minmax(0, 21fr) minmax(0, 472fr) minmax(0, 80fr) minmax(0, 587fr);
		& > .content-image { grid-column: 2; grid-row: 1 / 3; }
		/* Textfeld 587 px wie im Entwurf (x = 636 … 1223) — ohne den Überhang nach rechts der rechten Variante;
		   so bricht „Ein Geschenk der Liebe: Halt / und Orientierung.“ wie im Entwurf um */
		& > .content-text { grid-column: 4; margin-top: min(52px, 4vw) !important; margin-right: 0 !important; }
		& > .content-hyperlink { grid-column: 4; justify-self: end; margin-right: 15px; }
	}
	@media (max-width: 899px) {
		&, &.TeaserLinks { grid-template-columns: minmax(0, 1fr); }
		& > .content-image, &.TeaserLinks > .content-image { grid-column: 1; grid-row: 1; max-width: min(420px, 86vw); justify-self: center; }
		& > .content-text, &.TeaserLinks > .content-text { grid-column: 1; grid-row: 2; margin-top: 32px !important; margin-right: 0 !important; }
		& > .content-hyperlink, &.TeaserLinks > .content-hyperlink { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 20px !important; }
	}
}
/* Bildband-Teaser auf der Startseite („Ein letzter Moment …“): Titel links, x = 66, oben mittig */
main .mod_article.Bildband .TeaserAufBild {
	align-self: start;
	padding-top: min(137px, 10.7vw) !important;
	z-index: 2;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding: 0 var(--horizontal_spacing) 0 66px;
	color: var(--color_4);
	& .rte { max-width: 560px; }
	& .rte > :is(h2) + * { margin-top: 42px; }
	@media (max-width: 767px) { padding: 0 var(--horizontal_spacing); }
}

/* Startseite: Abstände laut Entwurf (Bildkopf 832 → Einleitung 896; Einleitung → Rundbild 44;
   Schaltfläche → Bildband 51; Bildband → Rundbild 94; Rundbild → Videotitel 132; Bedienleiste → Fußzeile 60) */
main .mod_article.StartEinleitung { padding-top: 64px; padding-bottom: 51px; & .mod_article__inner > * + * { margin-top: 44px; } }
main .mod_article.StartVorsorge { padding-top: 94px; padding-bottom: 0; }
body.SeiteStart main .mod_article.Videoabschnitt { padding-top: 132px; padding-bottom: 60px; }
/* Hauptseiten: Videotitel 219 px unter dem vorigen Abschnitt, Bedienleiste → Fußzeile 140 px */
main .mod_article.Videoabschnitt { padding-top: 219px; padding-bottom: 140px; }
@media (max-width: 1023px) { main .mod_article.Videoabschnitt { padding-top: 90px; padding-bottom: 72px; } }
@media (max-width: 1023px) {
	main .mod_article.StartEinleitung { padding-top: 48px; }
	main .mod_article.StartVorsorge { padding-top: 64px; }
	body.SeiteStart main .mod_article.Videoabschnitt { padding-top: 80px; }
}
main .Ankerleiste .content-hyperlink { margin-top: 0 !important; }
/* Erster Abschnitt nach der Ankerleiste: Titel 68 px unter der Leiste (Entwurf HM2/HM4/HM5) */
main .mod_article.Ankerleiste + .mod_article { padding-top: 68px; }

/* ------------------------------------------------------------------ Seiten ohne Bildkopf
   (Im Film erklärt, Kontakt, Rechtstexte): Kopfzeile im Fluss (156 px), Inhalt darunter. */
main .mod_article.SeiteOhneBildkopf { padding-top: 40px; }
main .mod_article.VideoEinleitung { padding-bottom: 0; text-align: center; }

/* Im Film erklärt: Kategorie (Roboto Flex 80, mittig) → Schmucktitel 37 px → Videos 23 px;
   Abstand der Kategorien wie im Entwurf (Komponenten im Raster von 966 px) */
main .mod_article.Videokategorie {
	padding-top: 80px;
	padding-bottom: 0;
	& .rte > h2 + .Schmuck { margin-top: 37px; }
	&:last-child { padding-bottom: 60px; }
}

/* Rechtstexte: Überschriften kleiner als die Abschnittstitel der Inhaltsseiten */
.Rechtstext {
	& h1 { margin-bottom: 46px; }
	& .rte h2 { font-size: var(--schrift_zwischentitel); line-height: 1.1714; }
	& .rte h3 { font-size: var(--font_size); line-height: var(--line_height); font-weight: 700; }
	& .rte > * + h2 { margin-top: 46px; }
	& .rte > * + h3 { margin-top: 30px; }
	& .rte a { overflow-wrap: anywhere; }
	& .mod_article__inner > * + * { margin-top: 30px; }
	& .mod_article__inner > .content-text:first-child + * { margin-top: 0; }
}

/* Kontakt */
.AbschnittKontakt {
	& .mod_article__inner > * + * { margin-top: 46px; }
	& .KontaktStandorte .rte p + p { margin-top: 12px; }
	& .Standort { position: relative; padding-left: 34px; line-height: 31px; }
	& .Standort::before {
		content: ''; position: absolute; left: 0; top: 5px; 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;
	}
	& .KontaktEmail a {
		display: inline-flex; align-items: center; gap: 14px;
		&::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; }
	}
	& .Kontaktformular { max-width: 739px; margin-right: auto; }
}
.Kontaktformular {
	& .widget-explanation p { font-size: var(--schrift_klein); line-height: 1.1875; }
	& .widget-checkbox fieldset { margin: 0; padding: 0; border: 0; }
	& .submit_container { margin-top: 24px; }
}

/* ------------------------------------------------------------------ Schmuckkreis
   Pinselkreis in Beere hinter einem Text auf dem Bildband („HERZ_kreis-02“ im Entwurf):
   Klasse „mitKreis“ am Text. Größe und Lage über --kreis, --kreis-x, --kreis-y (relativ zum
   oberen Kante des Elements; bei TextAufBildOben = Bildoberkante). Vorgabe = Ihre Vorsorge:
   Kreis 634 px bei x = −79 (139 px links der Inhaltskante), 62 px über die Bildkante ragend. */
.mitKreis {
	--kreis: 634px;
	--kreis-x: -139px;
	--kreis-y: -62px;
	position: relative;
	isolation: isolate;
	&::before {
		content: '';
		position: absolute;
		z-index: -1;
		left: calc(max(var(--horizontal_spacing), (100% - 1160px) / 2) + var(--kreis-x));
		top: var(--kreis-y);
		width: var(--kreis);
		height: var(--kreis);
		background: url('../img/kreis.svg') center / contain no-repeat;
		pointer-events: none;
	}
}
@media (max-width: 767px) {
	.mitKreis::before { content: none; }
}

/* -------------------------------------------------------------------- Nach oben (13.11.2026)
   Kreis in Beere mit dem Pfeil der Schaltflächen (nach oben gedreht); beim Überfahren schwarz
   mit beerenfarbener Kontur, der Pfeil wächst wie bei den Schaltflächen. Unter der Menü-Ebene
   (z-index 35/40), eingeblendet von script.js. */
.NachOben {
	--gr: 48px;
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 25;
	width: var(--gr);
	height: var(--gr);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color_1);
	box-shadow: 0 0 0 2.5px var(--color_4), 0 4px 14px rgb(0 0 0 / 0.18);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	translate: 0 12px;
	transition: opacity 0.3s ease, translate 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, visibility 0s linear 0.3s;
	&::before {
		content: '';
		position: absolute;
		inset: 0;
		margin: auto;
		width: 26px;
		height: 26px;
		background: var(--color_4);
		rotate: -90deg;
		-webkit-mask: url('../img/pfeil.svg') center / contain no-repeat;
		mask: url('../img/pfeil.svg') center / contain no-repeat;
		transition: width 0.3s ease, height 0.3s ease;
	}
	&.Sichtbar { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.3s ease, translate 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; }
	&:hover, &:focus-visible {
		background: var(--schwarz);
		box-shadow: 0 0 0 2.5px var(--color_1), 0 4px 14px rgb(0 0 0 / 0.18);
		&::before { width: 31px; height: 31px; }
	}
	&:focus-visible { outline: 3px solid var(--color_3); outline-offset: 3px; }
	body.navigation-open & { opacity: 0; visibility: hidden; }
	@media (prefers-reduced-motion: reduce) { transition: none; translate: none; &.Sichtbar { transition: none; } }
	@media print { display: none; }
}
/* „Nach oben“ setzt den Fokus auf den Seitenanfang, ohne Rahmen um die ganze Seite */
body:focus { outline: none; }