/* ══════════════════════════════════════════════════════════════════
   Lernkarten — ein TVZA-Bereich.

   Drei Ebenen, drei Bilder: die Liste der Sätze, ein Satz mit seinen
   Karten, und die Karte, die gerade dran ist. Nur die dritte darf
   gross sein — beim Üben soll auf dem Bildschirm eine Sache stehen.

   Farben kommen aus --tint / --deep (kit.css, data-bereich), Abstände
   aus der Skala --s1…--s7. Kein eigener Farbraum, keine freien Pixel.
   ══════════════════════════════════════════════════════════════════ */

/* ── Die Liste der Sätze ───────────────────────────────────────────*/
.lk-satz { width: 100%; text-align: start; }
.lk-neuer { margin-top: var(--s3); }
.lk-tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.lk-tag {
  padding: 2px var(--s2); border-radius: var(--r-pill);
  background: var(--tint); color: var(--deep);
  font-size: 11px; font-weight: 700;
}

/* ── Ein Satz ──────────────────────────────────────────────────────*/
.lk-felder { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 40rem) { .lk-felder { grid-template-columns: 1fr 1fr; } }

.lk-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
/* 5rem, nicht 8: bei 375 Pixeln rutschte "Auswahl" sonst allein in
   eine dritte Zeile, und die drei Arten zu ueben sahen aus wie zwei
   und ein Nachgedanke. */
.lk-knoepfe .b { flex: 1 1 5rem; }
.lk-stand { margin: var(--s2) 0 0; font-size: 13px; color: var(--ink-soft); }

.lk-karte-zeile {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-row);
  background: var(--surface);
  margin-bottom: var(--s2);
}
.lk-karte-zeile__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lk-karte-zeile__vorn { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.lk-karte-zeile__hinten { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.lk-karte-zeile__stufe {
  align-self: flex-start; margin-top: var(--s1);
  padding: 2px var(--s2); border-radius: var(--r-pill);
  background: var(--tint); color: var(--deep);
  font-size: 11px; font-weight: 700;
}
/* Am Handy unter den Text, am Laptop daneben — vier Knöpfe in einer
   Zeile neben einem langen Satz wären beides unlesbar. */
.lk-karte-zeile__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s1); }
.lk-karte-zeile__knoepfe .b { padding: var(--s1) var(--s2); font-size: 12px; min-height: 32px; }
@media (max-width: 30rem) {
  .lk-karte-zeile { flex-direction: column; }
  .lk-karte-zeile__knoepfe { width: 100%; }
}

.lk-neu { display: grid; grid-template-columns: 1fr; gap: var(--s2); margin: var(--s3) 0; }
@media (min-width: 40rem) { .lk-neu { grid-template-columns: 1fr 1fr auto; align-items: center; } }

.lk-weitere {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin: var(--s5) 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--ink-soft);
}
.lk-link {
  border: 0; background: none; padding: 0;
  color: var(--ink-soft); font: inherit; text-decoration: underline; cursor: pointer;
}
.lk-link:hover { color: var(--ink); }
.lk-link--weg { color: var(--danger); }

/* ── Üben ──────────────────────────────────────────────────────────*/
.lk-fortschritt {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0 0 var(--s4); font-size: 13px; color: var(--ink-soft);
}
.lk-balken {
  flex: 1 1 auto; height: 5px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border); overflow: hidden;
}
.lk-balken__fuellung { display: block; height: 100%; width: 0; background: var(--deep); transition: width .2s ease; }

/* Die Karte selbst: gross, mittig, und sie lässt sich antippen — das
   ist die Geste, die man von einer Karte erwartet. */
.lk-karte {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4);
  min-height: 11rem; padding: var(--s5) var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-panel);
  background: var(--tint);
  cursor: pointer; user-select: none;
}
.lk-karte__seite {
  margin: 0; text-align: center;
  font-size: clamp(20px, 5vw, 28px); font-weight: 800; line-height: 1.3;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.lk-karte__loesung {
  margin: 0; text-align: center;
  padding-top: var(--s4); width: 100%;
  border-top: 1px solid var(--border);
  font-size: clamp(16px, 4vw, 22px); font-weight: 600; color: var(--deep);
  overflow-wrap: anywhere; white-space: pre-wrap;
}

.lk-bewerten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.lk-uebung > * + * { margin-top: var(--s4); }

.lk-wahl { width: 100%; text-align: start; }
.lk-wahl__nr {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-inline-end: var(--s2);
  border-radius: var(--r-pill); background: var(--surface-2);
  font-size: 12px; font-weight: 700;
}
.lk-wahl.ist-richtig { border-color: var(--ok); }
.lk-wahl.ist-falsch { border-color: var(--danger); }
.lk-wahl:disabled { opacity: 1; cursor: default; }

.lk-urteil { margin: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.lk-urteil.ist-richtig { color: var(--ok); }
.lk-urteil.ist-falsch { color: var(--danger); }

/* Der Tastaturhinweis gilt nur, wo es eine Tastatur gibt. */
.lk-tasten { margin-top: var(--s4); }
@media (pointer: coarse) { .lk-tasten { display: none; } }

/* ── Runde zu Ende ─────────────────────────────────────────────────*/
.lk-fertig { text-align: center; }
.lk-fertig > * + * { margin-top: var(--s3); }
.lk-fertig__titel { margin: 0; font-size: 20px; font-weight: 800; }
.lk-fertig__zahl { margin: 0; font-size: clamp(24px, 7vw, 36px); font-weight: 800; color: var(--deep); }
.lk-fertig__text { margin: 0; font-size: 14px; color: var(--ink-soft); }