/* Landingpage /p/<n>/ – Design Haken dran: Verlauf #135882 → #06c89e mit Haken-Muster,
   dunkles Inhaltsblatt (wie HaKI), Source Sans 3 in Weiß. Fließtext steht auf dem
   dunklen Blatt, nie direkt auf dem Grün (Kontrast). */

/* Seitenrahmen: Hintergrund (Verlauf + Häkchen-Muster) kommt vom Theme über body.hd-gradient-bg.
   Nur die eigenständige Ausweichseite (ohne Block-Theme) bringt den Verlauf selbst mit. */
.hdp-standalone {
	margin: 0; min-height: 100vh;
	background: linear-gradient(135deg, #135882 25%, #06c89e 100%) fixed;
	font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
}
.hdp-main { padding: clamp(16px, 4vw, 40px) 16px; }

.hdp-card {
	--hdp-sheet: #0a3450;
	--hdp-mint: #06d6a0;
	--hdp-line: rgba(255, 255, 255, .14);
	--hdp-muted: rgba(255, 255, 255, .78);

	box-sizing: border-box;
	max-width: 560px; margin: 0 auto; padding: 28px 24px 22px;
	background: var(--hdp-sheet); border-radius: 24px;
	box-shadow: 0 24px 60px rgba(4, 22, 36, .45);
	color: #fff; font-size: 17px; line-height: 1.55;
}
.hdp-card *, .hdp-card *::before, .hdp-card *::after { box-sizing: border-box; }

.hdp__logo { display: block; width: 148px; margin: 0 auto 24px; }
.hdp__logo img { display: block; width: 100%; height: auto; }

.hdp__kicker {
	margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--hdp-muted);
}
.hdp__title { margin: 0 0 8px; font-size: clamp(1.7rem, 6vw, 2.3rem); font-weight: 900; line-height: 1.08; letter-spacing: -.01em; }
.hdp__guests { margin: 0 0 20px; font-size: 1.15rem; font-weight: 600; }

.hdp__audio { display: block; width: 100%; margin: 0 0 24px; border-radius: 999px; }

.hdp__label {
	margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--hdp-muted);
}
.hdp__platforms {
	list-style: none; margin: 0 0 24px; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.hdp__btn {
	display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px;
	border-radius: 14px; border: 1px solid var(--hdp-line); background: rgba(255, 255, 255, .07);
	color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none;
	transition: border-color .15s, background-color .15s;
}
.hdp__btn:hover, .hdp__btn:focus-visible { border-color: var(--hdp-mint); background: rgba(6, 214, 160, .12); }
.hdp__icon {
	flex: none; width: 22px; height: 22px;
	background: var(--hdp-i) center / contain no-repeat;
	filter: brightness(0) invert(1);
}
/* Plattformen ohne POD-Icon (Icons als Variable --hdp-i: Hintergrund hier, Maske im Linkliste-Look) */
.hdp-icon-rss { --hdp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='19' r='2.5'/%3E%3Cpath d='M2.5 9.5a12 12 0 0 1 12 12h-3a9 9 0 0 0-9-9zm0-6a18 18 0 0 1 18 18h-3a15 15 0 0 0-15-15z'/%3E%3C/svg%3E"); }
.hdp-icon-campfire { --hdp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 5 5.5 5 10a5 5 0 0 1-10 0c0-2 1-3.5 2-4.5 0 2 1 3 2 3 0-3-1-5 1-8.5zM4 20h16v2H4z'/%3E%3C/svg%3E"); }
.hdp-icon-peertube { --hdp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l8 5-8 5zM4 12l8 5-8 5zM12 7l8 5-8 5z'/%3E%3C/svg%3E"); }

.hdp__desc { margin: 0 0 20px; color: var(--hdp-muted); font-size: .98rem; }
.hdp__desc p { margin: 0 0 10px; }
.hdp__desc a { color: #fff; }
.hdp__more summary { cursor: pointer; font-weight: 700; color: #fff; margin-bottom: 8px; }

.hdp__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.hdp__action {
	display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
	border: 1.5px solid var(--hdp-mint); background: transparent; color: #fff;
	font: inherit; font-size: .92rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.hdp__action:hover, .hdp__action:focus-visible { background: rgba(6, 214, 160, .15); }

.hdp__footer {
	padding-top: 16px; border-top: 1px solid var(--hdp-line);
	font-size: .82rem; text-align: center; color: var(--hdp-muted);
}
.hdp__footer a { color: inherit; }

.hdp-card a:focus-visible, .hdp-card button:focus-visible, .hdp-card summary:focus-visible { outline: 2px solid var(--hdp-mint); outline-offset: 2px; }

@media (max-width: 420px) {
	.hdp-main { padding: 12px 10px 28px; }
	.hdp-card { padding: 22px 16px 18px; border-radius: 20px; }
	.hdp__platforms { grid-template-columns: 1fr 1fr; gap: 6px; }
	.hdp__btn { padding: 10px; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) { .hdp-card * { transition: none !important; } }

/* YouTube direkt auf der Seite (öffnet sich per Klick auf den YouTube-Knopf) */
.hdp__yt { margin: 0 0 24px; animation: hdp-open .25s ease-out; }
.hdp__yt-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.hdp__yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hdp__yt-direct { margin: 8px 0 0; font-size: .9rem; text-align: right; }
.hdp__yt-direct a { color: #fff; }
@keyframes hdp-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Bild der Folge unter dem Player (Einstellung „Kopfbild“): Titel und Play-Knopf bleiben auf dem
   Handy im ersten Bildschirm. Querformat in voller Inhaltsbreite, das quadratische Cover kleiner und
   mittig. Ist es das Standbild/Thumbnail des Videos, startet ein Klick das Video an seiner Stelle. */
.hdp__hero { position: relative; display: block; width: 100%; margin: 0 0 24px; padding: 0; border: 0; background: none; }
.hdp__hero[hidden] { display: none; }
.hdp__hero img { display: block; width: 100%; height: auto; border-radius: 14px; }
/* Quadratisches Bild (Cover) klein rechts neben Titel und Gast */
.hdp__head { display: flex; align-items: flex-start; gap: 16px; }
.hdp__head-text { flex: 1; min-width: 0; }
.hdp__cover {
	flex: none; width: 120px; height: 120px; margin-top: 4px; object-fit: cover;
	border-radius: 14px; box-shadow: 0 10px 24px rgba(4, 22, 36, .4);
}
@media (max-width: 420px) { .hdp__cover { width: 84px; height: 84px; border-radius: 12px; } }
.hdp__hero--yt { cursor: pointer; border-radius: 14px; }
.hdp__hero-play {
	position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
	border-radius: 50%; background: rgba(9, 30, 46, .72); border: 2px solid #06d6a0;
	transition: transform .15s, background-color .15s;
}
.hdp__hero-play::after {
	content: ""; position: absolute; left: 23px; top: 17px;
	border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff;
}
.hdp__hero--yt:hover .hdp__hero-play, .hdp__hero--yt:focus-visible .hdp__hero-play { transform: scale(1.08); background: rgba(9, 30, 46, .88); }
.hdp__hero--yt:focus-visible { outline: 2px solid #06d6a0; outline-offset: 2px; }


/* Ungerade Zahl an Plattformen: Der letzte Knopf allein in seiner Reihe läuft über beide Spalten */
.hdp-card .hdc-grid--2 > li:last-child:nth-child(odd),
.hdp-card .hdp__platforms > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Quadratisches Bild neben dem Titel: Titel und Gast nutzen gemeinsam die Höhe des Bilds, die
   Unterkante des Bilds liegt auf der Unterkante der Gastzeile. Raster statt Flex, damit Bild und Text
   dieselben Zeilen teilen; ohne Zeilenabstand (das alte gap des Flex-Kopfs galt sonst auch hier). */
.hdp__head:has(> .hdp__cover), .hdep__head:has(> .hdp__cover) {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 0;
	grid-template-areas: "kicker cover" "title cover" "guests cover";
	grid-template-rows: auto auto 1fr;
	margin-bottom: 22px;
}
.hdp__head:has(> .hdp__cover) > .hdp__head-text, .hdep__head:has(> .hdp__cover) > .hdep__head-text { display: contents; }
.hdp__head:has(> .hdp__cover) .hdp__kicker, .hdep__head:has(> .hdp__cover) .hdep__kicker { grid-area: kicker; }
.hdp__head:has(> .hdp__cover) .hdp__title, .hdep__head:has(> .hdp__cover) .hdep__title { grid-area: title; margin-bottom: 6px; }
.hdp__head:has(> .hdp__cover) .hdp__guests, .hdep__head:has(> .hdp__cover) .hdep__guests { grid-area: guests; align-self: end; margin: 0; }
.hdp__head:has(> .hdp__cover) > .hdp__cover, .hdep__head:has(> .hdp__cover) > .hdp__cover { grid-area: cover; align-self: end; margin: 0; }

/* Knöpfe „Nur Symbol“ (Knopf-Konfigurator): runde Icon-Pillen über die volle Breite, je Reihe eine
   Zeile ohne Umbruch. Beim Darüberfahren (oder per Tastatur) klappt der Name auf, die Nachbarn
   schieben sich nach rechts und laufen am Rand weich aus. */
.hdb-syms { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 24px; }
.hdb-syms__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hdb-syms__row.is-split { flex-wrap: nowrap; overflow-x: clip; overflow-clip-margin: 4px; }
.hdb-syms__row.is-overflow {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.hdb-syms__row li { margin: 0; flex: 1 0 48px; display: flex; } /* keine feste Mindestbreite: wächst mit dem aufgeklappten Namen */
.hdb-sym, .hdb-sym__pill { min-width: max-content; }
.hdc-grid:has(+ .hdb-syms), .hdb-syms:has(+ .hdc-grid), .hdb-syms:has(+ .hdb-syms) { margin-bottom: .75rem; }
.hdb-sym { flex: 1; display: flex; color: inherit; text-decoration: none; }
.hdb-sym__pill {
	flex: 1; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border-radius: 999px;
	background: var(--hd-glass-bg, rgba(255, 255, 255, .06)); border: 1px solid var(--hd-glass-border, rgba(255, 255, 255, .14));
	white-space: nowrap; transition: border-color .2s, background-color .2s;
}
.hdb-sym__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--wp--preset--color--bright-teal, #06d6a0); }
.hdb-sym__icon .hdc__glyph, .hdb-sym__icon svg { width: 24px; height: 24px; }
.hdb-sym__label {
	max-width: 0; overflow: hidden; opacity: 0; margin-left: 0;
	font-weight: 700; font-size: .9rem; transition: max-width .45s ease, opacity .3s ease, margin-left .45s ease;
}
.hdb-sym:hover, .hdb-sym:focus-visible { color: inherit; text-decoration: none; }
.hdb-sym:hover .hdb-sym__pill, .hdb-sym:focus-visible .hdb-sym__pill {
	border-color: var(--wp--preset--color--bright-teal, #06d6a0); background-color: var(--hd-glass-bg-hover, rgba(255, 255, 255, .1));
}
.hdb-sym:hover .hdb-sym__label, .hdb-sym:focus-visible .hdb-sym__label { max-width: 14em; opacity: 1; margin-left: .55rem; }
.hdb-sym:focus-visible { outline: none; }
.hdb-sym:focus-visible .hdb-sym__pill { outline: 2px solid var(--wp--preset--color--bright-teal, #06d6a0); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hdb-sym__label { transition: none; } }