/* ==========================================================
   320 FM · Brand System 2026
   Logo palette: magenta · cyan · deep navy
   ========================================================== */

:root{
    --fm-bg:#080d12;
    --fm-bg-soft:#0d151c;
    --fm-bg-elevated:#111b24;
    --fm-bg-card:#121c24;

    --fm-line:rgba(164,194,209,.14);
    --fm-line-strong:rgba(164,194,209,.22);

    --fm-text:#f4f8fa;
    --fm-text-soft:#c7d1d7;
    --fm-muted:#81919b;

    --fm-magenta:#ca2b91;
    --fm-magenta-bright:#e5449e;
    --fm-magenta-deep:#8a174f;

    --fm-cyan:#20a8df;
    --fm-cyan-bright:#46bce9;
    --fm-cyan-deep:#1379a8;

    --fm-accent:#e13b98;

    --fm-brand-gradient:
        linear-gradient(
            110deg,
            #c3268d 0%,
            #db579d 42%,
            #8a315d 67%,
            #20a8df 100%
        );

    --fm-soft-gradient:
        linear-gradient(
            135deg,
            rgba(202,43,145,.12),
            rgba(32,168,223,.08)
        );

    --fm-shadow:
        0 18px 48px rgba(0,0,0,.22);
}


/* ----------------------------------------------------------
   Grundflächen
   ---------------------------------------------------------- */

html{
    background:var(--fm-bg);
}

body{
    color:var(--fm-text);
    background:var(--fm-bg);
}


/* ----------------------------------------------------------
   Header / Navigation
   ---------------------------------------------------------- */

.site-header,
.public-header,
.main-header,
header.site-header{
    background:
        linear-gradient(
            180deg,
            rgba(7,13,18,.97),
            rgba(9,16,22,.94)
        ) !important;

    border-bottom-color:var(--fm-line) !important;

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

.main-nav a,
.site-nav a,
.public-nav a{
    color:var(--fm-text-soft) !important;
}

.main-nav a:hover,
.site-nav a:hover,
.public-nav a:hover{
    color:#fff !important;
}

.main-nav a.active,
.site-nav a.active,
.public-nav a.active{
    color:#fff !important;
}

.main-nav a.active::after,
.site-nav a.active::after,
.public-nav a.active::after{
    background:var(--fm-brand-gradient) !important;
}


/* ----------------------------------------------------------
   320-FM Brand im Header
   ---------------------------------------------------------- */

.fm-brand-lockup{
    display:inline-flex;
    align-items:center;
    gap:10px;

    min-width:0;

    color:#fff !important;
    text-decoration:none !important;
}

.fm-brand-mark{
    width:35px;
    height:auto;

    flex:0 0 auto;

    display:block;

    object-fit:contain;

    filter:
        drop-shadow(0 3px 10px rgba(32,168,223,.12))
        drop-shadow(0 3px 10px rgba(202,43,145,.12));
}

.fm-brand-word{
    display:inline-flex;
    align-items:center;

    color:#fff;

    font-weight:850;
    letter-spacing:.015em;
    white-space:nowrap;
}

@media(max-width:720px){
    .fm-brand-lockup{
        gap:7px;
    }

    .fm-brand-mark{
        width:29px;
    }
}


/* ----------------------------------------------------------
   Buttons / Interaktionen
   ---------------------------------------------------------- */

.btn-primary,
.primary-button,
.live-button,
.player-play,
button.primary,
a.primary{
    border-color:transparent !important;

    color:#fff !important;

    background:
        linear-gradient(
            110deg,
            var(--fm-magenta) 0%,
            var(--fm-magenta-bright) 54%,
            var(--fm-cyan) 135%
        ) !important;

    box-shadow:
        0 9px 24px rgba(202,43,145,.17) !important;
}

.btn-primary:hover,
.primary-button:hover,
.live-button:hover,
.player-play:hover,
button.primary:hover,
a.primary:hover{
    filter:brightness(1.06);
}


/* ----------------------------------------------------------
   Links
   ---------------------------------------------------------- */

main a:not(.button):not(.btn):not(.public-card){
    text-decoration-color:rgba(32,168,223,.34);
}

main a:not(.button):not(.btn):not(.public-card):hover{
    color:var(--fm-cyan-bright);
}


/* ----------------------------------------------------------
   Cards
   ---------------------------------------------------------- */

.public-card,
.content-card,
.show-card,
.news-card,
.resident-card,
.program-card{
    border-color:var(--fm-line) !important;
}

.public-card:hover,
.content-card:hover,
.show-card:hover,
.news-card:hover,
.resident-card:hover,
.program-card:hover{
    border-color:rgba(32,168,223,.28) !important;
}


/* ----------------------------------------------------------
   Eyebrows / kleine Labels
   ---------------------------------------------------------- */

.eyebrow,
.section-eyebrow,
.hero-eyebrow,
.live-pill,
.now-live-label{
    color:var(--fm-cyan-bright) !important;
}


/* ----------------------------------------------------------
   LIVE Akzent
   ---------------------------------------------------------- */

.live-pill b,
.live-indicator,
.is-live::before{
    background:var(--fm-magenta-bright) !important;
}


/* ----------------------------------------------------------
   Hero / hervorgehobene Flächen
   Keine harten Farbteilungen.
   ---------------------------------------------------------- */

.hero,
.home-hero,
.live-hero{
    position:relative;
}

.hero::after,
.home-hero::after,
.live-hero::after{
    pointer-events:none;

    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 78% 22%,
            rgba(32,168,223,.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 18% 78%,
            rgba(202,43,145,.09),
            transparent 31%
        );

    opacity:.86;
}


/* ----------------------------------------------------------
   Player
   ---------------------------------------------------------- */

.global-radio-player,
.footer-player,
.mini-player,
.live-player{
    border-color:var(--fm-line) !important;

    background:
        linear-gradient(
            100deg,
            rgba(10,16,22,.98),
            rgba(15,24,31,.98)
        ) !important;
}

.global-radio-player .progress,
.footer-player .progress,
.player-progress-value{
    background:
        linear-gradient(
            90deg,
            var(--fm-magenta),
            var(--fm-cyan)
        ) !important;
}


/* ----------------------------------------------------------
   Formulare
   ---------------------------------------------------------- */

input:focus,
select:focus,
textarea:focus{
    border-color:rgba(32,168,223,.48) !important;

    box-shadow:
        0 0 0 3px rgba(32,168,223,.08) !important;
}


/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */

.site-footer,
.public-footer,
footer.site-footer{
    border-top-color:var(--fm-line) !important;

    background:
        linear-gradient(
            180deg,
            #0b1218,
            #070b0f
        ) !important;
}


/* ----------------------------------------------------------
   Auswahl
   ---------------------------------------------------------- */

::selection{
    color:#fff;
    background:rgba(202,43,145,.72);
}

/* ==========================================================
   320 FM · Brand Refinement
   ========================================================== */

/* ----------------------------------------------------------
   Header / Logo-Abstand
   ---------------------------------------------------------- */

.fm-brand-lockup{
    margin-right:28px !important;
    padding-right:22px !important;
}

.fm-brand-mark{
    width:38px !important;
    height:auto !important;
}

.fm-brand-word{
    font-weight:850 !important;
    letter-spacing:.02em !important;
}

@media(max-width:1100px){
    .fm-brand-lockup{
        margin-right:18px !important;
        padding-right:14px !important;
    }
}

@media(max-width:760px){
    .fm-brand-lockup{
        margin-right:8px !important;
        padding-right:0 !important;
    }

    .fm-brand-mark{
        width:31px !important;
    }
}


/* ----------------------------------------------------------
   Grundfarbwelt
   ---------------------------------------------------------- */

body,
.public-body,
.frontend-body{
    color:#eef5f8 !important;
    background:#080d12 !important;
}

main,
.site-main,
.public-main{
    background:
        linear-gradient(
            180deg,
            #0a1016 0%,
            #0c141b 46%,
            #091017 100%
        ) !important;
}


/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */

.site-header,
.public-header,
.main-header{
    background:
        rgba(8,14,20,.96) !important;

    border-bottom:
        1px solid rgba(91,143,169,.16) !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,.16) !important;
}

.main-nav a,
.site-nav a,
.public-nav a{
    color:#aebdc5 !important;
}

.main-nav a:hover,
.site-nav a:hover,
.public-nav a:hover{
    color:#ffffff !important;
}

.main-nav a.active,
.site-nav a.active,
.public-nav a.active{
    color:#ffffff !important;
}

.main-nav a.active::after,
.site-nav a.active::after,
.public-nav a.active::after{
    background:
        linear-gradient(
            90deg,
            #df3999,
            #27aee2
        ) !important;
}


/* ----------------------------------------------------------
   Große Flächen / Sections
   ---------------------------------------------------------- */

section,
.public-section,
.content-section{
    border-color:rgba(113,160,183,.12) !important;
}

.section-dark,
.section-surface,
.public-section-surface{
    background:#0d151c !important;
}


/* ----------------------------------------------------------
   Karten
   ---------------------------------------------------------- */

.public-card,
.content-card,
.show-card,
.news-card,
.resident-card,
.program-card,
.podcast-card,
.feature-card,
.info-card{
    color:#edf4f7 !important;

    background:
        linear-gradient(
            145deg,
            rgba(17,28,37,.98),
            rgba(12,21,28,.98)
        ) !important;

    border:
        1px solid rgba(109,155,178,.14) !important;

    box-shadow:
        0 12px 32px rgba(0,0,0,.10) !important;
}

.public-card:hover,
.content-card:hover,
.show-card:hover,
.news-card:hover,
.resident-card:hover,
.program-card:hover,
.podcast-card:hover,
.feature-card:hover,
.info-card:hover{
    border-color:
        rgba(39,174,226,.30) !important;

    box-shadow:
        0 16px 38px rgba(0,0,0,.16) !important;
}


/* ----------------------------------------------------------
   Typografie
   ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6{
    color:#f5f9fb !important;
}

p,
.content-copy,
.public-copy{
    color:#aebbc3;
}

.text-muted,
.meta,
.card-meta,
.public-meta,
small{
    color:#7f919b !important;
}


/* ----------------------------------------------------------
   Cyan = Information / Navigation / Labels
   ---------------------------------------------------------- */

.eyebrow,
.section-eyebrow,
.hero-eyebrow,
.section-label,
.meta-label,
.kicker{
    color:#37b5e5 !important;
}


/* ----------------------------------------------------------
   Magenta = LIVE / Primäraktion
   ---------------------------------------------------------- */

.live-pill,
.now-live,
.live-label,
.badge-live{
    color:#ffffff !important;

    background:
        linear-gradient(
            110deg,
            #c72d91,
            #e34a9c
        ) !important;
}

.live-pill b,
.live-dot,
.live-indicator{
    background:#45c1ec !important;
}


/* ----------------------------------------------------------
   Primärbuttons
   ---------------------------------------------------------- */

.btn-primary,
.button-primary,
.primary-button,
.hero-primary,
.live-button,
.player-play{
    color:#fff !important;

    border:0 !important;

    background:
        linear-gradient(
            105deg,
            #c82c91 0%,
            #e3489d 58%,
            #d73d96 100%
        ) !important;

    box-shadow:
        0 10px 28px rgba(202,44,145,.20) !important;
}

.btn-primary:hover,
.button-primary:hover,
.primary-button:hover,
.hero-primary:hover,
.live-button:hover,
.player-play:hover{
    filter:brightness(1.07);

    box-shadow:
        0 13px 34px rgba(202,44,145,.26) !important;
}


/* ----------------------------------------------------------
   Sekundärbuttons
   ---------------------------------------------------------- */

.btn-secondary,
.button-secondary,
.secondary-button,
.hero-secondary{
    color:#dce8ed !important;

    background:
        rgba(15,26,34,.78) !important;

    border:
        1px solid rgba(66,177,220,.30) !important;
}

.btn-secondary:hover,
.button-secondary:hover,
.secondary-button:hover,
.hero-secondary:hover{
    color:#ffffff !important;

    border-color:
        rgba(66,177,220,.52) !important;

    background:
        rgba(19,37,48,.94) !important;
}


/* ----------------------------------------------------------
   Links
   ---------------------------------------------------------- */

main a:not(.btn):not(.button):not(.public-card){
    color:#37b5e5;
}

main a:not(.btn):not(.button):not(.public-card):hover{
    color:#e24b9e;
}


/* ----------------------------------------------------------
   Hero
   Nur weiche Lichtflächen, kein harter Verlauf.
   ---------------------------------------------------------- */

.hero,
.home-hero,
.live-hero,
.hero-section{
    background-color:#091018 !important;
}

.hero::before,
.home-hero::before,
.live-hero::before,
.hero-section::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(34,169,221,.14),
            transparent 33%
        ),
        radial-gradient(
            circle at 23% 77%,
            rgba(209,42,145,.12),
            transparent 30%
        );

    opacity:.92;
}


/* ----------------------------------------------------------
   Player
   ---------------------------------------------------------- */

.global-radio-player,
.footer-player,
.mini-player,
.live-player{
    background:
        linear-gradient(
            100deg,
            rgba(7,13,18,.99),
            rgba(14,24,31,.99)
        ) !important;

    border-top:
        1px solid rgba(72,151,187,.20) !important;
}

.player-progress,
.player-progress-track,
.global-radio-player .progress{
    background:
        rgba(255,255,255,.09) !important;
}

.player-progress-value,
.global-radio-player .progress > *,
.footer-player .progress > *{
    background:
        linear-gradient(
            90deg,
            #d33396,
            #31afe1
        ) !important;
}


/* ----------------------------------------------------------
   Formulare
   ---------------------------------------------------------- */

input,
select,
textarea{
    color:#eef5f8 !important;

    background:#101a22 !important;

    border-color:
        rgba(112,158,180,.18) !important;
}

input::placeholder,
textarea::placeholder{
    color:#71838d !important;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#29abe0 !important;

    box-shadow:
        0 0 0 3px rgba(41,171,224,.09) !important;
}


/* ----------------------------------------------------------
   Tabellen / Listen
   ---------------------------------------------------------- */

table,
.public-table{
    border-color:
        rgba(105,153,176,.14) !important;
}

thead,
.table-head{
    background:#101922 !important;
}

tbody tr,
.list-row{
    border-color:
        rgba(105,153,176,.10) !important;
}

tbody tr:hover,
.list-row:hover{
    background:
        rgba(31,119,158,.07) !important;
}


/* ----------------------------------------------------------
   Trenner
   ---------------------------------------------------------- */

hr,
.divider,
.section-divider{
    border-color:
        rgba(109,156,179,.14) !important;
}


/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */

.site-footer,
.public-footer,
footer{
    color:#83949d !important;

    background:
        linear-gradient(
            180deg,
            #0a1117,
            #070b0f
        ) !important;

    border-top:
        1px solid rgba(108,154,177,.12) !important;
}

.site-footer a,
.public-footer a{
    color:#9db0ba !important;
}

.site-footer a:hover,
.public-footer a:hover{
    color:#35b3e4 !important;
}


/* ----------------------------------------------------------
   Scrollbar dezent in der neuen Farbwelt
   ---------------------------------------------------------- */

*{
    scrollbar-color:
        rgba(53,174,221,.42)
        rgba(15,25,32,.55);
}

::-webkit-scrollbar{
    width:9px;
    height:9px;
}

::-webkit-scrollbar-track{
    background:
        rgba(15,25,32,.55);
}

::-webkit-scrollbar-thumb{
    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            rgba(204,49,145,.58),
            rgba(39,169,219,.58)
        );
}


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

@media(max-width:900px){

    .site-header,
    .public-header,
    .main-header{
        background:
            rgba(8,14,20,.985) !important;
    }
}


/* ==========================================================
   320 FM · FINAL BRAND COLORS
   gezielt auf aktuelle Frontend-Struktur
   ========================================================== */

:root{
    --fm-bg-0:#070c11;
    --fm-bg-1:#0b1218;
    --fm-bg-2:#101a22;
    --fm-bg-3:#14212a;

    --fm-line:rgba(122,167,188,.15);
    --fm-line-hover:rgba(55,181,229,.34);

    --fm-text:#f4f8fa;
    --fm-text-soft:#b8c7cf;
    --fm-text-muted:#7f919c;

    --fm-magenta:#d52d94;
    --fm-magenta-soft:#e44ca2;

    --fm-cyan:#2aafe1;
    --fm-cyan-soft:#52c0e9;
}


/* ----------------------------------------------------------
   BODY / GESAMTGRUND
   ---------------------------------------------------------- */

html,
body{
    background:#070c11 !important;
    color:var(--fm-text) !important;
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.site-header{
    background:
        linear-gradient(
            180deg,
            rgba(7,12,17,.98),
            rgba(9,16,22,.96)
        ) !important;

    border-bottom:
        1px solid rgba(73,143,176,.15) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.16) !important;
}

.site-header-inner{
    background:transparent !important;
}


/* Branding */

.site-header .brand{
    color:#fff !important;
}

.site-header .brand-320{
    color:#fff !important;
}

.site-header .brand-fm{
    color:#fff !important;
}

.site-header .fm-brand-lockup{
    margin-right:30px !important;
    padding-right:16px !important;
}

.site-header .fm-brand-mark{
    width:37px !important;
}


/* Navigation */

.site-header .main-nav a{
    color:#aebdc5 !important;
    transition:
        color .18s ease,
        opacity .18s ease !important;
}

.site-header .main-nav a:hover{
    color:#fff !important;
}

.site-header .main-nav a.active{
    color:#fff !important;
}

.site-header .main-nav a.active::after{
    background:
        linear-gradient(
            90deg,
            var(--fm-magenta),
            var(--fm-cyan)
        ) !important;
}


/* Account / Header Actions */

.site-header .header-actions a,
.site-header .header-actions button{
    color:#c9d5db !important;
}

.site-header .header-actions a:hover,
.site-header .header-actions button:hover{
    color:var(--fm-cyan-soft) !important;
}


/* ----------------------------------------------------------
   STARTSEITE GRUND
   ---------------------------------------------------------- */

.home-composable{
    background:
        linear-gradient(
            180deg,
            #080e13 0%,
            #0a1117 35%,
            #0b1319 100%
        ) !important;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.home-composable .hero{
    background:#080e14 !important;
}

.home-composable .hero::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(42,175,225,.11),
            transparent 35%
        ),
        radial-gradient(
            circle at 23% 76%,
            rgba(213,45,148,.10),
            transparent 31%
        );

    z-index:0;
}

.home-composable .hero-inner,
.home-composable .hero-backdrop{
    position:relative;
    z-index:1;
}


/* ----------------------------------------------------------
   SECTIONS
   ---------------------------------------------------------- */

.home-composable .section{
    background:transparent !important;
    border-color:rgba(111,158,180,.12) !important;
}

.home-composable .section-title-row h2{
    color:#f6fafc !important;
}

.home-composable .section-title-row a{
    color:var(--fm-cyan-soft) !important;
}

.home-composable .section-title-row a:hover{
    color:var(--fm-magenta-soft) !important;
}


/* ----------------------------------------------------------
   PROGRAMM KARTEN
   ---------------------------------------------------------- */

.home-composable .program-card{
    background:
        linear-gradient(
            145deg,
            rgba(17,29,38,.98),
            rgba(12,21,28,.98)
        ) !important;

    border:
        1px solid rgba(105,153,176,.14) !important;

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

.home-composable .program-card:hover{
    border-color:
        rgba(42,175,225,.30) !important;
}

.home-composable .program-card.is-live{
    border-color:
        rgba(213,45,148,.42) !important;

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

.home-composable .program-time{
    color:var(--fm-cyan-soft) !important;
}

.home-composable .mini-live{
    color:#fff !important;
    background:var(--fm-magenta) !important;
}


/* ----------------------------------------------------------
   NEWS
   ---------------------------------------------------------- */

.home-composable .news-lead,
.home-composable .news-list article{
    background:
        rgba(15,25,33,.94) !important;

    border-color:
        rgba(107,155,177,.13) !important;
}

.home-composable .news-lead-copy > span{
    color:var(--fm-cyan-soft) !important;
}

.home-composable .news-lead-copy h3,
.home-composable .news-list strong{
    color:#f2f7f9 !important;
}

.home-composable .news-lead-copy p,
.home-composable .news-list span{
    color:#97a9b3 !important;
}

.home-composable .news-lead-copy a{
    color:var(--fm-magenta-soft) !important;
}


/* ----------------------------------------------------------
   SHOWS / FEATURED
   ---------------------------------------------------------- */

.home-composable .featured-card{
    background:
        linear-gradient(
            145deg,
            #111c24,
            #0d161d
        ) !important;

    border:
        1px solid rgba(103,151,175,.14) !important;
}

.home-composable .featured-card:hover{
    border-color:
        rgba(42,175,225,.28) !important;
}

.home-composable .featured-card strong{
    color:#f5f9fb !important;
}

.home-composable .featured-card span{
    color:#8fa3ad !important;
}


/* ----------------------------------------------------------
   RESIDENTS
   ---------------------------------------------------------- */

.home-composable .residents-grid a{
    color:#eaf2f5 !important;
}

.home-composable .residents-grid a:hover{
    color:var(--fm-cyan-soft) !important;
}

.home-composable .resident-avatar{
    border:
        1px solid rgba(104,153,176,.18) !important;
}

.home-composable .residents-grid a:hover .resident-avatar{
    border-color:
        rgba(213,45,148,.38) !important;
}


/* ----------------------------------------------------------
   CONTENT-SEITEN
   ---------------------------------------------------------- */

.content-page-shell{
    background:
        linear-gradient(
            180deg,
            #091017 0%,
            #0b1319 100%
        ) !important;

    color:var(--fm-text) !important;
}


/* ----------------------------------------------------------
   CONTENT-PAGES TYPISCHE KARTEN
   ---------------------------------------------------------- */

.content-page-shell .content-card,
.content-page-shell .page-card,
.content-page-shell .show-card,
.content-page-shell .resident-card,
.content-page-shell .news-card,
.content-page-shell .program-card{
    background:
        linear-gradient(
            145deg,
            rgba(17,28,36,.98),
            rgba(12,21,27,.98)
        ) !important;

    border:
        1px solid rgba(107,155,177,.14) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.11) !important;
}

.content-page-shell .content-card:hover,
.content-page-shell .page-card:hover,
.content-page-shell .show-card:hover,
.content-page-shell .resident-card:hover,
.content-page-shell .news-card:hover,
.content-page-shell .program-card:hover{
    border-color:
        rgba(42,175,225,.30) !important;
}


/* ----------------------------------------------------------
   CONTENT TYPOGRAPHY
   ---------------------------------------------------------- */

.content-page-shell h1,
.content-page-shell h2,
.content-page-shell h3,
.content-page-shell h4{
    color:#f5f9fb !important;
}

.content-page-shell p{
    color:#a8b8c1 !important;
}

.content-page-shell small,
.content-page-shell .meta,
.content-page-shell .muted{
    color:#7d909a !important;
}


/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

.content-page-shell a:not(.btn):not(.button){
    color:var(--fm-cyan-soft);
}

.content-page-shell a:not(.btn):not(.button):hover{
    color:var(--fm-magenta-soft);
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.btn-primary,
.button-primary,
.primary-button,
.live-button,
.player-play{
    color:#fff !important;

    border:0 !important;

    background:
        linear-gradient(
            110deg,
            #c82b8c,
            #e2469d
        ) !important;

    box-shadow:
        0 10px 28px rgba(207,45,144,.20) !important;
}

.btn-primary:hover,
.button-primary:hover,
.primary-button:hover,
.live-button:hover,
.player-play:hover{
    filter:brightness(1.07) !important;
}


/* Sekundär */

.btn-secondary,
.button-secondary,
.secondary-button{
    color:#dce8ed !important;

    background:
        rgba(15,27,35,.85) !important;

    border:
        1px solid rgba(42,175,225,.28) !important;
}

.btn-secondary:hover,
.button-secondary:hover,
.secondary-button:hover{
    border-color:
        rgba(42,175,225,.50) !important;

    background:
        rgba(17,35,45,.96) !important;
}


/* ----------------------------------------------------------
   LIVE PLAYER
   ---------------------------------------------------------- */

.global-radio-player,
.live-radio-player{
    background:
        linear-gradient(
            100deg,
            rgba(7,13,18,.99),
            rgba(13,23,30,.99)
        ) !important;

    border-color:
        rgba(70,150,186,.18) !important;
}

.global-radio-player .player-progress-value,
.live-radio-player .player-progress-value{
    background:
        linear-gradient(
            90deg,
            var(--fm-magenta),
            var(--fm-cyan)
        ) !important;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.content-footer,
.site-footer{
    background:
        linear-gradient(
            180deg,
            #0a1117,
            #070b0f
        ) !important;

    border-top:
        1px solid rgba(107,154,177,.12) !important;

    color:#81939d !important;
}

.content-footer a,
.site-footer a{
    color:#9aadb7 !important;
}

.content-footer a:hover,
.site-footer a:hover{
    color:var(--fm-cyan-soft) !important;
}


/* ----------------------------------------------------------
   FORMULARE
   ---------------------------------------------------------- */

.content-page-shell input,
.content-page-shell select,
.content-page-shell textarea{
    color:#edf4f7 !important;

    background:#101a22 !important;

    border:
        1px solid rgba(110,158,180,.19) !important;
}

.content-page-shell input:focus,
.content-page-shell select:focus,
.content-page-shell textarea:focus{
    border-color:
        rgba(42,175,225,.55) !important;

    box-shadow:
        0 0 0 3px rgba(42,175,225,.08) !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:900px){

    .site-header .fm-brand-lockup{
        margin-right:14px !important;
        padding-right:6px !important;
    }

    .site-header .fm-brand-mark{
        width:31px !important;
    }
}