/* Phase E, Paket A (Mini-Spiele, Prüfkarte). Farben und Maße kommen aus basis.css (hell und dunkel). */

/* ---------------------------------------------------------------- Gemeinsam */
.sp-spiel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sp-umschalter { display: flex; }
.sp-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sp-liste > li { min-width: 0; }
.sp-meldung { font-weight: 700; overflow-wrap: anywhere; }
.sp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; text-align: left; }
.sp-wertung { display: block; font-size: 0.8rem; font-weight: 800; }
.sp-wertung.richtig { color: var(--gut-text); }
.sp-wertung.falsch { color: var(--nochmal-text); }
.sp-ergebnis { background: var(--flaeche); border: 1px solid var(--rand); border-left: 5px solid var(--unsicher); border-radius: var(--radius); padding: 12px 14px; line-height: 1.4; overflow-wrap: anywhere; }
.sp-ergebnis.richtig { border-left-color: var(--gut); }
.sp-ergebnis.falsch { border-left-color: var(--nochmal); }

/* ---------------------------------------------------------------- Reihenfolge */
.sp-karte {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 52px; padding: 10px 12px;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); border-radius: var(--radius);
  font: inherit; text-align: left; cursor: pointer;
}
.sp-platz {
  flex: none; width: 28px; height: 28px; border-radius: 14px; background: var(--akzent); color: var(--hg);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.85rem; margin-top: 1px;
}
.sp-eintrag.gewaehlt .sp-karte { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); background: var(--hervor); }
.sp-eintrag.richtig .sp-karte { border-left: 5px solid var(--gut); }
.sp-eintrag.falsch .sp-karte { border-left: 5px solid var(--nochmal); background: var(--warn-bg); }
.sp-schieber { display: flex; gap: 8px; margin-top: 6px; }
.sp-schieber .knopf { flex: 1 1 0; min-width: 0; min-height: 48px; }
.sp-einfuegen {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 12px;
  background: transparent; color: var(--akzent); border: 2px dashed var(--akzent); border-radius: var(--radius);
  font: inherit; font-weight: 700; cursor: pointer;
}
.sp-einfuegen:hover { background: var(--hervor); }
.sp-karte:focus-visible, .sp-einfuegen:focus-visible, .sp-paar:focus-visible, .sp-option:focus-visible, .pk-wertung .knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* ---------------------------------------------------------------- Zuordnen */
.sp-leiste {
  position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 0; background: var(--hg); border-bottom: 1px solid var(--rand-fein);
}
.sp-paar {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; min-height: 52px; padding: 10px 14px;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); border-radius: var(--radius);
  font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.sp-paar.gewaehlt { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); background: var(--hervor); }
.sp-paar.falsch { border-color: var(--nochmal); background: var(--warn-bg); box-shadow: 0 0 0 2px var(--nochmal); }
.sp-paar.gelegt, .sp-paar.gelegt:disabled { border-left: 5px solid var(--gut); background: var(--hervor); opacity: 1; cursor: default; }
.sp-ziel:disabled { opacity: 0.55; cursor: default; }
.sp-gelegt { font-size: 0.85rem; font-weight: 700; color: var(--gut-text); }
.sp-zaehler { font-size: 0.8rem; color: var(--text2); }

/* ---------------------------------------------------------------- Zahlen-Sprint */
.sp-kopfzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sp-uhr { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.sp-zeitbalken { display: block; }
.sp-optionen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sp-option {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: 100%; min-height: 58px; padding: 10px 14px;
  background: var(--flaeche); color: var(--text); border: 2px solid var(--rand); border-radius: var(--radius);
  font: inherit; font-size: 1.1rem; font-weight: 700; text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.sp-option.richtig, .sp-option.richtig:disabled { border-color: var(--gut); background: var(--hervor); opacity: 1; }
.sp-option.falsch, .sp-option.falsch:disabled { border-color: var(--nochmal); background: var(--warn-bg); opacity: 1; }
.sp-option:disabled { opacity: 0.5; cursor: default; }
.sp-punkte { font-size: 1.3rem; }
.sp-fehlerliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-fehler { background: var(--flaeche); border: 1px solid var(--rand); border-left: 5px solid var(--nochmal); border-radius: var(--radius); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Prüfkarte */
.pk-steuerung { display: flex; flex-direction: column; gap: 10px; }
.pk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pk-aufgabe { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.pk-aufgabe.bewertet-r { border-left: 5px solid var(--gut); }
.pk-aufgabe.bewertet-u { border-left: 5px solid var(--unsicher); }
.pk-aufgabe.bewertet-f { border-left: 5px solid var(--nochmal); }
.pk-aufgabe-titel { font-size: 1.1rem; font-weight: 800; line-height: 1.3; margin: 0; }
.pk-karte { display: flex; flex-direction: column; gap: 6px; font-weight: 400; font-size: 1rem; }
.pk-karte p { margin: 0; }
.pk-karte .pk-antwort { font-weight: 400; }
.pk-karte .knopf { align-self: flex-start; }
.pk-wertung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pk-wertung .knopf { min-height: 52px; padding: 0 6px; }
.pk-r { border-color: var(--gut); }
.pk-u { border-color: var(--unsicher); }
.pk-f { border-color: var(--nochmal); }
.pk-gespeichert { margin: 0; }

@media (min-width: 600px) {
  .sp-optionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Quer auf dem Handy (niedrig): die Kopfleiste nimmt sonst zu viel Platz. */
@media (max-height: 480px) {
  .sp-leiste { position: static; }
}
@media (prefers-reduced-motion: no-preference) {
  .sp-paar, .sp-option, .sp-karte { transition: border-color 0.12s, background-color 0.12s; }
}