@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;
}

}



.E{
    background-color:#B2F0FF;
    padding:5% 7% 5%;
}

.ELM{
    padding:0.5% 0%;
}

.ELM h1{
  font-weight: 550;
  font-size: 2.5rem;
  word-wrap: break-word;
}

.ELM h2{
    font-family: 'Lora', sans-serif;
    font-weight:500;
}
  
  
.KNT{
    padding:7% 5%;
    display:flex;
}

.KNT1{
    flex:40%;
}

.KNT-G{
    padding:10% 0 0 0%;
    display:flex;
}

.KNT1-G{
    margin: 0 5% 7% 5%;
}

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

.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:60vh;
    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:800px){
    
   .KNT {
       flex-direction: column;
   }
   
   .KNT1-G{
    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%;
    }
}

/* ------------------------------------------------------------------------------------------ */
  
  /* 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;
   }