*{box-sizing:border-box}
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
:root{
  --bg:#07030b;
  --panel:#120817;
  --purple:#d900ff;
  --pink:#ff3bea;
  --violet:#7e19ff;
  --text:#f4eefa;
  --muted:#bcaac2;
  --line:rgba(240,215,255,.25);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 50% 20%, rgba(180,0,255,.18), transparent 35%),
    radial-gradient(circle at 50% 75%, rgba(90,0,130,.14), transparent 45%),
    var(--bg);
  color:var(--text);
  font-family:"Space Mono",monospace;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom, black, transparent 90%);
}
.noise,.scanlines{position:fixed;inset:0;pointer-events:none;z-index:10}
.noise{opacity:.035;background-image:url("party-art.jpg");background-size:700px;mix-blend-mode:screen}
.scanlines{background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.025) 4px);opacity:.35}
.nav{
  width:min(1120px,92%);margin:auto;padding:28px 0;
  display:flex;justify-content:space-between;align-items:center;
  position:relative;z-index:2;
}
.brand{font-family:Anton,sans-serif;font-size:28px;letter-spacing:2px;color:#fff;text-decoration:none}
.brand span{color:var(--purple);text-shadow:0 0 18px var(--purple)}
.nav-link{color:#fff;text-decoration:none;font-size:12px;letter-spacing:3px;border-bottom:1px solid var(--purple);padding-bottom:5px}
.hero{min-height:100vh;position:relative}
.hero-inner{text-align:center;width:min(1100px,94%);margin:0 auto;padding:40px 0 90px}
.eyebrow,.section-label{font-size:11px;letter-spacing:4px;color:#d9bde2}
h1{
  margin:14px 0 4px;
  font-family:Anton,sans-serif;font-size:clamp(58px,10vw,130px);
  line-height:.86;letter-spacing:2px;
  color:#f7eff8;text-shadow:4px 4px 0 #50115d, 0 0 30px rgba(221,0,255,.4);
}
h1 span{color:#e200ff;text-shadow:0 0 26px rgba(226,0,255,.8)}
.tagline{font-size:11px;letter-spacing:3px;color:#d5bdd9;margin:20px 0 35px}
.art-wrap{position:relative;width:min(760px,88vw);margin:auto}
.art-wrap .glow{
  position:absolute;inset:15%;background:var(--purple);filter:blur(90px);opacity:.28;border-radius:50%;
}
.art-wrap img{position:relative;width:100%;display:block;filter:contrast(1.08) saturate(1.12);mix-blend-mode:screen}

.hero-buttons{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-top:20px;
}
.hero-buttons .button{
  width:200px;
  max-width:85vw;
  justify-content:center;
  text-align:center;
  gap:0;
}
.page-nav{
  width:min(1120px,92%);
  margin:0 auto;
  padding-top:30px;
}

.button{
  display:inline-flex;
  gap:22px;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin-top:0px;
  padding:16px 24px;
  color:#fff;
  text-decoration:
  none;
  font-weight:700;
  font-size:12px;
  letter-spacing:3px;
  border:1px solid #ff5dff;
  background:rgba(217,0,255,.08);
  box-shadow:0 0 25px rgba(217,0,255,.25),inset 0 0 20px rgba(217,0,255,.08);
  transition:.2s;
}

@media (hover:hover) and (pointer:fine){
  .button:hover{
    background:var(--purple);
    box-shadow:0 0 35px rgba(217,0,255,.65);
    transform:translateY(-2px);
  }
}

.button:active{
  background:var(--purple);
  box-shadow:0 0 35px rgba(217,0,255,.65);
  transform:translateY(-2px);
}
.info-section,.countdown-section{width:min(1120px,92%);margin:auto;padding:100px 0}
h2{font-family:Anton,sans-serif;font-size:clamp(50px,8vw,90px);line-height:.82;margin:15px 0 45px}
h2 em{color:var(--purple);font-style:normal;text-shadow:0 0 22px rgba(217,0,255,.6)}
.party-info-title{
  white-space:nowrap;
}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.card{
  display:flex;gap:22px;align-items:flex-start;padding:26px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(110,0,150,.07));
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.card:after{content:"";position:absolute;right:-40px;top:-40px;width:100px;height:100px;border:1px solid rgba(255,0,255,.3);transform:rotate(45deg)}
.card-icon{font-family:Anton;font-size:30px;color:var(--purple);text-shadow:0 0 12px var(--purple)}
.card small{display:block;color:#a98cad;letter-spacing:3px;font-size:9px;margin-bottom:7px}
.card strong{font-family:Anton;font-size:28px;letter-spacing:1px}
.card p{margin:7px 0 0;color:var(--muted);font-size:11px}
.party-name-card{
  width:100%;
  margin-bottom:14px;
}

.party-name-card[hidden]{
  display:none;
}
.location-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.location-link:visited{
  color:inherit;
}

.location-link strong{
  color:var(--text);
}

.location-link p{
  color:var(--muted);
}
.lineup-card{
  grid-column:1 / -1;
}

.lineup-content{
  width:100%;
}

.dj-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:18px;
}

.dj-item{
  display:grid;
  grid-template-columns:135px minmax(0,1fr);
  align-items:center;
  gap:14px;

  padding:14px;

  border:1px solid rgba(217,0,255,.35);

  background:
    linear-gradient(
      135deg,
      rgba(217,0,255,.08),
      rgba(255,255,255,.02)
    );
}

.dj-number{
  font-family:Anton,sans-serif;
  font-size:24px;

  color:var(--purple);

  text-shadow:
    0 0 12px var(--purple);

  white-space:nowrap;
}

.dj-item strong{
  font-family:Anton,sans-serif;
  font-size:20px;
  letter-spacing:1px;
}

.shop-section{
  width:min(1120px,92%);
  margin:auto;
  padding:80px 0 100px;
}

.shop-title{
  white-space:nowrap;
}

.shop-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:40px;
}

.shop-item{
  display:flex;
  gap:22px;
  align-items:flex-start;

  padding:26px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.06),
      rgba(110,0,150,.07)
    );

  border:1px solid var(--line);

  position:relative;
  overflow:hidden;
}

.shop-item:after{
  content:"";

  position:absolute;

  right:-40px;
  top:-40px;

  width:100px;
  height:100px;

  border:1px solid rgba(255,0,255,.3);

  transform:rotate(45deg);
}

.shop-number{
  font-family:Anton,sans-serif;
  font-size:30px;

  color:var(--purple);

  text-shadow:
    0 0 12px var(--purple);
}

.shop-content{
  width:100%;
}

.shop-slider-wrap{
  width:100%;
  margin-bottom:18px;
}

.shop-slider{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;

  width:100%;

  border:1px solid rgba(217,0,255,.35);

  background:
    linear-gradient(
      135deg,
      rgba(217,0,255,.08),
      rgba(255,255,255,.02)
    );

  scrollbar-width:none;
}

.shop-slider::-webkit-scrollbar{
  display:none;
}

.shop-slide{
  display:block;
  flex:0 0 100%;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:contain;
  scroll-snap-align:start;
}


/* PFEILE UNTER DEM BILD */

.slider-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:12px;
}

.slider-arrow{
  display:flex;
  align-items:center;
  justify-content:center;

  width:44px;
  height:44px;
  padding:0;

  border:1px solid var(--purple);
  background:rgba(7,3,11,.85);

  color:var(--purple);

  font-family:Anton,sans-serif;
  font-size:32px;
  line-height:1;

  cursor:pointer;

  box-shadow:0 0 18px rgba(217,0,255,.45);
}

.shop-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;

  margin-bottom:18px;

  border:1px solid rgba(217,0,255,.35);

  background:
    linear-gradient(
      135deg,
      rgba(217,0,255,.08),
      rgba(255,255,255,.02)
    );
}

.shop-content small{
  display:block;

  color:#a98cad;

  letter-spacing:3px;
  font-size:9px;

  margin-bottom:7px;
}

.shop-content strong{
  display:block;

  font-family:Anton,sans-serif;
  font-size:28px;
  letter-spacing:1px;
}

.shop-content p{
  color:var(--muted);
  font-size:11px;

  margin:7px 0 18px;
}

.shop-price{
  font-family:Anton,sans-serif;

  font-size:30px;

  color:var(--purple);

  margin-bottom:18px;

  text-shadow:
    0 0 15px rgba(217,0,255,.65);
}

.shop-button{
  padding:12px 16px;

  font-family:"Space Mono",monospace;

  font-weight:700;
  font-size:10px;

  letter-spacing:2px;

  color:#fff;

  border:1px solid #ff5dff;

  background:rgba(217,0,255,.08);

  box-shadow:
    0 0 20px rgba(217,0,255,.2);
}

.shop-button:disabled{
  opacity:.55;
}

.notice{
  margin-top:14px;padding:20px;border:1px solid rgba(255,60,234,.45);
  display:flex;gap:16px;background:rgba(255,0,220,.045)
}
.notice>span{font-size:25px;color:var(--pink)}
.notice strong{font-size:11px;letter-spacing:3px}
.notice p{font-size:10px;line-height:1.7;color:#c7b4cb;margin:8px 0 0}
.countdown-section{text-align:center;border-top:1px solid var(--line)}
.countdown{display:flex;justify-content:center;gap:clamp(18px,5vw,70px);padding-top:35px}
.countdown div{min-width:90px}
.countdown b{display:block;font-family:Anton;font-size:clamp(50px,7vw,80px);line-height:1;color:var(--purple);text-shadow:0 0 25px rgba(217,0,255,.65)}
.countdown span{font-size:9px;letter-spacing:3px;color:#a98cad}
footer{
  border-top:1px solid var(--line);padding:35px 4%;
  display:flex;justify-content:space-between;gap:20px;font-family:Anton;letter-spacing:2px
}
.footer-mark{font-family:"Space Mono";font-size:9px;color:#9b879e;letter-spacing:2px}
@media(max-width:650px){
  .hero-inner{padding-top:25px}
  .eyebrow{font-size:8px;letter-spacing:2px}

  h1{
  font-size:10vw;
  }
  .party-info-title{
  font-size:12vw;
  }
  
  .tagline{font-size:8px;line-height:1.7}
  .cards{grid-template-columns:1fr}
  .card{padding:20px}
  .dj-list{grid-template-columns:1fr}
  .dj-item{
  grid-template-columns:1fr;
  gap:8px;
  padding:18px;
}

.dj-number{
  width:100%;
  padding-bottom:8px;
  border-bottom:1px solid rgba(217,0,255,.25);
}

.dj-item strong{
  width:100%;
  line-height:1.25;
}

.shop-grid{
  grid-template-columns:1fr;
}

.shop-item{
  padding:20px;
}

.shop-title{
  font-size:14vw;
}
  
  .countdown{gap:8px}
  .countdown div{min-width:67px}
  .countdown b{font-size:42px}
  footer{display:block;text-align:center}
  .footer-mark{margin-top:12px}
}