/*
 * Beitragsseite (single.php) — handgeschrieben, KEIN Tailwind-Build.
 *
 * Gleicher Grund wie bei listing.css: Der Build liest seine Klassenliste beim
 * Bauen aus den Quelldateien. Eine Utility-Klasse, die dort zum Bauzeitpunkt
 * nicht stand, landet nicht im Stylesheet und wird vom Browser stillschweigend
 * ignoriert — die Seite bleibt heil und sieht nur falsch aus.
 *
 * Nachgemessen am 2026-09-01 im ausgelieferten site.dabf4ad1.css: `pt-8`,
 * `balance`, `hover:bg-brand`, `hover:text-white` und `dark:bg-brand/15`
 * fehlen dort. Genau diese Regeln stehen deshalb hier auf eigenen
 * Klassennamen, statt sich auf Utilities zu verlassen, die es nicht gibt.
 *
 * Geladen nur auf der Einzelansicht eines Beitrags (siehe functions.php).
 */

/* ------------------------------------------------------------------ Kopf */

/*
 * Brotkrumen. `currentColor` als Ausgangspunkt, damit der Dunkelmodus des
 * Themes von selbst greift; nur die Hover-Farbe wird gesetzt.
 */
.dp-artikel__brotkrumen a:hover,
.dp-artikel__brotkrumen a:focus-visible {
	color: var(--dp-brand, #0b63c5);
}

/*
 * Trenner zwischen den Brotkrumen. `px-1.5` waere die naheliegende Utility —
 * sie steht zwar im Build, aber als Polsterung eines Inline-Elements ist eine
 * eigene Regel hier eindeutiger.
 */
.dp-artikel__trenner {
	padding-left: .375rem;
	padding-right: .375rem;
}

/*
 * Ersatz fuer `balance`: Die Utility steht zwar im Stylesheet, aber als
 * Theme-eigene Klasse ohne garantierte Bedeutung. Ein umbrochener Titel soll
 * gleichmaessige Zeilen haben statt einer einzelnen Waise.
 */
.dp-artikel__titel {
	text-wrap: balance;
}

/* ---------------------------------------------------------- Beitragsbild */

/*
 * Festes Seitenverhaeltnis gegen den Sprung beim Nachladen (CLS): Die
 * Titelbilder der erzeugten Artikel haben nicht alle dasselbe Format.
 * `aspect-video` und `object-cover` stehen nicht im Build.
 */
.dp-artikel__bild {
	overflow: hidden;
	border-radius: 1.5rem;
	border: 1px solid rgb(226 232 240);
	background: rgb(248 250 252);
}

.dp-artikel__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*
 * Dunkelmodus in zwei Fassungen, weil das Theme mit der KLASSENSTRATEGIE
 * arbeitet (tailwind.config.js: darkMode 'class'; header.php setzt
 * html.dark), die Systemeinstellung aber ebenfalls greifen soll, solange
 * niemand von Hand umgeschaltet hat.
 */
@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) .dp-artikel__bild {
		border-color: rgb(255 255 255 / .1);
		background: rgb(255 255 255 / .03);
	}
}

html.dark .dp-artikel__bild {
	border-color: rgb(255 255 255 / .1);
	background: rgb(255 255 255 / .03);
}

/* ------------------------------------------------------------- Fliesstext */

/*
 * Der Artikelgenerator setzt im FAQ-Block Inline-Abstaende an die h3
 * (`style="margin-top:0;margin-bottom:10px"`). Die ueberschreiben die
 * Typografie von .dp-prose und druecken die Fragen zusammen. Inline-Styles
 * lassen sich nur mit !important uebergehen — der Alternativweg waere, in
 * jeden erzeugten Artikel einzugreifen, und das traefe die bereits
 * veroeffentlichten nicht.
 */
.dp-prose h3[style] {
	margin-top: 2em !important;
	margin-bottom: .6em !important;
}

.dp-prose h2 + h3[style] {
	margin-top: 1.2em !important;
}

/* ----------------------------------------------------------- Textspalte */

/*
 * DIE TEXTSPALTE FUELLT DEN ARTIKEL-CONTAINER.
 *
 * `.dp-prose` deckelt die Breite portalweit auf 42rem (672 px). Fuer eine
 * schmale Textseite ist das richtig, auf der Artikelseite brach es das Bild:
 * Die Ueberschrift im Titelband lief ueber 976 px, der Text darunter ueber
 * 672 und klebte links — 328 px Leerraum an der rechten Seite, gemessen bei
 * 1440 px Fensterbreite. Das sah nicht nach Absicht aus, sondern nach Fehler.
 *
 * 52rem statt der vollen Containerbreite, und das ist ein Mittelweg mit
 * Grund: Ueber die vollen 976 px laufen rund 106 Zeichen je Zeile. Das ist
 * die Breite von wertaugtwas.de, liegt aber deutlich ueber dem, was sich
 * angenehm liest (65 bis 75 Zeichen) - bei langen Ratgebertexten findet das
 * Auge den naechsten Zeilenanfang schwerer. 52rem sind rund 90 Zeichen: klar
 * breiter als die 672 px vorher und noch in einem Bereich, in dem der Blick
 * die Zeile haelt.
 *
 * ZENTRIERT, nicht linksbuendig. Genau daran lag der urspruengliche Eindruck
 * eines Fehlers: Die Spalte stand links, und rechts blieben 328 px leer. Mit
 * gleichem Einzug auf beiden Seiten sieht dieselbe Begrenzung nach Absicht
 * aus. Das Titelbild darueber behaelt die volle Containerbreite.
 *
 * Die eigene Klasse statt eines nackten `.dp-prose` ist Absicht: So gilt die
 * Regel genau hier und nicht auf jeder Seite, die dieselbe Typografie-Klasse
 * benutzt.
 */
/*
 * NACHTRAG 02.09.2026: Die Deckelung auf 52rem ist auf ausdrueckliche
 * Anweisung des Betreibers entfallen -- die Artikelseiten sollen technisch
 * und optisch genau wie wertaugtwas.de aussehen, und dort laeuft der Text
 * ueber die volle Containerbreite (gemessen 976 px bei 1440 px Fenster).
 *
 * Der Einwand von oben bleibt sachlich richtig: 976 px sind rund 106 Zeichen
 * je Zeile, deutlich mehr als die gut lesbaren 65 bis 75. Wer das spaeter
 * wieder aendern will, aendert es an BEIDEN Portalen -- eine Website schmaler
 * zu setzen als die andere war genau der Zustand, der hier beanstandet wurde.
 *
 * margin-inline bleibt: Ohne Deckelung hat es keine Wirkung, schadet aber
 * nichts und traegt die Zentrierung sofort wieder, falls die Grenze
 * zurueckkommt.
 */
.dp-artikel__text {
	/*
	 * "none" und nicht etwa gar keine Angabe: `.dp-prose` deckelt portalweit
	 * auf 42rem (672 px). Die Deckelung hier ersatzlos zu streichen macht die
	 * Spalte deshalb nicht breiter, sondern SCHMALER als vorher -- gemessen
	 * 672 statt 832 px. Die Grenze muss ausdruecklich aufgehoben werden.
	 */
	max-width: none;
	margin-inline: auto;
}

/* -------------------------------------------------- Verweise im Fliesstext */

/*
 * LINKS MUESSEN ALS LINKS ERKENNBAR SEIN.
 *
 * Tailwinds Preflight setzt `a { color: inherit }` — Spezifitaet 0-0-1 und
 * damit staerker als das `:where(a)` des Themes (0-0-0). Die Folge: Jeder
 * Verweis im Artikeltext trug die Farbe des Fliesstextes und war nur noch am
 * Mauszeiger zu erkennen. Gemessen am 2026-09-01: rgb(241,245,249), also
 * exakt die Textfarbe.
 */
.dp-prose a {
	color: var(--dp-brand, #0b63c5);
	text-decoration: underline;
	text-underline-offset: .15em;
}

/*
 * Im Dunkelmodus braucht der Verweis einen helleren Ton: Das Markenblau
 * kommt auf dunklem Grund nur auf 3,5:1 und verfehlt damit die 4,5:1 der
 * WCAG-Stufe AA. Der Ton hier erreicht 9,9:1.
 */
@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) .dp-prose a {
		color: var(--dp-brand-ink-kopf, #7cc4fb);
	}
}

html.dark .dp-prose a {
	color: var(--dp-brand-ink-kopf, #7cc4fb);
}

/*
 * DIE AUTOMATISCH GESETZTEN VERWEISE (`a.w24mf-link` aus der
 * MultiForum-Verlinkung) tragen ihre Farbe als INLINE-STIL (#cc0000). Auf
 * weissem Grund sind das 5,9:1, auf dunklem nur 3,18:1 — genau die Stelle,
 * an der der Artikeltext im Dunkelmodus unlesbar wurde.
 *
 * Inline-Stile lassen sich ausschliesslich mit !important uebergehen. Der
 * Alternativweg waere, die Farbe in jedem erzeugten Artikel zu ersetzen; das
 * traefe die bereits veroeffentlichten nicht und muesste bei jedem neuen
 * Artikel wiederholt werden.
 *
 * Im hellen Modus bleibt das Rot unangetastet.
 */
@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) .dp-prose a.w24mf-link {
		color: #ff9a8f !important;
	}
}

html.dark .dp-prose a.w24mf-link {
	color: #ff9a8f !important;
}

/* ------------------------------ Verzeichnis-Baustein im Fliesstext */

/*
 * Der Block "Betriebe der Branche" (Web24-Directory) steht mitten in
 * .dp-prose. Dessen Regeln fuer Fliesstext greifen auf jedes Kind durch — und
 * `.dp-prose a` schlaegt `.w24dir-button` bei gleicher Spezifitaet ueber die
 * Reihenfolge. Die Folge waere ein gefuellter Knopf mit der Linkfarbe des
 * Fliesstextes: blau auf blau, also unsichtbare Schrift. Genau so am
 * 2026-08-16 auf wertaugtwas.de gemessen.
 *
 * Die Gegenregeln stehen HIER und nicht im Plugin: `.dp-prose` ist eine Klasse
 * dieses Themes, das Plugin darf sie nicht kennen. Zwei Klassen im Selektor
 * genuegen, !important ist nicht noetig.
 */
.dp-prose .w24dir-button {
	color: var(--w24dir-button-ink, #fff);
	text-decoration: none;
}

.dp-prose .w24dir-button--secondary {
	color: var(--w24dir-accent-ink, #1d6fa5);
}

.dp-prose .w24dir-branchbetriebe a {
	text-decoration: none;
}

.dp-prose .w24dir-branchbetriebe a:hover,
.dp-prose .w24dir-branchbetriebe a:focus-visible {
	text-decoration: underline;
}

/*
 * Abstaende: Der Baustein bringt eigene mit, aber `.dp-prose p` schlaegt
 * `.w24dir-branchbetriebe__intro`. Deshalb die eigenen Werte hier mit zwei
 * Klassen wiederholen — gezielt und nicht als pauschales `margin-top: 0` auf
 * alle Kinder, das auch die Abstaende INNERHALB der Trefferkarten platt
 * gedrueckt haette.
 */
.dp-prose .w24dir-branchbetriebe__heading { margin: 0; }
.dp-prose .w24dir-branchbetriebe__intro { margin: .5rem 0 1.2rem; }
.dp-prose .w24dir-branchbetriebe__alle { margin: 1.2rem 0 0; }
.dp-prose .w24dir-branchbetriebe .w24dir-card__title { margin: 0 0 .35rem; }

/* ============================================================ Magazin-Uebersicht */

/*
 * Die Vorschaukarten von home.php. Eigene Klassen, weil im Build unter
 * anderem `lg:grid-cols-3`, `p-5`, `mt-2`, `mt-10`, `gap-3`, `block` und
 * `mb-4` fehlen — und weil ein Seitenverhaeltnis fuers Vorschaubild ohnehin
 * keine Utility ist, auf die man sich verlassen sollte.
 */
.dp-magazin__karte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgb(226 232 240);
	border-radius: 1.5rem;
	background: #fff;
	transition: box-shadow .15s ease, transform .15s ease;
}

.dp-magazin__karte:hover {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);
}

/*
 * Das Vorschaubild fuellt die Kartenbreite in festem Verhaeltnis. Ohne das
 * springt die Karte beim Nachladen, weil die erzeugten Titelbilder
 * unterschiedliche Formate haben.
 */
.dp-magazin__bild {
	display: block;
	overflow: hidden;
	background: rgb(248 250 252);
}

.dp-magazin__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .2s ease;
}

.dp-magazin__karte:hover .dp-magazin__bild img {
	transform: scale(1.03);
}

.dp-magazin__text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.5rem;
}

/* Die Branche ueber dem Titel: klein, in der Markenfarbe, als Einordnung. */
.dp-magazin__marke {
	margin: 0 0 .5rem;
	color: var(--dp-brand, #0b63c5);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.dp-magazin__titel {
	margin: 0;
	line-height: 1.3;
	text-wrap: balance;
}

.dp-magazin__titel a {
	color: inherit;
	text-decoration: none;
}

/*
 * Das Datum sitzt am unteren Rand der Karte, damit die Karten einer Zeile
 * unten buendig abschliessen - auch wenn die Titel unterschiedlich lang sind.
 */
.dp-magazin__datum {
	margin: 1rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid rgb(226 232 240);
}

.dp-magazin__auszug {
	flex: 1 1 auto;
}

.dp-magazin__einleitung > :first-child { margin-top: 0; }
.dp-magazin__einleitung > :last-child { margin-bottom: 0; }

/* Blaetternavigation */
.dp-magazin__blaettern {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 2.5rem;
	font-size: .875rem;
	font-weight: 600;
}

.dp-magazin__blaettern .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: .5rem .75rem;
	border: 1px solid rgb(226 232 240);
	border-radius: .75rem;
	color: inherit;
	text-decoration: none;
}

.dp-magazin__blaettern .page-numbers.current {
	border-color: var(--dp-brand, #0b63c5);
	background: var(--dp-brand, #0b63c5);
	color: #fff;
}

.dp-magazin__blaettern a.page-numbers:hover {
	border-color: var(--dp-brand, #0b63c5);
	color: var(--dp-brand, #0b63c5);
}

/* Dunkelmodus der Uebersicht, beide Schaltwege wie oben. */
@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) .dp-magazin__karte {
		border-color: rgb(255 255 255 / .1);
		background: rgb(17 26 46);
	}
	:where(html:not(.light)) .dp-magazin__bild { background: rgb(255 255 255 / .03); }
	:where(html:not(.light)) .dp-magazin__datum { border-top-color: rgb(255 255 255 / .1); }
	:where(html:not(.light)) .dp-magazin__marke { color: var(--dp-brand-ink-kopf, #7cc4fb); }
	:where(html:not(.light)) .dp-magazin__blaettern .page-numbers { border-color: rgb(255 255 255 / .15); }
}

html.dark .dp-magazin__karte {
	border-color: rgb(255 255 255 / .1);
	background: rgb(17 26 46);
}

html.dark .dp-magazin__bild { background: rgb(255 255 255 / .03); }
html.dark .dp-magazin__datum { border-top-color: rgb(255 255 255 / .1); }
html.dark .dp-magazin__marke { color: var(--dp-brand-ink-kopf, #7cc4fb); }
html.dark .dp-magazin__blaettern .page-numbers { border-color: rgb(255 255 255 / .15); }

/* ======================================================= Weitere Artikel */

/*
 * Der Abschnitt unter dem Artikel. Er benutzt dieselben Kartenklassen wie die
 * Magazin-Uebersicht — nur das Raster ist ein anderes, weil hier drei Karten
 * nebeneinander stehen statt zwei.
 *
 * EIGENES RASTER STATT `lg:grid-cols-3`: Die Utility steht nicht im Build
 * (nachgemessen am 2026-09-01), und eine Klasse, die es nicht gibt, wird vom
 * Browser stillschweigend ignoriert - die Karten staenden dann untereinander.
 */
.dp-weitere {
	padding-bottom: 3rem;
}

.dp-weitere__titel {
	margin: 0 0 1.25rem;
	padding-top: 2rem;
	border-top: 1px solid rgb(226 232 240);
}

.dp-weitere__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.dp-weitere__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.dp-weitere__raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * In der Dreierreihe stehen die Titel enger beieinander als auf der
 * Uebersicht; ohne den kleineren Grad reissen zwei lange Titel die Karten
 * unterschiedlich hoch.
 */
.dp-weitere__raster .dp-magazin__titel {
	font-size: 1.0625rem;
	font-weight: 700;
}

.dp-weitere__raster .dp-magazin__text {
	padding: 1.25rem;
}

.dp-weitere__raster .dp-magazin__auszug {
	margin-top: .5rem;
}

@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) .dp-weitere__titel { border-top-color: rgb(255 255 255 / .1); }
}

html.dark .dp-weitere__titel { border-top-color: rgb(255 255 255 / .1); }

/* ---------------------------------------------------------------- Fusszeile */

/*
 * Trennlinie ueber den Kategorien. Der obere Innenabstand steht hier, weil
 * `pt-8` nicht im Build ist — mit der Utility waere die Linie an der Schrift
 * geklebt.
 */
.dp-artikel__fuss {
	padding-top: 2rem;
	border-top: 1px solid rgb(226 232 240);
}

@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) .dp-artikel__fuss { border-top-color: rgb(255 255 255 / .1); }
}

html.dark .dp-artikel__fuss { border-top-color: rgb(255 255 255 / .1); }

/*
 * Die Kategorie-Plaketten. `hover:bg-brand`, `hover:text-white` und
 * `dark:bg-brand/15` fehlen im Build, deshalb hier von Hand — sonst bliebe
 * die Plakette beim Ueberfahren unveraendert und im Dunkelmodus stuende sie
 * auf ihrer hellen Flaeche.
 */
.dp-artikel__marke {
	text-decoration: none;
}

.dp-artikel__marke:hover,
.dp-artikel__marke:focus-visible {
	background: var(--dp-brand, #0b63c5);
	color: #fff;
}

@media (prefers-color-scheme: dark) {
	:where(html:not(.light)) .dp-artikel__marke {
		background: rgb(var(--dp-brand-rgb, 29 111 165) / .15);
	}
}

html.dark .dp-artikel__marke {
	background: rgb(var(--dp-brand-rgb, 29 111 165) / .15);
}