1 2 3<!DOCTYPE html> 4<html lang="de" class="h-full"> 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>About - Mein Lieblingssong</title> 9 10 11 12 <link rel="icon" href="https://podview-media.nyc3.cdn.digitaloceanspaces.com/podcasts/favicons/meinlieblingssong-favicon.png" type="image/png"> 13 14 15 <!-- Google Fonts for theme typography --> 16 17 <link rel="preconnect" href="https://fonts.googleapis.com"> 18 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 19 <link href="https://fonts.googleapis.com/css2?family=DM%20Serif%20Display:wght@400;600;700&family=Work%20Sans:wght@400;500;600&display=swap" rel="stylesheet"> 20 21 22 <!-- Tailwind CSS (built from tailwind.config.js) --> 23 <link rel="stylesheet" href="/static/css/tailwind.ae666d222e71.css"> 24 25 <!-- Plyr (HLS video player chrome) â pinned-major CDN, matches hls.js/htmx/wavesurfer pattern. Plyr JS itself is lazy-loaded by hls-player.js only when a video exists. --> 26 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plyr@3/dist/plyr.css"> 27 28 <!-- HTMX 2.x --> 29
29<script src="https://unpkg.com/[email protected]"></script>
29 30
30<script> 31 // Configure HTMX to include CSRF token in requests 32 document.addEventListener('htmx:configRequest', function(evt) { 33 const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value 34 || document.cookie.split('; ').find(row => row.startsWith('csrftoken='))?.split('=')[1]; 35 if (csrfToken) { 36 evt.detail.headers['X-CSRFToken'] = csrfToken; 37 } 38 }); 39 </script>
39 40 41 42
42<script src="https://unpkg.com/[email protected]/dist/wavesurfer.min.js"></script>
42 43 44 <!-- Theme CSS variables and custom styles --> 45 <style> 46 :root { 47 --color-primary: #C9A46A; 48 --color-secondary: #7B476A; 49 --color-background: #171018; 50 --color-text: #F0E8DC; 51 --color-accent: #D96F45; 52 --font-heading: 'DM Serif Display', serif; 53 --font-body: 'Work Sans', sans-serif; 54 --pv-radius-card: 0.75rem; 55 --pv-radius-control: 0.5rem; 56 --pv-shadow-soft: 0 32px 92px -54px rgba(95, 47, 78, 0.7); 57 --pv-surface-alpha: 0.72; 58 --pv-motion-duration: 260ms; 59 60 } 61 .bg-theme-surface { 62 border-radius: var(--pv-radius-card); 63 box-shadow: var(--pv-shadow-soft); 64 } 65 a, button { 66 transition-duration: var(--pv-motion-duration); 67 } 68 69 [x-cloak] { display: none !important; } 70 body { 71 background-color: var(--color-background); 72 color: var(--color-text); 73 font-family: var(--font-body); 74 /* Break long unbreakable tokens (e.g. pasted URL runs in an episode 75 description) so they wrap instead of overflowing horizontally. 76 `anywhere` (not `break-word`) is required: it also shrinks the 77 token's min-content width, so a flex/grid column stops growing to 78 fit it. Inherited, so it applies to all theme text. */ 79 overflow-wrap: anywhere; 80 } 81 /* A failed image can paint its alt text outside the replaced element. 82 Keep the accessible alternative while containing its visual fallback. */ 83 img { overflow: hidden; } 84 h1, h2, h3, h4, h5, h6 { 85 font-family: var(--font-heading); 86 /* Headings opt DOWN from the body's `anywhere` to `break-word`. Both 87 still break a word that cannot fit, but `anywhere` also shrinks 88 min-content width, so a display heading in a flex/grid column got a 89 narrow column and then shattered mid-word: "TECH FOUNDER / S / 90 UNPLUGG / ED" on the arena hero. `break-word` leaves min-content 91 alone, so the column sizes to the longest word and only breaks as a 92 last resort. Body text keeps `anywhere` for pasted URL runs. */ 93 overflow-wrap: break-word; 94 } 95 96 /* Chaptered player - current chapter highlight */ 97 .chaptered-player [data-role="chapter-item"].is-current { 98 background: color-mix(in srgb, var(--color-primary) 12%, transparent); 99 } 100 .chaptered-player [data-role="chapter-item"].is-current > span:last-child { 101 color: var(--color-primary); 102 font-weight: 600; 103 } 104 105 /* Episode detail tabs (dramatic layout). Explicit .is-selected swap avoids 106 aria-selected: variant specificity ties with the base text color. */ 107 .episode-tab { 108 color: var(--color-text); 109 opacity: 0.55; 110 border-color: transparent; 111 } 112 .episode-tab:hover { 113 opacity: 0.85; 114 } 115 .episode-tab.is-selected { 116 color: var(--color-accent); 117 opacity: 1; 118 border-color: var(--color-accent); 119 } 120 121 /* Align Tailwind Typography (prose) with theme tokens. 122 RSS descriptions often come as loose text (no <p> wrappers), so the 123 prose container's own color must be the theme text color â otherwise 124 it falls back to the plugin's slate defaults and looks washed out. */ 125 .prose, 126 .prose.prose-invert { 127 --tw-prose-body: var(--color-text); 128 --tw-prose-headings: var(--color-text); 129 --tw-prose-lead: var(--color-text); 130 --tw-prose-links: var(--color-primary); 131 --tw-prose-bold: var(--color-text); 132 --tw-prose-counters: color-mix(in srgb, var(--color-text) 70%, var(--color-background)); 133 --tw-prose-bullets: color-mix(in srgb, var(--color-text) 50%, var(--color-background)); 134 --tw-prose-hr: color-mix(in srgb, var(--color-background) 85%, var(--color-text)); 135 --tw-prose-quotes: var(--color-text); 136 --tw-prose-quote-borders: var(--color-primary); 137 --tw-prose-captions: color-mix(in srgb, var(--color-text) 70%, var(--color-background)); 138 --tw-prose-code: var(--color-text); 139 --tw-prose-pre-code: var(--color-text); 140 --tw-prose-pre-bg: color-mix(in srgb, var(--color-background) 95%, var(--color-text)); 141 --tw-prose-th-borders: color-mix(in srgb, var(--color-background) 85%, var(--color-text)); 142 --tw-prose-td-borders: color-mix(in srgb, var(--color-background) 85%, var(--color-text)); 143 --tw-prose-invert-body: var(--color-text); 144 --tw-prose-invert-headings: var(--color-text); 145 --tw-prose-invert-lead: var(--color-text); 146 --tw-prose-invert-links: var(--color-primary); 147 --tw-prose-invert-bold: var(--color-text); 148 --tw-prose-invert-counters: color-mix(in srgb, var(--color-text) 70%, var(--color-background)); 149 --tw-prose-invert-bullets: color-mix(in srgb, var(--color-text) 50%, var(--color-background)); 150 --tw-prose-invert-hr: color-mix(in srgb, var(--color-background) 85%, var(--color-text)); 151 --tw-prose-invert-quotes: var(--color-text); 152 --tw-prose-invert-quote-borders: var(--color-primary); 153 --tw-prose-invert-captions: color-mix(in srgb, var(--color-text) 70%, var(--color-background)); 154 --tw-prose-invert-code: var(--color-text); 155 --tw-prose-invert-pre-code: var(--color-text); 156 --tw-prose-invert-pre-bg: color-mix(in srgb, var(--color-background) 95%, var(--color-text)); 157 --tw-prose-invert-th-borders: color-mix(in srgb, var(--color-background) 85%, var(--color-text)); 158 --tw-prose-invert-td-borders: color-mix(in srgb, var(--color-background) 85%, var(--color-text)); 159 font-family: var(--font-body); 160 } 161 .prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"] *)) { 162 font-family: var(--font-heading); 163 } 164 165 166 167 </style> 168 169 170 171 172 173 174 175<link rel="canonical" href="https://www.meinlieblingssong.com/about/"> 176 177 178
179<link rel="alternate" type="application/rss+xml" title="Mein Lieblingssong" href="https://feeds.acast.com/public/shows/6566063e77cca90012d2a808"> 180 181 182 183 184<meta name="description" content="Learn more about Mein Lieblingssong. Du erinnerst Dich an einen ganz besonderen Song? Bei uns hörst Du persönliche Erinnerungen und..."> 185 186 187 188 189<meta property="og:type" content="website"> 190<meta property="og:site_name" content="Mein Lieblingssong"> 191<meta property="og:title" content="About | Mein Lieblingssong"> 192 193<meta property="og:description" content="Learn more about Mein Lieblingssong."> 194 195 196<meta property="og:image" content="https://assets.pippa.io/shows/6566063e77cca90012d2a808/1762346655073-2f6e488c-e59d-4ecd-8174-3057bd4c920e.jpeg"> 197<meta property="og:image:alt" content="About | Mein Lieblingssong"> 198 199<meta property="og:url" content="https://www.meinlieblingssong.com/about/"> 200<meta property="og:locale" content="de_DE"> 201 202 203 204 205 206<meta name="twitter:card" content="summary_large_image"> 207<meta name="twitter:title" content="About | Mein Lieblingssong"> 208 209<meta name="twitter:description" content="Learn more about Mein Lieblingssong."> 210 211 212<meta name="twitter:image" content="https://assets.pippa.io/shows/6566063e77cca90012d2a808/1762346655073-2f6e488c-e59d-4ecd-8174-3057bd4c920e.jpeg"> 213 214 215 216 217 218<meta name="apple-itunes-app" content="app-id=525463029"> 219 220 221 222
223<script type="application/ld+json"> 224{"@context": "https://schema.org", "@graph": [{"@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Mein Lieblingssong", "item": "https://www.meinlieblingssong.com/"}, {"@type": "ListItem", "position": 2, "name": "Ãber", "item": "https://www.meinlieblingssong.com/about/"}]}]} 225</script>
225 226 227 228 229 230 231 <meta name="robots" content="index, follow, max-image-preview:large"> 232 233 234 235 236 237</head> 238<body class="h-full antialiased"> 239 240 241 242 243 244 245 246 247 248 249 250 251 252 <div class="min-h-full"> 253 254 255 256 257 258 259 260 261<nav class="sticky top-[var(--owner-bar-height,0px)] z-50 border-b border-theme-border/70 bg-theme-surface/75 backdrop-blur-xl"> 262 <div class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6 lg:px-8" data-nav-row="glass"> 263 <a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/" class="inline-flex min-w-0 shrink items-center gap-2 text-theme-text transition hover:text-theme-primary md:max-w-xs md:shrink-0" data-nav-brand> 264 <img src="https://podview-media.nyc3.cdn.digitaloceanspaces.com/podcasts/logos/meinlieblingssong-logo.png" alt="Mein Lieblingssong" class="h-8 w-auto max-w-48 object-contain"> 265 </a> 266 <div class="hidden shrink-0 items-center gap-1 md:flex"> 267 <a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/" class="whitespace-nowrap rounded-full px-3 py-1.5 text-sm text-theme-text-muted transition hover:bg-theme-border/50 hover:text-theme-text">Startseite</a> 268 <a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/episodes/" class="shrink-0 whitespace-nowrap rounded-full px-3 py-1.5 text-sm text-theme-text-muted transition hover:bg-theme-border/50 hover:text-theme-text" data-nav-inline-link>Folgen</a><a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/about/" class="shrink-0 whitespace-nowrap rounded-full px-3 py-1.5 text-sm text-theme-text-muted transition hover:bg-theme-border/50 hover:text-theme-text" data-nav-inline-link>Ãber</a><a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/contact/" class="shrink-0 whitespace-nowrap rounded-full px-3 py-1.5 text-sm text-theme-text-muted transition hover:bg-theme-border/50 hover:text-theme-text" data-nav-inline-link>Kontakt</a><a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/follow/" class="shrink-0 whitespace-nowrap rounded-full px-3 py-1.5 text-sm text-theme-text-muted transition hover:bg-theme-border/50 hover:text-theme-text" data-nav-inline-link>Abonnieren</a> 269 </div> 270 <button type="button" id="glass-menu-toggle" class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-theme-border text-theme-text-muted transition hover:text-theme-text" aria-expanded="false" aria-controls="glass-menu-panel" aria-haspopup="dialog"> 271 <span class="sr-only">Menü öffnen</span><svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" width="24" height="24" class="h-5 w-5"> 272 <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" /> 273</svg> 274 </button> 275 </div> 276</nav> 277 278 279<div id="glass-menu-overlay" class="fixed inset-0 z-[60] hidden" aria-hidden="true"> 280 <button type="button" class="absolute inset-0 bg-black/60 backdrop-blur-sm" data-nav-dismiss aria-label="Close navigation"></button> 281 <div id="glass-menu-panel" role="dialog" aria-modal="true" aria-label="Navigation" 282 class="absolute inset-x-0 bottom-0 flex max-h-[80vh] w-full translate-y-full flex-col overflow-hidden rounded-t-2xl border-t border-theme-border bg-theme-surface text-theme-text shadow-2xl transition-transform duration-200 md:inset-y-0 md:left-auto md:right-0 md:max-h-none md:w-96 md:translate-x-full md:translate-y-0 md:rounded-none md:border-l md:border-t-0"> 283 <div class="flex items-center justify-between gap-3 border-b border-theme-border px-5 py-4">
284 <span class="min-w-0 truncate font-heading text-base font-bold text-theme-primary">Mein Lieblingssong</span> 285 <button type="button" class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-theme-text-muted transition hover:bg-theme-border/50 hover:text-theme-text" data-nav-dismiss aria-label="Close navigation"> 286 <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" width="24" height="24" class="h-5 w-5"> 287 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> 288</svg> 289 </button> 290 </div> 291 <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain p-3"> 292 293 <a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/" class="flex min-h-11 items-center rounded-lg px-4 py-3 text-base font-medium text-theme-text transition hover:bg-theme-border/50 md:hidden" data-nav-link> 294 Startseite 295 </a> 296 297 298 299 <a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/episodes/" class="flex min-h-11 items-center rounded-lg px-4 py-3 text-base font-medium text-theme-text transition hover:bg-theme-border/50 md:hidden" data-nav-link data-nav-overflow-index="0"> 300 Folgen 301 </a> 302 303 304 305 <a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/about/" class="flex min-h-11 items-center rounded-lg px-4 py-3 text-base font-medium text-theme-text transition hover:bg-theme-border/50 md:hidden" data-nav-link data-nav-overflow-index="1"> 306 Ãber 307 </a> 308 309 310 311 <a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/contact/" class="flex min-h-11 items-center rounded-lg px-4 py-3 text-base font-medium text-theme-text transition hover:bg-theme-border/50 md:hidden" data-nav-link data-nav-overflow-index="2"> 312 Kontakt 313 </a> 314 315 316 317 <a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/follow/" class="flex min-h-11 items-center rounded-lg px-4 py-3 text-base font-medium text-theme-text transition hover:bg-theme-border/50 md:hidden" data-nav-link data-nav-overflow-index="3"> 318 Abonnieren 319 </a> 320 321 322 </div> 323 </div> 324</div>
325<script> 326(function () { 327 const toggle = document.getElementById('glass-menu-toggle'); 328 const overlay = document.getElementById('glass-menu-overlay'); 329 const panel = document.getElementById('glass-menu-panel'); 330 const row = document.querySelector('[data-nav-row="glass"]'); 331 if (!toggle || !overlay || !panel || !row) return; 332 333 // The toggle carries `flex`, and an author-stylesheet class beats the UA's 334 // [hidden] rule â setting the hidden property leaves it on screen, opening an 335 // empty drawer. Inline style is the only form that wins here. 336 function setToggleVisible(visible) { 337 toggle.style.display = visible ? '' : 'none'; 338 } 339 340 function syncOverflow() { 341 const inlineLinks = [...row.querySelectorAll('[data-nav-inline-link]')]; 342 const overflowLinks = [...panel.querySelectorAll('[data-nav-overflow-index]')]; 343 inlineLinks.forEach((link) => { link.hidden = false; }); 344 overflowLinks.forEach((link) => { link.classList.add('md:hidden'); }); 345 346 if (!window.matchMedia('(min-width: 768px)').matches) { 347 setToggleVisible(true); 348 return; 349 } 350 351 setToggleVisible(false); 352 for (let index = inlineLinks.length - 1; row.scrollWidth > row.clientWidth && index >= 0; index -= 1) { 353 inlineLinks[index].hidden = true; 354 overflowLinks[index]?.classList.remove('md:hidden'); 355 setToggleVisible(true); 356 } 357 } 358 359 function openMenu() { 360 overlay.classList.remove('hidden'); 361 overlay.setAttribute('aria-hidden', 'false'); 362 toggle.setAttribute('aria-expanded', 'true'); 363 document.body.style.overflow = 'hidden'; 364 requestAnimationFrame(() => { 365 panel.classList.remove('translate-y-full'); 366 panel.classList.remove('md:translate-x-full'); 367 const firstVisibleLink = [...panel.querySelectorAll('[data-nav-link]')] 368 .find((link) => link.offsetParent !== null); 369 firstVisibleLink?.focus(); 370 }); 371 } 372 373 function closeMenu() { 374 panel.classList.add('translate-y-full'); 375 panel.classList.add('md:translate-x-full'); 376 toggle.setAttribute('aria-expanded', 'false'); 377 overlay.setAttribute('aria-hidden', 'true'); 378 document.body.style.overflow = ''; 379 window.setTimeout(() => overlay.classList.add('hidden'), 200); 380 toggle.focus(); 381 } 382 383 // The panel says aria-modal, so focus has to actually stay inside it. 384 function focusables() { 385 return [...panel.querySelectorAll('a[href], button')].filter((el) => el.offsetParent !== null); 386 } 387 388 toggle.addEventListener('click', openMenu); 389 overlay.querySelectorAll('[data-nav-dismiss]').forEach((element) => element.addEventListener('click', closeMenu)); 390 window.addEventListener('keydown', (event) => { 391 if (toggle.getAttribute('aria-expanded') !== 'true') return; 392 if (event.key === 'Escape') { 393 closeMenu(); 394 return; 395 } 396 if (event.key !== 'Tab') return; 397 398 const items = focusables(); 399 if (!items.length) return; 400 const first = items[0]; 401 const last = items[items.length - 1]; 402 if (!panel.contains(document.activeElement)) { 403 event.preventDefault(); 404 first.focus(); 405 } else if (event.shiftKey && document.activeElement === first) { 406 event.preventDefault(); 407 last.focus(); 408 } else if (!event.shiftKey && document.activeElement === last) { 409 event.preventDefault(); 410 first.focus(); 411 } 412 }); 413 // The Browse menu is a native <details>, so nothing closes it on its own: a 414 // click elsewhere, Escape, or a boosted page swap that keeps this nav in the 415 // DOM would all leave the panel hanging open over the new page. 416 function closeDropdowns(except) { 417 row.querySelectorAll('[data-nav-dropdown][open]').forEach((dropdown) => { 418 if (dropdown !== except) dropdown.open = false; 419 }); 420 } 421 422 document.addEventListener('click', (event) => { 423 const inside = event.target.closest?.('[data-nav-dropdown]'); 424 closeDropdowns(inside && row.contains(inside) ? inside : null); 425 }); 426 window.addEventListener('keydown', (event) => { 427 if (event.key !== 'Escape') return; 428 const open = row.querySelector('[data-nav-dropdown][open]'); 429 if (!open) return; 430 open.open = false;
431 open.querySelector('summary')?.focus(); 432 }); 433 document.body.addEventListener('htmx:beforeSwap', () => closeDropdowns(null)); 434 435 // Crossing a breakpoint can reveal links whose final font/image dimensions 436 // settle after the resize callback. Refit when the rendered row changes, 437 // including its children: the row itself can stay the same width while its 438 // links grow and push the menu button out of view. 439 let overflowFrame = null; 440 function scheduleOverflow() { 441 if (overflowFrame !== null) return; 442 overflowFrame = requestAnimationFrame(() => { 443 overflowFrame = null; 444 syncOverflow(); 445 }); 446 } 447 if (window.ResizeObserver) { 448 const observer = new ResizeObserver(scheduleOverflow); 449 observer.observe(row); 450 [...row.children].forEach((child) => observer.observe(child)); 451 } 452 window.addEventListener('resize', scheduleOverflow); 453 document.fonts?.addEventListener('loadingdone', scheduleOverflow); 454 document.fonts?.ready.then(scheduleOverflow); 455 syncOverflow(); 456})(); 457</script>
457 458 459 460<style data-pv-player-offset> 461 /* A FLOW SPACER, not `padding-bottom` on the body. `<body class="h-full">` is 462 `height: 100%` and Tailwind's preflight makes everything `border-box`, so 463 body padding is consumed by that fixed height and reserves exactly nothing â 464 the footer's last link sat under the bar with a 157px "reserve" in the 465 computed styles. Found in browser QA; it also silently defeated `floating`'s 466 own 6rem mobile clearance, which had shipped that way. A block-level ::after 467 is a real child in normal flow, so it extends the scrollable content. */ 468 body::after { 469 content: ""; 470 display: block; 471 height: var(--pv-player-offset, 0px); 472 /* Matches the bar's own 200ms rise, so the page does not jolt open under it. */ 473 transition: height 200ms ease-out; 474 } 475 @media (prefers-reduced-motion: reduce) { 476 body::after { transition: none; } 477 } 478 479</style> 480 481 482 483 484 485 486 <main id="pv-public-content" tabindex="-1" hx-history-elt> 487 488<div class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8"> 489 <article class="bg-theme-surface rounded-xl shadow-sm border border-theme-border overflow-hidden"> 490 <div class="p-6 sm:p-8"> 491 <div class="flex flex-col sm:flex-row gap-8"> 492 493 494 495<img src="https://assets.pippa.io/shows/6566063e77cca90012d2a808/1762346655073-2f6e488c-e59d-4ecd-8174-3057bd4c920e.jpeg" alt="Mein Lieblingssong" width="512" height="512" loading="lazy" decoding="async" 496 class="h-48 w-48 rounded-xl shrink-0 object-cover "> 497 498 499 500 501 502 <div> 503 <h1 class="text-3xl font-bold text-theme-text font-heading">Ãber Mein Lieblingssong</h1> 504 505 <p class="mt-2 text-lg text-theme-text-muted">Moderiert von Stephan Falk, Andreas Ryll</p> 506 507 </div> 508 </div> 509 510 <div class="mt-8 prose max-w-none text-theme-text prose-headings:text-theme-text prose-p:text-theme-text prose-a:text-theme-primary"> 511 <p>Du erinnerst Dich an einen ganz besonderen Song? Bei uns hörst Du persönliche Erinnerungen und starke Emotionen zu groÃartigen Songs - weit über 150 Folgen und weit über 150 Gäste haben uns schon ihre Geschichte erzählt und mit Euch geteilt - dafür bedanken wir uns ganz herzlich! Im Podcast â<strong>Mein Lieblingssong</strong>â sprechen die beiden Hosts <strong>Stephan Falk</strong> und <strong>Andreas Ryll</strong> mit jeweils einem Gast über dessen Lieblingssong. Was verbindet er oder sie mit diesem Song und welche Erinnerungen, persönlichen Erlebnisse tauchen auf? Es tut gut Falk und Ryll zuzuhören. Immer wieder beleben offene Gespräche und Gedanken, warum genau dieser Song so wichtig und bedeutend im Leben war.</p><p>Es ist faszinierend zu hören, wie ein einzelner Lieblingssong die unterschiedlichsten Gefühlswelten entstehen lassen kann und jede Folge zeigt, Du bist nicht alleine. Die Lieblingssongs kommen dabei aus den unterschiedlichsten Jahrzehnten. Du hast auch einen Lieblingssong und möchtest deine Geschichte mit anderen teilen? Dann bewirb dich per E-Mail an <strong><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02726d7176426f676b6c6e6b67606e6b6c6571716d6c652c616d6f">[email protected]</a></strong> oder kommentiere in den sozialen Medien.</p><p>Folge unserem Podcast und Du bleibst informiert. Vielen Dank!</p><hr/><p> Hosted on Acast. See <a href="https://acast.com/privacy" rel="noopener noreferrer" target="_blank">acast.com/privacy</a> for more information.</p> 512 </div> 513 514 515 516 517 518 519 520 521 522 <div class="mt-8"> 523 <h2 class="text-xl font-semibold text-theme-text font-heading mb-4">Anhören auf</h2> 524 <div class="flex flex-wrap gap-3"> 525 526 <a href="https://podcasts.apple.com/podcast/id1702322210" target="_blank" rel="noopener" 527 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 528 Apple Podcasts 529 </a> 530 531 <a href="https://open.spotify.com/show/4OzPYViP6f1X2Md7YwWOh1" target="_blank" rel="noopener" 532 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 533 Spotify 534 </a> 535 536 <a href="https://overcast.fm/itunes1702322210" target="_blank" rel="noopener" 537 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 538 Overcast 539 </a> 540 541 <a href="https://castbox.fm/vic/1702322210" target="_blank" rel="noopener" 542 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 543 Castbox 544 </a> 545 546 <a href="https://www.goodpods.com/podcasts-aid/1702322210" target="_blank" rel="noopener" 547 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 548 Goodpods 549 </a> 550 551 <a href="https://castro.fm/itunes/1702322210" target="_blank" rel="noopener" 552 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 553 Castro 554 </a> 555 556 <a href="https://moon.fm/itunes/1702322210" target="_blank" rel="noopener" 557 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 558 Moon FM 559 </a> 560 561 <a href="https://pca.st/itunes/1702322210" target="_blank" rel="noopener" 562 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 563 Pocket Casts 564 </a> 565 566 <a href="https://www.podbean.com/itunes/1702322210" target="_blank" rel="noopener" 567 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 568 Podbean 569 </a> 570 571 <a href="https://podcastaddict.com/feed/https%3A%2F%2Ffeeds.acast.com%2Fpublic%2Fshows%2F6566063e77cca90012d2a808" target="_blank" rel="noopener" 572 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 573 Podcast Addict 574 </a> 575 576 <a href="https://www.podcastrepublic.net/podcast/1702322210" target="_blank" rel="noopener" 577 class="inline-flex items-center px-4 py-2 rounded-lg bg-theme-border text-theme-text hover:bg-theme-primary hover:text-theme-bg transition"> 578 Podcast Republic 579 </a> 580 581 </div> 582 </div> 583 584 </div> 585 </article> 586</div>
vendor: 192 bytes, lines 586-598
586 587 588 589 590 591 592 593 594 595 596 597 598 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
598<script id="pv-boost-head" type="application/json">{"canonical": "https://www.meinlieblingssong.com/about/", "description": "Learn more about Mein Lieblingssong. Du erinnerst Dich an einen ganz besonderen Song? Bei uns h\u00f6rst Du pers\u00f6nliche Erinnerungen und...", "og": {"title": "About | Mein Lieblingssong", "description": "Learn more about Mein Lieblingssong.", "image": "https://assets.pippa.io/shows/6566063e77cca90012d2a808/1762346655073-2f6e488c-e59d-4ecd-8174-3057bd4c920e.jpeg", "url": "https://www.meinlieblingssong.com/about/", "type": "website"}, "twitter": {"title": "About | Mein Lieblingssong", "description": "Learn more about Mein Lieblingssong.", "image": "https://assets.pippa.io/shows/6566063e77cca90012d2a808/1762346655073-2f6e488c-e59d-4ecd-8174-3057bd4c920e.jpeg"}}</script>
598 599 </main> 600 601 602 603 604 605 606 607 608 609<footer class="relative mt-auto overflow-hidden border-t border-theme-border bg-theme-surface"> 610 <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-theme-primary/40" aria-hidden="true"></div> 611 612 <div class="relative mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8"> 613 614 <div class="text-center"> 615 <p class="font-heading text-4xl font-bold leading-[1.05] tracking-tight text-theme-text sm:text-5xl"> 616 Mein Lieblingssong 617 </p> 618 <p class="mx-auto mt-4 max-w-xl text-sm leading-relaxed text-theme-text-muted sm:text-base"> 619 Du erinnerst Dich an einen ganz besonderen Song? Bei uns hörst Du persönliche Erinnerungen und starke Emotionen zu groÃartigen Songs - weit über 150 Folgen und weit über ⦠620 </p> 621 622 </div> 623 624 625 <nav class="mt-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm font-medium"> 626 <a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/" class="tap-target-mobile text-theme-text transition-colors hover:text-theme-primary">Startseite</a> 627 <span aria-hidden="true" class="hidden h-3 w-px bg-theme-border sm:block"></span><a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/episodes/" class="tap-target-mobile text-theme-text transition-colors hover:text-theme-primary">Folgen</a> 628 <span aria-hidden="true" class="hidden h-3 w-px bg-theme-border sm:block"></span><a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/about/" class="tap-target-mobile text-theme-text transition-colors hover:text-theme-primary">Ãber</a> 629 <span aria-hidden="true" class="hidden h-3 w-px bg-theme-border sm:block"></span><a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/follow/" class="tap-target-mobile text-theme-text transition-colors hover:text-theme-primary">Abonnieren</a> 630 631 632 633 634 </nav> 635 636 637 638 <div class="mt-8 flex flex-wrap items-center justify-center gap-2"> 639 640 <a href="https://podcasts.apple.com/podcast/id1702322210" target="_blank" rel="noopener" 641 class="tap-target-mobile inline-flex items-center gap-1.5 rounded-full border border-theme-border bg-theme-bg/50 px-3 py-1.5 text-xs text-theme-text-muted transition-colors hover:border-theme-primary hover:text-theme-primary"> 642 643 644 645<img src="/static/images/platform-logos/apple.81fb483bafac.svg" alt="" class="w-3.5 h-3.5 rounded shrink-0" loading="lazy"> 646 647 648 <span>Apple Podcasts</span> 649 </a> 650 651 <a href="https://open.spotify.com/show/4OzPYViP6f1X2Md7YwWOh1" target="_blank" rel="noopener" 652 class="tap-target-mobile inline-flex items-center gap-1.5 rounded-full border border-theme-border bg-theme-bg/50 px-3 py-1.5 text-xs text-theme-text-muted transition-colors hover:border-theme-primary hover:text-theme-primary"> 653 654 655 656<img src="/static/images/platform-logos/spotify.14dc2fed5342.svg" alt="" class="w-3.5 h-3.5 rounded shrink-0" loading="lazy"> 657 658 659 <span>Spotify</span> 660 </a> 661 662 <a href="https://overcast.fm/itunes1702322210" target="_blank" rel="noopener" 663 class="tap-target-mobile inline-flex items-center gap-1.5 rounded-full border border-theme-border bg-theme-bg/50 px-3 py-1.5 text-xs text-theme-text-muted transition-colors hover:border-theme-primary hover:text-theme-primary"> 664 665 666 667<img src="/static/images/platform-logos/overcast.7dd3d35b2224.svg" alt="" class="w-3.5 h-3.5 rounded shrink-0" loading="lazy"> 668 669 670 <span>Overcast</span> 671 </a> 672 673 <a href="https://castbox.fm/vic/1702322210" target="_blank" rel="noopener" 674 class="tap-target-mobile inline-flex items-center gap-1.5 rounded-full border border-theme-border bg-theme-bg/50 px-3 py-1.5 text-xs text-theme-text-muted transition-colors hover:border-theme-primary hover:text-theme-primary"> 675 676 677 678<img src="/static/images/platform-logos/castbox.b6404094c983.svg" alt="" class="w-3.5 h-3.5 rounded shrink-0" loading="lazy"> 679 680
681 <span>Castbox</span> 682 </a> 683 684 <a href="https://www.goodpods.com/podcasts-aid/1702322210" target="_blank" rel="noopener" 685 class="tap-target-mobile inline-flex items-center gap-1.5 rounded-full border border-theme-border bg-theme-bg/50 px-3 py-1.5 text-xs text-theme-text-muted transition-colors hover:border-theme-primary hover:text-theme-primary"> 686 687 688 689<img src="/static/images/platform-logos/goodpods.d8bfe98d88ce.svg" alt="" class="w-3.5 h-3.5 rounded shrink-0" loading="lazy"> 690 691 692 <span>Goodpods</span> 693 </a> 694 695 <a href="https://castro.fm/itunes/1702322210" target="_blank" rel="noopener" 696 class="tap-target-mobile inline-flex items-center gap-1.5 rounded-full border border-theme-border bg-theme-bg/50 px-3 py-1.5 text-xs text-theme-text-muted transition-colors hover:border-theme-primary hover:text-theme-primary"> 697 698 699 700<img src="/static/images/platform-logos/castro.932428c9f6cf.svg" alt="" class="w-3.5 h-3.5 rounded shrink-0" loading="lazy"> 701 702 703 <span>Castro</span> 704 </a> 705 706 707 708<a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/follow/" class="tap-target-mobile inline-flex items-center gap-1.5 rounded-full border border-theme-border bg-theme-bg px-3 py-1.5 text-xs text-theme-text-muted transition-colors hover:border-theme-primary hover:text-theme-primary"> 709 <span>Alle Podcast-Apps</span> 710 <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" width="24" height="24" class="h-3.5 w-3.5 shrink-0"> 711 <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /> 712</svg> 713</a> 714 715 716 </div> 717 718 719 720 721 722 723 724 </div> 725 726 727 <div class="relative border-t border-theme-border bg-theme-bg"> 728 <div class="mx-auto flex max-w-7xl flex-col items-start justify-between gap-2 px-4 py-4 text-xs text-theme-text-subtle sm:flex-row sm:items-center sm:px-6 lg:px-8"> 729 730 731 732 733<p>© Mein Lieblingssong. 734 735 736 737 738 739Erstellt mit <a href="https://podview.com/?ref=site&s=meinlieblingssong" class="text-theme-primary hover:opacity-80 transition">PodView</a>. <a href="https://podseo.com/?ref=site&s=meinlieblingssong" class="text-theme-primary hover:opacity-80 transition">Podcast-SEO verbessern</a> 740</p> 741<a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="/privacy/" class="tap-target-mobile hover:text-theme-primary transition">Datenschutzerklärung</a> 742 743 </div> 744 </div> 745</footer> 746 747 748 749 </div> 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767<div id="pv-showcase-modal" hidden role="dialog" aria-modal="true" aria-labelledby="pv-showcase-modal-title"> 768 <style> 769 #pv-showcase-modal[hidden] { display: none !important; } 770 #pv-showcase-modal { 771 position: fixed; inset: 0; z-index: 2147483000; 772 display: flex; align-items: center; justify-content: center; 773 background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); 774 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 775 animation: pv-fade-in 240ms ease-out; 776 } 777 @keyframes pv-fade-in { from { opacity: 0; } to { opacity: 1; } } 778 @keyframes pv-pop-in { 779 from { opacity: 0; transform: translateY(20px) scale(0.96); } 780 to { opacity: 1; transform: translateY(0) scale(1); } 781 } 782 #pv-showcase-modal .pv-card { 783 position: relative; 784 max-width: 440px; width: calc(100% - 32px); 785 background: #ffffff; color: #111827; 786 border-radius: 16px; padding: 32px 28px 28px; 787 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); 788 animation: pv-pop-in 280ms cubic-bezier(0.16, 1, 0.3, 1); 789 } 790 #pv-showcase-modal .pv-close { 791 position: absolute; top: 12px; right: 12px; 792 width: 32px; height: 32px; border: 0; border-radius: 50%; 793 background: transparent; cursor: pointer; color: #6b7280; 794 font-size: 20px; line-height: 1; display: flex; 795 align-items: center; justify-content: center; 796 } 797 #pv-showcase-modal .pv-close:hover { background: #f3f4f6; color: #111827; } 798 #pv-showcase-modal .pv-eyebrow { 799 font-size: 11px; font-weight: 700; letter-spacing: 0.08em; 800 text-transform: uppercase; color: #f97316; margin-bottom: 12px; 801 } 802 #pv-showcase-modal h2 { 803 margin: 0 0 12px; font-size: 24px; font-weight: 700; 804 line-height: 1.2; color: #111827; 805 } 806 #pv-showcase-modal p { 807 margin: 0 0 24px; font-size: 15px; line-height: 1.55; 808 color: #4b5563; 809 } 810 #pv-showcase-modal .pv-cta { 811 display: inline-flex; align-items: center; justify-content: center; 812 width: 100%; padding: 14px 20px; 813 background: #f97316; color: #fff; 814 border-radius: 10px; text-decoration: none; 815 font-size: 15px; font-weight: 600; 816 transition: background 160ms ease; 817 } 818 #pv-showcase-modal .pv-cta:hover { background: #ea580c; } 819 #pv-showcase-modal .pv-fineprint { 820 margin-top: 14px; font-size: 12px; color: #9ca3af; text-align: center; 821 } 822 </style> 823 <div class="pv-card" role="document"> 824 <button type="button" class="pv-close" aria-label="Close" data-pv-dismiss>×</button> 825 <div class="pv-eyebrow">Built with PodView</div> 826 <h2 id="pv-showcase-modal-title">Want a podcast site like this?</h2> 827 <p>
827Build your own in under 5 minutes. Preview before you sign up â no credit card needed.</p> 828 <a class="pv-cta" 829 href="https://podview.com/onboarding/get-started/?utm_source=podview&utm_medium=showcase_modal&utm_campaign=showcase" 830 data-pv-cta 831 rel="noopener"> 832 Create your free site → 833 </a> 834 <div class="pv-fineprint">Powered by PodView</div> 835 </div> 836</div>
837<script> 838(function () { 839 var STORAGE_KEY = "pv_showcase_modal_seen"; 840 var DELAY_MS = 25000; 841 var SCROLL_THRESHOLD = 0.5; 842 843 try { 844 var params = new URLSearchParams(window.location.search); 845 if (params.get("ref") !== "showcase") return; 846 if (window.localStorage && window.localStorage.getItem(STORAGE_KEY)) return; 847 } catch (e) { 848 return; 849 } 850 851 var modal = document.getElementById("pv-showcase-modal"); 852 if (!modal) return; 853 854 var shown = false; 855 function show() { 856 if (shown) return; 857 shown = true; 858 modal.hidden = false; 859 document.body.style.overflow = "hidden"; 860 try { window.localStorage.setItem(STORAGE_KEY, "1"); } catch (e) {} 861 } 862 function dismiss() { 863 modal.hidden = true; 864 document.body.style.overflow = ""; 865 window.removeEventListener("scroll", onScroll); 866 window.removeEventListener("keydown", onKey); 867 if (timer) clearTimeout(timer); 868 } 869 function onScroll() { 870 var top = window.pageYOffset || document.documentElement.scrollTop; 871 var docH = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight; 872 if (docH > 0 && top / docH >= SCROLL_THRESHOLD) show(); 873 } 874 function onKey(e) { if (e.key === "Escape") dismiss(); } 875 876 modal.addEventListener("click", function (e) { 877 if (e.target === modal) dismiss(); 878 if (e.target.closest("[data-pv-dismiss]")) dismiss(); 879 if (e.target.closest("[data-pv-cta]")) { 880 // Keep the modal flag set; visitor heading off-site. 881 try { window.localStorage.setItem(STORAGE_KEY, "1"); } catch (err) {} 882 } 883 }); 884 885 var timer = setTimeout(show, DELAY_MS); 886 window.addEventListener("scroll", onScroll, { passive: true }); 887 window.addEventListener("keydown", onKey); 888})(); 889</script>
889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911<style> 912 /* ---- Surface -------------------------------------------------------- */ 913 .pv-pp { 914 position: fixed; 915 inset-inline: 0; 916 bottom: 0; 917 z-index: 45; 918 background: var(--color-background); 919 border-top: 1px solid color-mix(in srgb, var(--color-text) 18%, var(--color-background)); 920 color: var(--color-text); 921 font-family: var(--font-body); 922 /* Reserve the device's bottom inset so the rail never sits under the 923 iOS home indicator. */ 924 padding-bottom: env(safe-area-inset-bottom, 0px); 925 box-shadow: 0 -8px 30px -24px color-mix(in srgb, var(--color-text) 60%, transparent); 926 } 927 928 /* The bar is fixed, so it occludes whatever sits at the bottom of the document. 929 The clearance that fixes that is NOT here â it is the `body::after` flow spacer 930 in `nav/_player_offset.html`, which every nav style includes and 931 `test_nav_templates.py` asserts over the nav registry. 932 933 There was briefly a `.pv-pp-spacer` div here as well. Two independent fixes for 934 the same "footer sits under the bar" bug, both body-level children reserving the 935 same `--pv-player-offset`, so pressing play reserved TWICE the bar height (and on 936 mobile + `floating`, twice on top of that nav's own 6rem). One contract, one 937 spacer: keep the one the nav registry is tested against. */ 938 939 /* Slide up from the bottom edge on first play. The element is display:none 940 until JS reveals it, so the animation only ever runs on a real open. */ 941 @keyframes pv-pp-rise { 942 from { transform: translateY(100%); } 943 to { transform: translateY(0); } 944 } 945 .pv-pp[data-animate="in"] { 946 animation: pv-pp-rise 200ms ease-out both; 947 } 948 @keyframes pv-pp-sheet { 949 from { transform: translateY(24px); opacity: 0.6; } 950 to { transform: translateY(0); opacity: 1; } 951 } 952 953 /* ---- Bar layout ----------------------------------------------------- */ 954 .pv-pp-bar { 955 display: flex; 956 align-items: center; 957 gap: 0.75rem; 958 padding: 0.5rem 0.75rem; 959 min-height: 60px; 960 } 961 @media (min-width: 640px) { 962 .pv-pp-bar { gap: 1rem; padding: 0.625rem 1rem; } 963 } 964 965 /* Every control keeps its intrinsic width. The public <body> inherits 966 `overflow-wrap: anywhere`, which otherwise shatters short labels like 967 "1.5x" and "-15" mid-word once flex squeezes them. */ 968 .pv-pp-bar button, 969 .pv-pp-time, 970 .pv-pp-chapter, 971 .pv-pp-speed { 972 flex-shrink: 0; 973 white-space: nowrap; 974 } 975 976 /* ---- Touch targets --------------------------------------------------- */ 977 .pv-pp-btn { 978 display: inline-flex; 979 align-items: center; 980 justify-content: center; 981 min-width: 44px; 982 min-height: 44px; 983 border-radius: 0.5rem; 984 color: color-mix(in srgb, var(--color-text) 70%, var(--color-background)); 985 transition: color 150ms ease, background-color 150ms ease; 986 } 987 .pv-pp-btn:hover { 988 color: var(--color-primary); 989 background: color-mix(in srgb, var(--color-text) 8%, transparent); 990 } 991 .pv-pp-btn:focus-visible { 992 outline: 2px solid var(--color-primary); 993 outline-offset: 2px; 994 } 995 .pv-pp-play { 996 width: 44px; 997 height: 44px; 998 border-radius: 9999px; 999 background: var(--color-primary); 1000 color: var(--color-background); 1001 } 1002 .pv-pp-play:hover { 1003 background: var(--color-primary); 1004 /* Restate the colour. `.pv-pp-btn:hover` sets `color: var(--color-primary)`, 1005 which is right for the ghost buttons sitting on the bar's own surface and 1006 catastrophic for this one: the play/pause button's BACKGROUND is 1007 --color-primary, so inheriting that hover colour painted the glyph in the 1008 same colour as the disc under it and the icon vanished on hover â on every 1009 theme, because both sides of the collision are the same token. */ 1010 color: var(--color-background); 1011 opacity: 0.9; 1012 } 1013 1014 /* ---- Meta block ------------------------------------------------------ */ 1015 .pv-pp-meta { 1016 display: flex; 1017 align-items: center; 1018 gap: 0.625rem; 1019 min-width: 0; 1020 flex: 1 1 auto; 1021 /* Containing block for the mobile expand overlay. Without it the overlay's 1022 `inset: 0` resolved against .pv-pp-bar (which IS positioned), so an 1023 invisible button covered the whole bar and â being the only positioned 1024 sibling â painted over the static play/skip/speed/dismiss buttons. 1025 Every transport tap below 768px opened the sheet instead. */ 1026 position: relative; 1027 } 1028 .pv-pp-art { 1029 width: 40px; 1030 height: 40px; 1031 border-radius: 0.375rem; 1032 object-fit: cover; 1033 flex-shrink: 0; 1034 background: color-mix(in srgb, var(--color-text) 10%, var(--color-background)); 1035 } 1036 .pv-pp-art-fallback { 1037 display: flex; 1038 align-items: center; 1039 justify-content: center; 1040 color: var(--color-primary); 1041 } 1042 .pv-pp-titles { min-width: 0; } 1043 /* min-w-0 + truncate: the title is the ONLY element allowed to give up width. */ 1044 .pv-pp-title { 1045 font-size: 0.8125rem; 1046 font-weight: 600; 1047 line-height: 1.3; 1048 overflow: hidden; 1049 text-overflow: ellipsis; 1050 white-space: nowrap; 1051 color: var(--color-text); 1052 } 1053 .pv-pp-title a { color: inherit; text-decoration: none; } 1054 .pv-pp-title a:hover { color: var(--color-primary); } 1055 .pv-pp-show { 1056 font-size: 0.6875rem; 1057 line-height: 1.3; 1058 overflow: hidden; 1059 text-overflow: ellipsis; 1060 white-space: nowrap; 1061 color: color-mix(in srgb, var(--color-text) 65%, var(--color-background)); 1062 } 1063 1064 /* ---- Transport / scrubber -------------------------------------------- */ 1065 /* The transport NEVER shrinks, at any width. 1066 It used to be `flex: 2 1 0%;
1066 min-width: 0`, which let it collapse to literally 1067 0px whenever the title was long enough to eat the row â and because its 1068 children carry `flex-shrink: 0` (they must, or "1.5x" shatters mid-word) they 1069 kept their 44px and painted OUTSIDE the zero-width box, straight over the 1070 speed, chapters and dismiss buttons that follow it. A long episode title put 1071 "1x" and the dismiss cross on top of the play button. 1072 `.pv-pp-meta` already carries `flex: 1 1 auto; min-width: 0`, so it is the one 1073 that gives way and the title ellipsises â which is the right thing to lose. 1074 The `max-width: 767px` block had this rule all along; it was only ever missing 1075 on desktop. */ 1076 .pv-pp-transport { 1077 display: flex; 1078 align-items: center; 1079 gap: 0.625rem; 1080 flex: 0 0 auto; 1081 } 1082 .pv-pp-scrubwrap { 1083 display: flex; 1084 align-items: center; 1085 gap: 0.5rem; 1086 flex: 1 1 auto; 1087 min-width: 0; 1088 } 1089 .pv-pp-time { 1090 font-variant-numeric: tabular-nums; 1091 font-size: 0.6875rem; 1092 color: color-mix(in srgb, var(--color-text) 65%, var(--color-background)); 1093 } 1094 .pv-pp-live { 1095 font-size: 0.6875rem; 1096 font-weight: 700; 1097 letter-spacing: 0.04em; 1098 color: var(--color-primary); 1099 } 1100 .pv-pp-speed { 1101 font-family: ui-monospace, monospace; 1102 font-size: 0.6875rem; 1103 font-weight: 600; 1104 padding-inline: 0.5rem; 1105 } 1106 .pv-pp-chapter { 1107 font-size: 0.6875rem; 1108 max-width: 14ch; 1109 overflow: hidden; 1110 text-overflow: ellipsis; 1111 color: color-mix(in srgb, var(--color-text) 65%, var(--color-background)); 1112 } 1113 .pv-pp-actions { display: flex; align-items: center; gap: 0.125rem; flex-shrink: 0; } 1114 1115 /* ---- Spinner --------------------------------------------------------- */ 1116 @keyframes pv-pp-spin { to { transform: rotate(360deg); } } 1117 .pv-pp-spinner { 1118 /* A bare <span> is an inline box, and width/height do not apply to one â 1119 the spinner rendered as a 2px sliver of border. It needs a display rule, 1120 which in turn means it needs the [hidden] override below. */ 1121 display: inline-block; 1122 width: 18px; 1123 height: 18px; 1124 border-radius: 9999px; 1125 border: 2px solid color-mix(in srgb, var(--color-background) 55%, transparent); 1126 border-top-color: var(--color-background); 1127 animation: pv-pp-spin 700ms linear infinite; 1128 } 1129 1130 /* The same spinner for a list control (card, featured CTA, hero play link), 1131 which sizes it with the Tailwind box the icon it replaces was using. It 1132 borrows the button's own colour instead of naming a token, because these 1133 controls sit on every surface a theme has: a filled --color-primary disc, 1134 a bare text link, a white overlay on artwork. */ 1135 .pv-card-spinner { 1136 display: inline-block; 1137 border-radius: 9999px; 1138 border: 2px solid color-mix(in srgb, currentColor 30%, transparent); 1139 border-top-color: currentColor; 1140 animation: pv-pp-spin 700ms linear infinite; 1141 } 1142 .pv-card-spinner[hidden] { display: none; } 1143 1144 @media (prefers-reduced-motion: reduce) { 1145 .pv-pp-spinner, .pv-card-spinner { animation-duration: 2.4s; } 1146 } 1147 1148 /* ---- State-driven visibility ---------------------------------------- 1149 Single source of truth: the element's data-state / data-live attributes. 1150 JS only writes the attribute; CSS decides what shows. */ 1151 .pv-pp [data-when] { display: none; } 1152 .pv-pp[data-state="loading"] [data-when~="loading"], 1153 .pv-pp[data-state="playing"] [data-when~="playing"], 1154 .pv-pp[data-state="paused"] [data-when~="paused"], 1155 .pv-pp[data-state="error"] [data-when~="error"], 1156 .pv-pp[data-state="ended"] [data-when~="ended"] { display: inline-flex; } 1157 1158 /* The error message replaces the title block, so it is a block not a flex item. */ 1159 .pv-pp[data-state="error"] [data-when~="error"].pv-pp-errmsg { display: block; } 1160 .pv-pp[data-state="error"] .pv-pp-titles { display: none; } 1161 1162 /* Live / non-finite audio: no meaningful position, so no scrubber, no seek, 1163 no chapters, no speed. */ 1164 .pv-pp[data-live="1"] .pv-pp-scrubwrap, 1165 .pv-pp[data-live="1"] .pv-pp-seek, 1166 .pv-pp[data-live="1"] .pv-pp-chapter, 1167 .pv-pp[data-live="1"] .pv-pp-chapters-btn, 1168 .pv-pp[data-live="1"] .pv-pp-speed { display: none; } 1169 .pv-pp-livebadge { display: none; } 1170 .pv-pp[data-live="1"] .pv-pp-livebadge { display: inline-flex; } 1171 1172 /* Error state disables position controls without hiding the bar. */ 1173 .pv-pp[data-state="error"] .pv-pp-scrubwrap, 1174 .pv-pp[data-state="error"] .pv-pp-seek { display: none; } 1175 1176 /* ---- Narrow-width collapse priority --------------------------------- 1177 Protected at every width: artwork, title, play/pause, scrubber. 1178 Shed in order: chapter label -> speed -> show name -> +-15/30 -> times. */ 1179 @media (max-width: 1023px) { 1180 .pv-pp-chapter { display: none; } 1181 } 1182 @media (max-width: 899px) { 1183 .pv-pp-speed { display: none; } 1184 } 1185 @media (max-width: 767px) { 1186 .pv-pp-show { display: none; } 1187 } 1188 @media (max-width: 639px) { 1189 .pv-pp-seek { display: none; } 1190 } 1191 /* The time labels go at the SAME breakpoint the scrubber leaves the flex row 1192 (767px), not at 479px. Between 480 and 767 the scrubwrap is already the 1193 absolutely-positioned 12px full-bleed strip across the bar's top edge, so the 1194 labels were being laid out inside a 12px sliver at the extreme screen edges â 1195 clipped by the viewport on both sides and painting over the page content above 1196 the bar. Two rules that must move together had drifted apart by 288px. */ 1197 @media (max-width: 767px) { 1198 .pv-pp-time { display: none; } 1199 } 1200 1201 /* Mini-player scrubber. Once the time labels and skips are gone there is not
1202 enough inline room left for a usable track â it collapsed to a ~10px sliver, 1203 which is the one control the collapse priority says must never be lost. So 1204 below the sheet breakpoint it leaves the flex row entirely and becomes a 1205 full-bleed progress line across the top edge of the bar. */ 1206 @media (max-width: 767px) { 1207 .pv-pp:not([data-expanded="1"]) .pv-pp-bar { position: relative; } 1208 .pv-pp:not([data-expanded="1"]) .pv-pp-scrubwrap { 1209 position: absolute; 1210 top: 0; 1211 left: 0; 1212 right: 0; 1213 width: 100%; 1214 gap: 0; 1215 } 1216 .pv-pp:not([data-expanded="1"]) .pv-pp-scrubwrap .public-audio-scrubber { 1217 height: 12px; 1218 margin: 0; 1219 } 1220 /* Shrink the handle so it sits fully inside the bar instead of bulging over 1221 the hairline top border as a stray floating dot. 1222 1223 No negative margin. The strip is the input's own 12px box at `top: 0` of a 1224 bar with `overflow: visible`, so `margin-top: -3px` lifted a 10px handle 1225 three pixels ABOVE the bar and painted it on the page content â the exact 1226 "stray floating dot" the shrink was added to stop. Left to itself the 1227 handle centres in the 12px track, which is what the rule wanted. */ 1228 /* Chrome centres the thumb on the RUNNABLE TRACK, not on the input's box, and 1229 an unstyled track does not inherit the input's 12px â so the thumb centred 1230 on something taller and sat proudly above the bar. Give the track the same 1231 height as the input and the 10px thumb lands in the middle of it. */ 1232 .pv-pp:not([data-expanded="1"]) .pv-pp-scrubwrap .public-audio-scrubber::-webkit-slider-runnable-track { 1233 height: 12px; 1234 } 1235 .pv-pp:not([data-expanded="1"]) .pv-pp-scrubwrap .public-audio-scrubber::-webkit-slider-thumb { 1236 width: 10px; 1237 height: 10px;
1238 margin-top: 1px; /* (12 - 10) / 2 â Chrome needs it stated for a custom thumb */ 1239 } 1240 .pv-pp:not([data-expanded="1"]) .pv-pp-scrubwrap .public-audio-scrubber::-moz-range-track { 1241 height: 12px; 1242 } 1243 .pv-pp:not([data-expanded="1"]) .pv-pp-scrubwrap .public-audio-scrubber::-moz-range-thumb { 1244 width: 10px; 1245 height: 10px; 1246 } 1247 /* Belt and braces: nothing in the mini bar may paint outside it. Scoped to 1248 the collapsed state so the expanded sheet is never clipped. A clip is a 1249 backstop, though â it turns an overflowing handle into a half-moon rather 1250 than fixing it, which is why the geometry above has to be right on its own. */ 1251 .pv-pp:not([data-expanded="1"]) .pv-pp-bar { overflow: hidden; } 1252 } 1253 1254 /* ---- Mobile: mini bar <-> bottom sheet -------------------------------- */ 1255 /* The scrim is a CHILD of .pv-pp, which is itself a stacking context (fixed + 1256 z-index). So these z-indexes are relative to the bar, not the page: the scrim 1257 needs to sit UNDER the bar's own content but still over the whole document, 1258 which it does because the entire subtree paints at the bar's z-index. Giving 1259 it a page-level value (44) made it paint over the sheet it was meant to sit 1260 behind, washing the sheet out. */ 1261 .pv-pp-scrim { 1262 position: fixed; 1263 inset: 0; 1264 /* Stop exactly at the top of the sheet. --pv-player-offset is the bar's own 1265 measured height (ResizeObserver), so it tracks the sheet as it grows â 1266 otherwise the scrim tints the sheet's surface and washes it out. */ 1267 bottom: var(--pv-player-offset, 0px); 1268 z-index: 0; 1269 background: color-mix(in srgb, var(--color-text) 45%, transparent); 1270 display: none; 1271 } 1272 .pv-pp[data-expanded="1"] .pv-pp-scrim { display: block; } 1273 .pv-pp-bar, 1274 .pv-pp-grabber, 1275 .pv-pp-chapters { position: relative; z-index: 1; } 1276 1277 .pv-pp-expand { display: none; } 1278 1279 /* A button carrying .pv-pp-btn cannot be hidden with the `hidden` property â 1280 the author `display: inline-flex` above beats the user-agent [hidden] rule. 1281 These two carry an author display rule, so they get an author hide rule. */ 1282 .pv-pp-btn[data-empty="1"] { display: none; } 1283 .pv-pp-art[hidden], 1284 .pv-pp-spinner[hidden] { display: none; } 1285 1286 @media (max-width: 767px) { 1287 /* The metadata block is the tap target that opens the sheet. */ 1288 .pv-pp-expand { display: block; } 1289 1290 .pv-pp[data-expanded="1"] { 1291 border-top-left-radius: 1rem; 1292 border-top-right-radius: 1rem; 1293 /* A short lift, NOT pv-pp-rise: the bar is already on screen, so 1294 re-running a translateY(100%) slide drops the sheet's lower half 1295 below the fold for the length of the animation. */ 1296 animation: pv-pp-sheet 200ms ease-out both; 1297 } 1298 /* Sheet layout: the SAME controls reflow into a taller stack â no second 1299 copy of the transport to drift out of sync. */ 1300 .pv-pp[data-expanded="1"] .pv-pp-bar { 1301 flex-direction: column; 1302 align-items: stretch; 1303 gap: 0.875rem; 1304 padding: 0.5rem 1.25rem 1.25rem; 1305 } 1306 .pv-pp[data-expanded="1"] .pv-pp-grabber { display: block; } 1307 .pv-pp[data-expanded="1"] .pv-pp-art { width: 96px; height: 96px; } 1308 .pv-pp[data-expanded="1"] .pv-pp-meta { flex-direction: column; text-align: center; gap: 0.75rem; } 1309 .pv-pp[data-expanded="1"] .pv-pp-title { white-space: normal; } 1310 /* Everything the narrow-width rules shed comes back inside the sheet. */ 1311 .pv-pp[data-expanded="1"] .pv-pp-show, 1312 .pv-pp[data-expanded="1"] .pv-pp-time, 1313 .pv-pp[data-expanded="1"] .pv-pp-speed, 1314 .pv-pp[data-expanded="1"] .pv-pp-chapter { display: block; } 1315 .pv-pp[data-expanded="1"] .pv-pp-seek { display: inline-flex; } 1316 .pv-pp[data-expanded="1"] .pv-pp-transport { flex-direction: column; gap: 0.75rem; } 1317 .pv-pp[data-expanded="1"] .pv-pp-scrubwrap { width: 100%; } 1318 .pv-pp[data-expanded="1"] .pv-pp-controls { justify-content: center; gap: 0.75rem; } 1319 } 1320 1321 .pv-pp-grabber { 1322 display: none; 1323 width: 36px; 1324 height: 4px; 1325 border-radius: 9999px; 1326 margin: 0.5rem auto 0; 1327 background: color-mix(in srgb, var(--color-text) 25%, var(--color-background)); 1328 } 1329 1330 /* ---- Reduced motion -------------------------------------------------- 1331 Instant appear. No slide, no spin. */ 1332 @media (prefers-reduced-motion: reduce) { 1333 .pv-pp[data-animate="in"], 1334 .pv-pp[data-expanded="1"] { animation: none; transform: none; opacity: 1; } 1335 .pv-pp-spinner { animation: none; } 1336 } 1337</style> 1338 1339<pv-persistent-player id="pv-persistent-player" 1340 class="pv-pp" 1341 data-state="idle" 1342 data-expanded="0" 1343 style="display:none" 1344 role="region" 1345 1346 data-label-play="Abspielen" 1347 data-label-pause="Pause" 1348 data-label-replay="Erneut abspielen" 1349 data-label-retry="Erneut versuchen" 1350 aria-label="Audioplayer"> 1351 1352 1353 <audio id="pv-persistent-audio" data-primary-audio data-role="audio" preload="metadata"></audio> 1354 1355 1356 <div class="pv-pp-scrim" data-role="scrim" aria-hidden="true"></div> 1357 1358 <div class="pv-pp-grabber" data-role="grabber" aria-hidden="true"></div> 1359 1360 <div class="pv-pp-bar"> 1361 1362 1363 <div class="pv-pp-meta"> 1364 <img class="pv-pp-art" data-role="artwork" src="" alt="" hidden> 1365 <div class="pv-pp-art pv-pp-art-fallback" data-role="artwork-fallback"> 1366 <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" width="24" height="24" class="w-5 h-5"> 1367 <path stroke-linecap="round" stroke-linejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /> 1368</svg> 1369 </div> 1370 1371 <div class="pv-pp-titles" data-role="titles"> 1372 1373 <div class="pv-pp-title" data-role="title"> 1374 <a hx-boost="true" hx-target="#pv-public-content" hx-select="#pv-public-content" hx-swap="outerHTML show:window:top" hx-push-url="true" href="#" data-role="permalink"></a> 1375 </div> 1376 <div class="pv-pp-show" data-role="show"></div> 1377 </div> 1378 1379 1380 <div class="pv-pp-errmsg" data-when="error" role="alert"> 1381 <div class="pv-pp-title">Diese Folge konnte nicht abgespielt werden</div> 1382 </div> 1383 1384 1385 <button type="button" 1386 class="pv-pp-expand" 1387 data-role="expand" 1388 aria-expanded="false" 1389 aria-label="Player-Details anzeigen" 1390 style="position:absolute;inset:0;width:100%;height:100%;opacity:0"></button> 1391 </div> 1392 1393 1394 <div class="pv-pp-transport"> 1395 <div class="pv-pp-controls" style="display:flex;align-items:center;gap:0.125rem"> 1396 <button type="button" class="pv-pp-btn pv-pp-seek" data-role="skip-back" 1397 aria-label="15 Sekunden zurückspulen" title="â15s"> 1398 1399<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> 1400 <path d="M11.7331 5.02519C11.3312 5.12558 10.9241 4.88118 10.8237 4.47932C10.7233 4.07746 10.9677 3.6703 11.3696 3.56991L11.7331 5.02519ZM17.1313 4.29303L17.3119 3.5651L17.3127 3.5653L17.1313 4.29303ZM22.7001 7.66158L23.2605 7.16308L23.2614 7.16415L22.7001 7.66158ZM25.3454 13.5545L26.0902 13.4656L26.0903 13.4664L25.3454 13.5545ZM24.1853 19.9886L24.8525 20.3312L24.8525 20.3312L24.1853 19.9886ZM10.9484 26.0337L11.1259 25.305L11.1264 25.3051L10.9484 26.0337ZM2.69045 14.5853L1.94297 14.5238L1.94299 14.5236L2.69045 14.5853ZM4.51243 7.99796C4.76893 7.67272 5.24053 7.617 5.56576 7.87351C5.891 8.13001 5.94671 8.60161 5.69021 8.92684L4.51243 7.99796ZM12.0777 4.83186C11.7826 5.12254 11.3077 5.11896 11.017 4.82387C10.7263 4.52877 10.7299 4.05391 11.025 3.76324L12.0777 4.83186ZM14.3208 0.516822C14.6159 0.226146 15.0907 0.229727 15.3814 0.52482C15.6721 0.819914 15.6685 1.29477 15.3734 1.58545L14.3208 0.516822ZM11.0252 4.832C10.73 4.5414 10.7263 4.06654 11.0169 3.77137C11.3075 3.4762 11.7823 3.4725 12.0775 3.7631L11.0252 4.832ZM15.2871 6.92302C15.5823 7.21362 15.586 7.68847 15.2954 7.98364C15.0048 8.27881 14.53 8.28252 14.2348 7.99192L15.2871 6.92302ZM11.3696 3.56991C13.3202 3.08262 15.3605 3.08097 17.3119 3.5651L16.9507 5.02096C15.2373 4.59588 13.4458 4.59733 11.7331 5.02519L11.3696 3.56991ZM17.3127 3.5653C19.6123 4.13849 21.6853 5.39244 23.2605 7.16308L22.1398 8.16009C20.7653 6.61508 18.9565 5.52092 16.9499 5.02076L17.3127 3.5653ZM23.2614 7.16415C24.8242 8.9275 25.8111 11.1261 26.0902 13.4656L24.6007 13.6433C24.3578 11.6071 23.4989 9.69369 22.1388 8.15902L23.2614 7.16415ZM26.0903 13.4664C26.3692 15.8268 25.9383 18.2169 24.8525 20.3312L23.5181 19.6459C24.4677 17.7969 24.8446 15.7068 24.6006 13.6425L26.0903 13.4664ZM24.8525 20.3312C22.2111 25.4741 16.387 28.1339 10.7705 26.7623L11.1264 25.3051C16.0687 26.5121 21.1938 24.1715 23.5182 19.6459L24.8525 20.3312ZM10.771 26.7624C5.21828 25.41 1.47425 20.2196 1.94297 14.5238L3.43792 14.6469C3.02973 19.6071 6.29027 24.1273 11.1259 25.305L10.771 26.7624ZM1.94299 14.5236C2.1396 12.1432 3.0333 9.87342 4.51243 7.99796L5.69021 8.92684C4.39364 10.5
1400708 3.61024 12.5604 3.4379 14.6471L1.94299 14.5236ZM11.025 3.76324L14.3208 0.516822L15.3734 1.58545L12.0777 4.83186L11.025 3.76324ZM12.0775 3.7631L15.2871 6.92302L14.2348 7.99192L11.0252 4.832L12.0775 3.7631Z" fill="currentColor"/> 1401 <path d="M10.9275 18.7299V13.253H10.8507L9.21032 14.4234V13.4292L10.9275 12.2091H11.9398V18.7299H10.9275ZM15.8624 18.8881C14.579 18.8881 13.6933 18.0882 13.6029 17.0308L13.5984 16.9721H14.5474L14.5519 17.0082C14.6378 17.5821 15.1575 18.0385 15.8714 18.0385C16.6758 18.0385 17.2362 17.4646 17.2362 16.6467V16.6377C17.2362 15.8333 16.6668 15.2639 15.8805 15.2639C15.4828 15.2639 15.1439 15.3814 14.8863 15.6164C14.7688 15.7203 14.6649 15.8468 14.5881 15.996H13.7159L14.0413 12.2091H17.8327V13.0677H14.8366L14.6378 15.1464H14.7146C14.9903 14.7081 15.5009 14.455 16.1019 14.455C17.3266 14.455 18.2032 15.3678 18.2032 16.6196V16.6286C18.2032 17.9662 17.2362 18.8881 15.8624 18.8881Z" fill="currentColor"/> 1402</svg> 1403 1404 </button> 1405 1406 <button type="button" class="pv-pp-btn pv-pp-play" data-role="play" 1407 aria-label="Abspielen"> 1408 <span data-role="play-icon"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="w-5 h-5"> 1409 <path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /> 1410</svg></span> 1411 <span data-role="pause-icon" hidden><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="w-5 h-5"> 1412 <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd" /> 1413</svg></span> 1414 1415 <span data-role="replay-icon" hidden><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="w-5 h-5"> 1416 <path fill-rule="evenodd" d="M4.755 10.059a7.5 7.5 0 0 1 12.548-3.364l1.903 1.903h-3.183a.75.75 0 1 0 0 1.5h4.992a.75.75 0 0 0 .75-.75V4.356a.75.75 0 0 0-1.5 0v3.18l-1.9-1.9A9 9 0 0 0 3.306 9.67a.75.75 0 1 0 1.45.388Zm15.408 3.352a.75.75 0 0 0-.919.53 7.5 7.5 0 0 1-12.548 3.364l-1.902-1.903h3.183a.75.75 0 0 0 0-1.5H2.984a.75.75 0 0 0-.75.75v4.992a.75.75 0 0 0 1.5 0v-3.18l1.9 1.9a9 9 0 0 0 15.059-4.035.75.75 0 0 0-.53-.918Z" clip-rule="evenodd" /> 1417</svg></span> 1418 1419 <span data-role="retry-icon" hidden><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="24" height="24" class="w-5 h-5"> 1420 <path fill-rule="evenodd" d="M4.755 10.059a7.5 7.5 0 0 1 12.548-3.364l1.903 1.903h-3.183a.75.75 0 1 0 0 1.5h4.992a.75.75 0 0 0 .75-.75V4.356a.75.75 0 0 0-1.5 0v3.18l-1.9-1.9A9 9 0 0 0 3.306 9.67a.75.75 0 1 0 1.45.388Zm15.408 3.352a.75.75 0 0 0-.919.53 7.5 7.5 0 0 1-12.548 3.364l-1.902-1.903h3.183a.75.75 0 0 0 0-1.5H2.984a.75.75 0 0 0-.75.75v4.992a.75.75 0 0 0 1.5 0v-3.18l1.9 1.9a9 9 0 0 0 15.059-4.035.75.75 0 0 0-.53-.918Z" clip-rule="evenodd" /> 1421</svg></span> 1422 <span class="pv-pp-spinner" data-role="spinner" hidden></span> 1423 </button> 1424 1425 <button type="button" class="pv-pp-btn pv-pp-seek" data-role="skip-fwd" 1426 aria-label="30 Sekunden vorspulen" title="+30s"> 1427 1428<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> 1429 <path d="M15.9968 5.02519C16.3987 5.12558 16.8058 4.88118 16.9062 4.47932C17.0066 4.07746 16.7622 3.6703 16.3604 3.56991L15.9968 5.02519ZM10.5986 4.29303L10.418 3.5651L10.4172 3.5653L10.5986 4.29303ZM5.02978 7.66158L4.46943 7.16308L4.46848 7.16415L5.02978 7.66158ZM2.38449 13.5545L1.63977 13.4656L1.63968 13.4664L2.38449 13.5545ZM3.54462 19.9886L2.87746 20.3312L2.87747 20.3312L3.54462 19.9886ZM16.7815 26.0337L16.604 25.305L16.6036 25.3051L16.7815 26.0337ZM25.0395 14.5853L25.787 14.5238L25.7869 14.5236L25.0395 14.5853ZM23.2175 7.99796C22.961 7.67272 22.4894 7.617 22.1642 7.87351C21.8389 8.13001 21.7832 8.60161 22.0397 8.92684L23.2175 7.99796ZM15.6523 4.83186C15.9474 5.12254 16.4222 5.11896 16.7129 4.82387C17.0036 4.52877 17 4.05391 16.7049 3.76324L15.6523 4.83186ZM13.4092 0.516822C13.1141 0.226146 12.6392 0.229727 12.3485 0.52482C12.0579 0.819914 12.0614 1.29477 12.3565 1.58545L13.4092 0.516822ZM16.7048 4.832C16.9999 4.5414 17.0036 4.06654 16.713 3.77137C16.4224 3.4762 15.9476 3.4725 15.6524 3.7631L16.7048 4.832ZM12.4428 6.92302C12.1476 7.21361 12.1439 7.68847 12.4345 7.98364C12.7251 8.27881 13.2 8.28252 13.4951 7.99192L12.4428 6.92302ZM16.3604 3.56991C14.4097 3.08262 12.3694 3.08097 10.418 3.5651L10.7792 5.02096C12.4926 4.59588 14.2841 4.59733 15.9968 5.02519L16.3604 3.56991ZM10.4172 3.5653C8.11764 4.13849 6.04465 5.39244 4.46943 7.16308L5.59013 8.16009C6.96463 6.61508 8.77346 5.52092 10.78 5.02076L10.4172 3.5653ZM4.46848 7.16415C2.90577 8.9275 1.91885 11.1261 1.63977 13.4656L3.12921 13.6433C3.3721 11.6071 4.23103 9.69369 5.59108 8.15902L4.46848 7.16415ZM1.63968 13.4664C1.36068 15.8268 1.79163 18.2169 2.87746 20.3312L4.21178 19.6459C3.26219 17.7969 2.88532 15.7068 3.12931 13.6425L1.63968 13.4664ZM2.87747 20.3312C5.51882 25.4741 11.343 28.1339 16.9594 26.7623L16.6036 25.3051C11.6612 26.5121 6.5361 24.1715 4.21178 19.6459L2.87747 20.3312ZM16.959 26.7624C22.5116 25.41 26.2557 20.2196 25.787 14.5238L24.292 14.6469C24.7002 19.6071 21.4397 24.1273 16.604 25.305L16.959 26.7624ZM25.7869 14.5236C25.5903 12.1432 24.6966 9.87342 23.2175 7.99796L22.0397 8.92684C23.3363 10.5708 24.1197 12.5604 24.292 14.6471L25.7869 14.5236ZM16.7049 3.76324L13.4092 0.516822L12.3565 1.58545L15.6523 4.83186L16.7049 3.76324ZM15.6524 3.7631L12.4428 6.92302L13.4951 7.99192L16.7048 4.832L15.6524 3.7631Z" fill="currentColor"/> 1430 <path d="M10.9701 18.8519C9.57822 18.8519 8.66991 18.0882 8.58405 17.0082L8.57953 16.954H9.54658L9.5511 16.9992C9.61437 17.5912 10.1612 18.0069 10.9701 18.0069C11.7654 18.0069 12.3032 17.5595 12.3032 16.9178V16.9088C12.3032 16.1722 11.7699 15.761 10.9023 15.761H10.1069V14.9747H10.8706C11.6163 14.9747 12.1224 14.5363 12.1224 13.9308V13.9218C12.1224 13.2891 11.6976 12.9186 10.961 12.9186C10.238 12.9186 9.73186 13.3027 9.6686 13.9172L9.66408 13.9624H8.7151L8.71961 13.9127C8.81903 12.8146 9.68667 12.0871 10.961 12.0871C12.258 12.0871 13.1075 12.783 13.1075 13.7907V13.7997C13.1075 14.6086 12.5291 15.1509 11.7338 15.3181V15.3407C12.6918 15.4266 13.3335 16.005 13.3335 16.9178V16.9269C13.3335 18.0476 12.3529 18.8519 10.9701 18.8519ZM16.7184 18.8881C1
14305.2135 18.8881 14.3097 17.5731 14.3097 15.4718V15.4627C14.3097 13.3614 15.2135 12.0509 16.7184 12.0509C18.2187 12.0509 19.127 13.3614 19.127 15.4627V15.4718C19.127 17.5731 18.2187 18.8881 16.7184 18.8881ZM16.7184 18.0476C17.5905 18.0476 18.1057 17.067 18.1057 15.4718V15.4627C18.1057 13.8675 17.5905 12.896 16.7184 12.896C15.8417 12.896 15.331 13.8675 15.331 15.4627V15.4718C15.331 17.067 15.8417 18.0476 16.7184 18.0476Z" fill="currentColor"/> 1431</svg> 1432 1433 </button> 1434 </div> 1435 1436 <div class="pv-pp-scrubwrap"> 1437 <span class="pv-pp-time" data-role="time-current">0:00</span> 1438 <input type="range" 1439 class="public-audio-scrubber" 1440 style="flex:1 1 auto;min-width:0;background:transparent;appearance:none;cursor:pointer" 1441 data-role="scrubber" 1442 value="0" min="0" max="100" step="0.1" 1443 aria-label="Spulen"> 1444 <span class="pv-pp-time" data-role="time-total">--:--</span> 1445 </div> 1446 1447 <span class="pv-pp-live pv-pp-livebadge">LIVE</span> 1448 </div> 1449 1450 1451 <div class="pv-pp-actions"> 1452 <span class="pv-pp-chapter" data-role="current-chapter"></span> 1453 1454 <button type="button" class="pv-pp-btn pv-pp-speed" data-role="speed" 1455 aria-label="Wiedergabegeschwindigkeit" 1456 title="Wiedergabegeschwindigkeit">1Ã</button> 1457 1458 1459 <button type="button" class="pv-pp-btn pv-pp-chapters-btn" data-role="chapters-toggle" 1460 aria-expanded="false" data-empty="1" 1461 aria-label="Kapitel" 1462 title="Kapitel"> 1463 <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" width="24" height="24" class="w-5 h-5"> 1464 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" /> 1465</svg> 1466 </button> 1467 1468 1469 <button type="button" class="pv-pp-btn" data-role="dismiss" 1470 aria-label="Player schlieÃen" 1471 title="Player schlieÃen"> 1472 <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" width="24" height="24" class="w-5 h-5"> 1473 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> 1474</svg> 1475 </button> 1476 </div> 1477 </div> 1478 1479 1480 <div class="pv-pp-chapters" data-role="chapters-panel" hidden 1481 style="max-height:16rem;overflow-y:auto;padding:0.5rem 1rem 1rem; 1482 border-top:1px solid color-mix(in srgb, var(--color-text) 12%, var(--color-background))"></div> 1483</pv-persistent-player> 1484 1485 1486 1487 <p class="sr-only" aria-live="polite" data-pv-route-announce></p> 1488 1489
1489<script src="/static/js/transcript-toggle.2caf56525409.js"></script>
1489 1490
1490<script src="/static/js/pv-boost-nav.2f011fe57dd9.js" defer></script>
1490 1491
1491<script src="/static/js/chapter_seek.df6e32ab809f.js" defer></script>
1491 1492
1492<script src="/static/js/chaptered_player.20b62baf4764.js" defer></script>
1492 1493
1493<script src="/static/js/hls-player.7e1cd4eb69de.js" defer></script>
1493 1494
1494<script src="/static/js/episode_tabs.a0e8bc4376fd.js" defer></script>
1494 1495
1495<script src="/static/js/host-player.a243d8a07ae2.js" defer></script>
1495 1496
1496<script src="/static/js/pv-hero-motion.2f219bb77669.js" defer></script>
1496 1497 1498 <!-- email-signup-guard-hydrator:start --> 1499 <template id="email-signup-bot-fields-template"> 1500 1501<!-- email-signup-bot-fields:start --> 1502<div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;"> 1503 <label> 1504 Website 1505 <input type="text" 1506 name="website" 1507 value="" 1508 tabindex="-1" 1509 autocomplete="off"> 1510 </label> 1511</div> 1512<input type="hidden" name="signup_timing_token" value="eyJpc3N1ZWRfYXQiOjE3OTA1OTM0OTUuNjM5Njc5N30:1xB9AF:CNw3Uh4C4M3eNeESyNyAqEmuPWtmUkte22mJ51emizg"> 1513 1514<input type="hidden" name="cf-turnstile-response" value=""> 1515 1516<iframe class="email-signup-turnstile-frame" 1517 data-src="https://podview.com/_turnstile/email-signup/?embed=Imh0dHBzOi8vd3d3Lm1laW5saWVibGluZ3Nzb25nLmNvbSI%3A1xB9AF%3AzFPkPw1fqWG2eDOhyosDlFPaC9d0fXCIVSOjjSYeZzg" 1518 title="Security verification" 1519 scrolling="no" 1520 style="position:absolute;width:1px;height:1px;border:0;clip-path:inset(50%);overflow:hidden;"></iframe> 1521 1522<p class="email-signup-challenge-error w-full text-xs text-theme-text-muted" role="alert" hidden>Die Verifizierung konnte nicht geladen werden. Bitte lade die Seite neu und versuche es erneut.</p> 1523 1524<!-- email-signup-bot-fields:end --> 1525 1526 </template> 1527
1527<script src="/static/js/email-signup-guards.2dfe65de62dc.js"></script>
1527 1528 <!-- email-signup-guard-hydrator:end --> 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545
1546<script src="/static/js/play-beacon.858142c57b9f.js" defer></script>
1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556
1557<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"512eef4f250244daad5aa4c2fdbacceb","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 1557
1557
1558<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a42245234d278c0a',t:'MTc5MDU5MzQ5NQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
1558</body> 1559</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.