.carousel-item {
    transform: translateX(0);
    transition: transform 0.5s ease-in-out; /* Sanfter Übergang für die Bewegung */
	}

	.carousel-item-next,
	.carousel-item-prev {
		transform: translateX(100%); /* Position für das nächste/ vorherige Bild */
	}

	.carousel-item.active {
		transform: translateX(0); /* Aktives Bild in der Mitte */
	}

    .img-zoom-container {
        overflow: hidden; /* Verhindert das Überlaufen des Bildes */
        position: relative; /* Positionierung für das Bild */
        height: auto; /* Automatische Höhe */
    }

    .img-hover-zoom {
        transition: transform 0.3s ease; /* Sanfter Übergang */
        cursor: pointer; /* Zeigt an, dass das Bild interaktiv ist */
    }

    .img-hover-zoom:hover {
        transform: scale(1.8); /* Vergrößern des Bildes beim Hover */
        z-index: 1; /* Sicherstellen, dass das Bild über anderen Elementen liegt */
        position: absolute; /* Positionierung zum Bewegen */
        top: 50%; /* Zentrieren */
        left: 50%; /* Zentrieren */
        transform-origin: center; /* Ursprung der Vergrößerung */
    }

    /* Optional: Um den Container zu positionieren */
    .carousel-item {
        position: relative;
    }

    .productSlider {
        max-width: 800px; /* Maximale Breite des Containers */
        margin: 0 auto; /* Zentrieren */
    }

    .carousel-item img {
        width: 100%; /* Bildbreite anpassen */
        height: auto; /* Höhe automatisch anpassen */
        transition: transform 0.5s ease; /* Sanfter Übergang für Bildtransformation */
    }
 
        .productSlider {
            max-width: 800px; /* Maximale Breite des Containers */
            margin: 0 auto; /* Zentrieren */
        }
        .carousel-item img {
            width: 100%; /* Bildbreite anpassen */
            height: auto; /* Höhe automatisch anpassen */
        }