/* =====================================================================
   Bewerbungsformular - Multi-Step (Progressive Enhancement)
   Ohne JS: alle Schritte sichtbar (ein langes Formular). Mit JS: Schritte.
   ===================================================================== */

.apply-top { background: var(--anthrazit); color:#fff; }
.apply-top__inner { padding-block: clamp(1.75rem, 6vw, 2.75rem); }
.apply-top h1 { color:#fff; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.apply-top p { color: rgba(255,255,255,.82); margin-top:.4rem; }
.apply-back { display:inline-flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.8); font-size:.92rem; margin-bottom:.8rem; }
.apply-back:hover { color:#fff; }

.apply-wrap { max-width: 660px; margin-inline:auto; }
.apply-card {
  background:#fff; border:1px solid var(--grau-200); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(1.25rem, 4vw, 2rem); margin-top: -2.5rem; position:relative; z-index:2;
}

/* vorbelegte Stelle */
.stelle-chip {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  background: var(--rot-soft); color: var(--rot-dark); border-radius: var(--radius-sm);
  padding:.7rem 1rem; font-weight:600; margin-bottom:1.25rem;
}
.stelle-chip a { text-decoration:underline; font-weight:600; font-size:.9rem; }

/* Fortschritt */
.progress { display:none; margin-bottom:1.5rem; }
.js .progress { display:block; }
.progress__bar { height:6px; background: var(--grau-200); border-radius:999px; overflow:hidden; }
.progress__fill { height:100%; background: var(--rot); width:33%; transition: width .3s ease; border-radius:999px; }
.progress__label { font-size:.82rem; color: var(--grau-500); margin-top:.5rem; font-weight:600; }

/* Schritte */
.step { display:block; }
.js .step:not(.is-active) { display:none; }
.step__title { font-family:var(--font-head); font-weight:700; font-size:1.3rem; margin-bottom:.3rem; }
.step__hint { color:var(--grau-500); font-size:.95rem; margin-bottom:1.25rem; }
.js .step-heading-static { display:none; }

/* Felder */
.field { margin-bottom:1.1rem; }
fieldset { border:0; padding:0; margin:0 0 1.1rem; }
fieldset legend { display:block; font-weight:600; margin-bottom:.4rem; font-size:.95rem; padding:0; }
.reaction-line { display:flex; align-items:center; gap:.45rem; color:var(--gruen); font-weight:600; margin:.2rem 0 1rem; font-size:.95rem; }
.field > label { display:block; font-weight:600; margin-bottom:.4rem; font-size:.95rem; }
.field .opt { color:var(--grau-500); font-weight:400; }
.input, textarea, select {
  width:100%; min-height:50px; padding:.75rem .9rem; font:inherit; color:var(--anthrazit);
  background:#fff; border:1.5px solid var(--grau-300); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height:110px; resize:vertical; }
.input:focus, textarea:focus, select:focus { outline:none; border-color: var(--rot); box-shadow:0 0 0 3px var(--rot-soft); }
.field--error .input, .field--error textarea { border-color: var(--rot); }
.error-msg { color: var(--rot-dark); font-size:.85rem; margin-top:.35rem; font-weight:600; }
.form-error-box { background: var(--rot-soft); color: var(--rot-dark); border-radius:var(--radius-sm); padding:.9rem 1.1rem; margin-bottom:1.25rem; font-weight:600; }

/* Chip-Auswahl (Qualifikation, Zeitfenster) */
.chip-group { display:flex; flex-wrap:wrap; gap:.55rem; }
.chip { position:relative; }
.chip input { position:absolute; opacity:0; width:0; height:0; }
.chip label {
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:.6rem 1rem; min-height:48px; border:1.5px solid var(--grau-300); border-radius: var(--radius-pill);
  font-weight:600; font-size:.95rem; background:#fff; transition: all .14s ease; user-select:none;
}
.chip input:checked + label { background: var(--rot); border-color: var(--rot); color:#fff; }
.chip input:focus-visible + label { outline:2px solid var(--rot); outline-offset:2px; box-shadow:0 0 0 3px var(--rot-soft); }

/* Kontaktweg-Cards */
.contact-choice { display:grid; gap:.7rem; grid-template-columns:1fr; margin-bottom:1.1rem; }
@media (min-width:520px){ .contact-choice { grid-template-columns:1fr 1fr; } }
.contact-card { position:relative; }
.contact-card input { position:absolute; opacity:0; }
.contact-card label {
  display:flex; flex-direction:column; gap:.25rem; cursor:pointer; height:100%;
  padding:1rem 1.1rem; border:1.5px solid var(--grau-300); border-radius: var(--radius-sm); background:#fff; transition:all .14s ease;
}
.contact-card label .t { font-family:var(--font-head); font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:.5rem; }
.contact-card label .d { color:var(--grau-500); font-size:.88rem; }
.contact-card input:checked + label { border-color: var(--rot); background: var(--rot-soft); }
.contact-card input:focus-visible + label { outline:2px solid var(--rot); outline-offset:2px; box-shadow:0 0 0 3px var(--rot-soft); }

/* dynamische Bloecke je Kontaktweg - ohne JS beide sichtbar, mit JS nur der gewählte */
.contact-detail { margin-bottom:1.1rem; }
.contact-detail[hidden] { display:block; }
.js .contact-detail[hidden] { display:none; }

/* Upload */
.upload-toggle { margin:1rem 0; }
.upload-area { border:1.5px dashed var(--grau-300); border-radius:var(--radius-sm); padding:1rem; text-align:center; color:var(--grau-500); }
.upload-area input[type=file] { width:100%; margin-top:.5rem; }
.upload-hint { font-size:.82rem; color:var(--grau-500); margin-top:.4rem; }

/* Consent */
.consent { display:flex; gap:.6rem; align-items:flex-start; margin:.4rem 0 1rem; font-size:.92rem; }
.consent input { margin-top:.2rem; width:20px; height:20px; flex:none; accent-color: var(--rot); }
.consent a { color:var(--rot); text-decoration:underline; }

/* Navigation - Schritt-Buttons nur mit JS; der Absenden-Button bleibt immer da (No-JS-Fallback) */
.form-nav { display:flex; gap:.7rem; margin-top:1.5rem; }
.form-nav .btn { flex:1; }
.form-nav .btn--back { flex:none; }
.form-nav [data-next], .form-nav [data-prev] { display:none; }
.js .form-nav [data-next], .js .form-nav [data-prev] { display:inline-flex; }
.js .submit-static { display:none; }
.privacy-note { display:flex; align-items:center; gap:.45rem; justify-content:center; margin-top:1rem; font-size:.82rem; color:var(--gruen); font-weight:600; }