feat: add bridge days recommendations feature with display and calculation logic

public/index.html

@@ -263,6 +263,10 @@
       transform: rotate(180deg);
     }
     
+    .details-chevron {
+      transition: transform 0.2s ease;
+    }
+    
     details summary {
       list-style: none;
     }
@@ -677,6 +681,22 @@
       </div>
     </div>
 
+    <!-- Bridge Days Recommendations -->
+    <details id="bridgeDaysContainer" class="mb-6 glass-card rounded-xl border border-cyan-600/30 hidden">
+      <summary class="cursor-pointer p-4 hover:bg-gray-700/30 rounded-t-xl transition-colors select-none">
+        <div class="flex items-center gap-2">
+          <i data-lucide="lightbulb" class="w-5 h-5 text-cyan-400"></i>
+          <h3 class="text-sm font-semibold text-cyan-400 uppercase tracking-wide">Brückentags-Empfehlungen</h3>
+          <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400 ml-auto details-chevron"></i>
+        </div>
+      </summary>
+      <div class="p-4 pt-2">
+        <div id="bridgeDaysList" class="space-y-2">
+          <!-- Will be populated by JavaScript -->
+        </div>
+      </div>
+    </details>
+
     <!-- Bulk Edit Actions Bar -->
     <div id="bulkEditBar" class="hidden mb-6 bg-gray-800 rounded-lg shadow p-4 border border-gray-700">
       <div class="flex items-center justify-between flex-wrap gap-3">
@@ -878,6 +898,7 @@
   <script src="js/state.js"></script>
   <script src="js/utils.js"></script>
   <script src="js/holidays.js"></script>
+  <script src="js/bridge-days.js"></script>
   <script src="js/api.js"></script>
   <script src="js/main.js"></script>