.hero-background-container {
    position: relative;
    overflow: hidden;
}

.bg-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    max-height: 360px;
    overflow: hidden;
    pointer-events: none;
    perspective: 1200px; /* Nur hier, isoliert */
}

.bg-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    will-change: transform, opacity;
}

/* FADE */
.bg-fade .bg-inner { animation: fadeAnim .7s ease-in-out forwards; }
@keyframes fadeAnim {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* CUBE */
.bg-cube .bg-inner { animation: cubeAnim .7s ease-in-out forwards; }
@keyframes cubeAnim {
    from { transform: rotateY(-90deg); opacity:0; }
    to   { transform: rotateY(0deg); opacity:1;}
}

/* FLIP */
.bg-flip .bg-inner { animation: flipAnim .7s ease-in-out forwards; }
@keyframes flipAnim {
    from { transform: rotateX(-90deg); opacity:0; }
    to   { transform: rotateX(0deg); opacity:1; }
}

/* COVERFLOW */
.bg-coverflow .bg-inner { animation: coverflowAnim .7s ease-in-out forwards; }
@keyframes coverflowAnim {
    from { transform: scale(1.15) rotateY(-35deg); opacity:0.4 }
    to   { transform: scale(1) rotateY(0); opacity:1 }
}

/* CREATIVE */
.bg-creative .bg-inner { animation: creativeAnim .7s ease forwards; }
@keyframes creativeAnim {
    from { transform: translate3d(50%,0,200px); opacity:.0; }
    to   { transform: translate3d(0,0,0); opacity:1; }
}

.bg-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.bg-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    max-height: 360px;
    overflow: hidden;
    pointer-events: none;
    perspective: 1200px;
    contain: strict; /* verhindert Überschreiben des Layouts */
}
.swiper-cube {
    max-height: 0;
}
.overlay-secondary-middle:before {
    z-index: 1;
}