/*********************************************************/
.container{
   margin-top: 200px;
   margin-left: 300px;
    width: 250px;
    height: 350px;
    background: url(../button/innentext.jpg);
    position: relative;
    left: 30%;
    top: 20%;
    transform: translate(-50%, -50%);
    perspective: 100%;

}
.cover{
    width: 210px;
    height: 100%;
    position: absolute;
    left: 40px;
    background-color: var(--h2farbe);
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transform-origin: left;
    transition: all 1.5s ease-in;
}
.container:hover .cover{
  transform: rotateY(-180deg);
}
figure{
  margin: 0%;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
figure.front {
  background: url(../button/deckblatt.jpg);
}
figure.back {
  background: url(../button/innenblatt.jpg);
  transform: rotateY(180deg);
}