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">
-        <h2 style={{ fontSize: 18, marginBottom: 4 }}>Materialschein – BergVOLT Elektrotechnik – {titel}</h2>
-        <p style={{ fontSize: 12, color: '#555' }}>Datum: {datum || '—'} | Monteur: {monteur || '—'} | Auftraggeber: {auftraggeber || '—'}</p>
-        <hr style={{ margin: '8px 0', borderColor: '#ddd' }} />
+      <div className="print-doc">
+        <div className="pbanner">
+          <div className="plogo-wrap">
+            <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">