/***** Menü *****/
.navbar{
  padding: 1vw 6.5%; 
  font-size: 0.9vw;
  display: flex;
  background-color:var(--light);
  position: relative; 
  top: 0;
  z-index: 10;
  border-right: none;
  align-items: flex-start;
  justify-content: space-between;
}

.navbar .navbar-right{
display: flex;
align-items: center;
justify-items: end;
}
@media ( max-width: 1048px ) {
.navbar{
display: none;
}
}
.navbar-left img {
  width: 10rem;
  margin-top: 8px;
}
.navbar-middle div{
  font-weight: 400;
  margin-left: 1vw;
  text-decoration: none;
  text-decoration-color: rgb(49, 99, 51);
  color: #333;
}
.navbar-left{
  display: flex;
  align-items: center;
}
.navbar-left img{
cursor: pointer;
}
.navbar-middle {
align-items: center;
display: flex;
cursor: default;
margin-bottom: 10px;
}
.navbar-middle a{
text-decoration: none;
cursor: pointer;
}
.navbar-middle p{
font-family: 'Prompt', sans-serif;
font-weight:400;
color: #212121;
font-size: 1rem;
letter-spacing: 1px;
text-decoration:none !important;
}
.navbar-middle p:hover{
text-decoration:none !important;
}
@media only screen and (max-width: 1500px){
.navbar-middle p{
  font-family: 'Prompt', sans-serif;
  font-weight:400;
  color: #212121;
  font-size: 0.9rem;
}
}
.navbar-middle > *{
  margin: 10px 10px 0px 10px;
}
.leistung{
padding-bottom:0px;
}
.anfrage a{
  color: var(--dark);
  cursor: pointer;
  text-decoration: none;
  font-family: 'Prompt', sans-serif;
  font-weight:400;
  color: #212121;
  font-size: 1rem;
  letter-spacing: 1px;
}
.anfragebutton{
padding:0.40rem 1.25rem;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
background-color: rgba(255, 255, 255, 0);
font-weight: 400;
display: flex;
cursor: pointer;
text-decoration: none;
letter-spacing: 0.1rem;
border: solid 0.1rem #95ad96;
transition: ease-out 0.5s;
box-shadow: inset 0 0 0 0 #3a5e3b;
color: var(--dark);
}
@media only screen and (max-width: 1040px){
.anfragebutton{
  display: none;
}
}
@media only screen and (max-width: 1200px){
.navbar{
  padding: 1vw 0rem 0.5rem 1rem;
}
}
#anfrageicon{
  margin-top: 0.35rem;
  font-size: 0.90rem;
}
.anfragebutton:hover #anfrage__btn{
  color: var(--light);
}
.anfragebutton:hover {
  box-shadow: inset 0 -100px 0 0 #3a5e3b;
  color: var(--light);
}
.anfragebutton:active {
  transform: scale(0.9);
}
.anfragebutton:hover{
  background-color: var(--light);
}
.dropdown-content img {
  width: 1.6rem;
  height: 1.1rem;
  border-radius: 0.1rem;
  margin-right: 0.5rem;
}
.lang-switcher{
  display: flex;
  align-items: center;
  margin-left: 1rem;
}
@media only screen and (max-width: 1040px){
  .lang-switcher{
    display: none;
  }
}

@media only screen and (max-width: 800px) {
  .lang-switcher {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  margin-right: 1rem;
  }
  .wrapperdiv{
    position:relative;
    top:-50px;
  }
  .kontaktdiv{
    position:relative;
    margin-top: 50px;
  }
}
.lang-switcher nav{
  display: flex;
  align-items: center;
}
.dropdown-content.show {
  display: block;
}
.dropdown-content {
  opacity: 1;
  display: none;
  padding: 0.50rem 1rem 0.50rem 0.75rem;
  position: absolute;
  top: 2.7rem;
  width: fit-content;
  background-color: #fff;
  border: 0.01rem solid #f3f3f3;
  border-radius: 0;
}
.dropdown-content a{
  text-decoration: none;
  color: var(--dark);
  font-family: var(--prompt);
  font-weight: 400;
  width: fit-content;
  display: flex;
  align-items: center;
  left: 0;
  font-family: Montserrat,sans-serif;
  }
  #leistung_i{
    font-size: 0.7rem;
    align-items: center;
    display: flex;
    margin-left: -0.2rem;
  }
  #language_i{
    font-size: 0.7rem;
    align-items: center;
    display: flex;
    margin: 0;
    padding: 0;
  }
  @media only screen and (max-width: 1200px){
    .lang-switcher{
      display: flex;
      align-items: center;
      margin-left: 1rem;
      margin-right: 1.5rem;
    }
    .dropdown-content {
      opacity: 1;
       display: none;
       padding: 0.50rem 1rem 0.50rem 0.75rem;
      position: absolute;
       top: 2.8rem;
       width: fit-content;
       background-color: #fff;
       border: 0.01rem solid #f3f3f3;
       margin-left: -5rem;
     }
  }
.dropdown-icon{
  color: #212121;
  margin-left: -0.2rem;
  font-size: 1rem;
}
.dropdown-icon-svg{
  display: block;
  z-index: 10000;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}

.dropdown-button a{
  align-items: center;
}
.is-active{
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
  background-color: #f3f3f3;
}
.not-active{
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
  border: 0.1rem solid var(--light);
}
.not-active:hover{
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
  border: 0.1rem solid #c7e2c7;
}
.rotate180{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.rotate90{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.margintop{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  margin-top: 0rem;
}
.dropdown-button a span{
  font-size: 1rem !important;
  margin-top: 0.10rem;
  font-family: 'Prompt', sans-serif;
  font-weight:400;
  color: #212121;
  letter-spacing: 1px;
}
i {
  padding-left: 7px;
  margin-right: -5px;
}
i:hover {
  padding-left: 7px;
  margin-right: -5px;
}
#arrow_down{
  display: none;
}
.leistung div li{
  display: block;
  top: 2.0rem;
  background-color: #fff;
  cursor: pointer;
  padding: 0.5vw 1vw 0.5vw 1vw;
  margin: 0.2rem;
  font-size: 0.85vw;
  background-color: rgb(247, 250, 247);
  color: #333;
}
.leistung ul i{
  padding-right: 12px;
  margin-left: -10px;
}
#leistung_ul {
  position: absolute;
  background-color: #ffffff00;
  cursor: default;
  display: none;
  padding: 0;
  margin: 0;
  padding-top: 1rem;
}
#leistung_ul:hover{
cursor: default;
text-decoration:none;
transition: none;
color:#333 ;
}
#leistung_grid{
display: block;
padding: 1rem;
justify-content: center;
text-align: left;
position: relative;
background-color: #fff;
border: 0.1rem solid #f3f3f3;
}
#leistung_grid li:hover{
cursor: pointer;
}

#leistung_grid h2{
font-size: 1rem;
line-height: 1rem;
font-family: 'Prompt', sans-serif;
color: var(--dark);
padding: 0;
text-decoration: none;
font-weight: 400;
margin-left: 0.25rem;
}

#leistungimg{
width: 4rem;
margin: 0.50rem 0rem 0.80rem 0rem;
}
#leistung_grid h3 {
font-size: 1rem;
color: var(--dark);
font-weight: 500;
font-family: var(--prompt);
line-height: 1rem;
display: flex;
align-items: center;
letter-spacing: 0.05rem;
}
#leistung_grid li{
background-color: #fff;
cursor: pointer;
text-align: center;
justify-content: center;
margin: 0;
padding: 0;
margin-bottom: 0.25rem;
padding: 0.5rem 4rem 0.5rem 0.2rem;
width: 35rem;
border: 1px solid #f3f3f3;
border-radius: 0.2rem;
}
#leistung_grid li:hover {
background-color: #fff;
cursor: pointer !important;
text-align: center;
justify-content: center;
background-color: #fff;
border: 1px solid var(--secondary);
padding: 0.5rem 4rem 0.5rem 0.2rem;
border-radius: 0.2rem;
}
#leistung_grid li a i {
background-color: #3a5e3b;
color: #fff;
padding: 0.8rem;
margin-left: 0.25rem;
border-radius: 0.2rem;
font-size: 1rem;
border: 0.1rem solid #fff;
}
#leistung_grid_div{
text-decoration-color: var(--white);
display: grid;
align-items: center;
text-decoration: none;
position: relative;
}
#leistung_grid_div:hover{
text-decoration: none;
cursor: pointer !important;
}
#leistung_grid_div h3:hover{
text-decoration: none;
cursor: pointer !important;
}
#leistung_grid_div p:hover{
text-decoration: none;
cursor: pointer !important;
}
#leistung_grid p{
line-height: 0.9rem;
font-size: 0.8rem;
color: #212121;
font-family: var(--prompt);
margin-top: 0.1rem;
max-width: fit-content;
text-align: left;
position: relative;
}
#leistung_grid li a{
align-items: center;
width: fit-content;
}
#lft{
grid-area: lft;
}
#sft{
grid-area: sft;
}
#zll{
grid-area: zll;
}
#lnd{
grid-area: lnd;
}
#del{
grid-area: del;
}
#lag{
grid-area: lag;
margin-bottom: 0 !important;
}
/*****
#sft a i{
background-color: #fffed6 !important;
color: #eabc62 !important;
padding: 0.8rem;
margin-left: 0.25rem;
border-radius: 0.2rem;
font-size: 1rem;
}
#sft:hover {
background-color: #fff;
cursor: pointer !important;
text-align: center;
justify-content: center;
background-color: #fffdea !important;
padding: 0.5rem 0.2rem;
}
#zll a i{
background-color: #ffdada !important;
color: #f95f5f !important;
padding: 0.8rem;
margin-left: 0.25rem;
border-radius: 0.2rem;
font-size: 1rem;
}
#zll:hover {
background-color: #fff;
cursor: pointer !important;
text-align: center;
justify-content: center;
background-color: #ffd2d28b !important;
padding: 0.5rem 0.2rem;
}
#lnd a i{
background-color: #dae4ff !important;
color: #5f69f9 !important;
padding: 0.8rem;
margin-left: 0.25rem;
border-radius: 0.2rem;
font-size: 1rem;
}
#lnd:hover {
background-color: #fff;
cursor: pointer !important;
text-align: center;
justify-content: center;
background-color: #d5d2ff8b !important;
padding: 0.5rem 0.2rem;
}
#del a i{
background-color: #f1daff !important;
color: #b15ff9 !important;
padding: 0.8rem;
margin-left: 0.25rem;
border-radius: 0.2rem;
font-size: 1rem;
}
#del:hover {
background-color: #fff;
cursor: pointer !important;
text-align: center;
justify-content: center;
background-color: #e9d2ff8b !important;
padding: 0.5rem 0.2rem;
}
#lag a i{
background-color: #dafff8 !important;
color: #5ff9f9 !important;
padding: 0.8rem;
margin-left: 0.25rem;
border-radius: 0.2rem;
font-size: 1rem;
}
#lag:hover {
background-color: #fff;
cursor: pointer !important;
text-align: center;
justify-content: center;
background-color: #d2f6ff8b !important;
padding: 0.5rem 0.2rem;
}
*****/

.leistung a {
font-size: 0.9vw;
color: #333;
text-decoration: none;
text-decoration-color: #fff;
display: flex;
}
.leistung a:hover{
text-decoration-color: #3a5e3b;
-webkit-text-decoration-color: rgb(49, 99, 51);
-moz-text-decoration-color: rgb(49, 99, 51);
text-underline-offset: 5px;
color:#000 ;
}
.hover-underline-menu-animation {
display: inline-block;
position: relative;
}
.hover-underline-menu-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}

.hover-underline-menu-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
top: 1.4rem;
background-color: #4c754e58;
transform-origin: bottom right;
transition: transform 0.3s ease-out;
}

.fixed {
top: 0;
padding: 1vw 6.5%;
position: fixed;
left: 0;
width: 100%;
background-color: var(--light);
border-bottom: 0.1rem solid var(--lightgrey);
opacity: 1;
animation: 0.50s ease-in-out 0s fixed;
z-index: 10000;
}

@keyframes fixed {
0% {
  transform: translate3d(0px, -60px, 0); 
}
100% {
  transform: translate3d(0, 0, 0); 
}
}


/***** Mobile Nav *****/

.mobile__nav img{
  width: 8rem;
  margin-left: 1rem;
}
.mobile__nav{
justify-content: space-between;
position: fixed;
width: 100%;
display: flex;
padding: 12px 10px 12px 10px;  
background-color: #fff;
z-index: 9999;
top: 0;
border-bottom: #f3f3f3 1px solid;
}

.hamburger{
display: block;
width: 30px;
cursor: pointer;
appearance: none;
position: relative;
border: none;
outline: none;
background: none;
}
.hamburger::after, .hamburger::before {
content: '';
width: 80%;
height: 2px;
background-color: var(--dark);
margin: 3px 3px;
transition: 0.4s;
display: block;
}
.hamburger .bar{
content: '';
width: 80%;
height: 2px;
background-color: var(--dark);
margin: 3px 3px;
transition: 0.4s;
display: block;
margin-left: 0.30rem;
}

.hamburger.active:before {
transform: rotate(-45deg) translate(-2px, 4px);
color: var(--dark);
}

.hamburger.active:after {
transform: rotate(45deg) translate(-3px, -5px);
color: var(--dark);
}

.hamburger.active .bar{
opacity: 0;
}

.mobile-nav {
position: fixed;
display: block;
top: -200%;
height: 29rem;
width: 100%;
z-index: 99;
background-color: #fff;
padding-top: 70px;
border-radius: 0.25;
transition: 0.1s;
border-bottom: solid 0.1rem #f3f3f3;
}

.mobile-nav.active{
top: 0;
}
.mobile-nav a {
display: block;
width: 100%;
margin: 0 auto 10px;
padding: 6px;
background-color: #fff;
text-decoration: none;
color: var(--dark);
border-radius: 0.25rem;
font-size: 1.4rem;
text-align: start;
padding-left: 1.25rem;
font-weight: 600;
font-family: 'Prompt', sans-serif;
letter-spacing: 0.1rem;
text-decoration:underline;
text-underline-offset: 0.20rem;
text-decoration-color: var(--primary);
text-decoration-thickness: 0.25rem;
}
.mobile__sprache {
display: flex;
width: 25%;
max-width: 100px;
text-align: center;
background-color: rgba(255, 255, 255, 0);
text-decoration: none;
color: var(--dark);
border-radius: 0.25rem;
text-align: start;
justify-content: flex-start;
}
.mobile__sprache img {
  width: 1.90rem;
  height: 1.3rem;
  border-radius: 0.1rem;
}
.mobile__sprache a {
  right: 0;
  display: block;
  height: 2.7rem;
}
.anfrage_mobile{
  padding: 0.8rem 1rem;
  background-color:#fff;
  border: solid 0.1rem #95ad96;
  border-radius: 0.2rem;
  cursor: pointer;
  line-height: 0px;
  font-family: 'Poppins', sans-serif;
  color: var(--dark);
  font-size: 0.80rem;
  font-weight: 500;
  box-shadow: inset 0 0 0 0 #3a5e3b;
  position: absolute;
  right: 0.50rem;
  top: 0.60rem;
}

  @media only screen and (min-width: 1050px){
    .mobile-nav{
      display: none;
    }
    .hamburger{
      display: none;
    }
    .mobile__nav img{
      display: none;
    }
    .mobile__nav{
    display: none;
    }
  }