/* Blöcke «Kontaktformular» und «Login» — kein Figma-Frame: Raster der Einleitung, Felder nach Figma-Button-Mass (56 hoch) */

.gw-formular { background: var(--hellgrau); padding-block: var(--sektion); }
.gw-formular__kopf { display: flex; flex-direction: column; gap: var(--abstand-md); }

.gw-formular__form,
.gw-login__form form {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-md) var(--abstand-lg);
  margin: 0;
}
/* Hülle des WP-Formulars: eine Spalte, sonst nimmt das innere form nur die halbe Breite */
.gw-login__form { flex: 1 1 0; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.gw-feld--breit,
.gw-login__form form > p { grid-column: 1 / -1; margin: 0; }

/* margin 0 gegen .kit-feld (kit-base): Zeilenabstand überall 20 aus dem Raster */
.gw-feld { display: flex; flex-direction: column; gap: var(--abstand-xs); margin: 0; }

.gw-feld label,
.gw-login__form label {
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--sperrung-klein);
  color: var(--dunkelgruen-text);
}
.gw-feld label span { font-weight: 400; color: #4b5563; }

.gw-feld input,
.gw-feld textarea,
.gw-login__form input[type="text"],
.gw-login__form input[type="password"] {
  width: 100%;
  min-height: 56px;
  padding: var(--abstand-s);
  /* Keine hellgraue Kontur ums Feld, nur die Linie unten (Célines Feedback 21.10.) */
  border: 0;
  border-bottom: 2px solid var(--dunkelgruen-500);
  border-radius: 0;
  background: var(--weiss);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--schwarz);
}
.gw-feld textarea { min-height: 180px; resize: vertical; }

/* Einzeilige Felder genau 56 hoch wie die Buttons (Rand 1 + 2 zählt mit) */
.gw-feld input,
.gw-login__form input[type="text"],
.gw-login__form input[type="password"] { height: 56px; padding-block: 0; }

/* Fokus: nur die Linie unten wird dicker (2 → 4 px, ohne das Feld zu verschieben), kein Rahmen ums ganze Feld.
   Dunkelgrün: 5:1 auf Weiss, 4.2:1 auf Hellgrau (Hellgrün hätte 2.1:1) */
.gw-feld input:focus-visible,
.gw-feld textarea:focus-visible,
.gw-login__form input:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 0 var(--dunkelgruen-500);
}

/* Fehlerzustand (kein Figma-Zustand): erst nach der Eingabe, nicht schon beim Laden */
.gw-feld input:user-invalid,
.gw-feld textarea:user-invalid { border-bottom-color: var(--fehler); }

.gw-login__form .login-username,
.gw-login__form .login-password { display: flex; flex-direction: column; gap: var(--abstand-xs); }
/* Klickfläche 44 hoch; der negative Rand hält die Zeile bei 26, nichts verschiebt sich */
.gw-login__form .login-remember label { display: inline-flex; align-items: center; gap: var(--abstand-xs); min-height: 44px; margin-block: -9px; font-weight: 400; }
.gw-login__form .login-remember input { width: 20px; height: 20px; accent-color: var(--dunkelgruen-500); }

.gw-formular__meldung:empty { display: none; }
.gw-formular__meldung { font-weight: 700; color: var(--dunkelgruen-500); }
.gw-formular__meldung.kit-formular__meldung--fehler { color: var(--fehler); }

.gw-login__inhalte h2 { font-family: var(--schrift-titel); font-size: var(--text-md); text-transform: uppercase; color: var(--dunkelgruen-text); margin: 0 0 var(--abstand-s); }

/* Honeypot ausserhalb des Sichtfelds */
.gw-formular .kit-honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .gw-formular__form,
  .gw-login__form form { grid-template-columns: minmax(0, 1fr); }
}