Fix: UI/UX Verbesserungen und Critical Fix

- add_packing_list.php: Critical Fix für Browser-Freeze (MutationObserver ersetzt).
- packing_list_detail.php: Chart-Design optimiert (Kontrast, Rahmen entfernt).
- backpacks.php: Button-Farbe angepasst.
- README.md: Changelog aktualisiert.

README.md

@@ -168,13 +168,15 @@ Das Projekt basiert auf bewährten Web-Standards:
 ### 06.12.2025
 *   **Rucksäcke:**
     *   Neues Feld für Hersteller-Link (Product URL) hinzugefügt.
-    *   "Info"-Button in der Übersicht öffnet den hinterlegten Link.
+    *   "Info"-Button in der Übersicht öffnet den hinterlegten Link (Design angepasst auf Grün).
     *   Fix: Eingabefeld für neue Hersteller erscheint nun zuverlässig.
 *   **Artikel:**
     *   Komfort-Funktion: Auswahl aus den letzten 24 hochgeladenen Bildern beim Erstellen neuer Artikel hinzugefügt.
 *   **Packlisten:**
     *   **Editor:** Filter-Optionen ("Alle Kategorien", "Alle Hersteller") korrigiert und erweitert.
-    *   **Erstellung:** Validierung hinzugefügt, die verhindert, dass ein Rucksack mehrfach zugewiesen wird.
+    *   **Erstellung:** 
+        *   Validierung hinzugefügt, die verhindert, dass ein Rucksack mehrfach zugewiesen wird.
+        *   **Critical Fix:** Browser-Freeze durch Endlosschleife bei der Validierung behoben.
     *   **Details:**
-        *   Design-Update: Diagramme verwenden nun Grüntöne passend zum Thema.
+        *   Design-Update: Diagramme verwenden nun kontrastreiche Grüntöne passend zum Thema (ohne weiße Rahmen).
         *   Statistik: Klickbare Trägernamen öffnen ein Modal mit detaillierten Gewichtsstatistiken pro Kategorie.

src/add_packing_list.php

@@ -239,27 +239,18 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
     
-    // Observe changes. 
-    // The modal script updates the hidden input. We can listen to a custom event or use MutationObserver.
-    // Or simply listen to clicks on the "Select" buttons in the modal, but the modal logic is separate.
-    // However, the `render_backpack_modal_script` updates the UI and the hidden input. 
-    // We can attach a MutationObserver to the form to detect value changes or DOM changes in the backpack cards.
-    
-    const observer = new MutationObserver(function(mutations) {
-        validateBackpacks();
-    });
-    
-    observer.observe(document.querySelector('.card-body'), {
-        subtree: true,
-        attributes: true, // value change might not trigger attribute change in DOM for inputs, but innerHTML changes of cards do
-        childList: true
-    });
-    
     // Also listen to participation checkboxes
     document.querySelectorAll('.participation-check').forEach(chk => {
         chk.addEventListener('change', validateBackpacks);
     });
     
+    // Listen for modal close/hide events (bootstrap specific) to re-validate
+    // Since the backpack selection happens in a modal, validating on modal hide is efficient.
+    // We use event delegation or attach to body since modals might be dynamically inserted/removed (though here they are static in footer usually)
+    document.body.addEventListener('hidden.bs.modal', function (event) {
+        validateBackpacks();
+    });
+
     // Initial check
     validateBackpacks();
 });

src/backpacks.php

@@ -126,7 +126,7 @@ while ($row = $result->fetch_assoc()) {
                             <div class="card-footer bg-transparent border-top-0 d-flex justify-content-between align-items-center gap-2">
                                 <div>
                                     <?php if (!empty($bp['product_url'])): ?>
-                                        <a href="<?php echo htmlspecialchars($bp['product_url']); ?>" target="_blank" class="btn btn-sm btn-outline-info" title="Herstellerseite öffnen"><i class="fas fa-external-link-alt"></i> Info</a>
+                                        <a href="<?php echo htmlspecialchars($bp['product_url']); ?>" target="_blank" class="btn btn-sm btn-outline-success" title="Herstellerseite öffnen"><i class="fas fa-external-link-alt"></i> Info</a>
                                     <?php endif; ?>
                                 </div>
                                 

src/packing_list_detail.php

@@ -416,12 +416,12 @@ document.addEventListener('DOMContentLoaded', function() {
 
     const catCtx = document.getElementById('categoryWeightChart');
     if (catCtx) {
-        new Chart(catCtx, { type: 'doughnut', data: { labels: <?php echo json_encode(array_keys($weight_by_category)); ?>, datasets: [{ data: <?php echo json_encode(array_values($weight_by_category)); ?>, backgroundColor: greenColors, borderWidth: 2, hoverOffset: 15 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } } });
+        new Chart(catCtx, { type: 'doughnut', data: { labels: <?php echo json_encode(array_keys($weight_by_category)); ?>, datasets: [{ data: <?php echo json_encode(array_values($weight_by_category)); ?>, backgroundColor: greenColors, borderWidth: 0, hoverOffset: 15 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } } });
     }
 
     const carrierCtx = document.getElementById('carrierWeightChart');
     if (carrierCtx) { 
-        new Chart(carrierCtx, { type: 'doughnut', data: { labels: <?php echo json_encode(array_keys($weight_by_carrier)); ?>, datasets: [{ data: <?php echo json_encode(array_values($weight_by_carrier)); ?>, backgroundColor: greenColors, borderWidth: 2, hoverOffset: 15 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } } });
+        new Chart(carrierCtx, { type: 'doughnut', data: { labels: <?php echo json_encode(array_keys($weight_by_carrier)); ?>, datasets: [{ data: <?php echo json_encode(array_values($weight_by_carrier)); ?>, backgroundColor: greenColors, borderWidth: 0, hoverOffset: 15 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } } });
     }
 
     // Collapsible Tree Logic