/* Wrapper: bildet einen eigenen Block-Formatting-Context, damit der
   Außenabstand (margin) der Box NICHT mit den vertikalen Margins
   benachbarter Elemente kollabiert (CSS-Standardverhalten: vertikale
   Margins von Block-Boxen verschmelzen sonst mit angrenzenden Elementen,
   horizontale nie – dadurch wirkte der Außenabstand zuvor auf allen
   Seiten unterschiedlich groß). */
.jx-scroll-wrap {
    display: flow-root;
}

/* JoomION ScrollBox – Container */
.jx-scroll-box {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

/* Unsichtbarer Platzhalter: der eigentliche Lauftext ist absolut positioniert
   (siehe .jx-scroll-content) und trägt daher NICHT zur automatischen Höhe der
   Box bei ("height: auto" würde sonst auf die reine Innenabstand-/Rahmenhöhe
   kollabieren und den Text fast vollständig abschneiden). Dieser unsichtbare
   Zeilenplatzhalter in normalem Textfluss sorgt dafür, dass die Box immer
   mindestens eine Textzeile hoch ist, unabhängig vom eingestellten Innenabstand. */
.jx-scroll-spacer {
    visibility: hidden;
}

/* Inhalts-Wrapper: bei horizontalem Scrollen (links/rechts) vertikal mittig
   in der Box zentriert (gleicher Abstand oben/unten), Feineinstellung der
   X-Position übernimmt das JS per transform. */
.jx-scroll-content {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Vertikales Scrollen (oben/unten): Inhalt startet am oberen Rand,
   die Position steuert ausschließlich das JS per translateY(). */
.jx-scroll-box[data-direction="up"] .jx-scroll-content,
.jx-scroll-box[data-direction="down"] .jx-scroll-content {
    white-space: normal;
    display: flex;
    flex-direction: column;
    top: 0;
    transform: none;
}