.pfeil_text_animation svg {
    position: absolute;
    width: 70vw;
    height: 45vh;
    fill: none;
    stroke: #141411;
    stroke-width: 1;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.a1 {
    fill: #ed0008;
    stroke: none;
}


.arrow {
    opacity: 1;
    animation: moveArrowSlow 10s linear infinite;
    animation-fill-mode: both;
    /* animation-timing-function: ease-out; */
}

.a1 {
    animation-name: moveArrowFast;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.1, 0.8, 0.165, 1);
}

.a2 {
    animation-delay: 1s;
    animation-name: moveArrowSlow3;

}

.a3 {
    animation-delay: 0.5s;
    animation-name: moveArrowSlow2;

}

.a4 {
    animation-delay: 0s;
    animation-name: moveArrowSlow1;

}

@keyframes moveArrowFast {
    0% {
        transform: translate(-150%, 0);
        opacity: 0;
    }

    5% {
        
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        transform: translate(120%, 0);
        opacity: 0;
    }
}


@keyframes moveArrowSlow1 {
    0% {
        opacity: 0;
        transform: translateX(-150%);
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: translateX(-50%);
    }
}


@keyframes moveArrowSlow2 {
    0% {
        opacity: 0;
        transform: translateX(-80%);
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: translateX(20%);
    }
}


@keyframes moveArrowSlow3 {
    0% {
        opacity: 0;
        transform: translateX(-10%);
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: translateX(90%);
    }
}

/* .a1 { animation-delay: 0s; }
.a2 { animation-delay: 1s; }
.a3 { animation-delay: 3s; }
.a4 { animation-delay: 5s; }

@keyframes moveArrowFast {
  0% {
    transform: translate(-100%, 0);
    opacity: 0;
  }

  10% {
    transform: translate(80%, 0);
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  95% {
    transform: translate(130%, 0);
    opacity: 0;
  }

  100% {
    transform: translate(130%, 0);
    opacity: 0;
  }
}


@keyframes moveArrowSlow {
  0% {
    transform: translate(-80%, 0);
    opacity: 0;
  }

  20% {
    opacity: 0.15;
  }

  40% {
    transform: translate(80%, 0);
    opacity: 0;
  }

  100% {
    transform: translate(80%, 0);
    opacity: 0;
  }
} */