/**
 * Floating Images — Styles
 *
 * Dynamisches System: beliebig viele Bilder in .bl-floating-images.
 * Horizontale Position + Timing komplett via JS.
 * CSS definiert nur Basis-Layout und responsive Größen/Sichtbarkeit.
 */

.bl-floating-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: -1;
}

.bl-floating-images img {
    display: block;
    opacity: 0.2;
    position: fixed;
    will-change: transform;
    pointer-events: none;
    max-width: 200px;
}


/* Tablet (>= 600 px) */

@media screen and (min-width: 600px) {
    .bl-floating-images img {
        max-width: 350px;
    }
}


/* Desktop (>= 1000 px) */

@media screen and (min-width: 1000px) {
    .bl-floating-images img {
        max-width: none;
    }
}


/* Mobile (< 600 px): max 3 Bilder sichtbar */

.bl-floating-images img:nth-child(n+4) {
    display: none;
}

@media screen and (min-width: 600px) {
    .bl-floating-images img:nth-child(n+4) {
        display: block;
    }
}


/* Barrierefreiheit: Animation deaktivieren wenn vom System gewünscht */

@media (prefers-reduced-motion: reduce) {
    .bl-floating-images {
        display: none;
    }
}