/**
 * Layout-Grundgerüst (Client-First-Prinzip)
 *
 *   <section class="section">            Semantik + Hintergrund
 *     <div class="container">            Seitenrand + Maximalbreite
 *       Inhalt
 *
 * Vertikaler Rhythmus: Sektionen im <main> haben keinen eigenen Außenabstand;
 * .page-sections setzt den Abstand zwischen ihnen zentral über --section-gap.
 */
.container {
	margin-inline: auto;
	max-inline-size: calc(var(--size-container) + 2 * var(--gutter));
	padding-inline: var(--gutter);
	width: 100%;
}

.container--measure {
	max-inline-size: calc(var(--size-measure) + 2 * var(--gutter));
}

/* Volle Breite minus Seitenrand (Hero, Werte-Panel) – ohne 100vw-Scrollbalken */
.container--inset {
	margin-inline: auto;
	max-inline-size: none;
	padding-inline: var(--gutter);
}

.site-main {
	display: block;
	padding-block-end: var(--section-gap);
}

.page-sections {
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
}

.page-sections > :first-child.section--flush-top {
	margin-block-start: 0;
}

/* Erste Sektion ohne Hero: Abstand zum Header */
.page-sections--no-hero {
	padding-block-start: var(--section-gap-tight);
}

.stack > * + * {
	margin-block-start: var(--stack-md);
}

.cluster {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}