@font-face { 
  font-family: 'Montserrat'; 
  src: url('FONT/Montserrat-VariableFont_wght.ttf') format('truetype');
}
@font-face { 
  font-family: 'SpaceMono-Regular'; 
  src: url('FONT/SpaceMono-Regular.ttf') format('truetype');
}
@font-face { 
  font-family: 'InstrumentSerif-Regular'; 
  src: url('FONT/InstrumentSerif-Regular.ttf') format('truetype');
}

body{
transition: background-color 1s ease;
font-family: 'Montserrat', sans-serif;
background-color:#FFFCF5;  
margin: 0;
padding:0;
}



.Loading {
  z-index: 10; 
  position: fixed;
  background-color: black;
  width: 100%;
  height: 100%;
  transition: height 1s ease;
  overflow: hidden;
}

.load-SRV {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.load-SRV h2 {
  font-family: 'InstrumentSerif-Regular', sans-serif;
  font-weight: 550;
  font-size: 3.5rem;
}

.load-SRV h2, .load-SRV p,.count p  {
  margin:10px 0;
  color: #D0E3FF;
  text-shadow: 0 0 2px #D0E3FF, 0 0 4px #D0E3FF, 0 0 6px #D0E3FF;
  animation: neon 1.5s ease-in-out infinite alternate;
}

@keyframes neon {
  from {
    text-shadow: 0 0 2px #D0E3FF, 0 0 4px #D0E3FF, 0 0 6px #D0E3FF;
  }
  to {
    text-shadow: 0 0 4px #D0E3FF, 0 0 8px #D0E3FF, 0 0 12px #D0E3FF;
  }
}

.count p {
  font-family: 'SpaceMono-Regular', sans-serif;
  color: white;
  font-weight: 800;
  font-size: 6rem;
  margin: 0;
  padding:0% 1%;
  position: absolute;
  bottom: 0;
}


@media(max-width:700px){
  .count p {
     font-weight: 500;
     font-size: 4rem;
  }  
}


.NAV {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding:1.5% 2%; 
}

.NAV-1 {
 flex: 1;
 display: flex;
 justify-content: flex-start;
}
 
.NAV-1 img{
 width:250px;  
 height:auto;  
 cursor:pointer;
 position:relative;
 z-index: 2; 
}

.NAV-2 {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: flex-end;
}

.menu-button,
.page{
    display:none;
}

.NAV-LINKS {
    align-items: center;
    margin-right: 10%;
}

.NAV-LINKS a{
    margin:0% 20px;
    cursor:pointer;
    font-weight:450;
    position: relative;  
    text-decoration: none;
    overflow: hidden; 
    color:black;
}

.NAV-BUTTON button{
    font-family: 'SpaceMono-Regular', sans-serif;
    font-weight:500;
    font-size:1rem;
    color:white;
    background-color:black;
    padding:9px 15px;
    border-radius:25px;
    cursor:pointer;
    border:solid 2px black;
    transition: background-color 0.5s, color 0.5s;
}
   
.NAV-BUTTON button:hover{
    background-color:transparent;
    color:black;
}

.NAV-LINKS a::before {
    content: ''; 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px; 
    background-color:black;
    transition: width 0.3s ease;  
}
     
.NAV-LINKS a:hover::before{
    width: 100%;  
}


@media(max-width:970px){
   .NAV-LINKS,
   .NAV-BUTTON{
       display:none;
   }
   
   .menu-button{
       display: flex;
   }
   
   .menu {
       background-color: transparent;
       border: none;
       cursor: pointer;
       display: flex;
       padding: 0;
       z-index: 2; 
   }
   
   .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;
   }
   
   
   
.page {
  position:absolute;
  top: -120%;
  width: 100%;
  height:100vh;
  max-height: 100vh;
  overflow: hidden;
  transition: top 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /*background-color:#D0E3FF;*/
  background: rgba(208, 227, 255, 0.95);
  z-index: 1; 
}

.PA-LIN {
  padding:0% 5% 25% 5%;
}

.page.opened {
  top: 0;
}

.page-Links {
  display: flex;
  justify-content: space-between; 
}

.page-Links p{
  font-family: 'SpaceMono-Regular', sans-serif;
  font-weight:450;
  color:#425993;
  font-size:1.1rem;
}

.page-Links a{
  font-size:1.5rem;
  font-weight:500;
  color:black;
  text-decoration:none;
  margin-bottom: 10px; 
}

.S-SOZ, .P-SRV {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
}

.page-kontakt {
  padding-top:30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.page-kontakt a {
  font-size:1.8rem;
  font-weight:500;
  color:#425993;
  text-decoration:none;
  margin-bottom: 10px; 
}
}









.DAT{
       background-color:#ECF6FF;
       padding:7% 10%;
       border-radius:70px;
} 
   
   .DAT p{
       font-size:1.1rem;
       font-weight:450;
   }
   
   .D-EIN h1{
       word-wrap: break-word;
       font-size:4rem;
       font-weight:600;
       margin:0;
   }
   
   .D-EIN h2{
       word-wrap: break-word;
       font-size:1.3rem;
       font-weight:550;
       color:#425993;
       margin-top:10px;
   }
   
   .D-ELM{
       padding:2% 0% 0%;
   }
   
   .D-ELM b{
       font-family: 'SpaceMono-Regular', sans-serif;
       font-size:1.1rem;
       font-weight:500;
       margin-right:10px;
       color:#425993;
   }
   
   .D-ELM h2{
       word-wrap: break-word;
       font-family: 'InstrumentSerif-Regular', sans-serif; 
       font-weight:550;
       font-size:2.3rem;
   }
   
@media(max-width:1000px){
     .DAT{
         border-radius:30px;
        padding:15% 5%; 
     }
     
     .D-EIN h1{
       word-wrap: break-word;
       font-size:2.9rem;
       font-weight:500;
     }
     
     .D-ELM h2{
        font-size:2.0rem; 
     }
     
 }
   





.marquee-horizontal2 {
  display: flex;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
}

.track-horizontal2 {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-horizontal 20s linear infinite;
}

.marquee-text {
  -webkit-text-size-adjust: 100%;
  -webkit-box-direction: normal;
  white-space: nowrap;
  box-sizing: border-box;
  padding-right: 0.3em;
  padding-left: 0.3em;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  background-color:black; 
  color:white;
  font-size:3rem; 
}

@keyframes marquee-horizontal {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}



.KNT{
    flex-direction: row; 
    height:auto;
    display:flex;
} 

.KNT1{
   padding:7% 5%;
   flex:60%;
}

.KNT1 h3{
    font-size:4rem;
    font-weight:550;
    margin:0;
} 

.KNT-TXT{
    padding:5% 5% 0% 5%;  
}

.KNT-TXT p{
    font-weight:450;
    font-size:1.1rem;
}

.KNT-TXT span {
    display: block;
    height: 0.9px;
    width: 40%;
    background-color: black;
}

.KNT-E{
    display:flex;
} 

.KNT-ELM{
    padding:2% 5%;  
}

.KNT-ELM p{
    color:gray;
    font-weight:500;
    font-family: 'SpaceMono-Regular', sans-serif; 
}

.KNT-ELM a {
    font-size:1.2rem;
    font-weight:500;
    color:black;
    text-decoration:none;
    margin-top:5%;
    display: block;
    transition: color 0.5s;
}

.KNT-ELM a:hover {
   color:#425993; 
}

.KNT2 {
    flex: 40%;
    position: relative;
}

.KNT2 img {
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    object-position: center;
    position:absolute;
}




.END{
    padding:5% 8% 2%;
    background-color:#D0E3FF;
} 

.END-TOP{
    border-bottom:solid 1px #425993;
}

.END-TOP h3{
    font-size:3rem;
    font-weight:550;
    margin:0;
    padding:0;
}

.END-TOP p{
    font-family: 'SpaceMono-Regular', sans-serif; 
    font-size:1.1rem;
    font-weight:450;
    padding-bottom:2%;
}

.END-END{
    padding-top:3%;
    display:flex;
    justify-content: space-between;
}

.END-E1 button{
 font-family: 'SpaceMono-Regular', sans-serif;
 font-weight:500;
 font-size:0.9rem;
 color:white;
 background-color:black;
 padding:9px 15px;
 border-radius:25px;
 cursor:pointer;
 border:solid 2px black;
 transition: background-color 0.5s, color 0.5s;
}

.END-E1 button:hover{
 background-color:transparent;
 color:black;
}


@media(max-width:900px){
    .KNT{
         flex-direction: column;  
    } 
    
     .KNT2 img{
         position: relative;
         height:40vh;
     }
     
     .KNT2{
         order:0;
     }
     
     .KNT1{
         padding:15% 5%;
         order:1;
     }
  
    .KNT-TXT p,
    .END-TOP p{
        font-size:1.0rem;
    }
 
    .END{
        padding:12% 8% 5%;
    }
     
    .END-TOP h3{
        font-size:2.3rem;   
    }
 
    .END-END{
        padding-top:7%;
        flex-direction: column; 
    }
 
   .END-E1 button{
       font-size:0.8rem;
       margin-bottom:2%;
    }
}

/*----------------------------------------------------------------------------------------------*/
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: red; /* Hintergrundfarbe beim Markieren */
 color: white; /* Textfarbe beim Markieren */
}

/* Zusätzliches Styling für ältere Browser */
::-moz-selection {
 background-color: red;
 color: white;
 cursor: pointer;
}