/* Zwei Regeln allein für das Aussehen des Navigationsmenüs*/
a { display: block; } 
a[aria-current="page"] { font-weight: bold; }

/* Ausblenden des Element a mit ☰ und ✕, wenn das Display breit genug ist*/
a[href="#show-nav"], a[href="#hide-nav"] { display: none; }

@media screen and (max-width: 40em) {
	/* Eine Regel allein für das Aussehen des ☰ und ✕*/
	a[href="#show-nav"], a[href="#hide-nav"] { padding: 0.5em;  
	background: gray; color: white; }
	
	/* Die folgenden 4 Regeln sind für die Funktionalität des 
	Burgermenüs entscheiden */
	
	/*Blendet erstmal alle Elemente a aus*/
	nav a { display: none; }
	
	/* Blendet Element a mit ☰ ein */
	a[href="#show-nav"] { display: block; }
	
	/* Nach einem "Klick" auf Element a mit ☰, werden alle nachfolgenden
	Geschwister eingeblendet, auch das Element a mit ✕ */
	a[href="#show-nav"]:target ~ a { display: block; }
	
	/*Nach einem "Klick" auf Element a mit ☰ wird dieses Element ausgeblendet,
	damit nur noch das Element a mit ✕ sichtbar ist */
	a[href="#show-nav"]:target { display: none; }
}

<header>
<nav>
<!-- Begin: Extra Markup -->
<a href="#show-nav" aria-hidden="true" id="show-nav">☰</a>
<a href="#hide-nav" aria-hidden="true">✕</a>
<!-- End: Extra Markup -->
<a href="/">Startseite</a>
<a href="/ueber-uns/">Über uns</a>
<a aria-current="page" href="/faq/">FAQ</a>
<a href="/archiv/">Archiv</a>
</nav>
</header>