body {
    overflow-x: hidden;
    margin: 0;

  }
  .sliderpart{
    width: 200vmin;
  height: 500px;
  overflow-x: hidden;
    top: 50%;
  left: 0;
    overflow: hidden;
  }
  
  
  img{
  width: 600px;
  }
  
  h1 {
    text-align: center;

  }
  
.sliderpart img {width: 100%;}
    .scroll{
     margin-left: 1em;
  
      display: flex;
      justify-content: center;
      align-items: center;
      width: 95%;
      flex-direction: column;
    }
    .div{
  
      height: auto;
      width: auto;
      display: flex;
      justify-content: center;
      align-items: center;
  
      margin: 100px 0;
    
    }
    
  
  
  
  
  .card-container {
    display: flex;
  justify-content: left;
  flex-wrap: wrap; 
  margin-top: 100px;} 
  
  .card {
  width: 25px;
  overflow: hidden;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
  margin: 20px; }
  
  
  
  
  .card-content{
    display: flex;
    justify-content: left;
    flex-wrap: wrap; 
    margin-top: 100px;
    }
  

    
  .card-content h3 {  font-size: 28px; margin-bottom: 8px; text-decoration: none; color: black;} 
  
  .card-content h3 {font-size: 20px; margin-bottom: 8px; }
  

  .lastarticel {

 left: 0;
 margin-left: 50px;
    position: absolute;

  }

  .nextarticel {
    right: 0;
    margin-right: 50px;
    position: absolute;
    text-align: right;


  }

  #navigation {
    height: 50px;
    font-size: 15px;

    font-family: Arial, Helvetica, sans-serif;
  }



  
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24,
}


@media screen and (max-width: 900px){ 
  .sliderpart{

  height: 300px; }
}


@media screen and (max-width: 900px){
  .div {
    flex-direction: column;
  }
  .sliderpart{
    width: 100px;
  height: 500px;
  overflow-x: hidden;

    top: 50%;
  left: 0;
    overflow: hidden;
  }
  .sliderpart {
  width: 100vw;
  height: 300px;

}


p {
  width: 80%;
  font-size: 15px;

}
.bilderliste {
  width: 300px;

}
img {
  width: 100%;
}

}