Redesign print/PDF export to match official BergVOLT invoice branding

Neuer Druck-Header mit dem Firmenlogo und der cyanen Diagonalfläche wie auf
der Rechnung, Adress-/Infoblock im gleichen Tabellenstil, Materialtabelle mit
durchgezogenen Rahmenlinien statt Karten-Optik, Firmenfußzeile (Adresse,
Bank, Firmenbuch, Kontakt) am Ende. Die interaktiven Karten (Baustelle-Formular,
Kabelrechner, Manuell-Eintrag) bleiben beim Drucken ausgeblendet, nur die
neuen Print-only-Blöcke werden sichtbar.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

client/src/pages/ProjektDetail.tsx

@@ -7,6 +7,7 @@ import KabelOptions from '../components/KabelOptions';
 
 const fmt1 = (v: number | string) => (Math.round((parseFloat(String(v)) || 0) * 10) / 10).toFixed(1);
 const num1 = (v: number | string) => Math.round((parseFloat(String(v)) || 0) * 10) / 10;
+const ddDate = (s: string) => { if (!s) return '—'; const [y, m, d] = s.split('-'); return `${d}.${m}.${y}`; };
 
 export default function ProjektDetail() {
   const { id } = useParams<{ id: string }>();
@@ -204,10 +205,30 @@ export default function ProjektDetail() {
 
   return (
     <div>
-      <div className="print-header">
+      <div className="print-doc">
-        <h2 style={{ fontSize: 18, marginBottom: 4 }}>Materialschein – BergVOLT Elektrotechnik – {titel}</h2>
+        <div className="pbanner">
-        <p style={{ fontSize: 12, color: '#555' }}>Datum: {datum || '—'} | Monteur: {monteur || '—'} | Auftraggeber: {auftraggeber || '—'}</p>
+          <div className="plogo-wrap">
-        <hr style={{ margin: '8px 0', borderColor: '#ddd' }} />
+            <div className="plogo">Berg<span>VOLT</span></div>
+            <div className="plogo-sub">ELEKTROTECHNIK</div>
+          </div>
+        </div>
+        <div className="ptop">
+          <div className="paddr">
+            <div className="lbl">Baustelle / Projekt</div>
+            <div className="name">{titel || '—'}</div>
+            {auftraggeber && <div>Auftraggeber: {auftraggeber}</div>}
+            {notiz && <div className="pnote">{notiz}</div>}
+          </div>
+          <table className="pinfo">
+            <tbody>
+              <tr><td colSpan={2}>Materialschein</td></tr>
+              <tr><td>Datum</td><td>{ddDate(datum)}</td></tr>
+              <tr><td>Monteur</td><td>{monteur || '—'}</td></tr>
+              <tr><td>Status</td><td>{projekt.status}</td></tr>
+            </tbody>
+          </table>
+        </div>
+        <div className="psubject">Materialverbrauch – {titel || '(ohne Namen)'}</div>
       </div>
 
       <div className="detail-back">
@@ -218,7 +239,7 @@ export default function ProjektDetail() {
         </button>
       </div>
 
-      <div className="card">
+      <div className="card baustelle-card">
         <div className="card-title">Baustelle / Projekt</div>
         <div className="grid-2">
           <label className="field">Projekt / Baustelle
@@ -380,6 +401,24 @@ export default function ProjektDetail() {
             {matList.length} Position(en) eingetragen
           </div>
         )}
+
+        {matList.length > 0 && (
+          <div className="psum-line">
+            <table><tbody><tr><td>Positionen gesamt</td><td>{matList.length}</td></tr></tbody></table>
+          </div>
+        )}
+
+        <div className="pfoot-note">
+          Materialschein erstellt über die BergVOLT Materialschein-App. Bei Rückfragen wende dich bitte
+          an den zuständigen Monteur.
+        </div>
+      </div>
+
+      <div className="pfooter">
+        <div><b>BergVOLT GmbH</b>Ludescherberg 26<br />AT-6713 Ludesch</div>
+        <div><b>Bank</b>Raiffeisenbank im Walgau eGen<br />IBAN: AT28 3745 8000 0106 0144</div>
+        <div><b>Firmenbuch</b>Feldkirch<br />FN: 595938 f</div>
+        <div><b>Kontakt</b>Tel: +43 699 17241249<br />office@bergvolt.at</div>
       </div>
 
       <div className="print-bar">

client/src/styles.css

@@ -153,18 +153,56 @@ table.reftab tr:hover td{background:rgba(0,200,216,.06);cursor:pointer}
 @keyframes sp{to{transform:rotate(360deg)}}
 
 .print-bar{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(90deg,#081420,#0c1c30);border-top:1px solid var(--bor);padding:14px 20px;display:flex;gap:10px;justify-content:center;box-shadow:0 -2px 20px rgba(0,0,0,.4);z-index:99}
-.print-header{display:none}
+
+/* ── Druck-Layout: BergVOLT-Briefdesign, angelehnt an die offizielle Rechnung ── */
+.print-doc{display:none}
+.pbanner{position:relative;background:#0a0a0a;height:90px;overflow:hidden;display:flex;align-items:center;justify-content:flex-end;padding:0 30px}
+.pbanner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:62%;background:var(--cyan);clip-path:polygon(0 0,46% 0,14% 100%,0 100%)}
+.pbanner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--cyan)}
+.plogo-wrap{position:relative;z-index:1;text-align:right}
+.plogo{color:#fff;font-size:28px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
+.plogo span{color:var(--cyan)}
+.plogo-sub{color:var(--cyan);font-size:8px;letter-spacing:5px;font-weight:700;margin-top:2px}
+
+.ptop{display:flex;justify-content:space-between;gap:24px;padding:24px 4px 20px}
+.paddr{font-size:12px;line-height:1.6;color:#000}
+.paddr .lbl{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
+.paddr .name{font-weight:700;font-size:13px}
+.paddr .pnote{color:#555;margin-top:4px}
+table.pinfo{border:1px solid #ccc;border-collapse:collapse;min-width:250px;height:fit-content}
+table.pinfo td{padding:5px 11px;border-bottom:1px solid #e2e2e2;font-size:11px;color:#000}
+table.pinfo tr:first-child td{background:#eee;font-weight:800;font-size:13px;border-bottom:1px solid #ccc}
+table.pinfo tr:last-child td{border-bottom:none}
+table.pinfo td:first-child{color:#666}
+table.pinfo td:last-child{text-align:right;font-weight:600}
+
+.psubject{font-weight:700;margin:0 4px 14px;font-size:13px;color:#000}
+
+.psum-line{display:flex;justify-content:flex-end;margin-top:6px}
+.psum-line table{border-collapse:collapse;min-width:220px}
+.psum-line td{padding:8px 12px;font-size:12px;border-top:1.5px solid #1a1a1a;background:#eee;font-weight:800;color:#000}
+.psum-line td:last-child{text-align:right}
+
+.pfoot-note{margin:34px 4px 0;font-size:10.5px;color:#666;line-height:1.6}
+.pfooter{display:none}
 
 @media print{
-  header,.tabs,.print-bar,.detail-back,.kab-card,.manual-card,.del-btn,.qty-input,.notiz-input,
+  header,.tabs,.print-bar,.detail-back,.kab-card,.manual-card,.baustelle-card,.card-hint,.del-btn,.qty-input,.notiz-input,
   .chk-col,.retour-panel,.btn-retour-toggle{display:none!important}
   body{background:#fff;color:#000}
-  .card{box-shadow:none;border:1px solid #ccc;background:#fff;page-break-inside:avoid}
+  main{max-width:none;padding:0;margin:0}
-  .print-header{display:block!important;margin-bottom:12px}
+  .card{box-shadow:none;border:none;background:#fff;padding:0 4px;page-break-inside:avoid}
-  .table-wrap{border:none;overflow:visible}
+  .card-title{display:none}
-  .mat-table{min-width:0}
+
-  .mat-table th{background:#f0f0f0;color:#000}
+  .print-doc{display:block}
-  .mat-table td{color:#000;border-bottom:1px solid #ddd}
+  .pfooter{display:flex;background:#0a0a0a;color:#fff;padding:14px 20px;justify-content:space-between;gap:16px;font-size:9.5px;line-height:1.7;margin-top:30px;position:relative}
+  .pfooter::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--cyan)}
+  .pfooter b{display:block;color:var(--cyan);font-size:9px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px}
+
+  .table-wrap{border:none;overflow:visible;margin:0 4px}
+  .mat-table{min-width:0;width:100%}
+  .mat-table th{background:#fff;color:#000;border-top:1.5px solid #1a1a1a;border-bottom:1.5px solid #1a1a1a;font-size:10px;padding:7px 8px}
+  .mat-table td{color:#000;border-bottom:1px solid #e2e2e2;padding:7px 8px;font-size:11.5px}
   .art-cell,.pos-nr{color:#555}
   .print-only{display:inline}
 }