@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;
  }
  
  .quadrat {
  
    position: absolute;
    width: 80%;
    height: 2900px;
    background-color: white;
    transform: translateX(-50%);
    left: 50%;
    z-index: 2;
    top: 200px;
    border-radius: 10px;
    opacity: 100%;
    padding-bottom: 0px;
  }
  
  .wobinich {
    font-family: poppins, "Helvetica Neue", Helvetica, Arial, "sans-serif" ;
    font-size: 30px;
    color: black;
    z-index: 4;
    transform: translateX(-50%) translateY(-50%);
    left: 70%;
    top: 260px;
    position: absolute;
  
  
  
  }
  
  
  .standort {
    position: absolute;
    z-index: 3;
    width: 500px;
    transform: translateX(-50%) translateY(-50%);
    left: 70%;
    top: 670px;
    border-radius: 10px;
  
  
  
  }
  
  .hey {
    position: absolute;
    z-index: 4;
    left: 200px;
    top: 260px;
    font-size: 30px;
    font-family: poppins, "Helvetica Neue", Helvetica, Arial, "sans-serif" ;
    color: black;
    transform: translateY(-50%);
  }
  
  .text {
    position: absolute;
    z-index: 4;
    left: 200px;
    top: 320px;
    font-size: 20px;
    font-family: lato,Tahoma, "Helvetica Neue", Helvetica, Arial, "sans-serif" ;
    color: black;
    width: 50%;
    line-height: 30px;
  
  }
  
  .abstandunten {
    width: 10px;
    height: 50px;
    margin-top:700px ;
    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: 400px;

  }

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

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

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



  }


  .blogtext {

    z-index: 9;
    top: 300px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    width: 50%;
  
  }


 .text1 {
  font-size: 18px;
  font-family: lato, Arial, Helvetica, sans-serif;
  line-height: 25px;
 }

 .text2 {
  font-size: 18px;
  font-family: lato, Arial, Helvetica, sans-serif;
  line-height: 25px;
 }

 .text3 {
  font-size: 18px;
  font-family: lato, Arial, Helvetica, sans-serif;
  line-height: 25px;
 }

 .text4 {
  font-size: 18px;
  font-family: lato, Arial, Helvetica, sans-serif;
  line-height: 25px;
 }

 .text5 {
  font-size: 18px;
  font-family: lato, Arial, Helvetica, sans-serif;
  line-height: 25px;
 }

 .text6 {
  font-size: 18px;
  font-family: lato, Arial, Helvetica, sans-serif;
  line-height: 25px;
 }

 .text7 {
  font-size: 18px;
  font-family: lato, Arial, Helvetica, sans-serif;
  line-height: 25px;
 }

 .text8 {
  font-size: 18px;
  font-family: lato, Arial, Helvetica, sans-serif;
  line-height: 25px;
 }


 .zeit1 {
  font-size: 20px;
  font-family: poppins, Arial, Helvetica, sans-serif;
 }

 .zeit2 {
  font-size: 20px;
  font-family: poppins, Arial, Helvetica, sans-serif;
 }

 .zeit3 {
  font-size: 20px;
  font-family: poppins, Arial, Helvetica, sans-serif;
 }

 .zeit4 {
  font-size: 20px;
  font-family: poppins, Arial, Helvetica, sans-serif;
 }

 .zeit5 {
  font-size: 20px;
  font-family: poppins, Arial, Helvetica, sans-serif;
 }

 .zeit6 {
  font-size: 20px;
  font-family: poppins, Arial, Helvetica, sans-serif;
 }

 .zeit7 {
  font-size: 20px;
  font-family: poppins, Arial, Helvetica, sans-serif;
 }

 .zeit8 {
  font-size: 20px;
  font-family: poppins, Arial, Helvetica, sans-serif;
 }


 .überschrift {
  font-family: poppins, Arial, Helvetica, sans-serif;
  font-size: 35px;
 }



 /* 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;
  }


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

  .hintergrundbild {
    display: none;
  }

  .quadrat {
    display: none;
  }


  .blogtext {
    width: 70%;
  }

}