/* Visenza Quelle: quiz UI.
   Load order: visenza-tokens.css, then landing.css (reused for .btn/.btn--sek/.label/.h-lg),
   then this file for the quiz-specific screen/progress/option/consent styles.
   No icons anywhere (client design no-go). Sharp corners only (--radius from tokens). */

.qnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 44px;
  border-bottom: 1px solid var(--stein);
}
.qnav-brand {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--nacht);
  font-size: 1.1rem;
  text-decoration: none;
}
.qnav .langswitch { display: flex; gap: 12px; }
.qnav .langswitch a {
  color: var(--nacht);
  text-decoration: none;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: .55;
  transition: opacity .2s;
}
.qnav .langswitch a:hover { opacity: .9; }
.qnav .langswitch a[data-active] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.quiz-shell { max-width: 640px; margin: 0 auto; padding: 32px 44px 120px; }

/* ---- progress ---- */
.quiz-progress { margin-bottom: 64px; }
.quiz-progress-track { height: 2px; background: var(--stein); }
.quiz-progress-fill { height: 100%; background: var(--erde); width: 0%; transition: width .4s ease; }
.quiz-progress-meta { display: flex; justify-content: space-between; margin-top: 14px; }
.quiz-progress-meta .label { margin: 0; }

/* ---- calm screen transitions: fade + slight rise, never a jump-cut ---- */
/* padding: 0 overrides landing.css's generic `section { padding: var(--gap) 0 }`
   (130px, meant for the landing page's big scroll sections) — .quiz-shell already
   owns all spacing here, these sections must not add their own on top of it. */
.quiz-screen { padding: 0; transition: opacity .3s ease, transform .3s ease; opacity: 1; transform: translateY(0); }
.quiz-screen.is-hidden { opacity: 0; transform: translateY(10px); }

.quiz-question-text {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0 0 44px;
  color: var(--nacht);
}

/* ---- scale / choice options: bordered boxes, fill Erde on selection, no icons ---- */
.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-option {
  position: relative;
  display: block;
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--nacht);
  transition: background .2s, color .2s, border-color .2s;
}
.quiz-option input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-option:hover { border-color: var(--erde); }
.quiz-option.is-selected { background: var(--erde); color: var(--kalk); border-color: var(--erde); }

/* ---- open questions: plain textarea, no speech-to-text, no rich text ---- */
.quiz-textarea {
  width: 100%;
  min-height: 140px;
  background: #fbfaf7;
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--nacht);
  resize: vertical;
}
.quiz-textarea:focus { outline: none; border-color: var(--erde); }
.quiz-textarea::placeholder { color: #9a938a; }

/* Single source of truth for "space before Zurueck/Weiter": every screen
   (question, ankommen, final) zeroes its own last element's trailing
   margin and relies on this one value instead, so the gap can't drift
   out of sync between screens again. */
.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }
.quiz-nav button:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ---- ankommen screen: last paragraph hands spacing control to .quiz-nav ---- */
#screen-ankommen p:last-of-type { margin-bottom: 0; }

/* ---- final / consent screen ---- */
#screen-final p { margin: 18px 0 40px; }
.quiz-field-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--nacht);
  margin-bottom: 10px;
}
.quiz-input {
  width: 100%;
  background: #fbfaf7;
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  padding: 15px 18px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  color: var(--nacht);
  margin-bottom: 40px;
}
.quiz-input:focus { outline: none; border-color: var(--erde); }
.quiz-input::placeholder { color: #9a938a; }

.quiz-disclaimer {
  background: var(--sand);
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 36px;
}
.quiz-disclaimer .label { display: block; margin-bottom: 8px; }
.quiz-disclaimer p { font-size: 0.85rem; opacity: .75; margin: 0; max-width: 100%; }

.quiz-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--nacht);
  cursor: pointer;
}
.quiz-checkbox input[type=checkbox] {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--erde);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.quiz-checkbox a { color: var(--nacht); text-decoration: underline; text-underline-offset: 2px; }

/* ---- holding screen (graceful stand-in until submit-quiz backend exists) ---- */
#screen-holding { text-align: center; padding-top: 60px; }
#screen-holding p { margin: 20px auto 0; }

@media (max-width: 640px) {
  .quiz-shell { padding: 24px 26px 100px; }
  .qnav { padding: 16px 26px; }
  .quiz-progress { margin-bottom: 30px; }
  .quiz-question-text { margin-bottom: 26px; }
  .quiz-options { gap: 10px; }
  .quiz-option { padding: 15px 20px; }
  /* Two side-by-side buttons default to shrinking to fit their half-width
     flex slot; a long label like "Fragebogen abschicken" then wraps to two
     lines while its short sibling ("Zurück") stays on one, making the
     primary button look oversized next to a squeezed secondary. Stacking
     full-width gives each button room for its own label. */
  .quiz-nav { flex-direction: column; gap: 12px; }
  .quiz-nav button { width: 100%; }
  /* Stacked order should read primary-action-first: Weiter/Fragebogen
     abschicken on top, Zurück below. DOM order (back first) stays
     unchanged for tab/reading order, this is a visual-only swap. */
  .quiz-nav .btn--sek { order: 1; }
}