.horizontaleSlideAnimation {
    &[data-animated="true"] {
      &.RichtungRechts { --_animation-direction: reverse; }
      &.RichtungLinks { --_animation-direction: forwards; }
      &.GeschwindigkeitSchnell { --_animation-duration: 20s; }
      &.GeschwindigkeitLangsam { --_animation-duration: 60s; }
      ul { animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite; }
    }
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 20%,
      white 80%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    & ul {
      padding-block: 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      width: max-content;
      flex-wrap: nowrap;
      & li {
        padding: 0 20px;
        list-style: none;
        display: grid;
        place-items: center;
      }
    }
  }

  @keyframes scroll {
    to { transform: translate(calc(-50% - 0.5rem)); }
  }