Finanzen: Einstellungen, Bankzugang, Fixkosten und Bankrueckkehr ohne Karten

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

src/pages/BankCallbackPage.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
-import { PageHeader, Card, Button } from '../components/ui'
+import { PageHeader, Button } from '../components/ui'
 import { completeBankAuth } from '../lib/financeApi'
 import { dateDe } from '../lib/financeFormat'
 import { parseCallback, successResult, failureResult, isResult } from '../lib/bankCallback'
@@ -38,28 +38,25 @@ export default function BankCallbackPage() {
   if (result) {
     body = (
       <>
-        <p role={result.ok ? 'status' : 'alert'} style={{ fontWeight: 600 }}>
+        <p className={`msg ${result.ok ? 'ok' : 'err'} fin-result`} role={result.ok ? 'status' : 'alert'}>
           {result.ok
             ? `Bankzugang erneuert, gültig bis ${dateDe(result.validUntil)}`
             : result.message}
         </p>
-        <div style={{ marginTop: 16 }}>
+        <div className="fin-form-actions">
           <Button as={Link} variant="primary" to="/finance">Zu den Finanzen</Button>
         </div>
       </>
     )
   } else if (params) {
     body = (
-      <div className="text-center" role="status">
-        <div className="spinner" />
-        <p className="muted">Bankzugang wird eingerichtet …</p>
-      </div>
+      <div className="loading" role="status">Bankzugang wird eingerichtet …</div>
     )
   } else {
     body = (
       <>
         <p className="muted">Zu dieser Seite liegt keine Rückmeldung der Bank vor.</p>
-        <div style={{ marginTop: 16 }}>
+        <div className="fin-form-actions">
           <Button as={Link} variant="primary" to="/finance">Zu den Finanzen</Button>
         </div>
       </>
@@ -69,7 +66,7 @@ export default function BankCallbackPage() {
   return (
     <div className="page">
       <PageHeader title="Bankzugang" />
-      <Card>{body}</Card>
+      {body}
     </div>
   )
 }

src/pages/FinanceSettingsPage.jsx

@@ -1,5 +1,4 @@
 import { Link } from 'react-router-dom'
-import { FaArrowLeft } from 'react-icons/fa6'
 import { PageHeader, Button } from '../components/ui'
 import SettingsCard from '../components/finance/SettingsCard'
 import BankAccessCard from '../components/finance/BankAccessCard'
@@ -7,7 +6,7 @@ import FixedCostsCard from '../components/finance/FixedCostsCard'
 
 /**
  * Finanzen / Einstellungen (/finance/einstellungen, nur Admins): Rücklagen und Bankverbindungstext, Bankzugang
- * (Status, Abruf, neu verbinden) und die Fixkostenliste. Jede Karte lädt und speichert für sich.
+ * (Status, Abruf, neu verbinden) und die Fixkostenliste. Jeder Abschnitt lädt und speichert für sich.
  */
 export default function FinanceSettingsPage() {
   return (
@@ -16,8 +15,8 @@ export default function FinanceSettingsPage() {
         title="Finanzen: Einstellungen"
         subtitle="Rücklagen, Bankzugang und Fixkosten"
         actions={
-          <Button as={Link} variant="ghost" to="/finance">
-            <FaArrowLeft aria-hidden="true" /> Zurück zu den Finanzen
+          <Button as={Link} to="/finance">
+            ← Zurück zu den Finanzen
           </Button>
         }
       />