input {
  border: none;
  background-color: #ededed;
  border-radius: 0.2rem;
  outline: none;
}

textarea {
  background-color: #ededed;
  border: none;
  border-radius: 0.2rem;
  outline: none;
}

.main-content-header {
  width: 100%;
  background-color: #c4ebfd;
  box-shadow: 0 20px 10px -20px rgba(0, 0, 0, 0.45) inset;
}

/* .main-content-kontakt-form {
      box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
      border: .1rem solid #7e7e7e;
      margin-top: 4vh;
  } */

.header-kontakt-site {
  text-align: center;
  font-size: 2.5vh;
}

.text-kontakt {
  text-align: center;
}

.text-kontakt a {
  text-decoration: none;
}

.kontakt-dsgvo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: start;
}

.main-content button {
  background-color: #17628a;
  border: 0;
  border-radius: 0.625rem;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  font-size: large;
  font-weight: 600;
  line-height: 1.25rem;
  max-width: 30rem;
  min-height: 2.5rem;
  min-width: 0rem;
  overflow: hidden;
  padding: 0rem 1.25rem;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s,
    box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s,
    color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
}

.main-content button:active {
  background: #09223b;
  color: rgb(255, 255, 255, 0.7);
}

.main-content button:disabled {
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.3);
}

.kontakt-input::placeholder,
.kontakt-textarea::placeholder {
  transition: font-size 0.5s;
  opacity: 0.3;
}

.kontakt-input.small-placeholder::placeholder,
.kontakt-textarea.small-placeholder::placeholder {
  opacity: 0.3;
}

.error {
  border: 0.125rem solid red;
}

/* Handys (Smartphones) */
@media only screen and (max-width: 767px) {
  input,
  textarea {
    font-size: 1rem;
  }

  .kontakt-input::placeholder,
  .kontakt-textarea::placeholder {
    font-size: 1rem;
  }

  .kontakt-input.small-placeholder::placeholder,
  .kontakt-textarea.small-placeholder::placeholder {
    font-size: 0.875rem;
  }

  .main-content-header {
    padding: 18% 0 5% 0;
    width: 100%;
  }

  .main-content-kontakt-form {
    width: 90%;
    margin-left: 2vh;
    margin-top: 5vh;
    margin-bottom: 5vh;
  }

  .header-kontakt-site {
    font-size: medium;
    margin-top: 7vh;
    margin-bottom: 2vh;
  }

  .text-kontakt {
    font-size: 0.9rem;
  }

  /* Input Felder passen sich der Container-Breite an */
  input,
  textarea {
    margin-top: 0.8vh;
    margin-bottom: 0.8vh;
    width: 96.5%; /* Nimmt 100% der Elterncontainer-Breite */
    box-sizing: border-box; /* Box-Größe mit Padding und Border einberechnen */
    margin-left: 0.5vh;
  }

  .kontakt-form-meta input {
    width: 97.5%; /* Nimmt 100% des Containers */
    padding: 1.5%;
  }

  /* Breite des Nachrichtenfeldes */
  .kontakt-form-message textarea {
    width: 97.5%; /* Nimmt 100% des Containers */
    height: 6.25rem; /* Höhe für das Textfeld */
    box-sizing: border-box;
    margin-top: 3%;
    margin-bottom: 3vh;
    outline: none;
    margin-top: 5%;
  }

  .kontakt-form-message textarea::placeholder {
    margin-bottom: 2%;
  }

  .kontakt-dsgvo p {
    font-size: 0.625rem;
    text-align: center;
  }

  .kontaktform-button {
    display: flex;
    align-items: center; /* Zentriert den Inhalt horizontal */
    justify-content: center; /* Zentriert den Inhalt vertikal, wenn nötig */
    margin-top: 2vh;
    margin-bottom: 2vh;
  }
}

/* Tablets und Laptops */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  input,
  textarea {
    font-size: 1.375rem;
  }

  .main-content-header {
    padding: 0.5% 0 1% 0;
  }

  .main-content-kontakt-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert den Inhalt horizontal */
    justify-content: center;
    /* border: .1rem solid black; */
    margin: 5vh 10rem 5vh 10rem;
  }

  .header-kontakt-site {
    margin-top: 2vh;
  }

  .text-kontakt {
    margin-top: 2vh;
  }

  .tel-nummer {
    margin-top: 1vh;
    margin-bottom: 1vh;
  }

  /* .kontakt-form {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 5vh;
      } */

  input,
  textarea {
    width: 35rem;
    margin-top: 2vh;
    margin-bottom: 1.5vh;
  }

  .kontakt-form-message textarea {
    height: 9.375rem;
    margin-top: 3%;
  }

  .kontakt-textarea::placeholder,
  .kontakt-input::placeholder {
    font-size: 1.25rem;
  }

  .kontakt-textarea.small-placeholder::placeholder,
  .kontakt-input.small-placeholder::placeholder {
    font-size: 1.125rem;
  }

  .kontakt-dsgvo {
    margin-top: 2%;
    font-size: medium;
    text-align: center;
    font-size: 0.875rem;
  }

  .kontaktform-button {
    margin-top: 5vh;
    margin-bottom: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Desktops */
@media only screen and (min-width: 1025px) {
  input,
  textarea {
    font-size: 1.375rem;
  }

  .main-content-header {
    padding: 0.5% 0 1% 0;
  }

  .main-content-kontakt-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert den Inhalt horizontal */
    justify-content: center;
    /* border: .1rem solid black; */
    margin: 5vh 15rem 5vh 15rem;
  }

  .header-kontakt-site {
    margin-top: 2vh;
  }

  .text-kontakt {
    margin-top: 2vh;
  }

  .tel-nummer {
    margin-top: 1vh;
    margin-bottom: 1vh;
  }

  /* .kontakt-form {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 5vh;
      } */

  input,
  textarea {
    width: 100%;
    margin-top: 2vh;
    margin-bottom: 1.5vh;
  }

  .kontakt-form-message textarea {
    height: 9.375rem;
    margin-top: 3%;
  }

  .kontakt-textarea::placeholder,
  .kontakt-input::placeholder {
    font-size: 1.25rem;
  }

  .kontakt-textarea.small-placeholder::placeholder,
  .kontakt-input.small-placeholder::placeholder {
    font-size: 1.125rem;
  }

  .kontakt-dsgvo {
    margin-top: 2%;
    font-size: medium;
    text-align: center;
    font-size: 0.875rem;
  }

  .kontaktform-button {
    margin-top: 5vh;
    margin-bottom: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}