* { margin: 0; padding: 0; list-style: none; font: inherit; } html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} main{display:block}

html { 
	font-size: 12px;
	font-size: calc( 1.136vw + 8.364px );
}
@media screen and ( min-width: 1024px ) {
	html { 
		font-size: calc( 1.339vw + 6.286px );
	}
}
@media screen and ( min-width:  1920px ) {
	html { 
		font-size: 32px;
	}
}
body {
	background-color: #000;
}
main {
	position: absolute; top: 45%; left: 50%;
	width: 92vw; max-width: 40rem;
	transform: translate3D(-50%,-50%,0);
}

h1 {
	overflow: hidden;
	width: 18rem; height: 2.88rem; margin: 0 auto;
	font-size: 0;
	background-image: url(../img/waehlen.jpg);
	background-size: cover;
}
nav ul {
	overflow: hidden;
}
nav li {
	position: relative;
	width: 20rem; margin: 0 auto;
	font-size: 0;
}
@media screen and (min-width: 800px) {
	nav li {
		float: left;
		width: 50%; margin: 0;
	}
}
nav a {
	position: relative; display: block;
	width: 100%; height: 0; padding-bottom: 60%;
}
nav a::before,
nav a::after,
.demnaechst {
	position: absolute; top: 0; left: 0; z-index: 1;
	width: 100%; height: 100%;
}
nav a::before,
nav a::after {
	display: block; content: '';
	background-image: url(../img/spritemap.jpg);
	background-size: 200%;
}
nav a::before {
	z-index: 2;
	opacity: 0;
	transition: opacity 0.4s;
}
.dueren a::after { background-position: top left; }
.dueren a::before { background-position: bottom left; }
.solingen a::after { background-position: top right; }
.solingen a::before { background-position: bottom right; }
nav a:hover::before {
	opacity: 1;
}
.demnaechst {
	z-index: 3;
	background-image: url(../img/demnaechst.png);
	background-size: cover;
}