/* =====================================================================
Druckbild des Kursbuchs — das Ueber-Nacht-Buch auf Papier
(Auftrag 15.08.2026, Vorbild: die beiden Buecher "GGET2 ueber Nacht"
und "Hoema 2 ueber Nacht bestehen")
Laeuft auf dem gemeinsamen Container (.pp-druck, css/druck.css) und
ueberschreibt dessen .ppd-*-Grundformen; das Wasserzeichen kommt von
dort und wird hier nicht angefasst.
Feste Farben, kein Theme: Papier ist weiss.
===================================================================== */
/* ---------------------------------------------------------------------
Warum hier KEINE eigene @page-Regel steht
Die naheliegende Idee waere eine zweite @page-Regel in dieser Datei. Sie
WUERDE NICHT WIRKEN: js/druck.js haengt seinen @page-Stil zur Druckzeit per
`document.head.appendChild(style)` an — also NACH allen -Elementen
des Kopfes. @page-Regeln haben keine Spezifitaet, es entscheidet die
Dokumentreihenfolge, und die spaetere gewinnt. Nachgesehen statt
angenommen (index.html Zeile 18-23 gegen `container()` in js/druck.js).
Gebraucht wird sie auch nicht: Der Kolumnentitel fliesst mit (s. u.) und
nimmt sich seinen Platz selbst, genau wie das Wasserzeichen im Fuss.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
Farbsprache der Boxen — eine Tabelle, zwei Werte je Art
--ppb-f die Farbe: Titelleiste, Rahmen, Beschriftung
--ppb-t der Ton dahinter: Boxgrund
Papierwerte, keine Bildschirmwerte. Die --pp-Tokens aus prepp.css waeren
hier falsch, weil sie dem Theme folgen — und ein dunkles Theme hat auf
weissem Papier nichts zu suchen (Muster .pp-druck in css/druck.css).
Die Zuordnung folgt den beiden Vorbild-Buechern; gegen Weiss gerechnet
liegt jede Schriftfarbe ueber 4,5:1, gegen ihren eigenen hellen Ton
ebenfalls.
Die Farbe traegt ZWEI Selektoren, und das ist Absicht: `.ppb-box` ist die
Box selbst, `.ppb-farbe` nur der Traeger der zwei Variablen — Legende und
Balkensegmente der Titelseite brauchen die Farbe, aber nicht Rahmen,
Rundung und Abstand einer Box. Eine gemeinsame Tabelle statt zweier
Farblisten, die auseinanderlaufen.
--------------------------------------------------------------------- */
.ppb-box.kopf, .ppb-farbe.kopf { --ppb-f: #b3261e; --ppb-t: #fdecea; } /* rot — muss in den Kopf */
.ppb-box.blatt, .ppb-farbe.blatt { --ppb-f: #14509b; --ppb-t: #e9f0fa; } /* blau — steht auf dem Blatt */
.ppb-box.aufgabe, .ppb-farbe.aufgabe { --ppb-f: #1a6b3c; --ppb-t: #e9f4ed; } /* gruen — Uebungsaufgabe */
.ppb-box.boss, .ppb-farbe.boss { --ppb-f: #14663a; --ppb-t: #e3f1e8; } /* gruen — Boss-Aufgabe */
.ppb-box.check, .ppb-farbe.check { --ppb-f: #a35200; --ppb-t: #fdf1e3; } /* orange — Checkpoint */
.ppb-box.falle, .ppb-farbe.falle { --ppb-f: #7a5c00; --ppb-t: #fbf4d9; } /* gelb — KLAUSURFALLE */
.ppb-box.jetztdu, .ppb-farbe.jetztdu { --ppb-f: #5b3a9b; --ppb-t: #f1ecfa; } /* lila — Jetzt du */
.ppb-box.wozu, .ppb-farbe.wozu { --ppb-f: #4a4a4a; --ppb-t: #efefef; } /* grau — Wozu das Ganze */
.ppb-farbe.text { --ppb-f: #c9c9c9; --ppb-t: #f2f2f2; }
/* ACHTUNG, EIGENER NAMENSRAUM: Legendenzeilen und Balkensegmente tragen den
BOXARTNAMEN als Klasse (`kopf`, `blatt`, `check`, `text` …). Eine generische
Kindklasse darf deshalb nie so heissen wie eine Boxart — sonst faerbt die
eine Regel die andere ein. Genau das ist beim Bauen zweimal passiert und im
Browser aufgefallen, nicht im Test (Fallstrick 34): `.ppb-legende .kopf`
traf die Legendenzeile der Art „kopf" und setzte ihren ganzen Satz in
Versalien, und `.ppb-titel .strich` (der Titelstrich) traf den Farbstrich
derselben Legende und blies jede Zeile auf 64 px auf. Die Ueberschriften
heissen seitdem `.ueber`, der Titelstrich `.ppb-regel`.
Bewacht von verify-kursbuch-pdf.js Abschnitt 2. */
/* `.ppb-box.text` bleibt bewusst ohne Farbe: Fliesstext ist Fliesstext. Nur
im Balken der Titelseite bekommt er einen neutralen Grauton — sonst waere
dort eine unsichtbare Luecke statt eines Segments. */
/* ---------------------------------------------------------------------
Grundsatz und Schrift
Serif fuer den Fliesstext, weil das Vorbild in LaTeX gesetzt ist und ein
gedrucktes Buch sich so liest. Lora liegt seit dem Redesign ungenutzt in
vendor/fonts (Rechtstexte/Altbestand) und wird von index.html ohnehin
geladen — keine neue Datei, kein Netz.
--------------------------------------------------------------------- */
.ppb-buch {
font-family: Lora, "Iowan Old Style", Georgia, "Times New Roman", serif;
font-size: 10.5pt; line-height: 1.5; color: #111;
}
/* Der Container darf seinen eigenen h1 nicht mehr setzen: Beim Kursbuch
traegt die Titelseite den Titel, und `container()` bekommt deshalb gar
keinen `titel` uebergeben. Die Regel steht trotzdem da, damit ein
spaeterer Aufrufer nicht versehentlich zwei Titel bekommt. */
.ppb-buch > .ppd-titel { display: none; }
@media print {
/* Ohne das werfen Chrome und WebKit beim Drucken alle Flaechenfarben weg
— und damit genau die Farbsprache, um die es hier geht. */
.ppb-buch, .ppb-buch * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ---------------- Kolumnentitel ----------------
Dieselbe Technik wie das Wasserzeichen im Fuss, nur nach oben gespiegelt:
eine TABELLEN-KOPFZEILENGRUPPE. Browser setzen in Seitenmedien
ueber jede Seite, auf der die Tabelle fortgesetzt wird.
Der erste Entwurf nahm `position: fixed` — dieselbe Falle, in die das
Wasserzeichen vorher gelaufen war, und mit demselben Ergebnis. Im echten
Chrome-Druck (A4, 5 Seiten, --print-to-pdf) stand die Zeile am FUSS der
Seiten 1-4, direkt ueber dem Wasserzeichen, und auf Seite 5 gar nicht.
Ein fixierter Knoten richtet sich in Seitenmedien nicht so aus, wie der
Kommentar es behauptete. Gemessen, nicht vermutet.
Die Tabelle liegt INNEN, im
des Blattes aus js/druck.js — dessen
traegt das Wasserzeichen, und daran wird nichts angefasst. Zwei
verschachtelte Geruesttabellen also, jede mit genau einer Aufgabe.
Rechts steht das MODUL, nicht das laufende Kapitel. Ein wirklich
mitlaufender Kapitelname braucht `string-set` und `content: string()`
aus CSS Paged Media Level 3 — dasselbe, was js/druck.js schon fuer die
Seitenzahlen als "kann heute kein Zielbrowser" notiert. Ein Kapitelname,
der ab Seite 2 falsch ist, waere schlechter als ein richtiges Modul.
Dafuer beginnt jedes Kapitel auf einer eigenen Seite (s. u.), man findet
also immer nach oben zurueck.
Was bleibt: Der Kolumnentitel steht auch auf der Titelseite. In einem
gesetzten Buch traegt die keinen — wegnehmen laesst er sich hier nicht
(eine Kopfzeilengruppe kennt keine Ausnahme fuer die erste Seite).
Deshalb ist er duenn und leise gehalten, damit er dort als feiner
Kopfstrich durchgeht statt als Fehler. */
.ppb-blatt { width: 100%; border-collapse: collapse; }
.ppb-blatt > thead { display: table-header-group; }
.ppb-blatt > thead > tr > td,
.ppb-blatt > tbody > tr > td { border: 0; padding: 0; vertical-align: top; }
.ppb-kopf {
display: flex; justify-content: space-between; align-items: baseline; gap: 8mm;
font-size: 8pt; font-style: italic; letter-spacing: .02em;
color: #666; border-bottom: .4pt solid #cfcfcf;
padding-bottom: 1.2mm; margin-bottom: 6mm;
}
.ppb-kopf .r { font-style: normal; letter-spacing: .08em; text-transform: uppercase; font-size: 7pt; }
/* ---------------- Titelseite ---------------- */
.ppb-titel { break-after: page; page-break-after: always; padding-top: 10mm; }
.ppb-titel .eyebrow {
font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 8.5pt; letter-spacing: .18em; text-transform: uppercase; color: #666;
}
.ppb-titel h1 {
font-size: 30pt; line-height: 1.12; margin: 4mm 0 0; font-weight: 600; letter-spacing: -.01em;
}
.ppb-titel .unter { font-size: 13pt; color: #444; margin-top: 3mm; font-style: italic; }
.ppb-titel .ppb-regel { border: 0; border-top: 1.6pt solid #111; margin: 8mm 0 6mm; }
/* Metadaten: Bezeichnung links in Kapitaelchen, Wert rechts. Zwei Spalten,
damit der Block ruhig steht statt als lange Liste den Satzspiegel zu
fuellen. */
.ppb-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5mm 10mm; }
.ppb-meta div { display: flex; justify-content: space-between; gap: 4mm;
border-bottom: .4pt dotted #c8c8c8; padding-bottom: 1.4mm; }
.ppb-meta dt, .ppb-meta .k {
font-size: 8pt; letter-spacing: .1em; text-transform: uppercase; color: #666; white-space: nowrap;
}
.ppb-meta .v { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 9.5pt; color: #111; text-align: right; }
/* Der Balken je Kapitel: Breite = Anteil an allen Boxen, Segmente in den
Farben der Boxarten dieses Kapitels. Gemessen, nicht gemalt — deshalb
steht er hier und nicht als Dekoration im Markup. */
.ppb-balken { margin-top: 7mm; }
.ppb-balken .zeile { display: grid; grid-template-columns: 42mm 1fr auto; align-items: center;
gap: 4mm; margin-bottom: 2mm; font-size: 8.5pt; }
.ppb-balken .nam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; }
.ppb-balken .bar { display: block; height: 3.6mm; border-radius: 1mm; overflow: hidden; background: #efefef; }
.ppb-balken .fill { display: flex; height: 100%; }
.ppb-balken .seg { height: 100%; min-width: .6mm; }
.ppb-balken .n { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 8pt; color: #666; }
/* Farblegende — im Vorbild steht sie auf der Titelseite: farbiger Strich,
Beschriftung, ein Satz dazu. Aufgefuehrt wird nur, was in DIESEM Buch
wirklich vorkommt; eine Farbe zu erklaeren, die nirgends auftaucht,
waere Rauschen. */
.ppb-legende { margin-top: 8mm; }
.ppb-legende .ueber { font-size: 8pt; letter-spacing: .1em; text-transform: uppercase;
color: #666; margin-bottom: 3mm; }
.ppb-legende .zeile { display: grid; grid-template-columns: 10mm 42mm 1fr; align-items: baseline;
gap: 3mm; margin-bottom: 2.2mm; font-size: 9pt; }
.ppb-legende .strich { display: block; height: 2.4mm; border-radius: .6mm; background: var(--ppb-f, #555); }
.ppb-legende .nam { font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
font-size: 8pt; color: var(--ppb-f, #555); }
.ppb-legende .txt { color: #444; }
.ppb-titel .fuss { margin-top: 10mm; font-size: 8.5pt; color: #777; border-top: .4pt solid #ddd;
padding-top: 2.5mm; }
/* ---------------- Inhaltsverzeichnis ----------------
OHNE Seitenzahlen, und das ist keine Sparmassnahme: Ein Browser-Druck
sagt dem Dokument nie, auf welcher Seite ein Element gelandet ist —
`target-counter(attr(href), page)` aus CSS Paged Media Level 3 kann
keiner der Zielbrowser (dieselbe Grenze wie beim Wasserzeichen, siehe
js/druck.js). Erfundene Zahlen waeren schlimmer als keine. Rechts steht
deshalb die Zahl, die PrepP wirklich kennt: die Boxen des Kapitels.
Die Punktfuehrung bleibt — sie ist es, die das Verzeichnis lesbar macht. */
.ppb-toc { break-after: page; page-break-after: always; }
.ppb-toc h2 { font-size: 16pt; margin: 0 0 6mm; font-weight: 600; }
.ppb-toc .zeile { display: grid; grid-template-columns: 9mm 1fr auto; align-items: baseline;
gap: 2mm; margin-bottom: 3mm; font-size: 11pt; }
.ppb-toc .nr { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 9.5pt; color: #888; }
/* Punktfuehrung als FLEX-Fueller, nicht als Zeichenteppich im Markup: Punkte
im Text stuenden auch in der Zwischenablage und im Screenreader. Der erste
Entwurf legte die Linie absolut mit `z-index: -1` hinter den Titel — im
Browser war sie damit unsichtbar, weil ein negativer z-index den Knoten
hinter den weissen Grund des Druckcontainers schiebt. Ein Fueller
zwischen Titel und Zahl braucht weder Stapel noch Ueberdeckung. */
.ppb-toc .nam { display: flex; align-items: baseline; }
.ppb-toc .nam span { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppb-toc .nam::after { content: ""; flex: 1 0 6mm; border-bottom: .4pt dotted #bbb;
margin: 0 2mm .28em; }
.ppb-toc .n { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 8.5pt; color: #888; }
.ppb-toc .hinweis { margin-top: 8mm; font-size: 8.5pt; color: #888; font-style: italic; }
/* ---------------- Kapitel ----------------
Jedes Kapitel faengt auf einer neuen Seite an. Das ersetzt den mitlaufenden
Kapitelnamen im Kolumnentitel, den der Browserdruck nicht hergibt: Wer
wissen will, wo er ist, blaettert bis zur naechsten Kapitelseite zurueck. */
.ppb-kap { break-before: page; page-break-before: always; }
.ppb-kap-h { display: flex; align-items: baseline; gap: 4mm; margin: 0 0 5mm;
border-bottom: 1.2pt solid #111; padding-bottom: 2.5mm; }
.ppb-kap-h .nr {
font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 20pt; color: #bbb; line-height: 1;
}
.ppb-kap-h .tit { font-size: 17pt; font-weight: 600; line-height: 1.2; }
/* ---------------- Die farbigen Boxen ----------------
Titelleiste in Versalien mit Sperrung (das Vorbild setzt "KLAUSURFALLE"
so), darunter der Inhalt auf dem hellen Ton der Farbe. `break-inside`
haelt eine Box zusammen — eine halbierte Merkbox ist keine Merkbox. */
.ppb-box {
border: .8pt solid var(--ppb-f, #999); border-radius: 1.4mm;
margin: 0 0 4.5mm; break-inside: avoid; page-break-inside: avoid; overflow: hidden;
}
.ppb-box-h {
background: var(--ppb-f, #555); color: #fff;
font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
font-size: 7.5pt; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
padding: 1.4mm 3mm;
}
.ppb-box-b { background: var(--ppb-t, #f5f5f5); padding: 3mm 3.5mm; }
.ppb-box-b > *:first-child { margin-top: 0; }
.ppb-box-b > *:last-child { margin-bottom: 0; }
.ppb-box-b p { margin: 0 0 2.5mm; }
.ppb-box-b code { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: .92em; background: rgba(0, 0, 0, .05); padding: .2mm .8mm; border-radius: .6mm; }
.ppb-box-b ul, .ppb-box-b ol { margin: 0 0 2.5mm; padding-left: 6mm; }
.ppb-box-b li { margin-bottom: 1mm; }
.ppb-box-b .ki-h1, .ppb-box-b .ki-h2, .ppb-box-b .ki-h3 { font-weight: 600; margin: 2.5mm 0 1.5mm; }
/* Das Kaestchen des Checkpoints — auf Papier IMMER leer (Begruendung in
js/material.js, buchKapitelHtml). Es sitzt rechts in der Titelleiste, wo
sonst nichts steht, und ist weiss auf der Boxfarbe: ein Kaestchen, in das
man mit dem Stift ein Kreuz setzt. `.ppb-hak` heisst bewusst NICHT wie
eine Boxart (siehe der Namensraum-Absatz weiter unten). */
/* Seit dem 08.09.2026 (Kursbuch-Todo) traegt auch die Aufgaben-Box (`boss`)
ihr leeres Kaestchen — am Bildschirm hat sie den Haken ihrer Plan-Einheit. */
.ppb-box.check .ppb-box-h, .ppb-box.boss .ppb-box-h { display: flex; align-items: center; justify-content: space-between; gap: 3mm; }
.ppb-hak { width: 3.6mm; height: 3.6mm; flex: none; border: .8pt solid #fff; border-radius: .6mm; background: transparent; }
/* Der Fliesstext-Kasten (art "text") ist keine Box: kein Rahmen, keine
Titelleiste, kein Ton — ein Absatz im Buch. */
.ppb-box.text { border: 0; border-radius: 0; margin-bottom: 4mm; }
.ppb-box.text .ppb-box-h { display: none; }
/* Q2 Punkt 4 (05.09.2026): Traegt der Fliesstext-Kasten eine EIGENE
Ueberschrift, steht sie auf Papier da — als Zwischenueberschrift des
Kapitels, nicht als farbige Titelleiste (die Box hat keine Farbe, weiss
auf weiss waere unsichtbar). Ohne Ueberschrift entsteht der Knoten gar
nicht erst; die Regel darueber bleibt als Netz fuer Altbestand. */
.ppb-box.text .ppb-box-h.eigen {
display: block; background: transparent; color: #111;
font-size: 10.5pt; font-weight: 600; letter-spacing: 0; text-transform: none;
padding: 0 0 1.5mm;
}
.ppb-box.text .ppb-box-b { background: transparent; padding: 0; }
/* Verweise: im PDF kann niemand klicken, also stehen sie als LESBARER Text
da — Zeichen, Bezeichnung, Fundstelle. Kein , kein Knopf; ein toter
Link auf Papier ist nur ein blauer Fleck. */
.ppb-verweis {
display: flex; gap: 2.5mm; align-items: baseline;
font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
font-size: 8.5pt; color: #333;
border-top: .4pt dotted var(--ppb-f, #bbb); margin-top: 2.5mm; padding-top: 2mm;
}
.ppb-verweis .k { letter-spacing: .08em; text-transform: uppercase; font-size: 7.5pt;
color: var(--ppb-f, #666); white-space: nowrap; }
.ppb-verweis .w { color: #222; }
.ppb-fehlt { font-style: italic; color: #8a6d00; }
/* „Jetzt du": eine Zeile zum Hineinschreiben. Die Loesung steht bewusst
NICHT daneben, sondern am Kapitelende — sonst haette man sie gelesen,
bevor man gerechnet hat, und die Box pruefte nichts mehr. */
.ppb-jd-zeile { display: flex; align-items: baseline; gap: 2.5mm; margin-top: 3mm; }
.ppb-jd-zeile .feld { flex: 1; border-bottom: .8pt solid var(--ppb-f, #888); height: 7mm; }
.ppb-jd-zeile .unit { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 9pt; color: #444; }
.ppb-jd-zeile .nr { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 8pt; color: var(--ppb-f, #888); }
/* Der CHECKPOINT mit Musterloesung druckt dieselbe Zeile, braucht aber
mehr Papier: „Jetzt du" fragt nach einer Zahl, ein Checkpoint nach
Saetzen (09.09.2026). Drei Schreiblinien statt einer — dieselbe
Nummerierung, dieselbe Loesung am Kapitelende. */
.ppb-jd-zeile.prosa { align-items: stretch; }
.ppb-jd-zeile.prosa .feld {
height: 24mm;
border-bottom: .8pt solid var(--ppb-f, #888);
background: repeating-linear-gradient(to bottom,
transparent 0, transparent 7.2mm, var(--ppb-f, #888) 7.2mm, var(--ppb-f, #888) 7.4mm);
}
/* Loesungsteil am Kapitelende — kleiner gesetzt, damit er sich vom Lehrtext
abhebt, und mit derselben Nummer wie die Aufgabe oben. */
.ppb-loesungen { border-top: .8pt solid #ccc; margin-top: 7mm; padding-top: 3mm;
break-inside: avoid; page-break-inside: avoid; }
.ppb-loesungen .ueber { font-size: 7.5pt; letter-spacing: .18em; text-transform: uppercase;
color: #777; margin-bottom: 2.5mm; }
.ppb-loesungen .zeile { display: grid; grid-template-columns: 8mm 1fr; gap: 2mm;
font-size: 9pt; margin-bottom: 2mm; }
.ppb-loesungen .nr { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
color: #777; }
/* KaTeX im Buch: die Formeln sind vor dem Drucken gesetzt (siehe
`gesetztesHtml` in js/material.js). Displayformeln bekommen Luft, mehr
braucht es hier nicht. */
.ppb-buch .katex-display { margin: 2.5mm 0; }
.ppb-buch .katex { font-size: 1em; }