/* ————————— Bild-Galerie: Grund-Container ————————— */
.image-gallery {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ————————— Grid-Layout ————————— */
/* Start: 1 Spalte (bis 767px) */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* ≥ 768px → 1 Spalte (wird explizit nicht geändert) */
@media (min-width: 768px) {
  .gallery-grid {
	grid-template-columns: 1fr;
  }
}

/* ≥ 992px → 2 Spalten */
@media (min-width: 992px) {
  .gallery-grid {
	grid-template-columns: repeat(2, 1fr);
  }
}

/* ≥ 1200px → 3 Spalten */
@media (min-width: 1200px) {
  .gallery-grid {
	grid-template-columns: repeat(3, 1fr);
  }
}

/* ————————— Einzelne Galerie-Items ————————— */
.gallery-item {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
}

/* Das Bild soll 100% Breite haben, Höhe automatisch */
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  object-fit: cover;
}

/* Hover-Zoom: Bild leicht skalieren */
.gallery-item .zoom:hover img {
  transform: scale(1.05);
}

/* Overlay (halbtransparentes Dunkel) */
.gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Overlay einblenden beim Hover */
.gallery-item .zoom:hover .overlay {
  opacity: 1;
}

/* Bild-Titel (falls vorhanden) unten einblenden */
.gallery-item .title {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: rgba(0,0,0,0.3);
  color: #fff;
  padding: 4px 8px;
  font-size: 0.9rem;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Titel einblenden beim Hover */
.gallery-item:hover .title {
  opacity: 1;
}

/* Entferne Standard-Listen/Margin/Padding, falls nötig */
.image-gallery ul,
.image-gallery li {
  margin: 0;
  padding: 0;
  list-style: none;
}