/* ============================================================
   podcastbude im Design von podmanager-all
   ------------------------------------------------------------
   Wird nach allen anderen Theme-Styles geladen und überschreibt
   Farben, Schrift, Größen und Flächen. Farbwerte kommen aus
   variables.css (dort 1:1 auf die Podmanager-Tokens gesetzt).

   Regeln aus podmanager-all/style.css:
   - Schrift DM Sans, Zahlen/Zeiten in DM Mono
   - kleinste Schriftgröße 14px, Seitentitel 15px, Kennzahlen 24px
   - Abschnittstitel: 14px, 500, Großbuchstaben, letter-spacing .5px
   - Karten: #161616, Rand rgba(255,255,255,.07), Radius 12px
   - Buttons: Radius 7px, Padding 7px 14px, Akzentfarbe je Portal (variables.css)
   Entfernen: Datei löschen bzw. Einbindung in functions.php entfernen.
   ============================================================ */

/* ── Schriften (lokal, kein Google-Fonts-Abruf) ────────────── */
/* DM Sans / DM Mono, SIL OFL 1.1 (font/dm/LICENSE-OFL.txt), Quelle: @fontsource 5.3.0, Teilmenge „latin" */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../font/dm/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../font/dm/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../font/dm/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../font/dm/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../font/dm/dm-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../font/dm/dm-mono-latin-500-normal.woff2") format("woff2"); }

/* ── Grundlage ─────────────────────────────────────────────── */
html { background: #080808; }

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--clr-text);
    background: var(--clr-bg);
    background-image: none;
    -webkit-font-smoothing: antialiased;
}
body, button, input, select, textarea { font-family: var(--font-sans); }

#site {
    box-shadow: 0 0 0 1px var(--clr-border);
    backdrop-filter: none;
    background: var(--clr-bg);
}

a { color: var(--clr-accent-text); }
a:hover { color: var(--clr-accent-dim); }

.mp-outer { max-width: 1240px; }
.mp-scroll { background: var(--clr-bg); color: var(--clr-text); }

/* ── Top-Navigation (wie .topbar) ──────────────────────────── */
.mp-nav {
    background: var(--clr-bg);
    border-bottom: 1px solid var(--clr-border);
    min-height: 58px;
    padding: 0 24px;
}
.mp-logo { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; color: var(--clr-text); }
.mp-logo .org { color: var(--clr-accent-text); }
.mp-nav-links { gap: 4px; }
.mp-nav-links a {
    font-size: 14px;
    color: var(--clr-text-soft);
    padding: 7px 10px;
    border-radius: 7px;
    transition: all .13s;
}
.mp-nav-links a:hover { color: var(--clr-text); background: var(--clr-surface-2); }
.mp-nav-links a.active { color: var(--clr-accent-text); background: var(--clr-accent-tint); font-weight: 500; }

.mp-join-btn {
    font-size: 14px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 7px;
    background: var(--clr-accent);
    border: none;
    color: var(--clr-on-accent);
    line-height: 1;
}
.mp-join-btn:hover { background: var(--clr-accent-dim); color: var(--clr-on-accent); }
.mp-burger span { background: var(--clr-text-soft); }

/* ── Seitennavigation (wie .sidebar / .nav-item) ───────────── */
/* html body …: die Grundstyles stehen eingebettet in includes/nav-menu.php */
html body #mp-sidenav {
    background: var(--clr-surface);
    border-right: 1px solid var(--clr-border);
    box-shadow: none;
    width: 240px;
}
html body #mp-nav-overlay { background: rgba(0,0,0,.6); }
html body .mp-sidenav-head { border-bottom: 1px solid var(--clr-border); padding: 18px 16px 14px; }
html body .mp-sidenav-head-title { color: var(--clr-text); font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
html body #mp-nav-close { color: var(--clr-text-dim); }
html body #mp-nav-close:hover { color: var(--clr-text); background: var(--clr-surface-2); }
html body .mp-sidenav-links { padding: 10px 10px; }
html body .mp-sidenav-links li a {
    gap: 8px;
    padding: 7px 9px;
    margin-bottom: 1px;
    border-radius: 7px;
    border-left: 0;
    font-size: 14px;
    color: var(--clr-text-soft);
    transition: all .13s;
}
html body .mp-sidenav-links li a:hover { background: var(--clr-surface-2); color: var(--clr-text); }
html body .mp-sidenav-links li a.active { background: var(--clr-accent-tint); color: var(--clr-accent-text); font-weight: 500; }
html body .mp-sidenav-links li a i { font-size: 15px; color: var(--clr-text-dim); }
html body .mp-sidenav-links li a:hover i,
html body .mp-sidenav-links li a.active i { color: var(--clr-accent-text); }
html body .mp-sidenav-divider { background: var(--clr-border); margin: 8px 4px; }
html body .mp-sidenav-section-label {
    padding: 10px 9px 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--clr-text-dim);
}
html body .mp-sidenav-foot { background: var(--clr-surface); border-top: 1px solid var(--clr-border); }
html body .mp-sidenav-foot-user { font-size: 14px; color: var(--clr-text-soft); }
/* Abmelden in Podmanager-Rot (--danger); „Anmelden" hat seine Farbe inline */
html body .mp-sidenav-foot a { font-size: 14px; color: #E24B4A; }
html body .mp-sidenav-foot a:hover { color: #ff6b6a; }

/* ── Suche ─────────────────────────────────────────────────── */
.mp-search-bar { background: var(--clr-bg); border-bottom: 1px solid var(--clr-border); padding: 16px 24px; }
.mp-search-inner {
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-2);
    border-radius: 7px;
    padding: 10px 14px;
}
.mp-search-inner:hover { border-color: var(--clr-accent); }
.mp-search-inner span { font-size: 14px; color: var(--clr-text-dim); }

/* ── Abschnitte (wie .card-head / .card-title) ─────────────── */
.mp-sec { padding: 22px 24px 0; }
.mp-sec-hdr { margin-bottom: 14px; }
.mp-sec-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--clr-text-soft);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.mp-sec-more { font-size: 14px; color: var(--clr-accent-text); }
/* Hover der „Alle"-Links: --clr-accent-dim ist im dunklen mp-Schema #1e1e1e und
   auf der Seitenfarbe #131313 kaum zu sehen. */
.mp-sec-more:hover { color: var(--clr-text-soft); }
.mp-divider { background: var(--clr-border); margin: 22px 24px 0; }
.mp-scroll-row { gap: 12px; }

/* ── Hero („Podcast der Woche") als Karte ──────────────────── */
.mp-hero {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    margin: 22px 24px 0;
    padding: 18px;
    gap: 20px;
}
.mp-hero-art { width: 150px; height: 150px; border-radius: 10px; }
.mp-badge {
    font-size: 14px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--clr-accent-tint);
    color: var(--clr-accent-text);
}
.mp-hero-title { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--clr-text); }
.mp-hero-sub { font-size: 14px; color: var(--clr-text-soft); }
.mp-hero-meta span { font-size: 14px; color: var(--clr-text-dim); font-family: var(--font-mono); }
.mp-hero-meta strong { font-weight: 400; }

/* Primär-Button (wie .btn .btn-primary) */
.mp-play-main,
.mp-play-main.btn-anhoeren {
    font-size: 14px;
    font-weight: 500;
    border-radius: 7px;
    background: var(--clr-accent);
    color: var(--clr-on-accent);
}
.mp-play-main:hover {
    background: var(--clr-accent);
    box-shadow: 0 0 0 4px var(--clr-accent-tint);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--clr-accent) 30%, transparent);
}

/* ── Karten „Neu auf …" (Hochformat) ───────────────────────── */
.mp-portrait-card { width: 170px; }
.mp-portrait-art { width: 170px; height: 170px; border-radius: 12px 12px 0 0; }
.mp-portrait-info {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    padding: 10px 11px 12px;
}
.mp-p-cat { font-size: 14px; font-weight: 500; color: var(--clr-accent-text); }
.mp-p-title { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--clr-text); }
.mp-p-meta { font-size: 14px; color: var(--clr-text-dim); }

/* Alle Karten gleich lang: Karte als Spalte, Info füllt den Rest,
   feste Zeilenzahl je Feld (Serie 1, Titel 2, Dauer/Datum 2) */
.mp-portrait-card { display: flex; flex-direction: column; }
.mp-portrait-art { flex-shrink: 0; }
.mp-portrait-info { flex: 1 1 auto; display: flex; flex-direction: column; }
.mp-p-cat {
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.mp-p-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
    margin-bottom: 4px;
}
.mp-p-meta {
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.4em);
    margin-top: auto;
}
.mp-hover-ep-title { font-size: 14px; line-height: 1.35; }

/* ── Karten „Jetzt aktuell" / „Charts" (Querformat) ────────── */
.mp-land-card,
.mp-chart-card { width: 320px; }
.mp-land-inner,
.mp-chart-inner {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
}
.mp-land-card:hover .mp-land-inner,
.mp-chart-card:hover .mp-chart-inner { outline: none; border-color: var(--clr-accent); }
.mp-land-inner,
.mp-chart-inner { height: 104px; }
.mp-land-art,
.mp-chart-art { width: 104px; background: var(--clr-art); position: relative; }
.mp-land-art img,
.mp-chart-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Play-Button auf dem Logo: Charts wie „Jetzt aktuell" */
.mp-chart-card:hover .mp-land-hover { opacity: 1; }
.mp-land-hover { background: rgba(0, 0, 0, .35); }
.mp-land-info,
.mp-chart-info { padding: 8px 12px; gap: 1px; min-width: 0; }
/* Zeilen nicht wegschrumpfen lassen (sonst verschwindet der Titel) */
.mp-land-info > *,
.mp-chart-info > * { flex-shrink: 0; }
.mp-l-cat,
.mp-c-cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-l-title,
.mp-c-title { -webkit-line-clamp: 2; }
/* Dauer · Datum in einer Zeile, bei Platzmangel mit „…" */
.mp-l-meta,
.mp-c-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.mp-l-meta span,
.mp-c-meta span { white-space: nowrap; }
.mp-l-meta span + span::before,
.mp-c-meta span + span::before { content: " · "; color: var(--clr-text-dim); }
.mp-l-cat,
.mp-c-cat { line-height: 1.4; }
.mp-l-meta strong,
.mp-c-meta strong { font-weight: 400; color: var(--clr-text-dim); }
.mp-chart-num { width: 44px; }
.mp-sec-more { white-space: nowrap; flex-shrink: 0; }
.mp-sec-hdr { gap: 12px; }
.mp-l-cat,
.mp-c-cat { font-size: 14px; font-weight: 500; color: var(--clr-accent-text); }
.mp-l-title,
.mp-c-title { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--clr-text); }
.mp-l-meta span,
.mp-c-meta span { font-size: 14px; color: var(--clr-text-dim); }
.mp-chart-num { font-size: 24px; font-weight: 600; font-family: var(--font-mono); letter-spacing: -1px; color: var(--clr-text-ghost); }

/* Filter-Leiste „Neu auf …" (wie Portal-Tabs) */
#aktpc-filter-row { gap: 6px; padding: 0 0 14px; }
.aktpc-btn {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 7px;
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-2);
    color: var(--clr-text-soft);
}
.aktpc-btn:hover { background: var(--clr-surface-3); color: var(--clr-text); }
.aktpc-btn.active { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-on-accent); }

/* ── Serien-Kacheln („Stöbern") ────────────────────────────── */
.mp-cat-card { width: 150px; height: 88px; border-radius: 12px; }
/* Logo im Overlay: füllt das Kachel-Format 150×88, Verlauf darüber für die Schrift */
/* Heller Saum an den Ecken vermeiden: Kachel ohne eigene Flaeche, Verlauf und Ring mit gleichem Radius (29.09.2026) */
.mp-cat-card { background: transparent; overflow: visible; }
.mp-cat-overlay::after { border-radius: inherit; }
.mp-cat-ring { border-radius: inherit; }
.mp-cat-overlay { background: none; overflow: hidden; border-radius: inherit; }
.mp-cat-overlay img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Verlauf + Beschriftung in einem Wrapper ueber dem Bild (29.09.2026) */
.mp-cat-overlay::after { content: none; }
.mp-cat-overlay img { border-radius: inherit; }
.mp-cat-foot {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    bottom: -1px;
    background: linear-gradient(to top, rgb(19, 19, 19) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.22) 100%);
    pointer-events: none;
}
.mp-cat-label,
.mp-cat-count { z-index: 2; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.mp-cat-label { right: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-cat-ring { z-index: 2; display: none; }
.mp-cat-card.is-active .mp-cat-ring { display: block; }
/* Zufallsauswahl: nicht gewählte Serien ausblenden (display:block der Karten würde [hidden] sonst überstimmen) */
.mp-cat-card[hidden],
.mp-serie-card[hidden] { display: none !important; }
.mp-cat-label { font-size: 14px; font-weight: 500; }
.mp-cat-count { font-size: 14px; font-family: var(--font-mono); }
.mp-expanded { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 12px; }
.mp-exp-title { font-size: 14px; font-weight: 500; color: var(--clr-accent-text); }
.mp-exp-more { font-size: 14px; color: var(--clr-text-dim); }
.mp-serie-card { width: 140px; }
.mp-serie-art { width: 140px; height: 140px; border-radius: 12px 12px 0 0; background: var(--clr-art); }
.mp-serie-info { background: var(--clr-surface); border: 1px solid var(--clr-border); border-top: 0; border-radius: 0 0 12px 12px; padding: 9px 10px; }
.mp-s-title { font-size: 14px; font-weight: 500; min-height: 38px; }
.mp-s-meta { font-size: 14px; color: var(--clr-text-dim); }

/* ── Play-Buttons: alle .btn-anhoeren einheitlich ──────────── */
/*
 * Eine Form für alle: grüner Kreis 40px, weißes Dreieck (wie der Player unten,
 * clip-path), beim Abspielen (.play) zwei weiße Balken, Hover dunkleres Grün.
 * Buttons mit Text (.mp-play-main, Episodenkopf) zeigen dasselbe Icon links.
 * html body …: schlägt die älteren Varianten in style.css / mp-serie-style.css
 * (28–42px, graue Icons, teils ohne Pause-Zustand).
 */

/* Nur-Icon-Buttons */
html body .btn-anhoeren:not(.mp-play-main),
html body #episode_wrap_right .ep_right_item .btn-anhoeren {
    --pb-size: 40px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: var(--pb-size);
    height: var(--pb-size);
    min-width: var(--pb-size);
    min-height: var(--pb-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--clr-accent);
    color: transparent;
    font-size: 0;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 1;
    transform: none;
    transition: background .13s, transform .13s, box-shadow .13s;
}
/* Buttons mit Text */
html body .mp-play-main.btn-anhoeren,
html body .episode_head .btn-anhoeren {
    --pb-size: 40px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: var(--pb-size);
    margin: 0;
    padding: 10px 16px 10px 42px;
    border: 0;
    border-radius: 7px;
    background: var(--clr-accent);
    color: var(--clr-on-accent);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
    transform: none;
    transition: background .13s, transform .13s, box-shadow .13s;
}
/* Hover: Farbe bleibt, Kreis waechst leicht und bekommt einen Ring. Vorher wechselte der
   Hintergrund auf --clr-accent-dim; im dunklen mp-Schema (#1e1e1e auf #131313, Icon #121212)
   war der Knopf dadurch beim Ueberfahren kaum noch zu sehen. */
html body .btn-anhoeren:hover,
html body #episode_wrap_right .ep_right_item .btn-anhoeren:hover {
    background: var(--clr-accent);
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 0 0 4px var(--clr-accent-tint);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--clr-accent) 30%, transparent);
}
/* Breite Knoepfe mit Text wachsen nicht, nur der Ring */
html body .mp-play-main.btn-anhoeren:hover,
html body .episode_head .btn-anhoeren:hover { transform: none; }

/* Alte Kreis-Ebene ausblenden: der Kreis ist jetzt der Button selbst */
html body .btn-anhoeren::before,
html body #episode_wrap_right .ep_right_item .btn-anhoeren::before { content: none; display: none; }

/* Icon: Dreieck (Play). :not(.x) erhöht die Spezifität über .mps-play-btn.btn-anhoeren::after */
html body .btn-anhoeren::after,
html body .btn-anhoeren:not(.mp-no-override)::after,
html body #episode_wrap_right .ep_right_item .btn-anhoeren::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 0;
    background: var(--clr-on-accent);
    clip-path: polygon(20% 0%, 20% 100%, 100% 50%);
    transform: translate(-45%, -50%);
    display: block;
}
/* Icon: zwei Balken (Pause) */
html body .btn-anhoeren.play::after,
html body .btn-anhoeren.play:not(.mp-no-override)::after,
html body #episode_wrap_right .ep_right_item .btn-anhoeren.play::after {
    width: 14px;
    height: 16px;
    left: 50%;
    border: 0;
    clip-path: none;
    background:
        linear-gradient(var(--clr-on-accent), var(--clr-on-accent)) left / 4px 100% no-repeat,
        linear-gradient(var(--clr-on-accent), var(--clr-on-accent)) right / 4px 100% no-repeat;
    transform: translate(-50%, -50%);
}
/* Bei Buttons mit Text sitzt das Icon links */
html body .mp-play-main.btn-anhoeren:not(.mp-no-override)::after,
html body .episode_head .btn-anhoeren:not(.mp-no-override)::after { left: 16px; transform: translate(0, -50%); }
html body .mp-play-main.btn-anhoeren.play:not(.mp-no-override)::after,
html body .episode_head .btn-anhoeren.play:not(.mp-no-override)::after { left: 17px; transform: translate(0, -50%); }

/* Portal-Plaketten */
.blog_ep_portal_wrap { font-size: 14px; font-weight: 500; border-radius: 20px; padding: 2px 9px; }
.blog_ep_portal_wrap.mp,
.blog_ep_portal_wrap.meinpodcast { background: var(--clr-portal-mp); }
.blog_ep_portal_wrap.mmp,
.blog_ep_portal_wrap.meinmusikpodcast { background: var(--clr-portal-mmp); }
.blog_ep_portal_wrap.msp,
.blog_ep_portal_wrap.meinsportpodcast { background: var(--clr-portal-msp); }

/* ── Episodenseite (/serie/episode, /mp/{serie}/{episode}) ─── */
#episode_wrap { gap: 12px; padding: 22px 24px; }
.episode_head,
.episode_body,
#episode_wrap_right {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    box-shadow: none;
    backdrop-filter: none;
    color: var(--clr-text);
}
.episode_head {
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--clr-border);
    gap: 28px;
    padding: 18px;
    /* minmax(0,…): sonst schrumpft die Textspalte auf 0 und das Cover wird lang gezogen */
    grid-template-columns: 260px minmax(0, 1fr);
}
.episode_head .series_head_img { aspect-ratio: 1 / 1; height: auto; overflow: hidden; }
.episode_head .series_head_img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#episode_wrap { grid-template-columns: minmax(0, 1fr) 340px; }
.episode_body { border-radius: 0 0 12px 12px; border-top: 0; padding: 18px; font-size: 14px; line-height: 1.65; color: var(--clr-text-soft); }
.episode_head .series_head_title h1 { font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--clr-text); }
.episode_head .series_head_img { border-radius: 12px; }
.series_link { color: var(--clr-text-soft); font-size: 14px; }
#episode_wrap_right { border-radius: 12px; }
#episode_wrap_right .ep_right_item { border-bottom: 1px solid var(--clr-border); }
#episode_wrap_right .ep_right_item:hover { background: var(--clr-surface-2); }
#episode_wrap_right .ep_right_item.active { background: var(--clr-accent-tint); }
#episode_wrap_right .ep_right_cover { border-radius: 7px; background-color: var(--clr-art); }
.ep_right_title { font-size: 14px; font-weight: 500; color: var(--clr-text); }
.ep_right_sub { font-size: 14px; color: var(--clr-text-dim); opacity: 1 !important; }

/* ── Serienseite (msps-*) ──────────────────────────────────── */
.mps-page { background: var(--clr-bg); }
.mps-hero {
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    /* overflow darf hier nicht hidden sein, sonst schneidet der Hero das
       aufgeklappte Abo-Menue ab. Der weichgezeichnete Hintergrund wird
       stattdessen von .mps-blur-clip gehalten. z-index sorgt dafuer, dass
       das Menue ueber den nachfolgenden Abschnitten liegt. */
    overflow: visible;
    z-index: 1;
}
.mps-blur-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.mps-blur-bleed { opacity: .25; }
.mps-breadcrumb { font-size: 14px; color: var(--clr-text-dim); }
.mps-breadcrumb a { color: var(--clr-text-dim); }
.mps-breadcrumb a:hover { color: var(--clr-accent-text); }
.mps-eyebrow,
.mps-ep-eyebrow {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--clr-text-soft);
    font-family: var(--font-sans);
}
.mps-hero-title { font-size: 28px; font-weight: 600; letter-spacing: -0.3px; color: var(--clr-text); }
.mps-hero-desc { font-size: 14px; line-height: 1.65; color: var(--clr-text-soft); }
.mps-cover { border-radius: 12px; }

/* Serienkopf: links Logo mit „Neueste Folge hören" darunter, rechts Text */
.mps-hero-grid { grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 28px; }
.mps-cover-col { display: flex; flex-direction: column; gap: 12px; width: 200px; }
.mps-cover-col .mps-cover { width: 200px; height: 200px; }
.mps-cover-col .mps-hero-cta { grid-column: auto; padding: 0; align-items: stretch; }
html body .mps-cover-col .mp-play-main.btn-anhoeren { width: 100%; justify-content: center; padding-left: 40px; padding-right: 12px; }
@media (max-width: 900px) {
    .mps-hero-grid { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
    .mps-cover-col,
    .mps-cover-col .mps-cover { width: 150px; }
    .mps-cover-col .mps-cover { height: 150px; }
}
@media (max-width: 600px) {
    /* Handy: Logo links neben dem Text, Button darunter über die volle Breite */
    .mps-hero-grid { grid-template-columns: 100px minmax(0, 1fr); gap: 14px; }
    .mps-cover-col { display: contents; }
    .mps-cover-col .mps-cover { width: 100px; height: 100px; grid-column: 1; grid-row: 1; }
    .mps-hero-body { grid-column: 2; grid-row: 1; }
    .mps-cover-col .mps-hero-cta { grid-column: 1 / -1; grid-row: 2; }
}
.mps-platform-chip {
    font-size: 14px;
    font-weight: 500;
    border-radius: 20px;
    padding: 3px 10px;
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-2);
    color: var(--clr-text-soft);
}
.mps-platform-chip:hover { color: var(--clr-text); border-color: var(--clr-accent); }

/* ── Abo-Aufklappmenue (Episodenseite) ──────────────────────────
   Der Knopf sieht aus wie ein .mps-platform-chip, verhaelt sich aber
   wie eine Offenlegung: er oeffnet darunter die Abo-Links der Serie.
   Auf der Serienseite stehen dieselben Links weiter offen sichtbar --
   dort ist Platz, in der Chip-Zeile der Episodenseite nicht.
*/
/* Die Plattform-Zeile ist der Bezugspunkt: das Menue klappt unter der
   ganzen Zeile auf, nicht nur unter dem Knopf. */
.mps-platforms { position: relative; }
.mps-abo { position: static; display: inline-flex; }

/* Der Knopf traegt im Markup zusaetzlich .mps-platform-chip und sieht
   dadurch genauso aus wie die Abo-Chips auf der Serienseite -- auch
   dann noch, wenn der Chip-Stil spaeter geaendert wird.

   Alles Aussehen kommt aus .mps-platform-chip, auch die Schrift. Hier
   darf deshalb keine font-Angabe stehen: die Kurzform font: inherit
   setzt auch font-family und machte aus der Monoschrift des Chips
   wieder die Fliesstextschrift. Uebrig bleiben die beiden Punkte, in
   denen sich ein <button> von einem <a> unterscheidet. */
.mps-abo-knopf {
    line-height: inherit;
    cursor: pointer;
}
.mps-abo-knopf[aria-expanded="true"] {
    color: var(--clr-text);
    border-color: var(--clr-accent);
}

.mps-abo-pfeil {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .15s ease;
}
.mps-abo-knopf[aria-expanded="true"] .mps-abo-pfeil { transform: rotate(180deg); }

.mps-abo-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    min-width: 232px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 6px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.mps-abo-menu[hidden] { display: none; }

.mps-abo-eintrag {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    color: var(--clr-text-soft);
    cursor: pointer;
}
.mps-abo-eintrag:hover,
.mps-abo-eintrag:focus-visible {
    background: var(--clr-surface-2);
    color: var(--clr-text);
    outline: none;
}

.mps-abo-trenner { height: 1px; margin: 4px 6px; background: var(--clr-border); }
.mps-abo-hinweis { padding: 2px 10px 6px; font-size: 12px; color: var(--clr-text-dim); }
.mps-section-title { font-size: 15px; font-weight: 600; color: var(--clr-text); }
.mps-player-band {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
}
.mps-ep-title { font-size: 18px; font-weight: 600; line-height: 1.35; }
.mps-ep-title a { color: var(--clr-text); }
.mps-dur,
.mps-ep-dur,
.mps-ch-time,
.mps-ep-n { font-size: 14px; font-family: var(--font-mono); color: var(--clr-text-dim); }
.mps-ep-desc { font-size: 14px; line-height: 1.65; color: var(--clr-text-soft); }
.mps-chapters-label { font-size: 14px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--clr-text-soft); }
.mps-ch-title { font-size: 14px; color: var(--clr-text-soft); }
.mps-ep-dt { font-size: 14px; color: var(--clr-text-dim); }
.mps-ep-row { border-bottom: 1px solid var(--clr-border); }
.mps-ep-row:hover { background: var(--clr-surface); }
.mps-ep-row-title { font-size: 14px; font-weight: 500; color: var(--clr-text); }
/* Ghost-Button (wie .btn .btn-ghost) */
.mps-btn-ghost,
#mps-load-more {
    font-size: 14px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 7px;
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-2);
    color: var(--clr-text-soft);
}
.mps-btn-ghost:hover,
#mps-load-more:hover { background: var(--clr-surface-3); color: var(--clr-text); }

/* ── Serien-Übersicht (/serien/) ───────────────────────────── */
.mpss-page { padding: 22px 24px 40px; }
.mpss-breadcrumb { font-size: 14px; color: var(--clr-text-dim); }
.mpss-title { font-size: 24px; font-weight: 600; letter-spacing: -0.3px; color: var(--clr-text); }
.mpss-tab {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid var(--clr-border);
    background: transparent;
    color: var(--clr-text-soft);
    letter-spacing: .3px;
}
.mpss-tab:hover { color: var(--clr-text); border-color: var(--clr-border-2); background: var(--clr-surface-2); }
.mpss-tab.is-active { color: #fff; }
.mpss-tab-mp.is-active  { background: var(--clr-portal-mp);  border-color: var(--clr-portal-mp); }
.mpss-tab-mmp.is-active { background: var(--clr-portal-mmp); border-color: var(--clr-portal-mmp); }
.mpss-tab-msp.is-active { background: var(--clr-portal-msp); border-color: var(--clr-portal-msp); }
.mpss-count { font-size: 14px; font-family: var(--font-mono); font-weight: 500; background: rgba(0,0,0,.28); }
.mpss-search {
    font-size: 14px;
    border-radius: 7px;
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-2);
    color: var(--clr-text);
}
.mpss-search:focus { border-color: var(--clr-accent); }
.mpss-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.mpss-art { border-radius: 12px; background: var(--clr-surface); border: 1px solid var(--clr-border); }
.mpss-card:hover .mpss-art,
.mpss-panel-mmp .mpss-card:hover .mpss-art { outline: none; border-color: var(--clr-accent); }
.mpss-name { font-size: 14px; font-weight: 500; color: var(--clr-text); }
.mpss-empty { font-size: 14px; }

/* ── Charts der Woche (/charts/) ───────────────────────────── */
.mpc-page { padding: 22px 24px 40px; }
.mpc-breadcrumb { font-size: 14px; color: var(--clr-text-dim); margin-bottom: 10px; }
.mpc-breadcrumb a { color: var(--clr-text-dim); text-decoration: none; }
.mpc-breadcrumb a:hover { color: var(--clr-accent-text); }
.mpc-breadcrumb span[aria-hidden] { margin: 0 6px; opacity: .5; }
.mpc-title { font-size: 24px; font-weight: 600; letter-spacing: -0.3px; color: var(--clr-text); margin: 0 0 4px; }
.mpc-sub { font-size: 14px; color: var(--clr-text-dim); margin: 0 0 18px; }
.mpc-empty { font-size: 14px; color: var(--clr-text-dim); padding: 24px 0; }

.mpc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.mpc-tab {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid var(--clr-border);
    color: var(--clr-text-soft);
    text-decoration: none;
    letter-spacing: .3px;
    transition: all .13s;
}
.mpc-tab:hover { color: var(--clr-text); border-color: var(--clr-border-2); background: var(--clr-surface-2); }
.mpc-tab.is-active { color: #fff; }
.mpc-tab-all.is-active { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-on-accent); }
.mpc-tab-mp.is-active  { background: var(--clr-portal-mp);  border-color: var(--clr-portal-mp); }
.mpc-tab-mmp.is-active { background: var(--clr-portal-mmp); border-color: var(--clr-portal-mmp); }
.mpc-tab-msp.is-active { background: var(--clr-portal-msp); border-color: var(--clr-portal-msp); }

.mpc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    overflow: hidden;
}
.mpc-row {
    display: grid;
    grid-template-columns: 44px 56px minmax(0, 1fr) auto auto 40px;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--clr-border);
}
.mpc-row:last-child { border-bottom: 0; }
.mpc-row:hover { background: var(--clr-surface-2); }
.mpc-rank {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
    color: var(--clr-text-ghost);
    text-align: center;
}
.mpc-row.is-top .mpc-rank { color: var(--clr-accent-text); font-size: 22px; }
.mpc-cover { width: 56px; height: 56px; border-radius: 7px; overflow: hidden; background: var(--clr-art); display: block; }
.mpc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpc-info { min-width: 0; }
.mpc-ep-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--clr-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mpc-ep-title:hover { color: var(--clr-accent-text); }
.mpc-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.mpc-series {
    font-size: 14px;
    color: var(--clr-text-dim);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mpc-series:hover { color: var(--clr-text); }
.mpc-meta .blog_ep_portal_wrap { flex-shrink: 0; color: #fff; }
.mpc-date,
.mpc-dur { font-size: 14px; font-family: var(--font-mono); color: var(--clr-text-dim); white-space: nowrap; }

@media (max-width: 700px) {
    .mpc-page { padding: 16px 16px 32px; }
    .mpc-row { grid-template-columns: 30px 48px minmax(0, 1fr) 40px; gap: 10px; padding: 10px 12px; }
    .mpc-cover { width: 48px; height: 48px; }
    .mpc-date,
    .mpc-dur { display: none; }
    .mpc-rank { font-size: 16px; }
    .mpc-row.is-top .mpc-rank { font-size: 18px; }
    .mpc-ep-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ── Player (unten) ────────────────────────────────────────── */
#player { background: var(--clr-surface); border-top: 1px solid var(--clr-border-2); color: var(--clr-text); }
#player_wrap { background: var(--clr-surface); }
#player_title { font-size: 14px; font-weight: 500; color: var(--clr-text); }
#player_sub { font-size: 14px; color: var(--clr-text-dim); }
#player_duration,
#player_duration span { font-size: 14px; font-family: var(--font-mono); color: var(--clr-text-dim); }
#player_loader .loader-text { font-size: 14px; }
.progress-fill,
#play_pause_wrap { background: var(--clr-accent); }
#player_menu_popup { background: var(--clr-surface-2); border: 1px solid var(--clr-border-2); border-radius: 7px; }
#player_menu_popup .player_menu_item { font-size: 14px; color: var(--clr-text-soft); }
#player_menu_popup .player_menu_item:hover { background: var(--clr-surface-3); color: var(--clr-text); }

/* ── Slider-Pfeile (assets/js/sliders.js) ──────────────────── */
.mp-slider { position: relative; }
.mp-slider-btn {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    padding: 0;
    display: none;                     /* nur bei Überlauf, s. .has-overflow */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--clr-border-2);
    background: rgba(31, 31, 31, .92);
    color: var(--clr-text);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
    transition: opacity .15s, background .13s;
}
.mp-slider-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mp-slider-btn:hover { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-on-accent); }
.mp-slider-prev { left: 6px; }
.mp-slider-next { right: 6px; }
.mp-slider.has-overflow .mp-slider-btn { display: flex; }
.mp-slider .mp-slider-btn.is-hidden { opacity: 0; pointer-events: none; }

/* Desktop (Maus): ausgeblendet, beim Überfahren der Reihe einblenden */
@media (hover: hover) and (pointer: fine) {
    .mp-slider .mp-slider-btn { opacity: 0; pointer-events: none; }
    .mp-slider:hover .mp-slider-btn:not(.is-hidden),
    .mp-slider .mp-slider-btn:focus-visible { opacity: 1; pointer-events: auto; }
}
/* Mobil/Touch: immer sichtbar (außer am Anfang/Ende), etwas kleiner */
@media (hover: none), (pointer: coarse) {
    .mp-slider-btn { width: 34px; height: 34px; margin-top: -17px; }
}

/* ── Player-Menü und Inhalts-Panel (#player_content) ───────── */
/* html body …: die Grundstyles in style.css nutzen noch --playerbg_1 (Navy) */
html body #player_menu_popup {
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-2);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,.6);
    padding: 6px;
}
html body #player_menu_popup::after {
    background: var(--clr-surface-2);
    border-right: 1px solid var(--clr-border-2);
    border-bottom: 1px solid var(--clr-border-2);
}
html body #player_menu_popup .player_menu_item {
    font-size: 14px;
    font-weight: 500;
    color: var(--clr-text-soft);
    padding: 8px 10px;
    border-radius: 7px;
}
html body #player_menu_popup .player_menu_item:hover { background: var(--clr-surface-3); color: var(--clr-text); }
html body #player_menu_popup .player_menu_item.active { background: var(--clr-accent-tint); color: var(--clr-accent-text); }

/* Menü-Knopf (drei Punkte): Punkte hatten die Navy-Farbe --playerbg_1 und waren unsichtbar */
html body #player_menu_btn {
    color: var(--clr-text-soft);
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-2);
    border-radius: 7px;
    opacity: 1;
}
html body #player_menu_btn:hover,
html body #player_menu_btn[aria-expanded="true"] {
    color: var(--clr-text);
    background: var(--clr-surface-3);
    border-color: var(--clr-border-2);
    transform: none;
}

html body #player_content {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-2);
    border-radius: 12px;
    box-shadow: 0 22px 70px rgba(0,0,0,.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 18px;
    color: var(--clr-text);
    font-family: var(--font-sans);
}
html body #player_content a { color: var(--clr-accent-text); text-decoration: none; }
html body #player_content a:hover { color: var(--clr-accent-dim); }

/* Kopf (wie .card-head / .card-title) */
html body #player_content .pc-head { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--clr-border); }
html body #player_content .pc-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--clr-text-soft);
    opacity: 1;
}
html body #player_content .pc-close {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid var(--clr-border-2);
    background: var(--clr-surface-2);
    color: var(--clr-text-soft);
    font-size: 14px;
    line-height: 1;
}
html body #player_content .pc-close:hover { background: var(--clr-surface-3); color: var(--clr-text); }

/* Inhalt */
html body #player_content .pc-body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--clr-text-soft);
    opacity: 1;
    height: clamp(220px, 46vh, 460px);
    max-height: none;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-border-2) transparent;
}
html body #player_content .pc-ep-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--clr-text); margin-bottom: 8px; }
html body #player_content .pc-desc p { margin: 0 0 10px; }
html body #player_content .pc-desc ul,
html body #player_content .pc-desc ol { margin: 0 0 10px 18px; }
html body #player_content .pc-muted { color: var(--clr-text-dim); }

/* Buttons (wie .btn .btn-ghost) */
html body #player_content .pc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
html body #player_content .pc-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--clr-border-2);
    background: var(--clr-surface-2);
    color: var(--clr-text-soft);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all .13s;
}
html body #player_content .pc-action:hover { background: var(--clr-surface-3); color: var(--clr-text); }
html body #player_content .pc-body > .pc-actions:first-child { margin-top: 0; }

/* Kapitel (wie .ep-row) */
html body #player_content .pc-chapters { list-style: none; margin: 0; padding: 0; }
html body #player_content .pc-chapters li { border-bottom: 1px solid var(--clr-border); }
html body #player_content .pc-chapters li:last-child { border-bottom: 0; }
html body #player_content .pc-chapter {
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: 9px 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--clr-text-soft);
    font-family: var(--font-sans);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
html body #player_content .pc-chapter:hover { background: var(--clr-surface-2); color: var(--clr-text); }
html body #player_content .pc-time { flex: 0 0 auto; min-width: 64px; font-family: var(--font-mono); color: var(--clr-accent-text); }
html body #player_content .pc-ch-title { flex: 1; min-width: 0; }

/* Info (Schlüssel/Wert) */
html body #player_content .pc-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 18px;
    align-items: baseline;
}
html body #player_content .pc-k {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--clr-text-dim);
}
html body #player_content .pc-v { color: var(--clr-text); overflow-wrap: anywhere; }

/* ── Footer ────────────────────────────────────────────────── */
#footer {
    background: var(--clr-surface);
    border-top: 1px solid var(--clr-border);
    box-shadow: none;
    backdrop-filter: none;
}
#footer a,
#footer-nav ul li a { color: var(--clr-text-soft) !important; }
#footer a:hover { color: var(--clr-text) !important; }
#menu-footer li:not(:last-child) { border-right: 1px solid var(--clr-border); }
#menu-footer li,
#Sozialfooter .sozial_item { font-size: 14px; font-weight: 500; color: var(--clr-text-soft); }
#footer_seperator { background: var(--clr-border); height: 1px; }
#copyright { font-size: 14px; color: var(--clr-text-dim); }

/* Episodenseite schmaler */
@media (max-width: 1100px) {
    .episode_head { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 900px) {
    #episode_wrap { grid-template-columns: minmax(0, 1fr); height: auto; }
    #episode_wrap_right { max-height: 520px; }
    .episode_body { overflow: visible; }
}
@media (max-width: 520px) {
    .episode_head { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 14px; }
    .episode_head .series_head_title h1 { font-size: 18px; }
}

/* Handy: Player-Leiste passt sonst nicht in die Breite, das Menü (Content/Kapitel/…) läge außerhalb */
@media (max-width: 600px) {
    html body #player_volume,
    html body #player_duration { display: none; }
    html body #player_control { gap: 10px; flex-wrap: nowrap; }
    html body #player_extra_wrap { flex-shrink: 0; }
    html body #player_content { left: 8px; right: 8px; bottom: 96px; padding: 14px; }
}
/* Sehr schmal: Episodenkopf untereinander (Cover, dann Text) */
@media (max-width: 420px) {
    .episode_head { grid-template-columns: minmax(0, 1fr); }
    .episode_head .series_head_img { width: 140px; }
}

/* Nicht umbrechen: Badge, Buttons */
.mp-badge,
.mp-join-btn,
.mp-play-main { white-space: nowrap; }

/* ── Mobil ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .mp-nav { padding: 0 12px; gap: 8px; }
    .mp-logo { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mp-join-btn { padding: 7px 9px; flex-shrink: 0; }
    /* Hero untereinander: Bild oben, Text und Button in voller Breite */
    .mp-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; }
    .mp-hero-body { width: 100%; min-width: 0; }
    html body .mp-hero .mp-play-main.btn-anhoeren { width: 100%; justify-content: center; }
    .mp-land-card,
    .mp-chart-card { width: 270px; }
    .mp-land-art { width: 88px; }
    .mp-chart-art { width: 88px; }
    .mp-land-inner,
    .mp-chart-inner { height: 88px; }
    .mp-chart-num { width: 30px; font-size: 20px; }
    /* Unsichtbare Play-Spalte (nur Hover am Desktop) braucht hier keinen Platz */
    .mp-chart-play,
    .mp-land-play { display: none; }
    .mp-l-title,
    .mp-c-title { -webkit-line-clamp: 1; }
    .mp-exp-hdr { flex-direction: column; align-items: flex-start; gap: 4px; }
    .mp-sec { padding: 18px 16px 0; }
    .mp-hero { margin: 16px 16px 0; }
    .mp-hero-art { width: 88px; height: 88px; }
    .mp-hero-title { font-size: 17px; }
    .mp-divider { margin: 18px 16px 0; }
    .mp-portrait-card { width: 140px; }
    .mp-portrait-art { width: 140px; height: 140px; }
    #episode_wrap { padding: 16px; }
    .mpss-page { padding: 16px 16px 32px; }
    .mpss-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
}

/* ── Navigation bündig mit dem Inhalt ──────────────────────── */
/*
 * Der Seiteninhalt (.mp-outer) ist max. 1240px breit mit 24px Innenabstand.
 * Logo (links) und Links (rechts) sitzen genau an diesen Kanten.
 * Breite Bildschirme: Burger und „Podcaster werden" liegen im freien Rand
 * daneben. Schmaler: Burger vor dem Logo, Button nach den Links – die Zeile
 * schließt dann als Ganzes bündig mit dem Inhalt ab.
 */
.mp-nav {
    --nav-inset: max(24px, calc((100% - 1240px) / 2 + 24px));
    padding-left: var(--nav-inset);
    padding-right: var(--nav-inset);
    justify-content: flex-start;
    gap: 12px;
}
.mp-burger { margin-left: -6px; }                 /* Innenabstand des Burgers optisch ausgleichen */
.mp-nav-links { margin-left: auto; margin-right: -10px; }   /* Link-Padding: Text endet an der Kante */
.mp-join-btn { margin-left: 8px; }

@media (min-width: 1640px) {
    .mp-burger,
    .mp-join-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }
    .mp-burger   { right: calc(100% - var(--nav-inset) + 14px); }
    .mp-join-btn { left:  calc(100% - var(--nav-inset) + 16px); }
    .mp-nav-links { margin-right: -10px; }
}

@media (max-width: 600px) {
    .mp-nav { --nav-inset: 16px; gap: 8px; }
    .mp-join-btn { margin-left: auto; }
}

/* ── Neue Folgen (/neue-folgen/) ───────────────────────────── */
.mpn-day {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    margin: 22px 0 8px;
}
.mpn-page .mpc-panel > .mpn-day:first-child { margin-top: 4px; }
/* Die Liste hat denselben Zeilenaufbau wie auf der Serienseite (Wunsch 24.09.);
   hier ist sie eine <ul>, darum noch die Listenpunkte abstellen. */
ul.mps-episode-list { list-style: none; margin: 0; padding: 0; }
.mps-ep-serie { color: var(--clr-text-dim); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mps-ep-meta .blog_ep_portal_wrap { color: #fff; }

/* ── Normale Seiten (page.php: Impressum, FAQ, Kontakt …) ──── */
.mp-page { padding: 22px 24px 48px; }
.mp-page-title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--clr-text);
    margin: 0 0 22px;
}
.mp-page-image { margin: 0 0 22px; max-width: 760px; }
.mp-page-image img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* Fließtext: lesbare Zeilenlänge, bündig mit dem Seitentitel.
   Farben mit !important, weil ältere Inhalte Inline-Farben/-Ausrichtungen mitbringen. */
.mp-prose {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--clr-text-soft);
    overflow-wrap: anywhere;
}
.mp-prose :where(p, li, span, div, td, th, label, strong, em, b, i, small, blockquote) { color: var(--clr-text-soft) !important; }
.mp-prose :where(p, li) { text-align: left !important; }
.mp-prose p { margin: 0 0 16px; }
.mp-prose :where(strong, b) { color: var(--clr-text) !important; font-weight: 600; }
.mp-prose :where(h1, h2, h3, h4, h5, h6) {
    color: var(--clr-text) !important;
    text-align: left !important;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.3;
    margin: 32px 0 12px;
}
.mp-prose h1 { font-size: 24px; }
.mp-prose h2 { font-size: 20px; }
.mp-prose h3 { font-size: 17px; }
.mp-prose :where(h4, h5, h6) { font-size: 16px; }
.mp-prose > :first-child { margin-top: 0; }
.mp-prose a {
    color: var(--clr-accent-text) !important;
    text-decoration: underline;
    text-decoration-color: var(--clr-accent-line);
    text-underline-offset: 3px;
}
.mp-prose a:hover { text-decoration-color: currentColor; }
.mp-prose :where(ul, ol) { margin: 0 0 16px; padding-left: 22px; }
.mp-prose ul { list-style: disc; }
.mp-prose ol { list-style: decimal; }
.mp-prose li { margin: 0 0 6px; }
.mp-prose li::marker { color: var(--clr-text-dim); }
.mp-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.mp-prose .aligncenter { display: block; margin: 8px auto 20px; }
.mp-prose .alignright { float: right; margin: 4px 0 16px 20px !important; max-width: 40%; }
.mp-prose .alignleft { float: left; margin: 4px 20px 16px 0; max-width: 40%; }
.mp-prose::after { content: ""; display: block; clear: both; }
.mp-prose blockquote {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--clr-accent);
    background: var(--clr-surface);
    border-radius: 0 8px 8px 0;
}
.mp-prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
.mp-prose :where(td, th) { border: 1px solid var(--clr-border); padding: 8px 10px; text-align: left; }
.mp-prose th { background: var(--clr-surface); color: var(--clr-text) !important; }
.mp-prose hr { border: 0; border-top: 1px solid var(--clr-border); margin: 28px 0; }

/* Formulare in Seiten (z. B. Mailchimp auf /newsletter/) */
.mp-prose #mc_embed_signup { background: transparent !important; width: auto !important; font: inherit !important; }
.mp-prose #mc_embed_signup form { padding: 0 !important; }
.mp-prose #mc_embed_signup h2 { margin: 24px 0 12px; }
.mp-prose #mc_embed_signup .mc-field-group { width: 100% !important; padding-bottom: 0 !important; margin: 0 0 14px; min-height: 0 !important; }
.mp-prose #mc_embed_signup .indicates-required { text-align: left !important; margin: 0 0 12px !important; font-size: 14px; color: var(--clr-text-dim) !important; }
.mp-prose label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 6px; color: var(--clr-text) !important; }
.mp-prose .asterisk { color: var(--clr-accent-text) !important; }
.mp-prose :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select) {
    width: 100% !important;
    max-width: 420px;
    box-sizing: border-box;
    background: var(--clr-surface-2) !important;
    border: 1px solid var(--clr-border-2) !important;
    border-radius: 8px !important;
    color: var(--clr-text) !important;
    font: inherit;
    font-size: 15px;
    padding: 10px 12px !important;
    text-indent: 0 !important;
    height: auto !important;
}
.mp-prose :where(input, textarea, select):focus { outline: none; border-color: var(--clr-accent) !important; box-shadow: 0 0 0 3px var(--clr-accent-tint); }
.mp-prose :where(input[type="submit"], button, .button) {
    background: var(--clr-accent) !important;
    color: var(--clr-on-accent) !important;
    border: 0 !important;
    border-radius: 8px !important;
    font: inherit;
    font-size: 15px !important;
    font-weight: 600;
    padding: 10px 20px !important;
    height: auto !important;
    line-height: 1.4 !important;
    cursor: pointer;
    width: auto !important;
}
.mp-prose :where(input[type="submit"], button, .button):hover { background: var(--clr-accent-dim) !important; }
.mp-prose #mc_embed_signup .brandingLogo { display: none; }

@media (max-width: 700px) {
    .mp-page { padding: 16px 16px 36px; }
    .mp-page-title { font-size: 23px; margin-bottom: 16px; }
    .mp-prose { font-size: 15px; }
    .mp-prose .alignright,
    .mp-prose .alignleft { float: none; max-width: 100%; margin: 0 0 16px !important; display: block; }
}

/* ── Footer (footer.php) ─────────────────────────────────── */
.mp-footer {
    background: var(--clr-surface);
    border-top: 1px solid var(--clr-border);
    margin-top: 40px;
    padding: 0 max(24px, calc((100% - 1240px) / 2 + 24px));
}
.mp-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding: 40px 0 32px;
}
.mp-footer-brand .mp-logo { display: inline-block; font-size: 17px; text-decoration: none; }
.mp-footer-brand p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--clr-text-dim);
    margin: 10px 0 16px;
    max-width: 300px;
}
.mp-footer-cta {
    display: inline-block;
    background: var(--clr-accent);
    color: var(--clr-on-accent);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .13s;
}
.mp-footer-cta:hover { background: var(--clr-accent-dim); color: var(--clr-on-accent); }
.mp-footer-col h2 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--clr-text);
    margin: 4px 0 14px;
}
.mp-footer-col ul { list-style: none; margin: 0; padding: 0; }
.mp-footer-col li { margin: 0 0 10px; }
.mp-footer-col a {
    font-size: 14px;
    color: var(--clr-text-dim);
    text-decoration: none;
    transition: color .13s;
}
.mp-footer-col a:hover { color: var(--clr-text); }
.mp-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 24px;
    border-top: 1px solid var(--clr-border);
    padding: 18px 0 22px;
    font-size: 13px;
    color: var(--clr-text-dim);
}
.mp-footer-portals { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mp-footer-portals a { color: var(--clr-text-dim); text-decoration: none; transition: color .13s; }
.mp-footer-portals a:hover { color: var(--clr-text); }
.mp-footer-portals a[aria-current] { color: var(--clr-text-soft); font-weight: 500; }
.mp-footer-portals a::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 1px;
}
.mp-footer-portal-mp::before  { background: var(--clr-portal-mp); }
.mp-footer-portal-mmp::before { background: var(--clr-portal-mmp); }
.mp-footer-portal-msp::before { background: var(--clr-portal-msp); }

@media (max-width: 900px) {
    .mp-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mp-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .mp-footer { padding: 0 16px; margin-top: 28px; }
    .mp-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; padding: 28px 0 22px; }
    .mp-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── Portal-Farben: mp ist schwarz mit weißer Schrift – heller Rand, damit es
   auf dem dunklen Hintergrund sichtbar bleibt (Farben: variables.css) ── */
.blog_ep_portal_wrap.mp,
.blog_ep_portal_wrap.meinpodcast { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.mpss-tab-mp.is-active,
.mpc-tab-mp.is-active { color: #fff; border-color: rgba(255, 255, 255, .6); }
.mp-footer-portal-mp::before { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }

/* ── Akzent je Portal (variables.css): Icons/Schrift auf der Akzentfläche ── */
#play_pause_wrap .pp-icon::before { background: var(--clr-on-accent); }
#play_pause_wrap .pp-icon::after {
    background: linear-gradient(var(--clr-on-accent), var(--clr-on-accent)) left / 4px 100% no-repeat,
                linear-gradient(var(--clr-on-accent), var(--clr-on-accent)) right / 4px 100% no-repeat;
}
/* mp: echtes Wortmarken-Logo (schwarz) weiß dargestellt */
.mp-logo-img { display: block; height: 20px; width: auto; filter: invert(1); }
.mp-footer-brand .mp-logo-img { height: 22px; }
@media (max-width: 600px) { .mp-nav .mp-logo-img { height: 17px; } }

/* ── Stöbern: Hover wie bei „Jetzt aktuell" + Trennlinie zwischen Kacheln und Karten ── */
.mp-cat-overlay img,
.mp-serie-art img { transition: transform .25s ease, filter .2s ease; }
/* Keine Kachel ist dauerhaft markiert: der Rahmen (früher .is-active) erscheint beim Überfahren */
/* Kein weißer Rand/Ring beim Überfahren (Wunsch 23.09.) – der Zoom zeigt den Hover */
.mp-cat-card:hover .mp-cat-overlay img { transform: scale(1.06); }
.mp-cat-card:hover .mp-cat-label { color: #fff; }
.mp-serie-art { overflow: hidden; border: 1px solid var(--clr-border); border-bottom: 0; box-sizing: border-box; }
.mp-serie-art,
.mp-serie-info { transition: border-color .13s; }
.mp-serie-card:hover .mp-serie-art,
.mp-serie-card:hover .mp-serie-info { border-color: var(--clr-accent); }
.mp-serie-card:hover .mp-serie-art { outline: none; }
.mp-serie-card:hover .mp-serie-art img { transform: scale(1.05); filter: none; }
.mp-serie-card:hover .mp-s-title { color: var(--clr-accent-text); }
.mp-browse-divider { height: 1px; background: var(--clr-border); margin: 18px 0; }
.mp-browse-divider + .mp-expanded { margin-top: 0; }

/* ── Podcast der Woche (mp-hero.php): Plakette + Herkunft ── */
.mp-hero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-hero-note { font-size: 14px; color: var(--clr-text-dim); }

/* ── „Neu auf …“-Karten: Hover-Rahmen innen statt outline (outline liegt außerhalb
   und wird von der scrollenden Reihe oben abgeschnitten); Rahmen um Bild + Text ── */
.mp-portrait-art { border: 1px solid var(--clr-border); border-bottom: 0; box-sizing: border-box; }
.mp-portrait-art,
.mp-portrait-info { transition: border-color .13s; }
.mp-portrait-card:hover .mp-portrait-art { outline: none; }
.mp-portrait-card:hover .mp-portrait-art,
.mp-portrait-card:hover .mp-portrait-info { border-color: var(--clr-accent); }

/* ── Hell/Dunkel-Schalter (mp-nav.php, Logik in header.php) ── */
.mp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-left: 12px;
    padding: 0;
    border: 1px solid var(--clr-border-2);
    border-radius: 8px;
    background: transparent;
    color: var(--clr-text-soft);
    cursor: pointer;
    transition: background .13s, color .13s;
}
.mp-theme-toggle:hover { background: var(--clr-surface-2); color: var(--clr-text); }
.mp-theme-toggle:focus-visible { outline: 2px solid var(--clr-accent-line); outline-offset: 2px; }
.mp-theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Dunkel zeigt die Sonne (wechselt zu hell), hell den Mond */
.mp-theme-toggle .mp-icon-moon { display: none; }
html[data-theme="light"] .mp-theme-toggle .mp-icon-sun { display: none; }
html[data-theme="light"] .mp-theme-toggle .mp-icon-moon { display: block; }
@media (max-width: 600px) {
    .mp-theme-toggle { margin-left: auto; width: 34px; height: 34px; }
    .mp-theme-toggle + .mp-join-btn { margin-left: 8px; }
}
/* Hell: Wortmarke im Original schwarz */
html[data-theme="light"] .mp-logo-img { filter: none; }

/* Serien-Karten: Titel folgt dem Modus (style.css setzt fest weiß) */
.mp-s-title { color: var(--clr-text); }
/* Platzierungen: kräftiger als --clr-text-ghost, sonst zu blass (hell und dunkel) */
.mp-chart-num,
.mpc-rank { color: var(--clr-text-faint); }

/* ── #player_content: Menüpunkte als Reiter nebeneinander (js/player.js) ── */
html body #player_content .pc-head { display: flex; align-items: center; gap: 12px; }
html body #player_content .pc-tabs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
html body #player_content .pc-tab {
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 7px;
    border: 1px solid var(--clr-border-2);
    background: transparent;
    color: var(--clr-text-soft);
    cursor: pointer;
    transition: background .13s, color .13s, border-color .13s;
}
html body #player_content .pc-tab:hover { background: var(--clr-surface-2); color: var(--clr-text); }
html body #player_content .pc-tab.is-active { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-on-accent); }
html body #player_content .pc-close { flex-shrink: 0; margin-left: auto; }
@media (max-width: 420px) {
    html body #player_content .pc-tabs { gap: 4px; }
    html body #player_content .pc-tab { padding: 7px 9px; font-size: 13px; }
}

/* Grau-Modus: Suchfeld in der Kachelfarbe wie alle Karten */
.mp-search-inner { background: var(--clr-surface); }
/* Aktuelle Episode in der Episodenliste: Meta-Infos auf der hellen Markierung voll deckend */
#episode_wrap_right .ep_right_item.active span { color: var(--clr-text); }

/* „Podcast der Woche“ hat dieselbe Kachelfarbe wie die übrigen Karten (Farb-Werkzeug 23.09.) */
/* … darin der Button schwarz mit weißer Schrift/Icon, ebenso „Podcaster werden“ auf der grauen Kopfzeile */
html:not([data-theme="light"]) .mp-hero,
html:not([data-theme="light"]) .mp-join-btn { --clr-accent: #121212; --clr-accent-dim: #2e2e2e; --clr-on-accent: #ffffff; }

/* ── Fehlerseite (404.php) ─────────────────────────────────── */
.mp-error-page { padding-top: 56px; padding-bottom: 72px; max-width: 640px; }
.mp-error-code { font-family: var(--font-mono); font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: -2px; color: var(--clr-text-faint); margin: 0 0 14px; }
.mp-error-text { font-size: 16px; line-height: 1.6; color: var(--clr-text-soft); margin: 0 0 24px; }
.mp-error-search { display: flex; gap: 8px; margin: 0 0 22px; }
.mp-error-search input { flex: 1 1 auto; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 8px; border: 1px solid var(--clr-border-2); background: var(--clr-surface); color: var(--clr-text); font: inherit; font-size: 15px; }
.mp-error-search input::placeholder { color: var(--clr-text-ghost); }
.mp-error-search input:focus { outline: none; border-color: var(--clr-accent-line); }
.mp-error-search button { height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--clr-accent); color: var(--clr-on-accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.mp-error-search button:hover { background: var(--clr-accent-dim); }
.mp-error-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-error-links a { font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--clr-border-2); color: var(--clr-text-soft); text-decoration: none; transition: background .13s, color .13s; }
.mp-error-links a:hover { background: var(--clr-surface-2); color: var(--clr-text); }
@media (max-width: 600px) { .mp-error-page { padding-top: 32px; } .mp-error-code { font-size: 44px; } }

/* ── Serien ohne Logo ───────────────────────────────────────────
   Statt eines Covers steht der Anfangsbuchstabe auf dem Kachel-Verlauf
   (.mpss-initial, siehe CSS/mp-serien-style.css). Bis 06.10.2026 war die
   Schrift rgba(0,0,0,.55) — das stammt aus der Zeit, als hinter den Covern eine
   weiße Fläche lag. Seit die Flächen weg sind (Block am Ende dieser Datei), ist
   der Verlauf im Dunkel-Modus dunkel und die schwarze Schrift war dort fast
   unsichtbar. Im Hell-Modus bleibt sie dunkel. */
.mpss-initial { color: rgba(255, 255, 255, .55); }
html[data-theme="light"] .mpss-initial { color: rgba(0, 0, 0, .55); }

/* ── Hover auf Karten (Wunsch 23.09.): kein weißer Rahmen ──────
   Stattdessen legt sich die Abdunklung über die ganze Kachel. Vorher wurde nur das
   Bild selbst abgedunkelt (filter) – bei Logos mit weißem Rand blieb dieser hell,
   die Abdunklung sah abgeschnitten aus (Beispiel „Daily Watch"). */
.mp-portrait-card:hover .mp-portrait-art,
.mp-portrait-card:hover .mp-portrait-info,
.mp-serie-card:hover .mp-serie-art,
.mp-serie-card:hover .mp-serie-info,
.mp-land-card:hover .mp-land-inner,
.mp-chart-card:hover .mp-chart-inner,
.mpss-card:hover .mpss-art { border-color: var(--clr-border); outline: none; }

/* Abdunklung deckt Bild UND Fläche dahinter ab */
.mp-portrait-hover,
.mp-land-hover { background: rgba(0, 0, 0, .62); border-radius: inherit; }
.mp-portrait-card:hover .mp-portrait-art img,
.mp-serie-card:hover .mp-serie-art img,
.mpss-card:hover .mpss-art img { filter: none; }

/* Titel in der Abdunklung: zwei Zeilen, damit unten nichts abgeschnitten wird */
.mp-hover-ep-title {
    -webkit-line-clamp: 2;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ── Scrollleiste in den Slider-Reihen ausblenden ──────────────
   Gescrollt wird über die Pfeil-Buttons (assets/js/sliders.js) bzw. mit Wischen;
   die dünne Leiste darunter (z. B. im Panel „… — alle Podcasts") entfällt damit. */
.mp-slider > .mp-scroll-row,
.mp-slider > .mp-cat-row,
.mp-slider > .mp-serie-row { scrollbar-width: none; -ms-overflow-style: none; }
.mp-slider > .mp-scroll-row::-webkit-scrollbar,
.mp-slider > .mp-cat-row::-webkit-scrollbar,
.mp-slider > .mp-serie-row::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Panel „… — alle Podcasts": ohne eigenen Kasten – kein Hintergrund, kein Rahmen,
   kein Innenabstand (Wunsch 23.09.). Die Karten darin stehen frei auf der Seite. */
.mp-expanded { background: transparent; border: 0; padding: 0; border-radius: 0; }

/* Kapitelmarken im Player-Band sind Schaltflächen: Klick springt an die Stelle */
.mps-chapter-row {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: .5px solid var(--clr-border);
    border-radius: 6px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background .13s;
}
.mps-chapter-row:last-child { border-bottom: 0; }
.mps-chapter-row:hover { background: var(--clr-accent-tint); }
.mps-chapter-row:hover .mps-ch-title { color: var(--clr-text); }

/* Player-Band: ohne Kapitelspalte nimmt der linke Teil die volle Breite ein
   (:has wird von allen aktuellen Browsern unterstützt; ältere zeigen weiter zwei Spalten) */
.mps-player-band:not(:has(.mps-player-right)) { grid-template-columns: minmax(0, 1fr); }

/* Beschreibung auf der Episodenseite über die volle Breite (wie das Player-Band darüber).
   Die Textseiten (FAQ, Impressum …) behalten ihre begrenzte Zeilenlänge. */
.mps-page .mp-prose { max-width: none; }

/* ── Episodenliste im Aufbau wie bei Spotify ───────────────────
   Cover | Titel + Beschreibung + Meta | Play-Knopf rechts */
.mps-ep-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 48px;
    align-items: start;
    gap: 16px;
    padding: 16px 0;
}
.mps-ep-cover { width: 76px; height: 76px; border-radius: 8px; overflow: hidden; flex: none; }
.mps-ep-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mps-ep-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-self: stretch; text-decoration: none; color: inherit; }
.mps-ep-row:hover .mps-ep-row-title,
.mps-ep-info:focus-visible .mps-ep-row-title { text-decoration: underline; }
.mps-ep-row-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--clr-text); text-decoration: none; }
.mps-ep-excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--clr-text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mps-ep-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--clr-text-dim); }
.mps-ep-meta > span + span::before { content: "·"; margin-right: 10px; color: var(--clr-text-faint); }
.mps-ep-play { align-self: center; }
.mps-alle-folgen { display: flex; justify-content: center; padding-top: 8px; }
@media (max-width: 600px) {
    .mps-ep-row { grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 12px; }
    .mps-ep-cover { width: 64px; height: 64px; }
    .mps-ep-excerpt { -webkit-line-clamp: 2; font-size: 13px; }
    /* Beim Umbruch landete der Trennpunkt am Zeilenanfang - hier trennt der Abstand */
    .mps-ep-meta { gap: 3px 12px; }
    .mps-ep-meta > span + span::before { content: none; margin-right: 0; }
}

/* ── Episodenseite: Play-Knopf im Kopf statt Player-Band darunter (Wunsch 24.09.) ── */
.mps-hero-play { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.mps-hero-play .mps-dur { font-size: 14px; }

/* Kapitel als eigener Abschnitt: Marken sind volle Zeilen, kein Kasten darum */
.mps-kapitel { margin-top: 20px; }
.mps-kapitel .mps-section-title { margin-bottom: 10px; }
.mps-chapter-list { display: flex; flex-direction: column; }
/* Zwei feste Spalten: Zeit | Titel. So stehen alle Titel auf einer Linie, auch wenn
   eine Marke bei 01:02:03 statt 00:02:03 liegt. */
.mps-chapter-list .mps-chapter-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 12px;
    margin-left: -12px;
    width: calc(100% + 24px);
    border-radius: 8px;
}
.mps-chapter-list .mps-ch-time { width: auto; font-size: 13px; line-height: 1.45; }
.mps-chapter-list .mps-ch-title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }

/* ── Serienseite: Play-Knopf sitzt in der Aktionszeile der neuesten Folge (Wunsch 24.09.),
   nicht mehr unter dem Cover und nicht mehr in einer eigenen Player-Zeile ── */
.mps-ep-actions { align-items: center; }
.mps-ep-actions .mps-hero-play { margin-top: 0; }

/* ── Serienseite: Beschreibung als eigener Abschnitt unter dem Kopf (Wunsch 24.09.) ── */
.mps-serie-desc .mps-section-title { margin-bottom: 10px; }
.mps-serie-desc .mp-prose { font-size: 15px; line-height: 1.7; color: var(--clr-text-soft); }

/* -- Charts: dieselbe Zeile wie /neue-folgen/, davor die Platzierung (Wunsch 24.09.) -- */
.mps-ep-row.has-rank { grid-template-columns: 44px 76px minmax(0, 1fr) 48px; }
.mps-ep-rank {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
    color: var(--clr-text-ghost);
    text-align: center;
    align-self: center;
}
.mps-ep-row.is-top .mps-ep-rank { color: var(--clr-accent-text); font-size: 22px; }
@media (max-width: 600px) {
    .mps-ep-row.has-rank { grid-template-columns: 22px 56px minmax(0, 1fr) 40px; gap: 9px; }
    .mps-ep-row.has-rank .mps-ep-cover { width: 56px; height: 56px; }
    .mps-ep-rank { font-size: 15px; }
    .mps-ep-row.is-top .mps-ep-rank { font-size: 17px; }
}

/* -- Suchleiste als Formular (Wunsch 25.09.): vorher ein Link, der beim Klick sofort
   auf die leere Ergebnisseite fuehrte. Jetzt wird hier getippt. -- */
form.mp-search-inner { cursor: auto; }
.mp-search-field {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--clr-text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.4;
}
.mp-search-field::placeholder { color: var(--clr-text-dim); opacity: 1; }
.mp-search-field:focus { outline: none; }
.mp-search-inner:focus-within { border-color: var(--clr-accent); }
button.mp-search-icon { background: none; padding: 0; cursor: pointer; }

/* „Podcast der Woche": Titel und Serienname sind Links (Wunsch 25.09.) */
.mp-hero-title a, .mp-hero-sub a { color: inherit; text-decoration: none; }
.mp-hero-title a:hover, .mp-hero-sub a:hover { text-decoration: underline; }

/* -- Suchergebnisse (/?s=) im Stil der uebrigen Seiten (25.09.) -- */
.mps-suche-feld { margin: 0 0 8px; max-width: 560px; }
.mp-suche-body .mpn-day { margin-top: 26px; }
.mp-suche-body .mpss-grid { margin-bottom: 4px; }

/* -- Episodenseite: Umschalter Beschreibung / Transkript (Wunsch 25.09.) -- */
.mps-text-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.mps-text-tab {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid var(--clr-border);
    background: transparent;
    color: var(--clr-text-soft);
    font-family: var(--font-sans);
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .13s, color .13s, border-color .13s;
}
.mps-text-tab:hover { color: var(--clr-text); border-color: var(--clr-border-2); background: var(--clr-surface-2); }
.mps-text-tab.is-active { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-on-accent); }
.mps-transkript p { margin: 0 0 12px; }
.mps-transkript strong { color: var(--clr-text); font-weight: 600; }

/* -- Lautstaerkeregler in der Akzentfarbe (Wunsch 25.09.); stand auf --accent, das es
   im neuen Theme nicht gibt, und fiel damit auf Orange zurueck -- */
html body #vol_range { accent-color: var(--clr-accent); }
html body #vol_range::-webkit-slider-runnable-track { background: var(--clr-surface-3); }
html body #vol_range::-moz-range-track { background: var(--clr-surface-3); }
html body #vol_range::-webkit-slider-thumb { background: var(--clr-accent); border-color: var(--clr-accent); }
html body #vol_range::-moz-range-thumb { background: var(--clr-accent); }

/* -- Kacheln ohne Rahmen, Zoom auf dem Logo (Wunsch 29.09.) ------------------
   Bei den Karten "Neu auf ..." faellt der Rahmen um Bild und Textflaeche weg.
   Den Hover zeigt stattdessen -- wie beim Stoebern nach Serien -- der Zoom auf
   dem Podcast-Logo. Damit sieht jede Kachelart beim Ueberfahren gleich aus. */
.mp-portrait-art,
.mp-portrait-info { border: 0; }

/* Der Zoom braucht einen Rahmen, der abschneidet: sonst waechst das Logo ueber
   die Kachel hinaus und schiebt sich in die Nachbarkachel. */
.mp-portrait-art,
.mp-land-art,
.mp-chart-art,
.mpss-art { overflow: hidden; }

/* Gleiche Kurve und gleicher Faktor wie .mp-serie-art beim Stoebern */
.mp-portrait-art img,
.mp-land-art img,
.mp-chart-art img,
.mpss-art img { transition: transform .25s ease, filter .2s ease; }
.mp-portrait-card:hover .mp-portrait-art img,
.mp-land-card:hover .mp-land-art img,
.mp-chart-card:hover .mp-chart-art img,
.mpss-card:hover .mpss-art img { transform: scale(1.05); }

/* -- Keine Flaechen hinter Cover-Bildern (Wunsch 06.10.2026) ------------------
   Deckt ein Cover seinen Behaelter nicht vollstaendig ab, schimmerte die Flaeche
   darunter als heller Rand durch. Die Angaben lagen verstreut in style.css,
   CSS/mp-serie-style.css, CSS/mp-serien-style.css und weiter oben in dieser
   Datei; einzeln entfernt griff jeweils die naechste Datei als Rueckfall.
   Darum hier zentral und zuletzt -- diese Datei wird als letzte geladen.
   Absichtlich NICHT dabei:
     .mpss-initial   Anfangsbuchstabe von Serien ohne Logo, braucht seine Flaeche
     .mp-cat-overlay Verlauf hinter Beschriftung und Zaehler der Serien-Kacheln */
.mp-hero-art,
.mp-portrait-art,
.mp-land-art,
.mp-chart-art,
.mp-serie-art,
.mpss-art,
.mpc-cover,
.mps-cover,
.mps-ep-cover { background: none; }