/**
 * Kennzahlen.
 *
 * Desktop: die Flaeche ist so breit wie der Container (gedacht: „Breiter +20 %“ wie
 * der Kopfbereich), Titel und Zahlen stehen innen auf der Inhaltskante der Seite
 * (--dze-raster aus basis.css). Handy: die Flaeche laeuft randlos bis an den
 * Bildschirmrand, der Text steht auf derselben 20px-Linie wie der Rest der Seite.
 *
 * @package DZ_Elements
 */

.dze-kz {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	padding-inline: var(--dze-raster);
	background: var(--dze-kz-flaeche, var(--ast-global-color-7));
}

.dze-kz-flaeche-ohne .dze-kz {
	--dze-kz-flaeche: transparent;
	padding-block: 0;
}

.dze-kz__kopf {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* (0,2,0) gegen Astras `.entry-content h2` - der Abstand kommt aus dem `gap`. */
.dze-kz .dze-kz__titel {
	margin: 0;
}

/*
 * 10rem Mindestbreite je Eintrag: auf dem Tablet (768px) passen drei nebeneinander.
 * Mit 13rem waren es zwei plus einer allein darunter - eine Reihe, die unvollstaendig
 * aussieht. Auf dem Handy reicht der Platz fuer keine zwei, dann untereinander.
 */
.dze-kz .dze-kz__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1.75rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dze-kz .dze-kz__eintrag {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

/*
 * Die Zahl ist das, was das Auge fangen soll - groesser als der Titel, in der
 * Ueberschriftenschrift aus Astra. Groesse = Astras H1 x 1,65 (Desktop 38 → 63px,
 * Handy 28 → 46px - die Werte, die vorher fest standen); sie folgt damit jeder
 * Aenderung im Customizer. Farbe wie die Ueberschriften (geerbt).
 */
.dze-kz__zahl {
	font-family: var(--dze-anzeigeschrift, inherit);
	font-size: calc(var(--dze-h1, 2.25rem) * 1.65);
	font-weight: 700;
	line-height: 1;
}

.dze-kz__bezeichnung {
	font-size: var(--dze-fliesstext, 1rem);
	line-height: 1.4;
}

/*
 * Ab Tablet randlos (Auftraggeber, 21.10.2026; vorher erst auf dem Handy). Der
 * Container gibt seinem Inhalt seitlich `--padding-left/right` (20px aus der Rinne in
 * basis.css); um genau diesen Wert zieht die Flaeche nach aussen und rueckt ihren Text
 * wieder nach innen - er bleibt auf der Linie der uebrigen Seite. Die Werte werden vom
 * Container geerbt, nicht abgeschrieben. 1024px: Elementors Tablet-Grenze.
 */
@media (max-width: 1024px) {
	/* Nicht `.dze-kz-flaeche-` - fuer den leeren Vorgabewert setzt Elementor keine Klasse. */
	:not(.dze-kz-flaeche-ohne) > .dze-kz {
		margin-inline: calc(var(--padding-left, 20px) * -1) calc(var(--padding-right, 20px) * -1);
		padding-inline: var(--padding-left, 20px) var(--padding-right, 20px);
	}

	.dze-kz-flaeche-ohne .dze-kz {
		padding-inline: 0;
	}
}

/* Handy: untereinander statt 2 + 1 (bei 600px quer gehaltenem Handy gemessen). */
@media (max-width: 767px) {
	.dze-kz .dze-kz__liste {
		grid-template-columns: 1fr;
	}
}

/* --- Kopf: Einleitung, zentriert ------------------------------------------- */

.dze-kz__einleitung {
	max-width: var(--dze-lesebreite, 36rem);
}

.dze-kz .dze-kz__einleitung > :first-child {
	margin-block-start: 0;
}

.dze-kz .dze-kz__einleitung > :last-child {
	margin-block-end: 0;
}

.dze-kz-kopf-mitte .dze-kz__kopf {
	align-items: center;
	text-align: center;
}

/* --- Darstellung „Karten“ -------------------------------------------------- */

/*
 * RASTER MIT BENANNTEN LINIEN statt Innenabstand und Verschiebungen:
 *
 *   Spalten  [voll] Rasterlinie [inhalt] Rasterlinie [voll]
 *   Zeilen   [band-start] Luft [kopf] Abstand [liste-start] 1fr [band-ende] 1fr [liste-ende]
 *
 * Die Kartenreihe liegt ueber ZWEI gleich hohen Zeilen (1fr 1fr) - die Linie dazwischen
 * ist genau ihre Mitte. Die Flaeche (::before) reicht von band-start bis band-ende: hinter
 * dem Kopf und der oberen Haelfte der Karten, ohne feste Hoehe (Vorgabe, wie die Vorlage).
 * Mit „Flaeche: ganz“ bis `ende` unter den Karten. Kein row-gap - sonst laege
 * ein Zwischenraum zwischen den Haelften und die Mitte verrutschte; Abstaende sind Zeilen.
 */
.dze-kz-darstellung-karten .dze-kz {
	grid-template-columns: [voll-start] var(--dze-raster) [inhalt-start] minmax(0, 1fr) [inhalt-ende] var(--dze-raster) [voll-ende];
	grid-template-rows:
		[band-start] var(--dze-kz-luft, clamp(2.5rem, 5vw, 4.5rem))
		[kopf-start] auto
		[kopf-ende] var(--dze-kz-abstand, clamp(1.75rem, 3vw, 2.5rem))
		[liste-start] 1fr
		[band-ende] 1fr
		[liste-ende] var(--dze-kz-luft-unten, 0px)
		[ende];
	gap: 0;
	padding: 0;
	background: none;
}

.dze-kz-darstellung-karten .dze-kz::before {
	content: "";
	grid-column: voll-start / voll-ende;
	grid-row: band-start / band-ende;
	background: var(--dze-kz-flaeche, var(--ast-global-color-7));
}

.dze-kz-darstellung-karten .dze-kz__kopf {
	grid-column: inhalt-start / inhalt-ende;
	grid-row: kopf-start / kopf-ende;
}

.dze-kz-darstellung-karten .dze-kz .dze-kz__liste {
	grid-column: inhalt-start / inhalt-ende;
	grid-row: liste-start / liste-ende;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: var(--widgets-spacing-column, 20px);
}

/*
 * Flaeche „ganz“ (Regler): bis unter die Karten - die letzte Zeile (sonst 0) bekommt dieselbe
 * Luft wie oben, die Flaeche laeuft bis zur Linie `ende`. Auch auf dem Handy: die Handy-Regel
 * (Flaeche nur ueber den Karten) gilt nur ohne „ganz“.
 */
.dze-kz-band-ganz .dze-kz {
	--dze-kz-luft-unten: var(--dze-kz-luft, clamp(2.5rem, 5vw, 4.5rem));
}

.dze-kz-darstellung-karten.dze-kz-band-ganz .dze-kz::before {
	grid-row: band-start / ende;
}

/* Ohne Kopf beginnt die Kartenreihe oben - keine leere Luft- und Abstandszeile. */
.dze-kz-darstellung-karten .dze-kz:not(:has(.dze-kz__kopf)) {
	grid-template-rows: [band-start liste-start] 1fr [band-ende] 1fr [liste-ende] var(--dze-kz-luft-unten, 0px) [ende];
}

/*
 * Karte: Bild ueber die ganze Flaeche, der Kasten darin um den Bildrand eingerueckt - per
 * Rasterlinien, nicht per Abstand. Ohne Bild traegt die Karte die Kastenfarbe selbst.
 */
.dze-kz .dze-kz__karte {
	display: grid;
	grid-template:
		[voll-start] var(--dze-kz-bildrand, 8px) [kasten-start] 1fr [kasten-ende] var(--dze-kz-bildrand, 8px) [voll-ende]
		/ [voll-start] var(--dze-kz-bildrand, 8px) [kasten-start] 1fr [kasten-ende] var(--dze-kz-bildrand, 8px) [voll-ende];
	gap: 0;
	aspect-ratio: var(--dze-kz-format, 5 / 4);
	overflow: hidden;
	background: var(--dze-kz-kasten, var(--ast-global-color-2));
}

/* (0,2,1) gegen Elementors `.elementor img { height: auto }`. */
.dze-kz .dze-kz__karte img.dze-kz__bild {
	grid-column: voll-start / voll-ende;
	grid-row: voll-start / voll-ende;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.dze-kz__kasten {
	position: relative;
	z-index: 1;
	grid-column: kasten-start / kasten-ende;
	grid-row: kasten-start / kasten-ende;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding-inline: 1rem;
	text-align: center;
	/* Text auf dem Kasten in der Hintergrundfarbe aus Astra (dz: Weiss). */
	color: var(--dze-hintergrund, #fff);
	background: color-mix(
		in srgb,
		var(--dze-kz-kasten, var(--ast-global-color-2)) calc(var(--dze-kz-kasten-deckkraft, 0.85) * 100%),
		transparent
	);
}

/*
 * Ab Tablet randlos wie die Liste: die Flaeche zieht um den Container-Abstand nach aussen
 * (Regel oben), die Rasterlinie wird genau dieser Abstand - Kopf und Karten bleiben auf
 * der 20px-Linie der Seite. (0,3,0) schlaegt die Formel aus basis.css.
 */
@media (max-width: 1024px) {
	.dze-kz-darstellung-karten .dze-kz.dze-raster {
		--dze-raster: var(--padding-left, 20px);
		padding-inline: 0;
	}
}

/*
 * Handy: Karten untereinander - die Mitte der Liste laege mitten in der zweiten Karte.
 * Die Flaeche endet deshalb an `liste-start`: Kopf und Abstandszeile liegen darin, die
 * Karten beginnen direkt darunter.
 */
@media (max-width: 767px) {
	.dze-kz-darstellung-karten:not(.dze-kz-band-ganz) .dze-kz::before {
		grid-row: band-start / liste-start;
	}
}