/* ══ DRUCK ══ der gemeinsame Sockel für alles, was die Suite auf Papier bringt Quelle: ui-kit/bausteine/druck.css — HIER ändern, dann "Sync". In den Modulen liegt eine 1:1-Kopie unter frontend/css/druck.css. NIE in der Kopie editieren, der nächste Sync überschreibt sie. ──────────────────────────────────────────────────────────────────────────── WARUM ES DIESE DATEI GIBT (K4, 21.08.2026) Dashboard und Sollkurven drucken beide ein `#print-report`-Blatt mit `.pr-*`-Klassen. Die Sollkurven-Fassung war erklärtermaßen "Muster gespiegelt vom Dashboard" — zwei Dateien, ein Bauplan. Was in der einen gefixt wurde, fehlte in der anderen; genau so ist der Meldungs-Fund unten entstanden. Ab hier gibt es EINE Quelle (Ein Button, eine Lösung). WAS HIER WOHNT: Seite, Blattbreite, Farb-Erzwingung, das Blatt selbst, Kopf, KV-Raster, Chart-Rahmen, Unterschriften — alles, was in beiden Modulen Zeichen für Zeichen gleich stand. WAS NICHT HIER WOHNT: was ein Modul allein hat. Der Bericht hat seine Chart-Legende, das Soll-Blatt seine Aufstelldruck-Tabelle; und JEDES Modul blendet seine eigene Bildschirm-UI aus — die Klassen dafür kennt nur es selbst. Das steht in seiner `print.css`, die NACH dieser Datei geladen wird. ──────────────────────────────────────────────────────────────────────────── ABGRENZUNG: Das Büro-Dach hat eine eigene Schwester (`ProKASRO-Tools/ui-kit/druck.css`) für seine vier Werkzeuge. Sie ist NICHT dieselbe Datei und soll es nicht werden: Dort druckt jedes Werkzeug denselben Bildschirm, hier drucken zwei Werkzeuge ein eigens gebautes Blatt mit eigener Papier-Palette. GLEICH ist die Sprache (Roboto, keine Deko, keine Schatten) und die Lehren aus dem echten Safari-Druck — die stehen unten an der Regel, die sie betreffen. Wer hier etwas ändert, schaut dort nach, ob es passt, und umgekehrt. ──────────────────────────────────────────────────────────────────────────── LEKTION 0 — DIE WICHTIGSTE, weil sie alle anderen aushebelt: **Diese Datei muss NACH dem Bildschirm-CSS des Moduls geladen werden**, und die modul-eigene `print.css` direkt danach. Media-Queries erhöhen die Spezifität NICHT. Bei Gleichstand gewinnt die SPÄTER deklarierte Regel. Steht der Druck vorher, verliert er jeden Zweikampf — lautlos: am Bildschirm fällt nichts auf, das Papier trägt dann Bildschirm-Typografie. Genau so ist die erste Druckprobe des Büro-Dachs am 02.08.2026 ausgegangen (Überschriften 15 px statt 12, Karten-Rahmen mitgedruckt). Im Dashboard stand `print.css` bis zum 21.08.2026 vor `toast.css` und `zip-export.css` — folgenlos, weil die beiden nichts Kollidierendes deklarieren, aber dieselbe Falle nur zufällig entschärft. ──────────────────────────────────────────────────────────────────────────── WAS CSS NICHT KANN: Safari druckt seine eigene Kopf- und Fußzeile mit — Fenstertitel, Datum, den vollen file:///-Pfad, die Seitenzahl. Auf einem Kundenbericht will das niemand. Das ist ein Häkchen im Druckdialog ("Kopf- und Fußzeilen"), kein Stylesheet-Problem. ══ */ /* Das Blatt existiert am Bildschirm nicht — es wird nur zum Drucken sichtbar. DIESE ZEILE IST DIE WICHTIGSTE DER DATEI. Fällt sie weg, steht der gesamte Druck-Inhalt ungestylt unter der laufenden Anwendung. Am 21.08.2026 einmal passiert: Ein Such-und-Ersetz-Ausdruck sollte eine einzelne Regel am Dateiende entfernen und schnitt alles von der ersten Kommentarzeile bis dorthin mit weg — die Datei schrumpfte von 350 auf 56 Zeilen, und KEIN Test schlug an, weil kein Test CSS liest. Gefunden hat es Chris am Bildschirm. Wer hier etwas löscht, löscht benannte Zeilen, nicht Bereiche. */ #print-report { display: none; } @media print { /* ── DIE SEITE ──────────────────────────────────────────────────────── Explizite Maße statt `A4`: das stärkste Signal, das WebKit versteht. */ @page { size: A4 portrait; /* 16 mm oben und unten (vorher 14/12). Der Wert kam mit einer Seiten-Fußzeile, die seit dem 24.08.2026 gestrichen ist (D-095) — er BLEIBT trotzdem: Das Blatt ist damit am Bild abgenommen, und ein ruhiger Rand ist kein Rest, sondern eine Entscheidung. Die SEITENRÄNDER bleiben bei 14 mm — daran hängt die 182-mm- Blattbreite unten. */ margin: 16mm 14mm; } /* ── DIE FESTE PHYSISCHE BREITE ─────────────────────────────────────── Safari skaliert zu breiten Inhalt NICHT herunter, es SCHNEIDET IHN AB. Im Vertrieb hat das am 09.07.2026 einen halben Tag gekostet: rechts fehlten Diagramm-Ränder und Legenden. Chris' Beobachtung war der Schlüssel — "bei 99 % Skalierung im Druckdialog geht's" heißt: die ganze Seite ist minimal zu breit, es liegt nicht am Diagramm. `max-width` in Millimetern ist eine normale CSS-Regel, die Safari befolgen MUSS — anders als @page, das WebKit gern ignoriert. 182 mm = 210 mm Blatt minus 2 × 14 mm Rand (siehe @page oben). */ #print-report { max-width: 182mm; margin: 0 auto; } html, body { background: var(--print-bg) !important; color: var(--print-text) !important; height: auto !important; overflow: visible !important; font-family: 'Roboto Mono', monospace; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ── MELDUNGEN DRUCKEN NICHT MIT ────────────────────────────────────── Gefunden am 21.08.2026 beim Bau dieser Datei, in BEIDEN Suite-Modulen. Die Toast-Stapel sind direkte Body-Kinder und standen in keiner Ausblend-Liste — und nach der Meldungs-Regel vom 05.08.2026 BLEIBEN Warnung und Fehler stehen, bis jemand sie wegklickt. Eine unbestätigte Fehlermeldung landete damit mitten auf dem Aushärteprotokoll, also auf Reklamations-Pflichtdoku. Das Büro-Dach hat genau diese Zeile am 16.08.2026 bekommen; die Suite nie. Sie steht jetzt an der einen Stelle, die beide Module speist. */ .meldungen-oben, .meldungen-unten { display: none !important; } /* ── DAS BLATT ──────────────────────────────────────────────────────── `position: static` hebt die Off-Screen-Parkposition auf, die das Druck-Modal setzt, damit ECharts vor dem Druck die Container-Größe messen kann. */ #print-report { display: block !important; position: static !important; width: 100% !important; color: var(--print-text); font-family: 'Roboto Mono', monospace; font-size: var(--print-text-blatt); line-height: 1.35; } /* Abgewählte Sektionen — die Druck-Modale setzen das je Häkchen. */ #print-report .pr-hidden { display: none !important; } /* Erzwungener Seitenanfang. WELCHES Element ihn bekommt, entscheidet das Druck-Modal beim Drucken (`_seitenwechselSetzen`) — es kennt die abgewählten Abschnitte, das Stylesheet nicht. Hier steht nur, was der Marker bedeutet. Beide Schreibweisen, weil WebKit die alte länger verstanden hat als die neue und ein Seitenwechsel, der still ausfällt, erst auf dem Papier auffällt. */ #print-report .pr-seitenanfang { break-before: page; page-break-before: always; } /* ── KOPF ── */ .pr-header { margin-bottom: var(--print-fuge); } .pr-title { margin-bottom: var(--print-fuge); } .pr-title-main { font-size: var(--print-text-title); /* FETT seit dem 21.08.2026: Bei 16 pt trug der leichte Schnitt den Titel allein. Auf 11 pt heruntergesetzt las er sich schwächer als die Abschnitts-Überschriften darunter — der Dokumenttitel stand damit unter seinen eigenen Kapiteln. Die Größe ist knapp, also trägt das Gewicht. */ font-weight: var(--gewicht-fett); letter-spacing: 0.02em; color: var(--print-text); } .pr-title-sub { font-size: var(--print-text-blatt); color: var(--print-text-soft); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 1mm; } /* Der Auftraggeber steht in derselben Zeile, aber NICHT in Versalien (Chris, 21.08.2026): Ein Firmenname ist ein Eigenname — die Rechtsform mitzuschreien ("GMBH") liest sich falsch, und die Sperrung der Zeile zerlegt lange Namen zusätzlich. Die Aufnahme-Nummer bleibt in Versalien; sie ist eine Kennung, kein Name. */ .pr-sub-kunde { text-transform: none; letter-spacing: 0.02em; } .pr-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10mm; } /* ── DIE WERTEZEILE ─────────────────────────────────────────────────── Kopf-Zeilen und KV-Zeilen sind dasselbe Bauteil und stehen deshalb zusammen. Beschlossen am Richtungsblatt (Chris, 21.08.2026, Fassung B): PUNKTFADEN STATT VOLLLINIE. Vorher trug JEDE Zeile eine durchgezogene Haarlinie — auf einem Blatt mit dreißig Zeilen ergibt das ein Lineal- muster, in dem keine Gruppe mehr hervortritt. Der Punktfaden führt das Auge vom Label zum Wert, ohne selbst gelesen zu werden; er ist der klassische Weg im Tabellensatz und genau dafür erfunden. Gebaut als `::after` mit `flex: 1` ZWISCHEN Label und Wert: So wächst er exakt auf die Lücke, egal wie lang beide sind. Der Wert steht per `order: 2` dahinter — ohne die Ordnung läge der Faden hinter dem Wert. LABELS HÖREN AUF ZU SCHREIEN. Vorher Versalien mit 0,14 em Sperrung — "ROHRDURCHMESSER VORHER" fraß damit die halbe Zeile. Jetzt normal gesetzt, klein und grau: Der Wert ist die Aussage, das Label sein Name. ZEILENABSTAND 0,7 mm (vorher 1,1): Seit der Faden das Paar optisch bindet, braucht die Zeile weniger Luft, um lesbar zu bleiben. */ .pr-meta-row { display: flex; align-items: baseline; gap: 2mm; padding: 0.7mm 0; } .pr-meta-lbl { font-size: var(--print-text-blatt); letter-spacing: 0; color: var(--print-text-soft); white-space: nowrap; flex: 0 1 auto; } .pr-meta-row::after { content: ""; flex: 1 1 auto; order: 1; border-bottom: 0.4pt dotted var(--print-rule); margin: 0 1.5mm 1.2mm; } .pr-meta-val { font-size: var(--print-text-blatt); color: var(--print-text); text-align: right; order: 2; flex: 0 0 auto; } /* ── KV-BLÖCKE ──────────────────────────────────────────────────────── Der Umbruch-Schutz gilt hier bewusst: ein KV-Block ist kurz und gehört zusammen. Für eine LANGE Tabelle wäre er falsch — sie muss umbrechen dürfen, sonst schiebt der Browser sie ganz auf die nächste Seite und lässt eine halbe Seite weiß (Lehre des Büro-Dachs, 02.08.2026). ABSTÄNDE ZENTRAL (21.08.2026): Bis zur Design-Runde hielt jedes Modul eigene Werte (Bericht 6/7/16 mm, Soll-Blatt 11/11/14 mm) — ein Rest aus der Zeit, als beide Blätter getrennt gewachsen sind. Kopf, Blöcke und Diagramme tragen jetzt dieselbe Fuge. */ .pr-block { margin-bottom: var(--print-fuge); page-break-inside: avoid; break-inside: avoid; } /* OHNE LINIE (Chris, 21.08.2026, am gerenderten Blatt): Unter jeder Überschrift lag ein 0,6-pt-Balken. Er trennte nicht, er verklebte — die Überschrift wirkte wie der Kopf einer Tabelle statt wie der Name einer Gruppe, und auf einem Blatt mit sechs Blöcken sind es sechs Balken. Der Abstand darüber trennt jetzt allein. EINE ÜBERSCHRIFTEN-GRÖSSE IM BLATT: Abschnitte und Diagramme sind gleichrangig — "Bauvorhaben" ist keine Ebene über "Druck & Geschwindigkeit". Das Gewicht trägt die Auszeichnung, nicht der Grad. */ .pr-block-title { font-size: var(--print-text-blatt); font-weight: var(--gewicht-mittel); color: var(--print-text); letter-spacing: 0.02em; margin-bottom: 2.5mm; } .pr-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8mm; } /* Dasselbe Bauteil wie die Kopf-Zeile oben — Begründung dort. */ .pr-kv-row { display: flex; align-items: baseline; gap: 2mm; padding: 0.7mm 0; } .pr-kv-lbl { font-size: var(--print-text-blatt); letter-spacing: 0; color: var(--print-text-soft); white-space: nowrap; flex: 0 1 auto; } .pr-kv-row::after { content: ""; flex: 1 1 auto; order: 1; border-bottom: 0.4pt dotted var(--print-rule); margin: 0 1.5mm 1.2mm; } .pr-kv-val { font-size: var(--print-text-blatt); color: var(--print-text); text-align: right; word-break: break-word; order: 2; flex: 0 0 auto; } .pr-kv-row.pr-kv-wide { grid-column: 1 / -1; } /* ── CHART-BLOCK ────────────────────────────────────────────────────── Die HÖHE steht im Modul: der Bericht stapelt mehrere Diagramme auf ein Blatt, das Soll-Blatt zwei — verschiedene Blätter, verschiedene Maße. */ .pr-chart-block { margin-bottom: var(--print-fuge); page-break-inside: avoid; break-inside: avoid; } .pr-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2.5mm; } /* So groß wie die Legende daneben (Chris, 21.08.2026) — das Gewicht trägt die Auszeichnung, nicht der Grad. Titel und Legende sitzen in einer Zeile; verschiedene Grade dort lesen sich wie zwei Ebenen, wo nur eine ist. */ .pr-chart-title { font-size: var(--print-text-blatt); font-weight: var(--gewicht-mittel); color: var(--print-text); letter-spacing: 0.02em; } .pr-chart-unit { font-size: var(--print-text-blatt); color: var(--print-text-soft); letter-spacing: 0.02em; } /* OHNE KASTEN (21.08.2026): Das Diagramm trug einen 0,4-pt-Rahmen UND zeichnet seine Achsenlinien — ein doppelter Rahmen, zwei Linien im Abstand weniger Millimeter. Die Achsen sind der Rahmen. */ .pr-chart { width: 100%; } /* ── UNTERSCHRIFTEN ── Nur der Bericht hat sie; das Soll-Blatt hat sie am 21.08.2026 verloren (eine berechnete Vorgabe zeichnet niemand gegen). Die Regeln bleiben hier: Wer sie wieder braucht, soll sie nicht neu erfinden. */ .pr-footer { margin-top: 14mm; page-break-inside: avoid; } .pr-sig-row { display: flex; gap: 16mm; margin-bottom: 5mm; } .pr-sig-block { flex: 1; } .pr-sig-line { border-top: 0.6pt solid var(--print-text); margin-top: 12mm; } .pr-sig-lbl { font-size: var(--print-text-blatt); color: var(--print-text-soft); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 1.5mm; } }