/* ============================================================
   RETOV – Konto
   Der Weg mit vier Stationen, dieselbe Sprache wie das Ankunftsband im
   Ladebildschirm: erledigt, jetzt, später. Nur die Station "jetzt" ist
   aufgeklappt -- die Seite zeigt genau das, was als Nächstes zu tun ist.
   ============================================================ */
.eingang-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px);align-items:start}
@media(max-width:820px){ .eingang-raster{grid-template-columns:1fr} }
.eingang-fuss{margin-top:18px;margin-bottom:0}

.konto-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.konto-kopf .h2{margin-bottom:6px}
.konto-zeile{font-family:var(--mono);font-size:13px;color:var(--mute);letter-spacing:.04em}
.konto-punkt{margin:0 8px;color:var(--edge)}
.konto-zeile .bestaetigt{color:#5FBF7F}
.konto-zeile .unbestaetigt{color:#E0B341}
.konto-gut{color:#5FBF7F;font-size:15px;margin:0 0 20px;padding:12px 16px;border:1px solid rgba(95,191,127,.35);
  border-radius:8px;background:rgba(95,191,127,.06);max-width:70ch}
.konto-link{color:var(--seal);text-decoration:underline;text-underline-offset:3px}
.konto-link:hover{color:var(--bone)}

/* Ein <button> mit der Klasse .btn: die Seite kennt .btn bisher nur an
   Verweisen -- ein Knopf brächte sonst den weissen Systemgrund mit. */
button.btn{font:inherit;font-weight:600;cursor:pointer;background:transparent;border:1px solid var(--edge);color:var(--bone)}
button.btn.primary{background:var(--grad);border-color:transparent;color:#fff}
button.btn:disabled{opacity:.6;cursor:default;transform:none}

/* ---------- Der Weg ---------- */
.weg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.weg::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--edge)}
.station{position:relative;padding:0 0 0 62px;margin-bottom:10px}
.station-kopf{display:flex;gap:14px;align-items:flex-start;padding:14px 0}
.station-nr{position:absolute;left:0;top:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:16px;color:var(--mute);
  background:var(--ink);border:2px solid var(--edge);transition:border-color .3s,color .3s,background .3s}
.station-titel h2{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.2vw,24px);letter-spacing:-.01em;
  margin-bottom:4px;color:var(--mute);transition:color .3s}
.station-stand{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mute);min-height:1em}
.station-inhalt{display:none;padding:6px 0 22px}
.station[data-zustand="erledigt"] .station-nr{border-color:#5FBF7F;color:#5FBF7F;background:rgba(95,191,127,.10)}
.station[data-zustand="erledigt"] .station-titel h2{color:var(--bone)}
.station[data-zustand="erledigt"] .station-stand{color:#5FBF7F}
.station[data-zustand="jetzt"] .station-nr{border-color:var(--seal);color:var(--ink);background:var(--seal);
  box-shadow:0 0 0 6px rgba(255,106,26,.14)}
.station[data-zustand="jetzt"] .station-titel h2{color:var(--bone)}
.station[data-zustand="jetzt"] .station-stand{color:var(--seal)}
.station[data-zustand="jetzt"] .station-inhalt{display:block}
.station[data-zustand="gesperrt"] .station-nr{border-color:#F2624F;color:#F2624F}
.station[data-zustand="gesperrt"] .station-titel h2{color:var(--bone)}
.station[data-zustand="gesperrt"] .station-stand{color:#F2624F}
.station[data-zustand="gesperrt"] .station-inhalt{display:block}
.station-inhalt .apply-p{max-width:66ch}

/* Bewerbungsstand (offen / angenommen / abgelehnt) */
.stand-karte{border:1px solid var(--edge);border-radius:10px;padding:18px 22px;background:var(--paper);max-width:66ch}
.stand-karte h3{font-family:var(--display);font-weight:700;font-size:18px;margin-bottom:8px}
.stand-karte p{color:#B9BDCA;margin-bottom:6px}
.stand-karte .antwort{padding-left:14px;border-left:2px solid var(--seal);color:var(--bone);margin-top:10px}
.stand-karte.offen{border-color:rgba(255,138,61,.4)}
.stand-karte.angenommen{border-color:rgba(95,191,127,.45)}
.stand-karte.abgelehnt{border-color:rgba(242,98,79,.45)}

/* Regelfragen: vier Antworten, eine richtig */
.regelfrage{margin-bottom:22px}
.regelfrage .apply-q{margin-bottom:12px}
.regelfrage-antworten{display:flex;flex-direction:column;gap:8px}
.regelfrage-antworten label{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;border:1px solid var(--edge);
  border-radius:8px;cursor:pointer;color:#C3C6D2;font-size:15px;transition:border-color .18s,background .18s}
.regelfrage-antworten label:hover{border-color:var(--seal)}
.regelfrage-antworten input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--seal)}
.regelfrage-antworten label:has(input:checked){border-color:var(--seal);background:var(--paper);color:var(--bone)}

/* Charaktere */
.charaktere{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:8px;max-width:66ch}
.charaktere li{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--edge);border-radius:10px;
  background:var(--paper)}
.charaktere b{font-family:var(--display);font-weight:700;font-size:17px}
.charaktere .char-hinweis{font-family:var(--mono);font-size:12px;color:var(--seal);margin-left:auto;letter-spacing:.06em}
.charaktere .char-hinweis.fertig{color:#5FBF7F}
.char-raster{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
@media(max-width:600px){ .char-raster{grid-template-columns:1fr} }
.bereit{margin-top:26px;border-color:rgba(95,191,127,.45)}

/* Der Hinweis auf dem alten Formular (bewerbung.html) */
.konto-hinweis{border-color:rgba(255,106,26,.4);margin-bottom:22px}