input#burger,
input#burger + label {
	display: none;
}
@media screen and (max-width: 40em) {
input#burger + label {
	display: block;
	padding: 0.5em;
	background: gray;
	cursor: pointer;
	color: white;
}
/*Nav soll nicht zu sehen sein, wenn Checkbox nicht gewählt ist*/
	input#burger[type="checkbox"]:not(:checked) + label:before {
		content: "☰";
		}
	nav {
		position: absolute;
		top: -9999px;
	}

/*Nav soll zu sehen sein, wenn Checkbox gewählt ist*/
	input#burger[type="checkbox"]:checked + label:before {
		content: "✕";
		}
	input#burger[type="checkbox"]:checked ~ nav, input#burger[type="checkbox"]:checked ~ footer {
		position: relative;
		top: 0;
	}
}

<!-- Begin: Extra Markup --><input type="checkbox" id="burger"><label for="burger"></label><!-- End: Extra Markup -->
<nav>
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/zimmer">Zimmer</a></li>
		<li><a href="/seminarbereich">Seminarbereich</a></li>
		<li><a href="/galerie">Galerie</a></li>
		<li><a href="/anfrage">Anfrage</a></li>
		<li aria-current="page"><strong>Lage</strong></li>
		<li><a href="/service">Service</a></li>
	</ol>
</nav>
<footer>
	<ol>
		<li><a href="/agb">AGB</a></li>
		<li><a href="/kontakt-impressum">Kontakt/Impresum</a></li>
		<li><a href="/datenschutz">Datenschutz</a></li>
	</ol>
</footer>

{ position: absolute; top: -9999px;}