/* ==========================================================================
   Bestattungen Joisten — seitenspezifische Ergänzungen
   ========================================================================== */

/* Breite Textspalte (Thanatopraxie, Trauerdekoration: 1054 bzw. 941 px bei x = 56/65) */
.SpalteBreit { max-width: 1054px; }
.SpalteMittel { max-width: 955px; }
/* eingerückte Zwischenabschnitte (Trauerblumen, Persönliche Trauerbegleitung: x = 165) */
.Einzug { margin-left: 105px; max-width: 955px; @media (max-width: 1023px) { margin-left: 0; } }
.AbstandAußenLinks13 { margin-left: 13px !important; }

/* Was wir bieten: drei Werte (nur Webtext) nebeneinander */
.Werte {
	/* Webtext: drei Werte mit Aufzählungspunkten (Wingdings) getrennt. In der 528-px-Spalte passen sie nicht in
	   eine Zeile, deshalb untereinander, jeder mit Punkt davor (der Punkt hing sonst am Zeilenende). */
	display: grid;
	justify-items: start;
	row-gap: 4px;
	& .Punkt { display: none; }
	& > span:not(.Punkt) { display: flex; align-items: center; gap: 0.55em; }
	& > span:not(.Punkt)::before { content: ''; flex: 0 0 7px; height: 7px; border-radius: 50%; background: currentColor; }
}
}

/* Widmung unter dem Bildpaar (x = 62, 456 px unter dem Rundbild, 209 px breit, rechtsbündig) */
.Bildpaar > .Widmung { position: absolute; left: 2px; top: 456px; width: 209px; text-align: right; }
@media (max-width: 1100px) {
	.Bildpaar:has(> .Widmung) { padding-bottom: 0; }
	.Bildpaar > .Widmung { position: static; width: auto; margin-top: calc(22% + 16px) !important; text-align: left; }
}
/* Unterschrift „Dieter & Stephan Joisten mit Team“ (Great Vibes 40, 14 px unter dem Text) */
.rte > .Unterschrift { margin-top: 14px !important; }

/* Seiten ohne Bildkopf (Erklärfilme, Rechtstexte): Inhalt unter der Kopfzeile */
main .mod_article.SeiteOhneBildkopf { padding-top: 60px; }
.Rechtstext .mod_article__inner { max-width: 955px; }
.Rechtstext .rte { font-size: var(--schrift_text); line-height: var(--zeilen_text); }
.Rechtstext .rte h1 { margin-bottom: 40px; }
.Rechtstext .rte h2 { font-size: var(--font_size); font-weight: 400; line-height: var(--line_height); margin-top: 40px; }
.Rechtstext .rte h3, .Rechtstext .rte h4 { font-size: var(--schrift_text); font-weight: 600; margin-top: 26px; }
.Rechtstext .content-text + .content-text { margin-top: 26px; }

.AbstandAußenLinks37 { margin-left: 37px !important; }
.AbstandAußenLinks14 { margin-left: 14px !important; }
@media (max-width: 767px) { :is(.AbstandAußenLinks13, .AbstandAußenLinks14, .AbstandAußenLinks37) { margin-left: 0 !important; } }

/* Freisteller (PNG ohne Hintergrund) mit Bildunterschrift rechtsbündig (Sternenkinderfeld: Bild 612 px bei x = 640,
   ragt 52 px in die Lücke; Unterschrift Lexend 20 rechtsbündig bis x = 1220) */
.Freisteller figcaption { margin-top: 24px; font-size: var(--schrift_text); line-height: var(--zeilen_text); text-align: right; }
.Sternenkinderfeld { margin-left: -9.85% !important; margin-top: -16px !important; & figcaption { margin-top: 75px; } }
@media (max-width: 767px) { .Sternenkinderfeld { margin: 0 !important; } }

/* Erinnerungsschmuck: Text 704 px bei x = 97, Fingerabdruck 308 × 425 bei x = 869 */
.Zweispalter.LinksBreit {
	grid-template-columns: minmax(0, 704fr) minmax(0, 308fr);
	column-gap: 6.2%;
	padding-left: 37px;
	@media (max-width: 767px) { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
}
.Fingerabdruck { max-width: 308px; justify-self: start !important; }

/* Kästen untereinander (Anlaufstellen 57 px, Bücher 71 px Abstand) */
.Zweispalter.KastenAbstandM > .content-element-group > * + * { margin-top: 57px !important; }
.Zweispalter.KastenAbstandL > .content-element-group > * + * { margin-top: 71px !important; }
@media (max-width: 767px) {
	.Zweispalter:is(.KastenAbstandM, .KastenAbstandL) { row-gap: 32px; & > .content-element-group > * + * { margin-top: 32px !important; } }
}

/* ==========================================================================
   Startseite: Teaser (Figma-Rahmen „start“). Lage der Teile wie im Entwurf; die Maße sind auf die
   Inhaltsbreite 1160 px bezogen und schrumpfen darunter mit (Container-Einheiten: 1 px = 0,0862 cqw).
   ========================================================================== */
.Riesig { font-size: var(--schrift_riesig); font-weight: 100; line-height: 1; }   /* Figma 130/130 */
.StartTeaser {
	--px: 0.08621cqw;
	position: relative;
	container-type: inline-size;
	& > * { margin: 0 !important; }
	& h2 { display: grid; justify-items: start; font-weight: 100; line-height: 1; }
	& h2 .Schmuck, & h2 .SchmuckGroß { text-shadow: 0 4px 4px rgb(0 0 0 / 0.25); }
}
/* Erste Schritte: Titel mittig über x = 20 … 765 (Zeilen 156 px), „im Trauerfall“ rechtsbündig bis x = 733,
   Schaltfläche bis x = 710; Video 424 × 646 (Ecken 20) bei x = 798 */
.TeaserErsteSchritte {
	display: grid;
	grid-template-columns: minmax(0, 705fr) minmax(0, 33fr) minmax(0, 424fr);
	grid-template-areas: "text . video" "knopf . video" ". . video";
	grid-template-rows: auto auto 1fr;
	& .content-text { grid-area: text; margin-top: calc(-32 * var(--px)) !important; margin-left: calc(-40 * var(--px)) !important; }
	& h2 { justify-items: center; }
	& h2 .Riesig { text-align: center; }
	& h2 .Schmuck { justify-self: end; margin: calc(17 * var(--px)) calc(32 * var(--px)) 0 0; }   /* Zeilenkasten 944 + 2 × 130 → „im Trauerfall“ bei 1221 */
	& .Schaltfläche { grid-area: knopf; justify-self: start; margin: calc(27 * var(--px)) 0 0 calc(360 * var(--px)) !important; }   /* x = 420 */
	& .TeaserVideo { grid-area: video; }
	& .TeaserVideo video { width: 100%; aspect-ratio: 424 / 646; object-fit: cover; border-radius: 20px; }
}
/* Erinnerungen bewahren: „Erinnerungen“ mittig, „bewahren“ bei x = 597, Schaltfläche bei x = 738 / y + 248,
   Bildpaar (Rundbild bei x = 105 / y + 165), Statue 228 × 342 bei x = 994 / y + 380 (endet am Beratungsfoto) */
.TeaserErinnerungen {
	aspect-ratio: 1160 / 722;   /* Höhe 722 px bei 1160 px Breite (cqw-Einheiten wirken am Container selbst nicht) */
	& .content-text { position: relative; z-index: 2; }
	& h2 { justify-items: start; }
	& h2 .Riesig { justify-self: center; }
	& h2 .SchmuckGroß { margin: calc(9 * var(--px)) 0 0 calc(537 * var(--px)); }   /* 1716 + 130 → „bewahren“ bei 1855 */
	& .Schaltfläche { position: relative; z-index: 2; margin: calc(14 * var(--px)) 0 0 calc(678 * var(--px)) !important; }
	& .Bildpaar { position: absolute; left: calc(45 * var(--px)); top: calc(165 * var(--px)); width: calc(633 * var(--px)); }
	& .Statue { position: absolute; left: calc(934 * var(--px)); top: calc(380 * var(--px)); width: calc(228 * var(--px)); }
}
/* Entlasten: „Entlasten“ bei x = 151, „Sie Ihre Angehörigen“ bei x = 547 / y + 150, Schaltfläche bei x = 749 / y + 241 */
.TeaserEntlasten {
	& h2 .Riesig { margin-left: calc(91 * var(--px)); line-height: 1; }
	& h2 .Schmuck { margin: calc(20 * var(--px)) 0 0 calc(487 * var(--px)); }
	& .Schaltfläche { margin: calc(21 * var(--px)) 0 0 calc(689 * var(--px)) !important; }
}
/* Einleitung + Karte: Text bei x = 163 (530 px), runde Karte 449 × 405 bei x = 771, Schaltfläche darunter (x = 887) */
.StartEinleitung {
	& .Einleitung { margin-left: 103px !important; width: 530px; max-width: calc(100% + 104px - 103px); }   /* 530 px ab x = 163, läuft in die Spaltenlücke */
	& .Einleitung h2 { font-size: var(--font_size); font-weight: 400; line-height: var(--line_height); }
	& .Einleitung h2 + * { margin-top: 31px; }
	& .Kartenspalte { margin-left: 19px !important; max-width: 449px; }
	& .KarteRund img { width: 100%; height: auto; border-radius: 300px; }
	& .Kartenspalte > .Schaltfläche { margin: 21px 0 0 116px !important; }
}
main .mod_article.StartEinleitung:last-child { padding-bottom: 55px; }

@media (max-width: 767px) {
	.TeaserErsteSchritte {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "text" "knopf" "video";
		row-gap: 24px;
		& .content-text { margin: 0 !important; }
		& h2 .Schmuck { margin: 6px 0 0 !important; }
		& .Schaltfläche { margin: 0 !important; }
		& .TeaserVideo video { aspect-ratio: 4 / 5; }
	}
	.TeaserErinnerungen {
		aspect-ratio: auto;
		display: grid;
		row-gap: 24px;
		& > * { position: static !important; width: auto !important; }
		& h2 .SchmuckGroß { margin: 6px 0 0 auto; }
		& .Statue { max-width: 160px; justify-self: end; }
	}
	.TeaserEntlasten {
		& h2 .Riesig { margin-left: 0; }
		& h2 .Schmuck { margin: 8px 0 0 auto; }
		& .Schaltfläche { margin: 20px 0 0 !important; }
	}
	.StartEinleitung { & .Einleitung, & .Kartenspalte { margin-left: 0 !important; } & .Kartenspalte > .Schaltfläche { margin-left: 0 !important; } }
}

/* Erklärfilme: Rubrik-Titel Great Vibes 100 mittig, „Unsere Videos zum Thema“ 29 px darunter */
.Filmrubrik .content-text .rte { text-align: center; }
.Filmrubrik .rte > h2 + p { margin-top: 29px; }

/* Kontaktformular */
.Rechtstext fieldset { margin: 0; padding: 0; border: 0; }
.Rechtstext .rte h2 + .ce_form, .Rechtstext .content-text + .ce_form, .Rechtstext .content-text + .content-form { margin-top: 20px; }
.Rechtstext .widget-checkbox input { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; accent-color: var(--color_1); }
.Rechtstext .rte a { overflow-wrap: anywhere; }

/* Was wir bieten: helle Linie 3 px auf dem Schaufensterfoto (x = 59 … 1215, 37 px über der Unterkante) */
main .mod_article.Bildband.mitLinie .mod_article__inner { position: relative; }
main .mod_article.Bildband.mitLinie .mod_article__inner::after {
	content: ''; position: absolute; left: 4.61%; right: 5.08%; bottom: 6.75%; height: 3px; background: var(--color_2); pointer-events: none;
}
/* Trennlinie 3 px aubergine (Trauerfall zwischen Erd- und Feuerbestattung, x = 46 … 1202) */
hr.Trennlinie { height: 3px; margin: 0 1.6% 0 -1.2%; border: 0; background: var(--color_1); }
/* Weißer Kasten unter einem Rundbild (Ratgeber, Vorsorge): 529 px bei x = 674 (18 px vor der Spalte) */
.KastenUnterRundbild { margin-left: -18px !important; margin-right: 18px; @media (max-width: 767px) { margin: 24px 0 0 !important; } }