:root {
  /* fallback */
  --gleislaenge: 90svw;
  --l_zuglaenge: 1rem;
  --h_zughoehe: 0.75rem;
  --r_zuggrenze: 0.05rem;
  --ziehzeit: 10.00s;
  --ziehzüege: 6;
}
@keyframes ziehlok {
  from {margin-left: 0%;}
  to {margin-left: calc(var(--gleislaenge) - var(--ziehzüege) * var(--l_zuglaenge));}
}
@keyframes ziehlokR {
  from {margin-left: calc(var(--gleislaenge) - var(--ziehzüege) * var(--l_zuglaenge));}
  to {margin-left: 0%;}
}
body {
  display: flex;
  flex-direction: column;
  margin-top: max(5rem, 5%);
  background-color: black;
}
* {
  align-self: center;
}
.gleis {
  width: var(--gleislaenge);
  background-color: transparent;
  border-top: dotted lightgrey 0.25rem;
  height: 0.25rem;
  z-index: 10;
  border-radius: 2rem;
  align-self: center;
}
.gleisR {
  width: var(--gleislaenge);
  background-color: transparent;
  border-bottom: dotted lightgrey 0.25rem;
  height: 0.25rem;
  z-index: 10;
  border-radius: 2rem;
  align-self: center;
}
.bahnwelt {
  display: flex;
  flex-direction: row;
  float: right;
  width: var(--gleislaenge);
  margin: 0;
  padding: 0;
  align-self: center;
  z-index: 99;
}
/*.bahnwelt:nth-child(1) {
  margin-top: 5%;
}*/
.zug_pas {
  display: flex;
  flex-direction: column;
  /*animation: ziehlok alternate var(--ziehzeit) infinite;*/
}
.zug_akt {
  display: flex;
  flex-direction: column;
  animation: ziehlok alternate var(--ziehzeit) infinite;
}
.zug_aktR {
  display: flex;
  flex-direction: column;
  animation: ziehlokR alternate var(--ziehzeit) infinite;
}
.lok {
  margin: 0%;
  background-color: firebrick;
  width: var(--l_zuglaenge);
  height: var(--h_zughoehe);
  border-radius: var(--r_zuggrenze);
}
.lokhut {
  margin: 0%;
  background-color: firebrick;
  width: 0.15cm;
  height: 0.35cm;
  border-radius: var(--r_zuggrenze);
}
.lokhut2 {
  margin-left: calc(100% - 0.15cm);
  background-color: firebrick;
  width: 0.15cm;
  height: 0.35cm;
  border-radius: var(--r_zuggrenze);
}
.waghut {
  margin: 0%;
  background-color: transparent;
  width: 0.15cm;
  height: 0.35cm;
  border-radius: var(--r_zuggrenze);
}
.wagon1 {
  margin: 0%;
  background-color: dodgerblue;
  width: var(--l_zuglaenge);
  height: var(--h_zughoehe);
  border-radius: var(--r_zuggrenze);
}
.wagon2 {
  margin: 0%;
  background-color: coral;
  width: var(--l_zuglaenge);
  height: var(--h_zughoehe);
  border-radius: var(--r_zuggrenze);
}
.wagon3 {
  margin: 0%;
  background-color: limegreen;
  width: var(--l_zuglaenge);
  height: var(--h_zughoehe);
  border-radius: var(--r_zuggrenze);
}
.wagon4 {
  margin: 0%;
  background-color: lemonchiffon;
  width: var(--l_zuglaenge);
  height: var(--h_zughoehe);
  border-radius: var(--r_zuggrenze);
}
/*
Versuch: 2
Quelle: https://www.sitepoint.com/media-queries-width-vs-device-width/
Zeit: 2023-01-14, 02:44h.
*/
@media screen and (max-width: 979px) /* Tablet */ {
  :root {
    --l_zuglaenge: 0.56rem;
    --h_zughoehe: 0.75rem;
    --r_zuggrenze: 0.05rem;
    --ziehzeit: 7.00s;
  }
}

@media screen and (max-width: 500px) /* Mobile */ {
  :root {
    --l_zuglaenge: 0.5rem;
    --h_zughoehe: 0.375rem;
    --r_zuggrenze: 0.05rem;
    --ziehzeit: 4.00s;
  }
}