/* ==========================================
   VARIABLEN & RESET
========================================== */

:root{
    --accent:#5fe1f2;
    --nav-h:80px;
    --bg-dark:#0d0d0d;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    background:var(--bg-dark);
    color:#fff;
    font-family:'Hanken Grotesk', sans-serif;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 25px;
}

/* ── NAVIGATION ── */
.nav-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(15, 15, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo-img {
  height: 40px;   /* Höhe passend zu deinem Header einstellen */
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: color .2s;
}
.nav-links a:hover,
.nav-links a:first-child { color: #fff; }

/* Burger – hidden on desktop */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.burger span {
  display: block;
  width: 24px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-family: 'Anybody', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 50px;
  white-space: nowrap;
  transition: opacity .2s, transform .15s;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { opacity: .88; transform: translateY(-1px); }

.nav-cta { margin-left: 16px; }

/* ==========================================
   HERO
========================================== */

.hero{
    margin-top:var(--nav-h);
    position:relative;
    height:85vh;
    overflow:hidden;
}

.hero img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        rgba(10,10,10,.90) 15%,
        rgba(10,10,10,.55) 55%,
        rgba(10,10,10,.35) 100%
    );
    z-index:1;
}

.hero-content{
    position:absolute;
    inset:0;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    max-width:1100px;
    margin:auto;
}

.small-title{
    font-family:'JetBrains Mono',monospace;
    letter-spacing:3px;
    color:var(--accent);
    font-size:12px;
    margin-bottom:18px;
}

.hero h1{
    font-family:'Anybody',sans-serif;
    font-size:clamp(60px,9vw,120px);
    line-height:.9;
    color:#fff;
    margin-bottom:35px;
}

.hero h1 span{
    color:var(--accent);
}

.hero-text{
    max-width:520px;
    color:#ddd;
    font-size:18px;
    line-height:1.8;
}

/* ==========================================
   BAND
========================================== */

.band-section{
    padding:120px 0;
}

.member{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    margin-bottom:140px;
}

.member.reverse{
    direction:rtl;
}

.member.reverse>*{
    direction:ltr;
}

.member-image img{
    width:100%;
    border-radius:18px;
    object-fit:cover;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
    transition:.45s;
}

.member-image img:hover{
    transform:scale(1.03);
}

.member-role{
    color:var(--accent);
    font-family:'JetBrains Mono',monospace;
    letter-spacing:2px;
    font-size:12px;
}

.member h2{
    font-family:'Anybody',sans-serif;
    font-size:64px;
    color:#fff;
    margin:12px 0 24px;
}

.member p{
    color:#999;
    line-height:1.9;
    font-size:17px;
}

/* ==========================================
   CTA
========================================== */

.booking-cta{
    position:relative;
    padding:120px 0;
    background:url("Material/Header_.webp");
    background-size:cover;
    background-position:center;
}

.booking-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
}

.booking-content{
    position:relative;
    z-index:5;
    text-align:center;
}

.booking-content h2{
    font-family:'Anybody';
    font-size:58px;
    color:white;
    line-height:1.1;
    margin-bottom:25px;
}

.booking-content p{
    color:#cfcfcf;
    max-width:650px;
    margin:auto auto 40px;
    font-size:18px;
}

/* ==========================================
   FOOTER
========================================== */

.footer{
    background:#0a0a0a;
    padding:80px 0 0;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px;
    padding-bottom:50px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-logo{
    font-family:'Anybody', sans-serif;
    font-size:22px;
    color:#fff;
    margin-bottom:16px;
}

.footer-tagline{
    color:#888;
    font-size:14px;
    line-height:1.8;
    max-width:320px;
}

.footer-col-title{
    color:#fff;
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:2px;
    margin-bottom:18px;
}

.footer-col a{
    display:block;
    color:#999;
    font-size:14px;
    margin-bottom:10px;
    transition:.3s;
}

.footer-col a:hover{
    color:var(--accent);
}

.footer-bottom{
    text-align:center;
    padding:25px 0;
    color:#666;
    font-size:13px;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media (max-width: 860px) {
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: rgba(15,15,18,.97);
    flex-direction: column;
    padding: 20px 24px;
    gap: 18px;
  }

  .nav-links.active {
    display: flex;
  }

  .burger {
    display: flex;
  }

  .nav-cta {
    display: none; /* optional: Button auch ins Menü packen statt daneben */
  }
}


@media(max-width:1000px){
    .member{
        grid-template-columns:1fr;
        gap:40px;
        margin-bottom:80px;
    }
    .member.reverse{
        direction:ltr;
    }
    .member h2{
        font-size:48px;
    }
    .hero h1{
        font-size:70px;
    }
    .booking-content h2{
        font-size:42px;
    }
    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
    .footer-brand{
        grid-column:1 / -1;
        margin-bottom:20px;
    }
}

@media(max-width:700px){
    .hero{
        height:70vh;
    }
    .hero-content{
        padding:0 25px;
    }
    .hero h1{
        font-size:48px;
    }
    .hero-text{
        font-size:16px;
    }
    .member h2{
        font-size:38px;
    }
    .member p{
        font-size:15px;
    }
    .band-section{
        padding:70px 0;
    }
    .footer-grid{
        grid-template-columns:1fr;
    }
}
/* Burger animation when open */
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .slider-track { transition: none; }
  .btn-primary, .event-card, .link-arrow { transition: none; }
}