/* ==========================================================================
   Abendfriede Bestattungen — Grundlagen
   Farben, Schriften, Abstände und Grundgerüst. Die Werte stammen aus dem
   Figma-Entwurf „ABENDFRIEDE_magde_R6_mulish“ (Entwurfsbreite 1280 px).

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

/* -------------------------------------------------------------------- Schriften
   Lokal gehostet (keine Verbindung zu Google), Zeichensatz: vollständiges
   Westeuropäisch inkl. Umlaute, ß, Anführungszeichen, Gedankenstriche. */
@font-face {
	font-family: 'Mulish';
	src: url('../fonts/mulish-variabel.woff2') format('woff2');
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Mulish';
	src: url('../fonts/mulish-kursiv-variabel.woff2') format('woff2');
	font-weight: 200 1000;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Tangerine';
	src: url('../fonts/tangerine-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------- Farben, Maße */
:root {
	/* Farben aus dem Entwurf (Reihenfolge = Framework-Nummern 1–5) */
	--color_1: #a62f04;   /* Rostrot: Überschriften, Schaltflächen, Symbole */
	--color_2: #c9deed;   /* Hellblau: Flächen, Schaltflächen */
	--color_3: #fffaf3;   /* Creme: Seitengrund, Kopf- und Fußzeile */
	--color_4: #594f4c;   /* Braungrau: Fließtext */
	--color_5: #9d9d9c;   /* Grau: Zitate, Leitsatz */
	--white_alternate: var(--color_3);
	--font_color: var(--color_4);
	--border_color: var(--color_2);
	--border_radius: 20px;
	--button_border_radius: 8px;
	--swiper-theme-color: var(--color_1);

	/* Schrift: Fließtext Mulish 22/28 fett, Überschriften Mulish 30/38,
	   Schmuckschrift Tangerine. Unter 1280 px wird stufenlos verkleinert. */
	--font_family: 'Mulish', Arial, sans-serif;
	--font_schmuck: 'Tangerine', 'Mulish', cursive;
	--font_size: clamp(18px, 15.2px + 0.53vw, 22px);
	--font_weight: 700;
	--font_weight_strong: 900;
	--line_height: 1.2727;                                      /* 28/22 */
	--schrift_ueberschrift: clamp(24px, 19.8px + 0.8vw, 30px);  /* 30/38 */
	--schrift_schmuck_klein: clamp(48px, 33px + 2.9vw, 70px);   /* 70/70 */
	--schrift_schmuck: clamp(56px, 33px + 4.5vw, 90px);         /* 90/79 */
	--schrift_schmuck_gross: clamp(60px, 24px + 7.5vw, 120px);  /* 120/100 */

	/* Raster: Inhaltsspalte 1200 px (x = 40 … 1240 im Entwurf) */
	--content_width: 1200px;
	--horizontal_spacing: 40px;
	--vertical_spacing: 87px;    /* Abstand oben/unten in Abschnitten */
	--element_abstand: 9px;      /* Überschrift → Text → Schaltfläche */
	--grid_gap: 40px;
	--image_margin: 40px;
	--header_height: 0px;

	@media (max-width: 1023px) {
		--horizontal_spacing: 20px;
		--vertical_spacing: 50px;
		--grid_gap: 24px;
		--image_margin: 20px;
	}

	/* Abstandsstufen des Frameworks (AbstandObenS …) */
	--XXXXS: 5px;
	--XXXS: 9px;
	--XXS: 20px;
	--XS: 28px;
	--S: 40px;
	--M: 60px;
	--L: 87px;
	--XL: 150px;
	--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_3);
	color: var(--font_color);
	font-family: var(--font_family);
	font-size: var(--font_size);
	font-weight: var(--font_weight);
	line-height: var(--line_height);
}

:where(p, ul, ol) { margin: 0; }
:where(.rte) > * + :where(p, ul, ol, h2, h3, h4) { margin-top: calc(var(--line_height) * 1em); }
:where(.rte) :where(ul, ol) { padding-left: 1.2em; }
:where(.rte) li + li { margin-top: 0.35em; }
:where(strong, b) { font-weight: var(--font_weight_strong); }

:where(a) {
	color: var(--color_1);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}
:where(.rte) a { text-decoration: underline; }
:where(.rte) a:hover { text-decoration-thickness: 2px; }

:where(figure) { margin: 0; }
:where(img, video) { display: block; max-width: 100%; height: auto; }
:where(figure) picture { display: contents; }
:where(figcaption) { margin-top: 0.5em; font-size: 0.8em; }

.invisible {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

::selection { background: var(--color_1); color: #fff; }

/* Fokus: gut sichtbar, auf dunklen/roten Flächen weiß */
:focus:not(:focus-visible) { outline: none; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--color_1);
	outline-offset: 3px;
}
:where(.Hintergrund1, .SchaltflächeRot) :focus-visible,
:where(.SchaltflächeRot a):focus-visible { outline-color: #fff; }

[id] { scroll-margin-top: 1.5rem; }

/* Sprunglink „Zum Inhalt springen“ (nur bei Tastaturfokus sichtbar) */
.skip-link {
	position: fixed; top: -5rem; left: 1rem; z-index: 100;
	padding: 0.6em 1em; border-radius: 8px;
	background: var(--color_1); color: #fff; text-decoration: none;
	transition: top 0.15s ease;
	&:focus { top: 1rem; outline: 3px solid #fff; outline-offset: 2px; }
}

/* -------------------------------------------------------------------- Überschriften
   h1 = Seitentitel im Bildkopf (Schmuckschrift, groß, Creme)
   h2 = Abschnittstitel (Mulish 30, Rostrot)
   h3 = Zwischentitel (Mulish 30, Braungrau) */
:where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-weight: 400;
	text-wrap: wrap;                 /* wie Figma: Zeilen voll ausnutzen, nicht ausgleichen */
	overflow-wrap: break-word;
	hyphens: auto;
	hyphenate-limit-chars: 12 6 6;   /* nur lange Wörter trennen */
	@media (max-width: 767px) { text-wrap: balance; &:is(h2, h3, h4) { hyphens: manual; } }
}
:where(h1) {
	font-family: var(--font_schmuck);
	font-size: var(--schrift_schmuck_gross);
	line-height: 0.8333;            /* 100/120 */
	letter-spacing: 0.02em;
	color: var(--color_3);
}
:where(h2) {
	font-size: var(--schrift_ueberschrift);
	line-height: 1.2667;            /* 38/30 */
	color: var(--color_1);
}
:where(h3) {
	font-size: var(--schrift_ueberschrift);
	line-height: 1.2667;
	color: var(--color_4);
}
:where(h4) { font-size: 1em; font-weight: var(--font_weight_strong); color: var(--color_4); }

/* -------------------------------------------------------------------- Artikel-Raster
   Jeder Artikel ist ein Abschnitt über die volle Breite; seine Elemente laufen
   in der Inhaltsspalte (1200 px). „volleBreite“ (Framework) hebt das auf. */
main .mod_article { position: relative; }
:where(main .mod_article) { padding-block: var(--vertical_spacing); }
:where(main .mod_article) > * {
	width: calc(var(--content_width) + var(--horizontal_spacing) * 2);
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--horizontal_spacing);
}
:where(main .mod_article) > :where(* + *) { margin-top: var(--element_abstand); }

/* Fließtext-Breite im Entwurf: 987 px linksbündig */
:where(main .mod_article > .content-text, main .mod_article > .content-headline) > :where(.rte, h2, h3) { max-width: 987px; }

/* Bilder in Elementen: abgerundete Ecken wie im Entwurf (20 px) */
:where(.content-image, .content-text) :where(img) { border-radius: var(--border_radius); }
:where(.volleBreite) img { border-radius: 0; }

/* Bildelemente füllen ihre Spalte */
:where(.content-image) img { width: 100%; }

/* Elementgruppen ohne eigenes Raster: Abstände wie im Artikel */
:where(.content-element-group) > :where(* + *) { margin-top: var(--element_abstand); }


/* Framework-Fehler ausgleichen: „AbstandAußenOben…“ setzt unter 768 px
   padding-top: 20px zusätzlich zum vollen margin-top (statt ihn zu verkleinern). */
@media (max-width: 767px) {
	main :is(.AbstandAußenObenXS, .AbstandAußenObenS, .AbstandAußenObenM, .AbstandAußenObenL, .AbstandAußenObenXL, .AbstandAußenObenXXL):not(.Kasten, .KastenZentriert, .Kreis) {
		margin-top: 28px;
		padding-top: 0;
	}
}
/* Ebenso setzt es die Artikel-Innenabstände S–XXXL unter 768 px pauschal auf 20 px; trifft ein solcher
   Abschnitt auf einen mit „AbstandUnten0“, bleiben nur 20 px. Wie bei den Pixelklassen: 30 px bis 50 px,
   darüber 55 % des Werts, höchstens 60 px. */
@media (max-width: 767px) {
	main .mod_article.AbstandObenS { padding-top: 30px; }
	main .mod_article.AbstandObenM { padding-top: 33px; }
	main .mod_article.AbstandObenL { padding-top: 48px; }
	main .mod_article:is(.AbstandObenXL, .AbstandObenXXL, .AbstandObenXXXL) { padding-top: 60px; }
	main .mod_article.AbstandUntenS { padding-bottom: 30px; }
	main .mod_article.AbstandUntenM { padding-bottom: 33px; }
	main .mod_article.AbstandUntenL { padding-bottom: 48px; }
	main .mod_article:is(.AbstandUntenXL, .AbstandUntenXXL, .AbstandUntenXXXL) { padding-bottom: 60px; }
}

/* Abschnittstitel (h2) → folgender Inhalt: im Entwurf ca. 61 px, weil die
   Titelfelder dort höher sind als die Schrift. Mit „AbstandAußenOben…“ am
   folgenden Element lässt sich das je Stelle ändern. */
:where(main .mod_article) > :where(h2.content-headline:not(.Schmuckschrift, .SchmuckschriftKlein, .SchmuckschriftGroß)) + :where(*),
:where(main .mod_article > .content-text) > :where(h2) + :where(.rte) { margin-top: 61px; }
@media (max-width: 767px) {
	:where(main .mod_article) > :where(h2.content-headline:not(.Schmuckschrift, .SchmuckschriftKlein, .SchmuckschriftGroß)) + :where(*),
	:where(main .mod_article > .content-text) > :where(h2) + :where(.rte) { margin-top: 24px; }
}


/* -------------------------------------------------------------------- Formulare
   Im Entwurf nicht gestaltet; abgeleitet aus Schaltflächen und Kästen (weiße Felder,
   runde Ecken 8 px, Fokus in Rostrot). „halbeBreite“ an einem Feld: zwei Felder je Zeile. */
:where(main) form .formbody {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 30px;
	max-width: 987px;
	@media (max-width: 700px) { grid-template-columns: 1fr; }
	& > .widget { grid-column: 1 / -1; margin: 0; }
	& > .widget.halbeBreite { grid-column: auto; @media (max-width: 700px) { grid-column: 1 / -1; } }
	& label, & legend { display: block; margin-bottom: 6px; font-weight: 700; }
	& .mandatory .invisible { position: absolute; }
	& :is(input.text, input[type="email"], input[type="tel"], select, textarea) {
		width: 100%;
		padding: 12px 14px;
		border: 1px solid var(--color_4);
		border-radius: 8px;
		background: #fff;
		color: var(--color_4);
		font: 400 var(--font_size)/1.3 var(--font_family);
		&:focus-visible { outline: 3px solid var(--color_1); outline-offset: 1px; border-color: var(--color_1); }
	}
	& textarea { min-height: 9em; resize: vertical; field-sizing: content; }
	& .widget-checkbox fieldset { margin: 0; padding: 0; border: 0; }
	& .widget-checkbox span { display: flex; gap: 12px; align-items: flex-start; }
	& .widget-checkbox input { flex: 0 0 22px; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--color_1); }
	& .widget-checkbox label { margin: 0; font-weight: 400; }
	& .widget-submit button {
		position: relative;
		padding: 13px 16px 16px;
		border: 0;
		border-radius: 8px;
		background: #fff;
		color: var(--color_1);
		font: 700 var(--font_size)/28px var(--font_family);
		cursor: pointer;
		&::after { content: ''; position: absolute; inset: 6px; border: 2px solid currentColor; border-radius: 3px; pointer-events: none; }
		&:hover { box-shadow: inset 0 0 0 2px var(--color_1); }
	}
	& p.error { color: var(--color_1); font-weight: 700; margin: 0 0 6px; }
}