@charset "utf-8";
/* CSS Document */

	@import "schrift.css";
	@import "lightbox.css";
	
* {
	box-sizing: border-box;
}	
/* Checkox verstecken */
input[type=checkbox],
label.responsive-nav-label {
  	display: none;
}
/*Seitengestaltung*/
html	{
	height: 100%;
	background: #333;
}
/*setzt alles in die Mitte*/
body	{
	margin: 0 auto;
	margin-top: 0.31em;
	padding: 5px;
	max-width: 1200px;
	background: #444;
	border: #999 solid 2px;
	border-radius: 8px;
	display: grid;
	grid-template-rows: 167px 25px 25px 25px 25px auto auto auto; /*zeilen 8*/
	grid-template-columns: auto 195px 25px; /*spalten 3*/
	grid-gap: 5px 10px; /*abstand zwischen den zeilen spalten*/	
}
header { 
  	grid-column: 1 / 4; 
  	grid-row: 1 / 6;
	background: url(../bilder/banner.jpg) no-repeat #444;
}
#brotcrume {
	grid-column: 1 / 4; 
  	grid-row: 5 / 6;
  	position: sticky;
   top: 10px;
	background: #8a5;
	z-index: 999;
}
#icon1 {
	grid-column: 3 / 4; 
  	grid-row: 2 / 3;
	position: sticky;
	top: 10px;
	z-index: 999;
}
#icon2 {
	grid-column: 3 / 4;
  	grid-row: 3 / 4;
  	position: sticky;
   top: 40px;
   z-index: 999;
}
#icon3 {
	grid-column: 3 / 4;
  	grid-row: 4 / 5;
  	position: sticky;
   top: 70px;
   z-index: 999;
}
#icon4 {
	grid-column: 3 / 4;
  	grid-row: 5 / 6;
  	position: sticky;
   top: 100px;
   z-index: 999;
}
section {
	grid-column: 1 / 2; 
  	grid-row: 6 / 7;	
}
aside {
	grid-column: 2 / 4; 
  	grid-row: 6 / 7;
	margin: 0 auto; 
}
article {
	grid-column: 1 / 4; 
  	grid-row: 7 / 8;
}
#ausgrauen {
  	background-color: rgba(200, 200, 200, 0.8);
  	z-index: 2;
}
footer {
	grid-column: 1 / 4; 
  	grid-row: 8 / 9;
	border-top: 2px solid #8a5;
}
/*Extras*/
video {
	max-width: 75%;
}
/* Ausrichtung für Bilder und anderes */
	/*für das Diagramm*/
.bild_mitte {
	float: none;
	display: flex; 
   justify-content: center; 
   align-items: center;
}
.bild_rechts {
	float: right;
	padding: 0.31em;
}
.mitte {
display: block;
text-align: center;
margin: 0 auto;
}
/*kasten fuer die news*/
.kasten {
	width: 200px;
	padding: 8px;
	margin: 1.75em 0 0 0;
	background: #555;
	border: #999 dotted 1px;
	border-radius: 5px;
}
img { max-width: 100%; height: auto; }
#table_bilder td { vertical-align: bottom; padding: 0.32em; }

/*Haupt Navigation*/
nav {
  	float: left;
  	width: 100%;
  	background: transparent;
  	position: relative;
  	margin-top: 0;
  	border-top: #8a5 solid 6px; 
}
nav ul {
  	margin: 0;
  	padding: 0;
}
nav a {
  	display: block;
  	color: #fff;
  	text-decoration: none;
  	border-bottom: 0;
}
nav ul li {
 	position: relative;
  	float: left;
  	list-style: none;
  	color: #fff;
  	transition: 0.3s;
}
nav ul li a {
	background: #444;
	text-transform : uppercase;
	font-weight : bold;
	font-size : 1em !important ;
  	padding: 0.62em;
  	margin-left: 0.62em;
  	border : #999 solid 0.12em;
  	border-top: 0;
}
nav ul li a:hover, nav ul li a#selected  {
  	background: #8a5;
  	border-top: 0;
  	color: #fff;
}


/* ########################################################### */
/*so hier alles für die mobile ansicht*/
@media screen and (max-width: 639px) {
body	{
	grid-template-rows: 167px 25px 25px 25px 25px auto auto auto auto; /*zeilen 8*/
	grid-template-columns: auto 25px; /*spalten 3*/
	grid-gap: 5px 10px; /*abstand zwischen den zeilen spalten*/	
}	
header { grid-column: 1 / 3; grid-row: 1 / 6; }
#brotcrume { grid-column: 1 / 3; grid-row: 5 / 6; }
#icon1 { grid-column: 2 / 3; grid-row: 2 / 3; }
#icon2 { grid-column: 2 / 3; grid-row: 3 / 4; }
#icon3 { grid-column: 2 / 3; grid-row: 4 / 5; }
#icon4 { grid-column: 2 / 3; grid-row: 5 / 6; }
section { grid-column: 1 / 3; grid-row: 6 / 7; }
aside { grid-column: 1 / 3; grid-row: 7 / 8; }
article { grid-column: 1 / 3; grid-row: 8 / 9; }
footer { grid-column: 1 / 3; grid-row: 9 / 10; }
/*Haupt Navigation*/
/* http://www.it-zeugs.de/das-eigene-responsive-menu-ohne-javascript.html */
/* Checkox verstecken */	
input[type=checkbox]	{
	display: none;
}
input[type=checkbox]:checked ~ nav {
	display: block;
	position: absolute;
}
label.responsive-nav-label {
	cursor: pointer;
	display: block;
	height: 1.8em;
	width: 2em;
	padding: 0.31em;
	position: relative;
	background: #444;
	color: #fff;
}
/*Haupt Navigation*/
nav {
	width: 50%;
	position: absolute;
	margin-left: 2em;
  	margin-top: -1.8em;
  	display: none;
  	border-top: none !important; 
}
nav a:after {
  	display: none;
}
nav ul li {
  	float: none !important;
  	width: 100% !important;
  	border-bottom: none !important;
  	border: #999 solid 0.12em; 
  	
}  
nav ul li a {
	background: #444;
	padding: 0.31em 0.62em !important;
	margin-left: 0;
  	margin-bottom: 0.31em !important;	 
 	border-bottom: 0;
}
nav li a:hover {
  	background: none;
	border-bottom: 0;  
 	background: #8a5; 
}
/*Ende Haupt Navigation*/  
/* verhindert das Bilder über die Mobile Ansicht gehen */
img, video {
    max-width: 100%;
    height: auto;
}

}