/*
 * Darstellung fehlerhafter Felder im Rechner (P-2, docs/rechner_kundenbereich.md Abschnitt 8) – im Kundenbereich und seit
 * R2-3 (05.10.2026) auch im kostenlosen Rechner (docs/rechner_kostenlos.md); beide Designs. Bisher Teil von
 * css/rechner-kundenbereich.css, unverändert übernommen. Farben: Text 6,7:1 auf Weiß.
 */
:root {
  --ee-fehler: #a3281b;          /* Text und Rahmen fehlerhafter Felder: 6,7:1 auf Weiß */
  --ee-fehler-hell: #fdf1f0;     /* Hintergrund der Fehlerkachel */
  --ee-fehler-linie: #b93022;
}

/* Kachel (Frage), in der ein Feld fehlt oder falsch ist: roter Rand links und zarter Hintergrund */
#step-general-form .tile:has(.has-error, [aria-invalid="true"]),
#step-general-form .tab-panel:has(.has-error, [aria-invalid="true"]) {
  box-shadow: inset 5px 0 0 var(--ee-fehler-linie);
  background-color: var(--ee-fehler-hell);
}

/* Feld: weiß mit deutlichem Rahmen statt roter Fläche – die Eingabe bleibt gut lesbar */
#step-general-form .has-error input:not([type="radio"]):not([type="checkbox"]),
#step-general-form .has-error select,
#step-general-form .has-error textarea,
#step-general-form input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]),
#step-general-form select[aria-invalid="true"],
#step-general-form textarea[aria-invalid="true"] {
  border: 2px solid var(--ee-fehler-linie) !important;
  background-color: #fff !important;
  color: #1b1b1b !important;
}

#step-general-form .has-error input::placeholder,
#step-general-form input[aria-invalid="true"]::placeholder {
  color: #6b7480 !important;
}

#step-general-form .has-error input:focus,
#step-general-form input[aria-invalid="true"]:focus,
#step-general-form select[aria-invalid="true"]:focus {
  outline: 3px solid rgba(185, 48, 34, 0.35) !important;
  outline-offset: 1px;
}

/* Auswahl als Kachel/Knopf (Ja/Nein, Bilder): Rahmen der Beschriftung */
#step-general-form input[aria-invalid="true"] + label {
  border-color: var(--ee-fehler-linie) !important;
  box-shadow: 0 0 0 1px var(--ee-fehler-linie);
}

/* Meldung am Feld: Text mit Symbol, ohne eigene Fläche (sah wie ein zweites Eingabefeld aus) */
#step-general-form .help-block.bg-danger {
  position: relative;
  display: block;
  margin: 8px 0 0;
  padding: 2px 0 2px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--ee-fehler) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align: left;
}

#step-general-form .help-block.bg-danger:empty {
  display: none;
}

#step-general-form .help-block.bg-danger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23a3281b'/%3E%3Cpath fill='%23fff' d='M11 6h2v8h-2zM11 16h2v2h-2z'/%3E%3C/svg%3E");
}

/* Meldung über der Monatstabelle (Schritt 2): als Hinweiskasten, weil sie mehrere Felder betrifft */
#step-general-form .help-block.bg-danger.ee-monatsfehler {
  margin: 0 0 16px !important;
  padding: 12px 14px 12px 44px !important;
  border-left: 5px solid var(--ee-fehler-linie) !important;
  border-radius: 8px !important;
  background: #fff !important;
}

#step-general-form .help-block.bg-danger.ee-monatsfehler::before {
  left: 14px;
  top: 13px;
}

/* Fehlerliste über dem Formular */
.ee-fehlerliste {
  border-left-width: 6px;
  color: #5c140d;
}

.ee-fehlerliste .ee-fehlerliste__titel {
  position: relative;
  padding-left: 32px;
  font-size: 17px;
}

.ee-fehlerliste .ee-fehlerliste__titel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23a3281b'/%3E%3Cpath fill='%23fff' d='M11 6h2v8h-2zM11 16h2v2h-2z'/%3E%3C/svg%3E");
}

.ee-fehlerliste .ee-fehlerliste__liste {
  padding-left: 52px;
}

.ee-fehlerliste .ee-fehlerliste__bereich {
  font-weight: 600;
}