/**
 * Beitragsraster.
 *
 * Kopf: Titel links, Einleitung rechts (Vorlage des Auftraggebers), ab Tablet untereinander.
 * Raster: Spalten aus dem Regler je Geraet (eigene Variable je Geraet), Vorgabe 3 / 3 / 1.
 * Karte: Bild im festen Format (Vorgabe 4:5), Text darunter auf der Seitenflaeche.
 * Farben und Groessen aus Astra (Modul astra-werte).
 *
 * @package DZ_Elements
 */

.dze-br {
	display: flex;
	flex-direction: column;
	gap: var(--dze-br-abstand, clamp(2rem, 4vw, 3rem));
}

/* --- Kopf ------------------------------------------------------------------ */

.dze-br__kopf {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Oben buendig: bei langer Einleitung hinge der Titel sonst tief neben ihr. */
	align-items: start;
	gap: var(--widgets-spacing-row, 20px) var(--dze-spalten-abstand, 3rem);
}

.dze-br-kopf-untereinander .dze-br__kopf {
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--dze-lesebreite, 36rem);
}

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

.dze-br .dze-br__titel {
	margin: 0;
}

.dze-br .dze-br__einleitung > :first-child,
.dze-br .dze-br__text-ende > :first-child {
	margin-block-start: 0;
}

.dze-br .dze-br__einleitung > :last-child,
.dze-br .dze-br__text-ende > :last-child {
	margin-block-end: 0;
}

/*
 * KOPF AM DESKTOP ALS RASTER MIT BENANNTEN BEREICHEN: zwei Spalten, zwei Zeilen. Die Regler
 * waehlen nur die Belegung, Abstaende kommen allein aus `gap` - keine Verschiebung per
 * margin/padding. Quelltext-Reihenfolge bleibt Titel, Einleitung, Abschluss; ab Tablet
 * stapelt der Kopf genau so (Bereiche greifen nur ab 1025px).
 *
 *   Einleitung daneben (Vorgabe)    Einleitung unterhalb
 *   titel     einleitung            titel     .
 *   abschluss einleitung            abschluss einleitung
 *
 * Steht der Abschluss am Ende (Vorgabe), bleibt seine Zelle leer und die Zeile kollabiert.
 */
@media (min-width: 1025px) {
	.dze-br__kopf {
		grid-template-areas:
			"titel einleitung"
			"abschluss einleitung";
		grid-template-rows: auto 1fr;
	}

	.dze-br-einleitung-unter .dze-br__kopf {
		grid-template-areas:
			"titel ."
			"abschluss einleitung";
		grid-template-rows: auto auto;
	}

	.dze-br__kopf > .dze-br__titelgruppe {
		grid-area: titel;
	}

	.dze-br__kopf > .dze-br__einleitung {
		grid-area: einleitung;
	}

	/*
	 * Oberkante der Schrift = Oberkante der Zelle, links (Ueberzeile bzw. Titel) wie rechts
	 * (Einleitung): ohne den halben Zeilenabstand ueber der ersten Zeile stehen beide Spalten
	 * auf einer Linie - die Einleitung auf Hoehe der Ueberzeile, unterhalb auf Hoehe des Knopfes. Browser ohne
	 * text-box zeigen den Abstand wie bisher - kein Ersatz per margin.
	 */
	.dze-br__kopf > .dze-br__titelgruppe > :first-child,
	.dze-br__kopf > .dze-br__einleitung > :first-child {
		text-box: trim-start cap alphabetic;
	}

	.dze-br__kopf > .dze-br__abschluss {
		grid-area: abschluss;
	}

	/* Untereinander: eine Spalte in Quelltext-Reihenfolge. Steht zuletzt - gewinnt bei gleicher Spezifitaet. */
	.dze-br-kopf-untereinander .dze-br__kopf {
		grid-template-areas: none;
		grid-template-rows: none;
	}

	.dze-br-kopf-untereinander .dze-br__kopf > * {
		grid-area: auto;
	}
}

/* --- Raster und Karte ------------------------------------------------------ */

.dze-br .dze-br__liste {
	display: grid;
	grid-template-columns: repeat(var(--dze-br-spalten, 3), minmax(0, 1fr));
	gap: var(--dze-br-luecke, var(--widgets-spacing-column, 20px));
	margin: 0;
	padding: 0;
	list-style: none;
}

.dze-br .dze-br__eintrag {
	margin: 0;
}

.dze-br .dze-br__karte {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	color: inherit;
}

/*
 * Nie unterstrichen (0,3,0) - Astras Beitragsregel `.ast-single-post .entry-content a` (0,2,1)
 * unterstrich die Karten im Ratgeber-Beitrag (26.10.2026). Wie die Knopfregel in basis.css.
 */
.dze-br .dze-br__karte.dze-br__karte {
	text-decoration: none;
}

.dze-br__bild {
	overflow: hidden;
	aspect-ratio: var(--dze-br-format, 4 / 5);
	background: var(--ast-global-color-7);
}

/*
 * (0,2,1) gegen Elementors `.elementor img { height: auto }`. object-fit bleibt als Netz:
 * normalerweise hat das Bild schon das Format (Bildschnitt), nur zu kleine Originale nicht.
 */
.dze-br .dze-br__bild img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dze-br__karte:hover .dze-br__bild img,
.dze-br__karte:focus-visible .dze-br__bild img {
	transform: scale(1.04);
}

.dze-br__text {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.dze-br .dze-br__zeile {
	margin: 0;
}

.dze-br .dze-br__kartentitel {
	margin: 0;
	color: var(--dze-ueberschrift, inherit);
	font-family: var(--dze-anzeigeschrift, inherit);
	font-size: var(--dze-h5, 1.125rem);
	line-height: 1.3;
	text-wrap: balance;
	/* Lange deutsche Woerter („Schadstoffsanierung“) in schmalen Spalten: trennen statt
	   ueberlaufen. Braucht lang="de" am Dokument (Astra setzt es). */
	hyphens: auto;
	overflow-wrap: break-word;
}

.dze-br__karte:hover .dze-br__kartentitel {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dze-br__karte:focus-visible {
	outline: 3px solid var(--dze-ueberschrift, currentColor);
	outline-offset: 4px;
}

/* --- Abschluss ------------------------------------------------------------- */

.dze-br__abschluss {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--widgets-spacing-row, 20px);
	max-width: var(--dze-lesebreite, 36rem);
}

/* --- Seitenumbruch ----------------------------------------------------------
 * Farben aus Astras Palette: aktuelle Seite in der Akzentfarbe wie die FAQ-Knoepfe, die
 * uebrigen mit Rahmen in Textfarbe. Mindestens 44px Trefferflaeche.
 */
.dze-br__blaettern {
	margin-block-start: var(--widgets-spacing-row, 20px);
	padding-block-start: var(--widgets-spacing-row, 20px);
}

.dze-br__blaettern ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dze-br__blaettern .page-numbers li {
	margin: 0;
}

.dze-br__blaettern a.page-numbers.page-numbers,
.dze-br__blaettern span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--ast-global-color-2, currentColor);
	color: var(--ast-global-color-2, inherit);
	text-decoration: none;
	font-weight: 600;
}

.dze-br__blaettern a.page-numbers:hover,
.dze-br__blaettern a.page-numbers:focus-visible,
.dze-br__blaettern span.page-numbers.current {
	background: var(--ast-global-color-0);
	border-color: var(--ast-global-color-0);
	color: var(--ast-global-color-2, inherit);
}

.dze-br__blaettern span.page-numbers.dots {
	border-color: transparent;
}

/* --- Tablet und Handy ------------------------------------------------------ */

/* 1024px / 767px: Elementors Haltepunkte, dieselben wie im Widget (sizes). */
@media (max-width: 1024px) {
	.dze-br__kopf {
		grid-template-columns: minmax(0, 1fr);
		max-width: var(--dze-lesebreite, 36rem);
	}

	.dze-br .dze-br__liste {
		grid-template-columns: repeat(var(--dze-br-spalten-tablet, 3), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.dze-br .dze-br__liste {
		grid-template-columns: repeat(var(--dze-br-spalten-mobil, 1), minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.dze-br .dze-br__bild img {
		transition: none;
	}
}