*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

:root{
    --font-size-mobile: 14px;
    --font-size-tablet: 15px;
    --font-size-desktop: 16px;
    --color-header: #fecb00;
}

@media only screen and (max-width: 768px){
    /* Header */
    header{
        background: black;
        padding: 2%;
        text-transform: uppercase;
    }
    header ul{
        display: flex;
        flex-direction: row;
        gap: 5%;
        list-style: none;
        justify-content: flex-end;
        padding-right: 20px;
    }

    header ul li a{
        text-decoration: none;
        color: var(--color-header);
        font-size: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    header ul li a:hover{
        color: #fecb00cd;
    }
    
    /*Hintergrundbild*/
    /*Imageslider*/

    .slideshow-container {
      margin-top: 0%;
      max-width:100%;
      min-height: 250px;
      max-height: 400px;
      position: relative;
      height: auto;
  }

  .mySlides {
  display: none;
  max-height: 90vh;
  
  }
  
  .mySlides img{
  height: auto;
  min-height: 250px;
  max-height: 400px;
  height: 100%;
  width: 100%;
  object-fit: cover;
  }

  .mySlides:nth-child(1) img{
      object-position: right;
  }
  
  .prev, .next {
  cursor: pointer;
  position: absolute;
  bottom: 5%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  display: none;
  }
  
  .next {
  right: 5%;
  top: 50%;
  border-radius: 3px 0 0 3px;
  }
  
  .prev{
  left: 5%;
  top: 50%;
  }
  
  .prev:hover, .next:hover{
  font-size: 22px;
  }
  
  .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: none;
  transition: background-color 0.6s ease;
  }
  
  .numbertext {
  color: #f2f2f2;
  font-size: 24px;
  padding: 8px 12px;
  position: absolute;
  bottom: 20%;
  right: 5%;
  display: none;
  }
  
  .strich{
  font-size: 50px;
  line-height: 60%;
  margin-left: 15%;
  margin-right: 15%;
  
  }
  
  .fade {
  animation-name: fade;
  animation-duration: 1.5s;
  }
  
  @keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
  }
  
  .slideshow-container::after{
  content: "";
  width: 90%;
  height: 1px;
  /* background: white; */
  position: absolute;
  left: 5%;
  bottom: 15%;
  margin-top: 2%;
  display: none;
  }

    /*Nur für mobile relevant*/
    #leer{
        height: 300px;
        position: relative;
    }

    /*Textbox*/
    #text{
        text-align: center;
        line-height: 150%;
        width: 80%;
        margin-left: 10%;
        position: absolute;
        background: white;
        top: -20px;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        font-size: var(--font-size-mobile);
    }

    #text h1{
        padding: 2%;
        line-height: 130%;
        hyphens: auto;
    }

    #text ul{
        text-align: center;
        list-style: none;
       padding-left: 0;
    }

    #text ul li a{
        padding: 2%;
        display: flex;
        gap: 5%;
        text-decoration: none;
        color: black;
        text-align: center;
        width: auto;
        justify-content: center;
        align-items: center;
    }

    #text ul li a i{
        line-height: 150%;
    }

    #text ul li a:hover {
        font-weight: 600;
    }

    /*Impressum*/ 
    .impressum-bereich-center{
        text-align: center;
      }

      .impressum-bereich-center h1{
        padding: 40px;
        font-weight: 600;
      }

      .impressum-bereich-center h2{
        padding: 10px;
      }

      .impressum-bereich-center p, .Haftungsausschluss-bereich p{
        line-height: 150%;
        padding: 7.5px 5%;
        font-size: var(--fontsize-mobile);
       font-weight: 500;
        color: black;
      }

      .impressum-bereich-links{
        text-align: center;
        padding: 3% 5%;
      }

      .impressum-bereich-links h3{
        padding: 10px;
        font-size: 24px;
      }

      .impressum-bereich-links p{
        font-size: var(--fontsize-mobile);
       font-weight: 500;
        line-height: 150%;
        padding: 5px 10px;
      }

      .impressum-bereich-center a, .impressum-bereich-links a{
        color: black;
      }

      /*Datenschutzerklärung*/
      .datenschutzerklaerung{
        padding: 5% 5% 0% 5%;
      }

      .datenschutzerklaerung h1{
        padding: 20px 5%;
      }

      .datenschutzerklaerung h2{
        padding: 10px 5%;
        font-size: 24px;
      }

      .datenschutzerklaerung h3{
        padding: 10px 5%;
        font-size: 20px;
        line-height: 140%;
      }

      .datenschutzerklaerung h4{
        padding: 5px 5%;
        font-size: 18px;
        line-height: 140%;
      }

      .datenschutzerklaerung p{
        font-size: var(--fontsize-mobile);
       font-weight: 500;
        color: var(--color-p);
        line-height: 150%;
        padding: 5px 5%;
      }

      .datenschutzerklaerung ul{
        font-size: var(--fontsize-mobile);
       font-weight: 500;
        color: var(--color-p);
        line-height: 150%;
        padding: 5px 5%;
        margin-left: 10%;
      }

      .datenschutzerklaerung a{
        color: black;
      }
}

@media only screen and (min-width: 769px){
    /* Header */
    header{
        background: black;
        padding: 1%;
    }
    header ul{
        display: flex;
        flex-direction: row;
        gap: 5%;
        list-style: none;
        justify-content: flex-end;
        padding-right: 20px;
    }

    header ul li a{
        text-decoration: none;
        color: var(--color-header);
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    header ul li a:hover{
        color: #fecb00cd;
    }
    /*Hintergrundbild*/
   /*Imageslider*/

   .slideshow-container {
    /* margin-top: 20px; */
    width: 100%;
    padding: 0%;
    min-height: 400px;
    max-height: 800px;
    position: relative;
    height: auto;
}

.mySlides {
display: none;
max-height: 700px;

}

.mySlides img{
height: auto;
min-height: 400px;
max-height: 700px;
width: 100%;
object-fit: cover;
}

.prev, .next {
cursor: pointer;
position: absolute;
bottom: 5%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
display: none;
}

.next {
right: 5%;
top: 50%;
border-radius: 3px 0 0 3px;
}

.prev{
left: 5%;
top: 50%;
}

.prev:hover, .next:hover{
font-size: 22px;
}

.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: none;
transition: background-color 0.6s ease;
}

.numbertext {
color: #f2f2f2;
font-size: 24px;
padding: 8px 12px;
position: absolute;
bottom: 20%;
right: 5%;
display: none;
}

.strich{
font-size: 50px;
line-height: 60%;
margin-left: 15%;
margin-right: 15%;

}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .2}
to {opacity: 1}
}

.slideshow-container::after{
content: "";
width: 90%;
height: 1px;
background: white;
position: absolute;
left: 5%;
bottom: 15%;
margin-top: 2%;
display: none;
}

    /*Textbox*/
    #text{
        text-align: center;
        line-height: 150%;
        width: 40%;
        height: auto;
        padding: 5.5% 2.5%;
        margin-left: 5%;
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        top: 50px;
        left: 0px;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
        font-size: var(--font-size-tablet);
    }

    #text h1{
        padding: 0% 2% 10% 2%;
        line-height: 130%;
    }

    #text ul{
        text-align: center;
        list-style: none;
        padding-left: 0;
    }

    #text ul li{
        width: 100%;
        text-align: center;
    }

    #text ul li a{
        padding: 2%;
        display: flex;
        gap: 5%;
        text-decoration: none;
        color: black;
        text-align: center;
        width: auto;
        justify-content: center;
        align-items: center;
    }

    #text ul li a i{
        line-height: 150%;
    }

    #text ul li a:hover {
        font-weight: 600;
    }

    /*Impressum*/
    .impressum-bereich-center{
        text-align: center;
      }

      .impressum-bereich-center h1{
        padding: 40px;
        font-weight: 600;
        text-align: center;
      }

      .impressum-bereich-center h2{
        padding: 10px;
      }

      .impressum-bereich-center p{
        line-height: 150%;
        padding: 7.5px;
        font-size: var(--fontsize-tablet);
      }

      .impressum-bereich-links{
        text-align: center;
        padding: 1% 5%;
      }

      .impressum-bereich-links h3{
        padding: 10px;
        font-size: 24px;
      }

      .impressum-bereich-links p{
        font-size: var(--fontsize-tablet);
        line-height: 150%;
        padding: 5px 10px;
      }

      .impressum-bereich-center a, .impressum-bereich-links a{
        color: black;
      }

      /*Datenschutzerklärung*/

      .datenschutzerklaerung{
        padding: 5% 5% 0% 5%;
      }

      .datenschutzerklaerung h1{
        padding: 20px 5%;
      }

      .datenschutzerklaerung h2{
        padding: 10px 5%;
        font-size: 24px;
      }

      .datenschutzerklaerung h3{
        padding: 10px 5%;
        font-size: 22px;
      }

      .datenschutzerklaerung h4{
        padding: 5px 5%;
        font-size: 20px;
        line-height: 140%;
      }

      .datenschutzerklaerung p{
        font-size: var(--fontsize-tablet);
        line-height: 150%;
        padding: 5px 5%;
      }

      .datenschutzerklaerung ul{
        font-size: var(--fontsize-tablet);
        line-height: 150%;
        padding: 5px 5%;
        margin-left: 5%;
      }

      .datenschutzerklaerung a{
        color: black;
      }
}


@media only screen and (min-width: 1024px){
  /* Header */
    header{
        background: black;
        padding: 1%;
    }
    header ul{
        display: flex;
        flex-direction: row;
        gap: 35px;
        list-style: none;
        justify-content: flex-end;
        padding-right: 20px;
    }

    header ul li a{
        text-decoration: none;
        color: var(--color-header);
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .slideshow-container {
      /* margin-top: 20px; */
      width: 100%;
      padding: 0%;
      min-height: 400px;
      max-height: 1000px;
      position: relative;
      height: auto;
      }
      
      .mySlides {
      display: none;
      max-height: 900px;
      
      }
      
      .mySlides img{
      height: auto;
      min-height: 400px;
      max-height: 900px;
      width: 100%;
      object-fit: cover;
      }

    /*Textbox*/
    #text{
        text-align: center;
        line-height: 150%;
        width: 40%;
        height: auto;
        margin-left: 2.5%;
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        top: 80px;
        left: 15px;
        border-radius: 20px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        font-size: var(--font-size-desktop);
        padding: 3% 2.5%;
    }

    #text h1{
        padding: 0% 2% 10% 2%;
        line-height: 130%;
        font-size: 40px;
      
    }

    #text ul{
        text-align: center;
        list-style: none;
        padding-left: 0%;
    }

    #text ul li{
        width: 100%;
    }

    #text ul li a{
        padding: 2%;
        display: flex;
        gap: 5%;
        text-decoration: none;
        color: black;
        text-align: center;
        width: auto;
        
    }

    #text ul li a i{
        line-height: 150%;
    }

    #text ul li a:hover {
        font-weight: 600;
    }

    /*Impressum*/
    .impressum-bereich-center{
        text-align: center;
      }

      .impressum-bereich-center h1{
        padding: 40px;
        font-weight: 600;
      }

      .impressum-bereich-center h2{
        padding: 10px;
      }

      .impressum-bereich-center p{
        line-height: 150%;
        padding: 7.5px;
        font-size: var(--fontsize-desktop);
      }

      .impressum-bereich-links{
        text-align: center;
        padding: 1% 5%;
      }

      .impressum-bereich-links h3{
        padding: 10px;
        font-size: 24px;
      }

      .impressum-bereich-links p{
        font-size: var(--fontsize-desktop);
        line-height: 150%;
        padding: 5px 10px;
      }

      .impressum-bereich-center a, .impressum-bereich-links a{
        color: black;
      }

      /*Datenschutzerkärung*/
      .datenschutzerklaerung{
        padding: 5% 5% 0% 5%;
      }

      .datenschutzerklaerung h1{
        padding: 20px 5%;
        text-align: center;
      }

      .datenschutzerklaerung h2{
        padding: 10px 5%;
        font-size: 24px;
      }

      .datenschutzerklaerung h3{
        padding: 10px 5%;
        font-size: 22px;
      }

      .datenschutzerklaerung h4{
        padding: 5px 5%;
        font-size: 20px;
        line-height: 140%;
      }

      .datenschutzerklaerung p{
        font-size: var(--fontsize-desktop);
        line-height: 150%;
        padding: 5px 5%;
      }

      .datenschutzerklaerung ul{
        font-size: var(--fontsize-desktop);
        line-height: 150%;
        padding: 5px 5%;
        margin-left: 5%;
      }

      .datenschutzerklaerung a{
        color: black;
      }
}

@media only screen and (min-width: 1365px){
    .slideshow-container {
      /* margin-top: 20px; */
      width: 100%;
      padding: 0%;
      min-height: 400px;
      max-height: 1100px;
      position: relative;
      height: auto;
  }
  
  .mySlides {
  display: none;
  max-height: 1000px;
  
  }
  
  .mySlides img{
  height: auto;
  min-height: 400px;
  max-height: 1000px;
  width: 100%;
  object-fit: cover;
  }
  
  #text{
    width: 40%;
    top: 10%;
    left: 5%;
    padding: 3% 2.5%;
  } 
}

@media only screen and (min-width: 1965px){
  #text{
    width: 30%;
  }
}