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

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

/*
 * `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 color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	opacity: 0.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 color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);
	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;
}

@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: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 60%, transparent);
	margin: 0;
}

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

/* ---------------------------------------------------------------------------
 * 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 --compendion-cta-on-base[-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 {
	cursor: pointer;
	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(--compendion-cta-on-base, var(--wp--preset--color--primary));
	color: var(--compendion-cta-on-base-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(--compendion-cta-on-base, var(--wp--preset--color--contrast));
	border-color: var(--compendion-cta-on-base, 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(--compendion-cta-on-base, var(--wp--preset--color--contrast));
	color: var(--compendion-cta-on-base-text, var(--wp--preset--color--base));
	border-color: var(--compendion-cta-on-base, 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(--compendion-cta-on-base-dark, var(--wp--preset--color--primary));
		color: var(--compendion-cta-on-base-dark-text, 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(--compendion-cta-on-base-dark, var(--wp--preset--color--contrast));
		border-color: var(--compendion-cta-on-base-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(--compendion-cta-on-base-dark, var(--wp--preset--color--contrast));
		color: var(--compendion-cta-on-base-dark-text, var(--wp--preset--color--base));
		border-color: var(--compendion-cta-on-base-dark, var(--wp--preset--color--contrast));
	}
}

html[data-color-scheme="dark"] .compendion-subscribe:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--compendion-cta-on-base-dark, var(--wp--preset--color--primary));
	color: var(--compendion-cta-on-base-dark-text, 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(--compendion-cta-on-base-dark, var(--wp--preset--color--contrast));
	border-color: var(--compendion-cta-on-base-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(--compendion-cta-on-base-dark, var(--wp--preset--color--contrast));
	color: var(--compendion-cta-on-base-dark-text, var(--wp--preset--color--base));
	border-color: var(--compendion-cta-on-base-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);
	background-color: var(--compendion-header-bg, var(--wp--preset--color--contrast));
	color: var(--compendion-header-text, var(--wp--preset--color--base));
	overflow: visible;
	position: relative;
	z-index: 1;
}

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

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

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

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

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

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

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

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

.compendion-site-footer {
	--compendion-triangle-h: clamp(30px, 4vw, 60px);
	color: color-mix(in srgb, var(--compendion-footer-text, var(--compendion-color-on-surface, var(--wp--preset--color--contrast))) 78%, transparent);
	font-size: 0.95rem;
	line-height: 1.5;
	overflow: visible;
	position: relative;
	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);
 * clip-path schneidet die rechteckige Border-Box auf die Dreieckform zu, damit
 * Klick- und Hover-Fläche pixelgenau dem sichtbaren Dreieck entsprechen.
 *
 * 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;
	cursor: pointer;
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
}

/* Header-Dreieck ▼ (zeigt nach unten) — Button sitzt unter der Header-Kante. */
.compendion-site-header .compendion-triangle-hit {
	top: calc(100% - 1px);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Footer-Dreieck ▲ (zeigt nach oben) — Button sitzt im Gap über dem Footer. */
.compendion-site-footer .compendion-triangle-hit {
	top: calc(-1 * var(--compendion-triangle-h) + 1px);
	clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/* 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, #7c3aed));
	}
	50% {
		filter:
			drop-shadow(0 0 var(--cgp-hi, 14px) var(--cgp-color, #7c3aed))
			drop-shadow(0 0 var(--cgp-core, 5px) var(--cgp-color, #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).
 * Sanft beginnend: 0% gedimmt → 50% Peak. `-pulse` (kräftig) für den Profil-
 * Avatar, `-soft` (dezent) für die Mitwirkenden-Card. */
@keyframes compendion-glow-opacity-pulse {
	0%,
	100% {
		opacity: 0.12;
	}
	50% {
		opacity: 0.85;
	}
}

@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:hover)::after,
.compendion-site-header:has(.compendion-triangle-hit:focus-visible)::after,
.compendion-site-footer:has(.compendion-triangle-hit: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:hover)::after,
	.compendion-site-header:has(.compendion-triangle-hit:focus-visible)::after,
	.compendion-site-footer:has(.compendion-triangle-hit: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 {
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--30);
}

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

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

.compendion-footer-inner {
	align-items: center;
	display: flex;
	flex-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;
}

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

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

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

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

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

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

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

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

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

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

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

.compendion-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;
	color: var(--wp--preset--color--muted);
}

.compendion-about-first-episode > time {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--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;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

.compendion-mitwirkende-card {
	/* 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). */
	flex: 0 0 clamp(180px, 18vw, 220px);
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, var(--wp--preset--color--contrast) 8%);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 1rem;
	/* 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;
	}
}

/*
 * 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, var(--wp--preset--color--base) 88%, var(--wp--preset--color--contrast) 12%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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