/* === Global Variables === */
:root {
    --darkgreen: #0b4d0c;
    /*#2a4a32;*/
    --pastelligthgreen: #c9cebd;
    --redbrowntrans: #A62C21bd
  }

/* === TitlePic === */

@media (max-width: 1100px) {
  #background-pic {
    object-position: 80%;
  }
}

@media (max-width: 800px) {
  #background-pic {
    object-position: 85%;
  }
}

@media (max-width: 650px) {
  #background-pic {
    object-position: 90%;
  }
}

@media (max-width: 500px) {
  #background-pic {
    object-position: 95%;
  }
}

/* === Formular === */

#kontakt-bereich {
  padding-top: 1rem;
}

#kontakt-formular input,
#kontakt-formular textarea {
  width: 100%;
  border: 2px solid var(--darkgreen);
  padding: .5rem;
  font-family: 'Quicksand', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1rem;
  
}

#kontakt-formular textarea {
  height: 150px;
}

#absendenButton {
  width: 150px;
  height: 39px;
  border: 2px solid var(--darkgreen);
  background-color: var(--darkgreen);
  color: white;
  font-size: 1.1rem;
}

#absendenButton:hover {
  background-color: var(--pastelligthgreen);
  color: black;
}


#kontakt-formular {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
}

#email-sendebestaetigung {
  padding: 10px;
  border: 2px solid var(--darkgreen);
  background-color: var(--pastelligthgreen);
  display: none;
}

#email-sendefehler {
  padding: 10px;
  border: 2px solid #741108;
  background-color: #e16054;
  display: none;
}

@media (max-width: 1366px) {

  #kontakt-formular {
    width: 90%;
  }

}

@media (max-width: 1024px) {

  #kontakt-formular {
    width: 100%;
  }

}

@media (max-width: 768px) {

  #kontakt-formular button {
    width: 100%;
  }

}