/*!
 * The contact page of the website, design language 2.1, loaded by
 * Pages/Kontakt.cshtml only: from 1040px the text stands left in the text column
 * of the start page and the form right, where the map stands there; below, one
 * column. Also the hairline above the consent and the honeypot.
 */

.website-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

@media (min-width: 1040px) {
  .website-contact {
    grid-template-columns: var(--website-frame-text-column) minmax(0, 580px);
    align-items: start;
    justify-content: space-between;
  }
}

@media (max-width: 759px) {
  .website-contact {
    gap: 36px;
  }
}

.website-contact__form {
  margin: 0;
}

/* The consent is set apart from the details by a hairline. */
.website-contact__consent {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--website-color-line);
}

/* Honeypot: out of sight but in the document, so a bot finds and fills it.
   display:none would be a hint to some bots, so the field is only clipped;
   aria-hidden and tabindex="-1" in the page keep it from screen readers and the
   keyboard. */
.website-contact__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}