.flip-card {
  background-color: transparent;
  perspective: 1200px;
  width: 300px;
  /*height: 400px;*/
  height: 250px;
  margin: 0 auto;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  /* transition: transform 0.6s; */
  transition: transform 2s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #fff;
}

.flip-card-back {
  background-color: #fff;
  transform: rotateY(180deg);
}

@media only screen and (max-width: 768px) {
  .flip-card {
    width: 100%;
  }
}
.legende {
text-align: center;
font-family: verdana, sans-serif;
}