/* ==========================================================================
   Der neue Bestattertag — Grundlagen
   Farben, Schriften, Abstände und Grundgerüst. Die Werte stammen aus dem
   XD-Entwurf „Bestattertag.xd“ (Entwurfsbreite 1920 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.
   ========================================================================== */

/* -------------------------------------------------------------------- Schrift
   Source Sans 3 (SIL Open Font License), lokal gehostet — keine Verbindung zu Google. */
@font-face {
	font-family: 'Source Sans 3';
	src: url('../fonts/source-sans-3-latin-wght-normal.woff2') format('woff2');
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Sans 3';
	src: url('../fonts/source-sans-3-latin-ext-wght-normal.woff2') format('woff2');
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Source Sans 3';
	src: url('../fonts/source-sans-3-latin-wght-italic.woff2') format('woff2');
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

/* -------------------------------------------------------------------- Farben, Maße */
:root {
	/* Farben aus dem Entwurf (Reihenfolge = Framework-Nummern 1–5) */
	--color_1: #e9511d;   /* Orange: Seitentitel, große Flächen, Logo */
	--color_2: #102a43;   /* Nachtblau: Seitengrund */
	--color_3: #273e55;   /* Blaugrau: Schaltflächen, Titel auf Orange, „menü“ */
	--color_4: #cddfad;   /* Hellgrün: Logo-Laufband */
	--color_5: #2d3c1b;   /* Dunkeloliv: Text auf Orange */
	--font_color: #fff;
	--white_alternate: #fff;
	--border_color: rgba(255, 255, 255, 0.25);
	--border_radius: 15px;
	--button_border_radius: 15px;
	--flaechen_radius: clamp(60px, 7.8125vw, 150px);   /* runde Ecken der orangen Flächen: 150 px */

	/* Schrift: Fließtext 24/35 halbfett, Seitentitel 60 fett, Aussagen 60 extrafett,
	   große Aussage 80, Menü 40. Unter 1920 px wird stufenlos verkleinert. */
	--font_family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
	--font_size: clamp(18px, 13.5px + 0.55vw, 24px);
	--font_weight: 600;
	--font_weight_strong: 700;
	--line_height: 1.4583;                                  /* 35/24 */
	--schrift_titel: clamp(36px, 3.125vw, 60px);            /* 60 */
	--schrift_gross: clamp(40px, 4.1667vw, 80px);           /* 80 */
	--schrift_menue: clamp(28px, 2.0833vw, 40px);           /* 40 */
	--schrift_zwischen: clamp(26px, 2.0833vw, 40px);        /* 40 */
	--schrift_klein: clamp(16px, 1.0417vw, 20px);           /* 20 */

	/* Raster: Inhalte beginnen bei x = 235 (Seitentitel, Texte). */
	--rand: clamp(20px, 12.24vw, 235px);
	--content_width: 1450px;
	--horizontal_spacing: var(--rand);
	--vertical_spacing: clamp(50px, 5.2vw, 100px);
	--element_abstand: clamp(20px, 1.5625vw, 30px);
	--grid_gap: clamp(20px, 2vw, 39px);
	--image_margin: 40px;
	--header_height: 0px;

	/* Abstandsstufen des Frameworks (AbstandObenS …) */
	--XXXXS: 5px;
	--XXXS: 10px;
	--XXS: 20px;
	--XS: 25px;
	--S: 40px;
	--M: 60px;
	--L: 100px;
	--XL: 200px;
	--XXL: 300px;
	--XXXL: 400px;

	/* Handy: Überschriften kleiner, damit lange Wörter und Daten nicht zu oft umbrechen */
	@media (max-width: 767px) {
		--schrift_titel: 30px;
		--schrift_gross: 32px;
		--schrift_zwischen: 23px;
		--schrift_menue: 26px;
	}
}

/* -------------------------------------------------------------------- Seitenübergänge (Standard §10) */
@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: dark;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	background: var(--color_2);
	@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) { 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(strong, b) { font-weight: var(--font_weight_strong); }

:where(a) {
	color: inherit;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
:where(.rte) a { text-decoration: underline; text-decoration-color: var(--color_1); }
:where(.rte) a:hover { text-decoration-color: currentColor; }

: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 Orange 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, .FlächeOrange) :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: 200;
	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 (60 fett, Orange; auf orangen Flächen Blaugrau)
   h2 = Aussage (60 extrafett, weiß)
   h3 = Zwischentitel (40 fett) */
:where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: manual;   /* keine Silbentrennung in Überschriften; nur überlange Wörter brechen um */
}
:where(h1) { font-size: var(--schrift_titel); color: var(--color_1); }
:where(h2) { font-size: var(--schrift_titel); font-weight: 800; color: #fff; }
:where(h3) { font-size: var(--schrift_zwischen); color: #fff; }
:where(h4) { font-size: 1em; }

/* -------------------------------------------------------------------- Artikel-Raster
   Jeder Artikel ist ein Abschnitt über die volle Breite; seine Elemente laufen
   in der Inhaltsspalte (ab x = 235). „volleBreite“ (Framework) hebt das auf. */
main { overflow-x: clip; }   /* Einblendungen von der Seite erzeugen nie ein Querscrollen */
main .mod_article { position: relative; }
:where(main .mod_article) { padding-block: var(--vertical_spacing); }
:where(main .mod_article > .mod_article__inner, main .mod_article) > :where(*:not(.mod_article__inner)) {
	width: calc(var(--content_width) + var(--horizontal_spacing) * 2);
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--horizontal_spacing);
}
:where(main .mod_article, main .mod_article__inner) > :where(* + *) { margin-top: var(--element_abstand); }

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

/* -------------------------------------------------------------------- Formulare (Grundwerte; Gestaltung in bausteine.css) */
:where(input, select, textarea, button) { font: inherit; color: 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 (Standard §11) */
}