@font-face {
    font-family: 'IMDGrotesk-SemiBold';
    src: url('../fonts/IMDGrotesk-SemiBold.woff2') format('woff2'),
        url('../fonts/IMDGrotesk-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IMDGrotesk-Regular';
    src: url('../fonts/IMDGrotesk-Regular.woff2') format('woff2'),
        url('../fonts/IMDGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Corbel';
    src: url('../fonts/Corbel.woff2') format('woff2'),
        url('../fonts/Corbel.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Corbel-Bold';
    src: url('../fonts/Corbel-Bold.woff2') format('woff2'),
        url('../fonts/Corbel-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Corbel-Italic';
    src: url('../fonts/Corbel-Italic.woff2') format('woff2'),
        url('../fonts/Corbel-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CorbelLight';
    src: url('../fonts/CorbelLight.woff2') format('woff2'),
        url('../fonts/CorbelLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CorbelLight-Italic';
    src: url('../fonts/CorbelLight-Italic.woff2') format('woff2'),
        url('../fonts/CorbelLight-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Corbel-BoldItalic';
    src: url('../fonts/Corbel-BoldItalic.woff2') format('woff2'),
        url('../fonts/Corbel-BoldItalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body {
  font-family: 'Corbel',sans-serif;
  color: #424346;
  font-size: 1.1rem;
  background: #fff;
}
header{
    background: #fff;
    position: sticky;
    z-index: 40;
    left: 0;
    top: 0;
    border-bottom: 1px solid #E7E7E7;
}
@media (max-width:800px){
    header{
        position: static;
    }

}

#headerinner{
    display: flex;
    align-items:center;
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
}
#logo{
 width: 300px;
}
#navigation{
 display: flex;
 justify-content: flex-end;
 width: calc(100% - 300px);
}
@media (max-width:800px){
    #navigation{
        display: none;
    }

}

#headerbildstartseite_aussen{
background: #243010;
}
@media (max-width:800px){
  #headerbildstartseite_aussen{
display: none;
}
}

body.site #headerbildstartseite{
 height: 25vh;
 width: 96%;
 max-width: 1280px;
 margin: 0 auto;
display: flex;
 align-items:center;
 background-image: url(../images/startseite.jpg);
 background-position: right center;
 background-size: contain;
 background-repeat: no-repeat;
}
body.webdesign #headerbildstartseite{
 height: 25vh;
 width: 96%;
 max-width: 1280px;
 margin: 0 auto;
display: flex;
 align-items:center;
 background-image: url(../images/webdesign.jpg);
 background-position: right center;
 background-size: contain;
 background-repeat: no-repeat;
}
body.joomla #headerbildstartseite{
 height: 25vh;
 width: 96%;
 max-width: 1280px;
 margin: 0 auto;
display: flex;
 align-items:center;
 background-image: url(../images/joomla.jpg);
 background-position: right center;
 background-size: contain;
 background-repeat: no-repeat;
}
body.referenzen #headerbildstartseite{
 height: 25vh;
 width: 96%;
 max-width: 1280px;
 margin: 0 auto;
display: flex;
 align-items:center;
 background-image: url(../images/referenzen.jpg);
 background-position: right center;
 background-size: contain;
 background-repeat: no-repeat;
}
body.referenzen .itemlinks img{
    border: 1px solid #ccc;
}

body.kontakt #headerbildstartseite{
 height: 25vh;
 width: 96%;
 max-width: 1280px;
 margin: 0 auto;
display: flex;
 align-items:center;
 background-image: url(../images/kontakt.jpg);
 background-position: right center;
 background-size: contain;
 background-repeat: no-repeat;
}
body.impressum #headerbildstartseite{
 height: 25vh;
 width: 96%;
 max-width: 1280px;
 margin: 0 auto;
display: flex;
 align-items:center;
 background-image: url(../images/impressum.jpg);
 background-position: right center;
 background-size: contain;
 background-repeat: no-repeat;
}
body.datenschutz #headerbildstartseite{
 height: 25vh;
 width: 96%;
 max-width: 1280px;
 margin: 0 auto;
display: flex;
 align-items:center;
 background-image: url(../images/datenschutz.jpg);
 background-position: right center;
 background-size: contain;
 background-repeat: no-repeat;
}
#slogan{
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
}

#slogan h2{
    font-family: 'Corbel',sans-serif;
    text-shadow: 1px 1px 1px #000;
    font-size: 2rem;
    line-height: 2rem;
    color: #fff;
    margin-bottom: 15px;
}
#slogan p{
    font-size: 1.2rem;
    color: #fff;
}
#slogan a{
 color: #fff;
 margin-right: 1.5rem;

 padding: 1rem;
 background: #3F3314;
 border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#slogan a:hover{
    background: #3F3314;
}

main{
    margin: 0 auto;
    width: 96%;
    max-width: 1280px;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.flex, .flex-inhalt, .flex-kontakt{
    display: flex;
    column-gap: 1.5rem;
    margin-bottom: 5rem;
}
.flex-kontakt{
    align-items: flex-start;
}

@media (max-width:800px){
 .flex, .flex-inhalt, .flex-kontakt{
    flex-direction: column;
    margin-bottom: 0rem;
}
}
.item{
    display: flex;
    width: 33.33333%;
    flex-direction: column;
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid #87A330;
    border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
.site .item{
      box-shadow: 0px 0px 20px 0px #e0e0e0;
  -moz-box-shadow: 0px 0px 20px 0px #e0e0e0;
  -webkit-box-shadow: 0px 0px 20px 0px #e0e0e0;
}

.item p{
    padding: 0 1.5rem 1.5rem 1.5rem;
}
.item h3{
    padding: .5rem 1.5rem .5rem 1.5rem;
}
.item img{
    width: 100%;
    height: auto;
    border-bottom: 1px solid #87A330;
}
.flex-inhalt .item{
    background-color: #FDF9F2;
    border: none;
}
.flex-inhalt .item h2{
    padding: 1.5rem 2rem .5rem 2rem;
}
.flex-inhalt .item p{
  padding: 0 2rem 0rem 2rem;
}
 .flex-inhalt .item table{
     margin: 1rem 2rem 1rem 2rem;
 }
 .flex-inhalt .item ul{
  margin: 0 2rem 0rem 2rem;
}
.flex-kontakt{
    margin-top: 2rem;
}

.flex-kontakt .itemlinks{
    width: 60%;
}
.flex-kontakt .itemlinks p{
  padding: 0 2rem 0rem 0rem;
}
.flex-kontakt .itemlinks p.abstand, p.abstand{
    margin-top: 1.5rem;
}

.flex-kontakt .itemlinks h2{
    padding: 0 2rem .5rem 0;
}
.flex-kontakt .itemlinks img{
    margin-bottom: 1.5rem;
}
.flex-kontakt .itemrechts{
    width: 40%;
}
.kontakt .itemrechts{
border: 1px solid #87A330;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
        box-shadow: 0px 0px 20px 0px #e0e0e0;
  -moz-box-shadow: 0px 0px 20px 0px #e0e0e0;
  -webkit-box-shadow: 0px 0px 20px 0px #e0e0e0;
  padding: 1.5rem;
}


body.kontakt .flex-kontakt .itemlinks{
    border: 1px solid #87A330;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
        box-shadow: 0px 0px 20px 0px #e0e0e0;
  -moz-box-shadow: 0px 0px 20px 0px #e0e0e0;
  -webkit-box-shadow: 0px 0px 20px 0px #e0e0e0;
  padding: 1.5rem;
}

.flex-kontakt .itemlinks p.daten, .daten{
  background-color: #fff;
  margin-left: 2rem;
  margin-right: 2rem;
  box-sizing: border-box;
  border: 1px solid #F6E8CD;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  color: #332607;
  line-height: 1.6;
  padding-top: .5rem;
  padding-bottom: 2rem;
  padding-left: .5rem;
  padding-right: .5rem;
}
@media (max-width:800px){
 .item, .flex-inhalt .item, .flex-kontakt .itemlinks, .flex-kontakt .itemrechts, .vierzig, .sechzig{
    margin-bottom: 2.5rem;
    flex-shrink: 0;
    height: auto;
    width: 100%;
}
body.kontakt .flex-kontakt .itemlinks{
    border-left: none;
}
}
.item a.but{
    position: absolute;
    z-index: 5;
     background: #87A330;
      color: #fff;
    border: 5px solid #fff;
    box-shadow: 0px 0px 1px 0px #312B1A;
-moz-box-shadow: 0px 0px 1px 0px #312B1A;
-webkit-box-shadow: 0px 0px 1px 0px #312B1A;
    padding: 10px;
   right: 2.5rem;
    bottom: -2rem;
}
.item a.but:hover{
  background: #2A3C24;
}

.item div.text{
    padding: 2rem;
}
.leaflet-container{
    border-top: 1px solid #3f2f56;
}

footer{
  width: 100%;
  border-top: 1px solid #695521;
  background-color: /*#121310#3F3314*/#2A3C24;
}
footer, footer a{
    color: #fff important!;
}
#footerinnen{
    margin: 0 auto;
    padding: 15px 0 15px 0;
    width: 96%;
    max-width: 1280px;
    box-sizing: border-box;
}
#footerinnen::after{
  clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
#adresse{
    display: inline-block;
    width: 45%;
    float: left;
}
@media (max-width:800px){
 #adresse{
    display: block;
    width: 100%;
    float: none;
}
}
#adresse p{
    padding: 5px 0 5px 0;
    margin: 0;
    color: #fff;
}
#adresse a{
     color: #fff;
    text-decoration: none;
}
a.mail{
    background: url(../images/mail.png) left center no-repeat;
    padding-left: 20px;
}
a.phone{
    background: url(../images/phone.png) left center no-repeat;
    padding-left: 20px;
}
a.handy{
    background: url(../images/handy.png) left center no-repeat;
    padding-left: 20px;
}
#adresse a.mail{
    background: url(../images/mail_weiss.png) left center no-repeat;
    padding-left: 20px;
}
#adresse a.phone{
    background: url(../images/phone_weiss.png) left center no-repeat;
    padding-left: 20px;
}
#adresse a.handy{
    background: url(../images/handy_weiss.png) left center no-repeat;
    padding-left: 20px;
}
.facebook{
    background: url(../images/facebook.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}
.face{
    height: 1rem;
    width: auto;
}

#naviunten{
    float: right;
    display: inline-block;
    width: 45%;
    text-align: right;
}
@media (max-width:800px){
 #naviunten{
    float: none;
    display: block;
    width: 100%;
    text-align: center;
}
}
#naviunten h3{
    color: #fff;
    font-size: 1rem;
    display: inline-block;
}
/*------Navigation oben -----*/

#navigation{
display: flex;
 flex-direction: row;
}

#navigation nav ul.nav{
 list-style-image: none;
 margin:0;
 padding: 0;
 display: inline;
}
#navigation nav ul.nav li{
  display: inline;
  margin: 0 .5rem 0 0;
  position: relative;
  line-height: normal;
  }
#navigation nav a{

}

#navigation nav a{
  font-size: 1rem;
  text-transform: uppercase;
  color: #3F3314;
  padding: 15px;
  margin-left: 15px;
  font-family: Corbel,Verdana,sans-serif;
  transition: all 400ms ease-out;
  -moz-transition: all 400ms ease-out;
  -webkit-transition: all 400ms ease-out;
  -o-transition: all 400ms ease-out;
}
#navigation .nav a:hover, .nav a:focus{
  color: #fff;
  background: #3F3314;
}
#navigation li.current .nav a, #navigation .nav li.active a{
  color: #fff;
  background: #3F3314;
   }
#navigation nav ul.nav:after{
      display: block;
    content: " ";
    clear: both;
    height: 0;
    overflow: hidden;
  }
#navigation .nav > li > a {
    display: inline-block;
}
@media (max-width:800px){
    #navigation{
        display: none;
    }

}

/*-------Navigaton unten-------*/
#naviunten ul{
    display: inline;
    float: right;
    margin: 0;
    padding: 0;
    text-align: left;
    list-style: none;
}
@media (max-width:800px){
  #naviunten ul{
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
}
#naviunten nav ul.nav li{
 margin: 0;
  }
#naviunten nav ul.nav li a{
    font-size: 1rem;
    line-height: 2rem;
    border-bottom: 1px dotted #fff;
    color: #fff;
    display: block;
    padding: 0 15px 0 0px;
    text-align: left;
    transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in; -o-transition: all 400ms ease-in;
}
#naviunten nav ul.nav li a:hover, #naviunten nav ul.nav li.active a,#naviunten nav ul.nav li a:focus {
    color: #F8F8F8;
    font-size: 1rem;
    background-color: transparent;
    padding: 0 10px 0 5px;
}
/*------------------ Layout Ende -------*/
/*---------- Formatierungen ---------*/
h1,h2,h3,h4,h5,h6{
    font-family: 'IMDGrotesk-Regular';
    margin: 0 0 10px 0;
    padding: 0;
    font-weight: normal;
}
h1{
    font-size: 2rem;
    text-align: center;
    color: #000;
    line-height: 2rem;
     padding-bottom: 30px;
    font-weight: normal;

}
h2{
    font-size: 1.8rem;
    color: #616161;
     line-height: 2rem;
}
h3{
  font-size: 1.6rem;
    color: #616161;
     line-height: 1.6rem;
     margin: 10px 0;
}
#zitate h3{
    text-align: center;
}

h4{
  font-size: 1.6rem;
    color: #000;
     line-height: 1.6rem;
}
h5{
  font-size: 1.4rem;
    color: #000;
     line-height: 1.5rem;
}
h6{
  font-size: 1.2rem;
    color: #000;
     line-height: 1.62rem;
}
img{
    max-width: 100%;
}

p{
    line-height: 1.6rem;
}
a, a:hover{
    outline: none;
    text-decoration: none;
    color: #03c7dc;
}


a:focus {
 outline:none;
 background-color: none;
}
a.portfolio,.convertforms .cf-btn {
  background: #87A330 !important;
  color: #fff !important;
  border: 5px solid #fff !important;
  box-shadow: 0px 0px 1px 0px #312B1A !important;
  -moz-box-shadow: 0px 0px 1px 0px #312B1A !important;
  -webkit-box-shadow: 0px 0px 1px 0px #312B1A !important;
  padding: 10px;
}
a.portfolio:hover, .convertforms .cf-btn:hover{
  background: #2A3C24 !important;
}
#slogan a.portfoliostart{
    background: #87A330 !important;
  color: #fff !important;
    border: 1px solid #fff;
    padding: 8px;
  font-size: 0.98rem;
  border-radius: 0;
}
#slogan a.portfoliostart:hover{
    background: #5B6F20 !important;
}

a.readon{
    margin-top: 2rem;
    border: 10px solid #fff;
    padding: 5px 10px 5px 10px;
     background-color: #452D65;
     background-image: none;
     color: #fff;
    display: inline-block;
    outline: 1px solid #000000; outline-offset: 2px;
    border: none;
    text-shadow: none;
    box-shadow: none;
    transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in; -o-transition: all 400ms ease-in;
}
a.readon:hover{
    color: #fff;
    background-color: #3B2F4B;
    text-decoration: none;
    outline: 1px solid #c9c9c9; outline-offset: 2px;
     background-image: none;
}
strong{
 font-family: 'Corbel-Bold', sans-serif;
 font-weight: normal;
}
ul{
    list-style-image: url(../images/li.jpg);
}
li{
    line-height: 1.5rem;
}
ul.bilder {
  list-style: none;
    list-style-image: none;
  list-style-image: none;
  margin: 10px 0 0 0;
  padding: 0px;
}
ul.bilder::after{
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    }
ul.bilder li {
  display: inline-block;
  width: 31.8%;
  margin: 0 2.3% 2.3% 0;
  padding: 0;
  float: left;
      box-shadow: 0px 0px 20px 0px #e0e0e0;
  -moz-box-shadow: 0px 0px 20px 0px #e0e0e0;
  -webkit-box-shadow: 0px 0px 20px 0px #e0e0e0;
}
ul.bilder li:nth-child(3n) {
  margin-right: 0;
}
ul.bilder li img{
    border: 1px solid #ccc;
    width: 100%;
    height: auto;
}
ul.bilder li:hover{
      box-shadow: 0px 0px 10px 0px #B7B7B7;
  -moz-box-shadow: 0px 0px 10px 0px #B7B7B7;
  -webkit-box-shadow: 0px 0px 10px 0px #B7B7B7;
}

@media (max-width:800px){
  ul.bilder li {
  display: block;
  width: 100%;
  margin: 0;
  margin-bottom: 1.5rem;
  padding: 0;
  float: none;
}
}
.bild{
    border: 1px solid #ccc;
    padding: 0.8rem;
}

hr {
    height: 1px;
    border: none;
    background: #695521;
}
.klein{
    font-size: 0.9rem;
}
img.rahmen{
    box-sizing: border-box;
    margin: 0;
    border: 5px solid #fff;
 box-shadow: 0px 0px 0px 1px #C9C9C9; -moz-box-shadow: 0px 0px 0px 1px #C9C9C9;-webkit-box-shadow: 0px 0px 0px 1px #C9C9C9;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}
@media (max-width:800px){
 img.rahmen{
     width: 100%;
 }

}
.cf-required-label{
 color: #d63d30;
}


.clear{

}

.clear::after{
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
.sidenav{
    display: none;
}
#open{
    display: none;
}
@media (max-width:800px){
.sidenav {
    width: 0;
    position: absolute;
    z-index: 5000;
    top: 0;
    left: 0;
    background-color: #FDF9F2;
    overflow-x: hidden;
    overflow-y:auto;
    transition: 0.5s;
    display: block;
    padding-top: 60px;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
    box-shadow: 0px 1px 10px 0px #968c8c; -moz-box-shadow: 0px 1px 10px 0px #968c8c; -webkit-box-shadow: 0px 1px 10px 0px #968c8c;
}
.sidenav h3{
    color: #fff;
    font-size: 1.2rem;

}

.sidenav .closebtn{
     position: absolute;
    top: 0;
    right: 0;
    z-index: 5000;
}
a.closebtn:hover, a.closebtn:hover img{
    border: none;
    background: #FDF9F2;
}

.sidenav ul{
    margin: 0 0 0 5px;
    border: none;
}
.sidenav ul{
  list-style: none;
  list-style-image: none;
  margin: 0 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sidenav li{
  border-bottom: 1px dotted #c2900c;
    padding: 2px 0;
}
 .sidenav li.active a{
color: #000;
padding-left: 35px;
}
.sidenav a{
    color: #616161;

    padding: 10px;
  border-left:none;
    font-size: 1.2rem;
    display: block;
    text-decoration: none;
    text-transform: none;

}

.sidenav a:hover{

}


/*.sidenav .moduletable_menu ul a:hover{
 color: #358797;
} */
#open{
    background: #FDF9F2;
    text-align: right;
    cursor:pointer;
    display: block;
    margin-bottom: 15px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

}
#mobilediv::after{
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}}
 /*------- Testimonial--------------*/
 div.portfolio{
     border: 1px solid #3F3314;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-top: none;
 }

.set_testimon{
    box-shadow: 0px 0px 20px 0px #e0e0e0 !important;
-moz-box-shadow: 0px 0px 20px 0px #e0e0e0 !important;
-webkit-box-shadow: 0px 0px 20px 0px #e0e0e0 !important;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
border-radius: 10px;
}
.reviews-block__slide{
 -webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
border-radius: 10px !important;
}

.reviews-block__text::after {
    color: #ddd !important;
    content: url(../images/qoute.png) !important;
    margin: auto !important;
    position: absolute !important;
    right: 1.5rem !important;
    bottom: 1.0rem !important;
    z-index: 2 !important;
}
.reviews-block__slide{
 padding: 1.5rem 1.5rem 1.5rem 1.5rem !important;
}

.reviews-block__person-role {
    color: #91919b !important;
     font-size: 0.90rem !important;
}
.reviews-block__person-image {
width: 120px !important;
  min-width: 60px !important;
  height: auto !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin-right: 0px !important;
}
.reviews-block__person-name {
    font-family: Corbel-Bold !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    color: #87A330 !important;
}
.reviews-block__text {
    color: #666 !important;
    font-size: 0.95rem !important;
    line-height: 1.666666666666667 !important;
    margin-bottom: 32px !important;
}
.reviews-block__text hr {
height: 0;
border-bottom: 1px dotted #87A330 !important;
background: none;
}

.owl-carousel {
/*cursor: grab;*/
}



/******************* Formular ************/
.convertforms .cf-checkbox-group, .convertforms .cf-radio-group {
align-items: flex-start !important;
}
.convertforms .cf-input[type="checkbox"], .convertforms .cf-input[type="radio"] {
  margin-top: 5px !important;
}
/******************* Scroll to top ************/
.scrollToTop-icon{
    background-image: none !important;
}