/* Eigene Anpassungen
   Platz für kleine Ergänzungen ohne Eingriff in die übrigen Stylesheets. */

/* Startseite: „Erste Schritte“ ist im Entwurf eingerückt (Kasten ab x = 148) */
@media (min-width: 1024px) {
	.ErsteSchritte { padding-left: calc(108px + var(--horizontal_spacing)) !important; }
	.ErsteSchritte > :last-child { align-self: center; }
}

/* Feinabstimmung je Seite nach dem Figma-Entwurf (Messung mit tools/py/abstaende.py) */

/* ================================================================ Startseite und „Was wir für Sie tun“ */
/* ---------------------------------------------------------------- Startseite */
@media (min-width: 1024px) {
	/* Einleitung 106 px unter dem Bildkopf, Textbreite 887 px; „Erste Schritte“ 120 px über dem Bildwechsel */
	main .mod_article.StartEinleitung { padding-top: 106px; padding-bottom: 120px; }
	.StartEinleitung .Einleitung .rte { max-width: 887px; }
	.StartEinleitung .ErsteSchritte { margin-top: 106px; grid-template-columns: 437px minmax(0, 525px); column-gap: 110px; }
	.StartEinleitung .ErsteSchritte > :last-child { align-self: start; margin-top: 96px !important; }
	/* Symbolkasten 437 × 462 wie im Entwurf, Symbole mittig */
	.ErsteSchritte .Symbolkasten { display: grid; place-items: center; min-height: 462px; padding: 0; }
	/* Symbole wie im Entwurf 51/71 px vom Kastenrand (die SVG hat 21/7 px Rand für die Bewegung) */
	.ErsteSchritte .Symbolkasten { place-items: start; }
	.ErsteSchritte .Symbolkasten .Symbol { margin: 64px 0 0 30px !important; }
	/* Bestattungsvorsorge: oben 93, unten 103 px */
	main .mod_article.StartVorsorge { padding-top: 93px; padding-bottom: 103px; }
	/* Drei Kästen: 28 px Abstand, Symbol → Text 16 px */
	.Dreierkästen { gap: 28px; }
	.Dreierkästen .KastenZentriert { padding-top: 32px; }
	.Dreierkästen .KastenZentriert > .Symbol + * { margin-top: 16px; }
}
/* Kornblume: Die Datei enthält den Ausschnitt des Entwurfs (Fenster 786 × 819, Blume um 29,9° gedreht).
   Beim Überfahren wächst sie wie im Entwurf in 2 s auf 838 px (Variante 2 der Figma-Komponente). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.MitSchmuckbild .Schmuckbild {
		pointer-events: auto;
		transform-origin: 0 0;
		transition: transform 2s ease-in-out;
		&:hover { transform: scale(1.066); }
	}
}

/* ---------------------------------------------------------------- Umfassende Leistungen */
@media (min-width: 1024px) {
	.ServiceUndFilm { align-items: start; }
	.ServiceUndFilm > :first-child { margin-top: 68px !important; }
	.ServiceUndFilm .KastenZentriert { padding-top: 33px; }
	.Kundenzufriedenheit > :last-child { margin-top: 16px !important; }
}

/* ---------------------------------------------------------------- Mehrere Standorte: Filialangaben oben ausgerichtet,
   31 px unter der Bildoberkante (erste Filiale 66 px) */
@media (min-width: 901px) {
	#filialen .Filiale { align-items: start; }
	#filialen .Filiale > :first-child { margin-top: 31px !important; }
	#filialen .Filiale.AbstandAußenOben75 > :first-child { margin-top: 66px !important; }
}

/* ---------------------------------------------------------------- Handy */
@media (max-width: 1023px) {
	.StartEinleitung .ErsteSchritte { margin-top: 40px; }
}
/* Partnerliste mobil: immer erst das Logo, dann die Schaltfläche */
@media (max-width: 700px) {
	.Partnerliste .Partnerzeile > .content-image { order: -1; }
}
/* Bild + Kreis zwischen 901 und 1279 px: kein Überlauf (Entwurfsmaße passen erst ab 1280 px) */
@media (min-width: 901px) and (max-width: 1279px) {
	.BildUndKreis { grid-template-columns: minmax(0, 437px) 350px; column-gap: clamp(40px, 10vw, 183px); padding-left: var(--horizontal_spacing) !important; }
}

/* ================================================================ Im Trauerfall, Trauerfeier */
/* Kasten als direktes Element eines Artikels: in der Inhaltsspalte (1200 px), nicht über die
   volle Breite (sonst überschreibt der Kasten-Innenabstand den Spaltenrand) */
main .mod_article > .KastenSpaltenbreite {
	width: var(--content_width);
	max-width: calc(100% - var(--horizontal_spacing) * 2);
}
/* Kasten mit Symbol links: Titel → Text 28 px, Absätze/Listen 28 px (Entwurf „Dokumente bereitlegen“) */
.KastenSymbolLinks > :not(.Symbol) + * { margin-top: 28px !important; }
.KastenSymbolLinks .rte > * + * { margin-top: 28px; }
/* Bestattungsarten: Grabarten-Spalte beginnt im Entwurf 19 px über dem Bild */
@media (min-width: 901px) {
	.BildUndText > .GrabartenHöher { margin-top: -19px !important; }
}

/* Trauerfeier: Kreis „Schleifendruck“ liegt im Entwurf 172 px unter der Bild-Oberkante */
@media (min-width: 801px) {
	.BildNebenKreis > .Kreis { align-self: start; margin-top: 172px !important; }
}
/* Personenreihe: Name → Zitat sichtbar 61 px (Namensfeld 66 px hoch + 33 px Abstand) */
.Personenreihe .swiper-slide .content-headline + .content-text { margin-top: 61px; }
@media (max-width: 767px) { .Personenreihe .swiper-slide .content-headline + .content-text { margin-top: 20px; } }

/* Handy: Friedhofslisten mit kleinerem Abstand Titel → Liste; Pfeile der Personenreihe
   auf Höhe der Bildmitte (Bildhöhe = Kartenbreite × 462/547) */
@media (max-width: 767px) {
	.Friedhofsregion > .content-headline + * { margin-top: 24px !important; }
	.Friedhofsregion .Spalten3 { gap: 40px; }
}
@media (max-width: 900px) {
	.Personenreihe :is(.swiper-button-prev, .swiper-button-next) { top: calc(min(547px, 86vw) * 0.4223); }
}

/* ================================================================ Abschied gestalten und Ratgeber */
/* Begleitung durch die Trauer: Raster der Hilfsangebote wie im Entwurf (Spalten 305 px, Abstand 132 px; Zeilen 50 bzw. 73 px) */
@media (min-width: 961px) {
	.Hilfsangebote { column-gap: 132px; row-gap: 50px; }
	.Hilfsangebote > :nth-child(n+7) { margin-top: 23px !important; }
}

/* Dreispaltige Raster aus Zwischentitel + Text: Spalten 305 px mit 132 px Abstand wie im Entwurf */
@media (min-width: 961px) {
	.Spalten3.Rasterpunkte { column-gap: 132px !important; }
	.Rasterzeilen72 { row-gap: 72px !important; }
}

/* Zweispalter: schmale Textspalte (305 px) neben breitem Bild (763 px), 132 px Abstand */
@media (min-width: 961px) {
	.Spalten2.TextspalteSchmal { grid-template-columns: 305fr 763fr; column-gap: 132px; }
}

/* Innenabstand oben eines Kastens (Entwurf: 40 statt 50 px) */
@media (min-width: 701px) { main .Kasten.InnenabstandOben40 { padding-top: 40px; } }

/* Literatur finden: Buchraster mit Zeilen wie im Entwurf (Zeilenabstände wie im Entwurf, Spalten verschieden hoch) */
@media (min-width: 961px) {
	/* Figma-Zeilen bei 1640 / 2000 / 2325 px: Zeilen je 231 px hoch, danach 129 bzw. 94 px Abstand */
	.Literaturraster { row-gap: 129px !important; }
	.Literaturraster > :nth-child(n+7) { margin-top: -35px !important; }
}

/* ================================================================ Vorsorge, Aktuelles, Kontakt, News */
@media (min-width: 1024px) {
	/* Sichere Finanzierung: Abstände wie im Entwurf (Text → Kästen 130 px, Kästen → Titel 106 px) */
	main .mod_article > .AbstandNachText130 { margin-top: 130px; }
	main .mod_article > .AbstandNachKästen106 { margin-top: 106px; }
	/* Kästen 556 px hoch, Inhalt 63 px unter der Oberkante (Entwurf) */
	.KästenHoch556 > .Kasten { min-height: 556px; padding-top: 63px; }
}
/* Nachrichtenkarte: Datum → Titel wie im Entwurf (Datumsfeld 52 px + 9 px) */
.Nachrichtenkarte .Datum + h2 { margin-top: 23px; }
@media (min-width: 1024px) {
	/* Im Film erklärt: Kategorien im Mittel 1032 px Abstand (Entwurf 970–1085), letzte bis zur Fußzeile wie im Entwurf */
	main .mod_article.Videokategorie:not(:last-child) { padding-bottom: 79px; }
	main .mod_article.Videokategorie:last-child { padding-bottom: 138px; }   /* letzte Galerie → Fußzeile wie im Entwurf */
}
/* Seitenblättern der Nachrichtenliste */
.Nachrichtenraster .pagination {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 20px;
	& p { margin: 0; color: var(--color_5); font-weight: 400; }
	& ul { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
	& li + li { margin-top: 0; }
	& :is(a, strong) {
		display: inline-block; min-width: 44px; padding: 8px 12px; border-radius: 8px; text-align: center;
		background: var(--color_2); color: var(--color_1); text-decoration: none;
	}
	& strong.active { background: var(--color_1); color: #fff; }
	& a:hover { box-shadow: inset 0 0 0 2px var(--color_1); }
}
/* Videogalerie auf dem Handy: Pfeile neben dem schmaleren Video, Bedienleiste einzeilig */
@media (max-width: 600px) {
	.Videogalerie .swiper-slide { max-width: 76vw; }
	.Videogalerie :is(.swiper-button-prev, .swiper-button-next) { top: 22vw; }
	.Bedienleiste { width: 100%; gap: 8px; padding: 14px 10px; }
	.Bedienleiste button { width: auto; min-width: 48px; font-size: 14px; white-space: nowrap; }
}

/* ================================================================ Waagerechter Abgleich (Messung mit --x) */
@media (min-width: 1200px) {
	/* Bild + Text: Bild bei x = 92 (437 breit), Text bei x = 641 (501 breit), wie im Entwurf */
	main .mod_article > .BildUndText:is(.SpalteMittel, .Breite1100) {
		width: calc(1050px + var(--horizontal_spacing) * 2);
		margin-left: max(0px, calc(50% - 588px));
		margin-right: auto;
		grid-template-columns: 437px 501px;
		column-gap: 112px;
	}
	/* Bestattungsarten im Ausland: Spalten 477 px, Abstand 66 px */
	.Bestattungsorte { grid-template-columns: 477px 477px !important; column-gap: 66px !important; }
	/* Drei Spalten mit Zwischentiteln: Spalten 305 px (dritte Spalte bei x = 914) */
	.Spalten3.Rasterpunkte { grid-template-columns: repeat(3, 305px) !important; }
	/* Umfassende Leistungen: Textspalte beginnt bei x = 211 (987 breit) */
	main .mod_article > .SpalteVersetzt { width: calc(987px + var(--horizontal_spacing) * 2); margin-left: max(0px, calc(50% - 469px)); margin-right: auto; }
}

/* Kontakt: lange E-Mail-Adressen dürfen umbrechen; unter 1200 px zwei Spalten */
.Kontaktspalten { --cell_min_width: 0; }
.Kontaktspalten .rte { max-width: none; overflow-wrap: anywhere; }
@media (min-width: 961px) and (max-width: 1199px) { .Kontaktspalten.Spalten3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- Trauerfeier: Deezer-Musiklisten (lädt erst nach Klick)
   Kästen wie im Entwurf 437 × 337, 141 px Abstand, linke Kante 524 px links der Mitte; 134 px unter dem Text */
.DeezerListen {
	/* Der Hinweis bleibt nach dem Laden stehen; die Listen nehmen den Platz der Kästen ein */
	display: flex;
	flex-direction: column;
	& .Nachgeladen { order: -1; margin-top: 0; }
	& [hidden] { display: none !important; }
	& .DeezerKästen > * { margin: 0 !important; }
	& .DeezerKästen {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 437px));
		column-gap: 141px;
		row-gap: 28px;
		margin-top: 40px;
		@media (min-width: 1024px) { margin-top: 134px; }
		@media (min-width: 1100px) { width: 1015px !important; margin-left: max(0px, calc(50% - 524px)) !important; padding: 0 !important; }
		@media (max-width: 1099px) { justify-content: center; column-gap: 28px; }
		@media (max-width: 760px) { grid-template-columns: minmax(0, 437px); }
	}
	& iframe { display: block; width: 100%; height: 337px; border: 0; border-radius: 20px; }
	& .KastenPlatzhalter { place-items: stretch; padding: 0; }
	& .KastenPlatzhalter .content-hyperlink { display: grid; margin: 0; }
	& .KastenPlatzhalter a {
		display: grid;
		place-items: center;
		border-radius: 20px;
		font-size: var(--schrift_ueberschrift);
		font-weight: 400;
		line-height: 1.2667;
		color: var(--color_4);
		text-decoration: none;
		transition: background-color 0.2s;
		&:hover, &:focus-visible { background: rgb(0 0 0 / 0.06); text-decoration: underline; }
	}
	& .Ladehinweis { margin-top: 28px; text-align: center; }
	& .Ladehinweis .rte { margin-inline: auto; }
}

/* ---------------------------------------------------------------- Startseite: Symbole mittig im Kasten (unter 1024 px) */
@media (max-width: 1023px) {
	.ErsteSchritte .Symbolkasten { display: grid; place-items: center; }
}
/* Kornblume: Der folgende blaue Abschnitt liegt darüber und schneidet den Stiel an der Unterkante des
   Wiesenbilds ab (Entwurf: blaue Fläche „Rectangle 11“ über der Blume) */
.MitSchmuckbild ~ .mod_article.Hintergrund2 { position: relative; z-index: 7; }

/* Filmnachweis: etwas Luft unter dem runden Bild */
.Filmnachweis { margin-top: 20px; }

/* Rechtsseiten: Seitentitel → erster Absatz */
.SeitentitelBraun + * { margin-top: 28px; }

/* Handy: Seitentitel im Bildkopf auf hellen Bildstellen lesbar halten */
@media (max-width: 767px) {
	.Bildkopf h1 { text-shadow: 0 0 18px rgb(0 0 0 / 0.45), 0 0 4px rgb(0 0 0 / 0.25); }
}

/* Bestattungsarten: Textspalte der Urnen-Grabformen wie im Entwurf (x 204, 897 breit) */
@media (min-width: 1024px) {
	main .mod_article.Grabformen > .SpalteSchmal { width: calc(897px + var(--horizontal_spacing) * 2); margin-left: max(0px, calc(50% - 436px - var(--horizontal_spacing))); margin-right: auto; }
}