/* Fragebogen für Bewerber (Karriere / Vertriebspartner).
   Nutzt die Farbvariablen aus tokens.css / theme.css. */

.scr { max-width: 760px; margin: 0 auto; }

.scr-progress { display: flex; gap: 6px; margin-bottom: 28px; }
.scr-progress span {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(0, 0, 0, 0.1); transition: background 0.25s;
}
.scr-progress span.is-done { background: var(--accent); }

.scr-step { display: none; }
.scr-step.is-active { display: block; animation: scr-in 0.28s ease-out; }
@keyframes scr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.scr-q {
  font-size: 24px; font-weight: 700; color: var(--ink);
  margin: 0 0 6px; line-height: 1.3;
}
.scr-hint { font-size: 15px; color: var(--body); margin: 0 0 22px; }

.scr-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.scr-tile {
  display: block;
  padding: 18px 20px; border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 14px;
  background: #fff; cursor: pointer; text-align: left;
  font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.35;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.scr-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.3); }
.scr-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.scr-tile.is-picked { border-color: var(--accent); background: rgba(0, 168, 168, 0.07); }

.scr-tile small { display: block; font-size: 13px; font-weight: 400; color: var(--body); margin-top: 3px; }

.scr-nav { margin-top: 24px; display: flex; align-items: center; gap: 16px; }
.scr-back {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 15px; color: var(--body); text-decoration: underline;
}
.scr-back:hover { color: var(--ink); }
.scr-count { font-size: 14px; color: var(--body); margin-left: auto; }

/* Ergebnis */
.scr-result { display: none; }
.scr-result.is-active { display: block; animation: scr-in 0.3s ease-out; }

.scr-box {
  border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 18px;
  padding: 32px 34px; background: #fff; box-shadow: var(--shadow-card, 0 14px 30px -20px rgba(0, 0, 0, 0.4));
}
.scr-box p { font-size: 16px; line-height: 1.6; color: var(--body); }
.scr-box p:last-child { margin-bottom: 0; }

.scr-fields { display: grid; gap: 14px; margin: 24px 0 20px; }
.scr-fields label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.scr-fields input {
  width: 100%; padding: 13px 15px; font-size: 16px; font-family: inherit;
  border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px; background: #fff; color: var(--ink);
}
.scr-fields input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.scr-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--body); line-height: 1.5; }
.scr-consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; }

/* Fangfeld gegen automatisch ausgefuellte Formulare. Nicht display:none, das ueberspringen
   manche Roboter absichtlich; so steht es ausserhalb des sichtbaren Bereichs. */
.scr-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.scr-error { font-size: 14px; color: #B3261E; margin: 0; min-height: 0; }
.scr-error:empty { display: none; }

.cf-turnstile { margin-top: 4px; }

@media (max-width: 640px) {
  .scr-q { font-size: 20px; }
  .scr-box { padding: 24px 20px; }
  .scr-tiles { grid-template-columns: 1fr; }
}