.fm-sound{
    min-height:100vh;
    overflow-x:clip;
    background:#071016;
    color:#edf3f5;
}

.fm-sound-shell{
    width:min(1180px,calc(100% - 64px));
    margin-left:auto;
    margin-right:auto;
}


/* HERO */

.fm-sound-hero{
    position:relative;
    padding:90px 0 78px;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(42,175,225,.12),
            transparent 31%
        ),
        radial-gradient(
            circle at 18% 75%,
            rgba(213,45,148,.13),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #081116,
            #050a0d
        );
}

.fm-sound-hero::after{
    content:"320";

    position:absolute;
    right:5%;
    bottom:-40px;

    color:rgba(255,255,255,.025);

    font-size:260px;
    line-height:.8;
    font-weight:950;
    letter-spacing:-.1em;
}

.fm-sound-kicker{
    color:#2aafe1;
    font-size:10px;
    font-weight:950;
    letter-spacing:.16em;
}

.fm-sound-hero h1{
    max-width:830px;
    margin:13px 0 21px;

    color:#fff;

    font-size:clamp(54px,7vw,92px);
    line-height:.88;
    font-weight:950;
    letter-spacing:-.065em;
}

.fm-sound-hero h1 small{
    display:block;

    margin-top:9px;

    color:#c8f34a;

    font-size:.39em;
    line-height:1;
    letter-spacing:-.025em;
}

.fm-sound-hero p{
    max-width:670px;

    margin:0;

    color:#82949b;

    font-size:15px;
    line-height:1.75;
}


/* DAYS */

.fm-sound-days{
    position:relative;
    z-index:4;

    display:grid;
    grid-template-columns:repeat(7,1fr);

    margin-top:-25px;

    overflow:hidden;

    border:1px solid #263940;
    border-radius:10px;

    background:rgba(8,15,19,.97);

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

.fm-sound-days>a{
    position:relative;

    min-width:0;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-height:72px;

    border-right:
        1px solid
        rgba(255,255,255,.06);

    color:#72858c;
    text-decoration:none;

    transition:
        background .18s ease,
        color .18s ease;
}

.fm-sound-days>a:last-child{
    border-right:0;
}

.fm-sound-days>a:hover{
    background:
        rgba(255,255,255,.025);

    color:#b5c2c6;
}

.fm-sound-days>a.is-active{
    background:
        linear-gradient(
            180deg,
            rgba(200,243,74,.08),
            rgba(200,243,74,.025)
        );

    color:#fff;
}

.fm-sound-days>a.is-active::after{
    content:"";

    position:absolute;
    left:20%;
    right:20%;
    bottom:0;

    height:2px;

    background:#c8f34a;

    box-shadow:
        0 0 12px
        rgba(200,243,74,.45);
}

.fm-sound-days strong{
    font-size:12px;
}

.fm-sound-days span{
    font-size:12px;
}

.fm-sound-days small{
    position:absolute;
    top:8px;

    color:#c8f34a;

    font-size:8px;
    font-weight:950;
    letter-spacing:.08em;
}


/* CONTENT */

.fm-sound-content{
    padding:52px 0 95px;
}

.fm-sound-date-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    padding-bottom:20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);
}

.fm-sound-date-head>div>span{
    color:#d52d94;

    font-size:10px;
    font-weight:950;
    letter-spacing:.14em;
}

.fm-sound-date-head h2{
    margin:5px 0 0;

    color:#f1f5f6;

    font-size:27px;
    letter-spacing:-.035em;
}

.fm-sound-date-head>small{
    color:#687b83;

    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
}


/* LIST */

.fm-sound-list{
    display:flex;
    flex-direction:column;

    margin-top:8px;
}

.fm-sound-track{
    position:relative;

    display:grid;
    grid-template-columns:58px minmax(0,1fr) 24px;
    gap:15px;
    align-items:center;

    min-height:78px;

    padding:10px 14px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);

    transition:
        background .16s ease,
        transform .16s ease,
        border-color .16s ease;
}

.fm-sound-track:hover{
    z-index:2;

    background:
        rgba(255,255,255,.026);

    border-color:
        rgba(42,175,225,.16);

    transform:
        translateX(3px);
}

.fm-sound-cover{
    position:relative;

    width:58px;
    height:58px;

    overflow:hidden;

    border-radius:5px;

    background:
        #142027
        url('/assets/img/320fm-default-media-cover.png')
        center/cover no-repeat;

    transition:
        transform .22s ease;
}

.fm-sound-track:hover
.fm-sound-cover{
    transform:scale(1.035);
}

.fm-sound-track__main{
    min-width:0;
}

.fm-sound-track__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    margin-bottom:4px;
}

.fm-sound-track__top>span{
    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#4f646d;

    font-size:9px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.08em;
}

.fm-sound-track__top time{
    flex:0 0 auto;

    color:#81939a;

    font-size:11px;
    line-height:1.2;
    font-weight:750;

    text-align:right;
    white-space:nowrap;
}

.fm-sound-track__main>strong{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#f2f5f6;

    font-size:14px;
    line-height:1.25;
}

.fm-sound-track__main>p{
    margin:2px 0 0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#7e9097;

    font-size:12px;
    line-height:1.25;
}

.fm-sound-track__arrow{
    opacity:0;

    color:#2aafe1;

    font-size:16px;

    transition:
        opacity .16s ease,
        transform .16s ease;
}

.fm-sound-track:hover
.fm-sound-track__arrow{
    opacity:1;

    transform:
        translateX(2px);
}


/* ON AIR */

.fm-sound-track--onair{
    grid-template-columns:68px minmax(0,1fr);

    margin:8px 0 20px;

    padding:17px;

    border:
        1px solid
        rgba(200,243,74,.20);

    border-radius:8px;

    background:
        linear-gradient(
            90deg,
            rgba(200,243,74,.07),
            rgba(42,175,225,.025) 58%,
            rgba(7,16,22,.3)
        );

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.16);
}

.fm-sound-track--onair:hover{
    transform:none;
}

.fm-sound-track--onair::before{
    content:"";

    position:absolute;
    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:#c8f34a;

    box-shadow:
        0 0 13px
        rgba(200,243,74,.5);
}

.fm-sound-track--onair
.fm-sound-cover{
    width:68px;
    height:68px;
}

.fm-sound-track--onair
.fm-sound-cover>span{
    position:absolute;
    left:5px;
    bottom:5px;

    padding:5px 7px;

    border-radius:4px;

    background:#c8f34a;

    color:#071014;

    font-size:8px;
    line-height:1;
    font-weight:950;
    letter-spacing:.09em;
}

.fm-sound-onair-label{
    color:#c8f34a !important;
}

.fm-sound-progress{
    margin-top:12px;
}

.fm-sound-progress__rail{
    position:relative;

    width:100%;
    height:4px;

    overflow:hidden;

    border-radius:4px;

    background:
        rgba(255,255,255,.095);
}

.fm-sound-progress__rail>b{
    display:block;

    width:0;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #d52d94,
            #2aafe1,
            #c8f34a
        );

    box-shadow:
        0 0 10px
        rgba(42,175,225,.28);

    transition:
        width 1s linear;
}

.fm-sound-progress__meta{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;

    margin-top:6px;

    color:#6e8189;

    font-size:10px;

    font-variant-numeric:
        tabular-nums;
}

.fm-sound-progress__meta em{
    overflow:hidden;

    color:#809198;

    text-align:center;

    text-overflow:ellipsis;
    white-space:nowrap;

    font-style:normal;
}


/* DAYPART */

.fm-sound-daypart{
    display:flex;
    justify-content:space-between;
    align-items:center;

    min-height:60px;

    margin-top:13px;
    padding:14px 15px;

    border-top:
        1px solid
        rgba(42,175,225,.16);

    border-bottom:
        1px solid
        rgba(42,175,225,.08);

    background:
        linear-gradient(
            90deg,
            rgba(42,175,225,.035),
            transparent
        );
}

.fm-sound-daypart>div{
    display:flex;
    align-items:center;
    gap:13px;
}

.fm-sound-daypart span{
    color:#2aafe1;

    font-size:11px;
    font-weight:900;
}

.fm-sound-daypart strong{
    color:#dce5e8;

    font-size:13px;
    letter-spacing:.055em;
}

.fm-sound-daypart small{
    color:#60737b;

    font-size:10px;
}


/* SHOWTIME */

.fm-sound-showtime{
    position:relative;

    margin:19px 0;

    overflow:hidden;

    border:
        1px solid
        rgba(213,45,148,.24);

    border-radius:7px;

    background:
        linear-gradient(
            105deg,
            rgba(213,45,148,.11),
            rgba(42,175,225,.04) 60%,
            rgba(7,16,22,.4)
        );
}

.fm-sound-showtime__marker{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:9px 15px;

    border-bottom:
        1px solid
        rgba(213,45,148,.13);
}

.fm-sound-showtime__marker span{
    color:#d52d94;

    font-size:9px;
    font-weight:950;
    letter-spacing:.15em;
}

.fm-sound-showtime__marker time{
    color:#82949b;

    font-size:11px;
    font-weight:800;
}

.fm-sound-showtime__body{
    display:grid;
    grid-template-columns:3px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;

    padding:16px;
}

.fm-sound-showtime__body>i{
    width:3px;
    height:39px;

    border-radius:4px;

    background:
        linear-gradient(
            #d52d94,
            #2aafe1
        );
}

.fm-sound-showtime__body strong{
    display:block;

    color:#fff;

    font-size:15px;
    line-height:1.15;
}

.fm-sound-showtime__body span{
    display:block;

    margin-top:4px;

    color:#82949b;

    font-size:11px;
}

.fm-sound-showtime__body small{
    color:#c8f34a;

    font-size:11px;
    font-weight:850;
}


/* EMPTY */

.fm-sound-empty{
    min-height:280px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    color:#60737b;

    text-align:center;
}

.fm-sound-empty span{
    color:#2aafe1;

    font-size:10px;
    font-weight:950;
    letter-spacing:.14em;
}

.fm-sound-empty strong{
    max-width:350px;

    margin-top:9px;

    color:#82949b;

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


/* TABLET */

@media(max-width:900px){

    .fm-sound-days{
        overflow-x:auto;

        grid-template-columns:
            repeat(7,minmax(105px,1fr));
    }

}


/* MOBILE */

@media(max-width:720px){

    .fm-sound-shell{
        width:calc(100% - 36px);
    }

    .fm-sound-hero{
        padding:65px 0 61px;
    }

    .fm-sound-hero h1{
        font-size:
            clamp(48px,15vw,72px);
    }

    .fm-sound-days{
        width:calc(100% - 18px);
        margin-left:18px;
        margin-right:0;

        border-radius:
            8px 0 0 8px;
    }

    .fm-sound-content{
        padding-top:40px;
    }

    .fm-sound-track{
        grid-template-columns:
            50px minmax(0,1fr);

        gap:11px;

        padding-left:7px;
        padding-right:7px;
    }

    .fm-sound-cover{
        width:50px;
        height:50px;
    }

    .fm-sound-track__arrow{
        display:none;
    }

    .fm-sound-track--onair{
        grid-template-columns:
            58px minmax(0,1fr);

        padding:13px;
    }

    .fm-sound-track--onair
    .fm-sound-cover{
        width:58px;
        height:58px;
    }

    .fm-sound-progress__meta{
        grid-template-columns:
            1fr auto;
    }

    .fm-sound-progress__meta em{
        display:none;
    }

    .fm-sound-daypart small{
        display:none;
    }

    .fm-sound-showtime__body{
        grid-template-columns:
            3px minmax(0,1fr);
    }

    .fm-sound-showtime__body>small{
        grid-column:2;

        margin-top:-7px;
    }

}


/* ==========================================================
   320 FM · DEIN SOUND · VISUAL FINETUNING
   ========================================================== */


/* HERO KOMPAKTER */

.fm-sound-hero{
    padding-top:64px;
    padding-bottom:58px;
}

.fm-sound-hero h1{
    max-width:760px;
    margin-top:10px;
    margin-bottom:16px;
}

.fm-sound-hero p{
    max-width:720px;
    font-size:15px;
    line-height:1.65;
}


/* 7-TAGE-NAVIGATION */

.fm-sound-days>a{
    min-height:78px;
    gap:8px;
}

.fm-sound-days strong{
    font-size:13px;
    font-weight:900;
}

.fm-sound-days span{
    font-size:13px;
    font-weight:750;
}

.fm-sound-days small{
    top:7px;
    font-size:9px;
}


/* DATUMSKOPF */

.fm-sound-date-head{
    padding-bottom:24px;
}

.fm-sound-date-head h2{
    font-size:30px;
}

.fm-sound-date-head>small{
    font-size:11px;
}


/* TRACKLISTE ALLGEMEIN */

.fm-sound-track{
    grid-template-columns:
        64px
        minmax(0,1fr)
        28px;

    gap:16px;

    min-height:88px;

    padding:12px 14px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}

.fm-sound-cover{
    width:64px;
    height:64px;

    border-radius:6px;
}

.fm-sound-track:hover{
    background:
        linear-gradient(
            90deg,
            rgba(42,175,225,.035),
            rgba(255,255,255,.018)
        );

    transform:
        translateX(4px);
}

.fm-sound-track:hover
.fm-sound-cover{
    transform:
        scale(1.045);
}


/* META */

.fm-sound-track__top{
    margin-bottom:5px;
}

.fm-sound-track__top>span{
    font-size:10px;
    font-weight:900;
}

.fm-sound-track__top time{
    font-size:12px;
    font-weight:800;
    color:#9aabb0;
}

.fm-sound-track__main>strong{
    font-size:15px;
    line-height:1.2;
}

.fm-sound-track__main>p{
    margin-top:3px;

    font-size:13px;
    line-height:1.3;

    color:#8b9ba1;
}

.fm-sound-track__arrow{
    font-size:16px;
}


/* ON AIR */

.fm-sound-track--onair{
    grid-template-columns:
        82px
        minmax(0,1fr);

    min-height:132px;

    margin-top:14px;
    margin-bottom:26px;

    padding:20px;

    border:
        1px solid
        rgba(200,243,74,.30);

    border-radius:10px;

    background:
        radial-gradient(
            circle at 0 50%,
            rgba(200,243,74,.10),
            transparent 36%
        ),
        linear-gradient(
            90deg,
            rgba(200,243,74,.075),
            rgba(42,175,225,.035) 55%,
            rgba(7,16,22,.45)
        );

    box-shadow:
        0 22px 60px
        rgba(0,0,0,.20);
}

.fm-sound-track--onair::before{
    top:16px;
    bottom:16px;

    width:3px;
}

.fm-sound-track--onair
.fm-sound-cover{
    width:82px;
    height:82px;

    border-radius:8px;
}

.fm-sound-track--onair
.fm-sound-cover>span{
    left:7px;
    bottom:7px;

    padding:6px 8px;

    font-size:9px;
}

.fm-sound-track--onair
.fm-sound-track__main>strong{
    font-size:16px;
}

.fm-sound-track--onair
.fm-sound-track__main>p{
    font-size:14px;
}

.fm-sound-track--onair
.fm-sound-track__top time{
    color:#c8f34a;
    font-size:12px;
}


/* LIVE ZEITSTRAHL */

.fm-sound-progress{
    margin-top:16px;
}

.fm-sound-progress__rail{
    height:6px;

    border-radius:999px;

    background:
        rgba(255,255,255,.11);
}

.fm-sound-progress__rail>b{
    position:relative;

    border-radius:999px;

    box-shadow:
        0 0 14px
        rgba(42,175,225,.35);
}

.fm-sound-progress__rail>b::after{
    content:"";

    position:absolute;

    right:-4px;
    top:50%;

    width:8px;
    height:8px;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:#c8f34a;

    box-shadow:
        0 0 12px
        rgba(200,243,74,.60);
}

.fm-sound-progress__meta{
    margin-top:8px;

    font-size:11px;

    color:#81939a;
}

.fm-sound-progress__meta em{
    color:#98a7ac;
}


/* DAYPART */

.fm-sound-daypart{
    min-height:70px;

    margin-top:20px;
    margin-bottom:4px;

    padding:16px 17px;

    border-top:
        1px solid
        rgba(42,175,225,.24);

    border-bottom:
        1px solid
        rgba(42,175,225,.11);

    background:
        linear-gradient(
            90deg,
            rgba(42,175,225,.055),
            rgba(42,175,225,.015) 55%,
            transparent
        );
}

.fm-sound-daypart span{
    font-size:12px;
}

.fm-sound-daypart strong{
    font-size:15px;
}

.fm-sound-daypart small{
    font-size:11px;
}


/* SHOWTIME */

.fm-sound-showtime{
    margin-top:26px;
    margin-bottom:26px;

    border:
        1px solid
        rgba(213,45,148,.36);

    border-radius:10px;

    box-shadow:
        0 18px 46px
        rgba(0,0,0,.14);
}

.fm-sound-showtime__marker{
    padding:11px 17px;
}

.fm-sound-showtime__marker span{
    font-size:10px;
    color:#f056b4;
}

.fm-sound-showtime__marker time{
    font-size:12px;
}

.fm-sound-showtime__body{
    grid-template-columns:
        4px
        minmax(0,1fr)
        auto;

    gap:16px;

    padding:18px;
}

.fm-sound-showtime__body>i{
    width:4px;
    height:46px;
}

.fm-sound-showtime__body strong{
    font-size:18px;
}

.fm-sound-showtime__body span{
    margin-top:5px;
    font-size:12px;
}

.fm-sound-showtime__body small{
    font-size:12px;
}


/* MOBILE */

@media(max-width:720px){

    .fm-sound-hero{
        padding-top:50px;
        padding-bottom:50px;
    }

    .fm-sound-track{
        grid-template-columns:
            54px
            minmax(0,1fr);

        min-height:76px;

        padding-top:10px;
        padding-bottom:10px;
    }

    .fm-sound-cover{
        width:54px;
        height:54px;
    }

    .fm-sound-track__main>strong{
        font-size:15px;
    }

    .fm-sound-track__main>p{
        font-size:13px;
    }

    .fm-sound-track__top time{
        font-size:12px;
    }

    .fm-sound-track--onair{
        grid-template-columns:
            66px
            minmax(0,1fr);

        min-height:118px;

        padding:15px;
    }

    .fm-sound-track--onair
    .fm-sound-cover{
        width:66px;
        height:66px;
    }

    .fm-sound-progress__rail{
        height:5px;
    }

}


/* ==========================================================
   320 FM · DEIN SOUND · BRAND REFINEMENT
   Kein Lime/Grün – nur Magenta/Cyan
   ========================================================== */

.fm-sound-hero h1 small{
    color:#2aafe1;
}

.fm-sound-days>a.is-active{
    background:
        linear-gradient(
            180deg,
            rgba(213,45,148,.10),
            rgba(42,175,225,.035)
        );
}

.fm-sound-days>a.is-active::after{
    background:
        linear-gradient(
            90deg,
            #d52d94,
            #2aafe1
        );

    box-shadow:
        0 0 14px
        rgba(42,175,225,.35);
}

.fm-sound-days small{
    color:#2aafe1;
}


/* ON AIR */

.fm-sound-track--onair{
    border-color:
        rgba(213,45,148,.34);

    background:
        radial-gradient(
            circle at 0 50%,
            rgba(213,45,148,.13),
            transparent 38%
        ),
        linear-gradient(
            90deg,
            rgba(213,45,148,.08),
            rgba(42,175,225,.04) 60%,
            rgba(7,16,22,.44)
        );
}

.fm-sound-track--onair::before{
    background:
        linear-gradient(
            180deg,
            #d52d94,
            #2aafe1
        );

    box-shadow:
        0 0 15px
        rgba(213,45,148,.42);
}

.fm-sound-track--onair
.fm-sound-cover>span{
    background:#d52d94;
    color:#fff;

    box-shadow:
        0 7px 20px
        rgba(213,45,148,.28);
}

.fm-sound-onair-label{
    color:#ef56b2 !important;
}

.fm-sound-onair-label::first-letter{
    color:#ef56b2;
}

.fm-sound-track--onair
.fm-sound-track__top time{
    color:#2aafe1;
}


/* TIMELINE */

.fm-sound-progress{
    display:block;

    width:100%;

    margin-top:15px;
}

.fm-sound-progress__rail{
    display:block;

    position:relative;

    width:100%;
    height:6px;

    overflow:visible;

    border-radius:999px;

    background:
        rgba(255,255,255,.11);

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.025);
}

.fm-sound-progress__rail>b{
    display:block;

    position:relative;

    min-width:3px;
    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #d52d94 0%,
            #8f55ca 48%,
            #2aafe1 100%
        );

    box-shadow:
        0 0 14px
        rgba(42,175,225,.25);

    transition:
        width 1s linear;
}

.fm-sound-progress__rail>b::after{
    content:"";

    position:absolute;

    right:-5px;
    top:50%;

    width:10px;
    height:10px;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:#fff;

    border:
        2px solid
        #2aafe1;

    box-shadow:
        0 0 12px
        rgba(42,175,225,.60);
}

.fm-sound-progress__meta{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    gap:12px;

    margin-top:8px;

    font-size:11px;
    line-height:1.3;

    color:#82949b;
}

.fm-sound-progress__meta>span:first-child{
    color:#2aafe1;
    font-weight:800;
}

.fm-sound-progress__meta>span:last-child{
    color:#a5b2b7;
    font-weight:800;
}

.fm-sound-progress__meta em{
    color:#788b92;
}


/* TRACK HOVER */

.fm-sound-track:not(.fm-sound-track--onair)::before{
    content:"";

    position:absolute;
    left:0;
    top:16%;
    bottom:16%;

    width:2px;

    opacity:0;

    background:#2aafe1;

    transition:
        opacity .16s ease;
}

.fm-sound-track:not(.fm-sound-track--onair):hover::before{
    opacity:.75;
}


/* DAYPART EDITORIAL */

.fm-sound-daypart{
    position:relative;
    overflow:hidden;

    min-height:78px;
}

.fm-sound-daypart::after{
    content:attr(data-label);

    position:absolute;

    right:18px;
    top:50%;

    transform:
        translateY(-50%);

    color:
        rgba(255,255,255,.025);

    font-size:38px;
    line-height:1;
    font-weight:950;

    pointer-events:none;
}


/* SHOWTIME */

.fm-sound-showtime{
    border-color:
        rgba(213,45,148,.38);

    background:
        linear-gradient(
            100deg,
            rgba(213,45,148,.12),
            rgba(42,175,225,.045) 62%,
            rgba(7,16,22,.36)
        );
}

.fm-sound-showtime__body small{
    color:#2aafe1;
}


/* Entfernt alte Lime-Farbe aus früheren Regeln */

.fm-sound [style*="#c8f34a"]{
    color:#2aafe1 !important;
}


.fm-sound-progress__rail.is-duration-unknown>b{
    animation:
        fmSoundLiveTimeline
        2.2s ease-in-out infinite;
}

@keyframes fmSoundLiveTimeline{

    0%{
        width:12%;
        opacity:.65;
    }

    50%{
        width:32%;
        opacity:1;
    }

    100%{
        width:12%;
        opacity:.65;
    }

}


/* ==========================================================
   320 FM · UNKNOWN DURATION = KEIN FAKE-FORTSCHRITT
   ========================================================== */

.fm-sound-progress__rail.is-duration-unknown>b{
    width:0 !important;
    min-width:0 !important;
    animation:none !important;
    opacity:0 !important;
}

.fm-sound-progress__rail.is-duration-unknown>b::after{
    display:none !important;
}

.fm-sound-progress__rail.is-duration-unknown{
    height:2px;
    background:
        linear-gradient(
            90deg,
            rgba(213,45,148,.45),
            rgba(42,175,225,.45)
        );
}


/* ==========================================================
   320 FM · DEIN SOUND · RADIO TIMELINE V2
   ========================================================== */


/* CONTENT ETWAS KOMPAKTER */

.fm-sound-content{
    width:min(1040px,calc(100% - 64px));
    padding-top:42px;
}


/* DATE HEADER */

.fm-sound-date-head{
    margin-bottom:8px;
    padding-bottom:18px;
}

.fm-sound-date-head h2{
    font-size:29px;
    line-height:1.05;
}


/* TIMELINE BASIS */

.fm-sound-list{
    position:relative;

    margin-top:0;
    padding-left:18px;
}

.fm-sound-list::before{
    content:"";

    position:absolute;

    left:5px;
    top:18px;
    bottom:18px;

    width:1px;

    background:
        linear-gradient(
            180deg,
            rgba(213,45,148,.55),
            rgba(42,175,225,.28) 28%,
            rgba(42,175,225,.08) 82%,
            transparent
        );
}


/* NORMALE TRACKS */

.fm-sound-track{
    position:relative;

    grid-template-columns:
        58px
        minmax(0,1fr);

    gap:15px;

    min-height:78px;

    padding:
        10px
        14px
        10px
        10px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);

    border-radius:0;

    background:transparent;

    transform:none;
}

.fm-sound-track::after{
    content:"";

    position:absolute;

    left:-17px;
    top:50%;

    width:7px;
    height:7px;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:#071016;

    border:
        1px solid
        rgba(42,175,225,.55);

    box-shadow:
        0 0 0 4px
        rgba(7,16,22,.95);
}

.fm-sound-track:hover{
    background:
        linear-gradient(
            90deg,
            rgba(42,175,225,.045),
            rgba(42,175,225,.012) 62%,
            transparent
        );

    transform:none;
}

.fm-sound-track:hover::after{
    background:#2aafe1;

    box-shadow:
        0 0 0 4px rgba(7,16,22,.95),
        0 0 12px rgba(42,175,225,.42);
}


/* KEINE ALTE LINKE HOVER-LINIE MEHR */

.fm-sound-track:not(.fm-sound-track--onair)::before{
    display:none;
}


/* COVER */

.fm-sound-cover{
    width:58px;
    height:58px;

    border-radius:7px;

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

.fm-sound-track:hover
.fm-sound-cover{
    transform:
        scale(1.035);
}


/* TRACK META */

.fm-sound-track__main{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        124px;

    column-gap:28px;
    align-items:center;

    min-width:0;
}


/*
 * Die bestehende Topline wird für Playlist + Zeit
 * auf die beiden Spalten verteilt.
 */

.fm-sound-track__top{
    display:contents;
}

.fm-sound-track__top>span{
    grid-column:1;
    grid-row:1;

    align-self:end;

    margin-bottom:4px;

    color:#587078;

    font-size:10px;
    line-height:1.2;
    font-weight:900;

    letter-spacing:.08em;
}

.fm-sound-track__top time{
    grid-column:2;
    grid-row:1 / span 3;

    align-self:center;
    justify-self:end;

    color:#91a1a7;

    font-size:12px;
    line-height:1.2;
    font-weight:800;

    text-align:right;
    white-space:nowrap;
}

.fm-sound-track__main>strong{
    grid-column:1;
    grid-row:2;

    display:block;

    color:#f4f6f7;

    font-size:15px;
    line-height:1.2;
    font-weight:850;
}

.fm-sound-track__main>p{
    grid-column:1;
    grid-row:3;

    margin:3px 0 0;

    color:#82949b;

    font-size:13px;
    line-height:1.3;
}


/* ALTE PFEILSPALTE NICHT MEHR NOETIG */

.fm-sound-track__arrow{
    display:none;
}


/* ==========================================================
   ON AIR
   ========================================================== */

.fm-sound-track--onair{
    position:relative;

    display:grid;

    grid-template-columns:
        78px
        minmax(0,1fr);

    gap:18px;

    min-height:150px;

    margin:
        12px
        0
        28px;

    padding:20px;

    overflow:hidden;

    border:
        1px solid
        rgba(213,45,148,.30);

    border-radius:11px;

    background:
        radial-gradient(
            circle at 0 50%,
            rgba(213,45,148,.13),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            rgba(213,45,148,.07),
            rgba(42,175,225,.025) 58%,
            rgba(6,13,18,.35)
        );

    box-shadow:
        0 20px 54px
        rgba(0,0,0,.17);
}

.fm-sound-track--onair::after{
    left:-22px;

    width:10px;
    height:10px;

    background:#d52d94;

    border:0;

    box-shadow:
        0 0 0 4px rgba(7,16,22,.96),
        0 0 17px rgba(213,45,148,.55);
}

.fm-sound-track--onair::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:
        linear-gradient(
            180deg,
            #d52d94,
            #2aafe1
        );
}

.fm-sound-track--onair
.fm-sound-cover{
    width:78px;
    height:78px;

    border-radius:9px;
}

.fm-sound-track--onair
.fm-sound-track__main{
    display:block;
}

.fm-sound-track--onair
.fm-sound-track__top{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-bottom:6px;
}

.fm-sound-track--onair
.fm-sound-track__top>span{
    display:block;

    margin:0;

    color:#ed52b0;

    font-size:10px;
}

.fm-sound-track--onair
.fm-sound-track__top time{
    display:block;

    color:#2aafe1;

    font-size:12px;

    text-align:right;
}

.fm-sound-track--onair
.fm-sound-track__main>strong{
    display:block;

    margin-top:2px;

    font-size:17px;
    line-height:1.15;
}

.fm-sound-track--onair
.fm-sound-track__main>p{
    display:block;

    margin-top:4px;

    font-size:14px;
}


/* ON AIR BADGE */

.fm-sound-track--onair
.fm-sound-cover>span{
    left:6px;
    bottom:6px;

    padding:6px 8px;

    border-radius:5px;

    background:#d52d94;

    color:#fff;

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

    letter-spacing:.08em;
}


/* ==========================================================
   LIVE-ZEITSTRAHL
   ========================================================== */

.fm-sound-progress{
    display:block;

    margin-top:17px;
}

.fm-sound-progress__rail{
    position:relative;

    display:block;

    width:100%;
    height:3px;

    overflow:visible;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            rgba(213,45,148,.42),
            rgba(103,89,196,.48),
            rgba(42,175,225,.46)
        );
}


/*
 * Wenn echte Dauer bekannt ist:
 * normaler tatsächlicher Fortschritt.
 */

.fm-sound-progress__rail:not(.is-duration-unknown)>b{
    display:block;

    position:relative;

    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #d52d94,
            #7959c8,
            #2aafe1
        );

    box-shadow:
        0 0 10px
        rgba(42,175,225,.25);

    transition:
        width 1s linear;
}

.fm-sound-progress__rail:not(.is-duration-unknown)>b::after{
    content:"";

    position:absolute;

    right:-5px;
    top:50%;

    width:9px;
    height:9px;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:#fff;

    border:
        2px solid
        #2aafe1;

    box-shadow:
        0 0 11px
        rgba(42,175,225,.58);
}


/*
 * Unbekannte Gesamtdauer:
 * keine animierte oder erfundene Prozentanzeige.
 */

.fm-sound-progress__rail.is-duration-unknown{
    height:2px;

    background:
        linear-gradient(
            90deg,
            #d52d94,
            rgba(118,88,198,.72),
            #2aafe1
        );
}

.fm-sound-progress__rail.is-duration-unknown>b{
    display:none !important;
}


/* Kleine Startmarkierung links */

.fm-sound-progress__rail.is-duration-unknown::before{
    content:"";

    position:absolute;

    left:-1px;
    top:50%;

    width:8px;
    height:8px;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:#d52d94;

    box-shadow:
        0 0 10px
        rgba(213,45,148,.45);
}


/* Zeitinformationen */

.fm-sound-progress__meta{
    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto
        auto;

    gap:12px;
    align-items:center;

    margin-top:8px;

    color:#74868d;

    font-size:11px;
    line-height:1.2;

    font-variant-numeric:
        tabular-nums;
}

.fm-sound-progress__started{
    color:#6d8088;
}

.fm-sound-progress__meta
[data-sound-elapsed]{
    color:#2aafe1;

    font-weight:850;
}

.fm-sound-progress__meta em{
    overflow:hidden;

    color:#89999f;

    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-style:normal;
}

.fm-sound-progress__meta
[data-sound-duration]{
    color:#9aa8ad;

    text-align:right;
    font-weight:800;
}


/* UNKNOWN DURATION TEXT */

.fm-sound-progress__rail.is-duration-unknown
+
.fm-sound-progress__meta{
    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;
}

.fm-sound-progress__rail.is-duration-unknown
+
.fm-sound-progress__meta
[data-sound-duration]{
    color:#2aafe1;
}


/* ==========================================================
   DAYPARTS
   ========================================================== */

.fm-sound-daypart{
    position:relative;

    display:block;

    min-height:auto;

    margin:
        28px
        0
        8px;

    padding:
        13px
        12px
        13px
        18px;

    overflow:hidden;

    border:0;
    border-left:
        2px solid
        rgba(42,175,225,.62);

    background:
        linear-gradient(
            90deg,
            rgba(42,175,225,.055),
            transparent 70%
        );
}

.fm-sound-daypart>div{
    position:relative;
    z-index:2;

    display:flex;

    align-items:center;
    gap:14px;
}

.fm-sound-daypart span{
    color:#2aafe1;

    font-size:11px;
}

.fm-sound-daypart strong{
    color:#e7edef;

    font-size:15px;
    letter-spacing:.06em;
}

.fm-sound-daypart small{
    position:relative;
    z-index:2;

    display:block;

    margin:
        4px
        0
        0
        47px;

    color:#64777e;

    font-size:11px;
}

.fm-sound-daypart::after{
    content:"";

    position:absolute;

    right:15px;
    top:50%;

    width:120px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(42,175,225,.16)
        );
}


/* ==========================================================
   SHOWTIME
   ========================================================== */

.fm-sound-showtime{
    position:relative;

    margin:
        30px
        0
        16px;

    overflow:hidden;

    border:
        1px solid
        rgba(213,45,148,.30);

    border-radius:9px;

    background:
        linear-gradient(
            100deg,
            rgba(213,45,148,.10),
            rgba(42,175,225,.025) 68%,
            transparent
        );
}

.fm-sound-showtime::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:
        linear-gradient(
            180deg,
            #d52d94,
            #2aafe1
        );
}

.fm-sound-showtime__marker{
    padding:
        10px
        17px
        9px
        19px;

    border-bottom:
        1px solid
        rgba(213,45,148,.11);
}

.fm-sound-showtime__marker span{
    color:#ed52b0;

    font-size:10px;
    font-weight:950;
}

.fm-sound-showtime__marker time{
    color:#83949a;

    font-size:12px;
}

.fm-sound-showtime__body{
    padding:
        17px
        18px
        18px
        19px;
}

.fm-sound-showtime__body>i{
    display:none;
}

.fm-sound-showtime__body strong{
    font-size:17px;
}

.fm-sound-showtime__body span{
    font-size:12px;
}

.fm-sound-showtime__body small{
    color:#2aafe1;

    font-size:12px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:720px){

    .fm-sound-content{
        width:calc(100% - 36px);
    }

    .fm-sound-list{
        padding-left:12px;
    }

    .fm-sound-list::before{
        left:2px;
    }

    .fm-sound-track{
        grid-template-columns:
            52px
            minmax(0,1fr);

        gap:11px;

        padding-right:5px;
    }

    .fm-sound-track::after{
        left:-13px;
    }

    .fm-sound-cover{
        width:52px;
        height:52px;
    }

    .fm-sound-track__main{
        grid-template-columns:
            minmax(0,1fr)
            auto;

        column-gap:12px;
    }

    .fm-sound-track__top time{
        font-size:11px;
    }

    .fm-sound-track--onair{
        grid-template-columns:
            64px
            minmax(0,1fr);

        gap:13px;

        padding:15px;
    }

    .fm-sound-track--onair
    .fm-sound-cover{
        width:64px;
        height:64px;
    }

    .fm-sound-progress__meta{
        grid-template-columns:
            auto
            1fr
            auto;
    }

    .fm-sound-progress__meta em{
        display:none;
    }

    .fm-sound-progress__started{
        display:none;
    }

}


.fm-sound-progress__rail.is-duration-unknown>b{
    animation:none !important;
    width:0 !important;
    opacity:0 !important;
}

@keyframes fmSoundLiveTimeline{
    from{
        width:0;
    }

    to{
        width:0;
    }
}


/* ==========================================================
   320 FM · SHOWTIME · EDITORIAL TIMELINE
   ========================================================== */


/* SHOWTIME NICHT MEHR ALS GROSSE KARTE */

.fm-sound-showtime{
    position:relative;

    margin:34px 0 28px;
    padding:0 0 0 28px;

    overflow:visible;

    border:0;
    border-radius:0;

    background:none;

    box-shadow:none;
}


/* Punkt auf der vertikalen Timeline */

.fm-sound-showtime::before{
    content:"";

    position:absolute;

    left:-16px;
    top:16px;

    width:11px;
    height:11px;

    border-radius:50%;

    background:#d52d94;

    border:2px solid #071016;

    box-shadow:
        0 0 0 3px rgba(213,45,148,.18),
        0 0 16px rgba(213,45,148,.48);
}


/* Horizontale Showtime-Linie */

.fm-sound-showtime::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:21px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(213,45,148,.78),
            rgba(42,175,225,.24) 55%,
            rgba(42,175,225,.04)
        );
}


/* SHOWTIME + STARTZEIT */

.fm-sound-showtime__marker{
    position:relative;
    z-index:2;

    width:max-content;

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

    margin:0 0 14px;
    padding:0 12px 0 0;

    border:0;

    background:#071016;
}

.fm-sound-showtime__marker span{
    display:inline-flex;
    align-items:center;

    color:#ed4eae;

    font-size:11px;
    line-height:1;
    font-weight:950;

    letter-spacing:.16em;
}

.fm-sound-showtime__marker span::before{
    content:"LIVE SHOW";

    margin-right:10px;

    color:#6d8189;

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

    letter-spacing:.10em;
}

.fm-sound-showtime__marker time{
    color:#2aafe1;

    font-size:12px;
    line-height:1;
    font-weight:850;

    font-variant-numeric:
        tabular-nums;
}


/* SENDUNGSINHALT */

.fm-sound-showtime__body{
    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:22px;
    align-items:end;

    padding:
        13px
        16px
        16px
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.065);
}


/* alter Farbstreifen weg */

.fm-sound-showtime__body>i{
    display:none;
}


/* TITEL */

.fm-sound-showtime__body>div{
    min-width:0;
}

.fm-sound-showtime__body strong{
    display:block;

    margin:0;

    color:#f7f8f9;

    font-size:22px;
    line-height:1.05;
    font-weight:900;

    letter-spacing:-.035em;
}


/* RESIDENT / HOST */

.fm-sound-showtime__body span{
    display:block;

    margin-top:7px;

    color:#85969c;

    font-size:12px;
    line-height:1.4;
}


/* ZEITRAUM RECHTS */

.fm-sound-showtime__body small{
    display:inline-flex;
    align-items:center;

    padding:6px 9px;

    border:
        1px solid
        rgba(42,175,225,.18);

    border-radius:5px;

    background:
        rgba(42,175,225,.035);

    color:#2aafe1;

    font-size:12px;
    line-height:1;
    font-weight:850;

    white-space:nowrap;

    font-variant-numeric:
        tabular-nums;
}


/* ==========================================================
   DAYPARTS ZURÜCKNEHMEN
   ========================================================== */

.fm-sound-daypart{
    position:relative;

    min-height:auto;

    margin:12px 0 0;
    padding:14px 12px 14px 17px;

    border:0;
    border-bottom:
        1px solid
        rgba(255,255,255,.045);

    background:transparent;
}

.fm-sound-daypart::before{
    content:"";

    position:absolute;

    left:-15px;
    top:50%;

    width:6px;
    height:6px;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:#071016;

    border:
        1px solid
        rgba(42,175,225,.46);
}

.fm-sound-daypart::after{
    display:none;
}

.fm-sound-daypart>div{
    display:grid;

    grid-template-columns:
        54px
        minmax(0,1fr);

    gap:14px;

    align-items:center;
}

.fm-sound-daypart span{
    color:#2aafe1;

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

    font-variant-numeric:
        tabular-nums;
}

.fm-sound-daypart strong{
    color:#dce4e7;

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

    letter-spacing:.06em;
}

.fm-sound-daypart small{
    display:block;

    margin:
        3px
        0
        0
        68px;

    color:#536970;

    font-size:10px;
}


/* MOBILE */

@media(max-width:720px){

    .fm-sound-showtime{
        padding-left:18px;
    }

    .fm-sound-showtime::before{
        left:-13px;
    }

    .fm-sound-showtime__body{
        grid-template-columns:
            minmax(0,1fr);

        gap:10px;
    }

    .fm-sound-showtime__body strong{
        font-size:18px;
    }

    .fm-sound-showtime__body small{
        justify-self:start;
    }

}


/* ==========================================================
   320 FM · LIVE TIMELINE FINAL
   ========================================================== */

.fm-sound-showtime--live{
    margin-top:34px;
}

.fm-sound-showtime--live::before{
    background:#d52d94;

    box-shadow:
        0 0 0 3px rgba(213,45,148,.16),
        0 0 18px rgba(213,45,148,.62);
}

.fm-sound-showtime--live::after{
    background:
        linear-gradient(
            90deg,
            #d52d94,
            rgba(135,80,194,.68) 48%,
            rgba(42,175,225,.38) 78%,
            rgba(42,175,225,.04)
        );
}

.fm-sound-showtime--live
.fm-sound-showtime__marker span{
    color:#fff;
}

.fm-sound-showtime--live
.fm-sound-showtime__marker span::before{
    content:"● ON AIR";

    color:#d52d94;
}

.fm-sound-showtime--live
.fm-sound-showtime__body strong{
    color:#fff;
}


/* Aktueller Track ist der stärkste Punkt der Timeline */

.fm-sound-track--onair{
    position:relative;

    margin-top:16px;
    margin-bottom:30px;

    border-color:
        rgba(213,45,148,.34);

    background:
        radial-gradient(
            circle at 0 50%,
            rgba(213,45,148,.15),
            transparent 37%
        ),
        linear-gradient(
            105deg,
            rgba(213,45,148,.08),
            rgba(42,175,225,.035) 60%,
            rgba(7,16,22,.42)
        );
}

.fm-sound-track--onair::after{
    background:#d52d94;

    box-shadow:
        0 0 0 4px rgba(7,16,22,.96),
        0 0 18px rgba(213,45,148,.62);
}


/* Unbekannte Gesamtdauer:
   echte Laufzeit zeigen, aber keine Prozentanzeige vortäuschen */

.fm-sound-progress__rail.is-duration-unknown{
    height:2px;

    background:
        linear-gradient(
            90deg,
            #d52d94 0%,
            #8b55c6 52%,
            #2aafe1 100%
        );

    opacity:.82;
}

.fm-sound-progress__rail.is-duration-unknown>b{
    display:none !important;
    animation:none !important;
}

.fm-sound-progress__rail.is-duration-unknown::before{
    content:"";

    position:absolute;
    left:-1px;
    top:50%;

    width:8px;
    height:8px;

    transform:translateY(-50%);

    border-radius:50%;

    background:#d52d94;

    box-shadow:
        0 0 12px
        rgba(213,45,148,.55);
}


/* ==========================================================
   DEIN SOUND · TYPOGRAPHY FINAL
   ========================================================== */

.fm-sound-kicker{
    font-size:10px;
}

.fm-sound-hero p{
    font-size:15px;
    line-height:1.65;
}

.fm-sound-days strong{
    font-size:12px;
}

.fm-sound-days span{
    font-size:12px;
}

.fm-sound-days small{
    font-size:9px;
}

.fm-sound-date-head>div>span{
    font-size:10px;
}

.fm-sound-date-head>small{
    font-size:10px;
}

.fm-sound-track__top>span{
    font-size:10px;
}

.fm-sound-track__top time{
    font-size:12px;
}

.fm-sound-track__main>strong{
    font-size:15px;
}

.fm-sound-track__main>p{
    font-size:13px;
}

.fm-sound-track--onair
.fm-sound-track__top>span{
    font-size:10px;
}

.fm-sound-track--onair
.fm-sound-track__top time{
    font-size:12px;
}

.fm-sound-track--onair
.fm-sound-track__main>strong{
    font-size:18px;
}

.fm-sound-track--onair
.fm-sound-track__main>p{
    font-size:14px;
}

.fm-sound-track--onair
.fm-sound-cover>span{
    font-size:9px;
}

.fm-sound-progress__meta{
    font-size:11px;
}

.fm-sound-showtime__marker span{
    font-size:10px;
}

.fm-sound-showtime__marker span::before{
    font-size:9px;
}

.fm-sound-showtime__marker time{
    font-size:12px;
}

.fm-sound-showtime__body strong{
    font-size:22px;
}

.fm-sound-showtime__body span{
    font-size:12px;
}

.fm-sound-showtime__body small{
    font-size:12px;
}

.fm-sound-daypart span{
    font-size:11px;
}

.fm-sound-daypart strong{
    font-size:13px;
}

.fm-sound-daypart small{
    font-size:11px;
}


/* ==========================================================
   320 FM · DAYPART CHAPTER MARKERS
   ========================================================== */

.fm-sound-daypart{
    position:relative;

    margin:
        24px
        0
        8px;

    padding:
        15px
        18px
        15px
        16px;

    overflow:hidden;

    border:0;
    border-radius:7px;

    background:
        linear-gradient(
            90deg,
            rgba(42,175,225,.075),
            rgba(42,175,225,.025) 48%,
            rgba(255,255,255,.008)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(42,175,225,.08);
}


/* Akzentkante */

.fm-sound-daypart::before{
    content:"";

    position:absolute;

    left:0;
    top:8px;
    bottom:8px;

    width:3px;

    transform:none;

    border:0;
    border-radius:0 3px 3px 0;

    background:
        linear-gradient(
            180deg,
            #2aafe1,
            #7657c7
        );

    box-shadow:
        0 0 12px
        rgba(42,175,225,.22);
}


/* feiner Verlauf nach rechts */

.fm-sound-daypart::after{
    content:"";

    position:absolute;

    left:16px;
    right:18px;
    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(42,175,225,.22),
            rgba(42,175,225,.04),
            transparent
        );
}


/* Hauptzeile */

.fm-sound-daypart>div{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        62px
        minmax(0,1fr);

    gap:15px;
    align-items:center;
}


/* Uhrzeit als Badge */

.fm-sound-daypart span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:26px;

    padding:0 8px;

    border:
        1px solid
        rgba(42,175,225,.22);

    border-radius:5px;

    background:
        rgba(42,175,225,.055);

    color:#2aafe1;

    font-size:11px;
    line-height:1;
    font-weight:900;

    font-variant-numeric:
        tabular-nums;
}


/* Kapitelname */

.fm-sound-daypart strong{
    color:#f1f5f6;

    font-size:15px;
    line-height:1.15;
    font-weight:900;

    letter-spacing:.055em;
}


/* Beschreibung */

.fm-sound-daypart small{
    position:relative;
    z-index:2;

    display:block;

    margin:
        5px
        0
        0
        77px;

    color:#72878f;

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


/* leichter Hover */

.fm-sound-daypart{
    transition:
        background .16s ease,
        box-shadow .16s ease;
}

.fm-sound-daypart:hover{
    background:
        linear-gradient(
            90deg,
            rgba(42,175,225,.10),
            rgba(42,175,225,.035) 48%,
            rgba(255,255,255,.012)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(42,175,225,.13);
}


/* Abstand zum ersten Track darunter */

.fm-sound-daypart + .fm-sound-track{
    margin-top:4px;
}


/* SHOWTIME bleibt bewusst stärker */

.fm-sound-showtime{
    margin-top:30px;
}


/* Mobile */

@media(max-width:720px){

    .fm-sound-daypart{
        margin-top:20px;

        padding:
            13px
            12px
            13px
            12px;
    }

    .fm-sound-daypart>div{
        grid-template-columns:
            56px
            minmax(0,1fr);

        gap:11px;
    }

    .fm-sound-daypart span{
        min-height:24px;

        font-size:10px;
    }

    .fm-sound-daypart strong{
        font-size:14px;
    }

    .fm-sound-daypart small{
        margin-left:67px;

        font-size:10px;
    }

}


/* ==========================================================
   320 FM · STICKY 7-TAGE-NAVIGATION
   ========================================================== */

.fm-sound-days{
    position:sticky;
    top:72px;

    z-index:30;

    margin-top:-25px;

    background:
        rgba(6,14,19,.94);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

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

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


/* etwas klarere Trennung zum Content beim Scrollen */

.fm-sound-days::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-1px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(42,175,225,.20),
            rgba(213,45,148,.16),
            transparent
        );

    pointer-events:none;
}


/* Header bleibt über der Tagesnavigation */

.site-header{
    position:sticky;
    top:0;
    z-index:50;
}


/* Mobile: kompakter */

@media(max-width:720px){

    .fm-sound-days{
        top:64px;

        margin-top:-18px;

        backdrop-filter:
            blur(12px);

        -webkit-backdrop-filter:
            blur(12px);
    }

}

/* 320 FM · PREMIUM CLUB TURNTABLE HERO */
.fm-premium-turntable-hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    min-height:clamp(300px,34vw,420px);
    padding:clamp(34px,4vw,54px);
    padding-right:min(44vw,520px);

    border-radius:30px;

    background:
        radial-gradient(120% 160% at 0% 0%, rgba(196,66,255,.18) 0%, transparent 42%),
        radial-gradient(120% 160% at 100% 0%, rgba(0,191,255,.18) 0%, transparent 46%),
        linear-gradient(135deg, #09111b 0%, #07131f 40%, #06111a 100%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 30px 70px rgba(0,0,0,.34);
}

.fm-premium-turntable-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;

    background:
        linear-gradient(
            90deg,
            rgba(5,11,18,.78) 0%,
            rgba(5,11,18,.58) 34%,
            rgba(5,11,18,.18) 62%,
            rgba(5,11,18,.08) 100%
        );
}

.fm-premium-turntable-hero::after{
    content:"320";
    position:absolute;
    right:clamp(22px,6vw,86px);
    bottom:clamp(18px,4vw,38px);
    z-index:1;

    font-size:clamp(110px,16vw,220px);
    line-height:1;
    font-weight:900;
    letter-spacing:-.06em;

    color:rgba(255,255,255,.05);
    pointer-events:none;
}

.fm-premium-turntable-hero > *{
    position:relative;
    z-index:2;
}

.fm-premium-turntable-hero > :not(.fm-played-hero-art){
    max-width:min(620px,100%);
}

.fm-played-hero-art{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.fm-played-hero-deck{
    position:absolute;
    right:clamp(18px,4vw,48px);
    top:50%;
    transform:translateY(-50%);

    width:clamp(260px,34vw,430px);
    aspect-ratio:1/1;

    border-radius:32px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.01)),
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(255,255,255,.015));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 18px 30px rgba(0,0,0,.28);
    opacity:.9;
}

.fm-played-hero-vinyl{
    position:absolute;
    right:clamp(42px,6vw,88px);
    top:50%;
    transform:translateY(-50%);

    width:clamp(220px,28vw,370px);
    aspect-ratio:1/1;

    border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0 8%, transparent 8.5% 11%, rgba(255,255,255,.06) 11.5% 13.5%, transparent 14% 20%),
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.042) 0 1px, transparent 2px 10px),
        radial-gradient(circle at 28% 24%, rgba(255,255,255,.14), transparent 34%),
        linear-gradient(135deg, rgba(16,23,34,.98), rgba(3,8,13,.98));

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 36px 56px rgba(0,0,0,.34);
}

.fm-played-hero-label{
    position:absolute;
    right:calc(clamp(42px,6vw,88px) + clamp(220px,28vw,370px) / 2 - clamp(26px,3.8vw,42px));
    top:50%;
    transform:translateY(-50%);

    width:clamp(52px,7.6vw,84px);
    aspect-ratio:1/1;

    border-radius:50%;
    background:
        radial-gradient(circle at 32% 30%, rgba(255,255,255,.18), transparent 45%),
        linear-gradient(135deg, rgba(195,66,255,.86), rgba(26,179,255,.80));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        0 10px 18px rgba(7,11,18,.22);
}

.fm-played-hero-spindle{
    position:absolute;
    right:calc(clamp(42px,6vw,88px) + clamp(220px,28vw,370px) / 2 - 4px);
    top:50%;
    transform:translateY(-50%);

    width:8px;
    height:8px;

    border-radius:50%;
    background:#d7e4eb;
    box-shadow:0 0 0 4px rgba(255,255,255,.10);
}

.fm-played-hero-tonearm-base{
    position:absolute;
    right:clamp(12px,2vw,26px);
    top:calc(50% - 90px);

    width:24px;
    height:24px;
    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.24), rgba(255,255,255,.08) 38%, rgba(0,0,0,.28) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 16px rgba(0,0,0,.24);
}

.fm-played-hero-tonearm{
    position:absolute;
    right:clamp(24px,3vw,38px);
    top:calc(50% - 83px);

    width:clamp(135px,16vw,210px);
    height:6px;

    border-radius:999px;
    transform-origin:right center;
    transform:rotate(28deg);

    background:linear-gradient(90deg, rgba(236,241,244,.92), rgba(151,164,173,.78));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        0 6px 12px rgba(0,0,0,.22);
}

.fm-played-hero-tonearm-head{
    position:absolute;
    right:calc(clamp(24px,3vw,38px) + clamp(135px,16vw,210px) - 22px);
    top:calc(50% - 15px);

    width:20px;
    height:28px;

    border-radius:7px;
    transform:rotate(28deg);

    background:linear-gradient(180deg, rgba(219,227,233,.94), rgba(137,149,158,.86));
    box-shadow:0 6px 12px rgba(0,0,0,.24);
}

.fm-played-hero-glow{
    position:absolute;
    right:clamp(28px,4vw,62px);
    top:50%;
    transform:translateY(-50%);

    width:clamp(300px,36vw,480px);
    aspect-ratio:1/1;

    border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(14,154,255,.14) 0%, rgba(183,69,255,.08) 34%, transparent 72%);
    filter:blur(18px);
    opacity:.85;
}

.fm-premium-turntable-hero h1{
    font-size:clamp(50px,7vw,88px);
    line-height:.92;
    letter-spacing:-.05em;
}

.fm-premium-turntable-hero p{
    max-width:56ch;
    font-size:clamp(15px,1.35vw,18px);
    line-height:1.7;
}

.fm-premium-turntable-hero .eyebrow,
.fm-premium-turntable-hero .fm-page-eyebrow,
.fm-premium-turntable-hero .fm-legal-eyebrow,
.fm-premium-turntable-hero .fm-home-kicker{
    letter-spacing:.18em;
}

@media (max-width: 1100px){
    .fm-premium-turntable-hero{
        padding-right:min(42vw,380px);
    }

    .fm-played-hero-tonearm{
        width:clamp(118px,13vw,160px);
    }
}

@media (max-width: 860px){
    .fm-premium-turntable-hero{
        min-height:300px;
        padding:28px 24px 28px 24px;
        padding-right:24px;
    }

    .fm-premium-turntable-hero > :not(.fm-played-hero-art){
        max-width:100%;
    }

    .fm-played-hero-art{
        opacity:.48;
    }

    .fm-played-hero-deck{
        right:-34px;
        width:240px;
    }

    .fm-played-hero-vinyl{
        right:-10px;
        width:210px;
    }

    .fm-played-hero-label{
        right:70px;
    }

    .fm-played-hero-spindle{
        right:106px;
    }

    .fm-played-hero-tonearm-base,
    .fm-played-hero-tonearm,
    .fm-played-hero-tonearm-head{
        display:none;
    }

    .fm-premium-turntable-hero h1{
        font-size:clamp(38px,11vw,60px);
    }
}

@media (max-width: 640px){
    .fm-premium-turntable-hero{
        border-radius:22px;
        min-height:280px;
    }

    .fm-played-hero-art{
        opacity:.30;
    }

    .fm-played-hero-deck{
        width:200px;
        right:-44px;
    }

    .fm-played-hero-vinyl{
        width:176px;
        right:-16px;
    }

    .fm-played-hero-label{
        width:44px;
        right:48px;
    }

    .fm-played-hero-spindle{
        right:82px;
    }
}

/* ==========================================================
   320 FM · DEIN SOUND · PHOTO HERO FINAL
   ========================================================== */

.fm-premium-turntable-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    min-height:410px;

    padding:
        clamp(54px,5vw,78px)
        clamp(34px,6vw,86px)
        clamp(82px,7vw,104px);

    border-radius:0 !important;

    background-color:#071016 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(5,11,18,.98) 0%,
            rgba(5,11,18,.94) 25%,
            rgba(5,11,18,.76) 43%,
            rgba(5,11,18,.28) 66%,
            rgba(5,11,18,.05) 100%
        ),
        radial-gradient(
            circle at 42% 54%,
            rgba(213,45,148,.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 92% 38%,
            rgba(42,175,225,.14),
            transparent 36%
        ),
        url('/assets/frontend/dein-sound-turntable-hero.webp') !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-position:
        center,
        center,
        center,
        right center !important;

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        auto 100% !important;

    box-shadow:none !important;
}

.fm-premium-turntable-hero::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(6,13,18,.04),
            rgba(6,13,18,.03) 70%,
            rgba(6,13,18,.82) 100%
        );
}

.fm-premium-turntable-hero::after{
    display:none !important;
    content:none !important;
}


/* alte gezeichnete Turntable-Grafik ausblenden */

.fm-premium-turntable-hero
.fm-played-hero-art{
    display:none !important;
}


/* Text über dem Foto */

.fm-premium-turntable-hero
> :not(.fm-played-hero-art){
    position:relative;

    z-index:2;

    max-width:min(
        650px,
        48vw
    );
}

.fm-premium-turntable-hero h1{
    margin-top:12px;
    margin-bottom:12px;

    color:#fff;

    font-size:
        clamp(
            58px,
            5.9vw,
            92px
        );

    line-height:.91;

    font-weight:950;

    letter-spacing:-.055em;

    text-shadow:
        0 7px 26px
        rgba(0,0,0,.34);
}

.fm-premium-turntable-hero h1 small{
    display:block;

    margin-top:11px;

    color:#a4b1b7;

    font-size:.39em;

    line-height:1.04;

    letter-spacing:-.025em;

    text-shadow:none;
}

.fm-premium-turntable-hero p{
    max-width:620px;

    margin-top:20px;

    color:#a2b0b6;

    font-size:15px;

    line-height:1.68;

    text-shadow:
        0 2px 10px
        rgba(0,0,0,.35);
}


/* 7-Tage-Leiste in Hero integrieren */

.fm-sound-days{
    z-index:35;

    margin-top:-50px !important;

    border-color:
        rgba(113,145,158,.20);

    background:
        rgba(6,14,19,.92);

    box-shadow:
        0 18px 44px
        rgba(0,0,0,.30);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}

.fm-sound-days>a{
    min-height:68px;
}

.fm-sound-days>a.is-active{
    background:
        linear-gradient(
            180deg,
            rgba(213,45,148,.14),
            rgba(42,175,225,.045)
        );
}

.fm-sound-days>a.is-active::after{
    height:2px;

    background:
        linear-gradient(
            90deg,
            #d52d94,
            #2aafe1
        );
}


/* Desktop */

@media(min-width:1200px){

    .fm-premium-turntable-hero{
        padding-left:
            max(
                calc(
                    (100vw - 1180px)
                    / 2
                ),
                44px
            );

        padding-right:
            max(
                calc(
                    (100vw - 1180px)
                    / 2
                ),
                44px
            );
    }

    .fm-premium-turntable-hero
    > :not(.fm-played-hero-art){
        max-width:610px;
    }
}


/* Tablet */

@media(max-width:1000px){

    .fm-premium-turntable-hero{
        min-height:390px;

        background-position:
            center,
            center,
            center,
            76% center !important;
    }

    .fm-premium-turntable-hero
    > :not(.fm-played-hero-art){
        max-width:60%;
    }
}


/* Mobile */

@media(max-width:720px){

    .fm-premium-turntable-hero{
        min-height:370px;

        padding:
            42px
            22px
            76px;

        background-image:
            linear-gradient(
                180deg,
                rgba(5,11,18,.74),
                rgba(5,11,18,.87) 58%,
                rgba(5,11,18,.98)
            ),
            linear-gradient(
                90deg,
                rgba(5,11,18,.86),
                rgba(5,11,18,.28)
            ),
            url('/assets/frontend/dein-sound-turntable-hero.webp') !important;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat !important;

        background-position:
            center,
            center,
            70% top !important;

        background-size:
            100% 100%,
            100% 100%,
            auto 72% !important;
    }

    .fm-premium-turntable-hero
    > :not(.fm-played-hero-art){
        max-width:100%;
    }

    .fm-premium-turntable-hero h1{
        font-size:
            clamp(
                42px,
                13vw,
                62px
            );
    }

    .fm-premium-turntable-hero p{
        font-size:14px;
    }

    .fm-sound-days{
        margin-top:-38px !important;
    }
}