/* ========================================================================== Druckausgabe des Dashboards. "PDF" ist der Druckdialog des Browsers mit dem Ziel "Als PDF speichern" - bewusst ohne Headless-Chromium im Image (rund 400 MB und dauerhafte Wartung fuer eine Funktion, die der Browser schon hat). Das steht als Entscheidung P4 in PLAN.md und gilt fuer jeden kuenftigen Bericht. HANDGESCHRIEBEN. Diese Datei geht NICHT durch `npm run stil` - sie steht nicht in den Eingaben von werkzeuge/stil_bauen.js und traegt deshalb auch keine Pruefsumme. Das ist Absicht: Druckregeln sind Layout-Ausnahmen und keine Hilfsklassen, Tailwind haette hier nichts zu erzeugen. Sie ist zudem UNLAYERED, waehrend stil.css alles in @layer components bzw. utilities ablegt. Eine unlayered Regel gewinnt gegen jede Layer-Regel, unabhaengig von der Spezifitaet. Die `!important` unten sind deshalb streng genommen nicht mehr noetig; sie bleiben als Netz stehen. WAS SICH AM 07.08.2026 GEAENDERT HAT: Bis dahin hing diese Datei ausschliesslich an bericht.njk. Der Knopf "Drucken" steht aber im gemeinsamen Layout und damit auf JEDER Seite - wer ihn dort drueckte, bekam die dunkle Seitenleiste, die Filterleiste und die Fussleiste mit aufs Papier. Jetzt binden layout.njk und layout_schlicht.njk sie ebenfalls ein (media="print"). Die VERAENDERLICHEN Masse (Seitenraender, Kopfhoehe, Logogroesse) stehen nicht hier, sondern kommen aus /oeffentlich/css/briefkopf.gen.css - gepflegt unter /einstellungen/briefkopf. Diese Datei ist die Rueckfallebene: antwortet die erzeugte Route nicht, wird nach den Werten hier gedruckt und nicht nach der Browservorgabe. ========================================================================== */ /* ---- Bildschirm ---------------------------------------------------------- Briefkopf und Fusszeile stehen als erste Kinder von im Markup, auf dem Bildschirm aber unsichtbar. Sie MUESSEN dort stehen: ein Vorfahre mit transform, filter, will-change oder contain nimmt `position: fixed` den Bezug zur Seite - und dann wiederholt sich beim Drucken gar nichts mehr. Das ist der haeufigste Grund, warum diese Technik "nicht funktioniert". -------------------------------------------------------------------------- */ .druckkopf, .druckfuss { display: none; } @media print { /* Rueckfallebene. Die echten Werte kommen aus briefkopf.gen.css, das NACH dieser Datei eingebunden wird und deshalb gewinnt. Die Vorgabe hier laesst oben Platz fuer den Briefkopf (10 + 16 + 6 mm) und unten fuer die Fusszeile (4 + 8 + 8 mm) - dieselben Werte wie die Vorgaben des Dienstes, damit ein Ausfall der Route das Blatt nicht verschiebt. */ @page { size: A4; margin: 32mm 14mm 20mm; } /* ---- Briefkopf und Fusszeile auf JEDER Seite -------------------------- `position: fixed` wird beim Drucken je Blatt erneut gezeichnet. Das ist das einzige Verfahren, das ohne Fremdbibliothek eine Fusszeile an den unteren Seitenrand nagelt - @page-Randboxen (@top-right und Geschwister) koennten das laut Spezifikation, werden von Chrome und Firefox aber nicht umgesetzt. Der Platz dafuer kommt aus dem @page-Rand und NICHT aus einem padding: ein padding-top wirkt genau einmal, auf Seite 1. Ab Seite 2 begaenne der Text am oberen Rand des Satzspiegels und liefe unter den Briefkopf. Die Versaetze sind negativ, weil ein fixiertes Element beim Drucken relativ zum SATZSPIEGEL sitzt und nicht zur Papierkante: `top: 0` waere genau dort, wo der Inhalt anfaengt. Die konkreten Zahlen rechnet briefkopf.gen.css aus den eingestellten Massen aus. SEITENZAHLEN GIBT ES BEWUSST NICHT. `counter(page)` loest nur innerhalb der @page-Randboxen auf, und die unterstuetzt kein Zielbrowser. Statt einer JavaScript-Bastelei, die bei jeder Schriftgroessenaenderung falsch waere, traegt die Fusszeile Firmierung, Zeitraum und Erstellungszeitpunkt auf jedem Blatt - das beantwortet "gehoert dieses Blatt zum Stapel?" genauso gut. Wer echte Seitenzahlen braucht, kreuzt im Druckdialog "Kopf- und Fusszeilen" an. */ .druckkopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; position: fixed; left: 0; right: 0; top: -22mm; height: 16mm; /* Netz gegen zu lange Firmenzeilen: lieber beschnitten als ueber der ersten Tabellenzeile. Die eigentliche Abwehr sitzt in der Validierung - src/dienste/briefkopf.js rechnet nach, ob die Zeilen in die Hoehe passen, und lehnt beim Speichern ab. */ overflow: hidden; border-bottom: 0.4mm solid #000; padding-bottom: 1.5mm; } /* Standard ist Text links, Logo rechts. Genau zwei Moeglichkeiten, also zwei Regeln - dafuer die CSS-Erzeugung anzuwerfen waere Unfug. */ .druckkopf[data-logo='oben_links'] { flex-direction: row-reverse; } .druckkopf__text { font-size: 9pt; line-height: 1.25; color: #000; min-width: 0; } .druckkopf__zeile:first-child { font-weight: 700; font-size: 10.5pt; } .druckkopf__logo { height: 12mm; width: auto; flex: none; } .druckfuss { display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; position: fixed; left: 0; right: 0; bottom: -12mm; height: 8mm; overflow: hidden; border-top: 0.2mm solid #999; padding-top: 1.5mm; font-size: 7.5pt; color: #333; } .druckfuss__kennung { text-align: right; } /* ---- Grundgeruest aufloesen ------------------------------------------- body.app ist ein zweispaltiges Raster mit fester 260px-Spalte fuer die Seitenleiste. Auf Papier gibt es keine Navigation, also auch keine Spalte - sonst bliebe links ein leerer Streifen stehen, weil das Raster die Spalte auch dann reserviert, wenn ihr Inhalt display:none ist. */ body.app, html.schmal body.app { display: block; min-height: 0; background: #fff; color: #000; } .inhalt { display: block; } .hauptbereich { display: block; padding: 0; gap: 0; } body.bericht { padding: 0; font-size: 10.5pt; color: #000; background: #fff; } /* ---- Was nicht aufs Papier gehoert ------------------------------------ Bedienelemente, Navigation, Verweise. Ein Knopf im PDF ist das Bild eines Knopfes, ein Verweis ein toter Verweis. */ .bericht__leiste, .kopfleiste, .sidebar, .menue-schleier, .hamburger, .filterleiste, .hinweisleiste, .fussleiste, .knopf, .chipknopf, .reiter, .formular__leiste, .aktionen, .karte__link, .kpi__link, .version-ecke, .nicht-drucken { display: none !important; } /* Auf kleinen Bildschirmen wird die Tabelle zu einem scrollbaren Kasten (stil.css). Auf Papier gibt es kein Scrollen - dort muss sie wieder eine Tabelle sein, sonst bricht sie mitten in den Spalten ab. Die Regel dort ist zwar auf `screen` beschraenkt; diese hier ist der Riegel dagegen, dass die Einschraenkung beim naechsten Umbau verlorengeht. */ .tabelle { display: table !important; overflow: visible !important; } /* ---- Flaechen --------------------------------------------------------- Schatten sind auf Papier ein grauer Schmierrand. Ein duenner Rahmen sagt dasselbe und kostet keinen Toner. */ .karte, .kpi, .kachel, .kennzahlband, .kontext { box-shadow: none; border: 1px solid #999; break-inside: avoid; background: #fff; } .bericht section { break-inside: avoid; } /* Auf 182 mm Satzspiegel sind vier Kacheln nebeneinander unlesbar schmal. */ .kachelreihe, .kpi-gitter, .kontextzeile { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm; } /* Eine Ueberschrift, die allein am Seitenfuss steht, gehoert zur naechsten Seite. */ h1, h2, h3 { break-after: avoid; } h2 { font-size: 12pt; margin-top: 6mm; } h3 { font-size: 10.5pt; } /* ---- Tabellen --------------------------------------------------------- Der Kopf wiederholt sich auf jeder Seite; ohne ihn ist ab Blatt zwei nicht mehr erkennbar, welche Spalte was ist. */ .tabelle { font-size: 9pt; width: 100%; border-collapse: collapse; } .tabelle thead { display: table-header-group; } .tabelle tfoot { display: table-footer-group; } .tabelle tr { break-inside: avoid; } .tabelle th, .tabelle td { border-bottom: 1px solid #ccc; padding: 3px 6px; } .tabelle th { background: #fff; border-bottom: 1px solid #666; } /* ---- Ampel und Farbe -------------------------------------------------- Farbe ist NIE die einzige Information (Regel F3): die Chips tragen ihren Zustand als Text, die Kacheln ueber den oberen Rahmen. Rahmen werden gedruckt, weil sie kein Hintergrund sind - die Aussage geht also auch ohne den Haken "Hintergrundgrafiken drucken" nicht verloren. print-color-adjust ist hier Kosmetik, keine Bedingung. */ .chip, .ampel, .kachel, .status__punkt, .balken__fuellung { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ---- Diagramme -------------------------------------------------------- Feste Hoehe, damit ein Diagramm nicht ein halbes Blatt frisst. Der SVG-Renderer wird in oeffentlich/js/diagramme.js gesetzt - ein Canvas waere ein Rasterbild in Bildschirmaufloesung und druckt unscharf oder, wenn es seit dem letzten Zeichnen nicht angefasst wurde, leer. */ .diagramm, .diagramm--gross { height: 60mm; break-inside: avoid; } /* ---- Verweise --------------------------------------------------------- Kein Blau, keine Unterstreichung - im Ausdruck ist das Farbe ohne Funktion. Die Adresse dahinter wird bewusst NICHT ausgeschrieben: bei einer Tabelle mit 50 Artikelzeilen waere jede Zeile doppelt so hoch. */ a { color: #000; text-decoration: none; } .bericht__kopf { border-bottom: 2px solid #000; } /* Der Briefkopf traegt Logo und Firmierung bereits auf JEDEM Blatt. Der Seitenkopf des Berichts wiederholt beides auf Blatt eins - dort staende dann zweimal dasselbe. Also weg damit, sobald der Briefkopf aktiv ist. */ body[data-briefkopf='1'] .bericht__marke { display: none; } }