/* ================================================
   MR.MAREK – Official Website
   Multi-Page | Dark Minimal Techno
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700;900&family=Oswald:wght@300;400;700&display=swap');

:root {
  --black:      #000000;
  --dark:       #0a0a0a;
  --dark2:      #111111;
  --dark3:      #1a1a1a;
  --red:        #e63946;
  --mint:       #64ffda;
  --mint-dim:   rgba(100,255,218,0.12);
  --white:      #ffffff;
  --grey:       #888888;
  --light-grey: #cccccc;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background-color: var(--black);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}

/* Reveal */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ================================================
   NAVIGATION
   ================================================ */
nav {
  position: fixed; top:0; left:0; width:100%; z-index:1000;
  padding: 18px 60px;
  display: flex; justify-content:space-between; align-items:center;
  transition: background .4s, padding .4s;
}
nav.scrolled {
  background: rgba(0,0,0,.96);
  padding: 12px 60px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.nav-logo img { height:46px; width:auto; display:block; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  color: var(--light-grey); text-decoration:none;
  font-size:.72rem; font-weight:400; letter-spacing:2px; text-transform:uppercase;
  transition: color .3s;
  position: relative; padding-bottom: 4px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--mint); transition:width .3s;
}
.nav-links a:hover { color:var(--mint); }
.nav-links a:hover::after { width:100%; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001; }
.hamburger span { width:25px; height:2px; background:var(--white); transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-menu {
  display:none; position:fixed; inset:0; background:var(--black);
  z-index:999; flex-direction:column; align-items:center; justify-content:center; gap:28px;
}
.mobile-menu.active { display:flex; }
.mobile-menu a {
  font-family:'Oswald',sans-serif; font-size:2rem; letter-spacing:4px;
  color:var(--white); text-decoration:none; text-transform:uppercase; transition:color .3s;
}
.mobile-menu a:hover { color:var(--mint); }

/* ================================================
   HERO
   ================================================ */
#hero {
  position:relative; width:100%; height:100vh;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.hero-video {
  position:absolute; top:50%; left:50%;
  min-width:100%; min-height:100%;
  transform:translate(-50%,-50%); object-fit:cover;
  opacity:.4; z-index:0;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,.6) 60%,rgba(0,0,0,1) 100%);
  z-index:1;
}
.hero-content { position:relative; z-index:2; text-align:center; }
.hero-content h1 {
  font-family:'Oswald',sans-serif;
  font-size:clamp(4rem,12vw,10rem);
  font-weight:700; letter-spacing:10px; text-transform:uppercase; line-height:1;
}
.hero-content h1 .dot { color:var(--mint); }
.hero-subtitle {
  margin-top:16px; font-size:.78rem; letter-spacing:6px;
  color:var(--grey); text-transform:uppercase; font-weight:300;
}
.hero-scroll {
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;
}
.hero-scroll span { font-size:.65rem; letter-spacing:3px; color:var(--grey); text-transform:uppercase; }
.scroll-line {
  width:1px; height:50px;
  background:linear-gradient(to bottom,var(--grey),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100%{opacity:1;transform:scaleY(1)} 50%{opacity:.3;transform:scaleY(.7)}
}

/* ================================================
   COMMON SECTION STYLES
   ================================================ */
section { padding:100px 0; }
.container { max-width:1200px; margin:0 auto; padding:0 60px; }
.section-label { font-size:.7rem; letter-spacing:4px; color:var(--mint); text-transform:uppercase; margin-bottom:16px; font-weight:400; }
.section-title {
  font-family:'Oswald',sans-serif; font-size:clamp(2rem,5vw,4rem);
  font-weight:700; letter-spacing:3px; text-transform:uppercase; line-height:1.1; margin-bottom:30px;
}
.divider { width:60px; height:2px; background:var(--mint); margin-bottom:30px; }
.page-header {
  padding:160px 0 80px;
  background:var(--dark);
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

/* ================================================
   ABOUT
   ================================================ */
#about { background:var(--dark); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-image { position:relative; }
.about-image img { width:100%; height:600px; object-fit:cover; object-position:center 20%; filter:grayscale(20%); }
.about-image::before {
  content:''; position:absolute; top:-15px; left:-15px;
  width:100%; height:100%; border:1px solid var(--mint); z-index:-1;
  opacity:.4;
}
.about-text p { color:var(--light-grey); line-height:1.9; font-size:.95rem; font-weight:300; margin-bottom:20px; }
.about-text .statement {
  font-size:1.05rem; color:var(--white); font-style:italic;
  border-left:2px solid var(--mint); padding-left:20px; margin-bottom:30px;
}
.btn-primary {
  display:inline-block; margin-top:10px;
  padding:14px 36px; border:1px solid var(--mint);
  color:var(--mint); text-decoration:none; font-size:.72rem; letter-spacing:3px; text-transform:uppercase;
  transition:all .3s;
}
.btn-primary:hover { background:var(--mint); color:var(--black); }

/* ================================================
   CLUBS GRID (hover + floating icon)
   ================================================ */
#clubs { background:var(--black); }
.clubs-intro { color:var(--light-grey); font-size:.95rem; line-height:1.9; font-weight:300; max-width:700px; margin-bottom:60px; }

.clubs-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:2px;
}

.club-item {
  background:var(--dark2);
  padding:50px 30px 40px;
  text-align:center;
  transition:background .35s, transform .35s, box-shadow .35s;
  border:1px solid rgba(255,255,255,.04);
  cursor:pointer;
  text-decoration:none;
  display:flex; flex-direction:column; align-items:center;
  position:relative; overflow:hidden;
}

.club-item::before {
  content:'';
  position:absolute; inset:0;
  background:var(--mint-dim);
  opacity:0; transition:opacity .35s;
}

.club-item:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(100,255,218,.15); }
.club-item:hover::before { opacity:1; }

/* Floating icon */
.club-icon {
  width:48px; height:48px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), filter .4s;
}
.club-icon svg { width:32px; height:32px; fill:var(--grey); transition:fill .35s; }
.club-item:hover .club-icon { transform:translateY(-10px) scale(1.2); }
.club-item:hover .club-icon svg { fill:var(--mint); filter:drop-shadow(0 0 8px rgba(100,255,218,.6)); }

.club-item h3 {
  font-family:'Oswald',sans-serif; font-size:1.1rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--white); margin-bottom:6px;
  transition:color .35s;
}
.club-item:hover h3 { color:var(--mint); }

.club-item p { font-size:.68rem; letter-spacing:2px; color:var(--grey); text-transform:uppercase; }

.club-arrow {
  margin-top:18px; font-size:.65rem; letter-spacing:2px; color:var(--grey); text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s;
}
.club-item:hover .club-arrow { opacity:1; transform:translateY(0); color:var(--mint); }

/* ================================================
   STAGE BANNER
   ================================================ */
#stage { padding:0; position:relative; height:60vh; overflow:hidden; }
#stage img { width:100%; height:100%; object-fit:cover; object-position:center 10%; filter:brightness(.45); }
.stage-text {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; flex-direction:column;
}
.stage-text h2 {
  font-family:'Oswald',sans-serif; font-size:clamp(2rem,6vw,5rem);
  letter-spacing:8px; text-transform:uppercase; text-align:center;
}
.stage-text p { color:var(--light-grey); letter-spacing:4px; font-size:.8rem; text-transform:uppercase; margin-top:12px; }

/* ================================================
   MIX / MIXCLOUD
   ================================================ */
#mix { background:var(--dark); }
.mix-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px; margin-top:40px;
}
.mix-card {
  background:var(--dark2); border:1px solid rgba(255,255,255,.06);
  transition:border-color .3s, transform .3s;
  overflow:hidden;
}
.mix-card:hover { border-color:var(--mint); transform:translateY(-4px); }
.mix-card img { width:100%; height:180px; object-fit:cover; }
.mix-card-body { padding:20px; }
.mix-card-body h4 { font-family:'Oswald',sans-serif; font-size:1rem; letter-spacing:1px; margin-bottom:8px; }
.mix-card-body p { font-size:.72rem; color:var(--grey); letter-spacing:1px; }
.mix-card-link {
  display:inline-block; margin-top:14px; padding:8px 20px;
  border:1px solid rgba(100,255,218,.3); color:var(--mint);
  font-size:.65rem; letter-spacing:2px; text-transform:uppercase; text-decoration:none;
  transition:all .3s;
}
.mix-card-link:hover { background:var(--mint); color:var(--black); }
.mixcloud-loading { color:var(--grey); letter-spacing:2px; font-size:.8rem; margin-top:40px; }

/* ================================================
   SOCIALS
   ================================================ */
#socials { background:var(--black); text-align:center; }
.social-links { display:flex; justify-content:center; gap:30px; margin-top:40px; flex-wrap:wrap; }
.social-link {
  display:flex; align-items:center; gap:12px;
  color:var(--grey); text-decoration:none; font-size:.72rem; letter-spacing:2px; text-transform:uppercase;
  padding:16px 28px; border:1px solid rgba(255,255,255,.1); transition:all .3s;
}
.social-link:hover { color:var(--mint); border-color:var(--mint); }
.social-link svg { width:18px; height:18px; fill:currentColor; }

/* ================================================
   BOOKING
   ================================================ */
#booking { background:var(--dark); }
.booking-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.booking-info p { color:var(--light-grey); font-size:.95rem; line-height:1.9; font-weight:300; margin-bottom:30px; }
.booking-contact { display:flex; flex-direction:column; gap:16px; }
.contact-item {
  display:flex; align-items:center; gap:16px;
  color:var(--light-grey); text-decoration:none; font-size:.85rem; letter-spacing:1px;
  padding:20px 24px; border:1px solid rgba(255,255,255,.08); transition:all .3s;
}
.contact-item:hover { border-color:var(--mint); color:var(--white); }
.contact-item svg { width:22px; height:22px; fill:var(--mint); flex-shrink:0; }
.contact-item span { font-size:.68rem; letter-spacing:2px; text-transform:uppercase; color:var(--grey); display:block; margin-bottom:4px; }
.contact-item strong { font-size:.92rem; color:var(--white); font-weight:400; }
.booking-image img { width:100%; height:500px; object-fit:cover; object-position:center 15%; }

/* ================================================
   CLUB DETAIL PAGE
   ================================================ */
.club-detail-header {
  padding:140px 0 80px; text-align:center;
  position:relative; overflow:hidden;
}
.club-detail-header::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.9));
  z-index:1;
}
.club-detail-header > * { position:relative; z-index:2; }
.club-detail-content { padding:80px 0; background:var(--dark); }
.club-detail-content p { color:var(--light-grey); line-height:1.9; font-size:.95rem; font-weight:300; margin-bottom:20px; max-width:700px; }
.club-back {
  display:inline-flex; align-items:center; gap:10px;
  color:var(--grey); text-decoration:none; font-size:.7rem; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:40px; transition:color .3s;
}
.club-back:hover { color:var(--mint); }
.club-back svg { width:16px; height:16px; fill:currentColor; }

/* ================================================
   NEWSLETTER POPUP
   ================================================ */
#newsletter-popup {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.popup-overlay { position:absolute; inset:0; background:rgba(0,0,0,.85); cursor:pointer; }
.popup-box {
  position:relative; z-index:1;
  background:var(--dark2); border:1px solid rgba(100,255,218,.25);
  padding:50px 44px; max-width:460px; width:90%;
  text-align:center; box-shadow:0 0 60px rgba(100,255,218,.08);
  animation:popupIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popupIn { from{opacity:0;transform:scale(.9) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
.popup-close {
  position:absolute; top:16px; right:20px;
  background:none; border:none; color:var(--grey); font-size:1.6rem; cursor:pointer; transition:color .3s;
}
.popup-close:hover { color:var(--mint); }
.popup-logo img { height:60px; width:auto; margin-bottom:24px; }
.popup-box h3 {
  font-family:'Oswald',sans-serif; font-size:1.6rem; letter-spacing:3px;
  text-transform:uppercase; margin-bottom:12px; color:var(--white);
}
.popup-box p { color:var(--grey); font-size:.85rem; line-height:1.7; margin-bottom:28px; }
#newsletter-form { display:flex; flex-direction:column; gap:12px; }
#newsletter-form input[type="email"] {
  padding:14px 18px; background:var(--dark3);
  border:1px solid rgba(255,255,255,.1); color:var(--white);
  font-family:'Montserrat',sans-serif; font-size:.85rem; outline:none;
  transition:border-color .3s;
}
#newsletter-form input[type="email"]:focus { border-color:var(--mint); }
#newsletter-form button {
  padding:14px; background:var(--mint); color:var(--black);
  border:none; font-family:'Montserrat',sans-serif;
  font-size:.75rem; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  cursor:pointer; transition:opacity .3s;
}
#newsletter-form button:hover { opacity:.85; }
.popup-legal { font-size:.65rem; color:#555; margin-top:16px; line-height:1.6; }
.popup-legal a { color:var(--grey); text-decoration:underline; }

/* ================================================
   IMPRESSUM / DATENSCHUTZ
   ================================================ */
.legal-page { padding:140px 0 100px; }
.legal-page h1 { font-family:'Oswald',sans-serif; font-size:2.5rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:40px; }
.legal-page h2 { font-family:'Oswald',sans-serif; font-size:1.2rem; letter-spacing:2px; text-transform:uppercase; margin:36px 0 12px; color:var(--mint); }
.legal-page p, .legal-page li { color:var(--light-grey); font-size:.9rem; line-height:1.9; margin-bottom:12px; }
.legal-page ul { padding-left:20px; }
.legal-page a { color:var(--mint); }

/* ================================================
   FOOTER
   ================================================ */
footer {
  background:var(--black); border-top:1px solid rgba(255,255,255,.05);
  padding:40px 60px; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px;
}
footer p { color:var(--grey); font-size:.7rem; letter-spacing:1px; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media(max-width:900px) {
  nav, nav.scrolled { padding:18px 24px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .container { padding:0 24px; }
  .about-grid, .booking-grid { grid-template-columns:1fr; gap:40px; }
  .about-image img { height:380px; }
  footer { flex-direction:column; text-align:center; padding:30px 24px; }
  .clubs-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px) {
  section { padding:70px 0; }
  .clubs-grid { grid-template-columns:1fr; }
  .social-links { flex-direction:column; align-items:center; }
  .mix-grid { grid-template-columns:1fr; }
}