@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville=swap');
:root{
    --main: rgb(35, 41, 51);
    --navleiste-hover-background: rgba(255, 255, 255, 0.36);
    --navleiste-hover-border: rgba(19, 46, 58, 0);
    --border-button: rgba(255, 255, 255, 0.518);
    --border-button-hover: rgb(204, 204, 204);
    --border-button-hover-light: whitesmoke;
    --text-shadow-weiß: rgba(139, 139, 139, 0.316);
    --kontakt: #3d3d3d;
    --kontakt-light: rgb(126, 126, 126);
    --swiper-theme-color: #262626!important;
    --highlight: #ad1f24;
    --highlighttrans: #3b0000;
    --sprungmarke: #ad1f24;
    --anthra: #262626;
    --schriftkontrast: #2d0202;
    --anthratrans: #262626c0;
    --bordertrans: #595959ae;
}




/* Überschrift */
.titel1{
    top: 50%;
}
/* Ende Überschrift */

/* Die Container */
#heizung{
    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 10vh;
    width: 100%;
    z-index: 0;
    display: flex;
}
#sanitaer{
    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 10vh;
    width: 100%;
    z-index: 0;
    display: flex;
}
#lueftung{
    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 10vh;
    width: 100%;
    z-index: 0;
    display: flex;
}
#installation{
    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 10vh;
    width: 100%;
    z-index: 0;
    display: flex;
}
#moebel{
    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 10vh;
    width: 100%;
    z-index: 0;
    display: flex;
}
/* Ende Die Container */


/* Inhalt Container */
.green{
    height: 1em;
    width: 1em;
    margin-left: 0.5em;
}
.produkte{
    display: flex;
    flex-direction: row;
    width: 90%;
    margin-left: 6%;
    height: 55vh;
    background-color: white;
    margin-bottom: 20vh;
    margin-top: 10vh;
    color: var(--anthra);
    position: relative;
}
.deko1{
    position: absolute;
    display: flex;
    height: available;
    width: 5vw;
    background-color: transparent;
    border-top: 61vh solid white;
    border-left: 3vw solid white;
    border-right: 1vw solid transparent;
    position: absolute;
    left: -0.5vw;
    z-index: 3;
    overflow: hidden;
}
.deko2{
    position: absolute;
    display: flex;
    height: available;
    width: 5vw;
    background-color: transparent;
    border-bottom: 61vh solid white;
    border-right: 3vw solid white;
    border-left: 1vw solid transparent;
    position: absolute;
    right: -0.5vw;
    top: 0;
    z-index: 3;
    overflow: hidden;
}
.fa-chevron-right{
    color: var(--highlight);
    font-size: 1em;
    align-items: center;
    justify-content: center;
    margin-right: 2vw;
}
.produkttext ul .fa-chevron-right{
    color: var(--anthra);
}
.produkttext{
    width: 55%;
    background-color: transparent;
    align-items: flex-start;
    border-bottom-style: solid;
    border-color: var(--anthra);
    border-width: 0.05em;
}
.produkttext li{
    display: flex;
    align-items: baseline;
    list-style-type: none;
    white-space: pre-wrap;
    color: var(--anthra);
}
.produkttext h1{
    font-size: 2em;
    padding: 1vh;
    padding-left: 0vw;
}
.produkttext h4{
    font-size: 3vh;
}
.produkttext ul{
    display: flex;
    flex-direction: column;
    width: 90%;
    text-align: left;
    margin: 0 auto;
    padding-bottom: 1vh;
    padding-top: 2vh;
    line-height: 2em;
    padding-left: 2vw;
}
.container {
    position: relative;
    width: 45%;
    height: available;
}
.swiper-button-next{
    scale: 0.5;
}
.swiper-button-prev{
    scale: 0.5;
}
/* Ende Inhalt Container */



/* Partner */
#partner{
    display: flex;
    width: 100%;
    text-align: center;
    color: var(--anthra);
    flex-direction: column;
    justify-content: space-around;
    margin-top: 40vh;
    margin-bottom: 10vh;
}
#partner h1{
    margin-bottom: 5vh;
    padding: 2vh;
    padding-top: 5vh;
    width: fit-content;
    margin: 0 auto;
    border-bottom-style: solid;
    border-bottom-color: var(--anthra);
    border-bottom-width: 0.05em;
}
.partnercolumn{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 80%;
    padding: 5vh;
    padding-bottom: 10vh;
    margin: 0 auto;
}
.partnerrow{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-around;
    height: 15vh;
}
.partnerlogo{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10vw;
}
.partnerlogo img{
    display: flex;
    height: auto;
    width: 100%;
    margin: auto;
    align-items: center;
    justify-content: center;
}

/* Ende Partner */


/* Beispielbilder */
.img{
    background-size: cover;
    background-position: center center;
}
.img11{
    background-image: url(medien/Bilder/kompri/074.webp);
}
.img21{
    background-image: url(medien/Bilder/kompri/075.webp);
}
.img31{
    background-image: url(medien/Bilder/kompri/076.webp);
}
.img41{
    background-image: url(medien/Bilder/kompri/077.webp);
}
.img51{
    background-image: url(medien/Bilder/kompri/078.webp);
}
.img61{
    background-image: url(medien/Bilder/kompri/079.webp);
}
.img71{
    background-image: url(medien/Bilder/kompri/080.webp);
}
.img81{
    background-image: url(medien/Bilder/kompri/081.webp);
}
.material{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    margin-left: 0%;
    background-color: var(--anthra);
    padding-top: 5vh;
    padding-bottom: 5vh;
}
.materialien{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 14vw;
    height: 20vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05);
}
.bad1{
    background-image: url(medien/Bilder/kompri/057.webp);
}
.bad2{
    background-image: url(medien/Bilder/kompri/058.webp);
}
.bad3{
    background-image: url(medien/Bilder/kompri/059.webp);
}
.bad4{
    background-image: url(medien/Bilder/kompri/065.webp);
}
.bad5{
    background-image: url(medien/Bilder/kompri/061.webp);
}
.bad6{
    background-image: url(medien/Bilder/kompri/062.webp);
}
.bad7{
    background-image: url(medien/Bilder/kompri/063.webp);
}
.bad8{
    background-image: url(medien/Bilder/kompri/064.webp);
}
.bad9{
    background-image: url(medien/Bilder/kompri/060.webp);
}
.bad10{
    background-image: url(medien/Bilder/kompri/066.webp);
}
.luft1{
    background-image: url(medien/Bilder/kompri/067.webp);
}
.luft2{
    background-image: url(medien/Bilder/kompri/068.webp);
}
.instal1{
    background-image: url(medien/Bilder/kompri/069.webp);
}
.instal5{
    background-image: url(medien/Bilder/kompri/070.webp);
}
.instal9{
    background-image: url(medien/Bilder/kompri/071.webp);
}
.instal13{
    background-image: url(medien/Bilder/kompri/072.webp);
}
.instal17{
    background-image: url(medien/Bilder/kompri/073.webp);
}
.moebel1{
    background-image: url(medien/Bilder/kompri/moebel08.webp);
}
.moebel2{
    background-image: url(medien/Bilder/kompri/moebel07.webp);
}
.moebel3{
    background-image: url(medien/Bilder/kompri/moebel06.webp);
}
.moebel4{
    background-image: url(medien/Bilder/kompri/moebel04.webp);
}
.moebel5{
    background-image: url(medien/Bilder/kompri/moebel05.webp);
}
/* Ende Beispielbilder */





@media (max-width: 1200px) and (min-width:993px) and (orientation: landscape){
/* Containerinhalt */
.produkte{
    width: 95%;
    margin-left: 4%;
    height: 60vh;
}
.produkttext h1{
    font-size: 1.8em;
}
.produkttext li{
    font-size: 0.95em;
    line-height: 1.9em;
}
.produkttext ul{
    width: 95%;
}
/* Ende Containerinhalt */

/* Frage */
.frage4{
    height: 51vh;
}
.fa-question{
    font-size: 4em;
}
/* Ende Frage */
}
    
@media (max-width: 1200px) and (min-width:601px) and (orientation: portrait) {   
        
        
        
                    /* Inhalt Container */
                     .produkte{
                      flex-direction: column;
                      width: 90%;
                      margin-left: 5%;
                      margin-right: 5%;
                      margin-top: 5vh;
                      margin-bottom: 20vh;
                      height: fit-content;
                      background-color: white;
                     }  
                     .deko1{
                     width: 5vw;
                     border-bottom: 46vh solid white;
                     border-right: 3vw solid transparent;
                     }
                     .deko2{
                      width: 5vw;
                      border-bottom: 46vh solid white;
                      border-left: 3vw solid transparent;
                     }
                     .produkttext{
                      width: 90%;
                      margin-left: 5%;
                      margin-right: 5%;
                      padding: 0%;
                      height: fit-content;
                      border-bottom-style: none;
                     }
                     .produkttext h1{
                        font-size: 1.8em;
                     }
                     .produkttext ul{
                       width: 100%;
                       font-size: 1em;
                     }
                     .container {
                        display: inline-flex;
                        flex-direction: row;
                        width: 80%;
                        margin-left: 10%;
                        height: 45vh;
                        position: relative;
                        padding-bottom: 4vh;
                        padding-top: 4vh;
                        background-color: white;
                     }
                     .swiper{
                        width: 100%;
                     }
                     .swiper-button-next{
                        visibility: hidden !important;
                     }
                     .swiper-button-prev{
                        visibility: hidden !important;
                     }
                     /* Ende Inhalt Container */
                    

                        /* Partner */
                        #partner h1{
                        padding-bottom: 4vh;
                        font-size: 2em;
                        width: fit-content;
                        margin: 0 auto;
                        margin-bottom: 2vh;
                        }
                        .partnercolumn{
                        justify-content: space-between;
                        width: 80%;
                        margin-left: 10%;
                        margin-right: 10%;
                        padding: 0;
                        }
                        .partnerrow{
                        display: inline-flex;
                        flex-direction: column;
                        justify-content: center;
                        height: fit-content;
                        }
                        .partnerlogo{
                        width: 30%;
                        margin-left: 35%;
                        margin-right: 35%;
                        }
                        .partnerlogo img{
                        margin-top: 0vh;
                        margin-bottom: 0vh;
                        }
                        /* Ende Partner */


}

@media (max-width: 992px) and (orientation: landscape){
          
                  /* Inhalt Container */
                  .produkte{
                    flex-direction: column;
                    width: 90%;
                    margin-left: 5%;
                    margin-right: 5%;
                    margin-top: 5vh;
                    margin-bottom: 30vh;
                    height: fit-content;
                    background-color: white;
                   }  
                   .deko1{
                   width: 5vw;
                   border-top: 81vh solid white;
                   border-left: 4vw solid white;
                   border-right: 2vw solid transparent;
                   }
                   .deko2{
                    width: 5vw;
                    border-bottom: 81vh solid white;
                    border-right: 4vw solid white;
                    border-left: 2vw solid transparent;
                   }
                   .produkttext{
                    width: 90%;
                    margin-left: 5%;
                    margin-right: 5%;
                    padding: 0%;
                    height: fit-content;
                    border-bottom-style: none;
                   }
                   .produkttext h1{
                      font-size: 1.8em;
                   }
                   .produkttext ul{
                     width: 100%;
                   }
                   .container {
                      display: inline-flex;
                      flex-direction: row;
                      width: 60%;
                      margin-left: 20%;
                      height: 80vh;
                      position: relative;
                      padding-bottom: 4vh;
                      padding-top: 8vh;
                      background-color: white;
                   }
                   .swiper{
                      width: 100%;
                   }
                   .swiper-button-next{
                      visibility: hidden !important;
                   }
                   .swiper-button-prev{
                      visibility: hidden !important;
                   }
                   /* Ende Inhalt Container */

                   
                   /* Partner */
                   #partner{
                   margin-top: 20vh;
                   }
                   #partner h1{
                   padding-bottom: 2vh;
                   font-size: 1.5em;
                   width: fit-content;
                   margin: 0 auto;
                   margin-bottom: 2vh;
                   }
                   .partnercolumn{
                   justify-content: space-between;
                   width: 80%;
                   margin-left: 10%;
                   margin-right: 10%;
                   padding: 0;
                   }
                   .partnerrow{
                   display: inline-flex;
                   flex-direction: column;
                   justify-content: center;
                   height: fit-content;
                   }
                   .partnerlogo{
                   width: 20%;
                   margin-left: 40%;
                   margin-right: 40%;
                   }
                   .partnerlogo img{
                   margin-top: 5vh;
                   margin-bottom: 5vh;
                   }
                   /* Ende Partner */

}
    
@media (max-width: 600px) and (orientation: portrait) {
        
            /* Header*/
            header{
                height: 85vh;
            }
            /* Ende Header*/




 



            /* Inhalt Container */
            .produkte{
                flex-direction: column;
                width: 100%;
                margin-left: 0%;
                margin-right: 0%;
                margin-top: 5vh;
                margin-bottom: 30vh;
                height: fit-content;
                background-color: white;
            }  
            .deko1{
               width: 5vw;
               border-bottom: 46vh solid white;
               border-right: 3vw solid transparent;
            }
            .deko2{
                width: 8vw;
                border-bottom: 46vh solid white;
                border-left: 3vw solid transparent;
            }
            .produkttext{
                width: 90%;
                margin-left: 5%;
                margin-right: 5%;
                padding: 0%;
                height: fit-content;
                border-bottom-style: none;
            }
            .produkttext h1{
                  font-size: 1.7em;
            }
            .produkttext ul{
                 width: 100%;
            }
            .container {
                  display: inline-flex;
                  flex-direction: row;
                  width: 100%;
                  height: 45vh;
                  position: relative;
                  padding-bottom: 4vh;
                  padding-top: 4vh;
                  background-color: white;
            }
            .swiper{
                  width: 100%;
            }
            .swiper-button-next{
                  visibility: hidden !important;
            }
            .swiper-button-prev{
                  visibility: hidden !important;
            }
            /* Ende Inhalt Container */
            

            /* Partner */
            #partner{
    margin-top: 20vh;
            }
            #partner h1{
    padding-bottom: 2vh;
    font-size: 1.5em;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2vh;
            }
            .partnercolumn{
    justify-content: space-between;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    padding: 0;
            }
            .partnerrow{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: fit-content;
            }
            .partnerlogo{
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
            }
            .partnerlogo img{
    margin-top: 0vh;
    margin-bottom: 0vh;
            }
            /* Ende Partner */

            
}