body {
		background-image:url('Himmel.png');
	    background-repeat: none;
		background-size:cover;
		background-position:center;
		background-color:white;
		width:100%; height:100%;
		padding:0;
		margin:0;
		}
	html {
		width:100%; height:100%;
		padding:0;
		max-width:2400px;
		max-height:2400px;
		margin:auto; 
	    -ms-overflow-style: none;  /* IE 10+ */
	    overflow: -moz-scrollbars-none;  /* Firefox */
	    overflow:hidden;
	}
	::-webkit-scrollbar { 
	    display: none;  /* Safari and Chrome */
	}
	#Logo {
		width:30%; height:300px;
		position:absolute;
		top:0px !important;
		right:0px !important;
		background-image:url('Logo.png');
		background-position:right top;
		background-repeat:no-repeat;
		background-size:100% auto;
	}
	/* https://www.mediaevent.de/css/img.html */
	img, .Ente, .Ente-1, .Ente-2, .quietsch  { 
	    position: absolute;
	    top: -9999px;
	    bottom: -9999px;
	    left: -9999px;
	    right: -9999px;
	    margin: auto;
	}
	.quietsch {
	    width:400px;
	    height:400px;
	    border-radius:200px;
	    border:1px transparent solid;
		background-color:transparent;
		cursor:pointer;
	    z-index:4;
	}
	
	.Welle {
		width:166.7%;
		height:100%;
		position:absolute;
		top:0; left:-66.7%;
		list-style-type:none;
	}
	.Welle li span { 
	    width: 166.7%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: -66.7%;
	    color: transparent;
	    background-size: cover;
	    background-position: center;
	    background-repeat: none;
		opacity:0;
		animation: Welle 30s linear infinite 0s;
	}
	
	.Welle li:nth-child(1) span {
		background-image:url('Welle-1.png');
	}
	.Welle li:nth-child(2) span {
		background-image:url('Welle-2.png');
	    -webkit-animation-delay: 15s;
	    -moz-animation-delay: 15s;
	    -o-animation-delay: 15s;
	    -ms-animation-delay: 15s;
	    animation-delay: 15s; 
	}
	@-webkit-keyframes Welle {
		0% { transform: translateX(0%); opacity:1; }
		50% { transform: translateX(20%); opacity:1; }
		100% { transform: translateX(40%); opacity:0; }
	}
	@-moz-keyframes Welle {
		0% { transform: translateX(0%); opacity:1; }
		50% { transform: translateX(20%); opacity:1; }
		100% { transform: translateX(40%); opacity:0; }
	}
	@-ms-keyframes Welle {
		0% { transform: translateX(0%); opacity:1; }
		50% { transform: translateX(20%); opacity:1; }
		100% { transform: translateX(40%); opacity:0; }
	}
	@-o-keyframes Welle {
		0% { transform: translateX(0%); opacity:1; }
		50% { transform: translateX(20%); opacity:1; }
		100% { transform: translateX(40%); opacity:0; }
	}
	@keyframes Welle {
		0% { transform: translateX(0%); opacity:1; }
		50% { transform: translateX(20%); opacity:1; }
		100% { transform: translateX(40%); opacity:0; }
	}
	.Ente {
		width:100%; height:100%;
		background-color:transparent;
		cursor: pointer;
	}
	#Ente-1 {
		background-color:transparent;
		visibility:visible;
		z-index:3;
	}
	#Ente-1, #Ente-1 img {
		width:400px; height:auto;
	}
	#Ente-2 {
		background-color:transparent;
		visibility:hidden;
		z-index:3;
	}
	#Ente-2, Ente-2 img {
		width:412px; height:auto;
	}
	#Ente-1.quiek {
		visibility:hidden;
	}
	#Ente-2.quiek {
		visibility:visible;
	}
	.Ente { /* https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068 */
		-webkit-animation: Wackeln 15s 0s infinite linear normal;
		-moz-animation: Wackeln 15s 0s infinite linear normal;
		-ms-animation: Wackeln 15s 0s infinite linear normal;
		-o-animation: Wackeln 15s 0s infinite linear normal;
		animation: Wackeln 15s 0s infinite linear normal;
	}
	@-webkit-keyframes Wackeln {
		0% { transform: rotate(-5deg) translateY(0px); }
		7% { transform: rotate(-5deg) translateY(0px); }
		32% { transform: rotate(0deg) translateY(-10px); }
		57% { transform: rotate(-5deg) translateY(-20px); }
		82% { transform: rotate(-13deg) translateY(-10px); }
		100% { transform: rotate(-5deg) translateY(0px); }
	}
	@-moz-keyframes Wackeln {
		0% { transform: rotate(-5deg) translateY(0px); }
		7% { transform: rotate(-5deg) translateY(0px); }
		32% { transform: rotate(0deg) translateY(-10px); }
		57% { transform: rotate(-5deg) translateY(-20px); }
		82% { transform: rotate(-13deg) translateY(-10px); }
		100% { transform: rotate(-5deg) translateY(0px); }
	}
	@-ms-keyframes Wackeln {
		0% { transform: rotate(-5deg) translateY(0px); }
		7% { transform: rotate(-5deg) translateY(0px); }
		32% { transform: rotate(0deg) translateY(-10px); }
		57% { transform: rotate(-5deg) translateY(-20px); }
		82% { transform: rotate(-13deg) translateY(-10px); }
		100% { transform: rotate(-5deg) translateY(0px); }
	}
	@-o-keyframes Wackeln {
		0% { transform: rotate(-5deg) translateY(0px); }
		7% { transform: rotate(-5deg) translateY(0px); }
		32% { transform: rotate(0deg) translateY(-10px); }
		57% { transform: rotate(-5deg) translateY(-20px); }
		82% { transform: rotate(-13deg) translateY(-10px); }
		100% { transform: rotate(-5deg) translateY(0px); }
	}
	@keyframes Wackeln {
		0% { transform: rotate(-5deg) translateY(0px); }
		7% { transform: rotate(-5deg) translateY(0px); }
		32% { transform: rotate(0deg) translateY(-10px); }
		57% { transform: rotate(-5deg) translateY(-20px); }
		82% { transform: rotate(-13deg) translateY(-10px); }
		100% { transform: rotate(-5deg) translateY(0px); }
	}
	
/* ----------------- Links --------------------- */
#apple, #google {
	margin:0;
	position:absolute;
	bottom:10%;
	cursor:pointer;
	z-index:5;
}
#apple {
	left:calc(50% - 180px);		
	width:175px;
	height:50px;
}
#google {		
	width:170px;
	height:50px;
	left:calc(50% + 5px);
}

footer {
	position:fixed;
	bottom:0px;
	width:100%;
	height:32px;
	display:inline;
	background-color: black;
	text-align:center;
	color:white;
	z-index:3;
	font: 14px/32px 'Arial';
}	
.left {
	float:left;
	margin:0 5px 0 25px;
	font: 10px/32px 'Arial';
}
#click-001 {
	width:auto;
	margin:0 5px;
	font: 14px/32px 'Arial';
}
.middle {
	font: 14px/32px 'Arial';
}
.right {
	float:right;
	margin:0 25px 0 5px;
	font: 10px/32px 'Arial';
}
.right a {
	color:white;
	text-decoration: none;
}
right a:hover {
	color: lime;
	text-decoration: none;
}

/* ================================================================================================= */

@media screen and (max-width: 1400px) {
	.quietsch {
	    width:300px;
	    height:300px;
	    border-radius:150px;
	}
	#Ente-1, #Ente-1 img {
		width:300px;
	}
	#Ente-2, #Ente-2 img {
		width:309px;
	}
	.Welle li span {
		top:15px;
	}
}

/* ================================================================================================= */

@media screen and (max-width: 900px) {
	.quietsch {
	    width:200px;
	    height:200px;
	    border-radius:100px;
	}
	#Ente-1, #Ente-1 img {
		width:200px;
	}
	#Ente-2, #Ente-2 img {
		width:206px;
	}
	.Welle li span {
		top:10px;
	}
}

/* ================================================================================================= */

@media screen and (max-width: 540px) {
	.Welle li span {
		top:30px;
	}
}

/* ================================================================================================= */