:root{
    --bg:#070b10;
    --card:#121922cc;
    --card2:#17202bcc;
    --line:rgba(255,255,255,.13);
    --text:#f4f5f7;
    --muted:#aeb7c3;
    --accent:#f7b51e;
    --accent2:#ff8a00;
    --green:#1ed760;
    --red:#ff1f2d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background:
        radial-gradient(circle at 20% 10%, rgba(247,181,30,.17), transparent 32%),
        radial-gradient(circle at 90% 20%, rgba(255,138,0,.12), transparent 30%),
        linear-gradient(180deg,#05070a,#0a1017 35%,#070b10);
    color:var(--text);
}
body:before{
    content:"";
    position:fixed; inset:0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.12)),
        url("https://i.ytimg.com/vi/y6Hi6RFgezU/maxresdefault.jpg");
    background-size:cover;
    background-position:center top;
    opacity:.22;
    filter:blur(1px) saturate(1.1);
    z-index:-2;
}
body:after{
    content:"";
    position:fixed; inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.35),#070b10 54%,#070b10);
    z-index:-1;
}
.hero{
    min-height:430px;
    padding:24px 6vw 42px;
    border-bottom:1px solid var(--line);
}
nav{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
}
.brand{
    display:flex;
    align-items:center;
    gap:14px;
}
.logo{
    width:72px;height:72px;border-radius:50%;
    display:grid;place-items:center;
    font-size:42px;
    background:linear-gradient(145deg,#ffcf3d,#ad6b00);
    box-shadow:0 0 35px rgba(247,181,30,.25);
}
.brand strong{
    display:block;
    font-size:30px;
    line-height:.82;
    letter-spacing:1px;
}
.brand span{
    display:block;
    margin-top:8px;
    color:var(--accent);
    font-weight:800;
    font-size:12px;
}
.navlinks{
    display:flex;
    gap:36px;
    align-items:center;
}
.navlinks a{
    color:#fff;
    text-decoration:none;
    padding:12px 0;
    opacity:.9;
}
.navlinks .active{
    color:#fff;
    border-bottom:3px solid var(--accent);
}
.hero-content{
    margin-top:80px;
    max-width:850px;
}
h1{
    margin:0;
    font-size:clamp(42px,5vw,72px);
    font-weight:400;
    letter-spacing:-2px;
}
h1 span{
    color:var(--accent);
    font-weight:900;
    text-shadow:0 0 28px rgba(247,181,30,.25);
}
.hero-content p{
    font-size:22px;
    line-height:1.45;
    color:#fff;
    text-shadow:0 1px 14px rgba(0,0,0,.8);
}
.hero-buttons{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}
.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 24px;
    border-radius:10px;
    text-decoration:none;
    font-weight:800;
}
.primary{background:linear-gradient(135deg,var(--accent),#ffca3d);color:#05070a}
.ghost{border:1px solid rgba(255,255,255,.45);color:#fff;background:rgba(0,0,0,.22)}
main{padding:28px 5vw}
.content{
    display:grid;
    grid-template-columns:minmax(0,1fr) 430px;
    gap:34px;
    max-width:1740px;
    margin:0 auto;
}
.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}
h2{font-size:30px;margin:0}
h2 span{
    display:inline-flex;
    margin-left:10px;
    font-size:17px;
    color:var(--accent);
    border:1px solid var(--accent);
    border-radius:999px;
    padding:4px 11px;
}
select,.searchbox{
    background:rgba(17,24,33,.85);
    color:#fff;
    border:1px solid var(--line);
    border-radius:10px;
}
select{padding:12px 18px;font-size:16px}
.episodes{display:flex;flex-direction:column;gap:14px}
.episode{
    display:grid;
    grid-template-columns:280px 1fr 82px;
    gap:22px;
    align-items:center;
    min-height:150px;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    background:linear-gradient(135deg,rgba(20,28,38,.88),rgba(13,19,26,.88));
    box-shadow:0 12px 35px rgba(0,0,0,.22);
}
.thumb{
    position:relative;
    height:150px;
    display:block;
    overflow:hidden;
    background:#000;
}
.thumb img{
    width:100%;height:100%;object-fit:cover;
}
.thumb b{
    position:absolute;
    top:12px;right:12px;
    background:rgba(0,0,0,.65);
    border:1px solid rgba(255,255,255,.18);
    padding:5px 8px;
    border-radius:8px;
    font-size:22px;
}
.episode-main h3{
    margin:0 0 10px;
    font-size:26px;
}
.meta{
    color:var(--muted);
    margin-bottom:10px;
}
.episode-main p{
    color:#d5d9df;
    line-height:1.45;
    margin:0 0 12px;
}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag,.cat{
    border:1px solid var(--line);
    background:rgba(255,255,255,.06);
    color:#fff;
    border-radius:8px;
    padding:7px 10px;
    cursor:pointer;
}
.actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    font-size:30px;
}
.actions a{
    width:42px;height:42px;border-radius:50%;
    display:grid;place-items:center;
    text-decoration:none;
    color:#fff;
    font-weight:900;
}
.yt{background:var(--red)}
.sp{background:var(--green);color:#07100a!important}
.actions span{font-size:46px;color:#fff}
.right{display:flex;flex-direction:column;gap:18px}
.searchbox{
    height:56px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 18px;
    font-size:24px;
}
.searchbox input{
    flex:1;
    background:transparent;
    border:0;
    outline:0;
    color:#fff;
    font-size:16px;
}
.card{
    border:1px solid var(--line);
    border-radius:12px;
    background:linear-gradient(135deg,rgba(20,28,38,.86),rgba(12,18,25,.86));
    padding:22px;
}
.card h3{font-size:24px;margin:0 0 14px}
.card p{color:#d8dde4;line-height:1.45}
.catgrid{display:flex;flex-wrap:wrap;gap:10px}
.cat.active{
    background:linear-gradient(135deg,var(--accent),#ffca3d);
    color:#07100a;
    border-color:transparent;
    font-weight:900;
}
.cat span{
    margin-left:8px;
    opacity:.85;
}
.subscribe{display:flex;gap:12px;flex-wrap:wrap}
.subscribe a{
    text-decoration:none;
    color:#05070a;
    background:var(--accent);
    font-weight:900;
    padding:11px 14px;
    border-radius:10px;
}
footer{
    text-align:center;
    color:#8e98a7;
    padding:28px;
}
@media(max-width:1100px){
    .content{grid-template-columns:1fr}
    .right{order:-1}
}
@media(max-width:760px){
    .hero{padding:18px 18px 34px}
    nav{flex-direction:column}
    .navlinks{gap:16px;flex-wrap:wrap}
    .hero-content{margin-top:45px}
    .episode{grid-template-columns:1fr}
    .thumb{height:210px}
    .episode-main{padding:0 18px}
    .actions{flex-direction:row;justify-content:flex-end;padding:0 18px 18px}
}

.hero-content p:empty{display:none}

.mini-yt,.mini-sp{
    width:22px;height:22px;border-radius:50%;
    display:inline-block;vertical-align:middle;
    background-size:cover;background-position:center;
}
.mini-yt{
    background:
      radial-gradient(circle,#ff3636 0 62%,transparent 63%),
      #111;
    position:relative;
}
.mini-yt:after{
    content:"";
    position:absolute;
    left:8px;top:6px;
    border-left:8px solid #fff;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
}
.mini-sp{
    background:radial-gradient(circle,#19ff52 0 60%,#07140a 61%);
    position:relative;
}
.mini-sp:before{
    content:"";
    position:absolute;
    left:5px;right:5px;top:7px;height:8px;
    border-top:3px solid #d9ffe1;
    border-radius:50%;
    box-shadow:0 4px 0 -1px #d9ffe1,0 8px 0 -2px #d9ffe1;
}

.icon-yt,.icon-sp{
    width:42px;height:42px;border-radius:50%;
    display:block;position:relative;
    box-shadow:0 0 22px currentColor;
}
.icon-yt{
    background:#090909;
    color:#ff2020;
}
.icon-yt:before{
    content:"";
    position:absolute;inset:7px;
    border:3px solid #ff2020;
    border-radius:12px;
}
.icon-yt:after{
    content:"";
    position:absolute;
    left:17px;top:14px;
    border-left:11px solid #ff2020;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
}
.icon-sp{
    background:#07140a;
    color:#15ff47;
    border:3px solid #15ff47;
}
.icon-sp:before{
    content:"";
    position:absolute;
    left:8px;right:8px;top:12px;height:13px;
    border-top:4px solid #caffd0;
    border-radius:50%;
    box-shadow:0 6px 0 -1px #caffd0,0 12px 0 -2px #caffd0;
}
.yt,.sp{background:transparent!important}

/* Clean-up: keine Symbol-Bastelei mehr */
.mini-yt,.mini-sp,.icon-yt,.icon-sp{display:none!important}

.actions{
    gap:10px!important;
    font-size:14px!important;
}
.actions a{
    width:auto!important;
    height:auto!important;
    border-radius:999px!important;
    padding:9px 13px!important;
    font-size:13px!important;
    font-weight:900!important;
    box-shadow:none!important;
}
.actions .yt{
    background:#ff1f2d!important;
    color:#fff!important;
}
.actions .sp{
    background:#1ed760!important;
    color:#061008!important;
}
.actions span{
    font-size:34px!important;
}

.episode-main p:empty{display:none}
.tags{display:none!important}

.actions{
    min-width:92px!important;
}
.actions a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:78px!important;
}

.actions{
    min-width:112px!important;
    gap:9px!important;
}
.actions a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    min-width:102px!important;
    height:34px!important;
    padding:0 12px!important;
    border-radius:999px!important;
    font-size:13px!important;
    font-weight:900!important;
    text-decoration:none!important;
    border:1px solid rgba(255,255,255,.14)!important;
    box-shadow:0 8px 22px rgba(0,0,0,.25)!important;
}
.actions a svg{
    width:18px!important;
    height:18px!important;
    display:block!important;
    fill:currentColor!important;
}
.actions .yt{
    background:linear-gradient(135deg,#ff1f2d,#c90012)!important;
    color:#fff!important;
}
.actions .sp{
    background:linear-gradient(135deg,#1ed760,#13aa49)!important;
    color:#061008!important;
}
.actions span{
    font-size:13px!important;
    color:inherit!important;
}
.actions > span:last-child{
    font-size:30px!important;
    color:#fff!important;
}

.episode{
    grid-template-columns:260px minmax(0,1fr) 145px!important;
}

.actions{
    min-width:135px!important;
    padding-right:14px!important;
}

.actions a{
    min-width:112px!important;
    max-width:112px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
}

.episode-main{
    min-width:0!important;
}

.arrow,
.more{
    display:none!important;
}

.actions{
    justify-content:center!important;
}

.actions > span{
    display:none!important;
}

.desc{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.desc.open{
    display:block;
    overflow:visible;
}

.moredesc{
    margin-top:6px;
    border:1px solid rgba(247,181,30,.55);
    background:rgba(247,181,30,.12);
    color:#f7b51e;
    border-radius:999px;
    padding:6px 11px;
    font-weight:800;
    cursor:pointer;
}

.navlinks{
    display:none!important;
}

/* Mobile Fix */
@media(max-width:760px){

    body:before{
        background-position:center top!important;
        opacity:.18!important;
    }

    .hero{
        min-height:auto!important;
        padding:18px 16px 26px!important;
    }

    nav{
        display:block!important;
    }

    .brand{
        transform:scale(.78)!important;
        transform-origin:left top!important;
    }

    .hero-content{
        margin-top:36px!important;
    }

    h1{
        font-size:38px!important;
        line-height:1.05!important;
        letter-spacing:-1px!important;
    }

    .hero-content p{
        font-size:15px!important;
        line-height:1.35!important;
    }

    .hero-buttons{
        flex-direction:column!important;
        gap:10px!important;
        max-width:320px!important;
    }

    .btn{
        width:100%!important;
        justify-content:center!important;
        padding:14px 16px!important;
        font-size:14px!important;
    }

    main{
        padding:18px 12px!important;
    }

    .content{
        display:block!important;
    }

    .right{
        margin-top:18px!important;
    }

    .section-head{
        flex-direction:column!important;
        align-items:stretch!important;
        gap:12px!important;
    }

    .searchbox{
        height:50px!important;
    }

    .episode{
        grid-template-columns:1fr!important;
        gap:0!important;
        min-height:0!important;
    }

    .thumb{
        height:auto!important;
        aspect-ratio:16/9!important;
    }

    .episode-main{
        padding:14px 14px 8px!important;
    }

    .episode-main h3{
        font-size:21px!important;
        line-height:1.18!important;
    }

    .episode-main p{
        font-size:14px!important;
        line-height:1.45!important;
    }

    .actions{
        width:100%!important;
        min-width:0!important;
        flex-direction:row!important;
        justify-content:flex-start!important;
        padding:4px 14px 14px!important;
    }

    .actions a{
        min-width:104px!important;
        max-width:none!important;
    }

    .card{
        padding:18px!important;
    }
}

/* FINAL MOBILE OVERRIDE */
@media(max-width:760px){

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

    .content{
        display:flex!important;
        flex-direction:column!important;
        gap:18px!important;
        width:100%!important;
        max-width:100%!important;
    }

    .left,
    .right{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .right{
        order:2!important;
    }

    .left{
        order:1!important;
    }

    .episode{
        display:flex!important;
        flex-direction:column!important;
        width:100%!important;
        max-width:100%!important;
        overflow:hidden!important;
    }

    .thumb{
        width:100%!important;
        height:auto!important;
        aspect-ratio:16/9!important;
    }

    .thumb img{
        width:100%!important;
        height:100%!important;
        object-fit:cover!important;
    }

    .episode-main{
        width:100%!important;
        padding:14px!important;
    }

    .episode-main h3{
        font-size:22px!important;
        line-height:1.2!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
    }

    .actions{
        width:100%!important;
        display:flex!important;
        flex-direction:row!important;
        justify-content:flex-start!important;
        gap:10px!important;
        padding:0 14px 14px!important;
        min-width:0!important;
    }

    .actions a{
        flex:0 0 auto!important;
        min-width:108px!important;
        max-width:none!important;
    }

    .section-head{
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:space-between!important;
    }

    .section-head h2{
        font-size:30px!important;
    }

    .section-head select{
        width:auto!important;
        max-width:180px!important;
    }

    .searchbox{
        width:100%!important;
    }
}

@media(max-width:760px){

    .right{
        order:0!important;
        display:flex!important;
        flex-direction:column!important;
    }

    .right .searchbox{
        order:2!important;
    }

    .right #podcast{
        order:1!important;
    }

    .right #abo{
        order:3!important;
    }

    .left{
        order:1!important;
    }

    #podcast p{
        display:-webkit-box!important;
        -webkit-line-clamp:2!important;
        -webkit-box-orient:vertical!important;
        overflow:hidden!important;
    }

    #podcast.open p{
        display:block!important;
        overflow:visible!important;
    }
}

/* YouTube / Spotify Hero Buttons */
.hero-buttons .primary{
    background:linear-gradient(135deg,#ff1f2d,#c90012)!important;
    color:#fff!important;
    box-shadow:0 10px 28px rgba(255,31,45,.24)!important;
}

.hero-buttons .ghost{
    background:linear-gradient(135deg,#1ed760,#0da84a)!important;
    color:#061008!important;
    border:0!important;
    box-shadow:0 10px 28px rgba(30,215,96,.22)!important;
}

/* Über den Podcast: erst kompakt, dann ausklappbar */
#podcast p{
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

#podcast.open p{
    display:block;
    overflow:visible;
}

/* Abo ohne RSS, sauberere Buttons */
.subscribe a{
    min-width:110px;
    text-align:center;
}

/* Episode Buttons etwas hochwertiger */
.actions .yt{
    background:linear-gradient(135deg,#ff1f2d,#c90012)!important;
    color:#fff!important;
}

.actions .sp{
    background:linear-gradient(135deg,#1ed760,#0da84a)!important;
    color:#061008!important;
}

/* Mobile Reihenfolge */
@media(max-width:760px){
    .right{order:0!important}
    .right #podcast{order:1!important}
    .right .searchbox{order:2!important}
    .right #abo{order:3!important}
    .left{order:1!important}
}

.mainsearch{
    margin-bottom:18px!important;
}

@media(max-width:760px){
    .mainsearch{
        order:0!important;
        margin-bottom:14px!important;
    }

    .right{
        order:0!important;
    }

    .left{
        order:1!important;
    }

    #podcast p{
        display:-webkit-box!important;
        -webkit-line-clamp:2!important;
        -webkit-box-orient:vertical!important;
        overflow:hidden!important;
    }

    #podcast.open p{
        display:block!important;
        overflow:visible!important;
    }
}

.episode.is-hidden{
    display:none!important;
}