/* -------------------------------------------------- */
/* Zahlen                                               */
/* -------------------------------------------------- */

.section--zahlen h2 {
	color: #fff;
}

.zahlen__intro {
	max-width: 640px;
	color: #fff;
}

.zahlen-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}

/* Same material as .leistung-card (07-leistungen.css): an opaque white card
   everywhere, not a glass panel on the gradient band and a second look on
   white. No hover lift: unlike .leistung-card this isn't a link, and a card
   that visibly reacts to the pointer without doing anything when clicked
   reads as a broken control rather than a stat. */
.zahl-card {
	--radius-child: var(--radius-nested);

	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: #fff;
	box-shadow: var(--shadow-card);
	border-radius: var(--radius);
	padding: 2rem;
}

/* Sits in the row beside the stat rather than straddling the card corner
   the way .leistung-card's badge does (07-leistungen.css) — this card is a
   compact horizontal row, not a padded block with room to cut a notch out
   of, so the plain .icon-tile base (01-base.css) fits better in flow than
   its absolute-positioned override.

   Solid brand colour rather than the .icon-tile default's translucent wash,
   same reasoning as .leistung-card's badge and
   .warum-letsdoo-punkt .icon-tile: this card is opaque white, and the
   default wash is tuned to read on the gradient band, not on white. */
.zahl-card .icon-tile {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	margin-bottom: 0;
	background: var(--color-gradient-end);
	color: #fff;
	font-size: 1.45rem;
}

.zahl-card__text {
	display: flex;
	flex-direction: column;
}

/* On the gradient band the white card reads on its own, same as
   .leistung-card. On a white section (the Zahlen block with its background
   switch off) it gets the same hairline every other card on white uses. Only
   the block can land on white — the About page's Zahlen section is always on
   the gradient. */
.ld-block-section:not(:has(> .section__bg-photo)) .zahl-card {
	border: var(--border-hairline);
}

/* Gradient-clipped, like .leistung-card__more — the number is the one accent
   colour on an otherwise ink-and-white card. */
.zahl-card__wert {
	font-family: var(--font-display);
	font-size: var(--text-stat);
	line-height: 1;
	background: var(--color-gradient-start);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.zahl-card__label {
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--text-xs);
	color: var(--color-body);
}