/* lektionsauswahl.css — die Lektionsliste mit ihren Häkchen.
 *
 * Steht in einer EIGENEN Datei, seit es die Auswahl an zwei Stellen gibt
 * (SPIEL-06): auf der Profilseite (rechtliches.css) und als Fenster im
 * Spiel (style.css). Das Markup baut latin/lektionsauswahlListe.js für
 * beide gleich - dann darf auch das Aussehen nicht an zwei Orten liegen.
 *
 * Die Statusmeldungen (.konto-status) sind mitgewandert: dieselbe Liste
 * meldet an beiden Stellen "Wird gespeichert …" bzw. einen Fehler.
 */

.konto-status {
  border-radius: 0.4rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
}

.konto-status.erfolg {
  background: rgba(70, 200, 120, 0.12);
  color: #7fe0a8;
  border: 1px solid rgba(70, 200, 120, 0.35);
}

.konto-status.fehler {
  background: rgba(220, 90, 90, 0.12);
  color: #ff9d9d;
  border: 1px solid rgba(220, 90, 90, 0.35);
}

#profil-lektionen-liste {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.9rem 0;
}

.lektion-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #c8c8d4;
}

.lektion-zeile:hover {
  background: #1a1a22;
}

/* Der Haken darf nicht mit der Grundlinie des Textes wandern, sonst steht
   er bei zweizeiligen Einträgen mitten im Absatz. */
.lektion-zeile input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: #ffd23f;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.lektion-anzahl {
  color: #7d7d8a;
  font-size: 0.8rem;
}

.lektion-zeile small {
  color: #8a8a98;
  font-size: 0.8rem;
}

/* Überschriften der beiden Gruppen ("Nach Lehrwerk" / "Nach Thema") und der
   Bände darunter. 44 Lektionen am Stück wären eine Wand - erst die
   Gliederung macht die Liste benutzbar. */
.lektion-gruppe {
  margin: 18px 0 6px;
  font-size: 1rem;
  color: #ffd23f;
  border-bottom: 1px solid rgba(255, 210, 63, 0.3);
  padding-bottom: 4px;
}
.lektion-band {
  margin: 12px 0 4px;
  font-size: 0.9rem;
  color: #9a9aa8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Die Leiste ganz oben in der Lektionsliste: alles anhaken / alles abwählen.
   Sie klebt beim Scrollen oben fest - die Liste ist mit 44 Lektionen lang
   genug, dass der Knopf sonst genau dann weg wäre, wenn man ihn sucht. */
.lektion-auswahl-leiste {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 0;
  background: #1a1a22;
  border-bottom: 1px solid #33333f;
}
.lektion-auswahl-leiste button {
  padding: 5px 12px;
  font-size: 0.8rem;
  border: 1px solid #4a4a58;
  border-radius: 4px;
  background: transparent;
  color: #d8d8e0;
  cursor: pointer;
  white-space: nowrap;
}
.lektion-auswahl-leiste button:hover:not(:disabled) {
  color: #ffd23f;
  border-color: #ffd23f;
}
.lektion-auswahl-leiste button:disabled {
  opacity: 0.4;
  cursor: default;
}
.lektion-auswahl-anzahl {
  margin-left: auto;
  font-size: 0.8rem;
  color: #9a9aa8;
}

/* "bis hierher" - vor einer Schulaufgabe der Normalfall: nicht nur L14,
   sondern L1 bis L14. */
.lektion-bis-hierher {
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
  padding: 4px 10px;
  font-size: 0.75rem;
  border: 1px solid #4a4a58;
  border-radius: 4px;
  background: transparent;
  color: #9a9aa8;
  cursor: pointer;
  white-space: nowrap;
}
.lektion-bis-hierher:hover {
  color: #ffd23f;
  border-color: #ffd23f;
}


/* Der Schalter „nur diese Lektionen" (SPIEL-09). Abgesetzt, weil er die
   Bedeutung jedes Häkchens darunter ändert. */
.lektion-modus {
  background: #1d1d26;
  border: 1px solid #3a3a46;
  margin-bottom: 0.6rem;
}

/* Die Grammatik-Steuerung (WORT-03), gemeinsam von Profil und Spiel
   benutzt (grammatikAuswahlListe.js). */
.grammatik-auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: 0.6rem 0;
}

.grammatik-auswahl select {
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid #4a4a58;
  background: #0d0d12;
  color: #f0f0f5;
  max-width: 100%;
}
.grammatik-auswahl select:disabled {
  opacity: 0.5;
}

details.grammatik-typen summary {
  cursor: pointer;
  color: #9a9aa8;
  font-size: 0.9rem;
  margin: 0.6rem 0;
}

.grammatik-neu {
  margin: 6px 0;
  padding: 8px 10px;
  border-left: 3px solid #6bffb0;
  background: rgba(107, 255, 176, 0.08);
  color: #c8c8d4;
  font-size: 0.86rem;
}

details.grammatik-typen {
  max-height: 320px;
  overflow-y: auto;
}