#scooterPopup {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    height: fit-content;

    padding: 5% 5% 5% 5%;

    background-color: white;
    border-radius: 30px 30px 0 0;
    filter: drop-shadow(0px -10px 10px #666666);

    display: grid;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: 50px repeat(4, 1fr);
    gap: 10px 50px;
    grid-template-areas:
      "slide-down slide-down"
      "scooter-name scooter-name"
      "scooter-image scooter-entfernung"
      "scooter-image scooter-akku"
      "scooter-reservieren scooter-reservieren";

      align-items: center;
      justify-content: stretch;
}
  
  .slide-down {
    text-align: center;
    grid-area: slide-down;
}
  
  .scooter-name {
    grid-area: scooter-name;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}
  
  .scooter-image {
    grid-area: scooter-image;
}

.scooter-image img {
    width: 100%;
}

.scooter-entfernung { grid-area: scooter-entfernung; }
.scooter-akku { grid-area: scooter-akku; }
.scooter-reichweite { grid-area: scooter-reichweite; }
.scooter-reservieren { grid-area: scooter-reservieren; }