@charset "utf-8";

/* utf8save-äöü*/


html ,body{margin:0;padding:0;height:100vh;}


body {
  background: #fff;
  color: #131314;
	font-family: sans-serif;
	padding:2%;
}


img{
box-shadow: 3px 3px 2px #888888;
border-radius:1%;margin:2%;

}

h1, main, aside, main svg {

	padding: .5em 1em;
	margin: 0;
}

h1 {
font-size:5vmin;
}

h2 {
font-size:3vmin;
}




header {
  border-color: transparent;

  
}

#logo {
 display:inline-block;
 color: transparent;
 background-image:url(../img/logo-classic.svg);
 background-size:contain;
 background-repeat:no-repeat;
 background-position:center;
 padding:2%;
filter: invert(1) hue-rotate(60deg) saturate(0.1);


}

h1::after {
  content: ' hburger';
}

article p img{max-width:400px;}




article img {
	width: 33%;
	float: right;
	margin-left: 0.2em;
}

figure {
  display: inline-block;
  width: 30%;
  margin: 0.2em;
}
figure img {
  width: 100%;
}
figure figcaption {
  font-style: italic;
  font-weight:bold;
  padding:3%;
  font-size:3vmin;
}

section {
  border-color: transparent;
}
article {
  border-color: transparent;
}
aside {
  border-color: transparent;

}

footer {
  border-color:transparent;
  border-top: 2px dotted #efefef;
}


#styleswitcher  ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;

}

#styleswitcher  li {display:inline-block;}



#styleswitcher button {
  width: 9em;
  margin-bottom: 0.2em;
}

nav a, #styleswitcher button {
  background-color: #b3d66b;
  border: 3px solid;
  padding:2%; 
  border-color: #fff;
  color:  #000;
  font-weight:bold;
    box-shadow: 3px 3px 2px #888888;
    white-space:pre;

}



nav a:hover, nav a:focus, #styleswitcher  button:hover, #styleswitcher  button:focus {
  background-color: #b3b009;

  color:  #fff;
}

nav a[aria-current=page] {
	color:#fff;
	font-weight:bold;
}
nav a[aria-current=page]:hover,nav a[aria-current=page]:focus {
	color:#c7b775;

}


li{list-style:none;}

a {
  color: teal;
  font-weight:bold;
  padding:2%;
  text-decoration:none;
  
}

/* responsives Layout */

body {
  display: flex;
  flex-flow: row wrap;
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, article, section, aside,footer {

  padding: 0.5em;

  flex: 1 100%;
}

header {
  display: flex;
  flex-flow: row wrap;
}
header * {
  flex: 1 1 0%;
}
header img {
  flex: 0 0 150px;
  margin-right: 20px;
}
header nav {
  flex: 1 1 100%;
}

footer {
  display: flex;
  flex-flow: row wrap;
}
footer * {
  flex: 1 1 0%;
  justify-content: space-between;
}
footer p:last-child {
  text-align: right;
}


nav, nav ul, nav li{
  margin: 0;
  padding: 0;
  border: none;
}
nav ul {
  display: flex;
  flex-direction: column;
}
nav li {
  list-style-type: none;
  margin: 0.5vh 0;
  padding:0;
  flex: 1 1 100%;
}
nav a {
  display: inline-block;
  margin: 0;
  width: 96%;
  padding: 0.5em 2%;
  text-decoration: none;
  text-align: center;
}


/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
  header img {
    margin-right: 50px;
  }
  nav ul {
    flex-direction: row;
  }
  nav li {
    flex: 1 1 0%;
  }
  article {
    order: 2;
  }

  #news {
    flex: 1 auto;
    order: 3;
  }

  aside {
    /* durch auto werden die beiden asides in eine Zeile gesetzt */
    flex: 1 auto;
    order: 4;
  }
  
   footer {
    order: 5;
  } 
  
  

}




/* #### Kleiner Hack um irgendwie doch, zumindest in den mobilen Devices, ein Hamburger-Menu zu erzeugen #### */

@media (orientation: portrait) {
nav{position:relative;}

nav ul{visibility:hidden;font-size:1px;margin:0;padding:0;display:block;}
nav:before{
position:absolute;
right:0;top:-8vmin;
  content:'≡';
  font-size:6vmin;
  background-color:#ebebeb;
  margin:1%;
  padding:0 2vmin;
  border-radius:8%;

}
nav:hover > ul {visibility:visible;font-size:100%;}

}
/* ############# */




/* Terminkalender */

table, th, td { 
	width: 100%;
  	border: 1px solid; 
  	border-collapse: collapse; 
  	color: #000;
}

tr:nth-child(2n+1){
background-color: #e9edd3;
}

th, td {
	padding: .5em;
	
}

th {
	background: gray;
	color: #efefef;
	font-style:bold;
}

caption {
	caption-side: bottom;
	padding-top: 2em;
	font-style: italic;
}







