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

/* Mode-sicheres Elevations-Overlay: Hellmodus = dunkler Overlay (#000), Dark-
 * Mode = heller (#fff, in compendion-dark.css gesetzt). Hover-/Zustands-Flaechen
 * mischen gegen DIESES Token, nie gegen die Textfarbe (contrast) – so steigt der
 * Kontrast in beiden Modi statt im Dark-Mode zu kippen. */
:root {
	--compendion-elevation: #000000;

	/*
	 * Breakpoint-Skala (Doku). CSS-Custom-Properties funktionieren NICHT in
	 * `@media`-Bedingungen — die Queries im Theme nutzen weiterhin Literalwerte.
	 * Diese Variablen sind die kanonische Referenz, gegen die neue Queries
	 * geschrieben werden; bei Bedarf auch in calc()/clamp() im Body verwendbar.
	 *
	 * Bewusste Ausnahmen, die NICHT auf diese Skala migriert werden:
	 *   - 781px: WP-Default-Stackpunkt fuer `wp:columns`. Mobile-Stack-Overrides
	 *     muessen exakt dort greifen, sonst desynct das Layout von WP-Core.
	 *   - ~380px: harter min-width-Floor fuer sehr schmale Phones, kein eigener BP.
	 */
	--bp-sm: 480px;  /* Phone -> small */
	--bp-md: 600px;  /* Mobile/Desktop-Hauptgrenze */
	--bp-lg: 900px;  /* Wide-Layout */
	--bp-max: 1800px; /* Content-Cap (= .compendion-wide-layout / --cmp-v3-max) */
}

/* ---------------------------------------------------------------------------
 * 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);
}

/*
 * Voll-Breite erzwingen, wenn `.compendion-wide-layout` das Seiten-`<main>` ist.
 *
 * Das `<main>` haengt im TT25-Body-Wrapper `div.wp-site-blocks`, der
 * `display:flex; flex-direction:column` ist. `.compendion-wide-layout` bringt
 * `margin-inline:auto` mit – und Auto-Margins auf der Cross-Achse eines
 * Flex-Items UNTERDRUECKEN das Default-Stretch: das `<main>` schrumpft dann auf
 * seine Inhaltsbreite statt die Spalte zu fuellen. Sichtbar auf jeder Seite mit
 * eher schmalem Inhalt (Mitwirkende-Grid, Fundus-Cardlist) als „alles in einer
 * schmalen, mittigen Spalte"; Seiten mit einem `alignfull`-Block (Podcasts-Grid)
 * entkamen nur zufaellig, weil deren Inhalt ohnehin volle Breite anfordert.
 *
 * `width:100%` gibt dem Flex-Item eine definite Cross-Size → Stretch greift,
 * `max-width:1800px` + `margin-inline:auto` zentrieren weiterhin. box-sizing ist
 * global border-box, darum kein Overflow trotz `padding-inline`. Bewusst auf
 * `main.` gescoped: Inline-Sektionen, die `.compendion-wide-layout` mitbenutzen
 * (z.B. `.compendion-front-mitwirkende` als `alignfull`-Section auf der Sub-Site-
 * Startseite), bleiben unberuehrt – ein globales `width:100%` verschoebe deren
 * Zentrierung.
 */
main.compendion-wide-layout {
	width: 100%;
}

/* Fundus-Kopf (page-fundus.html): sichtbare h1 + Einleitungssatz ueber der
 * Cardlist, Masse wie der Mitwirkende-Kopf. Linksbuendig mit der Liste. */
.compendion-fundus__header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.compendion-fundus__header .wp-block-post-title {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	line-height: 1.1;
	margin: 0;
}

.compendion-fundus__lede {
	max-width: 80rem;
	margin: 0;
	color: var(--c-on-base-muted);
	font-size: clamp(1rem, 2vw, 1.125rem);
}

/*
 * `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.
 *
 * `margin-inline: auto`: WP gibt dem `alignfull`-Element negative Inline-Margen
 * (Root-Padding-Bleed, hier −40px), die `margin-inline:auto` aus
 * `.compendion-wide-layout` überschreiben. Unter 1800px Viewport ist das egal
 * (Section nimmt ohnehin die volle Breite). AB >1800px greift `max-width:1800px`
 * – dann klebt die Section ohne dieses Re-Auto am linken Rand (x=0) statt mittig,
 * sichtbar als wachsende Leerfläche rechts neben den Mitwirkenden-Karten. `auto`
 * stellt die Zentrierung wieder her; die Karten selbst sind im Grid schon mittig.
 */
.compendion-podcast-front-page .compendion-wide-layout.alignfull {
	padding-inline: 0;
	margin-inline: auto;
}

/*
 * 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 (Markup in assets/js/compendion-scroll-top.js injiziert)
 *
 * Horizontale 4er-Reihe unten-rechts in `.compendion-scroll-nav`, von links
 * nach rechts: ⏬ zum Ende, ↓ eine Höhe runter, ↑ eine Höhe hoch, ⏫ zum Anfang.
 * Alle vier bleiben sichtbar; JS togglet je nach Scroll-Position das native
 * `disabled` – inaktive Buttons grauen aus (`:disabled`), springen aber nicht
 * aus dem Flow. Die ganze Reihe ist nur auf kurzen Seiten ohne Scroll-Reserve
 * per [hidden] ausgeblendet.
 *
 * Token-basiert fuer Dark-Mode-Kompatibilitaet: Kontrast-Background, Base-
 * Text – `compendion-dark.css` dreht die Tokens.
 * ------------------------------------------------------------------------- */

.compendion-scroll-nav {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 100;
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

.compendion-scroll-btn {
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--c-page-border);
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--compendion-elevation) 15%, transparent);
	opacity: 0.85;
	transition: opacity 200ms ease, background-color 150ms ease;
}

.compendion-scroll-btn:hover,
.compendion-scroll-btn:focus-visible {
	opacity: 1;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, var(--wp--preset--color--primary) 15%);
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 2px;
}

/* Inaktiv am Seitenanfang/-ende: ausgegraut, nicht klickbar. Button bleibt im
 * Flow → die Reihe springt nicht, wenn ein Paar (de)aktiviert wird. */
.compendion-scroll-btn:disabled {
	opacity: 0.3;
	pointer-events: none;
	cursor: default;
}

.compendion-scroll-btn svg {
	display: block;
}

/* Zurueck-Button (history.back, Arne 2026-06-12): gehoert zur Reihe, der
 * Extra-Abstand trennt ihn sichtbar von der Scroll-Gruppe rechts daneben.
 * Auf kurzen Seiten bleibt er als einziger sichtbar (Scroll-Buttons [hidden]). */
.compendion-history-back {
	margin-right: 0.75rem;
}

.compendion-scroll-btn[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.compendion-scroll-btn {
		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: var(--c-on-base-muted);
	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: var(--c-on-base-muted);
	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.5rem;
	box-sizing: border-box;
}

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

.compendion-featured-fallback__cover img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	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: var(--c-on-base-muted);
}

.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(--compendion-color-primary-fill, 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(--compendion-color-primary-fill, 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);
}

/* ---------------------------------------------------------------------------
 * Abonnieren-Button (Block compendion/podcast-subscribe-button) – netzwerkweit.
 * Sichtbar ist ein theme-eigener wp-block-button (`.compendion-subscribe`,
 * Palette-Farbe), strukturgleich zu jedem anderen Button. Podloves echte
 * Subscribe-Quelle hängt als Geschwister `.compendion-subscribe__source`
 * daneben und liefert nur das Popup – darf das Layout NICHT beeinflussen, muss
 * aber im DOM bleiben (Podloves JS bindet den Klick darüber) → visuell
 * versteckt + position:absolute statt display:none.
 * ------------------------------------------------------------------------- */
.compendion-subscribe__source {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Sub-Site-Startseite Hero – Button-Reihe: „Abonnieren" (gefüllt, öffnet das
 * Popup) + „Unterstützen" (Outline). Beide sind gleichwertige direkte
 * .wp-block-button-Geschwister → identische Größe; hier kompakter + Pille.
 * ------------------------------------------------------------------------- */
.compendion-podcast-front-page .compendion-local-route-hero .wp-block-buttons {
	align-items: center;
}

.compendion-podcast-front-page .compendion-local-route-hero .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding-block: 0;
	padding-inline: 1.6rem;
	border-radius: 999px;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------------
 * Button-Kontrast gegen den Seitenhintergrund (base) – programmatisch.
 * Die Tokens --c-button-bg[-text] berechnet site-palette.php per
 * WCAG (≥3:1 gegen base, ≥4.5:1 Text-auf-Füllung): Markenfarbe wo sichtbar,
 * sonst sichtbarer Fallback. Behebt unsichtbare Buttons, wenn Primary ≈ base
 * (z. B. Werkgetreu navy-auf-navy). Gilt für den Abonnieren-Button überall
 * (.compendion-subscribe) und den Outline-Button im Sub-Site-Hero.
 * ------------------------------------------------------------------------- */
/*
 * Sichtbarer Button ist ein <button> (cursor:pointer ist global gesetzt, hier
 * nochmal zur Sicherheit). Farben aus den WCAG-CTA-Tokens. Hover deutlich:
 * Filled wird klar abgedunkelt (filter, mode-agnostisch), Outline wird voll
 * gefüllt. Outline-Border IMMER 2px → kein Breiten-Sprung/Text-Versatz im Hover.
 */
.compendion-subscribe .wp-block-button__link,
.compendion-podcast-front-page .compendion-local-route-hero .wp-block-button__link {
	/* !important schlägt die Safari-Erweiterung StopTheMadness, die per
	 * `:root[stopthemadness] * { cursor: revert }` (Author-Origin, normal) den
	 * seitenseitigen Cursor verwirft – ein <button> fiele sonst auf den UA-Pfeil
	 * zurück (ein <a> behielte die Hand). Für einen echt klickbaren CTA ist die
	 * Hand korrekt, daher hier extension-fest. Details [[reference_stopthemadness_cursor]]. */
	cursor: pointer !important;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.compendion-podcast-front-page .compendion-local-route-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 2px;
	border-style: solid;
}

/* --- Filled (Abonnieren): Füllfarbe aus CTA-Token, in jedem Zustand --- */
.compendion-subscribe:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--c-button-bg, var(--wp--preset--color--primary));
	color: var(--c-button-text, var(--wp--preset--color--base));
	border-color: transparent;
}

.compendion-subscribe:not(.is-style-outline) .wp-block-button__link:hover,
.compendion-subscribe:not(.is-style-outline) .wp-block-button__link:focus-visible {
	filter: brightness(0.85);
}

/* --- Outline (Unterstützen): Ruhe = nur Rand, Hover = voll gefüllt --- */
.compendion-podcast-front-page .compendion-local-route-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--c-button-bg, var(--wp--preset--color--contrast));
	border-color: var(--c-button-bg, var(--wp--preset--color--contrast));
}

.compendion-podcast-front-page .compendion-local-route-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.compendion-podcast-front-page .compendion-local-route-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--c-button-bg, var(--wp--preset--color--contrast));
	color: var(--c-button-text, var(--wp--preset--color--base));
	border-color: var(--c-button-bg, var(--wp--preset--color--contrast));
}

/* --- Dark Mode: CTA-Dark-Tokens (System-Pref + manueller Toggle) --- */
@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .compendion-subscribe:not(.is-style-outline) .wp-block-button__link {
		background-color: var(--c-button-bg-dark, var(--wp--preset--color--primary));
		color: var(--c-button-text-dark, var(--wp--preset--color--base));
	}
	html:not([data-color-scheme="light"]) .compendion-podcast-front-page .compendion-local-route-hero .wp-block-button.is-style-outline .wp-block-button__link {
		color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
		border-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
	}
	html:not([data-color-scheme="light"]) .compendion-podcast-front-page .compendion-local-route-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
	html:not([data-color-scheme="light"]) .compendion-podcast-front-page .compendion-local-route-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
		background-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
		color: var(--c-button-text-dark, var(--wp--preset--color--base));
		border-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
	}
}

html[data-color-scheme="dark"] .compendion-subscribe:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--c-button-bg-dark, var(--wp--preset--color--primary));
	color: var(--c-button-text-dark, var(--wp--preset--color--base));
}
html[data-color-scheme="dark"] .compendion-podcast-front-page .compendion-local-route-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
	border-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
}
html[data-color-scheme="dark"] .compendion-podcast-front-page .compendion-local-route-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
html[data-color-scheme="dark"] .compendion-podcast-front-page .compendion-local-route-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
	color: var(--c-button-text-dark, var(--wp--preset--color--base));
	border-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
}

/* ---------------------------------------------------------------------------
 * Dachmarken-Startseite (.compendion-home-master) – Button-Sichtbarkeit gegen base.
 *
 * Auf der Dachmarke ist `primary` == `base` (#F5D80E gelb). Jeder primary-
 * gefuellte Button OHNE Rand verschwindet damit (gelb auf gelb) – betrifft den
 * Hero-CTA „Podcasts entdecken" ebenso wie die neuen Sektions-CTAs. Die hand-
 * gebauten `compendion/local-button`-Outlines laden zudem keine Core-
 * `is-style-outline`-CSS, fallen also auf `elements.button` (bg=primary) ohne
 * Rand zurueck. Fix: dieselbe WCAG-CTA-Token-Loesung wie Abonnieren-Button /
 * Sub-Site-Hero (sichtbar ≥3:1 gegen base, programmatisch in site-palette.php),
 * hier auf alle wp-block-buttons der Master-Startseite gezogen. Auf der Master-
 * Startseite gibt es genau diese 5 wp-block-buttons (Hero ×2 + 3 Sektions-CTAs),
 * keine in Cards – der breite Selektor ist also praezise.
 * ------------------------------------------------------------------------- */
.compendion-home-master .wp-block-button__link {
	cursor: pointer;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

/* Gefuellt (z. B. Hero „Podcasts entdecken"): sichtbare CTA-Fuellung. */
.compendion-home-master .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--c-button-bg, var(--wp--preset--color--primary));
	color: var(--c-button-text, var(--wp--preset--color--base));
	border-color: transparent;
}
.compendion-home-master .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.compendion-home-master .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	filter: brightness(0.9);
}

/* Outline (z. B. „Zu allen Episoden", „Unterstützen"): Rand sichtbar, Hover fuellt. */
.compendion-home-master .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--c-button-bg, var(--wp--preset--color--contrast));
	color: var(--c-button-bg, var(--wp--preset--color--contrast));
}
.compendion-home-master .wp-block-button.is-style-outline .wp-block-button__link:hover,
.compendion-home-master .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--c-button-bg, var(--wp--preset--color--contrast));
	color: var(--c-button-text, var(--wp--preset--color--base));
	border-color: var(--c-button-bg, var(--wp--preset--color--contrast));
}

/* Dark Mode: CTA-Dark-Tokens (System-Pref + manueller Toggle). */
@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .compendion-home-master .wp-block-button:not(.is-style-outline) .wp-block-button__link {
		background-color: var(--c-button-bg-dark, var(--wp--preset--color--primary));
		color: var(--c-button-text-dark, var(--wp--preset--color--base));
	}
	html:not([data-color-scheme="light"]) .compendion-home-master .wp-block-button.is-style-outline .wp-block-button__link {
		color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
		border-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
	}
	html:not([data-color-scheme="light"]) .compendion-home-master .wp-block-button.is-style-outline .wp-block-button__link:hover,
	html:not([data-color-scheme="light"]) .compendion-home-master .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
		background-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
		color: var(--c-button-text-dark, var(--wp--preset--color--base));
		border-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
	}
}
html[data-color-scheme="dark"] .compendion-home-master .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--c-button-bg-dark, var(--wp--preset--color--primary));
	color: var(--c-button-text-dark, var(--wp--preset--color--base));
}
html[data-color-scheme="dark"] .compendion-home-master .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
	border-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
}
html[data-color-scheme="dark"] .compendion-home-master .wp-block-button.is-style-outline .wp-block-button__link:hover,
html[data-color-scheme="dark"] .compendion-home-master .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
	color: var(--c-button-text-dark, var(--wp--preset--color--base));
	border-color: var(--c-button-bg-dark, var(--wp--preset--color--contrast));
}

/* ---------------------------------------------------------------------------
 * 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);
	/* Kopf-Polster fliessend (Arne 2026-10-15, clamp statt Breakpoints): das
	   Preset Small (1rem..1.5rem) ist der Inline-Style der Vorlage, hier am
	   Header ueberschrieben: 8px am Telefon, 13px quer, 19px bei 1280px. */
	--wp--preset--spacing--30: clamp(0.5rem, 1.5vw, 1.5rem);
	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));
}

/* ---------------------------------------------------------------------------
 * Header-Layout: Logo + Name links, Navigation IMMER rechts daneben
 *
 * Die Nav soll nie unter Logo+Name rutschen, sondern bei vielen Menüpunkten
 * (z. B. DML) rechts daneben bleiben und dort INTERN mehrzeilig umbrechen.
 *
 * Dafür drei Dinge:
 *  1. Äußere Header-Gruppe auf `nowrap` – sonst kippt die ganze Nav als Block
 *     auf eine eigene Zeile unter den Logo-Block (WP setzt sie per Pattern auf
 *     flex-wrap:wrap).
 *  2. Nav darf wachsen + schrumpfen (`flex:1`, `min-width:0` über die
 *     WP-Zwischencontainer) → sie nimmt den Platz rechts neben dem Logo ein.
 *  3. Die Item-Liste bricht intern um (`flex-wrap:wrap`) und bleibt rechts-
 *     bündig (`justify-content:flex-end`). Nur im Desktop-Inline-Modus; das
 *     mobile Overlay (.is-menu-open) behält sein gestapeltes Layout.
 * ------------------------------------------------------------------------- */

.compendion-site-header .alignwide.is-content-justification-space-between {
	flex-wrap: nowrap;
}

.compendion-site-header .alignwide > .compendion-primary-nav {
	flex: 1 1 auto;
}

.compendion-site-header .alignwide > .compendion-primary-nav,
.compendion-site-header .compendion-primary-nav .wp-block-navigation,
.compendion-site-header .compendion-primary-nav .wp-block-navigation__responsive-container,
.compendion-site-header .compendion-primary-nav .wp-block-navigation__responsive-container-content {
	min-width: 0;
}

.compendion-site-header .compendion-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	flex-wrap: wrap;
	justify-content: flex-end;
	/* Bricht die Nav um, bleibt der Zeilenabstand knapp (Arne 2026-10-15:
	   der Block-Gap von 2em als Reihenabstand war unaesthetisch). */
	row-gap: 0.35rem;
}

/* Logo+Name-Block schrumpft nicht → der Site-Titel bleibt einzeilig (statt
   mehrzeilig neben der Nav, was komisch aussieht); die Nav absorbiert die
   Enge. Nur ab dem Nav-Inline-Breakpoint (600px) – darunter (Hamburger) darf
   der Block schrumpfen, damit lange Titel umbrechen statt zu überlaufen. */
@media (min-width: 600px) {
	.compendion-site-header .alignwide.is-content-justification-space-between > .wp-block-group {
		flex-shrink: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Nav-Icons (includes/network/nav-icons.php)
 *
 * Inline-SVG vor jedem Menü-Label. Icon-Größe em-basiert → skaliert mit der
 * Schriftgröße (Desktop-Nav wie Mobile-Overlay). flex-shrink:0, damit das
 * Icon auf kleinen Screens nicht zusammengedrückt wird.
 * ------------------------------------------------------------------------- */

.compendion-site-header .wp-block-navigation-item__content {
	align-items: center;
	column-gap: 0.45em;
	display: inline-flex;
}

.compendion-nav-icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.compendion-nav-icon svg {
	height: 1.05em;
	width: 1.05em;
}

/* Suche-Eintrag (Lupe, includes/network/nav-icons.php, seit 2026-08-28):
 * Icon + Label „Suche" in Desktop-Nav UND Mobil-Overlay (Arne 2026-08-28:
 * icon-only war zu unauffaellig) — keine Sonderbehandlung mehr noetig,
 * das Label rendert wie bei jedem anderen Menuepunkt. Farbe/Hover/Focus
 * erbt das Icon per `currentColor` von der bestehenden Header-Link-Regel. */

/* ---------------------------------------------------------------------------
 * Breadcrumb-Leiste (includes/network/breadcrumbs.php)
 *
 * Schmale Hierarchie-Zeile in der dunklen Header-Fläche, unter der Nav.
 * Bricht bei Überbreite zweizeilig um (flex-wrap), kein horizontales Scrollen.
 * Erbt die Header-Textfarbe; Separator per CSS-`::before`, kein Extra-Listenelement.
 * ------------------------------------------------------------------------- */

.compendion-breadcrumbs {
	font-size: 0.8rem;
	margin-top: 0.6rem;
}

.compendion-breadcrumbs ol {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.4em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.compendion-breadcrumbs li {
	align-items: center;
	display: inline-flex;
}

.compendion-breadcrumbs li + li::before {
	content: "\203A"; /* › */
	margin-right: 0.4em;
	opacity: 0.55;
}

.compendion-breadcrumbs a {
	color: color-mix(in srgb, var(--compendion-header-text, var(--wp--preset--color--base)) 72%, transparent);
	text-decoration: none;
}

.compendion-breadcrumbs a:hover,
.compendion-breadcrumbs a:focus-visible {
	color: var(--compendion-header-text, var(--wp--preset--color--base));
	text-decoration: underline;
}

.compendion-breadcrumbs [aria-current="page"] {
	color: var(--compendion-header-text, var(--wp--preset--color--base));
	font-weight: 700;
}

/* Icons (Haus vor compendion.net, Mikrofon vor dem Show-Namen) sitzen inline
   vor dem Text – Link/Spitze daher als inline-flex mit kleinem Gap. */
.compendion-breadcrumbs a,
.compendion-breadcrumbs [aria-current="page"] {
	align-items: center;
	display: inline-flex;
	gap: 0.3em;
}

.compendion-breadcrumbs-icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.compendion-breadcrumbs-icon svg {
	height: 0.95em;
	width: 0.95em;
}

.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: var(--c-on-surface-muted);
	font-size: 0.95rem;
	line-height: 1.5;
	overflow: visible;
	position: relative;
	text-align: center;
}

.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;
}

/* ---------------------------------------------------------------------------
 * Anklickbare Dreiecke – Hit-Button + Hover-Glow (Header- UND Footer-Dreieck)
 *
 * `.compendion-triangle-hit` wird per JS (compendion-scroll-top.js) in Header
 * und Footer injiziert und liegt transparent und deckungsgleich über dem
 * jeweiligen Pseudo-Element-Dreieck. Geometrie = exakt die des `::after`/
 * `::before` (gleiches --compendion-triangle-h, gleiche left/top/transform).
 * Die Klick-/Hover-Fläche ist ein inline-SVG-`<polygon>` in der Dreieckform:
 * die Button-Box trägt `pointer-events:none`, nur das Polygon
 * (`pointer-events:fill`) fängt Klicks. Grund: WebKit/Safari begrenzt
 * `clip-path` NICHT zuverlässig aufs Hit-Testing (bugs.webkit.org #152548) →
 * früher blieb dort die volle Rechteck-Box klickbar (Fläche „zu tief").
 * SVG-Hit-Testing ist in allen Browsern formgenau.
 *
 * Glow an beiden Dreiecken (Header ▼ + Footer ▲), nur im Hover/Fokus (per
 * :has()): ein sanft anschwellender Glow-Puls in der Signaturfarbe
 * --wp--preset--color--glow. Bewusst KEINE Palettenfarbe – auf der Dachmarke ist
 * primary ≈ base (gelb) und verschwände im Hintergrund.
 * ------------------------------------------------------------------------- */

.compendion-triangle-hit {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: calc(2 * var(--compendion-triangle-h));
	height: var(--compendion-triangle-h);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
	/* Box selbst fängt KEINE Klicks – nur das SVG-Polygon (s. u.). So bleiben
	   die Ecken außerhalb der Dreieckform durchlässig, auch in Safari. */
	pointer-events: none;
}

.compendion-triangle-hit svg {
	display: block;
	height: 100%;
	width: 100%;
	pointer-events: none;
}

.compendion-triangle-hit polygon {
	cursor: pointer;
	fill: transparent;
	pointer-events: fill;
}

/* Header-Dreieck ▼ (zeigt nach unten) – Button sitzt unter der Header-Kante.
 *
 * `margin-block: 0` neutralisiert den WP-Block-Gap: Der per JS injizierte Button
 * ist ein echtes Flow-Kind des `is-layout-constrained`-Headers, und WPs Inline-
 * Global-Style `:root :where(.is-layout-constrained) > * { margin-block-start: <block-gap> }`
 * (Spezifität 0,1,0, lädt NACH dieser Datei) schob den Button sonst um eine
 * block-gap-Höhe (~21.6px) nach unten → Klickfläche tiefer als das sichtbare
 * Dreieck. Die Eltern-Klasse hier hebt die Spezifität auf 0,2,0 und gewinnt
 * unabhängig von der Quell-Reihenfolge. Gilt für ALLE Sites (constrained-Layout
 * ist netzweit), nicht nur Sub-Sites. */
.compendion-site-header .compendion-triangle-hit {
	margin-block: 0;
	top: calc(100% - 1px);
}

/* Footer-Dreieck ▲ (zeigt nach oben) – Button sitzt im Gap über dem Footer.
 * `margin-block: 0` aus demselben Grund wie am Header (WP-Block-Gap, s. o.). */
.compendion-site-footer .compendion-triangle-hit {
	margin-block: 0;
	top: calc(-1 * var(--compendion-triangle-h) + 1px);
}

/* Dreieck-Hover-Glow nutzt das Paletten-Token `--wp--preset--color--glow`
 * (Slug `glow`, in theme.json registriert; pro Site in
 * includes/palette/site-palette.php als Komplementärfarbe zur `primary`
 * emittiert – vivide L/C, damit es auf jeder Site steht, auch auf der gelben
 * Dachmarke). Fallback #7c3aed greift nur, falls eine Site das Token nicht
 * setzt. */

/* Glow-Puls (filter-basiert): sanft beginnend – startet bei 0% gedimmt (--cgp-lo)
 * und schwillt zum Peak bei 50% (--cgp-hi + --cgp-core), kein „Knall" beim
 * Hover-Start. Größen pro Element via --cgp-hi/core/lo, Farbe via --cgp-color. */
@keyframes compendion-glow-pulse {
	0%,
	100% {
		filter: drop-shadow(0 0 var(--cgp-lo, 4px) var(--cgp-color, var(--wp--preset--color--glow, #7c3aed)));
	}
	50% {
		filter:
			drop-shadow(0 0 var(--cgp-hi, 14px) var(--cgp-color, var(--wp--preset--color--glow, #7c3aed)))
			drop-shadow(0 0 var(--cgp-core, 5px) var(--cgp-color, var(--wp--preset--color--glow, #7c3aed)));
	}
}

/* Glow-Opacity-Puls (compositor-glatt): NUR opacity wird animiert → läuft auf
 * der GPU, kein per-Frame-Re-Raster (anders als box-shadow-/filter-Animation).
 * Satt: immer klar sichtbar (Tief 0.45) → pulst zur vollen Sättigung (Peak 1.0).
 * `-pulse` (kräftig) für den Profil-Avatar, `-soft` (dezent) für die
 * Mitwirkenden-Card. Muss identisch zur Definition in compendion-person-
 * profile.css bleiben (gleicher Keyframe-Name, sonst Divergenz). */
@keyframes compendion-glow-opacity-pulse {
	0%,
	100% {
		opacity: 0.45;
	}
	50% {
		opacity: 1;
	}
}

@keyframes compendion-glow-opacity-pulse-soft {
	0%,
	100% {
		opacity: 0.06;
	}
	50% {
		opacity: 0.4;
	}
}

/* Weiches Ein- und Ausblenden des Glows an der Hover-Grenze. */
.compendion-site-header::after,
.compendion-site-footer::before {
	transition: filter 0.3s ease;
}

.compendion-site-header:has(.compendion-triangle-hit polygon:hover)::after,
.compendion-site-header:has(.compendion-triangle-hit:focus-visible)::after,
.compendion-site-footer:has(.compendion-triangle-hit polygon:hover)::before,
.compendion-site-footer:has(.compendion-triangle-hit:focus-visible)::before {
	--cgp-color: var(--wp--preset--color--glow, #7c3aed);
	--cgp-hi: 16px;
	--cgp-core: 5px;
	--cgp-lo: 4px;
	animation: compendion-glow-pulse 2.4s ease-in-out infinite;
}

/* Reduced Motion: kein Puls – statischer Glow im Hover. */
@media (prefers-reduced-motion: reduce) {
	.compendion-site-header:has(.compendion-triangle-hit polygon:hover)::after,
	.compendion-site-header:has(.compendion-triangle-hit:focus-visible)::after,
	.compendion-site-footer:has(.compendion-triangle-hit polygon:hover)::before,
	.compendion-site-footer:has(.compendion-triangle-hit:focus-visible)::before {
		animation: none;
		filter: drop-shadow(0 0 13px var(--wp--preset--color--glow, #7c3aed));
	}
}

.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 {
	/* Basisregel wird praktisch immer von der spezifischeren Header-Regel
	 * (.compendion-site-header .compendion-network-kicker, s.o.) ueberschrieben –
	 * der Kicker lebt ausschliesslich im Header-Pattern. Trotzdem auf ein
	 * garantiertes 4,5:1-Token gehoben (Defense-in-Depth/Audit), Seiten-Grund
	 * (base) als konservative Annahme fuer den Fall ohne Header-Kontext. */
	color: var(--c-on-base-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));
}

/*
 * Brand-Block (Ueberschrift + Social-Links): eigene Zeile pro Element.
 * Die von WP generierte Layout-Klasse der Gruppe emittiert nur
 * flex-wrap/justify/align, aber KEIN flex-direction (obwohl das Markup
 * "flexDirection":"column" vorgibt) -> Default `row` liess die Social-Links
 * neben "Gute Podcasts" stehen und schob die Ueberschrift zur Seite. Der
 * Zwei-Klassen-Selektor (0,2,0) schlaegt die generierte .wp-container-*-Regel
 * (0,1,0) unabhaengig von der Quellreihenfolge.
 */
.compendion-site-footer .compendion-footer-brand {
	flex-direction: column;
}

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

.compendion-site-footer .compendion-footer-links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.1rem 1.25rem;
	justify-content: center;
	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;
}

/* Amazon-Partner-Hinweis: optisch eine Zeile wie „Von Arne persönlich …“
   darunter (Arne 2026-10-19: wirkte groesser, weil er dreizeilig umbrach). */
.compendion-footer-affiliate {
	margin: 0.75rem 0 0;
	color: var(--c-on-surface-muted);
	font-size: 0.85rem;
}

.compendion-footer-made-by {
	color: var(--c-on-surface-muted);
	font-size: 0.85rem;
}

/*
 * Footer-Social (Block compendion/footer-social) – Outline-Pillen mit Icon +
 * Label. Outline-Muster (Design-Regel 3): 2px currentColor-Rand, transparenter
 * BG, fuellt sich im Hover. Touch-Target >= 44px (min-height 2.75rem). Rendert
 * nur, wenn Links gepflegt sind, daher kein Empty-State noetig.
 */
.compendion-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-left: 0;
}

.compendion-footer-social li {
	margin: 0;
}

/* Dezente Text-Links statt Outline-Pillen: kein Rahmen, kein button-artiger
 * BG, keine Pill-Form. Icon + Label bleiben inline (gap), Touch-Target via
 * min-height. Farbe, Unterstrich und Hover kommen aus der generischen
 * `.compendion-site-footer a`-Regel -> identische Optik zu den uebrigen
 * Footer-Links. */
.compendion-site-footer .compendion-footer-social__link {
	align-items: center;
	display: inline-flex;
	gap: 0.4rem;
	min-height: 2.5rem;
}

.compendion-footer-social__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.compendion-footer-social__icon svg {
	display: block;
}

.compendion-footer-social__label {
	font-size: 0.95rem;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Kanonische Button-Basis – gilt fuer generische wp:button-Bloecke im
 * Seiteninhalt. Gescopte CTAs (Abonnieren, home-master, Sub-Site-Hero,
 * Podcast-Card) setzen Farbe/Form mit hoeherer bzw. spaeterer Spezifitaet
 * selbst und bleiben unberuehrt – diese Basis greift dort, wo sonst der
 * TT5-/theme.json-Default uebrig bliebe.
 *
 * Zwei Garantien, damit kein Content-Button aus der Reihe faellt:
 *  1. Form: 999px-Pille, kanonische CTA-Schriftgroesse 1.05rem (netzweit gleich,
 *     identisch zu den Standalone-CTAs thanks/support/subscribe; Card-Actions
 *     bleiben mit eigener kompakter 0.85rem-Groesse bewusst ausgenommen).
 *  2. Sichtbarkeit: cta-on-base statt rohem primary – WCAG-sicher gegen base,
 *     auch wo primary == base (Dachmarke gold-auf-gold). cta-on-base faellt auf
 *     Sub-Sites mit sichtbarem primary auf genau dieses zurueck (site-palette.php),
 *     cta-on-base-text liefert den passenden Vordergrund -> identisch zu den
 *     gescopten CTAs, daher kein optischer Bruch wenn die Basis mal "durchschlaegt".
 * Kein currentColor-Ring: gefuellte Pillen bleiben rahmenlos (Design-System-Pill,
 * gleich wie die Custom-CTAs); Outline-Buttons tragen ihren echten 2px-Rand.
 * ------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	border-radius: 999px;
	font-size: 1.05rem;
}

.wp-element-button:not(:hover),
.wp-block-button__link:not(:hover) {
	color: var(--compendion-color-on-primary, var(--wp--preset--color--contrast));
}

/* Outline-Buttons: der 2px-Rand kommt ZUM theme.json-Padding (0.72/1.15rem)
 * dazu und machte sie 4px hoeher als gefuellte Buttons (Arne 2026-06-11,
 * Netzwerk-Hero). Padding um die Randstaerke kompensieren -> gefuellt und
 * outline enden auf identischer Hoehe/Breite. */
.wp-block-button.is-style-outline .wp-block-button__link {
	padding: calc(0.72rem - 2px) calc(1.15rem - 2px);
}

/* Gefuellte wp-block-buttons palette-sicher fuellen. Gescopte Filled-CTAs mit
 * abweichender Optik (z. B. Podcast-Card = contrast) stehen spaeter in der Datei
 * und ueberschreiben bei gleicher Spezifitaet per Quell-Reihenfolge. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--c-button-bg, var(--wp--preset--color--primary));
	color: var(--c-button-text, var(--wp--preset--color--base));
}

/* Hover-Background = Gegenpol-Farbe (Arne-Fix 2026-07-02): dasselbe Token, das
 * schon fuer den Cover-Glow und den Dreieck-Notch-Hover-Glow genutzt wird
 * (`--wp--preset--color--glow`, komplementaerer Farbton zu primary, s.
 * compendion-components.css oben "Dreieck-Hover-Glow"). `--wp--preset--color--
 * contrast` als Text-Token, weil fuer `glow` kein dediziertes on-glow-Kontrast-
 * Paar existiert (glow ist reine Deko-/Akzentfarbe, kein WCAG-geprueftes Pärchen
 * wie primary/on-primary) — ungeprueft, Arne bitte live gegenchecken. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--glow, var(--c-button-bg, var(--wp--preset--color--primary)));
	color: var(--wp--preset--color--contrast);
	filter: brightness(0.95);
}

/* Hinweis Dark Mode: cta-on-base ist hier bewusst ohne -dark-Variante gesetzt.
 * Die Regel ist media-neutral und greift in allen Schemata; eine eigene
 * html[data-color-scheme="dark"]-Generikregel haette hoehere Spezifitaet als die
 * gescopten Plain-Selektoren (Podcast-Card) und deren bewusste Optik im Dark
 * Mode ueberschrieben. Gescopte CTAs bringen ihre -dark-Tokens selbst mit. */

.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);
	border-radius: 1rem;
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	overflow: hidden;
	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;
}

/* Projekt-Karte (Dachmarke /projekte/, post_content via className).
 * Bewusst eigene schlanke Klasse statt hero-/podcast-/support-card:
 * die bringen Glow/Hover/Accent-Border mit, die hier nicht passen. */
.compendion-projekt-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	overflow: hidden;
	padding: clamp(1.25rem, 4vw, 2rem);
	/* Dark-Mode faerbt Links/Headings ueber `--c-on-base-accent` (dark.css,
	 * Link-Regel mit 5x:not()-Kette, 0,6,2 — per Spezifitaet nicht sauber
	 * schlagbar). Re-Base im Karten-Scope: Der "Grund" ist hier die
	 * surface-Flaeche, also loest das on-base-Akzent-Token auf on-surface
	 * auf. Ruhe- UND Hover-Regel (color-mix) folgen automatisch. */
	--c-on-base-accent: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
}

.compendion-projekt-card :where(p, li, em) {
	color: inherit;
}

/* Headings: die Dark-Gold-Regel (dark.css, `html:not(...) :where(h1,h2,h3)`,
 * 0,1,1) ist fuer den base-Grund ausgelegt; auf der surface-Flaeche der
 * Dachmarke faellt sie auf 2,5:1. `:is()` hebt auf 0,2,0 und schlaegt sie
 * unabhaengig von der Lade-Reihenfolge (gleiche Loesung wie
 * .compendion-support-card__title in compendion-support.css). */
.compendion-projekt-card :is(h2, h3, h4, .wp-block-heading) {
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
}

/* Links erben die Kartenfarbe und zeigen ihre Affordanz per Unterstreichung
 * (gleiches Muster wie .compendion-site-footer a). */
.compendion-projekt-card a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 0.18em;
	transition: text-decoration-color 150ms ease;
}

.compendion-projekt-card a:hover,
.compendion-projekt-card a:focus-visible {
	text-decoration-color: currentColor;
}

/* In wp:columns fuellt die Karte die (per Flex-stretch gleiche) Spaltenhoehe.
 * height statt min-height: der WebKit-Loop aus
 * feedback_support_card_min_height_100 bleibt damit aussen vor. */
.wp-block-column > .compendion-projekt-card {
	height: 100%;
}

/* Cover-Rahmen – geteilt (DRY) von den Sub-Site-Podcast-Heros UND dem
   Dachmarken-Hero (compendion.net, patterns/hero-compendion.php nutzt dieselben
   Klassen). Frame-Radius 2rem, Bild-Radius 1.3rem (konzentrisch zum schmalen
   Padding). Änderungen wirken auf beide. */
.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: 2rem;
	/* Glow als filter:drop-shadow statt box-shadow: iOS Safari clippt den outset-
	   box-shadow am gerundeten Rahmen, drop-shadow nutzt einen anderen Paint-Pfad
	   (gleiche Technik wie die Dreieck-/Avatar-Glow-Keyframes). Werte = erste
	   Steigerungsstufe aus 1695160 (vor dem 2x-Verdoppeln, das zu krass war, Arne
	   2026-06-10): Glow `0 0 2.5rem` bei 48% + dezente Tiefe. drop-shadow kennt
	   keinen Spread -> der urspruengliche 0.25rem-Spread wandert in den Blur
	   (2.5 + 0.25 = 2.75rem). Farbe = Palette-Token (podcast-accent = primary,
	   Fallback glow). Geteilt mit dem Dachmarken-Hero (DRY). */
	filter:
		drop-shadow(0 0 2.75rem color-mix(in srgb, var(--compendion-podcast-accent, var(--wp--preset--color--glow, currentColor)) 48%, transparent))
		drop-shadow(0 1rem 2.5rem color-mix(in srgb, var(--compendion-podcast-accent, currentColor) 16%, transparent));
	/* Platzhalter-Text/Icon sitzt auf dem expliziten surface-Hintergrund oben
	 * (background: var(--wp--preset--color--surface)) → on-surface-muted statt
	 * rohem muted (nur 3:1 garantiert). */
	color: var(--c-on-surface-muted);
	display: flex;
	justify-content: center;
	/* Höhe IMMER aus aspect-ratio:1 (oben) ableiten → quadratisch bei jeder
	   Breite. KEIN min-height/height, das den Rahmen bei schmaler clamp-Breite
	   hochkant zwingt: ein min-height:12rem (192px) war größer als die
	   clamp-Floor-Breite (10rem/160px) und machte den Rahmen auf kleinen
	   Screens (≤~390px) zu Portrait. height:auto explizit, damit nichts die
	   aspect-ratio-Höhe überschreibt. */
	height: auto;
	/* Cover-Rahmen nie breiter als das Cover + schmaler Rand, in der Spalte
	   zentriert. Ohne Cap wuchs der quadratische aspect-ratio-Rahmen in
	   gestackten/breiten Spalten (Tablet/mittlere Fenster) zu einer riesigen
	   Box mit verlorenem Cover in der Mitte.
	   Größe responsiv per clamp, OHNE Sprung am WP-Spalten-Breakpoint (781px):
	   Der Hero liegt in einer 32%-Spalte, die unter 782px auf 100% stackt. Ein
	   zu steiler clamp (früher 45vw) erreichte den 22rem-Cap genau am Breakpoint
	   → oberhalb band die 32%-Spalte (~230px), unterhalb sprang das Cover auf
	   ~351px (schmalerer Viewport plötzlich GRÖSSER). Lösung: Steigung an die
	   Spalten-Proportion angeglichen (29vw ≈ 32% der wide-Content-Breite minus
	   Root-Padding) → der clamp liegt durchweg knapp unter der 32%-Spalte, die
	   Spalten-Diskontinuität bindet nie, die Kurve ist monoton (kein Punkt, an
	   dem ein schmalerer Viewport ein größeres Cover zeigt). Floor 10rem (160px,
	   ≤~552px), Desktop-Cap 22rem (352px, ab ~1257px). `min(100%, …)` bleibt als
	   Spaltenguard gegen Overflow. Greift an der Basisregel → der
	   Master-Hero-Override (.compendion-home-master …, 13rem, Spezifität 0,3,0)
	   schlägt sie und bleibt unverändert. */
	margin-inline: auto;
	max-width: min(100%, clamp(10rem, 29vw, 22rem));
}

/* Schmaler, mit-skalierender Rahmen statt des fetten globalen Paddings
   (has-global-padding = spacing-40 = 24–40px). Ohne das wurde das Cover auf
   engen Spalten vom dicken Rahmen erdrückt (kleines Bild, fetter Rand). So
   schrumpft das Bild zusammen mit dem Rahmen. Der `.has-global-padding`-
   Selektor (höhere Spezifität) schlägt das WP-Global-Padding sicher. */
.compendion-podcast-cover-placeholder,
.compendion-podcast-cover-placeholder.has-global-padding {
	padding: clamp(0.4rem, 4%, 0.8rem);
}

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

.compendion-podcast-cover {
	margin-inline: auto;
	/* Radius am Wrapper, NICHT nur am img: WP setzt global
	   `.wp-block-site-logo img{border-radius:inherit}` (Spezifität 0,1,1) und
	   überschreibt damit eine direkte img-Regel → ohne Wrapper-Radius erbt das
	   Bild 0 = scharfe Ecken (auf allen Covern). Mit Radius hier greift die
	   inherit-Kette (rundet `<a>` + `img`), sub-site wie Dachmarke. */
	border-radius: 1.3rem;
}

.compendion-podcast-cover :where(img) {
	aspect-ratio: 1;
	border-radius: 1.3rem;
	/* Kein box-shadow am Bild – der Glow sitzt jetzt am Rahmen
	   (.compendion-podcast-cover-placeholder). */
	height: auto;
	/* contain statt cover (Arne-Regel: nie beschneiden). Cover sind quadratisch
	   → füllt ohnehin; ein nicht-quadratisches Cover wird ganz gezeigt statt
	   gecroppt. */
	object-fit: contain;
	width: min(100%, 20rem);
}

.compendion-featured-episode-card {
	padding: 1rem;
}

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

/* ---------------------------------------------------------------------------
 * /ueber-uns/ – First-Episode-Card kompakt halten: Player schnell sichtbar.
 * "Die erste Folge" wird zum Kicker, der Episodentitel tritt zurueck, der
 * Abstand zum Hero schrumpft. Markup: compendion_get_episode_player_markup()
 * in includes/podcast/podcast-shortcodes.php, Template page-ueber-uns.html.
 * ------------------------------------------------------------------------- */
.compendion-about-page > .compendion-about-first-episode {
	margin-block-start: var(--wp--preset--spacing--30) !important;
}

.compendion-about-first-episode .compendion-featured-episode-card__intro {
	margin-block: 0 0.2rem;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* .compendion-about-first-episode traegt kein eigenes background – sitzt
	 * auf dem Seitengrund (base), analog zur Begruendung bei .compendion-about-
	 * intro weiter unten. */
	color: var(--c-on-base-muted);
}

.compendion-about-first-episode > time {
	display: block;
	font-size: 0.85rem;
	/* Sitzt wie der __intro-Kicker direkt darueber auf Seiten-Grund (base). */
	color: var(--c-on-base-muted);
}

.compendion-about-first-episode > h3.wp-block-heading {
	margin-block: 0.15rem 0;
	font-size: 1.3rem !important;
	line-height: 1.25;
}

.compendion-about-first-episode > h3.wp-block-heading a {
	text-decoration: none;
}

/* Intro-/CTA-Text über der ersten Folge (page-ueber-uns.html). Sitzt auf dem
 * Seitengrund (base) → on-base-muted (≥4,5:1, hell auf dunkel / dunkel auf hell);
 * NIE rohes muted/contrast, das auf dunkler base kippt. */
.compendion-about-intro {
	color: var(--c-on-base-muted);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * /abonnieren/ – Hero kompakt: kleinere Ueberschrift, Abonnieren-Button direkt
 * darunter und prominent. Template page-abonnieren.html; sichtbarer Button =
 * theme-eigener wp-block-button aus compendion/podcast-subscribe-button.
 * ------------------------------------------------------------------------- */
.compendion-subscribe-page .compendion-local-route-hero > h1 {
	margin-block: 0;
	font-size: clamp(1.9rem, 5vw, 2.6rem) !important;
	line-height: 1.1;
}

.compendion-subscribe-page .compendion-local-route-hero > .compendion-subscribe {
	display: flex;
	margin-block-start: 0.85rem;
}

.compendion-subscribe-page .compendion-subscribe .wp-block-button__link {
	display: flex;
	width: min(100%, 24rem);
	justify-content: center;
	min-height: 3.5rem;
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 700;
}

/* Erklaerender Einleitungstext ueber den Abo-Buttons (Block
 * compendion/subscribe-intro): lesbarer Fliesstext, dezent gedaempft, nicht zu
 * gross – der Fokus bleibt auf dem Button darunter. Der Hero sitzt direkt auf
 * `base` (keine Surface-Karte) → Ink MUSS aus der on-base-Familie kommen, sonst
 * dunkler on-surface-Ton auf dunkler base (WGJC navy, GHU rot) = unlesbar. */
.compendion-subscribe-page .compendion-subscribe-intro {
	max-inline-size: 42rem;
	margin-block-start: 1.1rem;
	color: var(--c-on-base-muted);
	font-size: 1.02rem;
	line-height: 1.6;
}

.compendion-subscribe-page .compendion-subscribe-intro p {
	margin-block: 0 0.8rem;
}

.compendion-subscribe-page .compendion-subscribe-intro p:last-child {
	margin-block-end: 0;
}

/* „Das abonnierst du" (Block compendion/subscribe-show): Cover + Podcast-Name
 * kompakt direkt ueber dem Button, kein zweiter Hero. */
.compendion-subscribe-page .compendion-subscribe-show {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-block-start: 1.4rem;
}

.compendion-subscribe-page .compendion-subscribe-show__cover {
	flex: 0 0 auto;
	inline-size: 4rem;
	block-size: 4rem;
}

.compendion-subscribe-page .compendion-subscribe-show__cover img {
	inline-size: 100%;
	block-size: 100%;
	border-radius: 0.375rem;
	object-fit: contain;
}

.compendion-subscribe-page .compendion-subscribe-show__title {
	margin-block: 0;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
	/* on-base statt on-surface: der Titel steht auf `base`, nicht auf einer
	 * Surface-Karte. on-surface (contrast-color gegen helle Surface = schwarz)
	 * war auf dunkler base unlesbar (WGJC 1.47:1). */
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
}


.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: 999px;
	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, transparent 96%, var(--wp--preset--color--contrast));
}

.compendion-person__avatar {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	/* Personen-Avatar: cover (fuellt den Kreis). no-crop gilt nur fuer Cover. */
	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 {
	/* .compendion-person hat kein solides background (nur 4%-Tint via color-mix
	 * auf transparent) – die Visitenkarte sitzt effektiv auf dem umgebenden
	 * Editorial-Content, also Seiten-Grund (base). */
	color: var(--c-on-base-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 {
	/* Feste Spurbreite als Flex-Basis (frueher die Grid-Spur). `0 0` = kein
	 * Wachsen/Schrumpfen, damit alle Cards gleich breit bleiben und die Reihe
	 * sauber umbricht statt zu strecken. Mobile (<480px) ueberschreibt auf
	 * 100% (Einspalter, horizontales Card-Layout). Breite ueber
	 * `--cmp-mitwirkende-card-w` uebersteuerbar (v3-Startseite: Host-Karten
	 * ~12% groesser als Gast-Karten) – Default = die bisherige Spurbreite. */
	flex: 0 0 var(--cmp-mitwirkende-card-w, clamp(180px, 18vw, 220px));
	background: color-mix(in srgb, transparent 92%, var(--wp--preset--color--contrast) 8%);
	border: 1px solid var(--c-card-border);
	border-radius: 1rem;
	/* Desktop: overflow sichtbar, damit der Außen-Glow (::after) nicht geclippt
	 * wird. Die Avatar-Oberkante wird stattdessen am Avatar-Wrap selbst gerundet
	 * (border-radius unten). Mobile (<480px, Querformat-Avatar) dreht overflow
	 * wieder auf hidden – dort rundet das Clipping die Avatar-Ecken, und Touch
	 * hat ohnehin kein Hover. */
	overflow: visible;
	position: relative;
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

/* Glow-Puls als Außen-Halo auf einem Pseudo, NUR opacity animiert (compositor-
 * glatt, kein box-shadow-Re-Raster pro Frame). Farbe = Paletten-Token `accent`
 * (Arne-Wunsch: auf Matrix/MWM grün), aber 30 % Richtung `contrast` gemischt,
 * damit der Glow gegen den Body kontrastiert: `contrast` ist immer das Gegenteil
 * des Hintergrunds → auf MWM (schwarzer Body, accent dunkelgrün #346E21) hellt
 * es auf zu hellem Grün (#719A64, glüht auf Schwarz in BEIDEN Modi), auf der
 * hellen Dachmarke dunkelt es ab (sichtbar auf Hell). accent statt primary, weil
 * primary auf der Dachmarke gelb=Hintergrund wäre. */
.compendion-mitwirkende-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 18px 1px color-mix(in srgb, var(--wp--preset--color--accent) 70%, var(--wp--preset--color--contrast) 30%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 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);
	/* Über Nachbarkarten heben, damit der Außen-Glow nicht verdeckt wird. */
	z-index: 1;
}

/* Glow erscheint nur im Hover/Fokus; sanfter opacity-Puls (9 Zyklen/min). */
.compendion-mitwirkende-card:hover::after,
.compendion-mitwirkende-card:focus-within::after {
	/* Gedämpfter Peak (0.4 statt 0.85) – Card-Schimmer soll dezent „atmen". */
	animation: compendion-glow-opacity-pulse-soft 6.667s ease-in-out infinite;
}

/* Glow-Puls für Content- + Podcast-Cover-Cards. WICHTIG: Content-Card-Glow auf
 * den sichtbaren `__link` (border-radius 0.5rem) – `.compendion-content-card`
 * ist nur der gestreckte Flex/Grid-Container OHNE Rundung; ein Glow dort hätte
 * eckige Ecken + falsche Höhe (Grid-Stretch). Podcast-Cover-Cards sind selbst
 * die sichtbare Karte. Farbe accent Richtung contrast → grün auf Matrix,
 * sichtbar überall (siehe Mitwirkenden-Card oben). */
.compendion-content-card__link,
.compendion-podcast-card {
	position: relative;
}

.compendion-podcast-card {
	transition: box-shadow 150ms ease, border-color 150ms ease;
}

.compendion-content-card__link::after,
.compendion-podcast-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 18px 1px color-mix(in srgb, var(--wp--preset--color--accent) 70%, var(--wp--preset--color--contrast) 30%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease;
}

/* Podcast-Cover-Cards zusätzlich liften (Content-Cards liften bereits via
 * __link translateY in compendion-content-card.css). */
.compendion-podcast-card:hover,
.compendion-podcast-card:focus-within {
	box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
	border-color: var(--wp--preset--color--contrast);
}

/* Grid-Item über Nachbarn heben, damit der Glow nicht verdeckt wird (Hover
 * propagiert vom __link auf .compendion-content-card; Grid-/Flex-Items nehmen
 * z-index ohne position an). */
.compendion-content-card:hover,
.compendion-content-card:focus-within,
.compendion-podcast-card:hover,
.compendion-podcast-card:focus-within {
	z-index: 1;
}

.compendion-content-card__link:hover::after,
.compendion-content-card__link:focus-visible::after,
.compendion-podcast-card:hover::after,
.compendion-podcast-card:focus-within::after {
	animation: compendion-glow-opacity-pulse-soft 6.667s ease-in-out infinite;
}

/* Reduced Motion: Card-Glow ohne Puls – statischer Außen-Glow + Lift. */
@media (prefers-reduced-motion: reduce) {
	.compendion-mitwirkende-card:hover::after,
	.compendion-mitwirkende-card:focus-within::after,
	.compendion-content-card__link:hover::after,
	.compendion-content-card__link:focus-visible::after,
	.compendion-podcast-card:hover::after,
	.compendion-podcast-card:focus-within::after {
		animation: none;
		opacity: 0.3;
	}
}

/*
 * Site-Primary-Akzent auf der Dachseite /podcasts/. Die Podcast-Cards tragen
 * die Primärfarbe ihrer Sub-Site inline als `--site-primary` (aus dem
 * gecachten site_data, gesetzt in compendion_podcast_card_block). Glow und
 * Hover-Border ziehen sie heran, damit jede Show in ihrer Markenfarbe leuchtet.
 * Ohne Variable – externe Cards (kein Blog) oder Sites ohne aktive Palette –
 * fällt der Wert auf den bisherigen accent/contrast-Default zurück; die übrigen
 * Card-Typen (content-card) bleiben unberührt, weil sie kein --site-primary
 * setzen. Beide Regeln stehen NACH dem accent/contrast-Default (gleiche
 * Spezifität, spätere Quelle gewinnt). */
.compendion-podcast-card::after {
	box-shadow: 0 0 18px 1px color-mix(in srgb, var(--site-primary, var(--wp--preset--color--accent)) 70%, var(--wp--preset--color--contrast) 30%);
}

.compendion-podcast-card:hover,
.compendion-podcast-card:focus-within {
	border-color: var(--site-primary, var(--wp--preset--color--contrast));
}

/*
 * 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;
	/* Avatar-Oberkante runden, da die Card jetzt overflow:visible ist (Außen-Glow).
	 * `- 1px` nistet sauber in den 1px-Border-Radius der Card. Mobile setzt das
	 * unten auf 0 zurück (dort clippt die Card via overflow:hidden). */
	border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;
	background: color-mix(in srgb, transparent 88%, var(--wp--preset--color--contrast) 12%);
}

.compendion-mitwirkende-card__avatar {
	width: 100%;
	height: 100%;
	/* Personen-Avatar: cover (fuellt die 1:1-Box). no-crop gilt nur fuer Cover. */
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.compendion-mitwirkende-card__avatar--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-on-surface-muted);
	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;
	/* Karten sitzen auf `base` (kein Surface-Panel) → on-base-muted, nicht
	 * on-surface-muted: letzteres (#555) kippt auf dunkler base (WGJC navy 1,9:1). */
	color: var(--c-on-base-muted);
	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: Flex-Wrap statt CSS-Grid. Karten haben feste Breite (clamp
 * 180-220px, als `flex-basis` an der Card), so viele pro Reihe wie passen.
 * `justify-content: center` zentriert JEDE Reihe – inklusive einer ungleich
 * gefuellten letzten Reihe. (CSS-Grid mit `auto-fit` zentriert nur die
 * Spuren als Block; die Items der letzten Teilreihe sitzen dann links in den
 * ersten Spuren statt mittig – genau das wollten wir nicht.) `align-items:
 * stretch` (Default) greift weiter: Cards einer Reihe sind gleich hoch (auf
 * die hoechste). Avatare bleiben quadratisch (aspect-ratio 1/1, full-bleed
 * an der Card-Breite), die Body-Resthoehe fuellt `flex: 1` (siehe `__body`).
 *
 * Wird ebenfalls von Master-Block und Sub-Site-Shortcode genutzt
 * – eine Wahrheit, ein Layout. Card-Breite lebt an `.compendion-mitwirkende-card`
 * (flex-basis), nicht mehr an Spur-Definitionen.
 */
.compendion-mitwirkende-overview__grid {
	display: flex;
	flex-wrap: wrap;
	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-card {
		flex-basis: 100%;
	}
}

/*
 * 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;
		/* Querformat-Avatar links: overflow:hidden klippt die Avatar-Ecken sauber
		 * an die Card-Rundung (wie zuvor). Touch hat kein Hover → der Außen-Glow
		 * fehlt hier ohnehin nicht. Der Avatar-Wrap-Radius wird unten (mit dem
		 * 10rem-Querformat-Block) ohnehin auf 0 gesetzt. */
		overflow: hidden;
	}

	.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;
}

/*
 * Gruppen-Heading ("Hosts"/"Gäste") sitzt überall in einer 720px-Spalte,
 * mittig zur Viewport-Achse, Text linksbündig – auf der gegateten Übersichts-
 * Seite (/mitwirkende/) wie im eingebetteten Shortcode (--inline, z.B.
 * /ueber-uns/). Single Source hier in der global geladenen components.css,
 * weil beide Render-Pfade dieselbe `__group`-Klasse nutzen. Vorher lebte die
 * Box nur in der gegateten compendion-mitwirkende-overview.css; dem Inline-
 * Pfad fehlte sie, sodass das Heading den `alignwide`-Wrapper sprengte. Die
 * Schriftgröße bleibt kontextabhängig (Master-Page größer als Inline).
 */
.compendion-mitwirkende-overview__group h2 {
	max-width: var(--wp--style--global--content-size, 720px);
	margin: 0 auto;
	width: 100%;
	text-align: left;
}

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

/* ---------------------------------------------------------------------------
 * 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;
}

/*
 * Mobile-Overlay-Stapelung (Arne 2026-10-10, Screenshot DML-Startseite iOS):
 * `.compendion-site-header` ist `position:relative; z-index:1` und damit ein
 * eigener Stacking-Context. Das WP-Core-Overlay (`position:fixed;
 * z-index:100000`) liegt INNERHALB dieses Contexts – nach aussen zaehlt nur
 * die 1 des Headers. Jeder spaetere Nachbar mit z-index >= 1 (Hero-Inner,
 * Scroll-Nav 100, Player-Pause, Safe-Area-Leiste 2000) schiebt sich deshalb
 * ueber das offene Menue. WP-Core setzt bei offenem Overlay `.has-modal-open`
 * auf <html>; solange hebt der Header seinen Context ueber alles andere.
 */
html.has-modal-open .compendion-site-header {
	z-index: 100000;
}

/* ---------------------------------------------------------------------------
 * 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 var(--c-page-border);
}

.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;
}

/* Hero-CTAs auf EINE Größe (= übrige wp-block-button-CTAs, theme.json-Padding
 * 0.72/1.15rem). Die echte core/button-Outline („Unterstützen") bekommt sonst
 * breiteres core-Outline-Padding als der gefüllte „Podcasts entdecken". Der
 * 4-Klassen-Selektor schlägt das core-Padding (gleiche Spezifität) per Quell-
 * Reihenfolge sicher. */
.compendion-home-master .compendion-hero-network .wp-block-buttons .wp-block-button__link {
	padding: 0.72rem 1.15rem;
}

/* „Unterstützen" als zweite, kontrastierende Farbe: Outline in `contrast`
 * (schwarz) statt gold → klar abgesetzt vom gold-gefüllten „Podcasts entdecken",
 * sekundäre Hierarchie. contrast/base sind palette-adaptiv (auch Dark Mode),
 * darum keine separaten Dark-Tokens nötig. Hover füllt. Spezifität (5 Klassen)
 * schlägt die generische `.compendion-home-master …`-cta-on-base-Outline-Regel. */
.compendion-home-master .compendion-hero-network .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}
.compendion-home-master .compendion-hero-network .wp-block-button.is-style-outline .wp-block-button__link:hover,
.compendion-home-master .compendion-hero-network .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* Master-Hero: Cover kleiner als auf den Sub-Sites (22rem) – die Dachmarke
   zeigt ein Logo, keine vollformatige Cover-Art; 352px wirkten zu groß. Plus
   Abstand Cover → Überschrift. Restlicher Stil (Rahmen/Radius/Padding) bleibt
   geteilt (DRY). */
.compendion-home-master .compendion-hero-card-master .compendion-podcast-cover-placeholder {
	margin-bottom: var(--wp--preset--spacing--30);
	max-width: min(100%, 13rem);
}

/*
 * 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);
	}
}

/* ==========================================================================
 * compendion/podcast-card Block – zweispaltig (Cover links, Body rechts)
 * `.compendion-podcast-card--info` ergänzt das bestehende `.compendion-podcast-card`
 * (Karte + Hover) um das innere Zweispalten-Layout.
 * ========================================================================== */

/* Float-Layout: Cover links gefloatet, restlicher Inhalt laeuft rechts daneben
   und darunter (umlaufend). `flow-root` enthaelt den Float (Clearfix). Die
   externe Card behaelt ihren `__body`-Flex-Block (sitzt als eigener
   Formatierungskontext neben dem Float). */
.compendion-podcast-card--info {
	display: flow-root;
}

.compendion-podcast-card__cover-wrap {
	float: left;
	width: min(160px, 34%);
	margin: 0 clamp(0.9rem, 3vw, 1.4rem) 0.6rem 0;
	line-height: 0;
}

/* Float-Layout-Abstaende nur fuer die direkten Inhaltskinder der lokalen Card
   (die externe Card kapselt ihren Inhalt in `__body` mit eigenem Flex-Gap). */
.compendion-podcast-card--info > .compendion-podcast-card__title {
	margin: 0 0 0.15rem;
}

.compendion-podcast-card--info > .compendion-podcast-card__est {
	margin: 0 0 0.5rem;
}

.compendion-podcast-card--info > .compendion-podcast-card__actions {
	margin: 0.85rem 0 0;
}

.compendion-podcast-card--info > .compendion-podcast-card__description {
	margin: 0.75rem 0 0;
}

.compendion-podcast-card__cover-img {
	aspect-ratio: 1;
	border-radius: 1rem;
	box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--compendion-podcast-accent, currentColor) 14%, transparent);
	height: auto;
	object-fit: contain;
	width: 100%;
}

/* Cover + Titel verlinken auf die Podcast-Startseite, ohne die Optik zu aendern:
   Cover-Link ist ein Block ueber dem Bild, Titel-Link erbt die Titelfarbe. */
.compendion-podcast-card__cover-link {
	display: block;
	line-height: 0;
	border-radius: 1rem;
}

.compendion-podcast-card__title a {
	color: inherit;
	text-decoration: none;
}

.compendion-podcast-card__title a:hover,
.compendion-podcast-card__title a:focus-visible {
	text-decoration: underline;
}

.compendion-podcast-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.compendion-podcast-card__title {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.1rem, 2.5vw, 1.35rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
}

/* „est. JJJJ" auf der Podcast-Card: dezenter Schriftzug direkt unter dem Titel.
   Farbe = `on-surface`-Token (von site-palette.php per `contrast-color()` gegen
   die Karten-Surface gesetzt) → garantiert sichtbar auf Light- UND Dark-Surface;
   `secondary` war auf dunkler Surface unsichtbar (#3F4348 auf dunkel). Spaeter
   in der Datei als die `color:inherit`-Regel (Zeile ~854) → gewinnt. Negatives
   Top-Margin zieht es naeher an den Titel, gegen den 0.75rem-Flex-Gap. */
.compendion-podcast-card__est {
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast, #000));
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 0.85rem;
	font-style: italic;
	letter-spacing: 0.04em;
	margin: -0.55rem 0 0;
}

/* „est. JJJJ" im Sub-Site-Hero: dekorativer Schnoerkel-Schriftzug mit
   fuehrendem Strich (`::before` erbt die Farbe via currentColor). Farbe =
   `on-base`-Token (Kontrast gegen den Seiten-/Base-Hintergrund, in beiden Modi
   sichtbar). Display-Kursiv, groesser als auf der Card. */
.compendion-established {
	align-items: center;
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast, #000));
	display: flex;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.15rem, 3vw, 1.6rem);
	font-style: italic;
	gap: 0.75rem;
	letter-spacing: 0.06em;
	margin: 0.6rem 0 0;
}

.compendion-established::before {
	background: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 1px;
	opacity: 0.5;
	width: clamp(1.5rem, 6vw, 3rem);
}

/* est.-Schriftzug: ausgeschrieben „established JJJJ" bei genug Platz, auf
   kleinen Screens (<=600px) abgekuerzt „est. JJJJ". Nur eine Variante sichtbar. */
.compendion-established__abbr {
	display: none;
}

@media (max-width: 600px) {
	.compendion-established__full {
		display: none;
	}

	.compendion-established__abbr {
		display: inline;
	}
}

/* compendion/podcast-description – lange Podlove-Show-Beschreibung im Sub-Site-
   Hero (Fliesstext, kein Hero-Styling). Lesbares Reading-Measure, zentriert
   unter dem Hero; Textfarbe erbt die normale Body-Farbe (kontrastsicher). */
.compendion-podcast-description {
	margin: clamp(1rem, 3vw, 1.75rem) auto 0;
	max-width: 65ch;
}

.compendion-podcast-description p {
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1rem;
}

.compendion-podcast-description p:last-child {
	margin-bottom: 0;
}

.compendion-podcast-card__description {
	/* Gepaartes on-surface-Token statt rohem contrast – sonst dunkel-auf-dunkel
	   auf Paletten mit dunkler Karten-Surface (Design-Regel: Text auf Surface
	   ueber on-surface, nie muted/contrast direkt). 85 % fuer dezente Abstufung. */
	color: var(--c-on-surface-muted);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

.compendion-podcast-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: auto;
}

.compendion-podcast-card__actions .wp-block-button__link,
.compendion-podcast-card__actions .wp-element-button {
	background-color: var(--wp--preset--color--contrast);
	border: none;
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	/* inline-flex + box-sizing: „Zum Podcast" (<a>) und „Abonnieren" (<button>)
	 * rendern damit pixelgleich hohe Boxen – ohne die inline-block-Baseline-
	 * Unterschiede zwischen Anchor und Button. Padding ist fuer beide gleich,
	 * die Hoehe damit identisch. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 0.45rem 1.1rem;
	text-decoration: none;
}

.compendion-podcast-card__actions .wp-block-button__link:hover,
.compendion-podcast-card__actions .wp-element-button:hover {
	opacity: 0.85;
}

.compendion-podcast-card__actions .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.compendion-podcast-card__actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	opacity: 1;
}

/* Host-Avatar-Minicards auf der Podcast-Card (Dachseite /podcasts/). Reihe aus
   Avatar-Rondell + Name. Self-contained hier (global geladen) statt aus der
   page-spezifischen episode-single.css/content-card.css – damit unabhaengig
   davon, welche CSS-Bundles auf /podcasts/ enqueued sind. Avatar 35x35,
   border-radius 0.5rem (quadratisch-gerundet, [[feedback_avatare_quadratisch]]). */
.compendion-podcast-card__hosts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
}

.compendion-podcast-card__hosts .compendion-episode-contributors-row__item {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	/* Kompakt: nur Avatar + Name, KEINE Card-Chrome. compendion-episode-single.css
	 * wird auf /podcasts/ mit-enqueued und legt seine Episodenseiten-Card-Optik
	 * (Rahmen/Padding/Radius/Tint) auf dieselbe `__item`-Klasse — hier bewusst
	 * zuruecksetzen (hoehere Spezifitaet, nur im Podcast-Card-Kontext). */
	border: none;
	padding: 0;
	background: none;
	border-radius: 0;
}

.compendion-podcast-card__hosts .compendion-content-card__contributor-avatar {
	box-sizing: border-box;
	width: 35px;
	height: 35px;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: 0.5rem;
	/* Personen-Avatar: cover (fuellt die 1:1-Box). no-crop gilt nur fuer Cover. */
	object-fit: cover;
	display: block;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 8%, transparent);
}

.compendion-podcast-card__hosts .compendion-content-card__contributor-avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.compendion-podcast-card__hosts .compendion-episode-contributors-row__name {
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.compendion-podcast-card__hosts a.compendion-episode-contributors-row__name:hover,
.compendion-podcast-card__hosts a.compendion-episode-contributors-row__name:focus-visible {
	text-decoration: underline;
}

/* compendion/podcast-list – vertikale Liste aller Podcast-Cards */
.compendion-podcast-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Unter ~600 px: kleineres gefloatetes Cover, Inhalt laeuft weiter umlaufend. */
@media (max-width: 599px) {
	.compendion-podcast-card__cover-wrap {
		width: min(110px, 32%);
		margin-right: clamp(0.75rem, 3vw, 1rem);
	}
}

/* ---------------------------------------------------------------------------
 * Feature Spotlight (`cmp-spot`)
 *
 * Editoriale Feature-Cards auf Sub-Site-Startseiten (ShowGuide, Retro, Drinks).
 * Block `compendion/site-feature-spotlight` in `front-page.html`.
 * ------------------------------------------------------------------------- */

.cmp-spot {
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
}

.cmp-spot__cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.cmp-spot__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	width: 100%;
	max-width: 680px;
	padding: 1.5rem 2rem;
	background: var(--compendion-color-surface-panel);
	color: var(--compendion-color-on-surface-panel);
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 1rem;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cmp-spot__card:hover,
.cmp-spot__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--compendion-elevation) 10%, transparent);
}

.cmp-spot__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.cmp-spot__eyebrow {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.cmp-spot__card .cmp-spot__eyebrow {
	color: var(--c-on-surface-panel-accent);
}

.cmp-spot__body {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--c-on-surface-panel-muted);
}

/* Cover-Band der ZULETZT besprochenen Retro-Spiele (Arne 2026-06-30): erstes Kind
   der Retro-Karte → vollflächiges Artwork-Band am Kartenkopf statt winziger
   Mini-Reihe. Bleed über das Karten-Padding (1.5rem oben / 2rem seitlich) bis an
   die Kanten; die runden oberen Ecken übernimmt der overflow:hidden-Clip der Karte
   (`.cmp-spot__card--retro`). Cover bleiben CONTAINED (Titelbilder nie beschneiden),
   liegen als Regal-Reihe auf einem dezenten currentColor-Band; was über die
   Kartenbreite ragt, clippt sauber weg. */
/* Apple-Showcase (Arne 2026-06-30, Vorbild apple.com/iphone): wenige GROSSE
   Cartridge-Cover, viel Luft, Tiefe durch Schatten + weichen Marken-Glow. Erstes
   Kind der Retro-Karte → bleed über das Karten-Padding bis an die Kanten (runde Ecken
   übernimmt der overflow:hidden-Clip der Karte). Zentriert, großzügiges Padding. */
.cmp-spot__covers {
	align-self: stretch;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(0.85rem, 2.5vw, 1.75rem);
	margin: -1.5rem -2rem 1rem;
	padding: clamp(1.5rem, 4vw, 2.75rem) 1.5rem clamp(1.4rem, 3vw, 2.1rem);
	background:
		radial-gradient(125% 95% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent), transparent 70%),
		color-mix(in srgb, currentColor 5%, transparent);
}

.cmp-spot__cover {
	flex: 0 1 auto;
	width: auto;
	height: clamp(7rem, 15vw, 11rem);
	aspect-ratio: 3 / 4;
	object-fit: contain;
	border-radius: 0.55rem;
	background: color-mix(in srgb, currentColor 10%, transparent);
	/* Tiefe: weiche, tief liegende Schlagschatten (dekorativ, Token-Elevation). */
	box-shadow:
		0 1.4rem 2rem -0.85rem color-mix(in srgb, var(--compendion-elevation) 55%, transparent),
		0 0.3rem 0.6rem -0.3rem color-mix(in srgb, var(--compendion-elevation) 42%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover/Tap: leicht anheben, Schatten vertieft (Apple-Tiefe). */
.cmp-spot__cover:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow:
		0 1.9rem 2.6rem -0.85rem color-mix(in srgb, var(--compendion-elevation) 60%, transparent),
		0 0.4rem 0.8rem -0.3rem color-mix(in srgb, var(--compendion-elevation) 48%, transparent);
}

/* Fallback-Kachel ohne IGDB-Cover: Initialen in der Show-Palettenfarbe (primary/
   on-primary = kontrastsicheres Token-Paar). Füllt den Slot statt Leerstelle. */
.cmp-spot__cover--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--compendion-color-primary-fill, var(--wp--preset--color--primary));
	color: var(--compendion-color-on-primary);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
	letter-spacing: 0.02em;
}

.cmp-spot__stat {
	font-size: 0.8rem;
	margin-block: 0.25rem;
	color: var(--c-on-surface-panel-muted);
}

.cmp-spot__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 0.5rem;
	padding: 0.5rem 1.25rem;
	background: var(--compendion-color-primary-fill, var(--wp--preset--color--primary));
	color: var(--compendion-color-on-primary);
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.85rem;
	transition: opacity 0.15s ease;
}

.cmp-spot__card:hover .cmp-spot__cta {
	opacity: 0.88;
}

.cmp-spot__badge {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.cmp-spot__progress {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.cmp-spot__progress-track {
	display: inline-block;
	width: 6rem;
	height: 0.35rem;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 16%, transparent);
	overflow: hidden;
}

.cmp-spot__progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
}

.cmp-spot__progress-label {
	font-weight: 400;
	color: var(--c-on-surface-panel-muted);
}

/* Karten mit Bleed-Deko (Retro-Cover-Band / Getränke-Geisterzahl) clippen ihre
   Kinder an den runden Kartenecken und spannen den Stacking-Kontext für die Deko. */
.cmp-spot__card--retro,
.cmp-spot__card--drinks {
	position: relative;
	overflow: hidden;
}

/* Getränke-Karte: typografisch statt bildlich (Arne 2026-06-30, „typografisch
   spannender"). Geister-Zahl der Gesamtmenge als Deko-Anker (wie die gefeierte 500
   im Kennzahlen-Band) + die ZULETZT getrunkenen Getränke als große Namen. Der
   Karteninhalt liegt über der Geister-Zahl. */
.cmp-spot__card--drinks > :not(.cmp-spot__ghost) {
	position: relative;
	z-index: 1;
}

.cmp-spot__ghost {
	position: absolute;
	right: -0.5rem;
	bottom: -1.75rem;
	font-size: clamp(6rem, 15vw, 11rem);
	font-weight: 900;
	line-height: 0.8;
	letter-spacing: -0.04em;
	/* Neutrale on-panel-Tinte, NICHT Akzent — Akzent (Magenta) auf Magenta-naher
	   Fläche wäre unsichtbar; neutral ist auf jeder Palette als blasse Geisterzahl da. */
	color: color-mix(in srgb, var(--c-on-surface-panel) 8%, transparent);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.cmp-spot__drinks-recent {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-block: 0.5rem 0.1rem;
}

.cmp-spot__drinks-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-on-surface-panel-accent);
	margin-bottom: 0.2rem;
}

.cmp-spot__drink {
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--c-on-surface-panel);
}

/* ---------------------------------------------------------------------------
 * Hochkant (<600px, Hamburger-Breakpoint der Nav) und quer auf Telefonen
 * (Hoehe <=500px bis 1023px Breite): die Kicker-Zeile „Gute Podcasts von und
 * mit …“ faellt weg (der Hero sagt den Satz drei Zeilen tiefer) und mit ihr
 * ihr Farbmodus-Knopf; stattdessen zeigt die Logo-Zeile ihren eigenen Knopf
 * (Pattern compendion/color-scheme-toggle, parts/header.html) links neben dem
 * Menue-Symbol. Frueher stand die Kicker-Zeile absolut ueber der Logo-Zeile
 * und rechnete mit 56px Zeilenhoehe; ohne Logo oder mit umbrechendem Titel
 * (MT2, GHU) hing der Knopf schief (Arne 2026-10-19). Als Flex-Kind der Zeile
 * sitzt er bei jeder Zeilenhoehe mittig. Quer zeigt der Kopf das Menue-Symbol
 * statt der zweizeilig umbrechenden Navigation (Core blendet den Oeffner ab
 * 600px aus; die :not()-Ketten spiegeln die Core-Selektoren mit hoeherer
 * Spezifitaet).
 * ------------------------------------------------------------------------- */

.compendion-site-header .compendion-header-toggle {
	display: none;
}

@media (max-width: 599px), ((max-height: 500px) and (max-width: 1023px)) {
	.compendion-site-header .compendion-network-kicker-row {
		display: none;
	}

	/* Die Kicker-Zeile ist weg, darum keinen Block-Gap vor der Logo-Zeile. */
	.compendion-site-header .alignwide.is-content-justification-space-between {
		margin-block-start: 0;
	}

	.compendion-site-header .compendion-header-toggle {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
	}

	/* Titel-Block fuellt die Zeile, Knopf und Menue-Symbol haengen rechts. */
	.compendion-site-header .alignwide.is-content-justification-space-between > .wp-block-group {
		flex: 1 1 auto;
		min-width: 0;
	}

	.compendion-site-header .alignwide > .compendion-primary-nav {
		flex: 0 0 auto;
	}

	.compendion-site-header .compendion-color-scheme-toggle {
		width: 1.5rem;
		height: 1.5rem;
	}

	.compendion-site-header .compendion-color-scheme-toggle svg {
		width: 1.1rem;
		height: 1.1rem;
	}
}

@media (max-height: 500px) and (min-width: 600px) and (max-width: 1023px) {
	.compendion-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.compendion-site-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
		display: none;
	}
}