:root{--u:calc(100vw/1425);--cream:#f5e7d5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#2b221b url(assets/img/bg-brown.webp) center top/cover fixed;color:#fff;font-family:'Barlow',Arial,sans-serif;font-weight:200;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3,p{margin:0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sec{position:relative;overflow:hidden}
.abs{position:absolute}
.ico{display:block;color:#fff;position:absolute}
.t50{font-weight:500;font-size:calc(50*var(--u));line-height:1.1;letter-spacing:.01em;text-transform:uppercase}
.t20{font-weight:500;font-size:calc(20*var(--u));line-height:calc(28*var(--u));letter-spacing:.07em}
.p16{font-size:calc(16*var(--u));line-height:1.6;font-weight:200}
.p15{font-size:calc(15*var(--u));line-height:1.6;font-weight:200}
.p16 a,.p15 a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}

/* Kopf */
.hero{height:calc(557*var(--u));background:#3a2e25 url(assets/img/hero-headphones.webp) center/cover no-repeat}
.hero .logo{left:calc(208*var(--u));top:calc(40*var(--u));width:calc(300*var(--u));height:auto}
.hero .logo img{display:block;width:100%;height:auto}
.hero .soc{left:calc(1402*var(--u));top:calc(54*var(--u));width:calc(22*var(--u));height:calc(22*var(--u))}
.hero .soc img{display:block;width:100%;height:100%}
.nav{left:calc(290*var(--u));top:calc(173*var(--u));height:calc(210*var(--u));border-left:1px solid var(--cream);padding-left:calc(24*var(--u))}
.nav a{position:absolute;left:calc(24*var(--u));font-size:calc(14*var(--u));font-weight:200;color:var(--cream);text-decoration:none;letter-spacing:.04em;white-space:nowrap;transition:opacity .2s}
.nav a:hover{opacity:.6}

/* Why audio */
.why{height:calc(938*var(--u));background:#1a1a1a url(assets/img/headphones-dark.webp) center/cover no-repeat}
.why .t50{left:calc(288*var(--u));top:calc(60*var(--u))}
.why .col{position:absolute;width:calc(260*var(--u))}
.why .col h3{margin-bottom:calc(14*var(--u))}
.why .col p+p{margin-top:calc(26*var(--u))}

/* Services */
.svc{height:calc(596*var(--u))}
.svc .t50{left:calc(271*var(--u));top:calc(21*var(--u))}
.svc .item{position:absolute}

/* About */
.about{height:calc(619*var(--u))}
.about .box{left:calc(80*var(--u));top:0;width:calc(631*var(--u));height:100%;background:rgba(255,255,255,.07)}
.about .t50{left:calc(288*var(--u));top:calc(32*var(--u))}
.about .txt{left:calc(300*var(--u));top:calc(131*var(--u));width:calc(343*var(--u))}
.about .txt p+p{margin-top:calc(24*var(--u))}
.about .img{left:calc(711*var(--u));top:0;width:calc(634*var(--u));height:100%;background:url(assets/img/about-mic.webp) center/cover no-repeat}

/* Audio */
.aud{height:calc(880*var(--u))}
.aud .t50{left:calc(287*var(--u));top:calc(50*var(--u))}
.aud .txt{width:calc(244*var(--u));text-align:justify;hyphens:auto}

/* Fuss */
.foot{height:calc(150*var(--u))}
.foot .txt{left:calc(299*var(--u));top:calc(15*var(--u));font-size:calc(14*var(--u));line-height:calc(17*var(--u));font-weight:200}
.foot b{font-weight:600}
.foot a{text-decoration:none}

/* Player in Wix-Massen */
.player{font-size:calc(14*var(--u));--pl-bg:rgba(255,255,255,.08);--pl-accent:#f5e7d5;--pl-accent-fg:#1a140f}
.player .pl-main{width:calc(40*var(--u));height:calc(40*var(--u))}
.player .pl-main svg{width:calc(20*var(--u));height:calc(20*var(--u))}
.player .pl-body{padding:calc(14*var(--u));gap:calc(8*var(--u))}
.player .pl-item{padding:calc(7*var(--u)) 2px}
.player .pl-btn svg{width:calc(18*var(--u));height:calc(18*var(--u))}
.player .pl-prev,.player .pl-next{width:calc(28*var(--u));height:calc(28*var(--u))}
.p1{left:calc(1027*var(--u));top:calc(389*var(--u));width:calc(350*var(--u));height:calc(129*var(--u))}
.p1 .player{height:100%}
.p2{left:calc(567*var(--u));top:calc(176*var(--u));width:calc(503*var(--u));height:calc(222*var(--u))}
.p3{left:calc(281*var(--u));top:calc(458*var(--u));width:calc(430*var(--u));height:calc(268*var(--u))}
.p2 .player,.p3 .player{height:100%}

/* Mobil / Tablet: Wix hat dafür ein eigenes Layout, hier sauber gestapelt */
@media (max-width:999px){
  :root{--u:1px}
  body{background-attachment:scroll}
  .t50{font-size:34px}
  .t20{font-size:19px;line-height:1.35;letter-spacing:.05em}
  .p16{font-size:16px}.p15{font-size:15px}
  .abs,.hero .logo,.hero .soc,.nav,.nav a,.why .t50,.why .col,.svc .t50,.svc .item,.about .box,.about .t50,.about .txt,.about .img,.aud .t50,.aud .txt,.foot .txt,.p1,.p2,.p3,.ico{position:static}
  .sec{height:auto!important;overflow:visible;padding:0 22px}
  .hero{min-height:min(88vh,560px);padding-top:30px;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:36px}
  .hero .logo{width:min(250px,70vw)}
  .hero .soc{position:absolute;right:22px;top:36px;width:22px;height:22px}
  .nav{border-left:1px solid var(--cream);padding-left:18px;height:auto;display:flex;flex-direction:column;gap:12px;margin-top:40px}
  .nav a{font-size:15px;left:auto}
  .why{padding-top:56px;padding-bottom:56px;background-position:60% center}
  .why .col{width:auto;margin:0}
  .why .col+.col{margin-top:34px}
  .why .ico{width:30px;height:34px;margin:40px 0 14px}
  .why{position:relative;isolation:isolate}
  .why::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:-1}
  .why .t50{margin-bottom:-6px}
  .svc{padding-top:56px;padding-bottom:56px}
  .svc .item{width:auto;margin:0}
  .svc .ico{width:28px;height:28px;margin:40px 0 12px}
  .svc .p1{margin-top:22px;width:auto;height:auto}
  .about{padding:0;display:flex;flex-direction:column}
  .about .box{background:rgba(255,255,255,.07);padding:50px 22px;order:1}
  .about .txt{margin-top:26px;width:auto}
  .about .img{order:2;height:62vw;min-height:260px;background-position:center}
  .aud{padding-top:56px;padding-bottom:56px}
  .aud .txt{width:auto;text-align:left;margin:26px 0 18px}
  .aud .p2,.aud .p3{width:auto;height:auto;margin-bottom:34px}
  .player{font-size:15px}
  .player .pl-btn svg{width:22px;height:22px}.player .pl-main{width:44px;height:44px}.player .pl-main svg{width:22px;height:22px}
  .player .pl-prev,.player .pl-next{width:32px;height:32px}.player .pl-item{padding:10px 2px}.player .pl-body{padding:16px;gap:12px}
  .foot{padding-top:30px;padding-bottom:44px;background:rgba(0,0,0,.22)}
  .foot .txt{font-size:14px;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}