
:root{--bg:#11100e;--panel:#1b1814;--panel2:#242019;--gold:#d9a34e;--gold2:#f3d49b;--cream:#f5eee3;--muted:#bdb4a8;--line:#ffffff17;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% 0,#56411f55,transparent 30%),linear-gradient(#11100e,#171410 50%,#0e0d0c);color:var(--cream);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}
.topbar{position:sticky;top:10px;z-index:30;width:min(calc(100% - 28px),var(--max));margin:14px auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;background:#12100dde;border:1px solid var(--line);backdrop-filter:blur(18px);border-radius:18px;box-shadow:0 12px 34px #0005}.brand{display:flex;align-items:baseline;gap:8px}.brand span{font-family:Georgia,serif;font-style:italic;color:var(--gold2)}.brand strong{letter-spacing:.11em}.topbar nav{display:flex;gap:4px}.topbar nav a{padding:9px 11px;border-radius:10px;color:#e6ded3}.topbar nav a:hover{background:#ffffff0b}#menuBtn{display:none;background:none;color:white;border:0;font-size:1.35rem}
.hero{width:min(calc(100% - 28px),var(--max));margin:24px auto 0;position:relative;border-radius:28px;overflow:hidden;border:1px solid #d9a34e55;box-shadow:0 25px 60px #0008}.hero-banner{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d0b09e8 0,#0d0b0995 42%,transparent 72%)}.hero-overlay{position:absolute;z-index:2;left:5%;top:50%;transform:translateY(-50%);width:min(650px,50%)}.eyebrow{color:var(--gold2);font-size:.73rem;font-weight:800;letter-spacing:.16em;margin:0 0 8px}.hero h1{font-size:clamp(2.7rem,6vw,5.6rem);line-height:.92;letter-spacing:-.045em;margin:0 0 18px}.hero h1 span{display:block;color:var(--gold2)}.hero p{max-width:610px;color:#e9e0d5}.cta-row{display:flex;gap:10px;margin-top:20px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 17px;border-radius:12px;border:1px solid #ffffff22;font-weight:800}.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#21170a;border:0}.glass{background:#ffffff0d}
.section{width:min(calc(100% - 36px),var(--max));margin:auto;padding:86px 0}.panel{padding-left:28px;padding-right:28px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,#ffffff09,#ffffff03)}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}.section-head h2,.contact h2{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;margin:0}.section-head>p{max-width:470px;color:var(--muted);margin:0}
.track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.track-card{border:1px solid var(--line);border-radius:19px;overflow:hidden;background:linear-gradient(160deg,#28231c,#15120f);display:flex;flex-direction:column}.track-card img{width:100%;aspect-ratio:1;object-fit:cover}.track-body{padding:16px;display:flex;flex-direction:column;height:100%}.track-body h3{font-size:1.05rem;margin:0 0 3px}.meta{font-size:.83rem;color:var(--muted)}.preview{margin-top:15px}.preview audio{width:100%;height:38px;filter:sepia(.35) saturate(.8)}.preview-note{font-size:.7rem;color:var(--muted);margin-top:4px}.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.shop-card{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:13px;border:1px solid var(--line);border-radius:16px;background:#0e0c0a88}.shop-card img{width:76px;height:76px;border-radius:10px;object-fit:cover}.shop-card h3{font-size:.96rem;margin:0 0 3px}.price{color:var(--gold2);font-weight:850}.buy-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.buy{font-size:.75rem;padding:7px 9px;border-radius:8px;border:1px solid #ffffff20}.buy.disabled{opacity:.46;cursor:not-allowed}.payment-note{margin:-12px 0 26px;padding:12px 14px;border:1px solid #d9a34e33;background:#d9a34e0c;border-radius:12px;color:#ddd3c5}
.event{display:grid;grid-template-columns:125px 1fr;gap:20px;padding:18px 7px;border-bottom:1px solid var(--line)}.event strong:first-child{color:var(--gold2)}.event span{color:var(--muted);display:block}.epk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.info-card{padding:21px;border:1px solid var(--line);border-radius:17px;background:#0d0c0a88}.info-card p{color:var(--muted)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:50px}.email-link{display:inline-block;color:var(--gold2);font-weight:850;font-size:1.12rem;margin-top:8px;border-bottom:1px solid #d9a34e55}.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.social-grid a{padding:12px 13px;border:1px solid var(--line);border-radius:11px}.social-grid a.off{opacity:.45}
footer{width:min(calc(100% - 36px),var(--max));margin:auto;padding:25px 0 30px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;color:var(--muted);font-size:.8rem}footer small{display:block;color:var(--gold2);letter-spacing:.18em}.legal{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.legalpage{width:min(calc(100% - 36px),900px);margin:70px auto;padding:30px;border:1px solid var(--line);border-radius:20px;background:#ffffff07}.legalpage h1{font-size:2.4rem}.notice{padding:12px;border-radius:10px;background:#d9a34e12;border:1px solid #d9a34e33;color:#e7ddcf}
@media(max-width:980px){.track-grid{grid-template-columns:repeat(3,1fr)}.shop-grid{grid-template-columns:1fr 1fr}.hero-overlay{width:60%}.epk-grid{grid-template-columns:1fr}.contact{grid-template-columns:1fr}}
@media(max-width:700px){#menuBtn{display:block}.topbar nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);padding:9px;flex-direction:column;background:#14110e;border:1px solid var(--line);border-radius:14px}.topbar nav.open{display:flex}.hero{aspect-ratio:auto}.hero-banner{min-height:530px;object-position:center}.hero:after{background:linear-gradient(#0d0b0970,#0d0b09e8 60%)}.hero-overlay{left:7%;right:7%;bottom:8%;top:auto;transform:none;width:auto}.track-grid{grid-template-columns:1fr 1fr}.shop-grid{grid-template-columns:1fr}.section-head{display:block}.section-head>p{margin-top:13px}.panel{padding-left:15px;padding-right:15px}.contact{gap:30px}.social-grid{grid-template-columns:1fr}footer{grid-template-columns:1fr}.legal{justify-content:flex-start}}
@media(max-width:460px){.track-grid{grid-template-columns:1fr}}


.dates-banner-wrap{
  margin:0 0 34px;
  border:1px solid #d9a34e55;
  border-radius:22px;
  overflow:hidden;
  background:#0d0b09;
  box-shadow:0 20px 48px #0007;
}
.dates-banner{
  display:block;
  width:100%;
  height:auto;
}
@media(max-width:700px){
  .dates-banner-wrap{border-radius:14px;margin-bottom:24px}
}


/* === DJ SIXX Layout-Update: Banner frei, Text darunter === */
.hero{
  width:min(calc(100% - 28px),var(--max));
  margin:24px auto 0;
  position:relative;
  border-radius:28px;
  overflow:hidden;
  border:1px solid #d9a34e55;
  box-shadow:0 25px 60px #0008;
}
.hero:after{display:none !important;}
.hero-banner{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
.hero-overlay{display:none !important;}

.hero-copy{
  width:min(calc(100% - 36px),var(--max));
  margin:22px auto 0;
  padding:28px 30px 32px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff08,#ffffff03);
}
.hero-copy h1{
  font-size:clamp(2.35rem,5.2vw,5rem);
  line-height:.98;
  letter-spacing:-.04em;
  margin:0 0 18px;
}
.hero-copy h1 span{
  display:block;
  color:var(--gold2);
}
.hero-copy p{
  max-width:900px;
  margin:0;
  color:#e9e0d5;
  font-size:clamp(1rem,1.8vw,1.22rem);
}
.hero-copy .cta-row{margin-top:22px;}

@media(max-width:700px){
  .hero-banner{
    min-height:0 !important;
    object-position:center;
  }
  .hero-copy{
    width:min(calc(100% - 28px),var(--max));
    margin-top:14px;
    padding:22px 18px 24px;
    border-radius:17px;
  }
  .hero-copy h1{
    font-size:clamp(2.2rem,12vw,3.8rem);
    line-height:1;
  }
}


/* === DJ SIXX Banner kompakter: Banner + Text im ersten Bildschirm === */
.hero{
  /* volle 16:9-Grafik bleibt sichtbar; Breite richtet sich zusätzlich
     nach der Bildschirmhöhe, damit der Banner nicht zu hoch wird */
  width:min(calc(100% - 28px), 90vh, var(--max)) !important;
  margin:14px auto 0 !important;
}

.hero-banner{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
}

.hero-copy{
  width:min(calc(100% - 28px), 90vh, var(--max)) !important;
  margin:12px auto 0 !important;
  padding:18px 22px 20px !important;
}

.hero-copy h1{
  font-size:clamp(2rem,4.2vw,3.7rem) !important;
  line-height:.96 !important;
  margin-bottom:12px !important;
}

.hero-copy p{
  font-size:clamp(.95rem,1.4vw,1.08rem) !important;
  line-height:1.45 !important;
}

.hero-copy .cta-row{
  margin-top:15px !important;
}

@media(max-width:700px){
  .hero{
    width:calc(100% - 20px) !important;
    margin-top:10px !important;
  }
  .hero-copy{
    width:calc(100% - 20px) !important;
    margin-top:10px !important;
    padding:16px 15px 18px !important;
  }
  .hero-copy h1{
    font-size:clamp(1.9rem,10vw,3rem) !important;
  }
}


/* === DJ SIXX Banner: gleiche Höhe, volle Seitenbreite === */
.hero{
  width:calc(100% - 20px) !important;
  max-width:none !important;
  margin:14px auto 0 !important;
  height:clamp(280px, 44vh, 430px) !important;
  border-radius:22px !important;
}

.hero-banner{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

/* Text bleibt kompakt darunter */
.hero-copy{
  width:min(calc(100% - 28px), var(--max)) !important;
  max-width:var(--max) !important;
}

@media(max-width:700px){
  .hero{
    width:calc(100% - 12px) !important;
    height:clamp(220px, 34vh, 300px) !important;
    margin-top:8px !important;
    border-radius:14px !important;
  }
}
