From 7154edde86033e02f162100455d9e38175cc05d4 Mon Sep 17 00:00:00 2001
From: Kenearos <kenearos@googlemail.com>
Date: Tue, 12 May 2026 18:20:11 +0200
Subject: [PATCH] feat(image-import): wire open-image-import-btn + card-header
 layout

---
 app.js     | 12 ++++++++++++
 index.html |  5 ++++-
 styles.css | 14 ++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/app.js b/app.js
index 0247623..231d218 100644
--- a/app.js
+++ b/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());
 
diff --git a/index.html b/index.html
index d3e1d34..3d111d2 100644
--- a/index.html
+++ b/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">
diff --git a/styles.css b/styles.css
index 86c29b8..e268e00 100644
--- a/styles.css
+++ b/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;