/* ==========================================================================
   Herz Bestattungen — seitenspezifische Abstände und Sonderfälle
   Je Hauptseite ein Abschnitt; Klassen mit Seitenpräfix. Maße aus den Figma-Rahmen (1280 px).
   ========================================================================== */

/* ==================================================================== ueber-herz
   Maße aus Figma-Rahmen „HM1“ (1280 px). */

/* ------------------------------------------------ 1.1 Was uns bewegt (Pink)
   Einleitung Smithen 55 bei x = 71, y = 1032 (74 px unter der Ankerleiste), 816 px breit.
   Darunter Porträt (392 × 588, x = −16, unten bündig mit der Fläche) und Text ab x = 376. */
main .mod_article.UeberHerzBewegt {
	padding-top: 74px;
	padding-bottom: 0;
	& .mod_article__inner > * + * { margin-top: 41px; }
}
.UeberHerzEinleitung { max-width: 816px; margin-left: 11px !important; }
.UeberHerzUeberzeugung {
	display: grid;
	grid-template-columns: 316px minmax(0, 739px);
	align-items: end;
	min-height: 633px;           /* Titel y = 1280 → Unterkante der pinken Fläche y = 1913 */
	& > * { margin: 0 !important; }
	& .UeberHerzPorträt {
		position: relative;
		z-index: 5;              /* über dem Schmuckkreis des folgenden Bildes (Textgruppe dort z-index 4) */
		width: 392px;
		margin-left: -76px !important;
		& img { width: 392px; height: auto; }
	}
	& .UeberHerzUeberzeugungText {
		align-self: start;
		padding-bottom: 26px;
		& .rte > h2 + * { margin-top: 57px; }
	}
}
@media (max-width: 899px) {
	main .mod_article.UeberHerzBewegt { padding-top: 48px; }
	.UeberHerzEinleitung { margin-left: 0 !important; }
	.UeberHerzUeberzeugung {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		& .UeberHerzUeberzeugungText { order: 1; padding-bottom: 32px; }
		& .UeberHerzPorträt { order: 2; width: min(300px, 70vw); margin: 0 auto !important; & img { width: 100%; } }
	}
}

/* ------------------------------------------------ Bild „Das Logo“ mit Schmuckkreis
   Bild 1280 × 897 (Bildgröße „Bildband hoch“). Kreis über den gemeinsamen Baustein „mitKreis“
   (bausteine.css) an der Textgruppe: 940 × 940 bei x = −327 (387 px links der Inhaltskante),
   143 px über der Bildkante (ragt in die pinke Fläche). Texte 415 px breit bei x = 60,
   y = Bild + 32 und + 321; Fließtext 16/19. */
main .mod_article.Bildband.UeberHerzLogo {
	& img { aspect-ratio: 1280 / 897; }
	& .UeberHerzLogoText {
		--kreis: 940px;
		--kreis-x: -387px;
		--kreis-y: -143px;
		align-self: start;
		z-index: 4;
		width: 100%;
		padding: 32px max(var(--horizontal_spacing), (100% - var(--content_width)) / 2) 0;
		color: var(--color_4);
		& > * { max-width: 415px; margin: 0; }
		& > * + * { margin-top: 53px; }   /* Entwurf: zweiter Block bei Bild + 321 */
		& .rte { font-size: var(--schrift_klein); line-height: 1.1875; }
		& .rte > h2 + * { margin-top: 23px; }
		/* „Das Logo.“ (35/41) über „Ein Bild unseres Tuns.“ (Smithen 55/52): Textfeld 104 px */
		& h2:has(.Klein) { line-height: 0; & > span { display: block; } & .Klein { line-height: 1.1714; padding-bottom: 6px; } & .Schmuck { line-height: 0.945; } }
		& .UeberHerzGruss { margin-top: 19px; }
	}
}
/* Unter 1280 px schrumpft das Bild weiter, die Inhaltskante bleibt aber bei 60 px stehen.
   Der Kreis wandert deshalb mit dem Bild (rechte Kante bei 613/1280 der Bildbreite, wie im
   Entwurf), sonst schiebt er sich über die Personen links im Bild. */
@media (min-width: 1024px) and (max-width: 1279px) {
	main .mod_article.Bildband.UeberHerzLogo .UeberHerzLogoText.mitKreis::before {
		left: calc(100% * 613 / 1280 - var(--kreis));
	}
	/* Texte mit dem Kreis schmaler werden lassen und den Kreis etwas absenken (1280: −143 px,
	   1024: −100 px), damit die Texte innerhalb seines Randes bleiben */
	main .mod_article.Bildband.UeberHerzLogo .UeberHerzLogoText {
		--kreis-y: calc(-143px + (1280px - 100vw) * 0.17);
		& > * { max-width: min(415px, 47.9vw - 125px); }
	}
}
@media (max-width: 1023px) {
	main .mod_article.Bildband.UeberHerzLogo {
		& .UeberHerzLogoText.mitKreis::before { content: none; }
		& .mod_article__inner > .UeberHerzLogoText {
			grid-area: auto;
			padding: 40px var(--horizontal_spacing) 48px;
			background: var(--color_1);
			& > * { max-width: 640px; }
		}
	}
}

/* ------------------------------------------------ Team (Beere): Fotos 138 px unter der Kante, 98 px unten */
main .mod_article.UeberHerzTeam { padding-top: 138px; padding-bottom: 98px; }
@media (max-width: 767px) { main .mod_article.UeberHerzTeam { padding-top: 64px; padding-bottom: 56px; } }

/* ------------------------------------------------ 1.2 Leistungen
   Erste Zeile 126 px unter der Kante; Blockabstände laut Entwurf 56/127/127/114/82 px; 144 px bis zum Bild */
main .mod_article.UeberHerzLeistungen {
	padding-top: 126px;
	padding-bottom: 144px;
	& .mod_article__inner > * + * { margin-top: 127px; }
	& .mod_article__inner > .UeberHerzNachRundbild { margin-top: 101px; }   /* Entwurf: Titel 3786 → 4213 */
	& .mod_article__inner > .UeberHerzNachRundbild + * { margin-top: 153px; }
	& .mod_article__inner > .UeberHerzNachRundbild + * + * { margin-top: 149px; }
	& .mod_article__inner > .BildUndText.RundbildLinks { margin-top: 114px; }
	& .mod_article__inner > .BildUndText.RundbildLinks + * { margin-top: 82px; }
}
@media (max-width: 1023px) {
	main .mod_article.UeberHerzLeistungen { padding-top: 64px; padding-bottom: 64px; & .mod_article__inner > * + * { margin-top: 64px !important; } }
}

/* ------------------------------------------------ Sortiment / Kooperationen */
main .mod_article.UeberHerzSortiment { padding-bottom: 125px; padding-top: 56px; }
main .mod_article.UeberHerzKooperationen { padding-top: 71px; padding-bottom: 128px; & .mod_article__inner > * + * { margin-top: 0; } }
/* Partnerliste beginnt bei x = 165 (wie die mittlere Spalte), rechte Spalte bei x = 663 */
.UeberHerzPartner { margin-left: 9.05% !important; max-width: 1063px; margin-top: 28px !important; }
@media (max-width: 1023px) {
	main .mod_article.UeberHerzSortiment { padding-bottom: 64px; }
	.UeberHerzPartner { margin-left: 0 !important; margin-top: 24px !important; }
}

/* ==================================================================== abschiedsfeier
   Abstände laut Figma-Rahmen „HM3“ (1280 px). */

/* 3.1 Abschiedsraum: Ankerleiste 958 → Titel 1048 (90), Text-Ende 1576 → Bildband 1691 (115) */
main .mod_article.AbschiedKapelle { padding-top: 90px; padding-bottom: 115px; }
/* 3.2: Text-Ende 3093 → Rundbild 3245 (152), Rundbild-Ende 3802 → Bildband 3905 (103) */
main .mod_article.AbschiedRituale { padding-bottom: 103px; & .mod_article__inner > * + * { margin-top: 152px; } }
/* Floristik-Text → Trauermusik-Titel 234 px; Schaltfläche → Bildband 186 px */
main .mod_article.AbschiedFloristik { padding-bottom: 117px; }
main .mod_article.AbschiedMusik { padding-top: 117px; padding-bottom: 186px; }
@media (max-width: 1023px) {
	main .mod_article.AbschiedKapelle { padding-top: 60px; padding-bottom: 70px; }
	main .mod_article.AbschiedRituale { padding-bottom: 70px; & .mod_article__inner > * + * { margin-top: 72px; } }
	main .mod_article.AbschiedFloristik { padding-bottom: 50px; }
	main .mod_article.AbschiedMusik { padding-top: 50px; padding-bottom: 80px; }
}

/* Trauerrede auf Beere: Text → Bild 79, Bild → Titel 78, Titel-Text → David 114, David → Katja 195,
   Katja → Kirsten (Bild) 76, Kirsten-Bild → Text 43, Kirsten → Hans-Peter 201, Hans-Peter → Reinhard 180,
   Reinhard → Abschnittsende 183 */
main .mod_article.AbschiedRedner {
	padding-bottom: 183px;
	& .mod_article__inner > .RednerBildband { margin-top: 79px; }
	& .mod_article__inner > .RednerEinleitung { margin-top: 78px; }
	& .mod_article__inner > .RednerDavid { margin-top: 114px; }
	& .mod_article__inner > .RednerKatja { margin-top: 195px; }
	& .mod_article__inner > .RednerKirsten { margin-top: 76px; }
	& .mod_article__inner > .RednerHansPeter { margin-top: 201px; }
	& .mod_article__inner > .RednerReinhard { margin-top: 180px; }
	@media (max-width: 1023px) {
		padding-bottom: 80px;
		& .mod_article__inner > :is(.RednerBildband, .RednerEinleitung) { margin-top: 56px; }
		& .mod_article__inner > :is(.RednerDavid, .RednerKatja, .RednerKirsten, .RednerHansPeter, .RednerReinhard) { margin-top: 72px; }
	}
}
/* Foto über die volle Breite innerhalb des Beeren-Abschnitts (1280 × 832) */
.RednerBildband {
	margin-inline: calc(50% - 50vw);
	& img { width: 100%; height: auto; aspect-ratio: 1280 / 832; object-fit: cover; }
}
/* Kirsten Andrae: Rundbild rechts (x = 883), langer Text darunter in der mittleren Spalte */
.RednerKirsten {
	& > .RednerBildRechts { max-width: 328px; margin-left: 70.95%; }
	& > .content-element-group { max-width: var(--spalte_mitte); margin: 43px auto 0; }
	@media (max-width: 899px) {
		& > .RednerBildRechts { max-width: min(380px, 80vw); margin-left: 0; }
		& > .content-element-group { margin-top: 36px; }
	}
}

/* Trauerrede: „mit ♥“ steht im Entwurf oben an der letzten Titelzeile */
#trauerrede h2 > .MitHerz { align-self: end; margin-bottom: 0.55em; }

/* ==================================================================== vorsorge-rat */

/* ------------------------------------------------------------------ Ihre Vorsorge (Figma „HM4“) */
/* Text oben auf dem Bildband: „Kostenlose und / unverbindliche Beratung“ (Roboto 35 + Smithen 55),
   darunter 16/19 und die Telefonnummern (Entwurf: Titel → Text 15 px, Text → Nummern 15 px) */
.VorsorgeBildband .TextAufBildOben .rte {
	& > h2 { font-size: var(--schrift_zwischentitel); line-height: 1.1714; }
	& > h2 .Schmuck { line-height: 0.945; }
	& > h2 + * { margin-top: 15px; }
	& > * + .Telefonliste { margin-top: 15px; }
	& .Telefonliste { line-height: 36px; }
}

/* ------------------------------------------------------------------ Rat & Tat (Figma „HM5“) */
/* Verfügungen: Text → Schaltfläche 20 px, Schaltfläche → Text 20 px, neuer Unterabschnitt (h3) 50 px */
.Verfügungsliste {
	& > * { margin: 0; }
	& > * + * { margin-top: 20px; }
	& > .content-hyperlink + .content-text:has(.rte > h3:first-child) { margin-top: 50px !important; }
}
/* Trostbücher: Titel → Rollkasten 80 px (Entwurf 8733 + 93 → 8907) */
main .mod_article__inner > .BücherTitel + .Bücherliste { margin-top: 80px; }

/* ==================================================================== trauerfall (Figma „HM2“)
   Abstände nach Messung gegen die Figma-Koordinaten (tools/figma-audit/abgleich). */
main .mod_article.TrauerfallUeberfuehrung { padding-bottom: 200px; }      /* Text → Titel „Bestattungsarten“ */
.TrauerfallErdFeuer { margin-top: 170px !important; }                     /* Schaltfläche 4773 → 4943 */
main .mod_article.TrauerfallArten { padding-bottom: 123px; }              /* Spalten → Bildband 123 */
main .mod_article.TrauerfallSee { padding-top: 115px; padding-bottom: 116px; }
.TrauerfallWaelder { margin-top: 31px !important; & > * + * { margin-top: 15px !important; } }
.TrauerfallAnonym { margin-top: 88px !important; }                        /* Schaltflächen 7968 → Bild 8056 */
main .mod_article.TrauerfallBaum { padding-bottom: 127px; }               /* Anonym → Bildband 127 */
main .mod_article.TrauerfallKosten { padding-top: 130px; }
.TrauerfallSicher { margin-top: 102px !important; }
.TrauerfallKarte { margin-top: 99px !important; }
main .mod_article.TrauerfallFriedhoefe { padding-bottom: 155px; }         /* Rollkasten → Ende der Fläche */
@media (max-width: 1023px) {
	main .mod_article:is(.TrauerfallUeberfuehrung, .TrauerfallArten, .TrauerfallBaum, .TrauerfallFriedhoefe) { padding-bottom: 72px; }
	main .mod_article:is(.TrauerfallSee, .TrauerfallKosten) { padding-block: 72px; }
	:is(.TrauerfallErdFeuer, .TrauerfallAnonym, .TrauerfallKarte) { margin-top: 56px !important; }
}

/* ==================================================================== Videoabschnitt je Seite
   Entwurf: letzter Inhalt → Videotitel bzw. Flächenende → Videotitel (Vorgabe 219 px in bausteine.css) */
main .mod_article.UeberHerzKooperationen + .Videoabschnitt { padding-top: 97px; }   /* HM1: Partnerliste → Titel 228 */
main .mod_article.AbschiedRedner + .Videoabschnitt { padding-top: 252px; }         /* HM3: Beere-Ende → Titel 252 */
@media (max-width: 1023px) { main .mod_article:is(.UeberHerzKooperationen, .AbschiedRedner) + .Videoabschnitt { padding-top: 90px; } }