@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/instrument-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/instrument-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
:root{
  --night:#1B4552;
  --night-2:#255563;
  --paper:#F4EFE5;
  --sand:#E7DAC4;
  --sky:#8FCBE0;
  --sky-deep:#3F87A3;
  --clay:#C4643F;
  --line-d:rgba(244,239,229,.18);
  --line-l:rgba(27,69,82,.14);
  --pad:clamp(20px,4vw,52px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--night);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.34;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.disp{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:700;letter-spacing:-.035em;line-height:.95}

/* ── top bar ── */
.bar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:14px var(--pad);background:rgba(244,239,229,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-l)}
.bar .brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:17px;letter-spacing:-.04em}
.bar nav{display:flex;gap:18px}
.bar nav a{color:rgba(27,69,82,.62)}
.bar nav a:hover{color:var(--clay)}
@media(max-width:640px){.bar nav a:nth-child(n+3){display:none}}

/* ── hero ── */
.hero{border-bottom:1px solid var(--line-l)}
.hero-txt{max-width:1080px;margin:0 auto;padding:clamp(52px,10vw,116px) var(--pad) clamp(44px,8vw,92px)}
.tagline{color:var(--sky-deep);margin-bottom:20px}
.hero h1{font-size:clamp(64px,17vw,210px);margin-bottom:26px}
.hero .lede{font-size:clamp(19px,2.6vw,27px);line-height:1.35;max-width:24ch;color:rgba(27,69,82,.78)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chip{border:1px solid var(--line-l);border-radius:999px;padding:6px 13px;color:rgba(27,69,82,.7)}

/* ── ticker ── */
.ticker{background:var(--night);color:var(--paper);overflow:hidden;padding:12px 0;border-bottom:1px solid var(--line-d)}
.ticker-row{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker span{padding:0 22px;color:rgba(244,239,229,.85)}
.ticker span i{color:var(--sky);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── sections ── */
section{padding:clamp(50px,7vw,92px) var(--pad)}
.inner{max-width:1080px;margin:0 auto;width:100%}
.head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:34px}
.head h2{font-size:clamp(30px,5vw,52px)}
.head .mono{color:var(--sky-deep)}
.dark{background:var(--night);color:var(--paper)}
.dark .head .mono{color:var(--sky)}
.dark p{color:rgba(244,239,229,.82)}

/* ── Bilder ── */
.shot{overflow:hidden;border-radius:4px;box-shadow:0 22px 50px -30px rgba(27,69,82,.7)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot-tall{aspect-ratio:3/4}

/* ── latest release ── */
.newrel{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
@media(min-width:820px){.newrel{grid-template-columns:.62fr 1.38fr;gap:44px}}
.newrel-body{display:flex;flex-direction:column;gap:22px}
.newrel-title{font-size:clamp(30px,5vw,54px);margin-bottom:8px}
.lang{display:block;color:var(--sky-deep);margin-bottom:14px;letter-spacing:.13em}

/* ── listen cards ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.card{
  display:flex;align-items:center;gap:13px;padding:17px 18px;
  border:1px solid var(--line-l);border-radius:14px;background:rgba(255,255,255,.42);
  transition:transform .22s ease,background .22s ease,border-color .22s ease;
}
.card:hover,.card:focus-visible{transform:translateY(-3px);background:var(--night);border-color:var(--night);color:var(--paper)}
.card svg{width:22px;height:22px;flex:0 0 22px;fill:currentColor;opacity:.9}
.card .nm{font-weight:500;flex:1}
.card .go{font-family:"IBM Plex Mono",monospace;font-size:13px;opacity:.5}
.card:hover .go{opacity:1;color:var(--sky)}

/* ── contact ── */
.contact-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
@media(min-width:820px){.contact-grid{grid-template-columns:.58fr 1.42fr;gap:50px}}

/* ── studio ── */
.studio{margin-bottom:30px;border-radius:4px;overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 20px 46px -30px rgba(27,69,82,.6)}
.studio img{width:100%;height:100%;object-fit:cover}

/* ── about ── */
.ilink{border-bottom:1px solid var(--clay);white-space:nowrap}
.ilink:hover{color:var(--sky)}

.about-grid{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:880px){.about-grid{grid-template-columns:.78fr 1.22fr;gap:56px;align-items:start}}
.about-grid p+p{margin-top:1em}
.portrait{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;
  box-shadow:0 22px 48px -26px rgba(0,0,0,.75)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:46% 30%}
.portrait figcaption{position:absolute;left:0;bottom:0;right:0;padding:14px 14px 12px;
  background:linear-gradient(to top,rgba(27,69,82,.82),transparent);color:rgba(244,239,229,.9)}
@media(min-width:880px){.portrait{position:sticky;top:86px}}
.quote{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(21px,2.8vw,30px);line-height:1.25;color:var(--sky);
  border-left:2px solid var(--clay);padding-left:20px;
}

/* ── facts ── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px 20px;margin-top:44px;padding-top:32px;border-top:1px solid var(--line-d)}
.facts .n{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.03em;font-size:clamp(19px,2.2vw,24px);display:block;color:var(--paper)}
.facts .t{display:block;margin-top:6px;color:rgba(244,239,229,.6)}

/* ── releases ── */
.players{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.players{grid-template-columns:repeat(3,1fr)}}
.sp{border-radius:12px;display:block;border:0}

.rel{display:flex;gap:16px;align-items:baseline;padding:17px 2px;border-bottom:1px solid var(--line-l)}
.rel:first-of-type{border-top:1px solid var(--line-l)}
.rel .yr{color:var(--clay);flex:0 0 52px}
.rel .ti{flex:1;font-weight:500;font-size:19px}
.rel .kd{color:rgba(27,69,82,.55)}

/* ── faq ── */
details{border-bottom:1px solid var(--line-l)}
details:first-of-type{border-top:1px solid var(--line-l)}
summary{cursor:pointer;list-style:none;padding:18px 2px;display:flex;justify-content:space-between;gap:14px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:500;letter-spacing:-.02em;font-size:19px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--clay)}
details[open] summary::after{content:"–"}
.ans{padding:0 2px 20px;max-width:62ch;color:rgba(27,69,82,.72)}

/* ── contact ── */
.breathe{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.04em;
  font-size:clamp(38px,9vw,104px);line-height:.95;color:var(--sand);margin-bottom:44px}
.mail{font-family:"Bricolage Grotesque",sans-serif;font-weight:500;letter-spacing:-.03em;
  font-size:clamp(24px,4.6vw,44px);color:var(--paper);border-bottom:2px solid var(--clay);
  display:inline-block;padding-bottom:4px;overflow-wrap:anywhere}
.mail:hover{color:var(--sky)}

footer{background:var(--night);color:rgba(244,239,229,.6);padding:34px var(--pad) 52px;border-top:1px solid var(--line-d)}
.foot{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:space-between;align-items:flex-end}
.foot a:hover{color:var(--sky)}
.foot nav{display:flex;flex-wrap:wrap;gap:14px 20px}

:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}


/* ── Rechtstexte ── */
.legal{max-width:760px;margin:0 auto;padding:clamp(46px,7vw,90px) var(--pad) clamp(60px,8vw,110px)}
.legal h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(38px,7vw,66px);line-height:1;margin-bottom:14px}
.legal .sub{color:rgba(27,69,82,.6);margin-bottom:40px;max-width:62ch}
.legal h2{font-size:clamp(22px,3vw,28px);margin:44px 0 14px}
.legal h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:18px;margin:28px 0 8px}
.legal p{margin-bottom:14px;max-width:70ch}
.legal ul{margin:0 0 16px 20px}
.legal li{margin-bottom:7px}
.legal a{border-bottom:1px solid var(--clay);overflow-wrap:anywhere}
.legal a:hover{color:var(--clay)}
.legal .block{border-left:2px solid var(--clay);padding-left:18px;margin:22px 0}
.legal .block p{margin-bottom:4px}
.back{display:inline-block;margin-bottom:34px;color:var(--sky-deep);border-bottom:1px solid var(--sky-deep)}