feat: Wetter-Widget responsive über volle Breite im Desktop-Dashboard

Auf Desktop wird das Wetter-Widget über allen anderen Widgets platziert
mit horizontalem Layout (aktuelles Wetter links, Vorhersage rechts).
Vorhersagezeitraum skaliert mit Bildschirmbreite: 3 Tage (Mobil),
4 Tage (Tablet), 5 Tage (Desktop/Wide).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/styles/dashboard.css

@@ -507,7 +507,9 @@
  * Wetter-Widget
  *
  * Eigener Gradient, überschreibt .widget Hintergrund.
- * Kompakt: Icon kleiner, Forecast enger.
+ * Mobile: kompakt, 3-Tage-Vorhersage.
+ * Desktop: volle Breite über allen Widgets, horizontales
+ *          Layout mit bis zu 5-Tage-Vorhersage.
  * -------------------------------------------------------- */
 .weather-widget {
   background: linear-gradient(135deg, var(--color-accent) 0%, #1E5CB3 100%);
@@ -569,6 +571,11 @@
   flex: 1;
 }
 
+/* Tage 4+5 nur auf breiteren Bildschirmen sichtbar */
+.weather-forecast__day--extended {
+  display: none;
+}
+
 .weather-forecast__label {
   font-size: var(--text-xs);
   font-weight: var(--font-weight-semibold);
@@ -595,6 +602,97 @@
   opacity: 0.6;
 }
 
+/* Tablet: Wetter über volle Breite, 4 Tage */
+@media (min-width: 768px) {
+  .weather-widget {
+    grid-column: 1 / -1;
+  }
+
+  .weather-widget__inner {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .weather-widget__main {
+    flex-shrink: 0;
+  }
+
+  .weather-forecast {
+    border-top: none;
+    border-left: 1px solid rgba(255, 255, 255, 0.15);
+    flex: 1;
+    align-items: center;
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .weather-forecast__day--extended:nth-child(-n+4) {
+    display: flex;
+  }
+}
+
+/* Desktop: 5-Tage-Vorhersage, größere Elemente */
+@media (min-width: 1024px) {
+  .weather-widget {
+    grid-column: 1 / -1;
+  }
+
+  .weather-widget__main {
+    padding: var(--space-4) var(--space-5);
+  }
+
+  .weather-widget__temp {
+    font-size: 2.5rem;
+  }
+
+  .weather-widget__icon {
+    width: 80px;
+    height: 80px;
+  }
+
+  .weather-forecast {
+    gap: var(--space-4);
+    padding: var(--space-3) var(--space-5);
+  }
+
+  .weather-forecast__day--extended {
+    display: flex;
+  }
+
+  .weather-forecast__icon {
+    width: 36px;
+    height: 36px;
+  }
+
+  .weather-forecast__temps {
+    font-size: var(--text-sm);
+  }
+
+  .weather-forecast__label {
+    font-size: var(--text-sm);
+  }
+}
+
+/* Wide Desktop: noch mehr Platz */
+@media (min-width: 1440px) {
+  .weather-widget {
+    grid-column: 1 / -1;
+  }
+
+  .weather-widget__main {
+    padding: var(--space-4) var(--space-6);
+  }
+
+  .weather-forecast {
+    gap: var(--space-5);
+    padding: var(--space-3) var(--space-6);
+  }
+
+  .weather-forecast__icon {
+    width: 40px;
+    height: 40px;
+  }
+}
+
 /* --------------------------------------------------------
  * Skeleton-Zustände (pro Widget)
  * Kompakt: gleiches Spacing wie echte Widgets.