/**
 * Flaeche am Container (`.dze-flaeche-hell`).
 *
 * Elementors Boxed-Container sind ZWEI Elemente: `.e-con` spannt die Fensterbreite,
 * `.e-con-inner` darin den Kasten (mit „Breiter +20 %“ eben 20 % mehr als der Inhalt).
 * Gefaerbt wird das INNERE - sonst liefe die Flaeche auf breiten Schirmen von Rand zu
 * Rand (change.hub, gemessen bei 1700px).
 *
 * DIE EINRUECKUNG SITZT AUF DEN KINDERN, nicht auf `.e-con-inner`: ein Prozentwert im
 * Innenabstand misst sich am Elternkasten. Auf den Kindern ist das `.e-con-inner` selbst -
 * genau die Breite, gegen die gerechnet wird. Dieselbe Rasterformel wie in basis.css
 * (`.dze-raster`); `--dze-boxed` setzt das Modul aus Astras Inhaltsbreite auf :root.
 *
 * @package DZ_Elements
 */

.dze-flaeche-hell {
	/* Palette 8 („Subtle Background“). */
	--dze-flaeche-farbe: var(--ast-global-color-7);
	/* Trennrand ueberlappender Collage-Elemente (Text + Bild) in der Flaechenfarbe. */
	--dze-tb-trennfarbe: var(--dze-flaeche-farbe);
	/* Textflaeche der Collage: hier hell (Seitenhintergrund), sonst verschwaende sie im Grau. */
	--dze-tb-flaeche: var(--dze-hintergrund, #fff);
	--dze-flaeche-rand: clamp(1.25rem, 4vw, 3.5rem);
	--dze-flaeche-hoehe: clamp(2.5rem, 5vw, 4.5rem);
}

/*
 * Seitlicher Abstand des Containers: Astras 20px statt Elementors 10px - dieselbe
 * Rinne wie fuer Container mit DZ-Widgets (basis.css). Spezifitaet (0,2,0): schlaegt
 * Elementors Grundwert, verliert gegen eine Eingabe im Panel.
 */
.e-con.dze-flaeche-hell {
	--padding-left: var(--dze-rinne, 20px);
	--padding-right: var(--dze-rinne, 20px);
}

/* (0,2,0) gegen Elementors Hintergrundfarbe am Wrapper - die Flaeche hat Vorrang. */
.dze-flaeche-hell > .e-con-inner {
	padding-block: var(--dze-flaeche-hoehe);
	background-color: var(--dze-flaeche-farbe);
}

.dze-flaeche-hell > .e-con-inner > * {
	padding-inline: max(var(--dze-flaeche-rand), (100% - var(--dze-boxed, 1200px)) / 2);
}

/* Container auf „Volle Breite“: kein innerer Kasten, die Flaeche liegt am Wrapper. */
.e-con-full.dze-flaeche-hell {
	padding-block: var(--dze-flaeche-hoehe);
	background-color: var(--dze-flaeche-farbe);
}

.e-con-full.dze-flaeche-hell > * {
	padding-inline: max(var(--dze-flaeche-rand), (100% - var(--dze-boxed, 1200px)) / 2);
}

/*
 * Ab Tablet RANDLOS (Auftraggeber, 21.10.2026). Die Farbe wandert auf den Wrapper (der
 * spannt die Fensterbreite), der innere Kasten wird durchsichtig, und die Kinder brauchen
 * keine eigene Einrueckung mehr - der seitliche Abstand des Containers (20px) setzt sie
 * auf die Linie der uebrigen Seite. 1024px: Elementors Tablet-Grenze.
 */
@media (max-width: 1024px) {
	.e-con.dze-flaeche-hell {
		--padding-top: var(--dze-flaeche-hoehe);
		--padding-bottom: var(--dze-flaeche-hoehe);
		background-color: var(--dze-flaeche-farbe);
	}

	.dze-flaeche-hell > .e-con-inner {
		padding-block: 0;
		background-color: transparent;
	}

	.dze-flaeche-hell > .e-con-inner > *,
	.e-con-full.dze-flaeche-hell > * {
		padding-inline: 0;
	}
}