/* ============================================================
   widgets.css — Quiz-Engine, Progress, Skala, Result, Chart
   ============================================================ */

.quiz {
  --quiz-pad: clamp(1.5rem, 4vw, 2.75rem);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.quiz__rail { height: 3px; background: var(--hairline-2); }
.quiz__rail-fill { height: 100%; width: 0; background: var(--clay); transition: width var(--dur) var(--ease); }

.quiz__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--quiz-pad) 0;
}
.quiz__counter { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--tracking-mono); color: var(--graphite); }
.quiz__counter b { color: var(--clay); }
.quiz__kicker { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--graphite-2); }

.quiz__stage { padding: var(--space-6) var(--quiz-pad) var(--quiz-pad); }
.quiz__panel { animation: quizIn var(--dur) var(--ease) both; }
@keyframes quizIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quiz__panel { animation: none; } }

.quiz__q { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; max-width: 32ch; }
.quiz__hint { color: var(--graphite); margin-top: 0.5rem; font-size: var(--step--1); }

/* ── Antwort-Optionen ─────────────────────────────────── */
.options { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.option {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; text-align: left;
  padding: 1rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.option:hover { border-color: var(--clay); transform: translateX(3px); }
.option__key {
  width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline); color: var(--graphite);
  font-family: var(--font-mono); font-size: 0.8rem; transition: inherit;
}
.option[aria-pressed="true"] { border-color: var(--clay); background: var(--clay-wash); }
.option[aria-pressed="true"] .option__key { background: var(--clay); border-color: var(--clay); color: #fff; }
.option.is-correct { border-color: var(--sage); background: color-mix(in srgb, var(--sage) 15%, transparent); }
.option.is-wrong { border-color: var(--clay-deep); background: color-mix(in srgb, var(--clay) 12%, transparent); }
.option__text { flex: 1; }
.option__mark { width: 1.1rem; height: 1.1rem; opacity: 0; }
.option.is-correct .option__mark, .option.is-wrong .option__mark { opacity: 1; }

/* ── Likert-Skala (1–5) ───────────────────────────────── */
.scale { margin-top: var(--space-6); }
.scale__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.scale__btn {
  padding: 1rem 0.4rem; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper); color: var(--graphite); font-family: var(--font-mono); font-size: var(--step-1);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.scale__btn:hover { border-color: var(--clay); transform: translateY(-2px); }
.scale__btn[aria-pressed="true"] { background: var(--clay); border-color: var(--clay); color: #fff; }
.scale__labels { display: flex; justify-content: space-between; margin-top: var(--space-3); font-size: var(--step--1); color: var(--graphite-2); }

/* ── Quiz-Steuerung ───────────────────────────────────── */
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.quiz__back { color: var(--graphite); font-size: var(--step--1); display: inline-flex; align-items: center; gap: 0.4rem; }
.quiz__back:hover { color: var(--clay); }
.quiz__back[hidden] { visibility: hidden; }

/* ── Feedback-Box (Wissens-Quiz) ──────────────────────── */
.feedback { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius); border: 1px solid var(--hairline); background: var(--paper); font-size: var(--step--1); color: var(--graphite); }
.feedback[data-state="correct"] { border-color: color-mix(in srgb, var(--sage) 40%, transparent); }
.feedback[data-state="wrong"] { border-color: color-mix(in srgb, var(--clay) 40%, transparent); }
.feedback b { color: var(--ink); }

/* ── Result-Screen ────────────────────────────────────── */
.result { text-align: center; display: grid; gap: var(--space-5); }
.result__eyebrow { color: var(--clay); }
.result__headline { font-size: var(--step-3); }
.result__headline .hl { color: var(--clay); font-style: normal; }
.result__score {
  font-family: var(--font-display); font-size: clamp(3rem, 9vw, 5rem); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.result__score small { font-size: 0.4em; color: var(--graphite); }
.result__text { color: var(--graphite); max-width: 48ch; margin-inline: auto; }
.result__cta { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-3); }
.result__pillars { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* ── E-Mail-Gate (Lead) ───────────────────────────────── */
.gate { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--hairline); display: grid; gap: var(--space-4); max-width: 30rem; margin-inline: auto; text-align: left; }
.gate__title { font-family: var(--font-display); font-size: var(--step-2); text-align: center; }
.gate__row { display: flex; gap: var(--space-3); }
.gate__row .input { flex: 1; }
.gate__note { font-size: 0.72rem; color: var(--graphite-2); text-align: center; }
.gate__success { text-align: center; display: grid; gap: var(--space-3); padding: var(--space-6); }
.gate__success svg { width: 2.5rem; height: 2.5rem; color: var(--sage-deep); margin-inline: auto; }
.gate.is-busy { opacity: 0.6; pointer-events: none; }
.form-error { color: var(--clay-deep); font-size: var(--step--1); min-height: 1.2em; }
@media (max-width: 480px) { .gate__row { flex-direction: column; } }

/* ── Spider-/Bar-Chart (Reifegrad) ────────────────────── */
.chart { display: grid; place-items: center; }
.chart svg { width: min(100%, 24rem); height: auto; overflow: visible; }
.chart__axis { stroke: var(--hairline); stroke-width: 1; fill: none; }
.chart__grid { stroke: var(--hairline-2); stroke-width: 1; fill: none; }
.chart__area { fill: color-mix(in srgb, var(--clay) 22%, transparent); stroke: var(--clay); stroke-width: 2; stroke-linejoin: round; }
.chart__dot { fill: var(--clay); }
.chart__label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--graphite); }
.chart__poly { transition: all var(--dur-slow) var(--ease); }

/* ── Tier-Badge ───────────────────────────────────────── */
.tier { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--step-0); }
.tier[data-tier="1"] { background: var(--clay-wash); color: var(--clay-deep); }
.tier[data-tier="2"] { background: color-mix(in srgb, var(--sage) 18%, transparent); color: var(--sage-deep); }
.tier[data-tier="3"] { background: var(--ink); color: var(--paper); }
:root[data-theme="evening"] .tier[data-tier="3"] { background: var(--clay); color: #fff; }

/* ── Result-Layout zweispaltig (Chart + Text) ─────────── */
.result--split { text-align: left; }
.result--split .result__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 720px) { .result--split .result__grid { grid-template-columns: 1fr; } .result--split { text-align: center; } }