body {line-height: 150%;}
nav {padding:0 20px; background:var(--base2);
 & .cfs {justify-content: space-between; padding:0 10px; align-items: center; max-width: 1223px; margin:0 auto;}
 & .logo {max-width:222px; height: auto; margin-top: 3px;}

}
@media screen and (max-width:940px) {
  nav {padding:0 20px;text-align: center;
  & .cfs {justify-content: center; padding-bottom: 28px;}
  & .logo {width:90%; height: auto;margin-left: auto;  margin-right: auto;}
  }
}

h1 {
  font-size: 40px;
  color: #000000;
  font-weight: 500;
  line-height: 110%;
  text-align: center;
  font-family: Times;
  text-transform: uppercase;
  letter-spacing: 1px;
}

span.h1class {
  font-size: 21px;
  line-height: 60px;
  color: #a7a09a;
  margin-top: -10px;
  display: block;
  font-family: arial;
  letter-spacing: 4px;
}

.logo img {width: 100%; height:auto;}
.img-fluid {border-radius: 20px;}

a.link {color:#000000; letter-spacing: .5px; text-decoration: none; font-weight: 500; position:relative; margin:0 20px 10px 0 ; font-size: 17px; transition: all .3s ease;}
a.link:hover {color:#000; transition: all .3s ease;}
a.link::before {content:''; position:absolute; bottom:4px; right:-12px; background:url(images/pfeil.png) center center no-repeat; background-size: cover; width: 6px; height: 11px;transition:all .3s ease;}
a.link::after {content:''; left:0; bottom:0; position:absolute; background: #000000; height:1px; width:0px; bottom:2px; transition: all .3s ease;}
a.link:hover::after {width:100%; transition: all .3s ease;}
a.link:hover::before { right:-17px; transition: all .3s ease;}
& a.weiss::before {background:url(images/pfeil_weiss.png) center center no-repeat; background-size: cover;}

.flex200 {flex: 1 1 200px;}
.flex800 {flex: 1 1 800px;}

#footer {padding:100px 0; background:#383e4a; color:#fff;
 & .cfs {max-width: 1140px;}
 & h4 {color:rgba(255,255,255,.5);}
& .cfs {align-items: start;}
& .item {flex:1 1 200px;}
& a {color:#fff;margin:0;font-size:15px;}
& a::after {background-color: #fff; bottom:0px;}
}

#header {
& .cfs {padding:0;}
& .logo {max-width: 344px;}
& .menucontainer {width:385px;}
& .menu {display: flex; justify-content: space-between;}
& .header {justify-content: space-between; align-items: center; padding:1.5vw;}
& a {color:#000000; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; font-weight: 500; position:relative; margin:10px; font-size: 12px;}
& a::before {content:''; position:absolute; right:-12px; bottom:3px; height:12px; width:1px; background:rgba(255,255,255,.75); transition: all .3s ease;}
& a:last-child::before {display: none;}
& a::after {content:''; left:0; bottom:4px; position:absolute; background: #000000; height:1px; width:0px; transition: all .3s ease;}
& a:hover::after {width:100%; transition: all .3s ease;}
& a:hover::before {height:1px; transition: all .3s ease;}


/*
& a::before {content:''; position: absolute; bottom:10px; right: -20px; width:14px; height:22px; background: url(images/pfeil.png) center center no-repeat; background-size: cover;transition: all .3s ease;}
& a:hover::before {right:-30px;transition: all .3s ease;}
& a::after {content:''; position: absolute; bottom:0; left: 0px; width:0; height:3px; background:#000; transition: all .3s ease;}
& a:hover::after {width:100%; transition: all .3s ease;}
*/
}






#faq {padding: 50px 0;
  
  & .flexfull {margin-bottom: 50px;}
  & .flexfull p {max-width:1000px;font-weight: 500; font-size: 18px; margin:0 auto;}

}

#intro {padding:100px 0;
& p {font-size: 25px; font-weight: 400; max-width: 657px; margin: 32px auto 0; color: #a6a09b; line-height: 140%;}
& .kissmenu {margin: 63px auto 0;}
& .kissmenu a.link {margin-right:40px;}
}


.fragen {max-width: 1200px; font-size:18px; line-height: 150%;
& .item {padding: 28px; margin: 44px 0 10px; border-bottom: 1px solid rgba(0,0,0,.2);text-align: justify;}
& .item:last-child {border:0;}
& .question {font-weight: 600;font-size: 28px;line-height: 130%; margin: 30px 0; font-family: Times; font-weight: 100;}
& .require {color: #6b89ae;text-align: left; margin-bottom: 30px; font-size: 16px;}
& img {margin:40px 0;}
}

.headline {justify-content: left; flex-direction: column; max-width: 1131px;
& h2 {font-size: clamp(1rem, -0.5rem + 80vw, 4rem);font-family: Times;font-weight: 100;text-transform: uppercase; color:#c0c0c0;}
& p {margin: 0; font-size: 20px; font-weight: 400; text-align: left; color:#c0c0c0;}
}




.submenu {margin:50px 0; display: flex; flex-wrap: wrap;
& .submenu_item {flex: 1; border-radius: 20px; background:#fff; margin:0 10px 20px; padding:40px; display: flex; flex-direction: column;align-items: baseline;}
& a.link {margin:0 20px 5px 0;}
& h3 {font-size: 16px;font-weight: 100;font-family: times;text-transform: uppercase;}
& h3 {font-size: 16px;font-weight: 100;font-family: times;text-transform: uppercase;}
& a.link::before {bottom: 7px;}
& .small {max-width: 250px; padding:20px;}

}



.submenu2 {margin:16px 0 22px; display: flex; flex-wrap: wrap;
& .submenu_item {margin: 0 20px 20px 0; padding: 0; text-align: center;}
& .submenu_item a {margin:0;}
& .submenu_item a {margin-right:20px;}
}



.submenu3 {margin:50px 0 22px; display: flex; flex-wrap: wrap;
  & .submenu_item {text-align: center; margin: 0 10px 20px; flex: 1 1 152px;}
  & .submenu_item img {max-height: 140px; height: auto; margin: 0 auto 10px;}
  & a.link {font-size: 15px;line-height: 20px !important; margin: 0;}
  & a.link::before {display: none;}
  & a.link::after {bottom:-1px;}
}


 :is(.submenu .submenu_item:nth-child(1), .submenu .submenu_item:nth-child(1) a) {background:#e4e1da; color:#383e4a;}
 :is(.submenu .submenu_item:nth-child(2), .submenu .submenu_item:nth-child(2) a) {background:#c7bdb3; color:#071323;}
 :is(.submenu .submenu_item:nth-child(3), .submenu .submenu_item:nth-child(3) a) {background:#56687e; color:#fff;}
 :is(.submenu .submenu_item:nth-child(4), .submenu .submenu_item:nth-child(4) a) {background:#383e4a; color:#fff;}
 :is(.submenu .submenu_item:nth-child(5), .submenu .submenu_item:nth-child(5) a) {background:#071323; color:#fff;}

 .submenu .submenu_item:nth-child(3) a.link::after,  
 .submenu .submenu_item:nth-child(4) a.link::after,
 .submenu .submenu_item:nth-child(5) a.link::after {background:#ffffff;}



#planung {padding:140px 0 0; background:#f2f2f2;
& .bad {height: 126px;}
& .bad img {max-height: 75px; width:auto; margin:10px 0 10px 0;}
& .bad img.bigger {max-height: 100px; width:auto; margin:0 0 10px 0;}

}

#beratung {padding:100px 0; background:#56687e; font-size: 25px; font-weight: 400; margin: 0 auto; color: #ffffff; text-align: center; line-height: 150%;
  & .img {max-width: 100px; height:auto; display: block; margin:0 auto 50px;}
}

.textbereich {padding: 20px 0;}

.vorteil {
  background: rgb(228 225 219);
  padding: 38px;
  border-radius: 20px;
  margin: 40px 0;
  font-size: 16px;
  font-weight: 400;
  color: #393e49;
  line-height: 140%;
}

/*

#einbau {padding:140px 0; background:#ffffff;
  .cfs {max-width:1600px;}
  .headline {max-width:1532px;}
  .item {flex: 1 1 550px;}
  .headline .item {flex: 1 1 50px;}
  
}
*/

#einbau {padding:140px 0;}




#unterseiten {background: #f2f2f2; padding: 100px 0;
  .cfs {max-width: 1500px;}
  }



  @media screen and (max-width:1150px) {
    #header {
     & .header{justify-content: center;}
     & .item:nth-child(2) {order:1; flex: 1 1 100%;}
     & .item:nth-child(1) {order:2;}
     & .item:nth-child(3) {order:3;}
     & .logo {max-width:344px; margin:0 auto 20px;}
     & .menucontainer {width:auto;  }
    }
    }
    
    @media screen and (max-width:610px) {
      #header {padding: 5px 20px 24px; 
       & .item:nth-child(2) {flex: 1 1 100%;}
       
      }
      }
    @media screen and (min-width:901px) {
      #header {
        .left {justify-content: left;}
        .right {justify-content: right;}
      }
    }
    


  @media screen and (max-width:600px) {
    #einbau {padding: 60px 0;}
    .fragen {padding:0;}
    #header .menu {display: flex; justify-content: center;}
    #footer {padding: 75px 0;
      & .item {margin-bottom: 50px;}
    }
    
    #planung {padding: 40px 0 0;
    & .headline {padding: 0;}
    & .item {padding:20px;}
    & h2 {text-align: center;}
    & p { text-align: center;}
    & .fragen .item {margin:0;}
    & .question {text-align: center;}
    & img {margin: 0 auto;}
    & .small {max-width: inherit;}
    }
    .submenu {margin: 10px 0;}
    .vorteil {text-align: left; padding:25px; margin:20px 0;}


    #einbau {padding: 20px 0;
      & h2 {text-align: center;}
      & p { text-align: justify;}
      & .item {margin:0; padding:20px;}
      & .headline {padding:0;}
      & img {margin: 0 auto;}
    & .small {max-width: inherit;}
    }
  }


   @media screen and (max-width:450px) {
    #header {
    .menu {flex-direction: column;}
    .menu a {text-align: center;font-size: 16px;}
    .logo {margin: 0 auto;}
    }
    #intro {padding:30px 0;
    & h1 {font-size: 27px;}
    & span.h1class {font-size: 14px;}
    & p {font-size: 19px;    margin: 0px auto 0;}
    & .kissmenu {margin: 26px auto 0;}
    }

    

    #footer {padding: 50px 0;
    & .item {text-align: center;}
    }
  }