fix: Kategorien-Seite als durchgehende Liste statt abgesetzter Gruppen-Karten

Gruppen erscheinen nur noch als dezente Zwischenüberschrift; die Kategorien
laufen als schlichte Zeilen mit dünnem Trenner durch (eine Karte).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/finance.css

@@ -149,32 +149,37 @@
   font-size: 0.8rem;
 }
 
-/* Kategorie-Gruppe (Verwaltung). */
-.cat-group + .cat-group {
-  margin-top: var(--sp-4);
+/* Kategorien-Verwaltung: durchgehende Liste in EINER Karte, die Gruppen nur als
+   dezente Zwischenüberschrift dazwischen (keine abgesetzten Gruppen-Karten). */
+.cat-section + .cat-section {
+  margin-top: var(--sp-5);
 }
-.cat-group-head {
+.cat-section-head {
   display: flex;
   align-items: center;
-  gap: var(--sp-3);
-  margin-bottom: var(--sp-2);
+  gap: var(--sp-2);
+  padding-bottom: var(--sp-2);
+  margin-bottom: 2px;
+  border-bottom: 2px solid var(--border-strong);
 }
-.cat-group-head h2 {
-  margin: 0;
-}
-.cat-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+.cat-section-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 1.05rem;
+  font-weight: 650;
 }
 .cat-row {
   display: flex;
   align-items: center;
   gap: var(--sp-3);
-  padding: var(--sp-2) var(--sp-3);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
+  padding: 9px 4px;
+  border-bottom: 1px solid var(--border);
+}
+.cat-section .cat-row:last-child {
+  border-bottom: none;
+}
+.cat-row:hover {
+  background: var(--surface-2);
 }
 .cat-row .grow {
   flex: 1;

web/src/pages/Categories.jsx

@@ -209,28 +209,28 @@ export default function Categories() {
         </button>
       </div>
 
-      {groups.map((g) => (
-        <div className="card cat-group" key={g.id}>
-          <div className="cat-group-head">
-            <IconChip name={g.icon} color={g.color} />
-            <h2 className="grow">{g.name}</h2>
-            <span className={`badge ${g.kind === "income" ? "ok" : ""}`}>
-              {g.kind === "income" ? t("categories.income") : t("categories.expense")}
-            </span>
-            <button className="btn sm ghost" title={t("categories.newCategory")} onClick={() => openCategory(g.id)}>
-              <Icon name="plus" size={15} />
-            </button>
-            <button className="btn sm ghost" title={t("common.edit")} onClick={() => openGroup(g)}>
-              <Icon name="edit" size={15} />
-            </button>
-            <button className="btn sm danger" title={t("common.delete")} onClick={() => loeschenGruppe(g)}>
-              <Icon name="trash" size={15} />
-            </button>
-          </div>
-          <div className="cat-list">
+      <div className="card">
+        {groups.map((g) => (
+          <div className="cat-section" key={g.id}>
+            <div className="cat-section-head">
+              <IconChip name={g.icon} color={g.color} size={24} />
+              <span className="cat-section-name">{g.name}</span>
+              <span className={`badge ${g.kind === "income" ? "ok" : ""}`}>
+                {g.kind === "income" ? t("categories.income") : t("categories.expense")}
+              </span>
+              <button className="btn sm ghost" title={t("categories.newCategory")} onClick={() => openCategory(g.id)}>
+                <Icon name="plus" size={15} />
+              </button>
+              <button className="btn sm ghost" title={t("common.edit")} onClick={() => openGroup(g)}>
+                <Icon name="edit" size={15} />
+              </button>
+              <button className="btn sm danger" title={t("common.delete")} onClick={() => loeschenGruppe(g)}>
+                <Icon name="trash" size={15} />
+              </button>
+            </div>
             {g.categories.map((c) => (
               <div className="cat-row" key={c.id}>
-                <IconChip name={c.icon} color={c.color} size={28} />
+                <IconChip name={c.icon} color={c.color} size={26} />
                 <span className="grow">{c.name}</span>
                 <button className="btn sm ghost" title={t("categories.keywordsBtn")} onClick={() => setKeywordCat(c)}>
                   <Icon name="tags" size={14} />
@@ -243,10 +243,13 @@ export default function Categories() {
                 </button>
               </div>
             ))}
-            {g.categories.length === 0 && <div className="muted small">{t("categories.emptyGroup")}</div>}
+            {g.categories.length === 0 && (
+              <div className="muted small" style={{ padding: "var(--sp-2) 4px" }}>{t("categories.emptyGroup")}</div>
+            )}
           </div>
-        </div>
-      ))}
+        ))}
+        {groups.length === 0 && <div className="empty-state">{t("categories.emptyGroup")}</div>}
+      </div>
 
       {modal && (
         <Modal