@charset "utf-8";
* {margin:0; padding:0}


body {overflow:scroll;}

body, table {background-color:#BDC1C4;  font-family: Tahoma, sans-serif;
 /*-webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto; */

}

/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Oswald Regular'), local('Oswald-Regular'),
       url('../fonts/oswald-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v16-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}

/* coda-regular - latin */
@font-face {
  font-family: 'Coda';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/coda-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Coda Regular'), local('Coda-Regular'),
       url('../fonts/coda-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/coda-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/coda-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/coda-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/coda-v13-latin-regular.svg#Coda') format('svg'); /* Legacy iOS */
}



/* Hintergründe */
.anw-bg {background-image:url(../bilder/start2_bg.png);}

.pr-bg {background-image:url(../bilder/2b_bg.png);}

.dl-bg {background-image:url(../bilder/3b_bg.png);}

.sg-bg {background-image:url(../bilder/6_bg.png);}

.imp-bg {background-image:url(../bilder/7b_bg.png);}

.kont-bg {background-image:url(../bilder/9b_bg.png);}

.gal-bg {background-image: url(../bilder/8b_bg.png);}

.anf-bg {background-image: url(../bilder/4_bg.png);}

.news-bg {background-image: url(../bilder/10b_bg.png);}

/* Index-Page Inhalte */
#main {	position:absolute;
	left:50%;
	top:50%;
	width:1000px;
	height:580px;
	z-index:1;
	margin-top: -290px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -500px;
	background-color: #CCCCCC;
		  border:solid 6px #fff;
		  border-radius:30px;
}

#inhaltlogo {
	position:absolute;
	left:237px;
	top:148px;
	width:400px;
	height:127px;
	z-index:1;
}

#de {
	position:absolute;
	left:289px;
	top:277px;
	width:130px;
	height:21px;
	z-index:2;
}
#apDiv1 {
	position:absolute;
	left:361px;
	top:452px;
	width:178px;
	height:92px;
	z-index:2;
}
#counter {
	position: absolute;
	left: 285px;
	top: 500px;
	width: 302px;
	height: 40px;
	z-index: 2;
	font-family:Tahoma, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#333;
}

a.navi {
	
	color: #fff;
	font-family: Tahoma, Arial, sans-serif;
	text-decoration: none;
	font-size:14px;
}

a.navi:hover {
	text-decoration: underline;
}
.unterteilung {
	color: #FFFFFF;
	font-weight: bold;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 13px;
}

/* Hauptseiten */


.wrapper {width:1000px;
		  margin:10px auto;
		  border:solid 6px #fff;
		  border-radius:30px;
		  background-repeat:no-repeat;
		  padding-bottom:5px;
		  background-color:#e0e0e0;
		  
}







/* Farbschemen */
.gruen  {border-left:solid 5px #99e626; padding-left:5px;}
.gelb {border-left:solid 5px #fdff0a; padding-left:5px;}
.orange  {border-left:solid 5px #ff790a; padding-left:5px;}
.blau  {border-left:solid 5px #00ddcd; padding-left:5px;}
.rot {border-left:solid 5px #d91e26; padding-left:5px;}
.weiss  {border-left:solid 5px #fff; padding-left:5px;}
.braun  {border-left:solid 5px #964f00; padding-left:5px;}
.lila  {border-left:solid 5px #961fb0; padding-left:5px;}
.schwarz  {border-left:solid 5px #000; padding-left:5px;}

#movie {background-image:url(../bilder/vid_poster.jpg);}

/* Header */
header {height:190px; }

#h-adres {text-align:right; color:#FFF; font-size:11px;
                margin-top:8px; margin-right:15px;}


/* Footer */
#adres {height:17px; margin-left:50px; font-size:12px; color:#4277c6;
font-weight:bold;   padding-top:10px;}

/* Navigation */

nav {margin-left:20px; margin-bottom:140px; }

nav ul {list-style:none; }

nav ul li {float:left}

nav ul li a {display:block; width:107px; height:107px;
             font-size:14px;font-family: 'Oswald', sans-serif;
			 color:#fff; text-decoration:none; text-align:center;
			 background-repeat:no-repeat; 
			 }

nav ul li a#pr {background-image:url(../bilder/b1.png);height:140px;line-height:107px;width:109px}

nav ul li a#pr-aktiv {background-image:url(../bilder/b1_ov.png);height:140px;line-height:107px;width:109px}

sup {z-index:0;}

nav ul li a.dl {background-image:url(../bilder/b2.png);line-height:107px;}
nav ul li a:hover.dl {background-image:url(../bilder/b2_ov.png)}				nav ul li a.dl-aktiv {background-image:url(../bilder/b2_ov.png);line-height:107px;} 


nav ul li a.f {background-image:url(../bilder/b3.png);padding-top:40px; height:72px; line-height:15px;}
nav ul li a:hover.f {background-image:url(../bilder/b3_ov.png)}				 nav ul li a.f-aktiv {background-image:url(../bilder/b3_ov.png);padding-top:40px; height:72px; line-height:15px;} 

nav ul li a.fe {background-image:url(../bilder/b3.png);line-height:107px;}
nav ul li a:hover.fe {background-image:url(../bilder/b3_ov.png)}				 nav ul li a.fe-aktiv {background-image:url(../bilder/b3_ov.png);line-height:107px;} 


nav ul li a.n {background-image:url(../bilder/b4.png);padding-top:40px; height:72px; line-height:15px;}
nav ul li a:hover.n {background-image:url(../bilder/b4_ov.png)}				 nav ul li a.n-aktiv {background-image:url(../bilder/b4_ov.png);padding-top:40px; height:72px; line-height:15px;}


nav ul li a.ref {background-image:url(../bilder/b5.png);padding-top:40px; height:72px; line-height:15px;}
nav ul li a:hover.ref {background-image:url(../bilder/b5_ov.png)}				 nav ul li a.ref-aktiv {background-image:url(../bilder/b5_ov.png);padding-top:40px; height:72px; line-height:15px;}


nav ul li a.sg {background-image:url(../bilder/b6.png);padding-top:40px; height:72px; line-height:15px;}
nav ul li a:hover.sg {background-image:url(../bilder/b6_ov.png)}				 nav ul li a.sg-aktiv {background-image:url(../bilder/b6_ov.png);padding-top:40px; height:72px; line-height:15px;}


nav ul li a.k {background-image:url(../bilder/b7.png);line-height:107px;}
nav ul li a:hover.k {background-image:url(../bilder/b7_ov.png)}				nav ul li a.k-aktiv {background-image:url(../bilder/b7_ov.png);line-height:107px;} 


nav ul li a.af {background-image:url(../bilder/b8.png);line-height:107px;}
nav ul li a:hover.af {background-image:url(../bilder/b8_ov.png)}	
nav ul li a.af-aktiv {background-image:url(../bilder/b8_ov.png);line-height:107px;}

nav ul li a.im {background-image:url(../bilder/b9.png);padding-top:40px; height:72px; line-height:15px; color:#333}
nav ul li a:hover.im {background-image:url(../bilder/b9_ov.png)}			 
nav ul li a.im-aktiv {background-image:url(../bilder/b9_ov.png);padding-top:40px; height:72px; line-height:15px; color:#333}
				 
/* Produkte Submenu */

nav ul li ul  {margin-left:76px; position:absolute; display:none; top:323px;}

.sub-aktiv  {margin-left:76px; position:absolute; display:block; top:323px;}

.link-aktiv {background-color:#99e626;}

nav ul li ul li  {margin-left:1px; 
			 }
nav ul li ul li a {display:block; line-height:24px; height:24px;width:auto;
             font-family: 'Coda', cursive; font-size:13px;
			 padding-left:5px; padding-right:5px;
			 color:#fff; text-decoration:none; text-align:center;
			 background-color:#4277c6;
			 }
nav ul li ul li a:hover {background-color:#99e626;	}

nav ul li:hover ul  {display:block;}	

.eck {background-image:url(../bilder/eck.png); display:block; width:12px; height:24px; margin-left:1px}		 
			 
/* Section Inhalte */

section {margin-left:50px; min-height:500px;}

section h2 { font-family: 'Coda', sans-serif; font-size:20px; color:#4277c6;
             margin-bottom:12px; font-weight:normal; /*text-shadow: 2px 2px 1px #999;*/}

section .rahmen {border-radius:12px; border:solid 3px #4277c6;}

section .prod {list-style:none; float:left; border:none;  }
section .prod2 {list-style:none; float:left; border:none; margin-right:45px; }
section .prod3 {list-style:none; float:left; border:none; margin-right:280px; }
section .prod4 {list-style:none; float:left; border:none; margin-right:100px; }
section .prod5 {list-style:none; float:left; border:none; margin-right:40px; }
section .prodname {color:#4277c6; margin-bottom:5px; font-size:14px; font-weight:bold;}
section .prodpic {margin-bottom:8px; width:240px}

/* article Klassen für Inhalte */

.txtcontent {width:600px;   font-size:15px; 
}

.txtcontent p {margin-bottom:8px;}

.txtcontent ul {margin-bottom:10px;
                      list-style-image:url(../bilder/bullet.png);
					  background-color:#FFF;
					  padding:8px 25px;
					
					  width:450px;
					  border-radius:6px;
					  }

.txtcontent ul li {line-height:25px;}

.txtcontent dl {margin-bottom:10px;}

.txtcontent dl dt {font-weight:bold;}

/* article Klassen für Impressum + Datenschutz */

.txtcontentimp {width:400px;   font-size:12px; float:left;
}

.txtcontentimp p {margin-bottom:8px;}

.txtcontentimp ul {margin-bottom:10px;
                      list-style-image:url(../bilder/bullet.png);
					  background-color:#FFF;
					  padding:8px 25px;
					
					  width:350px;
					  border-radius:6px;
					  }

.txtcontentimp ul li {line-height:22px;}

.txtcontentimp dl {margin-bottom:10px;}

.txtcontentimp dl dt {font-weight:bold;}

/* *********************************** 	*/

.txtcontentds {width:470px;
overflow:auto;
height:397px;
			font-size:10px; 
			float:left; 
			margin-bottom:10px; 
			margin-left:20px;
             background-color:#FFF;
			padding:8px 15px;
			
					  border-radius:6px;}
}

.txtcontentds p {margin-bottom:10px; }



.txtcontentds h4 {margin-top:8px; margin-bottom:5px;}





/* Kontakt-Formular */
#formcontent table {background:none; border:none;}

#formcontent input,textarea {padding:5px; border-radius:12px; border:solid 3px #4277c6; }

#formcontent textarea { resize: none;}

#formcontent .btn {padding:2px;  font-size:12px;
border-radius:6px; width:80px;}

#formcontent .btn:hover {border-color:#FFF;}

/* Allgemein */

.red {color:#F00; font-size:13px; margin-bottom:6px; margin-top:10px;}

.small {font-size:11px; line-height:18px; color:#000;}

.minibeschreibung {color:#000; font-size:14px; font-family:Tahoma, Geneva, sans-serif; text-shadow:none;}

.fussnote {clear:left; font-size:10px;}

.rounder {border-radius:6px; border:solid 2px #fff;}


/* Galerie */

#galerie figure {
 
  float: left;
  border: 1px solid #cccccc;
  border-radius: 5px;
  margin-right:15px;
  margin-bottom:10px;
}

#galerie figure img {
 border-radius:6px; border:solid 3px #fff; 
}

#galerie figure img:hover {
 opacity:0.7; 
}

#galerie figure figcaption {
  padding: 2px 4px 2px 4px;
  background-color: #636363;
  color: #cccccc;
  font-size:9px;
  border-radius: 0 0 3px 3px;
}

#galerie h3 {font-size:13px; margin-bottom:6px; clear:left;}


.clearfx {clear:left;}



/* Anwendungstabelle */


#anwendung table {font-size:11px; border:solid 2px #333; background-color:#FFF}
#anwendung table td {padding:0px; border:solid 1px #333;}

#anwendung table .doppelr {border-right:double 3px #333; padding-left:8px}

.fettrand {border-right:solid 2px #333;}

.doppelru {border-bottom:double 3px #333;}


.beschr h3 {font-size:13px; margin:6px 0;}

#anwendung .beschr {border:none;
              padding:2px 8px;
                                border-bottom:dashed 1px #999;}

.redttabtxt {color:#800000;}
.greentabtxt {color:#339966;}
.blutabtxt {color:#0000ff;}
.whitetabtxt {color:#fff;}
#anwendung table a {color:#F00 ; text-decoration:none; font-weight:bold; font-size:10px; }
#anwendung table a:hover {text-decoration:underline;}
#anwendung table img {float:left; margin-right:5px;}


/* "Neues" Tabelle */
#cleanworld {width:785px;}

#cleanworld h2 {font-weight: bold;}

#cleanworld h3 {font-size:15px; margin:8px 0;}
.s2 { font-weight: bold; text-decoration: none; font-size: 7pt; vertical-align: 4pt; }

#cleanworld tr td {font-size:13px; padding: 8px; vertical-align: top;}

#cleanworld table tr td:first-child {font-weight:bold; width:100px; }


#cleanworld p {font-size:12px; padding: 6px;}


/* Produkt Popups */
.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index:100;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 200px auto;
  padding: 20px;
  background: #cbcbcb;
  border-radius: 12px;
  border:solid 3px #4277c6;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
  z-index:200;
}

.size {width:520px;}

.popup h2 {
 font-size:22px;
  margin-top: 0;
  margin-bottom:5px;
  color: #4277c6;
  font-family: Tahoma, Arial, sans-serif;
}

.popup p {margin-bottom:8px;}

.popup .pdf-dl {display:block; color:#F00; text-decoration:none; margin:5px 0;}
.popup .pdf-dl:hover {text-decoration:underline;}

.popup .pdf-dl img {margin-right:8px;}

.popup .close {
  position: absolute;
  top: 5px;
  right: 5px;
  transition: all 200ms;
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color:#4277c6;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

.prod li a:hover {opacity:0.5;}

.content a {color: #4277c6; text-decoration:none; font-weight:bold;}
.content a:hover {text-decoration:underline;}
