/* uebergabe-player.css — Eigener Podcast-Player (Bar + Episode-Karten)
   Nutzt ausschließlich Theme-Variablen → Light/Dark/Sepia/Auto laufen mit. */

:root {
    --uep-bar-h: 88px;
    /* Übergabe-Terrakotta (Site-Accent) als Standard */
    --uep-accent: var(--ghost-accent-color, #c87040);
    /* Pflegeupdate-Blau: Markenton #50a0d0, auf hellem Grund abgedunkelt
       (#2f7fb6), damit weiße Schrift/Icons lesbar bleiben */
    --uep-blue: #2f7fb6;
}
[data-color-scheme="dark"] { --uep-blue: #50a0d0; }
@media (prefers-color-scheme: dark) {
    [data-color-scheme="auto"] { --uep-blue: #50a0d0; }
}

/* PU-Episoden (Pflegeupdate) laufen komplett in Blau —
   Karte und Leiste erben alles über --uep-accent */
.uep-card--pu,
.uep-bar--pu { --uep-accent: var(--uep-blue); }

/* ── Versteckter LetsCast-Fallback ───────────────────────────── */
.uep-embed-fallback { display: none; }
.uep-embed-fallback--visible { display: block; }

/* ── Lade-Indikator der nahtlosen Navigation (GitHub-Stil) ───── */
.uep-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--uep-accent);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
}
.uep-nav-progress.is-loading {
    width: 82%;
    opacity: 1;
    transition: width 8s cubic-bezier(.1, .7, .1, 1), opacity .15s ease;
}
.uep-nav-progress.is-done {
    width: 100%;
    opacity: 0;
    transition: width .2s ease, opacity .4s ease .2s;
}
@media (prefers-reduced-motion: reduce) {
    .uep-nav-progress { transition: opacity .2s ease !important; }
}

/* [hidden] muss auch Elemente mit eigenem display-Wert verstecken
   (Author-CSS schlägt sonst die UA-Regel für [hidden]) */
.uep-bar [hidden],
.uep-card [hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   PLAYER-BAR
   ══════════════════════════════════════════════════════════════ */
.uep-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 999900; /* unter Ghost Portal, über allem anderen */
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--color-body, #fff) 88%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    border-top: var(--border, 1px solid rgba(0, 0, 0, .08));
    box-shadow: 0 -10px 36px rgba(0, 0, 0, .07);
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.32, .72, .27, 1), visibility .35s;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .uep-bar { background: var(--color-body, #fff); }
}
.uep-bar--hidden {
    transform: translateY(110%);
    visibility: hidden;
}
body.uep-has-bar {
    padding-bottom: calc(var(--uep-bar-h) + env(safe-area-inset-bottom, 0px) + 12px);
}

/* Mobile Mini-Fortschrittslinie an der Oberkante */
.uep-topline {
    display: none;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    pointer-events: none;
}
.uep-topline-fill {
    height: 100%;
    width: 0%;
    background: var(--uep-accent);
    border-radius: 0 2px 2px 0;
    transition: width .25s linear;
}

/* Drei Zonen wie bei Spotify: links Cover+Titel, Mitte Transport über
   Timeline, rechts Utility-Buttons. Gleiche Außenspalten halten die
   Mitte exakt zentriert. */
.uep-bar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 740px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    min-height: var(--uep-bar-h);
    padding: 10px clamp(14px, 2.5vw, 28px);
    box-sizing: border-box;
}
.uep-zone { min-width: 0; }
.uep-zone--left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.uep-zone--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.uep-zone--right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* Cover + Titel */
.uep-cover {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: var(--radius-small, 8px);
    object-fit: cover;
    background: var(--color-two, #f2f2f2);
}
.uep-titles {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.uep-title {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-font-one, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uep-title-inner { display: inline-block; white-space: nowrap; }

/* Überlanger Titel läuft sanft durch (Klasse setzt das JS nur bei Überlauf) */
.uep-title.is-marquee {
    text-overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.uep-title.is-marquee .uep-title-inner {
    animation: uep-marquee var(--uep-marquee-dur, 12s) linear infinite alternate;
    will-change: transform;
}
.uep-zone--left:hover .uep-title-inner { animation-play-state: paused; }
@keyframes uep-marquee {
    0%, 12% { transform: translateX(0); }
    88%, 100% { transform: translateX(var(--uep-marquee-dist, 0px)); }
}
.uep-subtitle {
    font-size: .78rem;
    color: var(--color-font-one, #111);
    opacity: .55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Buttons */
.uep-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full, 999px);
    background: transparent;
    color: var(--color-font-one, #111);
    cursor: pointer;
    transition: background .18s, color .18s, transform .12s;
}
.uep-btn:hover { background: var(--color-two, rgba(0, 0, 0, .05)); }
.uep-btn:active { transform: scale(.94); }
.uep-btn:focus-visible {
    outline: 2px solid var(--uep-accent);
    outline-offset: 2px;
}
.uep-btn svg { width: 22px; height: 22px; }

.uep-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
/* Transport-Buttons leiser und kompakter (Spotify-Duktus) */
.uep-transport .uep-btn {
    width: 36px;
    height: 36px;
    opacity: .8;
}
.uep-transport .uep-btn:hover { opacity: 1; }
.uep-transport .uep-btn svg { width: 20px; height: 20px; }
.uep-transport .uep-text-btn {
    width: auto;
    min-width: 40px;
    border: 0;
    font-size: .82rem;
}
.uep-play.uep-play {
    width: 44px;
    height: 44px;
    margin: 0 8px;
    background: var(--uep-accent);
    color: #fff;
    opacity: 1;
    transition: background .18s, transform .15s, filter .18s;
}
.uep-play.uep-play:hover {
    background: var(--uep-accent);
    filter: brightness(1.08);
    transform: scale(1.06);
}
.uep-play.uep-play:active { transform: scale(.96); }
.uep-play.uep-play svg { width: 22px; height: 22px; }

/* Schlaf-Timer-Button: aus = stiller Mond, aktiv = Akzent + Countdown */
.uep-sleep-bar.is-active {
    width: auto;
    padding: 0 10px;
    gap: 6px;
    color: var(--uep-accent);
    opacity: 1;
}
.uep-sleep-bar-text {
    font-size: .76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Pulsieren, wenn Autoplay blockiert wurde („hier weiter drücken“) */
.uep-nudge { animation: uep-pulse 1.6s ease-in-out infinite; }
@keyframes uep-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--uep-accent) 45%, transparent); }
    55% { box-shadow: 0 0 0 12px transparent; }
}

.uep-bar--buffering .uep-play svg { animation: uep-blink 1s ease-in-out infinite; }
@keyframes uep-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* Timeline: volle Breite der Mittelzone, Zeiten außen (Spotify-Duktus) */
.uep-timeline {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.uep-time {
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-font-one, #111);
    opacity: .55;
    flex: 0 0 auto;
    min-width: 48px;
}
.uep-time-current, .uep-p-time-current { text-align: right; }
.uep-time-total, .uep-p-time-total { text-align: left; }

/* Slider mit Kapitel-Ticks + Tooltip */
.uep-range-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 60px;
    display: flex;
    align-items: center;
}
.uep-range {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.uep-range::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--uep-accent) var(--uep-progress, 0%),
        var(--color-three, #e5e5e5) var(--uep-progress, 0%));
}
.uep-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4.5px;
    border-radius: 50%;
    border: 2px solid var(--color-body, #fff);
    background: var(--uep-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    position: relative;
    z-index: 2;
}
.uep-range::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: var(--color-three, #e5e5e5);
}
.uep-range::-moz-range-progress {
    height: 5px;
    border-radius: 999px;
    background: var(--uep-accent);
}
.uep-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-body, #fff);
    border-radius: 50%;
    background: var(--uep-accent);
}
.uep-range:focus-visible { outline: 2px solid var(--uep-accent); outline-offset: 4px; }

/* Thumb erst beim Hovern zeigen (Spotify-Duktus) — nur auf Maus-Geräten */
@media (hover: hover) and (pointer: fine) {
    .uep-range::-webkit-slider-thumb { opacity: 0; transition: opacity .15s; }
    .uep-range-wrap:hover .uep-range::-webkit-slider-thumb,
    .uep-range:active::-webkit-slider-thumb,
    .uep-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
    .uep-range::-moz-range-thumb { opacity: 0; transition: opacity .15s; }
    .uep-range-wrap:hover .uep-range::-moz-range-thumb,
    .uep-range:active::-moz-range-thumb,
    .uep-range:focus-visible::-moz-range-thumb { opacity: 1; }
}

.uep-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.uep-tick {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 5px;
    transform: translate(-50%, -50%);
    border-radius: 1px;
    background: color-mix(in srgb, var(--color-font-one, #111) 45%, transparent);
    opacity: .8;
}

.uep-range-tip {
    position: absolute;
    bottom: 24px;
    transform: translateX(-50%);
    padding: 5px 9px;
    border-radius: var(--radius-small, 8px);
    background: var(--color-font-one, #111);
    color: var(--color-body, #fff);
    font-size: .74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* Tempo-Button in der Bar */
.uep-text-btn {
    width: auto;
    min-width: 46px;
    padding: 0 10px;
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: var(--border, 1px solid rgba(0, 0, 0, .12));
}

/* ── Panel (Details) ─────────────────────────────────────────── */
.uep-panel {
    order: -1; /* öffnet sich oberhalb der Bar */
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .4s cubic-bezier(.32, .72, .27, 1), visibility .4s;
}
.uep-bar--open .uep-panel {
    max-height: min(64vh, 540px);
    visibility: visible;
}
.uep-panel-inner {
    max-width: 1320px;   /* bündig mit der Bar */
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 20px clamp(14px, 2.5vw, 28px) 16px;
    border-bottom: var(--border, 1px solid rgba(0, 0, 0, .08));
    max-height: min(64vh, 540px);   /* Notbremse; am Desktop scrollt nur die Kapitelliste */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Tempo/Timer-Zeilen gibt es nur mobil — am Desktop sitzen beide in der Bar */
@media (min-width: 761px) {
    .uep-mobile-controls { display: none; }
    .uep-chapter-list {
        max-height: min(42vh, 400px);
        overflow-y: auto;
        padding-right: 8px;
    }
}
@media (max-width: 760px) {
    .uep-mobile-controls {
        margin-bottom: 4px;
        padding-bottom: 10px;
        border-bottom: var(--border, 1px solid rgba(0, 0, 0, .08));
    }
}

/* Footer: Teilen links, Folgen rechts */
.uep-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding: 16px 0 4px;
    border-top: var(--border, 1px solid rgba(0, 0, 0, .08));
}
.uep-footer-share {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Unsichtbare Scrollbars — der Fade am Listenende ersetzt den Hinweis */
.uep-panel-inner,
.uep-chapter-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.uep-panel-inner::-webkit-scrollbar,
.uep-chapter-list::-webkit-scrollbar { display: none; }

/* Solange unten noch Kapitel warten: weicher Auslauf statt harter Kante */
.uep-chapter-list.is-scrollable:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 36px), transparent 100%);
}

.uep-panel-timeline {
    display: none; /* nur mobil, Desktop hat den Slider in der Bar */
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

/* Einstellungs-Zeilen (mobil): Label-Spalte + Inhalt als ruhiges Raster */
.uep-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 10px;
}
.uep-row-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--color-font-one, #111);
    opacity: .4;
}
.uep-row-content {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
    min-width: 0;
}

.uep-chip-group {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.uep-chip {
    appearance: none;
    -webkit-appearance: none;
    border: var(--border, 1px solid rgba(0, 0, 0, .12));
    background: transparent;
    color: var(--color-font-one, #111);
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 6px 12px;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}
.uep-chip:hover { background: var(--color-two, rgba(0, 0, 0, .05)); }
.uep-chip.is-active {
    background: var(--uep-accent);
    border-color: var(--uep-accent);
    color: #fff;
}
/* Wo möglich: dezente Tönung statt Vollfläche — wirkt ruhiger bei mehreren Reihen */
@supports (background: color-mix(in srgb, red 50%, blue)) {
    .uep-chip.is-active {
        background: color-mix(in srgb, var(--uep-accent) 13%, transparent);
        border-color: color-mix(in srgb, var(--uep-accent) 55%, transparent);
        color: var(--uep-accent);
    }
}
.uep-chip:focus-visible { outline: 2px solid var(--uep-accent); outline-offset: 2px; }

.uep-sleep-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    color: var(--uep-accent);
    font-weight: 700;
    background: color-mix(in srgb, var(--uep-accent) 10%, transparent);
    border-radius: var(--radius-full, 999px);
    padding: 4px 11px;
}
.uep-sleep-count svg { width: 13px; height: 13px; }
.uep-copy {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: var(--border, 1px solid rgba(0, 0, 0, .12));
    background: transparent;
    color: var(--color-font-one, #111);
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 8px 14px;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    transition: background .18s;
}
.uep-copy:hover { background: var(--color-two, rgba(0, 0, 0, .05)); }
.uep-copy svg { width: 15px; height: 15px; }
.uep-episode-link {
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-font-one, #111);
    text-decoration: none;
    opacity: .75;
}
.uep-episode-link:hover { opacity: 1; color: var(--uep-accent); }

/* Kapitel */
.uep-chapter-headrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
}
.uep-chapter-head {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .35;
}
.uep-chapter-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.uep-chapter { margin: 0; }
.uep-chapter-btn {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 12px;
    align-items: baseline;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-small, 8px);
    background: transparent;
    color: var(--color-font-one, #111);
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}
.uep-chapter-btn:hover { background: var(--color-two, rgba(0, 0, 0, .05)); }
.uep-chapter-time {
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    opacity: .5;
}
.uep-chapter.is-active .uep-chapter-btn {
    background: color-mix(in srgb, var(--uep-accent) 10%, transparent);
    color: var(--uep-accent);
    font-weight: 700;
}
.uep-chapter.is-active .uep-chapter-time { opacity: .8; }

/* Podcast folgen (im Footer rechts) */
.uep-follow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.uep-follow[hidden] { display: none; }
.uep-follow-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-font-one, #111);
    opacity: .4;
}
.uep-follow-links {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.uep-follow-link {
    display: inline-block;
    border: var(--border, 1px solid rgba(0, 0, 0, .12));
    border-radius: var(--radius-full, 999px);
    padding: 5px 12px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--color-font-one, #111);
    text-decoration: none;
    transition: background .18s, color .18s;
}
.uep-follow-link:hover {
    background: var(--color-two, rgba(0, 0, 0, .05));
    color: var(--uep-accent);
}

.uep-error {
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-small, 8px);
    background: color-mix(in srgb, #d33 12%, transparent);
    color: var(--color-font-one, #111);
    font-size: .84rem;
}

/* ══════════════════════════════════════════════════════════════
   EPISODE-KARTE (Facade im Inhalt)
   ══════════════════════════════════════════════════════════════ */
/* „Ambient Stage": Die Karte ist eine in der Markenfarbe getönte Bühne —
   warmer Terrakotta-Hauch bei ÜG, kühler Blau-Hauch bei PU. Fallbacks:
   Browser ohne color-mix bekommen die neutrale Karte (erste Deklaration). */
.uep-card {
    padding: clamp(22px, 3vw, 34px);
    margin: calc(var(--mini-gap, 14px) * 1.8) 0;
    background: var(--color-four, #fff);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--uep-accent) 9%, var(--color-four, #fff)),
        color-mix(in srgb, var(--uep-accent) 3%, var(--color-four, #fff)) 62%);
    border: var(--border, 1px solid rgba(0, 0, 0, .08));
    border-color: color-mix(in srgb, var(--uep-accent) 24%, transparent);
    border-radius: var(--radius-big, 22px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
    box-shadow: 0 14px 38px color-mix(in srgb, var(--uep-accent) 13%, transparent);
}
/* Hauptzeile: Cover (oben links) · Titelblock · runder Play-Button (rechts).
   Der große Play-Button rechts füllt den vorher leeren Raum und schafft eine
   ausbalancierte Diagonale — Premium-Podcast-App-Duktus (Pocket Casts/Castro). */
.uep-card-main {
    display: flex;
    align-items: stretch;
    gap: clamp(22px, 3.2vw, 38px);
}
.uep-card-media { flex: 0 0 auto; align-self: flex-start; }
/* Rechte Spalte: Play-Button über volle Kartenhöhe vertikal zentriert */
.uep-card-aside {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.uep-card-cover {
    display: block;
    width: clamp(100px, 14vw, 160px);
    height: clamp(100px, 14vw, 160px);
    border-radius: var(--radius-large, 16px);
    object-fit: cover;
    background: var(--color-two, #f2f2f2);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    outline: 1px solid rgba(255, 255, 255, .25);
    outline-offset: -1px;
}
.uep-card-cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-font-one, #111);
    opacity: .35;
}
.uep-card-cover--empty svg { width: 38px; height: 38px; }

.uep-card-body { min-width: 0; flex: 1 1 auto; }
.uep-card-kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--uep-accent);
    margin-bottom: 10px;
}
.uep-card-title {
    margin: 0 0 10px;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--color-font-one, #111);
}
.uep-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--color-font-one, #111);
    opacity: .55;
    margin: 0;
}
.uep-card-done {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    color: var(--uep-accent);
    background: color-mix(in srgb, var(--uep-accent) 10%, transparent);
    border-radius: var(--radius-full, 999px);
    padding: 2px 10px;
}
.uep-card-done svg { width: 13px; height: 13px; }

/* Hörfortschritt: eigene volle Zeile (Balken füllt, Restzeit rechts) —
   liegt zwischen Meta und Buttons, damit die Aktionszeile nie umbricht.
   Fährt sanft aus (max-height/opacity), statt nach Sekunden hart zu poppen. */
.uep-card-resume {
    display: flex;
    align-items: center;
    gap: 14px;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.32, .72, .27, 1),
                margin-top .5s cubic-bezier(.32, .72, .27, 1),
                opacity .35s ease .08s;
}
.uep-card-resume.is-visible {
    max-height: 48px;
    margin-top: clamp(16px, 2.2vw, 22px);
    opacity: 1;
}
.uep-card-progress {
    height: 5px;
    flex: 1 1 auto;
    min-width: 80px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--uep-accent) 16%, var(--color-three, #e5e5e5));
    overflow: hidden;
}
.uep-card-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--uep-accent);
    transition: width .3s linear;
}
.uep-card-remaining {
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-font-one, #111);
    opacity: .55;
    white-space: nowrap;
}


/* Großer runder Play-Button — die zentrale Aktion der Karte */
.uep-card-play {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(58px, 6.5vw, 72px);
    height: clamp(58px, 6.5vw, 72px);
    border: 0;
    border-radius: 50%;
    background: var(--uep-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--uep-accent) 40%, transparent);
    transition: filter .18s, transform .15s, box-shadow .18s;
}
.uep-card-play:hover { filter: brightness(1.06); transform: scale(1.06); }
.uep-card-play:active { transform: scale(.95); }
.uep-card-play:focus-visible { outline: 2px solid var(--uep-accent); outline-offset: 4px; }
.uep-card-play svg { width: 28px; height: 28px; flex: 0 0 auto; }
.uep-card-play:not(.is-playing) svg { margin-left: 3px; }  /* optische Mitte des Play-Dreiecks */
.uep-card-play-text { display: none; }   /* Desktop: nur Icon, Label per aria-label */

/* Sekundär-Aktion bewusst still — konkurriert nicht mit dem Play-Button */
.uep-card-restart {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-font-one, #111);
    opacity: .6;
    font-size: .76rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, opacity .18s;
}
.uep-card-restart:hover {
    background: var(--color-two, rgba(0, 0, 0, .05));
    opacity: 1;
}

.uep-card-error {
    padding: 14px 16px;
    margin: calc(var(--mini-gap, 14px) * 1.5) 0;
    border: var(--border, 1px solid rgba(0, 0, 0, .08));
    border-radius: var(--radius-medium, 12px);
    background: var(--color-two, #f6f6f6);
    font-size: .88rem;
}
.uep-card-error a { color: var(--uep-accent); font-weight: 700; }

/* Skeleton beim Laden */
.uep-card--skeleton { animation: uep-sk-pulse 1.5s ease-in-out infinite; }
.uep-sk-cover {
    width: clamp(100px, 14vw, 160px);
    height: clamp(100px, 14vw, 160px);
    border-radius: var(--radius-large, 16px);
    background: var(--color-font-one, #111);
    opacity: .07;
}
.uep-sk-line {
    height: .8rem;
    border-radius: 6px;
    background: var(--color-font-one, #111);
    opacity: .07;
    margin-bottom: .7rem;
}
.uep-sk-kicker { width: 90px; }
.uep-sk-title { width: 75%; height: 1.6rem; }
.uep-sk-meta { width: 45%; }
.uep-sk-play {
    width: clamp(58px, 6.5vw, 72px);
    height: clamp(58px, 6.5vw, 72px);
    border-radius: 50%;
    background: var(--color-font-one, #111);
    opacity: .07;
}
@keyframes uep-sk-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 761px) {
    .uep-expand { display: none; }
}
@media (max-width: 760px) {
    :root { --uep-bar-h: 64px; }
    .uep-topline { display: block; }
    /* Zonen auflösen: alles fließt in eine kompakte Zeile */
    .uep-bar-inner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
    .uep-zone { display: contents; }
    .uep-cover { width: 42px; height: 42px; flex-basis: 42px; }
    .uep-titles { flex: 1 1 auto; }
    .uep-timeline, .uep-speed, .uep-chapters-toggle,
    .uep-bar-chap-prev, .uep-bar-chap-next, .uep-sleep-bar { display: none; }
    .uep-transport { flex: 0 0 auto; }
    .uep-transport .uep-btn { width: 38px; height: 38px; }
    .uep-play.uep-play { width: 44px; height: 44px; margin: 0; }
    .uep-close { display: none; }
    .uep-bar--open .uep-expand svg { transform: rotate(180deg); }
    .uep-expand svg { transition: transform .25s; }
    .uep-panel-timeline { display: flex; }
    .uep-panel-close-row { display: flex; }
    .uep-row { grid-template-columns: 1fr; gap: 5px 0; margin-bottom: 14px; }

    .uep-card-cover, .uep-sk-cover { width: 96px; height: 96px; border-radius: var(--radius-medium, 12px); }
    .uep-card-main { gap: 16px; }
}
@media (max-width: 600px) {
    /* Schmal: Play-Button wandert als volle Pille mit Label unter Cover+Text */
    .uep-card-main { flex-wrap: wrap; }
    .uep-card-aside {
        flex-basis: 100%;
        align-self: auto;
        flex-direction: row;
        gap: 10px;
        margin-top: 6px;
    }
    .uep-card-play {
        width: auto;
        height: auto;
        flex: 1 1 auto;
        gap: 8px;
        border-radius: var(--radius-full, 999px);
        padding: 14px 22px;
    }
    .uep-card-play svg { width: 20px; height: 20px; }
    .uep-card-play:not(.is-playing) svg { margin-left: 0; }
    .uep-card-play-text { display: inline; font-size: .92rem; font-weight: 700; }
}
@media (max-width: 460px) {
    .uep-skip-back { display: none; }
}

/* Mobil: Schließen-Möglichkeit im Panel (Bar-X ist ausgeblendet) */
.uep-panel-close-row {
    display: none;
    justify-content: center;
    padding-bottom: 10px;
}
.uep-panel-close {
    appearance: none;
    -webkit-appearance: none;
    border: var(--border, 1px solid rgba(0, 0, 0, .12));
    background: transparent;
    color: var(--color-font-one, #111);
    font-size: .82rem;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
}
.uep-panel-close:hover { background: var(--color-two, rgba(0, 0, 0, .05)); }

@media print {
    .uep-bar, .uep-nav-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .uep-bar, .uep-btn, .uep-expand svg, .uep-topline-fill, .uep-card-progress-fill, .uep-panel, .uep-card-resume { transition: none; }
    .uep-nudge, .uep-card--skeleton, .uep-bar--buffering .uep-play svg,
    .uep-title.is-marquee .uep-title-inner { animation: none; }
    .uep-play.uep-play:hover { transform: none; }
}