style(web): Modul-Kacheln einfarbig, Akzent nur fuer das Modul im Fokus

Statt bunter Modulfarben neutrale graue Kacheln; gelb (persoenliche
Akzentfarbe) nur fuer den gewaehlten Eintrag der Seitenleiste und den
Seitenkopf des Moduls. Schrift auf Akzentflaechen wird jetzt je nach
Akzentfarbe hell oder dunkel gewaehlt (readableOnAccent). Anmelde-
Mosaik und Dashboard-Hintergruende nur noch in Gelb, Grau, Graphit;
Salbei ersetzt durch Kiesel.

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

apps/web/src/components/modules/module-tile.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { getModuleIdentity, type ModuleIconId } from '@/lib/module-identity';
+import { getModuleIcon, type ModuleIconId } from '@/lib/module-identity';
 
 const GLYPHS: Record<ModuleIconId, ReactNode> = {
   radar: (
@@ -56,27 +56,36 @@ interface ModuleTileProps {
   slug: string;
   /** Kantenlaenge in Pixeln (Seitenleiste 20, Karten 40, Seitenkopf 36). */
   size?: number;
+  /**
+   * `neutral` (Vorgabe): graue Flaeche, dunkelgraues Symbol.
+   * `accent`: Akzentflaeche mit passender Schrift — fuer das Modul im Fokus.
+   */
+  tone?: 'neutral' | 'accent';
   className?: string;
 }
 
 /**
- * App-Kachel eines Moduls: abgerundetes Quadrat in der Modulfarbe mit weissem
- * Symbol (siehe lib/module-identity.ts). Rein dekorativ — der Modulname steht
- * immer als Text daneben.
+ * App-Kachel eines Moduls: abgerundetes Quadrat mit Symbol (siehe
+ * lib/module-identity.ts). Kontrast Symbol/Flaeche: neutral hell 7,4:1,
+ * dunkel 8,9:1; Akzent ueber `--primary-foreground`, das fuer jede
+ * persoenliche Akzentfarbe hell oder dunkel gewaehlt wird (lib/color.ts).
+ * Rein dekorativ — der Modulname steht immer als Text daneben.
  */
-export function ModuleTile({ slug, size = 20, className = '' }: ModuleTileProps) {
-  const { color, icon } = getModuleIdentity(slug);
+export function ModuleTile({ slug, size = 20, tone = 'neutral', className = '' }: ModuleTileProps) {
+  const icon = getModuleIcon(slug);
   const glyph = Math.round(size * 0.6);
   return (
     <span
       aria-hidden="true"
       data-module-tile={slug}
-      className={`inline-flex shrink-0 items-center justify-center text-white ${className}`}
+      data-tone={tone}
+      className={`inline-flex shrink-0 items-center justify-center ${
+        tone === 'accent' ? 'bg-primary text-primary-foreground' : 'bg-tile text-tile-foreground'
+      } ${className}`}
       style={{
         width: size,
         height: size,
         borderRadius: Math.max(4, Math.round(size * 0.24)),
-        backgroundColor: color,
       }}
     >
       <svg
@@ -86,7 +95,7 @@ export function ModuleTile({ slug, size = 20, className = '' }: ModuleTileProps)
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        strokeWidth={size <= 24 ? 2.4 : 2}
+        strokeWidth={size <= 24 ? 2.2 : 1.9}
         strokeLinecap="round"
         strokeLinejoin="round"
       >