:root{--scroll: 0;

  --primary-bg:#0a0a0a;
  --secondary-bg:#121212;
  --accent-red:#8a0303;
  --accent-red-bright:#b30404;
  --text-main:#f0f0f0;
  --text-muted:#a0a0a0;
  --nav-height:112px;
  --card:#0f0f0f;
  --border:#1b1b1b;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at calc(20% + (var(--scroll) * 8%)) calc(10% + (var(--scroll) * 6%)), rgba(179,4,4,0.15), transparent 40%),
    radial-gradient(circle at calc(80% - (var(--scroll) * 6%)) calc(90% - (var(--scroll) * 5%)), rgba(179,4,4,0.12), transparent 50%),
    linear-gradient(#0b0b0b, #111);
  color:var(--text-main);
  line-height:1.6;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;transition:.3s;}
ul{list-style:none;}
header{
  position:fixed;top:0;width:100%;height:var(--nav-height);
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 3%;
  z-index:6000;
  background:linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0));
  transition:background .4s ease, padding .4s ease;
}
header.scrolled{
  background-color:rgba(10,10,10,.98);
  border-bottom:2px solid var(--accent-red);
  box-shadow:0 4px 15px rgba(0,0,0,.5);
  padding:0 5%;
}
.nav-left{justify-self:start;}
.logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100px; height:100px;              /* ✅ runder Button größer */
  border-radius:999px;
  border:2px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.logo:hover{transform:translateY(-1px);border-color:rgba(179,4,4,.6);background:rgba(179,4,4,.08);}
.logo img{
  width:84px;height:84px;               /* ✅ Logo darin größer */
  object-fit:contain;display:block;
}
header.scrolled .logo{transform:scale(.95);}
.nav-center{justify-self:center;}
.nav-center ul{display:flex;gap:35px;}
.nav-center a{
  font-weight:800;font-size:.95rem;text-transform:uppercase;position:relative;
}
.nav-center a::after{
  content:"";position:absolute;width:0;height:2px;bottom:-5px;left:0;
  background-color:var(--accent-red);transition:width .3s ease;
}
.nav-center a:hover::after{width:100%;}
.nav-center a:hover{color:var(--accent-red-bright);}

.nav-right{
  justify-self:end;display:flex;gap:18px;align-items:center;
}
.social-icon{font-size:1.3rem;color:var(--text-main);}
.social-icon:hover{color:var(--accent-red);transform:translateY(-2px);}

.menu-toggle{display:none;font-size:1.8rem;cursor:pointer;color:var(--text-main);justify-self:center;}

.mobile-nav-links li{margin-bottom:25px;text-align:center;}
.mobile-nav-links a{font-size:1.2rem;font-weight:800;text-transform:uppercase;display:block;}
.mobile-social{display:flex;justify-content:center;gap:25px;margin-top:50px;padding-top:30px;border-top:1px solid #333;}

section{padding:100px 10%;border-bottom:1px solid #1a1a1a;}
.section-title{
  text-align:center;font-size:2.8rem;margin-bottom:70px;position:relative;
  font-weight:900;letter-spacing:1px;text-transform:uppercase;
}
.section-title::after{content:"";display:block;width:80px;height:5px;background:var(--accent-red);margin:15px auto 0;}

#hero{
  height:100vh;width:100%;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:20px;
}

/* Background layer */
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.85)),
    url('../hero.jpg');
  background-size:cover;
  background-position:center;
  animation: cinematicZoom 18s ease-in-out infinite alternate;
  z-index:-2;
}

/* Red club glow overlay */
#hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 70% 20%, rgba(179,4,4,0.25), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(179,4,4,0.18), transparent 45%);
  mix-blend-mode:screen;
  z-index:-1;
}

/* Slow cinematic zoom */
@keyframes cinematicZoom{
  from{
    transform:scale(1);
  }
  to{
    transform:scale(1.08);
  }
}
.hero-logo{
  width:min(420px, 72vw);
  height:auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.75));
  margin-bottom:18px;
}
#hero p{font-size:1.2rem;color:#d0d0d0;max-width:700px;text-shadow:1px 1px 5px rgba(0,0,0,.7);margin-bottom:34px;}
.btn{
  padding:15px 45px;background-color:var(--accent-red);color:white;
  font-weight:900;text-transform:uppercase;letter-spacing:1px;border:3px solid var(--accent-red);
  border-radius:2px;transition:all .3s ease;display:inline-block;
}
.btn:hover{background:transparent;color:var(--accent-red-bright);border-color:var(--accent-red-bright);box-shadow:0 0 15px rgba(138,3,3,.4);}

#events{background:var(--secondary-bg);}
.eventim-wrap{max-width:1100px;margin:0 auto;}
.eventim-frame{
  width:100%;
  height:1200px; /* ✅ groß genug für ~6 Events + Button */
  border:1px solid #222;border-radius:10px;
  background:#0b0b0b;
}
.eventim-note{color:var(--text-muted);text-align:center;margin-top:14px;font-size:.9rem;}

#instagram{background:var(--primary-bg);}
.gallery-frame{
  max-width:1100px;margin:0 auto;
  border:1px solid #141414;             /* ✅ dunkler */
  background:#0c0c0c;                    /* ✅ dunkler */
  border-radius:12px;
  padding:18px;
}
.insta-link-btn{
  display:flex;align-items:center;justify-content:center;width:fit-content;
  margin:50px auto 0;padding:12px 25px;text-align:center;color:var(--text-main);
  border:2px solid #333;border-radius:50px;font-weight:700;gap:10px;
}
.insta-link-btn:hover{color:white;border-color:var(--accent-red);background:var(--accent-red);}

#location{background:var(--secondary-bg);text-align:center;}
.contact-box{
  background:rgba(255,255,255,.03);padding:40px;border-radius:10px;display:inline-block;
  border:1px solid #222;
}
.contact-box i{color:var(--accent-red);margin-bottom:15px;}
.contact-box p{font-size:1.05rem;margin-bottom:20px;}
.contact-link{color:var(--accent-red-bright);font-weight:800;font-size:1.15rem;}

footer{
  background:#0c0c0c;padding:80px 10% 30px;color:var(--text-muted);font-size:.95rem;
  border-top:2px solid var(--accent-red);
}
.footer-content{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:50px;margin-bottom:55px;
}
.footer-col h4{color:white;margin-bottom:18px;font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul a:hover{color:var(--accent-red);padding-left:5px;}
.footer-bottom{text-align:center;padding-top:30px;border-top:1px solid #222;font-size:.85rem;}

.cookie-container{
  position:fixed;bottom:-140px;left:0;width:100%;
  background:#141010;border-top:2px solid var(--accent-red);
  padding:18px 5%;display:flex;justify-content:space-between;align-items:center;z-index:4000;
  transition:bottom .5s ease-in-out;box-shadow:0 -5px 20px rgba(0,0,0,.5);
}
.cookie-container.active{bottom:0;}
.cookie-text p{color:#ccc;font-size:.9rem;margin:0;}
.cookie-text a{color:var(--accent-red-bright);text-decoration:underline;}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.cookie-btn{
  padding:9px 18px;border:none;cursor:pointer;font-weight:900;text-transform:uppercase;font-size:.78rem;
  transition:.2s;border-radius:8px;
}
.cookie-btn.accept{background:var(--accent-red);color:white;}
.cookie-btn.decline{background:#333;color:#ccc;}
.cookie-btn.settings{background:#1f1f1f;color:#eee;border:1px solid #333;}
.cookie-btn:hover{transform:scale(1.03);}

.modal{
  display:none;position:fixed;z-index:5000;left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,.65);backdrop-filter: blur(4px);
}
.modal.active{display:block;}
.modal-card{
  width:min(720px, 92vw);
  background:#0f0f0f;
  border:1px solid #222;border-radius:14px;
  margin:7vh auto;padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal-card h3{margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;}
.modal-card p{color:#cfcfcf;margin-bottom:14px;}
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-top:1px solid #1c1c1c;
}
.toggle-row:first-of-type{border-top:none;}
.badge{font-size:.75rem;color:#bbb;border:1px solid #333;padding:3px 8px;border-radius:999px;}
.switch{display:flex;gap:10px;align-items:center;color:#ddd;font-weight:700;}
.switch input{transform:scale(1.25);}

@media(max-width:992px){
  :root{ --nav-height: 112px; }
header{grid-template-columns:1fr auto 1fr;padding:0 5%;}
  .nav-center,.nav-right{display:none;}
  .menu-toggle{display:block;}
  section{padding:80px 5%;}
  .section-title{font-size:2.2rem;}
  .logo{width:96px;height:96px;}
  .logo img{width:78px;height:78px;}
  .eventim-frame{height:1300px;}
}
@media(max-width:576px){
  .logo{width:70px;height:70px;}
  .logo img{width:56px;height:56px;}
  #hero p{font-size:1rem;}
  .btn{padding:12px 30px;font-size:.9rem;}
  .eventim-frame{height:1400px;}
  .cookie-container{flex-direction:column;text-align:center;gap:12px;}
}


@keyframes logoPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.hero-logo {
  animation: logoPulse 1.2s ease-in-out infinite;
}

header.scrolled{border-bottom:2px solid var(--accent-red) !important;}

/* Enhanced Red Accents */
.section-title::after{
  background: linear-gradient(to right, #8a0303, #b30404);
}

footer{
  background: linear-gradient(to top, #0b0b0b, #140909);
}

.contact-box{
  border:1px solid rgba(179,4,4,0.25);
}

.gallery-frame{
  border:1px solid rgba(179,4,4,0.25);
}


/* Unified Background for Main Sections */
#events,
#instagram,
#location{
  background:
    radial-gradient(circle at 20% 10%, rgba(179,4,4,0.12), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(179,4,4,0.10), transparent 50%),
    linear-gradient(#0d0d0d, #151010);
}

/* Subtle vignette for depth */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.55) 100%);
}
/* keep page content above vignette */
section, footer{
  position:relative;
  z-index:1;
}
.mobile-nav-overlay, .cookie-container, .modal{
  z-index:1;
}

/* Softer transitions between sections */
section{
  position:relative;
}
section::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:42px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0));
  pointer-events:none;
}
section::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:42px;
  background:linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));
  pointer-events:none;
}

header{position:fixed !important; z-index:6000;}
header.scrolled{border-bottom:2px solid var(--accent-red) !important;}


/* LED strip snake around header logo (counter-clockwise) */
.logo{ position:relative; overflow:visible; }
.logo::before{
  content:"";
  position:absolute;
  inset:-8px;                 /* ring outside */
  border-radius:999px;
  pointer-events:none;
  /* snake-like bright segment in conic gradient */
  background:
    conic-gradient(
      from 0deg,
      rgba(179,4,4,0) 0deg,
      rgba(179,4,4,0) 285deg,
      rgba(179,4,4,0.35) 300deg,
      rgba(255,80,80,0.85) 315deg,
      rgba(179,4,4,0.55) 330deg,
      rgba(179,4,4,0) 345deg,
      rgba(179,4,4,0) 360deg
    );
  filter: blur(1.2px);
  opacity:0.95;

  /* cut out center to make it a ring */
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
          mask: radial-gradient(circle, transparent 62%, #000 64%);

  animation: logoLedSpin 6.5s linear infinite;
}
.logo::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  pointer-events:none;
  background:
    conic-gradient(
      from 0deg,
      rgba(179,4,4,0) 0deg,
      rgba(179,4,4,0) 300deg,
      rgba(255,80,80,0.35) 318deg,
      rgba(179,4,4,0) 336deg,
      rgba(179,4,4,0) 360deg
    );
  filter: blur(6px);
  opacity:0.55;
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 63%);
          mask: radial-gradient(circle, transparent 60%, #000 63%);
  animation: logoLedSpin 6.5s linear infinite;
}

@keyframes logoLedSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(-360deg); }   /* counter-clockwise */
}

/* LED strip snake around HERO logo (counter-clockwise) */
.hero-logo-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:14px; /* space for ring */
}
.hero-logo-wrap::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  pointer-events:none;
  background:
    conic-gradient(
      from 0deg,
      rgba(179,4,4,0) 0deg,
      rgba(179,4,4,0) 280deg,
      rgba(179,4,4,0.28) 296deg,
      rgba(255,80,80,0.9) 312deg,
      rgba(179,4,4,0.6) 328deg,
      rgba(179,4,4,0) 344deg,
      rgba(179,4,4,0) 360deg
    );
  filter: blur(1.6px);
  opacity:0.95;
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%);
          mask: radial-gradient(circle, transparent 66%, #000 68%);
  animation: heroLedSpin 7.5s linear infinite;
}
.hero-logo-wrap::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:999px;
  pointer-events:none;
  background:
    conic-gradient(
      from 0deg,
      rgba(179,4,4,0) 0deg,
      rgba(179,4,4,0) 300deg,
      rgba(255,80,80,0.35) 318deg,
      rgba(179,4,4,0) 336deg,
      rgba(179,4,4,0) 360deg
    );
  filter: blur(10px);
  opacity:0.55;
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 67%);
          mask: radial-gradient(circle, transparent 64%, #000 67%);
  animation: heroLedSpin 7.5s linear infinite;
}
@keyframes heroLedSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(-360deg); }
}


/* Center footer layout */
footer{
  text-align:center;
}

.footer-content{
  margin-left:auto;
  margin-right:auto;
  justify-items:center;
  text-align:center;
}

.footer-bottom{
  text-align:center;
}


/* Premium footer ambient glow */
footer{
  box-shadow: inset 0 20px 60px rgba(179,4,4,0.15),
              0 -10px 60px rgba(179,4,4,0.08);
}

/* Live venue hover feel */
footer a{
  transition: all 0.25s ease;
}

footer a:hover{
  color: #ff3a3a;
  text-shadow: 0 0 8px rgba(255,60,60,0.6);
  transform: translateY(-1px);
}


/* Neon edge glow when header is scrolled */
header.scrolled{
  box-shadow:
    0 4px 15px rgba(0,0,0,0.55),
    0 0 18px rgba(179,4,4,0.35),
    0 0 42px rgba(179,4,4,0.18);
}






/* Metal hand header decoration (aligned, non-breaking) */
.header-hand{
  width:44px;
  height:auto;
  display:block;
  flex:0 0 auto;

  --p: 1;
  transform: scale(var(--p));
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.22)) drop-shadow(0 0 10px rgba(179,4,4,0.35));
  animation: handPulse 2.6s ease-in-out infinite;
}
.header-hand.right{
  transform: scaleX(-1) scale(var(--p));
}
@keyframes handPulse{
  0%{ --p: 1; }
  50%{ --p: 1.14; }
  100%{ --p: 1; }
}
  50%{ --p: 1.06; }
  100%{ --p: 1; }
}

/* Hands inside nav items */
.nav-hand-li{
  display:flex;
  align-items:center;
  gap:10px;
}
/* Only show burger-side hands on mobile */
.mobile-only{display:none;}

@media(max-width:992px){
  .header-hand{ width:38px; }
  .mobile-only{display:block;}
  /* keep desktop nav hidden already; just align header center area */
  header{grid-template-columns:1fr auto 1fr;}
}

/* Replace hamburger with hand on mobile/responsive */
.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:6px 8px;
  border-radius:12px;
}
.menu-hand{
  width:40px;
  height:auto;
  display:block;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.22)) drop-shadow(0 0 12px rgba(179,4,4,0.45));
  animation: handPulse 1.9s ease-in-out infinite;
}
.menu-toggle.open .menu-hand{
  transform: scaleX(-1);
}
@media(max-width:992px){
  .menu-toggle{display:flex;}
  .menu-hand{width:44px;}
}


/* Header nav alignment fixes (keep hands inline with text) */
.nav-center ul{
  align-items:center;
}
.nav-hand-li{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  white-space:nowrap;
}
.nav-hand-li a{display:inline-block;}


/* Mobile menu hand button: prevent clipping */
header{ overflow: visible; }
.menu-toggle{
  display:none; /* desktop hidden as before */
  align-items:center;
  justify-content:center;
  line-height:0;
  height:100%;
}
.menu-hand{
  transform-origin:center center;
}
@media(max-width:992px){
  .menu-toggle{display:flex !important;}
}


/* Prevent mobile menu hand clipping (small viewport heights) */
.menu-toggle{
  align-self:center;
  min-height: 44px;
}
.menu-hand{
  margin-top: 2px;
}

/* Cookie banner: readable on mobile + safe area */
.cookie-container{
  padding-bottom: 18px;
  max-height: 45vh;
  overflow: auto;
}
@media(max-width:576px){
  .cookie-text p{
    font-size: .92rem;
    line-height: 1.35;
    word-break: break-word;
  }
  .cookie-btns{
    width: 100%;
    justify-content: center;
  }
  .cookie-btn{
    padding: 10px 14px;
    font-size: .78rem;
  }
}

/* Ensure header items are always above background/overlays */
header .logo,
header .nav-center,
header .social-icons,
header .menu-toggle{
  position: relative;
  z-index: 2001;
}

@media(max-width:992px){
  .logo{ width:86px; height:86px; }
  .logo img{ width:58px; height:58px; }
  .menu-hand{ width:40px; }
}



header{
  top:0 !important;
  height: var(--nav-height) !important;
  padding-top: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 9999 !important;
}

/* Remove any header pseudo overlays that could create a band */
header::before, header::after{
  content: none !important;
  display: none !important;
}



header{
  position:fixed !important;
  top:0 !important;
  width:100% !important;
  height:var(--nav-height) !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  padding:0 3% !important;
  box-sizing:border-box !important;
  z-index:9999 !important;
  background:linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0)) !important;
  overflow:visible !important;
}

/* keep header content above any overlays */
header *{
  position:relative;
  z-index:10000;
}

/* remove any header pseudo overlays */
header::before, header::after{
  content:none !important;
  display:none !important;
}

/* mobile menu overlay sits directly under header */
/* mobile: keep header height reasonable */
@media(max-width:992px){
  :root{ --nav-height: 112px; }
}


.mobile-nav-overlay{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #0a0a0a;

  /* Keep menu content below header */
  padding: calc(var(--nav-height) + 28px) 22px 28px;

  overflow-y: auto;

  
  pointer-events: none;
/* Fully off-canvas when closed (no leftover band) */
  transform: translateY(-120%);
  transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);

  border-top: 2px solid var(--accent-red);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);

  z-index: 5000; /* below header (header is 9999) */
}

.mobile-nav-overlay.active{
  transform: translateY(0);

  pointer-events: auto;
}


/* Restore solid black header background and proper stacking */
header{
  background:#000 !important;   /* black header again */
  z-index:8000 !important;
}

header .logo,
header .nav-center,
header .social-icons,
header .menu-toggle,
header .header-hand{
  position:relative;
  z-index:9000;   /* make sure logo + menu + hands sit above header background */
}

/* Footer: two-column layout (no Rechtliches) */
.footer-content.footer-two-col{
  grid-template-columns: repeat(2, minmax(220px, 320px));
  justify-content: center;
  gap: 70px;
}
@media(max-width:600px){
  .footer-content.footer-two-col{
    grid-template-columns: 1fr;
    gap: 35px;
  }
}