/* Delta Music — nur start */

.nav{display:flex; gap:20px; flex-wrap:wrap}
.nav a{font-size:12px; letter-spacing:.13em}
.nav a:hover{color:var(--ink)}
.hero{position:relative; overflow:hidden; padding-block:54px 44px}
.hero .oben{display:grid; gap:34px; grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .hero .oben{grid-template-columns:1fr 1fr; gap:48px} }
.kopftext{min-width:0}
.dreier{display:grid; gap:10px; min-width:0; position:relative; z-index:1;
  grid-template-columns:1.45fr 1fr; grid-template-rows:1fr 1fr}
.dreier figure{margin:0; background:var(--paper-2); overflow:hidden; min-height:0}
.dreier img{width:100%; height:100%; object-fit:cover; display:block}
.dreier .gross{grid-row:1 / span 2; aspect-ratio:2/3}
.dreier .klein{height:100%}
@media(min-width:900px){
  
  .grooves{display:none}
}
@media(max-width:899px){
  
  .hero .dreier{order:-1; gap:8px}
  .hero .dreier{grid-template-rows:auto auto}
  .hero .dreier .gross{aspect-ratio:5/4}
  .hero .dreier .klein{aspect-ratio:5/4; height:auto}
  .hero .oben{gap:26px}
}
.hero .proof{margin-top:30px}
.hero h1{font-size:clamp(33px,6.4vw,64px); margin-bottom:24px; max-width:16ch}
.pitch{max-width:58ch; font-size:clamp(17px,2vw,19px); margin:0 0 30px}
.proof{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  margin-top:34px; padding-top:16px; border-top:1px solid var(--hair); color:var(--grey)}
.proof b{color:var(--ink); font-weight:500}
.strip{background:var(--night); color:var(--on-ink)}
.strip .wrap{display:grid; grid-template-columns:1fr 1fr; padding:0}
@media(min-width:760px){ .strip .wrap{grid-template-columns:repeat(4,1fr)} }
.cell{padding:26px 20px; border-bottom:1px solid #282723}
@media(min-width:760px){ .cell+.cell{border-left:1px solid #282723} }
.cell .k{font-family:Archivo; font-weight:800; font-size:clamp(30px,5vw,44px);
  letter-spacing:-.04em; line-height:1}
.cell .k .u{color:var(--ember)}
.cell .l{color:var(--dim-dunkel); margin-top:9px}
section{padding-block:60px}
.num{font-family:Archivo; font-weight:800; font-size:clamp(44px,9vw,92px);
  line-height:.82; letter-spacing:-.05em; color:var(--moss); opacity:.38}
.lead{max-width:62ch; color:var(--grey); font-size:17px; margin:0 0 26px}
.chart-fuss .wunsch{display:block; margin-top:12px; padding-left:14px;
  border-left:2px solid var(--flame); color:var(--ink)}
.demo{display:inline-block; background:var(--paper); color:var(--on-ink);
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em;
  padding:4px 8px; text-transform:uppercase}
.tl{border:1px solid var(--hair); padding:22px 18px; background:var(--paper-2)}
@media(min-width:760px){ .tl{padding:30px 28px} }
.ph{display:grid; grid-template-columns:62px 1fr; gap:12px; align-items:center; padding:9px 0}
.ph .time{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--grey)}
.ph .seg{height:30px; display:flex; align-items:center; padding:0 11px;
  font-size:13px; color:var(--on-ink); background:var(--paper); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.ph.soft .seg{background:var(--moss); color:var(--on-flame)}
.ph.hot .seg{background:var(--flame); color:var(--on-flame)}
.tl .note{margin-top:16px; padding-top:14px; border-top:1px solid var(--hair);
  color:var(--grey); font-size:15px}
.gal{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:620px){ .gal{grid-template-columns:repeat(2,1fr); gap:22px 20px} }
@media(min-width:1000px){
  .gal{grid-template-columns:repeat(12,1fr); gap:30px 22px}
  .plate:nth-child(1){grid-column:span 5}
  .plate:nth-child(2){grid-column:span 4; margin-top:54px}
  .plate:nth-child(3){grid-column:span 3; margin-top:20px}
  .plate:nth-child(4){grid-column:span 3}
  .plate:nth-child(5){grid-column:span 5; margin-top:44px}
  .plate:nth-child(6){grid-column:span 4; margin-top:12px}
  .plate:nth-child(7){grid-column:span 6}
  .plate:nth-child(8){grid-column:span 6; margin-top:38px}
}
.plate{min-width:0; margin:0}
.plate .frame{display:block; overflow:hidden; background:var(--paper-2); position:relative}
.plate .frame::after{content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(17,16,16,.06)}
.plate img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease}
.plate:hover img{transform:scale(1.04)}
.plate .cap{display:flex; gap:11px; align-items:baseline; margin-top:11px;
  color:var(--grey); font-size:14px; line-height:1.35}
.plate .cap b{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:10px;
  letter-spacing:.14em; color:var(--ember); flex:0 0 auto; padding-top:2px}
.fit{border:1px solid var(--hair); display:grid}
@media(min-width:760px){ .fit{grid-template-columns:1fr 1fr} }
.col{padding:28px 24px; min-width:0}
.col+.col{border-top:1px solid var(--hair)}
@media(min-width:760px){ .col+.col{border-top:0; border-left:1px solid var(--hair)} }
.col h3{font-size:19px; margin-bottom:18px; letter-spacing:-.01em}
.col.yes h3{color:var(--ember)}
.col ul{list-style:none; margin:0; padding:0}
.col li{padding:11px 0 11px 26px; border-top:1px solid var(--hair); position:relative}
.col li:first-child{border-top:0}
.col li::before{content:"—"; position:absolute; left:0; color:var(--grey)}
.col.yes li::before{content:"+"; color:var(--ember)}
.fill{transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  .grooves{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  .fill{transition:none}
}
.shot{position:relative; margin:40px 0 0; display:flex; align-items:flex-end; padding:16px}
.shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.shot{aspect-ratio:3/2}
.shot .label{position:relative; z-index:1}
.shot .label{background:var(--night); color:var(--on-ink);
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em;
  padding:5px 9px; text-transform:uppercase}
.shot .mark{position:absolute; width:16px; height:16px; border:1px solid rgba(255,255,255,.75)}
.shot .m1{top:14px; left:14px; border-right:0; border-bottom:0}
.shot .m2{top:14px; right:14px; border-left:0; border-bottom:0}
.shot .m3{bottom:14px; right:14px; border-left:0; border-top:0}
.deck{background:#1C1B17; border:1px solid #282723; padding:18px; color:#F5F3EF; position:relative}
@media(min-width:760px){ .deck{padding:26px} }
.deck::before,.deck::after{content:""; position:absolute; width:7px; height:7px;
  border-radius:50%; background:#2E2D28; box-shadow:inset 0 1px 0 #46443C}
.deck::before{top:10px; left:10px}
.deck::after{top:10px; right:10px}
.deck-top{display:grid; gap:18px; grid-template-columns:1fr; align-items:center}
@media(min-width:620px){ .deck-top{grid-template-columns:150px 1fr} }
.platter{position:relative; width:150px; height:150px; margin:0 auto}
.platter svg{width:100%; height:100%; display:block}
.platter .disc{transform-origin:100px 100px}
.deck.on .platter .disc{animation:turn 3.4s linear infinite}
.platter circle{fill:none; stroke:#35332D; stroke-width:1.4}
.platter .lbl{fill:#242320; stroke:none}
.platter .hot{stroke:var(--flame); stroke-width:1.8}
.platter .spindle{fill:#F5F3EF; stroke:none}
.platter .arm{stroke:#6B665C; stroke-width:3; stroke-linecap:round;
  transform-origin:172px 34px; transform:rotate(-16deg); transition:transform .8s ease}
.deck.on .platter .arm{transform:rotate(6deg)}
.screen{background:#100C0B; border:1px solid #282723; padding:14px 16px; min-width:0}
.screen-top,.screen-bot{display:flex; justify-content:space-between; gap:10px; color:var(--dim-dunkel)}
.screen .st{color:var(--ember)}
.screen .title{font-family:Archivo; font-weight:800; font-size:clamp(20px,4vw,30px);
  letter-spacing:-.03em; margin:10px 0 12px; line-height:1.05}
.meter{display:flex; align-items:flex-end; gap:2px; height:34px; margin-bottom:12px}
.meter i{flex:1; background:#282723; height:16%}
.deck.on .meter i{background:var(--flame); animation:lvl .9s ease-in-out infinite alternate}
@keyframes lvl{from{height:12%} to{height:100%}}
.transport{display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap}
.pad{background:#242320; border:1px solid #35332D; color:#F5F3EF; width:52px; height:42px;
  font-size:14px; cursor:pointer; font-family:"IBM Plex Mono",monospace}
.pad:hover{background:#2E2D28}
.pad.play{background:var(--flame); border-color:var(--flame); color:var(--on-flame); width:66px}
.pad.play:hover{background:#F77E0D}
.slider{flex:1 1 120px; min-width:110px; height:42px; border:1px solid #35332D;
  background:#100C0B; display:flex; align-items:center; padding:0 10px; position:relative}
.slider .rail{height:2px; background:#35332D; width:100%}
.slider .knob{position:absolute; width:12px; height:24px; background:var(--alabaster);
  left:12px; transition:left 4s linear}
.deck.on .slider .knob{left:calc(100% - 24px)}
.tracks{list-style:none; margin:20px 0 0; padding:16px 0 0; border-top:1px solid #282723}
.tracks li{display:grid; grid-template-columns:26px 1fr auto; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid #282723; cursor:pointer}
.tracks li:last-child{border-bottom:0}
.tracks li:hover{background:#1C1B17}
.tracks .i{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--dim-dunkel)}
.tracks .n{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tracks .d{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--dim-dunkel)}
.tracks li.sel .i,.tracks li.sel .n{color:#F77E0D}
.deck-foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid #282723; color:var(--dim-dunkel)}
.deck-foot a{color:var(--alabaster); text-decoration:none; border-bottom:1px solid #35332D}
.deck-foot a:hover{color:var(--ember)}
@media(prefers-reduced-motion:reduce){
  .deck.on .platter .disc{animation:none}
  .deck.on .meter i{animation:none; height:60%}
  .slider .knob{transition:none}
}
.mix{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:900px){ .mix{grid-template-columns:1fr 1fr; gap:34px; align-items:start} }
.board{background:#1C1B17; border:1px solid #282723; padding:20px 18px 24px; color:#F5F3EF; position:relative}
.board::before,.board::after{content:""; position:absolute; top:9px; width:7px; height:7px;
  border-radius:50%; background:#2E2D28; box-shadow:inset 0 1px 0 #46443C}
.board::before{left:9px}
.board::after{right:9px}
.board-hd{display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid #282723; padding-bottom:12px; margin-bottom:22px; color:var(--dim-dunkel)}
.fader{margin-bottom:22px}
.fader:last-child{margin-bottom:0}
.fd-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px}
.fd-top .lb{color:var(--dim-dunkel)}
.fd-top .vl{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:13px;
  letter-spacing:.04em; color:#F77E0D}
.fader input[type=range]{-webkit-appearance:none; appearance:none; width:100%;
  background:transparent; height:26px; margin:0; display:block; cursor:pointer}
.fader input[type=range]::-webkit-slider-runnable-track{height:4px; background:#282723;
  border-top:1px solid #1C1B17}
.fader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  width:17px; height:26px; margin-top:-11px; background:#D8D4CB; border:1px solid #8A857A;
  border-radius:2px; box-shadow:inset 0 -6px 0 -4px #6B665C, 0 2px 5px rgba(0,0,0,.5)}
.fader input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--flame); outline-offset:2px}
.fader input[type=range]::-moz-range-track{height:4px; background:#282723}
.fader input[type=range]::-moz-range-thumb{width:15px; height:24px; background:#D8D4CB;
  border:1px solid #8A857A; border-radius:2px}
.ticks{display:flex; justify-content:space-between; margin-top:4px; font-size:10px;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.1em; color:#8E887E; text-transform:uppercase}
.mixout{border:1px solid var(--hair); background:var(--paper-2); padding:22px 20px}
.mixout h3{font-size:21px; margin-bottom:6px}
.verdict{color:var(--grey); font-size:15px; margin:0 0 20px}
.gbar{margin-bottom:13px}
.gbar:last-of-type{margin-bottom:0}
.gname{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-bottom:5px; font-size:14px}
.gname i{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.08em; color:var(--grey); font-variant-numeric:tabular-nums}
.gtrack{height:7px; background:var(--hair)}
.gfill{height:100%; background:var(--flame); width:0; transition:width .45s cubic-bezier(.2,.7,.2,1)}
.gfill.cool{background:var(--alabaster)}
.mixout .note{border-top:1px solid var(--hair); margin-top:20px; padding-top:16px;
  color:var(--grey); font-size:14px}
.mixout .cta{margin-top:16px}
.steps{display:grid; gap:0; border-top:1px solid var(--hair)}
.step{display:grid; grid-template-columns:54px 1fr; gap:18px;
  border-bottom:1px solid var(--hair); padding-block:22px; align-items:start}
@media(min-width:760px){ .step{grid-template-columns:86px 1fr; gap:28px} }
.sn{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:12px;
  letter-spacing:.14em; color:var(--ember); padding-top:4px}
.step h3{font-size:19px; margin-bottom:7px}
.step p{margin:0; color:var(--grey); max-width:62ch}
.step .when{display:block; margin-top:8px; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); opacity:.55}
.faq{border-top:1px solid var(--hair); max-width:860px}
.faq summary .qn{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:11px;
  letter-spacing:.14em; color:var(--grey); flex:0 0 auto}
.faq .a{padding:0 0 20px 0; margin:0; color:var(--grey); max-width:64ch}
@media(min-width:760px){ .faq .a{padding-left:43px} }
.faq-more{margin-top:26px}
.weg{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair)}
.weg li{display:grid; grid-template-columns:38px 1fr; gap:4px 14px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--hair)}
@media(min-width:720px){ .weg li{grid-template-columns:38px 1fr auto; gap:18px} }
.weg .wn{color:var(--flame)}
.weg .wt{font-family:Archivo,sans-serif; font-weight:600; font-size:17px; min-width:0}
.weg .wz{grid-column:2; color:var(--grey)}
@media(min-width:720px){ .weg .wz{grid-column:3; text-align:right} }
a.platter{display:block; text-decoration:none; position:relative}
a.platter::after{content:"Auf SoundCloud hören"; position:absolute; inset:auto 0 -17px 0;
  text-align:center; font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember);
  opacity:0; transition:opacity .25s}
a.platter:hover::after,a.platter:focus-visible::after{opacity:1}
a.platter:focus-visible{outline:2px solid var(--flame); outline-offset:4px}