body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	background-color: #fff;
}


/*----- Stage -----*/
	#Stage {
		max-width: 1400px;
		/* background-color: #eee; */
		margin-left: auto;
		margin-right: auto;
	}
	#Stage-wrapper {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 150%;
	}
	@media screen and (min-width: 768px){
		#Stage-wrapper {
			padding-top: 74.3%;
		}
	}


/*----- Reload Button -----*/
	.reloadBtn-wrapper {
		position: absolute;
		top: 78%;
		left: 0;
		width: 25%;
	}
	.reloadBtn {
		margin: 0 auto;
		display: block;
	}
	button {
		font-size: 18px;
		cursor: pointer;
		padding: 10px 20px;
		border-radius: 8px;
		background-color: #bbbf40;
		color: #2f2f2f;
		border: 2px solid #bbbf40;
	}
	button:hover, 
	button:focus, 
	button:active {
		background-color: #eee;
	}


/*----- Drag Elements -----*/
	.drag-element {
		position: absolute;
		width: 13.556%;
		height: auto;
		z-index: 10;
	}
	.drag-element.dragged {
		z-index: 100;
	}
	.drag-element.der {
		top: 5%;
		left: 6%;
	}
	.drag-element.die {
		top: 29%;
		left: 6%;
	}
	.drag-element.das {
		top: 53%;
		left: 6%;
	}


/*----- Targets -----*/
	#Stage_targets {
		position: absolute;
		top: 0;
		left: 25%;
		width: 75%;
		height: 90%;
	}
	.targetcontainer {
		width: 33.333%;
		height: 33.333%;
		float: left;
		box-sizing: border-box;
		padding: 15px;

		display: flex;
		justify-content: center;
		align-items: center;
	}
	.targetwrapper {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding-top: 10px;
		padding-bottom: 10px;
		box-sizing: border-box;
	}
	.target-element {
		max-width: 80%;
		max-height: 80%;
	}
	.text {
		margin-top: 10px;
	}
	/* Richtig (Artikel & Haken) */
		.richtig {
			width: 50%;
			height: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 5%;
			left: unset;
			right: 0;
			display: none;
		}
		.targetcontainer.right .richtig {
			display: flex;
		}
		/* Artikel */
			.artikel {
				width: 5%;
				height: auto;
				position: absolute;
				left: 50%;
				top: 30%;
				left: 0;
				top: 0;
			}
			.targetcontainer.right .artikel {
				width: 100%;
				animation-name: artikel-gross;
				animation-duration: .5s;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}
			@keyframes artikel-gross {
				0% { width: 10%; }
				100% { width: 100%; }
			}
		/* Haken */
			.haken {
				position: absolute;
				width: 40%;
				height: auto;
				top: 35%;
				left: 75%;
			}


/*----- Audios -----*/
	audio {
		display: none;
	}



/*----- Smartphone -----*/
	@media screen and (max-width: 767px){
		/*- Drag Elements -*/
			.drag-element {
				width: 20%;
			}
			.drag-element.der {
				left: 14%;
				top: 4%;
			}
			.drag-element.die {
				left: 40%;
				top: 4%;
			}
			.drag-element.das {
				left: 66%;
				top: 4%;
			}
		/*- Targets -*/
			#Stage_targets {
				width: 100%;
				height: 72%;
				top: 18%;
				left: 0;
			}
			.targetcontainer {
				padding: 5px;
			}
			/*.artikel {
				width: 5%;
				left: 50%;
				top: 20%;
			}
			@keyframes artikel-gross {
				0% { width: 5%; }
				100% { width: 60%; }
			}
			.haken {
				width: 25%;
				top: 30%;
				left: 85%;
			}*/
		.reloadBtn-wrapper {
			top: 90%;
			left: 0;
			width: 100%;
		}
	}
	@media screen and (max-width: 475px){
		.richtig {
			width: 65%;
			height: 65%;
		}
	}