/* CD-A3c (17.09.2026): externalisiert aus podcasts.php:45-104 — 1:1, unlayered
   wie der Inline-Block. Voraussetzung fuer CSP style-src-elem (siehe
   docs/CSS_AUFGABENLISTE_2026-09-17.md §CD-A3c). */
:root {
    --surface-glass: rgba(15, 23, 42, 0.85);
    --border-glass: rgba(255, 255, 255, 0.12);
}
body {
    background-color: #0b0f19;
    color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    padding-bottom: 90px; /* Space for Sticky Audio Dock */
}
.episode-card {
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    border-radius: 1rem;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}
.episode-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99, 102, 241, 0.4);
}
.play-btn-round {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}
.play-btn-round:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.5);
}
.filter-btn {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid var(--border-glass);
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.filter-btn:hover, .filter-btn.active {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}

/* ==========================================================================
   MFF-2.4 (28.09.2026): Light-Pass — der Shell-Layer nagte den Body auf
   Dunkel (#0b0f19/#f8fafc), Light-Nutzer bekamen eine dunkle Seite, obwohl
   ML-3 den theme-boot längst schema-fähig geschaltet hatte. Light-Blöcke
   folgen dem ML-16-Muster (cve.php): Tokens/Flächen nur wo nötig kippen,
   Dark bleibt unberührt. Direkt-Selektoren statt Variablen-Rewrite, da das
   Sheet unlayered ist und --surface-glass im Dark-Kontext belegt bleibt. */
html[data-bs-theme="light"] body {
    background-color: #f8fafc;
    color: #0f172a;
}
html[data-bs-theme="light"] .episode-card {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.12);
}
html[data-bs-theme="light"] .episode-card:hover {
    border-color: rgba(79, 70, 229, 0.45);
}
html[data-bs-theme="light"] .filter-btn {
    background: rgba(241, 245, 249, 0.9);
    border-color: rgba(15, 23, 42, 0.15);
    color: #475569;
}
html[data-bs-theme="light"] .filter-btn:hover,
html[data-bs-theme="light"] .filter-btn.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}
html[data-bs-theme="light"] .input-group-text.bg-dark,
html[data-bs-theme="light"] .form-control.bg-dark {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.2);
}
/* MFF-2.4: Hartes Weiß-Text auf den jetzt hellen Flächen kippen (Header
   bleibt als bewusste Inline-Dark-Insel dunkel — dort bleibt text-white). */
html[data-bs-theme="light"] h1.text-white,
html[data-bs-theme="light"] .episode-card .text-white,
html[data-bs-theme="light"] .episode-card a.text-white {
    color: #0f172a !important;
}