Fix PDF download by generating clean HTML for export

src/components/Tutorials.astro

@@ -8,27 +8,60 @@
 function downloadPDF(elementId, title) {
     const element = document.getElementById(elementId);
     
-    // Optionen für html2pdf
+    // Extrahiere Daten aus dem DOM
+    const titleText = element.querySelector('h3').innerText;
+    const descText = element.querySelector('p').innerText;
+    const steps = [];
+    
+    element.querySelectorAll('.flex.gap-4').forEach(stepDiv => {
+        const num = stepDiv.querySelector('.font-mono').innerText;
+        const h4 = stepDiv.querySelector('h4').innerText;
+        const p = stepDiv.querySelector('p').innerText;
+        steps.push({ num, h4, p });
+    });
+    
+    // Generiere ein sauberes, druckbares HTML-Dokument (Weißer Hintergrund, dunkler Text)
+    const html = `
+        <div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #1c1917; padding: 50px; max-width: 800px; margin: 0 auto; background-color: #ffffff;">
+            <div style="text-align: center; margin-bottom: 40px; border-bottom: 2px solid #10b981; padding-bottom: 20px;">
+                <span style="color: #10b981; font-size: 12px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase;">GEBRÜDER BRABETZ — PRAXIS-TUTORIAL</span>
+                <h1 style="color: #0c0a09; font-size: 32px; margin: 10px 0; font-family: serif; font-weight: bold;">${titleText}</h1>
+                <p style="color: #78716c; font-size: 14px; max-width: 600px; margin: 0 auto;">${descText}</p>
+            </div>
+            
+            <div style="margin-top: 30px;">
+                ${steps.map(step => `
+                    <div style="display: flex; gap: 20px; margin-bottom: 30px; align-items: flex-start;">
+                        <div style="flex-shrink: 0; width: 36px; height: 36px; background: #0c0a09; color: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: monospace; font-size: 16px;">${step.num}</div>
+                        <div style="flex: 1;">
+                            <h4 style="margin: 0; color: #0c0a09; font-size: 18px; font-weight: bold;">${step.h4}</h4>
+                            <p style="margin: 6px 0 0 0; color: #444; font-size: 14px; line-height: 1.6;">${step.p}</p>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+            
+            <div style="margin-top: 60px; padding-top: 20px; border-top: 1px solid #e7e5e4; text-align: center; color: #a8a29e; font-size: 11px;">
+                © 2026 Gebrüder Brabetz Garten- & Landschaftsbau. Alle Rechte vorbehalten.<br>
+                Dieses Dokument wurde automatisch generiert. Besuchen Sie uns auf brabetz.de
+            </div>
+        </div>
+    `;
+    
     const opt = {
-        margin:       15,
+        margin:       0,
         filename:     `Tutorial-${title}.pdf`,
         image:        { type: 'jpeg', quality: 0.98 },
         html2canvas:  { 
             scale: 2, 
-            backgroundColor: '#0c0a09', // Stone 950 (Dunkler Hintergrund für Premium-Look)
+            backgroundColor: '#ffffff',
             useCORS: true
         },
         jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
     };
     
-    // Klonen um Padding für das PDF hinzuzufügen
-    const clone = element.cloneNode(true);
-    clone.style.padding = "20px";
-    clone.style.borderRadius = "0";
-    clone.style.border = "none";
-    
     // PDF generieren
-    html2pdf().set(opt).from(clone).save();
+    html2pdf().set(opt).from(html).save();
 }
 </script>