feat(image-import): wire open-image-import-btn + card-header layout

app.js

@@ -46,6 +46,18 @@ class DienstplanApp {
         document.getElementById('month-select').addEventListener('change', () => this.loadDutiesForSelectedEmployee());
         document.getElementById('year-select').addEventListener('change', () => this.loadDutiesForSelectedEmployee());
 
+        // Bild-Import (Feature A)
+        const imageImportBtn = document.getElementById('open-image-import-btn');
+        if (imageImportBtn) {
+            imageImportBtn.addEventListener('click', () => {
+                if (window.imageImporter) {
+                    window.imageImporter.openImportDialog();
+                } else {
+                    this.showToast('Bild-Import nicht verfuegbar.', 'error');
+                }
+            });
+        }
+
         // Calculation
         document.getElementById('calculate-btn').addEventListener('click', () => this.calculateBonuses());
 

index.html

@@ -32,7 +32,10 @@
         <!-- Tab: Dienste eintragen -->
         <div id="tab-duties" class="tab-content active">
             <div class="card">
-                <h2>Dienste eintragen</h2>
+                <div class="card-header">
+                    <h2>Dienste eintragen</h2>
+                    <button id="open-image-import-btn" class="btn btn-secondary">📷 Bild importieren</button>
+                </div>
 
                 <!-- Month Selection -->
                 <div class="form-group">

styles.css

@@ -112,6 +112,20 @@ header h1 {
     font-size: 1.2rem;
 }
 
+/* Card header (used by Bild-Import button) */
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.card-header h2 {
+    margin-bottom: 0;
+}
+
 /* Form Elements */
 .form-group {
     margin-bottom: 20px;