@font-face {
    font-family:lato;
    src: url(Lato-Regular.ttf);
  } 
  
  @font-face {
    font-family: poppins;
    src: url(Poppins-Medium.ttf);
  }
  
  .headernav {
  
      height: 100px;
      width: 50%;
      top: 100px;
      position: absolute;
      z-index: 1;
      background-color: white;
      transform: translateY(-50%) translateX(-50%);
      left: 50%;
      border-radius: 10px;
      opacity: 85%;
  }
  
  
  .home {
    text-decoration: none;
    font-size: 25px;
    color: black;
    font-family: poppins, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    position: absolute;
      z-index: 2;
    top: 100px;
    left: 35%;
    transform: translateX(-50%) translateY(-50%);

}

.blog {
  text-decoration: none;
  font-size: 25px;
  color: black;
  font-family: poppins, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  position: absolute;
    z-index: 2;
  top: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

}

.galerie {
  text-decoration: none;
  font-size: 25px;
  color: black;
  font-family: poppins, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  position: absolute;
    z-index: 2;
  top: 100px;
  left: 65%;
  transform: translateX(-50%) translateY(-50%);

}

  
  .hintergrundbild {
  
    width: 100%;
    opacity: 60%;
    z-index: 1;
    position: fixed;
    top: -100px;
  }
  
  
  .abstandunten {
    width: 10px;
    height: 50px;
    margin-top:1640px ;
    position: absolute;
  
  }
  
  .blogeintrag0 {
  
    position: absolute;
    font-family: lato, "Helvetica Neue", Helvetica, Arial, "sans-serif" ;
    font-size: 30px;
    top: 300px;
    left: 50%;
    z-index: 4;
    text-align: center;
    transform: translateX(-50%);
    line-height: 50px;
  }


  .blogbox1 {
    width: 70%;
    height: 200px;
    position: absolute;
    z-index: 8;
    border-radius: 10px;
    background-color: white;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 300px;
    opacity: 85%;
  }

  .thumbnail {
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 9;
    border-radius: 10px;
    transform: translateX(-50%)translateY(-50%);
    left: 22%;
    top: 300px;
  }

  .titel1 {
    font-family: poppins, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: black;
    left: 30%;
    top: 220px;
    position: absolute;
    z-index: 9;
  }

  .datum1 {
    font-family: lato, Arial, Helvetica, sans-serif ;
    font-size: 15px;
    color: black;
    left: 71%;
    top: 228px;
    position: absolute;
    z-index: 9;



  }



 .artikellesen {
    font-family: poppins, Arial, Helvetica, sans-serif;
    font-size: 20px;
    z-index: 9;
    position: absolute;
    top: 300px;
    left: 30%;
    
 }



 .thumbnail2 {
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 9;
  border-radius: 10px;
  transform: translateX(-50%)translateY(-50%);
  left: 22%;
  top: 550px;
}

.titel2 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: black;
  left: 30%;
  top: 470px;
  position: absolute;
  z-index: 9;
}

.datum2 {
  font-family: lato, Arial, Helvetica, sans-serif ;
  font-size: 15px;
  color: black;
  left: 71%;
  top: 478px;
  position: absolute;
  z-index: 9;



}

.blogbox2 {
  width: 70%;
  height: 200px;
  position: absolute;
  z-index: 8;
  border-radius: 10px;
  background-color: white;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 550px;
  opacity: 85%;
}

.artikellesen2 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 20px;
  z-index: 9;
  position: absolute;
  top: 550px;
  left: 30%;
  
}


.thumbnail3 {
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 9;
  border-radius: 10px;
  transform: translateX(-50%)translateY(-50%);
  left: 22%;
  top: 800px;
}

.titel3 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: black;
  left: 30%;
  top: 720px;
  position: absolute;
  z-index: 9;
}

.datum3 {
  font-family: lato, Arial, Helvetica, sans-serif ;
  font-size: 15px;
  color: black;
  left: 71%;
  top: 728px;
  position: absolute;
  z-index: 9;



}

.blogbox3 {
  width: 70%;
  height: 200px;
  position: absolute;
  z-index: 8;
  border-radius: 10px;
  background-color: white;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 800px;
  opacity: 85%;
}

.artikellesen3 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 20px;
  z-index: 9;
  position: absolute;
  top: 800px;
  left: 30%;
  
}



.thumbnail4 {
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 9;
  border-radius: 10px;
  transform: translateX(-50%)translateY(-50%);
  left: 22%;
  top: 1050px;
}

.titel4 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: black;
  left: 30%;
  top: 970px;
  position: absolute;
  z-index: 9;
}

.datum4 {
  font-family: lato, Arial, Helvetica, sans-serif ;
  font-size: 15px;
  color: black;
  left: 71%;
  top: 978px;
  position: absolute;
  z-index: 9;



}

.blogbox4 {
  width: 70%;
  height: 200px;
  position: absolute;
  z-index: 8;
  border-radius: 10px;
  background-color: white;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 1050px;
  opacity: 85%;
}

.artikellesen4 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 20px;
  z-index: 9;
  position: absolute;
  top: 1050px;
  left: 30%;
}

.thumbnail5 {
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 9;
  border-radius: 10px;
  transform: translateX(-50%)translateY(-50%);
  left: 22%;
  top: 1300px;
}

.titel5 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: black;
  left: 30%;
  top: 1220px;
  position: absolute;
  z-index: 9;
}

.datum5 {
  font-family: lato, Arial, Helvetica, sans-serif ;
  font-size: 15px;
  color: black;
  left: 71%;
  top: 1228px;
  position: absolute;
  z-index: 9;
}

.blogbox5 {
  width: 70%;
  height: 200px;
  position: absolute;
  z-index: 8;
  border-radius: 10px;
  background-color: white;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 1300px;
  opacity: 85%;
}

.artikellesen5 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 20px;
  z-index: 9;
  position: absolute;
  top: 1300px;
  left: 30%;
}

.thumbnail6 {
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 9;
  border-radius: 10px;
  transform: translateX(-50%)translateY(-50%);
  left: 22%;
  top: 1550px;
}

.titel6 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: black;
  left: 30%;
  top: 1470px;
  position: absolute;
  z-index: 9;
}

.datum6 {
  font-family: lato, Arial, Helvetica, sans-serif ;
  font-size: 15px;
  color: black;
  left: 71%;
  top: 1478px;
  position: absolute;
  z-index: 9;
}

.blogbox6 {
  width: 70%;
  height: 200px;
  position: absolute;
  z-index: 8;
  border-radius: 10px;
  background-color: white;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 1550px;
  opacity: 85%;
}

.artikellesen6 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 20px;
  z-index: 9;
  position: absolute;
  top: 1550px;
  left: 30%;
}


/* Dropdown-Menü verstecken und Toggle-Button formatieren */
.dropdown {
  display: none;
}

.dropdown-toggle {
  display: none;
  background-color: white;
  font-size: 20px;
  color: black;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-family: poppins, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

/* Dropdown-Inhalt */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  width: 100%;
  left: 0;
  z-index: 2;
}

.dropdown-content a {
  text-decoration: none;
  color: black;
  padding: 10px 20px;
  display: block;
  font-family: poppins, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 18px;
}

.dropdown-content a:hover {
  background-color: #f0f0f0;
}


/* Anpassungen für mobile Geräte */
@media only screen and (max-width: 768px) {
  .home, .blog, .galerie {
    display: none;
  }

   /* Dropdown-Menü einblenden */
   .dropdown {
    display: block;
    text-align: center;
  }

  .dropdown-toggle {
    display: inline-block;
  }

  .dropdown-toggle.active + .dropdown-content {
    display: block;
  }

.abstandunten {
  margin-top: 800px;
}

  .headernav {
    height: 80px;
    width: 90%;
    left: 5%;
  }

  .hintergrundbild {
    display: none;
  }

  .quadrat {
    display: none;
  }

  .text {
    left: 10%;
    font-size: 16px;
    top: 170px;
    width: 80%;
  }

  .mobilewarnung {
    display: inline;
    z-index: 4;
    font-family: lato, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: red;
    left: 10px;
  }

  .blogeintrag0 {
    position: absolute;
    font-family: lato, "Helvetica Neue", Helvetica, Arial, "sans-serif" ;
    font-size: 30px;
    top: 300px;
    left: 50%;
    z-index: 4;
    text-align: center;
    transform: translateX(-50%);
    line-height: 50px;
  }

  .thumbnail {
    width: 70px;
    height: 70px;
    position: absolute;
    z-index: 9;
    border-radius: 10px;
    transform: translateX(-50%)translateY(-50%);
    left: 15%;
    top: 280px;
  }

  .titel1 {
    font-family: poppins, Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: black;
    left: 30%;
    top: 227px;
    position: absolute;
    z-index: 9;
  }

  .datum1 {
    font-family: lato, Arial, Helvetica, sans-serif ;
    font-size: 13px;
    color: black;
    left: 71%;
    top: 270px;
    position: absolute;
    z-index: 9;
  }

 .artikellesen {
    font-family: poppins, Arial, Helvetica, sans-serif;
    font-size: 15px;
    z-index: 9;
    position: absolute;
    top: 293px;
    left: 30%;
 }


 .blogeintrag0 {
  position: absolute;
  font-family: lato, "Helvetica Neue", Helvetica, Arial, "sans-serif" ;
  font-size: 30px;
  top: 300px;
  left: 50%;
  z-index: 4;
  text-align: center;
  transform: translateX(-50%);
  line-height: 50px;
}

.thumbnail2 {
  width: 70px;
  height: 70px;
  position: absolute;
  z-index: 9;
  border-radius: 10px;
  transform: translateX(-50%)translateY(-50%);
  left: 15%;
  top: 380px;
}

.titel2 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: black;
  left: 30%;
  top: 327px;
  position: absolute;
  z-index: 9;
}

.datum2 {
  font-family: lato, Arial, Helvetica, sans-serif ;
  font-size: 13px;
  color: black;
  left: 71%;
  top: 370px;
  position: absolute;
  z-index: 9;
}

.artikellesen2 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 15px;
  z-index: 9;
  position: absolute;
  top: 393px;
  left: 30%;
}

.thumbnail3 {
  width: 70px;
  height: 70px;
  position: absolute;
  z-index: 9;
  border-radius: 10px;
  transform: translateX(-50%)translateY(-50%);
  left: 15%;
  top: 480px;
}

.titel3 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: black;
  left: 30%;
  top: 427px;
  position: absolute;
  z-index: 9;
}

.datum3 {
  font-family: lato, Arial, Helvetica, sans-serif ;
  font-size: 13px;
  color: black;
  left: 71%;
  top: 470px;
  position: absolute;
  z-index: 9;
}

.artikellesen3 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 15px;
  z-index: 9;
  position: absolute;
  top: 493px;
  left: 30%;
}

.thumbnail4 {
  width: 70px;
  height: 70px;
  position: absolute;
  z-index: 9;
  border-radius: 10px;
  transform: translateX(-50%)translateY(-50%);
  left: 15%;
  top: 580px;
}

.titel4 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: black;
  left: 30%;
  top: 527px;
  position: absolute;
  z-index: 9;
}

.datum4 {
  font-family: lato, Arial, Helvetica, sans-serif ;
  font-size: 13px;
  color: black;
  left: 71%;
  top: 570px;
  position: absolute;
  z-index: 9;
}

.artikellesen4 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 15px;
  z-index: 9;
  position: absolute;
  top: 593px;
  left: 30%;
}

.thumbnail5 {
  width: 70px;
  height: 70px;
  position: absolute;
  z-index: 9;
  border-radius: 10px;
  transform: translateX(-50%)translateY(-50%);
  left: 15%;
  top: 680px;
}

.titel5 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: black;
  left: 30%;
  top: 627px;
  position: absolute;
  z-index: 9;
}

.datum5 {
  font-family: lato, Arial, Helvetica, sans-serif ;
  font-size: 13px;
  color: black;
  left: 71%;
  top: 670px;
  position: absolute;
  z-index: 9;
}

.artikellesen5 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 15px;
  z-index: 9;
  position: absolute;
  top: 693px;
  left: 30%;
}

.thumbnail6 {
  width: 70px;
  height: 70px;
  position: absolute;
  z-index: 9;
  border-radius: 10px;
  transform: translateX(-50%)translateY(-50%);
  left: 15%;
  top: 780px;
}

.titel6 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: black;
  left: 30%;
  top: 727px;
  position: absolute;
  z-index: 9;
}

.datum6 {
  font-family: lato, Arial, Helvetica, sans-serif ;
  font-size: 13px;
  color: black;
  left: 71%;
  top: 770px;
  position: absolute;
  z-index: 9;
}

.artikellesen6 {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 15px;
  z-index: 9;
  position: absolute;
  top: 793px;
  left: 30%;
}



.blogbox1 {
  display: none;
}

.blogbox2 {
display: none;
}

.blogbox3 {
  display: none;
}

.blogbox4 {
  display: none;
}

.blogbox5 {
  display: none;
}

.blogbox6 {
  display: none;
}


}