body {background-color: #AAAAAA; margin: 0; padding: 0;}
p, body { font-size: 1.0em; font-family: Verdana, Tahoma, Arial; color:#000000; }
h1 {font-size: 1.6em; }
h2 {font-size: 1.1em; color:#da1f16; }
h3 {font-size: 1.0em; color:#da1f16; }
h4 {font-size: 1.0em; color:#da1f16; }
h5 {font-size: 1.0em; color:#da1f16; }
h6 {font-size: 1.0em; color:#da1f16; }
a {text-decoration: none; color: #888; }

.wrap { width:100%; min-width: 300px; margin:0 auto; background-color:#EEEEEE; }
header { width:100%; margin:0 auto; background-color: #EEEE; text-align:center; }
header img { width: 100%; max-width: 600px; padding: 3px; }

/* Navigation */
nav { 
	width:100%; background: #0066FF;
	background: linear-gradient(bottom, #0066FF 20%, #2222FF 100%);
	background: -moz-linear-gradient(bottom, #0066FF 20%, #2222FF 100%);
	background: -webkit-linear-gradient(bottom, #0066FF 20%,#2222FF 100%);
	box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
	overflow: hidden;
}
 
nav ul { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
nav ul li { display: inline-block; text-align: left; margin: 0 0.1em; }
nav ul li a { display: block; padding: 0.8em 0.6em; text-decoration: none; color: #bbb; }
nav ul li a:hover { background: #06F; color: #bbb; }

/* Label und Checkbox ausblenden*/
nav > input, nav > label { display: none; }
nav > label {
	width: 100%;
	float: left;
	padding: 10px 10px 10px 30px;
	padding-right: 0;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
nav ul li a:link { color: #BBBBBB;  text-decoration: none; }
nav ul li a:visited { color: #BBBBBB; text-decoration: none; }
nav ul li a:hover { color: #BBBBBB; text-decoration: none; }
nav ul li a:active { color: #BBBBBB; text-decoration: none; }

.aktiv {
    padding: 0.8em 0.6em; 
    color: #bbb; 
    background: linear-gradient(bottom, #2222FF 0%, #0066FF 80%);
    background: -moz-linear-gradient(bottom, #2222FF 0%, #0066FF 80%);
    background: -webkit-linear-gradient(bottom, #2222FF 0%,#0066FF 80%);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
}

/* Hauptbereich */
main {width:90%; margin:0 auto; background-color: #EEEEEE; }

/* Bildbeschriftung */
figcaption {font-size: 0.9em; color:#0066FF; text-align: center; }

/* Hauptteil auf Seite Home */
.home-bild {width:90%; margin: 0 auto 50px auto; }


/* Hauptteil auf Seite Ueber uns */
.ueberuns {
  width: 90%;
  minwidth: 250px;
  maxwidth: 800px;
  background-color: #EEEEEE;
  margin: 1.8em auto; 
}

.ueberuns1 td {padding: 2em; vertical-align: top; }
.ueberuns1 tr:nth-child(odd) {background-color:#E8E8E8; }
.ueberuns1 tr:nth-child(even) {background-color:#E0E0E0; }


/* Hauptteil auf Seite Produkte */
.produkte {width: 40%; min-width: 270px; float:left; background-color: #EEEEEE; margin: 1.0em 1.0em 1.0em 2.0em; }
.produkte h2 {margin: 2.0em 1.0em 1.0em 1.0em; }
.produkte ul {margin: 0.0em 1.0em 1.0em 1.0em; }
.produkte-bild {width:70%;margin: 0 auto 25px auto; }


/* Hauptteil auf Seite Leistungen */
.leistungen {width: 90%; min-width: 270px; background-color: #EEEEEE; margin: 1.0em 1.0em 1.0em 2.0em;}
.leistungen h2 {margin: 2.0em 1.0em 1.0em 1.0em; }
.leistungen ul {margin: 0.0em 1.0em 1.0em 1.0em; }
.leistungen-bild {width:70%;margin: 0 auto; }
/* ENDE Leistungen */


/* Hauptteil auf Seite Kontakt */
.kontakt-bild {width:70%; margin: 0 auto; }
.kontakt-anfahrt {width:100%; margin: 0 auto; }
/* ENDE Kontakt */


/* FOOTER */
footer {width:100%; ,margin:0 auto; background-color: #EEEEEE; text-align:center; }
footer img { width: 98%; padding: 3px; }
/* ENDE Footer */


/* ALLGEMEIN */
.clear {clear: both; }


/* MEDIA QUERIES */

@media  all  and (min-width: 600px) {
  header img { width:90% ; }
}


@media all and (max-width: 600px) {
.ueberuns {width: 100%; margin: 0.8em auto; }
.ueberuns1 td {padding: 0.5em; }
.produkte-bild {width:90%;margin: 0 auto 25px auto; }

}

@media all and (max-width: 800px) {
  nav > label, nav ul li ul { display: block; color: #bbb; font-weight: bold; }
  nav > label {
    background: linear-gradient(bottom, #0066FF 20%, #2222FF 100%);
    background: -moz-linear-gradient(bottom, #0066FF 20%, #2222FF 100%);
    background: -webkit-linear-gradient(bottom, #0066FF 20%,#2222FF 100%);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
    border-bottom: 1px solid #999;
  }
  nav > ul {
    height: 0;
    opacity: 0;
    clear: both;
    -webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    transition:all .5s ease;
  }
  nav > input:checked + ul { opacity: 1; height: auto; }
  nav ul li {padding: 0; margin: 0; display: block; }
  nav ul li a {
    background: #3333FF;
    background: linear-gradient(bottom, #0066FF 20%, #2222FF 100%);
    background: -moz-linear-gradient(bottom, #0066FF 20%, #2222FF 100%);
    background: -webkit-linear-gradient(bottom, #0066FF 20%,#2222FF 100%);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
    padding: 15px 15px 15px 30px;
    border-bottom: 1px solid #999;
  }

  .wrap {width:100%; }

  /* Hauptbereich */
  main {width:100%; }

.kontakt-anfahrt figure {width: 98%; margin: 0 auto; }

}

@media  all  and (min-width: 900px) {
.wrap {width:90%; max-width:850px; } 
}