/**
 * Text + Bild.
 *
 * Zwei Spalten auf einem Raster: Text und Bild. Ohne Bild bleibt der Text auf
 * SEINER Spalte - dieselbe Kante und dieselbe Zeilenlaenge wie in einem Abschnitt
 * mit Bild, statt ueber die ganze Breite zu laufen (115 Zeichen pro Zeile waren
 * auf dz-schadstoffsanierung.de gemessen, lesbar sind 60-80).
 *
 * Schrift, Groessen und Zeilenhoehen kommen aus Astra; hier stehen nur Anordnung
 * und Abstaende.
 *
 * @package DZ_Elements
 */

.dze-tb {
	display: grid;
	grid-template-columns: var(--dze-tb-spalten, 1fr 1fr);
	align-items: var(--dze-tb-ausrichtung, center);
	gap: var(--dze-tb-abstand, var(--dze-spalten-abstand));
}

.dze-tb-spalten-3-2 .dze-tb {
	--dze-tb-spalten: 3fr 2fr;
}

.dze-tb-spalten-2-3 .dze-tb {
	--dze-tb-spalten: 2fr 3fr;
}

/* Bild links: die Spaltenverhaeltnisse spiegeln mit, der Quelltext bleibt Text - Bild. */
.dze-tb-bild-links .dze-tb {
	grid-template-columns: var(--dze-tb-spalten-links, 1fr 1fr);
}

.dze-tb-bild-links.dze-tb-spalten-3-2 .dze-tb {
	--dze-tb-spalten-links: 2fr 3fr;
}

.dze-tb-bild-links.dze-tb-spalten-2-3 .dze-tb {
	--dze-tb-spalten-links: 3fr 2fr;
}

.dze-tb-bild-links .dze-tb__bild {
	order: -1;
}

/* --- Text ------------------------------------------------------------------ */

.dze-tb__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Elementors Widget-Abstand aus dem Kit - derselbe wie im Kopfbereich. */
	gap: var(--widgets-spacing-row, 20px);
	min-width: 0;
}

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

/*
 * Zwei Klassen (0,2,0) gegen Astras `.entry-content h2` / `.entry-content p`
 * (0,1,1): die Aussenabstaende uebernimmt das `gap` oben - eine Quelle.
 */
.dze-tb .dze-tb__titel {
	margin: 0;
}

/* Ueberzeile: gemeinsamer Stil `.dze-ueberzeile` in basis.css. */

.dze-tb .dze-tb__inhalt > :first-child {
	margin-block-start: 0;
}

.dze-tb .dze-tb__inhalt > :last-child {
	margin-block-end: 0;
}

/* --- Bild ------------------------------------------------------------------ */

.dze-tb__bild {
	min-width: 0;
}

/*
 * (0,2,1) gegen Elementors `.elementor img { height: auto; max-width: 100% }`
 * (0,1,1): mit festem Format braucht das Bild `height: 100%`, sonst greift
 * object-fit nicht. Ohne Format bleibt `aspect-ratio: auto` - das Bild zeigt sich
 * in seinem eigenen Seitenverhaeltnis (width/height-Attribute von WordPress).
 */
.dze-tb .dze-tb__bild img.dze-tb__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: var(--dze-tb-format, auto);
	object-fit: cover;
	object-position: center;
	border-radius: var(--dze-tb-radius, var(--dze-radius, 0));
}

/* --- Collage: zwei bis vier Elemente -------------------------------------- */

/*
 * DIE ANORDNUNG FOLGT DER ANZAHL (Entwurf vom 21.10.2026, freigegeben). Jedes Element
 * steht absolut in einer Flaeche mit festem Seitenverhaeltnis; sein Platz sind vier
 * Prozentwerte: --x (Abstand von der Textseite), --y (von oben), --b (Breite), --h (Hoehe).
 *
 *   n2  ┌───────────┐       n3        ┌──────┐     n4   ┌────┐ ┌──────┐
 *       │     1     │            ┌───┤  1   │          │ 3  │ │  1   │
 *   ┌───┴──┐        │            │ 3 ├──────┤          └────┘ ├──────┤
 *   │  2   ├────────┘            │   │  2   │         ┌────┐  │  2   │
 *   └──────┘                     └───┤      │         │ 4  │  │      │
 *                                    └──────┘         └────┘  └──────┘
 *
 * ALLES BLEIBT IN DER SPALTE - nichts ragt ueber die Inhaltskante, die Flucht der Seite
 * bleibt. GESPIEGELT bei „Bild links“: dieselben Werte, von rechts gerechnet.
 *
 * Spaeter stehende Elemente liegen oben (z-index ueber die Reihenfolge) und bekommen
 * einen Rand in der Farbe des Hintergrunds, damit sich Ueberlappungen loesen.
 */
.dze-tb__medien {
	position: relative;
	aspect-ratio: var(--dze-tb-collage-format, 4 / 3);
}

.dze-tb__el {
	position: absolute;
	inset-block-start: var(--y, 0%);
	inset-inline-start: var(--x, 0%);
	width: var(--b, 100%);
	height: var(--h, 100%);
	overflow: hidden;
	border-radius: var(--dze-tb-radius, var(--dze-radius, 0));
}

.dze-tb-bild-links .dze-tb__el {
	inset-inline-start: auto;
	inset-inline-end: var(--x, 0%);
}

.dze-tb__el + .dze-tb__el {
	z-index: 1;
	box-shadow: 0 0 0 var(--dze-tb-trenner, 8px) var(--dze-tb-trennfarbe, var(--dze-hintergrund, #fff));
}

/* (0,3,1) gegen Elementors `.elementor img` und die Einzelbild-Regel oben. */
.dze-tb .dze-tb__el img.dze-tb__el-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* n1 mit Textflaeche: eine Flaeche im Format der Spalte. */
.dze-tb__medien--n1 .dze-tb__el {
	--b: 100%;
	--h: 100%;
}

.dze-tb__medien--n2 {
	--dze-tb-collage-format: 1 / 0.92;
}

.dze-tb__medien--n2 .dze-tb__el:nth-child(1) { --x: 18%; --y: 0%; --b: 82%; --h: 70%; }
.dze-tb__medien--n2 .dze-tb__el:nth-child(2) { --x: 0%; --y: 50%; --b: 46%; --h: 50%; }

/*
 * --x zaehlt von der TEXTSEITE der Spalte: bei „Bild rechts“ von links, bei „Bild links“
 * von rechts (siehe `.dze-tb-bild-links .dze-tb__el`). So landen die gestapelten Bilder
 * immer aussen und die Textflaeche innen, zum Text hin.
 */
.dze-tb__medien--n3 {
	--dze-tb-collage-format: 1 / 1;
}

.dze-tb__medien--n3 .dze-tb__el:nth-child(1) { --x: 40%; --y: 0%; --b: 60%; --h: 48.5%; }
.dze-tb__medien--n3 .dze-tb__el:nth-child(2) { --x: 40%; --y: 51.5%; --b: 60%; --h: 48.5%; }
.dze-tb__medien--n3 .dze-tb__el:nth-child(3) { --x: 0%; --y: 22%; --b: 48%; --h: 56%; }

.dze-tb__medien--n4 {
	--dze-tb-collage-format: 1 / 1.02;
}

.dze-tb__medien--n4 .dze-tb__el:nth-child(1) { --x: 44%; --y: 0%; --b: 56%; --h: 48.5%; }
.dze-tb__medien--n4 .dze-tb__el:nth-child(2) { --x: 44%; --y: 51.5%; --b: 56%; --h: 48.5%; }
.dze-tb__medien--n4 .dze-tb__el:nth-child(3) { --x: 6%; --y: 8%; --b: 46%; --h: 44%; }
.dze-tb__medien--n4 .dze-tb__el:nth-child(4) { --x: 0%; --y: 58%; --b: 40%; --h: 42%; }

/*
 * Textflaeche: HELL (Auftraggeber, 21.10.2026 - schwarz war zu stark). Flaeche in
 * Palette 8 („Subtle Background“ in Astras Palette, dz: #f9f9f9), Ueberzeile und Text
 * in der Ueberschriftenfarbe aus dem Customizer. Auf einer grauen Container-Flaeche
 * wird sie zur Seitenhintergrund-Farbe (container-flaeche.css), sonst verschwaende sie.
 * Groessen aus Astra: Ueberzeile H6, Text H3.
 */
.dze-tb__el--flaeche {
	--dze-tb-fl-innen: clamp(1rem, 3vw, 2rem);
	/* Die Schrift darin misst sich an der Breite DIESER Flaeche (cqi), nicht am Bildschirm. */
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.6em;
	padding: var(--dze-tb-fl-innen);
	background: var(--dze-tb-flaeche, var(--ast-global-color-7));
	color: var(--dze-tb-flaeche-text, var(--dze-ueberschrift, inherit));
}

.dze-tb .dze-tb__fl-ueber.dze-ueberzeile {
	color: var(--dze-tb-flaeche-akzent, inherit);
}

.dze-tb .dze-tb__fl-titel {
	margin: 0;
	color: inherit;
	font-family: var(--dze-anzeigeschrift, inherit);
	/*
	 * LANGE WOERTER (Memory project_mobile_lange_woerter): bei 390px ist die Flaeche
	 * rund 160px breit, „DOKUMENTIERT“ in Astras H3 (19px) ragte heraus und wurde
	 * abgeschnitten (gemessen 22.10.2026). Obergrenze bleibt Astras H3; darunter
	 * richtet sich die Groesse nach der Flaeche: Innenbreite / 8 - so passt ein Wort
	 * mit 12 Grossbuchstaben (gemessen „DOKUMENTIERT“ in Poppins 700: 7,8 x Groesse).
	 * `100cqi` ist bereits die INNENbreite der Flaeche - kein Innenabstand abziehen.
	 */
	font-size: min(var(--dze-h3, 1.5rem), 100cqi / 8);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	text-wrap: balance;
}

/* --- Tablet ---------------------------------------------------------------- */

/*
 * Ohne Bild bis zur Tablet-Grenze (1024px) ueber die volle Breite, gedeckelt auf die
 * Lesebreite: die halbe Spalte ergab bei 768px nur 39 Zeichen pro Zeile, die volle bei
 * 1024px 111 (gemessen 21.10.2026). Mit Deckel 60-80.
 * Mit Bild bleiben es zwei Spalten bis zur Handy-Grenze.
 */
@media (max-width: 1024px) {
	.dze-tb.dze-tb--ohne-bild {
		grid-template-columns: 1fr;
	}

	/* Volle Breite, aber nicht laenger als die Lesebreite (basis.css). */
	.dze-tb--ohne-bild .dze-tb__text {
		max-width: var(--dze-lesebreite);
	}
}

/* --- Handy ----------------------------------------------------------------- */

/* 767px: Elementors Handy-Grenze, dieselbe wie im `sizes` der Ausgabe. */
@media (max-width: 767px) {
	.dze-tb,
	.dze-tb-bild-links .dze-tb {
		grid-template-columns: 1fr;
	}

	.dze-tb .dze-tb__bild {
		order: -1;
	}

	.dze-tb-mobil-unten .dze-tb .dze-tb__bild {
		order: 1;
	}
}