Baustein 10a: PWA, Offlinebetrieb, Druckansichten

Installierbar: Manifest, Symbole aus dem eigenen Zeichen erzeugt
(scripts/symbole.ts, kein Bilddienst), Verknuepfungen zu Lernmodus,
Berichtsheft und Handouts.

Offline gilt eine Regel, und die steht im Dienstarbeiter: Nur das
Lernmaterial liegt im Browserspeicher - Handouts, Merkkarten, Glossar,
die eigene Woche. Lernzielkontrollen, Berichtsheft, Bewertungen,
Feedbackgespraeche, Anhaenge und jedes PDF niemals. Das ist keine
Sparsamkeit: Was im Browsercache liegt, ist an der serverseitigen
Rechtepruefung vorbei.

Bewertungen ohne Netz gehen in eine Warteschlange und werden
nachgereicht. Die Schlange haengt an der Benutzerkennung, nicht am
Geraet - auf einem geteilten Werkstattgeraet bekaeme sonst der Zweite
die offenen Bewertungen des Ersten aufs Konto. Der Tag der Bewertung
kommt vom Geraet und wird auf heute gedeckelt (tagDerBewertung, 4
Tests): Eine vorgestellte Uhr darf das Wiederholen nicht wegstellen.

Druck: Wer die dunkle Fassung eingestellt hatte, druckte bisher schwarze
Flaechen. Im Druck wird jetzt die komplette helle Palette gesetzt, dazu
A4-Raender, keine Umbrueche mitten in Karten und Zeilen, aufgeklappte
details. Druckknoepfe bei Handout, Glossar und Auswertung.

Durchstich in scripts/pruefungen/baustein-10.mjs mit echtem Abschalten
des Netzes: 33 Pruefungen, darunter der Nachweis, dass nichts
Bewertungsrelevantes im Speicher landet.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/app/globals.css

@@ -463,15 +463,87 @@ table.tabelle th {
 
 /* --- Druck --- */
 
+@page {
+  size: A4;
+  margin: 16mm 14mm;
+}
+
 @media print {
+  /* Wer die dunkle Fassung eingestellt hat, druckt sonst schwarze Flächen aus.
+     Deshalb hier die komplette helle Palette noch einmal – und zwar stärker
+     als `[data-thema="dunkel"]`, sonst gewinnt die Einstellung. */
+  :root,
+  :root[data-thema="dunkel"],
+  :root[data-thema="hell"] {
+    color-scheme: light;
+
+    --petrol: #1f4e5f;
+    --petrol-hell: #2c6b81;
+    --petrol-dunkel: #163a47;
+    --bernstein: #a9660f;
+    --bernstein-dunkel: #a9660f;
+
+    --grund: #ffffff;
+    --flaeche: #f2f2f2;
+    --flaeche-kraeftig: #e6e6e6;
+    --rand: #999999;
+    --rand-zart: #cccccc;
+
+    --text: #000000;
+    --text-leise: #444444;
+    --text-auf-petrol: #ffffff;
+
+    --gut: #1d6f4a;
+    --gut-flaeche: #ffffff;
+    --warnung: #8a5a00;
+    --warnung-flaeche: #ffffff;
+    --fehler: #9b2226;
+    --fehler-flaeche: #ffffff;
+
+    --schatten: none;
+  }
+
   .kopf,
+  .netzleiste,
+  .sprung,
   .nicht-drucken {
     display: none !important;
   }
-  body { background: #fff; color: #000; font-size: 11pt; }
+
+  body { background: #fff; color: #000; font-size: 10.5pt; }
   .huelle { max-width: none; padding: 0; }
   .karte, .karte-grund { border: 1px solid #999; box-shadow: none; background: #fff; }
+
+  /* Verweise auf dem Papier: Der Text zählt, die Adresse nützt niemandem.
+     Ausgenommen bleibt, was ohnehin nur als Text gedruckt wird. */
   a { color: #000; text-decoration: none; }
+
+  /* Nichts mitten in einer Karte oder Zeile umbrechen – ein halber
+     Checklistenschritt auf der nächsten Seite ist beim Abheften ärgerlich. */
+  .karte,
+  .karte-grund,
+  li,
+  tr,
+  figure,
+  blockquote,
+  pre {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  h1, h2, h3 {
+    break-after: avoid;
+    page-break-after: avoid;
+  }
+
+  /* Kein Waisenkind und kein Hurenkind. */
+  p, li { orphans: 3; widows: 3; }
+
+  /* Aufgeklappt drucken: Was zugeklappt ist, fehlt sonst auf dem Papier,
+     ohne dass man es merkt. */
+  details { display: block !important; }
+  details > summary { display: block; font-weight: 650; }
+  details > *:not(summary) { display: revert !important; }
 }
 
 /* Nur für Bildschirmleser sichtbar */
@@ -746,6 +818,26 @@ a.glossarbegriff:hover {
   color: var(--gut);
 }
 
+/* --- Netzzustand ------------------------------------------------------- */
+
+/* Schmale Leiste unter der Kopfzeile. Sie schiebt den Inhalt herunter, statt
+   ihn zu überdecken – eine schwebende Meldung verdeckt auf dem Handy genau
+   die Zeile, die man gerade lesen will. */
+.netzleiste {
+  background: var(--warnung-flaeche);
+  border-bottom: 1px solid var(--bernstein);
+  color: var(--text);
+  font-size: 0.85rem;
+  line-height: 1.4;
+  padding: 0.5rem 1rem;
+  text-align: center;
+}
+
+.netzleiste-gut {
+  color: var(--gut);
+  font-weight: 600;
+}
+
 .wochentage {
   list-style: none;
   margin: 0;