:root {
      --bg1:#0e1a2b;
      --bg2:#18344e;
      --panel:rgba(255,255,255,0.07);
      --panel-strong:rgba(255,255,255,0.11);
      --text:#f4f7fb;
      --muted:rgba(244,247,251,0.78);
      --accent:#00bcd4;
      --accent2:#83c5f3;
      --line:rgba(255,255,255,0.1);
      --shadow:0 18px 60px rgba(0,0,0,0.35);
      --radius:24px;
      --max:1200px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:'Inter',Segoe UI,Roboto,sans-serif;
      color:var(--text);
      background:linear-gradient(180deg,var(--bg1),var(--bg2));
      overflow-x:hidden;
    }
    img{max-width:100%;display:block}
    a{color:inherit}

    /* NAVIGATION */
    .navbar{
      position:fixed;top:0;left:0;width:100%;z-index:9999;
      display:flex;justify-content:center;gap:34px;flex-wrap:wrap;
      padding:16px 20px;background:rgba(14,26,43,0.9);backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(255,255,255,0.06)
    }
    .navbar a{color:#fff;text-decoration:none;font-weight:700;transition:.2s}
    .navbar a:hover{color:var(--accent2)}

    .hamburger{
      position:fixed;top:18px;right:18px;width:44px;height:44px;border-radius:12px;
      display:none;flex-direction:column;align-items:center;justify-content:center;
      gap:3px;background:rgba(255,255,255,0.12);backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,0.15);z-index:10001;cursor:pointer
    }
    .hamburger span{
      display:block !important;width:22px !important;height:4px !important;
      background:#fff !important;border-radius:2px !important;transition:.25s ease !important;
      flex-shrink:0
    }

    .menu-overlay{position:fixed;inset:0;background:rgba(3,8,15,0.96);display:flex;
      flex-direction:column;align-items:center;justify-content:center;gap:22px;
      opacity:0;pointer-events:none;transition:.25s;z-index:9998
    }
    .menu-overlay.active{opacity:1;pointer-events:auto}
    .menu-overlay a{font-size:1.6rem;letter-spacing:.04em;color:#fff;text-decoration:none;font-weight:700;transition:.2s}
    .menu-overlay a:hover{color:var(--accent2)}

    /* HERO */
    .hero{min-height:70vh;display:grid;place-items:center;text-align:center;position:relative;
      padding:140px 16px 60px;background:linear-gradient(180deg,rgba(8,16,28,0.4),rgba(8,16,28,0.8)),
      url('Logo2 Die Winterstadtdetektive.jpeg') center/cover no-repeat;isolation:isolate
    }
    .hero h1{font-size:clamp(2.8rem,7vw,5rem);color:var(--accent2);letter-spacing:.03em}

    /* GALLERY */
    section{padding:84px 16px}
    .container{width:min(var(--max),100%);margin:0 auto}
    .section-head{max-width:760px;margin:0 auto 48px;text-align:center}
    .section-head h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:16px;color:var(--accent2)}
    .section-head p{color:var(--muted);line-height:1.75;font-size:1.1rem}

    .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
    .gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--panel);
    border:1px solid var(--line);
    backdrop-filter:blur(8px);
    transition:.3s;
    cursor:pointer;
    display:flex;
    flex-direction:column;
}      border:1px solid var(--line);backdrop-filter:blur(8px);transition:.3s;cursor:pointer
    }
    .gallery-item:hover{transform:translateY(-8px);box-shadow:0 25px 50px rgba(0,188,212,0.2);}
    .gallery-img{width:100%;height:280px;object-fit:cover;transition:.4s}
    .gallery-item:hover .gallery-img{transform:scale(1.1)}

.gallery-caption{
    padding:16px 20px;
    text-align:center;
    background:linear-gradient(180deg,rgba(0,0,0,0.2),rgba(0,0,0,0.85));
}
    .gallery-caption h4{margin-bottom:4px;color:var(--accent2);font-size:1.1rem}
    .gallery-caption p{color:var(--muted);font-size:.95rem}

    .lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-content img,
.lightbox-content video {
  border-radius: 14px;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 3rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  background: rgba(255,255,255,0.12);
  border: none;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s;
}

.lightbox-nav:hover {
  background: rgba(255,255,255,0.25);
}

.lightbox-nav.prev {
  left: 20px;
}

.lightbox-nav.next {
  right: 20px;
}
    /* RESPONSIVE */
    @media (max-width:821px){
      .navbar{display:none !important}
      .hamburger{display:flex !important}
      .gallery-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
      section{padding:64px 16px}
      .hero{padding-top:100px;min-height:60vh}
    }
    @media (max-width:600px){
      .gallery-grid{grid-template-columns:1fr;gap:18px}
      .gallery-img{height:260px}
      .lightbox{padding:10px}
    }

    footer{padding:44px 16px;text-align:center;color:rgba(244,247,251,0.68);
      background:linear-gradient(180deg,#081421,#0b1929);margin-top:60px}
    footer a{color:var(--accent2);text-decoration:none}