feat(web): Dashboard mit Begruessung, Befehlsleiste und ruhigeren Kacheln

Begruessung nach Tageszeit mit Datum, Befehlsleiste oben rechts statt
schwebendem Knopf, einheitliche Kachel-Kopfzeilen mit Symbol, Kalender
mit Pfeilknoepfen, runden Tagen und Terminpunkten, Favoriten als
36-px-Zeilen bzw. App-Starter-Kacheln, Notiz-Kaestchen im Akzent,
leerer Zustand mit drei Vorschlaegen.

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

apps/web/src/app/(portal)/page.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from 'next-intl';
 import { DashboardGrid } from '@/components/dashboard/dashboard-grid';
 import { DashboardTabs } from '@/components/dashboard/dashboard-tabs';
 import { EditModeToggle } from '@/components/dashboard/edit-mode-toggle';
+import { DashboardGreeting } from '@/components/dashboard/dashboard-greeting';
 import { BackgroundPicker, DashboardBackdrop, useDashboardBackground } from '@/components/dashboard/dashboard-background';
 import { useAuthStore } from '@/lib/stores/auth-store';
 import { WidgetCatalogModal } from '@/components/dashboard/widget-catalog-modal';
@@ -138,34 +139,27 @@ export default function DashboardPage() {
         onReorder={reorderDashboards}
       />
 
-      {isSwitchingDashboard ? (
-        <div className="flex min-h-[40vh] items-center justify-center">
-          <p className="text-sm text-muted-foreground">{t('tabs.switching')}</p>
+      {/* Kopfzeile des Dashboards (Design „Mosaik“, Runde 2): Begruessung
+          links, Befehlsleiste rechts (Fluent „command bar“) statt des
+          frueheren schwebenden Knopfs unten rechts. Mit Hintergrund liegen
+          beide auf der durchscheinenden Kachelflaeche (.dashboard-chrome). */}
+      <div className="flex flex-wrap items-end justify-between gap-x-4 gap-y-2 px-3 pb-1 pt-2">
+        <div className="dashboard-chrome min-w-0 rounded-lg">
+          <DashboardGreeting />
         </div>
-      ) : (
-        /* Dashboard grid — direkt im Container, ohne Abstands-Wrapper. */
-        <DashboardGrid
-          layouts={layouts}
-          widgets={widgets}
-          isEditMode={isEditMode}
-          onLayoutChange={updateLayouts}
-          onRemoveWidget={removeWidget}
-        />
-      )}
-
-      {/* Feste Aktionsleiste unten rechts.
-          quick-260916-dyv: Umschalter unten rechts statt oben rechts, damit das
-          Grid direkt unter der Kopfzeile beginnt (12 + 8 + 8 = 28 px statt 60 px).
-          Im Bearbeitungsmodus steht "Widget hinzufuegen" links neben dem Haekchen. */}
-      <div className="fixed bottom-6 right-6 z-20 flex items-center gap-2">
-        {isEditMode && <BackgroundPicker value={background} onChange={chooseBackground} />}
-        {isEditMode && (
-          <button
-            type="button"
-            onClick={() => setCatalogOpen(true)}
-            className="btn btn-primary shadow-lg"
-          >
-            <svg
+        <div
+          role="toolbar"
+          aria-label={t('toolbarLabel')}
+          className="dashboard-chrome flex items-center gap-1 rounded-lg"
+        >
+          {isEditMode && <BackgroundPicker value={background} onChange={chooseBackground} />}
+          {isEditMode && (
+            <button
+              type="button"
+              onClick={() => setCatalogOpen(true)}
+              className="btn btn-subtle"
+            >
+              <svg
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               width="16"
@@ -180,15 +174,33 @@ export default function DashboardPage() {
               <line x1="12" y1="5" x2="12" y2="19" />
               <line x1="5" y1="12" x2="19" y2="12" />
             </svg>
-            {t('addWidget')}
-          </button>
-        )}
-        <EditModeToggle
-          isEditMode={isEditMode}
-          onToggle={() => setEditMode(!isEditMode)}
-        />
+              {t('addWidget')}
+            </button>
+          )}
+          <EditModeToggle
+            isEditMode={isEditMode}
+            onToggle={() => setEditMode(!isEditMode)}
+          />
+        </div>
       </div>
 
+      {isSwitchingDashboard ? (
+        <div className="flex min-h-[40vh] items-center justify-center">
+          <p className="text-sm text-muted-foreground">{t('tabs.switching')}</p>
+        </div>
+      ) : (
+        /* Dashboard grid — direkt im Container, ohne Abstands-Wrapper. */
+        <DashboardGrid
+          layouts={layouts}
+          widgets={widgets}
+          isEditMode={isEditMode}
+          onLayoutChange={updateLayouts}
+          onRemoveWidget={removeWidget}
+          onOpenCatalog={() => setCatalogOpen(true)}
+          onQuickAdd={(type) => addWidget(type)}
+        />
+      )}
+
       {/* Widget catalog modal */}
       <WidgetCatalogModal
         isOpen={catalogOpen}