body {
  margin: 0; /* Kein Abstand um den Bildbereich */
  padding: 0; /* Kein innerer Abstand */
  height: 100vh; /* Höhe des Viewports (Fenster) */
  background-color: #FCB8DE; /* Optional: Hintergrundfarbe */
  position: relative; /* Damit absolut positionierte Kinder sich relativ zum Body positionieren */
}

/* Der Container, der alle Bilder hält */
.galerie {
  position: relative; /* Wichtig: Damit die Bilder relativ zum dieser Container positioniert werden */
  width: 100%; /* Nimmt die ganze Breite ein */
  height: 100vh; /* Ganze Höhe des Fensters */
}

/* Jedes Bild, das man verschieben kann */
.bild-container {
  position: absolute; /* Damit kannst du es exakt positionieren */
  width: 150px; /* Breite des Bildes */
  height: 150px; /* Höhe des Bildes */
  cursor: pointer; /* Beim Hover verändert sich der Cursor zu Hand */
  perspective: 1000px; /* Für 3D-Drehung, optional */
  transition: transform 0.3s, box-shadow 0.3s; /* Animationen bei Hover */
}

/* Das eigentliche Bild, das sich dreht */
.bild-container img {
  width: 100%; /* passt immer an die Containergröße an */
  height: 100%;
  object-fit: contain; /* schnitt das Bild passend auf die Größe */
  animation: drehen 40s linear infinite; /* Bewegung: langsame Rotation */
}

/* Dauer und Art der Rotation */
@keyframes drehen {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Beim Überfahren: Bild wächst und bekommt Schatten */
.bild-container:hover {
  transform: scale(1.2); /* Bild wird 20% größer */
  z-index: 10; /* Damit es vorne liegt */
}