added background in mobile menu

static/style.css

@@ -26,6 +26,7 @@ body {
 	"footer footer footer";
 	justify-items: center;
 	align-content: space-evenly;
+	z-index: 0;
 }
 
 a {
@@ -74,8 +75,9 @@ body > header {
 	align-items: center;
 	width: 100%;
 	/* Always on Top of Page */
-	position: sticky;
+	position: fixed;
 	top: 0;
+	left: 0;
 }
 
 #Logo {
@@ -123,7 +125,7 @@ body > header > input[type=checkbox]{
 	display: none;
 }
 
-body > header label {
+body > header .show-header-menu {
 	display: none;
 	background-color: #f0f0f0;
 	-webkit-user-select: none; /* Safari */
@@ -131,11 +133,27 @@ body > header label {
 	-ms-user-select: none; /* IE10+/Edge */
 	user-select: none; /* Standard */
 	cursor: pointer;
+	z-index: 11;
 }
-body > header label:hover {
+body > header .show-header-menu:hover {
 	background-color: #e6e6e6;
 	/*border-bottom: 0.2em solid #536;*/
 }
+body > header .show-header-menu-bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: none;
+	background-color: #f0f0f0;
+	-webkit-user-select: none; /* Safari */
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* IE10+/Edge */
+	user-select: none; /* Standard */
+	cursor: pointer;
+	z-index: 5;
+}
 
 body > footer {
 	grid-area: footer;
@@ -169,8 +187,9 @@ body > footer {
 		position: fixed;
 		top: 0;
 		left: 3em;
+		z-index: 10;
 	}
-	body > header label {
+	body > header .show-header-menu {
 		display: inline-block;
 		font-style: normal;
 		padding: 1em;
@@ -191,6 +210,9 @@ body > footer {
 	body > header a:hover {
 		border-bottom: 0.1em solid #536;
 	}
+	body > header > input[type=checkbox]:checked ~ .show-header-menu-bg {
+		display: block;
+	}
 	body > header > input[type=checkbox]:checked ~ nav{
 		display: block;
 	}

template.html

@@ -15,6 +15,7 @@
 	<header>
 		<label for="show-header-menu" class="show-header-menu">&#9776;</label>
 		<input type="checkbox" id="show-header-menu" role="button">
+		<label for="show-header-menu" class="show-header-menu-bg"> </label>
 		<nav>
 			<a href="/index.html"><img id="Logo" src="/resources/assets/banner-logo.png" alt="Home" />
 				<a href="/Über-uns.html">Über uns</a>