/* ============================================================ Print-Engine — shared CSS für alle Druckansichten ============================================================ Verträge: - Druckausgabe ist immer DIN A4 (Hochformat). Layout-Komponenten, die quer brauchen (Blanko-Korrekturvorlage), setzen .print-page--landscape auf ihren Container; die `@page`-Regel greift dann automatisch. - Im Browser wird die A4-Seite mit Schatten visualisiert (Bildschirm- Vorschau). Beim echten Druck verschwindet der Schatten, das Padding wird durch die `@page margin` ersetzt. - Hilfsklassen für Page-Breaks: `.print-keep-together`, `.print-page-break-before`, `.print-page-break-after`. Damit Aufgaben/Tabellen nicht in der Mitte zerrissen werden und der Footer (Unterschrift + Notenschlüssel) nicht alleine auf der nächsten Seite landet. - Hintergrundfarben werden mit `print-color-adjust: exact` erzwungen — ohne diese Direktive sparen Browser sie beim Druck weg. Konsumiert von: src/app/(dashboard)/expectations/[id]/print/* src/components/print/* */ /* ---- Page-Setup: A4 portrait (Default) ---- */ @page { size: A4 portrait; margin: 15mm; } /* ---- Landscape-Variante: greift, wenn der Page-Container die Klasse `.print-page--landscape` trägt. Wird via `@page :first` / named page-set umgesetzt sobald wir Multi-Format brauchen. Aktuell regelt die Print-Page-Komponente das per Inline-Style. ---- */ /* ============================================================ Bildschirm-Vorschau: A4-Container mit Schatten ============================================================ Wichtig: KEIN `display: flex; flex-direction: column` + `margin-top: auto`-Trick mehr. Chromium ignoriert in dieser Kombination das Wachsen über `min-height` hinaus, wenn ein Flex-Item `margin-top: auto` hat — Container bleibt bei min-height, Content+Footer overflowen. Stattdessen normales Block-Layout: Container wächst zuverlässig mit dem Inhalt, Footer fließt natürlich am Ende. Die A4-Page-Breaks werden über einen feinen `repeating-linear-gradient` im Hintergrund visualisiert — alle 297mm eine dezente Linie, damit die Lehrkraft im langen Bildschirm-Streifen sieht, wo der Drucker die Seitenumbrüche macht. Im echten Druck (Strg+P, `@media print`) wird das Pattern via Override weggeschaltet. */ .print-page { /* DIN A4 Hochformat: 210×297mm. `min-height` (statt `height`) lässt den Container bei sehr langen Inhalten mitwachsen — kombiniert mit dem non-flex Outer-Scroller bleibt der Footer dann trotzdem innerhalb des weißen Bereichs (vgl. Bugfix `align-self`-Story). */ width: 210mm; min-height: 297mm; background: #ffffff; color: #1a1a1a; padding: 20mm; box-sizing: border-box; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); margin: 0 auto; font-family: var(--font-sans); font-size: 12px; line-height: 1.5; /* `position: relative` ist Bezugspunkt für die absolut positionierte Seitenzahl rechts unten (`.print-page-number`). */ position: relative; /* Flex-Column erlaubt es, den Footer per `margin-top: auto` ans untere Page-Ende zu drücken — DIN 5008-konforme Briefoptik mit Unterschriftsblock am unteren Blatt-Rand. */ display: flex; flex-direction: column; } .print-page--landscape { width: 297mm; min-height: 210mm; } /* Seitenzahl rechts unten — wird nur bei mehrseitigen Dokumenten (Pages > 1) eingeblendet. Sitzt innerhalb des Page-Paddings, sodass sie nicht in den Schnittbereich beim Druck rutscht. */ .print-page-number { position: absolute; right: 20mm; bottom: 8mm; font-size: 9px; color: #666; font-variant-numeric: tabular-nums; } /* ============================================================ Page-Break-Helpers — NUR im Druck aktiv ============================================================ Wichtig: Diese Klassen müssen in `@media print` stehen. `break-inside: avoid` erzeugt in einigen Browsern (Chromium) im Bildschirm-Layout einen neuen Block-Formatting-Context, der `margin-top: auto`-Push innerhalb von Flex-Containern bricht — sichtbar daran, dass z.B. der Notenschlüssel-Footer plötzlich außerhalb des A4-Papier-Containers gerendert wird. Print-only halten löst das. */ @media print { /* Print-Root-Isolation: `window.print()` druckt sonst die ganze App-Page inkl. Sidebar, Page-Header und Toolbar — das ist im PDF-Export unbrauchbar. Mit dem klassischen Visibility-Trick blenden wir alles aus und setzen nur den `[data-print-root]`-Subtree + seine Vorfahren wieder sichtbar. `visibility` statt `display: none`, damit der Layout- Fluss erhalten bleibt — der Root wird dann absolut positioniert, sodass die `.print-page`-Container am Seitenanfang stehen und nicht hinter den (jetzt unsichtbaren) Sidebar-Resten Platz reservieren. */ body * { visibility: hidden !important; } [data-print-root], [data-print-root] * { visibility: visible !important; } [data-print-root] { position: absolute !important; inset: 0 !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; width: 100% !important; height: auto !important; } html, body { margin: 0 !important; padding: 0 !important; overflow: visible !important; height: auto !important; background: #ffffff !important; } /* Sidebar, Stepper, Toolbar etc. dürfen nicht im Ausdruck erscheinen. Der `.print-only`-Hook macht das Paper-Element zum einzigen sichtbaren Inhalt. */ body { background: #ffffff !important; } /* Schatten + sichtbarer Bildschirmrahmen weg, Padding kommt aus @page. Das `repeating-linear-gradient` mit Page-Break-Linie ist nur für die Bildschirm-Vorschau gedacht — beim echten Druck unerwünscht (würde sichtbare Linien auf das Papier drucken), daher hier neutralisiert. */ .print-page, .print-page--landscape { width: auto !important; min-height: auto !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: #ffffff !important; /* Jede `.print-page` muss exakt eine physische A4-Seite ergeben — sonst klebt der Browser kurze Pages aneinander („zwei Schüler auf einem Blatt"). `break-after: page` erzwingt den Seitenumbruch hinter jeder Page-Komponente; `:last-child`-Selektor vermeidet die sonst übliche Trailing-Blank-Seite am Ende. `break-inside: avoid` zusätzlich, damit der Browser-Print nicht mitten in einer geplanten Page splittet, wenn der JS-Messpass ein paar px daneben lag (Font-Rendering im Print weicht minimal vom Screen ab). */ break-after: page; page-break-after: always; break-inside: avoid; page-break-inside: avoid; } .print-page:last-child, .print-page--landscape:last-child { break-after: auto; page-break-after: auto; } /* Elemente, die nur in der Bildschirm-Vorschau sichtbar sind */ .print-hide { display: none !important; } /* Hintergrundfarben + Border-Backgrounds zwingend drucken (sonst werden sie vom Browser zur Toner-Ersparnis weggespart). */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Inhalt darf NICHT zwischen zwei Seiten zerrissen werden. Klassischer Anwendungsfall: ganze Aufgabe inkl. Hinweiszeile, oder Footer-Block (Unterschrift + Notenschlüssel + Datum). */ .print-keep-together { break-inside: avoid; page-break-inside: avoid; } /* Erzwingt einen Seitenumbruch VOR dem Element. */ .print-page-break-before { break-before: page; page-break-before: always; } /* Erzwingt einen Seitenumbruch NACH dem Element. */ .print-page-break-after { break-after: page; page-break-after: always; } /* Bevorzugt KEINEN Umbruch unmittelbar vor diesem Element — sinnvoll z.B. für „Zwischensumme"-Zeilen, die zusammen mit der darüber- liegenden Tabelle stehen sollen. */ .print-no-break-before { break-before: avoid; page-break-before: avoid; } /* Bevorzugt KEINEN Umbruch unmittelbar nach diesem Element — etwa für Überschriften, die nicht „verwaist" oberhalb eines neuen Seitenumbruchs stehen sollen. */ .print-no-break-after { break-after: avoid; page-break-after: avoid; } }