/* Prozess-Check-Formular auf /coaches.
   Nutzt die Token der Seite (--sf, --sf2, --ln, --ln2, --ui, --tx, --tx2,
   --mu, --ac, --acink). Hell und dunkel kommen dadurch automatisch mit.

   Ohne JavaScript stehen alle drei Schritte untereinander und der Absenden-
   Knopf ist sichtbar. Das Formular funktioniert dann vollstaendig, nur ohne
   Schrittweise. Deshalb sind die Navigations-Knoepfe im HTML versteckt und
   werden erst vom Skript eingeblendet. */

.check .schrittzeile{
  margin:0; font-size:13.5px; color:var(--mu); letter-spacing:.02em;
}
.check .schrittzeile b{ color:var(--tx2); }

.check fieldset.schritt{
  margin:0; padding:0; border:0; min-width:0;
  display:grid; gap:20px;
}
.check fieldset.schritt[hidden]{ display:none; }
.check fieldset.schritt legend{
  padding:0; margin:0 0 2px;
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mu);
}

/* Eine Frage mit mehreren Antwortmoeglichkeiten */
.check .frage{ display:grid; gap:8px; }
.check .frage>.f{
  font-size:16px; font-weight:600; color:var(--tx); line-height:1.4;
}
.check .frage>.h,
.check label>.h{
  font-size:13.5px; font-weight:400; color:var(--mu); line-height:1.45;
}
.check .opt-hin{ font-weight:400; color:var(--mu); }

/* Antwortmoeglichkeit als antippbare Flaeche. Die Seite setzt
   .check label{display:grid} — hier braucht es eine Zeile, deshalb flex. */
.check label.opt{
  display:flex; align-items:center; gap:11px;
  padding:12px 14px; min-height:50px;
  border:1px solid var(--ln2); border-radius:6px;
  background:var(--bg); cursor:pointer;
  font-size:16px; font-weight:400; color:var(--tx);
  transition:border-color .15s, background-color .15s;
}
.check label.opt:hover{ border-color:var(--ui); }
.check label.opt input{
  width:20px; height:20px; flex:none; margin:0; accent-color:var(--ac); cursor:pointer;
}
.check label.opt:has(input:checked){
  border-color:var(--ac); background:var(--sf2);
}
.check label.opt:has(input:focus-visible){
  outline:2px solid var(--ac); outline-offset:2px;
}

.check textarea{
  font:inherit; font-size:17px; line-height:1.5; padding:13px 14px;
  border:1px solid var(--ui); border-radius:6px;
  background:var(--bg); color:var(--tx); width:100%; resize:vertical; min-height:96px;
}
.check textarea::placeholder{ color:var(--mu); }

.check .navi{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
/* WICHTIG: .btn der Seite setzt display:inline-block. Eine Autoren-Regel
   schlaegt das display:none, das der Browser dem hidden-Attribut gibt — ohne
   diese Zeile bleiben "Zurück" und "Weiter" auf jedem Schritt sichtbar, und
   "Weiter" tut auf dem letzten Schritt nichts. Genau so am 23.09.2026 passiert. */
.check .navi .btn[hidden]{ display:none !important; }
.check .btn.sek{
  background:transparent; color:var(--tx2); border:1px solid var(--ln2);
}
.check .btn.sek:hover{ border-color:var(--ui); color:var(--tx); }

.check .fehler{
  margin:0; padding:11px 13px; border-radius:6px;
  border:1px solid var(--ac); background:var(--sf2);
  color:var(--tx); font-size:14.5px; line-height:1.5;
}
.check .fehler[hidden]{ display:none; }

@media (max-width:560px){
  .check label.opt{ font-size:15.5px; padding:11px 12px; }
}