/* Quiz-Funnel: ergaenzt styles.css (Tokens, .btn, .eyebrow-pill, .hr-pill, .h1-opener) */

.quiz-hero { padding-bottom: var(--s-8); }
.quiz-hero .hero-inner { transition: opacity 0.45s var(--ease-lift); }
.quiz-hidden { display: none; }

.topbar a { display: inline-block; }
button.btn { font-family: inherit; border: none; cursor: pointer; }

/* ---------- Quiz-Karte ---------- */
.quiz-wrap { padding: var(--s-7) 0 var(--s-9); }
.quiz-card {
  background: var(--mist);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-6);
}
.quiz-top { margin-bottom: var(--s-5); }
.quiz-progress {
  margin-top: var(--s-3);
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--fog);
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width 0.4s var(--ease-lift);
}

.quiz-q { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); color: var(--ink); margin-bottom: var(--s-5); }

.quiz-opts { display: grid; gap: var(--s-3); }
.quiz-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--slate);
  background: var(--snow);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform 0.25s var(--ease-lift), border-color 0.25s var(--ease-lift), background 0.25s var(--ease-lift);
}
.quiz-opt:hover, .quiz-opt:focus-visible {
  border-color: var(--gold);
  background: var(--fog);
  transform: translateY(-1px);
  outline: none;
}
.quiz-opt-key {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gold);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 2px 7px;
  margin-top: 2px;
}

.quiz-back {
  margin-top: var(--s-5);
  font: inherit;
  font-size: var(--fs-small);
  color: var(--stone);
  background: none;
  border: none;
  cursor: pointer;
}
.quiz-back:hover { color: var(--slate); }

.quiz-footnote { text-align: center; font-size: var(--fs-small); color: var(--stone); margin-top: var(--s-4); }
.quiz-footnote a { color: var(--stone); }

/* ---------- E-Mail-Gate ---------- */
.quiz-gate-sub { color: var(--steel); margin: calc(var(--s-4) * -0.5) 0 var(--s-5); }
.quiz-fields { display: grid; gap: var(--s-3); }
.quiz-fields input {
  font: inherit;
  color: var(--ink);
  background: var(--snow);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 13px 16px;
}
.quiz-fields input::placeholder { color: var(--stone); }
.quiz-fields input:focus { outline: none; border-color: var(--gold); }
#gate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.quiz-error { color: #e08a8a; font-size: var(--fs-small); margin-top: var(--s-3); }
.quiz-submit { margin-top: var(--s-5); }
.quiz-consent { font-size: 0.78rem; line-height: 1.55; color: var(--stone); margin-top: var(--s-4); }
.quiz-consent a { color: var(--steel); }

/* ---------- Ergebnis ---------- */
.result-wrap { padding: var(--s-8) 0 var(--s-9); }
.result-boxes { display: grid; gap: var(--s-4); margin: var(--s-6) 0 var(--s-7); }
.box-card {
  background: var(--mist);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-5) var(--s-6);
}
.box-card-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.box-nr {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  background: var(--gold-dim);
}
.box-free {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.box-card h3 { font-size: 1.2rem; color: var(--ink); margin-bottom: var(--s-2); }
.box-pain { color: var(--steel); font-size: 0.95rem; margin-bottom: var(--s-2); }
.box-gain { color: var(--slate); font-size: 0.98rem; }

.result-offer {
  text-align: center;
  background: var(--mist);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-7) var(--s-6);
}
.result-offer h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); color: var(--slate); margin-bottom: var(--s-3); }
.result-offer h3 strong { color: var(--ink); font-weight: 700; }
.result-offer p { max-width: 44rem; margin: 0 auto var(--s-5); color: var(--steel); }
.result-shop-link { display: block; margin-top: var(--s-4); font-size: var(--fs-small); color: var(--stone); }
.result-shop-link:hover { color: var(--slate); }

@media (min-width: 860px) {
  .quiz-card { padding: var(--s-7); }
  .result-boxes { grid-template-columns: repeat(3, 1fr); }
  .box-card { padding: var(--s-5); }
}