@import url(fundament.css);

/*################## NAVIGATION #####################*/
html, body { font-size: 1em; font-family: Arial, Helvetica, sans-serif; line-height: 1.3; color: #808080; background: #ffffff; text-align: center; }

.cc-revoke, .cc-window { z-index: 99999999 !important; }
.cc-message { font-size: 91% !important; line-height: 1.3 !important; text-align:left; }
.cc-link { display:none; visibility:hidden; }

/*################## WRAPPER ####################*/
#wrapper { width: 100%; margin: 0 auto 80px auto; padding: 0; text-align:center; background: #fff; }
.balken { clear:both; width: 100%; height: 20px; margin:0; margin-top:10px; padding:0; background:#00a817; text-align:center; }
#wrapperbild { position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;background: url('../images-design/entwurf2.png') top center no-repeat;background-size:cover; }
* + html #wrapperbild { display:none; visibility: hidden; }
* html #wrapperbild { display:none; visibility: hidden; }


/* ###################################################################### */
/*################## HEADER MIT NAVI UND TEASER ####################*/
#header {  position:relative; width: 100%; margin: 0 auto; padding:0; text-align: center; }
#headerinhalt { position:absolute; width: 100%; max-width:985px; left:50%; margin-left:-485px; top:0; text-align:center; z-index:90; overflow:hidden; min-height:300px; }
#header .logo { position:absolute; width: 237px; height: 87px; margin:0; padding:0; left:0; top:50px; }
#header .adresse { position:absolute; width: 257px; margin:0; padding:0; font-size: 87%; color: #808080; font-weight:normal; text-align:left; top: 175px; left:36px; }
#header .adresse a {color: #808080;}
#header .adresse a:hover { color: #00a817 !important; }
#header .adresse a:active { color: #808080; }
#header .adresse a:visited { color: #808080; }
* html #header .logo { position:relative; width: 237px; height: 87px; margin:0; padding:0; left:0; top:50px; margin-left: -70%; }
* html #header .adresse { position:relative; z-index: 99999999; width: 257px; height: 100px; margin:0; padding:0; font-size: 87%; color: #808080; font-weight:normal; text-align:left; top: 185px; left:36px; }


#teaser { width: 100%; margin: 0px auto 0 auto; padding:0; background:#f5f5f5 url(../images-slideshow/hg.jpg) top left repeat-x; text-align:center; overflow:hidden; }
.fluid_container { margin: 0 auto; max-width: 985px; width: 100%; }
#teaserunten { width:100%; height:17px; background:#f5f5f5 url(../images-slideshow/teaser-unten.jpg) top left repeat-x;  }

/* ###################################################################### */
/* ##### CONTENT (NAVI UND INHALT )#### */
#content { position: relative; width: 100%;  min-height:350px; margin: 0 auto; padding:20px 0 5px 0; text-align: left; overflow:hidden; z-index:999; }
#contentinhalt {width:96%; max-width: 985px; margin:0 auto; padding:0; text-align:left; overflow:hidden; }



/* ###################################################################### */
/* ######### LINKS UND RECHTS IM CONTENTBEREICH ########## */
#inhaltlinks { float:left; width: 35%; margin:0; margin-left:2%; margin-bottom:10px; padding:0; color:#636363;  overflow: hidden; }
#inhaltrechts { float:right; width: 60%; margin:0; margin-left:3%; padding:0; padding-bottom:15px; text-align: left; }
* + html #inhaltlinks { width: 34%; }
* + html #inhaltrechts { width: 60%; }
* html #inhaltlinks { width: 34%; }
* html #inhaltrechts { width: 60%; }

#inhaltlinks .produktbild { width: 88%; margin-top: 40px;}


#inhaltlinkss { float:left; width: 35%; margin:0; margin-left:2%; margin-bottom:10px; padding:0; color:#636363;  overflow: hidden; }
#inhaltlinkss .neu { border: 1px dashed #dc1313; padding: 20px; width: calc(96% - 40px); }
#inhaltlinkss .neu h2 { margin: 0; padding:0; font-size: 120%; color:#00a817; font-weight:normal; font-style: italic; }
#inhaltlinkss .neu .produktbild { margin:20px 0 10px 0; padding:0; width:100%;}
#inhaltlinkss .neu p  { margin-bottom:0; }
#inhaltlinkss .neu p a { font-size:96%; color:#808080 !important; }


/* ###################################################################### */
/* ######### GANZE BREITE CONTENTBEREICH ########## */
#inhaltganzebreite { width: 94%; margin:0 auto; margin-top:-15px; margin-bottom:10px; padding:0; color:#636363;  overflow: hidden; }


/* ###################################################################### */
/* ######### NAVIGATION IM CONTENTBEREICH ########## */
/* bei li: float:left; width:100%;  löst das clear problem wenn höhe falsch ist */
#inhaltrechts #navi { float:left; width: 100%; margin:0 auto; margin-bottom: 30px; padding:0; color:#636363; }
#inhaltrechts #navi ul { margin:0; padding:0; text-align: left; width:93%; height:30px;}
#inhaltrechts #navi li { float:left; width:22%; height: 30px; list-style-type: none; margin:0; margin-left:0; padding:0; 
padding-left:26px;  padding-top:7px; text-align: left; color:#808080; font-size: 96%; font-weight:bold; background: url(../images-design/navi.png) top left no-repeat;  }
#inhaltrechts #navi li a { margin:0; padding:0;color:#808080; text-decoration:none;  }
#inhaltrechts #navi li.last { width: 10%; }
#inhaltrechts #navi li:hover { color:#00a817 !important; background: url(../images-design/navi-aktiv.png) top left no-repeat !important; }
#inhaltrechts #navi li a:hover { color:#00a817 !important;}
#inhaltrechts #navi li a:active { color:#808080; }
#inhaltrechts #navi li a:visited { color:#808080;  }
#inhaltrechts #navi li a:focus { background-color: transparent; }
#inhaltrechts #navi .aktiv {color:#808080 !important; background: url(../images-design/navi-aktiv.png) top left no-repeat !important;}

* html #inhaltrechts #navi li { background: url(../images-design/navi.jpg) top left no-repeat;  }
* html #inhaltrechts #navi li:hover { background: url(../images-design/navi-aktiv.jpg) top left no-repeat !important; }
* html #inhaltrechts #navi .aktiv {background: url(../images-design/navi-aktiv.jpg) top left no-repeat !important;}

/* ###################################################################### */
/* ######### FOOTER  ############################ */
#footer {  position:relative; width: 100%; margin: 0 auto; padding:10px 0 25px 0; text-align: left; overflow:hidden; z-index:999999; }
#footerinhalt { width:88%; max-width: 985px; margin:0 auto; padding:0; padding-left: 6%; padding-right: 6%; overflow:hidden; }
#footerinhalt p { font-size:81%; color:#808080; margin:0; line-height:1.5; font-weight:normal;}
#footerinhalt p a { color:#808080; }
#footerinhalt p a:hover { color:#00a817; }
#footerinhalt p.textlinks { float:left;width:50%; }
#footerinhalt p.textrechts { float:right;width:50%;text-align:right; }

/* #########  INHALTSSEITEN ############################ */
/* ### INHALT (RECHTS IM CONTENT)  ### */
#inhalt { width: 90%; margin:0; margin-left:2%; padding:0; text-align: left; }
#inhalt .einspaltig { clear:both; margin: 5px 0; padding:0; width:100%; }
#inhalt .zweispaltig { margin: 8px 0; padding:0; float:left; width: 47%; }
#inhalt .zweispaltig.marginright { margin-right:6%; }
* + html #inhalt .zweispaltig { width: 46%; }
* + html #inhalt .zweispaltig.marginright { margin-right:5%; }
* html #inhalt .zweispaltig { width: 46%; }
* html #inhalt .zweispaltig.marginright { margin-right:5%; }

#inhalt h1 { margin:0 0 0.5em 0; padding:0; font-size: 135%; color:#00a817; font-weight:bold; font-style: italic; }
#inhalt h3 { margin:0 0 0.3em 0; padding:0; font-size: 94%; color:#808080; font-weight:bold; }
#inhalt p { margin:0 0 0.5em 0; padding:0 5px 0 0; font-size: 96%; color: #808080; font-weight:normal; line-height:1.4; }
#inhalt p.kleiner { font-size:74%; }
#inhalt p.kursiv { font-style:italic; }
#inhalt p.gruen { color:#00a817;  }
#inhalt p.blocksatz { text-align:justify; }
#inhalt p a { color: #808080; }
#inhalt p a:hover { color: #00a817 !important; }
#inhalt p a:active { color: #808080; }
#inhalt p a:visited { color: #808080; }
/* listenelemente im text */
#inhalt ul { margin:0; padding:0;}
#inhalt li {  font-size: 87%; margin-left:1em; }
#inhalt ul.zahlenliste { list-style-type:decimal; margin-left:1em; }

/* ### PRODUKTSEITE ### */

#contentinhalt #inhaltganzebreite .produkte { float:left; margin:0; margin-bottom:10px; padding:0; width: 23%; padding-right: 2%; overflow:hidden; }
#contentinhalt #inhaltganzebreite p { margin:0 0 0.5em 0; padding:0 5px 0 0; font-size: 86%; color: #808080; font-weight:normal; line-height:1.3; }
#contentinhalt #inhaltganzebreite h1 { margin:0 0 0.5em 0; padding:0; font-size: 135%; color:#00a817; font-weight:bold; font-style: italic; }
#contentinhalt #inhaltganzebreite h3 { margin:0.3em 0 0.2em 0; padding:0; font-size: 94%; color:#808080; font-weight:bold; }
#contentinhalt #inhaltganzebreite .produkteclearen { display:none; visibility:hidden; }
* + html  #contentinhalt #inhaltganzebreite .produkte { padding-right:1%;}
* html  #contentinhalt #inhaltganzebreite .produkte { padding-right:1%;}

.innenzweispaltigg { margin: 8px 0; padding:0; float:left; width: 47%; }
.innenzweispaltigg.marginright { margin-right:6%; }

/* ### FORMULARE ### */
#formular { width: 100%; margin:0; padding: 0; padding-bottom:20px; overflow:hidden; }
#formular p { margin:0; padding:0; margin-top: 6px;}
#formular fieldset { margin:0; padding:0; margin-top: 4px; margin-bottom: 10px; width: 100%; border: none; }
#formular label { margin:0;padding:0; width: 30%; display: block; float: left; cursor: pointer; }
#formular input, #formular textarea { font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: normal; color: #505151; }
#formular input { margin:0;padding:0;color:#505151;border:1px solid #D0D0D0;height:21px;width:68%;line-height:21px; }
#formular select { margin:0;padding:0;color:#505151;border:1px solid #D0D0D0;width:68%;line-height:21px; }
#formular textarea { margin:0;padding:0;color:#505151;border:1px solid #D0D0D0;width:98%;height:150px; }
#formular #senden { margin:0;padding:0;background-color:#00a817;color:#fff;border:1px solid #00a817;height:26px;width:98%;font-size:80%;font-weight:bold; }
#formular input:focus, textarea:focus { background-color: #f5f5f5;  }
#formular .labelvollebreite { width: 100% !important;margin-bottom: 8px; }
#formular .fehler { border:1px solid #ff0000 !important; }
#formular label.produktangaben { width: 60%; }
#formular #innendurchmesser, #formular #aussendurchmesser, #formular #laengebreite, #formular #menge { width: 18%; font-size:84%; }

#formular .captchalinks { width:40%;float:left; }
#formular .captcharechts p { text-align:left !important;}
#formular .captcharechts { width:57%;float:left; }
#formular #code { width:140px;display:inline-block; }



/* ########################################################################*/
/*################## WEITERE ########################*/
.grau { color:#818181; }
.gruen { color:#00a817; }
.rot { color: #ff0000; }
.fett { font-weight: bold; }
.zentriert { text-align:center; }
.blocksatz { text-align: justify; }
.kleiner { font-size:94%; }
.floatleft { float:left; }
.floatright { float:right; }

span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}

/* ########################################################################*/
/* #### ausblenden / einblenden #### */
.nurmobileanzeigen { display:none; visibility:hidden; }
.adressekleiner { display:none; visibility:hidden; clear:both; margin:0 auto; padding:10px 0; font-size: 87%; color: #808080; font-weight:normal; text-align:left;  background: #f3f2f2; overflow:hidden;}
.adressekleiner p { width:90%; color:#808080; margin:0 auto; }
.adressekleiner p a { color:#808080; }
.adressekleiner p a:hover { color: #00a817 !important; }
.adressekleiner p a:active { color: #808080; }
.adressekleiner p a:visited { color: #808080; }

/* ########################################################################*/
/* ########################################################################*/

/* ########################################################################*/
/* ########################################################################*/
@media all  and (max-device-width: 985px), all and (max-width: 985px) {
#headerinhalt { width: 96%; left:54%; margin-left:-50%; }
#header .logo { top:25px; }
#header .adresse { top: 162px;  }
#footerinhalt { width:90%;  padding-left: 5%; padding-right: 5%; }
#inhalt .zweispaltig { margin: 8px 0; width: 100%; }
#inhalt .zweispaltig.marginright { margin-right:0%; }
#formular .captchalinks { width:50%;float:left; }
#formular .captcharechts { width:47%;float:left; }
#formular label.produktangaben { width: 50%; }
#formular #innendurchmesser, #formular #aussendurchmesser, #formular #laengebreite, #formular #menge { width: 18%; font-size:84%; }
.branzeigen { display:none; visibility:hidden; }
}

/* ########################################################################*/
/* ########################################################################*/
@media all  and (max-device-width: 870px), all and (max-width: 870px) {
#headerinhalt { width: 96%; left:54%; margin-left:-50%; }
#header .logo { top:25px; }
#header .adresse { top: 130px;  }
#inhaltrechts #navi li {  width:20%;  }
#inhaltrechts #navi li.last { width: 10%; }
#footerinhalt { width:90%;  padding-left: 5%; padding-right: 5%; }
#formular .captchalinks { width:52%;float:left; }
#formular .captcharechts { width:47%;float:left; }
#formular label.produktangaben { width: 60%; }
#formular #innendurchmesser, #formular #aussendurchmesser, #formular #laengebreite, #formular #menge { width: 18%; font-size:84%; }
.branzeigen { display:none; visibility:hidden; }
#inhaltganzebreite { width: 94%; margin:0 auto; }
#contentinhalt #inhaltganzebreite .produkte { width: 48%; padding-right: 2%; }
#contentinhalt #inhaltganzebreite .produkteclearen { display:block; visibility: visible; clear:both;margin:0;padding:0;width:100%;height:0px; }
}

/* ########################################################################*/
/* ########################################################################*/
@media all  and (max-device-width: 750px), all and (max-width: 750px) {
#headerinhalt { width: 96%; left:54%; margin-left:-50%; }
#header .logo { top:10px; }
#header .adresse { top: 110px;  }
.innenzweispaltigg {  width: 100%; }
.innenzweispaltigg.marginright { margin-right:0%; margin-top: 20px; }
#footerinhalt { width:90%;  padding-left: 5%; padding-right: 5%; }
#formular .captchalinks { width:60%;float:left; }
#formular .captcharechts { width:39%;float:left; }
#formular #code { width:100px; }
* html #inhaltrechts #navi ul { height: 60px; }
* + html #inhaltrechts #navi ul { height: 60px; }
* #formular label.produktangaben { width: 60%; }
#formular #innendurchmesser, #formular #aussendurchmesser, #formular #laengebreite, #formular #menge { width: 18%; font-size:84%; }
.branzeigen { display:none; visibility:hidden; }

#inhaltrechts { width:96% !Important;}
#inhaltlinkss { width:96%; }
}
/* ########################################################################*/
/* ########################################################################*/
@media all  and (max-device-width: 640px), all and (max-width: 640px) {
#headerinhalt { width: 96%; left:54%; margin-left:-50%; }
#header .logo { top:10px; }
#header .adresse { top: 105px;  }
#footerinhalt { width:90%;  padding-left: 5%; padding-right: 5%; }
#formular .captchalinks { width:100%;float:left; }
#formular .captcharechts { margin-top: 5px; width:100%;float:left; }
#formular #code { width:140px; }
#formular label.produktangaben { width: 60%; }
#formular #innendurchmesser, #formular #aussendurchmesser, #formular #laengebreite, #formular #menge { width: 18%; font-size:84%; }
.branzeigen { display:none; visibility:hidden; }
}

/* ########################################################################*/
/* ########################################################################*/
@media all and (min-device-width: 400px) and (max-device-width: 640px), all and (min-width: 400px) and (max-width: 640px) {
#headerinhalt { width: 96%; left:54%; margin-left:-50%; }
#header .logo { top:10px; }
#header .adresse { display:none; visibility: hidden; }
.adressekleiner { display:block; visibility:visible;}
.adressekleiner p { width: 90%; }
#inhaltrechts #navi ul {width:98%; }
* html #inhaltrechts #navi ul { height: 60px; }
* + html #inhaltrechts #navi ul { height: 60px; }
#inhaltrechts #navi li {  width:40%; margin-bottom:10px; }
#inhaltrechts #navi li.last { width: 35%; }
#footerinhalt { width:90%;  padding-left: 5%; padding-right: 5%; }
#formular label.produktangaben { width: 60%; }
#formular #innendurchmesser, #formular #aussendurchmesser, #formular #laengebreite, #formular #menge { width: 18%; font-size:84%; }
.branzeigen { display:none; visibility:hidden; }
#inhaltganzebreite { width: 94%; margin:0 auto; }
#contentinhalt #inhaltganzebreite .produkte { width: 48%; padding-right: 2%; }
#contentinhalt #inhaltganzebreite .produkteclearen { display:block; visibility: visible; clear:both;margin:0;padding:0;width:100%;height:0px; }

}

/* ########################################################################*/
/* ########################################################################*/
@media all and (max-device-width: 485px), all and (max-width: 485px) {
#headerinhalt { width: 96%; left:54%; margin-left:-50%; }
#header .logo { top:5px; }
#header .adresse { display:none; visibility: hidden; }
.adressekleiner { display:block; visibility:visible;}
.adressekleiner p { width: 90%; }
#inhaltrechts { width:96%;}
#inhaltlinks { width:96%; }
* + html #inhaltlinks { width: 96%; }
* + html #inhaltrechts { width: 96%; }
* html #inhaltlinks { width: 96%; }
* html #inhaltrechts { width: 96%; }
#inhaltrechts #navi ul {width:98%; margin-left:5px; }
* html #inhaltrechts #navi ul { height: 80px; }
* + html #inhaltrechts #navi ul { height: 80px; }
#inhaltrechts #navi li {  width:40%;  margin-bottom:10px;  }
#inhaltrechts #navi li.last { width: 35%; }
#footerinhalt { width:90%;  padding-left: 1%; padding-right: 1%; }
#formular label.produktangaben { width: 60%; }
#formular #innendurchmesser, #formular #aussendurchmesser, #formular #laengebreite, #formular #menge { width: 18%; font-size:84%; }
.branzeigen { display:none; visibility:hidden; }
#inhaltganzebreite { width: 90%; margin:0 auto; }
#contentinhalt #inhaltganzebreite .produkte { clear:both; display:block; margin:0 auto; width: 100%; padding-right: 0%; }

#footerinhalt p.textlinks { float:left;width:100%; }
#footerinhalt p.textrechts { float:right;width:100%;text-align:right; }

.nurmobileanzeigen { visibility:visible; display:inline-block;}
.nichtmobileanzeigen { display:none; visibility:hidden; }
}

/* ########################################################################*/
/* ########################################################################*/
@media all and (max-device-width: 290px), all and (max-width: 290px) {
#headerinhalt { width: 96%; left:54%; margin-left:-50%; }
#header .logo { top:3px; }
#header .adresse { display:none; visibility: hidden; }
.adressekleiner { display:block; visibility:visible;}
#inhaltrechts { width:96%; }
#inhaltlinks { width:96%; }
* + html #inhaltlinks { width: 96%; }
* + html #inhaltrechts { width: 96%; }
* html #inhaltlinks { width: 96%; }
* html #inhaltrechts { width: 96%; }
#inhaltrechts #navi ul { margin-left:10px; width:92%; }
* html #inhaltrechts #navi ul { height: 180px; }
* + html #inhaltrechts #navi ul { height: 180px; }
#inhaltrechts #navi li {  width:80%;  margin-bottom:10px;  }
#inhaltrechts #navi li.last { width: 80%; }
#footerinhalt { width:90%;  padding-left: 1%; padding-right: 1%; }
#formular #code { width:90%; }
#formular label.produktangaben { width: 100%; }
#formular #innendurchmesser, #formular #aussendurchmesser, #formular #laengebreite, #formular #menge { width: 18%; font-size:84%; }
.branzeigen { display:none; visibility:hidden; }
#inhaltganzebreite { width: 90%; margin:0 auto; margin-top:0px; }
#contentinhalt #inhaltganzebreite .produkte { clear:both; display:block; margin:0 auto; width: 100%; padding-right: 0%; }

.nurmobileanzeigen { visibility:visible; display:inline-block;}
.nichtmobileanzeigen { display:none; visibility:hidden; }
}


/* ########################################################################*/
/* ########################################################################*/
@media print {
#inhaltrechts #navi ul, #footerinhalt p.textrechts { display:none; visibility:hidden; }
#wrapper { width: 100%; min-width:0px; margin: 0 auto; padding: 0; text-align:center; background: #fff; }
#inhaltlinks { width: 30%; margin-bottom: 0px; }
#inhaltrechts #navi { margin-bottom: 0px; }
#inhalt { width: 96%;}
#balken { margin-top: 0;}
#headerinhalt { width: 96%; left:54%; margin-left:-50%; }
#footer { padding:5px 0 5px 0; }
#footerinhalt { width:92%; padding-left: 3%; padding-right: 3%; }
}