/* ============================================================================
 * apply.css — Öffentliches Bewerbungsformular (index.html). Ergänzt head.css.
 * ----------------------------------------------------------------------------
 * Nativ nested (iOS 16.5+): `& x` für Descendants, `&:hover`/`&.klasse` für
 * compound/pseudo. Nutzt ausschließlich die Design-Tokens aus head.css.
 * ========================================================================== */

/* head.css reserviert Platz für App-Bars — diese Seite hat keine. */
.apply-body { padding:0; background:var(--surface-2); }

.apply {
  max-width:680px; margin:0 auto; padding:32px 18px 56px;
  display:flex; flex-direction:column; gap:18px;
}

/* ---- Kopf ---- */
.apply-head { text-align:center; }
.apply-brand {
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:6px 14px;
}
.apply-title { font-size:30px; font-weight:800; letter-spacing:-.025em; margin:14px 0 6px; }
.apply-sub { color:var(--muted); font-size:15px; }
.apply-lead { color:var(--muted); font-size:14px; margin-top:6px; }

/* ---- Karte ---- */
.apply-card {
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:24px 22px 22px;
  &[hidden] { display:none; }
}
@media (max-width:520px) { .apply-card { padding:20px 16px 18px; } }

/* ---- Fortschritt ---- */
.apply-progress { margin-bottom:22px; }
.apply-progress-bar {
  height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden;
  & span {
    display:block; height:100%; width:25%; border-radius:999px;
    background:var(--accent); transition:width .3s cubic-bezier(.22,.84,.22,1);
  }
}
.apply-progress-text { margin-top:9px; font-size:13px; color:var(--muted); }

/* ---- Schritte ---- */
.apply-step {
  border:none; display:flex; flex-direction:column; gap:18px;
  &[hidden] { display:none; }
}
.apply-legend { font-size:18px; font-weight:700; letter-spacing:-.01em; margin-bottom:2px; }
/* Das Fieldset ist nur programmatisch fokussierbar (tabindex="-1") — kein
 * Fokusring, sonst wirkt der ganze Schritt wie ein Bedienelement. */
.apply-step:focus { outline:none; }

.apply-field {
  display:flex; flex-direction:column; gap:7px;
  & > span { font-size:14px; font-weight:600; }
  &.invalid > span { color:var(--st-absage); }
  &.invalid input:not([type=radio]):not([type=checkbox]), &.invalid select { border-color:var(--st-absage); }
  /* Checkbox-Gruppen haben keine native Meldung — der Rahmen muss es sagen. */
  &.invalid .apply-choice { border-color:var(--st-absage); }
  &[data-required].invalid > span::after { content:' — bitte auswählen'; font-weight:400; }
}
.apply-field-sm { flex:0 0 120px; }
.apply-row { display:flex; gap:12px; align-items:flex-start; }
@media (max-width:420px) {
  .apply-row { flex-direction:column; }
  .apply-field-sm { flex:1 1 auto; width:100%; }
}

/* Auswahl-Kacheln statt nackter Radios/Checkboxen */
.apply-choices {
  display:flex; gap:10px;
  &.apply-choices-wrap { flex-wrap:wrap; }
}
.apply-choice {
  flex:1 1 auto; min-width:120px; display:flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--surface-2); border:2px solid var(--line); border-radius:12px;
  padding:12px 14px; font-size:14.5px;
  & input { flex:0 0 auto; width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }
  &:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
  &:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); font-weight:600; }
}

.apply-consent {
  display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted);
  & input { flex:0 0 auto; width:18px; height:18px; margin-top:1px; accent-color:var(--accent); cursor:pointer; }
  &.invalid { color:var(--st-absage); }
}

/* Honeypot — für Menschen unsichtbar, aber im DOM. */
.apply-hp { position:absolute; left:-9999px; width:0; height:0; opacity:0; }

/* ---- Navigation ---- */
.apply-nav {
  display:flex; gap:10px; margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  & .btn-accent { flex:1; }
  & .btn-ghost { flex:0 0 auto; }
  & button[hidden] { display:none; }
  & .btn-accent:disabled { opacity:.6; cursor:default; }
}

/* ---- Danke ---- */
.apply-done {
  text-align:center;
  & h2 { font-size:22px; font-weight:800; letter-spacing:-.02em; margin-bottom:10px; }
  & p { color:var(--muted); font-size:14.5px; line-height:1.55; }
  & .apply-ref { margin-top:14px; font-size:13px; }
}
/* ---- Stelle geschlossen ---- */
.apply-closed {
  text-align:center;
  & h2 { font-size:19px; font-weight:700; letter-spacing:-.01em; margin-bottom:10px; }
  & p { color:var(--muted); font-size:14.5px; line-height:1.55; }
}
.apply-open-hint { margin-top:18px; font-weight:600; color:var(--text) !important; }
.apply-open-list, .apply-jobs { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
/* Eine Stelle = eine anklickbare Karte mit Titel und Kurzbeschreibung. */
.apply-open-job {
  display:flex; flex-direction:column; gap:4px; text-align:left;
  padding:14px 16px; border-radius:14px;
  background:var(--surface-2); border:2px solid var(--line);
  color:var(--text); text-decoration:none;
  & strong { font-size:15.5px; }
  & span { font-size:13.5px; color:var(--muted); line-height:1.45; }
  &:hover { border-color:var(--accent); background:var(--accent-soft); }
  &:hover strong { color:var(--accent); }
}

/* ---- Stellenauswahl (Startseite ohne ?stelle=) ---- */
.apply-picker {
  &[hidden] { display:none; }
  & h2 { font-size:18px; font-weight:700; letter-spacing:-.01em; }
  & .apply-picker-lead { color:var(--muted); font-size:14.5px; margin-top:6px; }
}

.apply-done-mark {
  width:64px; height:64px; margin:4px auto 18px; border-radius:50%;
  display:grid; place-items:center; font-size:32px; font-weight:700;
  background:var(--accent-soft); color:var(--accent);
}