/* 320 FM HEADER PLAYER
   Nur Player. Keine Navigation, keine Header-Geometrie. */

.fm-radio-mini{
    display:flex;
    align-items:center;
    gap:10px;

    min-width:0;
    height:46px;

    margin:0;
    padding:0;

    border:0;
    background:transparent;
}


.fm-radio-mini__info{
    display:flex;
    flex-direction:column;
    justify-content:center;

    width:154px;
    min-width:0;

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


.fm-radio-mini__info strong,
.fm-radio-mini__info small{
    display:block;

    overflow:hidden;

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


.fm-radio-mini__info strong{
    color:#f4f7f8;

    font-size:10px;
    font-weight:800;

    line-height:1.15;
}


.fm-radio-mini__info small{
    margin-top:3px;

    color:#81949d;

    font-size:8px;

    line-height:1.15;
}


.fm-radio-mini.is-idle
.fm-radio-mini__info{
    opacity:0;

    transform:
        translateX(4px);

    pointer-events:none;
}


.fm-radio-mini.is-loading
.fm-radio-mini__info,
.fm-radio-mini.is-playing
.fm-radio-mini__info,
.fm-radio-mini.has-error
.fm-radio-mini__info{
    opacity:1;

    transform:none;
}


/* Button */

.fm-radio-mini__play{
    position:relative;

    display:grid !important;
    place-items:center;

    flex:0 0 38px;

    width:38px !important;
    height:38px !important;

    min-width:38px !important;
    min-height:38px !important;

    margin:0;
    padding:0 !important;

    border:
        1px solid
        rgba(117,145,156,.52)
        !important;

    border-radius:50% !important;

    background:#071014 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.015)
        !important;

    isolation:isolate;

    cursor:pointer;
}


/* SVG-Ring
   Das fertige SVG wird nur transformiert. */

.fm-radio-mini__ring{
    position:absolute;

    left:50%;
    top:50%;

    width:48px;
    height:48px;

    margin-left:-24px;
    margin-top:-24px;

    z-index:-1;

    overflow:visible;

    transform:
        rotate(0deg)
        translateZ(0);

    transform-origin:
        50% 50%;

    will-change:
        transform,
        opacity;

    backface-visibility:hidden;

    pointer-events:none;
}


/* Glow bleibt statisch gerendert,
   lediglich Deckkraft wird verändert. */

.fm-radio-mini__glow{
    position:absolute;

    inset:-8px;

    z-index:-2;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(54,199,231,.25) 0%,
            rgba(117,89,201,.13) 38%,
            rgba(239,49,90,.08) 56%,
            transparent 72%
        );

    opacity:.16;

    transform:
        translateZ(0);

    will-change:
        opacity;

    pointer-events:none;
}


/* IDLE:
   elegante langsame Rotation +
   Glow-Helligkeit, keine Größenänderung */

.fm-radio-mini.is-idle
.fm-radio-mini__ring{
    animation:
        fm320RingIdle
        3.6s linear
        infinite;
}


.fm-radio-mini.is-idle
.fm-radio-mini__glow{
    animation:
        fm320GlowIdle
        2.6s ease-in-out
        infinite;
}


@keyframes fm320RingIdle{

    from{
        transform:
            rotate(0deg)
            translateZ(0);
    }

    to{
        transform:
            rotate(360deg)
            translateZ(0);
    }

}


@keyframes fm320GlowIdle{

    0%,
    100%{
        opacity:.14;
    }

    50%{
        opacity:.52;
    }

}


/* STREAM STARTET */

.fm-radio-mini.is-loading
.fm-radio-mini__ring{
    animation:
        fm320RingLoading
        .72s linear
        infinite;
}


.fm-radio-mini.is-loading
.fm-radio-mini__glow{
    opacity:.46;
}


@keyframes fm320RingLoading{

    from{
        transform:
            rotate(0deg)
            translateZ(0);
    }

    to{
        transform:
            rotate(360deg)
            translateZ(0);
    }

}


/* STREAM LÄUFT */

.fm-radio-mini.is-playing
.fm-radio-mini__ring{
    animation:
        fm320RingPlaying
        1.8s linear
        infinite;
}


.fm-radio-mini.is-playing
.fm-radio-mini__glow{
    opacity:.20;
}


@keyframes fm320RingPlaying{

    from{
        transform:
            rotate(0deg)
            translateZ(0);
    }

    to{
        transform:
            rotate(360deg)
            translateZ(0);
    }

}


/* Symbol */

.fm-radio-mini__icon{
    position:relative;

    z-index:2;

    display:block;

    width:12px;
    height:12px;
}


.fm-radio-mini:not(.is-playing)
.fm-radio-mini__icon::before{
    content:"";

    position:absolute;

    left:3px;
    top:1px;

    width:0;
    height:0;

    border-top:
        5px solid transparent;

    border-bottom:
        5px solid transparent;

    border-left:
        8px solid #fff;
}


.fm-radio-mini:not(.is-playing)
.fm-radio-mini__icon::after{
    content:none;
}


.fm-radio-mini.is-playing
.fm-radio-mini__icon::before,
.fm-radio-mini.is-playing
.fm-radio-mini__icon::after{
    content:"";

    position:absolute;

    top:1px;

    width:3px;
    height:10px;

    border-radius:1px;

    background:#fff;
}


.fm-radio-mini.is-playing
.fm-radio-mini__icon::before{
    left:2px;
}


.fm-radio-mini.is-playing
.fm-radio-mini__icon::after{
    right:2px;
}


/* Lautsprecher */

.fm-radio-mini__mute{
    position:relative;

    display:flex !important;

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

    flex:0 0 22px;

    width:22px;
    height:30px;

    padding:0 !important;
    margin:0;

    border:0 !important;

    background:transparent !important;

    opacity:.68;

    cursor:pointer;
}


.fm-radio-mini__speaker{
    position:relative;

    width:13px;
    height:13px;
}


.fm-radio-mini__speaker::before{
    content:"";

    position:absolute;

    left:0;
    top:4px;

    width:4px;
    height:5px;

    border-radius:1px;

    background:#9aabb2;
}


.fm-radio-mini__speaker::after{
    content:"";

    position:absolute;

    left:3px;
    top:2px;

    width:8px;
    height:9px;

    background:#9aabb2;

    clip-path:
        polygon(
            0 30%,
            100% 0,
            100% 100%,
            0 70%
        );
}


.fm-radio-mini.is-muted
.fm-radio-mini__mute::after{
    content:"×";

    position:absolute;

    right:-1px;
    top:5px;

    color:#ef315a;

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


.fm-radio-mini.has-error
.fm-radio-mini__ring{
    animation:none;

    opacity:.85;
}


@media(max-width:1260px){

    .fm-radio-mini__info{
        width:125px;
    }

}


@media(max-width:1080px){

    .fm-radio-mini__info{
        width:90px;
    }

}


@media(max-width:980px){

    .fm-radio-mini__info{
        display:none;
    }

}


@media(
    prefers-reduced-motion:
    reduce
){

    .fm-radio-mini__ring,
    .fm-radio-mini__glow{
        animation:none !important;
    }

}


/* 320 FM HEADER PLAYER · SMOOTH MOTION */

.fm-radio-mini__ring,
.fm-radio-mini__glow{
    transform-box:fill-box;
    transform-origin:center;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform,opacity;
}

.fm-radio-mini__ring{
    animation:none !important;
}

.fm-radio-mini__glow{
    animation:none !important;
}

/*
 * Ruhezustand:
 * langsame Bewegung plus dezentes Atmen.
 */
.fm-radio-mini.is-idle
.fm-radio-mini__ring{
    animation:
        fm320HeaderIdleTurn
        7.5s
        linear
        infinite
        !important;
}

.fm-radio-mini.is-idle
.fm-radio-mini__glow{
    animation:
        fm320HeaderIdleBreath
        2.8s
        cubic-bezier(.4,0,.2,1)
        infinite
        !important;
}

/*
 * Verbindungsaufbau:
 * klar erkennbar, aber ohne hektisches Flackern.
 */
.fm-radio-mini.is-loading
.fm-radio-mini__ring{
    animation:
        fm320HeaderLoadingTurn
        1.35s
        linear
        infinite
        !important;
}

.fm-radio-mini.is-loading
.fm-radio-mini__glow{
    animation:
        fm320HeaderLoadingBreath
        1.35s
        ease-in-out
        infinite
        !important;
}

/*
 * Stream aktiv:
 * kontinuierliche, ruhige Rotation.
 */
.fm-radio-mini.is-playing
.fm-radio-mini__ring{
    animation:
        fm320HeaderPlayingTurn
        3.2s
        linear
        infinite
        !important;
}

.fm-radio-mini.is-playing
.fm-radio-mini__glow{
    opacity:.72;
    transform:scale(1);
}


@keyframes fm320HeaderIdleTurn{
    from{
        transform:
            translateZ(0)
            rotate(0deg);
    }

    to{
        transform:
            translateZ(0)
            rotate(360deg);
    }
}


@keyframes fm320HeaderIdleBreath{
    0%,
    100%{
        opacity:.34;
        transform:
            translateZ(0)
            scale(.94);
    }

    50%{
        opacity:.82;
        transform:
            translateZ(0)
            scale(1.08);
    }
}


@keyframes fm320HeaderLoadingTurn{
    from{
        transform:
            translateZ(0)
            rotate(0deg);
    }

    to{
        transform:
            translateZ(0)
            rotate(360deg);
    }
}


@keyframes fm320HeaderLoadingBreath{
    0%,
    100%{
        opacity:.42;
        transform:
            translateZ(0)
            scale(.98);
    }

    50%{
        opacity:.92;
        transform:
            translateZ(0)
            scale(1.05);
    }
}


@keyframes fm320HeaderPlayingTurn{
    from{
        transform:
            translateZ(0)
            rotate(0deg);
    }

    to{
        transform:
            translateZ(0)
            rotate(360deg);
    }
}


@media (prefers-reduced-motion: reduce){

    .fm-radio-mini__ring,
    .fm-radio-mini__glow{
        animation:none !important;
        transform:none !important;
    }
}

/* 320 FM HEADER PLAYER · SMOOTH MOTION */

.fm-radio-mini__ring,
.fm-radio-mini__glow{
    transform-box:fill-box;
    transform-origin:center;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform,opacity;
}

.fm-radio-mini__ring{
    animation:none !important;
}

.fm-radio-mini__glow{
    animation:none !important;
}

/*
 * Ruhezustand:
 * langsame Bewegung plus dezentes Atmen.
 */
.fm-radio-mini.is-idle
.fm-radio-mini__ring{
    animation:
        fm320HeaderIdleTurn
        7.5s
        linear
        infinite
        !important;
}

.fm-radio-mini.is-idle
.fm-radio-mini__glow{
    animation:
        fm320HeaderIdleBreath
        2.8s
        cubic-bezier(.4,0,.2,1)
        infinite
        !important;
}

/*
 * Verbindungsaufbau:
 * klar erkennbar, aber ohne hektisches Flackern.
 */
.fm-radio-mini.is-loading
.fm-radio-mini__ring{
    animation:
        fm320HeaderLoadingTurn
        1.35s
        linear
        infinite
        !important;
}

.fm-radio-mini.is-loading
.fm-radio-mini__glow{
    animation:
        fm320HeaderLoadingBreath
        1.35s
        ease-in-out
        infinite
        !important;
}

/*
 * Stream aktiv:
 * kontinuierliche, ruhige Rotation.
 */
.fm-radio-mini.is-playing
.fm-radio-mini__ring{
    animation:
        fm320HeaderPlayingTurn
        3.2s
        linear
        infinite
        !important;
}

.fm-radio-mini.is-playing
.fm-radio-mini__glow{
    opacity:.72;
    transform:scale(1);
}


@keyframes fm320HeaderIdleTurn{
    from{
        transform:
            translateZ(0)
            rotate(0deg);
    }

    to{
        transform:
            translateZ(0)
            rotate(360deg);
    }
}


@keyframes fm320HeaderIdleBreath{
    0%,
    100%{
        opacity:.34;
        transform:
            translateZ(0)
            scale(.94);
    }

    50%{
        opacity:.82;
        transform:
            translateZ(0)
            scale(1.08);
    }
}


@keyframes fm320HeaderLoadingTurn{
    from{
        transform:
            translateZ(0)
            rotate(0deg);
    }

    to{
        transform:
            translateZ(0)
            rotate(360deg);
    }
}


@keyframes fm320HeaderLoadingBreath{
    0%,
    100%{
        opacity:.42;
        transform:
            translateZ(0)
            scale(.98);
    }

    50%{
        opacity:.92;
        transform:
            translateZ(0)
            scale(1.05);
    }
}


@keyframes fm320HeaderPlayingTurn{
    from{
        transform:
            translateZ(0)
            rotate(0deg);
    }

    to{
        transform:
            translateZ(0)
            rotate(360deg);
    }
}


@media (prefers-reduced-motion: reduce){

    .fm-radio-mini__ring,
    .fm-radio-mini__glow{
        animation:none !important;
        transform:none !important;
    }
}

/* 320 FM HEADER PLAYER · NO VOLUME CONTROL */

.fm-radio-mini__mute,
[data-fm-radio-mute]{
    display:none !important;
}