/* Webux stats: grid plus single stat. */
.webux-stats {
	display: grid;
	grid-template-columns: repeat(var(--webux-cols, 4), minmax(0, 1fr));
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.webux-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.webux-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.webux-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
}

.webux-stat__value {
	font-size: var(--wp--preset--font-size--xx-large, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--primary, #2563eb);
}

.webux-stat__label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--muted, #6b7280);
}

/* Optionale Varianten. Alle Regeln hängen an einer Modifier-Klasse, die nur
   für Nicht-Standardwerte ausgegeben wird — ohne gesetztes Feld greift keine
   davon. Der Wrapper ist doppelt notiert (0,3,0), damit die Varianten die
   ungescopten .webux-stat*-Regeln aus site.css (0,2,0, u. a.
   .has-accent-background-color, .lv-hero-stats) unabhängig von der
   Ladereihenfolge schlagen. */
.webux-stats.webux-stats--value-signal .webux-stat__value {
	color: var(--wp--preset--color--signal, var(--wp--preset--color--primary, #2563eb));
}

.webux-stats.webux-stats--value-contrast .webux-stat__value {
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.webux-stats.webux-stats--size-large .webux-stat__value {
	font-size: 46px;
	font-weight: 800;
}

.webux-stats.webux-stats--label-caps .webux-stat__label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.78px;
}

/* ===== Hintergrundband (opt-in) ===========================================
   Ohne gesetztes Feld ('none') wird keine dieser Klassen ausgegeben - das
   Raster liegt dann wie bisher direkt auf dem Seitenhintergrund. Die Füllung
   selbst kommt aus den Kern-Preset-Klassen (.has-surface-background-color /
   .has-primary-background-color); hier stehen nur Innenabstand, Radius und die
   Textfarben. */
.webux-stats--bg-surface,
.webux-stats--bg-primary {
	box-sizing: border-box;
	padding: 40px 32px;
	border-radius: 24px;
}

@media (max-width: 600px) {
	.webux-stats--bg-surface,
	.webux-stats--bg-primary {
		padding: 28px 20px;
	}
}

/* --- Fläche ---------------------------------------------------------------
   Die Standard-Zahlenfarbe primary erreicht auf der Fläche nur 2.83:1
   (#8A9A7B auf #faf8f2) und verfehlt damit selbst die 3:1 für grosse Schrift.
   Deshalb rückt sie auf dem Band eine Stufe dunkler: primary-dark auf Fläche =
   4.29:1 (Liventra #6D7A61 auf #faf8f2), 5.29:1 (Theme-Default #6f665e),
   3.48:1 (Stöckli #009C3F auf #fbfbf8) - alle über 3:1 für die 40px-Zahl.
   Die :not()-Kette lässt eine bewusst gewählte Zahlenfarbe gewinnen; signal
   liegt bei 3.48:1 (Liventra) bzw. 4.24:1 (Stöckli), contrast weit darüber. */
.webux-stats.webux-stats--bg-surface:not(.webux-stats--value-signal):not(.webux-stats--value-contrast) .webux-stat__value {
	color: var(--wp--preset--color--primary-dark, #6f665e);
}

/* Die Beschriftung steht sonst in muted und käme auf der Fläche auf 3.48:1 -
   zu wenig für 14px-Fliesstext (AA verlangt 4.5:1). Auf dem Band trägt sie
   deshalb die Textfarbe: 16.39:1 (Liventra), 14.21:1 (Stöckli). */
.webux-stats.webux-stats--bg-surface .webux-stat__label {
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

/* --- Primärfarbe ----------------------------------------------------------
   Auf dem hellen Primärband ist WEISS keine Option: 3.00:1 (Liventra
   #8A9A7B), 3.81:1 (Theme-Default #8b8178), 3.23:1 (Stöckli #00A54F) - alle
   unter AA. Zahl und Beschriftung stehen deshalb in der dunklen Textfarbe:
   5.79:1 (#1a1a1a auf #8A9A7B), 4.57:1 (#1a1a1a auf #8b8178), 4.56:1
   (#222a25 auf #00A54F). Die Hierarchie trägt der Schriftgrad, nicht die
   Farbe - die Zahlenfarb-Auswahl (primary/signal/contrast) wird auf diesem
   Band bewusst überstimmt, weil primary und signal darauf verschwinden.
   Die Regeln stehen nach den Farbvarianten und haben mit (0,3,0) dieselbe
   Spezifität, gewinnen also über die Reihenfolge; gegenüber den ungescopten
   0,2,0-Regeln aus site.css (u. a. .has-accent-background-color) gewinnen sie
   unabhängig von der Ladereihenfolge. */
.webux-stats.webux-stats--bg-primary .webux-stat__value,
.webux-stats.webux-stats--bg-primary .webux-stat__label {
	color: var(--wp--preset--color--contrast, #1a1a1a);
}