/* =============================================================================
   Crownbeam · TF002 V2.0 — Ergaenzungen zum Original-CSS (Lastenheft #573)
   -----------------------------------------------------------------------------
   assets/tf002-tailwind.css = der unveraenderte Tailwind-Build des React-Stands (0060c94,
   live als /ios/assets/styles-BRqMEEVR.css). Hier steht NUR, was dort fehlt:
     1. Standard-Quiz-Markup (Familie A: .quiz-step/.quiz__opt/.tick, Generator tools/quiz-gen)
        in der Optik des Original-Quiz (Quiz.tsx: Kartenbuttons, Checkbox-Quadrat bei Mehrfachauswahl)
     2. Handy-Fixes (einzeln im Abnahme-Dokument gelistet)
   Werte sind die Tailwind-Werte der Original-Klassen, nicht neu gewaehlt.
   ============================================================================= */

/* ---- 1. Quiz (Optik Quiz.tsx) ---- */
.quiz-shell { width: 100%; }                         /* Rueckgrat: Quiz-Shell braucht width:100% */
.quiz-lead { margin: 0 0 1.25rem; font-size: .875rem; line-height: 1.25rem; color: var(--color-text-mid); }  /* mb-5 text-sm */
.quiz__question { margin: 0 0 1rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--color-navy); } /* mb-4 text-2xl font-bold */
@media (min-width: 48rem) { .quiz__question { font-size: 1.875rem; line-height: 2.25rem; } }                     /* md:text-3xl */
.quiz-step-description { margin: 0 0 .75rem; font-size: .875rem; line-height: 1.25rem; color: var(--color-text-mid); } /* mb-3 text-sm */
.quiz__options { display: grid; gap: .75rem; }                                                                   /* grid gap-3 */
.quiz__opt {
  display: flex; align-items: flex-start; gap: .75rem; width: 100%;
  border: 1px solid var(--color-border); border-radius: calc(var(--radius) + 4px);                                /* rounded-xl */
  background: #fff; padding: 1rem; text-align: left; cursor: pointer;
  font-weight: 600; color: var(--color-navy);
  transition: color .15s, background-color .15s, border-color .15s;
}
.quiz__opt:hover { border-color: var(--color-cta); background: var(--color-bg-alt); }
.quiz__opt .tick { display: none; }                                                                               /* Einfachauswahl: kein Haekchen (wie Original) */
.quiz__opt[role="checkbox"]:not(:hover) { background: #fff; }
.quiz__opt[role="checkbox"] .tick {
  display: flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; margin-top: .25rem;                                                            /* mt-1 h-5 w-5 */
  border: 2px solid var(--color-border); border-radius: .25rem; background: #fff;
  color: transparent; font-size: .875rem; line-height: 1;
}
.quiz__opt[role="checkbox"][aria-checked="true"] { border-color: var(--color-cta); background: var(--color-bg-alt); }
.quiz__opt[role="checkbox"][aria-checked="true"] .tick { border-color: var(--color-cta); background: var(--color-cta); color: #fff; }
.quiz__opt[role="checkbox"] > span:last-child { display: block; }
.quiz-step .cta-row .btn--primary {                                                                               /* btn-cta mt-6 w-full */
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin-top: 1.5rem;
  background-color: var(--color-cta); color: #fff; font-weight: 600; padding: .875rem 1.5rem; border-radius: .625rem;
  box-shadow: 0 1px 2px rgba(14,165,233,.2); transition: background-color .15s ease, transform .15s ease; cursor: pointer;
}
.quiz-step .cta-row .btn--primary:hover { background-color: var(--color-cta-hover); }
.quiz-step .cta-row .btn--primary:disabled { opacity: .5; cursor: default; }
section.quiz-step { padding: 0; margin: 0; }

/* Mehrfachauswahl above the fold (V2.1, Rueckgrat „Quiz-Layout" Regel 4, gemessen 2026-09-22):
   F2 hat 7 Antworten, „Weiter" lag bei 1280x800 auf 944 px und bei 375x812 auf 956 px.
   Ab 768 px zwei Spalten (Fleet-Muster silberstern), darunter gestapelt und verdichtet, Tap-Hoehe 44 px.
   Greift ueber data-multi, also ausserhalb der QUIZ-Marker — ueberlebt Cockpit-„Veroeffentlichen". */
@media (max-width: 47.99rem) {
  .quiz-step[data-multi="true"] .quiz-step-description { margin-bottom: .5rem; }
  .quiz-step[data-multi="true"] .quiz__options { gap: .375rem; }
  .quiz-step[data-multi="true"] .quiz__opt { padding: .5625rem .75rem; min-height: 44px; font-size: .9375rem; line-height: 1.3; }
  .quiz-step[data-multi="true"] .cta-row .btn--primary { margin-top: .75rem; }
}
@media (min-width: 48rem) {
  .quiz-step[data-multi="true"] .quiz__options { grid-template-columns: 1fr 1fr; }
}

/* ---- 2. Handy-Fixes ---- */
/* H1: "Kein eigenes Labor. Kein Interessenkonflikt." brach auf 375 px mitten im Wort ("Interessenko/nflikt.").
   Karte unter 768 px mit 24 statt 40 px Innenabstand; der NBSP zwischen "Kein" und "Interessenkonflikt."
   ist im Markup ein normales Leerzeichen, damit das lange Wort eine eigene Zeile bekommen darf. */
@media (max-width: 47.99rem) { .cb-card-konflikt { padding: 1.5rem; } }