/* ==========================================================================
   Baustein: Formular mit Fehlerzuständen
   Datei: css/bausteine/anfrage-formular.css, Skript js/bausteine/anfrage-formular.js
   Gebraucht auf: kontakt.html (#formular). Vorgesehen für den Report auf
   individualentwicklung.html und das Angebot aus dem Konfigurator.
   Bauvorschrift: DESIGN.md, Baustein "Formular", Vorlage aus
   docs/archiv/DESIGN-v1.6-2026-09-14.md, Kapitel "Bausteine", Quellenfeld nach N15.
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.
   ========================================================================== */

/* Präfix: .form-* */

/* Feldabstand 20 px, nie mehr als zwei Spalten. Kurze Felder stehen ab 641 px paarweise. */
.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Label immer sichtbar, kein Platzhalter als Label. Pflichtfelder tragen das Sternchen,
   die Legende darüber erklärt es. */
.form-label { color: var(--ink); font-size: var(--fs-body-m); line-height: 1.4; font-weight: 500; }
.form-required { color: var(--ink); }
.form-legend { color: var(--muted); }

/* Eingaben: 48 px wie .button, Fläche Weiß, Rahmen --line-strong (3.06 auf Hell, 3.12 auf
   Weiß, genug für WCAG 1.4.11), --r-sm. 16 px Schrift, sonst zoomt Safari auf iOS. */
.form-input, .form-select, .form-textarea {
  width: 100%; min-height: 48px; padding: 0 14px;
  font: inherit; font-size: var(--fs-body); line-height: 1.4; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--t);
}
.form-textarea { min-height: 140px; padding: 12px 14px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted); opacity: 1; }
/* Auswahl mit eigenem Chevron (Linie 1,5 px wie die Zeichen im 24er-Raster, --muted).
   Das SVG steht als data-URI in der Datei, kein Request auf einen fremden Host. */
.form-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%236c6d6a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px 20px;
}
/* Fokus: der Ring aus style.css (2 px --blue, 3 px Abstand), der Rahmen wird zusätzlich Ink */
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--ink); }

/* Einwilligung: natives Kästchen, 20 px, Haken in --blue */
.form-check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.form-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
.form-check-text { color: var(--body); font-size: var(--fs-body-m); line-height: 1.55; }

/* Fehler: Rahmen --danger (6.6 auf Weiß), Meldung darunter in --danger mit Zeichen.
   Die Meldung hängt über aria-describedby am Feld, das Skript setzt aria-invalid. */
.form-field.is-invalid .form-input,
.form-field.is-invalid .form-select,
.form-field.is-invalid .form-textarea { border-color: var(--danger); }
.form-check.is-invalid input { outline: 2px solid var(--danger); outline-offset: 2px; }
.form-error { display: flex; gap: 8px; align-items: flex-start; color: var(--danger); }
.form-error::before {
  content: '!'; flex: none;
  width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.form-error[hidden] { display: none; }

/* Absenden und Hinweis. Button in Inhaltsbreite, bis 640 px volle Breite. */
.form-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 12px; }
.form-note { color: var(--muted); max-width: 520px; }

/* Statuszeile nach dem Absenden (role="status"). Erfolg in --success, Fehler auf --danger-face. */
.form-status { padding: 14px 16px; border-radius: var(--r-sm); font-size: var(--fs-body-m); line-height: 1.55; }
.form-status:empty { display: none; }
.form-status.is-success { color: var(--success); background: var(--white); border: 1px solid var(--line-card); }
.form-status.is-error { color: var(--danger); background: var(--danger-face); }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .form-actions .button { width: 100%; justify-content: space-between; }
}