/*
FARBEN
hellgrau #f1f1e7;
schlammgrau #7B7B5B;
Menüpunkte-grau #838570;
gelb #Fff500;
mittelblau #46A3BF;
blau #39819A; 
knallig-linkblau #2790B3;
tiefrot #C9350A;
mittelschlammgrau #D1D1B2;
jagdgrün #3D741D;
hellgrün #8EB711;
hellbronze #B38C39;
blassblau (Hintergrund) #E0EBF0;
*/

/** CSS allgemein **/

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
    font-family:Arial,sans-serif;
    font-size:1.0em;
    color:#000;
    /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
}

body {
    background: #efefef;
    margin: 0px;
}
#container {
  max-width: 1100px;
    padding: 2.083333333333333%;
    margin: 0 auto;
    background: #fff;
}

/** CSS Navi
header {
	width:100%;
	float:left;
	background: #fff;
    padding-bottom: 0.5em;
	box-shadow: 0 0 5px rgba(0,0,0,0.2); **/
}
header {
	width:95.83333333333334%;
    height: auto;
    padding: 5.208333333333334% 2.083333333333333% ;
}

/** .menu {
    width:70%;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    position: fixed;
    z-index:1;**/
    
}
.lgoimg {
	width: 30%; 
    height: auto;
    float:left;
}

nav {
	width:100%;
	float:left;
	background:#fff;
	height:0;
	overflow:hidden;
	transition:height .2s ease-in-out;
    list-style:none;
}

nav li {
	float:left;
	width:100%;
    list-style:none;
}

nav a {
	display:block;
	height:100%;
	width:100%;
	padding:1.2em;
	text-decoration:none;
	color:#666;
    font-weight: bold;
}

nav a:hover {
	background:rgba(0,0,0,0.2);
}

.nav-toggle {
	background:rgba(0,0,0,0.2);
	display:block;
	position:absolute;
	right:0;
	top:0;
	padding:1em;
	color:black;
	cursor:pointer;
	text-decoration:none;
}

.nav-toggle:hover {
	background:rgba(0,0,0,0.4);
}

#nav-open:target .nav-closed {
	display:block;
}

.nav-closed,
#navi-closed:target .nav-closed,
#nav-open:target .nav-open {
	display:none;
}

@media screen and (max-width: 799px) {
	#nav-open:target nav {
		height:410px;
	}
}

@media screen and (min-width:1100px) {
	
	.nav-toggle {display:none !important;}

	
	.logo {
		width:auto;
		float:left;	
	}
	
	nav {
		float:right;
		width:auto;
		display:block !important;
		height:auto;
	}
	
	nav li {
		width:auto;
		padding:0;	
	}
}

/** CSS content **/

article {
    width: 65.5%;
    float: left;
    background: #fff;
    padding-left: 2.8em;
    padding-bottom: 2.8em;
}

section {
    float: left;
    padding-left: 1.0em;     
}

ul{
    list-style-type:square;padding:0;margin:0}.ul li{padding:20px 16px;
}
aside {
    width: 27.08333333333332%;
    padding:2.083333333333333%;
    margin: 7.291666666666667% 0 2.083333333333333 4.166666666666666;
    float: right;
    background: #fff;
}
hr { 
  display: block;
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  margin-left: 2.9em;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
} 
hr.side{
margin-right: auto;
    margin-left: auto;
    margin-top: 2.5em;
  border-style: inset;
  border-width: 1px;
}

/* ===== Footer ===== */
footer {
    width: 95.83333333333334;
    padding: 3.125% 2.083333333333333;
    clear: both;
    font-weight: normal;
    display: flex;
    background: #000;
    align-items: center; 
    justify-content: center; text-align: center; 
    
}

#contact {
   color: #fff;
  text-align: center; 
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}	
#copyright {
	float: right;
    font-size: 90%;
    font-weight: normal;
}
#copyrightl {
	float: left;
    font-size: 90%;
    padding-top: 0.8em;
    font-weight: normal;
}
/** #centered {
  border:1px solid silver;
  padding:20px;
  position:absolute;
  width:300px;
  top:20px;
  left:50%;
  margin-left: -170px;  // Breite des Elemtens + Padding
}**/
/** .Absolute-Center {
  display: flex;
  align-items: center; // does vertically center the desired content
  justify-content: center; // horizontally centers single line items
  text-align: center; 
}  
#social li {
	margin: 0 20px 0 0;
	display:inline-block;
}**/
	



/** CSS fonts **/
    h1 {
    color:#000;
    font-weight: bold;
    font-size: 1.5em; 
    font-family: Arial, sans-serif; 
    margin-top: 1.0em;
    margin-bottom: 1.0em;
}

h5 {  
    font-size: 1.0em;
    font-weight:bold;
    text-align:left;
    margin-top: 1.0em;
    margin-bottom: 1.0em;
} 
p {  
    line-height: 1.5em;
} 
.bold {  
    line-height: 1.5em; font-weight: bold;
} 
.bu {  
    line-height: 1.2em; font-style: italic; font-size: 90%;
} 
a {
   color:mediumblue; font-weight: normal;
}
a:hover {
   color:green;
}
a:active {
   color:yellowgreen; 
}
a.typegreen {
  color:green;
  text-decoration: none;
  border-bottom: .1em dotted green;
  float: right;
  line-height: 1.5em;
}
a.typegreenl {
  color:green;
  text-decoration: none;
  border-bottom: .1em dotted green;
  float: left;
  line-height: 1.5em;
}
a.typegreen:hover {
  color:yellowgreen;
  text-decoration: none;
  border-bottom: .1em dotted green;
  float: right;
  line-height: 1.5em;
}

a.typewhite {
    color:#fff;
  text-decoration: none; 
    font-size: 0.9em;
}
a.typewhite:hover {
   color:yellow; 
}
a.typewhite:active {
   color:yellowgreen;
   
}
/** CSS Bilder **/
img {
  width: 30%; 
  height: auto;
    padding-top: 0.5em;
}

/** CSS Tabelle **/
table { 
  width: 100%; 
  border-collapse: collapse;
    float: center;
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
@media screen and (max-width:375px) {
    table {width:50%; padding:0.0;}
    .logo {width:50%; padding:0;}   
}
/** .tab {border:1px solid #ccc!important; padding: 0.8em; font-size: 1.0em; line-height: 1.5em;} **/ 

/** CSS media queries**/

@media screen and (max-width:375px) {
   body {margin: 5px; background: yellow;}
    table {width:50%; padding:0.0;}
    .logo {width:50%; padding:0;}   
}
@media screen and (max-width:600px) {
    body {margin: 10px; background: green;}
    article, aside {width:100%; padding:0.2;}
    .logo {width:70%; padding:0;}
}
@media screen and (max-width:960px) {
    body {background: blue;}
    #container {max-width:960px;}
    .logo {width:70%; padding:0;}

@media screen and (min-width:1100px) {
    body {background: red;}
    #container {max-width:1100px;}
    .logo {width:100%; padding:0;}
}