/*
 * Compendion component styles.
 *
 * Patterns and template parts should use semantic class names with the
 * compendion- prefix when block settings are not expressive enough.
 */

/* ---------------------------------------------------------------------------
 * Wide-Layout-Wrapper (`.compendion-wide-layout`)
 *
 * Ersetzt die TT25-Constraint (~640px) durch eine breitere, eigene
 * Layout-Box. Wird auf `<main>` der Profilseite, der Mitwirkenden-Uebersicht
 * (`templates/archive-compendion-mitwirkende.html`), der Dachmarken-
 * Startseite (`templates/front-page-master.html`) sowie der Podcasts- und
 * Episoden-Page (`templates/page-podcasts.html`, `templates/page-episoden.html`)
 * gesetzt. Token-frei, deshalb in der globalen components.css verfuegbar.
 * ------------------------------------------------------------------------- */

.compendion-wide-layout {
	max-width: 1800px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 3rem);
}

/*
 * `alignfull` innerhalb des Wide-Layout-Wrappers darf NICHT aus dem
 * padding-inline ausbrechen. WP setzt sonst per `.has-global-padding > .alignfull`
 * negative Margins (root-padding nach aussen), die unsere dynamischen Blocks
 * und Master-Sections bis ueber den Wrapper hinaus pressen. Wir wollen volle
 * Breite *innerhalb* des Wrappers, aber Padding zum Rand bleibt.
 *
 * Spezifitaet-Warum:
 *   - WP's Inline-Regel hat Spez 0,2,0.
 *   - Mein File laedt VOR WP's Inline-CSS — also gewinnt WP bei gleicher Spez.
 *   - Variante `.compendion-wide-layout.has-global-padding > .alignfull`
 *     (gleiches Element) hat Spez 0,3,0 und schlaegt WP zuverlaessig.
 *   - `.compendion-wide-layout .has-global-padding > .alignfull` greift bei
 *     verschachtelten `alignfull`-Layern (Master-Pattern in Pattern).
 *
 * Zusaetzlich: `padding-inline: 0` setzt das horizontale Padding der
 * alignfull-Kinder auf 0 zurueck. Sonst stacken die `has-global-padding`-
 * Klassen auf jeder Verschachtelungsebene erneut 24px L+R (main → section →
 * podcasts-section → grid = 96px pro Seite verloren). Vertikales Padding
 * (top/bottom als Inline-Style) bleibt unangetastet — wir killen nur die
 * Wiederholung des Seitenrandes.
 */
.compendion-wide-layout .alignfull,
.compendion-wide-layout.has-global-padding > .alignfull,
.compendion-wide-layout .has-global-padding > .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	padding-inline: 0;
}

/*
 * Sub-Site-Front (`templates/front-page.html`): die Mitwirkenden-Section ist
 * gleichzeitig `.alignfull` UND `.compendion-wide-layout` am SELBEN Element,
 * Kind eines `<main>` mit `has-global-padding is-layout-constrained`. Die
 * vorherige Regel oben matcht nicht (sie erwartet `.compendion-wide-layout`
 * als Vorfahre, nicht am alignfull-Element selbst), also blieb das
 * `padding-inline: clamp(1rem, 4vw, 3rem)` aus `.compendion-wide-layout`
 * stehen UND stackte mit dem `padding-inline` aus `.has-global-padding`
 * am gleichen Element — sichtbar als schmaler Inhaltsbereich auf der
 * Sub-Site-Startseite (mobil und desktop). Da `<main>` bereits Root-Padding
 * setzt, muss die Section ihr eigenes nicht zusätzlich hinzufügen.
 */
.compendion-podcast-front-page .compendion-wide-layout.alignfull {
	padding-inline: 0;
}

/*
 * Episodenliste-Grid (`<ul class="compendion-latest-network-episodes alignfull">`,
 * gerendert in `includes/network/latest-network-episodes.php`) ist `alignfull`-
 * Kind des `.compendion-latest-episodes`-Wrappers. Auf der Sub-Site-Startseite
 * erbt der UL über das `<main>` mit `has-global-padding` WP-Standard-Margins,
 * die das Grid aus dem Wrapper ziehen und mit dem `clamp()`-Padding der
 * darüberliegenden Layout-Container kollidieren. Hier explizit auf den
 * Wrapper begrenzt halten — Spuren-Zentrierung kommt aus dem bestehenden
 * Grid-Block weiter unten.
 */
.compendion-podcast-front-page .compendion-latest-episodes > .alignfull {
	margin-inline: 0;
	padding-inline: 0;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Scroll-Buttons Top + Down (Markup in assets/js/compendion-scroll-top.js injiziert)
 *
 * Zwei fixe Floating-Buttons unten-rechts. Default versteckt; JS togglet
 * `is-visible` je nach Scroll-Position. Scroll-Top sitzt ganz rechts, Scroll-
 * Down direkt links daneben (Sibling-Offset = Button-Breite + Gap).
 *
 * Token-basiert fuer Dark-Mode-Kompatibilitaet: Kontrast-Background, Base-
 * Text — `compendion-dark.css` dreht die Tokens.
 * ------------------------------------------------------------------------- */

.compendion-back-to-top,
.compendion-scroll-down {
	position: fixed;
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 100;
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 200ms ease, transform 200ms ease, background-color 150ms ease;
}

.compendion-back-to-top {
	right: clamp(1rem, 3vw, 2rem);
}

/* Scroll-Down sitzt links neben Scroll-Top: Button-Breite (2.75rem) + Gap (0.5rem). */
.compendion-scroll-down {
	right: calc(clamp(1rem, 3vw, 2rem) + 3.25rem);
}

.compendion-back-to-top.is-visible,
.compendion-scroll-down.is-visible {
	opacity: 0.85;
	transform: translateY(0);
}

.compendion-back-to-top:hover,
.compendion-back-to-top:focus-visible,
.compendion-scroll-down:hover,
.compendion-scroll-down:focus-visible {
	opacity: 1;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, var(--wp--preset--color--primary) 15%);
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);
	outline-offset: 2px;
}

.compendion-back-to-top svg,
.compendion-scroll-down svg {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.compendion-back-to-top,
	.compendion-scroll-down {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Episode-Prev-Next (Block compendion/episode-prev-next)
 *
 * Ersetzt am Ende der Sub-Site-Episode-Single-Pages die früheren zwei
 * wp:post-navigation-link-Textlinks durch zwei vollwertige content-cards
 * (vorherige + nächste Episode), gleicher Look wie die /episodes/-Liste.
 *
 * Grid mit zwei gleich breiten Spalten; auf schmalen Viewports stapelt's
 * untereinander. Wenn nur eine der beiden Spalten gerendert wird (erste/letzte
 * Episode), füllt sie automatisch die volle Breite.
 * ------------------------------------------------------------------------- */

.compendion-episode-prev-next {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin-top: var(--wp--preset--spacing--50, 2rem);
}

@media (max-width: 600px) {
	.compendion-episode-prev-next {
		grid-template-columns: 1fr;
	}
}

.compendion-episode-prev-next__col {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.compendion-episode-prev-next__col--next {
	text-align: right;
}

.compendion-episode-prev-next__label {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 60%, transparent);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Featured Episode (patterns/section-featured-episode.php)
 *
 * Aktuellste Netzwerk-Episode als statische Link-Card: Cover + Show-Name +
 * Titel + Öffnen-Button. Kein Podlove-Player-Mount.
 * ------------------------------------------------------------------------- */

.compendion-section--featured-episode__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: baseline;
	margin: 0.25rem 0 0.5rem;
}

.compendion-section--featured-episode__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;
}

.compendion-section--featured-episode__date {
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 60%, transparent);
	font-variant-numeric: tabular-nums;
}


/* === Featured-Episode-Card ===
 *
 * Primärdarstellung: statische Link-Card mit Cover, Show-Name, Episodentitel
 * und Öffnen-Button. Kein Player-Mount, kein JS.
 */

.compendion-section--featured-episode .compendion-featured-fallback {
	margin: 0 0 0.75rem;
	max-width: 640px;
}

.compendion-featured-fallback {
	display: flex;
	gap: 1rem;
	align-items: stretch;
	padding: 0.75rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 6%, transparent);
	border-radius: 0.6rem;
	box-sizing: border-box;
}

.compendion-featured-fallback__cover {
	flex: 0 0 auto;
	display: block;
	max-width: 30%;
	line-height: 0;
	border-radius: 0.4rem;
	overflow: hidden;
}

.compendion-featured-fallback__cover img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.compendion-featured-fallback__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
}

.compendion-featured-fallback__show {
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 70%, transparent);
}

.compendion-featured-fallback__title {
	font-size: clamp(1rem, 2.2vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.compendion-featured-fallback__title a {
	color: inherit;
	text-decoration: none;
}

.compendion-featured-fallback__title a:hover,
.compendion-featured-fallback__title a:focus-visible {
	text-decoration: underline;
}

/*
 * "Episode öffnen"-Button.
 *
 * Textfarbe NIE direkt aus der Palette ziehen — der WCAG-Helper in
 * `includes/palette/site-palette.php` setzt `--compendion-color-on-primary`
 * pro Palette so, dass das Paar bg=primary / text=on-primary garantiert
 * AA erreicht. Auf Dachmarke ist primary == base (beides #F5D80E); ein
 * naives `color: --wp--preset--color--base` ergibt yellow-on-yellow
 * (Feedback 2026-05-28, [[feedback_on_color_tokens]]).
 */
.compendion-featured-fallback__play {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	padding: 0.45rem 1.1rem;
	background: var(--wp--preset--color--primary, currentColor);
	color: var(--compendion-color-on-primary, var(--wp--preset--color--contrast, #000));
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: transform 150ms ease, background 150ms ease;
}

.compendion-featured-fallback__play:hover,
.compendion-featured-fallback__play:focus-visible {
	transform: translateY(-1px);
	background: color-mix(in srgb, var(--wp--preset--color--primary, #000) 85%, var(--wp--preset--color--contrast, #000));
	outline: 2px solid var(--compendion-color-on-primary, var(--wp--preset--color--contrast, #000));
	outline-offset: 2px;
}

.compendion-featured-fallback__play-icon {
	font-size: 0.85em;
	line-height: 1;
}

/* Mobile: stacken */
@media (max-width: 600px) {
	.compendion-featured-fallback {
		flex-direction: column;
	}
	.compendion-featured-fallback__cover {
		max-width: 60%;
		align-self: center;
	}
}


.compendion-podcast-front-page {
	--compendion-podcast-accent: var(--wp--preset--color--primary);
	--compendion-podcast-contrast: var(--wp--preset--color--contrast);
	--compendion-podcast-surface: var(--wp--preset--color--surface);
}

/* ---------------------------------------------------------------------------
 * Header — Kontrast-Hintergrund, Basis-Schrift, Dreieck-Trenner
 *
 * Palette-adaptiv: auf der Dachmarke contrast=#181816/base=#F5D80E
 * (schwarz/gelb), auf Sub-Sites greift die jeweilige Site-Palette.
 * z-index:1 stellt sicher, dass das ::after-Dreieck ueber dem folgenden
 * Seiteninhalt liegt.
 * ------------------------------------------------------------------------- */

.compendion-site-header {
	--compendion-triangle-h: clamp(30px, 4vw, 60px);
	background-color: var(--compendion-header-bg, var(--wp--preset--color--contrast));
	color: var(--compendion-header-text, var(--wp--preset--color--base));
	overflow: visible;
	position: relative;
	z-index: 1;
}

.compendion-site-header .wp-block-site-title,
.compendion-site-header .wp-block-site-title a {
	color: var(--compendion-header-text, var(--wp--preset--color--base));
}

.compendion-site-header .compendion-network-kicker,
.compendion-site-header .compendion-network-kicker a {
	color: var(--compendion-header-text, var(--wp--preset--color--base));
}

.compendion-site-header .wp-block-navigation,
.compendion-site-header .wp-block-navigation a,
.compendion-site-header .wp-block-navigation button {
	color: var(--compendion-header-text, var(--wp--preset--color--base));
}

.compendion-site-header .compendion-color-scheme-toggle {
	color: color-mix(in srgb, var(--compendion-header-text, var(--wp--preset--color--base)) 60%, transparent);
}

.compendion-site-header .compendion-color-scheme-toggle:hover,
.compendion-site-header .compendion-color-scheme-toggle:focus-visible {
	background: color-mix(in srgb, var(--compendion-header-text, var(--wp--preset--color--base)) 12%, transparent);
	color: var(--compendion-header-text, var(--wp--preset--color--base));
}

.compendion-site-header::after {
	border-left: var(--compendion-triangle-h) solid transparent;
	border-right: var(--compendion-triangle-h) solid transparent;
	border-top: var(--compendion-triangle-h) solid var(--compendion-header-bg, var(--wp--preset--color--contrast));
	content: '';
	height: 0;
	left: 50%;
	position: absolute;
	/* 1px Overlap nach oben — verhindert Subpixel-Lücke zwischen Header-Unterkante
	 * und Triangle-Oberkante bei fraktionalen Viewport-Größen / Zoom. Triangle-
	 * Top-Border-Farbe = Header-Hintergrund (contrast), Overlap optisch unsichtbar. */
	top: calc(100% - 1px);
	transform: translateX(-50%);
	width: 0;
}

/* ---------------------------------------------------------------------------
 * Footer (parts/footer.html — `.compendion-site-footer`)
 *
 * Kompaktes einzeiliges Layout: Links links, Made-by-Note rechts.
 * surface-Hintergrund, Links in Kontrast mit dezenter Underline-Optik.
 * Master-Site hat surface = schwarz, Sub-Sites bringen eigenen Ton mit.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Footer — Dreieck-Spitze oberhalb des Footers (nach oben zeigend, ▲)
 *
 * ::before: surface-farbiges Dreieck zeigt nach oben (▲), sitzt im
 * margin-top-Gap oberhalb des Footers. Erzeugt die gleiche Visitenkarten-
 * Optik wie am Header, aber gespiegelt. Kein ::after — ein Dreieck genügt.
 * ------------------------------------------------------------------------- */

.compendion-site-footer {
	--compendion-triangle-h: clamp(30px, 4vw, 60px);
	color: color-mix(in srgb, var(--compendion-footer-text, var(--compendion-color-on-surface, var(--wp--preset--color--contrast))) 78%, transparent);
	font-size: 0.95rem;
	line-height: 1.5;
	overflow: visible;
	position: relative;
}

.compendion-site-footer::before {
	border-bottom: var(--compendion-triangle-h) solid var(--wp--preset--color--surface);
	border-left: var(--compendion-triangle-h) solid transparent;
	border-right: var(--compendion-triangle-h) solid transparent;
	content: '';
	height: 0;
	left: 50%;
	position: absolute;
	/* 1px Overlap in den Footer hinein — Triangle-Bottom-Border-Farbe = Footer-
	 * Hintergrund (surface), Overlap unsichtbar. Verhindert Subpixel-Lücke
	 * zwischen Triangle-Unterkante und Footer-Oberkante. */
	top: calc(-1 * var(--compendion-triangle-h) + 1px);
	transform: translateX(-50%);
	width: 0;
}

.compendion-site-footer :where(p) {
	margin-block: 0;
}

.compendion-network-note {
	background: color-mix(in srgb, var(--wp--preset--color--compendion) 82%, var(--wp--preset--color--base));
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.25rem;
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
	padding: clamp(1rem, 3vw, 1.5rem);
}

.compendion-card {
	border-radius: 1.5rem;
	overflow: hidden;
}

.compendion-network-kicker {
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--30);
}

.compendion-site-footer a {
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 40%, transparent);
	text-underline-offset: 0.18em;
	transition: text-decoration-color 150ms ease;
}

.compendion-site-footer a:hover,
.compendion-site-footer a:focus-visible {
	text-decoration-color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
}

.compendion-footer-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	justify-content: space-between;
}

.compendion-site-footer .compendion-footer-links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.1rem 1.25rem;
	margin: 0;
}

.compendion-site-footer .compendion-footer-links li {
	margin: 0;
}

/*
 * Footer-Links als Touch-Targets: jedes `a` mindestens 44px hoch, damit
 * auch mit dem Daumen treffbar (Smashing Touch-Checklist 01/04).
 */
.compendion-site-footer .compendion-footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding-block: 0.25rem;
}

.compendion-footer-made-by {
	color: color-mix(in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 50%, transparent);
	font-size: 0.85rem;
}

.wp-element-button:not(:hover),
.wp-block-button__link:not(:hover) {
	color: var(--compendion-color-on-primary, var(--wp--preset--color--contrast));
	box-shadow: 0 0 0 2px currentColor;
}

/*
 * Outline-Buttons haben bereits einen sichtbaren Rand (border: 2px solid).
 * Der generische box-shadow wuerde einen doppelten Ring erzeugen — Reset.
 */
.wp-block-button[class*="is-style-outline"] .wp-block-button__link:not(:hover),
.wp-block-button[class*="is-style-outline"] .wp-element-button:not(:hover) {
	box-shadow: none;
}

.compendion-footer-links {
	list-style: none;
	padding-left: 0;
}

.compendion-hero-card,
.compendion-podcast-card,
.compendion-support-card {
	background: var(--compendion-podcast-surface, var(--wp--preset--color--surface));
	border: 1px solid var(--wp--preset--color--line);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	padding: clamp(1.25rem, 4vw, 2rem);
}

.compendion-hero-card :where(.compendion-kicker, p, a),
.compendion-podcast-card :where(.compendion-kicker, p, a),
.compendion-support-card :where(.compendion-kicker, p, a) {
	color: inherit;
}

.compendion-kicker {
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.compendion-podcast-cover-placeholder {
	aspect-ratio: 1;
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.5rem;
	box-shadow: 0 1rem 3rem color-mix(in srgb, var(--compendion-podcast-accent, currentColor) 12%, transparent);
	color: var(--wp--preset--color--muted);
	display: flex;
	justify-content: center;
	min-height: 12rem;
}

.compendion-podcast-cover-placeholder p {
	opacity: 0.68;
}

.compendion-podcast-cover {
	margin-inline: auto;
}

.compendion-podcast-cover :where(img) {
	aspect-ratio: 1;
	border-radius: 1.25rem;
	box-shadow: 0 1rem 3rem color-mix(in srgb, var(--compendion-podcast-accent, currentColor) 16%, transparent);
	height: auto;
	object-fit: cover;
	width: min(100%, 20rem);
}

.compendion-support-card {
	min-height: 100%;
}

.compendion-featured-episode-card .podlove-web-player {
	margin-block: var(--wp--preset--spacing--30);
}


.compendion-support-card {
	border-block-start: 0.35rem solid var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * Network content (Feature 7 Schicht 2)
 * Erfolgs-Pfad: kein spezielles Styling — der eingebettete Master-Inhalt
 * behält die Standard-Block-Darstellung des aktiven Themes.
 * Fallback-Pfad: eine freundliche Karte mit Link auf die Dachmarke, falls
 * die Master-Seite (noch) nicht existiert oder nicht geladen werden konnte.
 * ------------------------------------------------------------------------- */

.compendion-network-content--fallback {
	max-inline-size: 40rem;
	margin-block: var(--wp--preset--spacing--40);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	background-color: var(--compendion-color-surface-soft, color-mix(in srgb, var(--wp--preset--color--surface) 92%, var(--wp--preset--color--base)));
	color: var(--compendion-color-on-surface-soft, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
	text-align: center;
}

.compendion-network-content--fallback .compendion-network-content__title {
	margin-block-start: 0;
	font-size: var(--wp--preset--font-size--large);
}

.compendion-network-content__fallback-text {
	color: var(--compendion-color-on-surface-soft-muted, inherit);
	margin-block: var(--wp--preset--spacing--20);
}

.compendion-network-content__fallback-link {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--20);
	padding: 0.6rem 1.15rem;
	border-radius: 0.375rem;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 600;
}

.compendion-network-content__fallback-link:hover,
.compendion-network-content__fallback-link:focus-visible {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

/*
 * Mitwirkende-Visitenkarte (Feature 8 / Schicht 4).
 * Render-Quelle: includes/person-shortcode.php — `[compendion-person ...]`.
 * Bewusst kompakt gehalten; Sub-Sites koennen die Klassen ueberschreiben,
 * ohne die HTML-Struktur anzufassen.
 */
.compendion-person {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 1rem);
	margin: 0;
	padding: var(--wp--preset--spacing--20, 1rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--base) 96%, var(--wp--preset--color--contrast));
}

.compendion-person__avatar {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.compendion-person__caption {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.compendion-person__name {
	font-weight: 600;
	line-height: 1.2;
}

.compendion-person__role {
	color: var(--wp--preset--color--muted);
	font-size: 0.9em;
}

.compendion-person__link {
	margin-top: 0.25rem;
	font-size: 0.85em;
	text-underline-offset: 0.16em;
}

/* ---------------------------------------------------------------------------
 * Mitwirkenden-Card-Komponente (.compendion-mitwirkende-card)
 *
 * Quergeschnittene Karte fuer Mitwirkende — wird sowohl vom Master-Block
 * `compendion/mitwirkende-grid` (auf /mitwirkende/) als auch vom Sub-Site-
 * Shortcode `[compendion-contributors]` benutzt. Layout, Farben, Mobile-
 * Verhalten sind absichtlich identisch. Hier liegt die einzige Wahrheit.
 *
 * Robustheit gegen Master-Palette: `surface` und `contrast` sind auf der
 * Master-Site identisch (beide fast schwarz), `primary` ist identisch mit
 * `base` (beide fast gelb). Card-Backgrounds und sichtbare Borders werden
 * deshalb gegen `base` und `contrast` gemischt — nicht gegen `surface`
 * oder `primary`.
 * ------------------------------------------------------------------------- */

.compendion-mitwirkende-card {
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, var(--wp--preset--color--contrast) 8%);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 1rem;
	overflow: hidden;
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.compendion-mitwirkende-card:hover,
.compendion-mitwirkende-card:focus-within {
	border-color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
}

/*
 * Card-Layout: Avatar oben full-bleed (Polaroid-Look), Body unten mit
 * Padding. Der ganze Inhalt liegt im `__link`-Wrapper (`<a>` bei
 * verfuegbarem Profil-URL, `<div>` als Fallback), damit die Card als
 * eine Touch-Zone klickbar ist (Smashing-Checklist: Touch-Target) und
 * die Mobile-Umordnung (siehe unten) konsistent greift.
 */
.compendion-mitwirkende-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.compendion-mitwirkende-card__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: -4px;
}

.compendion-mitwirkende-card__avatar-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, var(--wp--preset--color--contrast) 12%);
}

.compendion-mitwirkende-card__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.compendion-mitwirkende-card__avatar--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 700;
	font-size: clamp(2rem, 6vw, 3.25rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/*
 * Body fuellt die Cardhoehe (`flex: 1`), damit Cards in einer Reihe gleich
 * hoch sind — Grid stretch greift, Avatar bleibt 1:1, Body waechst auf
 * Row-Resthoehe. Name + Badges sitzen am oberen Body-Rand (kein
 * `margin-top: auto` auf Badges; eine Luecke zwischen Name und Badges sah
 * frueher haesslich aus). Restliche Body-Hoehe ist Card-Background — bei
 * inhaltsaehnlichen Reihen kaum sichtbar.
 *
 * Master-Block und Sub-Site-Shortcode nutzen exakt dieselben Werte —
 * eine Wahrheit.
 */
.compendion-mitwirkende-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.6rem 0.75rem 0.55rem;
	flex: 1;
	/* Badges haben white-space:nowrap — ohne min-width:0 koennen sie den Body
	 * ueber die Card-Breite aufblaehen (selber Effekt wie Namen auf Mobile,
	 * dort bereits dokumentiert). max-width:100% + text-overflow:ellipsis
	 * auf den Badges setzt eine korrekte Parent-Breite voraus.
	 */
	min-width: 0;
}

/* Name: Primary gross/fett (Realname), Secondary kursiv eine Zeile darunter
 * (Publicname, falls vom Realname abweichend). Bei nur einem Namen
 * verschwindet die zweite Zeile komplett — kein Leerraum.
 */
.compendion-mitwirkende-card__name {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.compendion-mitwirkende-card__name-primary {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.compendion-mitwirkende-card__name-secondary {
	font-style: italic;
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1.25;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
	overflow-wrap: anywhere;
}

/* Badges: Compendion-Look — dunkler Hintergrund, helle Schrift, deutlicher
 * Kontrast auf jeder Palette. Pillen stapeln vertikal (eine pro Zeile), Breite
 * folgt dem Inhalt; Schriftgroesse ist so gewaehlt, dass auch der laengste
 * Show-Name („Gestern Heute Uebermorgen") in der schmalsten Card (~180px)
 * einzeilig bleibt. „+N"-Badge teilt das Geometrie-Setup, ist aber mit Border
 * statt Fill als Indikator gekennzeichnet (kein Tooltip — bewusst statisch,
 * siehe Konstanten-Kommentar in mitwirkende-overview.php).
 */
.compendion-mitwirkende-card__badges {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.compendion-mitwirkende-card__badge {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.2em 0.7em;
	line-height: 1.35;
	white-space: nowrap;
	/* border-box: Padding wird in max-width:100% eingerechnet — ohne das
	 * wuerde content-box den Padding-Anteil oben drauf addieren, die Pille
	 * laeuft aus dem Body heraus und wird von der Card (overflow:hidden)
	 * abgeschnitten, sodass der rechte Pilling-Padding am Ellipsis fehlt.
	 */
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.compendion-mitwirkende-card__badge--more {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}

.compendion-mitwirkende-card__badge a,
.compendion-mitwirkende-card__badge a:hover,
.compendion-mitwirkende-card__badge a:focus-visible {
	color: inherit;
	text-decoration: none;
}

/*
 * Card-Grid: feste Spurbreite (clamp 180-220px), auto-fit, Spuren mittig im
 * Wide-Layout-Container. Default `align-items: stretch` greift — Cards in
 * einer Reihe sind gleich hoch (auf die hoechste). Avatare bleiben
 * quadratisch (aspect-ratio 1/1, full-bleed an der Card-Breite), die
 * Body-Resthoehe wird ueber `flex: 1` (siehe `__body`) gefuellt — kein
 * Card-Background-Streifen unter dem Body.
 *
 * Wird ebenfalls von Master-Block und Sub-Site-Shortcode genutzt
 * — eine Wahrheit, ein Grid.
 */
.compendion-mitwirkende-overview__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, clamp(180px, 18vw, 220px));
	gap: clamp(0.875rem, 2vw, 1.25rem);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

@media (max-width: 479px) {
	.compendion-mitwirkende-overview__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Unter 480px faellt das Grid auf 1 Spalte — eine full-bleed Avatar-Card
 * pro Reihe wuerde dann mehr als ein Drittel der Bildschirmhoehe fressen.
 * Stattdessen: horizontales Layout — Avatar links 10rem quadratisch,
 * Name/Badges rechts. Cards sizen sich an ihren Inhalt; alle Avatare sind
 * durch den `aspect-ratio: 1/1`-Fix gleich groß, das reicht visuell —
 * Equal-Height-Mechanik (frueher `min-height: 10rem` an der Card oder
 * `grid-auto-rows` am Grid) wurde verworfen, weil sie entweder Tags
 * abgeschnitten oder unten 3rem Leerraum erzeugt hat. Konvention:
 * [[mitwirkende#Card-Konventionen (Avatar, Mobile)|mitwirkende — Card-
 * Konventionen]].
 *
 * Avatar ist 10rem × 10rem (`width: 10rem` + `aspect-ratio: 1/1`) und
 * sitzt am Card-Top (`align-self: flex-start`). Frueher hat `align-self:
 * stretch` + `aspect-ratio: unset` den Wrap auf Cardhoehe gezogen —
 * `object-fit: cover` hat das Bild dann schief gecroppt. Mit fixem
 * Quadrat ist das Bild immer korrekt.
 *
 * Card-`min-height` (7.5rem bzw. 6.5rem unter 380px) bleibt als
 * Floor — Cards mit minimalem Inhalt fallen damit nicht unter Avatar-
 * Hoehe (10rem in der Praxis ohnehin nicht, aber Konvention).
 *
 * Buendig mit Karten-Kanten links/oben/unten — `overflow: hidden` +
 * `border-radius: 1rem` an der Card klippt die Avatar-Ecken sauber mit.
 *
 * 2-Spalten-Variante (Karten in derselben Reihe egalisieren sich
 * automatisch via grid-Default `align-items: stretch`) wurde verworfen:
 * in 2 Spalten ist die Card unter 200px breit, der 10rem-Avatar wuerde
 * fast die ganze Card-Breite fressen und der Body bliebe unlesbar.
 * Erst bei einem groesseren Layout-Umbau (Avatar oben statt links) waere
 * das wieder eine Option.
 */
@media (max-width: 479px) {
	.compendion-mitwirkende-card {
		min-height: 7.5rem;
	}

	.compendion-mitwirkende-card__link {
		flex-direction: row;
		align-items: stretch;
	}

	.compendion-mitwirkende-card__avatar-wrap {
		width: 10rem;
		aspect-ratio: 1 / 1;
		flex-shrink: 0;
		align-self: flex-start;
		border-radius: 0;
	}

	/* `min-width: 0` erlaubt dem Body-Flex-Child zu shrinken — sonst
	 * blaehen lange Namen mit `nowrap` den Body in die Breite und die
	 * Card sprengt das 1fr-Grid. Truncation auf den Namens-Zeilen
	 * darunter haengt davon ab.
	 */
	.compendion-mitwirkende-card__body {
		padding: 0.75rem 0.9rem;
		min-width: 0;
	}

	/* Lange Personen-Namen (z.B. „Alexander Waschkau") wuerden zweizeilig
	 * brechen, was den Body verlaengert und die Card-Hoehen-Varianz
	 * verstaerkt. Namen einzeilig erzwingen und truncaten.
	 */
	.compendion-mitwirkende-card__name-primary,
	.compendion-mitwirkende-card__name-secondary {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (max-width: 380px) {
	.compendion-mitwirkende-card {
		min-height: 6.5rem;
	}
}

/* Shortcode-Wrapper auf der Sub-Site-Frontpage. Erbt Card-Stil von oben,
 * druckt nur das Padding-Verhalten des Master-Overviews zurueck (Master-
 * Overview ist eine eigene Page, der Shortcode lebt eingebettet in einem
 * Block-Group-Wrapper mit eigenem Padding).
 */
.compendion-mitwirkende-overview--inline {
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.compendion-mitwirkende-overview--inline .compendion-mitwirkende-overview__group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.compendion-mitwirkende-overview--inline .compendion-mitwirkende-overview__group h2 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
 * Sub-Site-Frontpage (`templates/front-page.html`) — Sektionen "Weitere Folgen"
 * und "Mitwirkende".
 *
 * Layout-Entscheidungen:
 *   - Section-Headings werden auf die Lesebreite (`contentSize` = 720px aus
 *     theme.json) geklemmt und sitzen linksbuendig — sie sollen nicht ueber
 *     die ganze Breite springen, sondern in einer ruhigen Spalte stehen,
 *     unabhaengig davon wie weit der Card-Bereich darunter aufgeht.
 *   - Card-Grids zentrieren ihre Spuren via `justify-content: center`. Bei
 *     wenigen Cards (z.B. 3 Hosts, 4 Mitwirkende) wirkt der Bereich dadurch
 *     ausbalanciert, statt mit grossem Leerraum rechts. Bei vielen Cards
 *     sind die Reihen ohnehin voll, das Zentrieren ist dann visuell ein
 *     No-op.
 *   - Spuren-Breite via `clamp()` an Viewport gekoppelt: Episode-Tiles
 *     260–320px, Mitwirkende-Cards 180–220px. `auto-fit` kollabiert leere
 *     Spuren, sodass das Grid sich an die Card-Anzahl anpasst.
 * ------------------------------------------------------------------------- */

/*
 * Headings stehen in einer eigenen 720px-Spalte, mittig zur Viewport-Achse
 * — gleich wie der 1800px-Cards-Container darunter. Beide Container sind
 * dadurch zentriert; der Text im Heading bleibt linksbuendig innerhalb der
 * 720px-Box (h2-Default `text-align: left`). Karten-Grid ist davon
 * entkoppelt und nimmt die volle Wide-Layout-Breite ein, zentriert seine
 * Spuren.
 */
.compendion-podcast-front-page .compendion-latest-episodes > h2,
.compendion-front-mitwirkende h2 {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
	width: 100%;
}

/* Kein Front-Page-Override des Episoden-Grids mehr: Die Liste nutzt das
 * geteilte Content-Card-Grid aus compendion-content-card.css (auto-fill,
 * minmax(280px,1fr)). Der fruehere `auto-fit, clamp(260px,22vw,320px)` +
 * justify-content:center stauchte die einzelne Card auf der MWM-Startseite auf
 * ~320px und kippte sie dadurch faelschlich auf vertikal, statt eine breite
 * horizontale Card zu zeigen. Memory feedback_card_wrapper_grid_drift. */

/* ---------------------------------------------------------------------------
 * Primary navigation — Aktiv-State
 * Hebt den aktuellen Menüpunkt sichtbar hervor. WordPress setzt auf passende
 * Items automatisch `current-menu-item`, bei verschachtelten Submenus zusätzlich
 * `current-menu-ancestor` / `current-menu-parent` sowie das ARIA-Attribut
 * `aria-current="page"`. Wir adressieren alle Varianten, damit Sub-Site-
 * Hauptnavigation (flach) und Dachmarken-Navigation (wp_navigation-Post mit
 * möglichen Submenus) gleich aussehen.
 *
 * Unterstrich-Farbe = `currentColor` (Linkfarbe selbst). Das funktioniert auf
 * jeder Site, weil sich die Linkfarbe per definitionem vom Header-Hintergrund
 * abheben muss — andernfalls wäre der Text selbst unlesbar. Eine vorherige
 * Variante mit `--wp--preset--color--primary` war auf der Dachmarke unsichtbar
 * (primary == base == gelb → Unterstrich auf gelbem Header verschwand).
 * ------------------------------------------------------------------------- */

.compendion-primary-nav .wp-block-navigation-item.current-menu-item > :where(a, button),
.compendion-primary-nav .wp-block-navigation-item.current-menu-ancestor > :where(a, button),
.compendion-primary-nav .wp-block-navigation-item.current-menu-parent > :where(a, button),
.compendion-primary-nav .wp-block-navigation-item :where(a, button)[aria-current="page"] {
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-thickness: 0.15em;
	text-underline-offset: 0.3em;
	text-decoration-color: currentColor;
}

/*
 * Mobile-Overlay-Hintergrund. WP-Core hat fuer Nav-Bloecke ohne explizit
 * gesetzte `backgroundColor`-Attribute einen Fallback:
 *   .wp-block-navigation:not(.has-background) ... .is-menu-open {
 *       background-color: #fff;  color: #000;
 *   }
 * Auf unseren Sites (gelb-/dunkel-Branding) ist `#fff` Hintergrund + Theme-
 * Linkfarbe (gelb auf weiss) unleserlich. Wir setzen den Overlay-Hintergrund
 * deshalb auf `--contrast` (dunkel) und den Vordergrund auf `--base` (hell)
 * — funktioniert auf jeder Palette, weil contrast/base per definitionem
 * Kontrastpaar sind. `!important` ueberschreibt den Inline-Style aus WP-Core,
 * der mit `.wp-block-navigation:not(.has-background) ...` (0,0,4,0) hoehere
 * Specificity als unser `.compendion-primary-nav .wp-block-navigation__
 * responsive-container.is-menu-open` (0,0,3,0) hat.
 *
 * Greift fuer beide Markup-Varianten — Master (Wrapper-Div mit
 * `.compendion-primary-nav` um `<nav class="wp-block-navigation">`) und
 * Sub-Site (Klasse direkt am `<nav>`) — weil der responsive-container in
 * beiden Faellen Nachfahre des `.compendion-primary-nav`-Knotens ist.
 */
.compendion-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}

/* ---------------------------------------------------------------------------
 * Master-Frontpage (compendion.net/) — Section-Rhythmus + Visitenkarten-Look
 * Gilt nur fuer das Template `front-page-master.html`. Sub-Sites laden
 * dasselbe CSS, treffen die `.compendion-home-master__*`-Klassen aber nirgends.
 * Section-Stack: Hero → Stats → Network-Grid → Latest-Network-Episodes.
 *
 * Master-Tokens (per Inline-Palette aus Compendion Core, nicht in theme.json):
 *   base #F5D80E (gelb), contrast #181816 (schwarz), primary #F5D80E (gelb),
 *   surface #181816 (schwarz), line #FFFFFF (weiss), accent #70630B (dunkel-
 *   gelb). primary == base, deshalb wird die Markenfarbe als Section-Trenner
 *   nicht verwendet — wir greifen auf contrast/line zurueck.
 * ------------------------------------------------------------------------- */

/*
 * Section-Trenner. Linie auf jeder `__section`, wenn ein Sibling davorliegt —
 * der Hero ist seit dem 2-Column-Umbau kein `__section` mehr, soll aber von
 * der ersten Section dennoch durch eine Linie getrennt werden.
 */
.compendion-home-master__section:not(:first-child) {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #000) 18%, transparent);
}

.compendion-home-master__section > :where(h2, .compendion-kicker) {
	margin-top: 0;
}

.compendion-home-master__section .compendion-kicker {
	margin-bottom: 0.25rem;
}

.compendion-home-master__section > h2 {
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-block-end: 0.4em;
}

/*
 * Heading-zu-Card-Reihe-Abstand auf der Master-Frontpage. Default-blockGap
 * (1.35rem aus theme.json) plus H2 margin-block-end (0.4em) ergeben in Summe
 * einen optisch zu engen Abstand zur ersten Card-Reihe. Skalierender Boost am
 * Card-Grid sorgt fuer atemfaehigen Block, ohne die H2-typografie zu kippen.
 */
.compendion-home-master__section .compendion-latest-network-episodes,
.compendion-home-master__section .wp-block-post-template.compendion-episode-grid {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/*
 * Hero auf Master: groesserer Visitenkarten-Eindruck — H1 darf richtig knallen.
 * Greift nur, wenn der Hero im Master-Template gerendert wird (Pattern
 * `compendion/hero-compendion` ist auf compendion.net die einzige Quelle).
 *
 * Seit dem 2-Column-Umbau: links Logo/H1/Subtitle/Buttons (zentriert in der
 * 2/3-Spalte), rechts der `compendion/network-stats`-Block (1/3-Spalte).
 * Spaltenstack via WP-Default (<= 781px).
 */
.compendion-home-master .compendion-hero-network {
	padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3rem);
}

.compendion-home-master .compendion-hero-network h1 {
	font-size: clamp(2.75rem, 9vw, 5.25rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.02;
	margin-block: 0.2em 0.1em;
}

.compendion-home-master .compendion-hero-network .wp-block-buttons {
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--30);
	justify-content: center;
}

.compendion-home-master .compendion-hero-card-master .wp-block-site-logo {
	margin-bottom: var(--wp--preset--spacing--20);
}

/*
 * Mobile-Stack: WP-Default-Breakpoint fuer wp:columns liegt bei 781px. Unter
 * dem stehen Hero und Stats untereinander. Etwas Luft zwischen den beiden,
 * damit die Stats nicht direkt auf den Buttons kleben.
 */
@media (max-width: 781px) {
	.compendion-home-master .compendion-hero-stats-column {
		margin-top: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 480px) {
	.compendion-home-master__section + .compendion-home-master__section {
		padding-top: var(--wp--preset--spacing--40);
	}
}