/* ===================================================================== Druckbild des Klausur-Exports — eigene und geteilte Inhalte als PDF (Auftrag 15.08.2026) 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 DIESE DATEI SO KURZ IST Den Aufgabenkoerper zeichnet PreppRender.renderItem, also derselbe Renderer wie in Pruefung, Training und Einsicht (js/editor.js erklaert im Kopf, warum und was daran gemessen wurde). css/exam.css ist NICHT auf eine Wurzelklasse eingegrenzt — seine Regeln gelten hier also mit, und die Pruefungsoberflaeche ist ohnehin der Nachbau eines gedruckten Bogens: .ex-input traegt schon eine Antwortlinie, .mexpr-face auch, Tabellen und Aufgabenleisten stehen richtig. Uebrig bleibt genau das, was Bildschirm und Papier unterscheidet: 1. Bedienelemente, die auf Papier nichts tun, verschwinden. 2. Ankreuzfelder werden GEZEICHNET statt vom System geliehen. 3. Die 28-px-Innenabstaende fallen weg — auf A4 sind sie Textbreite. 4. Umbruchregeln. Alles hier ist auf `.ppk` eingegrenzt (die Klasse, die js/editor.js an PreppDruck.container uebergibt). Ohne diese Eingrenzung faerbte der Klausurdruck das Kursbuch und die Sandbox mit ein — die drucken ueber denselben Container. ===================================================================== */ /* ---------------- Der Bogen ---------------- */ .ppk { font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 10.5pt; line-height: 1.45; color: #111; } .ppk-kopf { border-bottom: 1.2pt solid #222; padding-bottom: 6pt; margin-bottom: 12pt; /* Gemessen und repariert: Ohne das break-inside zerriss der Kopf, und die Zeile „Lernblatt — mit Musterloesungen" stand allein oben auf Seite 2 — also ausgerechnet die Angabe, die sagt, welche Fassung man in der Hand haelt. */ break-inside: avoid; break-after: avoid; } .ppk-titel { font-size: 16pt; font-weight: 700; margin: 0 0 2pt; line-height: 1.2; } .ppk-sub { font-size: 11pt; color: #333; margin-bottom: 3pt; } .ppk-meta { font-size: 9.5pt; color: #333; } .ppk-von { font-size: 9.5pt; color: #333; margin-top: 1pt; } /* Welche der beiden Fassungen man in der Hand haelt. Ohne diese Zeile sind zwei Ausdrucke derselben Klausur nicht auseinanderzuhalten — und genau dieser Unterschied ist der wichtige. */ .ppk-art { font-size: 9pt; color: #444; margin-top: 5pt; font-style: italic; } /* ---------------- Eine Aufgabe ---------------- HIER STEHT BEWUSST KEIN `break-inside: avoid`, und das ist gemessen worden statt geraten. Die naheliegende Regel waere, eine ganze Aufgabe zusammenzuhalten. In einem echten Chrome-Ausdruck (A4, drei Klausuren) kostet sie aber rund ein Fuenftel Papier, weil eine Klausuraufgabe etwa seitenhoch ist und deshalb fast jede eine eigene Seite bekommt: gget2-k1 26 statt 21 Seiten hm2-k1 15 statt 12 Seiten inf2-exam2 26 statt 20 Seiten Schlimmer als der Verbrauch war der Nebeneffekt: Ist die ERSTE Aufgabe laenger als eine Seite (hm2-k1), schiebt der Browser sie komplett nach hinten — und Seite 1 traegt dann nur den Kopf und sonst nichts. Was die Anforderung wirklich meint — „nicht mitten durchgeschnitten" — leisten die feineren Verbote unten: Eine Antwortzeile, eine Abbildung, eine Tabelle, eine Optionsliste und ein Loesungskasten werden NIE zerteilt, und ein Aufgabenkopf steht nie allein am Seitenende (break-after am .ppk-item-kopf). Nachgesehen im PDF: Die Umbrueche fallen zwischen die Antwortzeilen, nicht hinein. Wer das ganze Blatt lieber aufgabenweise haette, schreibt hier `break-inside: avoid` hinein — eine Zeile, und die Zahlen oben sagen, was sie kostet. */ .ppk-item { margin-bottom: 12pt; padding-bottom: 4pt; } /* Ein Aufgabenkopf, der allein am Seitenende steht, ist die haesslichste Form des Umbruchs: Die Nummer steht unten, die Aufgabe auf der naechsten Seite. break-after verbietet genau das. */ .ppk-item-kopf { display: flex; align-items: baseline; gap: 8pt; border-bottom: .6pt solid #999; padding-bottom: 3pt; margin-bottom: 6pt; break-after: avoid; break-inside: avoid; } .ppk-item-kopf .nr { font-weight: 700; font-size: 12pt; min-width: 16pt; } .ppk-item-kopf .t { flex: 1; font-weight: 600; font-size: 11pt; } .ppk-item-kopf .p { font-size: 9.5pt; color: #444; white-space: nowrap; } /* Die Einheiten, die man nicht auseinanderreissen will. Sie stehen NEBEN dem Verbot an der Aufgabe, nicht statt seiner: Bei einer langen Aufgabe ist das hier die Regel, die noch greift. */ .ppk .task-bar, .ppk .answer-row, .ppk .iblock-img, .ppk .iblock-figrow, .ppk .solution-path, .ppk .radio-opt, /* :not(.ppd-blatt) ist kein Feinschliff, sondern noetig: js/druck.js haengt den Inhalt seit dem Wasserzeichen-Umbau in eine LAYOUT-Tabelle ( mit als wiederholender Fusszeile). Ein blankes `.ppk table` traefe die mit — und hiesse damit „halte das GANZE Blatt auf einer Seite zusammen". Gemeint sind die Tabellen IN der Aufgabe (Wahrheitstabelle, Ausfuelltabelle, Matrix). */ .ppk table:not(.ppd-blatt) { break-inside: avoid; } /* ---------------- Breite zurueckgewinnen ---------------- Die Bildschirmfassung rueckt ihre Bloecke um 28 px (~7,4 mm) ein, die Antwortzeile links sogar um 60 px — dort sitzt der Schluesselknopf des Trainings, den es auf Papier nicht gibt. Auf A4 bleiben nach den Raendern 174 mm; 15 mm davon an Einzug zu verlieren, kostet genau die Breite, die lange Formeln brauchen. */ .ppk .iblock-text, .ppk .iblock-img, .ppk .iblock-hint, .ppk .iblock-figrow, .ppk .radio-list, .ppk .item-topic, .ppk .task-bar, .ppk .answer-row { padding-left: 0; padding-right: 0; } .ppk .item-topic { margin-left: 0; margin-right: 0; } .ppk .answer-row .pts { right: 0; } /* Die Aufgabenleiste traegt am Bildschirm einen grauen Grund. Auf Papier ist der unzuverlaessig: Ohne „Hintergrundgrafiken drucken" faellt er weg, und dann ist die Leiste nicht mehr von Fliesstext zu unterscheiden. Also markiert sie sich strukturell — mit einer Linie, die immer druckt. */ .ppk .task-bar { background: transparent; border-left: 2pt solid #333; padding-left: 6pt; margin-top: 8pt; } .ppk .answer-row { background: transparent; border-top: .4pt dotted #bbb; } .ppk .item-topic { border-top: none; font-size: 9.5pt; color: #444; padding-top: 0; } /* ---------------- Was auf Papier nichts tut ---------------- Reine Bedienung. Ein Knopf, den man nicht druecken kann, ist auf einem Aufgabenblatt kein Angebot, sondern eine Irrefuehrung. Die Liste ist am Bestand GEMESSEN, nicht zusammengetragen (348 Aufgaben, beide Fassungen): .deselect-btn 128-mal, .mexpr-panel 40-mal — das ist der Deutungskasten der Physik-Formeleingabe („Ihre letzte Antwort wurde folgendermassen interpretiert"), der ohne Eingabe nichts zu deuten hat. .mexpr-live stand hier faelschlich MIT drin (I10-Nebenbefund b, 22.08.2026): Das ist kein Bedienelement, sondern das ANTWORTFELD der Physik-Fassung selbst — mit ihm verschwand bei 40 Feldern die Schreiblinie, ein Physik-Formelfeld hatte auf Papier gar keinen Platz fuer die Antwort. Es traegt die Klasse ex-input und bekommt damit unten dieselbe Schreiblinie wie jedes Zahlenfeld; nur der Deutungskasten bleibt weg. .solkey und [data-code-steps] kommen heute 0-mal vor: Der Schluesselknopf haengt an GRADE.keys (nur im Training), der Schritt-fuer-Schritt-Knopf an einer Bedingung des Code-Feldes. Sie stehen trotzdem hier — beides sind Knoepfe, und wenn einer den Weg aufs Blatt findet, soll er nicht gedruckt werden. Wer die Zeile streicht, sollte vorher nachzaehlen. NICHT hier steht .multi-hint („Jede Luecke zaehlt einzeln — Teilpunkte moeglich", 49-mal). Beim ersten Anlauf stand sie in dieser Liste, und das war falsch: Das ist eine Aussage ueber die BEWERTUNG, kein Bedienelement. Ein Blatt, das die Punktregel verschweigt, sagt etwas anderes als dieselbe Aufgabe in der App. */ .ppk .deselect-btn, .ppk .solkey, .ppk .mexpr-panel, .ppk [data-code-steps] { display: none !important; } /* Sie gehoert dazu, darf aber leiser sein als der Aufgabentext. */ .ppk .multi-hint { font-size: 9pt; color: #444; margin-top: 3pt; } /* ---------------- Antwortfelder werden Schreiblinien ---------------- `appearance: none` ist hier kein Feinschliff: Ein natives Bedienelement malt der Drucker je nach Browser und je nach Einstellung „Hintergrundgrafiken" verschieden oder gar nicht. Gezeichnet wird deshalb selbst. */ .ppk input, .ppk textarea, .ppk .mexpr-face { -webkit-appearance: none; appearance: none; background: transparent !important; color: #111 !important; box-shadow: none !important; } .ppk .ex-input, .ppk .cloze-in, .ppk .mexpr-face { border: none; border-bottom: .6pt solid #666; border-radius: 0; min-height: 14pt; } /* Der Platzhalter eines einzeiligen Feldes ist „Number" oder „Text" — eine Eingabehilfe, kein Aufgabentext. Auf Papier stuende er in JEDER Luecke als Wort, das niemand geschrieben hat (2415 Felder im eingebauten Bestand). Er verschwindet also. Der Platzhalter eines FREITEXTFELDES bleibt bewusst stehen: Den schreibt der Autor (f.placeholder, z. B. „; Ihr Assemblerprogramm …"), er steht einmal statt hundertfach, und er sagt, was in den Kasten gehoert. */ .ppk input::placeholder { color: transparent !important; } .ppk .mexpr-face .mexpr-ph { color: transparent !important; } /* Freitext: ein Kasten, in den man wirklich schreiben kann. Die Zeilenzahl des Feldes (rows) bestimmt die Hoehe; der Mindestwert faengt Felder ohne Angabe ab. */ .ppk .ex-textarea, .ppk textarea { border: .6pt solid #888; min-height: 22mm; resize: none; } /* Matrixfelder: Das Raster zeichnen die Tabellenzellen. Die Zelle darf deshalb KEINE eigene Grundlinie bekommen — sonst stuende in jedem Kaestchen ein zweiter Strich (die .ex-input-Regel oben trifft sie mit). */ .ppk table.mx-table { border-color: #333; } .ppk table.mx-table td { border-color: #555; } .ppk table.mx-table .mx-cell { border: none !important; min-height: 16pt; } /* Ankreuzfelder. Gezeichnet, nicht geliehen — und gross genug, um sie mit einem Stift zu treffen. */ .ppk .radio-opt input[type="radio"], .ppk .radio-opt input[type="checkbox"] { width: 3.6mm; height: 3.6mm; border: .8pt solid #222; background: #fff !important; flex: 0 0 auto; } .ppk .radio-opt input[type="radio"] { border-radius: 50%; } /* Eine lange Antwortoption bleibt neben ihrem Kaestchen. Der Befund (hm2-uk2 Aufgabe 6 und 7, im Chrome-Ausdruck gemessen): Bei der laengsten Option stand das Kaestchen allein in einer Zeile und der Text linksbuendig darunter am Blattrand — welche Antwort zu welchem Kaestchen gehoert, war nicht mehr zu erkennen. Bei einer Auswahlfrage ist genau das die Aufgabe. Die Ursache ist eine, auf die man leicht hereinfaellt: **In Seitenmedien werten Breiten-Medienregeln gegen den SEITENBEREICH aus, nicht gegen das Fenster.** Die Textspalte eines A4-Blattes ist 174 mm (~658 px) breit, also greifen die Schmalfenster-Regeln von exam.css beim Drucken mit — darunter `.radio-opt { flex-wrap: wrap }`. Das ist am Handy richtig (es haelt ✓/✗ im Bild), auf Papier bricht es aber die laengste Option auf eine eigene Flex-Zeile. `nowrap` plus `min-width: 0` sagt stattdessen: Der Text SCHRUMPFT in seine Spalte und bricht dort intern um. `align-items: flex-start` setzt das Kaestchen an die erste Textzeile statt in die Mitte eines dreizeiligen Absatzes. Die drei opt-math-Zeilen darunter sind die Gegenprobe fuers WEITE Blatt: exam.css nimmt das Kaestchen bei Mathe-Optionslisten aus dem Fluss (`position: absolute`) und dreht das nur unterhalb von 760 px zurueck. Auf A4 uebernimmt also exam.css selbst — auf A3 (PreppDruck kann das) nicht mehr. Hier steht es formatunabhaengig. */ .ppk .radio-opt { flex-wrap: nowrap; align-items: flex-start; } .ppk .radio-opt > span, .ppk .radio-opt > .opt-inhalt { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; } .ppk .radio-opt input[type="radio"], .ppk .radio-opt input[type="checkbox"] { margin-top: 2pt; } .ppk .radio-opt.opt-math { justify-content: flex-start; } .ppk .radio-opt.opt-math input { position: static; left: auto; } .ppk .radio-opt.opt-math > span { margin: 0; text-align: left; overflow: visible; } .ppk .radio-opt { border-top: none; padding: 3pt 0; gap: 8pt; page-break-inside: avoid; } /* Die Schreiblinie, die js/editor.js an die Stelle eines