/* Modal eyebrow ("Anfrage") sits outside .section--dark/.section--light,
   so it never got a text color and inherited the dark body text on the
   dark modal panel. */
.modal__header .eyebrow {
  color: var(--sky);
}

/* Extra headroom for short viewports (e.g. phones in landscape) so the
   request modal needs less internal scrolling. */
@media (max-height: 560px) {
  .modal__panel {
    max-height: 94vh;
    padding: var(--space-3);
  }
  .modal__header {
    margin-bottom: var(--space-2);
  }
  .modal__title {
    font-size: var(--text-base);
  }
  .modal__lede {
    display: none;
  }
  .contact-form--modal .form-field {
    margin-bottom: var(--space-1);
  }
  .contact-form--modal .form-field input,
  .contact-form--modal .form-field select,
  .contact-form--modal .form-field textarea {
    padding: 0.5rem 0.7rem;
  }
  .contact-form--modal textarea {
    min-height: 2rem;
  }
  .contact-form--modal .form-consent {
    margin-bottom: var(--space-2);
  }
  .contact-form--modal .btn--block {
    padding-block: var(--space-2);
  }
}