/* =========================================================================
   Frontend-Styles — Auszeichnungen (Digi)
   Prefixed mit .dh-ausz- für saubere Isolation
   Elementor-Controls überschreiben Spalten/Gaps/Farben via inline-Selectors
   ========================================================================= */

.dh-ausz-widget {
	box-sizing: border-box;
}
.dh-ausz-widget *, .dh-ausz-widget *::before, .dh-ausz-widget *::after {
	box-sizing: inherit;
}

/* ---------- Such- und Filterleiste ---------- */
.dh-ausz-searchbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
	align-items: center;
	justify-content: flex-start;
}

/* Mobile-Layout-Varianten (Widget-Einstellung) — greifen nur unter 640 px.
   !important nötig, weil Elementor-Inline-CSS die Breiten/Max-Widths der Controls setzt,
   und diese Regeln hier sollen das auf Mobile gezielt überschreiben. */
@media (max-width: 640px) {
	.dh-ausz-searchbar--mobile-search-top-half .dh-ausz-search-input {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
	.dh-ausz-searchbar--mobile-search-top-half .dh-ausz-filter-wrap {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	.dh-ausz-searchbar--mobile-all-stacked .dh-ausz-search-input,
	.dh-ausz-searchbar--mobile-all-stacked .dh-ausz-filter-wrap {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}
.dh-ausz-search-input,
.dh-ausz-filter-art,
.dh-ausz-filter-year {
	padding: 10px 14px;
	font-size: 15px;
	border-width: 1px;
	border-style: solid;
	/* Neutraler Default-Rahmen — NICHT currentColor, damit Textfarben-Änderungen nicht den Rahmen mit verändern */
	border-color: rgba( 128, 128, 128, 0.4 );
	background: transparent;
	color: inherit;
	border-radius: 4px;
	min-height: 44px;
	font-family: inherit;
}
.dh-ausz-search-input {
	flex: 1 1 260px;
	min-width: 200px;
}

/* Filter-Wrapper macht den Select zum Positionierungs-Kontext für den eigenen Pfeil */
.dh-ausz-filter-wrap {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	max-width: 180px;
	line-height: 0;
}
.dh-ausz-filter-art,
.dh-ausz-filter-year {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;
	padding-right: 36px;
	width: 100%;
	cursor: pointer;
}
/* Eigener Dropdown-Pfeil — Farbe über CSS-Variable entkoppelt von Textfarbe */
.dh-ausz-filter-wrap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 10px;
	height: 10px;
	transform: translateY( -65% ) rotate( 45deg );
	border-right: 2px solid var( --dh-ausz-filter-arrow-color, currentColor );
	border-bottom: 2px solid var( --dh-ausz-filter-arrow-color, currentColor );
	pointer-events: none;
	transition: transform 0.15s ease;
}

/* Fokusrahmen mit FESTEN Farben, bewusst nicht `currentColor`: Der Indikator haengt sonst
   an der Textfarbe und verschwindet, sobald der Abschnitt eine helle Schrift vererbt.
   Zweifarbiger Ring — heller Innen-, dunkler Aussenring — ist auf jedem Untergrund
   sichtbar und kommt ohne Wissen ueber den Hintergrund aus (WCAG 2.4.7 / 1.4.11).
   `:focus-visible` ist der semantisch richtige Selektor fuer Fokusindikatoren. Chrome
   wertet hier auch Mausklicks als focus-visible (nachgemessen, auch beim <select>) —
   sichtbar aendert sich gegenueber `:focus` also nichts; in Browsern, die strenger
   unterscheiden, bleibt der Ring der Tastaturbedienung vorbehalten. */
.dh-ausz-search-input:focus-visible,
.dh-ausz-filter-art:focus-visible,
.dh-ausz-filter-year:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 0;
	box-shadow: 0 0 0 4px #111111;
}

/* Platzhalter folgt der eingestellten Textfarbe. Ohne diese Regel behaelt er Chromes
   Vorgabe-Grau und wird auf dunkler Suchleiste unlesbar, ohne dass es ein Control dagegen
   gaebe. Bewusst EIGENE Regel: Ein Browser, der das Pseudo-Element nicht kennt, verwirft
   sonst die ganze Regelgruppe. 0.7 und nicht weniger — 0.6 reisst die 4,5:1. */
.dh-ausz-search-input::placeholder {
	color: currentColor;
	opacity: 0.7;
}

/* Loeschzeichen im Suchfeld selbst zeichnen. Chrome liefert fuer `type="search"` ein
   eigenes X in fest eingebauter Farbe — nachgemessen unbeeinflussbar durch `color`,
   `accent-color` und `border-color`. Gleiches Vorgehen wie beim Dropdown-Pfeil: nativen
   abschalten, eigenen per Maske zeichnen. Firefox rendert hier gar nichts. */
.dh-ausz-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 0.8em;
	height: 0.8em;
	cursor: pointer;
	background-color: var( --dh-ausz-filter-arrow-color, currentColor );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E" ) center / contain no-repeat;
	        mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/* ---------- Grid & Karten ---------- */
.dh-ausz-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}
@media (max-width: 1024px) {
	.dh-ausz-grid { grid-template-columns: repeat( 2, 1fr ); }
}
@media (max-width: 640px) {
	.dh-ausz-grid { grid-template-columns: 1fr; }
}

.dh-ausz-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.2s ease;
}
.dh-ausz-card:hover {
	transform: translateY( -2px );
}
.dh-ausz-card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.dh-ausz-card-media {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: rgba(255,255,255,0.05);
}
.dh-ausz-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dh-ausz-card-body {
	padding: 16px 0 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto; /* füllt verbleibende Höhe der Karte → Button kann an den unteren Rand geheftet werden */
}
/* Fixes Layout — unabhängig von Inhaltslänge bleiben Slots gleich groß.
   Titel: min 2 Zeilen, max 3 (Crop). Untertitel: immer 1 Zeile (auch leer).
   Vorschau: min 4 Zeilen, max 5. So richten sich die Karten immer aus. */
.dh-ausz-card-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	min-height: calc( 1.25em * 2 );
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dh-ausz-card-subtitle {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	min-height: 1.4em;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dh-ausz-card-subtitle--empty,
.dh-ausz-card-excerpt--empty {
	opacity: 0;
	visibility: hidden;
}
.dh-ausz-card-excerpt {
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	min-height: calc( 1.5em * 4 );
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Optionaler Card-Button (unter dem Vorschau-Text), nutzt Plugin-Button-Variablen
   margin-top:auto klebt den Button an den unteren Rand der Karte — unabhängig
   davon, wie lang Titel/Untertitel/Vorschau sind. So richten sich die Buttons
   über alle Karten hinweg exakt auf derselben Linie aus. */
.dh-ausz-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	border: 2px solid var( --dh-ausz-button-color, #00365d );
	color: var( --dh-ausz-button-color, #00365d );
	background: transparent;
	border-radius: 4px;
	align-self: flex-start;
	transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
	line-height: 1.2;
}
.dh-ausz-card-btn-icon {
	display: inline-flex;
	align-items: center;
	transition: transform 0.15s ease;
	line-height: 1;
}
.dh-ausz-card-btn-icon svg,
.dh-ausz-card-btn-icon i {
	display: inline-block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}
.dh-ausz-card-btn-icon svg {
	fill: currentColor;
}
/* Hover-Animation: Icon nach rechts (wenn Icon rechts steht), nach links (wenn Icon links steht) */
.dh-ausz-card:hover .dh-ausz-card-btn-icon-right .dh-ausz-card-btn-icon {
	transform: translateX( 3px );
}
.dh-ausz-card:hover .dh-ausz-card-btn-icon-left .dh-ausz-card-btn-icon {
	transform: translateX( -3px );
}

/* Gefüllte Variante (greift auf body.dh-ausz-btn-filled UND auf Widget-Wrapper .dh-ausz-btn-filled) */
.dh-ausz-btn-filled .dh-ausz-card-btn {
	background: var( --dh-ausz-button-color, #00365d );
	color: var( --dh-ausz-button-text-color, #ffffff );
	border-color: var( --dh-ausz-button-color, #00365d );
}

/* Card-Button-Hover: heller (passend zu Single-Button-Hover) */
.dh-ausz-card:hover .dh-ausz-card-btn {
	filter: brightness( 1.2 );
}
.dh-ausz-btn-filled .dh-ausz-card:hover .dh-ausz-card-btn {
	filter: brightness( 1.35 );
}

/* ---------- Karten-Modus (Mode_Registry: „cards") ----------
   Karten ohne Unterseite. Es gibt keinen <a>-Mantel um die ganze Karte — dafür sind
   Mail-Adresse, Telefonnummer und Links EINZELN anklickbar. Name und Funktion stehen
   zentriert (wie in der FCAnnaberg-Vorlage), die Kontaktzeilen linksbündig darunter,
   damit die Adressen aller Karten auf einer Fluchtlinie beginnen.
   Alle Regeln hängen an `.dh-ausz-card--plain` oder an Klassen, die es nur in diesem
   Modus gibt — der Standard-Aufbau bleibt davon unberührt. */
.dh-ausz-card--plain .dh-ausz-card-title,
.dh-ausz-card--plain .dh-ausz-card-subtitle {
	text-align: center;
}
/* Ohne Ziel keine Bewegung: die Karte ist kein Link mehr, ein Hover-Versatz
   verspräche eine Klickfläche, die es gar nicht gibt. */
.dh-ausz-card--plain:hover {
	transform: none;
}
/* Seitlich/unten fehlte hier bisher jeder Innenabstand (nur `padding: 16px 0 0` von oben,
   siehe `.dh-ausz-card-body` weiter unten in dieser Datei) — im Karten-Modus sichtbar: der
   Link-Block klebt an der linken Kante, unten fehlt der Abschluss. Bei zentrierten Inhalten
   (Standard-Modus) fiel das nie auf, deshalb bewusst auf `.dh-ausz-card--plain` beschraenkt
   und nicht an der Basisregel geaendert — Bestandsschutz.
   16px, nicht 8px: Die Karte kennt drei Stufen (siehe Kommentar bei `.dh-ausz-card-contact`
   unten) — 4px innerhalb eines Blocks, 8px als Grundabstand ZWISCHEN Bloecken im
   Kartenkoerper, 16px als Fuge zwischen zwei EIGENSTAENDIGEN Abschnitten. Der Rand zwischen
   Karteninhalt und Kartenkante ist kein Block-zu-Block-Abstand, sondern der aeussere
   Abschluss der Kachel — dieselbe Kategorie wie der bestehende obere Wert (16px, seit vor
   2.12.0 unveraendert). Rundum 16px macht den Kartenkoerper damit in sich stimmig, statt
   einen vierten, unbelegten Wert einzufuehren.
   GEMESSEN (nicht hergeleitet, Aufgabe 6/Punkt 8): Das Stil-Control „Karte" → „Innenabstand"
   (`{{WRAPPER}} .dh-ausz-card-body`, class-widget-galerie.php) schlaegt diese Regel WEITERHIN
   — auch bei dieser deckungsgleich klassenbasierten Selektorform. Elementor loest
   `{{WRAPPER}}` zur Laufzeit aber nicht zu EINER Klasse auf, sondern zu
   `.elementor-<post-id> .elementor-element.elementor-element-<element-id>` — mit dem
   angehaengten `.dh-ausz-card-body` also VIER Klassen (Spezifitaet 0,4,0), waehrend diese
   Regel hier nur zwei traegt (0,2,0). Kein Gleichstand, das Control gewinnt strukturell,
   unabhaengig von der Ladereihenfolge der Stylesheets — am laufenden System nachgemessen
   (HTML-Quelltext einer Testseite mit gesetztem Innenabstand, siehe Aufgabe-6-Bericht).
   Deshalb keine CSS-Variable mit var()-Rueckfall noetig (anders als bei
   `--dh-ausz-card-link-color`, wo echter Gleichstand bestand). */
.dh-ausz-card--plain .dh-ausz-card-body {
	padding: 16px;
}

.dh-ausz-card-contact {
	list-style: none;
	/* 8px statt 4px (18.9.2026): Der Kontaktblock klebte an der Funktion darüber und las
	   sich nicht als eigener Abschnitt.
	   Der Wert ist aus dem vorhandenen Gefüge der Karte genommen, nicht geschätzt. Die
	   Karte kennt drei Stufen: 4px INNERHALB eines Blocks (Abstand der Kontaktzeilen
	   untereinander, Abstand unter der Link-Überschrift), 8px als Grundabstand zwischen den
	   Blöcken des Kartenkörpers (`gap` in `.dh-ausz-card-body`) und 16px als Fuge zwischen
	   zwei eigenständigen Abschnitten — so viel liegt zwischen Kontakt- und Link-Block
	   (8px `gap` + 8px `padding-top` an `.dh-ausz-card-links`), und so viel ist auch der
	   obere Innenabstand des Kartenkörpers.
	   Die alten 4px ergaben zusammen mit dem `gap` eine Fuge von 12px und waren damit die
	   einzige Stelle der Karte, die zwischen zwei Stufen lag. 8px ergeben 16px — der
	   Kontaktblock steht jetzt zwischen zwei gleich breiten Fugen und liest sich dadurch
	   als eigener Abschnitt. */
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
	line-height: 1.5;
}
.dh-ausz-card-contact-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	/* Die Farbe der Zeile sitzt seit 18.9.2026 HIER und nicht mehr auf dem <a> darin.
	   Grund: Das Symbol steht bewusst AUSSERHALB des Links (es ist Dekoration, der
	   Screenreader liest die Adresse aus dem Linktext) und nahm die Klickfarbe deshalb
	   nicht an — der Auftraggeber sah eine eingefärbte Adresse neben einem grauen
	   Briefumschlag. Von hier aus erben beide Kinder denselben Wert: der Link über
	   `color: inherit`, das SVG über `currentColor`. Die Rückfallkette steht dadurch
	   weiterhin nur an einer Stelle je Zeilenart.

	   Verschachtelte Rueckfallkette: Ist im Widget („Stil — Karte" → „Farbe der
	   anklickbaren Zeilen") nichts gesetzt, bleibt --dh-ausz-card-link-color undefiniert
	   und es gilt unveraendert die Button-Farbe des Bereichs. Bestandsschutz. */
	color: var( --dh-ausz-card-link-color, var( --dh-ausz-button-color, #00365d ) );
}
.dh-ausz-card-contact-icon {
	flex: 0 0 auto;
	/* Feste Kantenlänge statt `1em`: Bis 18.9.2026 standen hier Schriftzeichen, deren
	   gezeichnete Größe an der Schriftart des Themes hing — `1em` war die Breite der Box,
	   nicht die des Glyphen. Jetzt ein Inline-SVG (templates/partials/card.php), das in
	   jedem Theme dieselbe Fläche einnimmt.
	   Kein `opacity` mehr: das Symbol wirkte neben dem voll deckenden Text blass. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	/* Kastenhöhe = EINE Textzeile. Zusammen mit `align-self: flex-start` sitzt das Symbol
	   dadurch auch dann neben der ERSTEN Zeile, wenn eine lange Adresse umbricht, statt
	   zwischen beiden Zeilen zu schweben.
	   ZWEI `height`-Deklarationen sind hier Absicht, keine Redundanz (Fix-Runde 1, Aufgabe 4,
	   Befund „line-height driftet vom Symbolkasten weg"):
	   Bis zu diesem Fix war „EINE Textzeile" als `1.5em` verdrahtet — 1.5 war die geerbte
	   `line-height` von `.dh-ausz-card-contact` zum Zeitpunkt der ersten Fassung. Seit die
	   Kontakt-/Link-Zeilen eine eigene Typografie-Gruppe im Widget haben (`card_link_typography`,
	   class-widget-galerie.php), kann genau diese `line-height` vom Panel aus überschrieben
	   werden — `1.5em` mass dann nicht mehr `line-height`, sondern nur noch die (unveränderte)
	   Annahme „1.5". Kasten und tatsächliche Zeilenhöhe liefen auseinander.
	   `1lh` (CSS Values 4) ist die Einheit für genau diesen Fall: „der berechnete Wert von
	   `line-height` auf diesem Element" — unabhängig davon, ob die Zeilenschrift Elementors
	   eigenen Vorgabewert traegt oder eine im Panel gesetzte. `height: 1.5em` bleibt als
	   RÜCKFALL stehen: Browser ohne `lh`-Unterstützung ignorieren die ungültige zweite
	   Deklaration und behalten die erste (gültige) Regel derselben Eigenschaft — kein
	   `@supports` nötig, dieselbe Kaskade greift. Browser mit Unterstützung werten die
	   zweite (spätere, gültige) Deklaration und folgen der echten Zeilenhöhe.
	   BEIDE Deklarationen müssen in dieser Reihenfolge stehen bleiben, und dieses Element
	   darf keine eigene `line-height` bekommen: `1lh` liest den BERECHNETEN Wert von
	   `line-height` AN DIESEM Element, und der entsteht hier ausschliesslich durch Vererbung
	   vom <li> (`.dh-ausz-card-contact-row`), auf das Elementor die Typografie-Gruppe
	   `card_link_typography` schreibt. Eine `line-height` hier — und sei es nur, um ein
	   Symbol zu zentrieren — kappte genau diese Kette. Die Zentrierung des Symbols passiert
	   deshalb im Kasten (`align-items`/`justify-content` oben) und, beim Icon-Font, auf dem
	   KIND weiter unten. Aufgabe 5 hat die Regel darunter erweitert, ohne diese anzufassen. */
	height: 1.5em;
	height: 1lh;
	align-self: flex-start;
}
/* Die feste Kantenlänge von 18px ist eine ausdrückliche Ansage des Auftraggebers vom
   18.9.2026 — sie hängt bewusst NICHT an der Kachelschrift und gilt seit Aufgabe 5 (Punkt 7,
   Icon-Auswahl) für ein gewähltes Symbol genauso wie für die eingebauten.
   ZWEI Regeln, weil hier ZWEI Dinge ankommen können und nur eines davon das eingebaute
   Inline-SVG ist: Elementors `Icons_Manager::render_icon()` liefert für dieselbe Auswahl
   entweder ein <svg> (Experiment „Inline Font Icons" aktiv — die Vorgabe seit Elementor
   3.17) oder ein <i class="fas fa-…"> (Experiment abgeschaltet). Die Regel galt bis
   Aufgabe 5 nur für `svg`; ein Font-Symbol stand dadurch in der Schriftgröße des Themes
   da — die 18px wären still verloren gegangen. */
.dh-ausz-card-contact-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}
/* Die FARBE der Zeile trägt seit dem Wegfall der Unterstreichung (18.9.2026) die halbe Last
   der Erkennbarkeit: Farbe und Symbol sind die einzigen zwei Hinweise darauf, dass diese
   Zeilen klickbar sind. Unsere eingebauten SVG sagen das selbst im Markup
   (`stroke="currentColor"` beim Briefumschlag, `fill="currentColor"` beim Hörer);
   **Elementors `<svg class="e-font-icon-svg">` bringt gar kein `fill` mit** und stünde ohne
   diese Regel schwarz neben farbigem Text. Für den Karten-Knopf steht dieselbe Zeile seit
   jeher da (`.dh-ausz-card-btn-icon svg` weiter oben) — das hier ist ihr Zwilling.
   `:not([fill])` ist NICHT Zierrat, sondern die eigentliche Bedingung: Eine CSS-Deklaration
   schlägt ein Präsentationsattribut im Markup. Ein unbedingtes `fill: currentColor` würde
   das `fill="none"` unseres Briefumschlags überstimmen und aus der gezeichneten Kontur eine
   ausgefüllte Fläche machen. Der Selektor greift also genau dort, wo das SVG keine eigene
   Aussage über `fill` mitbringt — und das ist exakt Elementors Fall. `fill` vererbt sich
   von hier auf die <path>/<rect> darin, die ihrerseits keines tragen.
   Beim Icon-Font (<i>) braucht es nichts dergleichen: dessen Glyph zeichnet in `color`, und
   das erbt die Zeile ohnehin. */
.dh-ausz-card-contact-icon svg:not([fill]) {
	fill: currentColor;
}
.dh-ausz-card-contact-icon i {
	/* Beim Icon-Font zeichnet nicht das Element selbst, sondern sein ::before-Glyph. Die
	   Kantenlänge muss deshalb ZWEIMAL gesagt werden: als Kasten (width/height, das ist
	   das, was gemessen wird) und als `font-size` (das ist das, was gezeichnet wird).
	   `display: flex` zentriert den Glyphen im Kasten, auch wenn er — wie bei den breiteren
	   Font-Awesome-Symbolen — nicht quadratisch ist.
	   `line-height: 1` steht HIER am <i> und nicht am Kasten darüber: Der Kasten muss seine
	   geerbte Zeilenhöhe behalten, sonst läuft `height: 1lh` oben ins Leere (Kommentar dort). */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
}
/* Bis 17.9.2026 hier unterstrichen (Befund I2 der Aufgabe-9-Pruefung: „im Karten-Modus
   sind diese Zeilen die einzigen Klickflaechen, als Fliesstext erkennt sie niemand").
   Richtig zum damaligen Zeitpunkt — die Symbole waren blasse Schriftzeichen. Seit dem
   18.9.2026 sind sie Inline-SVG in der Zeilenfarbe (siehe `.dh-ausz-card-contact-icon`
   oben); die Klickbarkeit ist jetzt am Symbol UND an der Farbe erkennbar, die
   Unterstreichung nicht mehr noetig.
   Entscheidung des Auftraggebers, 18.9.2026: „E-Mail/Telefon-Text ohne Unterstreichung
   waere sichtbarer." Zugleich eine Angleichung, keine Ausnahme mehr: Karten sind
   vollflaechige bzw. (im Karten-Modus) einzeln anklickbare Flaechen — dieselbe Regel wie
   bei `.dh-ausz-card-link` und `.dh-ausz-card-link-row a` darunter, die beide nie
   unterstrichen waren (siehe `detail-lesbarkeit.spec.ts`, „Karten-Links bleiben ohne
   Unterstreichung"). Keine Zusicherung haengt an der alten Unterstreichung — siehe
   Aufgabe-6-Bericht der Widget-Modus-Runde. */
.dh-ausz-card-contact-row a {
	color: inherit;
	/* AUSDRUECKLICH `none`, nicht bloss „nicht mehr gesetzt" — Abschlusspruefung der Runde,
	   Befund I1. Die urspruengliche Fassung hatte `text-decoration: underline` nur GELOESCHT.
	   Gemessen am laufenden System (21.9.2026) hielt die Unterstreichung danach nicht unser
	   Stylesheet fern, sondern ein FREMDES: hello-elementors `reset.css` unterstreicht Links
	   sehr wohl (`a,a:visited{text-decoration:underline}` an Offset 1792, nach dem `none` an
	   840); dass die Kontaktzeilen trotzdem glatt blieben, lag allein an Elementors
	   `.elementor a{text-decoration:none}` (Spezifitaet (0,1,1) gegen (0,0,1)). Jede Regel
	   gleicher oder hoeherer Spezifitaet, die NACH Elementors `frontend.min.css` laedt, holte
	   die Unterstreichung zurueck — eine globale Style-Kit-Typografie „Link → unterstrichen"
	   (`.elementor-kit-N a{…}`, (0,1,1)), eine Child-Theme-Regel, ein weiteres Plugin. Unser
	   Stylesheet laedt auf `/ueber-uns/` an Position 29 und damit nach allen genannten; die
	   Zusage vom 18.9.2026 haelt erst, wenn sie hier ausdruecklich steht. Genau so macht es
	   die Schwesterregel `.dh-ausz-card-link` weiter oben seit jeher.
	   ROLANDS TYPOGRAFIE-GRUPPE GREIFT WEITERHIN DURCH — gemessen, nicht angenommen (Test
	   „Eine im Panel gesetzte Unterstreichung greift weiterhin durch", karten-abstand.spec.ts):
	   `card_link_typography` schreibt auf `{{WRAPPER}} .dh-ausz-card-contact-row`, also auf
	   das <li> UEBER diesem <a>. Eine dort gesetzte Unterstreichung wird laut CSS-Spezifikation
	   auf die Inline-Nachkommen GEZEICHNET und laesst sich von ihnen nicht abschalten — ein
	   `text-decoration: none` am Nachkommen entfernt die Dekoration des Vorfahren nicht. Diese
	   Regel hier steht also nicht im Weg. (Bei der Schwesterregel `.dh-ausz-card-link-row a`
	   weiter unten liegt es einfacher: die Gruppe schreibt dort direkt auf das <a>, mit
	   aufgeloestem `{{WRAPPER}}` also (0,4,1) gegen die (0,1,1) der Plugin-Regel.) Die
	   Entscheidung vom 18.9.2026 betrifft die VORGABE, nicht das Verbot. */
	text-decoration: none;
	/* Lange Mail-Adressen sollen die Kachel nicht auseinanderdrücken. */
	overflow-wrap: anywhere;
}

/* margin-top:auto heftet den Link-Block an den unteren Rand — dieselbe Absicht wie
   beim Karten-Button im Standard-Modus: die Blöcke fluchten über alle Karten hinweg,
   egal wie lang Name, Funktion und Kontaktzeilen sind. */
.dh-ausz-card-links {
	margin-top: auto;
	padding-top: 8px;
}
/* NACHRUNDE 22.9.2026 (Befund B3): `font-size` ist hier weiterhin die VORGABE, keine feste
   Konstante mehr — `card_link_typography` (class-widget-galerie.php) schreibt ihr Feld
   `font_size` bewusst ZUSAETZLICH auf `.dh-ausz-card-links-heading`, damit die Ueberschrift
   mit den Link-/Kontaktzeilen mitwaechst, statt bei groesserer Zeilenschrift kleiner als die
   eigenen Eintraege zu wirken. Seit RUNDE 2.12.3 (Aufgabe I; Abschlusspruefung M-5) gilt
   dasselbe fuer `font_family`: auch die Schriftfamilie der Zeilen erreicht die Ueberschrift
   (ohne gesetzten Wert keine Deklaration, dann bleibt die Theme-Schrift). `font-weight` bleibt bewusst NUR hier verdrahtet und ist von
   dieser Gruppe nicht erreichbar — sonst wuerde eine gesetzte Typografie das Fettgedruckt
   ueberschreiben, mit dem sich die Ueberschrift von ihren eigenen (nicht fetten) Zeilen
   abhebt. Ohne gesetzten Wert gibt Elementor fuer `font_size` keine Deklaration aus, diese
   Regel bleibt dann die einzige Quelle — Bestandsschutz: 14px, fett, wie bisher. */
.dh-ausz-card-links-heading {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
}
.dh-ausz-card-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dh-ausz-card-link-row {
	margin: 0;
}
.dh-ausz-card-link-row a {
	font-size: 15px;
	line-height: 1.5;
	/* Derselbe Wert wie bei den Kontaktzeilen darueber — die Kachel soll in sich einheitlich
	   bleiben, auch wenn jemand die Farbe im Widget aendert. Hier steht die Kette direkt am
	   <a> statt an der Zeile: In dieser Zeilenart gibt es kein Geschwister-Element, das sie
	   mit erben muesste (kein Symbol), also gibt es auch nichts zu vererben. */
	color: var( --dh-ausz-card-link-color, var( --dh-ausz-button-color, #00365d ) );
	/* Keine Unterstreichung mehr seit 18.9.2026 — dieselbe Entscheidung wie bei den
	   Kontaktzeilen oben (`.dh-ausz-card-contact-row a`), dort ausfuehrlich begruendet,
	   einschliesslich der Messung, warum hier `none` AUSDRUECKLICH stehen muss und nicht
	   bloss fehlen darf (Abschlusspruefung der Runde, Befund I1). */
	text-decoration: none;
	overflow-wrap: anywhere;
}

/* Angleich der Höhen zwischen Karten */
@supports (display: grid) {
	.dh-ausz-grid {
		grid-auto-rows: 1fr;
	}
}

/* ---------- "Mehr laden"-Button ---------- */
.dh-ausz-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}
.dh-ausz-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	font-size: 16px;
	font-weight: 600;
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
	border-radius: 4px;
	cursor: pointer;
	min-height: 48px;
	/* Transition-Property erweitert auf transform + box-shadow + border-color, damit
	   Hover-Animationen + Schatten-Wechsel sauber animieren. Dauer/Timing setzt das
	   Elementor-Widget per Inline-CSS (Default 150ms). */
	transition-property: background, color, border-color, transform, box-shadow;
	transition-duration: 150ms;
	transition-timing-function: ease;
}
.dh-ausz-more-btn:hover:not(:disabled) {
	background: currentColor;
	color: #ffffff;
}
.dh-ausz-more-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ---------- Hover-Animationen für „Alle anzeigen“-Button ---------- */
.dh-ausz-more-btn--anim-grow:hover:not(:disabled) {
	transform: scale( 1.05 );
}
.dh-ausz-more-btn--anim-lift:hover:not(:disabled) {
	transform: translateY( -3px );
}
.dh-ausz-more-btn--anim-grow-lift:hover:not(:disabled) {
	transform: scale( 1.05 ) translateY( -3px );
}
.dh-ausz-more-btn--anim-pulse:hover:not(:disabled) {
	animation: dh-ausz-btn-pulse 0.9s ease-in-out infinite;
}
@keyframes dh-ausz-btn-pulse {
	0%, 100% { transform: scale( 1 ); }
	50%      { transform: scale( 1.06 ); }
}

/* Leer-Hinweis: uebernimmt Hintergrundfarbe, Textfarbe und Eckenradius der Karte, an
   deren Stelle er steht — Rahmen und Schatten bleiben bewusst den Karten vorbehalten
   (dort ueber .dh-ausz-card geregelt). Ohne eigene Farbe sass er auf dem Elementor-
   Abschnitt und war dort praktisch unsichtbar (1,03:1).
   KEIN `opacity` — die daempft den Kasten samt Hintergrund gegen den Abschnitt.
   RUNDE 2.12.2, Abschlusspruefung M1: Die Textfarbe der Karte (ueber
   `--dh-ausz-excerpt-color`, das Farbfeld „Stil — Vorschau-Text") gibt es nur noch im
   Standard-Modus. Im Karten-Modus steht der Abschnitt nicht im Panel und die Variable nicht
   im Elementor-CSS (Aufgabe B) — dort erbt der Hinweis ohne eigene Textfarbe
   („Stil — Hinweis-Meldungen") die Farbe der Umgebung (`inherit`), den Hintergrund aber
   weiter von der Karte. */
.dh-ausz-empty {
	padding: 24px;
	text-align: center;
	font-style: italic;
	grid-column: 1 / -1;
	background: var( --dh-ausz-empty-bg, var( --dh-ausz-card-bg, transparent ) );
	color: var( --dh-ausz-empty-color, var( --dh-ausz-excerpt-color, inherit ) );
	border-radius: var( --dh-ausz-card-radius, 4px );
}

/* ---------- Detailseite ---------- */
.dh-ausz-single-main {
	display: block;
}
.dh-ausz-preview-banner {
	padding: 12px 16px;
	background: #fff8e5;
	border-left: 4px solid #d77a00;
	color: #5c3a00;
	font-weight: 600;
	text-align: center;
	margin-bottom: 16px;
	border-radius: 4px;
}

/* Hero-Bereich — alle Farben aus Plugin-Einstellungen (CSS-Variablen) */
.dh-ausz-hero-section {
	background: var( --dh-ausz-hero-bg, #ffffff );
	min-height: 69vh;
	padding: 180px 20px 60px;    /* viel Top-Padding, damit der überlappende Elementor-Header nicht den Titel verdeckt */
	display: flex;
	align-items: center;
	text-align: left;
}
.dh-ausz-hero-inner {
	max-width: 900px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.dh-ausz-hero-eyebrow {
	margin: 0;
	letter-spacing: 0.18em;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var( --dh-ausz-eyebrow-color, #000000 );
}
.dh-ausz-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
}

.dh-ausz-single-title {
	font-size: clamp( 32px, 5vw, 54px );
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
	color: var( --dh-ausz-title-color, #000000 );
}
.dh-ausz-single-year {
	display: inline-block;
	padding: 4px 14px;
	background: rgba(0,0,0,0.06);
	border: 1px solid currentColor;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	color: var( --dh-ausz-year-color, #000000 );
}
.dh-ausz-single-subtitle {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: var( --dh-ausz-subtitle-color, #000000 );
}
.dh-ausz-tag {
	display: inline-block;
	padding: 4px 10px;
	background: rgba(0,0,0,0.06);
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var( --dh-ausz-tag-color, #000000 );
}

/* Content-Bereich unter dem Hero — Hintergrund per CSS-Variable steuerbar */
.dh-ausz-single-content-wrap {
	background: var( --dh-ausz-content-bg, #ffffff );
}
.dh-ausz-single-article {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px 60px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.dh-ausz-single-hero {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	/* Schatten wird per Inline-CSS aktiviert/deaktiviert (Plugin-Einstellung „Schlagschatten am Hauptbild") */
}
.dh-ausz-single-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Titelbild-Lightbox: Zoom-Anchor muss die 16:9-Box voll ausfüllen,
   sonst (inline-Anchor) verrutscht/verkleinert sich das Bild. */
.dh-ausz-single-hero-zoom .dh-ausz-gallery-link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	cursor: zoom-in;
}
.dh-ausz-single-content {
	font-size: 17px;
	line-height: 1.6;
	color: var( --dh-ausz-body-color, #333333 );
}
.dh-ausz-single-content p {
	margin: 0 0 1em;
}
.dh-ausz-single-content h1,
.dh-ausz-single-content h2,
.dh-ausz-single-content h3,
.dh-ausz-single-content h4,
.dh-ausz-single-content h5,
.dh-ausz-single-content h6 {
	color: var( --dh-ausz-heading-color, #00365d );
}

/* Links im Beschreibungstext unterstreichen. Das Theme entfernt die Unterstreichung, damit
   waere ein Link mitten im Text nur an der Farbe erkennbar (WCAG 1.4.1). Bewusst OHNE
   `body.single-`, damit auch das Detail-Widget auf beliebigen Seiten erfasst wird.
   Gleicher Abstand wie bei der eigenen Links-Liste, damit beide Linkarten gleich aussehen. */
.dh-ausz-single-content a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ========================================================================
   Anti-Elementor-Kit-Override-Block
   ------------------------------------------------------------------------
   Elementor generiert beim Aktivieren des „Site Kits" globale CSS-Regeln
   wie `.elementor-kit-5 h4 { color: var(--e-global-color-xxx); }`. Diese
   haben Spezifität (0,1,1), werden NACH dieser Datei ausgegeben und
   gleichen/übertreffen damit unsere einfachen Klassen-Regeln. Damit alle
   Farb-Einstellungen des Plugins zuverlässig greifen, werden hier alle
   relevanten Regeln mit `body.dh-ausz-single` präfixiert → Spezifität
   (0,2,0) bzw. (0,2,1) — gewinnt ohne !important.

   Herkunft: unverändert aus dem Vorgänger-Plugin dh-auszeichnungen 1.2.1,
   damals mit dem Präfix `body.single-dh_auszeichnung` — aus der Zeit vor
   Projekten, Presse und weiteren Bereichen. Bis 2.12.2 galt der Block
   deshalb NUR auf Auszeichnungs-Detailseiten.

   RUNDE 2.12.3 (Aufgabe J): Präfix auf die gemeinsame Body-Klasse
   `dh-ausz-single` umgestellt, die `Assets::body_classes()` auf der
   Detailseite JEDES Bereichs mit Detailseite setzt (nicht auf Galerie-/
   Übersichtsseiten, nicht auf der Plugin-404, nicht beim Detail-Widget auf
   beliebigen Seiten). Spezifität unverändert (Klasse statt Klasse), auf
   Auszeichnungs-Seiten daher keine Änderung — gemessen, nicht angenommen.
   Die Farben selbst kommen weiter je Bereich aus den CSS-Variablen, die
   Assets::build_inline_css() an `body.single-<cpt>` hängt.
   Gemessen am FIN-Klon (24.9.2026): Mit den FIN-Einstellungen sieht man
   auf Projekt/Presse vorher wie nachher dasselbe, weil die Kit-Farbe
   zufällig der eingestellten gleicht; bei abweichender Einstellung schlug
   das Kit vorher h4 im Text und den Zurück-Button im Umriss-Stil.
   ======================================================================== */

/* Fließtext-Farbe auch im Elementor-Text-Editor-Widget (Single) */
body.dh-ausz-single .elementor-widget-text-editor,
body.dh-ausz-single .elementor-widget-theme-post-content {
	color: var( --dh-ausz-body-color, #333333 );
}

body.dh-ausz-single .elementor-widget-heading .elementor-heading-title,
body.dh-ausz-single .dh-ausz-single-content h1,
body.dh-ausz-single .dh-ausz-single-content h2,
body.dh-ausz-single .dh-ausz-single-content h3,
body.dh-ausz-single .dh-ausz-single-content h4,
body.dh-ausz-single .dh-ausz-single-content h5,
body.dh-ausz-single .dh-ausz-single-content h6,
body.dh-ausz-single .dh-ausz-gallery-heading {
	color: var( --dh-ausz-heading-color, #00365d );
}

body.dh-ausz-single .dh-ausz-single-title {
	color: var( --dh-ausz-title-color, #000000 );
}
body.dh-ausz-single .dh-ausz-hero-eyebrow {
	color: var( --dh-ausz-eyebrow-color, #000000 );
}
body.dh-ausz-single .dh-ausz-single-year {
	color: var( --dh-ausz-year-color, #000000 );
}
body.dh-ausz-single .dh-ausz-single-subtitle {
	color: var( --dh-ausz-subtitle-color, #000000 );
}
body.dh-ausz-single .dh-ausz-tag {
	color: var( --dh-ausz-tag-color, #000000 );
}
body.dh-ausz-single .dh-ausz-single-content {
	color: var( --dh-ausz-body-color, #333333 );
}

/* Mobile: passt Mindesthöhe + Top-Padding an (Header-Balken dort schlanker) */
@media (max-width: 768px) {
	.dh-ausz-hero-section {
		min-height: 35vh;
		padding-top: 120px;
		padding-bottom: 40px;
	}
}

/* ---------- Single-Galerie ---------- */
.dh-ausz-single-gallery {
	margin-top: 32px;
}
.dh-ausz-gallery-heading {
	font-size: 22px;
	margin: 0 0 16px;
	color: var( --dh-ausz-heading-color, #00365d );
}
.dh-ausz-gallery-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 10px;
}
.dh-ausz-gallery-grid li {
	margin: 0;
}
.dh-ausz-gallery-link {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 1 / 1;
}
.dh-ausz-gallery-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}
.dh-ausz-gallery-link:hover .dh-ausz-gallery-img {
	transform: scale( 1.05 );
}

/* ---------- Zurück-Button + externer Projekt-Button ---------- */
.dh-ausz-single-footer {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.dh-ausz-ext-btn {
	gap: 8px;
}
.dh-ausz-ext-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.dh-ausz-ext-btn-icon svg {
	display: block;
}
/* WP-eigene .screen-reader-text-Klasse ist meist im Theme da. Falls nicht, hier ein Fallback,
   damit der „öffnet in neuem Tab"-Hinweis nicht sichtbar wird. Gilt auch fuer den
   Dokumente-Abschnitt: dort steht sonst „(PDF, 1,2 MB, öffnet in neuem Tab)" ungefiltert auf
   der Seite, wenn das Theme die Klasse nicht mitbringt. */
.dh-ausz-ext-btn .screen-reader-text,
.dh-ausz-docs-link .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}
/* RUNDE 2.12.3 (Aufgabe J): `body.dh-ausz-single` statt `body.single-dh_auszeichnung` —
   sonst schlägt `.elementor-kit-5 a` (0,1,1) den Umriss-Button auf Projekt-/Presse-Seiten. */
.dh-ausz-back-btn,
body.dh-ausz-single .dh-ausz-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	color: var( --dh-ausz-button-color, #00365d );
	border: 2px solid currentColor;
	border-radius: 4px;
	transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
	background: transparent;
}
.dh-ausz-back-btn:hover,
body.dh-ausz-single .dh-ausz-back-btn:hover {
	background: rgba( 0,0,0, 0.08 );
}

/* Gefüllte Button-Variante — aktiv wenn Body-Klasse dh-ausz-btn-filled gesetzt ist */
body.dh-ausz-btn-filled .dh-ausz-back-btn,
body.dh-ausz-single.dh-ausz-btn-filled .dh-ausz-back-btn {
	background: var( --dh-ausz-button-color, #00365d );
	color: var( --dh-ausz-button-text-color, #ffffff );
}
/* Hover: deutlich heller werden (matches Website-Buttons-Konvention) */
body.dh-ausz-btn-filled .dh-ausz-back-btn:hover,
body.dh-ausz-single.dh-ausz-btn-filled .dh-ausz-back-btn:hover,
body.dh-ausz-btn-filled .dh-ausz-back-btn:focus-visible,
body.dh-ausz-single.dh-ausz-btn-filled .dh-ausz-back-btn:focus-visible {
	background: var( --dh-ausz-button-color, #00365d );
	color: var( --dh-ausz-button-text-color, #ffffff );
	filter: brightness( 1.35 );
}

/* ---------- 404 ----------
   Das Farbband über die VOLLE Breite ist hier nicht Zierde, sondern trägt den Kopfbereich:
   Der Elementor-Header der Website ist transparent und überlappt den Seitenanfang — sein
   Logo und seine Menüpunkte sind hell und rechnen mit einem dunklen Untergrund. Auf der
   Detailseite liefert den `.dh-ausz-hero-section`. Die 404-Seite war die einzige Seite des
   Plugins ohne so ein Band; dort stand Weiß auf Weiß und der Kopfbereich war unsichtbar.
   Deshalb liegt der Hintergrund am <main> (volle Breite) und die Spaltenbreite am -inner. */
.dh-ausz-404 {
	background: var( --dh-ausz-hero-bg, #ffffff );
	/* Großzügiges Top-Padding, weil der Header überlappt — sonst verschwindet der Titel
	   dahinter. Entspricht `.dh-ausz-hero-section`, nur knapper, weil hier weniger steht. */
	padding: 140px 20px 80px;
	text-align: center;
}
.dh-ausz-404-inner {
	max-width: 720px;
	margin: 0 auto;
}
@media (max-width: 768px) {
	.dh-ausz-404 {
		padding: 100px 20px 60px;
	}
}
.dh-ausz-404-title {
	font-size: clamp( 22px, 3vw, 32px );
	margin: 0 0 16px;
	color: var( --dh-ausz-title-color, inherit );
}
.dh-ausz-404-text {
	font-size: 17px;
	margin: 0 0 28px;
	opacity: 0.8;
	color: var( --dh-ausz-subtitle-color, var( --dh-ausz-title-color, inherit ) );
}
.dh-ausz-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
/* Die Buttons stehen hier AUF dem Farbband, nicht wie sonst auf dem hellen Inhaltsbereich.
   Sie richten sich deshalb nach der TITELFARBE des Hero, nicht nach `--dh-ausz-button-color`:
   Die Titelfarbe ist per Definition auf dem Hero-Hintergrund lesbar, sonst wäre schon der
   Titel unlesbar. Beim FIN-Bestand ist das entscheidend — dort ist `button_color` (#00365d)
   exakt der Hero-Hintergrund, gefüllte Buttons wären also unsichtbar. Die gefüllte Variante
   (`body.dh-ausz-btn-filled`) wird hier bewusst mit übersteuert, deshalb beide Selektoren. */
.dh-ausz-404 .dh-ausz-back-btn,
body.dh-ausz-btn-filled .dh-ausz-404 .dh-ausz-back-btn {
	background: transparent;
	color: var( --dh-ausz-title-color, #00365d );
	border: 2px solid currentColor;
}
/* Hover als Tönung aus der eigenen Farbe: funktioniert auf hellem wie auf dunklem Band,
   anders als ein festes Schwarz- oder Weiß-Overlay. */
.dh-ausz-404 .dh-ausz-back-btn:hover,
.dh-ausz-404 .dh-ausz-back-btn:focus-visible,
body.dh-ausz-btn-filled .dh-ausz-404 .dh-ausz-back-btn:hover,
body.dh-ausz-btn-filled .dh-ausz-404 .dh-ausz-back-btn:focus-visible {
	background: color-mix( in srgb, currentColor 18%, transparent );
	filter: none;
}

/* ---------- Motion-Präferenzen ---------- */
@media (prefers-reduced-motion: reduce) {
	.dh-ausz-card,
	.dh-ausz-gallery-img,
	.dh-ausz-more-btn {
		transition: none;
	}
	/* Hover-Animationen auf dem „Alle anzeigen“-Button ebenfalls aus */
	.dh-ausz-more-btn--anim-grow:hover:not(:disabled),
	.dh-ausz-more-btn--anim-lift:hover:not(:disabled),
	.dh-ausz-more-btn--anim-grow-lift:hover:not(:disabled),
	.dh-ausz-more-btn--anim-pulse:hover:not(:disabled) {
		transform: none;
		animation: none;
	}
}

/* === Detail-Widget Ausbau (v1.1.0) === */

/* Hero Modus B — Bild als Hintergrund + Overlay */
.dh-ausz-hero-mode-b .dh-ausz-hero-section { position: relative; display: flex; flex-direction: column; min-height: 320px; }
.dh-ausz-hero-mode-b .dh-ausz-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.dh-ausz-hero-mode-b .dh-ausz-hero-bg-img { width: 100%; height: 100%; object-fit: cover; }
.dh-ausz-hero-mode-b .dh-ausz-hero-overlay { position: absolute; inset: 0; background: rgba( 0, 40, 70, .55 ); }
.dh-ausz-hero-mode-b .dh-ausz-hero-inner { position: relative; z-index: 1; width: 100%; }
.dh-ausz-hero-mode-b .dh-ausz-single-title,
.dh-ausz-hero-mode-b .dh-ausz-hero-eyebrow { color: #fff; }

/* Eyebrow-Symbol (klein, beim Eyebrow-Text) */
.dh-ausz-eyebrow-icon { display: inline-block; vertical-align: middle; line-height: 0; }
.dh-ausz-eyebrow-icon svg { width: 1em; height: 1em; fill: currentColor; vertical-align: middle; }
.dh-ausz-eyebrow-icon i { font-size: 1em; }
.dh-ausz-eyebrow-icon-before { margin-right: .4em; }
.dh-ausz-eyebrow-icon-after { margin-left: .4em; }

/* Galerie Hover-Effekte (prefix_class: dh-ausz-galhover-) */
.dh-ausz-gallery-img { transition: transform .25s ease, box-shadow .25s ease; }
.dh-ausz-galhover-zoom .dh-ausz-gallery-link:hover .dh-ausz-gallery-img { transform: scale( 1.05 ); }
.dh-ausz-galhover-lift .dh-ausz-gallery-link:hover .dh-ausz-gallery-img { transform: translateY( -6px ); }
/* „Keiner" hebt den unbedingten Default-Zoom (oben in .dh-ausz-gallery-link:hover) auf. */
.dh-ausz-galhover-none .dh-ausz-gallery-link:hover .dh-ausz-gallery-img { transform: none; }

/* Galerie: natürliches Bildverhältnis (Schalter „Natürliches Bildverhältnis") */
.dh-ausz-galnat-yes .dh-ausz-gallery-link { aspect-ratio: auto; }
.dh-ausz-galnat-yes .dh-ausz-gallery-img { height: auto; }

/* Galerie Scroll-Einblendung (JS toggelt .is-visible pro <li>) */
.dh-ausz-gallery-anim-fadeup .dh-ausz-gallery-grid > li { opacity: 0; transform: translateY( 18px ); transition: opacity .5s ease, transform .5s ease; }
.dh-ausz-gallery-anim-fadeup .dh-ausz-gallery-grid > li.is-visible { opacity: 1; transform: none; }

/* Button-Hover-Animationen werden jetzt über Elementors eingebaute Bibliothek
   (Klasse .elementor-animation-*) gesteuert — kein eigenes CSS mehr nötig. */

@media ( prefers-reduced-motion: reduce ) {
	.dh-ausz-gallery-anim-fadeup .dh-ausz-gallery-grid > li { opacity: 1; transform: none; transition: none; }
}

/* ---------- Detailseite: Dokumente (PDF) ---------- */
/* Steht bewusst VOR den externen Links: ein PDF ist der Inhalt, ein externer Link fuehrt
   weg. Keine eigenen Farbwerte — der Abschnitt erbt Text- und Link-Farbe des Bereichs wie
   die Regeln fuer .dh-ausz-links-section direkt darunter (Befunde 5, 6b und 8). */
.dh-ausz-docs-section { margin: 32px 0 0; }
.dh-ausz-docs-heading {
	margin: 0 0 12px;
	color: var( --dh-ausz-heading-color, inherit );
}
.dh-ausz-docs-list-front {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dh-ausz-docs-item + .dh-ausz-docs-item {
	margin-top: 8px;
}
.dh-ausz-docs-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: underline; /* Befund 6b: nie nur an der Farbe erkennbar */
}
/* Keine sichtbare Größenangabe mehr (Sichtprüfung, 13.8.2026) — sie steht nur noch im
   Vorlese-Text für Screenreader (siehe .screen-reader-text in templates/partials/detail.php). */

/* ===== Externe Links — Liste unter eigener Ueberschrift (Detailseite) ===== */
.dh-ausz-links-section { margin: 32px 0 0; }
.dh-ausz-links-heading {
	margin: 0 0 12px;
	color: var( --dh-ausz-heading-color, inherit );
}
.dh-ausz-links-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dh-ausz-links-item { margin: 0 0 8px; }
.dh-ausz-links-item:last-child { margin-bottom: 0; }
.dh-ausz-links-link {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	text-decoration: underline;
	text-underline-offset: .18em;
}
.dh-ausz-links-link:hover,
.dh-ausz-links-link:focus-visible { text-decoration-thickness: 2px; }
.dh-ausz-links-icon { line-height: 0; flex: 0 0 auto; }
.dh-ausz-links-icon svg { display: block; }