From 9e54c7788f824b5e80234243482cf1a40a3f8f99 Mon Sep 17 00:00:00 2001
From: Martin <martin@solarczek.de>
Date: Fri, 3 Jul 2026 09:44:36 +0200
Subject: [PATCH] Risiko-Skala & Heatmap kontrastreicher auf Dunkel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Score-Skala mit kräftigem Grün→Gelb→Orange→Rot-Verlauf statt blasser
  Pastelltöne; Marker Brutto weiß / Rest dunkel mit Kontrastring
- Heatmap-Zellen kräftigere Ampelfarben; R-Chips dunkel/weiß für Kontrast

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/(app)/risks/page.tsx   |  2 +-
 src/components/risk-modals.tsx | 21 +++++++++------------
 src/lib/risk.ts                | 16 ++++++++++------
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/app/(app)/risks/page.tsx b/src/app/(app)/risks/page.tsx
index 733872a..3c8ed3e 100644
--- a/src/app/(app)/risks/page.tsx
+++ b/src/app/(app)/risks/page.tsx
@@ -178,7 +178,7 @@ export default async function RisksPage({
                           key={r.id}
                           href={`/risks?detail=${r.id}`}
                           title={r.title}
-                          className="rounded-md bg-[var(--elevated)] px-1.5 py-0.5 font-heading text-[10.5px] font-bold text-foreground shadow-sm hover:bg-[var(--elevated)]"
+                          className="rounded-md bg-[#0e1220]/75 px-1.5 py-0.5 font-heading text-[10.5px] font-bold text-white shadow-sm hover:bg-[#0e1220]"
                         >
                           {riskRef(r.refNo)}
                         </Link>
diff --git a/src/components/risk-modals.tsx b/src/components/risk-modals.tsx
index 67d012f..bcf2f8c 100644
--- a/src/components/risk-modals.tsx
+++ b/src/components/risk-modals.tsx
@@ -20,7 +20,7 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Modal } from "@/components/modal";
 import { CiaBadge, CiaLegend, Pill, Tag } from "@/components/mockup-ui";
-import { riskLevel, riskRef, RISK_PILL_TONE } from "@/lib/risk";
+import { riskLevel, riskRef, RISK_PILL_TONE, RISK_SCALE_GRADIENT } from "@/lib/risk";
 import { measureRef, MEASURE_STATUS_TONE } from "@/lib/measure";
 
 export type RiskWithDetail = Prisma.RiskGetPayload<{
@@ -118,38 +118,35 @@ async function RatingCard({
   );
 }
 
-/** Farbskala grün→rot mit Markern für Brutto (dunkel) und Rest (orange). SPEC §4.2. */
+/** Kräftige Farbskala grün→rot mit Markern für Brutto (weiß) und Rest (dunkel). SPEC §4.2. */
 function RiskScoreScale({ gross, residual }: { gross: number; residual: number | null }) {
   // 5×5 → Score 1..25; Position linear auf der Skala
   const pos = (v: number) => `${((Math.min(25, Math.max(1, v)) - 1) / 24) * 100}%`;
   return (
     <div className="pt-1">
       <div
-        className="relative h-3 rounded-lg"
-        style={{
-          background:
-            "linear-gradient(90deg,#dff3e5,#fdf0cf,#fbdcc0,#f6c3c1,#ef9a98)",
-        }}
+        className="relative h-3.5 rounded-lg ring-1 ring-white/10"
+        style={{ background: RISK_SCALE_GRADIENT }}
       >
         <span
-          className="absolute -top-1 h-5 w-[3px] -translate-x-1/2 rounded-sm bg-[#2b2646]"
+          className="absolute -top-1.5 h-6.5 w-[4px] -translate-x-1/2 rounded-sm bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.5)]"
           style={{ left: pos(gross) }}
           title={`Brutto ${gross}`}
         />
         {residual != null && (
           <span
-            className="absolute -top-1 h-5 w-[3px] -translate-x-1/2 rounded-sm bg-[#e0982e]"
+            className="absolute -top-1.5 h-6.5 w-[4px] -translate-x-1/2 rounded-sm bg-[#0e1220] shadow-[0_0_0_1px_rgba(255,255,255,0.7)]"
             style={{ left: pos(residual) }}
             title={`Rest ${residual}`}
           />
         )}
       </div>
-      <div className="mt-1.5 flex items-center gap-4 text-[11px] text-muted-foreground">
+      <div className="mt-2 flex items-center gap-4 text-[11px] text-muted-foreground">
         <span className="inline-flex items-center gap-1.5">
-          <i className="inline-block h-3 w-[3px] rounded-sm bg-[#2b2646]" /> Brutto
+          <i className="inline-block h-3 w-[4px] rounded-sm bg-white ring-1 ring-black/40" /> Brutto
         </span>
         <span className="inline-flex items-center gap-1.5">
-          <i className="inline-block h-3 w-[3px] rounded-sm bg-[#e0982e]" /> Rest
+          <i className="inline-block h-3 w-[4px] rounded-sm bg-[#0e1220] ring-1 ring-white/60" /> Rest
         </span>
       </div>
     </div>
diff --git a/src/lib/risk.ts b/src/lib/risk.ts
index 35eaaed..0998d8e 100644
--- a/src/lib/risk.ts
+++ b/src/lib/risk.ts
@@ -10,15 +10,19 @@ export function riskLevel(score: number): RiskLevelKey {
   return "low";
 }
 
-/** Zellen-Hintergrund der Heatmap (Mockup-Legende). */
+/** Zellen-Hintergrund der Heatmap — kräftige Ampelfarben (auf Dunkel kontrastreich). */
 export const RISK_CELL_COLORS: Record<RiskLevelKey, string> = {
-  low: "#dff3e5",
-  medium: "#fdf0cf",
-  elevated: "#fbdcc0",
-  high: "#f6c3c1",
-  critical: "#ef9a98",
+  low: "#2ea86b",
+  medium: "#e3b427",
+  elevated: "#e2802e",
+  high: "#e0553f",
+  critical: "#d63c5e",
 };
 
+/** Sättigungsstarke Farbskala grün→rot für den Risiko-Score-Balken. */
+export const RISK_SCALE_GRADIENT =
+  "linear-gradient(90deg,#2ec76b 0%,#e3b427 32%,#e2802e 60%,#e0553f 82%,#d63c5e 100%)";
+
 /** Pillen-Ton je Stufe — gemäß Heatmap-Skala: Grün → Gelb → Orange → Rot. */
 export const RISK_PILL_TONE: Record<RiskLevelKey, "ok" | "warn" | "orange" | "risk"> = {
   low: "ok",