.contact {
  position: relative;
  background-color: var(--secondary-bgr);
  min-height: 100vh;
}

.contact-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: calc(var(--font-size) * 8);
}

.contact-heading h2,
.contact-heading a {
  color: var(--secondary-accent);
}

.contact-heading a {
  text-decoration: underline;
}

.contact-heading a:hover {
  opacity: .7;
  transition: opacity 125ms ease-in-out;
  -webkit-transition: opacity 125ms ease-in-out;
}

.contact-heading a:focus {
  opacity: .7;
  transition: opacity 125ms ease-in-out;
  text-decoration-style: dotted;
}

.contact-heading p {
  margin-top: calc(var(--font-size) * .5);
}

.contact-form,
.contact-heading {
  margin-left: calc(var(--font-size) * .5);
  margin-right: calc(var(--font-size) * .5);
}

.anmeldung .contact-form {
  margin-left: 0;
  margin-right: 0;
}

.anmeldung .contact-heading {
  margin-left: calc(var(--font-size) * .5);
  margin-right: calc(var(--font-size) * .5);
}

.form-container {
  margin-top: calc(var(--font-size) * 2.5);
}

.contact-form .field-container {
  margin-bottom: calc(var(--font-size) * 1);
}

.contact-form .field-container div {
  position: relative;
}

.contact-form .submit-container {
  margin-top: calc(var(--font-size) * 2);
}

.contact-form .form-field {
  width: 100%;
  padding: calc(var(--font-size) * .6) calc(var(--font-size) * .6);
  background-color: var(--primary-bgr);
  color: var(--primary-color);
  border: none;
  outline-color: var(--secondary-accent-invisible);
  margin-top: calc(var(--font-size) * 1);
}


/* fix the height of date fields on iOS devices */
.contact-form input[type="date"] {
  height: calc(var(--font-size) * 2.5);  
}

.contact-form input[type="date"]:has(div[pseudo="-webkit-date-and-time-value"]) {
  height: calc(var(--font-size) * 1.3);
}

.contact-form input::-webkit-date-and-time-value {
  padding: calc(var(--font-size) * .6) calc(var(--font-size) * .6);
  text-align: left;
  vertical-align: middle;
}

/* fix on iOS overflowing parent container if an option tag has long text */
.contact-form .field-container select {
  overflow: hidden !important;
}


.contact-form .form-field:focus {
  outline-style: solid;
  outline-width: calc(var(--font-size) * .0625);
  outline-color: var(--secondary-accent);
  transition: all 125ms ease-in-out;
  -webkit-transition: all 125ms ease-in-out;
}

.contact-form textarea {
  /*height: calc(var(--font-size) * 8);*/
  resize: vertical;
}

.contact-form fieldset .field-container.no-label textarea {
  margin-top: calc(var(--font-size) * .2);
}

.contact-form .select-field:required:invalid {
  color: grey;
}

.contact-form .field-container .checkbox-field {
  width: calc(var(--font-size) * 1);
  height: calc(var(--font-size) * 1);
  margin-right: calc(var(--font-size) * .2);
}

.contact-form .flex-start {
  justify-content: flex-start;
}

.contact-form .inline.checkbox-container .field-container {
  margin-bottom: calc(var(--font-size) * 0);
}

.contact-form .inline.checkbox-container .field-container:last-child {
  margin-bottom: calc(var(--font-size) * 1.5);
} 

.contact-form .inline.checkbox-container .field-container input {
  margin-top: calc(var(--font-size) * 0);
}

.contact-form .inline.checkbox-container .field-container:first-child input {
  margin-top: calc(var(--font-size) * 1);
}

.contact-form .field-container .hint {
    position: absolute;
    top: calc(var(--font-size) * .375);
    color: red;
    font-size: calc(var(--font-size) * .8);
    left: calc(var(--font-size) * .6);
    width: fit-content;
    background: linear-gradient(180deg, var(--secondary-bgr), var(--primary-bgr));
    padding-right: calc(var(--font-size) * .2);
    display: none;
}

.contact-form .field-container .invalid {
  outline: calc(var(--font-size) * .0625) solid red;
}

.contact-form .field-container .invalid ~ .hint {
  display: block;
}

.contact-form .submit-container {
  display: flex;
  justify-content: flex-end;
}

.contact-form .submit-button {
  border: calc(var(--font-size) * .125) solid var(--secondary-accent);
  color: var(--secondary-accent);
  padding: calc(var(--font-size) * 1.15) calc(var(--font-size) * 3.8);
  outline-color: var(--secondary-accent-invisible);
  transition: all 125ms ease-in-out;
  -webkit-transition: all 125ms ease-in-out;
}

.contact-form .submit-button:hover {
  outline-style: solid;
  outline-width: calc(var(--font-size) * .0625);
  outline-color: var(--secondary-accent);
  border-radius: calc(var(--font-size) * .5);
  background-color: var(--primary-bgr-translucent);
}

.contact-form .submit-button:focus {
  box-shadow: 0px 0px 0px calc(var(--font-size) * .125);
  border-radius: calc(var(--font-size) * .5);
  background-color: var(--primary-bgr-translucent);
}

.contact-form .bcc {
  display: none;
}

.contact-form fieldset {
  padding: calc(var(--font-size) * 1.0) calc(var(--font-size) * 1.0) calc(var(--font-size) * 1.0) calc(var(--font-size) * 1.0);
  margin-bottom: calc(var(--font-size) * 2);
  border-color: var(--secondary-accent-translucent);
}

.contact-form fieldset legend {
  color: var(--secondary-accent-translucent);
}

.form-data-sent {
  position: fixed;
  top: calc(var(--font-size) * var(--header-height) * 0);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--font-size) * var(--header-height) * 0);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  z-index: 999;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(2px);
  background-color: #0000004f;
  color: var(--primary-color);
  transition: opacity 400ms ease-in-out;
  -webkit-transition: opacity 400ms ease-in-out;
  opacity: 0;
  display: none;
}


@media only screen and (min-width: 675px) {
  .contact-form,
  .contact-heading {
    margin-left: calc(var(--font-size) * 2);
    margin-right: calc(var(--font-size) * 2);
  }
  .contact-heading h2 {
    font-size: calc(var(--font-size) * 4);
    line-height: calc(var(--font-size) * 5.625);
  }
  .contact-form fieldset {
    padding: calc(var(--font-size) * 1.5) calc(var(--font-size) * 1.5) calc(var(--font-size) * 1) calc(var(--font-size) * 1.5);
  }
}

@media only screen and (min-width: 948px) {
  .contact-form,
  .contact-heading {
    margin-left: calc(var(--font-size) * 4);
    margin-right: calc(var(--font-size) * 4);
  }
}

@media only screen and (min-width: 1080px) {
  .contact-form,
  .contact-heading {
    margin-left: calc(var(--font-size) * 6);
    margin-right: calc(var(--font-size) * 6);
  }
}

@media only screen and (min-width: 1280px) {
  .contact-form,
  .contact-heading {
    margin-left: calc(var(--font-size) * 6);
    margin-right: calc(var(--font-size) * 6);
  }
}