/* Print view (Seitenansicht) in the kbp corporate design. Colors are derived from the kbp logo and presentation material; change them only here. All selectors are scoped to .print-view. The @page rules (format, margins, page numbers) are injected by the print page because they need project data. */ .print-view { --pd-blue: #476088; --pd-lilac: #9198c4; --pd-line: #d6dae5; --pd-tint: #f5f6fa; --pd-text: #2b2b2b; --pd-muted: #6b7280; --pd-accent: #c9782a; --pd-font: Arial, "Helvetica Neue", Helvetica, sans-serif; --pd-landscape-width: 297mm; --pd-landscape-height: 210mm; min-height: 100vh; background: #e7e9ef; color: var(--pd-text); font-family: var(--pd-font); color-scheme: light; } .print-view.pd-a3 { --pd-landscape-width: 420mm; --pd-landscape-height: 297mm; } .pd-toolbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--pd-line); font-size: 14px; } .pd-toolbar-title { margin-right: auto; color: var(--pd-blue); font-weight: bold; } .pd-toolbar .pd-toolbar-message { color: var(--pd-muted); font-size: 13px; } .pd-toolbar .pd-toolbar-error { color: #b04035; font-size: 13px; } .pd-pages { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 16px 48px; overflow-x: auto; } .pd-sheet { position: relative; flex: none; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); font-size: 9pt; line-height: 1.3; } .pd-portrait { width: 210mm; min-height: 297mm; padding: 18mm 18mm 22mm; page: lb-portrait; } .pd-landscape { width: var(--pd-landscape-width); min-height: var(--pd-landscape-height); padding: 12mm 12mm 18mm; page: lb-landscape; } .pd-a3 .pd-landscape { font-size: 10pt; } .print-view table { border-collapse: collapse; width: 100%; } .print-view caption { caption-side: top; padding: 0 0 1.5mm; color: var(--pd-blue); font-size: 10pt; font-weight: bold; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; } .print-view sub { font-size: 0.75em; } .pd-r { text-align: right !important; } .pd-placeholder { color: var(--pd-accent); font-style: italic; } .pd-open { color: var(--pd-accent); font-weight: bold; } .pd-multiline { white-space: pre-line; } .pd-logo { display: block; max-width: 100%; object-fit: contain; } .pd-logo-missing { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--pd-line); color: var(--pd-muted); font-size: 8pt; } /* Cover */ .pd-cover-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--pd-blue); padding-bottom: 6mm; } .pd-cover-kicker { margin-top: 3mm; color: var(--pd-muted); font-size: 10pt; letter-spacing: 0.04em; text-transform: uppercase; } .pd-cover-logo { height: 15mm; width: auto; max-width: 60mm; } span.pd-cover-logo { width: 40mm; } .pd-cover-title { margin: 14mm 0 10mm; } .pd-cover-title h1 { margin: 0; color: var(--pd-blue); font-size: 30pt; font-weight: bold; } .pd-cover-title p { margin: 2mm 0 0; color: var(--pd-muted); font-size: 13pt; } .pd-kv { margin-bottom: 7mm; } .pd-kv th, .pd-kv td { border: 1px solid var(--pd-line); padding: 2mm 3mm; font-size: 9.5pt; text-align: left; vertical-align: top; } .pd-kv th { width: 42mm; background: var(--pd-tint); color: var(--pd-muted); font-weight: normal; } .pd-cover-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; } .pd-cover-cols .pd-kv th { width: 30mm; } .pd-block { margin-bottom: 7mm; } .pd-col-index { width: 14mm; } /* Generic grid tables */ .pd-grid th, .pd-grid td { border: 1px solid var(--pd-line); padding: 1.3mm 2mm; text-align: left; vertical-align: top; } .pd-grid > thead > tr > th:not(.pd-tb-cell) { background: var(--pd-blue); border-color: var(--pd-blue); color: #fff; font-weight: bold; vertical-align: bottom; } /* Footer (screen only; printed pages use @page margin boxes) */ .pd-sheet-footer { position: absolute; left: 12mm; right: 12mm; bottom: 7mm; display: flex; justify-content: space-between; border-top: 1px solid var(--pd-line); padding-top: 2mm; color: var(--pd-muted); font-size: 7.5pt; } .pd-portrait .pd-sheet-footer { left: 18mm; right: 18mm; bottom: 10mm; } /* Title block */ .pd-grid th.pd-tb-cell { border: none; padding: 0 0 4mm; background: none; font-weight: normal; } .pd-titleblock { display: grid; grid-template-columns: 28mm 1fr auto auto; border: 1.5px solid var(--pd-blue); margin-bottom: 4mm; background: #fff; font-size: 9pt; } .pd-grid .pd-titleblock { margin-bottom: 0; } .pd-titleblock > * { padding: 2.5mm 3.5mm; border-left: 1px solid var(--pd-line); } .pd-titleblock > :first-child { border-left: none; } .pd-tb-logo { display: flex; align-items: center; justify-content: center; height: 17mm; } .pd-tb-logo-image { max-height: 10mm; } span.pd-tb-logo-image { width: 100%; height: 10mm; } .pd-tb-kicker { color: var(--pd-muted); font-size: 7.5pt; letter-spacing: 0.05em; text-transform: uppercase; } .pd-tb-title { display: flex; align-items: baseline; gap: 4mm; margin-top: 1mm; } .pd-tb-number { color: var(--pd-blue); font-size: 18pt; font-weight: bold; } .pd-tb-name { font-size: 14pt; font-weight: bold; } .pd-tb-grid { display: grid; grid-template-columns: auto auto; gap: 0.8mm 4mm; align-content: center; margin: 0; font-size: 8pt; } .pd-tb-grid div { display: contents; } .pd-tb-grid dt { color: var(--pd-muted); font-weight: normal; } .pd-tb-grid dd { margin: 0; font-weight: bold; } .pd-tb-meta { background: var(--pd-tint); } /* Board plan table */ .pd-plan { font-size: 7.6pt; line-height: 1.2; } .pd-a3 .pd-plan { font-size: 9pt; } .pd-plan th, .pd-plan td { padding: 0.75mm 1.6mm; } .pd-plan td.pd-bmk { color: var(--pd-blue); font-weight: bold; white-space: nowrap; } .pd-plan tr.pd-group td { background: var(--pd-tint); border-top: 1.5px solid var(--pd-lilac); font-weight: bold; } .pd-plan tr.pd-component td, .pd-plan tr.pd-component td.pd-bmk, .pd-plan tr.pd-device td { color: var(--pd-muted); } .pd-plan tr.pd-device td:nth-child(2) { padding-left: 6mm; } .pd-plan tr.pd-reserve td { color: var(--pd-muted); font-style: italic; } .pd-plan tr.pd-subtotal td { border-bottom: 1.5px solid var(--pd-line); font-weight: bold; } .pd-plan .pd-sub { color: var(--pd-muted); font-size: 0.9em; } .pd-plan tfoot td { background: var(--pd-tint); font-weight: bold; } .pd-plan tfoot tr.pd-grand td { background: var(--pd-blue); border-color: var(--pd-blue); color: #fff; } .pd-plan tr { break-inside: avoid; } /* Overview */ .pd-overview { display: grid; grid-template-columns: 62mm 1fr; gap: 6mm; } .pd-a3 .pd-overview { grid-template-columns: 90mm 1fr; } .pd-structure h2 { margin: 0 0 3mm; color: var(--pd-blue); font-size: 10pt; letter-spacing: 0.04em; text-transform: uppercase; } .pd-tree, .pd-tree ul { list-style: none; margin: 0; padding: 0; } .pd-tree ul { margin-left: 5mm; padding-left: 4mm; border-left: 1.5px solid var(--pd-lilac); } .pd-tree li { position: relative; margin: 2.5mm 0; } .pd-tree ul > li::before { content: ""; position: absolute; left: -4mm; top: 5mm; width: 4mm; border-top: 1.5px solid var(--pd-lilac); } .pd-node { display: grid; gap: 0.3mm; padding: 1.5mm 2.5mm; border: 1px solid var(--pd-line); border-left: 3px solid var(--pd-blue); background: #fff; } .pd-node.pd-feed { border-left-color: var(--pd-accent); } .pd-node span { color: var(--pd-muted); font-size: 8pt; } .pd-node em { color: var(--pd-blue); font-size: 8.5pt; font-style: normal; font-weight: bold; } .pd-note { margin: 4mm 0 1mm; padding: 2.5mm 3mm; border-left: 3px solid var(--pd-accent); background: #fbf4ec; font-size: 8pt; } .pd-legend { margin: 1mm 0 0; color: var(--pd-muted); font-size: 7.5pt; } @media print { html, body, .print-view { background: #fff !important; } /* The dark theme sets color-scheme: dark on the root; Chrome then paints the page margins dark. Printing always uses the light scheme. */ html:has(.print-view) { color-scheme: light !important; } .pd-toolbar, .pd-sheet-footer { display: none !important; } .pd-pages { display: block; padding: 0; overflow: visible; } .pd-sheet { width: auto; min-height: 0; padding: 0; box-shadow: none; break-after: page; } .pd-sheet:last-child { break-after: auto; } .print-view * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }