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

@import url(fundament.css);

html, body {
  font-size: 18px; 
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5; 
  color: #624A41;
  height:100%;
  background: #fff7e2;
  margin:0;
  padding:0;

}

img { margin:0; padding:0; }


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


#wrapper { position:relative; width: 100%; max-width:1000px; min-height:600px; margin: 0px auto; padding: 0; padding-top:13px; text-align:left; overflow:hidden; 
background: #fff7e2 url(../images-design/linien.jpg) top left no-repeat; }

.main { margin:0; padding:0; float:left; width: 74.5%; }
.left { margin:0; padding:0; float:left; width: 25.5%; }

#header { z-index:-20; margin:0px auto; padding:0; width:100%; height:auto; max-height:195px;  overflow:hidden; }
#container { z-index:10; margin:0 auto; padding:0; width:100%; height:auto; min-height: 525px; background:#ffffff url(../images-design/hg-mitte.jpg) bottom left no-repeat; background-size: 100% auto; overflow:hidden; }
#footer { z-index:10; margin:0 auto; padding:0; width:100%; height:180px; background:#fff7e2 url(../images-design/hg-unten.jpg) top left no-repeat; background-size: 100% auto; overflow:hidden; }

#header  {  background-image: url(../images-slider/hg-alt.png); background-position: top right; background-size: contain; }
#header .left {  background-image: url(../images-design/honeystudio_logo_hg-alt.jpg); background-position: top left; background-size: contain; }


/* ### */
#container .mod_navigation { position:relative; margin:55px auto 0 auto; padding:0; width:80%; height:auto; text-align:center; }
#container .mod_navigation li { display:block; list-style-type: none; margin:0; padding:0; width:100%; height:35px; text-align: center; color:#e7a639; font-size: 84%; font-weight:bold; }
#container .mod_navigation li a { margin:0; padding:0; color:#e7a639; text-decoration:none;  }
#container .mod_navigation li a:hover { color:#5c3710   !important; }
#container .mod_navigation li a:active { color:#5c3710 ; }
#container .mod_navigation li a:visited { color:#e7a639;  }
#container .mod_navigation li a:focus { background-color: transparent; }
#container .mod_navigation li a.active {  color:#5c3710  !important; }
#container .mod_navigation li.margintop { margin-top: 30px; }

.mobilenavigation { display:none; visibility:hidden; }

#container .content { padding-left: 8%; width: 65%; margin-top:50px; }


#container h1 { margin:0; margin-bottom: 0.6em; padding:0;  width:100%; font-size: 125%; color:#E7A639; font-weight:normal; text-align:left; }
#container p.ueberschrift { margin:0; margin-bottom: 0.6em; padding:0;  width:100%; font-size: 106%; color:#E7A639; font-weight:normal; text-align:left; }

#container h2 { margin:0; margin-bottom: 0.6em; padding:0; width: 100%; font-size: 110%; color:#E7A639; font-weight:normal; text-align:left; }
#container h3 { margin:0; margin-bottom: 0.6em; padding:0; width: 91%; font-size: 120%; color:#E7A639; font-weight:normal; text-align:left; }
#container h4 { margin:0; margin-top: 0.8em; margin-bottom: 0.8em; padding:0; width: 100%; font-size: 84%; color:#E7A639; font-weight:normal; text-align:left; }
#container h5 { margin:0; margin-top: 0.5em; margin-bottom: 0.6em; padding:0; width: 100%; font-size: 84%; color:#624A41; font-weight:bold; text-align:left; }
#container h6 { margin:0; margin-top: 0.5em;  margin-bottom: 0.6em; padding:0; width: 100%; font-size: 84%; color:#624A41; font-weight:bold; text-align:left; }
#container h5 a { color:#414141; }

#container p.margintop { margin-top: 30px; }
#container p {  margin:0 auto; margin-bottom: 1.5em; padding:0; width: 99%; text-align:left; font-size: 74%; color: #624A41; font-weight: normal; line-height:1.3;}



#container p.blocksatz { text-align:justify; }
#container p.kleiner { font-size: 71%; }
#container p.linksbuendig { text-align:left !important; }
#container p a { color: #624A41 !important; }
#container p a:hover, #container .ce_download a:hover { color:#E7A639; }
#container p a:visited, #container .ce_download a:visited { color:#624A41; }
#container p a:active, #container .ce_download a:active { color:#E7A639; }
#container p.fett, #container p.fett a { font-weight:bold; }
#container p.notunderline a {  text-decoration:none !important; }
#container p.orange { color:#E7A639; font-weight:normal; }
#container p.orangefett { color:#E7A639;  font-weight:bold; }

#container ul { margin:0; margin-bottom: 15px; padding:0; list-style-type:bullet; width:100%; }
#container ul li { list-style-type:circle; margin:0; margin-left: 15px; margin-bottom: 0em; padding:0; width: 98%; text-align:left; font-size: 74%; color: #5c3710; 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: 98%; text-align:left; font-size: 74%; color: #5c3710; font-weight: normal; line-height:1.3;}
#container ol li a, #container ul li a {color: #000000;  }

#container .back { margin-bottom: 30px; }

#container .linie { margin: 20px 0 0 0; padding:0; border-top: 1px dashed #E7A639; width:100%; height:1px; }


#container table { margin:0; padding:0; width: 360px; }
#container table thbody { margin:0; padding:0;  }
#container table td {  text-align:left; font-size: 74%; color: #624A41; font-weight: normal; line-height:1.3; }
#container table td:nth-child(1) {  width:auto; }
#container table td:nth-child(2) {  text-align:right; width:80px; }
#container table td.abstand { padding-top: 20px; font-weight:bold; }

#container table.oeffnungszeiten { margin:0; padding:0; width: 400px; }
#container table.oeffnungszeiten td { height: 22px; }
#container table.oeffnungszeiten td:nth-child(1) {  width:auto; }
#container table.oeffnungszeiten td:nth-child(2) {  text-align:left; width:140px; }
#container table.oeffnungszeiten td:nth-child(3) {  text-align:left; width:140px; }


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

.copyright {  }
.copyright p {  margin:15px auto; margin-bottom: 1.5em; margin-left:-15px; padding:0 2%; width: 96%; text-align:center; font-size: 68%; color: #624A41; font-weight: normal; line-height:1.3;}
.copyright p a { color: #624A41; }
.copyright p a.active { color: #E7A639; }




/* VIDEOS */

.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: #1c69d4; }
.hellblau { color: #bbe3fa; }
.hellgrau { color: #e9e9e9; }
.rot { color: #ff0000; }
.fett { font-weight:bold; }
.orange { color:#E7A639; }
  
.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; }






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

@media all and (max-device-width: 960px), all and (max-width: 960px) {
}





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

.main { width:67%; margin-bottom:0px; }
.left { width:33%; margin-bottom:0px; }

#header .main img { padding-top:20px;  }

#container .left { display:none; }
#container .main { width: 100%; }

#container .content { padding: 0 15% 0 5%; width: 80%; }

.mod_navigation { display:none; visibility: hidden; }
.mobilenavigation { display:block; visibility:visible; }

#menuslide { display:block; margin:0px auto 0px auto;  padding:0; padding-left: 5%;  padding-top: 5px; width:95%; height:28px; border: 1px solid #E7A639; background:#E7A639 url(../images-design/menu-280.png) 95% center no-repeat; color:#ffffff; text-align:left; font-weight:bold; text-decoration: none; }
#navigation400 { display:block;  margin:0px auto 0px auto; padding:0; width:100%; color:#ffffff; font-size:94%; }
#navigation400 ul { display:none; margin:0; padding:0; padding-top:3px; padding-bottom: 5px; text-align: center; width:99.5%;  background:#ffffff;}
#navigation400 li { list-style-type: none; margin:0 5%; padding:0; width: 90%; text-align: left; color:#624A41; font-size: 81%; font-weight:normal; border-bottom: 1px solid #E7A639;  }
#navigation400 li a { display:block; margin:0 auto; padding:0;  padding: 8px 0 10px 0px; color:#624A41; text-decoration:none;  }
#navigation400 li a:hover { color: #E7A639 !important; }
#navigation400 li a:active { color: #5c3710 ; font-weight:bold;}
#navigation400 li a:visited { color: #624A41;  }
#navigation400 li a:focus { background-color: transparent; }
#navigation400 li a.active {color: #5c3710  !important; font-weight:bold; }
#navigation400 li:hover { }


#container {  min-height:434px; padding-bottom: 100px;  background:#ffffff url(../images-design/hg.jpg) bottom left no-repeat; background-size: 100% auto; overflow:hidden; }
#footer {display:none; }

.copyright p {  margin-left:-1px; }




}



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

@media all and (max-device-width: 640px), all and (max-width: 640px) {
#container {  min-height:350px; padding-bottom: 100px;  }
}

@media all and (max-device-width: 480px), all and (max-width: 480px) {

#container {  min-height:250px; padding-bottom: 100px; }

#header  {  background:none;  max-height:400px;}
#header .main {  background-image: url(../images-slider/hg-alt.png); background-position: top right; background-size: 100%; display:block; width:100%; margin-bottom:0px;  }
#header .left {  background-image: url(../images-design/honeystudio_logo_hg-alt.jpg); background-position: top left; background-size: cover;  text-align:center; width:100%; margin:0 auto; }

#header .left img { max-width: 200px; }
#header .main img { padding-top:0px;  }

#container table { margin:0; padding:0; width:100%; }

#container table.oeffnungszeiten { margin:0; padding:0; width: 100%; }
#container table.oeffnungszeiten td { height: 25px; }
#container table.oeffnungszeiten td:nth-child(1) {  width:auto; }
#container table.oeffnungszeiten td:nth-child(2) {  text-align:left; width:40%; }
#container table.oeffnungszeiten td:nth-child(3) {  text-align:left; width:40%; }

}

@media all and (max-device-width: 320px), all and (max-width: 320px) {
}