:root{
    --red:#e3061b;
    --orange:#f47a12;
    --yellow:#ffb51e;
    --blue:#07599b;
    --cyan:#0791a3;
    --pink:#bf1659;
    --text:#111317;
    --muted:#69717a;
    --line:#e6e9ed;
    --white:#fff;
    --container:1180px;
    --shadow:0 22px 55px rgba(12,25,42,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
    margin:0;min-width:320px;padding-bottom:88px;
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--text);background:#fff;
}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
a{color:inherit}
.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}

/* Header */
.site-header{
    position:sticky;top:0;z-index:100;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
}
.header-inner{height:82px;display:flex;align-items:center;gap:24px}
.brand img{width:245px}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:18px}
.back-link{
    text-decoration:none;font-size:13px;font-weight:800;color:#5b626b;
    display:flex;align-items:center;gap:8px;
}
.header-play{
    margin-left:auto;
    border:0;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    padding:11px 17px;
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:850;
    box-shadow:0 8px 20px rgba(7,89,155,.16);
}
.play-icon{
    width:auto;
    height:auto;
    border-radius:0;
    background:transparent;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:12px;
}
.play-icon i{margin-left:2px}

/* Hero */
.hero{
    position:relative;overflow:hidden;background:var(--blue);color:#fff;
}
.hero:after{
    content:"";position:absolute;inset:auto -120px -260px auto;width:520px;height:520px;
    border-radius:50%;background:var(--cyan);opacity:.55;
}
.hero-grid{
    min-height:820px;
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(320px,.72fr);
    gap:92px;
    align-items:center;
    padding:88px 0 112px;
    position:relative;
    z-index:2;
}
.hero-copy{padding-top:12px}
.eyebrow{
    display:inline-flex;align-items:center;gap:10px;color:#fff;
    font-size:12px;font-weight:900;letter-spacing:.14em;
}
.eyebrow:before{content:"";width:28px;height:3px;border-radius:3px;background:var(--yellow)}
.eyebrow.dark{color:#111317}
.eyebrow.dark:before{background:var(--pink)}
.eyebrow.light{color:#fff}
.hero h1{
    margin:20px 0 0;font-size:clamp(60px,6.7vw,96px);
    line-height:.93;letter-spacing:-.06em;
}
.hero h1 span{color:var(--yellow)}
.hero-intro{
    max-width:710px;margin:30px 0 0;color:rgba(255,255,255,.82);
    font-size:19px;line-height:1.7;
}
.hero-intro strong{color:#fff}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:38px}
.primary-button{
    border:0;border-radius:999px;background:#fff;color:var(--blue);
    padding:16px 24px;font-weight:900;display:flex;align-items:center;gap:10px;
}
.text-link{display:flex;gap:8px;align-items:center;text-decoration:none;font-weight:850;color:#fff}
.hero-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:38px;color:rgba(255,255,255,.75);font-size:13px}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta i{color:var(--yellow)}

.now-card{
    width:min(100%,455px);
    justify-self:end;
    align-self:center;
    background:#fff;
    color:var(--text);
    border-radius:28px;
    padding:20px;
    box-shadow:var(--shadow);
    margin-top:54px;
}
.now-card-top{display:flex;justify-content:space-between;align-items:center}
.live-badge{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:.13em;color:#626971}
.live-badge span{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(227,6,27,.1)}
.now-cover-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    margin:14px 0 16px;
    border-radius:20px;
    overflow:hidden;
    background:#f2f4f6;
}
.now-cover{width:100%;height:100%;object-fit:cover}
.cover-play{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:124px;
    height:124px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.68);
    background:rgba(255,255,255,.24);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:37px;
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
    box-shadow:0 16px 42px rgba(0,0,0,.18);
    transition:.2s ease;
}
.cover-play:after{
    content:"";position:absolute;inset:12px;border-radius:50%;
    border:1px solid rgba(255,255,255,.5);
}
.cover-play i{margin-left:8px;text-shadow:0 4px 14px rgba(0,0,0,.32)}
.cover-play:hover{transform:translate(-50%,-50%) scale(1.04);background:rgba(255,255,255,.36)}
.cover-play.is-playing i{margin-left:0}
.now-label{text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:#91969d;font-weight:900}
.now-card h2{
    margin:7px 0 4px;
    font-size:27px;
    line-height:1.08;
    letter-spacing:-.035em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.now-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Homepage latest tracks */
.section{padding:100px 0}
.latest-section{background:var(--yellow)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:36px}
.section-heading h2{margin:12px 0 0;font-size:clamp(38px,4.7vw,58px);letter-spacing:-.045em}
.section-heading p{margin:14px 0 0;color:rgba(17,19,23,.72);font-size:17px;line-height:1.6}
.playlist-link{
    border-radius:999px;background:#fff;color:var(--pink);text-decoration:none;
    padding:13px 18px;font-size:13px;font-weight:900;display:flex;align-items:center;gap:9px;
    box-shadow:0 9px 22px rgba(75,45,0,.09);white-space:nowrap;
}
.latest-grid{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;
}
.latest-card{
    background:#fff;border-radius:19px;overflow:hidden;box-shadow:0 10px 24px rgba(86,53,0,.09);
    min-width:0;transition:.2s ease;
}
.latest-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(86,53,0,.14)}
.latest-cover-wrap{position:relative;aspect-ratio:1/1;background:#f1f3f4;overflow:hidden}
.latest-cover{width:100%;height:100%;object-fit:cover}
.latest-live{
    position:absolute;left:12px;top:12px;background:var(--red);color:#fff;
    padding:5px 8px;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.1em;
}
.latest-card-body{padding:15px}
.latest-card time{font-size:11px;color:#93989f}
.latest-card h3{
    margin:7px 0 4px;font-size:15px;line-height:1.28;letter-spacing:-.015em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.latest-card p{margin:0;color:#68707a;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.latest-skeleton{aspect-ratio:.78/1;border-radius:19px;background:rgba(255,255,255,.48)}
.latest-error{grid-column:1/-1;text-align:center;padding:30px;color:#4f5358}

/* CTA */
.cta-section{padding:80px 0;background:var(--pink)}
.cta-card{
    position:relative;overflow:hidden;border-radius:30px;background:rgba(255,255,255,.12);color:#fff;
    padding:54px;display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.cta-card:after{
    content:"";position:absolute;width:300px;height:300px;border-radius:50%;
    right:-90px;bottom:-180px;background:var(--orange);opacity:.65;
}
.cta-copy,.cta-play{position:relative;z-index:2}
.cta-card h2{margin:12px 0 8px;font-size:clamp(38px,4.2vw,56px);line-height:1;letter-spacing:-.05em}
.cta-card p{margin:0;color:rgba(255,255,255,.77)}
.cta-play{
    border:0;border-radius:999px;background:#fff;color:var(--pink);
    padding:10px 22px 10px 10px;display:flex;align-items:center;gap:11px;font-weight:900;
}
.cta-play span{width:39px;height:39px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center}

/* Playlist page */
.playlist-hero{background:var(--orange);color:#fff;padding:90px 0 82px}
.playlist-hero h1{margin:18px 0 0;font-size:clamp(52px,6vw,84px);line-height:.95;letter-spacing:-.055em}
.playlist-hero h1 span{color:#111317}
.playlist-hero p{max-width:700px;margin:22px 0 0;color:rgba(255,255,255,.86);font-size:18px;line-height:1.65}
.playlist-archive{padding:70px 0 100px;background:#f4f6f8}
.playlist-tools{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}
.day-tabs{display:flex;gap:8px;flex-wrap:wrap}
.day-tab{
    border:1px solid #dfe3e7;background:#fff;color:#59616a;border-radius:999px;
    padding:10px 14px;font-size:12px;font-weight:850;
}
.day-tab.active{background:var(--orange);border-color:var(--orange);color:#fff}
.playlist-search{
    min-width:300px;height:44px;display:flex;align-items:center;gap:10px;
    background:#fff;border:1px solid #dfe3e7;border-radius:999px;padding:0 15px;color:#8a9097;
}
.playlist-search input{width:100%;border:0;outline:0;background:transparent;font-size:13px}
.archive-status{display:flex;justify-content:flex-end;align-items:center;gap:9px;color:#8a9097;font-size:12px;margin-bottom:16px}

.playlist-card-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
}
.playlist-card{
    min-width:0;
}
.playlist-card-skeleton{
    aspect-ratio:.78/1;
    border-radius:19px;
    background:#fff;
    box-shadow:0 7px 18px rgba(20,30,45,.04);
}

.archive-status.loading i{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.live-pill{
    display:inline-flex;margin-right:8px;padding:4px 7px;border-radius:999px;background:var(--red);
    color:#fff;font-size:8px;font-weight:900;letter-spacing:.08em;vertical-align:2px;
}
.archive-empty{text-align:center;padding:34px;color:#737a83;background:#fff;border-radius:16px}
.load-more-wrap{display:flex;justify-content:center;margin-top:28px}
.load-more{
    border:1px solid #d8dde2;background:#fff;color:#4f5660;border-radius:999px;
    padding:13px 20px;display:flex;align-items:center;gap:9px;font-weight:850;
}
.load-more[hidden]{display:none}

/* Footer */
.site-footer{background:#fff;border-top:1px solid var(--line);padding:48px 0 30px;color:var(--text)}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:40px}
.footer-brand img{width:260px}
.footer-brand p{margin:12px 0 0;color:#858b93;font-size:13px}
.footer-links{display:flex;gap:25px;flex-wrap:wrap}
.footer-links a{text-decoration:none;color:#5c636c;font-size:13px;font-weight:750}
.footer-links a:hover{color:var(--blue)}
.footer-links i{font-size:10px}
.footer-bottom{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#989da4;font-size:12px}

/* Persistent player */
.playerbar{
    position:fixed;left:0;right:0;bottom:0;z-index:200;
    background:rgba(255,255,255,.98);backdrop-filter:blur(18px);
    border-top:1px solid var(--line);box-shadow:0 -9px 26px rgba(20,30,45,.05);
}
.playerbar-inner{
    height:88px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;gap:25px;
}
.player-track{display:flex;align-items:center;gap:14px;min-width:0}
.player-cover{width:50px;height:50px;border-radius:12px;object-fit:cover;background:#f2f4f6}
.player-copy{min-width:0}
.player-copy span{display:block;color:#92979e;text-transform:uppercase;font-size:9px;font-weight:900;letter-spacing:.12em}
.player-copy strong,.player-copy small{display:block;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-copy strong{font-size:14px;margin-top:3px}
.player-copy small{font-size:11px;color:#707780;margin-top:2px}
.player-controls{display:flex;justify-content:center}
.player-main{width:52px;height:52px;border:0;border-radius:50%;background:var(--blue);color:#fff}
.volume-wrap{justify-self:end;display:flex;align-items:center;gap:10px;color:#767d85}
.volume-wrap input{width:120px;accent-color:var(--pink)}

@media(max-width:1050px){
    .hero-grid{grid-template-columns:1fr;gap:46px;min-height:auto;padding:74px 0 88px}
    .now-card{max-width:570px;width:100%;margin-top:0}
    .latest-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
    body{padding-bottom:72px}
    .container{width:min(var(--container),calc(100% - 28px))}
    .header-inner{height:66px}
    .brand img{width:168px}
    .header-play{width:42px;height:42px;padding:0;display:grid;place-items:center}
    .header-play .play-icon{width:42px;height:42px;background:transparent;color:#111317}
    .header-play>span:last-child{display:none}
    .back-link span{display:none}

    .hero-grid{padding:48px 0 58px;gap:34px}
    .hero h1{font-size:clamp(50px,15vw,72px)}
    .hero-intro{font-size:17px}
    .hero-meta{gap:12px;flex-direction:column}
    .now-card{padding:18px;border-radius:24px}
    .now-cover-wrap{border-radius:19px}
    .cover-play{width:118px;height:118px;font-size:35px}

    .section{padding:72px 0}
    .section-heading{align-items:flex-start;flex-direction:column;margin-bottom:26px}
    .latest-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .latest-card-body{padding:12px}
    .latest-card h3{font-size:14px}
    .latest-card p{font-size:11px}

    .cta-section{padding:58px 0}
    .cta-card{padding:34px 26px;flex-direction:column;align-items:flex-start}

    .playlist-hero{padding:65px 0 58px}
    .playlist-tools{align-items:stretch;flex-direction:column}
    .day-tabs{display:grid;grid-template-columns:repeat(2,1fr)}
    .day-tab{text-align:center}
    .playlist-search{min-width:0;width:100%}
    .archive-row{grid-template-columns:50px 58px minmax(0,1fr);gap:10px;padding:10px}
    .archive-row img{width:56px;height:56px;border-radius:10px}
    .archive-track h3{font-size:13px}
    .archive-track p{font-size:11px}
    .archive-row time{font-size:10px}

    .footer-grid,.footer-bottom{flex-direction:column;align-items:flex-start}

    .playerbar-inner{height:72px;grid-template-columns:minmax(0,1fr) 46px;gap:10px}
    .volume-wrap{display:none}
    .player-main{width:44px;height:44px}
    .player-cover{width:42px;height:42px;border-radius:10px}
    .player-copy strong{font-size:13px}
    .player-copy small{font-size:10px}
}
@media(max-width:420px){
    .cover-play{width:108px;height:108px;font-size:32px}
    .latest-grid{grid-template-columns:1fr 1fr}
    .day-tabs{grid-template-columns:1fr 1fr}
}

/* V7 Mobile refinements */
@media(max-width:1050px){
    .now-card{
        justify-self:start;
        margin-top:0;
        max-width:500px;
    }
    .playlist-card-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:760px){
    .hero-grid{
        padding:44px 0 54px;
        gap:28px;
    }

    .hero-copy{
        padding-top:0;
    }

    .now-card{
        width:100%;
        max-width:none;
        padding:14px;
        border-radius:22px;
    }

    .now-card-top{
        padding:2px 2px 0;
    }

    .now-cover-wrap{
        margin:12px 0 14px;
        border-radius:18px;
    }

    .cover-play{
        width:96px;
        height:96px;
        font-size:29px;
        background:rgba(255,255,255,.22);
        border-color:rgba(255,255,255,.62);
    }

    .cover-play:after{
        inset:9px;
    }

    .now-card h2{
        font-size:23px;
    }

    .latest-grid,
    .playlist-card-grid{
        display:flex;
        gap:12px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        padding:0 2px 10px;
        margin-inline:-2px;
        scrollbar-width:none;
    }

    .latest-grid::-webkit-scrollbar,
    .playlist-card-grid::-webkit-scrollbar{
        display:none;
    }

    .latest-card,
    .playlist-card{
        flex:0 0 72%;
        scroll-snap-align:start;
        border-radius:18px;
    }

    .latest-card-body{
        padding:13px;
    }

    .latest-card h3{
        font-size:15px;
    }

    .latest-card p{
        font-size:12px;
    }

    .playlist-archive{
        padding-top:42px;
    }

    .archive-tools{
        position:static;
    }

    .day-tabs{
        display:flex;
        overflow-x:auto;
        flex-wrap:nowrap;
        gap:8px;
        padding-bottom:4px;
        scrollbar-width:none;
    }

    .day-tabs::-webkit-scrollbar{
        display:none;
    }

    .day-tab{
        flex:0 0 auto;
        min-width:max-content;
        padding:10px 14px;
    }

    .playlist-search{
        width:100%;
    }

    .archive-status{
        justify-content:flex-start;
        margin-bottom:14px;
    }
}

@media(max-width:430px){
    .latest-card,
    .playlist-card{
        flex-basis:82%;
    }

    .cover-play{
        width:90px;
        height:90px;
        font-size:27px;
    }

    .playlist-link{
        width:100%;
        justify-content:center;
    }
}

/* V8: mobile track history without horizontal swipe */
@media(max-width:760px){
    .header-play{
        width:42px;
        height:42px;
        padding:0;
        border-radius:50%;
        display:grid;
        place-items:center;
        background:var(--blue);
        color:#fff;
        box-shadow:none;
    }
    .header-play .play-icon{
        width:auto;
        height:auto;
        background:transparent;
        color:#fff;
        font-size:13px;
    }
    .header-play .play-icon i{margin-left:2px}
    .header-play>span:last-child{display:none}

    .latest-grid,
    .playlist-card-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        overflow:visible;
        padding:0;
        margin:0;
        scroll-snap-type:none;
    }

    .latest-card,
    .playlist-card{
        display:grid;
        grid-template-columns:88px minmax(0,1fr);
        align-items:center;
        min-width:0;
        width:100%;
        flex:none;
        scroll-snap-align:none;
        border-radius:16px;
        overflow:hidden;
    }

    .latest-cover-wrap{
        width:88px;
        height:88px;
        aspect-ratio:auto;
        border-radius:0;
    }

    .latest-card-body{
        padding:12px 14px;
        min-width:0;
    }

    .latest-card time{
        display:block;
        margin-bottom:5px;
        font-size:10px;
    }

    .latest-card h3{
        margin:0 0 4px;
        font-size:15px;
        line-height:1.25;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .latest-card p{
        margin:0;
        font-size:12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .latest-live{
        left:7px;
        top:7px;
        padding:4px 6px;
        font-size:7px;
    }

    .playlist-card-skeleton{
        width:100%;
        height:88px;
        aspect-ratio:auto;
        border-radius:16px;
    }
}

@media(max-width:430px){
    .latest-card,
    .playlist-card{
        grid-template-columns:78px minmax(0,1fr);
    }

    .latest-cover-wrap{
        width:78px;
        height:78px;
    }

    .playlist-card-skeleton{
        height:78px;
    }
}


/* V9 – program-accompanying content */
.hero-meta span{
    display:grid;
    grid-template-columns:18px auto;
    grid-template-rows:auto auto;
    column-gap:8px;
    align-items:center;
}
.hero-meta span i{
    grid-row:1 / 3;
    font-size:15px;
}
.hero-meta b{
    font-size:12px;
    line-height:1.1;
    color:#fff;
}
.hero-meta small{
    font-size:10px;
    line-height:1.2;
    color:rgba(255,255,255,.64);
}

/* Why Radio Mosaik */
.why-section{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:var(--cyan);
    color:#fff;
}
.why-section:after{
    content:"";
    position:absolute;
    width:440px;
    height:440px;
    right:-210px;
    top:-220px;
    border-radius:50%;
    background:var(--blue);
    opacity:.28;
}
.why-heading{
    position:relative;
    z-index:2;
    max-width:850px;
    margin-bottom:46px;
}
.why-heading h2{
    margin:14px 0 18px;
    font-size:clamp(42px,5vw,66px);
    line-height:.98;
    letter-spacing:-.05em;
}
.why-heading p{
    max-width:780px;
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:17px;
    line-height:1.7;
}
.why-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.why-card{
    position:relative;
    min-height:275px;
    padding:28px;
    border-radius:24px;
    overflow:hidden;
    color:#fff;
}
.why-card>i{
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.17);
    font-size:18px;
}
.why-card>span{
    position:absolute;
    right:24px;
    top:22px;
    color:rgba(255,255,255,.30);
    font-size:44px;
    font-weight:950;
    letter-spacing:-.05em;
}
.why-card h3{
    margin:64px 0 10px;
    font-size:27px;
    letter-spacing:-.035em;
}
.why-card p{
    margin:0;
    max-width:330px;
    color:rgba(255,255,255,.82);
    font-size:14px;
    line-height:1.6;
}
.why-red{background:var(--red)}
.why-orange{background:var(--orange)}
.why-cyan{background:var(--blue)}

/* Mobile-specific presentation */
@media(max-width:760px){
    .hero-meta{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        width:100%;
        margin-top:28px;
    }
    .hero-meta span{
        min-width:0;
        min-height:86px;
        padding:12px 8px;
        border-radius:14px;
        background:rgba(255,255,255,.10);
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5px;
        text-align:center;
    }
    .hero-meta span i{
        font-size:17px;
        color:var(--yellow);
    }
    .hero-meta b{
        font-size:11px;
    }
    .hero-meta small{
        display:none;
    }

    .why-section{
        padding:68px 0;
    }
    .why-heading{
        margin-bottom:28px;
    }
    .why-heading h2{
        font-size:clamp(38px,11vw,52px);
    }
    .why-heading p{
        font-size:15px;
        line-height:1.65;
    }
    .why-grid{
        grid-template-columns:1fr;
        gap:10px;
    }
    .why-card{
        min-height:0;
        padding:20px;
        border-radius:18px;
        display:grid;
        grid-template-columns:44px minmax(0,1fr);
        column-gap:14px;
        align-items:center;
    }
    .why-card>i{
        width:44px;
        height:44px;
        grid-row:1 / 3;
    }
    .why-card>span{
        display:none;
    }
    .why-card h3{
        margin:0 0 3px;
        font-size:19px;
    }
    .why-card p{
        margin:0;
        font-size:12px;
        line-height:1.45;
    }

    .site-footer{
        padding:32px 0 22px;
    }
    .footer-grid{
        gap:22px;
    }
    .footer-brand img{
        width:190px;
    }
    .footer-brand p{
        margin-top:8px;
        font-size:12px;
    }
    .footer-links{
        gap:10px 18px;
    }
    .footer-links a{
        font-size:12px;
    }
    .footer-bottom{
        width:100%;
        margin-top:22px;
        padding-top:15px;
        display:block;
        font-size:11px;
    }
    .footer-bottom span:last-child{
        display:none;
    }
}


/* V10 – Desktop Hero-Merkmale als kompakte Infoleiste */
@media(min-width:761px){
    .hero-meta{
        display:inline-flex;
        align-items:center;
        gap:0;
        margin-top:38px;
        padding:10px 14px;
        border:1px solid rgba(255,255,255,.14);
        border-radius:16px;
        background:rgba(255,255,255,.08);
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
    }

    .hero-meta span{
        position:relative;
        display:grid;
        grid-template-columns:18px auto;
        grid-template-rows:auto auto;
        column-gap:8px;
        padding:0 18px;
        min-width:0;
    }

    .hero-meta span:first-child{
        padding-left:6px;
    }

    .hero-meta span:last-child{
        padding-right:6px;
    }

    .hero-meta span:not(:last-child):after{
        content:"";
        position:absolute;
        right:0;
        top:2px;
        bottom:2px;
        width:1px;
        background:rgba(255,255,255,.16);
    }

    .hero-meta span i{
        grid-row:1 / 3;
        align-self:center;
        color:var(--yellow);
        font-size:14px;
    }

    .hero-meta b{
        color:#fff;
        font-size:11px;
        line-height:1.15;
    }

    .hero-meta small{
        display:block;
        margin-top:2px;
        color:rgba(255,255,255,.58);
        font-size:9px;
        line-height:1.15;
        white-space:nowrap;
    }
}


/* V10 – Footer mobil wirklich zentriert */
@media(max-width:760px){
    .site-footer{
        text-align:center;
    }

    .footer-grid{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:20px;
    }

    .footer-brand{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    .footer-brand img{
        width:190px;
        margin-inline:auto;
    }

    .footer-brand p{
        width:100%;
        margin:8px 0 0;
        text-align:center;
    }

    .footer-links{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        gap:10px 18px;
        flex-wrap:wrap;
        text-align:center;
    }

    .footer-links a{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:4px;
    }

    .footer-bottom{
        width:100%;
        margin-top:22px;
        padding-top:15px;
        text-align:center;
        display:block;
    }

    .footer-bottom span{
        display:block;
        width:100%;
        text-align:center;
    }

    .footer-bottom span:last-child{
        display:none;
    }
}


/* V12 – mobile width hardening */
*, *::before, *::after{
    box-sizing:border-box;
}

html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

img, svg, video, canvas{
    max-width:100%;
    height:auto;
}

.container,
.header-inner,
.hero-grid,
.playerbar-inner,
.footer-grid,
.footer-bottom{
    min-width:0;
}

.hero-copy,
.now-card,
.latest-card,
.playlist-card,
.why-card,
.cta-card,
.player-track,
.player-copy{
    min-width:0;
}

h1, h2, h3, p, a, span{
    overflow-wrap:break-word;
}

/* Very narrow Android devices incl. Galaxy S25-class viewports */
@media(max-width:480px){
    .container{
        width:calc(100% - 32px);
        max-width:100%;
    }

    .header-inner{
        padding-inline:0;
    }

    .brand{
        min-width:0;
        max-width:calc(100% - 58px);
    }

    .brand img{
        width:min(168px,100%);
        height:auto;
    }

    .hero-grid{
        width:100%;
    }

    .hero h1{
        font-size:clamp(44px,13.5vw,58px);
        line-height:.94;
        letter-spacing:-.055em;
        max-width:100%;
    }

    .hero-intro{
        max-width:100%;
        font-size:15px;
        line-height:1.55;
    }

    .hero-actions{
        width:100%;
    }

    .hero-actions .primary-button{
        max-width:100%;
        padding-inline:18px;
    }

    .now-card{
        max-width:100%;
        overflow:hidden;
    }

    .now-cover-wrap{
        width:100%;
        max-width:100%;
    }

    .now-cover{
        width:100%;
        max-width:100%;
        object-fit:cover;
    }

    .section-heading h2,
    .why-heading h2,
    .cta-card h2,
    .playlist-hero h1{
        max-width:100%;
        font-size:clamp(36px,11vw,48px);
        line-height:.98;
    }

    .latest-card,
    .playlist-card{
        grid-template-columns:72px minmax(0,1fr);
        max-width:100%;
    }

    .latest-cover-wrap{
        width:72px;
        height:72px;
    }

    .latest-card-body{
        padding:10px 12px;
        overflow:hidden;
    }

    .latest-card h3,
    .latest-card p{
        max-width:100%;
    }

    .why-card{
        max-width:100%;
    }

    .cta-card{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .footer-brand img{
        width:min(180px,80vw);
    }

    .footer-links{
        padding-inline:4px;
    }

    .playerbar-inner{
        width:calc(100% - 24px);
        max-width:100%;
        gap:8px;
    }

    .player-track{
        overflow:hidden;
    }

    .player-copy strong,
    .player-copy small{
        max-width:100%;
    }
}

@media(max-width:360px){
    .container{
        width:calc(100% - 24px);
    }

    .brand img{
        width:150px;
    }

    .header-play{
        width:40px;
        height:40px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero-meta{
        gap:6px;
    }

    .hero-meta span{
        min-height:78px;
        padding:10px 5px;
    }

    .hero-meta b{
        font-size:10px;
    }

    .latest-card,
    .playlist-card{
        grid-template-columns:66px minmax(0,1fr);
    }

    .latest-cover-wrap{
        width:66px;
        height:66px;
    }
}


/* V14 – more breathing room on mobile + truly circular header play button */
@media (max-width: 760px) {
  .container {
    width: calc(100% - 40px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .header-inner {
    width: calc(100% - 40px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding: 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
  }

  .brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 72px) !important;
  }

  .brand img {
    display: block !important;
    width: min(190px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .header-play {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: var(--blue) !important;
    color: #fff !important;
    line-height: 1 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .header-play .play-icon {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: block !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .header-play .play-icon i {
    display: block !important;
    margin-left: 2px !important;
    line-height: 1 !important;
  }

  .header-play > span:last-child {
    display: none !important;
  }

  .hero-grid,
  .hero-copy,
  .hero-intro,
  .hero-actions,
  .hero-meta,
  .now-card,
  .section-heading,
  .why-heading,
  .cta-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  .latest-section,
  .why-section,
  .cta-section,
  .site-footer {
    overflow-x: hidden !important;
  }

  .footer-grid,
  .footer-bottom {
    width: calc(100% - 40px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .playerbar-inner {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 430px) {
  .container,
  .header-inner,
  .footer-grid,
  .footer-bottom {
    width: calc(100% - 32px) !important;
  }

  .brand img {
    width: min(176px, 100%) !important;
  }

  .header-play {
    flex-basis: 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}

/* Build: V15 cache-busting active */


/* V16 – Social Media */
.social-section{
    padding:100px 0;
    background:#fff;
}
.social-head{
    max-width:780px;
    margin-bottom:38px;
}
.social-head h2{
    margin:12px 0 16px;
    font-size:clamp(44px,5.3vw,72px);
    line-height:.96;
    letter-spacing:-.055em;
}
.social-head p{
    margin:0;
    max-width:680px;
    color:#67717d;
    font-size:16px;
    line-height:1.7;
}
.social-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.social-card{
    min-height:190px;
    padding:26px 28px;
    border-radius:26px;
    display:grid;
    grid-template-columns:64px 1fr auto;
    align-items:center;
    gap:20px;
    color:#fff;
    text-decoration:none;
    overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease;
}
.social-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(0,0,0,.14);
}
.social-facebook{background:#1877f2}
.social-instagram{
    background:linear-gradient(135deg,#833ab4 0%,#c13584 38%,#e1306c 62%,#f77737 100%);
}
.social-icon{
    width:64px;
    height:64px;
    border-radius:20px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.16);
    font-size:29px;
}
.social-card span{
    display:block;
    margin-bottom:5px;
    color:rgba(255,255,255,.72);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
}
.social-card strong{
    display:block;
    font-size:25px;
}
.social-card > .fa-arrow-up-right-from-square{
    font-size:20px;
    opacity:.8;
}

/* V16 – Empfang */
.reception-hero{
    padding:92px 0 104px;
    background:var(--blue);
    color:#fff;
}
.reception-hero-inner{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:50px;
}
.reception-hero h1{
    margin:14px 0 20px;
    font-size:clamp(58px,7vw,96px);
    line-height:.92;
    letter-spacing:-.06em;
}
.reception-hero h1 span{color:var(--yellow)}
.reception-hero p{
    max-width:690px;
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:17px;
    line-height:1.7;
}
.reception-live{
    flex:0 0 auto;
    margin-bottom:4px;
}
.reception-section{
    padding:92px 0 105px;
    background:#f5f7fa;
}
.reception-heading{
    margin-bottom:36px;
}
.reception-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.reception-card{
    min-height:310px;
    padding:30px;
    border-radius:26px;
    background:#fff;
    color:#121820;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:34px;
    box-shadow:0 10px 34px rgba(15,35,58,.06);
    transition:transform .2s ease, box-shadow .2s ease;
}
a.reception-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 44px rgba(15,35,58,.10);
}
.reception-homebase{
    background:var(--yellow);
}
.reception-stream{
    background:var(--blue);
    color:#fff;
}
.reception-coming{
    background:#e9edf2;
}
.reception-card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
}
.portal-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:rgba(7,89,155,.10);
    color:var(--blue);
    font-size:21px;
}
.reception-homebase .portal-icon{
    background:rgba(255,255,255,.48);
}
.reception-stream .portal-icon{
    background:rgba(255,255,255,.14);
    color:#fff;
}
.portal-badge{
    padding:8px 10px;
    border-radius:999px;
    background:#111;
    color:#fff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}
.reception-card h3{
    margin:0 0 10px;
    font-size:29px;
    letter-spacing:-.035em;
}
.reception-card p{
    margin:0;
    max-width:520px;
    color:#68717d;
    line-height:1.65;
}
.reception-stream p{color:rgba(255,255,255,.72)}
.portal-link{
    font-size:13px;
    font-weight:850;
}
.portal-link.muted{color:#8b949d}
.social-on-subpage{background:#fff}

/* Footer can accommodate more links */
.footer-links{
    flex-wrap:wrap;
}

/* V16 mobile */
@media(max-width:760px){
    .social-section{
        padding:68px 0;
    }
    .social-head{
        margin-bottom:24px;
    }
    .social-head h2{
        font-size:clamp(38px,11vw,50px);
    }
    .social-grid{
        grid-template-columns:1fr;
        gap:10px;
    }
    .social-card{
        min-height:116px;
        padding:18px;
        border-radius:20px;
        grid-template-columns:50px 1fr auto;
        gap:14px;
    }
    .social-icon{
        width:50px;
        height:50px;
        border-radius:16px;
        font-size:23px;
    }
    .social-card strong{
        font-size:19px;
    }

    .reception-hero{
        padding:68px 0 76px;
    }
    .reception-hero-inner{
        display:block;
    }
    .reception-hero h1{
        font-size:clamp(46px,13vw,64px);
    }
    .reception-hero p{
        font-size:15px;
    }
    .reception-live{
        margin-top:28px;
    }
    .reception-section{
        padding:66px 0 76px;
    }
    .reception-grid{
        grid-template-columns:1fr;
        gap:10px;
    }
    .reception-card{
        min-height:0;
        padding:21px;
        border-radius:20px;
        gap:28px;
    }
    .reception-card h3{
        font-size:23px;
    }
    .reception-card p{
        font-size:13px;
    }

    .reception-page .header-actions{
        display:flex;
        align-items:center;
        gap:8px;
    }
    .reception-page .back-link{
        display:none;
    }
}


/* V17 – RadioGruppe network badge */
.network-bar{
    background:#fff;
    border-bottom:1px solid #edf0f3;
}
.network-bar-inner{
    width:min(1180px,calc(100% - 40px));
    min-height:30px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.network-brand{
    display:flex;
    align-items:center;
}
.network-brand img{
    display:block;
    width:auto;
    height:16px;
    max-width:150px;
}
.network-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--pink);
    text-decoration:none;
    font-size:10px;
    font-weight:850;
}
.network-more i{font-size:9px}

/* V17 – Header navigation */
.main-nav{
    position:relative;
    z-index:50;
    background:#fff;
    border-top:1px solid #edf0f3;
    border-bottom:1px solid #e6e9ed;
}
.main-nav-inner{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.nav-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
}
.nav-links a{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:52px;
    padding:0 18px;
    color:#1e2732;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
}
.nav-links a:after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:0;
    height:3px;
    border-radius:3px 3px 0 0;
    background:transparent;
}
.nav-links a:hover,
.nav-links a.active{
    color:var(--blue);
}
.nav-links a.active:after{
    background:var(--yellow);
}
.nav-links a i{
    font-size:9px;
    opacity:.65;
}
.nav-toggle{
    display:none;
    border:0;
    background:transparent;
    color:#17212c;
    font-weight:850;
}

/* V17 – Empfang inspired by provided Radio Rheinland layout */
.reception-main{
    background:#f6f3f5;
    padding-bottom:100px;
}
.reception-intro-wrap{
    padding:38px 0 18px;
}
.reception-feature{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
    overflow:hidden;
    border:1px solid rgba(28,37,48,.08);
    border-radius:28px;
    background:#fff;
    box-shadow:0 16px 44px rgba(30,36,46,.08);
}
.reception-feature-media{
    position:relative;
    min-height:390px;
}
.reception-feature-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.reception-feature-media:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(7,89,155,.04),rgba(7,89,155,.26));
}
.reception-image-badge{
    position:absolute;
    z-index:2;
    left:18px;
    bottom:18px;
    padding:7px 11px;
    border-radius:999px;
    background:#fff;
    color:var(--blue);
    font-size:10px;
    font-weight:850;
}
.reception-feature-copy{
    padding:48px 44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.reception-feature-copy h1{
    margin:12px 0 18px;
    font-size:clamp(42px,4.6vw,66px);
    line-height:.96;
    letter-spacing:-.05em;
}
.reception-feature-copy p{
    margin:0 0 14px;
    color:#68717d;
    font-size:15px;
    line-height:1.7;
}
.reception-feature-copy .reception-lead{
    color:#242d38;
    font-weight:750;
}
.reception-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}
.reception-tags span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 11px;
    border-radius:999px;
    background:#f5f7fa;
    border:1px solid #e7ebef;
    color:#37414c;
    font-size:10px;
    font-weight:750;
}
.reception-tags i{color:var(--pink)}

.reception-content-section{
    padding:0;
}
.reception-panel{
    margin-top:18px;
    padding:28px;
    border:1px solid rgba(28,37,48,.08);
    border-radius:24px;
    background:#fff;
    box-shadow:0 12px 36px rgba(30,36,46,.06);
}
.reception-panel-head{
    margin-bottom:20px;
}
.reception-panel-head h2{
    margin:8px 0 0;
    font-size:clamp(28px,3vw,42px);
    line-height:1.05;
    letter-spacing:-.035em;
}
.reception-platform-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.reception-platform-card{
    overflow:hidden;
    border:1px solid #e7ebef;
    border-radius:18px;
    background:#fff;
    color:#17212c;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease;
}
.reception-platform-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(18,31,47,.10);
}
.reception-platform-image{
    height:180px;
    overflow:hidden;
    background:#eef2f6;
}
.reception-platform-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.reception-platform-body{
    padding:18px;
}
.portal-tag{
    display:inline-block;
    margin-bottom:10px;
    padding:6px 8px;
    border-radius:5px;
    background:#fff0f5;
    color:var(--pink);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}
.reception-platform-body h3{
    margin:0 0 8px;
    font-size:21px;
}
.reception-platform-body p{
    min-height:66px;
    margin:0 0 14px;
    color:#6c7580;
    font-size:13px;
    line-height:1.55;
}
.portal-action{
    color:var(--pink);
    font-size:12px;
    font-weight:850;
}

.reception-service-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.reception-service-item{
    min-height:128px;
    padding:18px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:14px;
    border:1px solid #e8ecf0;
    border-radius:16px;
    background:linear-gradient(180deg,#fff,#fbfcfd);
    color:#17212c;
    text-decoration:none;
}
.reception-service-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#fff0f5;
    color:var(--pink);
}
.reception-service-item h3{
    margin:0 0 5px;
    font-size:16px;
}
.reception-service-item p{
    margin:0 0 10px;
    color:#727b85;
    font-size:12px;
    line-height:1.5;
}
.small-action{
    display:inline-flex;
    align-items:center;
    gap:7px;
    width:max-content;
    padding:7px 11px;
    border:0;
    border-radius:999px;
    background:var(--pink);
    color:#fff;
    font:inherit;
    font-size:10px;
    font-weight:850;
    text-decoration:none;
    cursor:pointer;
}
.small-action i{
    flex:0 0 auto;
    font-size:.78em;
}
.small-action.muted{
    background:#edf0f3;
    color:#7c858e;
}
.reception-service-coming{
    background:#f6f7f9;
}

.direct-stream-box{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border:1px solid #e8ecf0;
    border-radius:14px;
    background:#fbfcfd;
}
.direct-stream-label{
    padding:7px 9px;
    border-radius:6px;
    background:#fff0f5;
    color:var(--pink);
    font-size:9px;
    font-weight:900;
    letter-spacing:.09em;
}
.direct-stream-box a{
    min-width:0;
    color:#303944;
    font-size:13px;
    font-weight:750;
    overflow-wrap:anywhere;
}
.copy-stream{
    border:1px solid #e2e6ea;
    border-radius:999px;
    background:#fff;
    padding:8px 12px;
    color:#2d3640;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}
.reception-note{
    margin-top:14px;
    padding:14px 16px;
    display:flex;
    align-items:flex-start;
    gap:9px;
    background:var(--pink);
    color:#fff;
    border-radius:12px;
    font-size:11px;
    line-height:1.5;
}

/* Footer now only carries social/legal links */
.footer-links{
    justify-content:flex-end;
}

/* Responsive navigation + Empfang */
@media(max-width:760px){
    .network-bar-inner{
        width:calc(100% - 32px);
        min-height:28px;
    }
    .network-brand img{
        height:14px;
        max-width:125px;
    }
    .network-more{
        font-size:9px;
    }

    .main-nav-inner{
        min-height:48px;
        justify-content:flex-start;
    }
    .nav-toggle{
        width:100%;
        min-height:48px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:9px;
        padding:0;
    }
    .nav-links{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        display:none;
        padding:8px 16px 16px;
        background:#fff;
        border-bottom:1px solid #e5e9ed;
        box-shadow:0 16px 30px rgba(20,30,42,.10);
    }
    .nav-links.open{
        display:block;
    }
    .nav-links a{
        width:100%;
        min-height:44px;
        padding:0 4px;
        border-bottom:1px solid #f0f2f4;
    }
    .nav-links a:after{
        display:none;
    }
    .nav-links a.active{
        color:var(--blue);
    }

    .reception-main{
        padding-bottom:72px;
    }
    .reception-intro-wrap{
        padding:20px 0 10px;
    }
    .reception-feature{
        grid-template-columns:1fr;
        border-radius:20px;
    }
    .reception-feature-media{
        min-height:230px;
    }
    .reception-feature-copy{
        padding:26px 22px 28px;
    }
    .reception-feature-copy h1{
        font-size:clamp(38px,11vw,50px);
    }
    .reception-platform-grid,
    .reception-service-grid{
        grid-template-columns:1fr;
    }
    .reception-panel{
        margin-top:12px;
        padding:18px;
        border-radius:18px;
    }
    .reception-platform-image{
        height:190px;
    }
    .reception-platform-body p{
        min-height:0;
    }
    .direct-stream-box{
        grid-template-columns:1fr;
        gap:10px;
    }
    .copy-stream{
        width:max-content;
    }

    .footer-links{
        justify-content:center;
    }
}


/* V18 – full-width network strip */
.network-strip{
    width:100%;
    background:#fff;
    border-bottom:1px solid #edf0f3;
}
.network-strip-inner{
    width:100%;
    min-height:34px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.network-badge,
.network-strip-more{
    text-decoration:none;
}
.network-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--pink);
    font-size:12px;
    font-weight:900;
    letter-spacing:-.01em;
}
.network-badge-mark{
    width:19px;
    height:19px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--pink);
    color:#fff;
    font-size:8px;
}
.network-strip-more{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--pink);
    font-size:11px;
    font-weight:850;
}

/* V18 – integrated navigation inside existing white header */
.header-with-nav{
    gap:36px;
}
.header-with-nav .brand{
    flex:0 0 auto;
}
.header-nav{
    margin-left:auto;
}
.header-nav-toggle{
    display:none;
}
.header-nav-links{
    display:flex;
    align-items:center;
    gap:4px;
}
.header-nav-links a{
    position:relative;
    min-height:58px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#26313c;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}
.header-nav-links a:after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:5px;
    height:3px;
    border-radius:999px;
    background:transparent;
}
.header-nav-links a:hover,
.header-nav-links a.active{
    color:var(--blue);
}
.header-nav-links a.active:after{
    background:var(--yellow);
}
.header-nav-links i{
    font-size:8px;
    opacity:.6;
}

/* Hide old V17 separate nav if browser cached old markup during transition */
.main-nav{display:none !important}
.network-bar{display:none !important}

/* V18 – reception page uses the same overall page language */
.subpage-hero{
    background:var(--blue);
    color:#fff;
    padding:58px 0;
}
.subpage-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);
    gap:58px;
    align-items:center;
}
.subpage-hero-copy h1{
    margin:14px 0 18px;
    font-size:clamp(54px,6vw,86px);
    line-height:.92;
    letter-spacing:-.055em;
}
.subpage-hero-copy h1 span{
    color:var(--yellow);
}
.subpage-hero-copy p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.80);
    font-size:17px;
    line-height:1.7;
}
.subpage-hero-image{
    overflow:hidden;
    border-radius:28px;
    aspect-ratio:4/3;
    box-shadow:0 24px 50px rgba(0,0,0,.16);
}
.subpage-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.reception-subhero .reception-tags{
    margin-top:24px;
}
.reception-subhero .reception-tags span{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.14);
    color:#fff;
}
.reception-subhero .reception-tags i{
    color:var(--yellow);
}

.reception-section-clean{
    background:#fff;
}
.reception-more-section{
    background:#f6f7f9;
}
.reception-stream-section{
    background:#fff;
}
.reception-primary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}
.reception-primary-card{
    overflow:hidden;
    border:1px solid #e6eaee;
    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 30px rgba(22,33,48,.05);
}
.reception-primary-card img{
    display:block;
    width:100%;
    height:210px;
    object-fit:cover;
}
.reception-primary-body{
    padding:20px;
}
.reception-primary-body h3{
    margin:0 0 8px;
    font-size:23px;
}
.reception-primary-body p{
    min-height:64px;
    margin:0 0 14px;
    color:#68717c;
    font-size:13px;
    line-height:1.55;
}
.clean-services{
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.stream-panel{
    padding:34px;
    border-radius:24px;
    background:var(--yellow);
}
.stream-panel{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:34px;
    align-items:center;
}
.stream-panel-copy h2{
    margin:8px 0 10px;
    font-size:clamp(32px,4vw,48px);
    line-height:1;
}
.stream-panel-copy p{
    margin:0;
    color:#4d4c43;
    line-height:1.6;
}
.stream-panel .direct-stream-box{
    background:#fff;
}

/* Keep all subpages structurally consistent */
.playlist-hero{
    border-top:0;
}

/* mobile header navigation integrated in header */
@media(max-width:900px){
    .header-with-nav{
        position:relative;
        gap:18px;
    }
    .header-nav{
        margin-left:auto;
    }
    .header-nav-toggle{
        width:46px;
        height:46px;
        padding:0;
        border:0;
        border-radius:50%;
        background:var(--blue);
        color:#fff;
        display:grid;
        place-items:center;
        cursor:pointer;
    }
    .header-nav-toggle span{
        display:none;
    }
    .header-nav-links{
        position:absolute;
        z-index:80;
        top:calc(100% + 1px);
        left:0;
        right:0;
        display:none;
        padding:10px 16px 16px;
        background:#fff;
        border-bottom:1px solid #e5e9ed;
        box-shadow:0 18px 36px rgba(20,31,44,.12);
    }
    .header-nav-links.open{
        display:block;
    }
    .header-nav-links a{
        width:100%;
        min-height:46px;
        padding:0;
        border-bottom:1px solid #eef1f3;
    }
    .header-nav-links a:after{
        display:none;
    }
}

@media(max-width:760px){
    .network-strip-inner{
        padding:0 16px;
        min-height:32px;
    }
    .network-badge{
        font-size:11px;
    }
    .network-strip-more{
        font-size:10px;
    }

    .subpage-hero{
        padding:44px 0 54px;
    }
    .subpage-hero-grid{
        grid-template-columns:1fr;
        gap:28px;
    }
    .subpage-hero-copy h1{
        font-size:clamp(44px,13vw,58px);
    }
    .subpage-hero-copy p{
        font-size:15px;
    }
    .subpage-hero-image{
        border-radius:20px;
        aspect-ratio:16/10;
    }
    .reception-primary-grid,
    .clean-services,
    .stream-panel{
        grid-template-columns:1fr;
    }
    .reception-primary-card img{
        height:190px;
    }
    .reception-primary-body p{
        min-height:0;
    }
    .stream-panel{
        padding:22px;
        gap:22px;
    }
}


/* V19 – exact RGDE badge + cleaner integrated navigation */
.network-strip{
    width:100%;
    background:#fff;
    border-bottom:1px solid #eceff3;
}
.network-strip-inner{
    width:100%;
    min-height:38px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.network-badge{
    display:flex;
    align-items:center;
    text-decoration:none;
}
.network-badge img{
    display:block;
    height:24px;
    width:auto;
    max-width:180px;
}
.network-strip-more{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--pink);
    font-size:12px;
    font-weight:850;
    text-decoration:none;
}

/* remove the custom recreation from V18 */
.network-badge-mark{display:none!important}

/* Header remains one visual component: logo + nav */
.header-with-nav{
    min-height:86px;
    display:grid!important;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:38px;
}
.header-with-nav .brand img{
    width:220px;
}
.header-nav{
    min-width:0;
    margin-left:auto;
}
.header-nav-links{
    display:flex!important;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    position:static!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}
.header-nav-links a{
    position:relative;
    min-height:44px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#303944;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}
.header-nav-links a::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:2px;
    height:3px;
    border-radius:999px;
    background:transparent;
}
.header-nav-links a:hover,
.header-nav-links a.active{
    color:var(--blue);
}
.header-nav-links a.active::after{
    background:var(--yellow);
}

/* Remove reception chips completely */
.reception-tags{display:none!important}

/* Mobile: navigation is part of the white header, second row, no extra bar and no hamburger */
@media(max-width:760px){
    .network-strip-inner{
        min-height:34px;
        padding:0 10px;
    }
    .network-badge img{
        height:21px;
        max-width:150px;
    }
    .network-strip-more{
        font-size:10px;
    }

    .header-with-nav{
        width:calc(100% - 32px)!important;
        min-height:0;
        padding:14px 0 0!important;
        display:grid!important;
        grid-template-columns:1fr;
        gap:12px!important;
    }

    .header-with-nav .brand{
        max-width:none!important;
        display:flex;
        justify-content:center;
    }
    .header-with-nav .brand img{
        width:min(190px,72vw)!important;
    }

    .header-nav{
        width:100%;
        margin:0;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }
    .header-nav::-webkit-scrollbar{display:none}

    .header-nav-links{
        width:max-content;
        min-width:100%;
        justify-content:center;
        gap:0;
    }
    .header-nav-links a{
        min-height:44px;
        padding:0 10px;
        font-size:11px;
    }
    .header-nav-links a::after{
        left:10px;
        right:10px;
        bottom:0;
    }

    .header-nav-links a i{
        display:none;
    }
}

@media(max-width:420px){
    .network-strip-inner{
        padding:0 8px;
    }
    .network-badge img{
        height:19px;
        max-width:135px;
    }
    .network-strip-more{
        font-size:9px;
    }
    .header-nav-links{
        justify-content:flex-start;
    }
    .header-nav-links a{
        padding:0 9px;
        font-size:10.5px;
    }
}


/* V20 – larger desktop navigation + mobile hamburger */
.header-with-nav{
    min-height:94px;
    display:flex!important;
    align-items:center;
    gap:42px;
}
.header-with-nav .brand{
    flex:0 0 auto;
}
.header-with-nav .brand img{
    width:230px!important;
}
.header-nav{
    margin-left:auto;
    position:relative;
}
.header-nav-links{
    display:flex!important;
    align-items:center;
    gap:10px;
}
.header-nav-links a{
    min-height:50px;
    padding:0 18px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#26313c;
    text-decoration:none;
    font-size:14px;
    font-weight:850;
    transition:background .18s ease,color .18s ease,transform .18s ease;
}
.header-nav-links a::after{
    display:none!important;
}
.header-nav-links a:hover{
    background:#f4f7fa;
    color:var(--blue);
    transform:translateY(-1px);
}
.header-nav-links a.active{
    background:var(--blue);
    color:#fff;
}
.header-nav-toggle{
    display:none;
}
.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

@media(max-width:900px){
    .header-with-nav{
        min-height:82px;
        display:flex!important;
        align-items:center;
        justify-content:space-between;
        gap:16px!important;
        padding-top:12px!important;
        padding-bottom:12px!important;
    }

    .header-with-nav .brand{
        max-width:calc(100% - 70px)!important;
        display:block!important;
    }

    .header-with-nav .brand img{
        width:min(190px,100%)!important;
    }

    .header-nav{
        margin-left:auto;
        position:static;
    }

    .header-nav-toggle{
        width:50px;
        height:50px;
        padding:0;
        border:0;
        border-radius:14px;
        background:var(--blue);
        display:flex!important;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        cursor:pointer;
    }

    .hamburger-line{
        width:21px;
        height:2px;
        border-radius:999px;
        background:#fff;
        transition:transform .2s ease,opacity .2s ease;
    }

    .header-nav-toggle.open .hamburger-line:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }
    .header-nav-toggle.open .hamburger-line:nth-child(2){
        opacity:0;
    }
    .header-nav-toggle.open .hamburger-line:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .header-nav-links{
        position:absolute!important;
        z-index:120;
        top:100%;
        left:0;
        right:0;
        width:100%;
        display:none!important;
        padding:12px 16px 18px!important;
        background:#fff!important;
        border-top:1px solid #edf0f3!important;
        border-bottom:1px solid #e2e7eb!important;
        box-shadow:0 18px 36px rgba(17,28,40,.12)!important;
    }

    .header-nav-links.open{
        display:grid!important;
        gap:8px;
    }

    .header-nav-links a{
        width:100%;
        min-height:50px;
        padding:0 16px;
        justify-content:flex-start;
        border-radius:12px;
        font-size:14px;
        background:#f7f9fb;
    }

    .header-nav-links a.active{
        background:var(--blue);
        color:#fff;
    }
}

@media(max-width:430px){
    .header-with-nav{
        width:calc(100% - 32px)!important;
    }
    .header-with-nav .brand img{
        width:min(174px,100%)!important;
    }
    .header-nav-toggle{
        width:46px;
        height:46px;
        border-radius:13px;
    }
}


/* V21 – Premium navigation edition */
.premium-network{
    position:relative;
    z-index:200;
    background:#fff;
    border-bottom:1px solid rgba(19,31,45,.06);
}
.premium-network .network-strip-inner{
    min-height:36px;
    padding-inline:20px;
}
.premium-network .network-badge img{
    height:22px;
    width:auto;
    max-width:170px;
}
.premium-network .network-strip-more{
    color:var(--pink);
    font-size:11px;
    font-weight:800;
    letter-spacing:.01em;
}

.premium-header{
    position:sticky;
    top:0;
    z-index:190;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(19,31,45,.08);
    box-shadow:0 8px 24px rgba(18,31,46,.045);
}

.premium-header-inner{
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.premium-brand{
    display:flex;
    align-items:center;
    flex:0 0 auto;
}
.premium-brand img{
    display:block;
    width:232px;
    height:auto;
}

.premium-nav{
    position:relative;
    margin-left:auto;
}

.premium-nav-links{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px;
    border:1px solid #e9edf1;
    border-radius:18px;
    background:#f7f9fb;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.premium-nav-links a{
    position:relative;
    min-width:112px;
    min-height:48px;
    padding:0 20px;
    border-radius:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#2b3540;
    text-decoration:none;
    font-size:13px;
    font-weight:850;
    letter-spacing:-.01em;
    transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.premium-nav-links a:hover{
    color:var(--blue);
    background:#fff;
    box-shadow:0 5px 16px rgba(23,39,57,.08);
    transform:translateY(-1px);
}

.premium-nav-links a.active{
    color:#fff;
    background:var(--blue);
    box-shadow:0 8px 18px rgba(7,89,155,.22);
}

.premium-nav-toggle{
    display:none;
}

/* Disable older nav variants */
.header-nav,
.header-nav-links,
.header-nav-toggle,
.main-nav,
.nav-links,
.nav-toggle{
    display:none!important;
}

@media(max-width:900px){
    .premium-network .network-strip-inner{
        min-height:32px;
        padding-inline:14px;
    }
    .premium-network .network-badge img{
        height:18px;
        max-width:138px;
    }
    .premium-network .network-strip-more{
        font-size:9px;
    }

    .premium-header-inner{
        width:calc(100% - 32px)!important;
        max-width:none!important;
        min-height:82px;
        padding:0!important;
        gap:16px;
    }

    .premium-brand{
        min-width:0;
        max-width:calc(100% - 70px);
    }
    .premium-brand img{
        width:min(190px,100%)!important;
    }

    .premium-nav{
        position:static;
        margin-left:auto;
    }

    .premium-nav-toggle{
        width:50px;
        height:50px;
        padding:0;
        border:1px solid #dfe5ea;
        border-radius:16px;
        background:#fff;
        box-shadow:0 8px 18px rgba(20,34,50,.08);
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        cursor:pointer;
        transition:background .2s ease,border-color .2s ease;
    }

    .premium-nav-toggle span{
        width:21px;
        height:2px;
        border-radius:999px;
        background:#17222e;
        transition:transform .22s ease,opacity .18s ease;
    }

    .premium-nav-toggle.open{
        background:var(--blue);
        border-color:var(--blue);
    }
    .premium-nav-toggle.open span{
        background:#fff;
    }
    .premium-nav-toggle.open span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }
    .premium-nav-toggle.open span:nth-child(2){
        opacity:0;
    }
    .premium-nav-toggle.open span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .premium-nav-links{
        position:absolute;
        top:calc(100% + 10px);
        left:16px;
        right:16px;
        width:auto;
        padding:10px;
        border:1px solid #e2e7eb;
        border-radius:20px;
        background:rgba(255,255,255,.98);
        box-shadow:0 22px 50px rgba(18,31,46,.18);
        display:none;
    }

    .premium-nav-links.open{
        display:grid;
        gap:7px;
    }

    .premium-nav-links a{
        width:100%;
        min-width:0;
        min-height:52px;
        padding:0 16px;
        justify-content:flex-start;
        border-radius:13px;
        background:#f6f8fa;
        font-size:14px;
    }

    .premium-nav-links a.active{
        background:var(--blue);
        color:#fff;
    }
}

@media(max-width:430px){
    .premium-header-inner{
        width:calc(100% - 28px)!important;
        min-height:78px;
    }
    .premium-brand img{
        width:min(174px,100%)!important;
    }
    .premium-nav-toggle{
        width:46px;
        height:46px;
        border-radius:14px;
    }
    .premium-nav-links{
        left:14px;
        right:14px;
    }
}


/* V23 – clickable reception portal cards */
.reception-primary-link{
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.reception-primary-link:hover{
    transform:translateY(-4px);
    border-color:rgba(7,89,155,.22);
    box-shadow:0 18px 38px rgba(22,33,48,.10);
}
.reception-primary-link .portal-action{
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.reception-primary-link .portal-action i{
    font-size:.78em;
}


/* V25 – consistent mobile page gutters
   Keep content away from the physical screen edges on narrow devices. */
@media (max-width: 760px){
    :root{
        --mobile-gutter: 22px;
    }

    /* Main content containers */
    .container{
        width:calc(100% - (var(--mobile-gutter) * 2))!important;
        max-width:none!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    /* Header uses the exact same left/right grid as the page */
    .premium-header-inner{
        width:calc(100% - (var(--mobile-gutter) * 2))!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    /* Network strip gets its own safe gutter */
    .premium-network .network-strip-inner{
        padding-left:var(--mobile-gutter)!important;
        padding-right:var(--mobile-gutter)!important;
    }

    /* Hero copy/buttons/features must never bleed beyond the container */
    .hero-grid,
    .hero-copy,
    .hero-actions,
    .hero-features{
        min-width:0;
        max-width:100%;
    }

    .hero-copy h1,
    .hero-copy p{
        max-width:100%;
    }

    .hero-actions{
        gap:12px;
    }

    .hero-features{
        gap:8px;
    }

    .hero-feature{
        min-width:0;
    }
}

@media (max-width: 430px){
    :root{
        --mobile-gutter: 20px;
    }

    .hero-copy h1{
        font-size:clamp(50px,15vw,64px);
        line-height:.98;
    }

    .hero-actions{
        display:grid;
        grid-template-columns:1fr;
        align-items:stretch;
    }

    .hero-actions .primary-button,
    .hero-actions .secondary-link{
        width:100%;
        justify-content:center;
    }

    .hero-features{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}


/* V26 – more breathing room above the fixed playerbar */
.hero{
    padding-bottom:132px !important;
}

.hero-grid{
    padding-bottom:44px !important;
}

@media(max-width:1050px){
    .hero{
        padding-bottom:120px !important;
    }

    .hero-grid{
        padding-bottom:36px !important;
    }
}

@media(max-width:760px){
    .hero{
        padding-bottom:112px !important;
    }

    .hero-grid{
        padding-bottom:30px !important;
    }
}

@media(max-width:430px){
    .hero{
        padding-bottom:106px !important;
    }
}


/* V27 – move the complete desktop hero composition upward */
@media (min-width: 1051px){
    .hero-grid{
        transform:translateY(-72px);
        padding-top:0 !important;
        padding-bottom:0 !important;
    }

    /* Preserve generous space below the raised composition */
    .hero{
        padding-top:72px !important;
        padding-bottom:150px !important;
    }

    .now-card{
        margin-top:0 !important;
    }
}

/* Tablet: only a subtle lift */
@media (min-width:761px) and (max-width:1050px){
    .hero-grid{
        transform:translateY(-28px);
    }
}


/* V28 – desktop hero raised further */
@media (min-width: 1051px){
    .hero-grid{
        transform:translateY(-112px) !important;
    }

    .hero{
        padding-top:64px !important;
        padding-bottom:170px !important;
    }
}

/* Medium desktop: slightly less aggressive */
@media (min-width:1051px) and (max-width:1400px){
    .hero-grid{
        transform:translateY(-88px) !important;
    }
}


/* V29 – Hero structurally redesigned: no transforms, no artificial empty space */
@media (min-width: 1051px){
    .hero{
        min-height:0 !important;
        padding:72px 0 86px !important;
        display:block !important;
    }

    .hero-grid{
        min-height:0 !important;
        padding:0 !important;
        transform:none !important;
        display:grid !important;
        grid-template-columns:minmax(0,1.08fr) minmax(420px,.72fr) !important;
        align-items:center !important;
        gap:88px !important;
    }

    .hero-copy{
        align-self:center !important;
        padding:0 !important;
    }

    .now-card{
        align-self:center !important;
        justify-self:end !important;
        margin:0 !important;
        width:min(100%,430px) !important;
    }

    .hero h1{
        margin-top:18px !important;
        margin-bottom:24px !important;
    }

    .hero-intro{
        margin-bottom:30px !important;
    }

    .hero-actions{
        margin-bottom:26px !important;
    }

    .hero-meta{
        margin-top:0 !important;
    }
}

/* Medium desktop: slightly tighter but still balanced */
@media (min-width: 1051px) and (max-width: 1450px){
    .hero{
        padding:58px 0 72px !important;
    }

    .hero-grid{
        gap:58px !important;
        grid-template-columns:minmax(0,1fr) minmax(390px,.75fr) !important;
    }

    .now-card{
        width:min(100%,400px) !important;
    }
}

/* Tablet keeps normal flow – no vertical translation */
@media (min-width:761px) and (max-width:1050px){
    .hero{
        padding:56px 0 72px !important;
    }

    .hero-grid{
        transform:none !important;
        padding:0 !important;
        min-height:0 !important;
    }

    .now-card{
        margin-top:22px !important;
    }
}

/* Mobile: compact, natural document flow */
@media (max-width:760px){
    .hero{
        padding:44px 0 64px !important;
    }

    .hero-grid{
        transform:none !important;
        padding:0 !important;
        min-height:0 !important;
    }

    .now-card{
        margin-top:26px !important;
    }
}


/* V30 – centered CTA below last 10 titles */
.latest-more{
    display:flex;
    justify-content:center;
    margin-top:34px;
}
.latest-more-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    padding:0 24px;
    border-radius:999px;
    background:#111820;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:850;
    box-shadow:0 10px 24px rgba(17,24,32,.12);
    transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.latest-more-button:hover{
    transform:translateY(-2px);
    background:var(--blue);
    box-shadow:0 14px 30px rgba(7,89,155,.18);
}
@media(max-width:760px){
    .latest-more{margin-top:24px}
    .latest-more-button{
        width:100%;
        max-width:320px;
    }
}


/* V31 – mute button */
#volume-icon.is-clickable{
    cursor:pointer;
    transition:transform .16s ease, opacity .16s ease;
}
#volume-icon.is-clickable:hover{
    transform:scale(1.08);
    opacity:.8;
}
#volume-icon.is-clickable:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:4px;
    border-radius:4px;
}


/* V32 – new stage hero: headline above integrated player */
.hero-stage{
    position:relative;
    overflow:visible!important;
    min-height:0!important;
    padding:0!important;
    background:var(--blue);
    color:#fff;
}

.hero-stage-inner{
    position:relative;
    padding:86px 0 0;
    overflow:hidden;
}

.hero-stage-inner::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-190px;
    top:-160px;
    border-radius:50%;
    background:var(--cyan);
    opacity:.38;
}

.hero-stage-inner::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    left:-120px;
    bottom:30px;
    border-radius:50%;
    background:var(--yellow);
    opacity:.12;
}

.hero-stage-copy{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:980px;
    padding-bottom:78px;
}

.hero-stage-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
}

.hero-stage-eyebrow::before{
    content:"";
    width:28px;
    height:3px;
    border-radius:999px;
    background:var(--yellow);
}

.hero-stage-copy h1{
    margin:0;
    font-size:clamp(68px,7vw,118px);
    line-height:.88;
    letter-spacing:-.065em;
    color:#fff;
}

.hero-stage-copy h1 span{
    color:var(--yellow);
}

.hero-stage-copy p{
    max-width:760px;
    margin:28px auto 0;
    color:rgba(255,255,255,.78);
    font-size:18px;
    line-height:1.7;
}

.hero-stage-player-wrap{
    position:relative;
    z-index:3;
    transform:translateY(34px);
}

.hero-stage-player{
    min-height:108px;
    padding:16px 18px;
    border-radius:24px;
    background:#fff;
    color:#111820;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:22px;
    box-shadow:0 20px 50px rgba(10,31,53,.22);
}

.hero-stage-track{
    min-width:0;
    display:flex;
    align-items:center;
    gap:16px;
}

.hero-stage-cover{
    width:72px;
    height:72px;
    flex:0 0 72px;
    border-radius:16px;
    object-fit:cover;
    background:#eef1f4;
}

.hero-stage-track-copy{
    min-width:0;
}

.hero-stage-track-copy span{
    display:block;
    margin-bottom:5px;
    color:#9098a2;
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.hero-stage-track-copy strong{
    display:block;
    max-width:100%;
    color:#111820;
    font-size:21px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hero-stage-track-copy small{
    display:block;
    margin-top:5px;
    color:#737c87;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hero-stage-play{
    width:60px;
    height:60px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--blue);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(7,89,155,.22);
}

.hero-stage-play i{
    margin-left:3px;
}

.hero-stage-history{
    min-height:48px;
    padding:0 18px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:#f4f7fa;
    color:#24303b;
    text-decoration:none;
    font-size:12px;
    font-weight:850;
}

.hero-stage + .latest-section{
    padding-top:110px!important;
}

/* The fixed footer player remains, but the hero now has its own prominent player surface. */
@media(max-width:900px){
    .hero-stage-inner{
        padding-top:64px;
    }

    .hero-stage-copy{
        padding-bottom:56px;
    }

    .hero-stage-copy h1{
        font-size:clamp(58px,10vw,84px);
    }

    .hero-stage-player{
        grid-template-columns:minmax(0,1fr) auto;
    }

    .hero-stage-history{
        grid-column:1 / -1;
        width:100%;
    }
}

@media(max-width:760px){
    .hero-stage-inner{
        padding-top:48px;
    }

    .hero-stage-copy{
        width:calc(100% - 40px)!important;
        padding-bottom:44px;
    }

    .hero-stage-copy h1{
        font-size:clamp(52px,15vw,72px);
        line-height:.92;
    }

    .hero-stage-copy p{
        margin-top:20px;
        font-size:15px;
        line-height:1.6;
    }

    .hero-stage-player-wrap{
        width:calc(100% - 40px)!important;
        transform:translateY(28px);
    }

    .hero-stage-player{
        padding:13px;
        gap:12px;
        border-radius:20px;
    }

    .hero-stage-cover{
        width:58px;
        height:58px;
        flex-basis:58px;
        border-radius:13px;
    }

    .hero-stage-track{
        gap:12px;
    }

    .hero-stage-track-copy strong{
        font-size:16px;
    }

    .hero-stage-play{
        width:50px;
        height:50px;
        font-size:15px;
    }

    .hero-stage-history{
        min-height:44px;
        font-size:11px;
    }

    .hero-stage + .latest-section{
        padding-top:84px!important;
    }
}

@media(max-width:430px){
    .hero-stage-copy,
    .hero-stage-player-wrap{
        width:calc(100% - 32px)!important;
    }

    .hero-stage-copy h1{
        font-size:clamp(48px,15vw,62px);
    }

    .hero-stage-track-copy strong{
        max-width:180px;
    }
}


/* V33 – cleaner hero: player fully contained inside the blue hero */
.hero-stage{
    overflow:hidden!important;
}

.hero-stage-inner{
    padding:78px 0 74px!important;
}

.hero-stage-copy{
    padding-bottom:0!important;
}

.hero-stage-player-wrap{
    transform:none!important;
    margin-top:44px!important;
}

.hero-stage-player{
    max-width:980px;
    margin:0 auto;
    min-height:104px;
    border-radius:22px;
    box-shadow:0 18px 42px rgba(8,28,48,.18);
}

.hero-stage + .latest-section{
    padding-top:88px!important;
}

/* prevent decorative shapes from visually colliding with the player */
.hero-stage-inner::before{
    width:420px!important;
    height:420px!important;
    right:-170px!important;
    top:-120px!important;
    opacity:.28!important;
}

.hero-stage-inner::after{
    display:none!important;
}

@media(max-width:900px){
    .hero-stage-inner{
        padding:58px 0 58px!important;
    }

    .hero-stage-player-wrap{
        margin-top:34px!important;
    }

    .hero-stage-player{
        max-width:760px;
    }
}

@media(max-width:760px){
    .hero-stage-inner{
        padding:46px 0 46px!important;
    }

    .hero-stage-player-wrap{
        width:calc(100% - 40px)!important;
        margin-top:30px!important;
    }

    .hero-stage-player{
        border-radius:18px;
    }

    .hero-stage + .latest-section{
        padding-top:68px!important;
    }
}

@media(max-width:430px){
    .hero-stage-player-wrap{
        width:calc(100% - 32px)!important;
    }
}


/* V34 – Hero/Player inspired by the supplied radio reference */
.hero-stage-pink{
    background:var(--pink)!important;
}

.hero-stage-pink .hero-stage-inner{
    padding:74px 0 88px!important;
}

.hero-stage-pink .hero-stage-inner::before{
    width:520px!important;
    height:520px!important;
    right:-190px!important;
    top:-180px!important;
    background:var(--orange)!important;
    opacity:.18!important;
}

.hero-stage-pink .hero-stage-copy{
    padding-bottom:0!important;
}

.hero-stage-pink .hero-stage-copy h1 span{
    color:var(--yellow)!important;
}

.hero-stage-pink .hero-stage-player-wrap{
    margin-top:44px!important;
    transform:none!important;
}

.hero-stage-player-band{
    max-width:1120px!important;
    margin:0 auto!important;
    min-height:112px!important;
    padding:16px 22px!important;
    border-radius:0!important;
    display:grid!important;
    grid-template-columns:auto 76px minmax(0,1fr)!important;
    align-items:center!important;
    gap:18px!important;
    background:var(--yellow)!important;
    color:#fff!important;
    box-shadow:0 16px 36px rgba(55,22,31,.16)!important;
}

.hero-stage-play-light{
    width:64px!important;
    height:64px!important;
    border-radius:50%!important;
    background:#fff!important;
    color:var(--yellow)!important;
    box-shadow:0 8px 18px rgba(0,0,0,.13)!important;
}

.hero-stage-cover-band{
    width:76px!important;
    height:76px!important;
    border-radius:10px!important;
    object-fit:cover!important;
    background:rgba(255,255,255,.5)!important;
}

.hero-stage-track-copy-band span{
    margin-bottom:4px!important;
    color:rgba(255,255,255,.78)!important;
    font-size:10px!important;
}

.hero-stage-track-copy-band strong{
    color:#fff!important;
    font-size:24px!important;
    line-height:1.08!important;
}

.hero-stage-track-copy-band small{
    color:rgba(255,255,255,.86)!important;
    font-size:13px!important;
}

.hero-stage-pink + .latest-section{
    padding-top:82px!important;
}

@media(max-width:760px){
    .hero-stage-pink .hero-stage-inner{
        padding:46px 0 56px!important;
    }

    .hero-stage-pink .hero-stage-player-wrap{
        width:calc(100% - 40px)!important;
        margin-top:30px!important;
    }

    .hero-stage-player-band{
        grid-template-columns:auto 58px minmax(0,1fr)!important;
        min-height:86px!important;
        padding:12px 14px!important;
        gap:12px!important;
    }

    .hero-stage-play-light{
        width:50px!important;
        height:50px!important;
    }

    .hero-stage-cover-band{
        width:58px!important;
        height:58px!important;
    }

    .hero-stage-track-copy-band strong{
        font-size:17px!important;
    }

    .hero-stage-track-copy-band small{
        font-size:11px!important;
    }
}

@media(max-width:430px){
    .hero-stage-pink .hero-stage-player-wrap{
        width:calc(100% - 32px)!important;
    }

    .hero-stage-player-band{
        grid-template-columns:48px minmax(0,1fr)!important;
    }

    .hero-stage-cover-band{
        display:none!important;
    }
}


/* V35 – calmer player colour + editorial transition after hero */
.hero-stage-player-band{
    background:#fff!important;
    color:#111820!important;
    box-shadow:0 18px 42px rgba(67,18,42,.18)!important;
}

.hero-stage-play-light{
    background:var(--blue)!important;
    color:#fff!important;
    box-shadow:0 10px 24px rgba(7,89,155,.24)!important;
}

.hero-stage-cover-band{
    background:#eef2f5!important;
}

.hero-stage-track-copy-band span{
    color:var(--pink)!important;
}

.hero-stage-track-copy-band strong{
    color:#111820!important;
}

.hero-stage-track-copy-band small{
    color:#707985!important;
}




/* V37 – Music suggestion */
.music-suggestion-section{
    padding:88px 0;
    background:#fff;
}
.music-suggestion-card{
    position:relative;
    overflow:hidden;
    min-height:300px;
    padding:46px 50px;
    border-radius:30px;
    background:var(--blue);
    color:#fff;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:42px;
}
.music-suggestion-card::after{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    right:-100px;
    top:-120px;
    border-radius:50%;
    background:var(--yellow);
}
.music-suggestion-copy{
    position:relative;
    z-index:2;
    max-width:720px;
}
.music-suggestion-copy h2{
    margin:12px 0 18px;
    font-size:clamp(44px,5vw,68px);
    line-height:.97;
    letter-spacing:-.05em;
}
.music-suggestion-copy p{
    max-width:660px;
    margin:0;
    color:rgba(255,255,255,.8);
    font-size:16px;
    line-height:1.7;
}
.music-suggestion-button{
    position:relative;
    z-index:2;
    flex:0 0 auto;
    min-height:54px;
    padding:0 24px;
    border-radius:999px;
    background:#fff;
    color:var(--blue);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:13px;
    font-weight:900;
}

/* V38 – own legal pages */
.legal-hero{
    padding:76px 0;
    background:var(--pink);
    color:#fff;
}
.legal-hero-blue{background:var(--blue)}
.legal-hero-inner{max-width:900px}
.legal-hero h1{
    margin:12px 0 16px;
    font-size:clamp(52px,6vw,82px);
    line-height:.95;
    letter-spacing:-.055em;
}
.legal-hero p{
    max-width:680px;
    margin:0;
    color:rgba(255,255,255,.8);
    font-size:17px;
    line-height:1.65;
}
.legal-content-section{
    padding:80px 0 110px;
    background:#f5f7fa;
}
.legal-layout{max-width:960px}
.legal-card{
    padding:46px 50px;
    border:1px solid #e5e9ed;
    border-radius:26px;
    background:#fff;
    box-shadow:0 14px 34px rgba(20,34,50,.05);
}
.legal-card h2{
    margin:38px 0 12px;
    font-size:24px;
}
.legal-card h2:first-child{margin-top:0}
.legal-card p{
    color:#626d78;
    line-height:1.75;
}
.legal-notice{
    margin:24px 0 34px;
    padding:20px 22px;
    border-radius:16px;
    background:#fff7db;
    border:1px solid #f3df94;
}
.legal-notice strong{display:block;margin-bottom:5px}
.legal-notice p{margin:0;color:#665b35}
@media(max-width:760px){
    .legal-hero{padding:54px 0}
    .legal-content-section{padding:54px 0 86px}
    .legal-card{padding:28px 22px;border-radius:20px}
}


/* V39 – imported Radio Mosaik legal text */
.legal-source-content h2{
    margin-top:0;
    font-size:30px;
    letter-spacing:-.025em;
}
.legal-source-content h3{
    margin:36px 0 12px;
    font-size:21px;
}
.legal-source-content h4{
    margin:28px 0 10px;
    font-size:17px;
}
.legal-source-content ul{
    margin:10px 0 0;
    padding-left:22px;
    color:#626d78;
    line-height:1.75;
}
.legal-source-content a{
    color:var(--blue);
    font-weight:750;
    text-underline-offset:3px;
}


/* V44 – Empfang auf der Startseite im Radio-Mosaik-Design */
.home-reception-showcase{
    position:relative;
    overflow:hidden;
    padding:92px 0 88px;
    background:#f5f7fa;
    color:#111820;
}

.home-reception-showcase::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    top:-145px;
    right:-90px;
    border-radius:50%;
    background:var(--yellow);
    opacity:.85;
}

.home-reception-showcase__head{
    position:relative;
    z-index:1;
    max-width:none;
    margin:0 0 34px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:36px;
    align-items:end;
    text-align:left;
}

.home-reception-showcase__head .eyebrow{
    grid-column:1 / -1;
    margin-bottom:-14px;
    color:var(--pink);
}

.home-reception-showcase__head h2{
    margin:0;
    max-width:760px;
    font-size:clamp(46px,5vw,68px);
    line-height:.98;
    letter-spacing:-.05em;
    color:#111820;
}

.home-reception-showcase__head p{
    grid-column:1;
    max-width:690px;
    margin:14px 0 0;
    color:#68727d;
    font-size:16px;
    line-height:1.65;
}

.home-reception-showcase__grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.home-reception-showcase__card{
    min-height:250px;
    padding:28px 26px 26px;
    border-radius:22px;
    background:#fff;
    border:1px solid #e2e7eb;
    text-align:left;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    box-shadow:0 8px 26px rgba(17,24,32,.035);
}

.home-reception-showcase__icon{
    position:relative;
    width:54px;
    height:54px;
    margin:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--pink);
    background:#fff1f6;
    border-radius:16px;
}

.home-reception-showcase__icon .fa-laptop{
    font-size:25px;
}

.home-reception-showcase__icon .fa-play{
    position:absolute;
    font-size:9px;
    color:var(--pink);
    margin-top:-2px;
}

.home-reception-showcase__icon .fa-mobile-screen-button,
.home-reception-showcase__icon .fa-amazon{
    font-size:26px;
}

.home-reception-showcase__card h3{
    margin:34px 0 8px;
    color:#111820;
    font-size:24px;
    line-height:1;
    font-style:normal;
    letter-spacing:-.025em;
}

.home-reception-showcase__card p{
    margin:0;
    color:#727c86;
    font-size:14px;
    line-height:1.6;
}

.home-reception-showcase__action{
    position:absolute;
    z-index:2;
    top:154px;
    right:max(20px, calc((100vw - 1180px) / 2));
    margin:0;
}

.home-reception-showcase__button{
    min-height:50px;
    padding:0 21px;
    border:0;
    border-radius:999px;
    background:#111820;
    color:#fff;
    text-decoration:none;
    text-transform:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:12px;
    font-weight:850;
    letter-spacing:0;
    transition:transform .2s ease, background .2s ease;
}

.home-reception-showcase__button:hover{
    transform:translateY(-2px);
    background:var(--pink);
}

@media(max-width:980px){
    .home-reception-showcase__head{
        grid-template-columns:1fr;
        gap:0;
    }

    .home-reception-showcase__action{
        position:static;
        margin-top:28px;
    }
}

@media(max-width:760px){
    .home-reception-showcase{
        padding:66px 0 64px;
    }

    .home-reception-showcase__head{
        margin-bottom:26px;
    }

    .home-reception-showcase__head .eyebrow{
        margin-bottom:14px;
    }

    .home-reception-showcase__head h2{
        font-size:clamp(40px,11vw,54px);
    }

    .home-reception-showcase__head p{
        margin-top:14px;
        font-size:15px;
    }

    .home-reception-showcase__grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .home-reception-showcase__card{
        min-height:170px;
        padding:24px 22px;
    }

    .home-reception-showcase__card h3{
        margin-top:26px;
        font-size:23px;
    }

    .home-reception-showcase__action{
        margin-top:24px;
    }

    .home-reception-showcase__button{
        width:100%;
    }
}


/* V45 – Empfang: große Icons wie in der Referenz */
.home-reception-showcase__card{
    min-height:340px;
    align-items:center;
    text-align:center;
    justify-content:flex-start;
}

.home-reception-showcase__icon{
    width:auto;
    height:132px;
    margin:8px 0 18px;
    background:transparent;
    border-radius:0;
    color:var(--pink);
}

.home-reception-showcase__icon .fa-laptop{
    font-size:104px;
}

.home-reception-showcase__icon .fa-play{
    font-size:28px;
    margin-top:-7px;
}

.home-reception-showcase__icon .fa-mobile-screen-button,
.home-reception-showcase__icon .fa-amazon{
    font-size:104px;
}

.home-reception-showcase__card h3{
    margin:12px 0 10px;
    font-size:28px;
    text-align:center;
}

.home-reception-showcase__card p{
    max-width:310px;
    text-align:center;
}

.home-reception-showcase__action{
    position:static;
    display:flex;
    justify-content:center;
    margin-top:36px;
}

.home-reception-showcase__button{
    min-width:190px;
}

/* V45 – Social Icons im Header */
.header-social{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:8px;
}

.header-social a{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid #e3e8ec;
    background:#fff;
    color:#111820;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:15px;
    transition:transform .18s ease, border-color .18s ease, color .18s ease;
}

.header-social a:hover{
    transform:translateY(-2px);
    border-color:var(--pink);
    color:var(--pink);
}

.mobile-social{
    display:none;
}

@media(max-width:900px){
    .header-social{
        display:none;
    }

    .mobile-social{
        display:flex;
        gap:10px;
        padding-top:14px;
        margin-top:14px;
        border-top:1px solid #e8ecef;
    }

    .mobile-social a{
        width:42px;
        height:42px;
        border-radius:50%;
        background:#f5f7fa;
        color:#111820;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        text-decoration:none;
        font-size:16px;
    }
}

@media(max-width:760px){
    .home-reception-showcase__card{
        min-height:280px;
    }

    .home-reception-showcase__icon{
        height:112px;
        margin-top:0;
    }

    .home-reception-showcase__icon .fa-laptop{
        font-size:88px;
    }

    .home-reception-showcase__icon .fa-mobile-screen-button,
    .home-reception-showcase__icon .fa-amazon{
        font-size:88px;
    }

    .home-reception-showcase__icon .fa-play{
        font-size:24px;
    }

    .home-reception-showcase__action{
        margin-top:26px;
    }
}


/* V46 – Mobile Feinschliff: Header + Musikvorschlag */
@media(max-width:760px){
    /* Header: kompakter, Social Icons nicht neben dem Hamburger */
    .site-header .container,
    .header-inner{
        min-width:0;
    }

    .header-social{
        display:none!important;
    }

    /* Musikvorschlag: sauberer vertikaler Aufbau */
    .music-suggestion-section{
        padding:54px 0;
    }

    .music-suggestion-card{
        width:auto;
        min-height:0;
        margin:0;
        padding:30px 24px 24px;
        border-radius:24px;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
    }

    .music-suggestion-card::after{
        width:210px;
        height:210px;
        right:-76px;
        top:-70px;
        opacity:1;
    }

    .music-suggestion-copy{
        width:100%;
        max-width:none;
    }

    .music-suggestion-copy .eyebrow{
        position:relative;
        z-index:2;
        margin-bottom:16px;
        font-size:10px;
    }

    .music-suggestion-copy h2{
        position:relative;
        z-index:2;
        max-width:330px;
        margin:0 0 18px;
        font-size:clamp(39px,11.5vw,50px);
        line-height:.96;
        letter-spacing:-.045em;
    }

    .music-suggestion-copy p{
        position:relative;
        z-index:2;
        max-width:340px;
        margin:0;
        font-size:15px;
        line-height:1.65;
    }

    .music-suggestion-button{
        position:relative;
        z-index:3;
        width:100%;
        min-height:52px;
        margin:26px 0 0;
        padding:0 18px;
        align-self:stretch;
    }
}

@media(max-width:430px){
    .music-suggestion-section .container{
        width:calc(100% - 40px)!important;
        max-width:none!important;
        margin-left:20px!important;
        margin-right:20px!important;
    }

    .music-suggestion-card{
        padding:28px 22px 22px;
    }

    .music-suggestion-card::after{
        width:190px;
        height:190px;
        right:-72px;
        top:-62px;
    }

    .music-suggestion-copy h2{
        max-width:285px;
        font-size:clamp(37px,11.4vw,46px);
    }
}

@media(max-width:900px){
    .mobile-social{display:none!important}
    .mobile-menu.is-open .mobile-social,
    .mobile-nav.is-open .mobile-social,
    [aria-expanded="true"] + .mobile-menu .mobile-social{display:flex!important}
}


/* V47 – Mobile Header + Musikvorschlag finaler Feinschliff */
@media(max-width:900px){
    /* Social Icons bleiben auch mobil sichtbar – direkt im Header */
    .header-social{
        display:flex!important;
        margin-left:6px;
        gap:6px;
    }

    .header-social a{
        width:36px;
        height:36px;
        font-size:14px;
        background:#f5f7fa;
        border-color:#edf0f3;
    }

    /* Doppelte Social Links im aufgeklappten Menü vermeiden */
    .mobile-social{
        display:none!important;
    }
}

@media(max-width:760px){
    .music-suggestion-section{
        padding:46px 0 54px;
    }

    .music-suggestion-section .container{
        width:calc(100% - 32px)!important;
        max-width:none!important;
        margin-left:16px!important;
        margin-right:16px!important;
    }

    .music-suggestion-card{
        min-height:0;
        padding:26px 22px 22px;
        border-radius:24px;
        overflow:hidden;
    }

    .music-suggestion-card::after{
        width:150px;
        height:150px;
        right:-48px;
        top:-44px;
    }

    .music-suggestion-copy{
        position:relative;
        z-index:2;
    }

    .music-suggestion-copy .eyebrow{
        margin-bottom:14px;
    }

    .music-suggestion-copy h2{
        max-width:100%;
        margin:0 0 16px;
        font-size:clamp(34px,9.7vw,42px);
        line-height:.98;
        letter-spacing:-.04em;
    }

    /* Auf kleinen Displays keine künstliche Zeilenbrechung erzwingen */
    .music-suggestion-copy h2 br{
        display:none;
    }

    .music-suggestion-copy p{
        max-width:100%;
        margin:0;
        font-size:14px;
        line-height:1.62;
    }

    .music-suggestion-button{
        width:100%;
        min-height:50px;
        margin-top:22px;
        padding:0 16px;
        font-size:12px;
    }
}

@media(max-width:430px){
    .site-header .container,
    .header-inner{
        width:calc(100% - 24px)!important;
        max-width:none!important;
        margin-left:12px!important;
        margin-right:12px!important;
    }

    .header-social{
        gap:5px;
        margin-left:4px;
    }

    .header-social a{
        width:34px;
        height:34px;
        font-size:13px;
    }

    .music-suggestion-section .container{
        width:calc(100% - 28px)!important;
        margin-left:14px!important;
        margin-right:14px!important;
    }

    .music-suggestion-card{
        padding:24px 20px 20px;
    }

    .music-suggestion-card::after{
        width:135px;
        height:135px;
        right:-44px;
        top:-40px;
    }

    .music-suggestion-copy h2{
        font-size:clamp(32px,9.4vw,39px);
    }
}


/* V48 – Musikvorschlag mobil: kompakter und ohne Überlagerungen */
@media(max-width:760px){
    .music-suggestion-section{
        padding:40px 0 42px;
    }

    .music-suggestion-section .container{
        width:calc(100% - 28px)!important;
        max-width:none!important;
        margin-left:14px!important;
        margin-right:14px!important;
    }

    .music-suggestion-card{
        min-height:0!important;
        padding:24px 20px 20px!important;
        border-radius:24px;
        display:block!important;
    }

    .music-suggestion-card::after{
        width:118px!important;
        height:118px!important;
        right:-30px!important;
        top:-28px!important;
        opacity:.95;
    }

    .music-suggestion-copy{
        width:100%;
        max-width:none;
    }

    .music-suggestion-copy .eyebrow{
        margin-bottom:14px;
        padding-right:90px;
    }

    .music-suggestion-copy h2{
        width:auto;
        max-width:300px!important;
        margin:0 0 14px!important;
        padding:0!important;
        font-size:clamp(30px,8.9vw,38px)!important;
        line-height:1!important;
        letter-spacing:-.035em!important;
        position:relative;
        z-index:2;
    }

    .music-suggestion-copy h2 br{
        display:none!important;
    }

    .music-suggestion-copy p{
        width:auto;
        max-width:100%!important;
        margin:0!important;
        padding:0!important;
        font-size:14px!important;
        line-height:1.55!important;
        position:relative;
        z-index:2;
    }

    .music-suggestion-button{
        width:100%!important;
        min-height:48px!important;
        margin:20px 0 0!important;
        padding:0 16px!important;
        font-size:12px!important;
        border-radius:999px;
    }

    /* Kein unnötig großer Abstand zur nächsten Section */
    .music-suggestion-section + .social-section{
        margin-top:0!important;
    }

    .social-section{
        padding-top:46px!important;
    }
}

@media(max-width:430px){
    .music-suggestion-section .container{
        width:calc(100% - 24px)!important;
        margin-left:12px!important;
        margin-right:12px!important;
    }

    .music-suggestion-card{
        padding:22px 18px 18px!important;
    }

    .music-suggestion-card::after{
        width:105px!important;
        height:105px!important;
        right:-28px!important;
        top:-24px!important;
    }

    .music-suggestion-copy .eyebrow{
        padding-right:78px;
    }

    .music-suggestion-copy h2{
        max-width:270px!important;
        font-size:clamp(29px,8.7vw,35px)!important;
    }
}


/* V49 – Desktop-Zeilenumbruch im Musikvorschlag mobil als Leerzeichen behandeln */
@media(max-width:760px){
    .music-suggestion-copy h2 br{
        display:inline!important;
    }

    .music-suggestion-copy h2 br::after{
        content:" ";
    }
}

.mobile-break-space{display:none}
@media(max-width:760px){
    .music-suggestion-copy h2 br{display:none!important}
    .music-suggestion-copy h2 .mobile-break-space{display:inline}
}