/**
*  Standardseite (Design „261012-Standardseite-v1“)
*
*  Bis 991px: eine Spalte, Seitenleiste unter dem Inhalt.
*  Ab 992px: Inhalt links, Seitenleiste (Bild, Menü, Kontaktbox) rechts.
*
*  Kontraste (WCAG AA, geprüft, auf --paper):
*  - Dachzeile --fresh-3: 4,5 : 1
*  - Titel     --ink-navy: 15 : 1
*  - Einleitung --ink-navy-soft: 12 : 1
**/

.c-page {
	padding-block: var(--space-m) var(--space-xl);
	background: var(--surface-page);
}

.c-page__crumbs {
	margin-block-end: var(--space-m);
}

.c-page__layout {
	display: grid;
	gap: var(--space-xl);
}

.c-page__main {
	min-inline-size: 0;
}

/* Titelblock mit farbigem Streifen */
.c-page .c-headlines {
	padding-block-end: var(--space-m);
	border-block-end: 1px solid var(--paper-line);
}

.c-page .c-headlines__eyebrow {
	--eyebrow-color: var(--color-accent-strong);
	margin-block-end: var(--space-2xs);
}

.c-page .c-headlines--h1 {
	margin: 0;
	padding-inline-start: var(--space-s);
	border-inline-start: 4px solid var(--stripe);
	color: var(--ink-navy);
	font-family: var(--font-editorial);
	font-size: var(--fs-h1);
	font-weight: 800;
	letter-spacing: var(--ls-h1);
	line-height: var(--lh-h1);
	text-wrap: balance;
}

.c-page .c-headlines__lead {
	max-inline-size: 38rem;
	margin: var(--space-s) 0 0;
	padding: 0;
	padding-inline-start: calc(var(--space-s) + 4px);
	color: var(--ink-navy-soft);
	font-family: var(--font-interface);
}

/* Inhalt: gestreifte Zwischenüberschriften (h2 und h3), Linie zwischen den Abschnitten */
.c-page__content {
	max-inline-size: none;
	margin-block-start: var(--space-m);

	& h2,
	& h3 {
		position: relative;
		margin-block: var(--space-l) var(--space-xs);
		padding-inline-start: var(--space-s);
		border-inline-start: 4px solid var(--stripe);
		font-size: var(--fs-h2);
		font-style: normal;

		&:not(:first-child)::before {
			content: "";
			position: absolute;
			inset-block-start: calc(-1 * var(--space-m));
			inset-inline: calc(-1 * var(--space-s) - 4px) 0;
			border-block-start: 1px solid var(--paper-line);
		}
	}

	& h3 {
		font-size: var(--fs-h3);
	}

	/* Fließtext in Merriweather wie in den Artikeln */
	& p,
	& li {
		font-family: var(--font-editorial);
		font-size: var(--fs-body);
	}
}

/* Module einer Modularseite: Abstände wie im Fließtext.
   Die Hintergrundfarbe kommt aus `--module-bg` (Inline-Style des Moduls bzw. Modulklasse) und
   geht über die volle Bildschirmbreite: Der Schatten spreizt sich zu beiden Seiten, clip-path
   schneidet ihn oben und unten am Modul ab. */
.c-page__content .l-module {
	margin: 0;
	padding-block: 0 var(--space-m);
	background-color: var(--module-bg, transparent);
	box-shadow: 0 0 0 100vmax var(--module-bg, transparent);
	clip-path: inset(0 -100vmax);
}

.c-page__content .l-module[style*="--module-bg"] {
	padding-block-start: var(--space-m);
}

/* Modularseite: Kopf (Claim oder Titelblock) über der vollen Breite, darunter Inhalt und Seitenleiste */
.c-page__head + .c-page__layout {
	margin-block-start: var(--space-m);

	& .c-page__content {
		margin-block-start: 0;
	}
}

/* Claim: das nächste Modul schließt ohne Streifen an (Abstand liefern die Module selbst) */
.c-page__head--claim + .c-page__layout {
	margin-block-start: 0;
}

/* Modularseite ohne Claim: kein Brotkrumen-Bereich, dafür mehr Abstand unter dem Header */
.c-page--modular-plain {
	padding-block-start: var(--space-xl);
}

/* Modularseite mit Claim: das erste Modul schließt an den Header an */
.c-page--modular {
	padding-block-start: 0;
}

.c-page--modular .c-page__content {
	margin-block-start: 0;
}

.c-page__content .l-module .l-wrapper {
	inline-size: 100%;
	margin-inline: 0;
}

.c-page__aside {
	display: grid;
	gap: var(--space-m);
	align-content: start;
	min-inline-size: 0;
}

.c-page__toc {
	margin-block-start: var(--space-m);
}

/* Kleine Bildschirme: nur das Inhaltsverzeichnis steht oben, der Rest der Seitenleiste unter dem Inhalt.
   `display: contents` macht die Kinder der Seitenleiste zu Grid-Elementen des Layouts (order). */
@media (max-width: 991.98px) {

	.c-page__layout--aside > .c-page__aside {
		display: contents;
	}

	.c-page__layout--aside > .c-page__aside > * {
		order: 2;
	}

	.c-page__layout--aside > .c-page__aside > .c-page__toc {
		order: 0;
	}

	.c-page__layout--aside > .c-page__main {
		order: 1;
	}
}

.c-page__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	border-radius: 0.35rem;
	object-fit: cover;
}

@media (min-width: 992px) {

	.c-page__layout--aside {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: var(--space-2xl);
		align-items: start;
	}

	/* Test: Seitenleiste bleibt beim Scrollen stehen; bei hoher Leiste scrollt sie in sich */
	.c-page__aside {
		position: sticky;
		inset-block-start: calc(var(--header-height, 4.5rem) + var(--space-m));
		max-block-size: calc(100svh - var(--header-height, 4.5rem) - 2 * var(--space-m));
		max-inline-size: 26rem;
		overflow-y: auto;
	}
}