From b5df4a34b478b82960537f6ca286d7b541545eca Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sun, 25 Oct 2026 13:13:11 +0100
Subject: [PATCH] feat(tasks): customizable kanban columns, task detail page,
 hashtag filtering and clean task list

---
 .../features/triage/ManageColumnsModal.tsx    |  295 ++++
 .../src/features/triage/TaskDetailModal.tsx   |  665 ++++++++
 frontend/src/features/triage/TasksView.tsx    | 1451 +++++++++--------
 frontend/src/lib/api.ts                       |    9 +-
 frontend/src/lib/types.ts                     |   10 +-
 internal/api/server.go                        |   16 +-
 internal/domain/models.go                     |    8 +
 internal/storage/sqlite.go                    |   82 +-
 8 files changed, 1847 insertions(+), 689 deletions(-)
 create mode 100644 frontend/src/features/triage/ManageColumnsModal.tsx
 create mode 100644 frontend/src/features/triage/TaskDetailModal.tsx

diff --git a/frontend/src/features/triage/ManageColumnsModal.tsx b/frontend/src/features/triage/ManageColumnsModal.tsx
new file mode 100644
index 0000000..c437605
--- /dev/null
+++ b/frontend/src/features/triage/ManageColumnsModal.tsx
@@ -0,0 +1,295 @@
+import React, { useState, useEffect } from 'react';
+import {
+  X,
+  Plus,
+  Trash2,
+  ArrowUp,
+  ArrowDown,
+  RotateCcw,
+  Check,
+  Columns,
+  Layers,
+} from 'lucide-react';
+import { KanbanColumn } from '../../lib/types';
+import { triggerHaptic } from '../../lib/api';
+
+interface ManageColumnsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialColumns: KanbanColumn[];
+  onSave: (columns: KanbanColumn[]) => Promise<void>;
+  listTitle?: string;
+}
+
+export const DEFAULT_KANBAN_COLUMNS: KanbanColumn[] = [
+  { id: 'todo', name: 'Zu erledigen' },
+  { id: 'in_progress', name: 'In Bearbeitung', color: 'accent' },
+  { id: 'waiting', name: 'Wartet auf andere', color: 'amber' },
+  { id: 'done', name: 'Erledigt', isDone: true, color: 'emerald' },
+];
+
+export const ManageColumnsModal: React.FC<ManageColumnsModalProps> = ({
+  isOpen,
+  onClose,
+  initialColumns,
+  onSave,
+  listTitle,
+}) => {
+  if (!isOpen) return null;
+
+  const [columns, setColumns] = useState<KanbanColumn[]>(() => {
+    return initialColumns && initialColumns.length > 0 ? initialColumns : DEFAULT_KANBAN_COLUMNS;
+  });
+  const [newColName, setNewColName] = useState('');
+  const [newColIsDone, setNewColIsDone] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setColumns(initialColumns && initialColumns.length > 0 ? initialColumns : DEFAULT_KANBAN_COLUMNS);
+  }, [initialColumns, isOpen]);
+
+  const handleMove = (index: number, direction: 'up' | 'down') => {
+    triggerHaptic(10);
+    const targetIndex = direction === 'up' ? index - 1 : index + 1;
+    if (targetIndex < 0 || targetIndex >= columns.length) return;
+    const next = [...columns];
+    const temp = next[index];
+    next[index] = next[targetIndex];
+    next[targetIndex] = temp;
+    setColumns(next);
+  };
+
+  const handleRename = (id: string, newName: string) => {
+    setColumns((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, name: newName } : c))
+    );
+  };
+
+  const handleToggleDone = (id: string) => {
+    triggerHaptic(10);
+    setColumns((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, isDone: !c.isDone } : c))
+    );
+  };
+
+  const handleDelete = (id: string) => {
+    if (columns.length <= 1) {
+      alert('Mindestens eine Spalte muss vorhanden sein.');
+      return;
+    }
+    triggerHaptic(10);
+    setColumns((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  const handleAddColumn = (e: React.FormEvent) => {
+    e.preventDefault();
+    const name = newColName.trim();
+    if (!name) return;
+    triggerHaptic(10);
+    const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '_').slice(0, 20) || 'col';
+    const id = `${slug}_${Date.now().toString(36).slice(-4)}`;
+    setColumns((prev) => [
+      ...prev,
+      {
+        id,
+        name,
+        isDone: newColIsDone,
+      },
+    ]);
+    setNewColName('');
+    setNewColIsDone(false);
+  };
+
+  const handleResetToDefault = () => {
+    if (window.confirm('Spalten auf Standard zurücksetzen? (Zu erledigen, In Bearbeitung, Wartet auf andere, Erledigt)')) {
+      triggerHaptic(15);
+      setColumns(DEFAULT_KANBAN_COLUMNS);
+    }
+  };
+
+  const handleSave = async () => {
+    if (columns.length === 0) {
+      alert('Es muss mindestens eine Spalte vorhanden sein.');
+      return;
+    }
+    setSaving(true);
+    triggerHaptic(15);
+    try {
+      await onSave(columns);
+      onClose();
+    } catch (err: any) {
+      alert(err.message || 'Fehler beim Speichern der Spalten');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4">
+      <div
+        className="w-full max-w-md panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[90vh] overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-panel">
+          <div className="flex items-center gap-2">
+            <Columns className="w-4 h-4 text-accent" />
+            <div>
+              <h3 className="text-sm font-semibold text-main">Kanban-Spalten anpassen</h3>
+              {listTitle && (
+                <p className="text-[10px] text-muted truncate">Liste: {listTitle}</p>
+              )}
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-muted hover:text-main p-1.5 transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-4 space-y-4 overflow-y-auto flex-1">
+          <p className="text-xs text-muted">
+            Passe die Spalten für das Kanban-Board an. Aufgaben können in jede beliebige Spalte verschoben werden.
+          </p>
+
+          {/* Columns List */}
+          <div className="space-y-2">
+            <label className="block text-xs font-semibold text-main">Aktive Spalten ({columns.length}):</label>
+            <div className="space-y-1.5 max-h-60 overflow-y-auto pr-1">
+              {columns.map((col, idx) => (
+                <div
+                  key={col.id}
+                  className="p-2 bg-canvas border border-border rounded-card flex items-center gap-2"
+                >
+                  <div className="flex flex-col gap-0.5">
+                    <button
+                      type="button"
+                      disabled={idx === 0}
+                      onClick={() => handleMove(idx, 'up')}
+                      className="text-muted hover:text-main disabled:opacity-20 p-0.5"
+                      title="Nach oben"
+                    >
+                      <ArrowUp className="w-3 h-3" />
+                    </button>
+                    <button
+                      type="button"
+                      disabled={idx === columns.length - 1}
+                      onClick={() => handleMove(idx, 'down')}
+                      className="text-muted hover:text-main disabled:opacity-20 p-0.5"
+                      title="Nach unten"
+                    >
+                      <ArrowDown className="w-3 h-3" />
+                    </button>
+                  </div>
+
+                  <input
+                    type="text"
+                    value={col.name}
+                    onChange={(e) => handleRename(col.id, e.target.value)}
+                    className="flex-1 h-7 px-2 text-xs input-field"
+                    placeholder="Spaltenname"
+                  />
+
+                  {/* IsDone Toggle */}
+                  <button
+                    type="button"
+                    onClick={() => handleToggleDone(col.id)}
+                    className={`h-7 px-2 text-[10px] rounded-btn border transition-colors flex items-center gap-1 ${
+                      col.isDone
+                        ? 'bg-status-ok/15 border-status-ok text-status-ok font-semibold'
+                        : 'bg-panel border-border text-faint hover:text-muted'
+                    }`}
+                    title={col.isDone ? 'Gilt als Erledigt' : 'Gilt als Offen'}
+                  >
+                    <Check className={`w-2.5 h-2.5 ${col.isDone ? 'stroke-[3]' : 'opacity-40'}`} />
+                    <span>Erledigt</span>
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() => handleDelete(col.id)}
+                    disabled={columns.length <= 1}
+                    className="text-muted hover:text-status-err disabled:opacity-20 p-1 transition-colors"
+                    title="Spalte löschen"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Add New Column Form */}
+          <form onSubmit={handleAddColumn} className="space-y-2 pt-2 border-t border-border">
+            <label className="block text-xs font-semibold text-main">Neue Spalte hinzufügen:</label>
+            <div className="flex items-center gap-1.5">
+              <input
+                type="text"
+                value={newColName}
+                onChange={(e) => setNewColName(e.target.value)}
+                placeholder="z.B. Wartet auf Feedback, Review…"
+                className="flex-1 h-8 px-2.5 text-xs input-field"
+              />
+              <button
+                type="button"
+                onClick={() => setNewColIsDone((prev) => !prev)}
+                className={`h-8 px-2.5 text-xs rounded-btn border transition-colors flex items-center gap-1 ${
+                  newColIsDone
+                    ? 'bg-status-ok/15 border-status-ok text-status-ok font-semibold'
+                    : 'bg-panel border-border text-muted hover:text-main'
+                }`}
+                title="Sollen Aufgaben in dieser Spalte als erledigt gelten?"
+              >
+                <Check className="w-3 h-3" />
+                <span>Erledigt</span>
+              </button>
+              <button
+                type="submit"
+                disabled={!newColName.trim()}
+                className="btn-primary h-8 px-3 text-xs flex items-center gap-1 disabled:opacity-40"
+              >
+                <Plus className="w-3.5 h-3.5" />
+                <span>Hinzufügen</span>
+              </button>
+            </div>
+          </form>
+
+          {/* Reset button */}
+          <div className="pt-2 flex justify-start">
+            <button
+              type="button"
+              onClick={handleResetToDefault}
+              className="text-xs text-muted hover:text-main flex items-center gap-1"
+            >
+              <RotateCcw className="w-3 h-3 text-accent" />
+              <span>Auf Standard-Spalten zurücksetzen</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-4 py-2.5 border-t border-border bg-panel">
+          <button
+            type="button"
+            onClick={onClose}
+            className="btn-action h-7 px-3 text-xs"
+          >
+            Abbrechen
+          </button>
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={saving}
+            className="btn-primary h-7 px-3 text-xs disabled:opacity-50"
+          >
+            Spalten speichern
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/features/triage/TaskDetailModal.tsx b/frontend/src/features/triage/TaskDetailModal.tsx
new file mode 100644
index 0000000..4f138c6
--- /dev/null
+++ b/frontend/src/features/triage/TaskDetailModal.tsx
@@ -0,0 +1,665 @@
+import React, { useState, useEffect } from 'react';
+import {
+  X,
+  Check,
+  Calendar,
+  Trash2,
+  FileText,
+  Plus,
+  CheckSquare,
+  Clock,
+  Layers,
+  Hash,
+  AlertTriangle,
+  Flame,
+  ChevronRight,
+  Folder,
+} from 'lucide-react';
+import { Thought, SubTask, TaskList, KanbanColumn } from '../../lib/types';
+import { triggerHaptic } from '../../lib/api';
+
+interface TaskDetailModalProps {
+  task: Thought | null;
+  isOpen: boolean;
+  onClose: () => void;
+  activeColumns: KanbanColumn[];
+  taskLists: TaskList[];
+  onUpdateTitle: (task: Thought, newTitle: string) => Promise<void>;
+  onUpdateStatus: (task: Thought, newStatus: string) => Promise<void>;
+  onUpdatePriority: (task: Thought, newPriority: string) => Promise<void>;
+  onUpdateDueDate: (task: Thought, newDueDate: string) => Promise<void>;
+  onUpdateTaskList: (task: Thought, newListId: string) => Promise<void>;
+  onUpdateNotes: (task: Thought, newNotes: string) => Promise<void>;
+  onUpdateTags?: (task: Thought, newTags: string[]) => Promise<void>;
+  onToggleSubtask: (task: Thought, subtaskId: string) => Promise<void>;
+  onAddSubtask: (task: Thought, title: string) => Promise<void>;
+  onDeleteSubtask: (task: Thought, subtaskId: string) => Promise<void>;
+  onConvertToDoc: (task: Thought) => void;
+  onDeleteTask: (taskId: string) => void;
+}
+
+export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
+  task,
+  isOpen,
+  onClose,
+  activeColumns,
+  taskLists,
+  onUpdateTitle,
+  onUpdateStatus,
+  onUpdatePriority,
+  onUpdateDueDate,
+  onUpdateTaskList,
+  onUpdateNotes,
+  onUpdateTags,
+  onToggleSubtask,
+  onAddSubtask,
+  onDeleteSubtask,
+  onConvertToDoc,
+  onDeleteTask,
+}) => {
+  if (!isOpen || !task) return null;
+
+  const [titleDraft, setTitleDraft] = useState(task.content);
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+
+  const [isEditingNotes, setIsEditingNotes] = useState(false);
+  const [notesDraft, setNotesDraft] = useState(task.notes || '');
+
+  const [newSubtaskTitle, setNewSubtaskTitle] = useState('');
+  const [newTagDraft, setNewTagDraft] = useState('');
+
+  useEffect(() => {
+    setTitleDraft(task.content);
+    setNotesDraft(task.notes || '');
+    setIsEditingTitle(false);
+    setIsEditingNotes(false);
+  }, [task.id]);
+
+  // Handle escape key to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (isEditingNotes) {
+          setIsEditingNotes(false);
+        } else if (isEditingTitle) {
+          setIsEditingTitle(false);
+        } else {
+          onClose();
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose, isEditingNotes, isEditingTitle]);
+
+  const handleTitleSubmit = async () => {
+    const trimmed = titleDraft.trim();
+    if (!trimmed) {
+      setTitleDraft(task.content);
+      setIsEditingTitle(false);
+      return;
+    }
+    if (trimmed !== task.content) {
+      await onUpdateTitle(task, trimmed);
+    }
+    setIsEditingTitle(false);
+  };
+
+  const handleNotesSubmit = async () => {
+    await onUpdateNotes(task, notesDraft);
+    setIsEditingNotes(false);
+  };
+
+  const handleAddSubtaskSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = newSubtaskTitle.trim();
+    if (!trimmed) return;
+    await onAddSubtask(task, trimmed);
+    setNewSubtaskTitle('');
+  };
+
+  const handleAddTagSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    let cleaned = newTagDraft.trim().replace(/^#+/, '').toLowerCase();
+    if (!cleaned) return;
+    const currentTags = Array.isArray(task.tags) ? [...task.tags] : [];
+    if (!currentTags.includes(cleaned)) {
+      const updated = [...currentTags, cleaned];
+      if (onUpdateTags) {
+        await onUpdateTags(task, updated);
+      } else {
+        await onUpdateTitle(task, `${task.content} #${cleaned}`);
+      }
+    }
+    setNewTagDraft('');
+  };
+
+  const handleRemoveTag = async (tagToRemove: string) => {
+    const currentTags = Array.isArray(task.tags) ? [...task.tags] : [];
+    const updated = currentTags.filter((t) => t !== tagToRemove);
+    if (onUpdateTags) {
+      await onUpdateTags(task, updated);
+    }
+  };
+
+  const handleQuickDueDate = (daysOffset: number | null) => {
+    if (daysOffset === null) {
+      onUpdateDueDate(task, '');
+      return;
+    }
+    const d = new Date();
+    d.setDate(d.getDate() + daysOffset);
+    const dateStr = d.toISOString().split('T')[0];
+    onUpdateDueDate(task, dateStr);
+  };
+
+  const currentColumn = activeColumns.find((c) => c.id === task.kanbanStatus) ||
+    (task.isCompleted
+      ? activeColumns.find((c) => c.isDone) || activeColumns[activeColumns.length - 1]
+      : activeColumns.find((c) => !c.isDone) || activeColumns[0]);
+
+  const subtasks = Array.isArray(task.subtasks) ? task.subtasks : [];
+  const completedSubtasks = subtasks.filter((s) => s.isCompleted).length;
+  const subtasksPercent = subtasks.length > 0 ? Math.round((completedSubtasks / subtasks.length) * 100) : 0;
+
+  return (
+    <div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
+      <div
+        className="w-full max-w-2xl panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[92vh] overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Top Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-panel">
+          <div className="flex items-center gap-2 min-w-0">
+            <button
+              onClick={() => {
+                triggerHaptic(15);
+                const nextState = !task.isCompleted;
+                const doneCol = activeColumns.find((c) => c.isDone) || activeColumns[activeColumns.length - 1];
+                const todoCol = activeColumns.find((c) => !c.isDone) || activeColumns[0];
+                const nextKanban = nextState ? (doneCol ? doneCol.id : 'done') : (todoCol ? todoCol.id : 'todo');
+                onUpdateStatus(task, nextKanban);
+              }}
+              className={`w-5 h-5 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
+                task.isCompleted
+                  ? 'bg-status-ok border-status-ok text-on-accent'
+                  : 'border-strong hover:border-accent text-transparent'
+              }`}
+              title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt markieren'}
+            >
+              <Check className="w-3.5 h-3.5 stroke-[3]" />
+            </button>
+            <span className="text-xs font-semibold text-main truncate">
+              {task.isCompleted ? 'Erledigte Aufgabe' : 'Aufgabe bearbeiten'}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={() => {
+                onClose();
+                onConvertToDoc(task);
+              }}
+              title="Als Dokument / Notiz vertiefen"
+              className="btn-action h-7 px-2 text-xs flex items-center gap-1"
+            >
+              <FileText className="w-3.5 h-3.5 text-accent" />
+              <span className="hidden sm:inline">Als Notiz vertiefen</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                if (window.confirm('Möchten Sie diese Aufgabe wirklich löschen?')) {
+                  onClose();
+                  onDeleteTask(task.id);
+                }
+              }}
+              title="Aufgabe löschen"
+              className="text-muted hover:text-status-err p-1.5 transition-colors"
+            >
+              <Trash2 className="w-4 h-4" />
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-muted hover:text-main p-1.5 transition-colors"
+              title="Schließen"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+
+        {/* Scrollable Body */}
+        <div className="p-4 overflow-y-auto space-y-4 flex-1">
+          {/* Task Title */}
+          <div>
+            {isEditingTitle ? (
+              <div className="space-y-2">
+                <textarea
+                  value={titleDraft}
+                  onChange={(e) => setTitleDraft(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault();
+                      handleTitleSubmit();
+                    } else if (e.key === 'Escape') {
+                      setIsEditingTitle(false);
+                      setTitleDraft(task.content);
+                    }
+                  }}
+                  autoFocus
+                  rows={2}
+                  className="w-full text-base font-semibold input-field p-2.5 resize-none leading-snug"
+                />
+                <div className="flex justify-end gap-1.5">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsEditingTitle(false);
+                      setTitleDraft(task.content);
+                    }}
+                    className="btn-action h-7 px-2.5 text-xs"
+                  >
+                    Abbrechen
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleTitleSubmit}
+                    className="btn-primary h-7 px-3 text-xs"
+                  >
+                    Speichern
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div
+                onClick={() => setIsEditingTitle(true)}
+                className="group cursor-pointer p-2 rounded-card hover:bg-panel transition-colors border border-transparent hover:border-border"
+                title="Klicken zum Bearbeiten des Titels"
+              >
+                <h2
+                  className={`text-base font-semibold break-words leading-snug ${
+                    task.isCompleted ? 'line-through text-faint' : 'text-main'
+                  }`}
+                >
+                  {task.content}
+                </h2>
+                <span className="text-[10px] text-muted opacity-0 group-hover:opacity-100 transition-opacity">
+                  Klicken zum Umbenennen
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Kanban Status Buttons */}
+          <div className="space-y-1.5 pt-1 border-t border-border">
+            <label className="block text-xs font-semibold text-main">
+              Zustand / Kanban-Status:
+            </label>
+            <div className="flex flex-wrap items-center gap-1.5">
+              {activeColumns.map((col) => {
+                const isActive = (task.kanbanStatus === col.id) || (!task.kanbanStatus && col.id === 'todo');
+                return (
+                  <button
+                    key={col.id}
+                    type="button"
+                    onClick={() => {
+                      triggerHaptic(10);
+                      onUpdateStatus(task, col.id);
+                    }}
+                    className={`h-8 px-3 text-xs rounded-btn font-medium transition-all flex items-center gap-1.5 border ${
+                      isActive
+                        ? 'bg-panel border-accent text-accent font-semibold shadow-sm'
+                        : 'bg-canvas border-border text-muted hover:text-main hover:border-strong'
+                    }`}
+                  >
+                    <span
+                      className={`w-2 h-2 rounded-full ${
+                        col.isDone
+                          ? 'bg-status-ok'
+                          : col.id === 'in_progress'
+                          ? 'bg-accent'
+                          : col.id === 'waiting'
+                          ? 'bg-status-warn'
+                          : 'bg-faint'
+                      }`}
+                    />
+                    <span>{col.name}</span>
+                    {isActive && <Check className="w-3 h-3 text-accent stroke-[3] ml-0.5" />}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Priority Buttons */}
+          <div className="space-y-1.5 pt-1 border-t border-border">
+            <label className="block text-xs font-semibold text-main">
+              Priorität:
+            </label>
+            <div className="flex flex-wrap items-center gap-1.5">
+              <button
+                type="button"
+                onClick={() => onUpdatePriority(task, 'normal')}
+                className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border ${
+                  !task.priority || task.priority === 'normal' || task.priority === 'low'
+                    ? 'bg-panel border-accent text-main font-semibold'
+                    : 'bg-canvas border-border text-muted hover:text-main'
+                }`}
+              >
+                Normal / Keine
+              </button>
+              <button
+                type="button"
+                onClick={() => onUpdatePriority(task, 'high')}
+                className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border flex items-center gap-1 ${
+                  task.priority === 'high'
+                    ? 'bg-status-warn/15 border-status-warn text-status-warn font-semibold'
+                    : 'bg-canvas border-border text-muted hover:text-main'
+                }`}
+              >
+                <AlertTriangle className="w-3 h-3 text-status-warn" />
+                <span>Wichtig</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => onUpdatePriority(task, 'urgent')}
+                className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border flex items-center gap-1 ${
+                  task.priority === 'urgent'
+                    ? 'bg-status-err/15 border-status-err text-status-err font-semibold'
+                    : 'bg-canvas border-border text-muted hover:text-main'
+                }`}
+              >
+                <Flame className="w-3 h-3 text-status-err" />
+                <span>Dringend</span>
+              </button>
+            </div>
+          </div>
+
+          {/* Due Date & List Selection Row */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1 border-t border-border">
+            {/* Due Date */}
+            <div className="space-y-1.5">
+              <label className="block text-xs font-semibold text-main flex items-center gap-1">
+                <Calendar className="w-3.5 h-3.5 text-accent" />
+                <span>Fälligkeitsdatum:</span>
+              </label>
+              <div className="flex items-center gap-1.5">
+                <input
+                  type="date"
+                  value={task.dueDate || ''}
+                  onChange={(e) => onUpdateDueDate(task, e.target.value)}
+                  className="flex-1 h-8 input-field px-2 text-xs bg-panel"
+                />
+                {task.dueDate && (
+                  <button
+                    type="button"
+                    onClick={() => onUpdateDueDate(task, '')}
+                    className="btn-action h-8 px-2 text-xs text-muted hover:text-status-err"
+                    title="Datum entfernen"
+                  >
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                )}
+              </div>
+              <div className="flex flex-wrap gap-1 text-[10px]">
+                <button
+                  type="button"
+                  onClick={() => handleQuickDueDate(0)}
+                  className="px-1.5 py-0.5 bg-canvas border border-border rounded-btn text-muted hover:text-main"
+                >
+                  Heute
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleQuickDueDate(1)}
+                  className="px-1.5 py-0.5 bg-canvas border border-border rounded-btn text-muted hover:text-main"
+                >
+                  Morgen
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleQuickDueDate(7)}
+                  className="px-1.5 py-0.5 bg-canvas border border-border rounded-btn text-muted hover:text-main"
+                >
+                  +1 Woche
+                </button>
+              </div>
+            </div>
+
+            {/* Task List assignment */}
+            <div className="space-y-1.5">
+              <label className="block text-xs font-semibold text-main flex items-center gap-1">
+                <Folder className="w-3.5 h-3.5 text-accent" />
+                <span>Aufgabenliste:</span>
+              </label>
+              <select
+                value={task.taskListId || ''}
+                onChange={(e) => onUpdateTaskList(task, e.target.value)}
+                className="w-full h-8 input-field px-2.5 text-xs bg-panel"
+              >
+                <option value="">-- Keine Liste (Allgemein) --</option>
+                {taskLists.map((tl) => (
+                  <option key={tl.id} value={tl.id}>
+                    {tl.icon} {tl.title}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Hashtags Section */}
+          <div className="space-y-1.5 pt-1 border-t border-border">
+            <label className="block text-xs font-semibold text-main flex items-center gap-1">
+              <Hash className="w-3.5 h-3.5 text-accent" />
+              <span>Hashtags:</span>
+            </label>
+            <div className="flex flex-wrap items-center gap-1.5">
+              {Array.isArray(task.tags) &&
+                task.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded-pill bg-panel border border-border text-xs text-main"
+                  >
+                    <span>#{tag}</span>
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTag(tag)}
+                      className="text-muted hover:text-status-err"
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                  </span>
+                ))}
+              <form onSubmit={handleAddTagSubmit} className="inline-flex items-center gap-1">
+                <input
+                  type="text"
+                  value={newTagDraft}
+                  onChange={(e) => setNewTagDraft(e.target.value)}
+                  placeholder="+ #hashtag"
+                  className="h-6 w-24 px-1.5 text-xs input-field"
+                />
+              </form>
+            </div>
+          </div>
+
+          {/* Subtasks Checklist */}
+          <div className="space-y-2 pt-1 border-t border-border">
+            <div className="flex items-center justify-between">
+              <label className="block text-xs font-semibold text-main flex items-center gap-1.5">
+                <CheckSquare className="w-3.5 h-3.5 text-accent" />
+                <span>Unteraufgaben ({completedSubtasks}/{subtasks.length}):</span>
+              </label>
+              {subtasks.length > 0 && (
+                <span className="text-[11px] font-mono text-muted">{subtasksPercent}%</span>
+              )}
+            </div>
+
+            {subtasks.length > 0 && (
+              <div className="w-full h-1 bg-border rounded-full overflow-hidden">
+                <div
+                  className={`h-full transition-all duration-300 ${
+                    subtasksPercent === 100 ? 'bg-status-ok' : 'bg-accent'
+                  }`}
+                  style={{ width: `${subtasksPercent}%` }}
+                />
+              </div>
+            )}
+
+            {/* Subtask items list */}
+            {subtasks.length > 0 && (
+              <div className="space-y-1 max-h-48 overflow-y-auto pr-1">
+                {subtasks.map((st) => (
+                  <div
+                    key={st.id}
+                    className="p-1.5 bg-canvas border border-border rounded-card flex items-center justify-between text-xs group"
+                  >
+                    <div className="flex items-center gap-2 min-w-0 flex-1">
+                      <button
+                        type="button"
+                        onClick={() => onToggleSubtask(task, st.id)}
+                        className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
+                          st.isCompleted
+                            ? 'bg-status-ok border-status-ok text-on-accent'
+                            : 'border-strong hover:border-accent text-transparent'
+                        }`}
+                      >
+                        <Check className="w-2.5 h-2.5 stroke-[3]" />
+                      </button>
+                      <span
+                        className={`truncate ${
+                          st.isCompleted ? 'line-through text-faint' : 'text-main'
+                        }`}
+                      >
+                        {st.title}
+                      </span>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => onDeleteSubtask(task, st.id)}
+                      className="opacity-0 group-hover:opacity-100 text-faint hover:text-status-err p-0.5 transition-opacity"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Inline add subtask form */}
+            <form onSubmit={handleAddSubtaskSubmit} className="flex items-center gap-1.5">
+              <input
+                type="text"
+                value={newSubtaskTitle}
+                onChange={(e) => setNewSubtaskTitle(e.target.value)}
+                placeholder="Neue Unteraufgabe hinzufügen…"
+                className="flex-1 h-7 px-2 text-xs input-field"
+              />
+              <button
+                type="submit"
+                disabled={!newSubtaskTitle.trim()}
+                className="btn-action h-7 px-2.5 text-xs disabled:opacity-40"
+              >
+                <Plus className="w-3 h-3" />
+                <span>Hinzufügen</span>
+              </button>
+            </form>
+          </div>
+
+          {/* Notes Section */}
+          <div className="space-y-2 pt-1 border-t border-border">
+            <div className="flex items-center justify-between">
+              <label className="block text-xs font-semibold text-main flex items-center gap-1.5">
+                <FileText className="w-3.5 h-3.5 text-accent" />
+                <span>Detailnotizen:</span>
+              </label>
+              {!isEditingNotes && task.notes && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setNotesDraft(task.notes || '');
+                    setIsEditingNotes(true);
+                  }}
+                  className="text-[11px] text-accent hover:underline"
+                >
+                  Bearbeiten
+                </button>
+              )}
+            </div>
+
+            {isEditingNotes ? (
+              <div className="space-y-2">
+                <textarea
+                  value={notesDraft}
+                  onChange={(e) => setNotesDraft(e.target.value)}
+                  placeholder="Detailnotizen eingeben… (Markdown unterstützt)"
+                  rows={6}
+                  autoFocus
+                  className="w-full input-field p-2.5 text-xs font-mono leading-relaxed resize-y min-h-[100px]"
+                />
+                <div className="flex justify-end gap-1.5">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsEditingNotes(false);
+                      setNotesDraft(task.notes || '');
+                    }}
+                    className="btn-action h-7 px-2.5 text-xs"
+                  >
+                    Abbrechen
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleNotesSubmit}
+                    className="btn-primary h-7 px-3 text-xs"
+                  >
+                    Notiz speichern
+                  </button>
+                </div>
+              </div>
+            ) : task.notes ? (
+              <div
+                onClick={() => {
+                  setNotesDraft(task.notes || '');
+                  setIsEditingNotes(true);
+                }}
+                className="p-3 bg-canvas border border-border rounded-card text-xs text-muted leading-relaxed whitespace-pre-wrap cursor-pointer hover:border-strong transition-colors"
+                title="Klicken zum Bearbeiten"
+              >
+                {task.notes}
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => {
+                  setNotesDraft('');
+                  setIsEditingNotes(true);
+                }}
+                className="w-full py-2.5 px-3 border border-dashed border-border rounded-card text-xs text-muted hover:text-main hover:bg-panel transition-colors text-left flex items-center gap-1.5"
+              >
+                <Plus className="w-3.5 h-3.5 text-accent" />
+                <span>Detailnotiz hinzufügen…</span>
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Modal Footer */}
+        <div className="flex items-center justify-between px-4 py-2.5 border-t border-border bg-panel">
+          <div className="text-[11px] text-faint">
+            Erstellt: {new Date(task.createdAt).toLocaleDateString('de-DE')}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="btn-action h-7 px-3 text-xs"
+          >
+            Fertig
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/features/triage/TasksView.tsx b/frontend/src/features/triage/TasksView.tsx
index 6ec634b..ce684fe 100644
--- a/frontend/src/features/triage/TasksView.tsx
+++ b/frontend/src/features/triage/TasksView.tsx
@@ -18,9 +18,17 @@ import {
   CheckSquare,
   User as UserIcon,
   Lock,
+  Hash,
+  AlertTriangle,
+  Flame,
+  Settings,
+  ChevronDown,
+  Folder,
 } from 'lucide-react';
-import { TaskList, Thought, SubTask, Team, User, TaskListShare } from '../../lib/types';
+import { TaskList, Thought, SubTask, Team, User, TaskListShare, KanbanColumn } from '../../lib/types';
 import { api, triggerHaptic } from '../../lib/api';
+import { TaskDetailModal } from './TaskDetailModal';
+import { ManageColumnsModal, DEFAULT_KANBAN_COLUMNS } from './ManageColumnsModal';
 
 const getInitials = (name?: string): string => {
   if (!name) return '?';
@@ -69,13 +77,27 @@ export const TasksView: React.FC<TasksViewProps> = ({
   const [selectedShareTargetId, setSelectedShareTargetId] = useState('');
   const [shareLoading, setShareLoading] = useState(false);
 
-  // Active notes inline edit ID
-  const [activeNotesTaskId, setActiveNotesTaskId] = useState<string | null>(null);
-  const [notesDraft, setNotesDraft] = useState('');
+  // Detail modal state
+  const [detailTaskId, setDetailTaskId] = useState<string | null>(null);
+  const [showDetailModal, setShowDetailModal] = useState(false);
 
-  // Subtask creation state
-  const [addingSubtaskTaskId, setAddingSubtaskTaskId] = useState<string | null>(null);
-  const [subtaskDraft, setSubtaskDraft] = useState('');
+  // Manage columns modal state
+  const [showManageColumnsModal, setShowManageColumnsModal] = useState(false);
+  const [globalColumns, setGlobalColumns] = useState<KanbanColumn[]>(() => {
+    try {
+      const stored = localStorage.getItem('mindsift:kanban_columns');
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
+      }
+    } catch {}
+    return DEFAULT_KANBAN_COLUMNS;
+  });
+
+  // Hashtag filtering, grouping and sorting state
+  const [selectedTag, setSelectedTag] = useState<string | null>(null);
+  const [groupBy, setGroupBy] = useState<'none' | 'tag' | 'status' | 'priority' | 'due'>('none');
+  const [sortBy, setSortBy] = useState<'created' | 'due' | 'priority' | 'alpha'>('created');
 
   const loadData = async () => {
     setLoading(true);
@@ -106,9 +128,6 @@ export const TasksView: React.FC<TasksViewProps> = ({
   const selectedListIdRef = useRef(selectedListId);
   selectedListIdRef.current = selectedListId;
 
-  const activeNotesTaskIdRef = useRef(activeNotesTaskId);
-  activeNotesTaskIdRef.current = activeNotesTaskId;
-
   const onRefreshStatsRef = useRef(onRefreshStats);
   onRefreshStatsRef.current = onRefreshStats;
 
@@ -154,13 +173,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
             if (selectedListIdRef.current !== 'all' && updated.taskListId !== selectedListIdRef.current) {
               return prev.filter((t) => t.id !== updated.id);
             }
-            return prev.map((t) => {
-              if (t.id !== updated.id) return t;
-              return {
-                ...updated,
-                notes: activeNotesTaskIdRef.current === updated.id ? t.notes : updated.notes,
-              };
-            });
+            return prev.map((t) => (t.id === updated.id ? updated : t));
           });
           onRefreshStatsRef.current();
         }
@@ -177,10 +190,162 @@ export const TasksView: React.FC<TasksViewProps> = ({
     return () => window.removeEventListener('mindsift:ws', handleWs);
   }, []);
 
+  const safeTaskLists = Array.isArray(taskLists) ? taskLists : [];
+  const currentSelectedList = safeTaskLists.find((l) => l.id === selectedListId);
+
+  // Active Kanban Columns (from selected list, or global custom, or default)
+  const activeColumns: KanbanColumn[] = useMemo(() => {
+    if (
+      currentSelectedList &&
+      Array.isArray(currentSelectedList.columns) &&
+      currentSelectedList.columns.length > 0
+    ) {
+      return currentSelectedList.columns;
+    }
+    return globalColumns;
+  }, [currentSelectedList, globalColumns]);
+
+  const safeTasks = useMemo(() => {
+    if (!Array.isArray(tasks)) return [];
+    const seen = new Set<string>();
+    const unique: Thought[] = [];
+    for (const t of tasks) {
+      if (t && t.id && !seen.has(t.id)) {
+        seen.add(t.id);
+        unique.push(t);
+      }
+    }
+    return unique;
+  }, [tasks]);
+
+  const detailTask = useMemo(() => {
+    if (!detailTaskId) return null;
+    return tasks.find((t) => t.id === detailTaskId) || null;
+  }, [detailTaskId, tasks]);
+
+  const safeTeams = Array.isArray(teams) ? teams : [];
+  const safeCollaborators = Array.isArray(collaborators) ? collaborators : [];
+  const safeDiscarded = Array.isArray(discarded) ? discarded : [];
+
+  // Available unique hashtags from current tasks
+  const allAvailableTags = useMemo(() => {
+    const set = new Set<string>();
+    for (const t of safeTasks) {
+      if (Array.isArray(t.tags)) {
+        for (const tg of t.tags) {
+          if (tg) set.add(tg);
+        }
+      }
+    }
+    return Array.from(set).sort();
+  }, [safeTasks]);
+
+  // Filtered tasks for List view
+  const openTasks = safeTasks.filter((t) => !t.isCompleted);
+  const doneTasks = safeTasks.filter((t) => t.isCompleted);
+
+  const filteredTasks = useMemo(() => {
+    let result = safeTasks;
+    if (filter === 'open') {
+      result = result.filter((t) => !t.isCompleted);
+    } else if (filter === 'done') {
+      result = result.filter((t) => t.isCompleted);
+    }
+    if (selectedTag) {
+      result = result.filter((t) => Array.isArray(t.tags) && t.tags.includes(selectedTag));
+    }
+    return [...result].sort((a, b) => {
+      if (sortBy === 'due') {
+        if (!a.dueDate && !b.dueDate) return 0;
+        if (!a.dueDate) return 1;
+        if (!b.dueDate) return -1;
+        return a.dueDate.localeCompare(b.dueDate);
+      }
+      if (sortBy === 'priority') {
+        const pScore: Record<string, number> = { urgent: 3, high: 2, normal: 1, low: 0 };
+        const scoreA = pScore[a.priority] || 1;
+        const scoreB = pScore[b.priority] || 1;
+        return scoreB - scoreA;
+      }
+      if (sortBy === 'alpha') {
+        return a.content.localeCompare(b.content);
+      }
+      return b.createdAt.localeCompare(a.createdAt);
+    });
+  }, [safeTasks, filter, selectedTag, sortBy]);
+
+  // Tasks for Kanban board (shows all non-discarded matching tag)
+  const kanbanTasks = useMemo(() => {
+    let result = safeTasks;
+    if (selectedTag) {
+      result = result.filter((t) => Array.isArray(t.tags) && t.tags.includes(selectedTag));
+    }
+    return result;
+  }, [safeTasks, selectedTag]);
+
+  // Grouped tasks calculation
+  const groupedTasks = useMemo(() => {
+    if (groupBy === 'none') return null;
+    const groups: { key: string; title: string; count: number; tasks: Thought[] }[] = [];
+
+    if (groupBy === 'tag') {
+      const map = new Map<string, Thought[]>();
+      const withoutTag: Thought[] = [];
+      for (const t of filteredTasks) {
+        if (!t.tags || t.tags.length === 0) {
+          withoutTag.push(t);
+        } else {
+          for (const tg of t.tags) {
+            if (!map.has(tg)) map.set(tg, []);
+            map.get(tg)!.push(t);
+          }
+        }
+      }
+      Array.from(map.keys()).sort().forEach((tg) => {
+        const list = map.get(tg)!;
+        groups.push({ key: `tag:${tg}`, title: `#${tg}`, count: list.length, tasks: list });
+      });
+      if (withoutTag.length > 0) {
+        groups.push({ key: 'tag:none', title: 'Ohne Hashtag', count: withoutTag.length, tasks: withoutTag });
+      }
+    } else if (groupBy === 'status') {
+      activeColumns.forEach((col) => {
+        const list = filteredTasks.filter((t) => {
+          if (col.isDone) return t.isCompleted || t.kanbanStatus === col.id;
+          return !t.isCompleted && (t.kanbanStatus === col.id || (!t.kanbanStatus && col.id === 'todo'));
+        });
+        groups.push({ key: `status:${col.id}`, title: col.name, count: list.length, tasks: list });
+      });
+    } else if (groupBy === 'priority') {
+      const urgent = filteredTasks.filter((t) => t.priority === 'urgent');
+      const high = filteredTasks.filter((t) => t.priority === 'high');
+      const normal = filteredTasks.filter((t) => t.priority !== 'urgent' && t.priority !== 'high');
+      if (urgent.length > 0) groups.push({ key: 'p:urgent', title: '🔥 Dringend', count: urgent.length, tasks: urgent });
+      if (high.length > 0) groups.push({ key: 'p:high', title: '⚠️ Wichtig', count: high.length, tasks: high });
+      if (normal.length > 0) groups.push({ key: 'p:normal', title: 'Normal', count: normal.length, tasks: normal });
+    } else if (groupBy === 'due') {
+      const today = new Date().toISOString().split('T')[0];
+      const overdue = filteredTasks.filter((t) => t.dueDate && t.dueDate < today);
+      const dueToday = filteredTasks.filter((t) => t.dueDate === today);
+      const upcoming = filteredTasks.filter((t) => t.dueDate && t.dueDate > today);
+      const noDue = filteredTasks.filter((t) => !t.dueDate);
+      if (overdue.length > 0) groups.push({ key: 'due:overdue', title: '⚠️ Überfällig', count: overdue.length, tasks: overdue });
+      if (dueToday.length > 0) groups.push({ key: 'due:today', title: '📅 Heute fällig', count: dueToday.length, tasks: dueToday });
+      if (upcoming.length > 0) groups.push({ key: 'due:upcoming', title: 'Demnächst', count: upcoming.length, tasks: upcoming });
+      if (noDue.length > 0) groups.push({ key: 'due:none', title: 'Ohne Fälligkeitsdatum', count: noDue.length, tasks: noDue });
+    }
+    return groups;
+  }, [filteredTasks, groupBy, activeColumns]);
+
+  // --- TASK ACTIONS ---
+
   const handleToggleDone = async (task: Thought) => {
     triggerHaptic(15);
     const nextState = !task.isCompleted;
-    const nextKanban = nextState ? 'done' : 'todo';
+    const doneCol = activeColumns.find((c) => c.isDone) || activeColumns[activeColumns.length - 1];
+    const todoCol = activeColumns.find((c) => !c.isDone) || activeColumns[0];
+    const nextKanban = nextState ? (doneCol ? doneCol.id : 'done') : (todoCol ? todoCol.id : 'todo');
+
     setTasks((prev) =>
       prev.map((t) =>
         t.id === task.id ? { ...t, isCompleted: nextState, kanbanStatus: nextKanban } : t
@@ -190,9 +355,11 @@ export const TasksView: React.FC<TasksViewProps> = ({
     onRefreshStats();
   };
 
-  const handleKanbanMove = async (task: Thought, nextStatus: 'todo' | 'in_progress' | 'done') => {
+  const handleSetKanbanStatus = async (task: Thought, nextStatus: string) => {
     triggerHaptic(15);
-    const isCompleted = nextStatus === 'done';
+    const targetCol = activeColumns.find((c) => c.id === nextStatus);
+    const isCompleted = targetCol ? !!targetCol.isDone : nextStatus === 'done';
+
     setTasks((prev) =>
       prev.map((t) => (t.id === task.id ? { ...t, kanbanStatus: nextStatus, isCompleted } : t))
     );
@@ -200,33 +367,56 @@ export const TasksView: React.FC<TasksViewProps> = ({
     onRefreshStats();
   };
 
-  const handleDueDateChange = async (task: Thought, newDate: string) => {
+  const handleSetPriority = async (task: Thought, nextPriority: string) => {
+    triggerHaptic(10);
+    const normalized = nextPriority === 'none' || nextPriority === '' ? 'normal' : nextPriority;
+    setTasks((prev) =>
+      prev.map((t) => (t.id === task.id ? { ...t, priority: normalized as any } : t))
+    );
+    await api.updateThought(task.id, { priority: normalized });
+    onRefreshStats();
+  };
+
+  const handleCyclePriority = async (task: Thought) => {
+    triggerHaptic(10);
+    const nextPriority =
+      task.priority === 'urgent'
+        ? 'normal'
+        : task.priority === 'high'
+        ? 'urgent'
+        : 'high';
+    await handleSetPriority(task, nextPriority);
+  };
+
+  const handleUpdateTaskTitle = async (task: Thought, newTitle: string) => {
+    setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, content: newTitle } : t)));
+    await api.updateThought(task.id, { content: newTitle });
+    onRefreshStats();
+  };
+
+  const handleUpdateTaskDueDate = async (task: Thought, newDate: string) => {
     setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, dueDate: newDate } : t)));
     await api.updateThought(task.id, { dueDate: newDate });
   };
 
-  const handleSaveNotes = async (task: Thought) => {
-    setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, notes: notesDraft } : t)));
-    await api.updateThought(task.id, { notes: notesDraft });
-    setActiveNotesTaskId(null);
+  const handleUpdateTaskTaskList = async (task: Thought, newListId: string) => {
+    setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, taskListId: newListId } : t)));
+    await api.updateThought(task.id, { taskListId: newListId });
+    if (selectedListId !== 'all' && selectedListId !== newListId) {
+      setTasks((prev) => prev.filter((t) => t.id !== task.id));
+    }
+    onRefreshStats();
   };
 
-  const handleAddSubtask = async (task: Thought, title: string) => {
-    const trimmed = title.trim();
-    if (!trimmed) return;
-    triggerHaptic(10);
-    const newSub: SubTask = {
-      id: `sub_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`,
-      title: trimmed,
-      isCompleted: false,
-      createdAt: new Date().toISOString(),
-    };
-    const updatedSubtasks = [...(task.subtasks || []), newSub];
-    setTasks((prev) =>
-      prev.map((t) => (t.id === task.id ? { ...t, subtasks: updatedSubtasks } : t))
-    );
-    setSubtaskDraft('');
-    await api.updateThought(task.id, { subtasks: updatedSubtasks });
+  const handleUpdateTaskNotes = async (task: Thought, newNotes: string) => {
+    setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, notes: newNotes } : t)));
+    await api.updateThought(task.id, { notes: newNotes });
+  };
+
+  const handleUpdateTaskTags = async (task: Thought, newTags: string[]) => {
+    setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, tags: newTags } : t)));
+    await api.updateThought(task.id, { tags: newTags });
+    onRefreshStats();
   };
 
   const handleToggleSubtask = async (task: Thought, subtaskId: string) => {
@@ -240,6 +430,21 @@ export const TasksView: React.FC<TasksViewProps> = ({
     await api.updateThought(task.id, { subtasks: updatedSubtasks });
   };
 
+  const handleAddSubtask = async (task: Thought, title: string) => {
+    triggerHaptic(10);
+    const newSub: SubTask = {
+      id: `st_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+      title: title.trim(),
+      isCompleted: false,
+      createdAt: new Date().toISOString(),
+    };
+    const updatedSubtasks = [...(task.subtasks || []), newSub];
+    setTasks((prev) =>
+      prev.map((t) => (t.id === task.id ? { ...t, subtasks: updatedSubtasks } : t))
+    );
+    await api.updateThought(task.id, { subtasks: updatedSubtasks });
+  };
+
   const handleDeleteSubtask = async (task: Thought, subtaskId: string) => {
     triggerHaptic(10);
     const updatedSubtasks = (task.subtasks || []).filter((s) => s.id !== subtaskId);
@@ -249,130 +454,6 @@ export const TasksView: React.FC<TasksViewProps> = ({
     await api.updateThought(task.id, { subtasks: updatedSubtasks });
   };
 
-  const renderTaskProgressBar = (task: Thought) => {
-    if (!task.subtasks || task.subtasks.length === 0) return null;
-    const total = task.subtasks.length;
-    const done = task.subtasks.filter((s) => s.isCompleted).length;
-    const percent = Math.round((done / total) * 100);
-
-    return (
-      <div
-        className="space-y-1 mt-1.5 mb-1 select-none"
-        title={`${done} von ${total} Unteraufgaben erledigt (${percent}%)`}
-      >
-        <div className="flex items-center justify-between text-[10px] text-muted font-medium">
-          <span className="flex items-center gap-1">
-            <CheckSquare className="w-2.5 h-2.5 text-accent" />
-            <span>
-              {done}/{total} Unteraufgaben
-            </span>
-          </span>
-          <span className={percent === 100 ? 'text-status-ok font-bold' : 'text-muted'}>
-            {percent}%
-          </span>
-        </div>
-        <div className="w-full h-1 bg-border rounded-full overflow-hidden">
-          <div
-            className={`h-full transition-all duration-300 ${
-              percent === 100 ? 'bg-status-ok' : 'bg-accent'
-            }`}
-            style={{ width: `${percent}%` }}
-          />
-        </div>
-      </div>
-    );
-  };
-
-  const renderSubtaskList = (task: Thought) => {
-    const hasSubtasks = task.subtasks && task.subtasks.length > 0;
-    const isAdding = addingSubtaskTaskId === task.id;
-
-    if (!hasSubtasks && !isAdding) return null;
-
-    return (
-      <div className="space-y-1 pt-1 pb-0.5">
-        {hasSubtasks && (
-          <div className="space-y-0.5">
-            {task.subtasks!.map((sub) => (
-              <div
-                key={sub.id}
-                className="flex items-center justify-between group/sub py-0.5 px-1 rounded hover:bg-canvas text-xs transition-colors"
-              >
-                <label className="flex items-center gap-2 cursor-pointer flex-1 min-w-0 select-none">
-                  <input
-                    type="checkbox"
-                    checked={sub.isCompleted}
-                    onChange={() => handleToggleSubtask(task, sub.id)}
-                    className="checkbox-square w-3.5 h-3.5 accent-accent cursor-pointer flex-shrink-0"
-                  />
-                  <span
-                    className={`truncate leading-snug ${
-                      sub.isCompleted ? 'line-through text-faint' : 'text-main'
-                    }`}
-                  >
-                    {sub.title}
-                  </span>
-                </label>
-                <button
-                  type="button"
-                  onClick={() => handleDeleteSubtask(task, sub.id)}
-                  className="opacity-0 group-hover/sub:opacity-100 text-faint hover:text-status-err transition-opacity p-0.5 ml-1"
-                  title="Unteraufgabe entfernen"
-                >
-                  <Trash2 className="w-2.5 h-2.5" />
-                </button>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {isAdding && (
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              handleAddSubtask(task, subtaskDraft);
-            }}
-            className="flex items-center gap-1 pt-1"
-          >
-            <input
-              type="text"
-              value={subtaskDraft}
-              onChange={(e) => setSubtaskDraft(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Escape') {
-                  setAddingSubtaskTaskId(null);
-                  setSubtaskDraft('');
-                }
-              }}
-              placeholder="Neue Unteraufgabe… (Enter)"
-              autoFocus
-              className="flex-1 h-6 px-1.5 text-xs bg-canvas border border-accent rounded-btn text-main placeholder-faint focus:outline-none"
-            />
-            <button
-              type="submit"
-              disabled={!subtaskDraft.trim()}
-              className="h-6 px-2 bg-accent text-on-accent text-[11px] rounded-btn font-medium disabled:opacity-40 cursor-pointer"
-              title="Hinzufügen"
-            >
-              <Plus className="w-3 h-3" />
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setAddingSubtaskTaskId(null);
-                setSubtaskDraft('');
-              }}
-              className="h-6 px-1 text-muted hover:text-main cursor-pointer"
-              title="Abbrechen"
-            >
-              <X className="w-3 h-3" />
-            </button>
-          </form>
-        )}
-      </div>
-    );
-  };
-
   const handleConvertToDoc = async (task: Thought) => {
     triggerHaptic(20);
     const updated = await api.triageAction(task.id, 'keep', { convertTo: 'document' });
@@ -399,6 +480,8 @@ export const TasksView: React.FC<TasksViewProps> = ({
   };
 
   const handlePurgeAllDiscarded = async () => {
+    if (!window.confirm('Alle verworfenen Gedanken endgültig löschen?')) return;
+    triggerHaptic(20);
     await api.purgeDiscarded();
     await loadData();
     onRefreshStats();
@@ -426,6 +509,27 @@ export const TasksView: React.FC<TasksViewProps> = ({
     }
   };
 
+  const handleQuickAddTaskToColumn = async (columnId: string) => {
+    const title = prompt('Neue Aufgabe für diese Spalte:');
+    if (!title || !title.trim()) return;
+    triggerHaptic(10);
+    const targetCol = activeColumns.find((c) => c.id === columnId);
+    const isCompleted = targetCol ? !!targetCol.isDone : columnId === 'done';
+    try {
+      const created = await api.captureThought(title.trim(), 'normal', 'manual', undefined, {
+        target: 'task',
+        taskListId: selectedListId === 'all' ? '' : selectedListId,
+      });
+      if (created && created.id) {
+        const updated = await api.updateThought(created.id, { kanbanStatus: columnId, isCompleted });
+        setTasks((prev) => [updated, ...prev]);
+        onRefreshStats();
+      }
+    } catch {
+      loadData();
+    }
+  };
+
   const handleCreateTaskList = async (e: React.FormEvent) => {
     e.preventDefault();
     const title = newListTitle.trim();
@@ -519,35 +623,219 @@ export const TasksView: React.FC<TasksViewProps> = ({
     }
   };
 
-  const safeTasks = useMemo(() => {
-    if (!Array.isArray(tasks)) return [];
-    const seen = new Set<string>();
-    const unique: Thought[] = [];
-    for (const t of tasks) {
-      if (t && t.id && !seen.has(t.id)) {
-        seen.add(t.id);
-        unique.push(t);
-      }
+  const handleSaveColumns = async (newColumns: KanbanColumn[]) => {
+    triggerHaptic(15);
+    if (currentSelectedList && selectedListId !== 'all') {
+      const updated = await api.updateTaskList(currentSelectedList.id, { columns: newColumns });
+      setTaskLists((prev) => prev.map((l) => (l.id === updated.id ? updated : l)));
+    } else {
+      localStorage.setItem('mindsift:kanban_columns', JSON.stringify(newColumns));
+      setGlobalColumns(newColumns);
     }
-    return unique;
-  }, [tasks]);
-  const safeTaskLists = Array.isArray(taskLists) ? taskLists : [];
-  const safeTeams = Array.isArray(teams) ? teams : [];
-  const safeCollaborators = Array.isArray(collaborators) ? collaborators : [];
-  const safeDiscarded = Array.isArray(discarded) ? discarded : [];
+  };
 
-  const openTasks = safeTasks.filter((t) => !t.isCompleted);
-  const doneTasks = safeTasks.filter((t) => t.isCompleted);
+  const renderTaskProgressBar = (task: Thought) => {
+    if (!task.subtasks || task.subtasks.length === 0) return null;
+    const total = task.subtasks.length;
+    const done = task.subtasks.filter((s) => s.isCompleted).length;
+    const percent = Math.round((done / total) * 100);
 
-  const todoKanban = safeTasks.filter(
-    (t) => (!t.kanbanStatus || t.kanbanStatus === 'todo') && !t.isCompleted
-  );
-  const inProgressKanban = safeTasks.filter(
-    (t) => t.kanbanStatus === 'in_progress' && !t.isCompleted
-  );
-  const doneKanban = safeTasks.filter((t) => t.kanbanStatus === 'done' || t.isCompleted);
+    return (
+      <div
+        className="space-y-0.5 mt-0.5 mb-0.5 select-none"
+        title={`${done} von ${total} Unteraufgaben erledigt (${percent}%)`}
+      >
+        <div className="flex items-center justify-between text-[9px] text-muted font-medium">
+          <span className="flex items-center gap-1">
+            <CheckSquare className="w-2.5 h-2.5 text-accent" />
+            <span>
+              {done}/{total} Unteraufgaben
+            </span>
+          </span>
+          <span className={percent === 100 ? 'text-status-ok font-bold' : 'text-muted'}>
+            {percent}%
+          </span>
+        </div>
+        <div className="w-full h-1 bg-border rounded-full overflow-hidden">
+          <div
+            className={`h-full transition-all duration-300 ${
+              percent === 100 ? 'bg-status-ok' : 'bg-accent'
+            }`}
+            style={{ width: `${percent}%` }}
+          />
+        </div>
+      </div>
+    );
+  };
 
-  const currentSelectedList = safeTaskLists.find((l) => l.id === selectedListId);
+  // Clean Task Row in List View
+  const renderTaskRow = (task: Thought) => {
+    const isCompleted = task.isCompleted;
+
+    return (
+      <div
+        key={task.id}
+        className={`px-3 py-2.5 flex items-center justify-between gap-3 transition-colors hover:bg-panel-hover group border-b border-border last:border-b-0 ${
+          isCompleted ? 'opacity-65' : ''
+        }`}
+      >
+        <div className="flex items-center gap-3 min-w-0 flex-1">
+          {/* Checkbox */}
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleToggleDone(task);
+            }}
+            className={`w-4 h-4 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
+              isCompleted
+                ? 'bg-status-ok border-status-ok text-on-accent'
+                : 'border-strong hover:border-accent text-transparent'
+            }`}
+            title={isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
+          >
+            <Check className="w-3 h-3 stroke-[3]" />
+          </button>
+
+          {/* Clickable Title & Metadata */}
+          <div
+            onClick={() => {
+              setDetailTaskId(task.id);
+              setShowDetailModal(true);
+            }}
+            className="min-w-0 flex-1 cursor-pointer space-y-1"
+          >
+            <div className="flex items-center gap-2 flex-wrap">
+              <p
+                className={`text-sm break-words leading-tight ${
+                  isCompleted ? 'line-through text-faint' : 'text-main font-medium'
+                }`}
+              >
+                {task.content}
+              </p>
+            </div>
+
+            {/* Subtasks Progress Bar */}
+            {renderTaskProgressBar(task)}
+
+            {/* Interactive Badges Bar */}
+            <div
+              className="flex flex-wrap items-center gap-1.5 pt-0.5 empty:hidden"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {/* Kanban status selector pill */}
+              <select
+                value={task.kanbanStatus || (isCompleted ? 'done' : 'todo')}
+                onChange={(e) => handleSetKanbanStatus(task, e.target.value)}
+                className="h-5 px-1.5 text-[10px] rounded-btn border border-border bg-panel text-muted hover:text-main cursor-pointer"
+                title="Status / Zustand ändern"
+              >
+                {activeColumns.map((c) => (
+                  <option key={c.id} value={c.id}>
+                    {c.name}
+                  </option>
+                ))}
+              </select>
+
+              {/* Priority badge: click to cycle or clear */}
+              {task.priority === 'urgent' && (
+                <button
+                  type="button"
+                  onClick={() => handleCyclePriority(task)}
+                  className="badge-accent text-[10px] cursor-pointer hover:opacity-85"
+                  title="Klicken zum Ändern der Priorität (Dringend -> Normal)"
+                >
+                  🔥 Dringend
+                </button>
+              )}
+              {task.priority === 'high' && (
+                <button
+                  type="button"
+                  onClick={() => handleCyclePriority(task)}
+                  className="px-1.5 py-0.5 border border-status-warn text-status-warn rounded-btn text-[10px] font-medium cursor-pointer hover:opacity-85"
+                  title="Klicken zum Ändern der Priorität (Wichtig -> Dringend)"
+                >
+                  ⚠️ Wichtig
+                </button>
+              )}
+
+              {/* Note indicator */}
+              {task.notes && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setDetailTaskId(task.id);
+                    setShowDetailModal(true);
+                  }}
+                  className="inline-flex items-center gap-1 text-[10px] text-muted hover:text-main bg-canvas px-1.5 py-0.5 rounded border border-border"
+                  title="Notiz anzeigen / bearbeiten"
+                >
+                  <FileText className="w-2.5 h-2.5 text-accent" />
+                  <span className="truncate max-w-[120px]">{task.notes}</span>
+                </button>
+              )}
+
+              {/* Due Date */}
+              {task.dueDate && (
+                <span className="inline-flex items-center gap-1 text-[10px] text-muted">
+                  <Calendar className="w-2.5 h-2.5 text-accent" />
+                  <span>{task.dueDate}</span>
+                </span>
+              )}
+
+              {/* Hashtag badges */}
+              {task.tags?.map((tag) => (
+                <button
+                  key={tag}
+                  type="button"
+                  onClick={() => setSelectedTag(selectedTag === tag ? null : tag)}
+                  className={`text-[10px] px-1.5 py-0.2 rounded-pill border transition-colors ${
+                    selectedTag === tag
+                      ? 'bg-accent/15 border-accent text-accent font-semibold'
+                      : 'badge-neutral hover:border-accent'
+                  }`}
+                  title={`Nach #${tag} filtern`}
+                >
+                  #{tag}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Action Controls */}
+        <div className="flex items-center gap-1 flex-shrink-0">
+          <button
+            type="button"
+            onClick={() => {
+              setDetailTaskId(task.id);
+              setShowDetailModal(true);
+            }}
+            className="text-faint hover:text-accent p-1.5 transition-colors"
+            title="Aufgabe bearbeiten"
+          >
+            <Edit3 className="w-3.5 h-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => handleConvertToDoc(task)}
+            title="Als Notiz vertiefen"
+            className="text-faint hover:text-accent p-1.5 transition-colors hidden sm:block"
+          >
+            <FileText className="w-3.5 h-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => handleDeletePermanent(task.id)}
+            title="Aufgabe löschen"
+            className="text-faint hover:text-status-err p-1.5 transition-colors"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+    );
+  };
 
   return (
     <div className="w-full space-y-3">
@@ -631,7 +919,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
                 <span>Teilen</span>
               </button>
 
-              {/* Avatar Stack in the corner */}
+              {/* Avatar Stack */}
               {currentSelectedList.members && currentSelectedList.members.length > 0 ? (
                 <div
                   onClick={() => handleOpenShareModal(currentSelectedList)}
@@ -695,7 +983,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
         </div>
       </div>
 
-      {/* Quick Add Task Input in active list */}
+      {/* Quick Add Task Input */}
       <form
         onSubmit={handleQuickAddTask}
         className="flex items-center gap-1.5 panel-surface p-1.5"
@@ -730,6 +1018,92 @@ export const TasksView: React.FC<TasksViewProps> = ({
         </div>
       </form>
 
+      {/* Hashtag Filter & Grouping / Sorting Toolbar */}
+      <div className="flex flex-wrap items-center justify-between gap-2 pt-1 pb-0.5">
+        {/* Hashtag filter chips */}
+        <div className="flex items-center gap-1.5 overflow-x-auto max-w-full pb-1">
+          <span className="text-[11px] font-semibold text-muted flex items-center gap-1 flex-shrink-0">
+            <Hash className="w-3 h-3 text-accent" />
+            <span>Hashtags:</span>
+          </span>
+          <button
+            onClick={() => setSelectedTag(null)}
+            className={`h-6 px-2 text-[11px] rounded-pill border transition-colors flex-shrink-0 ${
+              selectedTag === null
+                ? 'bg-panel border-accent text-accent font-semibold'
+                : 'bg-canvas border-border text-muted hover:text-main'
+            }`}
+          >
+            Alle ({safeTasks.length})
+          </button>
+          {allAvailableTags.map((tag) => {
+            const count = safeTasks.filter((t) => t.tags?.includes(tag)).length;
+            const isSelected = selectedTag === tag;
+            return (
+              <button
+                key={tag}
+                onClick={() => setSelectedTag(isSelected ? null : tag)}
+                className={`h-6 px-2 text-[11px] rounded-pill border transition-colors flex items-center gap-1 flex-shrink-0 ${
+                  isSelected
+                    ? 'bg-accent/15 border-accent text-accent font-semibold'
+                    : 'bg-canvas border-border text-muted hover:text-main'
+                }`}
+              >
+                <span>#{tag}</span>
+                <span className="text-[9px] opacity-70 font-mono">({count})</span>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Group By & Sort By Dropdowns & Manage Columns button */}
+        <div className="flex items-center gap-2 flex-shrink-0 ml-auto">
+          {viewMode === 'kanban' ? (
+            <button
+              onClick={() => setShowManageColumnsModal(true)}
+              className="btn-action h-7 px-2.5 text-xs flex items-center gap-1.5"
+              title="Kanban-Spalten hinzufügen, umbenennen oder neu anordnen"
+            >
+              <Columns className="w-3.5 h-3.5 text-accent" />
+              <span>Spalten anpassen</span>
+            </button>
+          ) : (
+            <>
+              {/* Group By */}
+              <div className="flex items-center gap-1 text-xs text-muted">
+                <span className="text-[11px]">Gruppe:</span>
+                <select
+                  value={groupBy}
+                  onChange={(e) => setGroupBy(e.target.value as any)}
+                  className="h-7 px-2 input-field text-xs bg-panel"
+                >
+                  <option value="none">Keine</option>
+                  <option value="tag">Nach Hashtag</option>
+                  <option value="status">Nach Status</option>
+                  <option value="priority">Nach Priorität</option>
+                  <option value="due">Nach Fälligkeit</option>
+                </select>
+              </div>
+
+              {/* Sort By */}
+              <div className="flex items-center gap-1 text-xs text-muted">
+                <span className="text-[11px]">Sortierung:</span>
+                <select
+                  value={sortBy}
+                  onChange={(e) => setSortBy(e.target.value as any)}
+                  className="h-7 px-2 input-field text-xs bg-panel"
+                >
+                  <option value="created">Erstelldatum</option>
+                  <option value="due">Fälligkeitsdatum</option>
+                  <option value="priority">Priorität</option>
+                  <option value="alpha">Titel (A-Z)</option>
+                </select>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
       {/* NEW LIST MODAL */}
       {showNewListModal && (
         <div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-4">
@@ -1036,332 +1410,222 @@ export const TasksView: React.FC<TasksViewProps> = ({
         </div>
       )}
 
+      {/* MANAGE COLUMNS MODAL */}
+      <ManageColumnsModal
+        isOpen={showManageColumnsModal}
+        onClose={() => setShowManageColumnsModal(false)}
+        initialColumns={activeColumns}
+        onSave={handleSaveColumns}
+        listTitle={currentSelectedList?.title || 'Alle Aufgaben'}
+      />
+
+      {/* TASK DETAIL MODAL */}
+      <TaskDetailModal
+        task={detailTask}
+        isOpen={showDetailModal}
+        onClose={() => {
+          setShowDetailModal(false);
+          setDetailTaskId(null);
+        }}
+        activeColumns={activeColumns}
+        taskLists={safeTaskLists}
+        onUpdateTitle={handleUpdateTaskTitle}
+        onUpdateStatus={handleSetKanbanStatus}
+        onUpdatePriority={handleSetPriority}
+        onUpdateDueDate={handleUpdateTaskDueDate}
+        onUpdateTaskList={handleUpdateTaskTaskList}
+        onUpdateNotes={handleUpdateTaskNotes}
+        onUpdateTags={handleUpdateTaskTags}
+        onToggleSubtask={handleToggleSubtask}
+        onAddSubtask={handleAddSubtask}
+        onDeleteSubtask={handleDeleteSubtask}
+        onConvertToDoc={handleConvertToDoc}
+        onDeleteTask={handleDeletePermanent}
+      />
+
       {/* VIEW MODES: LIST OR KANBAN */}
       {viewMode === 'kanban' ? (
-        /* KANBAN BOARD (3 COLUMNS) */
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-2.5 pt-1">
-          {/* COLUMN 1: TODO */}
-          <div className="bg-canvas border border-border flex flex-col">
-            <div className="px-3 py-2 bg-panel border-b border-border flex items-center justify-between">
-              <span className="text-xs font-semibold text-main flex items-center gap-1.5">
-                <span className="w-2 h-2 bg-faint inline-block" />
-                <span>Zu erledigen</span>
-              </span>
-              <span className="badge-neutral font-mono">{todoKanban.length}</span>
-            </div>
+        /* DYNAMIC KANBAN BOARD */
+        <div className="space-y-2">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 pt-1">
+            {activeColumns.map((col, colIdx) => {
+              const colTasks = kanbanTasks.filter((t) => {
+                if (col.isDone) {
+                  return t.isCompleted || t.kanbanStatus === col.id;
+                }
+                if (t.isCompleted) return false;
+                if (t.kanbanStatus) return t.kanbanStatus === col.id;
+                return col.id === 'todo';
+              });
 
-            <div className="p-2 space-y-2 min-h-[360px] flex-1 overflow-y-auto">
-              {todoKanban.map((task) => (
-                <div
-                  key={task.id}
-                  className="panel-surface p-2.5 space-y-2 hover:border-strong transition-colors"
-                >
-                  <div className="flex items-start justify-between gap-2">
-                    <p className="text-xs font-medium text-main break-words flex-1 leading-snug whitespace-pre-wrap">
-                      {task.content}
-                    </p>
-                    <button
-                      onClick={() => handleConvertToDoc(task)}
-                      title="Als Notiz vertiefen"
-                      className="text-faint hover:text-accent flex-shrink-0"
-                    >
-                      <FileText className="w-3.5 h-3.5" />
-                    </button>
-                  </div>
-
-                  {/* Subtasks Progress Bar on Title */}
-                  {renderTaskProgressBar(task)}
-
-                  {/* Notes Preview / Inline Editor */}
-                  {activeNotesTaskId === task.id ? (
-                    <div className="space-y-1">
-                      <textarea
-                        value={notesDraft}
-                        onChange={(e) => setNotesDraft(e.target.value)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                            e.preventDefault();
-                            handleSaveNotes(task);
-                          } else if (e.key === 'Escape') {
-                            setActiveNotesTaskId(null);
-                          }
-                        }}
-                        placeholder="Detailnotizen eingeben… (Shift+Enter für Zeilenumbruch, Strg+Enter zum Speichern)"
-                        rows={3}
-                        className="w-full input-field p-1.5 text-xs resize-none"
+              return (
+                <div key={col.id} className="bg-canvas border border-border flex flex-col min-h-[420px]">
+                  {/* Column Header */}
+                  <div className="px-3 py-2 bg-panel border-b border-border flex items-center justify-between">
+                    <span className="text-xs font-semibold text-main flex items-center gap-1.5">
+                      <span
+                        className={`w-2 h-2 rounded-full ${
+                          col.isDone
+                            ? 'bg-status-ok'
+                            : col.id === 'in_progress'
+                            ? 'bg-accent'
+                            : col.id === 'waiting'
+                            ? 'bg-status-warn'
+                            : 'bg-faint'
+                        }`}
                       />
-                      <div className="flex justify-end gap-1">
-                        <button
-                          onClick={() => setActiveNotesTaskId(null)}
-                          className="btn-action h-5 px-1.5 text-[10px]"
-                        >
-                          Abbr.
-                        </button>
-                        <button
-                          onClick={() => handleSaveNotes(task)}
-                          className="btn-primary h-5 px-2 text-[10px]"
-                        >
-                          Speichern
-                        </button>
-                      </div>
-                    </div>
-                  ) : task.notes ? (
-                    <div
-                      onClick={() => {
-                        setActiveNotesTaskId(task.id);
-                        setNotesDraft(task.notes || '');
-                      }}
-                      className="p-1.5 bg-canvas border border-border text-[11px] text-muted break-words whitespace-pre-wrap leading-relaxed cursor-pointer hover:border-strong"
-                      title="Klicken zum Bearbeiten der Notizen"
-                    >
-                      {task.notes}
-                    </div>
-                  ) : null}
+                      <span>{col.name}</span>
+                    </span>
+                    <span className="badge-neutral font-mono">{colTasks.length}</span>
+                  </div>
 
-                  {/* Subtasks Checklist & Inline Creator */}
-                  {renderSubtaskList(task)}
-
-                  {/* Footer & Movement Controls */}
-                  <div className="flex items-center justify-between gap-1 pt-1 border-t border-subtle text-[11px]">
-                    <div className="flex items-center gap-1.5 text-muted">
-                      {task.dueDate && (
-                        <span className="flex items-center gap-1 text-[10px] text-muted">
-                          <Calendar className="w-2.5 h-2.5" /> {task.dueDate}
-                        </span>
-                      )}
-                      {!task.notes && (
-                        <button
-                          onClick={() => {
-                            setActiveNotesTaskId(task.id);
-                            setNotesDraft('');
-                          }}
-                          className="text-[10px] text-faint hover:text-main"
-                        >
-                          + Notiz
-                        </button>
-                      )}
-                      <button
-                        type="button"
+                  {/* Tasks List in Column */}
+                  <div className="p-2 space-y-2 flex-1 overflow-y-auto max-h-[70vh]">
+                    {colTasks.map((task) => (
+                      <div
+                        key={task.id}
                         onClick={() => {
-                          setAddingSubtaskTaskId(task.id);
-                          setSubtaskDraft('');
+                          setDetailTaskId(task.id);
+                          setShowDetailModal(true);
                         }}
-                        className="text-[10px] text-faint hover:text-main flex items-center gap-0.5 cursor-pointer"
-                        title="Unteraufgabe hinzufügen"
+                        className="panel-surface p-2.5 space-y-2 hover:border-strong transition-all cursor-pointer shadow-sm group"
                       >
-                        <Plus className="w-2.5 h-2.5 text-accent" />
-                        <span>+ Unteraufgabe</span>
-                      </button>
-                    </div>
+                        <div className="flex items-start justify-between gap-2">
+                          <p
+                            className={`text-xs font-medium break-words flex-1 leading-snug ${
+                              task.isCompleted ? 'line-through text-faint' : 'text-main'
+                            }`}
+                          >
+                            {task.content}
+                          </p>
+                          <div className="flex items-center gap-1 flex-shrink-0" onClick={(e) => e.stopPropagation()}>
+                            <button
+                              onClick={() => handleConvertToDoc(task)}
+                              title="Als Notiz vertiefen"
+                              className="text-faint hover:text-accent p-0.5"
+                            >
+                              <FileText className="w-3.5 h-3.5" />
+                            </button>
+                            <button
+                              onClick={() => handleDeletePermanent(task.id)}
+                              title="Aufgabe löschen"
+                              className="text-faint hover:text-status-err p-0.5"
+                            >
+                              <Trash2 className="w-3 h-3" />
+                            </button>
+                          </div>
+                        </div>
 
-                    <div className="flex items-center gap-1">
-                      <button
-                        onClick={() => handleKanbanMove(task, 'in_progress')}
-                        className="btn-action h-6 px-1.5 text-[10px] flex items-center gap-1"
-                        title="In Bearbeitung verschieben"
-                      >
-                        <span>Starten</span>
-                        <ArrowRight className="w-3 h-3 text-accent" />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              ))}
-              {todoKanban.length === 0 && (
-                <div className="p-4 text-center text-faint text-xs">Keine Aufgaben offen</div>
-              )}
-            </div>
-          </div>
+                        {/* Subtasks progress */}
+                        {renderTaskProgressBar(task)}
 
-          {/* COLUMN 2: IN PROGRESS */}
-          <div className="bg-canvas border border-border flex flex-col">
-            <div className="px-3 py-2 bg-panel border-b border-border flex items-center justify-between">
-              <span className="text-xs font-semibold text-accent flex items-center gap-1.5">
-                <span className="w-2 h-2 bg-accent inline-block" />
-                <span>In Bearbeitung</span>
-              </span>
-              <span className="badge-neutral font-mono">{inProgressKanban.length}</span>
-            </div>
+                        {/* Notes preview badge */}
+                        {task.notes && (
+                          <div className="flex items-center gap-1 text-[10px] text-muted bg-canvas p-1 rounded border border-border truncate">
+                            <FileText className="w-2.5 h-2.5 text-accent flex-shrink-0" />
+                            <span className="truncate">{task.notes}</span>
+                          </div>
+                        )}
 
-            <div className="p-2 space-y-2 min-h-[360px] flex-1 overflow-y-auto">
-              {inProgressKanban.map((task) => (
-                <div
-                  key={task.id}
-                  className="bg-panel border border-accent-border p-2.5 space-y-2 hover:border-accent transition-colors"
-                >
-                  <div className="flex items-start justify-between gap-2">
-                    <p className="text-xs font-medium text-main break-words flex-1 leading-snug whitespace-pre-wrap">
-                      {task.content}
-                    </p>
-                    <button
-                      onClick={() => handleConvertToDoc(task)}
-                      title="Als Notiz vertiefen"
-                      className="text-faint hover:text-accent flex-shrink-0"
-                    >
-                      <FileText className="w-3.5 h-3.5" />
-                    </button>
-                  </div>
+                        {/* Badges: Priority, Status, Tags */}
+                        <div className="flex flex-wrap items-center gap-1 pt-0.5" onClick={(e) => e.stopPropagation()}>
+                          {task.priority === 'urgent' && (
+                            <button
+                              type="button"
+                              onClick={() => handleCyclePriority(task)}
+                              className="badge-accent text-[9px] cursor-pointer hover:opacity-85"
+                              title="Klicken zum Ändern der Priorität (Dringend -> Normal)"
+                            >
+                              🔥 Dringend
+                            </button>
+                          )}
+                          {task.priority === 'high' && (
+                            <button
+                              type="button"
+                              onClick={() => handleCyclePriority(task)}
+                              className="px-1.5 py-0.2 border border-status-warn text-status-warn rounded-btn text-[9px] font-medium cursor-pointer hover:opacity-85"
+                              title="Klicken zum Ändern der Priorität (Wichtig -> Dringend)"
+                            >
+                              ⚠️ Wichtig
+                            </button>
+                          )}
+                          {task.dueDate && (
+                            <span className="inline-flex items-center gap-0.5 text-[9px] text-muted">
+                              <Calendar className="w-2.5 h-2.5" />
+                              <span>{task.dueDate}</span>
+                            </span>
+                          )}
+                          {task.tags?.map((tag) => (
+                            <button
+                              key={tag}
+                              type="button"
+                              onClick={() => setSelectedTag(selectedTag === tag ? null : tag)}
+                              className={`text-[9px] px-1.5 py-0.2 rounded-pill border transition-colors ${
+                                selectedTag === tag
+                                  ? 'bg-accent/15 border-accent text-accent font-semibold'
+                                  : 'badge-neutral hover:border-accent'
+                              }`}
+                            >
+                              #{tag}
+                            </button>
+                          ))}
+                        </div>
 
-                  {/* Subtasks Progress Bar on Title */}
-                  {renderTaskProgressBar(task)}
-
-                  {/* Notes Preview / Inline Editor */}
-                  {activeNotesTaskId === task.id ? (
-                    <div className="space-y-1">
-                      <textarea
-                        value={notesDraft}
-                        onChange={(e) => setNotesDraft(e.target.value)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                            e.preventDefault();
-                            handleSaveNotes(task);
-                          } else if (e.key === 'Escape') {
-                            setActiveNotesTaskId(null);
-                          }
-                        }}
-                        placeholder="Detailnotizen eingeben… (Shift+Enter für Zeilenumbruch, Strg+Enter zum Speichern)"
-                        rows={3}
-                        className="w-full input-field p-1.5 text-xs resize-none"
-                      />
-                      <div className="flex justify-end gap-1">
-                        <button
-                          onClick={() => setActiveNotesTaskId(null)}
-                          className="btn-action h-5 px-1.5 text-[10px]"
+                        {/* Column Navigation controls: Move Left / Move Right */}
+                        <div
+                          className="flex items-center justify-between pt-1 border-t border-border text-[10px]"
+                          onClick={(e) => e.stopPropagation()}
                         >
-                          Abbr.
-                        </button>
-                        <button
-                          onClick={() => handleSaveNotes(task)}
-                          className="btn-primary h-5 px-2 text-[10px]"
-                        >
-                          Speichern
-                        </button>
+                          <button
+                            type="button"
+                            disabled={colIdx === 0}
+                            onClick={() => handleSetKanbanStatus(task, activeColumns[colIdx - 1].id)}
+                            className="text-faint hover:text-main disabled:opacity-20 flex items-center gap-0.5"
+                            title={colIdx > 0 ? `Nach "${activeColumns[colIdx - 1].name}"` : ''}
+                          >
+                            <ArrowLeft className="w-3 h-3" />
+                            <span className="hidden sm:inline">{colIdx > 0 ? activeColumns[colIdx - 1].name : ''}</span>
+                          </button>
+
+                          <button
+                            type="button"
+                            disabled={colIdx === activeColumns.length - 1}
+                            onClick={() => handleSetKanbanStatus(task, activeColumns[colIdx + 1].id)}
+                            className="text-faint hover:text-main disabled:opacity-20 flex items-center gap-0.5"
+                            title={colIdx < activeColumns.length - 1 ? `Nach "${activeColumns[colIdx + 1].name}"` : ''}
+                          >
+                            <span className="hidden sm:inline">{colIdx < activeColumns.length - 1 ? activeColumns[colIdx + 1].name : ''}</span>
+                            <ArrowRight className="w-3 h-3" />
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                  ) : task.notes ? (
-                    <div
-                      onClick={() => {
-                        setActiveNotesTaskId(task.id);
-                        setNotesDraft(task.notes || '');
-                      }}
-                      className="p-1.5 bg-canvas border border-border text-[11px] text-muted break-words whitespace-pre-wrap leading-relaxed cursor-pointer hover:border-strong"
-                    >
-                      {task.notes}
-                    </div>
-                  ) : null}
+                    ))}
 
-                  {/* Subtasks Checklist & Inline Creator */}
-                  {renderSubtaskList(task)}
-
-                  {/* Movement Controls */}
-                  <div className="flex items-center justify-between gap-1 pt-1 border-t border-subtle text-[11px]">
-                    <div className="flex items-center gap-1.5 text-muted">
-                      {!task.notes && (
-                        <button
-                          onClick={() => {
-                            setActiveNotesTaskId(task.id);
-                            setNotesDraft('');
-                          }}
-                          className="text-[10px] text-faint hover:text-main"
-                        >
-                          + Notiz
-                        </button>
-                      )}
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setAddingSubtaskTaskId(task.id);
-                          setSubtaskDraft('');
-                        }}
-                        className="text-[10px] text-faint hover:text-main flex items-center gap-0.5 cursor-pointer"
-                        title="Unteraufgabe hinzufügen"
-                      >
-                        <Plus className="w-2.5 h-2.5 text-accent" />
-                        <span>+ Unteraufgabe</span>
-                      </button>
-                    </div>
-
-                    <div className="flex items-center gap-1">
-                      <button
-                        onClick={() => handleKanbanMove(task, 'todo')}
-                        className="btn-action h-6 px-1.5 text-[10px] flex items-center gap-1"
-                        title="Zurück zu 'Zu erledigen'"
-                      >
-                        <ArrowLeft className="w-3 h-3 text-muted" />
-                        <span>Zurück</span>
-                      </button>
-
-                      <button
-                        onClick={() => handleKanbanMove(task, 'done')}
-                        className="btn-primary h-6 px-2 text-[10px] flex items-center gap-1"
-                        title="Als Erledigt markieren"
-                      >
-                        <span>Fertig</span>
-                        <Check className="w-3 h-3" />
-                      </button>
-                    </div>
+                    {colTasks.length === 0 && (
+                      <div className="p-4 text-center text-faint text-xs italic">
+                        Keine Aufgaben in dieser Spalte
+                      </div>
+                    )}
                   </div>
-                </div>
-              ))}
-              {inProgressKanban.length === 0 && (
-                <div className="p-4 text-center text-faint text-xs">Keine aktiven Aufgaben</div>
-              )}
-            </div>
-          </div>
 
-          {/* COLUMN 3: DONE */}
-          <div className="bg-canvas border border-border flex flex-col">
-            <div className="px-3 py-2 bg-panel border-b border-border flex items-center justify-between">
-              <span className="text-xs font-semibold text-status-ok flex items-center gap-1.5">
-                <span className="w-2 h-2 bg-status-ok inline-block" />
-                <span>Erledigt</span>
-              </span>
-              <span className="badge-neutral font-mono">{doneKanban.length}</span>
-            </div>
-
-            <div className="p-2 space-y-2 min-h-[360px] flex-1 overflow-y-auto">
-              {doneKanban.map((task) => (
-                <div
-                  key={task.id}
-                  className="panel-surface p-2.5 space-y-2 opacity-70 hover:opacity-100 transition-opacity"
-                >
-                  <p className="text-xs font-medium text-muted line-through break-words leading-snug">
-                    {task.content}
-                  </p>
-
-                  {/* Subtasks Progress Bar & Checklist */}
-                  {renderTaskProgressBar(task)}
-                  {renderSubtaskList(task)}
-
-                  <div className="flex items-center justify-between gap-1 pt-1 border-t border-subtle text-[11px]">
+                  {/* Quick Add Task to Column */}
+                  <div className="p-2 border-t border-border bg-panel">
                     <button
-                      onClick={() => handleKanbanMove(task, 'todo')}
-                      className="btn-action h-6 px-1.5 text-[10px] flex items-center gap-1"
-                      title="Wiedereröffnen"
+                      type="button"
+                      onClick={() => handleQuickAddTaskToColumn(col.id)}
+                      className="w-full h-7 px-2 text-xs border border-dashed border-border rounded-btn text-muted hover:text-main hover:bg-canvas flex items-center justify-center gap-1 transition-colors"
                     >
-                      <RotateCcw className="w-3 h-3 text-accent" />
-                      <span>Wiedereröffnen</span>
-                    </button>
-                    <button
-                      onClick={() => handleDeletePermanent(task.id)}
-                      className="text-faint hover:text-status-err p-1"
-                      title="Löschen"
-                    >
-                      <Trash2 className="w-3 h-3" />
+                      <Plus className="w-3 h-3" />
+                      <span>Aufgabe hinzufügen</span>
                     </button>
                   </div>
                 </div>
-              ))}
-              {doneKanban.length === 0 && (
-                <div className="p-4 text-center text-faint text-xs">
-                  Noch keine erledigten Aufgaben
-                </div>
-              )}
-            </div>
+              );
+            })}
           </div>
         </div>
       ) : (
-        /* STANDARD LIST VIEW */
+        /* STANDARD LIST VIEW (CLEAN & UNCLUTTERED) */
         <div className="space-y-2">
           {/* Subfilter tabs for List View */}
           <div className="flex items-center justify-between gap-2">
@@ -1369,7 +1633,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
               <button
                 onClick={() => setFilter('open')}
                 className={`h-8 px-3.5 text-xs font-medium border-r border-border transition-colors ${
-                  filter === 'open' ? 'bg-panel text-main' : 'text-muted hover:text-main'
+                  filter === 'open' ? 'bg-panel text-main font-semibold' : 'text-muted hover:text-main'
                 }`}
               >
                 Offen ({openTasks.length})
@@ -1378,7 +1642,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
               <button
                 onClick={() => setFilter('done')}
                 className={`h-8 px-3.5 text-xs font-medium border-r border-border transition-colors ${
-                  filter === 'done' ? 'bg-panel text-main' : 'text-muted hover:text-main'
+                  filter === 'done' ? 'bg-panel text-main font-semibold' : 'text-muted hover:text-main'
                 }`}
               >
                 Erledigt ({doneTasks.length})
@@ -1387,7 +1651,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
               <button
                 onClick={() => setFilter('discarded')}
                 className={`h-8 px-3.5 text-xs font-medium transition-colors ${
-                  filter === 'discarded' ? 'bg-panel text-main' : 'text-muted hover:text-main'
+                  filter === 'discarded' ? 'bg-panel text-main font-semibold' : 'text-muted hover:text-main'
                 }`}
               >
                 Papierkorb ({safeDiscarded.length})
@@ -1429,7 +1693,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
                         className="btn-icon btn-icon-danger"
                         title="Endgültig löschen"
                       >
-                        <Trash2 className="w-3 h-3" />
+                        <Trash2 className="w-3.5 h-3.5" />
                       </button>
                     </div>
                   </div>
@@ -1437,175 +1701,38 @@ export const TasksView: React.FC<TasksViewProps> = ({
               )}
             </div>
           ) : (
-            <div className="panel-surface divide-y divide-border">
-              {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
-                <div className="px-4 py-6 text-center text-muted text-sm">
-                  {filter === 'open'
-                    ? 'Keine offenen Aufgaben vorhanden.'
-                    : 'Noch keine erledigten Aufgaben.'}
-                </div>
-              ) : (
-                (filter === 'open' ? openTasks : doneTasks).map((task) => (
-                  <div
-                    key={task.id}
-                    className={`px-3 py-2.5 flex flex-col sm:flex-row sm:items-center justify-between gap-2.5 transition-colors hover:bg-panel-hover ${
-                      task.isCompleted ? 'opacity-65' : ''
-                    }`}
-                  >
-                    <div className="flex items-start gap-3 min-w-0 flex-1">
-                      {/* Theme-controlled checkbox (--radius-checkbox) */}
-                      <button
-                        onClick={() => handleToggleDone(task)}
-                        className={`w-4 h-4 mt-0.5 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
-                          task.isCompleted
-                            ? 'bg-accent border-accent text-on-accent'
-                            : 'border-strong hover:border-accent text-transparent'
-                        }`}
-                        title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
-                      >
-                        <Check className="w-3 h-3 stroke-[3]" />
-                      </button>
-
-                      <div className="min-w-0 flex-1 space-y-1">
-                        <p
-                          className={`text-sm break-words leading-tight ${
-                            task.isCompleted ? 'line-through text-faint' : 'text-main'
-                          }`}
-                        >
-                          {task.content}
-                        </p>
-
-                        {/* Subtasks Progress Bar on Title */}
-                        {renderTaskProgressBar(task)}
-
-                        {/* Inline Notes or Editor */}
-                        {activeNotesTaskId === task.id ? (
-                          <div className="space-y-1 pt-1">
-                            <textarea
-                              value={notesDraft}
-                              onChange={(e) => setNotesDraft(e.target.value)}
-                              onKeyDown={(e) => {
-                                if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                                  e.preventDefault();
-                                  handleSaveNotes(task);
-                                } else if (e.key === 'Escape') {
-                                  setActiveNotesTaskId(null);
-                                }
-                              }}
-                              placeholder="Detailnotizen eingeben… (Shift+Enter für Zeilenumbruch, Strg+Enter zum Speichern)"
-                              rows={3}
-                              className="w-full input-field p-2 text-xs resize-none"
-                            />
-                            <div className="flex justify-end gap-1.5">
-                              <button
-                                onClick={() => setActiveNotesTaskId(null)}
-                                className="btn-action h-6 px-2 text-xs"
-                              >
-                                Abbrechen
-                              </button>
-                              <button
-                                onClick={() => handleSaveNotes(task)}
-                                className="btn-primary h-6 px-2.5 text-xs"
-                              >
-                                Speichern
-                              </button>
-                            </div>
-                          </div>
-                        ) : task.notes ? (
-                          <div
-                            onClick={() => {
-                              setActiveNotesTaskId(task.id);
-                              setNotesDraft(task.notes || '');
-                            }}
-                            className="text-xs text-muted bg-canvas p-1.5 border border-border break-words whitespace-pre-wrap leading-relaxed cursor-pointer hover:border-strong"
-                            title="Klicken zum Bearbeiten"
-                          >
-                            {task.notes}
-                          </div>
-                        ) : null}
-
-                        {/* Subtasks Checklist & Inline Creator */}
-                        {renderSubtaskList(task)}
-
-                        <div className="flex flex-wrap items-center gap-1.5 mt-0.5 empty:hidden">
-                          {task.priority === 'urgent' && (
-                            <span className="badge-accent">Dringend</span>
-                          )}
-                          {task.priority === 'high' && (
-                            <span className="px-1.5 py-0.5 border border-strong rounded-btn text-main text-[10px] font-medium">
-                              Wichtig
-                            </span>
-                          )}
-                          {task.kanbanStatus === 'in_progress' && (
-                            <span className="badge-accent">⚡ In Bearbeitung</span>
-                          )}
-                          {task.tags?.map((tag) => (
-                            <span key={tag} className="badge-neutral">
-                              #{tag}
-                            </span>
-                          ))}
-                        </div>
-                      </div>
+            <div className="space-y-3">
+              {groupedTasks ? (
+                /* GROUPED LIST */
+                groupedTasks.map((grp) => (
+                  <div key={grp.key} className="panel-surface overflow-hidden">
+                    <div className="px-3 py-1.5 bg-panel border-b border-border flex items-center justify-between">
+                      <span className="text-xs font-semibold text-main">{grp.title}</span>
+                      <span className="badge-neutral font-mono text-[10px]">{grp.count}</span>
                     </div>
-
-                    {/* Action Controls */}
-                    <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setAddingSubtaskTaskId(task.id);
-                          setSubtaskDraft('');
-                        }}
-                        className="btn-action text-xs"
-                        title="Unteraufgabe hinzufügen"
-                      >
-                        <Plus className="w-3 h-3 text-accent" />
-                        <span className="hidden md:inline">Unteraufgabe</span>
-                      </button>
-
-                      {!task.notes && activeNotesTaskId !== task.id && (
-                        <button
-                          onClick={() => {
-                            setActiveNotesTaskId(task.id);
-                            setNotesDraft('');
-                          }}
-                          className="btn-action text-xs"
-                          title="Notizen zur Aufgabe hinzufügen"
-                        >
-                          <Edit3 className="w-3 h-3" />
-                          <span className="hidden md:inline">Notiz</span>
-                        </button>
-                      )}
-
-                      <div className="relative flex items-center">
-                        <Calendar className="w-3 h-3 text-muted absolute left-2 pointer-events-none" />
-                        <input
-                          type="date"
-                          value={task.dueDate || ''}
-                          onChange={(e) => handleDueDateChange(task, e.target.value)}
-                          className="h-7 pl-6 pr-2 input-field text-xs"
-                        />
-                      </div>
-
-                      <button
-                        onClick={() => handleConvertToDoc(task)}
-                        title="Als Notiz / Projekt vertiefen"
-                        className="btn-action"
-                      >
-                        <FileText className="w-3 h-3 text-accent" />
-                        <span className="hidden md:inline">Vertiefen</span>
-                      </button>
-
-                      <button
-                        onClick={() => handleDeletePermanent(task.id)}
-                        title="Löschen"
-                        className="btn-icon btn-icon-danger"
-                      >
-                        <Trash2 className="w-3 h-3" />
-                      </button>
+                    <div>
+                      {grp.tasks.map((task) => renderTaskRow(task))}
                     </div>
                   </div>
                 ))
+              ) : (
+                /* FLAT LIST */
+                <div className="panel-surface divide-y divide-border overflow-hidden">
+                  {filteredTasks.length === 0 ? (
+                    <div className="p-8 text-center text-muted text-sm space-y-1">
+                      <p className="font-medium text-main">Keine Aufgaben gefunden</p>
+                      <p className="text-xs text-faint">
+                        {selectedTag
+                          ? `Keine Aufgaben mit Hashtag #${selectedTag}.`
+                          : filter === 'done'
+                          ? 'Noch keine Aufgaben erledigt.'
+                          : 'Erstelle oben eine neue Aufgabe.'}
+                      </p>
+                    </div>
+                  ) : (
+                    filteredTasks.map((task) => renderTaskRow(task))
+                  )}
+                </div>
               )}
             </div>
           )}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index d0e554e..2b7dd05 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -6,6 +6,7 @@ import {
   DocumentBlock,
   DocShare,
   DocLockInfo,
+  KanbanColumn,
   ListItem,
   Organization,
   PriorityLevel,
@@ -313,11 +314,12 @@ export const api = {
       content?: string;
       isCompleted?: boolean;
       dueDate?: string;
-      priority?: PriorityLevel;
+      priority?: string;
       taskListId?: string;
-      kanbanStatus?: 'todo' | 'in_progress' | 'done';
+      kanbanStatus?: string;
       notes?: string;
       subtasks?: SubTask[];
+      tags?: string[];
     }
   ): Promise<Thought> {
     return request<Thought>(`/api/v1/thoughts/${thoughtId}`, {
@@ -341,6 +343,7 @@ export const api = {
       ...tl,
       members: ensureArray(tl.members),
       shares: ensureArray(tl.shares),
+      columns: ensureArray(tl.columns),
     }));
   },
 
@@ -350,6 +353,7 @@ export const api = {
     color?: string;
     teamId?: string;
     spaceId?: string;
+    columns?: KanbanColumn[];
   }): Promise<TaskList> {
     return request<TaskList>('/api/v1/task-lists', {
       method: 'POST',
@@ -365,6 +369,7 @@ export const api = {
       color?: string;
       teamId?: string;
       spaceId?: string;
+      columns?: KanbanColumn[];
     }
   ): Promise<TaskList> {
     return request<TaskList>(`/api/v1/task-lists/${id}`, {
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index dda2736..5baf3b1 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -56,7 +56,7 @@ export interface Thought {
   convertedRefId?: string;
   dueDate?: string;
   taskListId?: string;
-  kanbanStatus?: 'todo' | 'in_progress' | 'done';
+  kanbanStatus?: string;
   notes?: string;
   subtasks?: SubTask[];
   alarmSent?: boolean;
@@ -64,6 +64,13 @@ export interface Thought {
   triagedAt?: string;
 }
 
+export interface KanbanColumn {
+  id: string;
+  name: string;
+  color?: string;
+  isDone?: boolean;
+}
+
 export interface TaskListShare {
   id: string;
   taskListId: string;
@@ -92,6 +99,7 @@ export interface TaskList {
   isOwner?: boolean;
   members?: TaskListMember[];
   shares?: TaskListShare[];
+  columns?: KanbanColumn[];
   title: string;
   icon: string;
   color: string;
diff --git a/internal/api/server.go b/internal/api/server.go
index 307282f..0d62217 100644
--- a/internal/api/server.go
+++ b/internal/api/server.go
@@ -690,13 +690,14 @@ func (s *Server) handleUpdateThought(w http.ResponseWriter, r *http.Request) {
 		KanbanStatus *string           `json:"kanbanStatus"`
 		Notes        *string           `json:"notes"`
 		Subtasks     *[]domain.SubTask `json:"subtasks"`
+		Tags         *[]string         `json:"tags"`
 	}
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		writeError(w, http.StatusBadRequest, "Ungültiges JSON")
 		return
 	}
 
-	updated, err := s.store.UpdateThoughtDetails(userID, thoughtID, req.Content, req.IsCompleted, req.DueDate, req.Priority, req.TaskListID, req.KanbanStatus, req.Notes, req.Subtasks)
+	updated, err := s.store.UpdateThoughtDetails(userID, thoughtID, req.Content, req.IsCompleted, req.DueDate, req.Priority, req.TaskListID, req.KanbanStatus, req.Notes, req.Subtasks, req.Tags)
 	if err != nil {
 		writeError(w, http.StatusBadRequest, err.Error())
 		return
@@ -1590,17 +1591,18 @@ func (s *Server) handleUpdateTaskList(w http.ResponseWriter, r *http.Request) {
 	userID := auth.GetUserID(r.Context())
 	listID := chi.URLParam(r, "id")
 	var req struct {
-		Title   *string `json:"title"`
-		Icon    *string `json:"icon"`
-		Color   *string `json:"color"`
-		TeamID  *string `json:"teamId"`
-		SpaceID *string `json:"spaceId"`
+		Title   *string                `json:"title"`
+		Icon    *string                `json:"icon"`
+		Color   *string                `json:"color"`
+		TeamID  *string                `json:"teamId"`
+		SpaceID *string                `json:"spaceId"`
+		Columns *[]domain.KanbanColumn `json:"columns"`
 	}
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		writeError(w, http.StatusBadRequest, "Ungültiges JSON")
 		return
 	}
-	tl, err := s.store.UpdateTaskList(userID, listID, req.Title, req.Icon, req.Color, req.TeamID, req.SpaceID)
+	tl, err := s.store.UpdateTaskList(userID, listID, req.Title, req.Icon, req.Color, req.TeamID, req.SpaceID, req.Columns)
 	if err != nil {
 		writeError(w, http.StatusBadRequest, err.Error())
 		return
diff --git a/internal/domain/models.go b/internal/domain/models.go
index 8910918..5a5f928 100644
--- a/internal/domain/models.go
+++ b/internal/domain/models.go
@@ -175,6 +175,13 @@ type TaskListMember struct {
 	Role        string `json:"role"` // owner | member
 }
 
+type KanbanColumn struct {
+	ID     string `json:"id"`
+	Name   string `json:"name"`
+	Color  string `json:"color,omitempty"`
+	IsDone bool   `json:"isDone,omitempty"`
+}
+
 type TaskList struct {
 	ID         string           `json:"id"`
 	UserID     string           `json:"userId"`
@@ -186,6 +193,7 @@ type TaskList struct {
 	IsOwner    bool             `json:"isOwner"`
 	Members    []TaskListMember `json:"members,omitempty"`
 	Shares     []TaskListShare  `json:"shares,omitempty"`
+	Columns    []KanbanColumn   `json:"columns,omitempty"`
 	Title      string           `json:"title"`
 	Icon       string           `json:"icon"`
 	Color      string           `json:"color"`
diff --git a/internal/storage/sqlite.go b/internal/storage/sqlite.go
index e2eb044..44cfc21 100644
--- a/internal/storage/sqlite.go
+++ b/internal/storage/sqlite.go
@@ -129,6 +129,7 @@ func (s *Store) migrate() error {
 		title TEXT NOT NULL,
 		icon TEXT NOT NULL DEFAULT '📋',
 		color TEXT NOT NULL DEFAULT '#2563eb',
+		columns TEXT NOT NULL DEFAULT '[]',
 		created_at TEXT NOT NULL,
 		updated_at TEXT NOT NULL,
 		FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
@@ -324,6 +325,7 @@ func (s *Store) migrate() error {
 		"CREATE INDEX IF NOT EXISTS idx_doc_shares_doc ON doc_shares(doc_id);",
 
 		"ALTER TABLE task_lists ADD COLUMN team_id TEXT NOT NULL DEFAULT '';",
+		"ALTER TABLE task_lists ADD COLUMN columns TEXT NOT NULL DEFAULT '[]';",
 		"CREATE TABLE IF NOT EXISTS task_list_shares (id TEXT PRIMARY KEY, task_list_id TEXT NOT NULL, target_type TEXT NOT NULL CHECK(target_type IN ('team', 'user')), target_id TEXT NOT NULL, created_at TEXT NOT NULL, created_by TEXT NOT NULL, UNIQUE(task_list_id, target_type, target_id));",
 		"CREATE INDEX IF NOT EXISTS idx_task_list_shares_target ON task_list_shares(target_type, target_id);",
 		"CREATE INDEX IF NOT EXISTS idx_task_list_shares_list ON task_list_shares(task_list_id);",
@@ -1028,7 +1030,7 @@ func (s *Store) UpdateThoughtTriage(userID, thoughtID, action, convertTo, target
 	return s.GetThoughtByID(userID, thoughtID)
 }
 
-func (s *Store) UpdateThoughtDetails(userID, thoughtID string, content *string, isCompleted *bool, dueDate *string, priority *string, taskListID *string, kanbanStatus *string, notes *string, subtasks *[]domain.SubTask) (*domain.Thought, error) {
+func (s *Store) UpdateThoughtDetails(userID, thoughtID string, content *string, isCompleted *bool, dueDate *string, priority *string, taskListID *string, kanbanStatus *string, notes *string, subtasks *[]domain.SubTask, tags *[]string) (*domain.Thought, error) {
 	thought, err := s.GetThoughtByID(userID, thoughtID)
 	if err != nil {
 		return nil, err
@@ -1038,6 +1040,9 @@ func (s *Store) UpdateThoughtDetails(userID, thoughtID string, content *string,
 		thought.Content = strings.TrimSpace(*content)
 		thought.Tags = domain.ExtractTags(thought.Content)
 	}
+	if tags != nil {
+		thought.Tags = *tags
+	}
 	if isCompleted != nil {
 		thought.IsCompleted = *isCompleted
 		if *isCompleted {
@@ -1049,18 +1054,24 @@ func (s *Store) UpdateThoughtDetails(userID, thoughtID string, content *string,
 	if dueDate != nil {
 		thought.DueDate = *dueDate
 	}
-	if priority != nil && *priority != "" {
-		thought.Priority = *priority
+	if priority != nil {
+		p := strings.ToLower(strings.TrimSpace(*priority))
+		if p == "" || p == "none" {
+			p = "normal"
+		}
+		thought.Priority = p
 	}
 	if taskListID != nil {
 		thought.TaskListID = *taskListID
 	}
 	if kanbanStatus != nil && *kanbanStatus != "" {
 		thought.KanbanStatus = *kanbanStatus
-		if *kanbanStatus == "done" {
-			thought.IsCompleted = true
-		} else {
-			thought.IsCompleted = false
+		if isCompleted == nil {
+			if *kanbanStatus == "done" {
+				thought.IsCompleted = true
+			} else {
+				thought.IsCompleted = false
+			}
 		}
 	}
 	if notes != nil {
@@ -2551,7 +2562,7 @@ func (s *Store) ExportUserData(userID string) (*domain.FullExport, error) {
 
 // --- TASK LISTS ---
 
-func (s *Store) CreateTaskList(userID, spaceID, teamID, title, icon, color string) (*domain.TaskList, error) {
+func (s *Store) CreateTaskList(userID, spaceID, teamID, title, icon, color string, columns ...[]domain.KanbanColumn) (*domain.TaskList, error) {
 	if strings.TrimSpace(title) == "" {
 		title = "Meine Aufgaben"
 	}
@@ -2561,6 +2572,16 @@ func (s *Store) CreateTaskList(userID, spaceID, teamID, title, icon, color strin
 	if color == "" {
 		color = "#2563eb"
 	}
+	cols := []domain.KanbanColumn{
+		{ID: "todo", Name: "Zu erledigen"},
+		{ID: "in_progress", Name: "In Bearbeitung", Color: "accent"},
+		{ID: "waiting", Name: "Wartet auf andere", Color: "amber"},
+		{ID: "done", Name: "Erledigt", IsDone: true, Color: "emerald"},
+	}
+	if len(columns) > 0 && len(columns[0]) > 0 {
+		cols = columns[0]
+	}
+	colsJSON, _ := json.Marshal(cols)
 	now := domain.NowISO()
 	tl := &domain.TaskList{
 		ID:        domain.NewID("tkl"),
@@ -2570,13 +2591,14 @@ func (s *Store) CreateTaskList(userID, spaceID, teamID, title, icon, color strin
 		Title:     strings.TrimSpace(title),
 		Icon:      icon,
 		Color:     color,
+		Columns:   cols,
 		CreatedAt: now,
 		UpdatedAt: now,
 		IsOwner:   true,
 	}
 	_, err := s.db.Exec(
-		`INSERT INTO task_lists (id, user_id, space_id, team_id, title, icon, color, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
-		tl.ID, tl.UserID, tl.SpaceID, tl.TeamID, tl.Title, tl.Icon, tl.Color, tl.CreatedAt, tl.UpdatedAt,
+		`INSERT INTO task_lists (id, user_id, space_id, team_id, title, icon, color, columns, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+		tl.ID, tl.UserID, tl.SpaceID, tl.TeamID, tl.Title, tl.Icon, tl.Color, string(colsJSON), tl.CreatedAt, tl.UpdatedAt,
 	)
 	if err != nil {
 		return nil, err
@@ -2729,7 +2751,7 @@ func (s *Store) getMembersForTaskList(tl *domain.TaskList) []domain.TaskListMemb
 
 func (s *Store) GetTaskLists(userID string) ([]domain.TaskList, error) {
 	rows, err := s.db.Query(
-		`SELECT id, user_id, space_id, COALESCE(team_id, ''), title, icon, color, created_at, updated_at
+		`SELECT id, user_id, space_id, COALESCE(team_id, ''), title, icon, color, COALESCE(columns, '[]'), created_at, updated_at
 		 FROM task_lists
 		 WHERE user_id = ? 
 		    OR (team_id != '' AND team_id IN (SELECT team_id FROM team_members WHERE user_id = ?))
@@ -2746,11 +2768,23 @@ func (s *Store) GetTaskLists(userID string) ([]domain.TaskList, error) {
 		return []domain.TaskList{}, err
 	}
 
+	defaultCols := []domain.KanbanColumn{
+		{ID: "todo", Name: "Zu erledigen"},
+		{ID: "in_progress", Name: "In Bearbeitung", Color: "accent"},
+		{ID: "waiting", Name: "Wartet auf andere", Color: "amber"},
+		{ID: "done", Name: "Erledigt", IsDone: true, Color: "emerald"},
+	}
+
 	list := make([]domain.TaskList, 0)
 	for rows.Next() {
 		var tl domain.TaskList
-		if err := rows.Scan(&tl.ID, &tl.UserID, &tl.SpaceID, &tl.TeamID, &tl.Title, &tl.Icon, &tl.Color, &tl.CreatedAt, &tl.UpdatedAt); err == nil {
+		var colsJSON string
+		if err := rows.Scan(&tl.ID, &tl.UserID, &tl.SpaceID, &tl.TeamID, &tl.Title, &tl.Icon, &tl.Color, &colsJSON, &tl.CreatedAt, &tl.UpdatedAt); err == nil {
 			tl.IsOwner = (tl.UserID == userID)
+			_ = json.Unmarshal([]byte(colsJSON), &tl.Columns)
+			if len(tl.Columns) == 0 {
+				tl.Columns = defaultCols
+			}
 			list = append(list, tl)
 		}
 	}
@@ -2779,8 +2813,9 @@ func (s *Store) GetTaskLists(userID string) ([]domain.TaskList, error) {
 
 func (s *Store) GetTaskListByID(userID, listID string) (*domain.TaskList, error) {
 	var tl domain.TaskList
+	var colsJSON string
 	err := s.db.QueryRow(
-		`SELECT id, user_id, space_id, COALESCE(team_id, ''), title, icon, color, created_at, updated_at
+		`SELECT id, user_id, space_id, COALESCE(team_id, ''), title, icon, color, COALESCE(columns, '[]'), created_at, updated_at
 		 FROM task_lists 
 		 WHERE id = ? AND (
 		    user_id = ? 
@@ -2793,11 +2828,20 @@ func (s *Store) GetTaskListByID(userID, listID string) (*domain.TaskList, error)
 		    OR (space_id != '' AND space_id IN (SELECT space_id FROM space_members WHERE user_id = ?))
 		 )`,
 		listID, userID, userID, userID, userID, userID,
-	).Scan(&tl.ID, &tl.UserID, &tl.SpaceID, &tl.TeamID, &tl.Title, &tl.Icon, &tl.Color, &tl.CreatedAt, &tl.UpdatedAt)
+	).Scan(&tl.ID, &tl.UserID, &tl.SpaceID, &tl.TeamID, &tl.Title, &tl.Icon, &tl.Color, &colsJSON, &tl.CreatedAt, &tl.UpdatedAt)
 	if err != nil {
 		return nil, err
 	}
 	tl.IsOwner = (tl.UserID == userID)
+	_ = json.Unmarshal([]byte(colsJSON), &tl.Columns)
+	if len(tl.Columns) == 0 {
+		tl.Columns = []domain.KanbanColumn{
+			{ID: "todo", Name: "Zu erledigen"},
+			{ID: "in_progress", Name: "In Bearbeitung", Color: "accent"},
+			{ID: "waiting", Name: "Wartet auf andere", Color: "amber"},
+			{ID: "done", Name: "Erledigt", IsDone: true, Color: "emerald"},
+		}
+	}
 	_ = s.db.QueryRow(`SELECT COUNT(*) FROM thoughts WHERE task_list_id = ? AND is_completed = 0 AND (status = 'kept' OR (status = 'converted' AND converted_type = 'task'))`, tl.ID).Scan(&tl.TasksCount)
 	_ = s.db.QueryRow(`SELECT display_name FROM users WHERE id = ?`, tl.UserID).Scan(&tl.OwnerName)
 	if tl.TeamID != "" {
@@ -2809,7 +2853,7 @@ func (s *Store) GetTaskListByID(userID, listID string) (*domain.TaskList, error)
 	return &tl, nil
 }
 
-func (s *Store) UpdateTaskList(userID, listID string, title, icon, color, teamID, spaceID *string) (*domain.TaskList, error) {
+func (s *Store) UpdateTaskList(userID, listID string, title, icon, color, teamID, spaceID *string, columns *[]domain.KanbanColumn) (*domain.TaskList, error) {
 	tl, err := s.GetTaskListByID(userID, listID)
 	if err != nil {
 		return nil, err
@@ -2826,6 +2870,9 @@ func (s *Store) UpdateTaskList(userID, listID string, title, icon, color, teamID
 	if spaceID != nil {
 		tl.SpaceID = *spaceID
 	}
+	if columns != nil {
+		tl.Columns = *columns
+	}
 	if teamID != nil {
 		oldTeamID := tl.TeamID
 		tl.TeamID = *teamID
@@ -2837,9 +2884,10 @@ func (s *Store) UpdateTaskList(userID, listID string, title, icon, color, teamID
 		}
 	}
 	tl.UpdatedAt = domain.NowISO()
+	colsJSON, _ := json.Marshal(tl.Columns)
 	_, err = s.db.Exec(
-		`UPDATE task_lists SET title = ?, icon = ?, color = ?, space_id = ?, team_id = ?, updated_at = ? WHERE id = ?`,
-		tl.Title, tl.Icon, tl.Color, tl.SpaceID, tl.TeamID, tl.UpdatedAt, listID,
+		`UPDATE task_lists SET title = ?, icon = ?, color = ?, space_id = ?, team_id = ?, columns = ?, updated_at = ? WHERE id = ?`,
+		tl.Title, tl.Icon, tl.Color, tl.SpaceID, tl.TeamID, string(colsJSON), tl.UpdatedAt, listID,
 	)
 	if err != nil {
 		return nil, err