/* ==============================================================
   formular.css  ·  Besitzer: P6 Kontakt, Formular, Tuerschild
   v4 „Passer“ (25.09.2026), K31 Formularfuehrung.
   Die Grundregeln (.formular .feld .hinweis .honig) gelten fuer ALLE
   Formulare der Seite: Kontaktblock, Preisrechner (.rechner-form .feld,
   P7), Anmeldung Redaktion (cms-auth.php), Meldungen in intern.php.
   Darum generisch, nur Tokens, keine Seiten-Annahmen.

   Fehlerfuehrung (formular.js, ohne JS per Server + autofocus):
     .formular-meldung[role=alert]   Sammelmeldung oben im Formular
     [aria-invalid="true"]           Feldrand in der Fehlerfarbe
     .feld-fehler                    Text unter dem Feld (aria-describedby)
   Haken nach dem Senden: .hinweis-ok .haken (SVG, zeichnet sich EINMAL,
   ohne fill-mode forwards -> danach nicht mehr "in effect").
   ============================================================== */

/* ---- Raster ---- */
.formular{
  display:grid;gap:1.1rem clamp(1rem,3vw,1.6rem);margin-top:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
}
.formular > *{min-width:0}
.feld{display:grid;gap:.4rem;margin:0;align-content:start}
.feld-breit{grid-column:1/-1}

.feld label{font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;font-size:1rem;line-height:1.3}
.pflicht{font-family:var(--schrift-lauf);font-weight:400;font-size:.875rem;color:var(--muted)}
.formular-pflicht{margin:0;font-size:.9375rem;line-height:1.45;color:var(--muted)}

/* P0 25.09.: --border-feld statt --line-2 (v4: --line-2 ist nur Deko, 1,62:1; Feldrand braucht >= 3:1, WCAG 1.4.11) */
.feld input,.feld textarea,.feld select{
  font-family:var(--schrift-lauf);font-size:1.0625rem;line-height:1.4;color:var(--text);
  background-color:var(--flaeche-licht);border:2px solid var(--border-feld);border-radius:var(--r-knopf);
  padding:.7rem .9rem;width:100%;min-height:48px;
  transition:border-color var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease);
  accent-color:var(--accent-text);
}
.feld textarea{min-height:8.5rem;resize:vertical}
.feld select{cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .feld input:hover,.feld textarea:hover,.feld select:hover{border-color:var(--accent-text)}
}
.feld input:focus-visible,.feld textarea:focus-visible,.feld select:focus-visible{
  outline:3px solid var(--fokus);outline-offset:2px;border-color:var(--accent-text)}

.formular button{cursor:pointer}
.datenschutz-hinweis{font-size:.9375rem;color:var(--muted);display:block}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Fehlerfuehrung ---- */
.feld [aria-invalid="true"]{border-color:var(--accent2-text);box-shadow:inset 4px 0 0 var(--accent2-text)}
.feld-fehler{
  display:flex;align-items:flex-start;gap:.45rem;
  font-family:var(--schrift-lauf);font-weight:600;font-size:.9375rem;line-height:1.4;color:var(--accent2-text);
}
.feld-fehler::before{
  content:"!";flex:0 0 auto;display:grid;place-items:center;width:1.25rem;height:1.25rem;margin-top:.05rem;
  border-radius:50%;background:var(--accent2-text);color:var(--flaeche-licht);
  font-family:var(--schrift-titel);font-weight:800;font-size:.875rem;line-height:1;
}
.formular-meldung{grid-column:1/-1}
.formular-meldung:empty{display:block;margin:0;padding:0}
.formular-meldung .hinweis{margin:0}

/* ---- Meldungen (auch cms-auth.php, intern.php) ---- */
.hinweis{
  position:relative;margin:1.4rem 0 0;padding:.95rem 1.15rem;max-width:62ch;
  background-color:var(--flaeche-wash);color:var(--text);
  border-left:4px solid var(--accent-text);border-radius:var(--r-chip);
}
.hinweis-ok{border-left-color:var(--accent-text)}
.hinweis-fehler{border-left-color:var(--accent2-text)}
.hinweis small{display:block;margin-top:.35rem;color:var(--muted);font-size:.9375rem;line-height:1.45}

/* Haken nach dem Senden (K31): Kreis und Haekchen zeichnen sich einmal,
   600 ms. Endzustand steht hier (dashoffset 0), die Animation laeuft nur
   VON leer ZU diesem Stand (fill backwards fuer die Verzoegerung). */
.hinweis-ok:has(.haken){padding-left:4.1rem;min-height:4.1rem}
.haken{position:absolute;left:1rem;top:.9rem;width:2.3rem;height:2.3rem;color:var(--accent-text)}
.haken circle,.haken path{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .haken circle{animation:kh-haken 380ms var(--ease) 60ms backwards}
  .haken path{animation:kh-haken 260ms var(--ease) 400ms backwards}
}
@keyframes kh-haken{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

@media (pointer:coarse){
  .feld input,.feld textarea,.feld select{min-height:48px}
}