/* Responsiver, barrierearmer Marquee-Banner */
.marquee-banner {
    position: relative;
    overflow: hidden;
    width: 100%;

    /* Hintergrund + Rahmen weiterhin transparent */
    background: transparent;
    border-block: none;

    color: #f9fafb;
    padding-block: 30px;
    font-family: var(--font-base);
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2.1rem);
    margin-top: 0;
    margin-bottom: 0;
}

/* Blur-Rahmen: nur oben und unten sichtbar */
.marquee-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    /* geht bis ganz an den Rand */
    border-radius: 0;
    /* kein zusätzliches Abrunden – bei Bedarf anpassen */

    /* nur Top/Bottom-Ränder, keine linke/rechte Kante */
    border-top: 5px solid rgba(30, 30, 30, 0);
    border-left: none;
    border-right: none;

    background: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    pointer-events: none;
    z-index: 0;
}

/* Inhalt über der Box anzeigen */
.marquee-inner,
.marquee-sr-text {
    position: relative;
    z-index: 1;
}

.marquee-inner {
    width: 100%;
    white-space: nowrap;
}

.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    /* keine Lücke zwischen .marquee-item-Elementen */
    will-change: transform;
    animation: marquee-scroll 24s linear infinite;
}

.marquee-item {
    display: inline-block;
    padding-inline: 0;
    /* kein zusätzlicher Innenabstand */
}


/* Keyframes für endlose, ruckelfreie Bewegung */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Hover: VERLANGSAMUNG ENTFERNT */
/* .marquee-banner:hover .marquee-track {
    animation-duration: 32s;
} */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
        transform: none;
    }

    .marquee-inner {
        white-space: normal;
    }

    .marquee-banner {
        padding-block: 14px;
    }
}

/* Mobil: gleiche Box, weniger Platzverlust */
@media (max-width: 900px) {
    .marquee-banner::before {
        inset: 0;
        border-radius: 0;
    }

    .marquee-banner {
        margin-top: 0;
        margin-bottom: 0;
        /* vorher: 3vh – Abstand auch mobil entfernt */
        /* auch mobil enger */
    }
}