/* ---- Basics ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #111; background: #fff; line-height: 1.6; }

/* ---- Navigation ---- */
header {
  background: rgba(0,0,0,0.9);
  position: sticky; top: 0; z-index: 1000;
  padding: 15px 0;
}
nav {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 25px;
}
nav a {
  color: #fff; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.8px;
  padding: 5px 8px; transition: color 0.3s;
}
nav a:hover, nav a.active { color: #ccc; }

/* ---- Sections ---- */
section {
  max-width: 1200px; margin: 60px auto; padding: 0 20px;
}
h1.section-title { font-size: 2rem; font-weight: 700; margin-bottom: 25px; letter-spacing: 1.5px; }

/* ---- Masonry-Galerie mit CSS Columns ---- */
.grid { column-count: 3; column-gap: 15px; }
.grid-item { 
  margin-bottom: 15px; 
  break-inside: avoid; 
  overflow: hidden;
  border-radius: 6px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  background: #fff; 
  transition: transform 0.3s ease;
}
.grid-item img { width: 100%; display: block; transition: transform 0.5s ease; }
.grid-item:hover img { transform: scale(1.05); }

@media (max-width: 900px) { .grid { column-count: 2; } }
@media (max-width: 600px) { .grid { column-count: 1; } }

/* ---- Footer ---- */
footer {
  background: #000; color: #fff; text-align: center;
  padding: 20px; font-size: 0.9rem; margin-top: 60px;
}