/* Layered Images in Hero Section */
.layered-images-container {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    overflow: visible;
}

.bottom-image-wrapper,
.top-image-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform;
}

.bottom-image-wrapper {
    z-index: 1;
    transform: scale(1.44); /* 20% kleiner als 1.8 (1.8 * 0.8 = 1.44) */
}

.top-image-wrapper {
    z-index: 2;
    transform: scale(0.96); /* 20% kleiner als 1.2 (1.2 * 0.8 = 0.96) */
}

.bottom-image,
.top-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0; /* Entfernen des Radius, da die Bilder bereits abgerundete Formen haben */
    box-shadow: none; /* Entfernen des Schattens für einen saubereren Look mit transparenten Bildern */
}

/* Wiggle animation for bottom image similar to hiw-main-image */
.bottom-image {
    animation: wiggle 8s ease-in-out infinite;
}

@keyframes wiggle {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-8px, -5px);
    }
    50% {
        transform: translate(8px, 5px);
    }
    75% {
        transform: translate(4px, -5px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* Media queries for responsive design */
@media (max-width: 991px) {
    .layered-images-container {
        height: 400px;
        margin-bottom: 40px;
    }
    .bottom-image-wrapper {
        transform: scale(1.2); /* 20% kleiner als 1.5 (1.5 * 0.8 = 1.2) */
    }
    .top-image-wrapper {
        transform: scale(0.88); /* 20% kleiner als 1.1 (1.1 * 0.8 = 0.88) */
    }
}

@media (max-width: 767px) {
    .layered-images-container {
        height: 350px;
    }
    .bottom-image-wrapper {
        transform: scale(1.04); /* 20% kleiner als 1.3 (1.3 * 0.8 = 1.04) */
    }
    .top-image-wrapper {
        transform: scale(0.8); /* 20% kleiner als 1 (1 * 0.8 = 0.8) */
    }
}

@media (max-width: 575px) {
    .layered-images-container {
        height: 300px;
    }
    .bottom-image-wrapper {
        transform: scale(0.96); /* 20% kleiner als 1.2 (1.2 * 0.8 = 0.96) */
    }
    .top-image-wrapper {
        transform: scale(0.72); /* 20% kleiner als 0.9 (0.9 * 0.8 = 0.72) */
    }
}