@charset "utf-8";
/* ==========================================================================
   Scanready — Erklaerungs-Generator.
   Nur die Klassen, die es auf der uebrigen Website nicht schon gibt.
   Gleiche Regeln wie dort: weiss, keine Karten, kein Schatten, Radius <= 4px,
   kein Dunkelmodus. Alle Textfarben >= 4,5:1 auf ihrem Untergrund.
   ========================================================================== */

/* --- Formular ------------------------------------------------------------ */
.erkl { max-width: 44em; }

.feld { padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
.feld:first-child { padding-top: 0; }
.feld[hidden] { display: none; }

.feld > label {
  display: block;
  font-size: var(--h3); font-weight: 600; letter-spacing: -0.012em;
  line-height: 1.25; margin-bottom: 0.4rem;
}
.feld__pflicht {
  display: inline-block; margin-left: 0.5rem;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #6B6F76; vertical-align: 0.12em;
}
.feld__hilfe { font-size: 0.9375rem; color: var(--sek); margin-bottom: 0.8rem; }

.feld__fehler { margin: 0 0 0.7rem; font-size: 0.9375rem; font-weight: 600;
                color: var(--rot); }
.feld__fehler:empty { display: none; }

.erkl input[type="text"],
.erkl input[type="url"],
.erkl input[type="email"],
.erkl input[type="tel"],
.erkl input[type="date"],
.erkl textarea,
.erkl select {
  width: 100%; max-width: 34em;
  font: inherit; font-size: 1rem; line-height: 1.5;
  color: var(--text); background: var(--grund);
  border: 1px solid var(--kante); border-radius: 3px;
  padding: 0.6rem 0.75rem;
}
.erkl textarea { min-height: 5.5rem; resize: vertical; }
.erkl input[type="date"] { max-width: 14em; }
.erkl select { max-width: 34em; padding-right: 0.5rem; }
.erkl ::placeholder { color: #6B6F76; opacity: 1; }
.erkl [aria-invalid="true"] { border-color: var(--rot); border-width: 2px;
                              padding: calc(0.6rem - 1px) calc(0.75rem - 1px); }

/* Die Wahlfelder liegen bei diesem Formular untereinander: die Beschriftungen
   sind ganze Saetze, nebeneinander waeren sie nicht mehr ueberfliegbar. */
.wahl--spalte { flex-direction: column; align-items: flex-start; }
.wahl--spalte label { width: 100%; max-width: 34em; align-items: flex-start; }
.wahl--spalte input { margin-top: 0.28rem; flex: none; }

.erkl .frage:first-child { padding-top: 0; }
.erkl .frage legend { font-size: var(--h3); }

/* --- Pruefblock im Formular ---------------------------------------------- */
.scanfeld { padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
.scanfeld h3 { margin-bottom: 0.4rem; }
.scanfeld .fragehilfe { max-width: 40em; }
.scanfeld .knopfreihe { margin-top: 1.1rem; }
.scanfeld .lauftext { max-width: 40em; }
.scanfeld .lauftext:empty { display: none; }

/* --- Sammelmeldung fuer Fehler ------------------------------------------- */
.fehlerkasten {
  margin-bottom: 2rem; padding: 1.25rem 1.4rem;
  border: 2px solid var(--rot); border-radius: 4px; background: var(--grund);
}
.fehlerkasten:empty { display: none; }
.fehlerkasten h3 { color: var(--rot); margin-bottom: 0.6rem; }
.fehlerkasten p { font-size: 1rem; color: var(--text); margin-bottom: 0.7rem; }
.fehlerkasten ul { margin: 0; padding-left: 1.2rem; }
.fehlerkasten li { font-size: 1rem; margin-bottom: 0.3rem; }
.fehlerkasten a { color: var(--rot); font-weight: 600; }

/* --- Ergebnis ------------------------------------------------------------ */
#erkl-status:empty { display: none; }
#erkl-status { font-size: 1rem; color: var(--text); font-weight: 600;
               margin-bottom: 1.4rem; }

.erkl__text {
  /* Kein eigener Rollbereich: der Text bricht um. Sonst braeuchte der
     Kasten einen Tastaturfokus, und lesbar waere er trotzdem nicht. */
  white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible;
  margin: 1.6rem 0 0; padding: 1.5rem;
  background: var(--grund); border: 1px solid var(--linie); border-radius: 4px;
  font-family: var(--mono); font-size: 0.9375rem; line-height: 1.65;
  color: var(--text);
}

#erkl-ausgabe .fussnote { margin-top: 1.2rem; }

@media (max-width: 600px) {
  .erkl__text { padding: 1rem; font-size: 0.875rem; }
}

@media print {
  .erkl, .fehlerkasten, .scanfeld { display: none; }
  .erkl__text { border: 0; padding: 0; font-size: 10pt; }
}