:root{
  --bg:#0b1020;
  --card:#0f1724;
  --accent:#b87333; /* kupferfarbe */
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.04);
  --radius:12px;
  --max-width:1100px;
  --ease: cubic-bezier(.2,.9,.2,1);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:linear-gradient(180deg, #071028 0%, #071224 60%), var(--bg);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding-bottom:4rem;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.8rem 1rem;
  backdrop-filter: blur(6px);
  background:linear-gradient(90deg, rgba(11,16,32,0.6), rgba(11,16,32,0.4));
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.brand .logo{
  margin:0;
  font-size:1.15rem;
  letter-spacing:0.6px;
  color:var(--accent);
  font-weight:800;
}
.brand .tag{margin:0;font-size:0.8rem;color:var(--muted)}

.main-nav a{
  color:var(--muted);
  text-decoration:none;
  margin-left:1rem;
  font-weight:500;
}
.main-nav a:hover{color:#fff}

/* Hero */
.hero{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4rem 1rem;
  background:
    radial-gradient(600px 200px at 10% 20%, rgba(184,115,51,0.06), transparent 8%),
    radial-gradient(500px 180px at 90% 80%, rgba(80,160,255,0.02), transparent 8%);
}
.hero-inner{max-width:var(--max-width); margin:0 auto}
.hero-title{
  margin:0;
  font-size:3.2rem;
  letter-spacing: -1px;
  color:linear-gradient(90deg,#fff,#f3d7c4);
  text-shadow: 0 6px 20px rgba(184,115,51,0.06);
  font-weight:900;
  animation: floatTitle 4s ease-in-out infinite;
}
@keyframes floatTitle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.hero-sub{color:var(--muted); margin-top:0.6rem; font-size:1.05rem}
.hero-badges{margin-top:1rem; display:flex; gap:0.5rem; justify-content:center}
.badge{
  background:var(--glass);
  padding:0.35rem 0.6rem;
  border-radius:999px;
  color:var(--muted);
  font-size:0.85rem;
}

/* Gallery */
.gallery-section{
  padding:2.2rem 1rem;
  max-width:var(--max-width);
  margin:0 auto 2rem;
}
.section-title{font-size:1.4rem; margin:0 0 0.2rem; color:#fff}
.section-intro{color:var(--muted); margin:0 0 1rem}

.gallery{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* gallery item as button for keyboard accessibility */
.gallery-item{
  border:0;
  padding:0;
  background:transparent;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  position:relative;
  transform-origin:center;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
  box-shadow: 0 6px 20px rgba(2,6,23,0.45);
}
.gallery-item:focus{outline:2px solid rgba(184,115,51,0.25); transform:translateY(-6px)}
.gallery-item img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  transition: transform 350ms var(--ease), filter 350ms var(--ease);
  transform-origin:center;
  will-change:transform, filter;
  user-select:none;
  pointer-events:none; /* click handled by button parent */
  backface-visibility:hidden;
}

/* Hover effect: enlarge image and lift card */
.gallery-item:hover,
.gallery-item:focus{
  transform:translateY(-8px) scale(1.01);
  z-index:5;
}
.gallery-item:hover img,
.gallery-item:focus img{
  transform:scale(1.15);
  filter:brightness(1.05) saturate(1.05);
  box-shadow: 0 20px 40px rgba(2,6,23,0.6);
}

/* subtle tilt on active (JS) */
.gallery-item.tilt img{
  transform: scale(1.12) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(3,6,12,0.7);
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
}
.lightbox[aria-hidden="false"]{
  opacity:1;
  pointer-events:auto;
}
.lb-content{max-width:90vw; max-height:80vh; text-align:center; margin:0 3rem}
.lb-content img{max-width:100%; max-height:72vh; border-radius:10px; display:block; margin:0 auto}
.lb-caption{color:var(--muted); margin-top:0.6rem}
.lb-close, .lb-prev, .lb-next{
  position:fixed;
  background:transparent;
  color:#fff;
  border:0;
  font-size:2rem;
  cursor:pointer;
  opacity:0.9;
  padding:0.4rem 0.6rem;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
}
.lb-close{right:1rem; top:1rem; font-size:2.4rem}
.lb-prev{left:0.6rem; top:50%; transform:translateY(-50%); font-size:2.2rem}
.lb-next{right:0.6rem; top:50%; transform:translateY(-50%); font-size:2.2rem}

/* Features / About */
.features, .about{
  max-width:var(--max-width);
  margin:0 auto 2rem;
  padding:0 1rem;
  color:var(--muted);
}
.features ul{margin:0 0 1rem 1rem}

/* Footer */
.site-footer{
  text-align:center;
  color:var(--muted);
  padding:1rem;
  margin-top:2rem;
}

/* Responsive tweaks */
@media (min-width:900px){
  .gallery-item img{height:240px}
}
@media (max-width:520px){
  .hero-title{font-size:2.2rem}
  .gallery-item img{height:160px}
}