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>}

src/components/finance/StatusLine.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
-import { FaRotate, FaTriangleExclamation } from 'react-icons/fa6'
 import { Button } from '../ui'
 import { statusItems } from '../../lib/financeView'
+import { noticeProps } from '../../lib/financeUi'
 
 /**
  * Block 0: Stand von Bank und Stripe in einer Zeile und der Knopf „Aktualisieren“.
@@ -37,21 +37,15 @@ export default function StatusLine({ stand, onRefresh, refreshing = false }) {
         <div className="fin-status-items">
           {items.map((item) => (
             <span key={item.key} className={`fin-status-item${item.ok ? '' : ' fin-status-warn'}`}>
-              {!item.ok && <FaTriangleExclamation aria-hidden="true" />}
               {item.text}
             </span>
           ))}
         </div>
-        <Button size="sm" variant="ghost" onClick={handleRefresh} disabled={refreshing}>
-          <FaRotate className={refreshing ? 'fin-spin' : undefined} aria-hidden="true" />{' '}
+        <Button onClick={handleRefresh} disabled={refreshing}>
           {refreshing ? 'Aktualisiere …' : 'Aktualisieren'}
         </Button>
       </div>
-      {hint && (
-        <p className={`fin-hint${hint.limited ? '' : ' fin-hint-warn'}`} role={hint.limited ? 'status' : 'alert'}>
-          {hint.text}
-        </p>
-      )}
+      {hint && <p {...noticeProps(hint.limited ? 'info' : 'warn', 'fin-notice')}>{hint.text}</p>}
     </div>
   )
 }

src/components/finance/TodoList.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { Badge, Button, Card, EmptyState } from '../ui'
+import { Badge, Card, EmptyState } from '../ui'
 import { TODO_LIMIT, todoButtonLabel, todoKey, urgencyOf, visibleTodos } from '../../lib/financeView'
 
 /**
@@ -35,12 +35,7 @@ export default function TodoList({ aufgaben, onAction }) {
   }
 
   return (
-    <Card
-      title="Zu erledigen"
-      actions={total > 0 ? <Badge tone="muted">{total} offen</Badge> : null}
-      className="fin-todo-card"
-      bodyStyle={{ padding: 0 }}
-    >
+    <Card title="Zu erledigen" actions={total > 0 ? <Badge tone="muted">{total} offen</Badge> : null}>
       {total === 0 ? (
         <EmptyState title="Nichts offen" />
       ) : (
@@ -51,31 +46,31 @@ export default function TodoList({ aufgaben, onAction }) {
               const urgency = urgencyOf(todo)
               const label = todoButtonLabel(todo)
               return (
-                <li key={key} className={`fin-todo fin-todo-${todo.dringlichkeit || 'info'}`}>
+                <li key={key} className="fin-todo">
                   <Badge tone={urgency.tone}>{urgency.label}</Badge>
-                  <div className="fin-todo-main">
+                  <div>
                     <div className="fin-todo-title">{todo.titel}</div>
                     {todo.text && <div className="fin-todo-text muted">{todo.text}</div>}
                     {failure?.key === key && (
-                      <div className="fin-hint fin-hint-warn" role="alert">
+                      <div className="msg warn" role="alert">
                         {failure.message}
                       </div>
                     )}
                   </div>
                   {label && (
-                    <Button size="sm" onClick={() => run(todo, key)} disabled={running !== null}>
+                    <button type="button" className="link" onClick={() => run(todo, key)} disabled={running !== null}>
                       {running === key ? 'Moment …' : label}
-                    </Button>
+                    </button>
                   )}
                 </li>
               )
             })}
           </ul>
           {total > TODO_LIMIT && (
-            <div className="fin-todos-more">
-              <Button size="sm" variant="ghost" onClick={() => setExpanded((v) => !v)}>
+            <div className="table-foot">
+              <button type="button" className="link" onClick={() => setExpanded((v) => !v)}>
                 {expanded ? 'Weniger anzeigen' : `Alle ${total} anzeigen`}
-              </Button>
+              </button>
             </div>
           )}
         </>

src/components/ui/Kpi.jsx

@@ -1,6 +0,0 @@
-import Stat from './Stat'
-
-// Altname fuer Stat (wird in P7 geloescht); "icon" wird ignoriert, die Warnfarbe wird zu 'neg'
-export default function Kpi({ label, value, sub, icon, accent }) {
-  return <Stat label={label} value={value} sub={sub} tone={accent === 'var(--danger)' ? 'neg' : ''} />
-}

src/components/ui/index.js

@@ -7,7 +7,6 @@ export { default as Tabs } from './Tabs'
 export { default as EmptyState } from './EmptyState'
 export { default as Field } from './Field'
 export { default as Stat } from './Stat'
-export { default as Kpi } from './Kpi'
 export { default as AutocompleteInput } from './AutocompleteInput'
 export { default as DateTimeInput } from './DateTimeInput'
 export { default as DurationSelect } from './DurationSelect'

src/pages/FinancePage.jsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import { FaGear, FaSpinner } from 'react-icons/fa6'
-import { PageHeader, Card, Button } from '../components/ui'
+import { PageHeader, Button } from '../components/ui'
 import StatusLine from '../components/finance/StatusLine'
 import LiquidityHead from '../components/finance/LiquidityHead'
 import TodoList from '../components/finance/TodoList'
@@ -16,6 +15,7 @@ import { useFinanceTransactions } from '../hooks/useFinanceTransactions'
 import { useOpenInvoices } from '../hooks/useOpenInvoices'
 import { createFixedCost, refreshBank, startBankAuth } from '../lib/financeApi'
 import { planTodoAction, safeUrl } from '../lib/financeView'
+import { noticeProps } from '../lib/financeUi'
 
 export default function FinancePage() {
   const navigate = useNavigate()
@@ -139,29 +139,30 @@ export default function FinancePage() {
   let body
   if (!data && loading) {
     body = (
-      <div className="empty" role="status">
-        <FaSpinner className="spinner" aria-hidden="true" />
-        <p className="muted">Finanzen werden geladen …</p>
+      <div className="loading" role="status">
+        Finanzen werden geladen …
       </div>
     )
   } else if (!data) {
     body = (
-      <Card>
-        <p role="alert" style={{ fontWeight: 600, marginTop: 0 }}>{error || 'Die Übersicht konnte nicht geladen werden.'}</p>
+      <div className="fin-load-error">
+        <p className="msg err" role="alert">{error || 'Die Übersicht konnte nicht geladen werden.'}</p>
         <Button variant="primary" onClick={reload}>Erneut versuchen</Button>
-      </Card>
+      </div>
     )
   } else {
     body = (
       <div className="fin-stack">
         {error && (
-          <p className="fin-hint fin-hint-warn" role="alert">
+          <p {...noticeProps('warn')}>
             Die Übersicht konnte nicht neu geladen werden: {error}{' '}
-            <Button size="sm" variant="ghost" onClick={reload} disabled={loading}>Erneut versuchen</Button>
+            <button type="button" className="link" onClick={reload} disabled={loading}>Erneut versuchen</button>
           </p>
         )}
-        <StatusLine stand={data.stand} onRefresh={refresh} refreshing={refreshing} />
-        <LiquidityHead kopf={data.kopf} />
+        <div className="fin-top">
+          <StatusLine stand={data.stand} onRefresh={refresh} refreshing={refreshing} />
+          <LiquidityHead kopf={data.kopf} />
+        </div>
         <TodoList aufgaben={data.aufgaben} onAction={handleAction} />
         <div className="fin-cols">
           <ForecastTable
@@ -195,15 +196,13 @@ export default function FinancePage() {
         title="Finanzen"
         subtitle="Kontostand, Aufgaben und Zahlungen im Blick"
         actions={
-          <Button as={Link} variant="ghost" to="/finance/einstellungen">
-            <FaGear aria-hidden="true" /> Einstellungen
-          </Button>
+          <Button as={Link} to="/finance/einstellungen">Einstellungen</Button>
         }
       />
       {assignNotice && (
-        <p className="fin-hint fin-hint-warn fin-page-notice" role="alert">
+        <p {...noticeProps('warn', 'fin-page-notice')}>
           {assignNotice}{' '}
-          <Button size="sm" variant="ghost" onClick={() => setAssignNotice('')}>Schließen</Button>
+          <button type="button" className="link" onClick={() => setAssignNotice('')}>Schließen</button>
         </p>
       )}
       {body}

src/styles/global.css

@@ -633,14 +633,40 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
   .legal-contracts { display: block; overflow-x: auto; }
 }
 
+/* ===== FINANZEN (P7) ===== */
 /* --- Finanzen --- */
+button.link-danger { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; }
+
+/* Allgemein: Seitengeruest, Betraege, Meldungen, Spalten. Rot gilt fuer einen Betrag, dessen Text mit dem Minuszeichen beginnt. */
 .fin-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
-.fin-stack { display: flex; flex-direction: column; gap: var(--sp-5); }
-.fin-stack .kpi-grid { margin-bottom: 0; }
+.fin-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.fin-neg, .fin-flag { color: var(--red-fg); }
+.fin-flag { font-weight: 600; }
+.fin-stack > * + * { margin-top: 36px; }
+.fin-top { display: flex; flex-direction: column; gap: 20px; }
+.fin-block { scroll-margin-top: 16px; }
+.fin-body { container-type: inline-size; }
+.fin-table-wrap { overflow-x: auto; }
+.fin-notice, .fin-page-notice { margin: 0 0 8px; }
+.fin-page-notice { margin-bottom: 16px; }
+.fin-load-error { display: grid; gap: 12px; justify-items: start; padding: 16px 0; }
+/* Die einspaltige Reihe bekommt ihren Zeilenabstand vom Abschnittsabstand (36 px). Die Regel steht mit hoeherer Spezifitaet hier, weil KOMPAT */
+/* .fin-cols > section + section auf 0 setzt; ab 1100 px stehen die Spalten nebeneinander und beginnen auf gleicher Hoehe. */
+.fin-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; align-items: start; }
+.fin-stack .fin-cols > section + section { margin-top: 36px; }
+@media (min-width: 1100px) {
+  .fin-cols { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
+  .fin-cols-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .fin-stack .fin-cols > section + section { margin-top: 0; }
+}
+@media (max-width: 860px) {
+  .fin-block { scroll-margin-top: 68px; } /* unter der 52 px hohen Mobil-Leiste 16 px Luft */
+}
+
+/* Uebergang: diese Regeln fallen, sobald keine Datei mehr die Klassen benutzt (Hinweis, Drehknopf, Textknopf der Tabellen und Formulare) */
 .fin-spin { animation: spin 1s linear infinite; }
 .fin-hint { margin: 0; font-size: 13px; color: var(--text-muted); }
 .fin-hint-warn { color: var(--warn); }
-.fin-flag { color: var(--danger); font-weight: 700; }
 .fin-link {
   background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
   color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
@@ -648,61 +674,42 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
 }
 .fin-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
 
-/* Block 0: Statuszeile */
-.fin-status-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
-.fin-status {
-  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
-  padding: 10px 14px; font-size: 13px; color: var(--text-muted);
-  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md);
-}
-.fin-status-items { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); min-width: 0; }
-.fin-status-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
-.fin-status-warn { color: var(--warn); font-weight: 600; }
+/* Block 0: Statuszeile (ohne Kasten) */
+.fin-status-wrap > .fin-notice { margin: 8px 0 0; }
+.fin-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--text-2); }
+.fin-status-items { display: flex; flex-wrap: wrap; gap: 4px 24px; min-width: 0; }
+.fin-status-item { min-width: 0; overflow-wrap: anywhere; }
+.fin-status-warn { color: var(--orange-fg); font-weight: 600; }
 
-/* Block 1: Liquiditaetskopf */
-.fin-head .kpi-value { font-variant-numeric: tabular-nums; }
-.fin-breakdown { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 4px; color: var(--text-muted); }
-.fin-breakdown li { display: flex; justify-content: space-between; gap: var(--sp-3); }
+/* Block 1: Liquiditaetskopf. Die Doppelklasse schlaegt die Handy-Regel von .stats (3 Spalten wuerden die breite dritte Kennzahl abschneiden). */
+.stats.fin-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 48px; margin: 0; }
+.stats.fin-head .sub { font-size: 13px; line-height: 20px; color: var(--text-2); }
+.fin-breakdown { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
+.fin-breakdown li { display: flex; justify-content: space-between; gap: 12px; }
 .fin-breakdown .fin-amount { color: var(--text); }
-.fin-breakdown-total { border-top: 1px solid var(--border-strong); padding-top: 4px; font-weight: 700; color: var(--text); }
-.fin-lows { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 10px; align-items: baseline; font-size: 14px; font-weight: 600; }
+.fin-breakdown-total { border-top: 1px solid var(--line); padding-top: 4px; font-weight: 600; color: var(--text); }
+.fin-lows { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
 .fin-low { display: contents; }
-.fin-low-label { color: var(--text-muted); }
-.fin-low .fin-amount { font-size: 20px; font-weight: 800; }
-.fin-low-when { color: var(--text-muted); font-size: 13px; font-weight: 500; }
+.fin-low-label, .fin-low-when { font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
+.fin-low .fin-amount { font-size: 18px; line-height: 26px; font-weight: 600; }
 
 /* Block 2: Zu erledigen */
-.fin-todo-card { overflow: hidden; }
-.fin-todos { list-style: none; margin: 0; padding: 0; }
-.fin-todo {
-  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start;
-  padding: 12px var(--sp-4); border-bottom: 1px solid var(--border); border-left: 3px solid var(--border);
-}
-.fin-todo:last-child { border-bottom: none; }
-.fin-todo-hoch { border-left-color: var(--danger); }
-.fin-todo-mittel { border-left-color: var(--warn); }
+.fin-todos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
+.fin-todo { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
 .fin-todo .badge { justify-self: start; }
-.fin-todo-title { font-weight: 700; }
+.fin-todo .link { justify-self: end; white-space: nowrap; }
+.fin-todo-title { font-weight: 600; }
 .fin-todo-text { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
-.fin-todo .fin-hint { margin-top: 6px; }
-.fin-todos-more { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
-@media (max-width: 720px) {
-  .fin-todo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
-  .fin-todo .ui-btn { justify-self: start; }
+.fin-todo .msg { margin-top: 6px; }
+@media (max-width: 860px) {
+  .fin-todo { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+  .fin-todo .link { justify-self: start; }
 }
 
 /* Bloecke 3-5: Vorschau, Steuer, Abos */
-.fin-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-.fin-neg { color: var(--danger); }
-.fin-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
-@media (min-width: 1100px) {
-  .fin-cols { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
-  .fin-cols-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
 
 /* Block 3: Vorschau (Tabelle; in einer schmalen Karte wird jede Zeile zweizeilig) */
 .fin-forecast-card { container-type: inline-size; overflow: hidden; }
-.fin-table-wrap { overflow-x: auto; }
 .fin-forecast th, .fin-forecast td { padding: 9px 10px; vertical-align: baseline; }
 .fin-forecast th.fin-amount { text-align: right; }
 .fin-forecast th:first-child, .fin-forecast td:first-child { padding-left: var(--sp-4); }
@@ -769,13 +776,9 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
 .fin-abo-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); font-size: 13px; }
 
 /* Block 6 und 7: Rechnungen und Buchungen (Tabellen; in einer schmalen Karte wird jede Zeile ein Raster) */
-.fin-block { scroll-margin-top: var(--sp-4); }
 .fin-invoices-card, .fin-tx-card { container-type: inline-size; overflow: hidden; }
 .fin-toolbar { padding: var(--sp-3) var(--sp-4); }
 .fin-toolbar .seg { flex-wrap: wrap; max-width: 100%; }
-.fin-notice { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
-.fin-load-error { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-4); }
-.fin-page-notice { margin-bottom: var(--sp-4); }
 .fin-ages {
   list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
   display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3);
@@ -954,6 +957,8 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
   .fin-bank-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
 }
 
+/* ===== ENDE FINANZEN ===== */
+
 /* ===== Tickets (P2) ===== */
 /* Arbeitsblatt-Zeilen, Zeilenlinks, Nachladen und Unterstuetzungs-Zeile. Steht direkt vor KOMPAT: gewinnt ueber die Bausteinregeln */
 /* oberhalb durch die Reihenfolge, nie durch eine Erzwingung. */
@@ -1340,6 +1345,4 @@ div.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
 .page .field { margin-bottom: 12px; }
 .dialog-body .field, .field-row .field, .field-row-3 .field, .kv .field { margin-bottom: 0; }
 
-/* Kennzahlen nebeneinander (LiquidityHead), bis P7 sie ersetzt */
-.kpi-grid { display: flex; flex-wrap: wrap; gap: 48px; }
 /* ===== ENDE KOMPAT ===== */