/*********************************************************************
 SATZENTRALE – STYLE (NOW PLAYING GLOW EDITION)
*********************************************************************/

/* =========================
   ROOT COLORS (LIGHT DEFAULT)
========================= */

:root{

    --bg:#f4f7fb;
    --bg2:#e9f1ff;

    --card:rgba(255,255,255,0.75);
    --card2:rgba(255,255,255,0.55);

    --border:rgba(0,0,0,0.08);

    --text:#1c2430;
    --text2:#5c6b7a;

    --accent:#3b82f6;

    --live:#ff2d55;

    --shadow:0 20px 60px rgba(0,0,0,0.08);

    --radius:18px;

}

/* =========================
   DARK MODE (OPTIONAL)
========================= */

body.dark{

    --bg:#0b1220;
    --bg2:#0f1b33;

    --card:rgba(255,255,255,0.06);
    --card2:rgba(255,255,255,0.04);

    --border:rgba(255,255,255,0.08);

    --text:#ffffff;
    --text2:#aab6c4;

    --shadow:0 25px 80px rgba(0,0,0,0.45);

}

/* =========================
   BASE
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Poppins, sans-serif;

    background: #ffffff;

    color:var(--text);

    min-height:100vh;

    padding:25px;

}

/* =========================
   LAYOUT
========================= */

.container {
    width: 100%;
    height: auto;
    min-height: auto;
    box-sizing: border-box;
    padding: 20px;
    overflow: visible;
}

/* =========================
   HEADER
========================= */

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.logo{
    font-size:30px;
    font-weight:800;
}

.subtitle{
    color:var(--text2);
    font-size:13px;
}

/* =========================
   THEME BUTTON
========================= */

.themeButton{

    width:48px;
    height:48px;

    border-radius:50%;

    border:none;

    background:var(--card);

    border:1px solid var(--border);

    cursor:pointer;

    backdrop-filter:blur(20px);

    color:var(--text);

}

/* =========================
   CARD BASE
========================= */

.card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:18px;

    margin-bottom:18px;

    box-shadow:var(--shadow);

    backdrop-filter:blur(20px);

}

/* =========================
   LIVE CARD (GLOW EFFECT CORE)
========================= */

.liveCard{

    position:relative;

    overflow:hidden;

    border-left:5px solid var(--accent);

}

/* sanfter Lichtschein */
.liveCard::before{

    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:260px;
    height:260px;

    background:radial-gradient(
        circle,
        rgba(59,130,246,0.35),
        transparent 70%
    );

    filter:blur(20px);

}

/* =========================
   LIVE BADGE
========================= */

.liveBadge{

    display:flex;
    align-items:center;
    gap:10px;

    color:var(--live);

    font-weight:700;

    margin-bottom:10px;

}

.liveDot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:var(--live);

    animation:pulse 1.4s infinite;

}

@keyframes pulse{

    0%{box-shadow:0 0 0 0 rgba(255,45,85,0.6);}
    70%{box-shadow:0 0 0 18px rgba(255,45,85,0);}
    100%{box-shadow:0 0 0 0 rgba(255,45,85,0);}

}

/* =========================
   NOW PLAYING GLOW (SHOW LIVE)
========================= */

.show.live{

    position:relative;

    border-left:5px solid var(--live);

    box-shadow:
        0 0 25px rgba(255,45,85,0.25),
        0 0 60px rgba(59,130,246,0.12);

    animation:glowPulse 1.8s infinite;

}

/* sanfter Glow + Puls */
@keyframes glowPulse{

    0%{
        transform:scale(1);
        box-shadow:
            0 0 15px rgba(255,45,85,0.15);
    }

    50%{
        transform:scale(1.015);
        box-shadow:
            0 0 35px rgba(255,45,85,0.35),
            0 0 80px rgba(59,130,246,0.2);
    }

    100%{
        transform:scale(1);
        box-shadow:
            0 0 15px rgba(255,45,85,0.15);
    }

}

/* =========================
   LIVE BADGE IN CARD
========================= */

.liveBadgeInline{

    position:absolute;
    top:12px;
    right:12px;

    background:var(--live);

    color:white;

    padding:4px 10px;

    font-size:11px;
    font-weight:700;

    border-radius:20px;

    animation:pulse 1.4s infinite;

}

/* =========================
   SHOW CARDS
========================= */

.show{

    background:var(--card);

    border:1px solid var(--border);

    border-left:5px solid var(--accent);

    border-radius:14px;

    padding:14px;

    margin-bottom:12px;

    transition:0.25s;

}

.show:hover{
    transform:translateY(-2px);
}

.showTime{
    color:var(--accent);
    font-weight:600;
    font-size:13px;
}

.showTitle{
    font-size:17px;
    font-weight:700;
    margin-top:4px;
}

.showDescription{
    font-size:13px;
    color:var(--text2);
    margin-top:4px;
}

/* =========================
   PROGRESS BAR (optional fallback)
========================= */

.progress{

    height:8px;

    background:rgba(0,0,0,0.08);

    border-radius:20px;

    overflow:hidden;

    margin-top:12px;

}

.progressFill{

    height:100%;

    width:0%;

    background:linear-gradient(90deg,#3b82f6,#ff2d55);

}

/* =========================
   TABS
========================= */

.tabs{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin:20px 0;

}

.tab{

    padding:10px 14px;

    border-radius:20px;

    background:var(--card);

    border:1px solid var(--border);

    cursor:pointer;

}

.tab.active{

    background:var(--accent);

    color:white;

}

/* =========================
   COUNTDOWN / TEXT
========================= */

.countdown,
.progressText,
.nextShow{
    color:var(--text2);
    font-size:13px;
    margin-top:8px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    body{
        padding:14px;
    }

    .logo{
        font-size:24px;
    }

}