/* ==========================================================================
   Theorietrainer — lernen-konten (Slice)
   Eigentuemer: Worker C. Kein anderer Worker schreibt in diese Datei.
   Inhalt: Lernmodus, Nachschlagen, Anmeldung, Registrierung, Passwort, 429-Seite.

   Regeln (Umsetzungsplan 5.2):
     1  Fehlt ein Baustein, wird er beim Design-Lead angefordert. Er wandert
        nach 10-bausteine.css, nicht hierher.
     2  Diese Datei darf am Ende einen eigenen @media print-Block fuehren.
        Die seitenweiten Druckregeln stehen in 00-basis.css.
     3  Keine Erhoehung der Spezifitaet, um eine Basisregel zu uebersteuern.
        Wird das noetig, ist die Basisregel falsch — beim Design-Lead melden.
     4  Keine style-Attribute in den Vorlagen.

   Verbindliche Quelle fuer alle Werte: DESIGN.md.
   ========================================================================== */

/* == Frage =================================================================
   Lernmodus und Nachschlagen zeigen dieselbe Frage in derselben Form wie der
   Pruefungsbogen: der gehobene Baustein .frage/.fkopf/.ftext/.fragenbild aus
   10-bausteine.css (design-spec-v2.md §5.2). Kein eigener Feldblock, keine
   eigene Kopfzeile mehr — hier steht nur noch, was die beiden Ansichten vom
   Prueflauf unterscheidet: das Zuklappen im Katalog.
   ====================================================================== */

/* Katalogeintrag: <summary> traegt Nummer, Fragetext, Herkunftszeile und den
   Pruefstandsvorbehalt zugeklappt sichtbar (design-spec-v2.md §6.4). Erst nach
   dem Aufklappen erscheinen Antwortzeilen und Einordnung. data-frage sitzt am
   <details> — Testvertrag, siehe Kopf von templates/_makros.html. */
.frage > summary {
  display: block;
  cursor: pointer;
  list-style: none;
  min-height: 56px;
  padding: var(--a3) var(--a7) var(--a3) 0;
  position: relative;
}
.frage > summary::-webkit-details-marker { display: none; }

/* Aufklappzeichen aus dem vorhandenen Zeichensatz statt eines Chevrons: ein
   Plus-/Minuszeichen, wie das System Zustaende schon anderswo ueber Text statt
   ueber ein rotierendes Symbol zeigt. */
.frage > summary::after {
  content: "+";
  position: absolute;
  top: var(--a3);
  right: 0;
  font-family: var(--schrift-zahl);
  font-weight: 700;
  color: var(--tinte-schwach);
}
.frage[open] > summary::after { content: "\2212"; }

/* Die Liste im Nachschlagen: Dokumentzeilen untereinander, getrennt durch
   Abstand statt durch eine weitere Linie — jede Zeile bringt ihre eigene
   Rang-B-Linie (.frage) schon mit. */
.katalogliste {
  display: grid;
  gap: var(--a7);
}

/* == Lernmodus =========================================================== */

/* Der Ergebnisblock des JavaScript-Pfades. Er enthaelt dieselben Bausteine wie
   der serverseitige Zweig; hier steht nur, dass er als Block fliesst. */
#lern-feedback[hidden] { display: none; }

/* == Konten: Anmeldung, Registrierung, Passwortwechsel =================== */

/* .schmalform kommt aus 10-bausteine.css. Hier nur der Weg daneben. */
.nebenweg {
  max-width: 26rem;
  margin-top: var(--a5);
  font-size: var(--t-md);
  color: var(--tinte-schwach);
}

/* == Vorschlagsformular ================================================= */

/* ANFORDERUNG: gehoert nach 10-bausteine.css — ein Feld je Zeile innerhalb
   eines Feldblocks braucht auch der Admin-Editor (Slice B). Bis dahin hier,
   ohne Spezifitaetserhoehung.

   Absichtlich NUR Anordnung, keine Schriftrolle: die Feldbeschriftung von
   .schmalform (10-bausteine.css) steht heute in Fira Sans 15px statt in der
   Beschriftungsrolle aus DESIGN.md. Wuerde ich das hier korrigieren, saehe das
   Vorschlagsformular anders aus als die Kontoformulare — und ein Eingriff in
   .schmalform aus dieser Datei heraus wuerde zugleich die Nutzeranlage von
   Slice B umgestalten. Deshalb: gleiche (falsche) Rolle wie ueberall,
   Anforderung C-13 an den Design-Lead. */
.eingabeform {
  display: grid;
  gap: var(--a6);
}
.eingabeform label {
  display: grid;
  gap: var(--a1);
}

/* Ankreuzfeld mit Beschriftung daneben statt darunter */
.eingabeform label.kaestchen {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--a3);
}

/* Antwortzeilen der Eingabe: dieselbe Dreiteilung wie die Antwortzeile der
   Auswertung, nur mit Eingabefeld statt Text. Buchstabenzelle links, damit die
   Zeile sofort als dieselbe Sache erkennbar ist. */
.antwortfelder {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie-stark);
}
.antwortfeld {
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--linie);
}
.antwortfeld .b {
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  text-align: center;
  align-self: stretch;
  padding-top: var(--a4);
  border-right: 1px solid var(--linie);
}
.antwortfeld .t {
  border: 0;
  border-bottom: 1px solid transparent;
  min-height: 2.75rem;
}
.antwortfeld .t:focus-visible { border-bottom-color: var(--tinte); }
.antwortfeld .k {
  display: flex;
  align-items: center;
  gap: var(--a2);
  padding: 0 var(--a4);
  min-height: 2.75rem;
  border-left: 1px solid var(--linie);
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  cursor: pointer;
}

/* == Umbrueche ==========================================================
   Die beiden Umbruchpunkte des Systems: 62rem und 36rem.
   ====================================================================== */

@media (max-width: 36rem) {
  .antwortfeld {
    grid-template-columns: 1.5rem 1fr auto;
  }
  .nebenweg { max-width: none; }
}

/* == Druck ==============================================================
   Lernmodus und Nachschlagen sind keine Bögen, muessen aber lesbar auf Papier
   kommen. Die seitenweiten Regeln stehen in 00-basis.css.
   ====================================================================== */

@media print {
  .katalogliste { gap: var(--a5); }

  /* <details> ist eine Bildschirmhilfe, um den Katalog kurz zu halten
     (design-spec-v2.md §6.4) — gedruckt waere ein zugeklappter Eintrag
     wertlos. Alle Kinder erscheinen aufgeklappt, unabhaengig vom
     [open]-Attribut; das Aufklappzeichen entfaellt, es hat auf Papier keine
     Funktion. Die .frage-Rahmenregeln selbst stehen bereits im Druckblock von
     20-pruefung.css (R-04) und gelten seitenweit fuer jede Verwendung des
     Bausteins. */
  details.frage > * { display: block !important; }
  .frage > summary::after { display: none; }

  .anmerkung { border-left-color: #000; }

  /* Kontoformulare haben auf Papier nichts zu suchen */
  .schmalform,
  .nebenweg,
  .eingabeform { display: none; }
}