@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Borel&family=Crimson+Pro:wght@500&family=Montserrat&display=swap');

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}


.Startseite {
  position: relative;  
  z-index: 2; 
  top: 0;
  display: flex;
  align-items: center; 
  background-color: BLACK;  
  max-width: 100%;
  height: auto;
}

.Startseite h1{
  padding:1%;
  margin:0;
  font-family: 'Major Mono Display', monospace;
  font-size: 4vw;
  color:white;
}

@media(max-width:880px){
  .Startseite h1{
    font-size:6vw;
  }
}

/*------------------------ Links ------------------------*/

.menu {
  display: none; 
}

.Links {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.Links a {
  color: #ffffff;    
  text-decoration: none; 
  transition: color 0.3s ease; 
  cursor: pointer; 
}

.Links a:hover {
  color: #8aaae5; 
}

/*------------------------ Menü Button ------------------------*/

@media screen and (max-width: 999px) {   
.Links a{
  display: none; 
}

.menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
}

.line {
  fill: none;
  stroke: white;    
  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;
}
}

/*----------------------------------------------------------------------------------------*/


/*---------------ANIMATION-----------------*/
.US-txt {
    position: relative;
    left: -100%; /* Startposition links außerhalb des Bildschirms */
    animation: slideIn 2s forwards; /* Keyframes-Animation mit 2 Sekunden Dauer */
}

@keyframes slideIn {
    0% {
        left: -100%;
    }
    100% {
        left: 0; /* Endposition auf der Standardposition */
    }
}
/*-----------------------------------------*/


.Über-uns {
  background-image: url('I27.jpg'); 
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 50% 100%;
  min-height: 90vh;
  margin-top: 0;
  background-attachment: fixed;
  display: flex;
  flex-direction: row; 
  align-items: center; 
  justify-content: flex-start; 
}

.US-txt {
  margin-left: 1%; 
  margin-right:53%;
}

.US-txt h2 {
  margin: 0;
  padding-bottom:10px;
  font-size: 3vw;
}

.US-txt p {

    text-align: justify;
    hyphens: auto;
    -webkit-hyphens:auto;


  padding-bottom:10px;
  margin: 0;
  font-size: 1.2vw;
}

.US-txt button {
  font-size: 1.1vw;
  background-color: transparent;
  border: 1px solid BLACK;
  border-radius: 2px;
  color: BLACK;
  padding: 10px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.US-txt button:hover {
  background-color: black;
  color: white;
}

@media(max-width:750px){
  .Über-uns{
    background-size: 100% 100vh;
  } 
   
  .US-txt {
    padding:2%;
    background-color:white;
    margin-left: 2%; 
    margin-right:10%;
  }
   

.US-txt h2 {
  margin: 0;
  padding-bottom:10px;
  font-size: 6vw;
}

.US-txt p {
  padding-bottom:10px;
  margin: 0;
  font-size: 3.2vw;
}

.US-txt button {
  font-size: 2.7vw;
  background-color: transparent;
  border: 1px solid BLACK;
  border-radius: 2px;
  color: BLACK;
  padding: 10px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
} 
}

@media (min-width: 481px) and (max-width:750px) {
    
    .US-txt {
      margin-right:20%;
    }
    
    
   .US-txt h2 {
     font-size: 5vw;
    }

    .US-txt p {
      font-size: 2.3vw;
    } 
    
    .US-txt button {
      font-size: 1.8vw;
    }
}

/*-------------------------------------------------------------------------------------------*/

.page {
  position:absolute;
  top: -110%;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  transition: top 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: black; 
  color: #fff;
  z-index: 1; 
}

.page.opened {
  top: 0;
}
  
.P-Links {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
  

.page a {
  margin-bottom: 30%;
  color: white;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 6vw;
  transition: color 0.3s ease;
  cursor: pointer;
}

.page a:hover {
  color: #8aaae5; 
}

@media (max-height: 480px) {
  .P-Links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; 
  }

  .P-Links a {
    margin-bottom: 0;
    font-size: 3vw;
    width: 50%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
  }
}




@media (min-width: 481px) and (max-width: 600px) {
  .page a {
    font-size: 4.5vw;
  }
}


@media (min-width: 601px) and (max-width: 700px) {
  .page a {
    font-size: 4vw;
  }
}


@media (min-width: 701px) and (max-width: 1000px) {
  .page a {
    font-size: 3vw;
  }
}




/*-------------------------------------------------------------------------------------------*/

.introduce{
    margin:0;
    padding:0;
    color:white;
    width:100%;
    height:auto;
    background-color:black;
}

.introduce-ELM1 {
    display: flex; 
    padding-top: 3%;
    padding-bottom:3%;
    margin-left: 3%;
    margin-right: 3%;
}

.INT-E1-IMG{
    width: 50%; 
}

.INT-E1-IMG img {
    height: 100%;  
    width: 100%;
    object-fit: cover; 
}

.INT-E1-TXT {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens:auto;
    margin-left:7%;
    margin-right:7%;
    flex: 1; 
}

.INT-E1-TXT h2 {
    text-align: right; 
    margin-top:0;
    border-bottom: 2px solid white; 
    width: 100%;
    padding-bottom: 10px;
}

@media(min-width: 751px){
 .INT-E1-TXT-img img{
    display:none;
 }
}


@media (min-width: 1400px) and (max-width: 2500px) {
    .INT-E1-TXT {
       font-size: 1.2vw;
    }
}



@media (min-width: 0px) and (max-width: 500px) {
    .INT-E1-TXT {
        margin-left: 3%;
        margin-right: 3%;
        text-align: justify;
        hyphens: auto;
        padding-top: 7%;
        padding-bottom: 7%;
        font-size: auto;
    }

     
}





@media (min-width: 0px) and (max-width:750px) {
     
    .INT-E1-IMG{
       display:none;
    }
     
    .INT-E1-TXT-img  {
      width: 100%;
    }
  
    .INT-E1-TXT-img img {
      height: 100%; 
      width: 100%; 
    }
}
 


/*---------------------------------------------------------------------------------------*/
 
.Produkt {
    margin: 0;
    padding: 0;
    color: black;
    width: 100%;
    height: auto;
    background-color: #eeeeee;
}

.Produkt h2 {
    margin: 0;
    padding: 4% 0% 1% 3%;
}

/* Stile für .Produkt-ELM */
.Produkt-ELM {
    padding: 0 1% 3% 3%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Stile für .Produkt-1 */
.Produkt-1 {
    flex-basis: calc(50% - 2%);
    margin-right: 2%;
    margin-bottom: 2%;
    padding: 0;
    box-sizing: border-box;
    border-radius: 5%;
    background-color: white;
    text-align: center;
}

/* Media Queries */
@media (min-width: 900px) {
    .Produkt-1 {
        flex-basis: calc(33.333% - 2%);
    }
}

@media (max-width: 500px) {
    .Produkt-1 {
        flex-basis: 100%;
        margin-bottom: 10%;
        margin-right: 0;
    }
}

/* Weitere Stile */
.Produkt-ÜB {
    font-weight: bold;
}

.Produkt-TXT {
    margin: 0;
    padding: 5% 5% 2% 5%;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Stile für Bilder */
.Produkt-1 img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: grayscale(100%);
    transition: filter 0.8s ease;
}

.Produkt-1 img:hover {
    filter: grayscale(0%);
}

/* Stile für Buttons */
.Produkt-1 button {
    color: black;
    margin: 4% 0;
    cursor: pointer;
    padding: 5px 20px;
    background-color: transparent;
    border: 1px solid black;
    border-radius:20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.Produkt-1 button:hover {
    background-color: black;
    color: white;
}





/* Media Queries für Textgröße */
@media (min-width: 0px) and (max-width: 750px) {
    .Produkt h2 {
        text-align: center;
        padding: 10% 0 4% 0;
    }

    .Produkt-1 {
        max-width: 90%;
    }

    .Produkt-TXT {
        font-size: 1.7vh;
    }
}


@media (min-width: 1201px) { 
    .Produkt-1 button {
        font-size: 1.2vw;
    }
}


@media (min-width: 901px) and (max-width: 1200px) {
    .Produkt-1 button {
        font-size: 1.5vw;
    }
}

@media (min-width: 600px) and (max-width: 900px) {
    .Produkt-1 button {
        font-size: 2vw;
    }
}

@media (min-width: 501px) and (max-width: 599px) {
    .Produkt-1 button {
        font-size: 2.5vw;
    }
}

@media (min-width: 1px) and (max-width: 500px) {
    .Produkt-1 button {
        font-size: 4vw;
    }
}


/*-------------------------------------Recessionen-------------------------------------*/ 
 
.Feedback{
  margin-left:2%;
  padding-top:5%;
  padding-bottom:5%;
  overflow:hidden;
}

.Feedback h2 {
  margin: 2% 0 2% 0;
}

.Feedback-Container {
display: flex;
}

.Feedback-TXT {
width: 40%;
justify-content: space-between;
align-items: flex-start;
text-align: justify;
hyphens: auto;
-webkit-hyphens:auto; 
}


.Feedback-BT button{
  margin:0% 2% 2% 0;
  padding:0;
  background-color: transparent;
  border-color:transparent ;
  cursor: pointer;
}


@media screen and (max-width: 750px) {
  .Feedback{
    margin:5% 0% 5% 5%;
    overflow:hidden;
  }
  
  .Feedback h2 {
    margin: 5% 0 5% 0%;
  }  
  
    
  .Feedback-TXT {
    margin-right:5%;
    width:auto;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .Feedback-BT button{
    margin:5% 4% 3% 2%;
  }
}

/*-----------------------------------------------------------------------------------*/

/*----------------------- Die Font einstellung -------------------------*/


@media screen and (max-width: 970px) {
  .Karussell-Inhalt {
    font-size:1.6vw;
  }
}



@media screen and (max-width: 850px) {
  .Karussell-Inhalt {
    font-size:1.8vw;
  }
}



@media screen and (max-width: 750px) {
  .Karussell-Inhalt {
    font-size:2.0vw;
  }
}



@media screen and (max-width: 650px) {
  .Karussell-Inhalt {
    font-size:2.5vw;
  }
}


@media screen and (max-width: 550px) {
  .Karussell-Inhalt {
    font-size:3.0vw;
  }
}

@media screen and (max-width: 450px) {
  .Karussell-Inhalt {
    font-size:3.3vw;
  }
}

/*----------------------------------------------------------------------*/



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

.Karussell-Inhalt {
 display: flex;
}


.Karussell-Element {
margin: 0% 2% 0% 2%;
background-color: #f2f2f2;
border-radius: 10px;
flex: 0 0 50%; 
height: auto;
padding: 5%;
display:flex;
flex-direction: column; 
justify-content: space-between;
}



@media screen and (max-width: 750px) {
  
  .Feedback-Container {
    flex-direction: column;  
  }
  
  .Karussell {
    width: 100%;  
  }
  
  .Karussell-Inhalt {
    display: flex;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens:auto; 
    /*font-size:3.5vw;*/
  }
   
}



/*------------------------------------ Termine -------------------------------------*/


.Schluss{
    background-color:#f8f6f5;
    padding:5% 10% 5% 10%;
}


.ELM1-IMG img{
    width:90%;
}


.round-blue-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; 
    height: 50px; 
    background-color: black;
    border-radius: 50%; 
    color: white; 
}

.S1 h1{
    hyphens: auto;
    -webkit-hyphens: auto;
    padding:5% 0 0 0;
    margin:0;
}

.Steps {
    display: flex;
    flex-wrap: wrap;
}


.S1 {
    flex-basis:calc(33.333% - 2%) ;    
    padding:3% 3% 3% 3%;
    margin-right:3%;
    margin-top:2%;
    box-sizing: border-box;
    border-radius: 5%;
    background-color: white;
}


.S1:last-child {
    margin-right: 0;
}


@media (min-width: 850px){
 
 .ELM1 {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
    align-items: center; 
 }

 .ELM1-TXT h1{
    margin-right:10%;
 }


 .ELM1-IMG img{
    width:80%;
 }

}

@media (min-width: 601px) and (max-width: 1000px) {
    .S1 {
    padding:5% 5% 5% 5%;
    }
}


@media (min-width: 1px) and (max-width: 600px) {
    .S1 {
    padding:10% 10% 10% 10%;
    margin-bottom:5%;
    }
}



@media (min-width: 1px) and (max-width: 1075px) {
    .S1 {
    flex-basis: 100%;
    max-width:100%;
    margin-right:0%; 
    margin-bottom:2%;
    border-radius: 20px;
    }
    
    .S1 h1{
    padding:3% 0 0 0;
    }
}




/*--------------------------------------FAQ----------------------------------------*/


.FAQ{
    max-width:100%;
    padding:3% 20% 3% 20%;
    background-color:BLACK;
    COLOR:white;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens:auto;
}


@media screen and (min-width: 1031px) {
    .FRAGEN{
    padding:2%;
    margin-bottom: 2%;
    }
  
}



@media screen and (max-width: 1030px) {
   .FAQ{
    padding:7% 5% 15% 5%;
   }
   
    .FRG p{
       margin-right:5%;
   }
   
   .FRAGEN{
    padding:3%;
    margin-bottom: 4%;
   }
 
}

.FRAGEN-ELM{
    padding-top:3%;
}

.FRAGEN{
    color:black;
    background-color:white;
    border-radius:20px;
    transition: background-color 1s;
}

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

.FRG p {
    flex: 1;
}

 

.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: 3em; /*4*/
  height: 3em; /*4*/
  border: none;
  background: none;
  border-radius: 50%;
  border: 2px solid black;
  cursor: pointer;
}

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

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


/*-------------------------------------POP-UPS--------------------------------------*/

.popup{
    display:none;
}

.popup {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7); /* Hintergrund wird verschwommen */
    display: none;
  }



.popupELM{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width:90%;
  max-height:80%;
  background-color: #fff;
  overflow: auto; 
}

.popup-header {
  display: flex;  
  justify-content: space-between;  
  align-items: center; 
  background-color: #f0f0f0;  
  padding: 10px;  
  position: sticky;  
  top: 0;  
  z-index: 1;  
}

.close-popup {
 cursor: pointer;
 border: none;
 outline: none;
 background:transparent; 
}
 
 
.popup-content{
    padding:2.5%;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

@media (min-width: 600px){
   .popupELM{
     max-width:70%;
     max-height:80%;
   }
}

@media (min-width: 1px) and (max-width: 599px) {
    .popup-content{
      padding:5%;
    }
    
    .popupELM{
     max-width:90%;
     max-height:80%;
   }
}

/*--------------------------------------------------FEEDBACK--------------------------------------------*/



.Map iframe{
    width:100%;
    height:50vh;
}


.footer{
    background-color:black;
    padding:1.5%;
    display: flex;
    justify-content: center;
}

.footer button{
  margin-right:1%;
  font-size: auto;
  background-color: transparent;
  border: 1px solid white;
  border-radius: 2px;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.footer button:hover{
   background-color: white;
  color: black;   
}

/*----------------------------- Ändere die Farbe der Scrollleiste -----------------------------*/
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #333; 
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1; 
}


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

/*-----------------------------markierte Elemente -----------------------------*/
::selection {
  color: white; 
  background: #8aaae5; 
}