/* =========================================================
   Bewerbungs-Funnel – eigenständiges Overlay im Zukunft-Look
   Scoped unter #zf-overlay, damit es nicht mit der geklonten
   Perspective-CSS ("fun-"-Klassen) kollidiert.
   ========================================================= */

#zf-overlay{
  --gold:#C7AA2E; --gold-d:#a5891f; --ink:#1c1c1c; --muted:#6b6b6b;
  --line:#e4e2da; --chip:#f5f3ec; --bg:#ffffff; --ok:#2f7d4e; --err:#c2603f;
  position:fixed; inset:0; z-index:100000;
  display:none; background:rgba(28,26,20,.55);
  font-family:"Inter","Segoe UI",system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#zf-overlay.is-open{display:block}
html.zf-lock,body.zf-lock{overflow:hidden}

#zf-overlay .zf-sheet{
  position:absolute; inset:0; margin:auto;
  width:100%; max-width:640px; height:100%;
  background:var(--bg); display:flex; flex-direction:column;
  box-shadow:0 0 60px rgba(0,0,0,.25);
}
@media(min-width:680px){
  #zf-overlay .zf-sheet{ inset:24px auto; left:0; right:0; height:calc(100% - 48px);
    border-radius:20px; overflow:hidden; }
}

/* Kopf: Logo, Fortschritt, Schließen */
#zf-overlay .zf-head{
  flex:0 0 auto; padding:16px 20px 12px; border-bottom:1px solid var(--line);
}
#zf-overlay .zf-head__row{display:flex; align-items:center; justify-content:space-between; gap:12px}
#zf-overlay .zf-logo{height:26px; width:auto; object-fit:contain; cursor:pointer}
#zf-overlay .zf-close{
  border:0; background:var(--chip); color:var(--ink);
  width:34px; height:34px; border-radius:50%; font-size:20px; line-height:1;
  cursor:pointer; flex:0 0 auto;
}
#zf-overlay .zf-close:hover{background:#e9e6dc}
#zf-overlay .funnel-step-label{margin:12px 0 6px; font-size:12px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase; color:var(--gold-d)}
#zf-overlay .funnel-progress{height:6px; background:#eee7d2; border-radius:999px; overflow:hidden}
#zf-overlay .funnel-progress__bar{height:100%; background:var(--gold); border-radius:999px;
  transition:width .35s ease}

/* Formular füllt die Fläche; Kopf oben, Scrollbereich mittig, Nav unten */
#zf-overlay .zf-form{flex:1 1 auto; display:flex; flex-direction:column; min-height:0}
#zf-overlay .zf-body{flex:1 1 auto; overflow-y:auto; padding:22px 20px 12px}

#zf-overlay .funnel-step{border:0; padding:0; margin:0 auto; max-width:520px; min-inline-size:auto}
#zf-overlay legend{padding:0; font-size:22px; line-height:1.25; font-weight:800;
  letter-spacing:-.3px; color:var(--ink); margin-bottom:4px}
#zf-overlay legend:focus{outline:none}
#zf-overlay .zf-sub{color:var(--muted); font-size:13px; margin:2px 0 16px}
#zf-overlay .zf-multi{display:inline-block; font-size:11px; color:var(--gold-d);
  background:#f6f1dd; border:1px solid #ecdfae; border-radius:6px; padding:2px 9px;
  margin:0 0 14px; font-weight:600}

/* Auswahl-Kacheln */
#zf-overlay .choice-group{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px}
@media(max-width:520px){#zf-overlay .choice-group{grid-template-columns:1fr}}
#zf-overlay .choice-group[data-cols="1"]{grid-template-columns:1fr}
#zf-overlay .choice{position:relative; display:flex; align-items:center; gap:10px;
  background:var(--chip); border:1.5px solid var(--line); border-radius:12px;
  padding:14px 14px; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s}
#zf-overlay .choice:hover{border-color:#d8cfa6}
#zf-overlay .choice input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
#zf-overlay .choice .zf-em{font-size:20px; line-height:1; width:24px; text-align:center; flex:0 0 auto}
#zf-overlay .choice span:not(.zf-em){flex:1}
#zf-overlay .choice:has(input:checked){border-color:var(--gold); background:#fbf6e4;
  box-shadow:0 0 0 3px rgba(184,153,46,.15)}
#zf-overlay .choice:has(input:focus-visible){outline:2px solid var(--gold); outline-offset:2px}

/* Kontakt-Felder */
#zf-overlay .field{margin-bottom:14px}
#zf-overlay .field > label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#333}
#zf-overlay .field input[type=text],
#zf-overlay .field input[type=email],
#zf-overlay .field input[type=tel]{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-size:16px; font-family:inherit; color:var(--ink); background:#fff}
#zf-overlay .field input:focus{outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,153,46,.15)}
#zf-overlay .field--check{display:flex; align-items:flex-start; gap:10px}
#zf-overlay .field--check input{width:20px; height:20px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--gold)}
#zf-overlay .field--check label{font-size:13px; font-weight:400; color:#444; margin:0}
#zf-overlay .field-hint{font-size:12px; color:var(--muted); margin:6px 0 0}
#zf-overlay .field-error{min-height:1em; margin:6px 0 0; font-size:12.5px; color:var(--err); font-weight:600}
#zf-overlay .choice-group[data-invalid="true"]{outline:none}
#zf-overlay .field[data-invalid="true"] input{border-color:var(--err)}

/* Buttons / Navigation */
#zf-overlay .zf-foot{flex:0 0 auto; border-top:1px solid var(--line); padding:14px 20px;
  background:#fff}
#zf-overlay .funnel-nav{display:flex; gap:10px; max-width:520px; margin:0 auto}
#zf-overlay .btn{border:0; border-radius:12px; padding:15px 18px; font-size:16px;
  font-weight:800; cursor:pointer; font-family:inherit; letter-spacing:.2px}
#zf-overlay .btn--block{flex:1 1 auto; width:100%}
#zf-overlay .btn--primary{background:var(--gold); color:#fff}
#zf-overlay .btn--primary:hover{background:var(--gold-d)}
#zf-overlay .btn--primary:disabled{opacity:.6; cursor:default}
#zf-overlay .btn--secondary{background:var(--chip); color:var(--ink); flex:0 0 auto}
#zf-overlay .btn--secondary:hover{background:#e9e6dc}
#zf-overlay [role="status"]{max-width:520px; margin:10px auto 0; text-align:center;
  font-size:13.5px; font-weight:600}

/* Rechtlicher Hinweis-Kasten (optional nutzbar) */
#zf-overlay .legal-box{background:#faf8f1; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin-bottom:14px; font-size:13px; color:#444}
#zf-overlay .muted{color:var(--muted)}

/* Honeypot niemals sichtbar */
#zf-overlay .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}