/* ---------------------------------------------------------
   Navigation 
   ---------------------------------------------------------*/



nav {
  background: #eee; 
  color: #333; 
    /* margin-bottom: 5px; */
	text-transform: uppercase;
	margin: 5em 0em;
	 }
	 
nav ul {
  padding: 0;
  margin: 0; 
}
nav li {
  display: inline-block;
  padding: 0;
  margin: 0; 
}
nav li a {
  text-decoration: none; 
  color: #333;
  padding: 1em; 
  letter-spacing: 2px;
}
nav li.active a {
  color: black;
  text-decoration: underline;
}


/* nav li a:first-child {
  padding-left: 0;
} */

body {
	min-width: 280px;
} 

nav  div.menubutton { 
	display: none; }


@media screen and (min-width: 320px) and (max-width: 767px) {

/* Für Browser mit Media Query Menübutton einblenden */ 
nav  div.menubutton { 
	display: block; 
}
	
/*  Mobile Navigation */

.nav.brand {float: left;
  height: 50px;
  padding: 15px 15px;
letter-spacing: 4px;
}

/* Vorbereitung  */
body { 
  position: relative; 
}
header {
  box-shadow: 0px 2px 6px rgba(51,51,51,0.3);
}

header h1 {
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 0.5em;
}

/* Button positionieren  */
div.menubutton {
  display: block;
  position: absolute;
  right: 1em;
  top: 1em;
  z-index: 1000;
}

/* Button gestalten */ 
div.menubutton a {
  display: block; 
  color: white;
  /* background: #e34c26;
  background: #f06529; */
  background: #592381;
  text-decoration: none;
  padding: 0.5em;
  border-radius: 0.25em;
  border: solid white;
}
div.menubutton a.shownavlist:after {
  content: " \25bc";
  font-size: 1.0em;
}
div.menubutton a.hidenavlist:after {
  content: " \25b2";
  font-size: 1.0em; 
}  
div.menubutton a.hidenavlist {
  display:none;
}

/* Navigationsliste gestalten */
nav {
  padding: 0 1em; 
  margin: 0;
  background: white;
}
nav ul#navlist {
  max-height: 0;
  overflow: hidden; 
  transition: 0.3s;  
  list-style-type: none;
  padding: 0; 
  /* border-radius: 0 0 1rem 1rem; */
  margin: 0;
}
nav li { 
  display: block; 
  border-bottom: 1px solid #ddd; 
}
nav li:last-of-type {
  border-bottom: 0;
}

/* Gestaltung der Hyperlinks */
nav li a {
  display: block; 
  text-decoration: none;
  background: #eee;
  color: #333;
  padding: 0.7em; 
}
nav a:hover, 
nav a:focus {
  /*background: #c40;
  color: white;
 text-decoration: underline; */
}

/*nav a:active {
  background: #fff;
  color: white;
}*/
nav li.active a {
  background: #592381;
  color: white;
  text-decoration: none;
}

/* Navigationsliste einblenden */
#menu:target ul#navlist { 
  max-height: 25em;  
}
#menu:target a.shownavlist { 
  display: none; 
}
#menu:target a.hidenavlist { 
  display: block; 
}

} /* Ende @media */
		
@media screen and (min-width: 768px) {

  header[role="banner"] {
   /* box-shadow: 0 2px 6px rgba(51,51,51,0.3); */
    margin-bottom: 0.5em;
  }
  nav {
    background: white;
   /* padding: 0.5em 1em 0 1em; */
    margin: 0px;
  }
  nav ul {
    position: relative;
    padding-left: 0; 
    margin: 0;
	min-height: auto;
  }
  nav li {
    list-style-type: none; 
    display: inline-block;
	font-size: 1.2em;
  }
  nav li a {
    display: block;
    min-width: auto;
    /* background-color: #eee; */
    color: #333;
    text-align: center;
   text-decoration: none; 
    /* border-radius: 0.5em; */
    padding: 0.2em 0;
    margin: 0.2em 1.0em 0;/* Höhe Navleiste */
  }
  nav li.active a {
    /* background: #08c; */
    color: #592381; 
	font-size: 1.2em;
	text-decoration: none;
	border-bottom: solid;
}
  nav a:hover,
  nav a:focus {
    text-decoration: none;
	font-size: 1.2em;
	color: #333;
	border-bottom: solid;
	}

.navbar-brand {
    position: absolute;
  top: -32768px; /*-32768*/
  left: -32768px;
  }
} 
/* Ende @media */
		
		
/* eof */