grafische kostenübersicht added

backend/public/css/style.css

@@ -312,6 +312,63 @@ color:#555;
     margin-bottom:10px;
 }
 
+#costChart{
+    margin-top:18px;
+}
+
+.cost-bar{
+    display:flex;
+    height:18px;
+    overflow:hidden;
+    border-radius:999px;
+    background:#e2e8f0;
+    border:1px solid #cbd5e1;
+}
+
+.cost-segment{
+    min-width:3px;
+    background:hsl(calc(205 + (var(--segment-index) * 31)), 72%, 48%);
+}
+
+.cost-segment.domains{
+    background:#0f766e;
+}
+
+.cost-breakdown{
+    margin-top:12px;
+    display:grid;
+    gap:6px;
+}
+
+.cost-row{
+    display:grid;
+    grid-template-columns:16px minmax(160px, 1fr) auto auto;
+    align-items:center;
+    gap:8px;
+    font-size:13px;
+}
+
+.cost-dot{
+    width:10px;
+    height:10px;
+    border-radius:999px;
+    background:hsl(calc(205 + (var(--segment-index) * 31)), 72%, 48%);
+}
+
+.cost-dot.domains{
+    background:#0f766e;
+}
+
+.cost-label{
+    font-weight:600;
+}
+
+.cost-value,
+.cost-share,
+.cost-empty{
+    color:#64748b;
+}
+
 .tabs{
     display:flex;
     flex-wrap:wrap;
@@ -532,3 +589,14 @@ body.dark .infra-ip{
 body.dark .system{
     color:#cbd5e1;
 }
+
+body.dark .cost-bar{
+    background:#334155;
+    border-color:#475569;
+}
+
+body.dark .cost-value,
+body.dark .cost-share,
+body.dark .cost-empty{
+    color:#94a3b8;
+}