/* ============================================================
   PRZ Kennzahlen (Stats Bar)
   Full-Bleed graues Band mit 4 Kennzahlen (große Zahl H2 + Label).
   Desktop 4 Spalten, Tablet/Mobile 2 Spalten.
   ============================================================ */

.prz-stats {
	background-color: var(--prz-color-bg-alt);
	padding-block: var(--prz-space-xl);
	/* Full-Bleed auf allen Breakpoints — alignfull allein bricht in
	   unserem .prz-container nicht aus, daher der 100vw-Breakout
	   (wie bei cta-image-banner / hero). */
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Innerer Container: auf Site-Breite begrenzt + zentriert. Grid mit
   2 Spalten (Mobile/Tablet), 4 Spalten ab Desktop. */
.prz-stats__inner {
	width: 100%;
	max-width: calc(var(--prz-container-max) + 2 * var(--prz-container-padding));
	margin-inline: auto;
	padding-inline: var(--prz-container-padding);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--prz-space-l);
}

@media (min-width: 992px) {
	.prz-stats__inner {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Eine Kennzahl: Zahl + Label zentriert, kleiner Abstand dazwischen. */
.prz-stats__item {
	display: flex;
	flex-direction: column;
	gap: var(--prz-space-2xs);
	text-align: center;
	/* WP hängt per :where(.is-layout-flow) > * ein margin-block-start: 1rem
	   an alle Grid-Items außer dem ersten (:first-child) — dadurch stünde
	   Spalte 1 höher als 2–4. Margin auf den Items resetten; Abstände
	   regelt ohnehin der Grid-Gap. */
	margin-block: 0;
}

/* WP-Flow-Margins der Kinder resetten — Abstand regelt der flex-gap. */
.prz-stats__item > * {
	margin-block-start: 0;
	margin-block-end: 0;
}