Finanzen: Seitenkopf, Statuszeile, Kennzahlen und Aufgaben ohne Karten; Kpi entfernt

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/finance/LiquidityHead.jsx

@@ -1,8 +1,8 @@
 import { useId, useState } from 'react'
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa6'
-import { Kpi } from '../ui'
+import { Stat } from '../ui'
 import { euroWhole } from '../../lib/financeFormat'
 import { breakdownRows, lowPointLines } from '../../lib/financeView'
+import { isNegText } from '../../lib/financeUi'
 
 const isNum = (v) => typeof v === 'number' && Number.isFinite(v)
 
@@ -15,20 +15,21 @@ export default function LiquidityHead({ kopf }) {
   const hasBalance = isNum(k.kontostandCents)
   const shortfall = isNum(k.verfuegbarCents) && k.verfuegbarCents < 0
   const lows = lowPointLines(k)
-  const anyLowNegative = lows.some((l) => l && l.negative)
+  const balanceText = euroWhole(k.kontostandCents)
 
   return (
-    <div className="kpi-grid fin-head">
-      <Kpi
+    <div className="stats fin-head">
+      <Stat
         label="Kontostand"
-        value={euroWhole(k.kontostandCents)}
+        value={balanceText}
+        tone={isNegText(balanceText) ? 'neg' : ''}
         sub={hasBalance ? 'gebucht' : 'Noch kein Kontostand abgerufen'}
       />
 
-      <Kpi
+      <Stat
         label="Verfügbar nach Rücklagen"
         value={euroWhole(k.verfuegbarCents)}
-        accent={shortfall ? 'var(--danger)' : 'var(--accent)'}
+        tone={shortfall ? 'neg' : ''}
         sub={
           <>
             {shortfall && <div className="fin-flag">Rücklagen nicht gedeckt</div>}
@@ -36,12 +37,12 @@ export default function LiquidityHead({ kopf }) {
               <>
                 <button
                   type="button"
-                  className="fin-link"
+                  className="link"
                   aria-expanded={open}
                   aria-controls={listId}
                   onClick={() => setOpen((v) => !v)}
                 >
-                  Aufschlüsselung {open ? <FaChevronUp aria-hidden="true" /> : <FaChevronDown aria-hidden="true" />}
+                  Aufschlüsselung <span aria-hidden="true">{open ? '▴' : '▾'}</span>
                 </button>
                 {open && (
                   <ul id={listId} className="fin-breakdown">
@@ -60,9 +61,8 @@ export default function LiquidityHead({ kopf }) {
         }
       />
 
-      <Kpi
+      <Stat
         label="Tiefster Stand in 30 Tagen"
-        accent={anyLowNegative ? 'var(--danger)' : 'var(--info)'}
         value={
           lows.some(Boolean) ? (
             <div className="fin-lows">
@@ -71,7 +71,7 @@ export default function LiquidityHead({ kopf }) {
                   low && (
                     <div key={low.key} className="fin-low">
                       <span className="fin-low-label">{low.label}:</span>
-                      <span className="fin-amount">{low.amountText}</span>
+                      <span className={`fin-amount${low.negative ? ' fin-neg' : ''}`}>{low.amountText}</span>
                       <span className="fin-low-when">
                         am {low.dateText}
                         {low.negative && <span className="fin-flag"> · im Minus</span>}