/* Delta Music — gemeinsame Grundlage.
   Farben, Schrift und Raster gelten fuer alle Seiten.
Hier nichts seitenspezifisches eintragen. */

:root{
  
  --flame:#EB4604;        
  --ember:#EB4604;        
  --on-flame:#100C0B;     
  --moss:#99A57D;         
  --alabaster:#99A57D;    
  --paper:#F2EFE9;        
  --paper-2:#E9E5DD;      
  --night:#171614;        
  --hair:#D3CEC5;         
  --feld:#FFFFFF;         
  --feld-rand:#BDB6AA;    
  --ink:#111010;          
  --on-ink:#F2EFE9;       
  --grey:#67625C;
  --dim:#726C64;       
  --dim-dunkel:#9A948A; 
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); margin:0;
  font-family:Jost,Futura,system-ui,sans-serif; font-weight:300;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
.wrap{max-width:1180px; margin:0 auto; padding-inline:16px}
@media(min-width:760px){ .wrap{padding-inline:40px} }
h1,h2,h3{font-family:Archivo,system-ui,sans-serif; font-weight:800;
  letter-spacing:-.03em; line-height:1.02; text-wrap:balance; margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.rule{height:1px; background:var(--hair); border:0; margin:0}
.bar{width:52px; height:5px; background:var(--flame)}
.top{border-bottom:1px solid var(--hair)}
.top .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:22px; flex-wrap:wrap}
.brand{font-family:Archivo; font-weight:800; letter-spacing:-.04em; font-size:20px}
.brand span{color:var(--ember)}
.nav a{color:var(--grey); text-decoration:none}
.cta{display:inline-flex; align-items:center; gap:10px; background:var(--flame);
  color:var(--on-flame); text-decoration:none; font-family:"IBM Plex Mono",monospace;
  font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:17px 28px}
.cta:hover{background:#F77E0D}
.cta-note{display:block; margin-top:9px; color:var(--grey); font-size:12px}
.grooves{position:absolute; right:-170px; top:-90px; width:520px; height:520px;
  opacity:.5; pointer-events:none}
.grooves circle{fill:none; stroke:var(--hair); stroke-width:1}
.grooves .hot{stroke:var(--flame); opacity:.5}
.hero .wrap{position:relative}
.hero .bar{margin-bottom:22px}
.eyebrow{color:var(--grey); margin-bottom:24px}
.sterne{display:inline-flex; align-items:center; gap:3px; line-height:1}
.sterne svg{width:14px; height:14px; display:block; fill:var(--flame)}
.head{display:flex; gap:20px; align-items:baseline; margin-bottom:32px; flex-wrap:wrap}
.head h2{font-size:clamp(25px,4.2vw,40px); flex:1 1 300px; min-width:0}
.head .tag{color:var(--grey); flex-basis:100%}
.chart{border:1px solid var(--hair); background:var(--paper-2); padding:22px 18px}
@media(min-width:760px){ .chart{padding:30px 28px} }
.chart-head{display:flex; justify-content:space-between; gap:12px;
  padding-bottom:14px; border-bottom:1px solid var(--hair); color:var(--grey); flex-wrap:wrap}
.row{display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--hair)}
.chart .row:last-of-type{border-bottom:0}
.row .r{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--grey)}
.row .t{min-width:0}
.row .name{display:flex; justify-content:space-between; gap:10px; font-size:15px; margin-bottom:6px}
.row .name i{font-style:normal; color:var(--grey); font-size:13px;
  font-family:"IBM Plex Mono",monospace; white-space:nowrap}
.row .track{height:9px; background:var(--hair)}
.row .fill{height:9px; background:var(--flame)}
.row:nth-child(-n+4) .fill{background:var(--flame)}
.row:nth-child(n+5) .fill{background:var(--moss); opacity:.9}
.name em{font-style:normal; color:var(--grey); font-size:13px}
.chart-fuss{margin:20px 0 0; padding-top:16px; border-top:1px solid var(--hair);
  color:var(--grey); font-size:15px; max-width:62ch}
.chart-fuss b{color:var(--ink); font-weight:500}
.revs{display:grid; gap:16px}
@media(min-width:760px){ .revs{grid-template-columns:repeat(3,1fr)} }
.rev{border:1px solid var(--hair); padding:24px; background:var(--paper-2);
  display:flex; flex-direction:column; min-width:0}
.rev .s{color:var(--ember); letter-spacing:.14em; font-size:13px; margin-bottom:14px}
.rev p{margin:0 0 20px; flex:1}
.rev .who{border-top:1px solid var(--hair); padding-top:13px; color:var(--grey); line-height:1.5}
.rev .who b{display:block; color:var(--ink); font-weight:500;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.close{background:var(--night); color:var(--on-ink); padding-block:62px; margin-top:20px}
.close h2{font-size:clamp(27px,5vw,48px); max-width:18ch; margin-bottom:26px}
.close .bar{margin-bottom:22px}
.close .mono,.close .cta-note{color:var(--dim-dunkel)}
.foot{padding-block:28px; color:var(--grey)}
.foot .wrap{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
@keyframes turn{to{transform:rotate(360deg)}}
.grooves{animation:turn 160s linear infinite; transform-origin:50% 50%}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
.after-steps{margin:26px 0 0}
.after-steps a{color:var(--ember); text-decoration:none; font-family:"IBM Plex Mono",monospace;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid transparent; padding-bottom:3px}
.after-steps a:hover{border-bottom-color:var(--ember)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{display:flex; gap:16px; align-items:baseline; cursor:pointer;
  padding-block:17px; list-style:none; font-family:Archivo,sans-serif; font-weight:600;
  font-size:17px; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; font-family:"IBM Plex Mono",monospace;
  font-weight:400; color:var(--ember); font-size:19px; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--ember)}
.nav{display:flex; gap:18px; flex-wrap:wrap}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
section{padding-block:64px}
@media(min-width:760px){ section{padding-block:86px} }
.num{font-family:Archivo; font-weight:800; font-size:clamp(44px,9vw,92px);
  line-height:.8; color:var(--moss); opacity:.38; letter-spacing:-.05em}
.lead{max-width:66ch; color:var(--grey); font-size:18px}
.lead strong{color:var(--ink); font-weight:400}
.hero{position:relative; overflow:hidden; padding-block:54px 10px}
.hero h1{font-size:clamp(33px,6.4vw,64px); margin-bottom:24px; max-width:17ch}
.hero .pitch{font-size:19px; max-width:58ch; color:var(--grey); margin:0 0 30px}
.hero .pitch b{color:var(--ink); font-weight:400}
@media(min-width:900px){ .heroGrid{grid-template-columns:1.25fr .75fr; gap:48px} }
.stars{display:flex; gap:10px 26px; flex-wrap:wrap; align-items:center;
  color:var(--grey); font-size:14px; margin-top:34px; padding-top:22px;
  border-top:1px solid var(--hair)}
.stars .st{color:var(--ember); letter-spacing:.14em}
.stars b{color:var(--ink); font-weight:500}
.gives{display:grid; gap:0; border-top:1px solid var(--hair)}
@media(min-width:860px){ .gives{grid-template-columns:repeat(3,1fr); border-top:0} }
@media(min-width:860px){ .give{border-top:1px solid var(--hair); border-bottom:0;
  padding:26px 26px 0 0} .give+.give{padding-left:26px} }
.split{display:grid; gap:28px; grid-template-columns:1fr}
@media(min-width:900px){ .split{grid-template-columns:1fr .8fr; gap:48px; align-items:start}
  .split.flip{grid-template-columns:.8fr 1fr}
  .split.flip > *:first-child{order:2} }
.rings{display:grid; gap:30px; grid-template-columns:1fr}
@media(min-width:900px){ .rings{grid-template-columns:1fr 1fr; gap:48px; align-items:center} }
.prog{position:fixed; top:0; left:0; height:3px; width:0; background:var(--flame);
  z-index:50; transition:width .12s linear}
.voy{margin-top:8px}
@media(max-width:700px){
  .voyline{padding:0}
  .voyline::before{left:6px; right:auto; top:8px; bottom:8px; width:1px; height:auto}
  .voyline .done{left:6px; top:8px; width:1px !important; height:0; transition:height .5s ease}
  .stops{grid-template-columns:1fr; gap:0}
  .stop{flex-direction:row; align-items:center; gap:16px; padding:11px 0}
}
@media(min-width:820px){ .voyout{grid-template-columns:1fr 1fr; gap:38px} }
.qa{border-top:1px solid var(--hair); max-width:900px}
@media(min-width:700px){ .qa .row{grid-template-columns:260px 1fr; gap:28px} }
@media(prefers-reduced-motion:reduce){
  .grooves{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  .ringbox circle{transition:none}
}
.incl{display:grid; gap:0; border-top:1px solid var(--hair)}
@media(min-width:720px){ .incl{grid-template-columns:1fr 1fr; column-gap:40px} }
@media(min-width:1040px){ .incl{grid-template-columns:repeat(3,1fr)} }
.inc{border-bottom:1px solid var(--hair); padding-block:24px; min-width:0}
.inc .k{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:11px;
  letter-spacing:.14em; color:var(--ember)}
.inc h3{font-size:19px; margin:9px 0 8px}
.inc p{margin:0; color:var(--grey)}
.pair{display:grid; gap:28px; grid-template-columns:1fr}
@media(min-width:900px){ .pair{grid-template-columns:1fr .78fr; gap:48px; align-items:start}
  .pair.flip{grid-template-columns:.78fr 1fr}
  .pair.flip > *:first-child{order:2} }
.pair p{max-width:60ch}
.pair p:first-of-type{margin-top:0}
.pair figure{margin:0}
.pair figure img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block}
.pair figcaption{margin-top:10px; color:var(--grey); font-size:13px;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.06em}
.case{border-left:2px solid var(--flame); padding:4px 0 4px 20px; margin:26px 0;
  font-size:19px; font-family:Archivo; font-weight:600; letter-spacing:-.02em;
  line-height:1.3; max-width:34ch}
.lead{color:var(--grey);max-width:64ch;margin:0 0 34px}
.suche label{flex:0 0 auto}
.suche input{flex:1 1 220px;min-width:0;background:var(--paper-2);color:var(--ink);
  border:1px solid var(--hair);padding:12px 14px;font-family:Jost,sans-serif;
  font-weight:300;font-size:16px;border-radius:0;-webkit-appearance:none}
.suche input:focus{outline:none;border-color:var(--ember)}
.treffer{flex:0 0 auto;color:var(--ember)}
.leer{color:var(--grey);padding-block:22px}
.close .mono{color:var(--dim-dunkel)}
.legal{max-width:760px}
.legal h2{font-size:clamp(21px,3.4vw,28px); margin:46px 0 16px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:18px; margin:28px 0 10px}
.legal p{margin:0 0 15px; color:var(--grey); max-width:68ch}
.legal p strong{color:var(--ink); font-weight:400}
.legal ul{margin:0 0 18px; padding-left:20px; color:var(--grey); max-width:66ch}
.legal li{margin-bottom:7px}
.legal a{color:var(--ink)}
.legal a:hover{color:var(--ember)}
.legal .block{border-left:2px solid var(--hair); padding-left:20px; margin:0 0 18px}
.legal .block p{margin-bottom:5px; color:var(--ink)}
.legal .block p:last-child{margin-bottom:0}
.luecke{background:var(--paper-2); border-left:3px solid var(--flame);
  padding:14px 18px; margin:0 0 18px}
.luecke p{margin:0; color:var(--ink); font-size:15px}
.luecke b{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ember); display:block; margin-bottom:6px}
.stand{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey); border-top:1px solid var(--hair);
  margin-top:50px; padding-top:20px}

/* Nachtraege: gelten fuer alle Seiten, unabhaengig vom Seiten-CSS */
a.brand{display:inline-flex; align-items:center; text-decoration:none; color:var(--ink)}
a.brand img{display:block; width:88px; height:48px; transition:opacity .2s ease}
a.brand:hover img{opacity:.72}
/* Das Logo ist schwarze Zeichnung und steht auf hellem Grund: nicht umdrehen. */
/* Grundfarbe fuer Links: nie das Browser-Blau. Seiten-CSS sticht das. */
main a{color:var(--ink)}
.foot a{color:var(--grey); text-decoration:none}
.foot a:hover{color:var(--flame)}
.foot .wrap > div{flex:1 0 100%}
.sozial{display:flex; flex-wrap:wrap; gap:10px 26px; padding-bottom:16px;
  border-bottom:1px solid var(--hair); margin-bottom:16px}
.sozial a{color:var(--ink); border-bottom:1px solid transparent; padding-bottom:2px}
.sozial a:hover{color:var(--flame); border-bottom-color:var(--flame)}
.fusszeile{display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  color:var(--grey)}