/* =========================================================================
   Das Anmeldeformular, wenn etwas schiefgeht.

   Zwei Dinge stehen hier, beide gehören zusammen (Hintergrund und Herleitung
   in /pwa/anmeldung-fehler.js):

   1. Der Fehlerzustand der Felder. Indico setzt am fehlerhaften Feld die
      Klasse `error`, Semantic UI färbt es daraufhin rot — nur greift das bei
      Textfeldern nicht mehr, seit das Event-Stylesheet Rand und Fläche jedes
      Eingabefeldes mit `!important` auf das dunkle Design zieht. Bei den
      Auswahlfeldern (`ind-select`) ist der Fall dort schon von Hand
      nachgezogen; hier kommt der Rest nach. Es gewinnt die Spezifität: die
      ID des Formularbehälters schlägt die Klassenselektoren im
      Event-Stylesheet, auch wenn beide `!important` tragen.

   2. Der Kasten, den /pwa/anmeldung-fehler.js über den Absende-Knopf hängt.

   Erlaubnisliste wie in 40-installieren.css: Jede Regel hängt entweder an der
   ID des Anmeldeformulars oder an `.lozi-formfehler` — beides gibt es nur
   dort, wo es gemeint ist. Farben aus 05-farben.css, das Rot ist dasselbe wie
   im Event-Stylesheet.
   ========================================================================= */

#registration-form-submission-container .field.error input[type="text"],
#registration-form-submission-container .field.error input[type="email"],
#registration-form-submission-container .field.error input[type="tel"],
#registration-form-submission-container .field.error input[type="number"],
#registration-form-submission-container .field.error input[type="date"],
#registration-form-submission-container .field.error textarea {
  background: rgba(255, 0, 58, 0.1) !important;
  border-color: rgba(255, 0, 58, 0.55) !important;
  color: #ff003a !important;
}

.lozi-formfehler {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 0, 58, 0.55);
  border-left-width: 0.25rem;
  border-radius: 0.6rem;
  background: rgba(255, 0, 58, 0.1);
  color: var(--lozi-text);
  font-family: var(--lozi-sans);
  text-align: left;
  /* Der Kasten bekommt beim Erscheinen den Fokus, damit Vorleseprogramme ihn
     ansagen. Der Fokusrahmen des Browsers sagt daneben nichts und säße mitten
     im roten Rand. */
  outline: none;
}

/* Zwei Klassen im Selektor, weil das Event-Stylesheet `.page-content p` auf
   die Grotesk setzt und ein einzelnes `.lozi-formfehler-kopf` dagegen
   verlöre. */
.lozi-formfehler .lozi-formfehler-kopf {
  margin: 0;
  /* Schreibmaschine wie die Überschriften der Kästen darüber, der Fließtext
     darunter bleibt in der Grotesk — dieselbe Aufteilung wie im Formular. */
  font-family: var(--lozi-mono);
  font-weight: 600;
  color: #ff003a;
}

.lozi-formfehler ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.lozi-formfehler li {
  margin: 0.15rem 0;
}

.lozi-formfehler p + p,
.lozi-formfehler ul + p {
  margin: 0.5rem 0 0;
}

.lozi-formfehler-hinweis {
  color: var(--lozi-text2);
  font-size: 0.92em;
}