.brxe-bld-image-marquee {
    --marquee-height: 420px;
    --marquee-gap: var(--space-s);
    --marquee-radius: 0px;
    width: 100%;
    overflow: hidden;
}

.bld-image-marquee__track {
    display: flex;
    width: max-content;
}

.brxe-bld-image-marquee.is-ready .bld-image-marquee__track {
    animation: bld-image-marquee var(--marquee-duration, 30s) linear infinite;
}

.brxe-bld-image-marquee.marquee--right .bld-image-marquee__track {
    animation-direction: reverse;
}

.brxe-bld-image-marquee.marquee--pause-hover:hover .bld-image-marquee__track {
    animation-play-state: paused;
}

/* Abstand auch rechts vom letzten Bild, damit die Schleife gleichmäßig bleibt */
.bld-image-marquee__set {
    display: flex;
    flex-shrink: 0;
    gap: var(--marquee-gap);
    margin: 0;
    padding: 0 var(--marquee-gap) 0 0;
    list-style: none;
}

.bld-image-marquee__item {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
}

/* Beschriftung unten links über dem Bild, Verlauf sorgt für Lesbarkeit auf hellen Bildern */
.bld-image-marquee__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-l) var(--space-s) var(--space-s);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    border-radius: 0 0 var(--marquee-radius) var(--marquee-radius);
    color: var(--white, #fff);
    font-size: var(--text-s);
    line-height: 1.3;
    pointer-events: none;
}

/* Nur auf Geräten mit Maus erst bei Hover einblenden, auf Touch-Geräten immer sichtbar */
@media (hover: hover) {
    .bld-image-marquee__caption {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .bld-image-marquee__item:hover .bld-image-marquee__caption {
        opacity: 1;
    }
}

.bld-image-marquee__item img {
    display: block;
    width: auto;
    max-width: none;
    height: var(--marquee-height);
    object-fit: cover;
    border-radius: var(--marquee-radius);
    /* Bilder nicht ziehbar/markierbar, Hover landet dann auf dem <li> darunter */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

@keyframes bld-image-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(var(--marquee-distance) * -1));
    }
}

/* Ohne Bewegung: horizontal scrollbar statt Animation */
@media (prefers-reduced-motion: reduce) {
    .brxe-bld-image-marquee {
        overflow-x: auto;
    }

    .brxe-bld-image-marquee .bld-image-marquee__track {
        animation: none !important;
    }

    .bld-image-marquee__set--clone {
        display: none;
    }
}

@media (max-width: 767px) {
    .brxe-bld-image-marquee {
        --marquee-height: 260px;
    }
}