body{
    overflow-x: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.kopf{ 
    height: 12vh;
    width: 100vw;
    background-color: white;
    top: 0;
    position: sticky;
    display: flex;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin: 0;
    align-items: center;
    

    
}

.überschrift{
font-size: 6vh;
font-family: "Cal Sans", sans-serif;

text-align: left;
align-items: center;
margin: auto;
margin-left: 3vw;
color: #FE8C00;





}

.unterpunkte{
    font-size: 3.5vh;
    font-family: "Cal Sans", sans-serif;
    text-align: right;
    justify-content: baseline;
    margin-right: 3vh;
    margin-bottom: 0vh;
    padding: 2vh;

}
.über1{
    font-size: 5vh;
    font-family: "Open Sans", sans-serif;
  
    align-items: center;
    text-align: center;
    margin: 2vh;
    margin-top: 0;
    }

.frontBild img{
    
    width: 100vw;
    height: 88vh;
    object-fit: cover;
    }
 .fuss{ 
    background-color: #000;
    align-items: center;
    text-align: center;
    height: 10vh;
    width: 100vw;
    justify-content: center;

    }
.kontakt{
    font-size: 3vh;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 5vh;
    justify-content: center;


    }
.scroll-container {
     overflow: auto;
     white-space: nowrap;
     padding: 0.2vh;
     margin-top: 4vh;
     margin-bottom: 4vh;

      }
      
 .scroll-container img {
    padding: 0.2vh;
    height: 65vh;
     width: auto;
      }

    .line{
background-color: #CCC;
width: 60vw;
align-items: center;
height: 0.25vh;
margin: auto;
margin-top: 7vh;
margin-bottom: 2vh;

    }
    a{
        text-decoration: none;
        color: black;
    }

    /*Handy-Variante */

   .unterpunkte-container {
  display: flex;
  flex-direction: row;  /* Desktop: nebeneinander */
  justify-content: flex-end;
  margin-right: 0vw;
}

@media (max-width: 700px) {
    .kopf {
      flex-direction: column; /* Überschrift und Unterpunkte untereinander */
      align-items: flex-start; /* Linksbündig */
     
      height: 16vh;
    }
    
    .unterpunkte-container {
      flex-direction: row; /* Unterpunkte nebeneinander in einer Reihe */
      justify-content: flex-start; /* linksbündig */
      margin-right: 0vw;
      width: 100%; /* volle Breite */
      overflow-x: auto; /* falls zu breit, scrollbar */
      gap:0vw; /* Abstand zwischen Unterpunkten */
      margin-left: 0vw;
      width: 100%;
    }

    .überschrift{
        text-align: center;
        align-items: center;
        margin-left: 0vw;
        width: 100%;
        
        
    }

    .unterpunkte{
        text-align: center;
        align-items: center;
        margin-left: 0vw;
        width: 100%;
        white-space: nowrap;
        font-size: 3vh;
        gap: 0.5vw;
        margin: 0.5vw;
        
    }
    .unterpunkte-container:hover{
color: black;

    }
    .frontBild img{

        height: 80vh;
    }
  }