.rahmen {
	background-color: transparent;
	width: 100%;
	height: 26.25rem; /* Höhe des Bildes bei großem Bildschirm */
	perspective: 1000px;
}

.karte {
	position: relative;
	width: 100%;
	height: 26.25rem; /* Höhe des Bildes bei großem Bildschirm*/
	text-align: center; /* Bild zentrieren */
	transition: transform 2s; /* Wendezeit */
	transform-style: preserve-3d;
}	

.rahmenklein {
	height: 12.5rem; /* Höhe des Bildes bei großem Bildschirm */
	}

.karteklein {
	height: 12.5rem; /* Höhe des Bildes bei großem Bildschirm*/
}
.rahmen:hover .karte {
	transform: rotateY(180deg);
}

.vorderseite, .rueckseite {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

.rueckseite {
	transform: rotateY(180deg);
}


 @media only screen and (max-width: 570px) {
	.rahmen, .karte{
		height: 12.5rem;
	} /* Höhe des Bildes bei kleinem Bildschirm*/
 }