From e209c339160a913b9d22f3edf8ae15ff2e22ffe1 Mon Sep 17 00:00:00 2001
From: DeeCee03 <dejan@tool-ctrl.de>
Date: Mon, 31 Aug 2026 17:06:25 +0200
Subject: [PATCH] Drei Stellen im Hover- und Ausrichtungsverhalten nachbessern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aus dem Sparring, alle drei auch in Analytics wirksam.

1. Vertriebstrichter: Zeilen-Hervorhebung statt Ausgrauen der uebrigen Balken.

   Bisher setzte das Ueberfahren einer Zeile alle anderen Balken auf 45 %
   Deckkraft. Das war aus drei Gruenden falsch: Es liess fuenf von sechs
   Balken verblassen und las sich dadurch wie eine Auswahl statt wie ein
   Ueberfahren; es war in sich widerspruechlich, weil die Balken verblassten
   und die Namen daneben schwarz blieben; und Deckkraft traegt in diesem
   Diagramm bereits Bedeutung — der Balken kodiert einen Anteil, ihn heller zu
   machen heisst dort "weniger" und nicht "gerade nicht beruehrt".

   Jetzt bekommt die beruehrte Zeile einen Untergrund, die uebrigen bleiben
   unveraendert. Derselbe Untergrund wie in der Handlungsbedarf-Liste und in
   den Tabellen. Die Spur des aktiven Balkens wird weiss: neutral-50 und
   neutral-100 liegen nur fuenf Stufen auseinander, grau auf grau haette dem
   Balken den Bezugsrahmen genommen.

2. KPI-Karten einer Reihe auf gleiche Hoehe.

   Die Umsatzkarte war hoeher als ihre drei Nachbarn, weil sie als einzige
   eine Trendzeile mit Verlaufskurve traegt. Auf dem Dashboard steht zwischen
   Rasterzelle und Karte ein Link, und der reichte die Streckung des Rasters
   nicht durch. h-full auf der Karte.

3. Handlungsbedarf: Hover-Flaeche greift ueber den Inhalt hinaus.

   Der Untergrund endete hart am Pfeil — bei zwei Spalten besonders sichtbar,
   weil daneben 32 px Spaltenabstand ungefaerbt blieben. Jetzt acht Pixel
   Ueberstand und runde Ecken.

   Dabei mitgenommen: Der Trennstrich sass unten und brauchte eine Ausnahme
   fuer "die letzte Zeile" — die es bei zwei Spalten zweimal gibt. Die rechte
   Spalte behielt dadurch einen Strich, unter dem nichts mehr kam. Oben
   liegend ist die Ausnahme die erste Zeile jeder Spalte, und die steht immer
   an derselben Stelle, unabhaengig von der Anzahl der Eintraege.

tsc, lint, build und verify:layout laufen sauber; Hover-Zustaende und
Kartenhoehen nachgemessen statt begutachtet.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
---
 .../dashboard/components/cards/AlertList.tsx  | 32 +++++++++++-
 .../dashboard/components/cards/KPICard.tsx    |  7 ++-
 .../dashboard/components/charts/Trichter.tsx  | 51 +++++++++++++++----
 3 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/features/dashboard/components/cards/AlertList.tsx b/features/dashboard/components/cards/AlertList.tsx
index 10a1643..adfd8ee 100644
--- a/features/dashboard/components/cards/AlertList.tsx
+++ b/features/dashboard/components/cards/AlertList.tsx
@@ -60,12 +60,40 @@ export function AlertList({
               : STATUS_FARBEN.info;
 
         return (
-          <li key={eintrag.id}>
+          /**
+           * Der Trennstrich sitzt oben, nicht unten.
+           *
+           * Unten liegend braucht er eine Ausnahme für die letzte Zeile — und
+           * „die letzte Zeile" gibt es bei zwei Spalten zweimal, einmal je
+           * Spalte, an einer Stelle, die von der Anzahl der Einträge abhängt.
+           * Die rechte Spalte behielt dadurch einen Strich, unter dem nichts
+           * mehr kam.
+           *
+           * Oben liegend ist die Ausnahme dagegen die *erste* Zeile jeder
+           * Spalte, und die steht bei zeilenweisem Fluss immer an derselben
+           * Stelle: die ersten beiden Kinder. Das gilt unabhängig davon, wie
+           * viele Einträge die Liste hat.
+           */
+          <li
+            key={eintrag.id}
+            className={`border-t border-solid border-border-default first:border-t-0 ${
+              spalten === 2 ? "xl:[&:nth-child(-n+2)]:border-t-0" : ""
+            }`}
+          >
             <button
               onClick={() =>
                 zeigeToast(eintrag.aktion, `${eintrag.text} — Absprung folgt in der Umsetzung`)
               }
-              className="group flex w-full items-center gap-3 border-b border-solid border-border-default py-3 text-left last:border-b-0 hover:bg-neutral-50"
+              /* -mx-2 und die zusätzliche Breite: Der Untergrund lief vorher
+                 genau bis zum Pfeil und schnitt dort hart ab — bei zwei Spalten
+                 besonders sichtbar, weil daneben 32 px Spaltenabstand ungefärbt
+                 blieben. Jetzt greift er acht Pixel über den Inhalt hinaus und
+                 hat runde Ecken; er liest sich als Fläche unter der Zeile statt
+                 als Kasten um sie herum.
+
+                 Der Trennstrich sitzt dafür an der Zeile und nicht mehr am
+                 Knopf: Er soll die Zeilen trennen und nicht mitwandern. */
+              className="group -mx-2 flex w-[calc(100%+1rem)] items-center gap-3 rounded-md px-2 py-3 text-left transition-colors duration-150 hover:bg-neutral-50"
             >
               <span className="flex-none" style={{ color: farbe }}>
                 {eintrag.art === "hinweis" ? (
diff --git a/features/dashboard/components/cards/KPICard.tsx b/features/dashboard/components/cards/KPICard.tsx
index 00f1944..eaf4f8b 100644
--- a/features/dashboard/components/cards/KPICard.tsx
+++ b/features/dashboard/components/cards/KPICard.tsx
@@ -83,7 +83,12 @@ export function KPICard({
   }[akzent];
 
   return (
-    <article className="flex min-h-[136px] flex-col rounded-lg border border-solid border-border-default bg-white p-4 shadow-sm transition-shadow duration-200 hover:shadow-md">
+    /* h-full: Die Karte füllt ihre Rasterzelle. Ohne das ist die Karte mit
+       Trendzeile und Verlaufskurve höher als ihre Nachbarn, und eine Reihe
+       gleichartiger Kennzahlen bekommt eine ungleiche Unterkante — auf dem
+       Dashboard sichtbar, weil dort ein Link zwischen Zelle und Karte steht
+       und die Streckung des Rasters nicht mehr durchreicht. */
+    <article className="flex h-full min-h-[136px] flex-col rounded-lg border border-solid border-border-default bg-white p-4 shadow-sm transition-shadow duration-200 hover:shadow-md">
       <div className="flex items-start justify-between gap-2">
         {/* min-w-0 + break-words: Ohne das schiebt ein langes Label wie
             „Umsatz (Zahlungseingang)" das Icon aus der Karte und laeuft selbst
diff --git a/features/dashboard/components/charts/Trichter.tsx b/features/dashboard/components/charts/Trichter.tsx
index 5dc58e2..25ebcae 100644
--- a/features/dashboard/components/charts/Trichter.tsx
+++ b/features/dashboard/components/charts/Trichter.tsx
@@ -19,6 +19,24 @@ import { ChartLeer } from "./ChartLeer";
  * Die Balken sind zentriert, nicht linksbündig: So liest man die Verjüngung als
  * Trichterform, ohne die gemeinsame Skala aufzugeben. Ein echtes Funnel-Chart
  * mit breitenkodierten Segmenten kennt Carbon bewusst nicht — es verzerrt.
+ *
+ * **Zum Verhalten beim Überfahren:** Die Zeile unter dem Zeiger bekommt einen
+ * Untergrund, die übrigen bleiben unverändert. Das war vorher andersherum
+ * gelöst — die nicht berührten Balken wurden auf 45 % Deckkraft gesetzt — und
+ * das war aus drei Gründen falsch:
+ *
+ * 1. Es hat mehr bewegt als gemeint war. Ein Zeiger, der über eine Zeile
+ *    streift, ließ fünf von sechs Balken verblassen; das liest sich wie eine
+ *    Auswahl, nicht wie ein Überfahren.
+ * 2. Es war in sich widersprüchlich. Die Balken verblassten, die Namen und
+ *    Zahlen daneben blieben schwarz — dieselbe Zeile sagte gleichzeitig
+ *    „unwichtig" und „unverändert".
+ * 3. Deckkraft trägt in diesem Diagramm bereits eine Bedeutung: Der Balken
+ *    kodiert einen Anteil. Ihn heller zu machen, heißt in der Sprache des
+ *    Diagramms „weniger" — und nicht „gerade nicht berührt".
+ *
+ * Der Untergrund ist derselbe wie in der Handlungsbedarf-Liste und in den
+ * Tabellen (`bg-neutral-50`): Überfahren sieht überall gleich aus.
  */
 export function Trichter({
   stufen,
@@ -46,18 +64,31 @@ export function Trichter({
             key={stufe.name}
             onMouseEnter={() => setAktiv(index)}
             onMouseLeave={() => setAktiv(null)}
-            className="grid grid-cols-[96px_minmax(0,1fr)_52px_44px] items-center gap-2"
+            /* -mx-2 px-2: Der Untergrund greift über den Inhalt hinaus, sonst
+               endet er hart an der Zahl am rechten Rand. */
+            className={`-mx-2 grid grid-cols-[96px_minmax(0,1fr)_52px_44px] items-center gap-2 rounded-md px-2 py-0.5 transition-colors duration-150 ${
+              hervorgehoben ? "bg-neutral-50" : ""
+            }`}
           >
-            <span className="truncate text-[12px] text-text-neutral-secondary">{stufe.name}</span>
+            <span
+              className={`truncate text-[12px] ${
+                hervorgehoben ? "text-text-neutral-primary" : "text-text-neutral-secondary"
+              }`}
+            >
+              {stufe.name}
+            </span>
 
-            <span className="flex h-6 w-full items-center justify-center rounded-sm bg-neutral-100">
+            {/* Die Spur ist im hervorgehobenen Zustand weiß statt grau: Auf dem
+                grauen Untergrund der Zeile wäre eine graue Spur nicht mehr von
+                ihm zu unterscheiden, und der Balken verlöre seinen Bezugsrahmen. */}
+            <span
+              className={`flex h-6 w-full items-center justify-center rounded-sm transition-colors duration-150 ${
+                hervorgehoben ? "bg-white" : "bg-neutral-100"
+              }`}
+            >
               <span
-                className="block h-full rounded-sm transition-[width,opacity] duration-300"
-                style={{
-                  width: `${Math.max(3, anteilGesamt)}%`,
-                  background: KATEGORIE_FARBEN[0],
-                  opacity: aktiv !== null && !hervorgehoben ? 0.45 : 1,
-                }}
+                className="block h-full rounded-sm transition-[width] duration-300"
+                style={{ width: `${Math.max(3, anteilGesamt)}%`, background: KATEGORIE_FARBEN[0] }}
               />
             </span>
 
@@ -77,7 +108,7 @@ export function Trichter({
         );
       })}
 
-      <li className="mt-1 flex items-center justify-end gap-1 border-t border-solid border-border-default pt-2 text-[11px] text-text-neutral-tertiary">
+      <li className="mt-2 flex items-center justify-end gap-1 border-t border-solid border-border-default pt-2 text-[11px] text-text-neutral-tertiary">
         Rechte Spalte: Übergang von der vorherigen Stufe
       </li>
     </ol>