@supports (animation-timeline: scroll()) {
  /* Am horizontal scrollbaren Wrapper der Tabelle */
  .data-table__scroller {
    scroll-timeline-name: --xfade;
    scroll-timeline-axis: inline;
  }

  /* Rechte Fade-Overlays innerhalb der Tabelle */
  .data-table__scroller .fade-right {
    animation: fadeOut 1s both;
    /* Timeline vom nächsten Vorfahren mit diesem Namen */
    animation-timeline: --xfade;
    /* blendet z. B. zwischen 85% und 100% Scrollprogress aus */
    animation-range: 85% 100%;
  }

  /* Linke Fades (optional) – ein/aus je nach Bedarf */
  .data-table__scroller .fade-left {
    animation: fadeIn 1s both;
    animation-timeline: --xfade;
    animation-range: 0% 10%; /* kurz nach Start einblenden */
  }

  @keyframes fadeOut {
    from {
      opacity: 1
    }
    to {
      opacity: 0
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
}

/* Wenn keine horizontale Scrollbarkeit: Fades komplett weg */
.data-table__scroller.no-x-scroll .fade-right,
.data-table__scroller.no-x-scroll .fade-left,
.data-table__scroller.no-x-scroll [data-fade] {
  opacity: 0 !important;
  animation: none !important;
}