feat(web): Design Mosaik Runde 3 - Reiter in der Seitenleiste, lebendigere Kacheln

- Dashboard-Reiter stehen in der aufgeklappten Seitenleiste als Liste
  unter "Dashboard" (Ziehen sortiert senkrecht, Umbenennen/Loeschen/Neu
  im Bearbeitungsmodus); eingeklappt und auf dem Handy wie bisher in der
  Kopfzeile. Die Kopfzeile zeigt sonst den Namen des Dashboards.
- Begruessung einzeilig auf Hoehe der Befehlsleiste.
- Kachel-Groesse: kollidiert die gezogene Groesse mit einem Nachbarn, wird
  nur die freie Achse uebernommen - vorher verwarf react-grid-layout mit
  preventCollision die ganze Aenderung, sobald die Maus eine Zeile nach
  unten wackelte (Favoriten liessen sich deshalb oft nicht schmaler ziehen).
- Ansicht: belegte Spalten mittig, Begruessung/Befehlsleiste ruecken mit.
- Kalender: einzeilige Terminliste mit "Heute"/"Morgen" in Akzentfarbe,
  Ort im Tooltip, Standardhoehe 16 statt 12.
- Hintergrund "Bluete" im Dunkelmodus weggelassen (Farbstufen), Ersatz Nebel.
- Kacheln: Symbol-Chip in der Akzentfarbe, leichtes Anheben beim Zeigen,
  gestaffeltes Einblenden beim Laden (ohne bei reduzierter Bewegung).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

apps/web/src/app/globals.css

@@ -433,6 +433,70 @@ input[type="checkbox"], input[type="radio"] {
   line-height: 1.25rem;
 }
 
+/* Seitenleiste (Runde 3): stehen die Dashboard-Reiter unter „Dashboard“,
+   traegt nur der gewaehlte Reiter die Auswahl — der Obereintrag bleibt
+   neutral, sonst waere „Dashboard“ doppelt markiert. */
+li:has(> #sidebar-dashboard-slot > nav) > a {
+  background-color: transparent;
+  font-weight: 500;
+}
+li:has(> #sidebar-dashboard-slot > nav) > a:hover {
+  background-color: var(--sidebar-hover);
+}
+li:has(> #sidebar-dashboard-slot > nav) > a [data-testid="nav-selection-pill"] {
+  display: none;
+}
+
+/* Runde 3 — mehr Leben in den Kacheln, ohne bunt zu werden.
+   Symbol-Chip: Flaeche und Symbol aus der persoenlichen Akzentfarbe. */
+.widget-icon-chip {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  border-radius: 0.4375rem;
+  background-color: color-mix(in oklab, var(--primary) 24%, var(--card));
+  color: color-mix(in oklab, var(--primary) 38%, oklch(0.27 0.02 90));
+}
+.dark .widget-icon-chip {
+  background-color: color-mix(in oklab, var(--primary) 16%, var(--card));
+  color: var(--primary);
+}
+
+/* Karte hebt sich beim Zeigen leicht an (nur Maus, nur Ansicht). */
+@media (hover: hover) {
+  .widget-card {
+    transition: box-shadow 160ms ease-out, translate 160ms ease-out;
+  }
+  .widget-card:not(.widget-drag-handle):hover {
+    translate: 0 -1px;
+    box-shadow: 0 0 2px oklch(0 0 0 / 0.12), 0 6px 16px oklch(0 0 0 / 0.12);
+  }
+  .dark .widget-card:not(.widget-drag-handle):hover {
+    box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08), 0 8px 20px oklch(0 0 0 / 0.45);
+  }
+}
+
+/* Beim Laden blenden die Kacheln gestaffelt ein (je 40 ms, --enter-delay). */
+@media (prefers-reduced-motion: no-preference) {
+  .widget-card {
+    animation: widget-enter 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+    animation-delay: var(--enter-delay, 0ms);
+  }
+}
+@keyframes widget-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* Aktionen der Kachel erscheinen erst beim Zeigen oder mit Tastaturfokus —
    nur auf Geraeten mit Maus; auf Touch bleiben sie sichtbar. */
 @media (hover: hover) {