/* ==========================================================
   Kleines Einmaleins auf Zeit — Ergänzungen
   Grundgestaltung, Farben und Schrift kommen aus
   ../einstufungstest/css/stil.css. Hier steht nur, was dieser
   Test zusätzlich braucht: Zeitauswahl und Einmaleins-Tafel.
   ========================================================== */

.verstecken{display:none}
.nur-vorlesen{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.knopfzeile.mitte{justify-content:center}
/* Links, die wie ein Knopf aussehen, bekommen keine Unterstreichung */
a.knopf{text-decoration:none;display:inline-block}
kbd{
  font:inherit;font-size:.85em;padding:.1em .4em;border-radius:4px;
  background:var(--karte-2);border:1px solid var(--linie);
}

/* ---------- Zeitauswahl ---------- */
.zeitwahl{
  background:var(--karte);border:1px solid var(--linie);border-radius:14px;
  padding:1.5rem;box-shadow:var(--schatten);margin-top:2rem;
}
.zeitwahl h2{margin-bottom:1rem}
.zeitknoepfe{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.zeitknopf{
  font:inherit;cursor:pointer;text-align:center;
  background:var(--karte);color:var(--tinte);
  border:2px solid var(--linie);border-radius:12px;
  padding:.9rem .4rem;line-height:1.25;
  transition:border-color .15s ease, background .15s ease;
}
.zeitknopf:hover{border-color:var(--linie-stark)}
.zeitknopf b{display:block;font-size:1.9rem;font-variant-numeric:tabular-nums}
.zeitknopf span{display:block;font-size:.82rem;color:var(--gedaempft)}
.zeitknopf i{display:block;font-style:normal;font-size:.8rem;color:var(--gedaempft);margin-top:.3rem}
.zeitknopf[aria-checked="true"]{
  border-color:var(--akzent);background:var(--akzent-hell);
}
.zeitknopf[aria-checked="true"] b,
.zeitknopf[aria-checked="true"] i{color:var(--akzent)}

.zeit-eigen{margin-top:1.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.zeit-eigen label{font-size:.95rem;color:var(--tinte-2)}
.zeit-eigen .zeile{display:flex;align-items:center;gap:.5rem}
.zeit-fehler{width:100%;margin:0;font-size:.9rem;color:var(--sand)}
.zeit-echo{font-size:.92rem;color:var(--gedaempft);font-variant-numeric:tabular-nums}

/* ---------- Einmaleins-Tafel ---------- */
.tafel-block{margin-top:2.4rem}
.tafel-hinweis{font-size:.92rem;color:var(--tinte-2);max-width:56ch}
.tafel-rahmen{overflow-x:auto;padding-bottom:.4rem}
.einmaleins-tafel{
  border-collapse:separate;border-spacing:3px;
  font-variant-numeric:tabular-nums;margin:0;
}
.einmaleins-tafel th{
  font-weight:600;font-size:.85rem;color:var(--gedaempft);
  width:2.4rem;height:2.4rem;padding:0;text-align:center;
}
.einmaleins-tafel th.ecke{color:var(--tinte-2)}
.einmaleins-tafel td{
  width:2.4rem;height:2.4rem;padding:0;text-align:center;
  border-radius:6px;font-size:.82rem;font-weight:600;
  background:var(--karte-2);color:transparent;
}
.einmaleins-tafel td.leer{background:var(--karte-2);color:transparent}
.einmaleins-tafel td.spiegel{background:transparent}
.einmaleins-tafel td.richtig{background:#1f8a5f;color:#fff}
.einmaleins-tafel td.falsch{background:#c0392b;color:#fff}
.einmaleins-tafel td.offen{background:#2f6fb0;color:#fff}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .einmaleins-tafel td.richtig{background:#2aa66f}
  :root:not([data-theme="light"]) .einmaleins-tafel td.falsch{background:#d15244}
  :root:not([data-theme="light"]) .einmaleins-tafel td.offen{background:#4a88c7}
}

.legende{
  list-style:none;margin:1rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-size:.9rem;color:var(--tinte-2);
}
.legende li{display:flex;align-items:center;gap:.45rem}
.legende .feld{width:1rem;height:1rem;border-radius:4px;display:inline-block}
.legende .feld.richtig{background:#1f8a5f}
.legende .feld.falsch{background:#c0392b}
.legende .feld.offen{background:#2f6fb0}
.legende .feld.leer{background:var(--karte-2)}

/* ---------- Fehlerliste ---------- */
#fehlerliste{margin-top:2.6rem}
#fehlerliste h2{margin-bottom:.4rem}
.fehler-tabelle{width:100%;border-collapse:collapse;margin-top:.6rem;font-size:.95rem}
.fehler-tabelle th{
  text-align:left;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gedaempft);font-weight:600;padding:.4rem .6rem .4rem 0;
  border-bottom:1px solid var(--linie);
}
.fehler-tabelle td{padding:.45rem .6rem .45rem 0;border-bottom:1px solid var(--linie);font-variant-numeric:tabular-nums}
.fehler-tabelle td.aufgabe-zelle{font-weight:700}
.fehler-tabelle .daneben{color:var(--sand)}

/* ---------- Fußzeile ---------- */
.fuss-klein{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
  border-top:1px solid var(--linie);margin-top:3rem;padding-top:1.2rem;
  font-size:.9rem;
}
.fuss-klein a{color:var(--gedaempft);text-decoration:none}
.fuss-klein a:hover{color:var(--akzent);text-decoration:underline}
.fuss-klein .punkt{color:var(--akzent);padding:0 .1em}

@media (max-width:420px){
  .zeitknoepfe{grid-template-columns:1fr;gap:.5rem}
  .zeitknopf{display:flex;align-items:baseline;gap:.5rem;justify-content:center;padding:.7rem}
  .zeitknopf b{font-size:1.3rem}
  .zeitknopf i{margin-top:0}
  .einmaleins-tafel th,.einmaleins-tafel td{width:2rem;height:2rem;font-size:.72rem}
}

@media print{
  .nicht-drucken{display:none}
  .fuss-klein{display:none}
  .einmaleins-tafel td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}