.formContainer {
  display: block;
  overflow: hidden;
}

.formContainer.hide {
  display: none;
}

.form-mail {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.form-name {
  grid-column: 1 / 3;
}

.form-vorname {
  grid-column: 1 / 3;
}

.form-email {
  grid-column: 1 / 3;
}

.form-nachricht {
  grid-column: 1 / 3;
}

.formColumn {
  width: 100%;
  margin-bottom: 1rem;
}

.formColumn:nth-child(1) {
  padding-right: 0rem;
}

.formColumn:nth-child(2) {
  padding-left: 0rem;
}

.formColumn:nth-child(3) {
  padding-right: 0rem;
}

.formColumn > * {
  width: 100%;
}

.formContainer input[type="text"],
.formContainer input[type="email"],
.formContainer textarea {
  border: 1px solid #00000080;
  width: 100%;
  padding: 1px 8px;
  border-radius: 0px;
  background-color: var(--clr-light);
  min-height: 42px;
}

.formContainer textarea {
  min-height: unset;
  font-family: inherit;
  padding: 4px 8px;
  max-width: 100%;
  min-width: 100%;
}

.formContainer .asterisk {
  color: red;
  display: inline;
}

.submitbutton-container {
  display: flex;
  grid-column: 1 / 3;
  justify-content: center;
  margin: 4px;
}

#submitbutton {
  background-color: var(--clr-blue);
  border-radius: 5px;
  border: none;
  min-height: 42px;
  min-width: 143px;
  padding: 14px 8px;
  font-size: min(max(24px, 3vw), 32px);
  color: var(--clr-light);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
}

#submitbutton:hover {
  background-color: var(--clr-bluehover);
  transition: all 0.3s var(--ease);
}

.form-success,
.form-fail {
  display: none;
  text-align: center;
  width: 100%;
  color: var(--clr-bluehover);
  padding: 0.5rem 0;
  font-size: min(max(16px, 3vw), 24px);
  opacity: 0;
}

.form-fail {
  color: #ce0707;
}

.form-success.active,
.form-fail.active {
  display: inline-block;
}

@media screen and (min-width: 640px) {
  .form-name {
    grid-column: 1 / 2;
  }

  .form-vorname {
    grid-column: 2 / 3;
  }

  .form-email {
    grid-column: 1 / 2;
  }
  .formColumn {
    margin-bottom: 2rem;
  }

  .formColumn:nth-child(1) {
    padding-right: 1rem;
  }

  .formColumn:nth-child(2) {
    padding-left: 1rem;
  }

  .formColumn:nth-child(3) {
    padding-right: 1rem;
  }
}