.sb-scroll-banner {
    position: relative;
    width: 100%;
    max-width: none;
    height: var(--sb-height-desktop, 240px);
    overflow: hidden;
    background: var(--sb-bg, #0d0d0d);
    contain: layout paint;
}

/* Optionaler Breakout aus einem Enfold-Content-Container auf echte Browserbreite. */
.sb-scroll-banner--viewport {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.sb-scroll-banner__track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.sb-scroll-banner--start .sb-scroll-banner__track { align-items: flex-start; }
.sb-scroll-banner--center .sb-scroll-banner__track { align-items: center; }
.sb-scroll-banner--end .sb-scroll-banner__track { align-items: flex-end; }

.sb-scroll-banner__text {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    color: var(--sb-color, #fff);
    opacity: var(--sb-opacity, 1);
    font-family: inherit;
    font-size: var(--sb-size-desktop, 130px);
    font-weight: var(--sb-weight, 900);
    line-height: var(--sb-line-height, .88);
    letter-spacing: var(--sb-letter-spacing, -3px);
    -webkit-text-stroke: var(--sb-stroke-width, 0px) var(--sb-stroke-color, #fff);
    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;
}

@media (max-width: 989px) {
    .sb-scroll-banner { height: var(--sb-height-tablet, 200px); }
    .sb-scroll-banner__text { font-size: var(--sb-size-tablet, 88px); }
}

@media (max-width: 767px) {
    .sb-scroll-banner { height: var(--sb-height-mobile, 160px); }
    .sb-scroll-banner__text { font-size: var(--sb-size-mobile, 56px); }
}
