/* ==========================================================================
   Theorietrainer — pruefung (Slice)
   Eigentuemer: Worker A. Kein anderer Worker schreibt in diese Datei.
   Inhalt: Startseite, Pruefungsbogen, Auswertung, bogen_ungueltig.

   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.
   ========================================================================== */

/* Das Frageelement (.fragenliste, .frage, .fkopf, .ftext, .mehr,
   .fragenbild) ist seit R-02 gemeinsamer Baustein in 10-bausteine.css --
   dort wortgleich gegengeprueft. Diese Datei fuehrt am Dateiende noch einen
   eigenen Druckblock fuer .frage (Turnierbogen-spezifisch). */

/* == Startseite =========================================================
   Prototyp-Bildschirm 01. Register statt Kachelraster, eine Hauptaktion.
   ====================================================================== */

.bogenform { margin-top: var(--a6); max-width: var(--spalte); }
.bogenform .fuss .beiwort {
  margin-left: auto;
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}

/* Die drei Arbeitsweisen als Registerzeilen mit Nummernspalte. */
.modi {
  margin-top: var(--a7);
  border-top: 1px solid var(--tinte);
  max-width: var(--spalte);
}
.modi .m {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: baseline;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: var(--tinte);
}
.modi .m > * { padding: var(--a4) var(--a3); }
.modi .m:hover { background: var(--papier-rand); }
.modi .m .num {
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  border-right: 1px solid var(--linie);
}
.modi .m b {
  font-family: var(--schrift-eng);
  font-size: var(--t-txt);
  display: block;
}
.modi .m .t {
  display: block;
  font-size: var(--t-md);
  color: var(--tinte-schwach);
}
.modi .m .pf {
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}

/* Kategorienverteilung in der Randspalte.

   table-layout: fixed ist hier keine Feinheit, sondern noetig: die Randspalte
   ist 16rem breit und fest, die Mindestbreite der Tabelle lag mit langen
   Kategorienamen, dem nicht umbrechenden Zahlenkopf und der 4rem breiten
   Messskala bei 259px. Die Tabelle ragte damit aus ihrer Spalte heraus und
   liess bei 1024px die ganze Seite waagerecht rollen. Mit fester Aufteilung
   bricht stattdessen der Kategoriename um. */
.verteilung { table-layout: fixed; }
.verteilung th:first-child,
.verteilung td:first-child { width: 45%; }
.verteilung td.bal { width: 32%; }
.verteilung th:last-child,
.verteilung td:last-child { width: 23%; }

/* == Pruefungsbogen =====================================================
   Prototyp-Bildschirm 02. Ein durchgehendes Dokument mit Bogenkopf,
   Rand-Index und mitlaufender Fussleiste.
   ====================================================================== */

.bogenkopf {
  border: 1px solid var(--tinte);
  margin-bottom: var(--a6);
}
.bogenkopf .titel {
  display: flex;
  justify-content: space-between;
  gap: var(--a5);
  flex-wrap: wrap;
  background: var(--tinte);
  color: var(--papier);
  font-family: var(--schrift-eng);
  font-weight: 700;
  font-size: var(--t-md);
  padding: var(--a2) var(--a4);
}
.bogenkopf .titel .zahl {
  font-weight: 400;
  font-size: var(--t-sm);
}
.bogenkopf .datenzeile { border-top: 0; }

/* Die Felder eines Turnierbogens gibt es nur auf Papier: Turnier, Datum,
   Name, Startnummer und Punkte werden von Hand eingetragen. Am Bildschirm
   waeren es leere Platzhalter, und die verbietet der Umsetzungsplan. */
.druckfelder { display: none; }

.parcourslinie {
  border-top: 1px solid var(--linie-stark);
  margin-top: var(--a1);
}

/* Ersatz fuer den schwebenden Knopf: eine Zeile ueber die volle Breite des
   Bogens. Sie verdeckt nichts, weil sie eine eigene Zeile belegt. */
.bogenfuss {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--a5);
  flex-wrap: wrap;
  margin-top: var(--a7);
  padding: var(--a3) var(--a4);
  background: var(--papier-rand);
  border: 1px solid var(--tinte);
  border-bottom-width: 3px;
}
.bogenfuss .stand {
  margin-left: auto;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}

/* == Auswertung =========================================================
   Prototyp-Bildschirm 04. Punktstand links, Protokoll rechts, getrennt
   durch eine Linie statt durch Leerraum.
   ====================================================================== */

.auswertung {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
}
.auswertung > * { min-width: 0; }
.auswertung > .punkte {
  border-right: 1px solid var(--linie);
  padding-right: var(--a6);
}
.auswertung > .protokoll { padding-left: var(--a6); }

/* Die einzige Stelle der Anwendung mit 48px. DESIGN.md, Typografieskala. */
.punktzahl {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
}
.punktzahl small {
  font-size: var(--t-lg);
  color: var(--tinte-schwach);
}
.punktsatz {
  font-family: var(--schrift-eng);
  font-weight: 600;
  font-size: var(--t-txt);
  margin: var(--a2) 0 0;
}
.punktquote {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-md);
  color: var(--tinte-schwach);
  margin: 0 0 var(--a3);
}
.punkte .aktionen {
  display: grid;
  gap: var(--a3);
  margin-top: var(--a5);
}

.abschnitt {
  font-size: var(--t-lg);
  margin-top: var(--a7);
}
.protokoll > .abschnitt:first-child { margin-top: 0; }
.protokoll .lochleiste { margin: var(--a2) 0 var(--a4); }

/* Testvertrag: die drei Zellen Kategorie / Richtig / Gesamt duerfen kein
   Attribut tragen (tests/test_app.py:958, fremde Datei). Ihre Ausrichtung
   kommt deshalb ueber die Spaltenstellung, nicht ueber eine Klasse. */
.protokolltabelle td:nth-child(2),
.protokolltabelle td:nth-child(3),
.protokolltabelle th:nth-child(2),
.protokolltabelle th:nth-child(3) {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.protokolltabelle td.bal { width: 40%; }

.fehlerliste .war-falsch,
.fehlerliste .war-richtig {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fehlerliste .war-falsch { color: var(--falsch); }
.fehlerliste .war-richtig { color: var(--richtig); }

/* == Umbrueche ==========================================================
   Dieselben zwei Punkte wie im Fundament: 62rem und 36rem.
   ====================================================================== */

@media (max-width: 62rem) {
  .auswertung { grid-template-columns: 1fr; }
  .auswertung > .punkte {
    border-right: 0;
    border-bottom: 1px solid var(--linie);
    padding-right: 0;
    padding-bottom: var(--a6);
    margin-bottom: var(--a6);
  }
  .auswertung > .protokoll { padding-left: 0; }
  .punkte .aktionen {
    grid-auto-flow: column;
    justify-content: start;
  }
}

@media (max-width: 36rem) {
  .modi .m { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .bogenform .fuss {
    flex-direction: column;
    align-items: stretch;
    gap: var(--a2);
  }
  .bogenform .fuss .beiwort {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
  .fkopf .herkunft {
    margin-left: 0;
    width: 100%;
  }
  .punktzahl { font-size: 36px; }
  .bogenfuss { gap: var(--a3); }
  .bogenfuss .stand {
    margin-left: 0;
    width: 100%;
  }
}


/* == Loesungsbogen ======================================================
   Erlaeuterung unter dem Kurzraster (P17c). Sie sieht aus wie eine
   .legende, ist aber bewusst KEINE: 00-basis.css blendet .legende im Druck
   aus, und dieser Satz gehoert gerade dem Papier — er sagt dem Richter, was
   der Gedankenstrich im Raster bedeutet. Am Bildschirm steht er nur in der
   Vorschau, deshalb dieselbe zurueckhaltende Form.
   ====================================================================== */

.rasterhinweis {
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  max-width: var(--spalte);
  margin: 0 0 var(--a7);
}

/* == Druck ==============================================================
   Der Pruefungsbogen ist ein Turnierbogen. Was am Bildschirm der Bedienung
   dient, wird nicht gedruckt; der Bogenkopf bekommt die Felder, die auf
   Papier von Hand ausgefuellt werden.
   ====================================================================== */

@media print {
  .werkzeug,
  .bogenfuss,
  .modi,
  .parcourslinie {
    display: none !important;
  }

  /* Ohne Randspalte traegt die Dokumentspalte keine Trennlinie mehr. */
  .zweispaltig,
  .auswertung {
    display: block;
  }
  .zweispaltig > :first-child,
  .auswertung > .punkte {
    border-right: 0;
    border-bottom: 0;
    padding-right: 0;
    padding-bottom: 0; /* der 62rem-Umbruchblock greift auch im A4-Viewport
                          (~49,6rem) und sein padding-bottom erzwang sonst ein
                          leeres Schlussblatt (Pruefbefund B1 der P17-Spur) */
    padding-left: 0;
    margin-bottom: 0;
  }
  .auswertung > .protokoll { padding-left: 0; }

  .bogenkopf {
    border: 1px solid #000;
    margin-bottom: var(--a5);
  }
  .bogenkopf .titel {
    background: #fff;
    color: #000;
    border-bottom: 1px solid #000;
  }

  /* Die Handfelder des Turnierbogens: Beschriftung ueber einer Linie zum
     Ausfuellen. Erst hier sichtbar, nie am Bildschirm. */
  .druckfelder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--a3) var(--a6);
    padding: var(--a4);
  }
  .druckfelder .feld {
    font-family: var(--schrift-eng);
    font-size: 9pt;
    color: #000;
    border-bottom: 1px solid #000;
    /* Schreibhoehe des von Hand auszufuellenden Feldes, Wert aus der Skala. */
    padding-bottom: var(--a5);
  }

  .frage {
    page-break-inside: avoid;
    break-inside: avoid;
    border-top: 1px solid #000;
    margin-top: var(--a4);
    padding-top: var(--a3);
  }
  .frage:first-child { border-top: 0; }
  .fkopf .nr {
    background: #fff;
    color: #000;
    border: 1px solid #000;
  }
  .ftext { font-size: 11pt; }

  /* Auf Papier faellt die Rollentrennung der Farben weg: ein Schwarzdruck
     macht aus Messing ein blasses Grau. Der Hinweis auf die Mehrfachauswahl
     ist aber pruefungsrelevant und muss lesbar bleiben. */
  .mehr { color: #000; }

  /* Dieselbe Begruendung gilt fuer die Fehlerliste (Befund I-02 aus QA-Pass 3):
     Gruen und Rot kosten dort einen Farbdruck fuer eine Information, die
     bereits im Text steht — die Spalten heissen "Ihre Antwort" und "Richtig".
     Auf Papier also Tinte, am Bildschirm bleibt die Farbe. */
  .fehlerliste .war-falsch,
  .fehlerliste .war-richtig { color: #000; }

  /* Reine Tinte auf Weiss: keine Flaechenfarbe zwingt einen Farbdruck. */
  .punktzahl { font-size: 24pt; }

  /* Die Messskala ist eine Bildschirmhilfe; auf Papier stehen die Zahlen. */
  .protokolltabelle td:nth-child(4),
  .protokolltabelle th:nth-child(4) { display: none; }

  /* -- Die beiden Druckausgaben der Bogen-Werkstatt (P17c, D6) -----------
     Vorlagen: templates/bogen_druck.html und templates/bogen_loesung.html.
     Die geteilten Teile — Deckblatt, Schreiblinien, Kurzraster — gehoeren
     dem Design-Lead und stehen in 10-bausteine.css. Hier steht nur, was
     diese beiden Ausgaben von einer Bildschirmansicht unterscheidet.
     -------------------------------------------------------------------- */

  /* Der Fragenteil beginnt auf einem neuen Blatt. Der Bausteinkommentar zu
     .deckblatt legt diese Entscheidung ausdruecklich in die Vorlage: ob ein
     Deckblatt eine Seite umbricht, haengt an der Ausgabe. Der Loesungsbogen
     benutzt denselben Kopf OHNE diese Klasse — dort soll das Kurzraster auf
     demselben Blatt stehen, sonst kostet eine Loesung mit drei Zeilen zwei
     Blatt. */
  .bogendeckblatt {
    page-break-after: always;
    break-after: page;
  }

  /* Hoehendeckel fuer das Fragenbild (P17-Feinplan, Druckarbeit zu P17c).

     Alle Zahlen unten sind am erzeugten PDF gemessen
     (chrome --headless=new --print-to-pdf, ausgewertet mit PyMuPDF), nicht
     gerechnet. Der Satzspiegel ist 178x261mm (A4 abzueglich der 18/16mm aus
     @page in 00-basis.css).

     WIE NAH DER BESTAND AM RAND STEHT. Die hoechste Bilddatei ist
     djm2026_q175.png mit 931x1119 Bildpunkten; sie traegt eine
     freitext-Aufgabe mit vier Schreiblinien. Ungedeckelt wird der ganze
     Fragenblock 254,5mm hoch — bei 261mm Satzspiegel bleiben 6,5mm, also
     rund anderthalb Textzeilen. Eine Frage, die eine Zeile laenger
     umbricht, oder derselbe Bildtyp als zuordnung (sechs Schreiblinien
     statt vier, +17mm) reicht, um darueber zu kommen. Gedeckelt sind es
     169,3mm, es bleiben 91,7mm — Platz fuer eine zweite Frage.

     WAS PASSIERT, WENN ES KIPPT. Gegenprobe mit einem 900x1600er Bild, also
     einem, das ungedeckelt 302,7mm hoch wird und damit hoeher als das Blatt:
     ohne Deckel braucht die EINE Frage vier Seiten, das Bild wird ueber zwei
     Blattgrenzen hinweg zweimal gezeichnet, und Seite 3 traegt keinen
     einzigen Buchstaben. Mit Deckel sind es zwei Seiten, davon eine das
     Deckblatt. Der Deckel ist also nicht Kosmetik, sondern die Bremse vor
     genau diesem Verhalten — der Bestand steht heute knapp davor, nicht
     dahinter.

     WARUM 120mm. Hoch genug, dass die groesste Datei lesbar bleibt (q175
     wird damit 99,5x119,3mm — gemessen, nicht geschaetzt), niedrig genug,
     dass die hoechste Bildfrage samt Kopf, Fragetext und Schreibflaeche mit
     Abstand auf ein Blatt geht.

     Der Deckel gilt fuer JEDE Druckausgabe mit Fragenbild, nicht nur fuer
     die beiden neuen Vorlagen: /pruefung, /lernen und /fragen drucken
     dasselbe Bild aus derselben Datei und stuenden sonst vor demselben
     Verhalten. Deshalb ohne vorangestellte Seitenklasse — das waere eine
     hoehere Spezifitaet fuer eine engere Wirkung, und beides waere falsch. */
  .fragenbild { max-height: 120mm; }

  /* Auf Papier reine Tinte: --tinte-schwach ist fuer den Bildschirm gemessen
     und wird im Schwarzdruck ein blasses Grau. Derselbe Griff wie bei
     .herkunft im Bausteindruckblock. */
  .rasterhinweis { color: #000; }
}