/* Übergeordneter Container begrenzt auf max. 800px */
.gallerycontainer {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Elemente bleiben fest nebeneinander */
.gallery {
  display: flex;
  gap: 10%; /* Abstand zwischen der Thumbnail-Spalte und dem Hauptbild */
  width: 100%;
}

/* Spalte für die Thumbnails (ca. 20% Breite) */
.gallery .previews {
  flex: 1.1; 
  display: flex;
  flex-direction: column; /* Thumbnails untereinander */
  gap: 10px; /* Abstand zwischen den einzelnen Thumbnail-Blöcken */
}

/* Jedes Thumbnail erhält 30px Abstand (Padding) */
.gallery .previews a {
  display: block;
  padding: 20px; /* Abstand um das Thumbnail herum */
  background-color: transparent; /* Falls gewünscht, hier Hintergrundfarbe setzen */
  box-sizing: border-box;
}

/* Das Hauptbild erhält ebenfalls 30px Abstand (Padding) */
.gallery .full {
  flex: 4; 
  padding: 0px; /* Abstand um das große Bild herum */
  box-sizing: border-box;
}

/* Bilder-Reset für die korrekte responsive Skalierung */
.gallery img {
  width: 100%;
  height: auto;
  display: block;
}

/* Visueller Effekt für das ausgewählte Bild (Padding bleibt erhalten) */
.gallery .previews a.selected img {
  opacity: 0.5;
}