/* ============================================================
   320 FM · HEADER RADIO PLAYER V4
   CLEAN IMPLEMENTATION
   ============================================================ */

.fm-header-radio-v4{
    height:54px;
    display:flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
    margin:0;
    padding:0;
    color:#fff;
    box-sizing:border-box;
}


.fm-header-radio-v4 *,
.fm-header-radio-v4 *::before,
.fm-header-radio-v4 *::after{
    box-sizing:border-box;
}


/* ============================================================
   METADATA
   ============================================================ */

.fm-header-radio-v4__meta{
    width:152px;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    overflow:hidden;
}


.fm-header-radio-v4__meta strong,
.fm-header-radio-v4__meta small{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.fm-header-radio-v4__meta strong{
    margin:0;
    font-size:11px;
    line-height:1.2;
    font-weight:850;
    color:#f3f7f8;
}


.fm-header-radio-v4__meta small{
    margin:0;
    font-size:9px;
    line-height:1.2;
    font-weight:600;
    color:#88969e;
}


.fm-header-radio-v4.is-idle
.fm-header-radio-v4__meta{
    visibility:hidden;
}


/* ============================================================
   PLAY BUTTON
   ============================================================ */

.fm-header-radio-v4__play{
    width:42px;
    height:42px;
    min-width:42px;

    position:relative;

    display:grid;
    place-items:center;

    margin:0;
    padding:0;

    appearance:none;

    border:0;
    border-radius:50%;

    background:#071014;
    color:#fff;

    cursor:pointer;

    outline:none;

    transform:none;
    box-shadow:none;
}


/*
 * Das ist der EINZIGE Ring des Players.
 * Keine Pseudo-Ringe.
 * Kein Glow-Element.
 */

.fm-header-radio-v4__ring{
    position:absolute;

    width:42px;
    height:42px;

    inset:0;

    border-radius:50%;

    border-width:2px;
    border-style:solid;

    border-top-color:#ee315a;
    border-right-color:#43c4e4;
    border-bottom-color:#a32e7b;
    border-left-color:#37b8d6;

    pointer-events:none;

    transform-origin:50% 50%;

    opacity:1;
}


/* ============================================================
   PLAY / PAUSE SYMBOL
   ============================================================ */

.fm-header-radio-v4__icon{
    position:relative;

    z-index:2;

    width:14px;
    height:16px;

    display:block;
}


/*
 * PLAY
 */

.fm-header-radio-v4:not(.is-playing)
.fm-header-radio-v4__icon::before{
    content:"";

    position:absolute;

    left:3px;
    top:1px;

    width:0;
    height:0;

    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:10px solid #fff;
}


/*
 * PAUSE
 */

.fm-header-radio-v4.is-playing
.fm-header-radio-v4__icon::before,
.fm-header-radio-v4.is-playing
.fm-header-radio-v4__icon::after{
    content:"";

    position:absolute;

    top:1px;

    width:4px;
    height:14px;

    border-radius:1px;

    background:#fff;
}


.fm-header-radio-v4.is-playing
.fm-header-radio-v4__icon::before{
    left:2px;
}


.fm-header-radio-v4.is-playing
.fm-header-radio-v4__icon::after{
    right:2px;
}


/* ============================================================
   STATE 1 · IDLE
   NICHT GESTARTET
   NUR PULSIEREN
   ============================================================ */

.fm-header-radio-v4.is-idle
.fm-header-radio-v4__ring{
    animation:
        fm-header-v4-idle-pulse
        1.65s
        ease-in-out
        infinite;
}


@keyframes fm-header-v4-idle-pulse{

    0%,
    100%{
        transform:
            rotate(0deg)
            scale(.92);

        opacity:.48;
    }

    50%{
        transform:
            rotate(0deg)
            scale(1.10);

        opacity:1;
    }

}


/* ============================================================
   STATE 2 · LOADING
   SCHNELLER PULS
   KEINE ROTATION
   ============================================================ */

.fm-header-radio-v4.is-loading
.fm-header-radio-v4__ring{
    animation:
        fm-header-v4-loading-pulse
        .72s
        ease-in-out
        infinite;
}


@keyframes fm-header-v4-loading-pulse{

    0%,
    100%{
        transform:
            rotate(0deg)
            scale(.96);

        opacity:.58;
    }

    50%{
        transform:
            rotate(0deg)
            scale(1.05);

        opacity:1;
    }

}


/* ============================================================
   STATE 3 · PLAYING
   NUR ROTATION
   KEIN PULSIEREN
   ============================================================ */

.fm-header-radio-v4.is-playing
.fm-header-radio-v4__ring{
    opacity:1;

    animation:
        fm-header-v4-playing-spin
        1.30s
        linear
        infinite;
}


@keyframes fm-header-v4-playing-spin{

    from{
        transform:
            rotate(0deg)
            scale(1);
    }

    to{
        transform:
            rotate(360deg)
            scale(1);
    }

}


/* ============================================================
   ERROR
   ============================================================ */

.fm-header-radio-v4.has-error
.fm-header-radio-v4__ring{
    animation:none;

    transform:
        rotate(0deg)
        scale(1);

    border-color:#ee315a;
}


/* ============================================================
   MUTE
   ============================================================ */

.fm-header-radio-v4__mute{
    width:28px;
    height:28px;

    display:grid;
    place-items:center;

    margin:0;
    padding:0;

    appearance:none;

    border:0;
    border-radius:50%;

    background:transparent;

    color:#8c989f;

    cursor:pointer;
}


.fm-header-radio-v4__mute svg{
    width:17px;
    height:17px;

    display:block;

    fill:currentColor;
}


.fm-header-radio-v4__mute:hover{
    color:#fff;
}


.fm-header-radio-v4.is-muted
.fm-header-radio-v4__mute{
    color:#ee315a;
}


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

@media(max-width:1180px){

    .fm-header-radio-v4__meta{
        width:110px;
    }

}


@media(max-width:980px){

    .fm-header-radio-v4__meta{
        display:none;
    }

}


@media(max-width:760px){

    .fm-header-radio-v4{
        display:none;
    }

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

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

    .fm-header-radio-v4__ring{
        animation:none;
    }

}


/* ============================================================
   V4 HEADER INTEGRATION
   ============================================================ */

.site-header
.header-actions
.fm-header-radio-v4{
    display:flex !important;

    visibility:visible !important;

    opacity:1 !important;

    width:auto !important;
    min-width:42px !important;

    height:54px !important;

    overflow:visible !important;

    position:relative !important;

    flex:0 0 auto !important;
}


.site-header
.header-actions
.fm-header-radio-v4__play{
    display:grid !important;

    visibility:visible !important;

    opacity:1 !important;

    width:42px !important;
    height:42px !important;

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

    border-radius:50% !important;
}


/*
 * Genau EIN Ring.
 */

.site-header
.header-actions
.fm-header-radio-v4__ring{
    display:block !important;

    visibility:visible !important;

    position:absolute !important;

    inset:0 !important;

    width:42px !important;
    height:42px !important;

    border-radius:50% !important;
}


/*
 * Keine Pseudo-Elemente am Button.
 */

.site-header
.header-actions
.fm-header-radio-v4__play::before,

.site-header
.header-actions
.fm-header-radio-v4__play::after{
    content:none !important;
    display:none !important;
}


/*
 * Die alte Header-Kompatibilitätsklasse
 * darf selbst keinerlei alte Playeroptik erzeugen.
 */

.site-header
.header-actions
.fm-header-player.fm-header-radio-v4{
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
}


/*
 * Mobile bleibt bewusst kompakt.
 */

@media(max-width:760px){

    .site-header
    .header-actions
    .fm-header-radio-v4{
        display:none !important;
    }

}



/* 320FM_HEADER_PLAYER_V4_MAGENTA_PULSE_BEGIN */

/* ============================================================
   320 FM · HEADER PLAYER V4
   Magenta only / stronger idle pulse / clean play spin
   ============================================================ */

.fm-header-radio-v4{
    --fm-v4-magenta-rgb: 214, 50, 151;
    --fm-v4-magenta: rgb(var(--fm-v4-magenta-rgb));
    --fm-v4-magenta-soft: rgba(var(--fm-v4-magenta-rgb), .22);
    --fm-v4-magenta-mid: rgba(var(--fm-v4-magenta-rgb), .38);
    --fm-v4-magenta-strong: rgba(var(--fm-v4-magenta-rgb), .72);
    --fm-v4-magenta-glow: rgba(var(--fm-v4-magenta-rgb), .92);
}

/*
 * Grundbutton sauber halten
 */
.fm-header-radio-v4__play{
    position: relative;
    overflow: visible;
    border-radius: 999px;
    background:
        radial-gradient(
            circle at 32% 28%,
            rgba(255,255,255,.08),
            rgba(255,255,255,0) 52%
        ),
        linear-gradient(
            180deg,
            rgba(19,24,31,.96),
            rgba(8,12,18,.98)
        ) !important;
    box-shadow:
        0 10px 24px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.05);
}

/*
 * Genau ein Ring
 */
.fm-header-radio-v4__ring{
    position: absolute !important;
    inset: 0 !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    transform-origin: 50% 50%;
    border: 1.5px solid rgba(var(--fm-v4-magenta-rgb), .44);
    box-shadow:
        0 0 0 1px rgba(var(--fm-v4-magenta-rgb), .14),
        0 0 14px rgba(var(--fm-v4-magenta-rgb), .18),
        inset 0 0 10px rgba(var(--fm-v4-magenta-rgb), .10);
}

/*
 * Pseudo-Halo nur in Magenta
 */
.fm-header-radio-v4__ring::before,
.fm-header-radio-v4__ring::after{
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transform: scale(1);
}

.fm-header-radio-v4__ring::before{
    border: 1px solid rgba(var(--fm-v4-magenta-rgb), .34);
}

.fm-header-radio-v4__ring::after{
    border: 1px solid rgba(var(--fm-v4-magenta-rgb), .18);
}

/* ------------------------------------------------------------
   IDLE = deutlicher pulsieren
   ------------------------------------------------------------ */

.fm-header-radio-v4.is-idle .fm-header-radio-v4__play{
    box-shadow:
        0 0 0 1px rgba(var(--fm-v4-magenta-rgb), .12),
        0 10px 26px rgba(0,0,0,.36),
        0 0 18px rgba(var(--fm-v4-magenta-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.fm-header-radio-v4.is-idle .fm-header-radio-v4__ring{
    border-color: rgba(var(--fm-v4-magenta-rgb), .62);
    box-shadow:
        0 0 0 1px rgba(var(--fm-v4-magenta-rgb), .18),
        0 0 18px rgba(var(--fm-v4-magenta-rgb), .32),
        0 0 30px rgba(var(--fm-v4-magenta-rgb), .18),
        inset 0 0 12px rgba(var(--fm-v4-magenta-rgb), .14);
    animation: fmHeaderV4MagentaPulse 1.45s ease-in-out infinite;
}

.fm-header-radio-v4.is-idle .fm-header-radio-v4__ring::before{
    opacity: .9;
    animation: fmHeaderV4WaveOne 1.45s ease-out infinite;
}

.fm-header-radio-v4.is-idle .fm-header-radio-v4__ring::after{
    opacity: .75;
    animation: fmHeaderV4WaveTwo 1.45s ease-out infinite .28s;
}

.fm-header-radio-v4.is-idle .fm-header-radio-v4__icon{
    color: rgba(255,255,255,.98) !important;
    filter:
        drop-shadow(0 0 6px rgba(var(--fm-v4-magenta-rgb), .34))
        drop-shadow(0 0 14px rgba(var(--fm-v4-magenta-rgb), .18));
}

/* ------------------------------------------------------------
   PLAYING = sauberer Dreh-Effekt, kein Pulsieren
   ------------------------------------------------------------ */

.fm-header-radio-v4.is-playing .fm-header-radio-v4__play{
    box-shadow:
        0 10px 26px rgba(0,0,0,.38),
        0 0 18px rgba(var(--fm-v4-magenta-rgb), .14),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.fm-header-radio-v4.is-playing .fm-header-radio-v4__ring{
    border-color: rgba(var(--fm-v4-magenta-rgb), .70);
    box-shadow:
        0 0 0 1px rgba(var(--fm-v4-magenta-rgb), .12),
        0 0 16px rgba(var(--fm-v4-magenta-rgb), .24),
        inset 0 0 10px rgba(var(--fm-v4-magenta-rgb), .10);
    animation: fmHeaderV4Spin 1.8s linear infinite;
}

.fm-header-radio-v4.is-playing .fm-header-radio-v4__ring::before,
.fm-header-radio-v4.is-playing .fm-header-radio-v4__ring::after{
    opacity: 0 !important;
    animation: none !important;
}

.fm-header-radio-v4.is-playing .fm-header-radio-v4__icon{
    color: rgba(255,255,255,.98) !important;
    filter:
        drop-shadow(0 0 5px rgba(var(--fm-v4-magenta-rgb), .24));
}

/* ------------------------------------------------------------
   PAUSED / LOADING fallback
   ------------------------------------------------------------ */

.fm-header-radio-v4.is-paused .fm-header-radio-v4__ring,
.fm-header-radio-v4.is-loading .fm-header-radio-v4__ring{
    border-color: rgba(var(--fm-v4-magenta-rgb), .54);
    box-shadow:
        0 0 0 1px rgba(var(--fm-v4-magenta-rgb), .14),
        0 0 14px rgba(var(--fm-v4-magenta-rgb), .24);
}

/* ------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------ */

@keyframes fmHeaderV4MagentaPulse{
    0%{
        transform: scale(1);
        box-shadow:
            0 0 0 1px rgba(var(--fm-v4-magenta-rgb), .16),
            0 0 12px rgba(var(--fm-v4-magenta-rgb), .18),
            0 0 22px rgba(var(--fm-v4-magenta-rgb), .10),
            inset 0 0 8px rgba(var(--fm-v4-magenta-rgb), .08);
    }
    50%{
        transform: scale(1.10);
        box-shadow:
            0 0 0 1px rgba(var(--fm-v4-magenta-rgb), .26),
            0 0 24px rgba(var(--fm-v4-magenta-rgb), .40),
            0 0 42px rgba(var(--fm-v4-magenta-rgb), .24),
            inset 0 0 14px rgba(var(--fm-v4-magenta-rgb), .16);
    }
    100%{
        transform: scale(1);
        box-shadow:
            0 0 0 1px rgba(var(--fm-v4-magenta-rgb), .16),
            0 0 12px rgba(var(--fm-v4-magenta-rgb), .18),
            0 0 22px rgba(var(--fm-v4-magenta-rgb), .10),
            inset 0 0 8px rgba(var(--fm-v4-magenta-rgb), .08);
    }
}

@keyframes fmHeaderV4WaveOne{
    0%{
        opacity: .78;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(1.42);
    }
}

@keyframes fmHeaderV4WaveTwo{
    0%{
        opacity: .62;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(1.62);
    }
}

@keyframes fmHeaderV4Spin{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

/* 320FM_HEADER_PLAYER_V4_MAGENTA_PULSE_END */



/* ============================================================
   320 FM · HEADER PLAYER · LIVE CONTEXT
   SHOW > ARTIST/TRACK
   Headerhöhe bleibt unverändert.
   ============================================================ */


/*
 * Der bisherige interne Metablock wird nicht mehr
 * sichtbar benötigt. Seine Data-Hooks bleiben bestehen,
 * damit bestehendes Player-JS nicht beschädigt wird.
 */

.fm-header-radio-v4__meta{
    display:none !important;
}


/* ============================================================
   CONTEXT
   ============================================================ */

.fm-header-radio-v4__context{
    width:168px;
    min-width:0;

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

    gap:2px;

    overflow:hidden;

    margin:
        0 2px 0 0;
}


.fm-header-radio-v4__context-label,
.fm-header-radio-v4__context-title,
.fm-header-radio-v4__context-subtitle{
    display:block;

    width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}


/* ON AIR / NOW PLAYING */

.fm-header-radio-v4__context-label{
    color:#d52d94;

    font-size:9px;
    line-height:1;

    font-weight:950;

    letter-spacing:.075em;
}


/* Show oder Artist */

.fm-header-radio-v4__context-title{
    margin:1px 0 0;

    color:#f7f9fa;

    font-size:12px;
    line-height:1.12;

    font-weight:900;

    letter-spacing:-.01em;
}


/* Resident + Restzeit oder Track */

.fm-header-radio-v4__context-subtitle{
    color:#84949d;

    font-size:10px;
    line-height:1.15;

    font-weight:650;
}


/* ============================================================
   SHOW IST ON AIR
   ============================================================ */

.fm-header-radio-v4.has-show-context
.fm-header-radio-v4__context{
    position:relative;
}


.fm-header-radio-v4.has-show-context
.fm-header-radio-v4__context::before{
    content:"";

    width:4px;
    height:4px;

    position:absolute;

    left:-9px;
    top:5px;

    border-radius:50%;

    background:#d52d94;

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


.fm-header-radio-v4.has-show-context
.fm-header-radio-v4__context-title{
    color:#fff;
}


/* ============================================================
   RESPONSIVE · MENÜ NICHT ZERDRÜCKEN
   ============================================================ */

@media(max-width:1260px){

    .fm-header-radio-v4__context{
        width:142px;
    }

}


@media(max-width:1120px){

    .fm-header-radio-v4__context{
        width:118px;
    }


    .fm-header-radio-v4__context-subtitle{
        display:none;
    }

}


@media(max-width:1020px){

    .fm-header-radio-v4__context{
        display:none;
    }

}