/* ============================================================
   IRONCLOSING · Bewerbung
   Eine Frage je Bildschirm. Nichts, was ablenkt.
   ============================================================ */

body{display:flex;flex-direction:column;min-height:100svh}

.raum-licht{
  position:fixed;inset:0;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(52% 40% at 18% 0%, rgba(47,211,154,.11), transparent 64%),
    radial-gradient(46% 38% at 88% 12%, rgba(11,107,83,.16), transparent 68%);
}

/* ---------- Kopf ------------------------------------------ */
.b-kopf{position:relative;z-index:3;border-bottom:1px solid var(--edge)}
.b-kopf-innen{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:66px;
}
.b-zurueck{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px 9px 11px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:none;cursor:pointer;
  font-size:.86rem;color:var(--smoke);
  transition:color .25s ease,border-color .25s ease,opacity .3s ease;
}
.b-zurueck:hover{color:var(--chalk);border-color:var(--edge-2)}
.b-zurueck[hidden]{display:none}
.b-stand{
  font-family:var(--mono);font-size:.7rem;
  letter-spacing:.15em;color:var(--smoke-2);
  font-variant-numeric:tabular-nums;
}
.b-stand b{color:var(--em);font-weight:500}

/* Fortschritt: eine Haarlinie, die sich füllt. */
.b-balken{height:2px;background:var(--iron-3);position:relative;overflow:hidden}
.b-balken i{
  position:absolute;inset:0 auto 0 0;
  width:var(--stand,0%);
  background:linear-gradient(90deg,var(--em-3),var(--em));
  box-shadow:0 0 14px rgba(47,211,154,.7);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}

/* ---------- Bühne ----------------------------------------- */
.b-buehne{
  position:relative;z-index:2;
  flex:1;
  display:flex;align-items:center;
  padding-block:clamp(34px,7vh,72px);
}
.b-spur{width:min(720px,100%);margin-inline:auto;padding-inline:var(--rand)}

.frage{display:none}
.frage.aktiv{display:block;animation:auftreten .55s cubic-bezier(.22,1,.36,1) both}
@keyframes auftreten{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
.frage.zurueck{animation-name:auftreten-rueck}
@keyframes auftreten-rueck{
  from{opacity:0;transform:translateY(-18px)}
  to{opacity:1;transform:none}
}

.frage-nr{
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.2em;color:var(--em);
  margin-bottom:20px;display:block;
}
.frage h2{
  font-family:var(--serif);
  font-size:clamp(1.85rem,4.6vw,3rem);
  line-height:1.06;letter-spacing:-.025em;
  color:var(--chalk);text-wrap:balance;
}
.frage-hinweis{
  margin-top:16px;color:var(--smoke);
  font-size:1rem;max-width:52ch;
}
.frage-feld{margin-top:clamp(28px,4vh,40px)}

/* ---------- Eingaben -------------------------------------- */
.eingabe,
.b-textfeld{
  width:100%;
  padding:17px 20px;
  border:1px solid var(--edge-2);
  border-radius:var(--r);
  background:rgba(233,241,237,.026);
  color:var(--chalk);
  font-size:1.05rem;
  transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease;
}
.eingabe::placeholder,.b-textfeld::placeholder{color:var(--smoke-2)}
.eingabe:focus,.b-textfeld:focus{
  outline:none;
  border-color:var(--em);
  background:rgba(47,211,154,.05);
  box-shadow:0 0 0 4px rgba(47,211,154,.1);
}
.b-textfeld{min-height:132px;resize:vertical;line-height:1.55;font-family:var(--sans)}

.feld-paar{display:grid;gap:12px}
@media (min-width:560px){.feld-paar{grid-template-columns:1fr 1fr}}

/* Kontakt: Nummer oben, E-Mail direkt darunter */
.kontakt-felder{display:grid;gap:12px}

/* Telefon: Vorwahl + Nummer */
.tel-zeile{display:flex;gap:10px}
.tel-vorwahl{
  flex:none;width:132px;
  padding:17px 12px;
  border:1px solid var(--edge-2);
  border-radius:var(--r);
  background:var(--iron-2);
  color:var(--chalk);
  font-family:var(--mono);font-size:.94rem;
  cursor:pointer;
}
.tel-zeile .eingabe{flex:1;min-width:0}

/* Auswahlkarten */
.karten{display:grid;gap:11px}
@media (min-width:560px){.karten.zwei{grid-template-columns:1fr 1fr}}
.karte{
  position:relative;
  display:flex;align-items:center;gap:15px;
  width:100%;
  padding:18px 20px;
  border:1px solid var(--edge-2);
  border-radius:var(--r);
  background:rgba(233,241,237,.026);
  color:var(--chalk-2);
  font-size:1.02rem;text-align:left;
  cursor:pointer;
  transition:border-color .28s ease,background-color .28s ease,transform .28s cubic-bezier(.22,1,.36,1),color .28s ease;
}
.karte:hover{border-color:var(--edge-3);background:rgba(233,241,237,.052);transform:translateX(3px)}
.karte-taste{
  flex:none;
  width:27px;height:27px;
  display:grid;place-content:center;
  border:1px solid var(--edge-2);
  border-radius:7px;
  font-family:var(--mono);font-size:.72rem;
  color:var(--smoke-2);
  transition:all .28s ease;
}
.karte:hover .karte-taste{border-color:var(--em);color:var(--em)}
.karte.gewaehlt{
  border-color:var(--em);
  background:rgba(47,211,154,.1);
  color:var(--chalk);
}
.karte.gewaehlt .karte-taste{
  background:var(--em);border-color:var(--em);color:#04231a;
}

/* Frage 08 — das NICHT muss ins Auge springen */
.nicht{
  color:var(--warn);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}

/* Skala 1–10 */
.skala-wert{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(3.4rem,13vw,5.6rem);
  line-height:1;letter-spacing:-.05em;
  text-align:center;
  background:linear-gradient(176deg,#c9ffe9,var(--em) 52%,var(--em-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:8px;
  transition:filter .4s ease;
  position:relative;
}
/* Der Betrag hat mehr Zeichen als eine Ziffer, sonst sprengt er die Zeile. */
.geld .skala-wert{font-size:clamp(2.3rem,8.5vw,3.8rem)}

/* Am oberen Anschlag (10.000 €) glüht der ganze Regler in Messing: Zahl,
   Spur, Griff und Randwerte. Die Spur kommt sonst aus ic.css in --em,
   deshalb hier eigens überschrieben. */
.geld.voll .skala-wert{
  background:linear-gradient(176deg,#fff0d4,var(--heat) 44%,var(--heat-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(255,157,84,.55));
  animation:flackern 1.6s ease-in-out infinite alternate;
}
.geld.voll input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,
    var(--heat-2) 0%, var(--heat-2) calc(var(--f,50) * 1%),
    var(--iron-4) calc(var(--f,50) * 1%), var(--iron-4) 100%);
  box-shadow:0 0 18px -4px rgba(255,157,84,.65);
}
.geld.voll input[type=range]::-moz-range-progress{background:var(--heat-2)}
.geld.voll input[type=range]::-webkit-slider-thumb{
  background:linear-gradient(180deg,#fff3de,var(--heat-2));
  box-shadow:0 0 0 5px rgba(255,157,84,.18), 0 4px 14px rgba(0,0,0,.6);
}
.geld.voll input[type=range]::-moz-range-thumb{
  background:linear-gradient(180deg,#fff3de,var(--heat-2));
  box-shadow:0 0 0 5px rgba(255,157,84,.18);
}
.geld.voll .skala-enden{color:var(--heat)}

.skala.voll .skala-wert{
  background:linear-gradient(176deg,#fff0d4,var(--heat) 44%,var(--heat-2));
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 30px rgba(255,157,84,.55));
  animation:flackern 1.6s ease-in-out infinite alternate;
}
@keyframes flackern{
  from{filter:drop-shadow(0 0 22px rgba(255,157,84,.4))}
  to{filter:drop-shadow(0 0 40px rgba(255,157,84,.7))}
}
.skala-enden{
  display:flex;justify-content:space-between;
  margin-top:10px;
  font-size:.86rem;color:var(--smoke-2);
}

/* ---------- Fuß der Frage --------------------------------- */
.frage-fuss{
  margin-top:clamp(26px,4vh,36px);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
}
.tasten-tipp{
  font-family:var(--mono);font-size:.65rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--smoke-2);
}
.tasten-tipp kbd{
  font-family:var(--mono);
  padding:3px 7px;
  border:1px solid var(--edge-2);
  border-radius:5px;
  background:var(--iron-2);
  color:var(--chalk-2);
  font-size:.65rem;
}
.fehler{
  color:var(--warn);font-size:.9rem;
  margin-top:12px;min-height:1.2em;
}

/* ---------- Abschluss ------------------------------------- */
.zusammenfassung{
  list-style:none;margin:0 0 28px;padding:0;
  display:grid;gap:1px;
  background:var(--edge);
  border:1px solid var(--edge);
  border-radius:var(--r);
  overflow:hidden;
}
.zusammenfassung li{
  background:var(--iron);
  padding:13px 18px;
  display:flex;flex-wrap:wrap;gap:4px 18px;
  justify-content:space-between;align-items:baseline;
  font-size:.92rem;
}
.zusammenfassung b{font-weight:400;color:var(--smoke);flex:none}
.zusammenfassung span{flex:1;color:var(--chalk-2);text-align:right}
/* Steht als eigene Spalte neben dem Wert, damit ein langer Satz
   ihn nicht in die nächste Zeile schiebt. */
.zusammenfassung .aendern{
  flex:none;align-self:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--em);
  background:none;border:0;cursor:pointer;padding:0;
}
.zusammenfassung .aendern:hover{text-decoration:underline;text-underline-offset:3px}

/* Hinweistext statt Kästchen: Das Absenden ist die Zustimmung. */
.einwilligung-text{
  margin:0 0 20px;
  font-size:.84rem;line-height:1.55;color:var(--smoke-2);
  text-align:center;
}
.einwilligung-text a{color:var(--smoke);text-decoration:underline;text-underline-offset:2px}
.einwilligung-text a:hover{color:var(--em)}

/* Feld hinter „Etwas anderes“. Steht erst da, wenn die Karte gewählt ist. */
.frei-feld{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
/* Muss nach der display-Regel stehen: eine eigene display-Angabe schlägt
   sonst das hidden-Attribut, und das Feld stünde immer da. */
.frei-feld[hidden]{display:none}
.frei-feld .eingabe{flex:1;min-width:200px}

.einwilligung{
  display:flex;gap:13px;align-items:flex-start;
  margin-bottom:24px;
  font-size:.88rem;line-height:1.5;color:var(--smoke);
}
.einwilligung input{
  flex:none;margin-top:3px;
  width:19px;height:19px;
  accent-color:var(--em);
  cursor:pointer;
}
.einwilligung a{color:var(--chalk-2);text-decoration:underline;text-underline-offset:3px}
.einwilligung a:hover{color:var(--em)}

/* ---------- Fuß der Seite --------------------------------- */
.b-fuss{
  position:relative;z-index:3;
  border-top:1px solid var(--edge);
  padding-block:18px;
  font-family:var(--mono);font-size:.63rem;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--smoke-2);
}
.b-fuss-innen{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.b-fuss a:hover{color:var(--em)}

/* ---------------------------------------------------------------
   Nicht übermittelte Bewerbung
   Erscheint nur, wenn ein früherer Versuch gescheitert ist und die
   Antworten noch im Gerät liegen. Unten mittig, damit der Fragebogen
   darüber ungestört bleibt.
   --------------------------------------------------------------- */
.nachreichen{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:9000;
  width:min(560px, calc(100vw - 32px));
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--edge-3);
  background:var(--iron-3);
  box-shadow:0 20px 52px -26px rgba(0,0,0,.92);
}
.nachreichen p{
  margin:0;
  flex:1;
  font-size:.9rem;
  line-height:1.4;
  color:var(--chalk-2);
}
.nachreichen b{color:var(--chalk);font-weight:600}
.nachreichen-knopf{
  flex:none;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--em);
  background:rgba(47,211,154,.14);
  color:var(--chalk);
  font:inherit;
  font-size:.88rem;
  cursor:pointer;
}
.nachreichen-knopf:hover{background:rgba(47,211,154,.24)}
.nachreichen-zu{
  flex:none;
  width:26px;height:26px;
  border-radius:999px;
  border:1px solid var(--edge-2);
  background:transparent;
  color:var(--smoke);
  font:inherit;
  line-height:1;
  cursor:pointer;
}
.nachreichen-zu:hover{color:var(--chalk);border-color:var(--edge-3)}

@media (max-width:520px){
  .nachreichen{flex-wrap:wrap}
  .nachreichen p{flex:1 1 100%}
  .nachreichen-knopf{flex:1}
}