/*Standardwerte für verschiedene Browsern zurücksetzen */
*{
    padding: 0;
    margin: 0;
}

body {   /* hier der oberste Flex-Container */
  margin: 0 auto; /*Zentrieren der Seite*/
  max-width: 80em; /*Feste Breite für den Flex-Container, damit er der Text auf Widescreens nicht
  ewig in die Breite gezogen wird (schlecht lesbar)*/
  display: -webkit-flex; /*InternetExplorer-Patch immer zuerst, wird dann von normal überschrieben*/
  display: flex; /*dadurch werden alle direkten Kind Elemente zu FlexItems
                  Achtung, Divs nicht in 2 Ebenen verschachteln, da sonst kein Flex mehr*/
  -webkit-flex-flow: row wrap; /*InternetExplorer-Patch*/
  flex-flow: row wrap; /*Wenn die Elemente die verfügbare Breite überschreiten werden
                        Sie umgebrochen in die nächste Zeile*/
}

/* ==============================================================================================
mobileFirst    alles was hier festgelegt wird gilt erstmal auch für die andern Displays (es
sei denn es wird ueberschrieben================================================================*/
header, nav, main, aside, footer {
  font-family: 'Teko', calibri, sans-serif;
  padding: 0.75em;
  margin: 0.75em;
  -webkit-flex: 1 100%; /*InternetExplorer-Patch*/
  flex: 1 100%; /*flex 1 alle bekommen die gleiche Breite, 100% des gesamten Body wird genutzt*/
}
main, aside, footer {
  border-radius: 0 0.5em 0.5em;
  border: 1px solid;
}

header { /*Header selbst zum Flex-Container, um anordnen zu können*/
  display:flex;
  flex-flow: row nowrap; /*damit Hamburger, Titel und Logo nebeneinander sind und NICHT umgebrochen werden*/
  border: none;
}
header * {
	flex: 1 1 0%;
}

nav	{
	flex: 1 1 100%;
	margin: 0;
	padding: 0;
	border: none;
}

nav ul {
	margin: 0;
	padding: 0;
	display: flex;  /* wieder ein Flex-Container */
	flex-direction: column;
}
nav li {
  list-style-type:none;
  margin: 1.3em; /*muss sein, sonst im Internet-Explorer Elemente ineinander geschoben*/
  padding; 0;
  flex: 1 1 100%;
  border-top: solid 1px silver;
}
nav a {
	display:inline-block;
	width: 95%;
	margin: 0;
	padding: 1em 0 1em 0;  /*um besser breite Schaltflächen zum Klicken zu haben*/
	text-align: center;
	text-decoration: none;
}

/* ==Toggle Navigation unsichtbar auf kleinem Displays biss die Checkbox gecheckt wird ======*/
nav ul {
  visibility: hidden;
  height: 0;
}
nav #menu-toggle:checked ~ nav ul {
    visibility: visible;
    height: 100%;
}

h1.titel {
  font-size: 1.3em;
  margin-top: .7em;
}
h1.titel a {
  text-decoration:none;
}

header .label-toggle {
  font-size: 2em;
  flex: 0 0 2em; /*Feste Breite des Hamburger-Toggles seiner em, damit der Titel max. Platz hat*/
  margin-top: .15em;
}
nav #menu-toggle {
  visibility: hidden;
}


/* ==footer =================================================================================*/
footer {
  display: flex;
  flex-flow: row wrap;
}
footer * {
  flex: 1 1 0%;
  justify-content: space-between;
}
footer p {
  text-align: left;
  margin: 1em;
}

footer ul {
	margin: 0;
	padding: 0;
	display: flex;  /* wieder ein Flex-Container */
	flex-direction: column;
}

footer li {
  list-style-type:none;
  margin: 1.3em; /*muss sein, sonst im Internet-Explorer Elemente ineinander geschoben*/
  padding; 0;
  flex: 1 1 100%;
}

footer a {
	display:inline-block;
	width: 95%;
	margin: 0;
	padding: .5;  /*um besser breite Schaltflächen zum Klicken zu haben*/
	text-align: right;
	text-decoration: none;
	font-size: .9em;
}
/* ==mittlereDisplays überschreibt moblieFirst bei Viewport >= 37em==============================
=================================================================================================*/
@media all and (min-width: 49em) {
  h1.titel {
	padding-left: 1.5em;
	margin-right: 2.2em;
  }
  
  nav.HauptNav {
	border-top: solid silver .5px;
	border-bottom: solid silver .5px;
	margin-bottom: 1em;
}

  nav ul {
  	flex-direction: row;
    visibility: visible; /*ab dieser Größe Navigation immer sichtbar ...*/
    height: 100%;
  }
  header .label-toggle { /* ... und der Hamburger-Toggle-Button immer weg */
    visibility: hidden;
    font-size: 0em;
    flex: 0 0 0em; /*Feste Breite des Hamburger-Toggles seiner em, damit der Titel max. Platz hat*/
  }
  nav li {
    margin: 0 0 10px 0;
    flex: 1 1 0%;
	border: none;
  }
  nav a {
    padding: 0; /* damit die Menu-Punkte nicht mehr breit zum tappen sind*/
  }
  aside{
  flex: 1 auto;  /* durch auto werden die beiden asides in eine Zeile gesetzt */
  }
  main {
    order: 2;
  }
  #aside_nav {
  flex: 1 auto;  /* durch auto werden die beiden asides in eine Zeile gesetzt */
  order: 3;
  }
  aside {
    order: 4;
  }
  footer {
    order: 5;
  }
}

/* ==grosseDisplays überschreibt moblieFirst bei Viewport >= 50em================================
=================================================================================================*/
@media all and (min-width: 50em) {

main {
  order: 3;
  flex: 3 1 0%; /*main soll 3x so breit sein wie die asides*/
  }
aside {
  flex: 1 auto;
  }
#aside_nav {
  flex: 1 1 0%; /*%-Angabe nötig bei flex-base, da sonst der InternetExplorer spinnt*/
  order: 3;
  }
}


/* ==Farben ==========================================================================
=====================================================================================
fff     weiss
000     schwarz
 */

header {
  background: #000;
  color: #fff;
}

.label-toggle {
  color: #fff;
}

nav {
  background-color: transparent;
  border-color: white;
}
nav a {
	color: #fff;
	
}
nav a:hover, nav a:focus {
	color: gold;
}

h1.titel a {
  color: #fff;
}
h1.titel a:hover, h1.titel:focus {
	color: gold;
}
main {
  border-color: silver;
  color: #fff;
}

aside {
  background-image: linear-gradient(90deg, #000000, #555555, #000000);
  border-color: silver;
  color: #fff;
}

footer {
  background: #000;
  border-color: silver;
  color: #fff;
}
footer a {
  color: #fff;	
}
footer a:hover, nav a:focus {
  color: gold;
}


/* ==EndeFarben =======================================================================
=======================================================================================*/