fix(ui): fix overlapping header elements on narrow screens (#31)

- Calendar toolbar now wraps view buttons to a second row on viewports
  < 580px so nav controls and label stay readable on all iOS devices
- Tasks toolbar title no longer bleeds over action buttons; uses
  min-width:min-content so flex-wrap kicks in before overflow occurs
- Shopping list-header name gets flex:1/overflow:hidden so it truncates
  cleanly instead of colliding with the clear-checked / delete buttons

public/styles/calendar.css

@@ -99,6 +99,31 @@
   box-shadow: var(--shadow-sm);
 }
 
+/* ── Schmale Viewports (< 580px): Views in zweite Zeile ── */
+@media (max-width: 579px) {
+  .cal-toolbar {
+    flex-wrap: wrap;
+    row-gap: var(--space-2);
+    padding-bottom: var(--space-2);
+  }
+
+  /* Nächste-Nav ans Ende der ersten Zeile bringen */
+  .cal-toolbar > .cal-toolbar__nav:last-child {
+    order: 4;
+  }
+
+  /* Views in volle zweite Zeile */
+  .cal-toolbar__views {
+    order: 10;
+    flex-basis: 100%;
+    justify-content: center;
+  }
+
+  .cal-toolbar__view-btn {
+    flex: 1;
+  }
+}
+
 /* --------------------------------------------------------
  * Monatsansicht
  * -------------------------------------------------------- */