From 76d17fe3c9a12a4c41f53da7fd522340f5cfe49d Mon Sep 17 00:00:00 2001
From: Schalli <kschaller@ctl.de>
Date: Mon, 28 Sep 2026 17:26:08 +0200
Subject: [PATCH] style(web): lebendigere Kacheln deutlich sichtbar - gelber
 Symbol-Chip, 4px Anheben, spuerbares Einblenden

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app/globals.css                  | 24 ++++++++-----------
 .../dashboard/widgets/widget-wrapper.tsx      |  2 +-
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 6f7a63c..464da98 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -434,7 +434,7 @@ input[type="checkbox"], input[type="radio"] {
 }
 
 /* Runde 3 — mehr Leben in den Kacheln, ohne bunt zu werden.
-   Symbol-Chip: Flaeche und Symbol aus der persoenlichen Akzentfarbe. */
+   Symbol-Chip: volle Akzentfarbe als Flaeche, Symbol in der passenden Vordergrundfarbe. */
 .widget-icon-chip {
   display: inline-flex;
   flex-shrink: 0;
@@ -443,39 +443,35 @@ input[type="checkbox"], input[type="radio"] {
   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);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
 }
 
 /* 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;
+    transition: box-shadow 180ms ease-out, translate 180ms 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);
+    translate: 0 -4px;
+    box-shadow: 0 0 2px oklch(0 0 0 / 0.14), 0 14px 30px oklch(0 0 0 / 0.18);
   }
   .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);
+    box-shadow: 0 0 0 1px oklch(1 0 0 / 0.12), 0 16px 34px oklch(0 0 0 / 0.6);
   }
 }
 
-/* Beim Laden blenden die Kacheln gestaffelt ein (je 40 ms, --enter-delay). */
+/* Beim Laden blenden die Kacheln gestaffelt ein (je 80 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: widget-enter 520ms 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);
+    transform: translateY(24px) scale(0.97);
   }
   to {
     opacity: 1;
diff --git a/apps/web/src/components/dashboard/widgets/widget-wrapper.tsx b/apps/web/src/components/dashboard/widgets/widget-wrapper.tsx
index a1ca475..9df5fd3 100644
--- a/apps/web/src/components/dashboard/widgets/widget-wrapper.tsx
+++ b/apps/web/src/components/dashboard/widgets/widget-wrapper.tsx
@@ -52,7 +52,7 @@ export function WidgetWrapper({ widget, isEditMode, onRemove, enterIndex = 0 }:
   return (
     <article
       className={cardClassName}
-      style={{ '--enter-delay': `${Math.min(enterIndex, 8) * 40}ms` } as CSSProperties}
+      style={{ '--enter-delay': `${Math.min(enterIndex, 8) * 80}ms` } as CSSProperties}
       data-widget-id={widget.id}
       aria-label={definition ? t(definition.nameKey) : widget.widgetType}
     >