/* ========================================================================== assets/css/print.css — Druck-/Berichtsansicht des Archivs (FEATURES P2-7). Ladereihenfolge: tokens.css → base.css → archiv.css → print.css. base.css bringt bereits die Grundregeln für den Druck mit (Bedienelemente aus, Karten ohne Schatten); diese Datei macht daraus einen A4-Bericht: Kennzahlen, Diagramm, Heatmap, Chronik, Rekorde — ohne Navigation und ohne Flächen. Regeln dieser Datei: - Nur zwei Blöcke: eine Regel für den Schirm (.print-only bleibt verborgen) und alles Weitere in @media print. - Auf Papier gelten die Systemfarben (CanvasText/GrayText), nicht die Bildschirm-Tokens: die Datei bleibt lesbar, auch wenn das JavaScript nicht auf das Hell-Theme umgestellt hat. - Datenfarben (Heatmap, Klimastreifen, Legenden, Tagebuchpunkt) werden ausdrücklich mitgedruckt (print-color-adjust: exact) — sie sind Inhalt, keine Dekoration. - Die Skala steht als body[data-arch="tag|monat|jahr|zeitraum|klima| rekorde"] am Dokument; Monat und Jahr bekommen die Berichtsfassung. ========================================================================== */ /* Kopf und Fuß des Berichts existieren nur auf Papier. */ .print-only { display: none; } @media print { @page { size: A4 portrait; margin: 12mm; } /* ======================================================================== 1 · Bedienoberfläche entfällt ======================================================================== */ .topbar, .arch-bestand, .arch-head, .arch-avail, #arch-export, #arch-offline, .footer, .arch-keys, .note-edit, #notes-search-card, #events-filter { display: none !important; } /* Hinweise sind Bedienhilfe — außer denen, die eine Aussage tragen. */ .arch-hint { display: none; } #range-res, #day-band-note, #climate-dev-note { display: inline; } /* ======================================================================== 2 · Berichtskopf und -fuß ======================================================================== */ .print-only { display: block; } .print-head { padding-bottom: 3mm; margin-bottom: 4mm; border-bottom: 1pt solid GrayText; } .ph-brand { font-size: 8pt; color: GrayText; letter-spacing: .06em; text-transform: uppercase; } .ph-title { margin: 1mm 0; font-size: 16pt; line-height: 1.15; color: CanvasText; } .ph-sub { font-size: 8.5pt; color: GrayText; } .print-foot { margin-top: 5mm; padding-top: 2mm; border-top: 1pt solid GrayText; font-size: 7.5pt; color: GrayText; } /* ======================================================================== 3 · Ohne Flächen, mit Systemfarben ======================================================================== */ .card, .tile, .kv, .stat, .rec, .arch-months button, .heat-wrap, .note-hit, .tl-btn { background: none !important; box-shadow: none !important; } .card { padding: 0 0 3mm; border: 0; break-inside: avoid; } .arch-charts { gap: 4mm; } .arch-card-head { margin-bottom: 2mm; } /* Der Seitenrahmen kommt auf Papier von @page, nicht von der Anwendung: die Polsterung der Hülle zählt sonst zur Seitenhöhe und schiebt den Berichtsfuß auf eine zweite Seite. */ .app { max-width: none; padding: 0; } /* Auf Papier fließt der Bericht als Block. Ein Spalten-Flexcontainer wird von der Druckausgabe nicht sauber über Seiten getrennt: der letzte Abschnitt (hier der Berichtsfuß) landet dann allein auf einer zweiten Seite, obwohl auf der ersten noch zwei Zentimeter frei sind. Der Abstand kommt deshalb aus Rändern statt aus `gap`. */ .arch-shell, .arch-view, .arch-sub-view { display: block; } .arch-shell > * + *, .arch-view > * + *, .arch-sub-view > * + * { margin-top: 4mm; } body, .tile-val, .rec .v, .tl-title, .arch-table td, .note-body { color: CanvasText; } h2, .card > h2 { font-size: 10.5pt; color: CanvasText; } .tile-head, .tile-sub, .rec .k, .rec .at, .tl-when, .tl-sub, .nh-date, .nh-tags, .arch-table th, .legend, .chart-alt { color: GrayText; } .tile, .rec, .note-hit, .arch-months button { border-color: GrayText; } /* Der farbige Balken links bleibt (er trägt die Einstufung), die Rundung nicht — ohne die übrigen Kanten sähe sie wie ein Haken aus. */ .tl-btn { border: 0; border-left: 2pt solid GrayText; border-radius: 0; padding-left: 2mm; } /* Datenfarben gehören zum Inhalt und müssen aufs Papier. */ .heatmap button, .stripes, .stripes rect, .legend-swatch, .note-dot, .avail-bar > i, .tl-item[data-level] .tl-btn { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ======================================================================== 4 · Tagebuch: Text statt Formular ======================================================================== */ .note-read { display: block; font-size: 9.5pt; } .note-read:empty { display: none; } #notes-card[data-empty="1"] { display: none; } /* ======================================================================== 5 · Diagramme und Tabellen ======================================================================== */ .chart-wrap { height: 46mm; } .chart-wrap-lg { height: 58mm; } .chart-alt { font-size: 7.5pt; } .arch-table { font-size: 8pt; } .arch-table-wrap { overflow: visible; } .timeline-year { max-height: none; overflow: visible; } .tl-item { break-inside: avoid; } .tiles { break-inside: avoid; gap: 2mm; } /* Der Zeitstrahl ist auf Papier eine Liste, keine Bedienfläche: die Mindesthöhe der Schaltfläche (Fingerbreite) entfällt. */ .timeline { gap: 1.5mm; } .tl-btn { min-height: 0; gap: 3mm; padding: 0 0 0 2mm; grid-template-columns: 34mm 5mm minmax(0, 1fr); } .tl-title { font-size: 9pt; } .tl-when, .tl-sub { font-size: 7.5pt; } /* ======================================================================== 6 · Monatsbericht — eine A4-Seite Kennzahlen + Kalender-Heatmap + Chronik. Die Nebendiagramme des Monats (Min/Max je Tag, Regen je Tag, Vergleichsbalken) bleiben auf dem Schirm; auf Papier würden sie die eine Seite sprengen. ======================================================================== */ body[data-arch="monat"] #arch-sub .arch-charts, body[data-arch="monat"] #month-compare-card { display: none; } body[data-arch="monat"] .arch-kpis .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } body[data-arch="monat"] .tile { padding: 1mm 2mm; } body[data-arch="monat"] .tile-val { font-size: 11pt; } body[data-arch="monat"] .tile-head, body[data-arch="monat"] .tile-sub { font-size: 7pt; } body[data-arch="monat"] .heat-wrap { max-width: 92mm; } body[data-arch="monat"] .heatmap button .hv { font-size: 7pt; } /* Sechs Kalenderzeilen (Monatsanfang am Wochenende) plus zehn Chronik- einträge sind der enge Fall — dafür rücken die Blöcke zusammen. */ body[data-arch="monat"] .arch-shell > * + *, body[data-arch="monat"] .arch-sub-view > * + * { margin-top: 3mm; } body[data-arch="monat"] .card { padding-bottom: 2mm; } body[data-arch="monat"] .print-head { padding-bottom: 2mm; margin-bottom: 3mm; } body[data-arch="monat"] .print-foot { margin-top: 2mm; } body[data-arch="monat"] .timeline { gap: 1mm; } body[data-arch="monat"] .tl-sub { font-size: 7pt; } /* Deckel: mehr als acht Chronikeinträge passen neben sechs Kalenderzeilen nicht mehr auf die eine Seite (die Zahl steht auch in archiv.js als `printCap`). Die Zahl der ausgeblendeten Einträge steht im Bericht, nichts verschwindet stillschweigend. */ body[data-arch="monat"] #events-month > .tl-item:nth-child(n+9) { display: none; } body[data-arch="monat"] #events-month[data-more]::after { content: "… und " attr(data-more) " weitere Einträge — vollständig am Bildschirm."; display: block; padding-top: 1mm; font-size: 7.5pt; color: GrayText; } /* ======================================================================== 7 · Jahresbericht — Seite 1 Kennzahlen und Klimastreifen, ab Seite 2 Monate, Windrose, Rekorde und Chronik ======================================================================== */ body[data-arch="jahr"] #arch-sub { break-before: page; } body[data-arch="jahr"] .stripes { --stripes-h: 22mm; } body[data-arch="jahr"] .arch-months { grid-template-columns: repeat(4, minmax(0, 1fr)); } body[data-arch="jahr"] .windrose { max-width: 80mm; } /* ======================================================================== 8 · Übrige Skalen ======================================================================== */ body[data-arch="tag"] .arch-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-arch="rekorde"] .records { grid-template-columns: repeat(4, minmax(0, 1fr)); } body[data-arch="klima"] .arch-table { font-size: 7.5pt; } }