@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);
    --highlight: #22B7F2;
    --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;
    --schrift: #2393BF;
    --schriftkontrast: #2d0202;
    --anthratrans: #262626c0;
    --bordertrans: #595959ae;
}


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


/* Die Container */
#dachrinne{
    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 10vh;
    width: 100%;
    z-index: 0;
    display: flex;
}
#kantprofile{
    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 10vh;
    width: 100%;
    z-index: 0;
    display: flex;
}
/* Ende Die Container */




/* Containerinhalt */
.produkte{
    display: flex;
    flex-direction: row;
    width: 90%;
    margin-left: 6%;
    height: 50vh;
    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{
    padding-top: 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 Containerinhalt */



/* Frage */
.warumwir{
    height: fit-content;
}
.frage1{
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
}
.frage2{
    width: 85%;
}
.frage3{
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    width: 15%;
    position: relative;
}
.frage4{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: available;
    background-color: var(--sprungmarke);
}
.fa-question{
    display: inline-flex;
    text-align: center;
    font-size: 5em;
    height: fit-content;
    width: 40%;
    margin-left: 30%;
}
.frage5{
    width: 3vw;
}
/* Ende Frage */



/* Bilderslider */
  .img{
    background-size: cover;
    background-position: center center;
  }



  .img11{
    background-image: url(medien/Bilder/kompri/031.webp);
  }
  .img12{
    background-image: url(medien/Bilder/kompri/030.webp);
  }
  .img13{
    background-image: url(medien/Bilder/kompri/032.webp);
  }
  .img14{
    background-image: url(medien/Bilder/kompri/033.webp);
  }
  .img15{
    background-image: url(medien/Bilder/kompri/040.webp);
  }
  .img16{
    background-image: url(medien/Bilder/kompri/056.webp);
  }

  .img21{
    background-image: url(medien/Bilder/kompri/023.webp);
  }
  .img22{
    background-image: url(medien/Bilder/kompri/003.webp);
  }
  .img23{
    background-image: url(medien/Bilder/kompri/035.webp);
  }
  .img24{
    background-image: url(medien/Bilder/kompri/036.webp);
  }


  .img31{
    background-image: url(medien/Bilder/kompri/089.webp);
  }
  .img32{
    background-image: url(medien/Bilder/kompri/046.webp);
  }
  .img33{
    background-image: url(medien/Bilder/kompri/049.webp);
  }
  .img34{
    background-image: url(medien/Bilder/kompri/090.webp);
  }


  .img41{
    background-image: url(medien/Bilder/kompri/087.webp);
  }
  .img42{
    background-image: url(medien/Bilder/kompri/088.webp);
  }
  .img43{
    background-image: url(medien/Bilder/kompri/050.webp);
  }


  .img51{
    background-image: url(medien/Bilder/kompri/086.webp);
  }
  .img52{
    background-image: url(medien/Bilder/kompri/052.webp);
  }
  .img53{
    background-image: url(medien/Bilder/kompri/053.webp);
  }


  .img61{
    background-image: url(medien/Bilder/kompri/042.webp);
  }
  .img62{
    background-image: url(medien/Bilder/kompri/055.webp);
  }
  .img63{
    background-image: url(medien/Bilder/kompri/043.webp);
  }
  .img64{
    background-image: url(medien/Bilder/kompri/054.webp);
  }
  .img65{
    background-image: url(medien/Bilder/kompri/044.webp);
  }
  .img66{
    background-image: url(medien/Bilder/kompri/102.webp);
  }


  .img71{
    background-image: url(medien/Bilder/kompri/022.webp);
  }
  .img72{
    background-image: url(medien/Bilder/kompri/021.webp);
  }


  .img81{
    background-image: url(medien/Bilder/kompri/001.webp);
  }
  .img82{
    background-image: url(medien/Bilder/kompri/016.webp);
  }
  .img83{
    background-image: url(medien/Bilder/kompri/048.webp);
  }


  .img87{
    background-image: url(medien/Bilder/kompri/007.webp);
  }
  .img88{
    background-image: url(medien/Bilder/kompri/008.webp);
  }
  .img89{
    background-image: url(medien/Bilder/kompri/009.webp);
  }
  .img90{
    background-image: url(medien/Bilder/kompri/010.webp);
  }
  .img91{
    background-image: url(medien/Bilder/kompri/011.webp);
  }
  .img92{
    background-image: url(medien/Bilder/kompri/014.webp);
  }
  .img93{
    background-image: url(medien/Bilder/kompri/012.webp);
  }
  .img94{
    background-image: url(medien/Bilder/kompri/015.webp);
  }
  .img95{
    background-image: url(medien/Bilder/kompri/024.webp);
  }
  .img96{
    background-image: url(medien/Bilder/kompri/025.webp);
  }
  .img97{
    background-image: url(medien/Bilder/kompri/026.webp);
  }
  .img98{
    background-image: url(medien/Bilder/kompri/027.webp);
  }
  .img99{
    background-image: url(medien/Bilder/kompri/029.webp);
  }

  .img101{
    background-image: url(medien/Bilder/kompri/091.webp);
  }
  .img102{
    background-image: url(medien/Bilder/kompri/D01.webp);
  }
  .img103{
    background-image: url(medien/Bilder/kompri/D02.webp);
  }
  .img104{
    background-image: url(medien/Bilder/kompri/D03.webp);
  }
  .img105{
    background-image: url(medien/Bilder/kompri/D04.webp);
  }
  .img106{
    background-image: url(medien/Bilder/kompri/D05.webp);
  }
  .img107{
    background-image: url(medien/Bilder/kompri/D06.webp);
  }
  .img108{
    background-image: url(medien/Bilder/kompri/D07.webp);
  }
  .img109{
    background-image: url(medien/Bilder/kompri/W01.webp);
  }
  .img110{
    background-image: url(medien/Bilder/kompri/W02.webp);
  }
  .img111{
    background-image: url(medien/Bilder/kompri/W03.webp);
  }
  .img112{
    background-image: url(medien/Bilder/kompri/W04.webp);
  }
  .img113{
    background-image: url(medien/Bilder/kompri/W05.webp);
  }
  .img114{
    background-image: url(medien/Bilder/kompri/W06.webp);
  }
  .img115{
    background-image: url(medien/Bilder/kompri/W07.webp);
  }


  .img116{
    background-image: url(medien/Bilder/kompri/002.webp);
  }
  .img117{
    background-image: url(medien/Bilder/kompri/051.webp);
  }


  .img120{
    background-image: url(medien/Bilder/kompri/034.webp);
  }
  .img121{
    background-image: url(medien/Bilder/kompri/035.webp);
  }
  .img122{
    background-image: url(medien/Bilder/kompri/036.webp);
  }
  .img123{
    background-image: url(medien/Bilder/kompri/017.webp);
  }
  .img124{
    background-image: url(medien/Bilder/kompri/019.webp);
  }
  .img125{
    background-image: url(medien/Bilder/kompri/schicht.webp);
  }
/* Ende Bilderslider */


/* Formular */
.formular{
    margin: 0 auto;
    width: fit-content;
    text-align: center;
    padding: 1vh;
    padding-bottom: 5vh;
    border-top-style: solid;
    border-width: 0.05em;
    border-color: var(--kontakt);
}
.formular a{
    font-style: none;
    color: var(--highlight);
    text-decoration: none;
}
.produkte a{
    font-style: none;
    font-weight: 500;
    font-style: italic;
    color: black;
    text-decoration: none;
}
.formular .fa-solid{
    padding-right: 3vw;
    padding-left: 3vw;
    color: var(--anthra);
}
.produkte .fa-solid{
    color: var(--anthra);
}
/* Ende Formular */


/* Schriftstyle */
.black{
    color: black;
}
.light{
    font-size: 0.7em;
    line-height: 1.8em;
}
.dicke{
    font-size: 0.85em;
    filter: opacity(0.6);
}
.white{
    font-size: 0.8em;
    color: black;
    background-color: white;
    padding: 0.5em;
}
.unsichtbar .fa-chevron-right{
    visibility: hidden;
}
.einschub{
    padding-left: 2em;
}
.einschub p{
    font-size: smaller;
}
.einschub i{
    scale: 0.8;
}
.italic{
    font-style: italic;
    font-size: smaller;
}
/* Ende Schriftstyle */


/* Materialien */
.materialbilder{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    width: 100%;
    margin-top: 15vh;
    margin-bottom: 5vh;
    padding-bottom: 5vh;
    background-color: var(--anthra);
}
.materialbilder h1{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
    color: whitesmoke;
    padding-top: 8vh;
    padding-bottom: 5vh;
}
.kanister1{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
.absatz{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5vh;
    margin-bottom: 0vh;
    font-size: 1.3em;
    color: white;
    text-align: left;
}
.material{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--anthra);
    padding-top: 5vh;
    padding-bottom: 3vh;
}
.materialien p{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    color: whitesmoke;
    font-size: 1.3em;
}
.materialien{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 15vw;
    height: 15vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.leer{
    background-color: var(--anthra);
}
.anthrazink{
    background-image: url(medien/Material/001.webp);
}
.kupfer{
    background-image: url(medien/Material/002.webp);
}
.zink{
    background-image: url(medien/Material/003.webp);
}
.zinkvb{
    background-image: url(medien/Material/004.webp);
}
.zinkschief{
    background-image: url(medien/Material/005.webp);
}
.zinkgranum{
    background-image: url(medien/Material/006.webp);
}
.ST1003{
    background-color: #f7ba0b;
}
.ST1015{
    background-color: #eadebd;
}
.ST1023{
    background-color: #ffe92a;
}
.ST2004{
    background-color: #e75b12;
}
.ST3000{
    background-color: #ab2524;
}
.ST3004{
    background-color: #701f29;
}
.ST3009{
    background-color: #6d312b;
}
.ST3020{
    background-color: #bf111b;
}
.ST5002{
    background-color: #162e7b;
}
.ST5009{
    background-color: #245878;
}
.ST5010{
    background-color: #00427f;
}
.ST5011{
    background-color: #00427f;
}
.ST5013{
    background-color: #202e53;
}
.ST6002{
    background-color: #276230;
}
.ST6003{
    background-color: #4e553d;
}
.ST6005{
    background-color: #0e4438;
}
.ST6009{
    background-color: #213529;
}
.ST6011{
    background-color: #68825f;
}
.ST6020{
    background-color: #394937;
}
.ST6029{
    background-color: #006f43;
}
.ST7001{
    background-color: #8c969f;
}
.ST7012{
    background-color: #575e62;
}
.ST7015{
    background-color: #4c5057;
}
.ST7016{
    background-color: #363d43;
}
.ST7021{
    background-color: #2e3236;
}
.ST7022{
    background-color: #464644;
}
.ST7035{
    background-color: #c4caca;
}
.ST7039{
    background-color: #6d6b64;
}
.ST7040{
    background-color: #9aa0a7;
}
.ST8004{
    background-color: #904e3b;
}
.ST8011{
    background-color: #5b3927;
}
.ST8012{
    background-color: #64312a;
}
.ST8014{
    background-color: #49372a;
}
.ST8016{
    background-color: #4f3128;
}
.ST9001{
    background-color: #eee9da;
}
.ST9002{
    background-color: #dadbd5;
}
.ST9005{
    background-color: #151619;
}
.ST9006{
    background-color: #A3A8AC;
}
.ST9007{
    background-color: #8F9190;
}
.ST9010{
    background-color: #f4f4ed;
}
.ST9016{
    background-color: #f3f6f6;
}
.alustrdunkelbraun{
    background-image: url(medien/Material/007.webp);
}
.alustranthra{
    background-image: url(medien/Material/008.webp);
}
.alustrhellgrau{
    background-image: url(medien/Material/009.webp);
}
.alustroxidrot{
    background-image: url(medien/Material/010.webp);
}
.alustrdunkelgrau{
    background-image: url(medien/Material/011.webp);
}
.alu6005{
    background-color: rgb(17, 66, 50);
}
.alu7012{
  background-color: #575d5e;
}
.alu7016{
    background-color: #363d43;
}
.alu7030{
    background-color: rgb(146, 142, 133);
}
.alu7035{
    background-color: #C5C7C4;
  }
.alu7037{
    background-color: #7d7f7d;
  }
.alu7039{
    background-color: #6d6b64;
}
.alu9005{
    background-color: #151619;
}
.alu9006{
    background-color: #A3A8AC;
}
.alu9010{
    background-color: #f4f4ed;
}
.alu9016{
    background-color: #f3f6f6;
}
.alupatina{
    background-image: url(medien/Material/003.webp);
}
.aluDB703{
    background-image: url(medien/Material/012.webp);
}
.aluroh{
    background-image: url(medien/Material/013.webp);
}
.STverz{
    background-image: url(medien/Material/014.webp);
}
.VA{
    background-image: url(medien/Material/015.webp);
}
.warz{
    background-image: url(medien/Material/016.webp);
}
.lochroh{
    background-image: url(medien/Material/017.webp);
}
.lochanthra{
    background-image: url(medien/Material/018.webp);
}
.zinkloch{
    background-image: url(medien/Material/019.webp);
}
.kupferloch{
    background-image: url(medien/Material/020.webp);
}
/* Ende Materialien */








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

/* Frage */
.warumwir{
    height: 55vh;
}
.frage4{
    height: 55vh;
}
.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 */
                
    
    
                 /* Frage */
                 .warumwir{
                    height: 45vh;
                }
                 .frage1{
                     display: inline-flex;
                     flex-direction: row;
                     justify-content: space-between;
                     width: 95%;
                     margin-left: 5%;
                     margin-right: 0%;
                     height: fit-content;
                 }
                 .frage2{
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 92%;
                    height: fit-content;
                    border-style: none;
                    padding: 0;
                }
                .frage3{
                    display: inline-flex;
                    flex-direction: row;
                    justify-content: center;
                    width: 8%;
                    height: available;
                    position: relative;
                }
                .frage4{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                    background-color: var(--highlight);
                }
                 .fa-question{
                     display: inline-flex;
                     text-align: center;
                     font-size: 2em;
                     height: fit-content;
                     width: fit-content;
                     margin: 0 auto;
                     padding: 2%;
                 }
                 .frage5{
                     display: none;
                 }
                /* Ende Frage */
    



                /* Materialien */
                .materialbilder h1{
    padding-bottom: 2vh;
                }
                .kanister1{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
                }
                .absatz{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 1.3em;
                }
                .material{
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 3vh;
    padding-bottom: 1vh;
                }
                .materialien p{
    font-size: 0.9em;
    width: 80%;
    margin-left: 10%;
                }
                .materialien{
    justify-content: space-between;
    width: 20vw;
    height: 20vw;
                }
                

}

@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 */
                
    
    
                 /* Frage */
                 .frage2{
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 90%;
                    height: fit-content;
                    border-style: none;
                    padding: 0;
                }
                .frage3{
                    display: inline-flex;
                    flex-direction: row;
                    justify-content: center;
                    width: 10%;
                    height: available;
                    position: relative;
                }
                .frage4{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                    background-color: var(--highlight);
                }
                 .frage1{
                     display: inline-flex;
                     flex-direction: row;
                     justify-content: space-between;
                     width: 95%;
                     margin-left: 5%;
                     margin-right: 0%;
                     height: fit-content;
                 }
                 .fa-question{
                     display: inline-flex;
                     text-align: center;
                     font-size: 2em;
                     height: fit-content;
                     width: fit-content;
                     margin: 0 auto;
                     padding: 2%;
                 }
                 .frage5{
                     display: none;
                 }
                /* Ende Frage */
    
                 
                /* Schriftstyle */
                .white{
                    width: 12em;
                    margin: 0 auto;
                    text-align: center;
                    padding-left: 2em;
                    padding-right: 2em;
                }
    
                /* Materialien */
                .materialbilder{
                    margin-bottom: 10vh;
                }
                .materialbilder h1{
                    font-size: 2em;
                    padding-top: 8vh;
                }
                .materialien p{
                        font-size: 1.2em;
                }
                .absatz{
                        font-size: 1.3em;
                        padding-bottom: 4vh;
                        padding-top: 8vh;
                }
                .kanister1{
                        width: 90%;
                        margin-left: 5%;
                        margin-right: 5%;
                }
                .materialien{
                        width: 60%;
                        margin-left: 20%;
                        margin-right: 20%;
                        height: 25vw;
                        margin-top: 1em;
                        margin-bottom: 1em;
                }
                .material{
                        flex-direction: column;
                        justify-content: center;
                        padding: 0;
                }
                .leer{
                        display: none;
                }
                /* Ende Materialien */
}
    
@media (max-width: 600px) and (orientation: portrait) {
        
            /* Header*/
            header{
                height: 80vh;
            }
            /* 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: 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%;
             }
             .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 */
            


             /* Frage */
             .frage1{
                 display: inline-flex;
                 flex-direction: row;
                 justify-content: space-between;
                 width: 95%;
                 margin-left: 5%;
                 margin-right: 0%;
                 height: fit-content;
             }
             .frage2{
                 display: inline-flex;
                 flex-direction: column;
                 justify-content: center;
                 width: 90%;
                 height: fit-content;
                 border-style: none;
                 padding: 0;
             }
             .frage3{
                 display: inline-flex;
                 flex-direction: row;
                 justify-content: center;
                 width: 10%;
                 height: available;
                 position: relative;
             }
             .frage4{
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 width: 100%;
                 height: 100%;
                 background-color: var(--highlight);
             }
             .fa-question{
                 display: inline-flex;
                 text-align: center;
                 font-size: 2em;
                 height: fit-content;
                 width: fit-content;
                 margin: 0 auto;
                 padding: 2%;
             }
             .frage5{
                 display: none;
             }
            /* Ende Frage */

             
            /* Schriftstyle */
            .white{
                width: 12em;
                margin: 0 auto;
                text-align: center;
                padding-left: 2em;
                padding-right: 2em;
            }

            /* Materialien */
            .materialbilder h1{
                font-size: 2em;
            }
            .materialien p{
                    font-size: 1em;
            }
            .absatz{
                    font-size: 1.3em;
                    padding-bottom: 2vh;
            }
            .kanister1{
                    width: 90%;
                    margin-left: 5%;
                    margin-right: 5%;
            }
            .materialien{
                    width: 80%;
                    margin-left: 10%;
                    margin-right: 10%;
                    height: 40vw;
                    margin-top: 0.8em;
                    margin-bottom: 0.8em;
            }
            .material{
                    flex-direction: column;
                    justify-content: center;
                    padding: 0;
            }
            .leer{
                    display: none;
            }
            /* Ende Materialien */
            
}