/* Container wird per JS zum gepinnten, bildschirmhohen Abschnitt
   (position:sticky; height:100vh) - hier nur das, was statisch noetig ist. */
.scroll-horizontal {
  overflow: hidden;
}

/* Die Spaltenreihe = horizontaler Track (wird per transform verschoben). */
.scroll-horizontal .fusion-builder-row {
  flex-wrap: nowrap !important;
  will-change: transform;
}

/* Sichtbarer Scroll-Bereich: nimmt die Resthoehe unter den festen Spalten ein.
   align-items wird per JS aus "Row Alignment" gesetzt (oben/mittig/unten).
   overflow setzt das JS je Modus: pinned = hidden, nativ = overflow-x:auto. */
.scroll-horizontal-viewport {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  -webkit-overflow-scrolling: touch;   /* weiches Wischen auf Touch-Geraeten */
}

/* Bereich fuer ausgenommene Spalten: bleibt fest oben stehen. */
.scroll-horizontal-fixed {
  flex: 0 0 auto;
  width: 100%;
}

/* Nativer Modus: Viewport als Block, damit die Reihe eine definierte
   (Viewport-)Breite als Bezug hat und prozentuale Spaltenbreiten (z. B. 1/2)
   korrekt aufloesen. Die Spalten schrumpfen nicht -> die Reihe laeuft ueber
   und wird horizontal scrollbar, statt die Spalten schmal zu quetschen. */
.scroll-horizontal.hscroll-native .scroll-horizontal-viewport {
  display: block;
}
.scroll-horizontal.hscroll-native .scroll-horizontal-viewport > .fusion-builder-row {
  width: 100% !important;
}
.scroll-horizontal.hscroll-native .fusion-builder-row > .fusion-layout-column {
  flex-shrink: 0 !important;
}