/**
 * form.css — Kontaktformular (T-11).
 */

.ec-contact {
  padding-block: var(--ec-space-xl);

  /*
   * Bezugsgrösse für die Spaltenaufteilung unten. Das Raster richtet sich
   * nach der Breite DIESES Kastens, nicht nach der des Fensters — im Dialog
   * sind das zwei sehr verschiedene Werte.
   */
  container: ec-contact / inline-size;
}

.ec-contact__lead {
  color: var(--ec-color-ink-muted);
  font-size: var(--ec-fs-h3);
}

.ec-contact__grid {
  display: grid;

  /* Der Anschriftenkasten endet nach seinem Inhalt und wird nicht auf
     Formularhöhe gezogen. */
  align-items: start;
  gap: var(--ec-space-xl);
}

/*
 * Zwei Spalten erst, wenn der Kasten sie trägt — bewusst @container und nicht
 * @media.
 *
 * Mit einer Fensterabfrage griff die Regel auch im Dialog: das Fenster war
 * 1440 px breit, der Kasten darin aber nur 624 px. Daraus wurden Spalten von
 * 368 px und 208 px, und die Anschrift brach mitten im Wort um.
 */
@container ec-contact (min-width: 48rem) {
  .ec-contact__grid {
    grid-template-columns: 2fr 1fr;
  }
}

.ec-contact__success {
  margin-bottom: var(--ec-space-lg);
  padding: var(--ec-space-md);
  border: var(--ec-border-width-thick) solid var(--ec-color-success);
  border-radius: var(--ec-radius-md);
  background-color: var(--ec-color-surface-alt);
  color: var(--ec-color-ink);
}

.ec-form__shell {
  container: ec-form / inline-size;
}

.ec-form__row {
  margin-bottom: var(--ec-space-md);
}

/*
 * Kurze Felder paarweise nebeneinander, sobald das Formular breit genug ist.
 *
 * Ein 720 px breites Eingabefeld für einen Namen sieht nicht nur seltsam aus,
 * es macht das Formular auch unnötig lang: im Dialog standen drei von sieben
 * Feldern unterhalb der Falzkante. Bezugsgrösse ist die Formularspalte selbst
 * und nicht das Fenster — auf der Seite ist sie zwei Drittel so breit wie der
 * umgebende Kasten, im Dialog genauso breit.
 *
 * Alles ausser den markierten Zeilen läuft über beide Spalten. Bewusst so
 * herum: eine später ergänzte Zeile ist dann voll breit und nicht versehentlich
 * halb.
 */
@container ec-form (min-width: 34rem) {
  .ec-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--ec-space-md);
    align-content: start;
  }

  .ec-form > :not(.ec-form__row--half) {
    grid-column: 1 / -1;
  }
}

.ec-form__row--check {
  display: grid;
  align-items: start;
  gap: var(--ec-space-2xs);
  grid-template-columns: auto 1fr;
}

.ec-form__label {
  display: block;
  margin-bottom: var(--ec-space-3xs);
  font-weight: var(--ec-fw-medium);
}

.ec-form__required {
  color: var(--ec-color-error);
}

.ec-form__control {
  width: 100%;
  min-height: var(--ec-space-2xl);
  padding: var(--ec-space-2xs) var(--ec-space-xs);
  border: var(--ec-border-width) solid var(--ec-color-border-strong);
  border-radius: var(--ec-radius-sm);
  background-color: var(--ec-color-surface);
  color: var(--ec-color-ink);
  font: inherit;
}

.ec-form__control:focus-visible {
  border-color: var(--ec-color-primary);
}

.ec-form__control[aria-invalid="true"] {
  border-color: var(--ec-color-error);
}

.ec-form__check {
  width: var(--ec-space-sm);
  height: var(--ec-space-sm);
  margin-top: var(--ec-space-3xs);
}

.ec-form__check[aria-invalid="true"] {
  outline: var(--ec-border-width-thick) solid var(--ec-color-error);
  outline-offset: var(--ec-focus-offset);
}

.ec-form__error {
  margin: var(--ec-space-3xs) 0 0;
  color: var(--ec-color-error);
  font-size: var(--ec-fs-small);
}

.ec-form__error[hidden] {
  display: none;
}

/*
 * Honigtopf. Nicht display:none — manche automatischen Ausfüller überspringen
 * unsichtbare Felder. Stattdessen aus dem Sichtfeld geschoben, für Hilfsmittel
 * über aria-hidden und tabindex ausgeblendet.
 */
.ec-form__trap {
  position: absolute;
  left: var(--ec-offscreen);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ec-contact__aside {
  padding: var(--ec-space-md);
  border-radius: var(--ec-radius-lg);
  background-color: var(--ec-color-surface-alt);
}