/* Torsten Emrich – Wunderbare Welt
   Headlines: House Gothic BoldThree (als Bild, wie Cover) · Text: Oswald */
@font-face{font-family:"Oswald";src:url(fonts/oswald.woff2) format("woff2");font-weight:200 700;font-display:swap}

:root{
  --night:#0d0b0a; --night2:#17120f; --paper:#efe4cc; --paper2:#e4d6b8;
  --red:#d3201f; --red-dk:#9e1616; --gold:#f2c46b; --ink:#1a1512; --text:#efe6d6; --muted:#b7a993;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--night);color:var(--text);font:400 18px/1.6 "Oswald",Arial Narrow,sans-serif;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)} .small{font-size:15px}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:linear-gradient(#0d0b0ae6,#0d0b0a00);transition:background .3s}
.nav.is-solid{background:#0d0b0af2;box-shadow:0 2px 20px #0008}
.nav__brand{color:#fff;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:17px}
.nav__links{display:flex;gap:26px;align-items:center}
.nav__links a{color:var(--text);text-decoration:none;text-transform:uppercase;font-size:15px;letter-spacing:.1em}
.nav__links a:hover{color:var(--gold)}
.nav__cta{background:var(--red);padding:7px 14px;color:#fff!important}
.nav__toggle{display:none;background:none;border:0;width:34px;height:28px;flex-direction:column;justify-content:space-between;cursor:pointer}
.nav__toggle span{display:block;height:3px;background:#fff}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:80px}
.hero__bg{position:absolute;inset:0;background:url(img/hero-bg.webp) center 30%/cover;filter:blur(3px) saturate(1.1);transform:scale(1.06);opacity:.38}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 70% 40%,#d3201f33,transparent 60%),linear-gradient(180deg,#0d0b0a66,#0d0b0a 96%)}
.hero__beams{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__beams i{position:absolute;bottom:-10%;width:22vw;height:150vh;transform-origin:50% 100%;background:linear-gradient(to top,#fff3d455,#fff3d400 75%);clip-path:polygon(44% 100%,56% 100%,100% 0,0 0);filter:blur(6px);mix-blend-mode:screen;animation:sweep 9s ease-in-out infinite alternate}
.hero__beams i:nth-child(1){left:4%;animation-delay:-2s}
.hero__beams i:nth-child(2){left:24%;animation-delay:-6s;animation-duration:11s}
.hero__beams i:nth-child(3){right:24%;animation-delay:-4s;animation-duration:10s}
.hero__beams i:nth-child(4){right:4%;animation-delay:-1s}
@keyframes sweep{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.hero__inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:40px 28px 70px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.kicker{display:inline-block;background:var(--red);color:#fff;text-transform:uppercase;letter-spacing:.14em;font-size:15px;padding:4px 12px;margin-bottom:22px}
.hero__title img{width:100%;height:auto}
.hero__title img:first-child{width:86.4%}
.hero__title img+img{margin-top:2%}
.hero__lead{font-size:21px;max-width:560px;margin:26px 0 30px;color:var(--text)}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:16px;padding:13px 24px;border:2px solid var(--red);transition:.2s}
.btn:hover{background:var(--red-dk);border-color:var(--red-dk)}
.btn--ghost{background:transparent;border-color:var(--paper);color:var(--paper)}
.btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero__cover img{width:100%;height:auto;box-shadow:0 30px 80px #000c,0 0 0 1px #ffffff14}

/* TICKER */
.ticker{position:relative;z-index:2;background:var(--red);overflow:hidden;white-space:nowrap;padding:10px 0}
.ticker__track{display:inline-block;animation:tick 70s linear infinite}
.ticker span{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:16px;color:#fff;padding:0 22px}
.ticker span::after{content:"★";padding-left:44px;color:#ffffff99}
@keyframes tick{to{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding:100px 0}
.section--red{background:linear-gradient(135deg,var(--red-dk),var(--red))}
.section--paper{background:var(--paper) url(img/hero-bg.webp) center/cover;background-blend-mode:luminosity;position:relative;color:var(--ink)}
.section--paper::before{content:"";position:absolute;inset:0;background:#efe4ccf0}
.section--paper>*{position:relative}
.section--dark{background:var(--night2)}
.head{margin:0 auto 22px;text-align:center}
.head img{display:inline-block;height:clamp(46px,7vw,84px);width:auto}
.head--left{text-align:left}
.intro{text-align:center;max-width:680px;margin:0 auto 50px;color:var(--muted)}

/* TRACKS */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.track{background:#1b1512;border:1px solid #ffffff12;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.track:hover{transform:translateY(-4px);box-shadow:0 18px 40px #000a}
.track__cover{position:relative;border:0;padding:0;cursor:pointer;background:#000;aspect-ratio:540/804;overflow:hidden}
.track__cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .3s}
.track:hover .track__cover img{transform:scale(1.03)}
.track__play{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:var(--red);box-shadow:0 6px 24px #000a;transition:transform .2s}
.track__play::before{content:"";position:absolute;left:31px;top:24px;border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent #fff}
.track__cover:hover .track__play{transform:scale(1.1)}
.track.is-playing .track__play::before{left:27px;top:25px;width:8px;height:28px;border:0;background:#fff;box-shadow:16px 0 0 #fff}
.track.is-playing .track__cover img{filter:brightness(.75)}
.track__body{padding:18px 20px 20px}
.track__no{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.track__title{font-size:28px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.15;margin:2px 0 12px;color:#fff}
.track__bar{height:6px;background:#ffffff1f;cursor:pointer;position:relative}
.track__progress{height:100%;width:0;background:var(--red)}
.track__meta{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:6px}
.track__dl{display:inline-block;margin-top:12px;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--paper);text-decoration:none;border-bottom:1px solid #ffffff44}
.track__dl::before{content:"↓ "}
.track__dl:hover{color:var(--gold);border-color:var(--gold)}

.tracks .track:last-child:nth-child(3n+1){grid-column:2}
@media (max-width:980px){.tracks .track:last-child:nth-child(3n+1){grid-column:auto}.tracks .track:last-child:nth-child(2n+1){grid-column:1/-1;justify-self:center;width:calc(50% - 17px)}}
@media (max-width:540px){.tracks .track:last-child:nth-child(2n+1){width:auto;justify-self:stretch}}

/* SPOT */
.spot{display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:center}
.spot__video video{width:min(360px,80vw);height:auto;aspect-ratio:9/16;background:#000;box-shadow:0 30px 70px #0009;border:6px solid #fff}
.spot__text p{font-size:21px;max-width:520px;margin-bottom:12px}
.spot__text .muted{color:#ffd9d2;font-size:16px}

/* ALBUM */
.album{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.album__cover{position:sticky;top:100px}
.album__cover img{width:100%;aspect-ratio:1;object-fit:cover;box-shadow:0 30px 80px #000c}
.album__facts{color:var(--muted);margin-bottom:22px}
.tracklist{columns:2;column-gap:40px;counter-reset:t;list-style:none}
.tracklist li{counter-increment:t;break-inside:avoid;padding:7px 0;border-bottom:1px solid #ffffff14;text-transform:uppercase;letter-spacing:.04em;font-size:17px}
.tracklist li::before{content:counter(t,decimal-leading-zero);color:var(--muted);font-size:14px;margin-right:12px}
.tracklist a{color:#fff;text-decoration:none}
.tracklist a:hover{color:var(--gold)}
.tracklist .is-sample::after,.dot{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-left:10px;vertical-align:middle}
.dot{margin:0 4px 0 0}
.platforms{margin-top:24px;padding:16px 20px;border-left:4px solid var(--red);background:#ffffff08}

/* BIO */
.bio{max-width:1100px}
.bio__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:start;margin-top:10px}
.bio__text p{font-size:19px;margin-bottom:16px}
.bio__text .bio__lead{font-size:23px;line-height:1.5;font-weight:500}
.bio__text h3{font-size:16px;text-transform:uppercase;letter-spacing:.16em;color:var(--red-dk);margin:30px 0 8px;padding-top:14px;border-top:2px solid #1a151222}
.bio__text a{color:var(--red-dk);font-weight:700;text-decoration:none;border-bottom:2px solid #d3201f55}
.bio__text a:hover{border-color:var(--red)}
.bio__side{position:sticky;top:100px}
.bio__quote{background:var(--red);color:#fff;font-size:34px;font-weight:700;text-transform:uppercase;line-height:1.1;padding:26px 28px;box-shadow:10px 10px 0 var(--ink);margin-bottom:34px}
.bio__facts{list-style:none;border-left:3px solid var(--red);padding-left:20px}
.bio__facts li{font-size:17px;padding:7px 0;line-height:1.35}
.bio__facts span{display:block;font-weight:700;color:var(--red-dk);font-size:20px}
.bio__end{margin-top:46px;text-align:center;font-size:clamp(22px,3vw,32px);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.bio__films{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end;margin:26px 0 30px}
.bio__films img{width:100%;box-shadow:0 14px 34px #1a151255}
.bio__films .bio__bluray img{box-shadow:none;filter:drop-shadow(0 14px 22px #1a151266);max-width:300px;margin:0 auto}
.bio__films figcaption{font-size:15px;margin-top:10px;color:#5a4d40;text-align:center}
@media (max-width:860px){.bio__grid{grid-template-columns:1fr;gap:30px}.bio__side{position:static}}

/* DISCO */
.disco{list-style:none;max-width:980px;margin:0 auto}
.disco__row{display:grid;grid-template-columns:84px 70px 1fr 240px;gap:24px;align-items:center;padding:16px 12px;border-bottom:1px solid #ffffff14}
.disco__thumb{width:84px;height:84px}
.disco__thumb img{width:100%;height:100%;object-fit:cover;box-shadow:0 6px 18px #0009}
.disco__vinyl{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,var(--red) 0 17%,#111 18% 21%,#1c1c1c 22% 30%,#111 31% 40%,#1c1c1c 41% 52%,#111 53% 64%,#1c1c1c 65% 100%);box-shadow:0 4px 14px #0008}
.disco__vinyl{position:relative}
.disco__vinyl::after{content:"";position:absolute;left:47%;top:47%;width:6%;height:6%;border-radius:50%;background:var(--night)}
.disco__year{font-size:24px;font-weight:700;color:var(--gold)}
.disco__title{font-size:22px;font-weight:700;text-transform:uppercase;color:#fff;line-height:1.2}
.disco__b{color:var(--gold);font-weight:400}
.disco__artist{color:var(--muted);font-size:16px}
.disco__badge{display:inline-block;margin-top:6px;background:var(--red);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.1em;padding:2px 8px}
.disco__label{text-align:right;font-size:21px;font-weight:700;color:#fff;line-height:1.3}
.disco__label span{display:block;font-size:15px;font-weight:400;margin-top:2px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.disco__row--album{background:linear-gradient(90deg,#d3201f22,transparent)}
@media (max-width:640px){
  .disco__row{grid-template-columns:64px 1fr;gap:6px 16px}
  .disco__thumb{width:64px;height:64px;grid-row:span 3}
  .disco__year{font-size:18px}
  .disco__label{text-align:left}
}

/* RADIO */
.radio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.radio__box{background:#ffffff08;border-top:4px solid var(--red);padding:26px}
.radio__box h3{text-transform:uppercase;letter-spacing:.12em;font-size:18px;color:var(--gold);margin-bottom:14px}
.radio__box dl{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:17px}
.radio__box dt{color:var(--muted)}
.radio__box p{margin-bottom:12px}
.dl-list{list-style:none}
.dl-list li{padding:6px 0;border-bottom:1px solid #ffffff14}
.dl-list a{color:var(--text);text-decoration:none}
.dl-list a::before{content:"↓ ";color:var(--red)}
.dl-list a:hover{color:var(--gold)}

/* FOOTER */
.footer{text-align:center;padding:36px 20px;font-size:15px;color:var(--muted);border-top:1px solid #ffffff12}
.footer a{color:var(--muted)}
.footer__credit{font-size:13px;margin-top:4px}

/* RESPONSIVE */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero__lead{margin-left:auto;margin-right:auto}
  .hero__btns{justify-content:center}
  .hero__cover{max-width:420px;margin:0 auto}
  .tracks{grid-template-columns:repeat(2,1fr)}
  .album{grid-template-columns:1fr}
  .album__cover{position:static;max-width:460px;margin:0 auto}
  .radio__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav__toggle{display:flex}
  .nav__links{position:fixed;top:56px;left:0;right:0;flex-direction:column;background:#0d0b0af7;padding:20px;gap:18px;display:none}
  .nav.is-open .nav__links{display:flex}
  .section{padding:70px 0}
  .spot{grid-template-columns:1fr;text-align:center;justify-items:center}
  .head--left{text-align:center}
  .tracklist{columns:1}
}
@media (max-width:540px){
  body{font-size:17px}
  .tracks{grid-template-columns:1fr;max-width:380px;margin:0 auto}
  .hero__lead{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .hero__beams i,.ticker__track{animation:none}
}
.btn--light{background:#fff;border-color:#fff;color:var(--red-dk);margin-top:14px}
.btn--light:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.bio__end span{display:block}
.bio__end .bio__end-pointe{color:var(--red);margin-top:6px}
.intro a{color:var(--gold)}
.radio__box .btn{margin:6px 0 10px}
.radio__hint{font-size:14px;color:var(--muted)}