Buchansicht: eigene Monospace-Schrift mit Kastenzeichen für Textdiagramme (DejaVu Sans Mono, Teilmenge)

Handy-Schriften haben keine Kastenzeichen; der Ersatz aus einer anderen Schrift ist breiter und verschiebt die Linien.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/style.css

@@ -178,7 +178,10 @@ a.knopf { display: inline-block; text-decoration: none; line-height: normal; }
 .buch p, .buch li { overflow-wrap: anywhere; }
 .buch pre { background: var(--code-bg); color: var(--code-fg); padding: 12px 14px; border-radius: 8px; font-size: 0.86em; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; hyphens: manual; }
 .buch pre code { background: none; padding: 0; }
-.buch pre.diagramm, .lm-screen pre.diagramm { white-space: pre; overflow-x: auto; font-size: 0.8em; line-height: 1.2; container-type: inline-size; }
+/* Eigene Monospace-Schrift mit Kastenzeichen und Pfeilen (DejaVu Sans Mono, Teilmenge): Handy-Schriften haben sie nicht,
+   und ein Ersatz aus einer anderen Schrift ist breiter – die Linien laufen dann über. */
+@font-face { font-family: "Diagramm"; src: url(/fonts/diagramm.woff2) format("woff2"); font-display: swap; }
+.buch pre.diagramm, .lm-screen pre.diagramm { white-space: pre; overflow-x: auto; font-size: 0.8em; line-height: 1.17; container-type: inline-size; font-family: "Diagramm", "DejaVu Sans Mono", monospace; }
 /* Schmale Bildschirme: die breiteste Zeile (--n Zeichen) soll in den Block passen; unter 8 px wird gescrollt. */
 .buch pre.diagramm code, .lm-screen pre.diagramm code { font-size: clamp(8px, calc(100cqw / var(--n) / 0.61), 0.86em); }
 .buch table { border-collapse: collapse; margin: 0 0 1em; font-size: 0.92em; display: block; max-width: 100%; overflow-x: auto; hyphens: manual; }