/* ===========================================================
   ClubbingArena — Stylesheet
   Farben und Schriften werden ganz oben festgelegt.
   Wenn du die Farbe der Website ändern willst, reicht es,
   die Werte unter :root anzupassen.
   =========================================================== */

:root{
  --night:#0B0A14;
  --paper:#131126;
  --akzent:#2F5EFF;
  --blue:#38BDF8;
  --fehler:#FF3B1F;
  --bone:#EDE9E0;
  --ash:#807D93;
  --line:rgba(237,233,224,.16);

  --display:"Anton","Haettenschweiler","Arial Narrow",sans-serif;
  --body:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"Courier New",monospace;

  --gut:clamp(1.25rem,4vw,3.5rem);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--night);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.115rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Feines Korn über der ganzen Seite (Riso-Optik) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.15;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
}

img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--akzent); outline-offset:3px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--akzent); color:var(--night); padding:.75rem 1rem;
  font-family:var(--mono); font-size:.75rem; text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------- Wiederkehrende Textbausteine ---------- */

.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--akzent);
  margin:0 0 1.1rem;
}
.eyebrow--blue{color:var(--blue)}

.block{padding:clamp(3rem,9vh,6rem) var(--gut)}
.block--alt{background:var(--paper)}
.block--schmal{max-width:56rem; margin:0 auto}

.block__head{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,6.5vw,4rem); line-height:.95;
  letter-spacing:-.01em; text-transform:uppercase;
  margin:0 0 1.75rem;
}
.block__text{max-width:44rem; color:var(--ash)}
.block__text strong{color:var(--bone); font-weight:600}
.block__text a{color:var(--bone)}

.block__text h2{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:1.35rem; letter-spacing:.02em; color:var(--bone);
  margin:2.25rem 0 .6rem;
}
.block__text h2:first-child{margin-top:0}
.block__text p{margin:0 0 1.1rem}

.split{display:grid; gap:clamp(2rem,5vw,4rem)}
@media (min-width:880px){.split{grid-template-columns:1.05fr .95fr}}

.note{
  font-family:var(--mono); font-size:.78rem; line-height:1.75;
  color:var(--ash); border-left:2px solid var(--blue);
  padding-left:1rem; max-width:36rem; margin-top:2rem;
}

/* ---------- Navigation ---------- */

.nav{
  position:sticky; top:0; z-index:800;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.75rem;
  padding:.8rem var(--gut);
  background:rgba(11,10,20,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__mark{
  font-family:var(--display); font-size:1.2rem; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; margin-right:auto;
}
.nav__mark span{color:var(--akzent)}

.nav__tabs{display:flex; flex-wrap:wrap; gap:.35rem}
.nav__tab{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--ash);
  padding:.55rem .8rem; border:1px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.nav__tab:hover{color:var(--bone); border-color:var(--line)}
.nav__tab.is-aktiv{color:var(--night); background:var(--bone); border-color:var(--bone)}

.nav__toggle{
  display:none; align-items:center; gap:.6rem;
  background:none; border:1px solid var(--line); color:var(--bone);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.55rem .8rem; cursor:pointer;
}
.nav__burger{display:inline-flex; flex-direction:column; gap:3px}
.nav__burger i{display:block; width:16px; height:2px; background:var(--bone)}

@media (max-width:860px){
  .nav__toggle{display:inline-flex}
  .nav__tabs{
    flex-basis:100%; flex-direction:column; gap:0;
    display:none; padding-top:.5rem; border-top:1px solid var(--line);
  }
  .nav__tabs.is-offen{display:flex}
  .nav__tab{padding:.85rem .2rem; border-bottom:1px solid var(--line)}
  .nav__tab.is-aktiv{padding-left:.8rem}
}

/* ---------- Startseite: Hero ---------- */

.hero{
  position:relative;
  padding:clamp(2.5rem,8vh,6rem) 0 clamp(2rem,6vh,3.5rem);
  border-bottom:1px solid var(--line);
}
.hero__meta{padding:0 var(--gut)}
.hero__type{padding:0 var(--gut); margin:clamp(1.25rem,4vh,2.5rem) 0 clamp(1.5rem,4vh,2.25rem)}

.hero__word{
  display:block;
  font-family:var(--display); font-weight:400;
  font-size:clamp(3.4rem,17vw,14rem);
  line-height:.82; letter-spacing:-.015em; text-transform:uppercase;
  margin:0;
}
.hero__word--fill{
  background:linear-gradient(100deg,var(--bone) 0%,var(--bone) 38%,#fff 46%,var(--akzent) 52%,var(--bone) 60%,var(--bone) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:sweep 7s linear infinite;
}
.hero__word--hollow{
  color:transparent;
  -webkit-text-stroke:2px var(--akzent);
  margin-left:.06em;
}
@keyframes sweep{from{background-position:180% 0} to{background-position:-100% 0}}

.hero__lede{padding:0 var(--gut); max-width:34rem; color:var(--ash); margin:0}
.hero__lede strong{color:var(--bone); font-weight:600}
.hero__cta{padding:0 var(--gut); margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:.75rem}

.count{display:flex; flex-wrap:wrap; gap:clamp(1rem,4vw,3rem); padding:clamp(1.5rem,5vh,2.75rem) var(--gut) 0}
.count__unit{min-width:4.5rem}
.count__num{display:block; font-family:var(--display); font-size:clamp(2.5rem,7vw,4.5rem); line-height:1; font-variant-numeric:tabular-nums}
.count__lbl{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); margin-top:.5rem}
.count__live{color:var(--akzent)}

/* ---------- Laufband ---------- */

.band{
  display:flex; overflow:hidden;
  background:var(--akzent); color:var(--night);
  padding:.7rem 0; user-select:none;
}
.band__track{display:flex; flex:0 0 auto; gap:2.5rem; padding-right:2.5rem; animation:roll 26s linear infinite}
.band__item{font-family:var(--display); font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
@keyframes roll{from{transform:translateX(0)} to{transform:translateX(-100%)}}

/* ---------- Buttons ---------- */

.btn{
  display:inline-block;
  font-family:var(--mono); font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--night); background:var(--bone);
  padding:.95rem 1.6rem; border:2px solid var(--bone); cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.btn:hover{background:transparent; color:var(--bone)}
.btn--ghost{background:transparent; color:var(--bone); border-color:var(--akzent)}
.btn--ghost:hover{background:var(--akzent); color:var(--night)}
.btn--blau{background:var(--blue); border-color:var(--blue); color:#fff}
.btn--blau:hover{background:transparent; color:var(--blue)}

/* ---------- Event-Kacheln ---------- */

.kacheln{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
}

.kachel{position:relative; display:flex; flex-direction:column; min-height:17rem;
  border:1px solid var(--line); background:var(--paper);
  transition:border-color .18s ease, transform .18s ease}
.kachel:hover{border-color:var(--akzent); transform:translateY(-3px)}

.kachel__bild{aspect-ratio:16/9; object-fit:cover; width:100%; border-bottom:1px solid var(--line)}

.kachel__datum{
  display:flex; align-items:baseline; gap:.55rem;
  padding:1.25rem 1.25rem .35rem;
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--akzent);
}
.kachel__tag{font-family:var(--display); font-size:2.4rem; line-height:.9; letter-spacing:0; color:var(--bone)}

.kachel__titel{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.5rem,4.5vw,2.1rem); line-height:1.02;
  margin:.35rem 0 .5rem; padding:0 1.25rem;
}
.kachel__tagline{margin:0; padding:0 1.25rem 1.25rem; color:var(--ash); font-size:.95rem}

.kachel__fuss{
  margin-top:auto; display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:.9rem 1.25rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ash);
}
.kachel__mehr{color:var(--bone)}

/* Der ganze Kachel-Bereich ist klickbar */
.kachel__link{position:absolute; inset:0; text-indent:-9999px; overflow:hidden}

.kachel--vorbei{opacity:.5}
.kachel--vorbei:hover{border-color:var(--line); transform:none}

.leer{
  border:1px dashed var(--line); padding:2.5rem 1.5rem; text-align:center;
  color:var(--ash); font-family:var(--mono); font-size:.85rem;
}

/* ---------- Event-Detailseite ---------- */

.detail__kopf{padding:clamp(2.5rem,8vh,5rem) var(--gut) clamp(2rem,5vh,3rem); border-bottom:1px solid var(--line)}
.detail__kopf-grid{display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:start}
@media (min-width:880px){.detail__kopf-grid{grid-template-columns:1.15fr .85fr}}
.detail__kopf .eyebrow{font-size:clamp(.85rem,1.8vw,1.05rem)}
.detail__titel{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem,10vw,7rem); line-height:.88; letter-spacing:-.01em;
  margin:.5rem 0 1rem;
}
.detail__tagline{color:var(--ash); max-width:38rem; margin:0}
.detail__links{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}

.zurueck{
  display:inline-block; margin-bottom:1.5rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash); text-decoration:none;
}
.zurueck:hover{color:var(--bone)}

.detail__bild{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border:1px solid var(--line);
}

/* ---------- Datenliste (Fakten, Öffnungszeiten) ---------- */

.facts{margin:0; max-width:60rem}
.facts__row{
  display:grid; grid-template-columns:minmax(6.5rem,10rem) 1fr;
  gap:.75rem 1.5rem; align-items:baseline;
  padding:1rem 0; border-top:1px solid var(--line);
}
.facts__row:last-child{border-bottom:1px solid var(--line)}
.facts__key{font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash)}
.facts__val{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.1rem,3vw,1.6rem); text-transform:uppercase; line-height:1.15;
}
.facts__val small{
  display:block; font-family:var(--body); font-size:.9rem; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--ash); margin-top:.35rem;
}

.karte-embed{
  width:100%; aspect-ratio:4/3; border:1px solid var(--line);
  filter:grayscale(.3) invert(.92) contrast(.9);
}

/* ---------- Galerie ---------- */

.galerie{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));
}
.galerie__link{display:block; border:1px solid var(--line)}
.galerie__bild{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  transition:opacity .18s ease;
}
.galerie__link:hover .galerie__bild{opacity:.8}

.lightbox{
  display:none; position:fixed; inset:0; z-index:1000;
  align-items:center; justify-content:center;
  padding:clamp(1.5rem,6vw,4rem);
  background:rgba(11,10,20,.95);
}
.lightbox:target{display:flex}
.lightbox__zu{position:fixed; inset:0; cursor:zoom-out}
.lightbox__bild{
  position:relative; max-width:100%; max-height:100%;
  aspect-ratio:1/1; object-fit:contain; pointer-events:none;
}

/* ---------- Fotos (vergangene Events) ---------- */

.fotos__event{
  margin-bottom:clamp(2rem,5vw,3rem); scroll-margin-top:6rem;
  border:1px solid var(--line); padding:clamp(1.5rem,4vw,2.25rem);
}
.fotos__event:last-child{margin-bottom:0}
.fotos__kopf{margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--line)}
.fotos__datum{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash); margin:0 0 .5rem;
}
.fotos__kopf-zeile{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem}
.fotos__titel{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.5rem,4vw,2.2rem); margin:0;
}

/* ---------- Getränkekarte ---------- */

.karte{column-width:21rem; column-gap:clamp(2rem,5vw,3.5rem)}

.karte__gruppe{
  display:inline-block; width:100%; break-inside:avoid;
  margin:0 0 clamp(2.25rem,5vw,3rem);
}
.karte__titel{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:1.6rem; letter-spacing:.02em;
  margin:0 0 .35rem; padding-bottom:.6rem; border-bottom:2px solid var(--akzent);
}
.karte__gruppe:nth-child(even) .karte__titel{border-bottom-color:var(--blue)}
.karte__hinweis{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ash); margin:.6rem 0 1rem}

.karte__liste{list-style:none; margin:0; padding:0}
.karte__pos{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .6rem;
  padding:.65rem 0; border-bottom:1px solid var(--line);
}
.karte__name{flex:0 1 auto}
.karte__fill{
  flex:1 1 auto; min-width:1.25rem; align-self:flex-end;
  margin-bottom:.3em; border-bottom:2px dotted var(--line);
}
.karte__menge{flex:0 0 auto; font-family:var(--mono); font-size:.74rem; color:var(--ash); white-space:nowrap}
.karte__notiz{flex:0 0 100%; font-size:.82rem; color:var(--ash); margin-top:-.15rem}

@media (hover:hover){
  .karte__pos:hover .karte__name{color:var(--akzent)}
}

.karte-promo{
  border:1px solid var(--akzent); background:rgba(47,94,255,.08);
  padding:1.5rem 1.75rem; margin:0 0 clamp(2.5rem,6vw,3.5rem); max-width:36rem;
}
.karte-promo__tag{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--akzent);
  margin:0 0 .5rem;
}
.karte-promo__text{margin:0; color:var(--bone); font-size:1rem; line-height:1.6}
.karte-promo__text strong{font-weight:600}

/* ---------- Formular ---------- */

.form{max-width:38rem; display:grid; gap:1.25rem}
.feld{display:grid; gap:.45rem}
.feld__lbl{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash)}
.feld__in{
  font-family:var(--body); font-size:1rem; color:var(--bone);
  background:var(--paper); border:1px solid var(--line);
  padding:.85rem .9rem; width:100%;
}
.feld__in:focus{border-color:var(--blue); outline:none; box-shadow:0 0 0 2px rgba(56,189,248,.35)}
.feld__in::placeholder{color:#5B5871}
textarea.feld__in{min-height:7rem; resize:vertical}

.honigtopf{position:absolute; left:-9999px}

.zeile2{display:grid; gap:1.25rem}
@media (min-width:600px){.zeile2{grid-template-columns:1fr 1fr}}

.meldung{padding:1.1rem 1.25rem; margin-bottom:2rem; font-family:var(--mono); font-size:.85rem; line-height:1.6}
.meldung--ok{border:1px solid var(--blue); color:var(--bone); background:rgba(56,189,248,.12)}
.meldung--fehler{border:1px solid var(--fehler); color:var(--bone); background:rgba(255,59,31,.12)}

/* ---------- Fußzeile ---------- */

.foot{border-top:1px solid var(--line); background:var(--paper)}

.kontaktbar{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  background:var(--line);
  border-bottom:1px solid var(--line);
}
.kbtn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; padding:1.5rem .75rem;
  background:var(--paper); text-decoration:none; color:var(--bone);
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background .16s ease, color .16s ease;
}
.kbtn svg{width:26px; height:26px; fill:currentColor; flex:none}
.kbtn:hover{background:var(--bone); color:var(--night)}
.kbtn--wa:hover{background:#25D366; color:#04220F}
.kbtn--ig:hover{background:#E1306C; color:#fff}
.kbtn--fb:hover{background:#1877F2; color:#fff}
.kbtn--tel:hover{background:var(--akzent); color:var(--night)}
.kbtn--mail:hover{background:var(--blue); color:#fff}

@media (max-width:600px){
  .kontaktbar{grid-template-columns:1fr}
  .kbtn{flex-direction:row; justify-content:flex-start; gap:.9rem; padding:1rem 1.25rem}
}

.foot__unten{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 2.25rem;
  padding:clamp(2rem,5vh,3rem) var(--gut);
}
.foot__mark{font-family:var(--display); font-size:1.5rem; text-transform:uppercase; letter-spacing:.04em; margin-right:auto}
.foot__mark span{color:var(--akzent)}
.foot__adr{font-style:normal; font-size:.9rem; color:var(--ash)}
.foot__recht{display:flex; gap:1.5rem}
.foot__recht a,
.foot__legal{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); text-decoration:none}
.foot__recht a:hover{color:var(--bone)}
.foot__legal{flex-basis:100%; margin:0}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .hero__word--fill{-webkit-text-fill-color:var(--bone); color:var(--bone)}
}

/* ---------- Hinweisbalken im Vorschau-Modus ---------- */

.vorschaubalken{
  margin:0; padding:.6rem var(--gut);
  background:var(--blue); color:#fff;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; text-align:center;
}
.vorschaubalken a{color:#fff; margin-left:.5rem}

/* ---------- Cookie-Banner ---------- */

.cookiebanner{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  padding:1.1rem var(--gut);
  background:var(--paper); border-top:1px solid var(--line);
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
.cookiebanner[hidden]{display:none}
.cookiebanner__text{margin:0; flex:1 1 20rem; font-size:.88rem; color:var(--ash)}
.cookiebanner__text a{color:var(--bone); text-decoration:underline}
.cookiebanner__aktionen{display:flex; gap:.75rem; flex-wrap:wrap}