diff --git a/web/src/components/CategorySelect.jsx b/web/src/components/CategorySelect.jsx
index 9019fd7..00c6892 100644
--- a/web/src/components/CategorySelect.jsx
+++ b/web/src/components/CategorySelect.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import Icon from "./Icon";
+import CategoryPathLabel from "./CategoryPathLabel";
 
 /**
  * Aufklappbarer Kategorie-Baum als Auswahlfeld – Ersatz für die früheren, mit
@@ -39,6 +40,23 @@ export default function CategorySelect({
   const selectedId = !isRoot && !extra ? value : null;
   const label = isRoot ? rootLabel : extra ? extra.label : nameById[selectedId] ?? rootLabel;
 
+  // Voller Pfad der gewählten Kategorie (Oberkategorien → Blatt), damit im
+  // geschlossenen Feld sichtbar bleibt, WELCHE „Früchte" gemeint sind (z.B.
+  // „TK → Früchte" statt nur „Früchte").
+  function pathPartsFor(id) {
+    const parts = [];
+    let cur = id;
+    const gesehen = new Set();
+    while (cur != null && idset.has(cur) && !gesehen.has(cur)) {
+      gesehen.add(cur);
+      parts.unshift(nameById[cur]);
+      cur = parentById[cur];
+    }
+    return parts;
+  }
+  const selectedParts = selectedId != null && nameById[selectedId] != null
+    ? pathPartsFor(selectedId) : null;
+
   function place() {
     const r = btnRef.current?.getBoundingClientRect();
     if (r) setPos({ left: r.left, top: r.bottom + 4, width: r.width });
@@ -108,7 +126,9 @@ export default function CategorySelect({
         aria-expanded={open}
         onClick={() => setOpen((o) => !o)}
       >
-        <span className={isRoot ? "muted" : ""}>{label}</span>
+        <span className={isRoot ? "muted" : ""}>
+          {selectedParts ? <CategoryPathLabel parts={selectedParts} /> : label}
+        </span>
         <Icon name="chevronRight" size={13} className={`caret ${open ? "open" : ""}`} />
       </button>