@charset "UTF-8";

/* CSS Document */

/*
font-family: 'Neuton', serif;
font-family: 'Orbitron', sans-serif;
*/

#mobileNavFrame{display:none}

@font-face {
  font-family: "BeyondTheMountains"; /* regular font */
  src: url("beyond_the_mountains.woff") format("woff");
  font-weight: normal; font-style: normal; }
 

*{font-family: 'Roboto', sans-serif; font-size:1.0em; font-weight:300; color:#000000 }
.schriftHand{font-family: 'Dancing Script', cursive;}
body, html{padding:0px; margin:0px; background-color:#F7F7F7; margin-top:20px; margin-bottom:20px}

strong, b{font-weight:700}
h1,h2,h3,h4,h5,.leistungPreis{clear:both}
h1{font-size:2.8em;}
h2{font-size:2.5em}
h3{font-size:2.0em}
.fr, .kontaktFr{float:right}

.centerIt{text-align:center}
/*
li{list-style:none}
li::before {
  content: "•   ";
  color: #666666;
}
*/
li{margin-bottom:16px}
.neueZeile{clear:both}
.siteFrame{width:100%; max-width:1200px; margin:0px auto 0px auto; background-color:#FFFFFF}
.siteFrameInnerFrame{padding-left:10px; padding-right:10px}

.headerFS{display:flex}
.headerLogoFS, .headerNavFSContainer{flex-grow:1; flex-shrink:1}
.headerLogoFS{max-width:300px; position:absolute; z-index:2; margin-top:50px}
.logoFS{width:180px; height:auto}

.headerNavFS{display:flex; padding-top:50px; margin-left:170px; margin-top:10px; margin-bottom:20px}
.headerNavFS div{flex-grow:1; flex-shrink:1;}
.headerNavFS div a{text-align:left; text-decoration:none;}
.headerNavFS div a:hover{text-decoration:underline;}
.headerNavFS div a div{font-weight:300; padding-top:16px; text-transform:uppercase; letter-spacing:0.08em}
#headerSlogan{font-family: 'Dancing Script', cursive; width:100%; text-align:center; font-weight:700; font-size:4em; padding-top:30px; margin-bottom:-40px}
.navImage{width:30px; height:auto}

.headerNavSubFS{display:none; position:absolute; z-index:2; background-color:rgba(255,255,255,0.9); padding:0px 20px 20px 20px; float:right; margin-top:0px; margin-left:-20px; width:auto}
.divSubNavTrenner{border-bottom:#666666 1px solid}

#headerImage{width:100%; max-width:1200px}
.topImage{width:100%; height:auto}

#headerImageContainer{}
#headerImage{position:relative; z-index:1}
#headerImageSlogan{position:relative; z-index:3; width:100%; text-align:center; margin-top:-180px}
.headerImageSloganZeile1{font-family: 'Dancing Script', cursive;  font-size:7em; color:#FFFFFF; opacity:0.5; font-weight:700}
.headerImageSloganZeile2{font-family: 'Dancing Script', cursive;  font-size:3em; color:#FFFFFF; opacity:0.5; margin-top:-20px}


#headerImageDots{ position:relative; z-index:3; width:100%; height:100%; border:#FFFFFF 4px solid}
#headerImageDots{display:none}

#contentLeftStart{width:100%}
#contentContainer{display:flex}
#contentLeft, #contentRight{flex-grow:1; flex-shrink:1}
#contentRight{max-width:200px; padding-left:10px; border-left:#000000 1px solid}

.fliesstext h1{margin-top:50px}
.fliesstext{margin-bottom:0px; padding:0px 20px 20px 20px; line-height:1.7em}

/*blog*/
.blogFrame{padding:20px; padding-bottom:40px; margin-bottom:40px; margin-top:40px; border-bottom:#000000 1px solid; }
.blogFrame h1{margin-bottom:0px}
.blogDatum{text-align:right; margin-bottom:20px}
.blogTeaser img{max-width:100%; height:auto;}
.blogText img{max-width:100%; height:auto;}
.blogText{margin-top:40px}

/*Kontakt*/
#fAnfrage select, #fAnfrage input{height:50px; margin-bottom:20px; padding:10px}
#kontakt{width:90%; margin:50px auto 20px auto}
.kontaktInput{width:46%; padding:10px}
#fAnfrage #notiz{width:46%; padding:10px; height:200px}
.kontaktFelder{ border-top:0px; border-right:0px; border-left:#666 0px solid; border-bottom:#666 0px solid; background-color:#F5F5F5; padding:3px 3px 3px 1px}
#kontaktCaptchaArea{float:right; width:46%; height:190px}
.leistungsanfrageUebersicht{margin-bottom:40px}

.anwendungBilderGrossFrame{margin-top:-30px}

input.kontaktSubmitBtn{
float: right;
border: 0px;
background-color: #F5F5F5;
padding: 10px 20px}
input.kontaktSubmitBtn:hover{background-color:#666666; color:#FFFFFF}
.footerHref{ text-decoration:none; color:#FFF}

.largeImageContainer{display:flex;flex-wrap:wrap; justify-content:space-around}
.largeImageContainer .largeImageItem{flex-grow:1; flex-shrink:1; border:#CCCCCC 1px solid; max-width:20%; width:20%; margin-top:40px; margin-bottom:50px; padding:20px}
.largeImageContainer .imageTitle{width:100%; margin-bottom:10px; font-weight:500}
.slimboxPreviewImage{width:100%; height:auto; margin-bottom:-10px;}
.imageDescription{padding-top:20px; line-height:1.6em}

/*Leistung*/
.leistungContainer{}
.leistungContainer, .leistungText{text-align:left}
.leistungContainer h2{margin-bottom:10px; margin-top:10px}
.leistungContainer{max-width:100%; padding:40px; border:#000000 1px solid; margin:0px auto 30px auto}
.leistungText li{margin-left:-20px}
.leistungZusatz{margin-top:0px}
.leistungPreis{text-align:right}
#theFooter{padding-bottom: 20px; padding-top: 10px; padding-left:10px; margin-top: 20px; border-top: #000000 1px solid}

/*leistungBereich*/
.leistungBereichContainer a{text-decoration:none;}
.leistungBereichContainer{display:flex;flex-wrap:wrap; justify-content:space-around}
.leistungBereichItem{flex-grow:1; flex-shrink:1;border:#000000 3px solid; width:300px; max-width:27%; margin-top:40px; padding:20px; text-align:center; font-size:1.4em}
.leistungBereichItem:hover{background-color:#F5F5F5;}

/*Kundenbereich*/
#fLoginKB{width:80%; margin:0px auto 20px auto}
#fLoginKB #email{width:45%; float:left; padding:10px}
#fLoginKB #password{width:45%; float:right; padding:10px}
input.dottedSubmitButton{font-size:1.4em}
#fLoginKB #fLoginKBSubmit, .btnSubmitOrder, input.dottedSubmitButton{border:0px; background-color:#F5F5F5; padding:10px 20px; clear:both; float:right; margin-top:20px; border:#000000 1px solid}
#fLoginKB #fLoginKBSubmit:hover, .btnSubmitOrder:hover, input.dottedSubmitButton:hover{background-color:#666666; color:#FFFFFF}
.kundenbereichContent{padding:20px}
.kundenbereichContent .largeImageContainer{margin-top:-40px; margin-bottom:40px}


/*mobileNav*/
#mobileMenuBar{display:none}
#phone-header-navigation{background-color: rgb(255,255,255); height:80px; display:none}
#logoOH{height:80px; width:auto; padding:0px}
#buttonMNav{padding:20px}
.phone-menu-toggle{position:absolute; z-index:2; width:100%}
ul.phone-menu-wrapper.unstyled{z-index:1;}
.phone-menu-left-side{float:left}
.phone-menu-right-side{float:right}
#mobileNavFrame{width:100%; position:absolute; left:-100%; top:0; z-index:9999; min-height:100%;}
#mobileNavFrame .divNavSub, #mobileNavFrame .divNavItem{background-color:#FFFFFF}
#mobileNavWhiteBG{position:absolute; z-index:-1; background-color:#FFFFFF; min-height:100%; width:95%}
#hideMobileNav{background-color:#F1F1F1; border-bottom:#666666 1px solid; padding:20px 10px 20px 10px}
#hideMobileNav .divCloseMenu{width:30px; float:right}
img#buttonMNav{height: 30px; width:auto;padding-top:25px;}
#mobileNavFrame .divNavMain{position:absolute; width:95%}
#mobileNavFrame .divNavItem{ padding:20px 10px 20px 10px; border-bottom:#CCCCCC 1px solid}
#mobileNavFrame .divNavItem a{text-decoration:none; color:#000000}
#mobileNavFrame .divNavItemActive{background-color:#F1F1F1}
#mobileNavFrame .divOpenNext{width:30px; float:right; cursor:hand}
#mobileNavFrame .divOpenPrevious{width:30px; float:left; cursor:hand}
#mobileNavFrame .divNavSub{background-color:#FFFFFF; position:absolute; opacity:100; display:block; left:-200%; width:95%}
#mobileNavFrame .divNavSub .divNavItem{}

#fSuche input, #fSuche select{width:100%}
#fSuche input,#fSuche select{-webkit-appearance: none;-moz-appearance: none;appearance: none;border:none;border-radius: 0;font-size: 1em;width: 100%}
#fSuche select::-ms-expand {
    display: none;
}

#fSuche input,#fSuche select {
margin-bottom:15px;
  width:100%;
  border: 1px solid #bbb;
  padding:.3em 1em .3em 1em;
  /*box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);*/
  background-color:white;
  cursor:pointer
}
#fSuche select {
  background-image:url(select-arrow.png);
  background-position: right;
  background-repeat: no-repeat;
}

#fSuche input,#fSuche select:hover {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}

#fSuche input#osp{padding:0.75em 0em 0.75em 0,5em; max-width:200px}

#fSuche label{font-style:italic; font-size:0.9em}
#fSuche h2{margin:0px 0px 20px 0px; padding:0px; font-size:1.1em; font-weight:300}

#oeffnungszeiten .oeffnungstag div{float:left; line-height:50px}
.oeffnungstag{clear:both}
.oeffnungTag{width:200px}
.oeffnungVon, .oeffnungBis{width:65px;}
.oeffnungVon{padding-right:0px; text-align:right}
.oeffnungBis{padding-left:10px; text-align:left}
.oeffungUnd{text-align:center; width:20px}

@media (max-width: 800px) {
.phone-menu-left-side a{position:absolute; left:20px; top:30px; z-index:2}
.largeImageContainer .largeImageItem, div.imageDescription{max-width:100%; width:100%}
.largeImageContainer div{max-width:100%}
#phone-header-navigation{display:block}
#mobileNavFrame{display:block}
#mobileMenuBar{display:block}
#menuStreifen, #headerArea{display:none}

#fSuche input#osp{padding:0.5em 0em 0.5em 0em; max-width:100%; width:100%}


h1{font-size:1.7em; line-height:1.5em}
h2{font-size:1.6em; line-height:1.5em}
.headerFS{display:none}

#headerImageSlogan{margin-top:-90px}
.headerImageSloganZeile1{font-family: 'Dancing Script', cursive;  font-size:3em; color:#FFFFFF; opacity:0.5; font-weight:700}
.headerImageSloganZeile2{font-family: 'Dancing Script', cursive;  font-size:2em; color:#FFFFFF; opacity:0.5; margin-top:-20px}


.fliesstext h1{margin-top:20px}



.kontaktFr{float:none}
.kontaktInput{width:95%;}
#fAnfrage #notiz{width:95%; float:none}
#kontaktCaptchaArea{width:100%; height:auto; margin-bottom:20px}

.leistungBereichItem{width:100%; max-width:100%;}

#fLoginKB #email{width:100%;}
#fLoginKB #password{width:100%; float:left}

#oeffnungszeiten .oeffnungstag div{float:left; line-height:10px}
.oeffnungTag{width:100%; margin-top:40px; margin-bottom:20px}
.oeffnungVon, .oeffnungBis{width:55px;}
.oeffungUnd{ font-size:0.8em}
}

@media (max-width: 1000px) {
	
}

@media (max-width: 1240px) {
	body, html{margin:0px}
}

@media (max-width: 1024px) {

}