/* Gemeinsame Styles */
.carousel3d-wrapper {
  perspective: 1200px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10px 0 40px 0; /* Oben 10px, unten 40px  HIER KANNST DU DIE MARGIN ANPASSEN */
}

/* Normales Carousel für mehrere Bilder */
.carousel3d {
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: carousel3d-spin 25s infinite linear;
  -webkit-animation: carousel3d-spin 25s infinite linear;
  margin: 0 auto;
}

/* Spezielles Carousel für ein Bild */
.carousel3d-single {
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: carousel3d-spin 25s infinite linear;
  -webkit-animation: carousel3d-spin 25s infinite linear;
  width: 300px;
  height: 300px;
}

.carousel3d:hover,
.carousel3d-single:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

.carousel3d-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  -webkit-transform-origin: center center;
}

/* Bei einem Bild: Bild auf Kreisbahn positionieren */
.carousel3d-single .carousel3d-item {
  transform: rotateY(0deg) translateZ(150px);
}

.carousel3d-item img {
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

@keyframes carousel3d-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

@-webkit-keyframes carousel3d-spin {
  from { -webkit-transform: rotateY(0deg); }
  to   { -webkit-transform: rotateY(360deg); }
}

@media (max-width: 768px) {
  .carousel3d-wrapper {
    perspective: 800px;
    margin: 10px 0; /* Auch für Mobile anpassen */
  }
  
  .carousel3d-single {
    width: 200px;
    height: 200px;
  }
  
  .carousel3d-single .carousel3d-item {
    transform: rotateY(0deg) translateZ(100px);
  }
}