/*
 * Komponente: Stat-Band (.stat-band) – siehe CLAUDE.md Abschnitt 11.4. Neu
 * seit "Unsere Partner" (page-partner.php): eine gemeinsame, organisch
 * geformte Fläche (analog zur Blob-Technik von .quote-highlight, siehe
 * components/quote-highlight.css) als Untergrund für ein normales
 * `.metrics`-Grid aus `.metric`-Kärtchen (siehe cards.css). Nur auf
 * page-partner.php geladen (siehe functions.php), daher trotz Ablage in
 * components/ analog zu map.css/form.css bedingt statt global enqueued.
 */
.stat-band {
	position: relative;
	background: var(--tint-green);
	border-radius: 55% 45% 50% 50% / 30% 30% 70% 70%;
	padding: 40px 60px;
}

/* Die .metric-Kärtchen sitzen hier direkt auf der Blob-Fläche statt auf dem
   sonst üblichen hellen Section-Hintergrund - die normale .metric-Kontur
   (siehe cards.css) wirkt darauf wie ein zusätzlicher Rahmen um einen
   Rahmen. Innerhalb von .stat-band daher randlos, mit weißem statt
   cremefarbenem Hintergrund (mehr Kontrast zur grünen Fläche, konsistent
   mit .card/.mini-card/.partner-card) und einem weichen Schatten statt der
   Kontur als Abgrenzung. Bewusst hier per Nachfahren-Selektor überschrieben
   statt einer neuen .metric-Modifier-Klasse, da es rein eine Frage des
   Untergrunds ist, auf dem die Karte sitzt. */
.stat-band .metric {
	background: none;
	border: none;
	box-shadow: none;
}

.stat-band-leaf {
	position: absolute;
	top: 50%;
	color: var(--green);
	opacity: .5;
}

.stat-band-leaf svg {
	width: 30px;
	height: 30px;
}

.stat-band-leaf.tl {
	left: 24px;
	transform: translateY(-50%) rotate(-20deg);
}

.stat-band-leaf.br {
	right: 24px;
	transform: translateY(-50%) rotate(160deg);
}

/* Breakpoint 900px – siehe CLAUDE.md Abschnitt 11.3. Die Blob-Form braucht
   viel horizontalen Platz für den Innenabstand - bei zwei statt vier Spalten
   (.metrics kollabiert selbst bereits bei 900px, siehe cards.css) vereinfacht
   sich das Band zu einer normalen abgerundeten Fläche ohne die dekorativen
   Blätter, damit nichts mit dem engeren Grid überlappt. */
@media (max-width: 900px) {
	.stat-band {
		padding: 32px 24px;
		border-radius: var(--radius-lg);
	}

	.stat-band-leaf {
		display: none;
	}
}