.aygo-car-animation {
  position: fixed;
  bottom: 20px;
  width: 100%;
  overflow: visible;
  z-index: 100000;
}

.aygo-car {
  width: 500px;
  transform: scaleX(-1);
  rotate: -2.3deg;
  position: relative;
  animation: aygo-drive 3s linear forwards;
  animation-delay: 0.6s;
  left: 120%;
}

/* Keyframes für Hin- und Rückfahrt */
@keyframes aygo-drive {
  0% {
    left: 120%;
    transform: scaleX(-1); 
  }
  49% {
    left: -70%;    
    transform: scaleX(-1);
    rotate: -2.3deg;
  }
  50% {
    left: -70%;    
    transform: scaleX(1);
    rotate: 2.3deg;
  }
  99% {
    left: 120%;
    transform: scaleX(1); 
  }
  100% {
    left: 120%;
    transform: scaleX(-1); 
    rotate: 2.3deg;
  }
}




@media only screen and (max-width: 990px) {
    .aygo-car {
        width: 250px;
        animation: aygo-drive 2s linear forwards;
        animation-delay: 1.5s;
    }
}



#aygo-popover {
  width: 90%;
  border: 0;
  max-width: 540px;
  background: transparent;
  overflow: hidden;
}
.aygo-popover-inner {
  padding: 39px 39px 21px;
  line-height: 1.4em;
  box-shadow: 6px 6px 0 #ffefb7;
  background-color: #fff8d8;
  max-height: 100vh;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-right: 6px;
  margin-bottom: 6px;
}
/* Sichtbar-Klasse hinzufügen, wenn Popover offen ist */
#aygo-popover.show .aygo-popover-inner {
    opacity: 1;
    transform: translateY(0);
}
#aygo-popover h2 {
  font-size: 2rem !important;
  color: #f0af00;
  margin: 20px 0 0 0;
  font-weight: normal;
  letter-spacing: 0.01em;
}
#aygo-popover strong {
  font-family: "Halcom Bold";
  font-weight: normal;
}
#aygo-popover button {
  appearance: none;
  border: 0;
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
  font-size: 34px;
  padding: 0;
  width: 60px;
  height: 60px;
  cursor: pointer;
  color: #000;
}
#aygo-popover button:hover {
  color: #7F7F7F;
}




.aygo-car-animation-in-popover {
  position: relative;
  width: auto;
  overflow: hidden;
  margin-left: -39px;
  margin-right: -39px;
}
.aygo-car-in-popover {
  width: 300px;
  transform: scaleX(-1);
  rotate: -2.3deg;
  left: 120%;
  position: relative;
  animation: aygo-drive-in-popover 1.5s ease forwards;
}


/* Keyframes für Fahrt */
@keyframes aygo-drive-in-popover {
  0% {
    left: 120%;      
  }
  100% {
    left: 23%;      
  }
}


@media only screen and (max-width: 540px) {
    .aygo-car-in-popover {
        width: 250px;
        translate: -10px;
    }
    #aygo-popover h2 {
        font-size: 5vw !important;
    }
}