/* ergaenzung-formular.css -- Fehlerbild der Anfrageformulare.
   Gehoert zur Pruefung in public/js/forms.js (Fehler am Feld mit Text und
   Loesung, Liste oben im Formular, Fokus auf das erste Feld). Farben aus dem
   Theme der Site: Rot ist hier nicht der Akzent des Hauptknopfs, sondern das
   dunklere Fehlerrot #b42318, das styles.css schon fuer .form-status.is-error
   benutzt. Rot steht nie allein: jeder Fehler hat Text, die Felder zusaetzlich
   eine kraeftigere Kontur. */

/* --- Satz am Feld ------------------------------------------------------- */

/* Leer heisst weg: so entsteht keine Luecke in der Label-Spalte, und
   aria-describedby zeigt auf einen Knoten ohne Inhalt, also ohne Ansage. */
.quote-form .feld-fehler:empty {
  display: none;
}

/* Die Regel .quote-form span macht jeden span fett und dunkel; hier wird
   das fuer den Fehlersatz zurueckgenommen. */
.quote-form .feld-fehler {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: #b42318;
}

/* Der Haken vor dem Satz ist dekorativ, der Text traegt die Aussage. */
.quote-form .feld-fehler::before {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: #b42318;
  vertical-align: 0.05em;
}

.quote-form input[aria-invalid='true'],
.quote-form textarea[aria-invalid='true'],
.quote-form select[aria-invalid='true'] {
  border-color: #b42318;
  background: #fff6f5;
  /* Zweites Merkmal neben der Farbe (WCAG 1.4.1): die Kontur wird dicker. */
  box-shadow: inset 0 0 0 1px #b42318;
}

/* Die Gruppe der Leistungen ist ein fieldset: der Fehlersatz sitzt unter der
   Legende, die Flaeche bekommt denselben hellen Grund wie ein falsches Feld. */
.quote-form fieldset.service-select[aria-invalid='true'] {
  padding: 0.9rem 0.9rem 1rem;
  border: 1px solid #b42318;
  border-radius: var(--radius-sm, 16px);
  background: #fff6f5;
}

.quote-form fieldset .feld-fehler {
  margin-bottom: 0.9rem;
}

/* --- Liste oben im Formular -------------------------------------------- */

/* Der Bereich bleibt von Anfang an im DOM und wird nie display:none: ein
   role="alert", das erst eingeblendet wird, sagt bei manchen Screenreadern
   nichts. Leer ist er null hoch, der negative Rand schluckt die Luecke des
   Grid-Abstands von .quote-form. */
.formular-fehler {
  height: 0;
  margin-bottom: -16px;
  overflow: hidden;
}

.formular-fehler.is-aktiv {
  height: auto;
  margin-bottom: 0;
  overflow: visible;
  padding: 1.1rem 1.25rem 1.2rem;
  border-radius: var(--radius-sm, 16px);
  border: 1px solid #b42318;
  background: #fff6f5;
  color: #7a1811;
}

.formular-fehler-kopf {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: #7a1811;
}

.formular-fehler-liste {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.formular-fehler-liste a {
  color: #b42318;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.formular-fehler-liste a:focus-visible {
  color: #7a1811;
}

@media (hover: hover) and (pointer: fine) {
  .formular-fehler-liste a:hover {
    color: #7a1811;
  }
}

/* --- Stand nach dem Senden --------------------------------------------- */

/* .form-status traegt role="status"; leer soll er keinen Platz beanspruchen,
   aber im DOM bleiben. min-height aus styles.css deshalb hier auf 0. */
.quote-form .form-status:empty {
  min-height: 0;
  margin-top: 0;
}