/* Karriereseiten-Quick-Check — Styles nur für quiz.php.
   Baut auf den Tokens aus style.css auf (Design "Cinematic", dunkel).

   Die Ergebnisstufen kommen aus quiz/data.php (quiz_tiers()). Damit dort
   keine Farben per Inline-Style ins Markup müssen, trägt quiz.php den
   Stufenschlüssel als Klasse (tier-<key>), und die Farben stehen hier.
   --tier ist die Flächenfarbe (Donut, Punkte), --tier-text die für Schrift
   auf dunklem Grund: das Rot aus data.php erreicht auf --bg-2 nur 4,2:1,
   die hellere Fassung 6,8:1. Werden die Farben in data.php geändert,
   müssen sie hier mitgezogen werden. */
.tier-hoher-handlungsbedarf { --tier: #D64545; --tier-text: #EE7B7B; }
.tier-solide-basis { --tier: #F8763A; --tier-text: #F8763A; }
.tier-starke-arbeitgeberwirkung { --tier: #A1C2A3; --tier-text: #A1C2A3; }

.quiz-app { max-width: 640px; margin: 0 auto; }

/* --- Fortschritt --- */
.quiz-progress-track { background: var(--bg-3); border-radius: 999px; height: 6px; overflow: hidden; margin-bottom: 10px; }
.quiz-progress-fill { display: block; background: var(--accent); height: 100%; width: 0; border-radius: 999px; transition: width .35s var(--ease); }
.quiz-progress-label { font-size: 13px; color: var(--fg-soft); text-align: center; margin: 0 0 32px; }

.quiz-step[hidden] { display: none; }

.quiz-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--fg-soft);
  background: none; border: 0; padding: 0; margin-bottom: 14px; cursor: pointer; font-family: inherit;
  transition: color .35s var(--ease);
}
.quiz-back:hover { color: var(--sage); }

/* --- Frage und Antworten --- */
.quiz-question-title { font-size: clamp(21px, 3.2vw, 27px); font-weight: 300; letter-spacing: -.02em; line-height: 1.3; margin: 0 0 26px; padding: 0; color: var(--fg); }

.quiz-options { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.quiz-option input[type=radio] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.quiz-option label {
  display: block; background: var(--bg-2); color: var(--fg); font-size: 16px; font-weight: 500;
  line-height: 1.5; text-align: center; padding: 17px 24px; border-radius: 2px; cursor: pointer;
  border: 1px solid rgba(243, 246, 240, .42);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.quiz-option label:hover { border-color: var(--sage); background: rgba(161, 194, 163, .08); }
.quiz-option input[type=radio]:focus-visible + label { outline: 2px solid var(--sage); outline-offset: 3px; }
.quiz-option input[type=radio]:checked + label { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); font-weight: 600; }

/* --- Kontaktkarte und Ladehinweis --- */
.quiz-lead-card { background: var(--bg-2); border: 1px solid var(--line-soft); padding: clamp(24px, 4vw, 40px); }
.quiz-lead-card--center { text-align: center; }
.quiz-lead-card h1 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 28px); font-weight: 600; }
.quiz-lead-card .quiz-sub { color: var(--fg-soft); font-size: 15px; margin: 0 0 24px; line-height: 1.6; }
.quiz-lead-card a { color: var(--sage); border-bottom: 1px solid rgba(161, 194, 163, .4); }
.quiz-error { margin-top: 16px; }

/* --- Ergebnis: Donut --- */
.quiz-donut-wrap { position: relative; width: 100%; max-width: 480px; margin: 32px auto 8px; }
.quiz-donut-svg { display: block; width: 100%; height: auto; overflow: visible; }
.quiz-donut-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 140px;
}
.quiz-donut-percent { font-size: 36px; font-weight: 600; color: var(--fg); line-height: 1; }
.quiz-donut-caption { font-size: 12px; color: var(--fg-soft); margin-top: 4px; }
/* Dunkle Schrift auf den Ringsegmenten: auf Rot 4,5:1, auf Orange 7,2:1, auf
   Salbei 10,1:1. Die frühere weiße Schrift kam auf Salbei nur auf 1,9:1. */
.quiz-donut-seg-percent { fill: var(--bg); font-size: 12px; font-weight: 700; text-anchor: middle; font-family: 'Hind', system-ui, sans-serif; }
.quiz-donut-leader { stroke: var(--fg-soft); stroke-width: 1; opacity: .6; }
.quiz-donut-cat-label { fill: var(--fg-soft); font-size: 10px; font-weight: 600; font-family: 'Hind', system-ui, sans-serif; }

.quiz-donut-legend { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 4px 0 8px; }
.quiz-donut-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--fg-soft); }
.quiz-donut-legend-item i { display: inline-block; width: 11px; height: 11px; border-radius: 999px; flex: 0 0 auto; background: var(--tier); }

.quiz-result-head { max-width: 640px; margin: 0 auto; text-align: center; }
.quiz-result-head .eyebrow { justify-content: center; }
.quiz-result-head h1 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 300; letter-spacing: -.03em; margin-top: 16px; }
.quiz-tier-title { font-size: 21px; font-weight: 600; margin: 10px 0 16px; color: var(--tier-text); }
.quiz-tier-text { color: var(--fg-soft); font-size: 16.5px; line-height: 1.75; text-align: left; }

/* --- Ergebnis: Detailauswertung --- */
.quiz-detail { max-width: 760px; margin: 0 auto; }
.quiz-detail h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 300; letter-spacing: -.02em; }
.quiz-cat-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.quiz-cat-card { background: var(--bg-2); border: 1px solid var(--line-soft); border-left: 2px solid var(--tier); padding: 22px 24px; }
.quiz-cat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.quiz-cat-card-title { font-size: 17px; font-weight: 600; margin: 0; }
.quiz-cat-card-meta { display: flex; align-items: center; gap: 12px; }
.quiz-cat-card-percent { font-size: 17px; font-weight: 600; color: var(--tier-text); }
.quiz-cat-pill { display: inline-block; border: 1px solid var(--tier); color: var(--tier-text); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.quiz-cat-card-text { color: var(--fg-soft); font-size: 15px; line-height: 1.7; margin: 14px 0 0; }

/* --- Ergebnis: nächster Schritt --- */
.quiz-cta {
  max-width: 1000px; margin: 0 auto;
  background: var(--bg-2); border: 1px solid var(--line); padding: clamp(28px, 5vw, 52px);
  display: flex; align-items: center; gap: clamp(28px, 5vw, 52px); flex-wrap: wrap;
}
.quiz-cta-text { flex: 1 1 380px; min-width: 280px; }
.quiz-cta-heading { margin: 0 0 6px; font-size: clamp(22px, 3vw, 30px); font-weight: 300; letter-spacing: -.02em; }
.quiz-cta-subheading { margin: 0 0 18px; font-size: 17px; font-weight: 600; color: var(--sage); }
.quiz-cta-body { color: var(--fg-soft); font-size: 15.5px; line-height: 1.75; margin: 0 0 18px; }
.quiz-cta-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.quiz-cta-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--fg); }
.quiz-cta-list li svg { flex: 0 0 auto; margin-top: 4px; }
.quiz-cta-img { flex: 0 0 220px; margin: 0; }
.quiz-cta-img img { width: 100%; height: auto; display: block; filter: brightness(.95); }

/* --- Start: Vorschau-Bild und Kennzahlen --- */
.quiz-hero-img { width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.quiz-notice { max-width: 640px; margin: 0 auto; }

@media (max-width: 560px) {
  .quiz-cta-img { flex-basis: 100%; max-width: 220px; margin: 0 auto; }
}

/* --- Seitenaufbau (Ersatz für frühere Inline-Styles) --- */
/* Kein Vollbild-Hero: der Inhalt beginnt unter der festen Navigation. */
.quiz-top { padding-top: calc(var(--header-h) + clamp(40px, 8vh, 80px)); padding-bottom: clamp(48px, 8vh, 88px); }
.quiz-start { border-top: 1px solid var(--line-soft); }
.quiz-h1 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 300; letter-spacing: -.03em; margin-top: 20px; }
.quiz-h1 strong { font-weight: 600; color: var(--accent); }
.quiz-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz-tier-text--center { text-align: center; margin-bottom: 28px; }
/* Nur für Screenreader: Ansage des Fortschritts */
.quiz-live-region { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }