/* 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: 28px 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: 80px 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; margin-bottom: 56px; }
.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;
  margin-bottom: 56px;
}
.quiz-textarea:focus { outline: none; border-color: var(--erde); }
.quiz-textarea::placeholder { color: #9a938a; }

.quiz-nav { display: flex; justify-content: space-between; align-items: center; }
.quiz-nav button:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ---- 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;
  margin-bottom: 20px;
  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; }

#screen-final .quiz-nav { margin-top: 44px; }

/* ---- 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: 56px 26px 100px; }
  .qnav { padding: 22px 26px; }
}