/* CSS Document für DGE-BW */

@import url(fundament.css);

html, body {
  font-size: 18px; 
  font-family: Arial, Helvetica, Verdana, sans-serif;
  line-height: 1.4; 
  color: #000000;
  height:100%;
  background: #ffffff;
  margin:0;
  padding:0;
}

.cc-message { font-size: 91% !important; line-height: 1.3 !important;}
.cc-link { display:none; visibility:hidden; }

/*################## DESIGN ####################*/

#wrapper { width: 94%; max-width:1050px; min-height:800px; margin: 10px auto 0 auto; padding: 0; text-align:center; position:relative; overflow:hidden; }

#header {  margin:0px auto 0 auto; padding:0; padding-top:15px; width:100%;  overflow:hidden; border-top: 15px solid #009fe3; background:#bbe3fa; }
#header .inside { position: relative; margin:0 auto; padding:0; width:100%; overflow:hidden; }
#header .inside .headerbereich { margin:0; padding:0; width: 100%; height: 105px; overflow:hidden; }
#header .inside .logo { position:absolute; top:0; left:0; width: 298px; height: 108px; text-align:left; }

#navi { position:absolute; z-index: 9999999; right:7%; top: 55px; width:86%; }
#navi ul { float:right; list-style-type: none; width: 65%; text-align:justify; }
#navi ul li { position:relative; display:inline-block; list-style: outside none none; height:180px; margin:0; padding:0; font-weight:bold; color:#000000; font-size: 81%; text-align:center; text-decoration:none; line-height:1.3; }
#navi ul li.unternavi {  background: url(../images-design/navi1-hg.jpg) center 20px  no-repeat;}
#navi ul li a { margin:0; padding:0;color:#000000; text-decoration:none; display:block; height:0px; }
#navi ul li a:hover { color:#000000; }
#navi ul li a:active { color:#000000; }
#navi ul li a:visited { color:#000000;  }
#navi ul li a.active { color: #009fe3;}
#navi ul li#line { padding-left:100%; }

#navi ul li ul.unavi { display:none; }
#navi ul li:hover ul.unavi { display: block; }

#navi ul li ul.unavi { position:absolute; left:left; top:30px; width: 170px; margin-left:-0%; margin-top: -10px; padding:37px 15px 7px 15px; min-height: 107px; border-bottom: 1px solid #000000; background:#009fe3 url(../images-design/navi-hg.jpg) 0px 0px no-repeat;  text-align:center; }
#navi ul li ul li { margin:0; padding:0; width: 100%; text-align:center; font-size: 100%; height:25px; font-weight:normal; line-height:1.2; color:#ffffff; background:none; }
#navi ul li ul li a { color: #ffffff; padding-top: 5px; padding-bottom: 5px; height: 0px; }
#navi ul li ul li a:hover { color: #ffffff; font-weight:bold; }
#navi ul li ul li a:active { color: #ffffff;  }
#navi ul li ul li a:visited { color: #ffffff; }
#navi ul li ul li a.active{ color: #ffffff; font-weight:bold; }


#container {  margin:0 auto; padding:35px 0 15px 0; width:100%;  overflow:hidden; background: #f6f5f5;  }
#container .inside { margin:0 auto; padding:0; padding-bottom:15px; width:96%; text-align:left;  overflow:hidden; }

#container .inside .zweispaltig { float:left; margin:0; padding:0; width: 48%;   }
#container .inside .zweispaltig.marginright { margin-right: 4%; }
#container .inside .anfahrt .linkespalte { float:left; margin:0; padding:0; width: 30%;   }
#container .inside .anfahrt .rechtespalte { float:left; margin:0; padding:0; width: 70%; }
#container .inside .linkespalte { float:left; margin:0; padding:0; width: 55%; padding-right:5%;  }
#container .inside .rechtespalte { float:left; margin:0; padding:0; width: 40%;   }

#container .inside .box { margin: 0; margin-bottom: 34px; padding:3%; background: #bbe3fa; width:94%; height: auto; overflow:hidden; text-align:left; 
	background-image: url(../images-design/box-hg.png);
  background-size: 160px 160px;
  background-repeat: no-repeat;
  background-position:  99% 10px;
 } 
#container .inside .boximage { float:left; margin:0; padding:0; width:40%; padding-right: 10%; height: auto; }
#container .inside .boximage img { width: 160px; height: 151px; }
#container .inside .boxtext { float:left; margin:0; padding:0; width:50%; height: auto; }
#container .inside .boxtext h4.weiss { margin-top:24px; color: #ffffff; font-weight: bold;  }
#container .inside .boxtext h4.weiss a { color: #ffffff; font-weight: bold; text-decoration:none; }
#container .inside .boxtext p {  color: #000000; font-weight: normal; }
#container .inside .boxtext p a { color: #000000 !important; font-weight: normal;text-decoration:none; }


#container .inside .anwendungsbeispiele { margin:0; padding:0; width: 102%; height: auto; overflow:hidden; }
#container .inside .anwendungsbeispiele img { float:left; width: 23%; padding-right:2%; padding-bottom: 10px; }


#container h1 { margin:0; margin-bottom: 0.6em; padding:0;  width: 100%; font-size: 100%; color:#009fe3; font-weight:bold; text-align:left; }
#container h2 { margin:0; margin-bottom: 0.6em; padding:0; width: 100%; font-size: 100%; color:#000000; font-weight:normal; text-align:left; }
#container h3 { margin:0; margin-top: 0.8em; margin-bottom: 0.8em; padding:0; width: 100%; font-size: 88%; color:#009fe3; font-weight:bold; text-align:left; }
#container h4 { margin:0; margin-top: 0.8em; margin-bottom: 0.8em; padding:0; width: 100%; font-size: 88%; color:#000000; font-weight:bold; text-align:left; }
#container h5 { margin:0; margin-top: 0.5em; margin-bottom: 0.6em; padding:0; width: 100%; font-size: 78%; color:#009fe3; font-weight:bold; text-align:left; }
#container h6 { margin:0; margin-top: 0.5em;  margin-bottom: 0.6em; padding:0; width: 100%; font-size: 78%; color:#000000; font-weight:bold; text-align:left; }
#container h5 a { color:#0069b4; }
#container .underdotted { width:100%; background: url(../images-design/dotted.png) bottom left repeat-x;padding-bottom: 15px; margin-bottom:20px; }

#container p {  margin:0; margin-bottom: 1em; padding:0; width: 99%; text-align:left; font-size: 74%; color: #000000; font-weight: normal; line-height:1.3;}
#container p.blocksatz { text-align:justify; }
#container p.linksbuendig { text-align:left !important; }
#container p a { color: #009fe3 !important; }
#container p a:hover, #container .ce_download a:hover { color:#009fe3; }
#container p a:visited, #container .ce_download a:visited { color:#000000; }
#container p a:active, #container .ce_download a:active { color:#000000; }
#container p.fett, #container p.fett a { font-weight:bold; }
#container p.notunderline a {  text-decoration:none !important; }

#container ul { margin:0; padding:0; list-style-type:bullet; }
#container ul li { list-style-type:circle; margin:0; margin-left: 13px; margin-bottom: 0.4em; padding:0; width: 100%; text-align:left; font-size: 74%; color: #000000; font-weight: normal; line-height:1.3;}
#container ol li { list-style-type:decimal; margin:0; margin-left: 23px; margin-bottom: 0em; padding:0; width: 100%; text-align:left; font-size: 74%; color: #000000; font-weight: normal; line-height:1.3;}
#container ol li a, #container ul li a {color: #000000;  }

		
#footer {  margin:0px auto 20px auto; padding:0; padding-bottom: 15px; width:100%; overflow:hidden; }
#footer .inside { margin:0 auto; padding:0; width: 100%; overflow:hidden; text-align:left; }
#footer .inside .adresse, #footer .inside .adressesmartphone { float:left; margin:20px 0 0 0; padding:0; width:75%; }
#footer .inside .impressumbereich { float:right; margin:20px 0 0 0; padding:0; width:23%; text-align:right; }
#footer .inside .adresse .adresselinks { clear:both; float:left; width: 150px; }
#footer .inside .adresse .adresserechts { float:left;  width: 75%;  }
#footer .inside .adressesmartphone .adresselinks { clear:both; float:left; width: 150px; }
#footer .inside .adressesmartphone .adresserechts { float:left;  width: 75%;  }

#footer .inside p { color: #000000; font-size: 71%; margin:0; padding:0; line-height:1.2; }
#footer .inside p a { color: #000000; text-decoration:none;  }
#footer .inside p a:hover { text-decoration:underline; color: #009fe3;  }
#footer .inside p a.active { color: #009fe3; } 

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

/* FORMULARE */
#formular { width: 100%; margin:0; padding: 0; } 
* html #formular { height: 1px; float:left; }
#formular p { margin:0; padding:0; margin-bottom: 2px;}
#formular fieldset { margin:0; padding:0; margin-bottom: 10px; width: 100%; border: none; }
#formular label { clear:both;margin:0;padding:0; width: 25%; display: block; float: left; cursor: pointer; line-height:21px; }
#formular input, #formular textarea { font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: normal; color: #505151; }
#formular input { margin:0;padding:0;background-color:#E6E6E8;color:#505151;border:1px solid #ffffff;height:26px;width:60%;line-height:26px; }
#formular textarea { margin:0;padding:0;background-color:#E6E6E8;color:#505151;border:1px solid #ffffff;width:85%;height:155px; }
#formular #senden { margin:0;margin-top:10px;padding:0;background-color:#009fe3;color:#ffffff;border:1px solid #1b8ee3;height:26px;line-height:20px;width:85%;font-size:80%;font-weight:bold; }
#formular input:focus, textarea:focus { background-color: #BBE3FA;  }
#formular .labelvollebreite { width: 85% !important;margin-top:10px;margin-bottom: 8px; }
#formular .fehler { border:1px solid #ff0000 !important; }
#formular p.ueberschrift { margin-bottom: 8px; }
#formular #nachricht { height: 150px !important; }


/* ########### SONSTIGES ################# */

.balken { margin:0; padding:0; width:100%; height:15px; background: #009fe3; }
img { border:0; }

.blau { color: #009fe3; }
.hellblau { color: #bbe3fa; }
.hellgrau { color: #e9e9e9; }
.rot { color: #ff0000; }
.fett { font-weight:bold; }
  
.nowrap {white-space: nowrap;}
.floatleft { float:left; }
.floatright { float:right; }
.margintop { margin-top: 8px;}
.clearing { margin:0; padding:0; clear:both; width:100%; height:0; }
.startseite { height:15px; }
.nomargin { margin-bottom:0 !important;}


/* ########### AUSBLENDEN ################# */
.mobile { display:none; visibility:hidden; }
.desktop { display:block; visibility:visible; }
.adressesmartphone { display:none; visibility:hidden; }
#header #menu, .invisible { display:none; visibility: hidden; }
#navmobile { visibility:hidden; }




/* ########################################################################*/
/* ################## WEITERE DESKTOP VERSION ########################*/

@media all and (max-device-width: 950px), all and (max-width: 950px) {
#footer .inside .adresse { width:100%;  }
#footer .inside .impressumbereich { display:block;  margin:20px 0 0 0; padding:0; width:100%; text-align:right; }

}


@media all and (max-device-width: 900px), all and (max-width: 900px) {
#header .inside .headerbereich { text-align:left; }
#header .inside .logo { position:relative;  margin:0; padding:0; width: 298px; height: 108px; text-align:left; }
#header .inside .headerbereich { height: 150px; }


#navi { top: 100px; }
#navi ul {  width: 100%; }

#container .inside .box { margin-bottom: 15px;  background-size: 110px 110px;   background-position:  99% 0px; }
#container .inside .boximage { width:25%; padding-right: 10%;  }
#container .inside .boximage img { width: 90px; height: auto; }
#container .inside .boxtext { width:65%; height: auto; }
#container .inside .boxtext h4.weiss { margin-top:0px;  }

#formular label { width: 30%; }
#formular input {width:69%; }
#formular .labelvollebreite, #formular #senden, #formular textarea { width: 99%; }
}

/* ########################################################################*/
/* ################## TABLET VERSION ########################*/
@media all and (max-device-width: 768px), all and (max-width: 768px) {
.desktop, #navi { display:none; visibility:hidden; }
.mobile { display:block; visibility:visible; }

#header .inside .headerbereich { height: auto; }
#header .balken { display:none; }
#menuslide { display:block; margin:0; margin-bottom:0px; padding:5px 0 5px 2%; width:98%; height:25px; background:#009fe3 url(../images-design/menu-280.png) center right no-repeat; color:#ffffff; text-align:left; font-weight:normal; text-decoration: none; border-bottom:1px solid #ffffff; }
#navmobile { visibility: visible; display: block; margin:5px auto 0px auto; padding:0; width:100%; color:#666; font-size:94%; }
#navmobile ul { display:none; margin:0; padding:15px 0; text-align: left; width:100%; height:auto;  background: #f6f5f5 url(../images-design/logo-290.jpg) top right no-repeat; }
#navmobile ul li { display:block; list-style-type: none; margin:0 0 10px 0; padding:0; padding-left:5px; padding-bottom:3px; text-align: left; color:#666; font-size: 81%; width: 100%; font-weight:bold; }
#navmobile ul li a { display:block; color:#000000; text-decoration: none; }
#navmobile ul li a:hover { color:#009fe3 !important;    }
#navmobile ul li a:active { color:#000000; }
#navmobile ul li a:visited { color:#000000;  }
#navmobile ul li a:focus { background-color: transparent; }
#navmobile ul li .active { color:#009fe3 !important;   }
#navmobile ul li:hover { color:#009fe3; }
#navmobile ul li ol { height: auto !important; margin-left: 5px; }
#navmobile ul li ol li {  font-size: 100%; margin:0; padding:0; font-weight:normal;  }
#navmobile ul li ol li a { padding-top:7px; padding-bottom:5px; }

#container .inside .linkespalte { clear:both; margin:0 auto;  display:block; width: 100%; padding-right:0%;  }
#container .inside .rechtespalte {margin:0 auto;  display:block; width: 100%; margin-top:15px;  }


#container .inside .box { height: 100px; margin-bottom: 15px;  background-size: 110px 110px;   background-position:  99% 10px; }
#container .inside .boximage { width:20%; padding-right: 10%;  }
#container .inside .boximage img { width: auto; height:100px; }
#container .inside .boxtext { width:70%; height: auto; }
#container .inside .boxtext h4.weiss { margin-top:-3px;  }


#footer .inside .adresse, #footer .inside .adressesmartphone { width:100%; }
#footer .inside .impressumbereich { width:100%; text-align:left; }
#footer .inside .adresse .adresselinks { clear:both; width: 100%; }
#footer .inside .adresse .adresserechts {clear:both; width: 100%; margin-bottom:10px;  }
#footer .inside .adressesmartphone .adresselinks { clear:both; width: 100%; }
#footer .inside .adressesmartphone .adresserechts {clear:both; width: 100%; margin-bottom:10px;  }

#formular label { width: 20%; }
#formular input {width:60%; }
#formular .labelvollebreite, #formular #senden, #formular textarea { width: 80%; }

}

/* ########################################################################*/
/* ##################### VERSION SMARTPHONE !! #########################*/

@media all and (max-device-width: 640px), all and (max-width: 640px) {
#footer .adresse { display:none; visibility:hidden; }
#footer .adressesmartphone { display:block; visibility:visible; }
}


@media all and (max-device-width: 480px), all and (max-width: 480px) {
#container .inside .zweispaltig { clear:both; width: 100%; margin-bottom:10px;  }
#container .inside .zweispaltig.marginright { margin-right: 0%; }
#container .inside .anwendungsbeispiele img { width: 31%; padding-right:2%;  }
#container .inside .box { height: 100px; margin-bottom: 15px;  background-size: 90px 90px;   background-position:  99% 10px; }

#container .inside .boximage { width:25%;  }
#container .inside .boxtext { width:65%;  }

#formular label { width: 30%; }
#formular input {width:69%; }
#formular .labelvollebreite, #formular #senden, #formular textarea { width: 99%; }
                                                                           
}

@media all and (max-device-width: 360px), all and (max-width: 360px) {
#header .inside .logo {  width: 260px; height: 94px;  }

#container .inside .anwendungsbeispiele img { width: 48%; padding-right:2%;  }
#container .inside .boximage { display:none; }
#container .inside .boxtext { width:100%;  }

#formular label { width: 100%; }
#formular input {width:100%; margin-bottom:10px; }
#formular .labelvollebreite, #formular #senden, #formular textarea { width: 100%; }

}