/* animation/classes/style.css */
#animation-container {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  min-height: 50em;
  background-color:#eeeeee;
}

#animation-container img {
  width:auto;
}

.animationLayer {
  position: relative;
  width: 100%;
}

/* Horizont-Layer */
.horizonLayer {
  top: 19em;
  height: 15em;    /* Feinjustierbar: Bereich für Gebäude */
}

.horizon-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.horizon-layer img {
  height:auto!important;
  max-height:100%;
  max-width:20em;
}

/* Straßen-Layer */
.streetLayer {
  top: 20em;
  height: 5em; /* feinjustierbar */
}

/* Gras-Layer (zwischen Straße und Leitpfosten) */
.grassLayer {
  top: 12em;  /* feinjustierbar */
  height: 3em;/* feinjustierbar */
}

/* Leitpfosten-Layer */
.delineatorLayer {
  top: 8em;
  height: 4em;
}

/* Straßen-Segmente */
.street-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 110vw; /* 110% Viewport-Breite */
  background-image: url("../media/street.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  z-index: 0;
}

/* Gras-Segmente */
.grass-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 110vw;
  background-image: url("../media/weed.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  z-index: 1;
}

/* Leitpfosten-Wrapper */
.delineator-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}


/* Fahrzeug-Layer */
.vehicleLayer {
  top: 15.5em;
  height: 5em;
}

.vehicle-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.vehicle-item {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vehicle-item img.vehicle-img {
  height: 100%;
  width: auto;
}

.vehicle-label {
  margin-top: 2.75em;
  font-size: 1.2em;
  color: #000000;
  text-align:center;
  
}

.vehicle-label span.label   {
  font-weight: 800;
  width:100%;
  display:block;
}
.vehicle-label span.year   {
  width:100%;
  display:block;
}
.vehicle-label span.ps     {
  width:100%;
  display:block;
}
.vehicle-label span.length {
  width:100%;
  display:block;
}
.vehicle-wheel {
  position: absolute;
  transform-origin: center;
}