@import url("normalizer.css");

/* Colors:

Fonts, grey: 		#646464;
Hintergruende grey:	#ececed;
Blatt-Gruen:		#45a12a;

*/
@media all {
html {background-color: #ececec;}
body {background: url(../images/bg-x.png) repeat-x; background-color: #ececec; color: #646464; font-family: Verdana, Geneva, sans-serif; font-size: 0.83em; line-height: 1.4em;}

  
#redim-cookiehint {background-color: #45a12a;  }
#redim-cookiehint .cookiecontent {line-height: 24px; color: #FFF;}
#redim-cookiehint .cookiebuttons .btn {color: #000; background-color: #FFF; border: none!important; text-decoration: none;}  
  
.spacer {float: none; clear:both;}

a:link , a:visited {color: #646464;}
.mobile-only , .smartphone-only , .mapprint , .article-info-term {display: none;}	

header {margin: auto auto;} 
#headerwrap {width: 1024px;margin: auto auto;  }
#header-inner {width: 1024px; background: url(../images/bg-upper.png) center no-repeat; height: 210px; margin-left: -2px; }

#logo {margin: 0 0 0 -13px;}

section {margin: auto auto; line-height: 18px;} 
#section-inner {width: 1024px; margin: auto auto;}
#section-wrapper {float: left; background-color: #FFF; min-height: 400px; margin-left: 11px;}


#leftside  {float: left;margin: 0 0 0 0px; width: 240px;}
	
#contentframe {float: left; width: 762px; background-color: #FFF; min-height: 400px; padding-bottom: 20px }

#path {float: left; margin: 7px 0 0 -15px; font-size: 11px;}
#path li {float: left; list-style: none; padding: 0 0 0 3px;}

#inhalt {clear: both; float: left; overflow-x: hidden; padding: 0 20px;  width: 720px;}
#inhalt table {font-size: 12px;}
#inhalt li {list-style: none; background:url(../images/listi-blatt.png) top left no-repeat; padding-left: 25px; padding-bottom: 7px;}
#inhalt ul {margin: 15px 0 15px 0;}
#inhalt p {margin-bottom: 0;} .contact p {margin-bottom: 0px!important;}

footer {margin: auto;}
#footer-inner {width: 1024px; margin: 20px auto;}
#footer1 {float: left; background-color: #FFF; width: 1000px; margin-left: 11px; }
#footer1 img {margin: 0 10px;}

#footer1 .moduletable {padding: 10px 20px;}
footer a:link, footer a:visited {color: #646464; text-decoration: none;}
#fshad {background:url(../images/bg-footer-shadow.png) bottom center no-repeat; width: 1000px; height: 21px; margin-bottom: 100px; float: left;}

#leftitems {clear: both;float: left; width: 260px; margin: 0 0 0 -20px;}
.moduletable-leftboxgreen { background:url(../images/ecke-greenbox.png) top left no-repeat; padding: 17px 0px 0px 0px; }
.moduletable-leftboxgreen a {color: #FFF;}
.moduletable-leftboxgreen .greenbox {background-color: #45a12a; color: #FFF; padding: 10px 10px 10px 40px; }
.moduletable-leftboxgreen .greenbox img {max-width: 150px!important; height: auto!important; box-shadow: -5px 5px 6px #666; border: 1px solid #666; transform: rotate(3deg) scale(1) skew(1deg) translate(0px);}

.moduletable-rightboxgreen { background:url(../images/ecke-greenbox-r.png) top right no-repeat; padding: 17px 0px 0px 0px; position: absolute; width: 375px;margin-top: 5px;}
.moduletable-rightboxgreen a {color: #FFF;}
.moduletable-rightboxgreen .greenbox {background-color: #45a12a; color: #FFF; padding: 10px 10px 10px 10px;
}

#topmenu {position: absolute; margin: 0 0 0 700px;}
#topmenu ul {width: 300px;}
#topmenu li {float: left; list-style: none; }
#topmenu a {text-decoration: none; padding: 0 20px; height: 14px; font-size: 11px; border-left: 1px solid #999;}
#topmenu li.item-550 a {border: none;}


/* Horiz. Navigationamenu */
#navi-h {margin: 23px 0 0 10px; padding: 0; border: none;}
#navi-h ul.menu {margin: 0; padding: 0; float: left;}
#navi-h li {padding: 0 20px; float: left; list-style: none; display: block; background:url(../images/menuline-mainmenu.png) top left no-repeat; height: 18px;}
#navi-h li.item-435 {background-image: none;}
#navi-h a:link, #navi-h a:visited {font-size: 12px;display: block;	height: 25px;float: left; font-weight: bold;color: #FFF;text-decoration: none;} 
#navi-h nav a:hover {color: #000;}



#navi-v {clear: both; float: left; width: 240px;min-height: 200px;}
	
#navi-v ul , #navi-v dl.level1 {margin: 0 0 0 20px; padding: 7px 15px; background-color: #ececed;}
#navi-v dl.level2 		 {background-color: #e5e5e5; }
#navi-v dl.level2 .inner { background:url(../images/arrrow.png) 175px 9px no-repeat!important; }
#navi-v dl.level3 		 {background-color: #e0e0e0; }
#navi-v dl.level3 .inner {background:url(../images/arrrow.png) 155px 11px no-repeat!important; }
#navi-v dl.level4 		 {background-color: #dadada; }
#navi-v dl.level4 .inner {background:url(../images/arrrow.png) 135px 11px no-repeat!important; }

#navi-v li , #navi-v dt.level1 {position: relative;padding: 0;list-style: none; display: block;text-align: right!important; background:url(../images/menuline-sidemenu.png) bottom no-repeat;}

#navi-v a:link, #navi-v a:visited {position: relative;text-decoration: none;color: #45a12a; /* gruen */display: block;padding: 3px 0 6px 0;} 
#navi-v ul ul {padding: 0; margin: 0;}
#navi-v ul ul li {padding: 0 0 0 0;font-size:11px!important; background:url(../images/arrrow.png) 180px 7px no-repeat;}
#navi-v ul ul ul li {padding: 0 0 0 0;font-size:11px!important; background:url(../images/arrrow.png) 165px 7px no-repeat;}
#navi-v ul ul ul ul li {padding: 0 0 0 0;font-size:11px!important; background:url(../images/arrrow.png) 150px 7px no-repeat;}
#navi-v ul ul li a {  margin: 0 15px 0 0;}
#navi-v ul ul ul li a {  margin: 0 30px 0 0;}
#navi-v ul ul ul ul li a {  margin: 0 45px 0 0;}

/*Active Menulink Management navi-v */
#navi-v li.current.active a  			{color: #646464!important} /*Aktiv 1*/
#navi-v li.active.parent li.current.active a  			{color: #646464!important} /*Aktiv 1*/
#navi-v li.current.active li a 			{color: #45a12a!important;}

#navi-v a:hover  {color:#000!important;}

h1 , h2 {background-color: #ececed; padding: 5px 10px; margin: 15px 0 15px 0; font-size: 16px; font-weight: normal; width: 700px;}

.img-intro-right {float: left; margin: 5px 10px 5px 0px;}
.img-intro-right img {max-width: 300px;}

.pull-left {float: right; margin: 5px 0 15px 15px;}
.pull-left img {width: 300px;}


/* 2-spaltige Uebersichtsseiten */
.item.column-1 h2 , .item.column-2 h2 {margin: 5px 0 10px 0; padding: 0; width: auto; font-size: 13px; font-weight: 600; padding-left: 15px; background:url(../images/arrrow-right.png) 0px 4px no-repeat;  }
.item.column-1 , .item.column-2 {width: 350px; min-height: 300px!important; float: left; margin: 10px 20px 10px 0; background-color: #ececed; }
.item.column-2 {margin-right: 0;}
.item-inner {margin: 10px;}

.blog-small-container .item.column-1 , .blog-small-container .item.column-2 {min-height: 180px!important;}

.blog-aktuelles .img-intro-left {float: left; margin: 5px 10px 5px 0px;}
.blog-aktuelles .img-intro-left img {width: 200px; margin-bottom: 30px;}
.blog-aktuelles .item { padding: 10px;}
.blog-aktuelles .item.column-1 , .blog-aktuelles .item.column-2 {width: 440px; min-height: 235px; float: left; margin: 10px 20px 10px 0; background-color: #ececed; }
.blog-aktuelles .item.column-1 {clear: both;}
.blog-aktuelles .create {position: absolute; margin: -22px 0 0 0; font-size: 11px;}
.item-page-aktuelles .create {margin: -18px 0 0 0px; font-size: 11px;  float: right;}
.blog-aktuelles .item h2 {margin-bottom: 26px;}


.blog-ref strong {font-weight: normal!important;}
.blog-ref .img-intro-left {margin: 0 5px 0px 0px;  max-height:110px; overflow: hidden; float: left;}
.blog-ref .img-intro-left img {width: 170px;}
.blog-ref .introtext {float: left; width: 150px; }
.blog-ref .introtext p {margin: 0; }

.item-page-ref .img-fulltext-right {float: left; margin: 0 0 20px 0;}
.item-page-ref .img-fulltext-right img {width: 720px;}

table td {font-size: 12px;}

table.infobox {  color: #FFF;}
table.infobox td {padding: 20px; background-color: #45a12a;}
table.infobox img {position: absolute; margin: -40px 0 0 670px;}

.gruen {background-color: #45a12a; color: #fff;}

table.formate {min-width: 310px;}
table.formate tr {padding: 5px;}
table.formate td {border: 1px solid #CCC; text-align: center; font-weight: 11px; padding: 3px 5px;}

table.uebersicht {width: 740px; margin: -10px 0 0 -10px;}
table.uebersicht td {background-color: #ececed; border: 10px solid #FFF; padding: 10px; vertical-align: top;}
table.uebersicht img {margin: 0 10px 10px 0;}
table.uebersicht strong {padding-left: 15px; background:url(../images/arrrow-right.png) 0px 2px no-repeat;}

a.weiter {padding: 0 0 0 25px; margin-top: 5px; background: url(../images/bg-readmore.png) 0 4px no-repeat;}
.greenbox a.weiter {padding: 0 0 0 25px; margin-top: 5px; background: url(../images/bg-readmore-white.png) 0 3px no-repeat;}

table.meilensteine td {background-color: #ececed; border: 5px solid #FFF; padding: 10px; vertical-align: top;}
table.meilensteine strong {font-size: 14px;}

table.download  {width: 730px; margin: -10px 0 0 -5px;}
table.download td {background-color: #ececed; border: 5px solid #FFF; padding: 10px; vertical-align: top; width: 33.33333%;}

table.verlegemuster td {border: 5px solid #FFF; padding: 10px; vertical-align: top; font-size: 11px; }

table.verlegemuster2 {width: 730px; margin-left: -5px;}
table.verlegemuster2 td {background-color: #ececed; border: 5px solid #FFF; padding: 10px; vertical-align: top; text-align: center; }

table.referenzen {width: 40px; margin: -10px 0 0 -10px;}
table.referenzen td {background-color: #ececed; border: 5px solid #FFF; padding: 10px; vertical-align: top; font-size: 14px; text-align: center;}
table.referenzen td img {margin-top: 10px;}

.blog-ref .item.column-1 , .blog-ref .item.column-2 { min-height: 220px!important;}

p.readmore {clear: both; float: right;text-align: right; margin:3px 0;}
p.readmore a {padding: 0 0 0 25px; background: url(../images/bg-readmore.png) 0 3px no-repeat;}

.rsform-block {margin: 0!important; padding: 0;}

#startpix {width: 608px; height: 430px; float:left; margin: 0 0 0 20px;}
#startpix a {color: #FFF; text-decoration: none;}

#starttext {width: 330px; float: left; padding: 0; clear: none; margin: 0 0 0 20px;}

.tab-content {margin-top: -15px;}


/* Verlegemuster */
.vm p {width: 30%; float: left; display: inline; font-size: 10px; border: 1px solid #eee; padding: 1px; margin: 0 10px 10px 0!important; min-height: 270px;}
.vm p img {width: 100%; height: auto;}

} /* ------------------------------------------------ End Media All ------------------------------------------------ */



@media all and (max-width: 1000px) {

.mobile-only {display: inherit;}
.mobileonly-tablet {display: block;}
html , body {background: #FFF!important;}
span.mobileonly-phone , .mobileonly-phone , .kontaktbox , .nomobile , #toppanel , .moduletable-jpanel , #fshad , .moduletable-rightboxgreen {display: none;}


.jcemediabox-zoom-span {max-width: 50%!important; height: auto;}
.jcemediabox-zoom-span img {float: right!important; width: 99%; height: auto;}

#wrapper, header, #headerwrap , #header-inner , section , #section-inner , #section-wrapper , #contentframe , #inhalt , footer , #footer-inner , #footer1 ,  
.articlecontent , #startpic , #starttext , #startpix , .blog , #logo
{width: auto!important; max-width: 1000px; float: none; padding: 0; height: auto!important;}

#startpix {width: 100%!important;}
#startpix img {width: 100%!important;}

#header-inner {height: 148px!important; background-position: 0px 0px; margin-top: 35px; background-position: right 0px; }

#topmenu {margin: -5px 0 0 0; right: -35px;}

/* Horiz. Navigationamenu */
#navi-h {margin: 23px 0 0 27px; padding: 0; border: none;}
#navi-h ul {background-color:#093; width: 97%;}
#navi-h li {height: auto; padding:  10px 10px 2px 10px; background: none; border-right: 1px solid #FFF; }

#responsivemenu {right: 15px; border: 5px solid #FFFFFF; border-top: none; position: absolute; z-index: 2000; min-width: 20%; }
#responsivemenu a {color: #FFF!important;}
.responsiveMenuTheme2 {list-style:none;}

#section-wrapper {min-height: 1px; padding-bottom: 0px; }

#path {margin-left: 0;}

#contentframe {min-height: 300px;  overflow: hidden; margin: 10px 0px 0 20px!important;  }
#inhalt {margin-top: 20px; padding: 0 25px 0 0;}

h1 , h2 {padding: 5px 10px; margin: 15px 0 15px 0; font-size: 16px; font-weight: normal; max-width: 97%;}


#logo {margin: -35px 0 0 0;}

#leftside {margin: -10px 10px 0 -5px; width: 30%; border-radius: 5px;}
#leftitems {margin-top: 10px;float: left; width: 100%!important;}
#navi-v {margin-top: 10px;float: left; width: 100%!important;}
#navi-v ul {width: 95%;}
#navi-v ul ul  {background: #8b8989!important; width: 100%;  }

#navi-v dl.level2 .inner { background:none!important;}
#navi-v dl.level3 .inner {background:none!important; }
#navi-v dl.level4 .inner {background:none!important; }




.categories-list .category-desc img {width: 99%; height: auto;} /* = Kategorien aufgelistet (Breite Bilder) */

.item.column-1 h2 , .item.column-2 h2 {margin: 5px 0 10px 0; padding: 0; width: auto; font-size: 13px; font-weight: 600; padding-left: 15px; background:url(../images/arrrow-right.png) 0px 3px no-repeat;  }
.cols-2 .column-1, .cols-2 .column-2 {width: 47%; height: auto; padding-bottom: 20px;} /* = Spalten (Uebersicht, aufgelistet) */
.cols-2 .column-2 		   			 {float: right!important;}



.blog-aktuelles .item { padding: 10px;}
.blog-aktuelles .item.column-1 , .blog-aktuelles .item.column-2 {width: 45%; height: auto; padding-bottom: 20px; min-height: 235px; float: left; margin: 10px 0 10px 0;  }
.blog-aktuelles .item.column-2 {float: right!important;}
.blog-aktuelles .item.column-1 {clear: both;}
.blog-aktuelles .pagination {clear: both; float: none;}
.blog-aktuelles h2 {margin-bottom: 20px!important;}
.blog-aktuelles .img-intro-right {max-width: 50%;}
.blog-aktuelles .img-intro-right img {width: 100%; height: auto;}


.blog h1 {font-size: 20px!important; padding: 10px!important;}

img.flex {max-width: 99%; height: auto;} /* = allgemeine Bilder im Produkttextfluss */
img.flex50 {max-width: 50%; height: auto;}


.blog-ref img {width: 100%!important; height: auto!important; margin: 0 0 20px 0;}
.blog-ref .introtext {float: left; width: 100%; margin: 10px 0 10px 0; }


#footer1 {margin: 20px 20px 0 20px; padding: 10px 0;}

.blog-referenzen .img-intro-right {max-width: 50%;}
.blog-referenzen .img-intro-right img {width: 100%; height: auto;}

.img-fulltext-right {max-width: 50%;}
.img-fulltext-right img {width: 100%; height: auto;}
dd.create {margin-top: -30px;}

table.verlegemuster {width: 99%!important;}
table.verlegemuster img {margin-bottom:10px; margin-top: 3px; max-width: 90%!important; height: auto;}


table.uebersicht {width: 100%!important; margin: 0 0 0 -10px;}
table.uebersicht img {margin: 0 10px 10px 0; max-width: 80%; height: auto; display: block!important; float: none!important; clear: both!important;}
table.uebersicht strong {padding: 0; background: none; min-width: 100px; }

table.infobox {  color: #FFF;}
table.infobox td {padding: 20px; background-color: #45a12a;}
table.infobox img {display: none;}

table.fulltable {width: 100%!important; overflow: hidden; }
table.fulltable img {width: 99%; height: auto;}

table.referenzen {width: 100%!important; overflow: hidden; }
table.referenzen img {width: 69%; height: auto; margin-bottom: 20px;}

table.download  {width: 102%; margin: 0 0 0 -5px;}
table.download td {background-color: #ececed; border: 5px solid #FFF; padding: 10px; vertical-align: top; width: 33.33333%;}
table.download img {width: 99%!important; height: auto;}

li.nn_tabs_tab {}
li.nn_tabs_tab a , li.nn_tabs_tab.active a {border: none!important; color: #FFF!important; background-color: #45A12A	!important; text-transform: uppercase; border: none; margin: 0 5px 10px 5px; border-radius: 5px!important; border: 1px solid #45A12A!important;}
li.nn_tabs_tab.active a {border: 1px solid #45A12A!important; background-color:#FFC!important; color: #000!important;}
li.nn_tabs_tab a:hover {color: #000!important;}

.moduletable-leftboxgreen { background:none; margin: 0 0 0 40px; width: 93%; }
.moduletable-leftboxgreen .greenbox img {max-width: 70%; height: auto; }



}


@media all and (max-width: 645px) {

#leftside , .item-page-blog .create , #path , #topmenu , .slide-text , table.responsive , .no-smartphone , a.no-mobile , .item-page-standorte .map , table.meilensteine img {display: none!important;}
.smartphone-only {display: inherit; }

img.mini {width: 50px; height: auto;}

a.toggleMenu.isMobile , .linker {color: #FFF!important; text-decoration: none;}

#header-inner {min-height: 88px; background: none; margin: 0;}

#contentframe {margin-left: 0px!important;}
#inhalt {margin-top: 0!important;}

#logo {text-align: center; margin-top: -10px; max-width: 100%; height: auto; margin-left: -14px!important; }
#logo img {max-width: 99%; height: auto;}

.img-fulltext-right {max-width: 30%;}

footer {min-height: 100px;}
#footer .moduletable-menu {float: none; margin-right: 1%; width: 100%;}
#footer .moduletable-menu ul {margin: 0; padding: 0; float: left;  width: 100%; }
#footer .moduletable-menu li {position: relative; margin: 0; padding: 0; float:none; list-style: none; display: block; width: 100%; text-align: center; border-bottom: 1px solid #FFF; }
#footer .moduletable-menu a {float: none; padding: 0 0; color: #666; background-image: none; text-transform: uppercase; width: 100%; padding: 5px 0 6px 0; color: #FFF; background-color:#CCC;  }
#footer .moduletable-menu a:hover {color: #000;}

.categories-list li .item-title a {font-size: 14px;padding: 5px; max-width: 150px;}

.blog .cols-2 .column-1 , .blog .cols-2 .column-2 {width: 99%; height: auto; float: left!important; margin-left: 1px;} /* = Produkte (Uebersicht, aufgelistet) */
.blog .cols-2 .column-1  {margin-top: 20px;}
.blog .cols-2 .img-intro-right     {width: 100%; margin: 0 0 20px 0; padding: 0;}
.blog .cols-2 .img-intro-right img {width: 100%; height: auto; }
.blog .item h2 a {font-size: 14px;padding: 1px!important; max-width: 150px; }
.blog h1 {line-height: 24px;}
.item.column-1 , .item.column-2 {min-height: 1px!important;}

.blog-aktuelles .item.column-1 , .blog-aktuelles .item.column-2 {width: 99%; height: auto; padding-bottom: 20px; min-height: 1px; margin: 10px 0 10px 0;  }
.blog-aktuelles .item.column-2 {float: left!important;}


.cols-2 .column-2 {float: left!important;}

table.uebersicht {width: 300px;important; }
table.uebersicht td {width: 50%!important;}
table.uebersicht img {margin: 0 10px 10px 0; max-width: 50%; height: auto; display: block!important; float: none!important; clear: both!important;}
table.uebersicht strong {padding: 0; background: none; min-width: 100px;  }

table.formate {min-width: 160px;}
table.formate tr {padding: 3px;}
table.formate td {border: 1px solid #CCC; text-align: center; font-size: 10px!important; padding: 3px 2px;}

#startpix {max-width: 95%!important; height: auto!important; float:left; margin: 0 0 0 20px;}
#startpix, #starttext {margin: 0;}
#starttext  {margin-top: 10px; float: left;}
#starttext h2 {background-color: #FFF; width: inherit; padding-left: 0; margin: 20px 0 20px 0!important;}

.cols-2 .column-1, .cols-2 .column-2 {width: 100%; height: auto; padding-bottom: 20px;} /* = Spalten (Uebersicht, aufgelistet) */

table.download strong {font-size: 10px!important; font-weight: normal!important;}
table.download img {width: 80px!important; height: auto;}

#inhalt li {list-style: none; background:url(../images/listi-blatt.png) top left no-repeat; padding-left: 25px; padding-bottom: 7px;}
#inhalt ul {margin: 15px 0 15px -40px;}

.vm p {width: 100%!important; float: left; clear: both; margin: 0 0 20px 0!important; min-height: 1px; border: none;}
.vm p img {width: inherit; max-width: 100%; height: auto;}


}