/*
 * Gemeinsame Grundregeln aller Module. Jedes Modul, das eine dieser Klassen
 * ausgibt, nennt `dze-basis` als Abhaengigkeit seines Stylesheets.
 */

/* Fuer Screenreader lesbar, visuell verborgen (Langbeschreibung, Knopfbeschriftung). */
.dze-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --- Links im Fliesstext ----------------------------------------------------
 * Astra gibt Links dieselbe Farbe wie dem Text (dz: Palette 3) und unterstreicht nur in
 * Beitraegen (`.ast-single-post .entry-content a`). Ein Link im Fliesstext eines Moduls waere
 * damit unsichtbar. Farbe bleibt Astras, dazu die Unterstreichung - nur im Fliesstext, nie an
 * Knoepfen oder ganzen Karten.
 */
:is(.dze-tb__text, .dze-faq__antwort, .dze-faq__einleitung, .dze-ab__einleitung, .dze-br__einleitung, .dze-br__text-ende, .dze-kz__einleitung) a:not(.ast-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

:is(.dze-tb__text, .dze-faq__antwort, .dze-faq__einleitung, .dze-ab__einleitung, .dze-br__einleitung, .dze-br__text-ende, .dze-kz__einleitung) a:not(.ast-button):hover {
	text-decoration-thickness: 2px;
}

/* --- Knopf (DZE_Knopf) ------------------------------------------------------
 * Nur Anordnung. Farbe, Schrift, Innenabstand, Rahmen und Radius kommen aus
 * Astras Knopf-Einstellungen (Klasse `ast-button`).
 */
.dze-knopf.ast-button {
	display: inline-flex;
	align-items: center;
	gap: 1em;
}

/*
 * Nie unterstrichen. (0,3,0) - doppelte Klasse mit Absicht: Astras Beitragsregel
 * `.ast-single-post .entry-content a` (0,2,1) greift auch auf Seiten mit Vorlage „Standard“
 * (Inhalt in .entry-content) und holte die Unterstreichung zurueck (/abbruch/, 25.10.2026).
 */
.dze-knopf.ast-button.ast-button {
	text-decoration: none;
}

.dze-knopf__icon,
.dze-knopf__icon > svg,
.dze-knopf__icon > i {
	display: block;
}

.dze-knopf__icon > svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* --- Rinne -------------------------------------------------------------------
 * EIN Container, der direkt ein DZ-Elements-Widget enthaelt, bekommt seitlich
 * Astras Rand (20px) statt Elementors 10px. Damit steht der Inhalt auf der Kante
 * des Logos: bei 1440px auf 120, auf dem Handy auf 20 - ohne dass jemand am
 * Container etwas einstellt.
 *
 * NUR die direkten Eltern: Elementors Container-Abstand gilt auch fuer jeden
 * verschachtelten Container. Global auf 20px gesetzt, wuerde er in Altlayouts mit
 * mehreren Ebenen (Stadtseiten) je Ebene 10px mehr kosten - gemessen: H1 der
 * Stadtseite bei 390px 8px zu breit (dz-schadstoffsanierung, 20.10.2026).
 *
 * SPEZIFITAET (0,2,0) ueber `.e-con.e-con` mit `:where()`: schlaegt Elementors
 * Grundwert `.e-con` (0,1,0), verliert gegen jede Eingabe im Panel (0,3,0).
 * Boxed (`.e-con-inner` dazwischen) und volle Breite (Widget direkt im Container).
 */
.e-con.e-con:where(:has(> .e-con-inner > [class*="elementor-widget-dze-"]), :has(> [class*="elementor-widget-dze-"])) {
	--padding-left: var(--dze-rinne, 20px);
	--padding-right: var(--dze-rinne, 20px);
}

/* --- Raster ------------------------------------------------------------------
 * DIE RASTERFORMEL STEHT GENAU EINMAL (Muster change.hub, E76). Ein Modul, das
 * breiter ist als der Inhalt (Kopfbereich, Flaechen auf „+20 %“), rueckt seinen
 * Text mit `padding-inline: var(--dze-raster)` auf die Inhaltskante der Seite.
 *
 * `max()` waehlt auf schmalen Schirmen den Mindestrand, auf breiten die halbe
 * Differenz zur Inhaltsbreite. `--dze-boxed` setzt das Widget aus Astras
 * `site-content-width` (DZE_Astra::inhaltsbreite) - Logo und Text stehen damit auf
 * einer Kante. `100%` loest sich erst am nutzenden Element auf (Custom Properties
 * werden dort eingesetzt, wo sie gebraucht werden).
 */
.dze-raster {
	--dze-rand: clamp(1.25rem, 4vw, 3.5rem);
	--dze-raster: max(var(--dze-rand), (100% - var(--dze-boxed, 1200px)) / 2);
}

/* --- Ueberschriften und Ueberzeilen ----------------------------------------
 * Ausgeglichener Umbruch: der Browser verteilt die Woerter auf gleich lange
 * Zeilen, statt ein einzelnes Wort in die letzte Zeile zu haengen. Groesse und
 * Schrift bleiben Astras.
 */
.dze-titel {
	text-wrap: balance;
}

/*
 * Ueberzeile in der Ueberschriftenschrift (aus Astra, inline als
 * --dze-anzeigeschrift), klein und gesperrt - sie kuendigt an und konkurriert
 * nicht mit der Ueberschrift. Zwei Klassen gegen Astras `.entry-content p`.
 */
.dze-ueberzeile.dze-ueberzeile {
	margin: 0;
	font-family: var(--dze-anzeigeschrift, inherit);
	/* H6 aus Astra (Modul astra-werte) - folgt dem Customizer auf jedem Geraet. */
	font-size: var(--dze-h6, 0.875rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- Spaltenabstand ----------------------------------------------------------
 * EIN Abstand zwischen zwei Spalten fuer alle Module - Text + Bild und der
 * Kopfbereich mit Text rechts stehen dadurch auf derselben Spaltenlinie
 * (gemessen bei 1440px: 756).
 */
:root {
	--dze-spalten-abstand: clamp(2rem, 5vw, 5rem);
	/*
	 * Lesebreite fuer Fliesstext, der nicht von einer Spalte begrenzt wird: 36rem sind
	 * in Open Sans 17-18px rund 75 Zeichen (lesbar: 60-80). Gemessen 21.10.2026 - ohne
	 * Deckel liefen es bei 1024px 111 Zeichen.
	 */
	--dze-lesebreite: 36rem;
}