body{
	font-family:Arial;
	font-size:1.3vw;
	line-height:1.5em;
	color:#fff;
	background: #78284a;
	background: -moz-linear-gradient(left, #78284a 0%, #6d8a9f 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, #78284a), color-stop(100%, #6d8a9f));
	background: -webkit-linear-gradient(left,#78284a 0%, #6d8a9f 100%);
	background: -o-linear-gradient(left, #78284a 0%, #6d8a9f 100%);
	background: -ms-linear-gradient(left, #78284a 0%, #6d8a9f 100%);
	background: linear-gradient(to right, #78284a 0%, #6d8a9f 100%);
	display:grid;
	place-items: center;
}

.clearfix{
	clear:both;
}

#eingabescreenReader{
	width:50vw;
	margin: auto;
	margin-top:0;
	overflow:auto;
	flex-direction: column;
	justify-content: center;
	display: flex;
	height: 95vh;
}



#textbereich{
	width:100%;
	display: flex;
	justify-content:center;
	font-size:8vh;
	margin-bottom: 3vh;
	margin-top:6vh;
}
#eingabeanzeige{
	padding: 4vh 2vh;
	background:rgba(0, 0, 0, 0.3);
	border-radius:1vh;
}

.tastenfeld{
	width=99%;
	display:flex;
	flex-direction: column;
	align-items: center;
}

.btn{
	background-color: rgb(104,104,255);
	border:none;
	display: inline-block;
	font-size:7vh;
	width:17vh;
	height:17vh;
	color: #fff;
	border-radius: 2vh;
	margin: 0.8vh;
}


#nullbutton{
	width:27vh;
	height:17vh;
}

#loeschenbutton{
	background-color: rgb(104,104,255);
	border:none;
	display: inline-block;
	font-size:7vh;
	color: #fff;
	border-radius: 2vh;
	margin: 0.8vh;
	margin-left:0;
	width:27vh;
	height:17vh;
}


#reader{
	width:99%;
	margin-bottom: 1vh;
}



#player{
	width:30vw;
	margin: auto;
	margin-top:;
	overflow:auto;
	flex-direction: column;
	justify-content: center;
	display: flex;
	height: 95vh;
}

#startwahl{
	width:80vw;
	margin: auto;
	margin-top:;
	overflow:auto;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	display: flex;
	height: 95vh;
}

#eingabeNutzer{
	width: calc(100% - 65px);
}

#buttonStartEingabe{
	margin-left:8px;
}


button{
	width:70px;
	height:70px;
}

button#html5-qrcode-button-camera-permission{
	width:10%;
	min-width:65px;
	height:10%;
}

button#html5-qrcode-button-camera-stop{
	width:10%;
	min-width:65px;
	height:10%;
}

button#html5-qrcode-button-camera-start{
	width:10%;
	min-width:65px;
	height:10%;
}

button#qrscanner{
	width:48%;
	height:auto;
	aspect-ratio:1;
	background:url("camera.png") no-repeat;
	background-position: right bottom;
	background-size:100%;
	margin:auto;
	border: none;
}

button#eingabefeld{
	width:48%;
	height:auto;
	aspect-ratio:1;
	background:url("keyboard.png") no-repeat;
	background-position: right bottom;
	background-size:100%;
	margin:auto;
	border: none;
}

button#play{
	width:80%;
	margin-left:10%;
	margin-top:5%;
	height:auto;
	border: none;
	aspect-ratio:1;
	background:url("play.png") no-repeat;
	background-position: right bottom;
	background-size:100%;
}

button#pause{
	width:80%;
	margin-left:10%;
	margin-top:5%;
	height:auto;
	border: none;
	aspect-ratio: 1;
	background:url("pause.png") no-repeat;
	background-position: right bottom;
	background-size:100%;
}

button#zurueck{
	width:100%;
	height:auto;
	font-size:10vh;
	background-color: rgba(200, 200, 200, 0.3);
	border: none;
	padding-top: 4vh;
	padding-bottom: 4vh;
}

#fehler{
	font-size: 8vh;
	text-align: center;
	width:80vw;
	line-height:normal;
}
	

button#zurueckfehler{
	width:100%;
	height:auto;
	font-size:10vh;
	margin-top:1vh;
	background-color: rgba(200, 200, 200, 0.3);
	border: none;
	padding-top: 4vh;
	padding-bottom: 4vh;
}

#tracker{
	position:relative;
	width:100%;
	margin-top:2vh;
}

#progress-bar{
	margin-left:2%;
	margin-bottom: 1vw;
	margin-top: 1vw;
	width:80%;
	height:1vw;
	background:url("progress_weiss.png") no-repeat;
	border-radius:5px;
	float:left;
}

#progress{
	margin:0px;
	margin-bottom: 1vw;
	height:1vw;
	background:url("progress_blau.png") no-repeat;
	display:inline-block;
	border-radius:5px;
	
	
}

#duration{
	position:absolute;
	top:0.3vw;
	right: 0.7vw;
	padding: 0.3vw 0.5vw;
	background:#000;
	border-radius:5px;
}


@media (orientation: portrait) {
	body{
		font-size:3.8vw;
	}
	#player{
		width:80vw;
	}
	#duration{
		top:0;
		right: 1.9vw;
		padding: 1vw 1.3vw;
	}
	#progress-bar{
		margin-top: 2.8vw;
		height:2vw;
	}
	#progress{
		margin-bottom: 2.8vw;
		height:2vw;
	}
	#eingabescreenReader{
		width:70vw;
	}
	button#qrscanner{
		width:40vh;
		max-width:90%;
		margin-left: calc(50% - 20vh);
	}
	button#eingabefeld{
		width:40vh;
		max-width:90%;
		margin-left: calc(50% - 20vh);
	}
	#textbereich{
		font-size:8vw;
		margin-bottom: 2vw;
		margin-top: 2vw;
	}
	#eingabeanzeige{
		padding: 2vw 2vw;
		border-radius:1vw;
	}
	.btn{
		font-size:8vw;
		width:20vw;
		height:20vw;
		border-radius: 2vw;
		margin: 1vw;
	}
	#nullbutton{
		width:32vw;
		height:20vw;
	}
	#loeschenbutton{
		font-size:8vw;
		border-radius: 2vw;
		margin: 1vw;
		width:32vw;
		height:20vw;
	}
	#fehler{
		font-size: 8vw;
		width:80vw;
	}
}