Fix: Alle inline onclick-Handler durch programmatische Event-Listener ersetzt

- Bearbeiten- und Löschen-Buttons in Tee-Karten verwenden jetzt data-Attributes und Event-Listener
- 'Erste Tee hinzufügen'-Button verwendet jetzt Event-Listener
- setupTeaCardEventListeners() Methode hinzugefügt
- Keine Abhängigkeit mehr von globalem app-Scope in HTML

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>

app.js

@@ -1321,9 +1321,14 @@ class TeeTracker {
                     <div class="empty-state-icon">🍃</div>
                     <div class="empty-state-text">Keine Tee-Sorten vorhanden</div>
                     <div class="empty-state-subtext">Füge deine erste Tee-Sorte hinzu!</div>
-                    <button class="btn btn-primary" onclick="app.openTeaModal()">➕ Tee hinzufügen</button>
+                    <button class="btn btn-primary add-first-tea-btn">➕ Tee hinzufügen</button>
                 </div>
             `;
+            // Add event listener for the add button
+            const addBtn = container.querySelector('.add-first-tea-btn');
+            if (addBtn) {
+                addBtn.addEventListener('click', () => this.openTeaModal());
+            }
             return;
         }
         
@@ -1369,7 +1374,7 @@ class TeeTracker {
         }
         
         container.innerHTML = teas.map(tea => `
-            <div class="tea-card" style="--tea-color: ${tea.color}">
+            <div class="tea-card" style="--tea-color: ${tea.color}" data-tea-id="${tea.id}">
                 <div class="tea-card-header">
                     <div class="tea-card-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</div>
                     <div class="tea-card-type">${tea.type}</div>
@@ -1380,15 +1385,36 @@ class TeeTracker {
                     ${tea.rating ? this.renderStarRatingStatic(tea.rating) : ''}
                 </div>
                 <div class="tea-card-footer">
-                    <button class="btn-icon" onclick="app.editTea('${tea.id}')" title="Bearbeiten">
+                    <button class="btn-icon tea-edit-btn" title="Bearbeiten" data-tea-id="${tea.id}">
                         <span class="icon">✏️</span>
                     </button>
-                    <button class="btn-icon btn-danger" onclick="app.showDeleteTeaConfirm('${tea.id}')" title="Löschen">
+                    <button class="btn-icon btn-danger tea-delete-btn" title="Löschen" data-tea-id="${tea.id}">
                         <span class="icon">🗑️</span>
                     </button>
                 </div>
             </div>
         `).join('');
+        
+        // Add event listeners to all edit and delete buttons
+        this.setupTeaCardEventListeners();
+    }
+    
+    setupTeaCardEventListeners() {
+        // Edit buttons
+        document.querySelectorAll('.tea-edit-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const teaId = e.target.closest('.tea-edit-btn').dataset.teaId;
+                if (teaId) this.editTea(teaId);
+            });
+        });
+        
+        // Delete buttons
+        document.querySelectorAll('.tea-delete-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const teaId = e.target.closest('.tea-delete-btn').dataset.teaId;
+                if (teaId) this.showDeleteTeaConfirm(teaId);
+            });
+        });
     }
     
     // ============================================