/**
 * Kopfbereich.
 *
 * Alle Vorgaben stehen hier als Rueckfallwert einer Variable. Die Regler im
 * Panel setzen nur die Variable - leer heisst „Vorgabe von hier“.
 *
 * @package DZ_Elements
 */

.dze-kopf {
	/* Rasterformel: --dze-rand / --dze-raster aus basis.css (Klasse .dze-raster). */
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--dze-kopf-hoehe, 70vh);
	overflow: hidden;
	border-radius: var(--dze-kopf-radius, var(--dze-radius, 0));
	/* Text auf dem Bild in der Hintergrundfarbe aus Astra (dz: Weiss). */
	color: var(--dze-kopf-text, var(--dze-hintergrund, #fff));
}

/* --- Bild und Video -------------------------------------------------------- */

.dze-kopf__medien {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/*
 * (0,2,1), nicht (0,1,1): Elementors `.elementor img { height: auto;
 * max-width: 100% }` liegt sonst gleichauf, und ob das Bild die Flaeche
 * fuellt, entschiede die Ladereihenfolge der Stylesheets.
 */
/*
 * ZWEI MARKUP-FORMEN: ohne Bild fuer Tablet/Handy traegt das <img> die Klasse der Ebene;
 * mit ihm bildet ein <picture> die Ebene und das <img> darin heisst `__bild-img`
 * (DZE_Image_Markup, Art Direction). Beide Formen fuellen die Flaeche gleich.
 */
.dze-kopf picture.dze-kopf__bild {
	position: absolute;
	inset: 0;
	display: block;
}

.dze-kopf img.dze-kopf__bild,
.dze-kopf picture.dze-kopf__bild > img.dze-kopf__bild-img,
.dze-kopf video.dze-kopf__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--dze-kopf-bildposition, center);
}

/*
 * Das Video bleibt unsichtbar, bis es WIRKLICH spielt - nicht schon, wenn es
 * eingesetzt ist. Bis dahin steht das Bild; ein schwarzes oder halb geladenes
 * Video davor waere ein Rueckschritt gegenueber dem Standbild.
 */
.dze-kopf video.dze-kopf__video {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.dze-kopf.is-playing video.dze-kopf__video {
	opacity: 1;
}

/* --- Deckschicht ----------------------------------------------------------- */

/*
 * Vorgabe: oben klar, ab 20 % zunehmend dunkel bis zur Unterkante, Deckkraft
 * 0,6. Das ist die Deckschicht, die dz-schadstoffsanierung.de vorher als
 * Elementor-Hintergrund trug.
 *
 * Die Form „Flaeche“ setzt die transparente Farbe auf die Deckfarbe - dann
 * ist der Verlauf einfarbig, und es gibt keine zweite Regel dafuer.
 */
.dze-kopf__deckschicht {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		var(--dze-kopf-verlauf-winkel, 180deg),
		var(--dze-kopf-verlauf-transparenz, transparent) var(--dze-kopf-verlauf-start, 20%),
		var(--dze-kopf-deckfarbe, var(--dze-text, #000)) var(--dze-kopf-verlauf-ende, 100%)
	);
	opacity: var(--dze-kopf-deckkraft, 0.6);
	pointer-events: none;
}

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

.dze-kopf__inhalt {
	position: relative;
	z-index: 2;
	padding-block: var(--dze-rand) var(--dze-kopf-abstand-unten, 4rem);
	padding-inline: var(--dze-raster);
}

.dze-kopf__spalte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/*
	 * Der Abstand zwischen den Bausteinen ist Elementors Widget-Abstand aus dem
	 * Kit (Site-Einstellungen → Layout) - derselbe, den Ueberschrift, Text und
	 * Knopf als einzelne Widgets haetten. Keine eigene Zahl.
	 */
	gap: var(--widgets-spacing-row, 20px);
	max-width: var(--dze-kopf-textbreite, 60%);
}

/*
 * Zwei Klassen (0,2,0) gegen Astras `.entry-content h1` und
 * `.entry-content p` (0,1,1): die Farbe kommt vom Kopfbereich, nicht von den
 * Ueberschriftfarben der Seite. Schrift, Groesse und Gross-/Kleinschreibung
 * bleiben Astras - nur die Farbe und die Aussenabstaende uebernimmt der
 * Kopfbereich, damit der Abstand genau eine Quelle hat (gap oben).
 */
.dze-kopf__kopf {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dze-kopf .dze-kopf__titel {
	margin: 0;
	color: inherit;
}

.dze-kopf .dze-kopf__text {
	color: inherit;
}

.dze-kopf .dze-kopf__text > :first-child {
	margin-block-start: 0;
}

.dze-kopf .dze-kopf__text > :last-child {
	margin-block-end: 0;
}

.dze-kopf .dze-kopf__text a {
	color: inherit;
	text-decoration: underline;
}

/* --- Knoepfe --------------------------------------------------------------- */

/*
 * Nebeneinander der Spaltenabstand des Kits, untereinander der halbe
 * Zeilenabstand: zwei Knoepfe gehoeren zusammen und sollen nicht so weit
 * auseinanderstehen wie Ueberschrift und Text. Gemessen am vorherigen Kopf
 * von dz-schadstoffsanierung.de: 40px und 20px bei Kit-Abstand 40px.
 */
.dze-kopf__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--widgets-spacing-row, 20px) / 2) var(--widgets-spacing-column, 20px);
}

/*
 * Kontur: (0,3,0) gegen Astras Zustandsregeln wie `.ast-button:hover`
 * (0,2,0). Vorgabe Palette 1 fuer Kontur und Schrift, Palette 3 fuer die
 * Schrift auf gefuellter Flaeche.
 */
.dze-kopf .dze-kopf__knopf.dze-kopf__knopf--kontur {
	border-color: var(--dze-kopf-kontur, var(--ast-global-color-0));
	background-color: transparent;
	color: var(--dze-kopf-kontur, var(--ast-global-color-0));
}

.dze-kopf .dze-kopf__knopf.dze-kopf__knopf--kontur:hover,
.dze-kopf .dze-kopf__knopf.dze-kopf__knopf--kontur:focus-visible {
	border-color: var(--dze-kopf-kontur, var(--ast-global-color-0));
	background-color: var(--dze-kopf-kontur, var(--ast-global-color-0));
	color: var(--dze-kopf-kontur-hover, var(--ast-global-color-2));
}

/*
 * Der Fokusring liegt auf einem Foto - weiss mit Abstand, damit er sich
 * auch von hellen Bildstellen und von der Knopfflaeche abhebt.
 */
.dze-kopf .dze-kopf__knopf:focus-visible,
.dze-kopf__pause:focus-visible {
	outline: 3px solid var(--dze-hintergrund, #fff);
	outline-offset: 3px;
}

/* --- Pause-Knopf ----------------------------------------------------------- */

/*
 * OBEN rechts, nicht unten: der Text steht unten, und auf schmalen Schirmen
 * reicht er ueber die ganze Breite. Unten saesse der Knopf auf den
 * Handlungsknoepfen.
 */
.dze-kopf__pause {
	position: absolute;
	inset-block-start: var(--dze-rand);
	inset-inline-end: var(--dze-raster);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.5rem 0.85rem;
	border: 0;
	border-radius: var(--dze-radius, 0);
	background: color-mix(in srgb, var(--dze-text, #000) 60%, transparent);
	color: var(--dze-hintergrund, #fff);
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	cursor: pointer;
}

.dze-kopf__pause[hidden] {
	display: none;
}

.dze-kopf__pause:hover {
	background: color-mix(in srgb, var(--dze-text, #000) 80%, transparent);
}

.dze-kopf__pause-icon {
	display: block;
	fill: currentColor;
}

/* Immer genau eines der beiden Symbole. */
.dze-kopf__pause .dze-kopf__pause-icon--play,
.dze-kopf__pause.is-paused .dze-kopf__pause-icon--pause {
	display: none;
}

.dze-kopf__pause.is-paused .dze-kopf__pause-icon--play {
	display: block;
}

/* --- Text rechts, Verlauf von der Seite, mittig ------------------------- */

/*
 * Text rechts: die Spalte beginnt dort, wo bei „Text + Bild“ die rechte Spalte
 * beginnt - halbe Breite abzueglich des halben Spaltenabstands (basis.css).
 * Gemessen bei 1440px: beide auf 756.
 */
.dze-kopf-text-rechts .dze-kopf__spalte {
	max-width: calc(50% - var(--dze-spalten-abstand) / 2);
	margin-inline-start: auto;
}

/*
 * Verlauf von der Textseite: das Bild bleibt auf der anderen Seite frei, der Text
 * steht auf Dunkel. Werte vom bisherigen Karriere-Abschnitt (dz) abgeleitet und in
 * der Vorschau abgestimmt: klar bis 30 %, voll ab 55 %.
 */
.dze-kopf-verlauf-seite .dze-kopf {
	--dze-kopf-verlauf-winkel: 270deg;
	--dze-kopf-verlauf-start: 30%;
	--dze-kopf-verlauf-ende: 55%;
}

.dze-kopf-verlauf-seite.dze-kopf-text-rechts .dze-kopf {
	--dze-kopf-verlauf-winkel: 90deg;
}

.dze-kopf-senkrecht-mitte .dze-kopf {
	justify-content: center;
}

.dze-kopf-senkrecht-mitte .dze-kopf__inhalt {
	padding-block-end: var(--dze-kopf-abstand-unten, var(--dze-rand));
}

/* --- Text im Kasten ------------------------------------------------------- */

/*
 * Der Kasten ist die Textspalte selbst: seine Aussenkante liegt auf der Inhaltskante
 * (Flucht der Seite), der Text rueckt um den Innenabstand ein. Farbe aus Astra (Text-
 * farbe), leicht durchscheinend. (0,2,0): schlaegt die Spaltenbreite der Vorgabe.
 */
.dze-kopf-darstellung-kasten .dze-kopf__spalte {
	max-width: var(--dze-kopf-textbreite, 34rem);
	padding: var(--dze-kopf-kasten-abstand, 3rem);
	background: color-mix(
		in srgb,
		var(--dze-kopf-kasten, var(--dze-text, #000)) calc(var(--dze-kopf-kasten-deckkraft, 0.92) * 100%),
		transparent
	);
}

/* Rechts: Kasten an der rechten Inhaltskante, nicht auf der rechten Spalte. */
.dze-kopf-darstellung-kasten.dze-kopf-text-rechts .dze-kopf__spalte {
	max-width: var(--dze-kopf-textbreite, 34rem);
	margin-inline-start: auto;
}

/* Fokusring in der Schriftfarbe des Kastens - Weiss waere auf einem hellen Kasten unsichtbar. */
.dze-kopf-darstellung-kasten .dze-kopf .dze-kopf__knopf:focus-visible {
	outline-color: var(--dze-kopf-text, var(--dze-hintergrund, #fff));
}

/*
 * Kontur-Knopf im Kasten in der Schriftfarbe des Kastens, beim Hover gefuellt mit Kastenfarbe
 * als Schrift. Die Akzentfarbe ist fuers dunkle Foto gedacht - auf einem hellen Kasten war der
 * Knopf unlesbar (/karriere/, 03.11.2026). (0,3,0) wie die Handy-Regeln unten.
 */
.dze-kopf-darstellung-kasten .dze-kopf .dze-kopf__knopf--kontur {
	--dze-kopf-kontur: var(--dze-kopf-text, var(--dze-hintergrund, #fff));
	--dze-kopf-kontur-hover: var(--dze-kopf-kasten, var(--dze-text, #000));
}

/* Akzentkante: liegt INNEN (box-shadow), die Aussenkante bleibt auf der Inhaltskante. */
.dze-kopf-kante-links .dze-kopf__spalte {
	box-shadow: inset var(--dze-kopf-kante, 6px) 0 0 var(--dze-akzent, currentColor);
}

.dze-kopf-kante-oben .dze-kopf__spalte {
	box-shadow: inset 0 var(--dze-kopf-kante, 6px) 0 var(--dze-akzent, currentColor);
}

/*
 * Ueber dem Bild nur eine leichte, gleichmaessige Abdunklung - lesbar macht den Text der
 * Kasten. Form, Richtung und Beginn des Verlaufs gelten hier nicht (im Panel ausgeblendet).
 */
.dze-kopf-darstellung-kasten .dze-kopf__deckschicht {
	background: var(--dze-kopf-deckfarbe, var(--dze-text, #000));
	opacity: var(--dze-kopf-deckkraft, 0.3);
}

/* Bildformat, wenn der Text unter dem Bild steht (Regler „Bildformat über dem Text“). */
.dze-kopf-unterformat-3-2 {
	--dze-kopf-unter-format: 3 / 2;
}

.dze-kopf-unterformat-4-3 {
	--dze-kopf-unter-format: 4 / 3;
}

.dze-kopf-unterformat-1-1 {
	--dze-kopf-unter-format: 1 / 1;
}

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

/* 1024px: Elementors Tablet-Grenze - dort beginnen auch die Regler-Ansichten. */
@media (max-width: 1024px) {
	/*
	 * RANDLOS ab Tablet (Auftraggeber, 21.10.2026): die Flaeche zieht um den seitlichen
	 * Abstand des Containers nach aussen, und die Rasterlinie wird genau dieser Abstand.
	 * Text und Pause-Knopf stehen damit auf derselben 20px-Linie wie der Rest der Seite,
	 * statt in einer eingerueckten Flaeche bei 51/61px. Die Werte erbt das Widget vom
	 * Container (`--padding-left/right`, Rinne aus basis.css) - nichts abgeschrieben.
	 * (0,2,0): schlaegt die Rasterformel aus basis.css (`.dze-raster`, 0,1,0).
	 */
	.dze-kopf.dze-raster {
		--dze-raster: var(--padding-left, 20px);
		margin-inline: calc(var(--padding-left, 20px) * -1) calc(var(--padding-right, 20px) * -1);
		border-radius: 0;
	}

	.dze-kopf__inhalt {
		padding-block-end: var(--dze-kopf-abstand-unten, 2rem);
	}

	/*
	 * Ueber die ganze Breite, aber hoechstens Lesebreite (basis.css, ~75 Zeichen):
	 * ohne Deckel liefen bei 1024px 113-116 Zeichen pro Zeile weisse Schrift ueber das
	 * Foto (Auftraggeber, 21.10.2026). Ein eigener Wert im Regler „Textbreite“ wird
	 * ebenfalls gedeckelt - laengere Zeilen sind auf dem Tablet nie besser.
	 */
	.dze-kopf__spalte,
	.dze-kopf-text-rechts .dze-kopf__spalte {
		max-width: min(var(--dze-kopf-textbreite, 100%), var(--dze-lesebreite));
		margin-inline-start: 0;
	}

	/* Text ueber die ganze Breite: Verlauf und Lage wieder wie die Vorgabe (von unten). */
	.dze-kopf-verlauf-seite .dze-kopf,
	.dze-kopf-verlauf-seite.dze-kopf-text-rechts .dze-kopf {
		--dze-kopf-verlauf-winkel: 180deg;
		--dze-kopf-verlauf-start: 20%;
		--dze-kopf-verlauf-ende: 70%;
	}

	.dze-kopf-senkrecht-mitte .dze-kopf {
		justify-content: flex-end;
	}

	.dze-kopf-darstellung-kasten .dze-kopf__spalte,
	.dze-kopf-darstellung-kasten.dze-kopf-text-rechts .dze-kopf__spalte {
		max-width: min(var(--dze-kopf-textbreite, 100%), var(--dze-lesebreite));
		margin-inline-start: 0;
		padding: var(--dze-kopf-kasten-abstand, 2rem);
	}
}

/* --- Handy: Text unter dem Bild ------------------------------------------- */

/*
 * Nur mit der Option „Auf dem Handy: Text unter dem Bild“ (Klasse am Widget).
 *
 * 767px ist Elementors Handy-Grenze - dieselbe, ab der das Skript das Video
 * abschaltet. Eine geaenderte Grenze im Kit muss hier nachgezogen werden;
 * Elementor gibt seine Haltepunkte nicht als CSS-Variable aus.
 *
 * Das Bild wird vom Hintergrund zum Inhalt: es steht im Fluss, mit festem
 * Format, und traegt Rundung und Beschnitt selbst. Text und Knoepfe stehen
 * auf der Seitenflaeche - deshalb ohne Deckschicht, in der Seitenschrift-
 * farbe und mit einer dunklen Kontur.
 */
/*
 * „Tablet und Handy“ (Auftraggeber, 22.10.2026): dieselben Regeln ab Elementors Tablet-Grenze.
 * ZWEI BLOECKE, GLEICHER INHALT - CSS kann eine Regelgruppe nicht an zwei Haltepunkte binden.
 * Eine Aenderung im Handy-Block hier nachziehen (nur Klasse und Haltepunkt unterscheiden sich).
 */
@media (max-width: 1024px) {
	.dze-kopf-mobil-unter-tablet .dze-kopf {
		min-height: 0;
		overflow: visible;
		border-radius: 0;
		color: inherit;
	}

	.dze-kopf-mobil-unter-tablet .dze-kopf__medien {
		position: relative;
		inset: auto;
		aspect-ratio: var(--dze-kopf-unter-format, 16 / 9);
		overflow: hidden;
	}

	/* „Wie das Bild“: das Bild steht im Fluss und gibt die Hoehe vor - kein Beschnitt. */
	.dze-kopf-mobil-unter-tablet.dze-kopf-unterformat-bild .dze-kopf__medien {
		aspect-ratio: auto;
	}

	.dze-kopf-mobil-unter-tablet.dze-kopf-unterformat-bild .dze-kopf picture.dze-kopf__bild,
	.dze-kopf-mobil-unter-tablet.dze-kopf-unterformat-bild .dze-kopf img.dze-kopf__bild,
	.dze-kopf-mobil-unter-tablet.dze-kopf-unterformat-bild .dze-kopf picture.dze-kopf__bild > img.dze-kopf__bild-img {
		position: static;
		height: auto;
	}

	.dze-kopf-mobil-unter-tablet .dze-kopf__deckschicht {
		display: none;
	}

	/*
	 * Text auf der Linie der uebrigen Seite: die Flaeche ist randlos (siehe Tablet),
	 * also rueckt der Text um die Rasterlinie (= Container-Abstand) wieder ein.
	 */
	.dze-kopf-mobil-unter-tablet .dze-kopf__inhalt {
		padding: var(--widgets-spacing-row, 20px) var(--dze-raster) 0;
	}

	.dze-kopf-mobil-unter-tablet .dze-kopf__knopf--kontur {
		--dze-kopf-kontur: var(--dze-kopf-kontur-unten, var(--ast-global-color-2));
		--dze-kopf-kontur-hover: var(--dze-hintergrund, #fff);
	}

	/* Der Fokusring liegt jetzt auf der hellen Seite, nicht auf dem Foto. */
	.dze-kopf-mobil-unter-tablet .dze-kopf .dze-kopf__knopf:focus-visible {
		outline-color: currentColor;
	}

	/*
	 * Kasten unter dem Bild: randlos wie die Flaeche, der Text auf der Linie der Seite
	 * (Innenabstand seitlich = Rasterlinie). Schrift und Knopf bleiben hell - sie stehen
	 * weiter auf dem dunklen Kasten, nicht auf der Seitenflaeche.
	 */
	.dze-kopf-mobil-unter-tablet.dze-kopf-darstellung-kasten .dze-kopf {
		color: var(--dze-kopf-text, var(--dze-hintergrund, #fff));
	}

	.dze-kopf-mobil-unter-tablet.dze-kopf-darstellung-kasten .dze-kopf__inhalt {
		padding: 0;
	}

	.dze-kopf-mobil-unter-tablet.dze-kopf-darstellung-kasten .dze-kopf__spalte {
		max-width: none;
		padding: var(--dze-kopf-kasten-abstand, 2rem) var(--dze-raster);
		background: var(--dze-kopf-kasten, var(--dze-text, #000));
	}

	/* Kasten randlos, Zeilen aber hoechstens Lesebreite (Tablet: sonst ~120 Zeichen). */
	.dze-kopf-mobil-unter-tablet.dze-kopf-darstellung-kasten .dze-kopf__spalte > * {
		max-width: var(--dze-lesebreite);
	}

	.dze-kopf-mobil-unter-tablet.dze-kopf-darstellung-kasten .dze-kopf__knopf--kontur {
		--dze-kopf-kontur: var(--dze-kopf-text, var(--dze-hintergrund, #fff));
		--dze-kopf-kontur-hover: var(--dze-kopf-kasten, var(--dze-text, #000));
	}

	.dze-kopf-mobil-unter-tablet.dze-kopf-darstellung-kasten .dze-kopf .dze-kopf__knopf:focus-visible {
		outline-color: var(--dze-kopf-text, var(--dze-hintergrund, #fff));
	}

	/* Der Pause-Knopf bleibt auf dem Bild - dessen obere Ecke ist die der Flaeche. */
	.dze-kopf-mobil-unter-tablet .dze-kopf__pause {
		inset-block-start: 0.75rem;
		inset-inline-end: 0.75rem;
	}
}

@media (max-width: 767px) {
	.dze-kopf-mobil-unter .dze-kopf {
		min-height: 0;
		overflow: visible;
		border-radius: 0;
		color: inherit;
	}

	.dze-kopf-mobil-unter .dze-kopf__medien {
		position: relative;
		inset: auto;
		aspect-ratio: var(--dze-kopf-unter-format, 16 / 9);
		overflow: hidden;
	}

	/* „Wie das Bild“: das Bild steht im Fluss und gibt die Hoehe vor - kein Beschnitt. */
	.dze-kopf-mobil-unter.dze-kopf-unterformat-bild .dze-kopf__medien {
		aspect-ratio: auto;
	}

	.dze-kopf-mobil-unter.dze-kopf-unterformat-bild .dze-kopf picture.dze-kopf__bild,
	.dze-kopf-mobil-unter.dze-kopf-unterformat-bild .dze-kopf img.dze-kopf__bild,
	.dze-kopf-mobil-unter.dze-kopf-unterformat-bild .dze-kopf picture.dze-kopf__bild > img.dze-kopf__bild-img {
		position: static;
		height: auto;
	}

	.dze-kopf-mobil-unter .dze-kopf__deckschicht {
		display: none;
	}

	/*
	 * Text auf der Linie der uebrigen Seite: die Flaeche ist randlos (siehe Tablet),
	 * also rueckt der Text um die Rasterlinie (= Container-Abstand) wieder ein.
	 */
	.dze-kopf-mobil-unter .dze-kopf__inhalt {
		padding: var(--widgets-spacing-row, 20px) var(--dze-raster) 0;
	}

	.dze-kopf-mobil-unter .dze-kopf__knopf--kontur {
		--dze-kopf-kontur: var(--dze-kopf-kontur-unten, var(--ast-global-color-2));
		--dze-kopf-kontur-hover: var(--dze-hintergrund, #fff);
	}

	/* Der Fokusring liegt jetzt auf der hellen Seite, nicht auf dem Foto. */
	.dze-kopf-mobil-unter .dze-kopf .dze-kopf__knopf:focus-visible {
		outline-color: currentColor;
	}

	/*
	 * Kasten unter dem Bild: randlos wie die Flaeche, der Text auf der Linie der Seite
	 * (Innenabstand seitlich = Rasterlinie). Schrift und Knopf bleiben hell - sie stehen
	 * weiter auf dem dunklen Kasten, nicht auf der Seitenflaeche.
	 */
	.dze-kopf-mobil-unter.dze-kopf-darstellung-kasten .dze-kopf {
		color: var(--dze-kopf-text, var(--dze-hintergrund, #fff));
	}

	.dze-kopf-mobil-unter.dze-kopf-darstellung-kasten .dze-kopf__inhalt {
		padding: 0;
	}

	.dze-kopf-mobil-unter.dze-kopf-darstellung-kasten .dze-kopf__spalte {
		max-width: none;
		padding: var(--dze-kopf-kasten-abstand, 2rem) var(--dze-raster);
		background: var(--dze-kopf-kasten, var(--dze-text, #000));
	}

	/* Kasten randlos, Zeilen aber hoechstens Lesebreite (Tablet: sonst ~120 Zeichen). */
	.dze-kopf-mobil-unter.dze-kopf-darstellung-kasten .dze-kopf__spalte > * {
		max-width: var(--dze-lesebreite);
	}

	.dze-kopf-mobil-unter.dze-kopf-darstellung-kasten .dze-kopf__knopf--kontur {
		--dze-kopf-kontur: var(--dze-kopf-text, var(--dze-hintergrund, #fff));
		--dze-kopf-kontur-hover: var(--dze-kopf-kasten, var(--dze-text, #000));
	}

	.dze-kopf-mobil-unter.dze-kopf-darstellung-kasten .dze-kopf .dze-kopf__knopf:focus-visible {
		outline-color: var(--dze-kopf-text, var(--dze-hintergrund, #fff));
	}

	/* Der Pause-Knopf bleibt auf dem Bild - dessen obere Ecke ist die der Flaeche. */
	.dze-kopf-mobil-unter .dze-kopf__pause {
		inset-block-start: 0.75rem;
		inset-inline-end: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dze-kopf video.dze-kopf__video {
		transition: none;
	}
}