/* ========================================================================== Druckbild – Zwahlen's Rapport -------------------------------------------------------------------------- Wird NACH styles.css geladen und ergaenzt deren Druckregeln. Einbinden in index.html direkt unter der Zeile fuer styles.css: Auf Papier ist ein Rapport ein Beweisdokument und kein Bildschirmabzug. Alles hier folgt daraus: fester Satzspiegel mit Lochrand, echte Seitenzahlen, Umbrueche, die nichts zerreissen, und Schwarz auf Weiss statt Oberflaeche. Alle Regeln stehen in einem @media-print-Block, damit die Datei auch dann nichts am Bildschirm veraendert, wenn sie einmal ohne das media-Attribut eingebunden wird. ========================================================================== */ @media print { /* ---------------------------------------------------------- 1. Seite */ @page { size: A4; /* 25 mm links: Platz fuer die Lochung. Ohne den verschwindet im Ordner die erste Spalte des Textes hinter dem Ringmechanismus. */ margin: 15mm 15mm 15mm 25mm; @top-left { /* Rapportnummer als laufender Kopf. Zwei Stufen, weil kein Browser beide Wege kann: Setzt die App --druck-ref am , steht die Nummer oben. Wo string() unterstuetzt wird, gewinnt die zweite Zeile und holt sie direkt aus dem Rapportkopf. Kennt der Browser string() nicht, faellt die Zeile weg und Stufe eins bleibt. */ content: var(--druck-ref, ""); content: string(druck-ref); font-family: ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif; font-size: 8pt; color: #333; } @bottom-right { /* counter(pages) koennen Chrome ab 131 und Safari. Firefox laesst den Randbereich leer – das ist ein sauberer Ausfall und kein Fehlbild: lieber keine Seitenzahl als eine falsche auf einem Beweisdokument. */ content: "Seite " counter(page) " von " counter(pages); font-family: ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif; font-size: 8pt; color: #333; } } /* Quelle fuer den laufenden Kopf. Greift nur in Browsern mit string(), stoert aber nirgends: string-set ohne Abnehmer bleibt folgenlos. */ .sheet-head .muted, .print-report h2 { string-set: druck-ref content(text); } /* ------------------------------------------------- 2. Farben aufs Papier */ /* Die Oberflaeche kennt ein helles und ein dunkles Erscheinungsbild. Papier kennt nur eines. Ohne diese Umschreibung druckt ein Nutzer mit dunklem Thema graue Schrift auf grauem Grund. Die Werte stehen darum hier nochmals fest verdrahtet – genau wie in karte.css. */ :root, :root[data-theme="dark"] { --surface-0: #ffffff; --surface-1: #ffffff; --surface-2: #ffffff; --surface-sunken: #ffffff; --border: #999999; --border-strong: #000000; --text-primary: #000000; --text-secondary: #1a1a1a; --text-muted: #333333; --accent: #000000; --accent-fg: #000000; --accent-ink: #000000; --accent-soft: transparent; --good: #000000; --warning: #000000; --serious: #000000; --critical: #000000; --shadow: none; /* Die einzige Farbe, die bleibt: der duenne Balken ueber dem Dokumentkopf. */ --druck-akzent: #6d28d9; } /* Keine Farbflaechen. Browser lassen Hintergruende beim Drucken zwar meist weg – "meist" ist fuer ein Beweisdokument zu wenig. */ body *, body *::before, body *::after { background-image: none !important; } .card, .ritem, .chip, .kpi, .chart-card, .siegel, .entries, .badge-on, .badge-off, .shift, .cal-item, .pw-result, .herkunft-roh, .seg { background: transparent !important; } /* Filter erzwingen eine Rasterung: Der Browser rechnet den betroffenen Bereich in ein Pixelbild um und druckt es in Bildschirmaufloesung. Das ist die haeufigste Ursache fuer unscharfe Karten und Siegel. */ *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ---------------------------------------------------- 3. Typografie */ /* Der Bezugspunkt zuerst: Fast alle Groessen im Projekt sind in rem angegeben. Bleibt die Wurzel bei 16px, waechst jede rem-Angabe im Ausdruck ueber den 10.5pt-Fliesstext hinaus – die Metadaten waeren dann groesser als der Text, zu dem sie gehoeren. */ html { font-size: 10.5pt; } body { font-size: 10.5pt; line-height: 1.35; color: #000; /* Flattersatz: Blocksatz reisst in der schmalen Spalte Loecher auf. Trennung nach Sprache, das lang="de" am liefert sie. */ text-align: left; hyphens: auto; } h1, .print-cover h1 { font-size: 16pt; line-height: 1.2; } h2, .print-report h2, .sheet-head h2 { font-size: 12pt; line-height: 1.25; } h3 { font-size: 10.5pt; line-height: 1.3; } .prose, .entry-text, .herkunft-roh { line-height: 1.35; } /* Metadaten auf 8pt – aber benannt statt ueber .muted pauschal: .muted traegt an manchen Stellen Fliesstext, etwa den erklaerenden Satz im Herkunftsblock. Der bliebe sonst unnoetig klein. */ .dl dt, .print-note, .print-firma .muted, .entry-time, .entry-status, .ritem-meta, .thumb .cap, .shift-meta, .siegel-summe .muted, .protokoll code, .siegel-summe code, .chain-hint { font-size: 8pt; } .dl { grid-template-columns: 38mm 1fr; gap: 2mm 5mm; font-size: 10.5pt; } .dl dt { color: #333; } /* Zahlen und Pruefsummen im gleichen Schnitt: Wer zwei Summen auf Papier vergleicht, muss Ziffern uebereinander legen koennen. */ code, .siegel-summe code, .protokoll code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: none; } /* Der eine Akzent: ein duenner Balken ueber dem Dokumentkopf. Kein Farbfeld, nur eine Linie – die druckt jeder Treiber ohne Rasterung. */ .print-cover, .print-head, .sheet-head, body.printing-record .rec-head { border-top: 2pt solid var(--druck-akzent); padding-top: 4mm; } /* ------------------------------------------- 4. Bedienbares verschwindet */ /* Auf Papier laesst sich nichts druecken, nichts auswaehlen, nichts aufklappen. Was danach aussieht, kostet nur Platz und verwirrt. */ button, .btn, .navbtn, .chipbtn, .chipbtns, .fab, .seg, .pick, nav, .sidebar, .topbar, .filters, .sel-bar, .offline-bar, .lic-bar, .toast, .sheet-foot, .quick, .entry-add, .entry-del, .disclose, .thumb .del, .karte-steuerung, .protokoll-auf, .no-print, [role="button"], [role="tablist"] { display: none !important; } /* Aufklapper: Das Bedienelement geht, der Inhalt bleibt. Ohne das fehlt im Ausdruck der Verlauf – also genau der Teil, wegen dem ein Rapport ueberhaupt ausgedruckt wird. */ details { display: block; } details:not([open]) > *:not(summary) { display: revert; } /* Eigene Regel, nicht in die Liste darueber gefaltet: Kennt ein Browser ::details-content nicht, verwirft er den ganzen Regelsatz. */ details::details-content { content-visibility: visible !important; } /* Die Zusammenfassung bleibt als Beschriftung stehen, sonst steht der Inhalt ohne Ueberschrift im Dokument. Nur der Aufklapp-Pfeil geht. */ summary { list-style: none; cursor: default; font-weight: 650; } summary::marker { content: ""; } summary::-webkit-details-marker { display: none; } /* --------------------------------------------------- 5. Umbruchregeln */ /* Was zusammen gelesen werden muss, wird nicht getrennt. Eine Unterschrift ohne die Zeile darueber beweist nichts, ein Foto ohne seine Bildunterschrift auch nicht. */ .rec-sign, .rec-sign > div, .thumb, .entry, .herkunft, .siegel, .rec-seal, .protokoll li, .print-firma, .chart-card, .kpi { break-inside: avoid; page-break-inside: avoid; } /* Eine Ueberschrift allein am Seitenfuss ist ein Versprechen, das die Seite nicht mehr einloest. */ h1, h2, h3, .block h3, .print-report h3, .shift-day h3 { break-after: avoid; page-break-after: avoid; break-inside: avoid; } /* Mindestens drei Zeilen Zusammenhalt. Firefox kennt das nicht und ignoriert es still – der Rest wird dadurch nicht schlechter. */ p, li, dd, .prose, .entry-text, .rec-oath, .lp-lead { orphans: 3; widows: 3; } /* Tabellenkoepfe wiederholen sich auf jeder Folgeseite, sonst steht ab Seite zwei eine Zahlenkolonne ohne Beschriftung. */ thead { display: table-header-group; } tfoot { display: table-footer-group; } tr, th, td { break-inside: avoid; page-break-inside: avoid; } .lic-table th { border-bottom: .75pt solid #000; } .lic-table td { border-bottom: .5pt solid #999; } /* ------------------------------------------------ 6. Beweisteil rahmen */ /* Siegel und Herkunft sind die Teile, auf die es im Streitfall ankommt. Ein Rahmen in reinem Schwarz zeigt, wo sie anfangen und aufhoeren – auch auf einer Fotokopie einer Fotokopie. */ .siegel, .rec-seal, body.printing-record .rec-seal { border: 1pt solid #000; border-radius: 0; padding: 4mm; } .siegel-kopf { border-bottom: .5pt solid #000; padding-bottom: 2mm; margin-bottom: 3mm; } .siegel-summe { border-top: .5pt solid #000; padding-top: 2.5mm; margin-top: 3mm; } .herkunft { border: 1pt solid #000; border-radius: 0; padding: 4mm; margin-top: 5mm; } .herkunft-roh { border-left: .5pt solid #000; border-radius: 0; padding: 2mm 3mm; } /* Unterschriftenfeld: Linien in Schwarz, damit sie eine Unterschrift tragen und nicht nur andeuten, wo eine hingehoerte. */ .rec-sign { grid-template-columns: 1fr 1fr; gap: 0 20mm; margin-top: 18mm; } .rec-sign span { border-bottom: .75pt solid #000; height: 12mm; margin-bottom: 1.5mm; } .rec-sign div { font-size: 8pt; color: #000; } /* ------------------------------------------------------- 7. Anhaenge */ /* Aus der Reihe wird eine Spalte: Ein Flex-Kasten bricht ueber Seitengrenzen unzuverlaessig um, ein Block nicht. */ .thumbs { display: block; margin-top: 3mm; } .thumb { position: static; width: auto; max-width: 70mm; margin: 0 0 5mm; } .thumb img { width: 70mm; height: auto; max-height: 90mm; /* contain statt cover: Ein beschnittenes Beweisfoto ist kein Beweis. */ object-fit: contain; border: .5pt solid #666; border-radius: 0; background: none; } .thumb .pdf { width: 18mm; height: 18mm; border: .5pt solid #666; border-radius: 0; background: none; } /* Am Bildschirm wird der Dateiname gekuerzt, weil daneben das Bild steht. Auf Papier ist er die Bezeichnung des Beweisstuecks. */ .thumb .cap { white-space: normal; overflow: visible; text-overflow: clip; color: #333; margin-top: 1.5mm; } /* -------------------------------------------------------- 8. Verweise */ a { color: #000; text-decoration: underline; } /* Ein Link auf Papier ist wertlos, solange die Adresse fehlt. */ .prose a[href]::after, .print-report a[href]::after, .sheet-body a[href]::after, .doc-body a[href]::after, .chain-hint a[href]::after, .lp-main p a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; font-weight: 400; text-decoration: none; word-break: break-all; } /* Nicht bei Bedienwegen und nicht bei Adressen, die ohne die laufende Sitzung nichts bedeuten – die waeren nur Rauschen im Satzbild. */ nav a[href]::after, .lp-nav a[href]::after, .lp-foot-links a[href]::after, .mehr-links a[href]::after, .sidebar a[href]::after, .navbtn[href]::after, .thumb a[href]::after, a[href^="#"]::after, a[href^="/api/"]::after, a[href^="javascript:"]::after { content: "" !important; } /* ------------------------------------------------------ 9. Feinschliff */ /* Zustaende als Umriss statt als Farbfeld: Der Text traegt die Aussage, die Farbe hat sie am Bildschirm nur begleitet. */ .chip, .badge-on, .badge-off { border: .5pt solid #000; border-radius: 0; color: #000; } /* Der Nachtragsstrang bleibt sichtbar, aber ohne Einzug ins Nichts. */ .entries { margin-left: 0; padding-left: 4mm; border-left: .5pt solid #666; } .entry { padding: 1.5mm 0; } .entry + .entry { border-top: .5pt solid #ccc; } .block { margin-top: 5mm; } .sheet-body { padding: 4mm 0 0; } .print-report { padding-top: 0; } }