/*
 * Compendion Content-Card — eine Card-Komponente fuer Inhalts-Listen.
 *
 * Spec: docs/superpowers/specs/2026-05-20-content-card-familie-design.md
 *
 * Architektur in Stichworten:
 *   - Markup-Wurzel ist `.compendion-content-card` (z.B. `<li>` oder `<article>`).
 *     Sie ist Container-Query-Container (`container-type: inline-size`).
 *   - Innen liegt der `<a>` mit Klasse `__link` als komplette Klickflaeche.
 *   - Modifier `.compendion-content-card--landscape` kennzeichnet Cards mit
 *     horizontalem Layout (Cover rechts, Body links). Default-Form (ohne
 *     Modifier) ist Portrait (Cover oben, Body darunter).
 *   - Markup-Reihenfolge im Link: Media, Body, Contributors-Strip — als drei
 *     Top-Level-Siblings. Body enthaelt Datum, Titel, Meta. Contributors-Strip
 *     ist Sibling, NICHT im Body — damit Body-Hoehe in Landscape kapselbar
 *     bleibt und die Card kontrolliert um exakt die Strip-Hoehe waechst.
 *   - Landscape-Card-Hoehe: ~110px ohne Strip; +35px+gap mit einzeiligem Strip
 *     (~151px); +70px+gap mit zweizeiligem Strip (~190px). Body-Inhalt bleibt
 *     in der oberen Row auf 110px gekapselt.
 *   - Mitwirkende-Strip ist Flex-Row mit wrap, 35x35px-Avataren — identisch in
 *     Portrait und Landscape. Border 1px in Primary-Color am Avatar.
 *
 * Tokens aus theme.json — keine Hardcoded-Farben.
 */

/* === Card-Grid-Wrapper — EIN Grid fuer ALLE Content-Card-Listen (DRY) ===
 *
 * Dieser Komma-Selektor ist die einzige Grid-Wahrheit fuer jede Liste, die
 * `compendion_render_content_card()` aufnimmt. Neue Listen-Render-Pfade haengen
 * sich hier an, statt eine eigene `grid-template-columns`-Regel anzulegen —
 * sonst entsteht Wrapper-Drift (Memory feedback_card_wrapper_grid_drift). CSS
 * wird global geladen (functions.php → `compendion-content-card`), liegt also
 * auf jeder Frontend-Seite vor (Anderswo, Person-Profil, Dachseiten-Episoden).
 *
 * Verhalten (Memory feedback_content_card_responsive):
 *   - Default: 1 Spalte → eine HORIZONTALE (landscape) Card ueber volle Breite.
 *   - Ab ≥600px Breite UND ≥572px Hoehe: auto-fill minmax(280px, 1fr) →
 *     sobald zwei Spalten passen, kippen die Cards auf VERTIKAL (Portrait,
 *     Cover oben). Schwelle 280px = Variante A (2 Spalten ab ~580px Breite).
 *
 * Drei gekoppelte Werte — IMMER zusammen aendern:
 *   1. Grid-minmax (hier: 280px)
 *   2. @media-Schwellen (min-width: 600px / min-height: 572px, weiter unten am
 *      Card-Toggle)
 *   3. Card-Container-Query (max-width: 480px, am Portrait-Toggle) — muss
 *      oberhalb der breitesten 2-Spalten-Card (~429px kurz vor dem
 *      3-Spalten-Sprung) liegen, sonst bleiben breite 2-Spalten-Cards faelsch-
 *      lich horizontal.
 *
 * Warum min-height: 572px (NICHT entfernen — Arne-Wunsch 2026-05-29):
 *   Auf quergehaltenen Mobiltelefonen (breiter Viewport, geringe Hoehe) sollen
 *   HORIZONTALE Cards erscheinen, auch wenn die nominelle Breite fuer mehrere
 *   vertikale Cards reichen wuerde. Vertikale Cards wuerden im Querformat oben/
 *   unten abgeschnitten; eine horizontale Card passt voll auf den Schirm. Die
 *   niedrige Viewport-Hoehe unterdrueckt deshalb das Portrait-Grid.
 */
.compendion-latest-network-episodes,
.wp-block-post-template.compendion-episode-grid,
.compendion-person-profile__episodes-list,
.canderswo-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) and (min-height: 572px) {
	.compendion-latest-network-episodes,
	.wp-block-post-template.compendion-episode-grid,
	.compendion-person-profile__episodes-list,
	.canderswo-cards {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}

/* post-template wickelt jedes Item in `<li class="wp-block-post">`. Die
 * tatsaechliche Card kommt aus `compendion/episode-card` und ist heute ein
 * `<article>` (vom Content-Card-Renderer, wrapper=article). Das outer-`<li>`
 * bleibt unsichtbarer Pass-Through-Container. */
.wp-block-post-template.compendion-episode-grid > .wp-block-post {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.wp-block-post-template.compendion-episode-grid > .wp-block-post > .compendion-content-card {
	flex: 1;
}

.compendion-latest-network-episodes--empty {
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 60%, transparent);
}

.compendion-content-card {
	container-type: inline-size;
	container-name: card;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.compendion-content-card__link {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.4rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 5%, transparent);
	border-radius: 0.5rem;
	color: inherit;
	text-decoration: none;
	transition: background 150ms ease, transform 150ms ease;
}

.compendion-content-card__link:hover,
.compendion-content-card__link:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 9%, transparent);
	transform: translateY(-1px);
	outline: none;
}

.compendion-content-card__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 2px;
}

/* `__media` ist der unsichtbare 16/9-Slot, der das Cover zentriert ablegt.
 * Border und Border-Radius gehoeren auf das Cover selbst — sonst sitzt der
 * Rahmen bei abweichendem Bild-Seitenverhaeltnis um den leeren Slot statt
 * ums Bild. `overflow: hidden` bleibt als Safety-Net, falls eine
 * data-ar-Variante doch ueber den Slot hinauswaechst. */
.compendion-content-card__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.compendion-content-card__cover {
	box-sizing: border-box;
	display: block;
	/* outline + negative outline-offset statt border: `.__cover` ist ein `<img>`-
	 * Element (Replaced Element). `box-shadow:inset` zeichnet hinter dem Bild-
	 * Inhalt — wird nicht zuverlaessig sichtbar (Bild ueberlagert die Inset-
	 * Shadow). `border` hat sichtbares Anti-Aliasing-Verluestchen an gerundeten
	 * Eckpunkten. `outline` mit `outline-offset:-1px` zeichnet ueber dem Bild-
	 * Inhalt, behaelt Linienstaerke an Ecken (outline respektiert border-radius
	 * in allen modernen Browsern). */
	outline: 1px solid var(--compendion-card-accent, var(--compendion-podlove-accent, var(--wp--preset--color--primary)));
	outline-offset: -1px;
	border-radius: 0.375rem;
	max-width: 100%;
	max-height: 100%;
	/* kein Crop, kein Stretch — Memory feedback_keine_cover_crops. Bucket-
	 * Toleranz kann ein Bild aufs falsche aspect-ratio mappen (z.B. ein
	 * 1920x800-Cover landet im 16x9-Default-Bucket); object-fit: contain
	 * sorgt dafuer, dass das Bild dann mit Letterbox/Pillarbox im Container
	 * sitzt statt verzerrt zu werden. */
	object-fit: contain;
}

.compendion-content-card__cover[data-ar="1x1"]   { aspect-ratio: 1 / 1;   height: 100%; width: auto; }
.compendion-content-card__cover[data-ar="4x3"]   { aspect-ratio: 4 / 3;   height: 100%; width: auto; }
.compendion-content-card__cover[data-ar="16x9"]  { aspect-ratio: 16 / 9;  width: 100%; height: 100%; }
.compendion-content-card__cover[data-ar="221x1"] { aspect-ratio: 2.21 / 1; width: 100%; height: auto; }

.compendion-content-card__cover--empty {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 0 1px var(--compendion-card-accent, var(--compendion-podlove-accent, var(--wp--preset--color--primary)));
	border-radius: 0.375rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 55%, transparent);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 8%, transparent);
}

.compendion-content-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.15rem 0.35rem 0.35rem;
	min-width: 0;
	flex: 1;
}

.compendion-content-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem;
	/* Meta (Podcasttag) klebt am Body-Boden — Titel ist das einzige
	 * variable Element, alle anderen sind fix positioniert. In Landscape
	 * fuellt Body die 110px-Row aus, margin-top:auto schiebt die Meta-Zeile
	 * an den unteren Rand. In Portrait ist Body content-driven, margin-top:
	 * auto bleibt wirkungslos (kein Extra-Raum zum Verteilen). */
	margin-top: auto;
}

.compendion-content-card__badge {
	display: inline-block;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 12%, transparent);
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast, inherit);
}

.compendion-content-card__badge--external {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #000) 35%, transparent);
}

.compendion-content-card__source {
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 60%, transparent);
}

.compendion-content-card__source-domain {
	font-weight: 600;
}

.compendion-content-card__date {
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 60%, transparent);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.compendion-content-card__title {
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast, inherit);
	margin: 0;
	margin-top: 0.15rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/* === Contributors-Avatar-Strip mit Host/Guest-Split ===
 *
 * Eine Logik fuer Portrait und Landscape. PHP rendert den Strip als letztes
 * Child des Bodys (Sep-Span nur wenn ≥1 Host UND ≥1 Gast):
 *
 *   <div class="contributors">
 *     <div class="contributors-group--hosts">[host-avatars]</div>
 *     <span class="contributors-sep">mit</span>
 *     <div class="contributors-group--guests">[guest-avatars]</div>
 *   </div>
 *
 * Avatare fix 35x35px (1:1, Memory feedback_avatare_quadratisch) — bewusst
 * keine clamp/min/max-Spreizung, damit alle Avatare ueber alle Card-
 * Konstellationen identisch gross sind.
 *
 * Wrap-Verhalten: Default eine Zeile (Hosts → Sep → Guests). Bei zu wenig
 * Platz bricht der Wrapper um — Hosts-Gruppe bleibt einzeilig (nowrap),
 * Guests-Gruppe ebenso; nur die Gruppen als Ganzes wrappen. Sep darf an der
 * Hosts-Zeile haengen bleiben, das ist visuell akzeptabel.
 */
.compendion-content-card__contributors {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
	margin-top: 0.25rem;
}

.compendion-content-card__contributors-group {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.25rem;
	align-items: center;
}

.compendion-content-card__contributors-sep {
	flex: 0 0 auto;
	font-size: 0.85rem;
	font-style: italic;
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 55%, transparent);
}

/* Bei breiteren Cards (>=350px) reicht der Platz fuer "mit Guest" als
 * sprechenderes Label. ::after-Trick haengt das Wort ans bestehende "mit",
 * statt PHP-seitig zwei Render-Branches zu pflegen. aria-hidden am Wrapper
 * macht das fuer Screenreader irrelevant. */
@container card (min-width: 350px) {
	.compendion-content-card__contributors-sep::after {
		content: " Guest";
	}
}

.compendion-content-card__contributor-avatar {
	box-sizing: border-box;
	width: 35px;
	height: 35px;
	aspect-ratio: 1 / 1;
	/* outline + outline-offset:-1px — siehe Begruendung am `.__cover`-Block.
	 * Avatar ist `<img>`-Replaced-Element, box-shadow:inset waere unsichtbar. */
	outline: 1px solid var(--compendion-card-accent, var(--compendion-podlove-accent, var(--wp--preset--color--primary)));
	outline-offset: -1px;
	border-radius: 0.5rem;
	object-fit: cover;
	flex-shrink: 0;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 8%, transparent);
	display: block;
}

/* === Landscape-Modifier: horizontales Layout ===
 *
 * Link wird zum CSS-Grid mit zwei Rows:
 *   Row 1: Body links | Media rechts — fix 110px hoch (alter Landscape-Stand)
 *   Row 2: Contributors-Strip — auto-Hoehe (35px+gap einzeilig, 70px+gap bei
 *          zweizeiligem Wrap)
 *
 * Damit kapselt die obere Row Body+Media auf die fruehere 110px-Hoehe; die
 * Card waechst exakt um die Strip-Hoehe statt unkontrolliert mit dem Titel.
 *
 * Cover: Grid-Column "media", aspect-ratio via [data-ratio]; align-self:start
 * + max-height:100% damit es nicht aus der 110px-Row ausbricht.
 *
 * Body: Grid-Column "body", overflow:hidden + 2-Zeilen-Title-Clamp halten ihn
 * in der Row. Font-Sizes auf clamp() wie zuvor, damit lange Titel skalierbar
 * bleiben.
 */
.compendion-content-card--landscape .compendion-content-card__link {
	display: grid;
	/* Body nimmt den Rest; Media-Spalte folgt der nativen Cover-Breite
	 * (= Cover-Aspect-Ratio × 110px-Row-Hoehe). Damit gibt es keinen leeren
	 * 16/9-Slot um ein 1:1-Cover. Cap kommt per max-width am Media-Element. */
	grid-template-columns: 1fr auto;
	grid-template-rows: 110px auto;
	grid-template-areas:
		"body  media"
		"strip strip";
	gap: 0 0.75rem;
	padding: 0.5rem;
	align-items: stretch;
}

/* `__media` ist im Landscape KEIN aspect-ratio-Slot mehr, sondern ein
 * transparenter Wrapper, der genau die native Cover-Groesse annimmt: Hoehe =
 * Row-Hoehe (110px), Breite = Cover-Aspect-Ratio × Hoehe. `max-width: 50cqw`
 * deckelt extrem breite Covers (2.21:1), damit der Body-Bereich nicht
 * unleserlich schrumpft. */
.compendion-content-card--landscape .compendion-content-card__media {
	grid-area: media;
	/* Bild fix 5.5rem (~88px) hoch, oben buendig — kein Spanning ueber Contributors-Strip */
	align-self: start;
	aspect-ratio: auto;
	width: auto;
	height: 5.5rem;
	max-width: 50cqw;
}

/* Cover im Landscape: Hoehe = Media-Hoehe (= 110px-Row), Breite folgt dem
 * Bild-Seitenverhaeltnis. Ueberschreibt die Base-`[data-ar="16x9"]`- und
 * `[data-ar="221x1"]`-Regeln, die im Portrait-Fall width:100% setzen — im
 * Landscape diktiert immer die Hoehe. */
.compendion-content-card--landscape .compendion-content-card__cover[data-ar="1x1"],
.compendion-content-card--landscape .compendion-content-card__cover[data-ar="4x3"],
.compendion-content-card--landscape .compendion-content-card__cover[data-ar="16x9"],
.compendion-content-card--landscape .compendion-content-card__cover[data-ar="221x1"] {
	height: 100%;
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

/* Body in Landscape: bleibt in der 110px-Row gekapselt. min-height:0 erlaubt
 * Grid-Shrink, overflow:hidden kappt visuell, falls Title doch laenger wird
 * als der Clamp annimmt (sollte nicht passieren — 2 Zeilen × 1.3 line-height
 * × clamp(0.75rem,4.9cqw,1.3rem) ≈ 32px, plus Datum + Meta passen in 94px
 * innere Hoehe = 110px - 2×0.5rem Link-Padding - Body-Padding). */
.compendion-content-card--landscape .compendion-content-card__body {
	grid-area: body;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	padding: 0.2rem 0.25rem 0.2rem 0.5rem;
	gap: 0.15rem;
	justify-content: flex-start;
	overflow-wrap: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Title-Clamp im Landscape: 2 Zeilen, font-size skaliert mit Card-Breite via
 * cqw, damit ein langer Titel bei schmalerer Card kleiner statt abgeschnitten
 * wird. */
.compendion-content-card--landscape .compendion-content-card__title {
	margin-top: 0;
	font-size: clamp(0.75rem, 4.9cqw, 1.3rem);
	-webkit-line-clamp: 2;
}

.compendion-content-card--landscape .compendion-content-card__badge,
.compendion-content-card--landscape .compendion-content-card__date,
.compendion-content-card--landscape .compendion-content-card__source {
	font-size: clamp(0.65rem, 3.4cqw, 0.9rem);
}

/* Contributors-Strip in Landscape: eigene Grid-Row darunter, voll-breit. */
.compendion-content-card--landscape .compendion-content-card__contributors {
	grid-area: strip;
	margin-top: 0;
}

/* === Portrait-Toggle fuer --landscape Cards: Cover oben statt rechts ===
 *
 * Bedingungen (alle drei):
 *   1. Viewport-Breite ≥ 600px (auf schmalen Phones bleibt es bei Cover-rechts)
 *   2. Viewport-Hoehe ≥ 572px  (verhindert Toggle im Querformat — Arne-Wunsch,
 *      siehe Grid-Wrapper-Kommentar oben)
 *   3. Card-Container ≤ 480px  (Card sitzt im 2+-Spalten-Portrait-Grid und
 *      ist zu schmal fuer ein sinnvolles Landscape-Layout)
 *
 * Schwelle 480px gekoppelt an Grid-minmax(280px): eine 2-Spalten-Card wird kurz
 * vor dem 3-Spalten-Sprung bis ~430px breit. Die Schwelle muss oberhalb davon
 * liegen, sonst bleiben breite 2-Spalten-Cards faelschlich horizontal. Bei
 * Aenderung des Grid-minmax diesen Wert mitziehen (Memory
 * feedback_content_card_responsive: drei gekoppelte Werte).
 *
 * Der Toggle wechselt vom Landscape-Grid zurueck auf Portrait-Flex-Spalte.
 * Contributors-Strip sitzt damit wieder als drittes Spalten-Kind unter Body.
 */
@media (min-width: 600px) and (min-height: 572px) {
	@container card (max-width: 480px) {
		.compendion-content-card--landscape .compendion-content-card__link {
			/* Grid-Layout des Landscape-Modus zuruecksetzen — Portrait ist
			 * eine einfache Flex-Spalte. */
			display: flex;
			flex-direction: column;
			grid-template-columns: none;
			grid-template-rows: none;
			grid-template-areas: none;
			gap: 0.5rem;
		}
		.compendion-content-card--landscape .compendion-content-card__media {
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			max-width: 100%;
		}
		/* Cover-Overrides aus Landscape (height:100%; width:auto) explizit
		 * zuruecksetzen — in Portrait gewinnt wieder die Base-Logik aus den
		 * `[data-ar]`-Regeln, die das Cover entlang der Slot-Breite zeichnet. */
		.compendion-content-card--landscape .compendion-content-card__cover[data-ar="1x1"],
		.compendion-content-card--landscape .compendion-content-card__cover[data-ar="4x3"] {
			height: 100%;
			width: auto;
		}
		.compendion-content-card--landscape .compendion-content-card__cover[data-ar="16x9"] {
			width: 100%;
			height: 100%;
		}
		.compendion-content-card--landscape .compendion-content-card__cover[data-ar="221x1"] {
			width: 100%;
			height: auto;
		}
		.compendion-content-card--landscape .compendion-content-card__body {
			min-height: 0;
			overflow: visible;
			padding: 0.15rem 0.35rem 0.35rem;
			gap: 0.25rem;
		}
		.compendion-content-card--landscape .compendion-content-card__title {
			margin-top: 0.15rem;
			font-size: 1.3rem;
			-webkit-line-clamp: 3;
		}
		.compendion-content-card--landscape .compendion-content-card__badge,
		.compendion-content-card--landscape .compendion-content-card__date,
		.compendion-content-card--landscape .compendion-content-card__source {
			font-size: 0.9rem;
		}
	}
}

/* Portrait-Toggle fuer sehr enge Landscape-Cards (z.B. 2-Spalten auf Mobile).
 * Der bestehende Toggle mit @media (min-width:600px) greift auf schmalen Phones
 * (<600px Viewport) nie. Diese Regel faengt den 2-Spalten-Fall (~175px) ab,
 * ohne bei Vollbreite (~390px) zu stoeren. */
@container card (max-width: 300px) {
	.compendion-content-card--landscape .compendion-content-card__link {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		grid-template-rows: none;
		grid-template-areas: none;
		gap: 0.5rem;
	}
	.compendion-content-card--landscape .compendion-content-card__media {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		max-width: 100%;
	}
	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="1x1"],
	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="4x3"] {
		height: 100%;
		width: auto;
	}
	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="16x9"] {
		width: 100%;
		height: 100%;
	}
	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="221x1"] {
		width: 100%;
		height: auto;
	}
	.compendion-content-card--landscape .compendion-content-card__body {
		min-height: 0;
		overflow: visible;
		padding: 0.15rem 0.35rem 0.35rem;
		gap: 0.25rem;
	}
	.compendion-content-card--landscape .compendion-content-card__title {
		margin-top: 0.15rem;
		font-size: 1.3rem;
		-webkit-line-clamp: 3;
	}
	.compendion-content-card--landscape .compendion-content-card__badge,
	.compendion-content-card--landscape .compendion-content-card__date,
	.compendion-content-card--landscape .compendion-content-card__source {
		font-size: 0.9rem;
	}
}

/* === Dark-Mode-Override fuer card-accent ===
 *
 * `--compendion-card-accent` wird in site-palette.php gegen die Light-Mode-
 * Card-Surface gerechnet (`surface-soft`). Im Dark Mode wechselt die Card-BG
 * auf ~`#1F1F1F` (base #141414 + 5% contrast #E8E8E8) — gegen diesen
 * Hintergrund gilt `--compendion-card-accent-dark`, der dort gegen den
 * Dark-Card-BG geprueft wurde. Selektor-Pattern analog zur Dark-Correction
 * in site-palette.php: Media-Query fuer prefers-color-scheme + explizite
 * data-color-scheme-Variante fuer User-Toggles.
 */
@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) :root,
	html:not([data-color-scheme="light"]) body {
		--compendion-card-accent: var(--compendion-card-accent-dark, var(--compendion-card-accent));
	}
}
html[data-color-scheme="dark"] :root,
html[data-color-scheme="dark"] body {
	--compendion-card-accent: var(--compendion-card-accent-dark, var(--compendion-card-accent));
}