/* //ANCHOR Ticker */

.animation-ticker {
  overflow: hidden;
  white-space: nowrap;
}
.animation-ticker__track {
  display: inline-flex;
  animation: ticker var(--ticker);
}
.ticker--vertical .animation-ticker__track {
  display: inline-flex;
  animation: tickerv var(--ticker);
}
.ticker--reverse .animation-ticker__track {
  display: inline-flex;
  animation: tickerr var(--ticker);
}
.ticker--reverse-vertical .animation-ticker__track {
  display: inline-flex;
  animation: tickervr var(--ticker);
}
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes tickerv {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
@keyframes tickerr {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes tickervr {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}
/* //ANCHOR Farben ändern */
.animation-color {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 0, 242);
  animation-name: colorChange;
  animation-duration: 2s;
  animation-iteration-count: 5;
  animation-timing-function: ease-in-out;
}

@keyframes colorChange {
  0% {
    background-color: rgb(255, 0, 242);
  }

  25% {
    background-color: rgb(0, 255, 179);
  }

  50% {
    background-color: rgb(132, 0, 255);
  }

  75% {
    background-color: rgb(0, 255, 179);
  }

  100% {
    background-color: rgb(255, 0, 242);
  }
}
/* //ANCHOR scale */
.animation-scale-y {
  animation: scale-y var(--scale-y-time) 1 ease-in-out;
}
@keyframes scale-y {
  from {
    transform: scaleY(0);
    transform-origin: var(--scale-y-origin-from);
  }

  to {
    transform: scaleY(1);
    transform-origin: var(--scale-y-origin-to);
  }
}
.animation-scale-x {
  animation: scale-x var(--scale-x-time) 1 ease-in-out;
}
@keyframes scale-x {
  from {
    transform: scaleX(0);
    transform-origin: var(--scale-x-origin-from);
  }

  to {
    transform: scaleX(1);
    transform-origin: var(--scale-x-origin-to);
  }
}

/* //ANCHOR Move – Pfad-animation */
.offset-1 {
  offset-path: path("M0.5 604.5V0.5H580.5V336");
  offset-distance: 0%;
  animation: move-1 2s ease-in-out infinite;
}

@keyframes move-1 {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}




/* //ANCHOR Hover */
/* underline */
.hover-underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.hover-underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--underline-color);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 250ms ease-in-out;
}

.hover-underline:hover::after {
  transform: scaleX(1);
}

/* //ANCHOR Barrierefreiheit – animation aus */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}