.marquee {
    --marquee-direction: forwards;
    --marquee-speed: 10s;
    --marquee-state: running;
    position: relative;
    overflow-x: scroll;
    user-select: none;
    padding: 2rem 0;
}
.marquee[data-marquee="inited"] {
    overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
    .marquee { --marquee-state: paused; }
    .marquee > .wrapper [aria-hidden="true"] { display: none; }
    .marquee { overflow-x: auto; }
}


.marquee > .wrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
    gap: 4rem;
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}
.marquee[data-marquee="inited"] > .wrapper {
    animation: marquee-move-content var(--marquee-speed, 10s) linear infinite var(--marquee-direction, forwards) var(--marquee-state, running);
}
.marquee:not([data-marquee="inited"]) > .wrapper [aria-hidden="true"] { display: none; }
@keyframes marquee-move-content {
    to { transform: translateX(-50%); }
}


/*  fix for hopping on repeat due to gap  */
.marquee > .wrapper:before { content: ''; width: 0; display: block; }


/*  fixes for images  */
.marquee > .wrapper .image { width: auto; }
.marquee > .wrapper .image img { width: auto; height: auto; max-width: 10rem; max-height: 5rem; }


/*  direction  */
.marquee-direction-right { --marquee-direction: reverse; }

/*  speed  */
.marquee-speed-20 { --marquee-speed: 20s; }
.marquee-speed-30 { --marquee-speed: 30s; }
.marquee-speed-40 { --marquee-speed: 40s; }
.marquee-speed-50 { --marquee-speed: 50s; }
.marquee-speed-60 { --marquee-speed: 60s; }

/*  pause  */
.marquee-pause-hover:hover { --marquee-state: paused; }

/*  style  */
.marquee-style-fadeout { mask-image: linear-gradient(to right, transparent, black 5rem, black calc(100% - 5rem), transparent); }
.pageroot .marquee { mask-image: none; }

/*  hint in cms  */
.pageroot .marquee:before
{
    content: 'Lauftext';
    position: absolute;
    display: block;
    left: .5rem;
    top: .5rem;
    padding: .25rem;
    border-radius: .125rem;
    z-index: 1;
    font-size: .75rem;
    color: #000;
    background: rgba(255, 255, 255, .75);
}
.pageroot .marquee:not([data-marquee="inited"]) { display: block; }
.pageroot .marquee > .wrapper { flex-flow: row wrap; animation: none; }