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/components/dashboard/widgets/widget-wrapper.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { CSSProperties } from 'react';
 import { useTranslations } from 'next-intl';
 import { WIDGET_REGISTRY, type WidgetType } from '../widget-registry';
 import { WidgetIcon } from './widget-icon';
@@ -21,6 +22,8 @@ interface WidgetWrapperProps {
   };
   isEditMode: boolean;
   onRemove: (id: string) => void;
+  /** Position im Raster — staffelt das Einblenden beim Laden (Runde 3). */
+  enterIndex?: number;
 }
 
 /**
@@ -35,7 +38,7 @@ interface WidgetWrapperProps {
  * .widgetNoDrag), entscheidet der cancel-Selektor in dashboard-grid.tsx.
  * Renders the actual widget component via WIDGET_REGISTRY lookup.
  */
-export function WidgetWrapper({ widget, isEditMode, onRemove }: WidgetWrapperProps) {
+export function WidgetWrapper({ widget, isEditMode, onRemove, enterIndex = 0 }: WidgetWrapperProps) {
   const t = useTranslations('widgets');
   const definition = WIDGET_REGISTRY[widget.widgetType as WidgetType];
   const WidgetComponent = definition?.component;
@@ -43,12 +46,13 @@ export function WidgetWrapper({ widget, isEditMode, onRemove }: WidgetWrapperPro
   // Design „Mosaik“: in der Ansicht eine ruhige Fluent-Karte (hell Schatten,
   // dunkel Haarlinie), die Akzent-Umrandung nur im Bearbeitungsmodus.
   const cardClassName = isEditMode
-    ? 'widget-drag-handle relative h-full w-full cursor-grab overflow-hidden rounded-lg bg-card shadow-md active:cursor-grabbing'
-    : 'relative h-full w-full overflow-hidden rounded-lg bg-card shadow-sm dark:border dark:border-border';
+    ? 'widget-card widget-drag-handle relative h-full w-full cursor-grab overflow-hidden rounded-lg bg-card shadow-md active:cursor-grabbing'
+    : 'widget-card relative h-full w-full overflow-hidden rounded-lg bg-card shadow-sm dark:border dark:border-border';
 
   return (
     <article
       className={cardClassName}
+      style={{ '--enter-delay': `${Math.min(enterIndex, 8) * 40}ms` } as CSSProperties}
       data-widget-id={widget.id}
       aria-label={definition ? t(definition.nameKey) : widget.widgetType}
     >