@font-face { 
    font-family: 'Montserrat'; 
    src: url('Fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}
  
  
@font-face {
    font-family: 'Lora'; 
    src: url('Fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
}
  
  
body{
    padding:0;
    margin:0;
    font-family: 'Montserrat', sans-serif;
}
  
  
.Loading {
      z-index:10000;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height:100%;
      background: linear-gradient(to left, #d86711, #f39f00);    /* FARBE  background-color:#7a8b9a;*/  
      padding: 10px;
      display: none; 
      transition: height 1s ease;
      overflow: hidden; 
}

.Loading p {
      color: white; 
      font-weight:500;
      font-size:9rem;
      margin:0;
      position: absolute; 
      bottom: 0; 
}

@media(max-width:800px){
    .Loading p {
      font-weight:500
    }
}
  
  

.kont-icon{
    background: linear-gradient(to left, #d86711, #f39f00);
    position: fixed;
    bottom: 5%;
    right: 0%;
    z-index: 9999;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
    
.kont-icon-ELM{
    padding:12px 10px;
}

.kont-icon-ELM img{
    width:40px;
    cursor:pointer;
}

  
  .TOP {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1% 2%; 
  }
  
  
  .T1 {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }
  
  .T1 img{
    width:auto;  
    height:60px;  
    cursor:pointer;
    position:relative;
    z-index: 5;
  }
  
  .T1 p{
      font-weight:500;
      font-size:1.5rem;
      margin:0;
      padding:10px 0;
      z-index: 5;
  }
  
  .T4 a {
      position: relative;  
      text-decoration: none;
      overflow: hidden; 
      margin:0% 15px;
      cursor:pointer;
      color:black;
      font-weight:450;
  }
  
  .T4 a::before {
      content: ''; 
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px; 
      background-color:black;
      transition: width 0.3s ease;  
  }
  
  .T4 a:hover::before{
      width: 100%;  
  }
  
  .T4 a:last-of-type {
     background-color: black;
     padding:10px 15px;
     color: white; 
   }

  .T4 a:last-of-type:hover {
     background: linear-gradient(to left, #d86711, #f39f00);
  }
  
  .T4 a:last-of-type::before {
          background-color:transparent;  
  }
  
  
  .menu,
  .page{
  display:none;
  }
  
  
@media(max-width:800px){
 
  .T4 a{
      display:none;
  }   
 
  .menu {
      background-color: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      padding: 0;
  }
  
  .line {
      fill: none;
      stroke: black;    
      stroke-width: 6;
      transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .line1 {
      stroke-dasharray: 60 207;
      stroke-width: 6;
  }
  
  .line2 {
      stroke-dasharray: 60 60;
      stroke-width: 6;
  }
  
  .line3 {
      stroke-dasharray: 60 207;
      stroke-width: 6;
  }
  
  .opened .line1 {
      stroke-dasharray: 90 207;
      stroke-dashoffset: -134;
      stroke-width: 6;
  }
  
  .opened .line2 {
      stroke-dasharray: 1 60;
      stroke-dashoffset: -30;
      stroke-width: 6;
  }
  
  .opened .line3 {
      stroke-dasharray: 90 207;
      stroke-dashoffset: -134;
      stroke-width: 6;
  }
  
  
  .button {
    position: relative;
    z-index: 5; 
  }
  

.page {
  position:absolute;
  top: -130%;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  transition: top 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*background: linear-gradient(to left, #d86711, #f39f00);      0057#92  */
  background:#005792;
  color: #fff;
  z-index: 1; 
}

.page.opened {
  top: 0;
}
  
.P-Links {
  position: absolute;
  bottom: 10%;
  left: 5%;
  display: flex;
  flex-direction: column;
  align-items: left;
}
  
.page a {
  margin-bottom: 20%;
  color: white;
  font-size:2.5rem;
  font-weight:500;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  transition: color 0.3s ease;
  cursor: pointer;
}

}
  
  






.HEAD{
    height:87vh;
    display:flex;
}

.HEAD1{
    flex:1;
    padding:5% 3%;
    background-color:#80d6ff;
}


.HEAD1 p{
    font-family: 'Lora', sans-serif;
    font-size:1.1rem;
}

.HEAD1 h1{
    font-size:4rem;
    font-weight:600;
}



.HEAD1 button{
    font-family: 'Montserrat', sans-serif;  /*Montserrat  Lora */
    font-weight:500;
    font-size:0.9rem;
    color:black;
    padding:10px 15px;
    border-radius:25px;
    border:solid 2px black;
    background-color:transparent;
    cursor:pointer;
}
      
.HEAD1 button:hover{
    background-color:black;
    color:white;
    border:solid 1.5px black;
}


    
.HEAD2{
  flex:1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; 
  background-image: url('inatros/Malerarbeit-2.jpg'); /*1  6*/
} 



@media (min-width:800px){
    
  .HEAD1{
    display: flex;
    flex-direction: column;
    justify-content: center;  
  }  
  
  .HEAD1 button{
    width:180px;
  }
  
}
 
 
@media(min-width:800px) and (max-width:1100px){
    
  .HEAD1 h1{
    font-size:3.2rem;
    font-weight:600;
  }
}
 
 
@media(max-width:800px){
   .HEAD{
      height:120vh;
      flex-direction: column;
   } 
   
   .HEAD1{
       padding-top:15%;
   }
   
    .HEAD2{
        flex:2;
    }
   
   .HEAD1 h1{
       font-size:3rem;
       font-weight:550;
   }
   
}








  .UB{
      display:flex;
      padding:5% 3%;
  }
  
  .UB1{
      flex:55%;
  }
  
  .UB2{
      flex:45%;
  }
  
  .UB1 p{
      letter-spacing: 7px;
      font-weight:450;
  }
  
  .UB1 h3{
     font-family: 'Lora', sans-serif; 
     font-weight:500;
     font-size:2.3rem;
     margin:0;
  }
  
  .UB2 p{
      font-size:1.2rem;
      color:gray;
  }
  
  
  
  
  .ZA{
      padding:5% 3%;
      display:flex;
  }
  
  .ZA-ELM{
      flex:1;
      border-right:solid 1px #adadad;
      padding:2% 3%;
  }
  
  .ZA-ELM:last-child{
      border-right:none;
  }
  
  .ZA-ELM p:first-child{
      font-weight:550;
      font-size:3.5rem;
      margin:0;
  }
  
  .ZA-ELM p:nth-child(2) {
      font-weight:550;
  }
  
  
  .ZA-ELM p:nth-child(3) {
     font-family: 'Lora', sans-serif; 
  }
  
  
  @media(max-width:800px){
      .UB,
      .ZA{
         flex-direction: column;
      }
      
      .UB{
          padding-top:10%;
      }
      
      .ZA{
          padding-bottom:10%;
      }
      
      .ZA-ELM{
          border-right:none;
          border-top:solid 1px #adadad;
          padding:5% 3%;
      }
      
      .ZA-ELM p:first-child{
          font-weight:580;
      }
      
      .ZA-ELM:last-child{
          border-bottom:solid 1px #adadad;
      }
      
      .UB2 p{
        font-size:1.0rem;
      }
  }
  
  
 




 
.PJ {
    padding:5% 3%;
    background: linear-gradient(to left, #d86711, #f39f00);
}
    
    
  .PJ-EIN1 p{
      letter-spacing: 7px;
      font-weight:450;
  }
  
  .PJ-EIN1 h3{
     font-family: 'Lora', sans-serif; 
     font-weight:500;
     font-size:2.3rem;
     margin:0 0 3% 0;
  }
  
 
  
 
  .P-ELM{
      flex:1;
  }
  
  .PROJ{
      display:flex;
  }
  
  .P-ELM:first-child{
      margin-right:5%;
  }
   
  .PJ-ELM1 {
      height: 50vh;
      position: relative;
      overflow: hidden;
      background-color:black;
  }
  
  .PJ-ELM1 p {
      position: absolute;
      top: 0%;
      left: 1.5%;
      z-index: 1;
      background-color:white;
      border-radius:15px;
      padding:7px 10px;
      font-weight:550;
      font-size:0.75rem;
  }
  
  
  
  .P-IMG-D,
  .P-IMG-N{
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;  
    background-repeat: no-repeat;
    background-position: center; 
    transition: opacity 1.0s ease;  
  }
  
  
  #maler .P-IMG-N{
    background-image: url('inatros/Malerarbeit-4.jpg');   
  }
  
  #maler .P-IMG-D{
    background-image: url('inatros/Malerarbeit-3.jpg');     
  }
  
  
  #fliesen .P-IMG-N{
    background-image: url('inatros/Fliesenarbeit-1.jpg');  
  }
  
  #fliesen .P-IMG-D{
    background-image: url('inatros/Fliesenarbeit-6.jpg');  
  }
  
  .PJ-ELM2{
      padding:0 1%;
  }
  

  .PJ-ELM2-1 {
        display: flex;  
        justify-content: normal;  
        padding-top:4%;
   }

  .PJ-ELM2-1 h3,
  .PJ-ELM2-1 p{
      margin:0;
  }
  
  .PJ-ELM2-1 h3{
      font-weight:550;
      font-size:1.5rem;
  }

  .PJ-ELM2-1 p{
      color:gray;
      font-weight:450;
  }
  

    
 .PJ-ELM2-2 p{
     font-family: 'Lora', sans-serif;  /*Montserrat  Lora */
     margin:10px 0 25px 0;
     font-size:1.0rem;
     font-weight:450;
     
 }
 

  


@media(max-width:800px){
    .PROJ,
    .PJ-ELM2-1 {
        flex-direction: column;
    }
    
    .PJ-EIN1{
        margin:10% 0;
    }

    .P-ELM:first-child{
        margin-right:0;
    }
    
    .P-ELM{
        margin:5% 0; 
    }

   .PJ-ELM2{
       padding:2% 2%;
   }
    

  .PJ-ELM2-1 p{
      order:1;
      margin-bottom:5px;
  }
  
   .PJ-ELM2-1 h3{
      order:2;
      margin-bottom:0px;
    }
  
 }
  







  
  @media(min-width:800px){
    .MP{
        display:flex;
    }
    
    .MP1,
    .MP2{
        flex:1;
    }
   }
  
    .MP{
        margin:7% 15%;
        align-items: center;
    }
    
    .MP1{
        height:65vh;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center; 
        background-image: url('inatros/Malerarbeit-5.jpg'); 
    }
    
    .MP2{
        margin-left:10%;
    }

    .MP2 p{
       font-family: 'Lora', sans-serif;  /*Montserrat  Lora */ 
    }
    
    .MP2 h3{
        margin-top:0;
        font-weight:550;
        font-size:3.2rem;
    }
    
    .MP2 button{
       font-family: 'Montserrat', sans-serif;  /*Montserrat  Lora */
       font-weight:550;
       font-size:0.8rem;
       color:black;
       padding:10px 15px;
       border-radius:25px;
       border:solid 1.7px black;
       background-color:transparent;
       cursor:pointer;
    }
    
    .MP2 button:hover{
        background-color:black;
        color:white;
        border:solid 1.7px black;
    }
        
        
    @media(max-width:800px){
        .MP {
            margin:10% 3%;
            flex-direction: column;
        }
        
        .MP1{
            height:55vh;
            margin-bottom:7%;
        }
        
        .MP2{
            margin-left:0%;
            text-align:center;
        }
        
        .MP2 h3{
            font-size:2rem;
        }
        
    }




.SER-ELM{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 1000; 
    height:100vh;
    display:flex;
}


.SER-ELM1,
.SER-ELM2{
    flex:1;
}


.SER-ELM2{
    margin:3%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
    background-image: url('inatros/Malerarbeit-6.jpg');
}

.SER-ELM1{
    margin: 2% 4% 7% 4%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.SER-ELM1-1 p{
    font-family: 'Lora', sans-serif;  /*Montserrat  Lora */ 
    font-size:1.5rem;
    font-weight:450;
    margin:10% 0 1% 0;
}


.SER-ELM1-1 button{
       font-family: 'Montserrat', sans-serif;  /*Montserrat  Lora */
       font-weight:500;
       font-size:0.9rem;
       color:black;
       padding:10px 20px;
       border-radius:25px;
       border:solid 1.5px gray;
       background-color:transparent;
       cursor:pointer;
       margin-top:6%;
    }
    
.SER-ELM1-1 button:hover{
        background-color:black;
        color:white;
        border:solid 1.5px black;
    }


.SER-ELM1-1 h2{
    font-size:2.7rem;
    font-weight:550;
    margin:0;
}

.SER-ELM1-2 p{
    font-size:1.1rem;
    font-weight:450;
}



#Stuckateurarbeiten{
    background-color:#F4BB44;  /* #aeb7b2   7a8b9a */
}

#Malerarbeiten{
    background-color:#FFD580;
}

#Trockenbau{
    background-color:#F4BB44;  
}

#Fliesenverlegung{
    background-color:#FFAA33;
}

#Sanierungsarbeiten{
    background-color:#F28C28;
}







#Stuckateurarbeiten .SER-ELM2{   
    background-image: url('inatros/Stuckateurarbeiten2.jpg'); 
}

#Malerarbeiten .SER-ELM2{
    background-image: url('inatros/Malerarbeit-6.jpg');    /*Malerarbeit-9*/ 
}

#Trockenbau .SER-ELM2{   
    background-image: url('inatros/Trockenbau-2.jpg');   /* Trockenbau-2.jpg  Trockenbau1.webp */   
}

#Fliesenverlegung .SER-ELM2{
    background-image: url('inatros/Fliesenarbeit-7.jpg'); /*Fliesenarbeit-7.jpg   2*/
}

#Sanierungsarbeiten .SER-ELM2{
    background-image: url('inatros/Sanierungsarbeiten1.jpg');  
}



@media (max-width:800px){
    
    .SER-ELM{
        flex-direction: column;
    }

   .SER-ELM1{
       margin: 2% 4%;
   }
    
    .SER-ELM1-1 h2{
       font-size:2.0rem;
    } 
    
    
    .SER-ELM1-2 p{
       font-size:1.1rem;
    }
    
}









.Feedback{
  padding:10% 0% 10% 3%; /*margin*/
  overflow:hidden;
}


.Feedback-Container,
.Feedback-BT,
.Karussell-Inhalt{
  display: flex;
}

.Feedback-TXT {
  width: 40%;
}


.Feedback-BT button{
  display:flex;
  justify-content: center;
  align-items: center;    
  margin-right:3%;
  padding:0;
  border:solid 2px black;
  border-radius:20px;
  background:transparent;
  cursor: pointer;
}

.Feedback-BT button:hover{
  background-color:black;
}

.Karussell-Element p:last-child{
    font-weight:550;
}


@media screen and (min-width: 800px) {
  .Karussell-Element {
    flex: 0 0 55%;  
  }
  
  .Karussell {
    width: 50%;  
  }
  
}


@media screen and (max-width: 800px) {
  
  .Feedback-TXT {
    padding-bottom:7%;
    width:auto;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .Feedback-Container {
    flex-direction: column;  
  }
  
  .Karussell {
    width: 100%;  
  }
  
  .Karussell-Element {
    flex: 0 0 70%; 
  }
}


.Karussell {
  height: auto;
  overflow: hidden;
  position: relative;
  cursor: grab;
  cursor: -webkit-grab;
  margin-left: auto; 
  margin-bottom:5%;
}


.Karussell-Element {
  margin: 0% 2% 0% 2%;
  border-radius:25px;
  height: auto;
  padding: 3% 5%;
  display:flex;
  flex-direction: column; 
  justify-content: space-between;
}


.svg1 svg:hover path,
.svg2 svg:hover path{
  stroke: #fff;  
}


.Feedback-TXT p{
    letter-spacing: 7px;
    font-weight:450; 
}
    
.Feedback-TXT h2{
    font-family: 'Lora', sans-serif; 
    font-weight:500;
    font-size:2.3rem;
    margin:0 0 5% 0;
}

 




.FAQ {
    display: flex;
    padding:5% 3%;
    background: #ff9a3c;
}

@media (max-width:900px){
.FAQ {
    padding:14% 2%;
    flex-direction: column;
}

.faq-ub{
    padding-bottom:5%;
}

}

.faq-ub {
    flex: 30%;
}

.FRAGEN-ELM {
    flex: 70%;
}


.faq-ub p{
    padding:0;
    margin:0;
    letter-spacing: 7px;
    font-weight:450; 
}
   
.faq-ub h3{
    font-family: 'Lora', sans-serif; 
    font-weight:500;
    margin:0;
    font-size:2.3rem;
}

.FRAGEN{
    padding:1% 1% 1% 3%;
    cursor: pointer;
    border:solid 1px #B7581E;
    border-radius:30px;
    margin-bottom:2%;
    transition: background-color 1s;
}

.FRAGEN:last-child{
    margin-bottom:0%;
}

.FRG {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.FRG p {
    flex: 1;
    font-weight:550;
}


.ANT {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}

.ANT.visible {
  opacity: 1;
  max-height: 500px; /* Hier kannst du die gewünschte maximale Höhe einstellen */
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}


.FAQbutton {
  position: relative;
  width: 2.8em;  
  height: 2.8em; 
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
}

.X {
  content: '';
  position: absolute;
  top: 50%;
  left: 13%;
  width: 2em;
  height: 1.5px;
  background-color: black;
  transform-origin: center;
  transform: rotate(90deg);
  transition: transform 1s;
}

.Y {
  content: '';
  position: absolute;
  top: 50%;
  left: 13%;
  width: 2em;
  height: 1.5px;
  background-color: black;
  transform: rotate(0deg);
}





  
  
  .KNT{
      padding:7% 5%;
      display:flex;
  }
  
  .KNT1{
      flex:40%;
  }
  
  .KNT-G{
      padding:5% 0 0 0%;
      display:flex;
  }
  
  .KNT1-G{
      margin: 0 3% 0% 3%;
  }

  .KNT1-GL{
    margin: 0 0% 0% 3%;
  }
  
  .KNT1-G:last-child{
      margin: 0 0% 7% 5%;
  }

  .KNT1-GL p{
      font-size:0.9rem;
      color:gray;
      font-weight:400;
   }

  .KNT1-GL h4{
      margin:0 0 7% 0;
      padding:0;
      font-weight:550;
      font-size:1.1rem;
   }
  
  .KNT1-G p{
      padding:0;
      margin:0% 0% 3%;
      font-size:0.9rem;
      color:gray;
      font-weight:400;
  }
  
  .KNT1-G h4{
      margin:0 0 7% 0;
      padding:0;
      font-weight:550;
      font-size:1.1rem;
  }

  .KNT1-G a{
      text-decoration:none;
      font-size:1.1rem;
      font-weight:500;
      color:black; 
  }
  
  .KNT1-G a:hover{
      color:#0092ca;  
  }
  
  .KNT2{
      flex:30%;
      margin:0% 5%;
  }
  
  .KNT3 {
      flex: 20%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
  }
  
  
  .KNT2{
      height:80vh;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      background-image: url('inatros/Malerarbeit-1.jpg');
  }
  
  .KNT1 h2{
      font-weight:550;
      font-size:4rem;
  }
  
  .KNT1-TXT{
      font-family: 'Lora', sans-serif; 
      font-size:1.1rem;
      font-weight:450;
      padding:0 5%;
  }
  
  .KNT1 span{
      display: block;
      width: 40%;
      height: 1px;
      margin:0 5%;
      background-color: black;
  }
  
  
  .KNT3-1{
      padding-bottom:15%;
  }
  
  
  .KNT3-1 p,
  .KNT3-2 p{
      font-size:0.9rem;
      color:gray;
      font-weight:400;
  }
  
  .KNT3-1 a,
  .KNT3-2 a{
      text-decoration:none;
      font-size:1.2rem;
      font-weight:500;
      color:black; 
  }
  
  .KNT3-1 a:hover,
  .KNT3-2 a:hover{
      color:#0092ca;  
  }
  
  @media(max-width:1000px){
      
     .KNT {
         flex-direction: column;
     }
     
     .KNT1-G,
     .KNT1-GL{
      margin:0 3% 0 0;
     }
     
     
     .KNT1 p{
         padding:0;
     }
     
     .KNT1 span{
         margin:0;
     }
     
      .KNT3 {
          margin-top:7%;
          flex-direction: row;
      }
  
      .KNT3-1 {
          margin-right: auto;
      }
  }
  
  
  
  
  .footer{
     background-color:#80d6ff;
     padding:3% 5%;
  }
  
  .Footer1,
  .Footer2{
      display: flex;
      justify-content: space-between;
  }
  
  
  .Footer1 h2{
      margin:0;
      padding:0;
      font-weight:550;
  }
  
  
  .Footer1 p{
      font-family: 'Lora', sans-serif;
      font-size:1.1rem;
      font-weight:450;
  }
  
  
  
  
  .Footer2 a{
      text-decoration:none;
      color:black;
      font-weight:500;
      
  }
  
  .Footer2 a:hover{
      color:white;
  }
  
  .Footer2 p{
      margin:0;
      padding:0;
  }
  
  .Footer2{
      border-top:1.5px solid black;
      margin-top:3%;
      padding-top:2%;
  }
  
  
  
  @media(max-width:800px){
      
      .footer{
         padding:10% 5%;
      }
      
      .Footer2{
            flex-direction: column;
      }
      
      .Footer2 p{
          margin-top:5%;
      }
  }
  
  
/*----------------------------------------------------------------------------------------------*/
  div[style*="text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;"] {
    visibility: hidden;
  }
  
  
  /* Grundlegende Scrollleisten-Stile */
  ::-webkit-scrollbar {
   width: 12px; /* Breite der Scrollleiste */
  }
  
  /* Farbe der Scrollleisten-Schiene */
  ::-webkit-scrollbar-track {
   background-color: white; /* Hintergrundfarbe der Schiene */
  }
  
  /* Farbe des Scrollleisten-Griffs (Daumen) */
  ::-webkit-scrollbar-thumb {
   background-color: black; /* Farbe des Griffs */
   border-radius: 6px; /* Abrundung des Griffs */
   border: 3px solid white; /* Rand um den Griff */
  }
  
  /* Hover-Stil für den Scrollleisten-Griff */
  ::-webkit-scrollbar-thumb:hover {
   background-color: gray; /* Farbe bei Hover-Zustand */
  }
  
  /* Stil für den markierten Text */
  ::selection {
   background-color: #ff5722; /* Hintergrundfarbe beim Markieren */
   color: white; /* Textfarbe beim Markieren */
  }
  
  /* Zusätzliches Styling für ältere Browser */
  ::-moz-selection {
   background-color: #ff5722;
   color: white;
   cursor: pointer;
  }