/* ═════════════════════════════════════════════════════════════════════
FBG-Portal – Kanonisches Druck-Layout (.pv)
─────────────────────────────────────────────────────────────────────
EINE Quelle für ALLE Ausdrucke des Portals: Rechnungen, Journal,
Kassen-/Bankbuch, EÜR/Jahresabschluss, Beitragslisten/-bescheide,
Mahnungen, Vorstands-/JHV-Protokolle, Aufträge, Baumkontrollen.
Einbinden auf jeder Seite mit Ausdruck, im NACH dem Seiten-CSS:
Vorher lag dieser Block 6× kopiert in den Seiten und driftete
auseinander (px/pt/mm gemischt, unterschiedliche pvHead-Varianten).
NICHT wieder je Seite eigene Druckstile erfinden – hier ergänzen.
Farben/Typografie folgen verbindlich dem Corporate Design
(vorlagen/ForstDesk-Corporate-Design.pdf, S. 6–7):
• Text nie in reinem Schwarz → Text 1/2/3
• Überschriften mit negativem Letter-Spacing (−0,02 … −0,03em)
• Eyebrow: Versalien, Primärgrün, weites Letter-Spacing
Einheiten: Typografie in pt, Geometrie/Abstände in mm (druck-nativ) –
NICHT wieder px im Druck verwenden.
═════════════════════════════════════════════════════════════════════ */
.pv {
/* Corporate-Design-Tokens (bewusst lokal: der Druck ist immer hell,
unabhängig vom Dark-Mode des Portals). */
--pv-tx1: #10241a; /* Haupttext / Überschriften */
--pv-tx2: #45564c; /* Fließtext */
--pv-tx3: #8a998f; /* Meta / Sekundär */
--pv-green: #16a34a; /* Primärgrün */
--pv-green-d: #15803d;
--pv-green-dd: #14532d;
--pv-mint: #eaf5ec; /* Flächen (Tabellenkopf, Summenzeilen) */
--pv-line: #d7e6db; /* Linien im Grünraum */
--pv-line-soft: #e8eeea;
font-family: 'Inter', Arial, sans-serif;
font-size: 10pt;
line-height: 1.5;
color: var(--pv-tx2);
background: #fff;
/* Mint-Flächen und Grünlinien sollen wirklich mitdrucken. */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* ── Kopf ────────────────────────────────────────────────────────────── */
.pv-head {
display: flex;
align-items: center;
gap: 4mm;
border-bottom: 1.5pt solid var(--pv-green);
padding-bottom: 3.5mm;
margin-bottom: 5mm;
}
.pv-head img { height: 15mm; width: 15mm; object-fit: contain; flex-shrink: 0 }
.pv-org {
font-size: 13pt; font-weight: 800; color: var(--pv-green-dd);
letter-spacing: -.02em; line-height: 1.2;
}
.pv-sub {
font-size: 7.5pt; font-weight: 600; color: var(--pv-tx3);
text-transform: uppercase; letter-spacing: .08em; margin-top: .6mm;
}
.pv-head-right { margin-left: auto; text-align: right; flex-shrink: 0 }
/* Eyebrow: Versalien, Primärgrün, weit gesperrt (CD S. 7). */
.pv-eyebrow {
font-size: 7pt; font-weight: 700; color: var(--pv-green);
text-transform: uppercase; letter-spacing: .12em;
}
.pv-head-right .pv-date { font-size: 9pt; font-weight: 600; color: var(--pv-tx2) }
/* ── Titel ───────────────────────────────────────────────────────────── */
.pv-title {
font-size: 17pt; font-weight: 900; color: var(--pv-tx1);
letter-spacing: -.025em; line-height: 1.15; margin: 0 0 1mm;
}
.pv-meta { font-size: 9pt; color: var(--pv-tx3); margin-bottom: 4mm }
/* Dokumentart im rechten Kopfblock (RECHNUNG, MAHNUNG, BEITRAGSBESCHEID). */
.pv-doctype {
font-size: 18pt; font-weight: 900; color: var(--pv-green-dd);
letter-spacing: -.03em; line-height: 1.1;
}
.pv-docno { font-size: 9pt; color: var(--pv-tx3); margin-top: .8mm; font-weight: 500 }
/* Belegnummern/IBAN: CD erlaubt NUR Inter (S. 7) – deshalb kein Courier
mehr, sondern Inter mit Tabellenziffern und leichter Sperrung. */
.pv-mono {
font-variant-numeric: tabular-nums; letter-spacing: .02em;
font-weight: 600; color: var(--pv-tx1);
/* Belegnummern/IBAN nie mitten in der Zahl umbrechen. */
white-space: nowrap;
}
/* ── Mehrspaltiger Dokumentfuß (Absender/Bank/Steuer) ────────────────── */
.pv-foot-cols {
display: flex; justify-content: space-between; gap: 8mm;
margin-top: 12mm; border-top: .5pt solid var(--pv-line-soft);
padding-top: 3mm; font-size: 8pt; color: var(--pv-tx3); line-height: 1.6;
break-inside: avoid; page-break-inside: avoid;
}
.pv-foot-cols b { display: block; color: var(--pv-tx1); font-weight: 700; margin-bottom: .5mm }
/* ── Abschnittsüberschrift ───────────────────────────────────────────── */
.pv h2, .pv h3 {
font-size: 8pt; font-weight: 700; color: var(--pv-green-d);
text-transform: uppercase; letter-spacing: .1em;
border-bottom: .5pt solid var(--pv-line);
padding-bottom: 1.2mm;
margin: 6mm 0 2.5mm;
break-after: avoid; page-break-after: avoid;
}
.pv h2:first-child, .pv h3:first-child { margin-top: 0 }
/* ── Tabellen ────────────────────────────────────────────────────────── */
.pv table { width: 100%; border-collapse: collapse; margin: 1.5mm 0 3mm; font-size: 9pt }
.pv th, .pv td {
border: .5pt solid var(--pv-line);
padding: 1.8mm 2.2mm; text-align: left; vertical-align: top;
}
.pv th {
background: var(--pv-mint); color: var(--pv-green-dd);
font-weight: 700; font-size: 8pt;
text-transform: uppercase; letter-spacing: .05em;
}
.pv td { color: var(--pv-tx2) }
.pv td.num, .pv th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }
.pv tfoot td, .pv tfoot th {
background: var(--pv-mint); font-weight: 700; color: var(--pv-tx1);
}
.pv thead { display: table-header-group } /* Kopf auf Folgeseiten wiederholen */
.pv tr { break-inside: avoid; page-break-inside: avoid }
/* ── Anschriftenfeld + Eckdaten nebeneinander ────────────────────────── */
/* ACHTUNG Reihenfolge: dieser Block MUSS nach `.pv table/th/td` stehen.
Sonst gewinnen bei gleicher Spezifität die generischen Regeln und die
Eckdaten-/Summentabelle bekommt width:100% samt Zellrahmen. */
.pv-doc-row { display: flex; justify-content: space-between; gap: 10mm; align-items: flex-start; margin-top: 6mm }
.pv-doc-addr { flex: 1 1 auto; min-width: 0 }
.pv-absender {
font-size: 7pt; color: var(--pv-tx3);
border-bottom: .5pt solid var(--pv-line); display: inline-block; padding-bottom: .8mm;
}
.pv-addr { margin-top: 4mm; font-size: 10.5pt; line-height: 1.55; color: var(--pv-tx2) }
.pv-addr b { display: block; font-size: 11pt; color: var(--pv-tx1) }
/* Eckdaten: rechts, nur so breit wie nötig – NICHT width:100%. */
.pv table.pv-facts { width: auto; flex: 0 0 auto; font-size: 9pt; margin: 0 }
.pv .pv-facts td { border: 0; padding: 1mm 0; vertical-align: top }
.pv .pv-facts td:first-child { color: var(--pv-tx3); padding-right: 5mm; white-space: nowrap }
.pv .pv-facts td:last-child { text-align: right; font-weight: 600; color: var(--pv-tx1); white-space: nowrap }
/* ── Summenblock ─────────────────────────────────────────────────────── */
.pv table.pv-sum { width: auto; margin: 3mm 0 0 auto; font-size: 10pt; min-width: 78mm }
.pv .pv-sum td { border: 0; padding: 1.4mm 0; color: var(--pv-tx2) }
.pv .pv-sum td:last-child { text-align: right; padding-left: 9mm; font-variant-numeric: tabular-nums; white-space: nowrap }
.pv .pv-sum .pv-total td {
border-top: 1.5pt solid var(--pv-green); padding-top: 2.4mm;
font-weight: 800; font-size: 12pt; color: var(--pv-green-dd);
}
/* ── Beschreibungsliste (Stammdaten/Eckdaten) ────────────────────────── */
.pv .kv {
display: grid; grid-template-columns: 45mm 1fr; gap: 1mm 4mm;
font-size: 9.5pt; margin: 1mm 0 3mm;
}
.pv .kv dt { font-weight: 700; color: var(--pv-tx1); margin: 0 }
.pv .kv dd { margin: 0; color: var(--pv-tx2) }
/* ── Freitext ────────────────────────────────────────────────────────── */
.pv .txt { white-space: pre-wrap; font-size: 9.5pt; color: var(--pv-tx2); margin: .5mm 0 3mm }
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm }
.pv b, .pv strong { color: var(--pv-tx1); font-weight: 700 }
/* ── Hinweisbox (Rechtshinweise, Zahlungshinweis) ────────────────────── */
.pv-note {
background: var(--pv-mint); border-left: 1.5pt solid var(--pv-green);
border-radius: 1.5mm; padding: 2.5mm 3mm; margin: 3mm 0;
font-size: 9pt; color: var(--pv-tx2);
}
/* ── Unterschriften ──────────────────────────────────────────────────── */
/* Flex statt Grid: es gibt Dokumente mit ZWEI (Protokolle) und mit DREI
Unterschriftsfeldern (Jahresrechnung: Vorsitz/Kasse/Kassenpruefung).
Ein festes 2-Spalten-Grid wuerde das dritte Feld umbrechen. */
.pv-sign {
display: flex; gap: 14mm;
margin-top: 14mm; break-inside: avoid; page-break-inside: avoid;
}
.pv-sign > div, .pv-line {
flex: 1; border-top: .5pt solid var(--pv-tx1); padding-top: 1.5mm;
font-size: 8pt; color: var(--pv-tx3);
}
/* ── Fuß ─────────────────────────────────────────────────────────────── */
.pv-foot {
margin-top: 8mm; padding-top: 2mm;
border-top: .5pt solid var(--pv-line-soft);
font-size: 7.5pt; color: var(--pv-tx3); line-height: 1.45;
}
/* ── Fotos (Baumkontrollen) ──────────────────────────────────────────── */
.pv-photo {
width: 46%; margin: 1%; max-height: 65mm; object-fit: cover;
border: .5pt solid var(--pv-line); border-radius: 1.5mm;
}
/* ── Druckmodus ──────────────────────────────────────────────────────── */
/* Der Druckbehälter ist am Bildschirm immer unsichtbar; er wird erst durch
fbgPrint.doPrint() gefüllt (Ausnahme: Rechnungsstellung.html zeigt ihre
Vorschau bewusst am Bildschirm und regelt das selbst). */
#print-view { display: none }
@media print {
@page { margin: 16mm }
html, body { background: #fff !important }
/* WICHTIG: das Druckziel MUSS ein direktes Kind von sein.
Liegt es im Layout verschachtelt, blendet diese Regel seinen eigenen
Vorfahren aus → es würden leere Seiten gedruckt. Beim Anlegen neuer
Druckseiten also direkt vor setzen.
Regelfall ist #print-view. Seiten, die stattdessen einen eigenen
Behälter drucken (auftraege.html druckt sein Vorschau-Modal), markieren
diesen mit .pv-print-root – sonst würde er hier mit ausgeblendet. */
body.printing > *:not(#print-view):not(.pv-print-root) { display: none !important }
body.printing #print-view { display: block !important }
.pv-no-print { display: none !important }
}