* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

h3 {
	text-align: center;
}

#kartenWrapper {
	width: 530px;
  	height: 100%;
  	position: absolute;
  	margin-left: -220px;
  	left: 50%;
  	top: 25px;
}

.kartenPos1 {
	position: absolute;
	left: 90px;
	top: 20px;
	transform: rotate(-10deg) translateY(-10px);
	z-index: 100;
}

.kartenPos2 {
	position: absolute;
	left: 100px;
	top: 20px;
	transform: rotate(0deg) translateY(0);
	z-index: 99;
}

.kartenPos3 {
	position: absolute;
	left: 110px;
	top: 20px;
	transform: rotate(10deg) translateY(10px);
	z-index: 98;
}

.torClass {
	background-position: center;
	background-repeat:no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#loginTorHintergrund {
	background-image:url('../Bilder/Eingang-loch.png');
}

#loginTorHintergrund.torClassRot {
	background-image:url('../Bilder/Eingang-lochRot.png');
}

#loginTor {
	background-image:url('../Bilder/Eingang.png');
}

#anmeldungWrap {
	width: 100px;
	position: absolute;
	left: 110px;
	top: 175px;
}

.anmeldungInput {
	border: none;
	border-bottom: 1px solid #FFF;
	background-color: #32303c;
	color: #FFF;
	padding: 0.2rem 0.5rem;
	width: 100%;
	margin-top: 0.3rem;
}

#Eintreten {
	border: 1px solid #FFF;
  	color: #FFF;
  	padding: 0.1rem 0.5rem;
  	text-align: center;
  	margin-top: 0.5rem;
  	width: 100%;
 	background-color: #666;
}

#Eintreten:hover {
	background-color: #FFF;
	color: #000;
	cursor: pointer;
}

.spielkarte {
	height: 500px;
	width: 320px;
	border-radius: 10px;
	border: 1px solid #666;
	cursor: default;
	background-color: #EEE;
	transform-origin: bottom right;
		-webkit-transition-property: transform, scale;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;
	   -moz-transition-property: transform, scale;
	   -moz-transition-duration: 0.5s;
	   -moz-transition-timing-function: ease-out;
	    -ms-transition-property: transform, scale;
	    -ms-transition-duration: 0.5s;
	    -ms-transition-timing-function: ease-out;
	     -o-transition-property: transform, scale;
	     -o-transition-duration: 0.5s;
	     -o-transition-timing-function: ease-out;
	        transition-property: transform, scale;
	        transition-duration: 0.5s;
	        transition-timing-function: ease-out;
}

.spielkarte:not(.kartenPos1):not(.karteRaus):hover {
	border: 1px solid #CCC;
	cursor: pointer;
}

.bezeichnungKarteRechts {
	position: absolute;
	transform: rotate(90deg);
	right: 15px;
  	bottom: 30%;
  	transform-origin: top right;
  	width: 300px;
  	text-align: center;
}

.bezeichnungKarteOben {
	position: absolute;
	left: 0;
	top: 0;
	padding: 0.5rem 1rem 0.5rem 3rem;
	width: 100%;
	text-align: left;
	font-size: 2rem;
}

.textClass {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	padding: 2rem;
}

.flavortext {
	position: absolute;
	left: 0;
	bottom: 20px;	
	padding: 0.5rem 1rem 0.5rem 3rem;
	text-align: left;
	font-style: italic;
}

.karteRaus {
	transform: rotate(0deg) translateX(350px);
}