.punkte {
position:absolute;
top:100px;
left:100px;
margin:0;
padding:0; 
 }
  
  .dots {
    display: flex;
    gap: 15px;
    width: 200px;
    max-width: 100%;
    overflow: hidden; /* Punkte, die nicht mehr komplett passen, werden ausgeblendet */
    margin: 20px auto;
	z-index:-1;
  }

  .dots:first-of-type { margin-top: 40px; }

  .dots span {
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d9d9d9;
    animation-timing-function: step-end; /* harter Farbwechsel */
    animation-iteration-count: infinite;
    animation-duration: 2.5s;
  }


  .dots--1 span { animation-name: dot-a; }

  @keyframes dot-a {
    0%  { background: #eee; }
    55% { background: #aaa; }
  }

  .dots--1 span:nth-child(5n+1) { animation-duration: 1.7s; }
  .dots--1 span:nth-child(5n+2) { animation-duration: 2.3s; }
  .dots--1 span:nth-child(5n+3) { animation-duration: 1.3s; }
  .dots--1 span:nth-child(5n+4) { animation-duration: 2.9s; }
  .dots--1 span:nth-child(5n+5) { animation-duration: 1.9s; }

  .dots--1 span:nth-child(7n+1) { animation-delay: -0.6s; }
  .dots--1 span:nth-child(7n+2) { animation-delay: -1.9s; }
  .dots--1 span:nth-child(7n+3) { animation-delay: -1.1s; }
  .dots--1 span:nth-child(7n+4) { animation-delay: -2.4s; }
  .dots--1 span:nth-child(7n+5) { animation-delay: -0.3s; }
  .dots--1 span:nth-child(7n+6) { animation-delay: -1.5s; }
  .dots--1 span:nth-child(7n+7) { animation-delay: -2.1s; }


  .dots--2 span { animation-name: dot-b; }

  @keyframes dot-b {
    0%  { background: #eee; }
    75% { background: #00ffff; }
  }

  .dots--2 span:nth-child(4n+1) { animation-duration: 1.1s; }
  .dots--2 span:nth-child(4n+2) { animation-duration: 2.7s; }
  .dots--2 span:nth-child(4n+3) { animation-duration: 1.6s; }
  .dots--2 span:nth-child(4n+4) { animation-duration: 2.2s; }

  .dots--2 span:nth-child(6n+1) { animation-delay: -0.4s; }
  .dots--2 span:nth-child(6n+2) { animation-delay: -1.4s; }
  .dots--2 span:nth-child(6n+3) { animation-delay: -2.2s; }
  .dots--2 span:nth-child(6n+4) { animation-delay: -0.9s; }
  .dots--2 span:nth-child(6n+5) { animation-delay: -2.6s; }
  .dots--2 span:nth-child(6n+6) { animation-delay: -1.8s; }


  .dots--3 span { animation-name: dot-c; }

  @keyframes dot-c {
    0%  { background: #eee; }
    70% { background: #aaa; }
  }

  .dots--3 span:nth-child(3n+1) { animation-duration: 2.1s; }
  .dots--3 span:nth-child(3n+2) { animation-duration: 1.5s; }
  .dots--3 span:nth-child(3n+3) { animation-duration: 3.1s; }

  .dots--3 span:nth-child(5n+1) { animation-delay: -0.8s; }
  .dots--3 span:nth-child(5n+2) { animation-delay: -2.7s; }
  .dots--3 span:nth-child(5n+3) { animation-delay: -1.2s; }
  .dots--3 span:nth-child(5n+4) { animation-delay: -2.0s; }
  .dots--3 span:nth-child(5n+5) { animation-delay: -0.1s; }

  @media (max-width: 800px) {
    .punkte { display:none}
  }

  @media (prefers-reduced-motion: reduce) {
    .dots span { animation: none; }
  }