/**
 * VPH Podcasts – Frontend-Styles.
 * Eigenständig, gescoped unter .vph-pod, in VPH-Markenfarben.
 */

.vph-pod {
	/* Gemeinsame VPH-Tokens (identisch zu MOOC- & eLectures-Showcase). */
	--vph-blue: #0098d4;
	--vph-blue-dark: #006f95;
	--vph-cyan: #00a7e5;
	--vph-orange: #d54d13;
	--vph-magenta: #961353;
	--vph-ink: #353c44;              /* Überschriften */
	--vph-text: #3a4654;             /* Fließtext */
	--vph-muted: #586577;
	--vph-muted-strong: #5a6675;
	--vph-line: #e3e9ef;
	--vph-line-strong: #d3dbe4;
	--vph-bg: #ffffff;
	--vph-card: #ffffff;
	--vph-bg-soft: #f4f8fb;
	--accent: var(--vph-blue);

	--vph-radius: 20px;
	--vph-radius-sm: 11px;
	--vph-shadow: 0 1px 2px rgba(15, 40, 70, .06), 0 6px 16px -4px rgba(15, 40, 70, .10);
	--vph-shadow-lg: 0 2px 4px rgba(15, 40, 70, .08), 0 24px 48px -12px rgba(15, 40, 70, .22);

	--vph-ease: cubic-bezier(.2, .7, .25, 1);
	--vph-ease-out: cubic-bezier(.16, 1, .3, 1);
	--vph-dur: .32s;
	--vph-dur-fast: .18s;

	box-sizing: border-box;
	color: var(--vph-text);
	/* Schrift vom Theme erben (DSGVO – keine externen Fonts; wie die anderen VPH-Plugins). */
	font-family: inherit;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	max-width: 1180px;
	margin-inline: auto;
}

.vph-pod *,
.vph-pod *::before,
.vph-pod *::after {
	box-sizing: border-box;
}

/* Überschriften gegen Theme-Einfärbung/-Schrift (Divi) absichern. */
.vph-pod h2,
.vph-pod h3,
.vph-pod h4 {
	color: var(--vph-ink) !important;
	font-family: inherit !important;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	margin: 0;
}

.vph-pod p { margin: 0; }

.vph-pod img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Manche Themes (Divi) überschreiben das native [hidden] mit !important –
   hier erzwingen, damit das Grid beim Öffnen einer Show wirklich verschwindet. */
.vph-pod [hidden] { display: none !important; }

/* ---------------------------------------------------------------- Intro -- */

.vph-pod-intro {
	text-align: center;
	position: relative;
	padding: 8px 16px 28px;
}

.vph-pod-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vph-blue-dark);
	margin-bottom: 10px;
}

.vph-pod-intro__title {
	font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.85rem);
	line-height: 1.12;
	font-weight: 800;
	margin: 0 0 14px;
	color: var(--vph-ink);
}

.vph-pod-intro__lead {
	max-width: 60ch;
	margin: 0 auto;
	color: var(--vph-muted);
	font-size: 1.06rem;
}

.vph-pod-mosaic {
	display: grid;
	grid-template-columns: repeat(3, 12px);
	grid-auto-rows: 12px;
	gap: 4px;
	width: max-content;
	margin: 0 auto 18px;
}

.vph-pod-mosaic i {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--vph-blue);
	opacity: 0.9;
	animation: vph-pod-mosaic 4.5s ease-in-out infinite;
}

.vph-pod-mosaic i:nth-child(2) { background: var(--vph-cyan); animation-delay: 0.15s; }
.vph-pod-mosaic i:nth-child(3) { background: var(--vph-blue-dark); animation-delay: 0.3s; }
.vph-pod-mosaic i:nth-child(4) { background: var(--vph-magenta); animation-delay: 0.45s; }
.vph-pod-mosaic i:nth-child(5) { background: var(--vph-orange); animation-delay: 0.6s; }
.vph-pod-mosaic i:nth-child(6) { background: var(--vph-blue); animation-delay: 0.75s; }
.vph-pod-mosaic i:nth-child(7) { background: var(--vph-cyan); animation-delay: 0.9s; }
.vph-pod-mosaic i:nth-child(8) { background: var(--vph-blue-dark); animation-delay: 1.05s; }
.vph-pod-mosaic i:nth-child(9) { background: var(--vph-magenta); animation-delay: 1.2s; }

@keyframes vph-pod-mosaic {
	0%, 100% { transform: translateY(0); opacity: 0.9; }
	50% { transform: translateY(-4px); opacity: 1; }
}

.vph-pod-stats {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.vph-pod-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 116px;
	padding: 12px 22px;
	background: var(--vph-card);
	border: 1px solid var(--vph-line);
	border-radius: var(--vph-radius-sm);
	box-shadow: var(--vph-shadow);
}

.vph-pod-stat__num {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--vph-blue-dark);
	line-height: 1;
}

.vph-pod-stat__label {
	display: block;
	font-size: 0.82rem;
	color: var(--vph-muted);
	margin-top: 4px;
}

/* -------------------------------------------------------------- Toolbar -- */

.vph-pod-toolbar {
	display: flex;
	justify-content: center;
	margin: 6px 16px 24px;
}

.vph-pod-search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--vph-bg);
	border: 1px solid var(--vph-line);
	border-radius: 999px;
	padding: 8px 18px;
	width: min(440px, 100%);
	box-shadow: var(--vph-shadow);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.vph-pod-search:focus-within {
	border-color: var(--vph-blue);
	box-shadow: 0 0 0 4px rgba(0, 152, 212, 0.14);
}

.vph-pod-search__icon { color: var(--vph-muted); display: inline-flex; }
.vph-pod-search__icon svg { width: 20px; height: 20px; }

.vph-pod-search__input {
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	width: 100%;
}

/* ----------------------------------------------------------------- Grid -- */

.vph-pod-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--vph-card-min, 330px), 1fr));
	gap: 16px;
	padding: 4px;
}

/* Feste Spaltenzahl, wenn per Shortcode columns="N" gesetzt. */
.vph-pod--cols .vph-pod-grid {
	grid-template-columns: repeat(var(--vph-cols, 3), minmax(0, 1fr));
}

.vph-pod-card {
	display: flex;
	flex-direction: row;
	background: var(--vph-bg);
	border: 1px solid var(--vph-line);
	border-radius: var(--vph-radius);
	overflow: hidden;
	box-shadow: var(--vph-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vph-pod-card:hover,
.vph-pod-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--vph-shadow-lg);
	border-color: color-mix(in srgb, var(--accent) 45%, var(--vph-line));
}

.vph-pod-card__cover {
	position: relative;
	display: block;
	flex: 0 0 116px;
	width: 116px;
	height: 116px;
	align-self: center;
	margin: 12px 0 12px 12px;
	border-radius: var(--vph-radius-sm);
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #000 0%), color-mix(in srgb, var(--accent) 55%, #000 25%));
	overflow: hidden;
}

.vph-pod-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vph-pod-card__img--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.92);
}

.vph-pod-card__img--ph svg { width: 46%; height: 46%; }

.vph-pod-card:hover .vph-pod-card__img { transform: scale(1.05); }

.vph-pod-card__play {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-end: 10px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--accent);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	transform: translateY(6px);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.vph-pod-card__play svg { width: 22px; height: 22px; margin-inline-start: 2px; }

.vph-pod-card:hover .vph-pod-card__play,
.vph-pod-card:focus-within .vph-pod-card__play {
	transform: translateY(0);
	opacity: 1;
}

.vph-pod-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 13px 13px;
	flex: 1;
	min-width: 0; /* erlaubt Umbruch/Kürzen langer Texte im Flex-Layout */
}

.vph-pod-card__cat {
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, #fff);
	border-radius: 999px;
	padding: 3px 10px;
}

/* Titel-Schrift gegen Theme-Überschreibung (Divi h3) absichern: gleiche
   Sans-Schrift wie der Rest, klare Farbe, normale Laufweite. */
.vph-pod .vph-pod-card__title,
.vph-pod .vph-pod-card__title a {
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	color: var(--vph-ink);
	text-decoration: none;
	margin: 0;
}

/* Lange Namen (auch ein einzelnes langes Wort) sauber umbrechen + auf 2 Zeilen begrenzen. */
.vph-pod .vph-pod-card__title {
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vph-pod .vph-pod-card__title a:hover { color: var(--accent); }

.vph-pod-card__meta {
	font-size: 0.82rem;
	color: var(--vph-muted);
	margin: 0;
}

.vph-pod-card__desc {
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--vph-muted);
	margin: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vph-pod-card__foot {
	margin-top: auto;
	padding-top: 4px;
}

/* Kompaktere Buttons in der (kleineren) Karte. */
.vph-pod-card .vph-pod-btn {
	padding: 9px 14px;
	font-size: 0.85rem;
}

.vph-pod-card__cat {
	font-size: 0.68rem;
}

/* -------------------------------------------------------------- Buttons -- */

.vph-pod-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: inherit;
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1;
	border-radius: 999px;
	padding: 11px 20px;
	cursor: pointer;
	border: 1.5px solid transparent;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}

.vph-pod-btn svg { width: 18px; height: 18px; }
.vph-pod-btn:active { transform: translateY(1px); }

/* Gegen Theme-Buttons (Divi) abgesichert + Soft-Depth wie MOOC/eLectures.
   Leicht abgedunkelter Akzent → weißer Text bleibt auch bei hellen Akzenten (Cyan) AA-lesbar. */
.vph-pod .vph-pod-btn--primary {
	background: color-mix(in srgb, var(--accent) 88%, #00131c) !important;
	color: #fff !important;
	border-color: transparent !important;
	width: 100%;
	box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}

.vph-pod .vph-pod-btn--primary:hover {
	background: color-mix(in srgb, var(--accent) 78%, #00131c) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -6px color-mix(in srgb, var(--accent) 72%, transparent);
}

.vph-pod-btn--ghost {
	background: transparent;
	color: var(--vph-blue-dark);
	border-color: var(--vph-line);
}

.vph-pod-btn--ghost:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.vph-pod-noresults,
.vph-pod-empty {
	text-align: center;
	color: var(--vph-muted);
	padding: 28px 16px;
	font-size: 1.02rem;
}

/* ------------------------------------- Kompakter Startseiten-Strip ------ */

.vph-pod-strip {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 12px 4px 16px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.vph-pod-strip__item {
	flex: 0 0 auto;
	width: 132px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.vph-pod-strip__cover {
	display: block;
	width: 132px;
	height: 132px;
	border-radius: var(--vph-radius-sm);
	overflow: hidden;
	box-shadow: var(--vph-shadow);
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
	transition: transform var(--vph-dur) var(--vph-ease), box-shadow var(--vph-dur) ease;
}

.vph-pod-strip__item:hover .vph-pod-strip__cover,
.vph-pod-strip__item:focus-visible .vph-pod-strip__cover {
	transform: translateY(-4px);
	box-shadow: var(--vph-shadow-lg);
}

.vph-pod-strip__cover img { width: 100%; height: 100%; object-fit: cover; }

.vph-pod-strip__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.92);
}

.vph-pod-strip__ph svg { width: 42%; height: 42%; }

.vph-pod-strip__title {
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.25;
	color: var(--vph-ink);
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vph-pod-strip__meta { font-size: 0.78rem; color: var(--vph-muted); }

/* ----------------------------------------- Suchtreffer (Folgen) --------- */

.vph-pod-results {
	margin-top: 22px;
}

.vph-pod-results__head {
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--vph-ink);
	margin: 0 0 12px;
	padding-top: 14px;
	border-top: 1px solid var(--vph-line);
}

/* --------------------------------------------- Einzel-Folge-Player ------ */

.vph-pod-embed {
	max-width: 380px;
}

/* Audio-Element nimmt keinen Platz im Flex-Layout ein (spielt dennoch). */
.vph-pod-embed__audio { display: none; }

.vph-pod-embed__card {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--vph-card);
	border: 1px solid var(--vph-line);
	border-radius: var(--vph-radius-sm);
	box-shadow: var(--vph-shadow);
	padding: 6px 10px;
}

/* Titel als schmales, einzeiliges Element in der Bar. */
.vph-pod-embed__title {
	flex: 1 1 0;
	min-width: 0;
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vph-ink);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Fortschrittsbalken wächst stärker als der Titel. */
.vph-pod-embed .vph-pod-embed__seek { flex: 2 1 0; min-width: 0; }

/* Cover links über die volle Höhe */
.vph-pod-embed__cover {
	position: relative;
	flex: 0 0 50px;
	width: 50px;
	align-self: stretch;
	min-height: 50px;
	border-radius: var(--vph-radius-sm);
	overflow: hidden;
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
}

.vph-pod-embed__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Rechte Spalte: Titel + Steuerleiste – das macht den Player flach. */
.vph-pod-embed__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.vph-pod-embed__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.92);
}

.vph-pod-embed__ph svg { width: 46%; height: 46%; }

.vph-pod-embed__info { min-width: 0; }

.vph-pod-embed__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
	min-width: 0;
}

.vph-pod-embed__se {
	flex: 0 0 auto;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--vph-blue-dark);
	background: color-mix(in srgb, var(--accent) 14%, #fff);
	border-radius: 5px;
	padding: 2px 6px;
	font-variant-numeric: tabular-nums;
}

.vph-pod-embed__pod {
	font-size: 0.8rem;
	color: var(--vph-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vph-pod-embed__toggle {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.1s ease, background 0.2s ease;
}

.vph-pod-embed__toggle:hover { background: color-mix(in srgb, var(--accent) 82%, #000); }
.vph-pod-embed__toggle:active { transform: scale(0.94); }
.vph-pod-embed__toggle svg { width: 16px; height: 16px; }
.vph-pod-embed__toggle .vph-pod-embed__pi { display: inline-flex; }
.vph-pod-embed__toggle .vph-pod-embed__pi svg { margin-inline-start: 2px; }
.vph-pod-embed__toggle .vph-pod-embed__pa { display: none; }
.vph-pod-embed.is-playing .vph-pod-embed__toggle .vph-pod-embed__pi { display: none; }
.vph-pod-embed.is-playing .vph-pod-embed__toggle .vph-pod-embed__pa { display: inline-flex; }

.vph-pod-embed__time {
	font-size: 0.72rem;
	color: var(--vph-muted);
	font-variant-numeric: tabular-nums;
	min-width: 28px;
	text-align: center;
}

.vph-pod-embed .vph-pod-embed__rate { padding: 5px 8px; min-width: 0; font-size: 0.78rem; }

.vph-pod-embed__link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	color: var(--vph-muted);
	transition: color 0.2s ease, background 0.2s ease;
}

.vph-pod-embed__link:hover { color: var(--accent); background: var(--vph-bg-soft); }
.vph-pod-embed__link svg { width: 17px; height: 17px; }

/* --- Größere Karten-Variante: [vph_podcast_episode layout="card"] ------- */

.vph-pod-embed--card .vph-pod-embed__card {
	align-items: stretch;
	gap: 12px;
	padding: 10px 12px;
}

.vph-pod-embed--card .vph-pod-embed__cover {
	position: relative;
	flex: 0 0 66px;
	width: 66px;
	align-self: stretch;
	min-height: 66px;
	border-radius: var(--vph-radius-sm);
	overflow: hidden;
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
}

.vph-pod-embed--card .vph-pod-embed__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.vph-pod-embed--card .vph-pod-embed__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.92);
}

.vph-pod-embed--card .vph-pod-embed__ph svg { width: 46%; height: 46%; }

.vph-pod-embed--card .vph-pod-embed__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.vph-pod-embed--card .vph-pod-embed__info { min-width: 0; }

.vph-pod-embed--card .vph-pod-embed__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
	min-width: 0;
}

.vph-pod-embed--card .vph-pod-embed__se {
	flex: 0 0 auto;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--vph-blue-dark);
	background: color-mix(in srgb, var(--accent) 14%, #fff);
	border-radius: 5px;
	padding: 2px 6px;
	font-variant-numeric: tabular-nums;
}

.vph-pod-embed--card .vph-pod-embed__pod {
	font-size: 0.8rem;
	color: var(--vph-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Titel in der Karte: zweizeilig, größer (überschreibt die schmale Bar-Variante). */
.vph-pod-embed--card .vph-pod-embed__title {
	flex: none;
	font-size: 1rem;
	line-height: 1.25;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vph-pod-embed--card .vph-pod-embed__bar { display: flex; align-items: center; gap: 10px; }
.vph-pod-embed--card .vph-pod-embed__toggle { width: 38px; height: 38px; }
.vph-pod-embed--card .vph-pod-embed__toggle svg { width: 18px; height: 18px; }

/* -------------------------------------------------------------- Detail --- */

.vph-pod-detail {
	outline: none;
}

/* Puffer beim Hin-Scrollen (Öffnen/Zurück), falls eine fixe Theme-Leiste vorhanden ist. */
.vph-pod,
.vph-pod-detail {
	scroll-margin-top: 90px;
}

.vph-pod-detail__inner {
	padding: 4px;
}

.vph-pod-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	font: inherit;
	font-weight: 700;
	color: var(--vph-blue-dark);
	cursor: pointer;
	padding: 8px 4px;
	margin-bottom: 12px;
	border-radius: 8px;
}

.vph-pod-back:hover { color: var(--accent); }
.vph-pod-back svg { width: 20px; height: 20px; }

.vph-pod-show {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 26px;
	align-items: start;
	padding: 8px 4px 26px;
	border-bottom: 1px solid var(--vph-line);
	margin-bottom: 18px;
}

.vph-pod-show__cover {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--vph-shadow);
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
}

.vph-pod-show__cover img { width: 100%; height: 100%; object-fit: cover; }

.vph-pod-show__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.9);
}

.vph-pod-show__ph svg { width: 44%; height: 44%; }

.vph-pod-show__title {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
	font-weight: 800;
	margin: 8px 0 6px;
	line-height: 1.15;
}

.vph-pod-show__meta {
	color: var(--vph-muted);
	font-size: 0.9rem;
	margin: 0 0 12px;
}

.vph-pod-show__desc {
	color: var(--vph-ink);
	font-size: 0.98rem;
}

.vph-pod-show__desc p { margin: 0 0 10px; }
.vph-pod-show__desc ul { margin: 0 0 10px; padding-inline-start: 20px; }

.vph-pod-show__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

/* ------------------------------------------------------------ Episodes --- */

.vph-pod-eps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vph-pod-ep {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: 14px;
	padding: 14px 16px;
	background: var(--vph-bg);
	border: 1px solid var(--vph-line);
	border-radius: 14px;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.vph-pod-ep:hover {
	border-color: color-mix(in srgb, var(--accent) 40%, var(--vph-line));
	box-shadow: var(--vph-shadow);
}

.vph-pod-ep.is-playing {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.vph-pod-ep__play {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: color-mix(in srgb, var(--accent) 12%, #fff);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s, transform 0.1s;
}

.vph-pod-ep__play:hover { background: var(--accent); color: #fff; }
.vph-pod-ep__play:active { transform: scale(0.94); }
.vph-pod-ep__play svg { width: 22px; height: 22px; }
.vph-pod-ep__play-icon { display: inline-flex; }
.vph-pod-ep__play-icon .vph-pod-ep__play svg:first-child { margin-inline-start: 2px; }

/* Play/Pause-Umschaltung am Episoden-Button. */
.vph-pod-ep__play .vph-pod-ep__play-icon > *:nth-child(1) { margin-inline-start: 2px; }
.vph-pod-ep__play svg:nth-child(2) { display: none; }
.vph-pod-ep.is-playing .vph-pod-ep__play svg:nth-child(1) { display: none; }
.vph-pod-ep.is-playing .vph-pod-ep__play svg:nth-child(2) { display: inline; margin-inline-start: 0; }

.vph-pod-ep__main { min-width: 0; }

.vph-pod-ep__title {
	font-size: 1.04rem;
	font-weight: 700;
	margin: 2px 0 4px;
	line-height: 1.3;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.vph-pod-ep__meta {
	font-size: 0.82rem;
	color: var(--vph-muted);
	margin: 0 0 6px;
}

.vph-pod-ep__notes {
	font-size: 0.9rem;
}

.vph-pod-ep__notes summary {
	cursor: pointer;
	color: var(--vph-blue-dark);
	font-weight: 600;
	font-size: 0.84rem;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	user-select: none;
}

.vph-pod-ep__notes summary::-webkit-details-marker { display: none; }
.vph-pod-ep__notes summary::before { content: "›"; transition: transform 0.2s; display: inline-block; font-weight: 800; }
.vph-pod-ep__notes[open] summary::before { transform: rotate(90deg); }
.vph-pod-ep__notes summary:hover { color: var(--accent); }

.vph-pod-ep__notes-body {
	margin-top: 8px;
	color: var(--vph-muted);
	border-inline-start: 3px solid color-mix(in srgb, var(--accent) 35%, var(--vph-line));
	padding-inline-start: 14px;
}

.vph-pod-ep__notes-body p { margin: 0 0 8px; }
.vph-pod-ep__notes-body a { color: var(--vph-blue-dark); }

.vph-pod-ep__link {
	flex-shrink: 0;
	color: var(--vph-muted);
	display: inline-flex;
	align-items: center;
	padding: 6px;
	border-radius: 8px;
	transition: color 0.2s, background 0.2s;
}

.vph-pod-ep__link:hover { color: var(--accent); background: var(--vph-bg-soft); }
.vph-pod-ep__link svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- Player -- */

.vph-pod-player {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 99990;
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-top: 1px solid var(--vph-line);
	box-shadow: 0 -10px 40px rgba(13, 53, 73, 0.16);
	transform: translateY(110%);
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	font-family: inherit;
	color: var(--vph-ink, #353c44);
	--accent: #0098d4;
}

.vph-pod-player.is-active {
	transform: translateY(0);
}

.vph-pod-player__inner {
	max-width: 1240px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 2fr) auto;
	align-items: center;
	gap: 18px;
	padding: 10px 20px;
}

.vph-pod-player__now {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.vph-pod-player__cover {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--vph-bg-soft, #f4f8fa);
}

.vph-pod-player__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vph-pod-player__title {
	font-weight: 700;
	font-size: 0.95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vph-pod-player__podcast {
	font-size: 0.8rem;
	color: var(--vph-muted, #5b6b76);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vph-pod-player__controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

.vph-pod-pbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--vph-ink, #1f2a33);
	cursor: pointer;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	transition: background 0.2s, color 0.2s, transform 0.1s;
}

.vph-pod-pbtn:hover { background: rgba(0, 152, 212, 0.12); color: var(--accent); }
.vph-pod-pbtn:active { transform: scale(0.92); }
.vph-pod-pbtn svg { width: 22px; height: 22px; }

.vph-pod-pbtn--play {
	width: 50px;
	height: 50px;
	background: var(--accent);
	color: #fff;
}

.vph-pod-pbtn--play:hover { background: color-mix(in srgb, var(--accent) 82%, #000); color: #fff; }
.vph-pod-pbtn--play svg { width: 26px; height: 26px; }
.vph-pod-pbtn--play .vph-pod-pbtn__play svg { margin-inline-start: 2px; }
.vph-pod-pbtn__pause { display: none; }
.vph-pod-player.is-playing .vph-pod-pbtn__play { display: none; }
.vph-pod-player.is-playing .vph-pod-pbtn__pause { display: inline-flex; }

.vph-pod-player__progress {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vph-pod-player__time {
	font-size: 0.78rem;
	color: var(--vph-muted, #5b6b76);
	font-variant-numeric: tabular-nums;
	min-width: 42px;
	text-align: center;
}

.vph-pod-seek {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	min-width: 0; /* erlaubt Schrumpfen in schmalen Playern (Range hat sonst Mindestbreite) */
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--vph-progress, 0%), #d6e2e9 var(--vph-progress, 0%), #d6e2e9 100%);
	cursor: pointer;
	outline: none;
}

.vph-pod-seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.vph-pod-seek::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--accent);
	cursor: pointer;
}

.vph-pod-seek:focus-visible { box-shadow: 0 0 0 4px rgba(0, 152, 212, 0.2); }

.vph-pod-player__extra {
	display: flex;
	align-items: center;
	gap: 4px;
}

.vph-pod-rate {
	font: inherit;
	font-weight: 700;
	font-size: 0.82rem;
	border: 1.5px solid var(--vph-line, #e4ebef);
	background: transparent;
	color: var(--vph-blue-dark, #006f95);
	border-radius: 999px;
	padding: 6px 12px;
	cursor: pointer;
	min-width: 48px;
	transition: border-color 0.2s, color 0.2s;
}

.vph-pod-rate:hover { border-color: var(--accent); color: var(--accent); }

/* -------------------------------------------------------------- Reveal --- */

.vph-pod-reveal {
	opacity: 0;
	transform: translateY(16px) scale(.985);
	transition:
		opacity .55s var(--vph-ease-out),
		transform .55s var(--vph-ease-out);
	transition-delay: calc(min(var(--i, 0), 3) * 60ms);
}

.vph-pod-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------- Responsive --- */

@media (max-width: 860px) {
	.vph-pod-show {
		grid-template-columns: 120px 1fr;
		gap: 18px;
	}
	.vph-pod-player__inner {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"now controls"
			"progress progress"
			"extra extra";
		gap: 8px 14px;
		padding: 8px 14px 10px;
	}
	.vph-pod-player__now { grid-area: now; }
	.vph-pod-player__controls { grid-area: controls; }
	.vph-pod-player__progress { grid-area: progress; }
	.vph-pod-player__extra { grid-area: extra; justify-content: flex-end; }
}

@media (max-width: 540px) {
	.vph-pod-grid,
	.vph-pod--cols .vph-pod-grid { grid-template-columns: 1fr; gap: 12px; }
	.vph-pod-card__cover { flex-basis: 96px; width: 96px; height: 96px; margin: 10px 0 10px 10px; }
	.vph-pod-embed__cover { flex-basis: 48px; width: 48px; min-height: 48px; }
	.vph-pod-strip__item, .vph-pod-strip__cover { width: 112px; }
	.vph-pod-strip__cover { height: 112px; }
	.vph-pod-show { grid-template-columns: 96px 1fr; }
	.vph-pod-card__body { padding: 11px 12px 12px; }
	.vph-pod-ep { grid-template-columns: auto 1fr; }
	.vph-pod-ep__link { display: none; }
	.vph-pod-player__cover { width: 44px; height: 44px; }
	.vph-pod-rate { padding: 6px 10px; min-width: 42px; }
}

/* Platz für den fixierten Player schaffen, wenn aktiv. */
body.vph-pod-player-open { padding-bottom: 92px; }

@media (max-width: 860px) {
	body.vph-pod-player-open { padding-bottom: 150px; }
}

/* ---------------------------------------------- Reduced motion / a11y ---- */

@media (prefers-reduced-motion: reduce) {
	.vph-pod-reveal { opacity: 1; transform: none; transition: none; }
	.vph-pod-mosaic i { animation: none; }
	.vph-pod-player { transition: none; }
	.vph-pod-card { transition: none; }
}

.vph-pod :focus-visible,
.vph-pod-player :focus-visible {
	outline: 3px solid rgba(0, 152, 212, 0.5);
	outline-offset: 2px;
}