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



body{
    
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family:  "Roboto", sans-serif;
    overflow-y: hidden;
    background-color: black;
    margin-top: 8vh; /* für den fixed header */
    overflow-x: hidden;

}

html{
   overflow-x: hidden;
   width: 100vw;
}

.ü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: 3vw;
  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;
}




.conti-pack{
display: flex;
height: auto;
width: 100vw;
}


  .conti{
  display: flex;
  flex-direction: row;
  height: auto;
  margin-top: 3vh;
  align-items: flex-start
  
  }


    .film-conti{
    width: 70vw;
    margin-left: 2vw;
    margin-top: 0;
    top: 0;
    }

    video{
    margin-left: 0;
    width: 70vw;
    height: auto;
    margin-top: 0;
    
    }
     img{
    margin-left: 0;
    width: 70vw;
    height: auto;
    margin-top: 0;
    
    }


    .description-conti{
    width: 30vw;
    margin-top: 0;
    top: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    }
    
    
      .name{
      color: white; 
      font: "Roboto", sans-serif;
      text-align: left;
      margin-left: 2vw;
      font-size: 4.5vw;
      letter-spacing: -1px;
      font-weight: 800;
      top: 0;
      margin-top: 0;
      padding-top: 0;
      }




.artist{
color: white; 
font: "Roboto", sans-serif;
text-align: left;
margin-left: 2vw;
font-size: 3.8vw;
letter-spacing: -1px;
font-weight: 300;
top: 0;
margin-top: 0;
padding-top: 0;
}
.year{
color: white; 
font: "Roboto", sans-serif;
text-align: left;
margin-left: 2vw;
font-size: 3.8vw;
letter-spacing: -1px;
font-weight: 300;
top: 0;
margin-top: 0;
padding-top: 0;
}


.info{
color: black; 
background-color: white;
font: "Roboto", sans-serif;
text-align: left;
margin-left: 2vw;
font-size: 3.8vw;
letter-spacing: -1px;
font-weight: 300;
top: 0;
margin-top: 0;
padding-top: 0;
display:inline-flex;
width: auto;

}

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


}


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

   #abstand {
 margin-top: 8vh;
}
  }