/*
	Vorgaben für die HTML-Datei:
	- Kartenumgebung mit div definieren (<div id="karte">
	- Vorderseite <div id="vorderseite">
	- Rückseite <div id="rueckseite">
	- Kartennavigation <div id="karten_steuerung">
*/

.karte{
 
  width: 300px;
  height: 200px;
  border-radius: 10px;
  border: 1px solid #1e2962;
  transform-style: preserve-3d;
  transition: all 0.8s ease;
}

.vorderseite{
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 160px;
  border-radius: 10px;
  padding: 20px;
  -webkit-backface-visibility: hidden;
  
  text-align: center;
  
  background: #819FF7;
  color: #1e2962;
}

.rueckseite{
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 160px;
  border-radius: 10px;
  padding: 20px;
  -webkit-backface-visibility: hidden;
  
  background: #F0F0F0;
  color: #1e2962;
  text-align: center;
  transform: rotateY(180deg);
  
}

#karten_steuerung{
  width:300px;
  padding-left: 70px;
}