/* ==========================================================================
   Bestattungen Joisten — Grundlagen
   Farben, Schriften, Abstände, Schaltflächen und Grundgerüst. Alle Werte
   stammen aus dem Figma-Entwurf „JOISTEN_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), beide unter der SIL Open Font License.
   Lexend als variable Schrift (Strichstärke 100–900), Zeichensatz Westeuropäisch. */
@font-face {
	font-family: 'Lexend';
	src: url('../fonts/lexend.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Great Vibes';
	src: url('../fonts/great-vibes.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------- Farben, Maße */
:root {
	--color_1: #521149;   /* Aubergine: Schrift, Rahmen, dunkle Flächen, Menü */
	--color_2: #e7dfe6;   /* Flieder hell: Seitengrund */
	--color_3: #ffffff;   /* Weiß: Schaltflächen-Kästchen, helle Kästen, Schrift auf Bildern */
	--color_4: #000000;
	--color_5: #e7dfe6;
	--white_alternate: var(--color_2);
	--font_color: var(--color_1);
	--border_color: var(--color_1);
	--swiper-theme-color: var(--color_1);

	/* Schrift: Fließtext Lexend 400 25/33 (Einleitungen) und 20/26 (Kästen, Listen),
	   Titel Lexend 250 70/80, Bildkopf Lexend 100 130/130,
	   Schmuckschrift Great Vibes 40/45, 65/70 und 100/95. Unter 1280 px stufenlos kleiner. */
	--font_family: 'Lexend', Arial, sans-serif;
	--font_schmuck: 'Great Vibes', 'Lexend', cursive;
	--font_size: clamp(18px, 14.25px + 0.84vw, 25px);            /* 25/33 */
	--font_weight: 400;
	--font_weight_strong: 600;
	--line_height: 1.32;
	--schrift_text: clamp(17px, 15.4px + 0.36vw, 20px);          /* 20/26 */
	--zeilen_text: 1.3;
	--schrift_titel: clamp(38px, 21px + 3.8vw, 70px);            /* 70/80 */
	--schrift_riesig: clamp(56px, 16.5px + 8.9vw, 130px);        /* 130/130 */
	--schrift_schmuck_klein: clamp(30px, 24.7px + 1.2vw, 40px);  /* 40/45 */
	--schrift_schmuck: clamp(40px, 26.7px + 3vw, 65px);          /* 65/70 */
	--schrift_schmuck_gross: clamp(54px, 29.5px + 5.5vw, 100px); /* 100/95 */

	/* Raster: Inhalte bei x = 60 … 1220 (Entwurf), zwei Spalten 528 px bei x = 60 und 692 */
	--content_width: 1160px;
	--horizontal_spacing: 60px;
	--spalte: 528px;
	--vertical_spacing: 100px;
	--grid_gap: 40px;
	--header_height: 0px;

	@media (max-width: 1023px) {
		--horizontal_spacing: 32px;
		--vertical_spacing: 70px;
		--grid_gap: 24px;
	}
	@media (max-width: 599px) {
		--horizontal_spacing: 20px;
		--vertical_spacing: 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);
}

: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_1);
	outline-offset: 3px;
}
:where(.HintergrundDunkel, .KastenDunkel, .Bildkopf, .navigation-main) :where(a, button):focus-visible { outline-color: var(--color_3); }

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--color_1);
	color: var(--color_3);
	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: Lexend 250 70/80. Schmuckschrift-Teile (Great Vibes) als <span class="Schmuck">.
   h3: Lexend 400 25/33 (Kasten-Titel „Ist der Tod zu Hause eingetreten?“).
   Schmuckschrift-Titel ganzer Zeilen: Klasse „Schmuck“ (65/70), „SchmuckKlein“ (40/45),
   „SchmuckGroß“ (100/95) am Absatz oder an der Überschrift. */
:where(h1, h2, h3, h4) {
	margin: 0;
	font-weight: 400;
	overflow-wrap: break-word;
	hyphens: manual;
	@media (max-width: 599px) { hyphens: auto; }
}
:where(h1, h2) {
	font-size: var(--schrift_titel);
	font-weight: 250;
	line-height: 1.1429;     /* 80/70 */
}
:where(h3, h4) {
	font-size: var(--font_size);
	line-height: var(--line_height);
}
.Schmuck, .SchmuckKlein, .SchmuckGroß {
	font-family: var(--font_schmuck);
	font-weight: 400;
}
.Schmuck { font-size: var(--schrift_schmuck); line-height: 1.0769; }            /* 70/65 */
.SchmuckKlein { font-size: var(--schrift_schmuck_klein); line-height: 1.125; }  /* 45/40 */
.SchmuckGroß { font-size: var(--schrift_schmuck_gross); line-height: 0.95; }    /* 95/100 */
p.Schmuck, p.SchmuckKlein, p.SchmuckGroß, :is(h2, h3).Schmuck, :is(h2, h3).SchmuckKlein, :is(h2, h3).SchmuckGroß { display: block; }
:where(h1, h2, h3) :is(.Schmuck, .SchmuckKlein, .SchmuckGroß) { line-height: inherit; }

/* Text 20/26 (Kästen, Listen, Bildunterschriften) */
.TextKlein, .TextKlein .rte { font-size: var(--schrift_text); line-height: var(--zeilen_text); }

/* -------------------------------------------------------------------- Schaltflächen
   Komponente „button“ im Entwurf: Text (Lexend 25/33) und rechts daneben ein weißes Kästchen
   (29 × 29, Radius 3,5) mit Pfeil (12 × 12), Abstand 18 px. Beim Überfahren (Prototyp:
   „Smart Animate“ 0,3 s) wächst das Kästchen auf 33 × 33, der Pfeil auf 19 × 19 (Strich 2 px)
   und der Abstand auf 25 px. „button_small“: Lexend 20/26, sonst gleich.
   Klassen am Element „Hyperlink“: Schaltfläche, zusätzlich SchaltflächeKlein,
   SchaltflächeDunkel (Variante „dark“: Schrift und Kästchen flieder, für dunkle Flächen),
   mitPfeilUnten (Ankerleiste). */
:is(.Schaltfläche, .SchaltflächeKlein) {
	--sc: var(--color_1);            /* Schrift */
	--kasten: var(--color_3);        /* Kästchen */
	--pfeilfarbe: var(--color_1);
	--k: 29px;
	--k-hover: 33px;
	--p: 12px;
	--p-hover: 19px;
	margin: 0;
	&.SchaltflächeDunkel { --sc: var(--color_2); --kasten: var(--color_2); }

	& a {
		display: inline-flex;
		align-items: center;
		gap: 18px;
		min-height: var(--k-hover);
		color: var(--sc);
		font-size: var(--font_size);
		line-height: var(--line_height);
		text-decoration: none;
		transition: gap 0.3s ease;
		&::after {
			content: '';
			flex: 0 0 var(--k);
			width: var(--k);
			height: var(--k);
			border-radius: calc(var(--k) * 0.12);
			/* Pfeil in beiden Varianten aubergine (Entwurf) */
			background: var(--kasten) url('../img/pfeil.svg') center / var(--p) var(--p) no-repeat;
			transition: all 0.3s ease;
		}
		&:hover, &:focus-visible {
			gap: 25px;
			&::after { flex-basis: var(--k-hover); width: var(--k-hover); height: var(--k-hover); background-size: var(--p-hover) var(--p-hover); }
		}
	}
	&.mitPfeilUnten a::after { rotate: 90deg; }
}
.SchaltflächeKlein a { font-size: var(--schrift_text); line-height: var(--zeilen_text); }

/* -------------------------------------------------------------------- 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: 10px;
	background: var(--color_3);
	color: var(--color_1);
	font: inherit;
	font-size: var(--schrift_text);
}
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; font-size: var(--schrift_text); }
:where(.widget-checkbox, .widget-radio) label { display: inline; }
:where(button[type="submit"], input[type="submit"], .submit) {
	display: inline-block;
	padding: 8px 20px;
	border: 2px solid var(--color_1);
	border-radius: 10px;
	background: var(--color_1);
	color: var(--color_2);
	font: inherit;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	&:hover { background: var(--color_3); color: var(--color_1); }
}