/* ESD Formular — Layout fuer [esd_formular] (Modul modules/wordpress/formular.php)
 * Felder, Knopf und Zustaende kommen aus components.css (.esd-field, .btn,
 * knowledge/design-system.md § 9.0). Hier nur, was die Komponenten nicht
 * kennen: Sektion, Karte, Raster, Honeypot, Status, Vertrauenszeile.
 * Nur Tokens aus tokens.css; Layer-Kontext ueber .esd-canvas / .esd-layer-1 /
 * .esd-tone-light (setzen die --ui-* Rollen). */

.esd-form-wrap__sektion{
  background: var(--machine);
  padding: var(--space-section) var(--space-md);
}
.esd-form-wrap__sektion.esd-tone-light{ background: var(--paper); }
.esd-form-wrap__innen{
  max-width: 760px;
  margin: 0 auto;
}
.esd-form__kopf{ margin-bottom: var(--space-xl); }
.esd-form-wrap__karte{
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
}
@media (max-width: 640px){
  .esd-form-wrap__sektion{ padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .esd-form-wrap__karte{ padding: var(--space-md) var(--space-sm); }
}

.esd-form{ position: relative; }
.esd-form__felder{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-sm);
}
.esd-form__feld--100{ grid-column: 1 / -1; }
@media (max-width: 640px){
  .esd-form__feld--50{ grid-column: 1 / -1; }
}
.esd-form__felder .esd-field,
.esd-form__felder .esd-field__group{ margin: 0; min-width: 0; }
.esd-form__feld--eingeloggt-aus{ display: none; }
/* hidden verliert gegen display:grid (gemessen 2026-10-16, Parallel-Chat) — hier ausdruecklich. */
.esd-form__felder[hidden],
.esd-form__aktion[hidden]{ display: none; }

/* Kit-Gegenregeln: Das Elementor-Kit setzt label{color} und input/textarea{background}
 * mit (0,1,1) und schlaegt :where(.esd-canvas) .esd-field__* (0,1,0) — dieselbe Lage wie
 * bei .btn (design-system § 9.0 Regel 1, R9). Deshalb hier mit !important, Werte = die
 * Tokens der Feld-Komponente (components.css .esd-field__label/__control). */
.esd-form .esd-field__label,
.esd-form .esd-field__legend,
.esd-form .esd-field__text{ color: var(--ui-text) !important; }
.esd-form .esd-field__hint{ color: var(--ui-text-2) !important; }
/* Kopf und Nachsatz ebenso: Seiten-CSS wie `.esd-canvas h2{color}` (0,1,1) schlug den Sektionskopf
 * auf der hellen Insel (gemessen 2026-10-16, /ratgeber/: Titel und Nachsatz weiss auf hell). */
.esd-form-wrap .esd-sechead__title{ color: var(--ui-text) !important; }
.esd-form-wrap .esd-sechead__eyebrow,
.esd-form-wrap .esd-sechead__lead,
.esd-form-wrap .esd-form__nachsatz,
.esd-form-wrap .esd-form__nachsatz p{ color: var(--ui-text-2) !important; }
.esd-form .esd-field__control{
  background-color: var(--ui-field) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-text-3) !important;
  border-radius: var(--radius-field) !important;
}
.esd-form .esd-field__control[aria-invalid="true"]{ border-color: var(--c-error) !important; }
/* Die Meldung steht leer und hidden im Markup (Live-Bereich, 02-field.html „WICHTIG“);
 * components.css gibt ihr display und das Zeichen im Kreis — hidden muss gewinnen
 * (gemessen 2026-10-16: rotes Ausrufezeichen unter jedem Feld, auch ohne Fehler). */
.esd-form .esd-field__msg[hidden]{ display: none !important; }

/* Honeypot: ausserhalb des Sichtfelds, nicht per Tab erreichbar, fuer Hilfsmittel ausgeblendet. */
.esd-form__hp{
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.esd-form__aktion{ margin-top: var(--space-lg); }
.esd-form__trust{
  margin: var(--space-sm) 0 0;
  font-size: var(--text-meta);
  line-height: 1.5;
  color: var(--ui-text-2);
  text-align: center;
}
.esd-form__trust a{ color: inherit; text-decoration: underline; }

.esd-form__status{
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-field);
  color: var(--ui-text);
  font-size: var(--text-body);
  line-height: 1.5;
}
.esd-form__status[hidden]{ display: none; }
.esd-form__status--fehler{ border-color: var(--c-error); }
.esd-form__status--ok{ border-color: var(--ui-accent); }

.esd-form__nachsatz{
  margin-top: var(--space-md);
  font-size: var(--text-meta);
  line-height: 1.5;
  color: var(--ui-text-2);
}
.esd-form__nachsatz p{ margin: 0; }
.esd-form__nachsatz a{ color: inherit; text-decoration: underline; }