/* ==========================================================================
   Herz Bestattungen — Grundlagen
   Farben, Schriften, Abstände, Schaltflächen und Grundgerüst. Alle Werte
   stammen aus dem Figma-Entwurf „HERZ_design“ (Entwurfsbreite 1280 px).

   Zusammenspiel mit dem „Lesbaren CSS-Framework“: Das Framework liefert die im
   Backend auswählbaren Klassen (Hintergrund1–5, AbstandObenL …) und liest die
   Farben aus --color_1 bis --color_5. Eigene Grundregeln stehen in :where(),
   damit jede im Backend gewählte Klasse sie sicher überschreibt.
   ========================================================================== */

/* -------------------------------------------------------------------- Schriften
   Lokal gehostet (keine Verbindung zu Dritten). Roboto Flex ist auf die Achsen
   Strichstärke und optische Größe reduziert, Zeichensatz Westeuropäisch. */
@font-face {
	font-family: 'Roboto Flex';
	src: url('../fonts/roboto-flex.woff2') format('woff2');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Smithen';
	src: url('../fonts/smithen-script.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------- Farben, Maße */
:root {
	/* Farben aus dem Entwurf. Die Beerenfarbe ist im Entwurf #6D234F mit 20 % Schwarz
	   darüber (sichtbar #571C3F), das Pink #FF0098 ebenso (sichtbar #CC0079). */
	--color_1: #571c3f;   /* Beere: Schrift, Schaltflächen, dunkle Flächen */
	--color_2: #f0e8ec;   /* Flieder hell: Seitengrund, Fußzeile */
	--color_3: #cc0079;   /* Pink: Ankerleiste und erster Abschnitt „Über Herz“ */
	--color_4: #ffffff;   /* Weiß: Schaltflächen, Schrift auf Bildern */
	--color_5: #8b8480;   /* Grau: Schriftzug „Bestattungen“ im Logo */
	--schwarz: #000;      /* Schaltflächen beim Überfahren */
	--video: #521149;     /* Bedienleiste der Videos */
	--white_alternate: var(--color_2);
	--font_color: var(--color_1);
	--border_color: var(--color_1);
	--swiper-theme-color: var(--color_1);

	/* Schrift: Fließtext Roboto Flex 500 22/26, Überschriften Roboto Flex 600 80/85 und 35/41,
	   Schmuckschrift Smithen 55/52 und 130/122. Unter 1280 px wird stufenlos verkleinert. */
	--font_family: 'Roboto Flex', Arial, sans-serif;
	--font_schmuck: 'Smithen', 'Roboto Flex', cursive;
	--font_size: clamp(18px, 15.8px + 0.47vw, 22px);
	--font_weight: 500;
	--font_weight_strong: 700;
	--line_height: 1.1818;                                       /* 26/22 */
	--schrift_klein: clamp(15px, 14.45px + 0.12vw, 16px);         /* 16/19 */
	--schrift_titel: clamp(40px, 18.6px + 4.8vw, 80px);           /* 80/85 */
	--schrift_zwischentitel: clamp(25px, 19.6px + 1.2vw, 35px);   /* 35/41 */
	--schrift_schmuck: clamp(36px, 25.8px + 2.28vw, 55px);        /* 55/52 */
	--schrift_schmuck_gross: clamp(56px, 16px + 8.9vw, 130px);    /* 130/122 */

	/* Raster: Inhalte bei x = 60 … 1220 (Entwurf), mittlere Spalte 950 px bei x = 165 */
	--content_width: 1160px;
	--horizontal_spacing: 60px;
	--spalte_mitte: 950px;
	--spalte_text: 739px;
	--vertical_spacing: 100px;   /* Abstand oben/unten in Abschnitten */
	--block_abstand: 120px;      /* zwischen Blöcken eines Abschnitts */
	--grid_gap: 40px;
	--header_height: 0px;

	@media (max-width: 1023px) {
		--horizontal_spacing: 32px;
		--vertical_spacing: 70px;
		--block_abstand: 72px;
		--grid_gap: 24px;
	}
	@media (max-width: 599px) {
		--horizontal_spacing: 20px;
		--vertical_spacing: 56px;
		--block_abstand: 56px;
	}

	/* Abstandsstufen des Frameworks (AbstandObenS …) */
	--XXXXS: 5px;
	--XXXS: 12px;
	--XXS: 20px;
	--XS: 30px;
	--S: 46px;
	--M: 68px;
	--L: 100px;
	--XL: 130px;
	--XXL: 200px;
	--XXXL: 300px;
}

/* -------------------------------------------------------------------- Seitenübergänge */
@view-transition { navigation: auto; }
main::view-transition-old(root) { animation: fade-out 0.4s ease forwards; }
main::view-transition-new(root) { animation: fade-in 0.4s ease forwards; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* Keine Animation beim Seitenaufbau (Layout-Option „preload-Klasse“) */
.preload * { transition: none !important; animation: none !important; }

/* -------------------------------------------------------------------- Basis */
*, *::before, *::after { box-sizing: border-box; }

html {
	color-scheme: light;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	-webkit-text-size-adjust: 100%;
	@media (prefers-reduced-motion: reduce) { scroll-behavior: auto; }
}

body {
	margin: 0;
	min-width: 300px;
	overflow-x: clip;
	background: var(--color_2);
	color: var(--font_color);
	font-family: var(--font_family);
	font-size: var(--font_size);
	font-weight: var(--font_weight);
	line-height: var(--line_height);
	letter-spacing: 0.02em;          /* Figma: Roboto Flex 22 px mit 0,44 px Laufweite */
	font-optical-sizing: auto;
}
/* Überschriften, Schmuckschrift und 16-px-Texte ohne Laufweite (Figma: 0) */
:where(h1, h2, h3, h4, .Schmuck, .SchmuckGroß, .Klein, .TextKlein, .FußzeileLinks, .FußzeileTreuhand, .Teamreihe .rte, .Bedienleiste, .navigation-main .level_1 > li > :is(a, strong)) { letter-spacing: 0; }
:where(h1, h2, h3, h4) :where(.Herz) { letter-spacing: 0; }

:where(p, ul, ol, figure, blockquote) { margin: 0; }
:where(.rte) > * + :where(p, ul, ol) { margin-top: calc(var(--line_height) * 1em); }
:where(.rte) :where(ul, ol) { padding-left: 1.2em; }
:where(strong, b) { font-weight: var(--font_weight_strong); }
:where(img, video, svg) { display: block; max-width: 100%; height: auto; }

:where(a) {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 0.3s ease;
}
:where(.rte) a { text-decoration: underline; }
:where(.rte) a:hover { text-decoration-thickness: 2px; }

/* Sichtbarer Tastaturfokus */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--color_3);
	outline-offset: 3px;
}
:where(.HintergrundBeere, .HintergrundPink, .Bildkopf) :where(a, button):focus-visible { outline-color: var(--color_4); }

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--color_1);
	color: var(--color_4);
	text-decoration: none;
	&:focus { top: 16px; }
}
.invisible, .unsichtbar {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------------- Überschriften
   h1/h2: Roboto Flex 600 80/85. Schmuckschrift-Teile (Smithen) als <span class="Schmuck">.
   h3: Roboto Flex 600 35/41. Eine ganze Zeile in Schmuckschrift: Klasse „Schmuck“ am Absatz. */
:where(h1, h2, h3, h4) {
	margin: 0;
	font-weight: 600;
	overflow-wrap: break-word;
	hyphens: manual;
	@media (max-width: 599px) { hyphens: auto; }
}
:where(h1, h2) {
	font-size: var(--schrift_titel);
	line-height: 1.0625;
}
:where(h3, h4) {
	font-size: var(--schrift_zwischentitel);
	line-height: 1.1714;
}
.Schmuck {
	font-family: var(--font_schmuck);
	font-size: var(--schrift_schmuck);
	font-weight: 400;
	line-height: 0.945;
}
:where(h1, h2, h3) .Schmuck { line-height: inherit; }
.SchmuckGroß { font-family: var(--font_schmuck); font-size: var(--schrift_schmuck_gross); font-weight: 400; line-height: 0.9385; }
.Klein { font-size: var(--schrift_zwischentitel); line-height: 1.1714; }
p.Schmuck, :is(h2, h3).Schmuck { display: block; }
.TextKlein, .TextKlein .rte { font-size: var(--schrift_klein); line-height: 1.1875; }

/* Herz-Symbol statt eines Wortes („Mit ♥ begleiten“): Der Text bleibt für Screenreader
   und Suchmaschinen erhalten, sichtbar ist das Herz aus dem Entwurf (60 × 61 bei 35 px). */
.Herz {
	display: inline-block;
	width: 1.714em;
	height: 1.743em;
	margin: 0 0.12em;
	vertical-align: -0.6em;
	overflow: hidden;
	color: transparent;
	text-indent: 200%;
	white-space: nowrap;
	background: url('../img/herz.svg') center / contain no-repeat;
	user-select: none;
}
/* Herz zwischen zwei Wörtern ohne eigenes Wort („Erste ♥ Schritte“): <span class="Herz" aria-hidden="true">♥</span> */

/* „mit ♥“ klein oben rechts neben einer großen Überschrift (Achtsame Überführung mit ♥):
   Raster statt Flexbox, damit „mit ♥“ neben dem ggf. mehrzeiligen Titel bleibt; ein Schmuckschrift-Teil
   davor („Trauerrede:“) steht in eigener Zeile. */
:is(h1, h2):has(> .MitHerz):not(.HerzImText) {
	display: grid;
	grid-template-columns: minmax(0, max-content) max-content;
	justify-content: start;
	align-items: start;
	& > .Schmuck { grid-column: 1 / -1; }
}
.MitHerz {
	display: inline-flex;
	align-items: flex-start;
	font-size: var(--schrift_zwischentitel);
	line-height: 1.1714;
	white-space: nowrap;
	& .Herz { margin: -0.29em 0 0 0.05em; vertical-align: top; font-size: 1em; }
	/* Entwurf: „mit ♥“ steht immer auf einem Bild — Herz weiß mit Beere-Kontur (Bildköpfe: Herz in Beere) */
	& .Herz { background-image: url('../img/herz-weiss.svg'); }
}
/* „mit ♥“ mitten im Satz (Wortlaut Webtext, z. B. „Angebote für Trauerhilfe mit ♥ in Ihrer Nähe.“):
   Klasse „HerzImText“ an der Überschrift → Fließsatz */
:is(h1, h2).HerzImText {
	display: block;
	& .MitHerz { vertical-align: top; margin-top: 0.12em; }
}

/* -------------------------------------------------------------------- Schaltflächen
   Komponente „button“ im Entwurf: Pille (40 px hoch, Kontur 5 px mittig in Flächenfarbe) und
   direkt daneben ein Kreis mit Pfeil (30 px). Beim Überfahren schwarz mit beerenfarbener
   Kontur, der Kreis wächst auf 36 px (Übergang 0,3 s wie im Prototyp).
   Klassen am Element „Hyperlink“: Schaltfläche (weiß), SchaltflächeBeere, SchaltflächeCreme;
   zusätzlich SchaltflächeGroß (41 px, Kreis 38 px), mitPfeilUnten (Ankerleiste), ohnePfeil. */
:is(.Schaltfläche, .SchaltflächeBeere, .SchaltflächeCreme) {
	--fl: var(--color_4);           /* Fläche */
	--sc: var(--color_1);           /* Schrift und Pfeil */
	--kreis: 30px;
	--kreis-hover: 36px;
	--pfeil: 19px;
	--pfeil-hover: 23px;
	--pad: 6.4px 12px 8px;
	&.SchaltflächeBeere { --fl: var(--color_1); --sc: var(--color_4); }
	&.SchaltflächeCreme { --fl: var(--color_2); }
	&.SchaltflächeGroß { --kreis: 38px; --kreis-hover: 45px; --pfeil: 24px; --pfeil-hover: 29px; --pad: 7.75px 15px 7.25px; }   /* Versalhöhe senkrecht mittig (vorher 5/10: 2,75 px zu hoch) */
	margin: 0;
	line-height: 0;

	& a {
		position: relative;
		display: inline-block;
		margin: 2.5px calc(var(--kreis) + 2.5px) 2.5px 2.5px;
		padding: var(--pad);
		border-radius: 50px;
		background: var(--fl);
		box-shadow: 0 0 0 2.5px var(--fl);
		color: var(--sc);
		font-size: var(--font_size);
		font-weight: 500;
		line-height: 1.1818;
		text-decoration: none;
		transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
		/* Kreis */
		&::after {
			content: '';
			position: absolute;
			left: calc(100% + 2.5px);
			top: 50%;
			width: var(--kreis);
			height: var(--kreis);
			border-radius: 50%;
			background: var(--fl);
			translate: 0 -50%;
			transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
		}
		/* Pfeil (Maske, übernimmt die Schriftfarbe — keine CSS-Filter) */
		&::before {
			content: '';
			position: absolute;
			z-index: 1;
			left: calc(100% + 2.5px + (var(--kreis) - var(--pfeil)) / 2);
			top: 50%;
			width: var(--pfeil);
			height: var(--pfeil);
			background: var(--sc);
			translate: 0 -50%;
			-webkit-mask: url('../img/pfeil.svg') center / contain no-repeat;
			mask: url('../img/pfeil.svg') center / contain no-repeat;
			transition: all 0.3s ease;
		}
		&:hover, &:focus-visible {
			background: var(--schwarz);
			box-shadow: 0 0 0 2.5px var(--color_1), inset 0 0 0 2.5px var(--color_1);
			color: var(--color_4);
			&::after { width: var(--kreis-hover); height: var(--kreis-hover); background: var(--schwarz); }
			&::before {
				left: calc(100% + 2.5px + (var(--kreis-hover) - var(--pfeil-hover)) / 2);
				width: var(--pfeil-hover); height: var(--pfeil-hover); background: var(--color_4);
			}
		}
	}
	&.mitPfeilUnten a::before { rotate: 90deg; }
	&.ohnePfeil a { margin-right: 2.5px; &::before, &::after { content: none; } }
}
/* Pille ohne Ziel (z. B. Partner ohne Website): Text-Element mit Klasse „Etikett“ */
.Etikett .rte > p:first-child {
	display: inline-block;
	margin: 2.5px;
	padding: 6.4px 12px 8px;
	border-radius: 50px;
	background: var(--color_1);
	box-shadow: 0 0 0 2.5px var(--color_1);
	color: var(--color_4);
	line-height: 1.1818;
}

/* -------------------------------------------------------------------- Formulare */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"]), select, textarea) {
	width: 100%;
	padding: 10px 14px;
	border: 2px solid var(--color_1);
	border-radius: 8px;
	background: var(--color_4);
	color: var(--color_1);
	font: inherit;
}
textarea {
	min-height: 9em;          /* Starthöhe; darunter schrumpft das Feld nicht */
	resize: vertical;         /* Ziehgriff bleibt für ältere Browser */
	field-sizing: content;    /* wächst mit dem Text */
}
:where(.widget) + :where(.widget) { margin-top: 20px; }
:where(.widget label) { display: block; margin-bottom: 6px; }
:where(.widget-checkbox, .widget-radio) label { display: inline; }
:where(button[type="submit"], input[type="submit"], .submit) {
	display: inline-block;
	padding: 6.4px 16px 8px;
	border: 0;
	border-radius: 50px;
	background: var(--color_1);
	box-shadow: 0 0 0 2.5px var(--color_1);
	color: var(--color_4);
	font: inherit;
	cursor: pointer;
	transition: background-color 0.3s ease;
	&:hover { background: var(--schwarz); }
}