/* Onlinequiz Graal-Müritz — Frontend. Nur Tokens aus dist/tokens.css, kein Inline-CSS im Markup.
   Kanon: Knöpfe = .btn-primary (gm.css, genau eine Hauptaktion je Gruppe) + .btn-outline-secondary (gm-content.css, Tinte wie se_events-Nebenknöpfe; .btn-outline-primary trägt das Bootstrap-Blau #32477a), Kategorie = .gm-eyebrow, Fokusring global (gm.css).
   Hier nur die quiz-eigenen Teile: Antwortknöpfe, Fortschritt, Uhr, Rückmeldung, Ergebniszahlen.
   Ein Radius (--gm-radius) und eine Schattenstufe (--gm-shadow-card) für alle Flächen des Quiz. */

.oq { display: grid; gap: var(--gm-space-md); margin: 0 0 var(--gm-space-block); padding: 0; }   /* volle Inhaltsbreite (André 14.11.2026); padding: gm setzt section sonst 90 px unten (Weißraum-Routine) */
.oq-ansicht { display: grid; gap: var(--gm-space-md); }
.oq-ansicht[hidden], .oq [hidden] { display: none; }
.oq-titel { margin: 0; }
.oq-fakten { margin: 0; padding-left: 1.2em; }
.oq-fakten li + li { margin-top: var(--gm-space-2xs); }
/* Knopfgruppe: gleiche Bauform, gleiche Breite (Vorgabe André 14.11.2026) – mobil untereinander, ab 36 rem nebeneinander je 1fr */
.oq-knoepfe { display: grid; gap: var(--gm-space-sm); }
@media (min-width: 36rem) { .oq-knoepfe { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 36rem; } }
.oq-knoepfe .btn { width: 100%; }
.oq-hinweis, .oq-meldung { margin: 0; padding: var(--gm-space-sm) var(--gm-space-md); border-radius: var(--gm-radius);
  background: var(--gm-flaeche-signal); color: var(--gm-ink); }

/* Kopf: »Frage 7 von 20 · 450 Punkte« und Fortschritt */
.oq-kopf { display: grid; gap: var(--gm-space-2xs); }
.oq-stand { margin: 0; font-size: var(--gm-fs-kompakt); font-weight: var(--gm-fw-label); color: var(--gm-text); font-variant-numeric: tabular-nums; }
.oq-fortschritt, .oq-uhr-balken { display: block; width: 100%; height: .5rem; border: 0; border-radius: var(--gm-radius);
  background: var(--gm-flaeche-ruhig); color: var(--gm-primary); appearance: none; overflow: hidden; }
.oq-fortschritt::-webkit-progress-bar, .oq-uhr-balken::-webkit-progress-bar { background: var(--gm-flaeche-ruhig); }
.oq-fortschritt::-webkit-progress-value { background: var(--gm-primary); }
.oq-fortschritt::-moz-progress-bar { background: var(--gm-primary); }
.oq-uhr-balken::-webkit-progress-value { background: var(--gm-sea); }
.oq-uhr-balken::-moz-progress-bar { background: var(--gm-sea); }

.oq-kategorie { margin: 0; }
.oq-frage { margin: 0; font-size: var(--gm-fs-h3); line-height: var(--gm-lh-titel); }

/* Uhr: Zahl + Balken; die letzten 5 Sekunden zusätzlich als Text betont (nicht nur Farbe) */
.oq-uhr { display: grid; gap: var(--gm-space-3xs); }
.oq-uhr-text { margin: 0; font-size: var(--gm-fs-kompakt); font-variant-numeric: tabular-nums; }
.oq-uhr--knapp .oq-uhr-text { font-weight: var(--gm-fw-betont); color: var(--gm-danger); }
.oq-uhr--knapp .oq-uhr-balken::-webkit-progress-value { background: var(--gm-danger); }
.oq-uhr--knapp .oq-uhr-balken::-moz-progress-bar { background: var(--gm-danger); }

/* Antworten: eine Spalte, ab 48 rem zwei; jede Zeile ein großer Knopf (Touch-Ziel ≥ 48 px) */
.oq-antworten { display: grid; gap: var(--gm-space-xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .oq-antworten { grid-template-columns: 1fr 1fr; } }
.oq-antworten li { margin: 0; }
.oq-antwort { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--gm-space-sm); width: 100%; height: 100%;
  min-height: 3rem; padding: var(--gm-space-sm); border: 1px solid var(--gm-border); border-radius: var(--gm-radius);
  background: var(--gm-white); color: var(--gm-text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--gm-shadow-card);
  transition: border-color var(--gm-dur-fast) var(--gm-ease-out), background-color var(--gm-dur-fast) var(--gm-ease-out), transform var(--gm-dur-press) var(--gm-ease-out); }
.oq-antwort:hover:not(:disabled) { border-color: var(--gm-primary); }
.oq-antwort:active:not(:disabled) { transform: scale(.98); }
.oq-antwort:disabled { cursor: default; }
.oq-buchstabe { display: inline-grid; place-items: center; min-width: 2rem; min-height: 2rem; border-radius: var(--gm-radius);
  background: var(--gm-flaeche-ruhig); color: var(--gm-primary); font-weight: var(--gm-fw-label); }
.oq-marke { font-size: var(--gm-fs-kompakt); font-weight: var(--gm-fw-label); white-space: nowrap; }
.oq-antwort--richtig { border-color: var(--gm-erfolg); background: var(--gm-flaeche-erfolg); }
.oq-antwort--richtig .oq-buchstabe { background: var(--gm-erfolg); color: var(--gm-white); }
.oq-antwort--richtig .oq-marke { color: var(--gm-erfolg); }
.oq-antwort--falsch { border-color: var(--gm-danger); background: var(--gm-flaeche-fehler); }
.oq-antwort--falsch .oq-buchstabe { background: var(--gm-danger); color: var(--gm-white); }
.oq-antwort--falsch .oq-marke { color: var(--gm-danger); }

/* Rückmeldung nach der Antwort */
.oq-rueckmeldung { display: grid; gap: var(--gm-space-sm); padding: var(--gm-space-md); border-radius: var(--gm-radius);
  background: var(--gm-flaeche-ruhig); box-shadow: var(--gm-shadow-card); justify-items: start; }
.oq-urteil { margin: 0; font-family: var(--gm-font-head); font-size: var(--gm-fs-h4); font-weight: var(--gm-fw-titel); color: var(--gm-heading); }
.oq-erklaerung { margin: 0; }
.oq-quellen { font-size: var(--gm-fs-kompakt); }
.oq-quellen summary { cursor: pointer; min-height: var(--gm-target-min); }
.oq-quellen ul { margin: var(--gm-space-2xs) 0 0; padding-left: 1.2em; }

/* Ergebnis */
.oq-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gm-space-sm); margin: 0; }
.oq-zahlen > div { padding: var(--gm-space-sm); border-radius: var(--gm-radius); background: var(--gm-flaeche-ruhig); text-align: center; }
.oq-zahlen dt { font-size: var(--gm-fs-kompakt); font-weight: var(--gm-fw-label); color: var(--gm-text); }
.oq-zahlen dd { margin: 0; font-family: var(--gm-font-head); font-size: clamp(1.15rem, 1rem + 1.5vw, var(--gm-fs-h3)); font-weight: var(--gm-fw-titel);
  color: var(--gm-heading); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }   /* »4 von 20« in einer Zeile, Kacheln gleich hoch */
.oq-ergebnis-text { margin: 0; }

/* Dezente Einblendung beim Ansichtswechsel – entfällt bei reduzierter Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .oq-ansicht:not([hidden]), .oq-rueckmeldung:not([hidden]) { animation: oq-ein var(--gm-dur-mid) var(--gm-ease-out); }
  @keyframes oq-ein { from { opacity: 0; transform: translateY(.25rem); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .oq-antwort { transition: none; } .oq-antwort:active:not(:disabled) { transform: none; } }

/* Phase 4: Herausforderung, Vorname, Rang, Bestenliste */
.oq-herausforderung { margin: 0; padding: var(--gm-space-sm) var(--gm-space-md); border-radius: var(--gm-radius); background: var(--gm-flaeche-signal); color: var(--gm-ink); font-weight: var(--gm-fw-label); }
@media (min-width: 36rem) { .oq-knoepfe--drei { max-width: 54rem; } }
.oq-name { display: grid; gap: var(--gm-space-2xs); padding: var(--gm-space-md); border-radius: var(--gm-radius); background: var(--gm-flaeche-ruhig); }
.oq-name label { font-weight: var(--gm-fw-label); }
.oq-name-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gm-space-xs); max-width: 32rem; }
.oq-name input { min-height: 3rem; padding: 0 var(--gm-space-sm); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); background: var(--gm-white); color: var(--gm-text); font: inherit; }
.oq-name-zeile .btn { min-height: 3rem; }
.oq-feldfehler { margin: 0; color: var(--gm-danger); font-weight: var(--gm-fw-label); }
.oq-datenschutz { margin: 0; font-size: var(--gm-fs-kompakt); }
.oq-rang, .oq-geteilt { margin: 0; font-weight: var(--gm-fw-label); }
.oq-liste { display: grid; gap: var(--gm-space-sm); margin: 0; padding: 0; }   /* volle Breite wie der Startblock (UX Loop 10) */   /* padding: gm setzt jeder section 90 px (wie .oq) */   /* Name und Punkte in Blickweite (Loop 07 UX) */
.oq-liste-titel { margin: 0; font-size: var(--gm-fs-h4); }
.oq-umschalter { display: flex; gap: var(--gm-space-xs); }
.oq-umschalter .btn { min-height: 2.75rem; }   /* Touch-Ziel 44 px (UX Loop 09 Kann 3) */
.oq-umschalter .btn[aria-pressed="true"] { background: var(--gm-primary); color: var(--gm-text-invers); }
.oq-rangliste { display: grid; gap: var(--gm-space-3xs); margin: 0; padding: 0; list-style: none; counter-reset: rang 3; font-variant-numeric: tabular-nums; }   /* Platz 1–3 stehen auf dem Podest; <ol start=4> trägt die Zählung für Screenreader */
.oq-rangliste[data-oq-ab="0"] { counter-reset: rang 0; }   /* ohne Podest (se_quiz fehlt) zählt die Liste ab 1 */
.oq-rangliste li::before { counter-increment: rang; content: counter(rang); flex: 0 0 2rem; font-weight: var(--gm-fw-betont); color: var(--gm-text); }
.oq-rangliste li { padding: var(--gm-space-2xs) 0; border-bottom: 1px solid var(--gm-border-subtle); }
.oq-rangliste .oq-ich { font-weight: var(--gm-fw-betont); }
.oq-podest { margin: 0; }   /* Podest der Siegertafel (se_quiz quiz.css); Abstand regelt das Raster von .oq-liste */
.oq-podest .oq-ich .quiz-podest-team { text-decoration: underline; text-decoration-color: var(--gm-sun); text-decoration-thickness: 2px; text-underline-offset: .14em; }
.oq-rangliste li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--gm-space-xs); }
.oq-rang-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.oq-rang-punkte { font-weight: var(--gm-fw-betont); }
.oq-rang-detail { flex-basis: 100%; padding-left: calc(2rem + var(--gm-space-xs)); font-size: var(--gm-fs-kompakt); color: var(--gm-text); }

/* Bestenliste ist eine Komponente für Start und Ergebnis (André 15.11.2026: »muss präsent sein«).
   Während der Fragen ausgeblendet (volle Aufmerksamkeit), immer unter dem Start (André 15.11.2026: »untereinander«). */
.oq:has(> .oq-spiel:not([hidden])) > .oq-liste { display: none; }

.oq-liste-leer, .oq-entfernen { margin: 0; }
.oq-entfernen { font-size: var(--gm-fs-kompakt); }
.oq-loeschen, .oq-loeschlink { display: grid; gap: var(--gm-space-xs); padding: var(--gm-space-md); border-radius: var(--gm-radius); background: var(--gm-flaeche-ruhig); }
.oq-loeschen-frage, .oq-loeschen-status, .oq-loeschlink-text { margin: 0; }
.oq-loeschlink input, [data-oq-link] input { min-height: 3rem; padding: 0 var(--gm-space-sm); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); background: var(--gm-white); color: var(--gm-text); font: inherit; font-size: var(--gm-fs-kompakt); }