diff --git a/src/App.tsx b/src/App.tsx
index afe77d2..47001c0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -64,6 +64,7 @@ import { Viewport3D } from "./viewport/Viewport3D";
 import type { DisplayResolver, ViewportContextInfo } from "./viewport/Viewport3D";
 import { ResourceManager } from "./ui/ResourceManager";
 import type { ResourceManagerHandlers } from "./ui/ResourceManager";
+import { HatchSwatch } from "./ui/hatchPreview";
 import { TopBar } from "./ui/TopBar";
 import { TextEditorDialog } from "./ui/TextEditorDialog";
 import { RoomStampEditor } from "./panels/RoomStampEditor";
@@ -3372,6 +3373,30 @@ export default function App() {
                   <span className="editor-unit">{t("editor.unit.mm")}</span>
                 </span>
               </EditorField>
+              <EditorField label={t("editor.hatch")}>
+                <span className="editor-hatch">
+                  <select
+                    value={cat.hatch ?? ""}
+                    onChange={(e) =>
+                      patchCategory(cat.code, {
+                        hatch: e.target.value || undefined,
+                      })
+                    }
+                  >
+                    <option value="">{t("resources.viewHatch.none")}</option>
+                    {project.hatches.map((h) => (
+                      <option key={h.id} value={h.id}>
+                        {h.name}
+                      </option>
+                    ))}
+                  </select>
+                  {cat.hatch &&
+                    (() => {
+                      const h = project.hatches.find((ht) => ht.id === cat.hatch);
+                      return h ? <HatchSwatch hatch={h} size={26} /> : null;
+                    })()}
+                </span>
+              </EditorField>
             </InlineEditor>
           );
         })()}
diff --git a/src/i18n/de.ts b/src/i18n/de.ts
index 98634e6..9d42ac1 100644
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@@ -403,6 +403,7 @@ export const de = {
   "editor.name": "Name",
   "editor.color": "Farbe",
   "editor.lineWeight": "Linienstärke",
+  "editor.hatch": "Schraffur",
   "editor.floorHeight": "Geschosshöhe",
   "editor.cutHeight": "Schnitthöhe",
   "editor.unit.mm": "mm",
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 2b94d8a..83c1f84 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -400,6 +400,7 @@ export const en: Record<TranslationKey, string> = {
   "editor.name": "Name",
   "editor.color": "Color",
   "editor.lineWeight": "Line weight",
+  "editor.hatch": "Hatch",
   "editor.floorHeight": "Floor height",
   "editor.cutHeight": "Cut height",
   "editor.unit.mm": "mm",
diff --git a/src/styles.css b/src/styles.css
index 9cc41f6..60e4ca2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3298,6 +3298,37 @@ body {
   border-color: rgba(255, 255, 255, 0.4);
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
 }
+/* Auswahlfelder (z. B. Schraffur) wie die Text-/Zahlenfelder gestaltet. */
+.editor-control select {
+  width: 100%;
+  padding: 5px 8px;
+  background: #1f1f1f;
+  border: 1px solid var(--ctx-border);
+  border-radius: 7px;
+  color: var(--ctx-text);
+  font-family: inherit;
+  font-size: 13px;
+}
+.editor-control select:focus {
+  outline: none;
+  border-color: rgba(255, 255, 255, 0.4);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
+}
+/* Schraffur-Auswahl + kleine Vorschau nebeneinander. */
+.editor-hatch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+}
+.editor-hatch select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.editor-hatch svg {
+  flex: 0 0 auto;
+}
 /* Farbwähler als kompakter Swatch. */
 .editor-control input[type="color"] {
   width: 40px;