/* 320 FM PROGRAM GUIDE V1 */

.pg{
    --pg-bg:#070b0e;
    --pg-card:#0d1317;
    --pg-card-2:#10181d;
    --pg-line:#223038;
    --pg-line-soft:#182329;
    --pg-text:#f3f6f7;
    --pg-muted:#8e9aa1;

    /* aktuelle 320-FM-Farbwelt */
    --pg-accent:#ef2851;
    --pg-accent-dark:#a91036;
    --pg-cyan:#47c9e8;
    --pg-purple:#a66ee6;

    width:100%;
    color:var(--pg-text);
}


.pg-title{
    padding:8px 0 15px;
}


.pg-title h1{
    margin:0;
    font-size:43px;
    line-height:1;
    letter-spacing:-.035em;
    font-weight:950;
}


.pg-title p{
    margin:7px 0 0;
    color:#c7ced2;
    font-size:15px;
}


.pg-now{
    display:grid;
    grid-template-columns:
        minmax(0,1.45fr)
        minmax(300px,.85fr)
        230px;
    min-height:185px;
    overflow:hidden;
    border:1px solid var(--pg-line);
    border-radius:12px;
    background:
        radial-gradient(
            circle at 87% 20%,
            rgba(71,201,232,.09),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #10161a,
            #090e11
        );
}


.pg-now__current{
    position:relative;
    display:grid;
    grid-template-columns:160px 1fr;
    gap:25px;
    padding:29px 28px 24px;
    border-right:1px solid var(--pg-line);
}


.pg-now__label{
    position:absolute;
    top:14px;
    left:20px;
    z-index:3;
    color:var(--pg-accent);
    font-size:11px;
    font-weight:900;
}


.pg-now__art{
    width:160px;
    height:126px;
    align-self:end;
    border-radius:8px;
    background:
        radial-gradient(
            circle at 60% 35%,
            #74314d,
            #15252e 45%,
            #0a1115
        );
    background-size:cover;
    background-position:center;
    box-shadow:0 12px 32px rgba(0,0,0,.32);
}


.pg-now__copy{
    align-self:center;
    min-width:0;
}


.pg-live-label{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:5px;
    color:#d5dadd;
    font-size:10px;
    font-weight:800;
}


.pg-live-label i{
    display:block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--pg-accent);
    box-shadow:
        0 0 12px
        rgba(239,40,81,.8);
}


.pg-now__copy h2{
    margin:0 0 4px;
    font-size:28px;
    line-height:1.05;
}


.pg-now__copy > p{
    margin:0 0 10px;
    color:#d0d5d8;
    font-size:13px;
}


.pg-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}


.pg-tags span{
    display:inline-flex;
    align-items:center;
    min-height:19px;
    padding:0 6px;
    border:1px solid rgba(71,201,232,.48);
    border-radius:4px;
    color:var(--pg-cyan);
    font-size:8px;
    font-weight:850;
    letter-spacing:.045em;
    text-transform:uppercase;
}


.pg-tags span:nth-child(odd){
    border-color:rgba(239,40,81,.5);
    color:#ff5679;
}


.pg-now__time{
    margin-top:13px;
}


.pg-now__time strong{
    display:block;
    margin-bottom:8px;
    font-size:12px;
}


.pg-progress{
    width:100%;
    height:3px;
    overflow:hidden;
    border-radius:10px;
    background:#333d42;
}


.pg-progress span{
    display:block;
    width:58%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(
        90deg,
        var(--pg-accent),
        #ff5579
    );
}


.pg-now__upcoming{
    display:grid;
    grid-template-columns:1fr;
    align-content:center;
    padding:20px 22px;
}


.pg-now__upcoming article{
    position:relative;
    display:grid;
    grid-template-columns:58px 1fr;
    gap:12px;
    min-height:65px;
    padding:10px 0;
}


.pg-now__upcoming article + article{
    border-top:1px solid var(--pg-line-soft);
}


.pg-now__upcoming article > span{
    position:absolute;
    top:-2px;
    left:0;
    color:var(--pg-cyan);
    font-size:8px;
    font-weight:900;
}


.pg-mini-art{
    width:58px;
    height:52px;
    align-self:end;
    border-radius:6px;
    background:
        linear-gradient(
            135deg,
            #1d3040,
            #071013
        );
    background-size:cover;
    background-position:center;
}


.pg-now__upcoming article > div:last-child{
    align-self:end;
    display:grid;
    gap:2px;
}


.pg-now__upcoming strong{
    font-size:11px;
}


.pg-now__upcoming small{
    color:#b9c1c5;
    font-size:9px;
}


.pg-now__upcoming time{
    color:#8a969d;
    font-size:9px;
}


.pg-now__actions{
    display:grid;
    align-content:center;
    gap:12px;
    padding:24px;
    border-left:1px solid var(--pg-line);
}


.pg-now__actions button{
    min-height:48px;
    border-radius:7px;
    font:inherit;
    font-size:10px;
    font-weight:850;
    cursor:pointer;
}


.pg-live-button{
    border:1px solid #ff3c69;
    background:
        linear-gradient(
            135deg,
            #e51f55,
            #b20c3f
        );
    color:#fff;
    box-shadow:
        0 8px 28px
        rgba(239,40,81,.21);
}


.pg-reminder-button{
    border:1px solid #334149;
    background:#0b1115;
    color:#bbc4c8;
}


.pg-days{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:4px;
    margin-top:10px;
}


.pg-day{
    position:relative;
    min-height:58px;
    border:1px solid #202d34;
    border-radius:7px;
    background:#10161a;
    color:#d9dddf;
    font:inherit;
    cursor:pointer;
    transition:.16s ease;
}


.pg-day strong,
.pg-day span{
    display:block;
}


.pg-day strong{
    font-size:10px;
}


.pg-day span{
    margin-top:3px;
    color:#829098;
    font-size:9px;
}


.pg-day i{
    position:absolute;
    left:50%;
    bottom:6px;
    width:4px;
    height:4px;
    margin-left:-2px;
    border-radius:50%;
    background:var(--pg-cyan);
    opacity:.7;
}


.pg-day:hover,
.pg-day.is-active{
    border-color:var(--pg-accent);
    background:
        linear-gradient(
            180deg,
            rgba(239,40,81,.08),
            #10161a
        );
}


.pg-day.is-active strong{
    color:#ff5477;
}


.pg-day.is-active i{
    background:var(--pg-accent);
    box-shadow:
        0 0 12px
        rgba(239,40,81,.75);
}


.pg-filter-row{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:14px;
    margin-top:10px;
}


.pg-filters{
    display:flex;
    align-items:center;
    gap:4px;
    margin-right:auto;
    margin-left:180px;
}


.pg-filters button,
.pg-filter-button{
    min-height:31px;
    border:1px solid transparent;
    border-radius:6px;
    background:transparent;
    color:#b5bec3;
    font:inherit;
    font-size:9px;
    font-weight:750;
    cursor:pointer;
}


.pg-filters button{
    padding:0 12px;
}


.pg-filters button:hover,
.pg-filters button.is-active{
    border-color:#8e2943;
    color:#fff;
    background:
        rgba(239,40,81,.075);
}


.pg-filter-button{
    padding:0 13px;
    border-color:#2a373e;
    background:#10161a;
}


.pg-day-panel{
    display:none;
}


.pg-day-panel.is-active{
    display:block;
}


.pg-slot{
    display:grid;
    grid-template-columns:
        95px
        72px
        110px
        minmax(210px,1.05fr)
        minmax(190px,1fr)
        105px
        250px;
    align-items:center;
    min-height:64px;
    margin-top:4px;
    overflow:hidden;
    border:1px solid #202c32;
    border-radius:7px;
    background:
        linear-gradient(
            90deg,
            #10171b,
            #0d1317
        );
    transition:.15s ease;
}


.pg-slot:hover{
    border-color:#35444c;
    transform:translateY(-1px);
}


.pg-slot.is-featured{
    border-color:rgba(239,40,81,.72);
    box-shadow:
        inset 3px 0
        var(--pg-accent),
        0 0 25px
        rgba(239,40,81,.055);
}


.pg-period{
    position:relative;
    align-self:stretch;
    display:flex;
    align-items:center;
    padding-left:2px;
}


.pg-period::after{
    content:"";
    position:absolute;
    right:10px;
    top:0;
    bottom:0;
    width:1px;
    background:#29363d;
}


.pg-period span{
    position:relative;
    color:#d9dfe1;
    font-size:8px;
    font-weight:900;
    letter-spacing:.06em;
}


.pg-period span::after{
    content:"";
    position:absolute;
    right:-20px;
    top:50%;
    width:6px;
    height:6px;
    margin-top:-3px;
    border-radius:50%;
    background:currentColor;
}


.pg-period .is-morning{
    color:#ff4770;
}


.pg-period .is-day{
    color:#42cde9;
}


.pg-period .is-evening{
    color:#aa76e8;
}


.pg-period .is-night{
    color:#4aaeea;
}


.pg-slot__time{
    display:grid;
    gap:3px;
}


.pg-slot__time strong{
    font-size:13px;
}


.pg-slot__time span{
    color:#d5dadd;
    font-size:13px;
}


.pg-slot__art{
    width:92px;
    height:55px;
    border-radius:5px;
    background:
        linear-gradient(
            135deg,
            #20343e,
            #091014
        );
    background-size:cover;
    background-position:center;
}


.pg-slot__identity{
    padding:0 14px;
}


.pg-slot__identity > strong{
    display:block;
    color:#f0f3f4;
    font-size:12px;
}


.pg-slot__identity > span{
    display:block;
    margin:2px 0 6px;
    color:#c1c8cc;
    font-size:9px;
}


.pg-slot__description{
    padding:0 15px;
    border-left:1px solid #1c272d;
    color:#aab4b9;
    font-size:9px;
    line-height:1.45;
}


.pg-slot__range{
    color:#c6cdd0;
    font-size:10px;
    white-space:nowrap;
}


.pg-slot__actions{
    display:flex;
    justify-content:flex-end;
    gap:7px;
    padding-right:12px;
}


.pg-slot__actions a,
.pg-slot__actions button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 11px;
    border:1px solid #334149;
    border-radius:6px;
    background:#0c1216;
    color:#d5dbde;
    font:inherit;
    font-size:8px;
    font-weight:780;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
}


.pg-slot.is-featured
.pg-slot__actions a{
    border-color:#9d2341;
    background:
        linear-gradient(
            135deg,
            #c8204a,
            #8f1633
        );
    color:#fff;
}


.pg-empty{
    display:grid;
    justify-items:center;
    gap:5px;
    margin-top:5px;
    padding:48px 20px;
    border:1px solid #202d33;
    border-radius:8px;
    background:#0d1317;
    color:#8b989f;
    text-align:center;
}


.pg-empty strong{
    color:#d5dbde;
    font-size:13px;
}


.pg-empty span{
    font-size:10px;
}


.pg-discover{
    margin-top:14px;
    padding:14px;
    border:1px solid #202d34;
    border-radius:8px;
    background:#0b1115;
}


.pg-discover > header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:10px;
}


.pg-discover h2{
    margin:0;
    font-size:15px;
}


.pg-discover > header a{
    color:#ff4d72;
    font-size:9px;
    font-weight:750;
    text-decoration:none;
}


.pg-discover__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}


.pg-discover-card{
    display:grid;
    grid-template-columns:42% 1fr;
    min-height:125px;
    overflow:hidden;
    border:1px solid #26343b;
    border-radius:7px;
    background:#0f161a;
    text-decoration:none !important;
}


.pg-discover-card__art{
    background:
        radial-gradient(
            circle at 50% 35%,
            #54233e,
            #101b21 55%,
            #080e11
        );
    background-size:cover;
    background-position:center;
}


.pg-discover-card > div:last-child{
    align-content:center;
    display:grid;
    padding:14px;
}


.pg-discover-card strong{
    color:#f1f4f5;
    font-size:13px;
}


.pg-discover-card span{
    margin-top:2px;
    color:#c0c8cc;
    font-size:9px;
}


.pg-discover-card small{
    width:max-content;
    margin-top:7px;
    padding:2px 5px;
    border:1px solid rgba(71,201,232,.45);
    border-radius:3px;
    color:var(--pg-cyan);
    font-size:7px;
}


.pg-discover-card p{
    margin:8px 0 0;
    color:#919ea5;
    font-size:9px;
    line-height:1.45;
}


.pg-slot.is-filtered{
    display:none;
}


@media(max-width:1180px){

    .pg-now{
        grid-template-columns:
            minmax(0,1fr)
            320px;
    }

    .pg-now__actions{
        grid-column:1/-1;
        grid-template-columns:1fr 1fr;
        border-top:1px solid var(--pg-line);
        border-left:0;
        padding:14px 24px;
    }


    .pg-slot{
        grid-template-columns:
            80px
            65px
            90px
            minmax(180px,1fr)
            100px
            210px;
    }

    .pg-slot__description{
        display:none;
    }

}


@media(max-width:900px){

    .pg-title h1{
        font-size:34px;
    }


    .pg-now{
        grid-template-columns:1fr;
    }

    .pg-now__current,
    .pg-now__upcoming,
    .pg-now__actions{
        border:0;
    }

    .pg-now__upcoming{
        grid-template-columns:1fr 1fr;
        gap:16px;
        border-top:1px solid var(--pg-line);
    }


    .pg-days{
        display:flex;
        overflow-x:auto;
        padding-bottom:3px;
    }

    .pg-day{
        flex:0 0 120px;
    }


    .pg-filter-row{
        overflow-x:auto;
    }

    .pg-filters{
        margin-left:0;
        min-width:max-content;
    }


    .pg-slot{
        grid-template-columns:
            54px
            72px
            1fr
            auto;
        min-height:78px;
    }

    .pg-period{
        display:none;
    }

    .pg-slot__art{
        width:64px;
        height:57px;
    }

    .pg-slot__range{
        display:none;
    }

    .pg-slot__actions{
        padding-right:8px;
    }

    .pg-slot__actions button{
        display:none;
    }

    .pg-slot__actions a{
        padding:0 9px;
    }


    .pg-discover__grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:620px){

    .pg-now__current{
        grid-template-columns:100px 1fr;
        gap:15px;
        padding:34px 16px 18px;
    }

    .pg-now__art{
        width:100px;
        height:100px;
    }

    .pg-now__copy h2{
        font-size:21px;
    }

    .pg-now__upcoming{
        grid-template-columns:1fr;
        padding:12px 16px;
    }

    .pg-now__actions{
        grid-template-columns:1fr;
        padding:12px 16px 16px;
    }


    .pg-slot{
        grid-template-columns:
            50px
            58px
            1fr;
    }

    .pg-slot__time strong,
    .pg-slot__time span{
        font-size:10px;
    }

    .pg-slot__art{
        width:50px;
        height:50px;
    }

    .pg-slot__identity{
        padding:0 8px;
    }

    .pg-slot__actions{
        grid-column:1/-1;
        justify-content:flex-end;
        padding:0 8px 8px;
    }

}

/* ==========================================================
   320 FM PROGRAM GUIDE V2
   Rahmen · Lesbarkeit · Coverdarstellung
   ========================================================== */


/* Gesamter eigentlicher Programmbereich */

.content-page-shell:has(.pg){
    max-width:1510px;
    padding-top:34px;
}


.content-page-shell .pg{
    width:100%;
    max-width:none;

    box-sizing:border-box;

    margin:0 auto;
    padding:28px;

    border:1px solid #26363f;
    border-radius:16px;

    background:
        radial-gradient(
            circle at 88% 3%,
            rgba(50,177,215,.055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #0b1115 0%,
            #080d10 100%
        );

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.20);
}


/* Überschrift */

.pg-title{
    padding:
        2px
        2px
        23px;
}


.pg-title h1{
    font-size:46px;
    line-height:1;
}


.pg-title p{
    margin-top:8px;

    font-size:16px;
    line-height:1.45;

    color:#c8d0d4;
}


/* NOW */

.pg-now{
    min-height:210px;
}


.pg-now__label{
    font-size:12px;
}


.pg-now__current{
    grid-template-columns:
        180px
        minmax(0,1fr);

    gap:28px;

    padding:
        32px
        30px
        27px;
}


.pg-now__art{
    width:180px;
    height:145px;
}


.pg-live-label{
    font-size:11px;
}


.pg-now__copy h2{
    margin-bottom:6px;

    font-size:30px;
}


.pg-now__copy > p{
    font-size:14px;
}


.pg-now__time strong{
    font-size:13px;
}


.pg-tags span{
    min-height:22px;

    padding:
        0
        8px;

    font-size:10px;
}


.pg-now__upcoming{
    padding:
        22px
        25px;
}


.pg-now__upcoming article{
    grid-template-columns:
        68px
        1fr;

    gap:14px;

    min-height:78px;
}


.pg-now__upcoming article > span{
    font-size:10px;
}


.pg-mini-art{
    width:68px;
    height:62px;
}


.pg-now__upcoming strong{
    font-size:13px;
}


.pg-now__upcoming small,
.pg-now__upcoming time{
    font-size:11px;
}


/* Hauptbuttons */

.pg-now__actions button{
    min-height:52px;

    font-size:12px;
}


/* Wochentage */

.pg-days{
    gap:6px;

    margin-top:12px;
}


.pg-day{
    min-height:68px;
}


.pg-day strong{
    font-size:12px;
}


.pg-day span{
    margin-top:4px;

    font-size:11px;
}


/* Filter */

.pg-filter-row{
    min-height:48px;

    margin-top:8px;
}


.pg-filters button,
.pg-filter-button{
    min-height:35px;

    font-size:10px;
}


.pg-filters button{
    padding:
        0
        14px;
}


/* Programmzeilen */

.pg-slot{
    grid-template-columns:
        105px
        80px
        125px
        minmax(235px,1.05fr)
        minmax(230px,1fr)
        120px
        265px;

    min-height:82px;

    margin-top:6px;

    border-radius:9px;
}


.pg-period span{
    font-size:10px;
}


.pg-slot__time strong,
.pg-slot__time span{
    font-size:14px;
}


.pg-slot__art{
    width:108px;
    height:66px;

    border:1px solid #2b3a42;
    border-radius:7px;

    background-size:cover;
    background-position:center;
}


.pg-slot__identity{
    padding:
        0
        16px;
}


.pg-slot__identity > strong{
    font-size:14px;
    line-height:1.3;
}


.pg-slot__identity > span{
    margin:
        3px
        0
        8px;

    font-size:11px;
}


.pg-slot__description{
    padding:
        0
        18px;

    font-size:11px;
    line-height:1.5;
}


.pg-slot__range{
    font-size:12px;
}


.pg-slot__actions{
    gap:9px;

    padding-right:14px;
}


.pg-slot__actions a,
.pg-slot__actions button{
    min-height:38px;

    padding:
        0
        13px;

    font-size:9px;
}


/* Wochenempfehlungen */

.pg-discover{
    margin-top:18px;

    padding:18px;

    border-radius:11px;
}


.pg-discover > header{
    margin-bottom:14px;
}


.pg-discover h2{
    font-size:18px;
}


.pg-discover > header a{
    font-size:11px;
}


.pg-discover__grid{
    gap:12px;
}


.pg-discover-card{
    min-height:150px;
}


.pg-discover-card > div:last-child{
    padding:17px;
}


.pg-discover-card strong{
    font-size:15px;
}


.pg-discover-card span{
    margin-top:3px;

    font-size:11px;
}


.pg-discover-card small{
    margin-top:8px;

    padding:
        3px
        6px;

    font-size:8px;
}


.pg-discover-card p{
    margin-top:9px;

    font-size:11px;
    line-height:1.5;
}


/* Leerer Zustand */

.pg-empty strong{
    font-size:15px;
}


.pg-empty span{
    font-size:12px;
}


/* Artwork besser sichtbar */

.pg-now__art,
.pg-mini-art,
.pg-slot__art,
.pg-discover-card__art{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}


/* Responsive */

@media(max-width:1180px){

    .content-page-shell .pg{
        padding:22px;
    }


    .pg-slot{
        grid-template-columns:
            82px
            72px
            105px
            minmax(190px,1fr)
            110px
            225px;
    }

}


@media(max-width:900px){

    .content-page-shell:has(.pg){
        padding:
            24px
            18px
            80px;
    }


    .content-page-shell .pg{
        padding:18px;

        border-radius:13px;
    }


    .pg-title h1{
        font-size:38px;
    }


    .pg-title p{
        font-size:15px;
    }


    .pg-now__current{
        grid-template-columns:
            130px
            1fr;

        padding:
            35px
            20px
            20px;
    }


    .pg-now__art{
        width:130px;
        height:120px;
    }


    .pg-now__copy h2{
        font-size:25px;
    }


    .pg-slot{
        min-height:88px;
    }


    .pg-slot__identity > strong{
        font-size:13px;
    }

}


@media(max-width:620px){

    .content-page-shell .pg{
        padding:14px;
    }


    .pg-title h1{
        font-size:34px;
    }


    .pg-day{
        min-height:64px;
    }


    .pg-slot{
        min-height:86px;
    }

}


/* PROGRAM INTERACTIONS V2 */

.pg-filter-panel{
    display:grid;
    grid-template-columns:
        minmax(250px,1fr)
        auto
        auto;
    align-items:end;
    gap:18px;

    margin:
        0
        0
        12px;

    padding:16px;

    border:1px solid #26363f;
    border-radius:9px;

    background:#0e1519;
}


.pg-filter-panel[hidden]{
    display:none;
}


.pg-filter-search{
    display:grid;
    gap:6px;
}


.pg-filter-search > span,
.pg-period-filters > span{
    color:#788a94;

    font-size:9px;
    font-weight:850;

    letter-spacing:.08em;
}


.pg-filter-search input{
    width:100%;
    min-height:40px;

    box-sizing:border-box;

    padding:
        0
        12px;

    border:1px solid #304049;
    border-radius:7px;

    outline:0;

    background:#111a1f;
    color:#eef2f3;

    font:inherit;
    font-size:12px;
}


.pg-filter-search input:focus{
    border-color:#4bc6e6;
}


.pg-period-filters{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}


.pg-period-filters > span{
    flex:0 0 100%;
}


.pg-period-filters button,
.pg-filter-reset{
    min-height:34px;

    padding:
        0
        10px;

    border:1px solid #304049;
    border-radius:6px;

    background:#10171b;
    color:#aebbc1;

    font:inherit;
    font-size:9px;
    font-weight:800;

    cursor:pointer;
}


.pg-period-filters button.is-active{
    border-color:#a72a4a;

    background:
        rgba(239,40,81,.09);

    color:#fff;
}


.pg-filter-reset{
    white-space:nowrap;
}


.pg-slot__actions button.is-saved{
    border-color:#be2950;

    background:
        rgba(239,40,81,.10);

    color:#ff5275;
}


.pg-reminder-button.is-reminded{
    border-color:#3fa9c9;

    background:
        rgba(71,201,232,.08);

    color:#67d5ed;
}


.pg-reminder-button:disabled{
    opacity:.46;
    cursor:not-allowed;
}


.pg-toast{
    position:fixed;

    right:28px;
    bottom:118px;

    z-index:120;

    max-width:360px;

    padding:
        12px
        15px;

    border:1px solid #38505c;
    border-radius:9px;

    background:
        rgba(12,20,24,.97);

    box-shadow:
        0 16px 40px
        rgba(0,0,0,.32);

    color:#dce6ea;

    font-size:12px;
    font-weight:700;
}


.pg-toast.is-error{
    border-color:#873548;
    color:#ff9bb0;
}


.pg-day-panel.has-no-filter-results::after{
    content:"Keine Sendung entspricht diesem Filter.";

    display:block;

    margin-top:6px;
    padding:25px;

    border:1px solid #26343b;
    border-radius:8px;

    color:#8e9ba2;

    text-align:center;

    font-size:12px;
}


@media(max-width:900px){

    .pg-filter-panel{
        grid-template-columns:1fr;
        align-items:stretch;
    }

}

/* PROGRAM GUIDE V3 · Hover + vertikaler Abstand */

.pg-schedule{
    margin-top:16px;
}


.pg-day-panel.is-active{
    padding-top:4px;
}


.pg-slot{
    position:relative;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.pg-slot::before{
    content:"";

    position:absolute;

    left:0;
    top:9px;
    bottom:9px;

    width:3px;

    border-radius:
        0
        4px
        4px
        0;

    background:transparent;

    transition:
        background .18s ease,
        box-shadow .18s ease;
}


.pg-slot:hover{
    z-index:2;

    transform:
        translateY(-2px)
        scale(1.003);

    border-color:#4b626e;

    background:
        radial-gradient(
            circle at 12% 50%,
            rgba(71,201,232,.07),
            transparent 24%
        ),
        linear-gradient(
            90deg,
            #141e23,
            #10171b
        );

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.24),
        inset 0 0 0 1px
        rgba(255,255,255,.015);
}


.pg-slot:hover::before{
    background:
        linear-gradient(
            180deg,
            #ef2851,
            #49cbe9
        );

    box-shadow:
        0 0 14px
        rgba(239,40,81,.35);
}


.pg-slot:hover
.pg-slot__art{
    transform:scale(1.025);

    border-color:#4f6874;

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.28);
}


.pg-slot__art{
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.pg-slot:hover
.pg-slot__identity > strong{
    color:#ffffff;
}


.pg-slot:hover
.pg-slot__description{
    color:#c4d0d5;
}


.pg-slot:hover
.pg-slot__actions a,
.pg-slot:hover
.pg-slot__actions button{
    border-color:#526773;
    background:#141e23;
}


.pg-slot.is-featured:hover{
    border-color:#ef2851;

    box-shadow:
        0 14px 34px
        rgba(0,0,0,.26),
        inset 3px 0
        #ef2851;
}


/* etwas mehr Abstand zwischen Filtern und erster Sendung */

.pg-filter-row{
    margin-bottom:6px;
}


@media(max-width:900px){

    .pg-schedule{
        margin-top:12px;
    }

    .pg-slot:hover{
        transform:translateY(-1px);
    }

}


/* ==========================================================
   320 FM PROGRAM GUIDE V4
   Farbkorrektur + klarerer Rollover + mehr Luft
   ========================================================== */

.pg{
    --pg-bg:#080d10;
    --pg-surface:#0d1519;
    --pg-surface-hover:#132027;

    --pg-line:#263740;
    --pg-line-hover:#426373;

    --pg-text:#f2f5f6;
    --pg-muted:#91a1aa;

    /* Standard-Interaktion */
    --pg-ui:#43c4e4;
    --pg-ui-soft:#83daed;
    --pg-ui-dark:#174858;

    /* ausschließlich On-Air */
    --pg-live:#ee315a;
}


/* ----------------------------------------------------------
   PROGRAMMFLÄCHE
   ---------------------------------------------------------- */

.content-page-shell .pg{
    border-color:#293b44;

    background:
        radial-gradient(
            circle at 82% 0%,
            rgba(67,196,228,.045),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #0b1216 0%,
            #080e11 100%
        );
}


/* ----------------------------------------------------------
   NOW / LIVE bleibt Magenta
   ---------------------------------------------------------- */

.pg-now__label{
    color:var(--pg-live);
}


.pg-live-label i{
    background:var(--pg-live);

    box-shadow:
        0 0 11px
        rgba(238,49,90,.70);
}


.pg-live-button{
    border-color:#f04469;

    background:
        linear-gradient(
            135deg,
            #e82d59,
            #ba1941
        );

    box-shadow:
        0 8px 24px
        rgba(238,49,90,.16);
}


.pg-progress span{
    background:
        linear-gradient(
            90deg,
            var(--pg-live),
            #fb5b7d
        );
}


/* ----------------------------------------------------------
   WOCHENTAGE
   Auswahl jetzt Cyan statt Magenta
   ---------------------------------------------------------- */

.pg-day{
    border-color:#25353d;

    background:
        #0e161a;
}


.pg-day:hover{
    border-color:#3c6878;

    background:
        linear-gradient(
            180deg,
            rgba(67,196,228,.055),
            #10191e
        );
}


.pg-day.is-active{
    border-color:var(--pg-ui);

    background:
        linear-gradient(
            180deg,
            rgba(67,196,228,.11),
            rgba(67,196,228,.025)
        );

    box-shadow:
        inset 0 -2px
        var(--pg-ui);
}


.pg-day.is-active strong{
    color:#f4f8fa;
}


.pg-day.is-active i{
    background:var(--pg-ui);

    box-shadow:
        0 0 10px
        rgba(67,196,228,.65);
}


.pg-day i{
    background:#527d8b;
}


/* ----------------------------------------------------------
   FILTER
   ---------------------------------------------------------- */

.pg-filter-row{
    margin-top:10px;
    margin-bottom:12px;
}


.pg-filters button{
    border-color:transparent;

    color:#91a1aa;
}


.pg-filters button:hover{
    border-color:#355965;

    background:
        rgba(67,196,228,.045);

    color:#d9f4fa;
}


.pg-filters button.is-active{
    border-color:#3ba9c3;

    background:
        rgba(67,196,228,.10);

    color:#67d4eb;

    box-shadow:
        inset 0 0 0 1px
        rgba(67,196,228,.05);
}


.pg-filter-button{
    border-color:#30444d;

    background:#10191e;

    color:#a8b7be;
}


.pg-filter-button:hover{
    border-color:#418093;

    color:#61cee7;

    background:#122028;
}


/* ----------------------------------------------------------
   EXPANDED FILTER
   ---------------------------------------------------------- */

.pg-filter-panel{
    border-color:#2a414b;

    background:
        linear-gradient(
            180deg,
            #101a1f,
            #0d1519
        );
}


.pg-filter-search input{
    border-color:#314852;

    background:#0b1418;
}


.pg-filter-search input:focus{
    border-color:var(--pg-ui);

    box-shadow:
        0 0 0 3px
        rgba(67,196,228,.08);
}


.pg-period-filters button.is-active{
    border-color:var(--pg-ui);

    background:
        rgba(67,196,228,.09);

    color:#72d7ed;
}


/* ----------------------------------------------------------
   MEHR LUFT VOR ERSTER SHOW
   ---------------------------------------------------------- */

.pg-schedule{
    margin-top:22px;
}


.pg-day-panel.is-active{
    padding-top:6px;
}


/* ----------------------------------------------------------
   SHOW ROW
   ---------------------------------------------------------- */

.pg-slot{
    position:relative;

    border-color:#263940;

    background:
        linear-gradient(
            90deg,
            #0f171b 0%,
            #0c1317 100%
        );

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


/* Farblinie zunächst unsichtbar */

.pg-slot::before{
    content:"";

    position:absolute;

    left:-1px;
    top:8px;
    bottom:8px;

    width:4px;

    border-radius:
        0
        5px
        5px
        0;

    background:transparent;

    transition:
        background .18s ease,
        box-shadow .18s ease;
}


/* kompletter Row-Rollover */

.pg-slot:hover{
    z-index:3;

    transform:
        translateX(3px)
        translateY(-1px);

    border-color:#477080;

    background:
        radial-gradient(
            circle at 18% 50%,
            rgba(67,196,228,.085),
            transparent 31%
        ),
        linear-gradient(
            90deg,
            #152229 0%,
            #111b20 48%,
            #0f171b 100%
        );

    box-shadow:
        0 11px 28px
        rgba(0,0,0,.25),
        inset 0 0 0 1px
        rgba(67,196,228,.025);
}


.pg-slot:hover::before{
    background:
        linear-gradient(
            180deg,
            #67d9ef,
            #269abb
        );

    box-shadow:
        0 0 13px
        rgba(67,196,228,.38);
}


/* Artwork reagiert ebenfalls */

.pg-slot__art{
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.pg-slot:hover
.pg-slot__art{
    transform:scale(1.035);

    border-color:#528092;

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.30);
}


/* Titel */

.pg-slot:hover
.pg-slot__identity > strong{
    color:#73d8ed;
}


/* Beschreibung */

.pg-slot:hover
.pg-slot__description{
    color:#c5d1d6;
}


/* ----------------------------------------------------------
   SHOW-AKTIONEN
   ---------------------------------------------------------- */

.pg-slot__actions a,
.pg-slot__actions button{
    border-color:#334750;

    background:#0c1418;

    color:#c6d0d4;
}


.pg-slot__actions a:hover,
.pg-slot__actions button:hover{
    border-color:#48a9c0;

    background:
        rgba(67,196,228,.09);

    color:#73d8ed;
}


.pg-slot__actions button.is-saved{
    border-color:#42b5cf;

    background:
        rgba(67,196,228,.10);

    color:#72d8ed;
}


/* featured Row nicht mehr grundsätzlich Magenta */

.pg-slot.is-featured{
    border-color:#304750;

    box-shadow:none;
}


.pg-slot.is-featured:hover{
    border-color:#4c8194;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.26);
}


/* ----------------------------------------------------------
   GENRE-TAGS
   ---------------------------------------------------------- */

.pg-tags span,
.pg-slot .pg-tags span{
    border-color:#286a7d;

    background:
        rgba(67,196,228,.045);

    color:#55cae5;
}


/* zweiter Farbton nur subtil */

.pg-tags span:nth-child(odd),
.pg-slot .pg-tags span:nth-child(odd){
    border-color:#345f79;

    background:
        rgba(70,139,184,.045);

    color:#75bde6;
}


/* ----------------------------------------------------------
   TAGESPHASEN
   bewusst dezenter
   ---------------------------------------------------------- */

.pg-period .is-morning{
    color:#eca85d;
}


.pg-period .is-day{
    color:#4dc6e4;
}


.pg-period .is-evening{
    color:#8e91db;
}


.pg-period .is-night{
    color:#5f9fdd;
}


/* ----------------------------------------------------------
   DISCOVER
   ---------------------------------------------------------- */

.pg-discover{
    border-color:#263b44;

    background:#0b1216;
}


.pg-discover-card{
    border-color:#293e47;

    background:#0e171b;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.pg-discover-card:hover{
    transform:translateY(-3px);

    border-color:#447384;

    background:#122027;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.24);
}


.pg-discover-card:hover strong{
    color:#72d7ec;
}


.pg-discover-card small{
    border-color:#33798c;

    color:#51cae4;
}


/* ----------------------------------------------------------
   REMINDER
   ---------------------------------------------------------- */

.pg-reminder-button{
    border-color:#344b55;

    background:#0d1519;

    color:#c1ccd1;
}


.pg-reminder-button:hover{
    border-color:#43a9c0;

    background:
        rgba(67,196,228,.075);

    color:#69d3e9;
}


.pg-reminder-button.is-reminded{
    border-color:#43b5ce;

    background:
        rgba(67,196,228,.09);

    color:#74d8ec;
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media(max-width:900px){

    .pg-schedule{
        margin-top:17px;
    }


    .pg-slot:hover{
        transform:
            translateX(2px)
            translateY(-1px);
    }

}