/* Macht das komplette Modal tiefschwarz und transparent (wie eine echte Lightbox) */
#lightboxModal .modal-content {
  background: rgba(0, 0, 0, 0.85) !important;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Zentriert den Body und das Bild im Vollbild-Modus */
#lightboxModal .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
}

/* Das Bild nimmt seine maximale natürliche Größe an, bleibt aber responsiv */
#lightboxImage {
  max-width: 90vw;   /* Maximal 90% der Bildschirmbreite */
  max-height: 85vh;  /* Maximal 85% der Bildschirmhöhe */
  width: auto;
  height: auto;
  object-fit: contain; /* Behält Proportionen bei */
  box-shadow: 0 10px 25px rgba(0,0,0,0.5); /* Schicker Schatten fürs Bild */
}

#lightboxModal {
  /* Verhindert, dass das Smartphone die Wischgeste für Browser-Aktionen abfängt */
  touch-action: none !important; 
}
img.gallery-img {
  transition: transform 0.5s ease;
  transition: opacity 0.1s ease;
  transition: box-shadow 0.2s ease;
}

img.gallery-img:hover {
  opacity: 0.7;
  transform: scale(1.05); 
  cursor: pointer;
  box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.6);
}