/* effekt-styles */
:root {
  --anzahl: 10; /* anzahl wrapper */
}
html, body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: black;
}
body {
  width: 100%;
  width: 100svw;
}
.wrapper {
  width: 100%;
  height: calc(1080px / var(--anzahl));
}
.diva {
  width: calc(1920px / (24 * var(--anzahl)));
  height: calc(1080px / (24 * var(--anzahl)));
  background-color: mediumaquamarine;
  border-radius: 0.8rem;
}
@keyframes bewegungA {
  from {
    margin-left: 0;
    background-color: #9900ff;
    padding: 0;
  }
  5% { padding:7px; border: 2px solid white;}
  15% { padding:7px; border: 2px solid white;}
  25% {
    padding: 5px;
  }
  33% {
    background-color: mediumaquamarine;
    padding: 0;
  }
  67% {
    background-color: mediumaquamarine;
    padding: 0;
  }
  75% {
    padding: 5px;
  }
  to {
    margin-left: 1920px;
    margin-left: 100%;
    background-color: #9900ff;
    padding: 0;
  }
}
@keyframes bewegungB {
  from {
    margin-left: 1920px;
    margin-left: 100%;
    background-color: #9900ff;
    padding: 0;
  }
  5% { padding: 7px; border: 2px solid white;}
  15% { padding:7px; border: 2px solid white;}
  25% {
    padding: 5px;
  }
  33% {
    background-color: mediumaquamarine;
    padding: 0;
  }
  67% {
    background-color: mediumaquamarine;
    padding: 0;
  }
  75% {
    padding: 5px;
  }
  to {
    margin-left: 0;
    background-color: #9900ff;
    padding: 0;
  }
}

.diva {
  /* odd       ;   even */
  --zeit1: 2.1s; --zeit2: 4.3s;   /*+-1*/
  --zeit3: 2.3s; --zeit4: 4.1s;   /*+-1*/
  --zeit5: 2.5s; --zeit6: 3.9s;   /*+-2*/
  --zeit7: 2.7s; --zeit8: 3.7s;   /*+-1*/
  --zeit9: 2.9s; --zeit10: 3.5s;  /*+-1*/
  --zeit11: 3.1s; --zeit12: 3.3s; /*+-2*/
  --zeit13: 3.3s; --zeit14: 3.1s; /*+-1*/
  --zeit15: 3.5s; --zeit16: 2.9s; /*+-1*/
  --zeit17: 3.7s; --zeit18: 2.7s; /*+-2*/
  --zeit19: 3.9s; --zeit20: 2.5s; /*+-1*/
  --zeit21: 4.1s; --zeit22: 2.3s; /*+-1*/
  --zeit23: 4.3s; --zeit24: 2.1s; /*+-2*/
}
/*.diva:nth-child(even) { animation: bewegungA var(--zeit01) alternate infinite; }*/
.diva:nth-child(1) { animation: bewegungA var(--zeit1) alternate infinite; animation-delay: var(--zeit1); }
.diva:nth-child(3) { animation: bewegungA var(--zeit3) alternate infinite; animation-delay: var(--zeit2); }
.diva:nth-child(5) { animation: bewegungA var(--zeit5) alternate infinite; animation-delay: var(--zeit3); }
.diva:nth-child(7) { animation: bewegungA var(--zeit7) alternate infinite; animation-delay: var(--zeit4); }
.diva:nth-child(9) { animation: bewegungA var(--zeit9) alternate infinite; animation-delay: var(--zeit5); }
.diva:nth-child(11) { animation: bewegungA var(--zeit11) alternate infinite; animation-delay: var(--zeit6); }
.diva:nth-child(13) { animation: bewegungA var(--zeit13) alternate infinite; animation-delay: var(--zeit7); }
.diva:nth-child(15) { animation: bewegungA var(--zeit15) alternate infinite; animation-delay: var(--zeit8); }
.diva:nth-child(17) { animation: bewegungA var(--zeit17) alternate infinite; animation-delay: var(--zeit9); }
.diva:nth-child(19) { animation: bewegungA var(--zeit19) alternate infinite; animation-delay: var(--zeit10); }
.diva:nth-child(21) { animation: bewegungA var(--zeit21) alternate infinite; animation-delay: var(--zeit11); }
.diva:nth-child(23) { animation: bewegungA var(--zeit23) alternate infinite; animation-delay: var(--zeit12); }

.diva:nth-child(2) { animation: bewegungA var(--zeit2) alternate-reverse infinite; animation-delay: var(--zeit13); }
.diva:nth-child(4) { animation: bewegungA var(--zeit4) alternate-reverse infinite; animation-delay: var(--zeit14); }
.diva:nth-child(6) { animation: bewegungA var(--zeit6) alternate-reverse infinite; animation-delay: var(--zeit15); }
.diva:nth-child(8) { animation: bewegungA var(--zeit8) alternate-reverse infinite; animation-delay: var(--zeit16); }
.diva:nth-child(10) { animation: bewegungA var(--zeit10) alternate-reverse infinite; animation-delay: var(--zeit17); }
.diva:nth-child(12) { animation: bewegungA var(--zeit12) alternate-reverse infinite; animation-delay: var(--zeit18); }
.diva:nth-child(14) { animation: bewegungA var(--zeit14) alternate-reverse infinite; animation-delay: var(--zeit19); }
.diva:nth-child(16) { animation: bewegungA var(--zeit16) alternate-reverse infinite; animation-delay: var(--zeit20); }
.diva:nth-child(18) { animation: bewegungA var(--zeit18) alternate-reverse infinite; animation-delay: var(--zeit21); }
.diva:nth-child(20) { animation: bewegungA var(--zeit20) alternate-reverse infinite; animation-delay: var(--zeit22); }
.diva:nth-child(22) { animation: bewegungA var(--zeit22) alternate-reverse infinite; animation-delay: var(--zeit23); }
.diva:nth-child(24) { animation: bewegungA var(--zeit24) alternate-reverse infinite; animation-delay: var(--zeit24); }

.wrapper:nth-child(even) .diva:nth-child(1) { animation: bewegungB var(--zeit24) alternate infinite;  animation-delay: var(--zeit24); }
.wrapper:nth-child(even) .diva:nth-child(3) { animation: bewegungB var(--zeit22) alternate infinite;  animation-delay: var(--zeit23); }
.wrapper:nth-child(even) .diva:nth-child(5) { animation: bewegungB var(--zeit20) alternate infinite;  animation-delay: var(--zeit22); }
.wrapper:nth-child(even) .diva:nth-child(7) { animation: bewegungB var(--zeit18) alternate infinite;  animation-delay: var(--zeit21); }
.wrapper:nth-child(even) .diva:nth-child(9) { animation: bewegungB var(--zeit16) alternate infinite; animation-delay: var(--zeit20); }
.wrapper:nth-child(even) .diva:nth-child(11) { animation: bewegungB var(--zeit14) alternate infinite; animation-delay: var(--zeit19); }
.wrapper:nth-child(even) .diva:nth-child(13) { animation: bewegungB var(--zeit12) alternate infinite; animation-delay: var(--zeit18); }
.wrapper:nth-child(even) .diva:nth-child(15) { animation: bewegungB var(--zeit10) alternate infinite; animation-delay: var(--zeit17); }
.wrapper:nth-child(even) .diva:nth-child(17) { animation: bewegungB var(--zeit8) alternate infinite; animation-delay: var(--zeit16); }
.wrapper:nth-child(even) .diva:nth-child(19) { animation: bewegungB var(--zeit6) alternate infinite; animation-delay: var(--zeit15); }
.wrapper:nth-child(even) .diva:nth-child(21) { animation: bewegungB var(--zeit4) alternate infinite; animation-delay: var(--zeit14); }
.wrapper:nth-child(even) .diva:nth-child(23) { animation: bewegungB var(--zeit2) alternate infinite; animation-delay: var(--zeit13); }

.wrapper:nth-child(even) .diva:nth-child(2) { animation: bewegungB var(--zeit23) alternate-reverse infinite; animation-delay: var(--zeit12); }
.wrapper:nth-child(even) .diva:nth-child(4) { animation: bewegungB var(--zeit21) alternate-reverse infinite; animation-delay: var(--zeit11); }
.wrapper:nth-child(even) .diva:nth-child(6) { animation: bewegungB var(--zeit19) alternate-reverse infinite; animation-delay: var(--zeit10); }
.wrapper:nth-child(even) .diva:nth-child(8) { animation: bewegungB var(--zeit17) alternate-reverse infinite; animation-delay: var(--zeit9); }
.wrapper:nth-child(even) .diva:nth-child(10) { animation: bewegungB var(--zeit15) alternate-reverse infinite; animation-delay: var(--zeit8); }
.wrapper:nth-child(even) .diva:nth-child(12) { animation: bewegungB var(--zeit13) alternate-reverse infinite; animation-delay: var(--zeit7); }
.wrapper:nth-child(even) .diva:nth-child(14) { animation: bewegungB var(--zeit11) alternate-reverse infinite; animation-delay: var(--zeit6); }
.wrapper:nth-child(even) .diva:nth-child(16) { animation: bewegungB var(--zeit9) alternate-reverse infinite; animation-delay: var(--zeit5); }
.wrapper:nth-child(even) .diva:nth-child(18) { animation: bewegungB var(--zeit7) alternate-reverse infinite; animation-delay: var(--zeit4); }
.wrapper:nth-child(even) .diva:nth-child(20) { animation: bewegungB var(--zeit5) alternate-reverse infinite; animation-delay: var(--zeit3); }
.wrapper:nth-child(even) .diva:nth-child(22) { animation: bewegungB var(--zeit3) alternate-reverse infinite; animation-delay: var(--zeit2); }
.wrapper:nth-child(even) .diva:nth-child(24) { animation: bewegungB var(--zeit1) alternate-reverse infinite; animation-delay: var(--zeit1); }