/* ==========================================================================
   Onboarding-Bogen - Ergaenzung zu scara.css
   ==========================================================================

   Warum eine eigene Datei und nicht ein Anhang an scara.css:
   scara.css wird eine Woche lang im Browser zwischengespeichert (siehe
   nginx.conf). Eine Aenderung daran erreicht wiederkehrende Besucher erst
   Tage spaeter. Der Bogen ist eine neue Seite - eine eigene Datei umgeht
   das Problem vollstaendig und laesst die bestehende Seite unberuehrt.

   Diese Datei setzt scara.css voraus und benutzt deren Tokens
   (--akzent, --linie-stark, --sp-*, --mono, ...). Sie wird NACH scara.css
   eingebunden.

   Regel wie im ganzen Projekt: keine style="..."-Attribute im HTML. Die
   Content-Security-Policy verbietet sie ausdruecklich (style-src-attr
   'none'). Was das Skript ueber el.style.setProperty() setzt, ist davon
   nicht betroffen - deshalb laeuft der Fortschrittsbalken ueber die
   Variable --fortschritt.
   ========================================================================== */

/* --- Weitere Feldtypen ---------------------------------------------------
   scara.css kennt nur text, email und textarea. Der Bogen braucht mehr.
   Die Werte sind bewusst identisch zu .feld input[type=text], damit kein
   sichtbarer Bruch zwischen den Feldarten entsteht.                      */
.feld input[type=tel],
.feld input[type=date],
.feld input[type=number],
.feld select{
  width:100%;
  background:transparent;
  border:0;border-bottom:1px solid var(--linie-stark);
  color:var(--schrift);
  font-family:var(--sans);font-size:var(--fs-body);
  padding:.6rem 0;min-height:2.75rem;
  border-radius:0;
}
.feld input[type=tel]:focus-visible,
.feld input[type=date]:focus-visible,
.feld input[type=number]:focus-visible,
.feld select:focus-visible{
  outline:0;border-bottom-color:var(--akzent);border-bottom-width:2px;
  padding-bottom:calc(.6rem - 1px);
}
.feld input[type=tel]:user-invalid,
.feld input[type=date]:user-invalid,
.feld input[type=number]:user-invalid,
.feld select:user-invalid{border-bottom-color:var(--akzent)}

/* Das Kalendersymbol im Datumsfeld ist in dunklen Oberflaechen sonst fast
   schwarz auf dunkelgrau und praktisch unsichtbar.                       */
.feld input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.55);cursor:pointer;
}
.feld input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:.9}

/* Auswahlfeld: eigener Pfeil, weil die Systemdarstellung je nach
   Betriebssystem hell und damit fremd wirkt. Die Grafik steht als
   data:-Adresse direkt hier - img-src erlaubt 'self' und data:.          */
.feld select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b8b1a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .1rem center;
  background-size:1rem;
  padding-right:1.6rem;
  cursor:pointer;
}
.feld select:focus-visible{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c98a7d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}
/* Die Klappliste selbst zeichnet das Betriebssystem. Ohne diese Zeile
   stuenden auf mancher Oberflaeche helle Eintraege auf hellem Grund.     */
.feld select option{background:var(--graphit-2);color:var(--papier)}

/* --- Erklaerung unter einem Feld ---------------------------------------- */
.feld__hinweis{
  display:block;margin-top:var(--sp-2);
  font-size:.875rem;color:var(--schrift-2);line-height:1.5;max-width:60ch;
}

/* Kennzeichnung freiwilliger Felder. Pflicht ist der Normalfall und wird
   deshalb NICHT markiert - sonst steht auf der Seite dreissig Mal ein
   Sternchen und die Ausnahme faellt nicht mehr auf.                      */
.feld > span .freiwillig,
.wahl > legend .freiwillig{
  margin-left:.6em;
  font-size:var(--fs-mono-xs);letter-spacing:.12em;
  color:var(--blei);text-transform:uppercase;
}

/* --- Zwei kurze Felder nebeneinander ------------------------------------ */
.feld-paar{display:grid;gap:0 var(--sp-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:40rem){
  .feld-paar{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Mehrfachauswahl ----------------------------------------------------
   .wahl aus scara.css passt bereits fuer Ankreuzfelder. Ergaenzt wird nur
   der Hinweis, dass mehrere Angaben moeglich sind.                       */
.wahl__mehrfach{
  margin:0 0 var(--sp-3);
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--blei);
}

/* --- Kopf des Bogens ---------------------------------------------------- */
.bogen__vorspann{max-width:68ch}
.bogen__vorspann p{color:var(--schrift-2)}
.bogen__dauer{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
  margin:var(--sp-5) 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:var(--fs-mono-s);letter-spacing:.06em;
  color:var(--schrift-2);
}
.bogen__dauer b{color:var(--akzent);font-weight:500;margin-right:.5em}

/* --- Fortschritt ueber zehn Bloecke -------------------------------------
   Zehn einzelne Segmente wie auf der Startseite waeren hier zu kleinteilig
   (und auf dem Telefon nicht mehr zu unterscheiden). Deshalb ein
   durchgehender Balken, dessen Fuellung das Skript ueber die Variable
   --fortschritt setzt.                                                    */
.bogen__fortschritt{
  position:sticky;top:0;z-index:5;
  margin:0 0 var(--sp-6);padding:var(--sp-3) 0;
  background:var(--grund);
  border-bottom:1px solid var(--linie);
}
.bogen__fortschritt p{
  margin:0 0 var(--sp-2);
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--schrift-2);
}
.bogen__fortschritt p b{color:var(--schrift);font-weight:500}
.bogen__balken{display:block;height:2px;background:var(--linie-stark)}
.bogen__balken i{
  display:block;height:100%;width:var(--fortschritt,0%);
  background:var(--akzent);
  transition:width .25s ease;
}
@media (prefers-reduced-motion:reduce){
  .bogen__balken i{transition:none}
}

/* --- Block-Zaehler ueber der Ueberschrift -------------------------------
   Steht als <span> INNERHALB der Ueberschrift, nicht als eigener Absatz
   davor: In einem <legend> sind nur Text und Ueberschriften zulaessig, ein
   <p> waere dort ungueltiges HTML.                                        */
.schritt__nr{
  display:block;
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--schrift-2);
  margin:0 0 var(--sp-2);
  font-weight:400;
}

/* --- Einwilligung fuer besondere Kategorien -----------------------------
   Diese eine Einwilligung muss sich sichtbar von der allgemeinen
   unterscheiden: Sie ist rechtlich eine eigene Entscheidung (Art. 9 Abs. 2
   lit. a DSGVO) und darf nicht wie eine Formalie mitlaufen.              */
.einwilligung--besonders{
  border-left:2px solid var(--siegelflaeche);
  background:var(--grund-2);
  padding:var(--sp-4);
  margin-bottom:var(--sp-5);
}
.einwilligung--besonders > span{color:var(--schrift)}

/* --- Sammelmeldung am Ende ---------------------------------------------- */
.sammelfehler{
  border-left:2px solid var(--akzent);
  padding:var(--sp-3) var(--sp-4);
  margin:0 0 var(--sp-5);
  color:var(--schrift);
}
.sammelfehler ul{margin:var(--sp-2) 0 0;padding-left:1.1rem}
.sammelfehler a{color:var(--akzent)}

/* --- Zusammenfassung vor dem Absenden ----------------------------------- */
.pruefliste{
  margin:0 0 var(--sp-5);padding:0;list-style:none;
  border-top:1px solid var(--linie);
}
.pruefliste li{
  display:grid;gap:0 var(--sp-4);
  grid-template-columns:minmax(0,1fr);
  padding:var(--sp-3) 0;
  border-bottom:1px solid var(--linie);
}
@media (min-width:40rem){
  .pruefliste li{grid-template-columns:14rem minmax(0,1fr)}
}
.pruefliste dt,.pruefliste .pruefliste__frage{
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--schrift-2);
}
.pruefliste .pruefliste__antwort{color:var(--schrift);overflow-wrap:anywhere}
.pruefliste .pruefliste__leer{color:var(--blei)}