.kopf{ 
    height: 8vh;
    width: 100vw;
    background-color: white;
    top: 0;
    position: sticky;
    display: flex;
    z-index: 1000;
    margin: 0;
    align-items: center;
    

    
}
body{
    overflow-x: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
      font-family:  "Roboto", sans-serif;
      overflow-y: hidden;
      

}
html{
    overflow-y: hidden;
}

.überschrift{
font-size: 4vh;
text-align: left;
align-items: center;
margin: auto;
margin-left: 0vw;
color: black;
font-weight: 700;
width: 90;
 font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
    margin-left: 2vw;
}

.unterpunkte{
    font-size: 3.5vh;
    text-align: right;
    justify-content: baseline;
    margin-right: 3vh;
    margin-bottom: 0vh;
    padding: 2vh;
font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

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


.logo{
height: 30vh;
width: auto;
z-index: 3;
position: absolute;
top: 56vh;
left: 50vw;
color: white;
font-size: 4rem;
transform: translate(-50%, -50%);
margin-top: 30vh;
font-weight: lighter;
line-height: 0.8;
text-align: center;
font-weight: 300;
letter-spacing: -5px;


}

.roboto-f {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;


}

.vid{
 position: fixed;         /* Bleibt immer im Hintergrund */
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Schneidet an den Rändern ab, ohne Verzerrung */

  z-index: -1;             /* Hinter allen anderen Elementen */
  pointer-events: none;    /* Klicks gehen durch */
  margin: 0;
}


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