:root{
--gap:18px;
--radius:18px; /* Rundungsradius — anpassen */
--shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Galerie-Container mit der gewünschten ID */
#gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  max-width: 1000px;
  margin: 0px auto;   /* 👈 das hier bestimmt den Außenabstand */
  align-items: stretch;
}


/* Bild-Wrapper damit die Ecken und das Zuschneiden korrekt funktionieren */
#gallery .item{
overflow: hidden; /* rundung sichtbar machen */
border-radius: 6px;
box-shadow: var(--shadow);
background: #f6f6f6; /* Fallback-Hintergrund beim Laden */
}


/* Bild selbst */
#gallery img{
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* Zuschneiden, damit die Bilder gleichmäßig aussehen */
aspect-ratio: 4 / 3; /* Gleichmäßige Bildhöhe — modernes CSS */
transition: transform .28s ease, filter .28s ease;
}


/* leichter Hover-Effekt */
#gallery .item:hover img{
transform: scale(1.03);
filter: saturate(1.05);
}


/* Responsive: auf kleinen Bildschirmen 1 Spalte */
@media (max-width: 600px){
#gallery {
grid-template-columns: 1fr;
}
}


/* Optional: Bildunterschrift */
#gallery figcaption{
font-size: .9rem;
padding: 10px 12px;
color: #333;
}