/*
 * Compendion Netzwerk-Landing - Layout fuer den Block
 * `compendion/netzwerk-landing` auf der Dachmarken-Seite `/netzwerk/`.
 *
 * Regeln aus dem Design-System (docs/design-system.md):
 *   - Farben nur ueber Tokens; wo `background` gesetzt wird, kommt `color`
 *     ueber das passende on-Token mit.
 *   - Radius-Skala: Pill 999px, Card 1rem/1.5rem, Inline 0.5rem.
 *   - Sekundaertext via color-mix gegen on-surface/on-base, nicht `muted`.
 *
 * Die Show-Cards im Finder kommen aus `compendion-network-grid.css`
 * (geteiltes Markup mit /podcasts/), die Episoden-Cards aus dem globalen
 * Content-Card-CSS. Hier lebt nur das Landing-spezifische Drumherum.
 */

.compendion-netzwerk {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 7vw, 5.5rem);
}

/* Sektions-Geruest ----------------------------------------------------- */

.compendion-netzwerk__section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/* Auf dem 1800px-Wide-Layout klebte der Inhalt unnatuerlich weit links
	   (Arne 2026-06-11): Sektionen deckeln auf Lesebreite und zentrieren.
	   Die Alles-Umsonst-Sektion (thanks, alignfull) bleibt bewusst aussen
	   vor und behaelt ihre volle Hintergrund-Breite. */
	width: min(100%, 75rem);
	margin-inline: auto;
}

.compendion-netzwerk__hero {
	width: min(100%, 75rem);
	margin-inline: auto;
}

.compendion-netzwerk__section h2 {
	margin: 0;
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
}

.compendion-netzwerk__lede {
	margin: 0;
	max-width: 60ch;
	color: color-mix(in srgb, var(--compendion-color-on-base, var(--wp--preset--color--contrast)) 72%, transparent);
}

/* 1. Hero --------------------------------------------------------------- */

.compendion-netzwerk__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	padding-block: clamp(1.5rem, 5vw, 3.5rem);
}

.compendion-netzwerk__claim {
	margin: 0;
	font-size: clamp(2.2rem, 6vw, 3.75rem);
	line-height: 1.1;
	max-width: 18ch;
}

.compendion-netzwerk__subline {
	margin: 0;
	font-style: italic;
	font-size: clamp(1.05rem, 2.5vw, 1.35rem);
	color: color-mix(in srgb, var(--compendion-color-on-base, var(--wp--preset--color--contrast)) 75%, transparent);
}

/* Cover-Wand im Hero: leicht gedrehte, ueberlappende Cover-Reihe.
   Cover bleiben unbeschnitten (contain), Radius aus der Cover-Skala. */
.compendion-netzwerk__coverwall {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	/* Kein kuenstliches Cap: 12 Kacheln (~48rem inkl. Ueberlappung) passen
	   in die 75rem-Hero-Breite in EINE Reihe; auf schmalen Viewports bricht
	   flex-wrap in ausgewogene Reihen um (Arne 2026-06-11, Witwen-Kachel). */
	max-width: 100%;
}

.compendion-netzwerk__coverwall-item {
	margin: 0;
	/* Stacking-Kontext fuer den absteigenden Inline-z-index (links oben,
	   verdeckt den Compendion-Schriftzug am linken Rand des Nachbarn). */
	position: relative;
}

/* Beim Hover/Fokus hebt sich die GANZE Kachel ueber alle Nachbarn. */
.compendion-netzwerk__coverwall-item:hover,
.compendion-netzwerk__coverwall-item:focus-within {
	z-index: 200 !important;
}

.compendion-netzwerk__coverwall-item + .compendion-netzwerk__coverwall-item {
	margin-left: -0.55rem;
}

.compendion-netzwerk__coverwall-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.25rem, 7vw, 4.5rem);
	aspect-ratio: 1 / 1;
	border-radius: 0.375rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, var(--wp--preset--color--base));
	box-shadow: 0 2px 8px color-mix(in srgb, var(--compendion-elevation, #000000) 25%, transparent);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.compendion-netzwerk__coverwall-item:nth-child(odd) .compendion-netzwerk__coverwall-link {
	transform: rotate(-2.5deg);
}

.compendion-netzwerk__coverwall-item:nth-child(even) .compendion-netzwerk__coverwall-link {
	transform: rotate(2deg);
}

.compendion-netzwerk__coverwall-link:hover,
.compendion-netzwerk__coverwall-link:focus-visible {
	transform: rotate(0deg) scale(1.18);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--compendion-elevation, #000000) 35%, transparent);
	outline: none;
}

.compendion-netzwerk__coverwall-img {
	width: 100%;
	height: 100%;
	/* Cover nie beschneiden - contain mit Letterbox ist ok. */
	object-fit: contain;
}

.compendion-netzwerk__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.compendion-netzwerk__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 5.5rem;
}

.compendion-netzwerk__stat-number {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.compendion-netzwerk__stat-label {
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--compendion-color-on-base, var(--wp--preset--color--contrast)) 70%, transparent);
}

/* Themen-Pills im Hero (Arne 2026-06-12): gleiche Pill-Optik wie der
   Finder, zentriert und mit Luft zur Subline. Im Hero liegt der
   on-base-Kontext der Sektion an, die contrast-Tokens der Pill greifen. */
.compendion-netzwerk__cluster-pills--hero {
	justify-content: center;
	margin: 1.25rem 0 0.75rem;
}

/* 2. Show-Finder --------------------------------------------------------- */

.compendion-netzwerk__cluster-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
}

.compendion-netzwerk__cluster-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 1rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.compendion-netzwerk__cluster-pill:hover,
.compendion-netzwerk__cluster-pill:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	outline: none;
}

.compendion-netzwerk__cluster-count {
	font-size: 0.8rem;
	font-weight: 500;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

.compendion-netzwerk__cluster {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	/* Anker-Sprung aus den Pillen: Luft ueber der Ueberschrift. */
	scroll-margin-top: 1.5rem;
	margin-top: 1rem;
}

.compendion-netzwerk__cluster h3 {
	margin: 0;
	font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.compendion-netzwerk__cluster-lede {
	margin: 0;
	max-width: 60ch;
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--compendion-color-on-base, var(--wp--preset--color--contrast)) 70%, transparent);
}

/* Status-Pille auf den Show-Cards (Badge-Slot des network-grid-Renderers). */
.compendion-netzwerk__status {
	align-self: flex-start;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.compendion-netzwerk__status--active {
	background: var(--wp--preset--color--primary);
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base));
	/* Rahmen aus dem on-primary-Token (Arne 2026-06-12): auf der gelben
	 * Dachmarke ist primary == Seitenfarbe - ohne Rahmen verschmolz die
	 * Pille im Light Mode mit dem Hintergrund. on-primary kontrastiert
	 * per Definition mit der Fuellung, der Mix wirkt in Light wie Dark. */
	border: 1px solid color-mix(in srgb, var(--compendion-color-on-primary, var(--wp--preset--color--contrast)) 45%, transparent);
}

.compendion-netzwerk__status--done {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
	color: color-mix(in srgb, var(--compendion-color-on-base, var(--wp--preset--color--contrast)) 75%, transparent);
}

/* Sendetermin (kuratiert, netzwerk-landing.php) unter der Status-Pille
 * laufender Shows: gedaempfte Klartext-Zeile, kein zweites Pill-Gewicht. */
.compendion-netzwerk__schedule {
	display: block;
	font-size: 0.78rem;
	color: color-mix(in srgb, var(--compendion-color-on-base, var(--wp--preset--color--contrast)) 65%, transparent);
}

/* 3. Versprechen --------------------------------------------------------- */

.compendion-netzwerk__promises {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.compendion-netzwerk__promise {
	background: var(--wp--preset--color--surface);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	border-radius: 1rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.compendion-netzwerk__promise h3 {
	margin: 0;
	font-size: 1.15rem;
}

.compendion-netzwerk__promise p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 80%, transparent);
}

/* Gag-Link "Preise & Tarife" in der Werbefrei-Karte (aus dem Hero
   umgezogen, Arne 2026-06-12). Eigener Absatz unten in der Karte, volle
   on-surface-Farbe (der 80%-Ton der Fliesstexte wuerde den Link verstecken). */
.compendion-netzwerk__promise-more {
	margin: auto 0 0;
	font-size: 0.95rem;
}

.compendion-netzwerk__promise-more a {
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	font-weight: 600;
}

/* 4. Cover-Mosaik --------------------------------------------------------- */

.compendion-netzwerk__mosaic {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Mobil kompakter (Arne 2026-06-12): 3 kleinere Kacheln pro Zeile statt 2
   grosser - 11 Kacheln brauchten vorher ~6 Bildschirmzeilen. Engerer Gap,
   damit die Wand als eine Flaeche liest. */
@media (max-width: 640px) {
	.compendion-netzwerk__mosaic {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.35rem;
	}

	.compendion-netzwerk__mosaic-label {
		font-size: 0.72rem;
		padding: 0.9rem 0.4rem 0.35rem;
	}
}

.compendion-netzwerk__mosaic-item {
	margin: 0;
	padding: 0;
}

/* Neutrale Abgrenzung der Farbflaechen (Arne 2026-06-12, verstaerkt nach
 * Sichtkontrolle): weisser 2px-Ring + dunkler Schein, klar sichtbar auch
 * auf der gelben Dachmarken-Flaeche. Bewusst feste Weiss-/Schwarz-Alphas
 * statt Tokens, gleiche Begruendung wie der feste Label-Scrim:
 * Palettenfarben sind beliebig. (overflow:hidden clippt nur Kind-Content,
 * nicht den eigenen box-shadow - hier kein Slot-Problem wie beim Cover.) */
.compendion-netzwerk__mosaic-tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 0.5rem;
	overflow: hidden;
	text-decoration: none;
	isolation: isolate;
	/* Reduziert (Arne 2026-06-12, dritte Runde): gerade noch erkennbare
	 * Abgrenzung, nicht aufdringlich. */
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.15),
		0 1px 4px rgba(0, 0, 0, 0.15);
}

.compendion-netzwerk__swatches {
	position: absolute;
	inset: 0;
	display: flex;
}

.compendion-netzwerk__swatch {
	flex: 1 1 0;
	transition: flex-grow 0.35s ease;
}

/* Hover/Fokus/Tap: Streifen spreizen sich abwechselnd, Label blendet ein. */
.compendion-netzwerk__mosaic-tile:hover .compendion-netzwerk__swatch:nth-child(odd),
.compendion-netzwerk__mosaic-tile:focus-visible .compendion-netzwerk__swatch:nth-child(odd),
.compendion-netzwerk__mosaic-tile.is-open .compendion-netzwerk__swatch:nth-child(odd) {
	flex-grow: 2.5;
}

.compendion-netzwerk__mosaic-label {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1.25rem 0.6rem 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	/* Fester dunkler Scrim + weisses Label: lesbar auf jeder Show-Palette,
	   in Light wie Dark identisch (bewusst kein Token, die Flaeche darunter
	   ist die Show-Farbe, nicht die Seiten-Palette). */
	color: #ffffff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	opacity: 0;
	transform: translateY(0.4rem);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.compendion-netzwerk__mosaic-tile:hover .compendion-netzwerk__mosaic-label,
.compendion-netzwerk__mosaic-tile:focus-visible .compendion-netzwerk__mosaic-label,
.compendion-netzwerk__mosaic-tile.is-open .compendion-netzwerk__mosaic-label {
	opacity: 1;
	transform: translateY(0);
}

.compendion-netzwerk__mosaic-tile:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.compendion-netzwerk__swatch,
	.compendion-netzwerk__mosaic-label {
		transition: none;
		transform: none;
	}
}

/* 6. Menschen ------------------------------------------------------------- */

.compendion-netzwerk__people {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.compendion-netzwerk__person {
	margin: 0;
}

.compendion-netzwerk__person-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.3rem 0.9rem 0.3rem 0.3rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 0.8rem;
	color: inherit;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}

.compendion-netzwerk__person-link:hover,
.compendion-netzwerk__person-link:focus-visible {
	border-color: var(--wp--preset--color--contrast);
	background: color-mix(in srgb, var(--compendion-elevation, #000000) 6%, transparent);
	outline: none;
}

.compendion-netzwerk__person-avatar {
	width: 2.5rem;
	height: 2.5rem;
	/* Personen-Avatare sind IMMER quadratisch, hoechstens runde Ecken, nie
	   rund (Arne 2026-06-11, [[feedback_avatare_quadratisch]]). */
	border-radius: 0.5rem;
	/* Personen-Avatar fuellt die Box (cover); no-crop gilt nur fuer Cover. */
	object-fit: cover;
}

.compendion-netzwerk__person-avatar--empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	font-size: 0.8rem;
	font-weight: 700;
}

.compendion-netzwerk__person-name {
	font-weight: 600;
	font-size: 0.95rem;
}

/* 7. Arnes Spur ------------------------------------------------------------ */

.compendion-netzwerk__arne-text {
	margin: 0;
	max-width: 65ch;
	font-size: clamp(1rem, 2vw, 1.1rem);
	line-height: 1.6;
}

/* 8. Dranbleiben ------------------------------------------------------------ */

.compendion-netzwerk__connect {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.compendion-netzwerk__connect-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.compendion-netzwerk__connect-link:hover,
.compendion-netzwerk__connect-link:focus-visible {
	text-decoration-color: currentColor;
}

.compendion-netzwerk__support-note {
	margin: 0;
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--compendion-color-on-base, var(--wp--preset--color--contrast)) 70%, transparent);
}

/* Gemeinsame Knopfreihen unter den Sektionen - Flex/Gap/Justify kommt vom
   echten wp:buttons-Block-Layout, hier nur der Abstand nach oben. */
.compendion-netzwerk__more {
	margin-top: 0.5rem;
}

/* Wechsel-Rhythmus gegen Linkslastigkeit (Arne 2026-06-11) ---------------- */

/*
 * `--center`-Sektionen zentrieren Kicker/Heading/Lede und ihre Inhalte;
 * listige Sektionen (Show-Finder, Frisch) bleiben links ausgerichtet.
 */
.compendion-netzwerk__section--center {
	text-align: center;
}

.compendion-netzwerk__section--center .compendion-netzwerk__lede,
.compendion-netzwerk__section--center .compendion-netzwerk__arne-text {
	margin-inline: auto;
}

.compendion-netzwerk__section--center .compendion-netzwerk__people,
.compendion-netzwerk__section--center .compendion-netzwerk__connect,
.compendion-netzwerk__section--center .compendion-netzwerk__more {
	justify-content: center;
}

/* Karten-Texte innerhalb zentrierter Sektionen bleiben lesbar links. */
.compendion-netzwerk__section--center .compendion-netzwerk__promise {
	text-align: left;
}

/* Live-Dot auf der "Laeuft gerade"-Pille ---------------------------------- */

.compendion-netzwerk__status--active::before {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin-right: 0.35em;
	border-radius: 50%;
	background: currentColor;
	animation: compendion-netzwerk-live 2.2s ease-in-out infinite;
}

@keyframes compendion-netzwerk-live {
	0%,
	100% {
		opacity: 0.35;
	}
	50% {
		opacity: 1;
	}
}

/* Scroll-Reveal (Klassen setzt das Landing-JS) ----------------------------- */

.compendion-netzwerk__section.js-reveal {
	opacity: 0;
	transform: translateY(1rem);
}

.compendion-netzwerk__section.is-revealed {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Mosaik: Idle-Puls (JS togglet .is-pulse) + Hover-Lift -------------------- */

.compendion-netzwerk__mosaic-tile {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Der Hover-Lift ueberschreibt box-shadow komplett - der neutrale
 * Abgrenzungs-Ring (oben) muss hier mitgefuehrt werden, sonst verliert die
 * Kachel beim Hover ihre Kontur. */
.compendion-netzwerk__mosaic-tile:hover,
.compendion-netzwerk__mosaic-tile:focus-visible,
.compendion-netzwerk__mosaic-tile.is-open {
	transform: translateY(-3px) scale(1.02);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.15),
		0 1px 4px rgba(0, 0, 0, 0.15),
		0 10px 24px color-mix(in srgb, var(--compendion-elevation, #000000) 22%, transparent);
	z-index: 1;
}

.compendion-netzwerk__mosaic-tile.is-pulse .compendion-netzwerk__swatch:nth-child(odd) {
	flex-grow: 2.5;
}

.compendion-netzwerk__mosaic-tile.is-pulse .compendion-netzwerk__mosaic-label {
	opacity: 1;
	transform: translateY(0);
}

/* Hero-Entrance (reines CSS, einmalig beim Laden) -------------------------- */

@keyframes compendion-netzwerk-rise {
	from {
		opacity: 0;
		transform: translateY(0.8rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.compendion-netzwerk__claim {
	animation: compendion-netzwerk-rise 0.7s ease-out both;
}

.compendion-netzwerk__subline {
	animation: compendion-netzwerk-rise 0.7s ease-out 0.15s both;
}

.compendion-netzwerk__coverwall {
	animation: compendion-netzwerk-rise 0.7s ease-out 0.25s both;
}

.compendion-netzwerk__stats,
.compendion-netzwerk__hero .compendion-netzwerk__more {
	animation: compendion-netzwerk-rise 0.7s ease-out 0.4s both;
}

/* Smooth-Scroll fuer die Anker (CTA, Cluster-Pillen) - Stylesheet laedt nur
   auf Seiten mit dem Landing-Block, wirkt also seiten-lokal. */
:root {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	.compendion-netzwerk__claim,
	.compendion-netzwerk__subline,
	.compendion-netzwerk__coverwall,
	.compendion-netzwerk__stats,
	.compendion-netzwerk__hero .compendion-netzwerk__more,
	.compendion-netzwerk__status--active::before {
		animation: none;
	}

	.compendion-netzwerk__coverwall-link {
		transition: none;
	}

	.compendion-netzwerk__section.js-reveal {
		opacity: 1;
		transform: none;
	}

	.compendion-netzwerk__mosaic-tile {
		transition: none;
	}

	:root {
		scroll-behavior: auto;
	}
}

/* Featured-Player der juengsten Folge (Sektion Frisch im Netzwerk) ---------- */

.compendion-netzwerk__featured {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-width: 52rem;
	width: 100%;
	/* Mittig statt linksbuendig: als Buehne der Sektion (Arne 2026-06-11). */
	margin-inline: auto;
	margin-bottom: 0.75rem;
}

.compendion-netzwerk__featured-label {
	margin: 0;
	font-size: 0.95rem;
}

.compendion-netzwerk__featured-show {
	font-weight: 700;
}

.compendion-netzwerk__featured-title {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.compendion-netzwerk__featured-title:hover,
.compendion-netzwerk__featured-title:focus-visible {
	text-decoration-color: currentColor;
}

/* KEIN overflow/Radius am Container: der Podlove-Player bringt seine eigene
   abgerundete Karte mit, und das Clipping schnitt seine Icon-Zeile unten um
   ein paar Pixel ab (Arne 2026-06-11).

   Neutraler Glow (Arne 2026-06-12): der Player traegt seine Show-Palette und
   wirkte auf der Dachmarken-Seite wie ein Fremdkoerper. Ein deutlicher
   Schatten auf contrast-Token-Basis (keine Markenfarbe) bindet ihn ein und
   funktioniert in Light wie Dark. Radius 1.25rem = Radius der Player-Karte
   (compendion-podlove.css), damit der Glow buendig an der Karte sitzt. */
.compendion-netzwerk__player {
	border-radius: 1.25rem;
	/* Verstaerkt 2026-06-12 (Arne, zweite Runde): kraeftigere Kontur-Linie
	 * und ein breiterer, dichterer Schatten, damit der Player als Buehne der
	 * Sektion klar hervortritt. */
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent),
		0 0.5rem 2rem color-mix(in srgb, var(--wp--preset--color--contrast) 32%, transparent),
		0 0.75rem 3.5rem color-mix(in srgb, var(--wp--preset--color--contrast) 42%, transparent);
}

/* Platzhalter NUR solange der Player noch nicht gemountet ist. */
.compendion-netzwerk__player:empty {
	min-height: 14rem;
	border-radius: 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

/* Content-Grid v2 Stufe 1: Rails in Frisch + Arnes Spur. text-align initial,
 * weil beide Sektionen den --center-Modifier tragen (Frisch seit 2026-06-12)
 * und die Card-Inhalte linksbuendig bleiben sollen. */
.compendion-netzwerk__fresh-rail,
.compendion-netzwerk__arne-rail {
	margin-top: 1.5rem;
	text-align: initial;
}