Fix tech debt from PR #15 (Muss + Sollte)

src/components/MitigationCard.jsx

@@ -35,7 +35,7 @@ export default function MitigationCard({ group, active, accent, t }) {
             <div className={styles.subtitle} style={{ opacity: active ? 1 : 0.4 }}>
               {active
                 ? `${group.measures.length} ${group.measures.length !== 1 ? t.measures : t.measure}`
-                : `Unlocks at Tier ${group.tier}`}
+                : t.unlocksAtTier(group.tier)}
             </div>
           </div>
         </div>

src/components/MitigationCard.module.css

@@ -11,7 +11,6 @@
 .card:not(.cardInactive):hover {
   transform: translateY(-2px) scale(1.01);
   box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.25);
-  border-width: 2px !important;
   filter: brightness(1.08);
 }
 
@@ -75,7 +74,7 @@
 }
 
 .measuresWrapperOpen {
-  max-height: 600px;
+  max-height: 2000px;
   transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }
 

src/components/RadarChart.jsx

@@ -120,12 +120,12 @@
   registerUpdater = null,
 }) {
   // Safe fallbacks to prevent math from crashing if data is missing
   const safeDims = dimensions || [];
   const safeVals = values || {};
 
   const cx = size / 2;
   const cy = size / 2;
-  const maxR = 130;
+  const maxR = size / 2 - 100;
   const levels = 5;
   const n = safeDims.length || 1; // prevents division by zero
   const angStep = 360 / n;
@@ -407,32 +407,32 @@
             width={tooltipW}
             height={tooltipH}
             rx={10}
-            fill="#1e293b"
+            fill="var(--bg-card)"
             stroke={tc}
             strokeWidth={1.5}
             filter="url(#tt-shadow)"
           />
           <rect x={tipX} y={tipY} width={4} height={tooltipH} rx={4} fill={tc} />
-          <text x={tipX + 14} y={tipY + 19} fill="#94a3b8" fontSize="11" fontWeight="500">
+          <text x={tipX + 14} y={tipY + 19} fill="var(--text-secondary)" fontSize="11" fontWeight="500">
             {tooltip.label}
           </text>
           <text x={tipX + 14} y={tipY + 39} fill={tc} fontSize="19" fontWeight="800">
             {tooltip.value}
-            <tspan fill="#475569" fontSize="11" fontWeight="400">
+            <tspan fill="var(--text-muted)" fontSize="11" fontWeight="400">
               {" "}
               / 4
             </tspan>
           </text>
           <polygon
             points={`${tipX + tooltipW / 2 - 7},${tipY + tooltipH} ${tipX + tooltipW / 2 + 7},${tipY + tooltipH} ${tipX + tooltipW / 2},${tipY + tooltipH + 10}`}
-            fill="#1e293b"
+            fill="var(--bg-card)"
             stroke={tc}
             strokeWidth={1.5}
             strokeLinejoin="round"
           />
           <polygon
             points={`${tipX + tooltipW / 2 - 5},${tipY + tooltipH - 1} ${tipX + tooltipW / 2 + 5},${tipY + tooltipH - 1} ${tipX + tooltipW / 2},${tipY + tooltipH + 8}`}
-            fill="#1e293b"
+            fill="var(--bg-card)"
           />
         </g>
       )}

src/components/RiskRadar.jsx

@@ -259,7 +259,7 @@ export default function RiskRadar() {
                 <div className={styles.lockedSummary}>
                   <span className={styles.lockedIcon}>🔒</span>
                   <span className={styles.lockedText}>
-                    {lockedCount} locked {lockedCount !== 1 ? t.measures : t.measure}
+                    {lockedCount} {t.locked} {lockedCount !== 1 ? t.measures : t.measure}
                     {" — "}
                     {locked.map((g, i) => (
                       <span key={g.tier}>

src/constants.js

@@ -12,13 +12,3 @@ export const TYPE_COLORS = {
   probabilistic: { color: "#a78bfa", bg: "#3b0764" },
   organizational: { color: "#fb923c", bg: "#7c2d12" },
 };
-
-// export const VERSION = "1.5.2";
-
-// export const TIER_BG = ["#10b981", "#f59e0b", "#f97316", "#ef4444"];
-
-// export const TYPE_COLORS = {
-//   deterministic: { color: "#38bdf8", bg: "#0c4a6e" },
-//   probabilistic: { color: "#a78bfa", bg: "#3b0764" },
-//   organizational: { color: "#fb923c", bg: "#7c2d12" },
-// };

src/i18n.js

@@ -14,6 +14,8 @@ const T = {
     mitigationHeading: "Erforderliche Mitigationsmaßnahmen",
     measures: "Maßnahmen",
     measure: "Maßnahme",
+    locked: "gesperrt",
+    unlocksAtTier: (tier) => `Verfügbar ab Tier ${tier}`,
     docsButton: "Dokumentation",
     closeButton: "Schließen",
     langSwitch: "EN",
@@ -374,6 +376,8 @@ Quellcode der Skills: https://github.com/LLM-Coding/vibe-coding-risk-radar/tree/
     mitigationHeading: "Required Mitigation Measures",
     measures: "measures",
     measure: "measure",
+    locked: "locked",
+    unlocksAtTier: (tier) => `Unlocks at Tier ${tier}`,
     docsButton: "Documentation",
     closeButton: "Close",
     langSwitch: "DE",

src/utils.js

@@ -8,32 +8,7 @@ export function polarToCartesian(cx, cy, r, angleDeg) {
   return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
 }
 
-export function getOffsetPosition(cx, cy, r, angleDeg, offset = 0) {
-  const base = polarToCartesian(cx, cy, r, angleDeg);
-  if (offset === 0) return base;
-  const rad = ((angleDeg - 90) * Math.PI) / 180;
-  return {
-    x: base.x + offset * Math.cos(rad),
-    y: base.y + offset * Math.sin(rad),
-  };
-}
-
 export function detectBrowserLanguage() {
   const nav = navigator.language || navigator.userLanguage || "";
   return nav.startsWith("de") ? "de" : "en";
 }
-
-// export function getTierIndex(values) {
-//   const mx = Math.max(...Object.values(values));
-//   return mx <= 1 ? 0 : mx <= 2 ? 1 : mx <= 3 ? 2 : 3;
-// }
-
-// export function polarToCartesian(cx, cy, r, angleDeg) {
-//   const rad = ((angleDeg - 90) * Math.PI) / 180;
-//   return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
-// }
-
-// export function detectBrowserLanguage() {
-//   const nav = navigator.language || navigator.userLanguage || "";
-//   return nav.startsWith("de") ? "de" : "en";
-// }