.preloader{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: fixed;
    background-color: darkgrey;
    height: 100vh;
    width: 100vw;
    z-index: 1000;
}
.loader {
  z-index: 1001;
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

address{display: none;}

article{
    display: none;
    
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cotainer{
  position: relative;
  height: 100vh;
  width: 100%;
}

.content{
  z-index: 20;
  position: absolute;
  top: 50%;
  left: 50%;
transform: translate(-50%, -25%);
  width: 70%;
}

.divHeader{

  margin-bottom: 2.5% ;
  background-color: rgba(128,128,128,0.7);
  
  border: 2px;
  border-radius: 5px;
  border-color: rgba(128,128,128,0.7);
  
  text-align: center;
  font-size: 180%;
  color: yellow;
}

.Datum{
  width: 150px;
  margin: 5%;
}

.dateContainer{
  margin-top: 2.5% ;
  display: flex;
  justify-content: center;
}

.dateAndTime{
  width: fit-content !important;
  padding: 10px;
  background-color: grey;
  opacity: 0.9;
}

p{
    
  opacity: 1;
  color: lightgreen;
}

.but{
  margin-top: 0%;
}

button{
  margin-top: 10%;
  cursor: pointer;
  border-radius: 7px;
  border: aqua;
  background-color: aqua;
  height: auto;
  width: 20vmin;
  color: black;
  padding: 2%;
}
button:hover{
  opacity: 0.7;
}
.submit{
  visibility: hidden;
}
#email {
  padding: 5px;
  position: absolute;
  left: 80%;
  top: 30%;
  background-color: red;
  color: white;
  border:  red;
  border-radius: 10px;
  
  height: 6vh;
  width: 20vh;  
}
.anfragen{
    visibility: hidden;
    margin: 0px;
  background-color: darkmagenta;
  color: white;
  position: absolute;
  left: 50%;
  top: 70%;
 
}
#answer{
    visibility: hidden;
    position: absolute;
    top: 20%;
    left: 20%;
    transform: translate(-50%);
    border-radius: 5px;
    padding: 10px;
    background-color: pink;
    width: 300px;
    height: fit-content;
}
#anfragen2{
    visibility: hidden;
    background-color: grey;
    opacity: 0.7;
}
@media only screen and (max-width: 430px){
    .anfragen{
        margin: 10px;
  background-color: darkmagenta;
  color: white;
  position: absolute;
  left: 50%;
  top: 80%;
        visibility: hidden; 
}
    .dateAndTime{
        width: 80%;
      position: relative;
    }
    .but{
      margin-top: 0;
      transform: translate(50%);
    }

    body{
        overflow: hidden;
    }

    img{
        overflow: hidden;
    }
    
    .content{
  z-index: 20;
  position: absolute;
  top: 50%;
  left: 50%;
transform: translate(-50%, -25%);
  width: 70%;
}
    
    .photo{overflow: hidden;
    
    }
    .divHeader{
      position: absolute;
      top: -20%;
      left: 50%;
      transform: translate(-50%,-50%);

      width: 110%;
      margin-bottom: 2.5% ;
      background-color: rgba(128,128,128,0.7);
      
      border: 2px;
      border-radius: 5px;
      border-color: rgba(128,128,128,0.7);
      
      text-align: center;
      font-size: 18px;
      color: yellow;
    }

    #email{
      padding: 5px;
      position: absolute;
      left: 10%;
      top: -70%;
      background-color: red;
      color: white;
      border:  red;
      border-radius: 10px;
      
      height: 6vh;
      width: 20vh;  
    }

    #answer{
      visibility: hidden;  
      position: absolute;
      top: 80%;
      left: 50%;
      border-radius: 5px;
      background-color: pink;
      width: 300px;
      height: fit-content;
  }

}