diff --git a/backend/Controllers/AdminController.cs b/backend/Controllers/AdminController.cs
new file mode 100644
index 0000000..7363bff
--- /dev/null
+++ b/backend/Controllers/AdminController.cs
@@ -0,0 +1,144 @@
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using Nexus.Api.Data;
+using Nexus.Api.DTOs;
+using Nexus.Api.Repositories;
+using Nexus.Api.Services;
+
+namespace Nexus.Api.Controllers;
+
+[ApiController]
+[Route("api/v1/admin")]
+[Authorize(Roles = "owner")]
+public class AdminController(
+    IUserRepository userRepository,
+    ILogger<AdminController> logger) : ControllerBase
+{
+    /// <summary>
+    /// List all registered users.
+    /// </summary>
+    [HttpGet("users")]
+    public async Task<IResult> GetUsers(CancellationToken ct)
+    {
+        var users = await userRepository.GetAllAsync(ct);
+        var result = users.Select(u => new AdminUserInfo
+        {
+            Id = u.Id,
+            Email = u.Email,
+            DisplayName = u.DisplayName,
+            Role = u.Role,
+            CreatedAt = u.CreatedAt,
+            LastLoginAt = u.LastLoginAt,
+        }).ToList();
+        return Results.Ok(result);
+    }
+
+    /// <summary>
+    /// Create a new user account (admin only).
+    /// Email muss eindeutig sein, Passwort mindestens 10 Zeichen.
+    /// </summary>
+    [HttpPost("users")]
+    public async Task<IResult> CreateUser([FromBody] AdminCreateUserRequest request, CancellationToken ct)
+    {
+        if (string.IsNullOrWhiteSpace(request.Email) || string.IsNullOrWhiteSpace(request.Password))
+            return Results.ValidationProblem(new Dictionary<string, string[]>
+            {
+                ["request"] = ["Email and password are required."]
+            });
+
+        if (request.Password.Length < 10)
+            return Results.ValidationProblem(new Dictionary<string, string[]>
+            {
+                ["password"] = ["Password must be at least 10 characters."]
+            });
+
+        var normalizedEmail = AuthService.NormalizeEmail(request.Email);
+        var existing = await userRepository.GetByEmailAsync(normalizedEmail, ct);
+        if (existing is not null)
+            return Results.Conflict(new { error = "A user with this email already exists." });
+
+        var user = new NexusUser
+        {
+            Email = request.Email.Trim(),
+            NormalizedEmail = normalizedEmail,
+            DisplayName = string.IsNullOrWhiteSpace(request.DisplayName)
+                ? request.Email.Split('@')[0]
+                : request.DisplayName.Trim(),
+            PasswordHash = PasswordSecurity.Hash(request.Password),
+            Role = string.IsNullOrWhiteSpace(request.Role) ? "user" : request.Role.Trim().ToLowerInvariant(),
+        };
+
+        await userRepository.AddAsync(user, ct);
+        logger.LogInformation("Admin created user {Email} with role {Role}", user.Email, user.Role);
+
+        return Results.Created($"/api/v1/admin/users/{user.Id}", new AdminUserInfo
+        {
+            Id = user.Id,
+            Email = user.Email,
+            DisplayName = user.DisplayName,
+            Role = user.Role,
+            CreatedAt = user.CreatedAt,
+        });
+    }
+
+    /// <summary>
+    /// Delete a user account (admin only, cannot delete owner).
+    /// </summary>
+    [HttpDelete("users/{id:guid}")]
+    public async Task<IResult> DeleteUser(Guid id, CancellationToken ct)
+    {
+        var user = await userRepository.GetByIdAsync(id, ct);
+        if (user is null)
+            return Results.NotFound(new { error = "User not found." });
+
+        if (string.Equals(user.Role, "owner", StringComparison.OrdinalIgnoreCase))
+            return Results.Forbid();
+
+        await userRepository.DeleteAsync(user, ct);
+        logger.LogInformation("Admin deleted user {Email}", user.Email);
+        return Results.NoContent();
+    }
+
+    /// <summary>
+    /// Update a user's role (admin only, cannot change owner role).
+    /// </summary>
+    [HttpPatch("users/{id:guid}/role")]
+    public async Task<IResult> UpdateUserRole(Guid id, [FromBody] AdminUpdateRoleRequest request, CancellationToken ct)
+    {
+        if (string.IsNullOrWhiteSpace(request.Role))
+            return Results.ValidationProblem(new Dictionary<string, string[]>
+            {
+                ["role"] = ["Role is required."]
+            });
+
+        var validRoles = new[] { "owner", "admin", "user", "viewer" };
+        if (!validRoles.Contains(request.Role.ToLowerInvariant()))
+            return Results.ValidationProblem(new Dictionary<string, string[]>
+            {
+                ["role"] = ["Invalid role. Valid roles: owner, admin, user, viewer."]
+            });
+
+        var user = await userRepository.GetByIdAsync(id, ct);
+        if (user is null)
+            return Results.NotFound(new { error = "User not found." });
+
+        if (string.Equals(user.Role, "owner", StringComparison.OrdinalIgnoreCase))
+            return Results.Forbid();
+
+        user.Role = request.Role.Trim().ToLowerInvariant();
+        user.UpdatedAt = DateTimeOffset.UtcNow;
+        await userRepository.UpdateAsync(user, ct);
+        logger.LogInformation("Admin updated role for {Email} to {Role}", user.Email, user.Role);
+
+        return Results.Ok(new AdminUserInfo
+        {
+            Id = user.Id,
+            Email = user.Email,
+            DisplayName = user.DisplayName,
+            Role = user.Role,
+            CreatedAt = user.CreatedAt,
+            LastLoginAt = user.LastLoginAt,
+        });
+    }
+}
diff --git a/backend/Controllers/DashboardController.cs b/backend/Controllers/DashboardController.cs
index 199c8c4..4654a24 100644
--- a/backend/Controllers/DashboardController.cs
+++ b/backend/Controllers/DashboardController.cs
@@ -3,6 +3,7 @@ using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using Nexus.Api.Data;
 using Nexus.Api.Models;
+using Nexus.Api.Repositories;
 using Nexus.Api.Services;
 
 namespace Nexus.Api.Controllers;
@@ -13,6 +14,7 @@ namespace Nexus.Api.Controllers;
 public class DashboardController(
     IDashboardService dashboardService,
     ITaskService taskService,
+    IActivityRepository activityService,
     IHttpContextAccessor httpContextAccessor) : ControllerBase
 {
     [HttpGet("status")]
@@ -239,6 +241,14 @@ public class DashboardController(
         return Ok(children.Select(MapToDto).ToList());
     }
 
+    [HttpGet("tasks/{id:guid}")]
+    public async Task<ActionResult<DashboardTaskDto>> GetTask(Guid id, CancellationToken ct)
+    {
+        var task = await taskService.GetByIdAsync(id, ct);
+        if (task is null) return NotFound(new { error = "Task not found." });
+        return Ok(MapToDto(task));
+    }
+
     [HttpGet("tasks/{id:guid}/activity")]
     public async Task<ActionResult<List<ActivityEvent>>> GetTaskActivity(Guid id, CancellationToken ct)
     {
@@ -246,14 +256,25 @@ public class DashboardController(
         return Ok(events);
     }
 
-    // ── Import ──
-
-    [HttpPost("tasks/import-from-iris-todo")]
-    public async Task<ActionResult<ImportResultDto>> ImportFromIrisTodo(
-        [FromQuery] bool delete = false, CancellationToken ct = default)
+    [HttpPost("tasks/{id:guid}/activity")]
+    public async Task<ActionResult<ActivityEvent>> PostTaskActivity(
+        Guid id, [FromBody] PostActivityRequest request, CancellationToken ct)
     {
-        var result = await taskService.ImportFromIrisTodoAsync(delete, ct);
-        return Ok(new ImportResultDto(result));
+        var task = await taskService.GetByIdAsync(id, ct);
+        if (task is null) return NotFound(new { error = "Task not found." });
+
+        if (string.IsNullOrWhiteSpace(request.Message))
+            return BadRequest(new { error = "Message is required." });
+
+        var ev = new ActivityEvent
+        {
+            Type = request.Type ?? "comment",
+            Message = request.Message.Trim(),
+            TaskId = id
+        };
+
+        await activityService.AddAsync(ev, ct);
+        return Created($"/api/dashboard/tasks/{id}/activity/{ev.Id}", ev);
     }
 
     private static DashboardTaskDto MapToDto(WorkTask t) => new(
diff --git a/backend/DTOs/AuthRequests.cs b/backend/DTOs/AuthRequests.cs
index cb4df37..19f0119 100644
--- a/backend/DTOs/AuthRequests.cs
+++ b/backend/DTOs/AuthRequests.cs
@@ -26,6 +26,29 @@ public sealed record UserInfo
     public string Role { get; init; } = string.Empty;
 }
 
+public sealed record AdminUserInfo
+{
+    public Guid Id { get; init; }
+    public string Email { get; init; } = string.Empty;
+    public string DisplayName { get; init; } = string.Empty;
+    public string Role { get; init; } = string.Empty;
+    public DateTimeOffset CreatedAt { get; init; }
+    public DateTimeOffset? LastLoginAt { get; init; }
+}
+
+public sealed record AdminCreateUserRequest
+{
+    public string Email { get; init; } = string.Empty;
+    public string Password { get; init; } = string.Empty;
+    public string? DisplayName { get; init; }
+    public string? Role { get; init; }
+}
+
+public sealed record AdminUpdateRoleRequest
+{
+    public string Role { get; init; } = string.Empty;
+}
+
 public sealed record UpdateProfileRequest
 {
     [MaxLength(100)]
diff --git a/backend/Models/Dashboard.cs b/backend/Models/Dashboard.cs
index 03654ae..430b975 100644
--- a/backend/Models/Dashboard.cs
+++ b/backend/Models/Dashboard.cs
@@ -134,10 +134,6 @@ public sealed record MoveTaskRequest(
     string State
 );
 
-public sealed record ImportResultDto(
-    int Imported
-);
-
 public sealed record ResetStaleRequest(
     int StaleHours = 2
 );
@@ -146,6 +142,11 @@ public sealed record ResetStaleResponse(
     int ResetCount
 );
 
+public sealed record PostActivityRequest(
+    string Message,
+    string? Type = null
+);
+
 // ── Notification DTOs ──
 
 public sealed record NotificationDto(
diff --git a/backend/Repositories/IUserRepository.cs b/backend/Repositories/IUserRepository.cs
index 0f8cb6e..12e92d7 100644
--- a/backend/Repositories/IUserRepository.cs
+++ b/backend/Repositories/IUserRepository.cs
@@ -7,8 +7,10 @@ public interface IUserRepository
     ValueTask<NexusUser?> GetByIdAsync(Guid userId, CancellationToken ct = default);
     Task<NexusUser?> GetByEmailAsync(string normalizedEmail, CancellationToken ct = default);
     Task<bool> AnyUsersAsync(CancellationToken ct = default);
+    Task<List<NexusUser>> GetAllAsync(CancellationToken ct = default);
     Task<NexusUser> AddAsync(NexusUser user, CancellationToken ct = default);
     Task UpdateAsync(NexusUser user, CancellationToken ct = default);
+    Task DeleteAsync(NexusUser user, CancellationToken ct = default);
 
     Task<RefreshToken?> GetRefreshTokenByHashAsync(string tokenHash, CancellationToken ct = default);
     Task<List<RefreshToken>> GetActiveTokensByFamilyAsync(Guid familyId, CancellationToken ct = default);
diff --git a/backend/Repositories/UserRepository.cs b/backend/Repositories/UserRepository.cs
index f599695..6f11afd 100644
--- a/backend/Repositories/UserRepository.cs
+++ b/backend/Repositories/UserRepository.cs
@@ -11,6 +11,9 @@ public sealed class UserRepository(NexusDbContext db) : IUserRepository
     public Task<NexusUser?> GetByEmailAsync(string normalizedEmail, CancellationToken ct = default)
         => db.Users.FirstOrDefaultAsync(u => u.NormalizedEmail == normalizedEmail, ct);
 
+    public Task<List<NexusUser>> GetAllAsync(CancellationToken ct = default)
+        => db.Users.OrderBy(u => u.CreatedAt).ToListAsync(ct);
+
     public Task<bool> AnyUsersAsync(CancellationToken ct = default)
         => db.Users.AnyAsync(ct);
 
@@ -24,6 +27,17 @@ public sealed class UserRepository(NexusDbContext db) : IUserRepository
     public Task UpdateAsync(NexusUser user, CancellationToken ct = default)
         => db.SaveChangesAsync(ct);
 
+    public async Task DeleteAsync(NexusUser user, CancellationToken ct = default)
+    {
+        // Remove refresh tokens first
+        var tokens = await db.RefreshTokens
+            .Where(r => r.UserId == user.Id)
+            .ToListAsync(ct);
+        db.RefreshTokens.RemoveRange(tokens);
+        db.Users.Remove(user);
+        await db.SaveChangesAsync(ct);
+    }
+
     public Task<RefreshToken?> GetRefreshTokenByHashAsync(string tokenHash, CancellationToken ct = default)
         => db.RefreshTokens
             .Include(r => r.User)
diff --git a/backend/Services/ITaskService.cs b/backend/Services/ITaskService.cs
index c6c46fd..7779a42 100644
--- a/backend/Services/ITaskService.cs
+++ b/backend/Services/ITaskService.cs
@@ -34,5 +34,4 @@ public interface ITaskService
     Task<int> ResetStaleInProgressTasksAsync(TimeSpan staleThreshold, CancellationToken ct = default);
     Task<IReadOnlyList<WorkTask>> GetChildTasksAsync(Guid parentId, CancellationToken ct = default);
     Task<List<ActivityEvent>> GetTaskActivityAsync(Guid taskId, CancellationToken ct = default);
-    Task<int> ImportFromIrisTodoAsync(bool deleteAfterImport = false, CancellationToken ct = default);
 }
diff --git a/backend/Services/TaskService.cs b/backend/Services/TaskService.cs
index 376a9cd..aec14f5 100644
--- a/backend/Services/TaskService.cs
+++ b/backend/Services/TaskService.cs
@@ -1,4 +1,3 @@
-using System.Text.RegularExpressions;
 using Nexus.Api.Data;
 using Nexus.Api.DTOs;
 using Nexus.Api.Models;
@@ -350,74 +349,6 @@ public sealed class TaskService(
         return all.Where(e => e.TaskId == taskId).ToList();
     }
 
-    public async Task<int> ImportFromIrisTodoAsync(bool deleteAfterImport = false, CancellationToken ct = default)
-    {
-        var todoPath = "/mnt/workspace-iris/TODO.md";
-        if (!File.Exists(todoPath)) return 0;
-
-        var content = await File.ReadAllTextAsync(todoPath, ct);
-        var lines = content.Split('\n');
-
-        var imported = 0;
-        string? currentPriority = null;
-
-        // Parse sections and extract tasks with assignee info
-        // Pattern: ### N. Title 👤 Person
-        var taskPattern = new Regex(@"^###\s+\d+\.\s+(.+?)(?:\s+👤\s+(.+?))?$", RegexOptions.Compiled);
-        foreach (var line in lines)
-        {
-            var trimmed = line.Trim();
-
-            // Detect priority section
-            if (trimmed.StartsWith("## "))
-            {
-                var sectionLower = trimmed.ToLowerInvariant();
-                if (sectionLower.Contains("high")) currentPriority = "High";
-                else if (sectionLower.Contains("medium")) currentPriority = "Medium";
-                else if (sectionLower.Contains("low")) currentPriority = "Low";
-                else currentPriority = "Medium";
-                continue;
-            }
-
-            var match = taskPattern.Match(trimmed);
-            if (!match.Success) continue;
-
-            var title = match.Groups[1].Value.Trim();
-            var assigneeRaw = match.Groups[2].Success ? match.Groups[2].Value.Trim() : null;
-
-            // Resolve assignee: "Iris" → "iris", "Bao" → "bao", "Iris+Bao" → "iris"
-            string? assignedTo = null;
-            if (!string.IsNullOrWhiteSpace(assigneeRaw))
-            {
-                var lower = assigneeRaw.ToLowerInvariant();
-                if (lower.Contains("iris")) assignedTo = "iris";
-                else if (lower.Contains("bao")) assignedTo = "bao";
-            }
-
-            var task = new WorkTask
-            {
-                Title = title,
-                Source = "iris",
-                Priority = currentPriority ?? "Medium",
-                AssignedTo = assignedTo
-            };
-            await taskRepo.AddAsync(task, ct);
-            imported++;
-        }
-
-        if (deleteAfterImport)
-        {
-            File.Delete(todoPath);
-            await activityRepo.AddAsync(new ActivityEvent { Type = "task", Message = $"Imported {imported} tasks from TODO.md and deleted the file" }, ct);
-        }
-        else
-        {
-            await activityRepo.AddAsync(new ActivityEvent { Type = "task", Message = $"Imported {imported} tasks from TODO.md" }, ct);
-        }
-
-        return imported;
-    }
-
     private static DashboardTaskDto MapToDto(WorkTask t) => new(
         t.Id, t.Title, t.Detail, t.Source, t.State, t.Priority, t.AssignedTo,
         t.ParentTaskId, t.DueDate, t.CreatedAt, t.UpdatedAt);
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 68e14e6..d800a9b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -32,7 +32,7 @@ const navigate = (label: string) => {
 }
 const mobileNavOpen = ref(false)
 
-const standaloneViews = computed(() => ['Dashboard', 'Settings', 'ProjectDetail', 'Memory', 'Docs', 'Security', 'Incidents', 'Calendar', 'AgentDetail', 'Agents', 'Task Board', 'Notifications'].includes(activeView.value))
+const standaloneViews = computed(() => ['Dashboard', 'Settings', 'ProjectDetail', 'Memory', 'Docs', 'Security', 'Incidents', 'Calendar', 'AgentDetail', 'Agents', 'Task Board', 'TaskDetail', 'Notifications'].includes(activeView.value))
 
 onMounted(() => {
   if (auth.isAuthenticated) store.refresh()
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index ef628e1..dd5cfea 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -12,6 +12,7 @@ import CalendarView from './views/CalendarView.vue'
 import NexusLayout from './layouts/NexusLayout.vue'
 import FlowBoard from './views/Dashboard/FlowBoard.vue'
 import TaskBoardView from './views/TaskBoardView.vue'
+import TaskDetailView from './views/TaskDetailView.vue'
 import NotificationsView from './views/NotificationsView.vue'
 
 const routes = [
@@ -36,6 +37,7 @@ const routes = [
   { path: '/projects', name: 'Projects', component: { template: '' } },
   { path: '/projects/:id', name: 'ProjectDetail', component: ProjectDetailView },
   { path: '/tasks', name: 'Task Board', component: TaskBoardView },
+  { path: '/tasks/:id', name: 'TaskDetail', component: TaskDetailView },
   { path: '/agents', name: 'Agents', component: AgentsIndexView },
   { path: '/models', name: 'Models', component: { template: '' } },
   { path: '/activity', name: 'Activity', component: { template: '' } },
diff --git a/frontend/src/stores/tasks.ts b/frontend/src/stores/tasks.ts
index ddb1bad..873ea43 100644
--- a/frontend/src/stores/tasks.ts
+++ b/frontend/src/stores/tasks.ts
@@ -4,7 +4,7 @@
  * Fetches tasks from /api/dashboard/tasks and /api/dashboard/tasks/board
  * and maps them into TaskItem[] format for the TaskStrip component.
  *
- * Board state: grouped by column (offen, inProgress, review, done, blocked)
+ * Board state: grouped by column (offen, inProgress, delegated, review, done, blocked)
  * Auto-refresh: every 30 seconds.
  */
 import { defineStore } from 'pinia'
@@ -13,7 +13,7 @@ import type { TaskItem } from '../components/dashboard/v2/types'
 
 /* ── API Response Shapes ──────────────────────────── */
 
-interface DashboardTaskDto {
+export interface DashboardTaskDto {
   id: string
   title: string
   detail: string | null
@@ -21,6 +21,8 @@ interface DashboardTaskDto {
   state: string
   priority: string
   assignedTo: string | null
+  parentTaskId?: string | null
+  dueDate?: string | null
   createdAt: string
   updatedAt: string
 }
@@ -228,7 +230,7 @@ export const useTaskStore = defineStore('tasks', {
     },
 
     /* ── API: Update task ─────────────────────────── */
-    async updateTask(id: string, updates: { title?: string; detail?: string; priority?: string; assignedTo?: string }) {
+    async updateTask(id: string, updates: { title?: string; detail?: string | null; priority?: string; assignedTo?: string | null; dueDate?: string | null }) {
       try {
         const res = await apiFetch(`/api/dashboard/tasks/${id}`, {
           method: 'PUT',
@@ -239,6 +241,29 @@ export const useTaskStore = defineStore('tasks', {
         await this.fetchBoard()
       } catch (err) {
         console.warn('[TaskStore] updateTask failed', err)
+        throw err
+      }
+    },
+
+    async fetchTaskChildren(id: string) {
+      try {
+        const res = await apiFetch(`/api/dashboard/tasks/${id}/children`)
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        return await res.json() as DashboardTaskDto[]
+      } catch (err) {
+        console.warn('[TaskStore] fetchTaskChildren failed', err)
+        throw err
+      }
+    },
+
+    async fetchTaskActivity(id: string) {
+      try {
+        const res = await apiFetch(`/api/dashboard/tasks/${id}/activity`)
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        return await res.json() as Array<{ id?: string; message?: string; type?: string; createdAt?: string; timestamp?: string }>
+      } catch (err) {
+        console.warn('[TaskStore] fetchTaskActivity failed', err)
+        throw err
       }
     },
 
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 65fd945..58cbf04 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -1,15 +1,24 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Command, LockKeyhole } from '@lucide/vue'
+/**
+ * LoginView – Nexus Mission Control V2 Galaxy Theme
+ *
+ * Vollbild-Login mit GalaxyBackground, Glassmorphismus,
+ * und Consistent Branding.
+ */
+import { onMounted, onUnmounted, ref } from 'vue'
+import { Mail, LockKeyhole, Command, Eye, EyeOff } from '@lucide/vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
+import GalaxyBackground from '../components/background/GalaxyBackground.vue'
 
 const auth = useAuthStore()
 const route = useRoute()
 const router = useRouter()
+
 const email = ref('')
 const password = ref('')
 const error = ref('')
+const showPassword = ref(false)
 
 async function submit() {
   error.value = ''
@@ -20,42 +29,345 @@ async function submit() {
       : '/dashboard'
     await router.replace(target)
   } catch (reason) {
-    error.value = reason instanceof Error ? reason.message : 'Login failed.'
+    error.value = reason instanceof Error ? reason.message : 'Login fehlgeschlagen.'
   }
 }
 </script>
 
 <template>
-  <main class="login-page">
-    <section class="login-card">
+  <div class="login-container">
+    <GalaxyBackground />
+
+    <div class="login-content">
+      <!-- Branding -->
       <div class="login-brand">
-        <div class="brand-mark"><Command :size="20" /></div>
-        <div><strong>NEXUS</strong><span>Noveria Operations</span></div>
+        <div class="brand-icon">
+          <Command :size="22" />
+        </div>
+        <span class="brand-name">NEXUS</span>
+        <span class="brand-sub">Mission Control · Noveria</span>
       </div>
 
-      <div class="login-heading">
-        <span class="eyebrow">OWNER ACCESS</span>
-        <h1>Sign in to mission control</h1>
-        <p>Use your private owner credentials to continue.</p>
+      <!-- Login Card -->
+      <div class="login-card">
+        <div class="card-header">
+          <span class="eyebrow">AUTHENTIFIZIERUNG</span>
+          <h1>Anmelden</h1>
+          <p>Gib deine Zugangsdaten ein, um auf das Mission Control zuzugreifen.</p>
+        </div>
+
+        <form @submit.prevent="submit" class="login-form">
+          <div class="field">
+            <label for="email">
+              <Mail :size="14" />
+              <span>E-Mail</span>
+            </label>
+            <input
+              id="email"
+              v-model="email"
+              type="email"
+              autocomplete="username"
+              required
+              maxlength="120"
+              placeholder="name@noveria.net"
+              class="field-input"
+            />
+          </div>
+
+          <div class="field">
+            <label for="password">
+              <LockKeyhole :size="14" />
+              <span>Passwort</span>
+            </label>
+            <div class="password-wrap">
+              <input
+                id="password"
+                v-model="password"
+                :type="showPassword ? 'text' : 'password'"
+                autocomplete="current-password"
+                required
+                minlength="10"
+                maxlength="200"
+                placeholder="••••••••••"
+                class="field-input"
+              />
+              <button
+                type="button"
+                class="toggle-pw"
+                @click="showPassword = !showPassword"
+                :aria-label="showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'"
+                tabindex="-1"
+              >
+                <Eye v-if="!showPassword" :size="16" />
+                <EyeOff v-else :size="16" />
+              </button>
+            </div>
+          </div>
+
+          <p v-if="error" class="login-error" role="alert">
+            {{ error }}
+          </p>
+
+          <button type="submit" class="submit-btn" :disabled="auth.loading || !email || !password">
+            <LockKeyhole :size="15" />
+            {{ auth.loading ? 'Anmelden…' : 'Anmelden' }}
+          </button>
+        </form>
+
+        <footer class="card-footer">
+          <span class="lock-icon">🔒</span>
+          <span>Gesicherte Sitzung · Refresh-Token im HTTP-only Cookie</span>
+        </footer>
       </div>
-
-      <form @submit.prevent="submit">
-        <label>
-          <span>Email</span>
-          <input v-model="email" type="email" autocomplete="username" required maxlength="120" />
-        </label>
-        <label>
-          <span>Password</span>
-          <input v-model="password" type="password" autocomplete="current-password" required minlength="10" maxlength="200" />
-        </label>
-        <p v-if="error" class="login-error" role="alert">{{ error }}</p>
-        <button type="submit" :disabled="auth.loading">
-          <LockKeyhole :size="15" />
-          {{ auth.loading ? 'Signing in...' : 'Sign in' }}
-        </button>
-      </form>
-
-      <footer>Protected owner session · Refresh token stored in a secure HTTP-only cookie</footer>
-    </section>
-  </main>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.login-container {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.login-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  max-width: 420px;
+  width: 90%;
+  animation: login-fade-in 0.5s ease-out;
+}
+
+@keyframes login-fade-in {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Branding ─────────────────────── */
+.login-brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.brand-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, #4f7cff, #b557f6);
+  box-shadow: 0 0 32px -4px rgba(124, 108, 255, 0.6);
+  color: #fff;
+  margin-bottom: 4px;
+}
+
+.brand-name {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  color: #ece9ff;
+  line-height: 1;
+}
+
+.brand-sub {
+  font-size: 12px;
+  color: #6f6aa0;
+  letter-spacing: 0.05em;
+  margin-top: 2px;
+}
+
+/* ── Login Card ────────────────────── */
+.login-card {
+  width: 100%;
+  background: linear-gradient(160deg, rgba(20, 17, 48, 0.88), rgba(14, 12, 32, 0.88));
+  border: 1px solid rgba(150, 140, 255, 0.12);
+  border-radius: 20px;
+  padding: 32px 28px;
+  backdrop-filter: blur(16px);
+  box-shadow: 0 0 0 1px rgba(124, 108, 255, 0.06), 0 24px 80px -12px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.card-header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow {
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  color: #7c6cff;
+  text-transform: uppercase;
+}
+
+.card-header h1 {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0;
+  color: #ece9ff;
+  letter-spacing: -0.02em;
+}
+
+.card-header p {
+  margin: 0;
+  font-size: 13px;
+  color: #6f6aa0;
+  line-height: 1.5;
+}
+
+/* ── Form ──────────────────────────── */
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #a8a3d6;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.field-input {
+  width: 100%;
+  padding: 11px 14px;
+  border: 1px solid rgba(150, 140, 255, 0.12);
+  border-radius: 12px;
+  background: rgba(10, 9, 24, 0.55);
+  color: #ece9ff;
+  font-size: 14px;
+  font-family: 'Manrope', sans-serif;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+}
+
+.field-input::placeholder {
+  color: #4a4680;
+}
+
+.field-input:focus {
+  border-color: rgba(124, 108, 255, 0.5);
+  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.12);
+}
+
+.password-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.password-wrap .field-input {
+  padding-right: 44px;
+}
+
+.toggle-pw {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #6f6aa0;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.toggle-pw:hover {
+  background: rgba(124, 108, 255, 0.08);
+  color: #a8a3d6;
+}
+
+.login-error {
+  margin: 0;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: rgba(244, 63, 94, 0.1);
+  border: 1px solid rgba(244, 63, 94, 0.2);
+  color: #fda4af;
+  font-size: 12.5px;
+  line-height: 1.4;
+}
+
+.submit-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 13px 20px;
+  border: none;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #4f7cff, #7c6cff, #b557f6);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  font-family: 'Manrope', sans-serif;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
+  box-shadow: 0 0 24px -6px rgba(124, 108, 255, 0.5);
+}
+
+.submit-btn:hover:not(:disabled) {
+  opacity: 0.92;
+  transform: translateY(-1px);
+  box-shadow: 0 0 32px -4px rgba(124, 108, 255, 0.65);
+}
+
+.submit-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* ── Footer ────────────────────────── */
+.card-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(150, 140, 255, 0.08);
+  font-size: 10.5px;
+  color: #6f6aa0;
+}
+
+.lock-icon {
+  font-size: 13px;
+}
+</style>
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 79481c6..7086ca3 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -1,70 +1,86 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Save, Lock, User } from '@lucide/vue'
+/**
+ * SettingsView – Galaxy Theme + Admin User Management
+ *
+ * - Profile (Display-Name ändern)
+ * - Passwort ändern
+ * - Admin: User-Liste + User anlegen (nur für owner-Rolle sichtbar)
+ */
+import { onMounted, ref } from 'vue'
+import {
+  Save, Lock, User, Shield, Plus, Mail, Trash2, Users,
+  Eye, EyeOff, CheckCircle,
+} from '@lucide/vue'
 import { useAuthStore } from '../stores/auth'
 import { apiFetch } from '../services/api'
 
 const auth = useAuthStore()
+
+/* ── Profile ─────────────────────────────────────── */
 const editingName = ref(false)
 const displayName = ref(auth.user?.displayName ?? '')
 const savingName = ref(false)
 const nameError = ref('')
 const nameSuccess = ref(false)
 
+async function saveDisplayName() {
+  nameError.value = ''
+  nameSuccess.value = false
+  const trimmed = displayName.value.trim()
+  if (!trimmed) {
+    nameError.value = 'Anzeigename darf nicht leer sein.'
+    return
+  }
+  savingName.value = true
+  try {
+    const res = await apiFetch('/api/v1/auth/profile', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ displayName: trimmed }),
+    })
+    if (!res.ok) throw new Error('Update fehlgeschlagen')
+    const result = await res.json()
+    if (auth.user) auth.user.displayName = result.displayName
+    nameSuccess.value = true
+    editingName.value = false
+  } catch (e) {
+    nameError.value = e instanceof Error ? e.message : 'Fehler beim Speichern'
+  } finally {
+    savingName.value = false
+  }
+}
+
+/* ── Password ────────────────────────────────────── */
 const currentPassword = ref('')
 const newPassword = ref('')
 const confirmPassword = ref('')
 const changingPassword = ref(false)
 const passwordError = ref('')
 const passwordSuccess = ref(false)
-
-async function saveDisplayName() {
-  nameError.value = ''
-  nameSuccess.value = false
-  const trimmed = displayName.value.trim()
-  if (!trimmed) {
-    nameError.value = 'Display name cannot be empty.'
-    return
-  }
-  savingName.value = true
-  try {
-    const response = await apiFetch('/api/v1/auth/profile', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ displayName: trimmed }),
-    })
-    if (!response.ok) throw new Error('Failed to update profile')
-    const result = await response.json()
-    if (auth.user) auth.user.displayName = result.displayName
-    nameSuccess.value = true
-    editingName.value = false
-  } catch (e) {
-    nameError.value = e instanceof Error ? e.message : 'Failed to update name'
-  } finally {
-    savingName.value = false
-  }
-}
+const showCurrentPw = ref(false)
+const showNewPw = ref(false)
+const showConfirmPw = ref(false)
 
 async function changePassword() {
   passwordError.value = ''
   passwordSuccess.value = false
 
   if (!currentPassword.value) {
-    passwordError.value = 'Current password is required.'
+    passwordError.value = 'Aktuelles Passwort ist erforderlich.'
     return
   }
   if (!newPassword.value || newPassword.value.length < 10) {
-    passwordError.value = 'New password must be at least 10 characters.'
+    passwordError.value = 'Neues Passwort muss mindestens 10 Zeichen haben.'
     return
   }
   if (newPassword.value !== confirmPassword.value) {
-    passwordError.value = 'Passwords do not match.'
+    passwordError.value = 'Passwörter stimmen nicht überein.'
     return
   }
 
   changingPassword.value = true
   try {
-    const response = await apiFetch('/api/v1/auth/change-password', {
+    const res = await apiFetch('/api/v1/auth/change-password', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
@@ -72,205 +88,804 @@ async function changePassword() {
         newPassword: newPassword.value,
       }),
     })
-    if (!response.ok) {
-      const detail = await response.json().catch(() => ({}))
-      throw new Error(detail.detail || 'Failed to change password')
+    if (!res.ok) {
+      const detail = await res.json().catch(() => ({}))
+      throw new Error(detail.detail || 'Passwort-Änderung fehlgeschlagen')
     }
     passwordSuccess.value = true
     currentPassword.value = ''
     newPassword.value = ''
     confirmPassword.value = ''
   } catch (e) {
-    passwordError.value = e instanceof Error ? e.message : 'Failed to change password'
+    passwordError.value = e instanceof Error ? e.message : 'Fehler beim Ändern'
   } finally {
     changingPassword.value = false
   }
 }
+
+/* ── Admin: User Management ──────────────────────── */
+interface AdminUser {
+  id: string
+  email: string
+  displayName: string
+  role: string
+  createdAt: string
+  lastLoginAt: string | null
+}
+
+const users = ref<AdminUser[]>([])
+const usersLoading = ref(false)
+const usersError = ref('')
+const showCreateUser = ref(false)
+const createEmail = ref('')
+const createPassword = ref('')
+const createDisplayName = ref('')
+const createRole = ref('user')
+const creatingUser = ref(false)
+const createError = ref('')
+const createSuccess = ref('')
+
+const isOwner = auth.user?.role === 'owner'
+
+async function loadUsers() {
+  if (!isOwner) return
+  usersLoading.value = true
+  usersError.value = ''
+  try {
+    const res = await apiFetch('/api/v1/admin/users')
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    users.value = await res.json()
+  } catch (e) {
+    usersError.value = e instanceof Error ? e.message : 'Benutzer konnten nicht geladen werden'
+  } finally {
+    usersLoading.value = false
+  }
+}
+
+async function handleCreateUser() {
+  createError.value = ''
+  createSuccess.value = ''
+  if (!createEmail.value.trim() || !createPassword.value) {
+    createError.value = 'E-Mail und Passwort sind erforderlich.'
+    return
+  }
+  if (createPassword.value.length < 10) {
+    createError.value = 'Passwort muss mindestens 10 Zeichen haben.'
+    return
+  }
+  creatingUser.value = true
+  try {
+    const res = await apiFetch('/api/v1/admin/users', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        email: createEmail.value.trim(),
+        password: createPassword.value,
+        displayName: createDisplayName.value.trim() || null,
+        role: createRole.value,
+      }),
+    })
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}))
+      throw new Error(data.error || 'Benutzer konnte nicht erstellt werden')
+    }
+    createSuccess.value = `Benutzer ${createEmail.value.trim()} erfolgreich angelegt.`
+    createEmail.value = ''
+    createPassword.value = ''
+    createDisplayName.value = ''
+    createRole.value = 'user'
+    showCreateUser.value = false
+    await loadUsers()
+  } catch (e) {
+    createError.value = e instanceof Error ? e.message : 'Fehler beim Anlegen'
+  } finally {
+    creatingUser.value = false
+  }
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('de-DE', {
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit',
+  })
+}
+
+onMounted(() => {
+  loadUsers()
+})
 </script>
 
 <template>
-  <div class="settings-page">
-    <div class="settings-card">
-      <div class="settings-header">
-        <User :size="20" />
-        <h2>Profile</h2>
-      </div>
-
-      <div class="setting-row">
-        <label>Email</label>
-        <span class="setting-value">{{ auth.user?.email }}</span>
-      </div>
-
-      <div class="setting-row">
-        <label>Display Name</label>
-        <div v-if="editingName" class="setting-edit">
-          <input v-model="displayName" maxlength="100" class="setting-input" />
-          <div class="setting-edit-actions">
-            <button class="btn-primary btn-sm" @click="saveDisplayName" :disabled="savingName">
-              <Save :size="13" /> {{ savingName ? 'Saving...' : 'Save' }}
-            </button>
-            <button class="btn-ghost btn-sm" @click="editingName = false">Cancel</button>
-          </div>
-          <p v-if="nameError" class="setting-error">{{ nameError }}</p>
-          <p v-else-if="nameSuccess" class="setting-success">Display name updated.</p>
-        </div>
-        <div v-else class="setting-value-row">
-          <span class="setting-value">{{ auth.user?.displayName }}</span>
-          <button class="btn-ghost btn-sm" @click="editingName = true">Edit</button>
-        </div>
-      </div>
-
-      <div class="setting-row">
-        <label>Role</label>
-        <span class="setting-value badge">{{ auth.user?.role }}</span>
-      </div>
+  <div class="settings-wrap">
+    <div class="settings-heading">
+      <h1><span class="grad-text">Einstellungen</span></h1>
+      <p class="settings-subtitle">Profil, Sicherheit &amp; Benutzerverwaltung</p>
     </div>
 
-    <div class="settings-card">
-      <div class="settings-header">
-        <Lock :size="20" />
-        <h2>Change Password</h2>
-      </div>
-
-      <form class="password-form" @submit.prevent="changePassword">
-        <div class="setting-row">
-          <label>Current Password</label>
-          <input v-model="currentPassword" type="password" class="setting-input" autocomplete="current-password" />
-        </div>
-        <div class="setting-row">
-          <label>New Password</label>
-          <input v-model="newPassword" type="password" class="setting-input" autocomplete="new-password" minlength="10" />
-        </div>
-        <div class="setting-row">
-          <label>Confirm Password</label>
-          <input v-model="confirmPassword" type="password" class="setting-input" autocomplete="new-password" />
+    <div class="settings-grid">
+      <!-- ── Profile Card ────────────────────────── -->
+      <section class="glass-card">
+        <div class="card-head">
+          <User :size="18" />
+          <h2>Profil</h2>
         </div>
 
-        <p v-if="passwordError" class="setting-error">{{ passwordError }}</p>
-        <p v-else-if="passwordSuccess" class="setting-success">Password changed successfully.</p>
+        <div class="field-row">
+          <div class="field">
+            <label>E-Mail</label>
+            <div class="value-tag">{{ auth.user?.email }}</div>
+          </div>
 
-        <button type="submit" class="btn-primary" :disabled="changingPassword">
-          <Lock :size="14" /> {{ changingPassword ? 'Changing...' : 'Change Password' }}
-        </button>
-      </form>
+          <div class="field">
+            <label>Rolle</label>
+            <div class="role-badge">{{ auth.user?.role }}</div>
+          </div>
+        </div>
+
+        <div class="field">
+          <label>Anzeigename</label>
+          <div v-if="editingName" class="name-edit">
+            <div class="input-group">
+              <input v-model="displayName" maxlength="100" class="galaxy-input" />
+              <button class="btn-primary btn-sm" @click="saveDisplayName" :disabled="savingName">
+                <Save :size="13" /> {{ savingName ? 'Speichert…' : 'Speichern' }}
+              </button>
+              <button class="btn-ghost btn-sm" @click="editingName = false">Abbrechen</button>
+            </div>
+            <p v-if="nameError" class="msg error">{{ nameError }}</p>
+            <p v-else-if="nameSuccess" class="msg success">Anzeigename aktualisiert.</p>
+          </div>
+          <div v-else class="value-row">
+            <span class="value-tag">{{ auth.user?.displayName }}</span>
+            <button class="btn-ghost btn-sm" @click="editingName = true">Bearbeiten</button>
+          </div>
+        </div>
+      </section>
+
+      <!-- ── Password Card ────────────────────────── -->
+      <section class="glass-card">
+        <div class="card-head">
+          <Lock :size="18" />
+          <h2>Passwort ändern</h2>
+        </div>
+
+        <form class="password-form" @submit.prevent="changePassword">
+          <div class="field">
+            <label>Aktuelles Passwort</label>
+            <div class="pw-wrap">
+              <input v-model="currentPassword" :type="showCurrentPw ? 'text' : 'password'" class="galaxy-input" autocomplete="current-password" />
+              <button type="button" class="pw-toggle" @click="showCurrentPw = !showCurrentPw" tabindex="-1">
+                <Eye v-if="!showCurrentPw" :size="16" />
+                <EyeOff v-else :size="16" />
+              </button>
+            </div>
+          </div>
+          <div class="field">
+            <label>Neues Passwort</label>
+            <div class="pw-wrap">
+              <input v-model="newPassword" :type="showNewPw ? 'text' : 'password'" class="galaxy-input" autocomplete="new-password" minlength="10" />
+              <button type="button" class="pw-toggle" @click="showNewPw = !showNewPw" tabindex="-1">
+                <Eye v-if="!showNewPw" :size="16" />
+                <EyeOff v-else :size="16" />
+              </button>
+            </div>
+          </div>
+          <div class="field">
+            <label>Passwort bestätigen</label>
+            <div class="pw-wrap">
+              <input v-model="confirmPassword" :type="showConfirmPw ? 'text' : 'password'" class="galaxy-input" autocomplete="new-password" />
+              <button type="button" class="pw-toggle" @click="showConfirmPw = !showConfirmPw" tabindex="-1">
+                <Eye v-if="!showConfirmPw" :size="16" />
+                <EyeOff v-else :size="16" />
+              </button>
+            </div>
+          </div>
+
+          <p v-if="passwordError" class="msg error">{{ passwordError }}</p>
+          <p v-else-if="passwordSuccess" class="msg success">
+            <CheckCircle :size="14" /> Passwort erfolgreich geändert.
+          </p>
+
+          <button type="submit" class="btn-primary" :disabled="changingPassword">
+            <Lock :size="14" /> {{ changingPassword ? 'Ändert…' : 'Passwort ändern' }}
+          </button>
+        </form>
+      </section>
+
+      <!-- ── Admin: User Management (only owner) ── -->
+      <section v-if="isOwner" class="glass-card admin-card">
+        <div class="card-head">
+          <Shield :size="18" />
+          <h2>Benutzerverwaltung</h2>
+          <button class="btn-primary btn-sm create-user-btn" @click="showCreateUser = true">
+            <Plus :size="13" /> Benutzer anlegen
+          </button>
+        </div>
+
+        <p v-if="usersError" class="msg error">{{ usersError }}</p>
+
+        <div v-if="usersLoading" class="loading-pulse">
+          <div class="pulse-bar"></div>
+          <div class="pulse-bar"></div>
+          <div class="pulse-bar"></div>
+        </div>
+
+        <div v-else-if="users.length === 0" class="empty-state">
+          <Users :size="32" />
+          <p>Noch keine Benutzer. Lege den ersten an.</p>
+        </div>
+
+        <div v-else class="user-list">
+          <div v-for="user in users" :key="user.id" class="user-row">
+            <div class="user-avatar">
+              {{ user.displayName.charAt(0).toUpperCase() }}
+            </div>
+            <div class="user-info">
+              <div class="user-name">{{ user.displayName }}</div>
+              <div class="user-email">
+                <Mail :size="11" /> {{ user.email }}
+              </div>
+            </div>
+            <div class="user-meta">
+              <span class="role-tag" :class="user.role">{{ user.role }}</span>
+              <span class="user-date">
+                Seit {{ formatDate(user.createdAt) }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Create User Modal -->
+        <Teleport to="body">
+          <div v-if="showCreateUser" class="modal-overlay" @click.self="showCreateUser = false">
+            <div class="modal-card">
+              <div class="modal-header">
+                <h2>Benutzer anlegen</h2>
+                <button class="modal-close" @click="showCreateUser = false">&times;</button>
+              </div>
+              <form @submit.prevent="handleCreateUser" class="modal-form">
+                <div class="field">
+                  <label>E-Mail <span class="req">*</span></label>
+                  <input v-model="createEmail" type="email" class="galaxy-input" placeholder="user@noveria.net" required />
+                </div>
+                <div class="field">
+                  <label>Passwort <span class="req">*</span> (min. 10 Zeichen)</label>
+                  <input v-model="createPassword" type="password" class="galaxy-input" minlength="10" required />
+                </div>
+                <div class="field">
+                  <label>Anzeigename (optional)</label>
+                  <input v-model="createDisplayName" class="galaxy-input" placeholder="Max Mustermann" />
+                </div>
+                <div class="field">
+                  <label>Rolle</label>
+                  <select v-model="createRole" class="galaxy-input galaxy-select">
+                    <option value="user">User</option>
+                    <option value="admin">Admin</option>
+                    <option value="viewer">Viewer</option>
+                  </select>
+                </div>
+                <p v-if="createError" class="msg error">{{ createError }}</p>
+                <p v-if="createSuccess" class="msg success">{{ createSuccess }}</p>
+                <div class="modal-actions">
+                  <button type="button" class="btn-ghost" @click="showCreateUser = false">Abbrechen</button>
+                  <button type="submit" class="btn-primary" :disabled="creatingUser">
+                    <Plus :size="14" /> {{ creatingUser ? 'Erstelle…' : 'Benutzer anlegen' }}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </Teleport>
+      </section>
     </div>
   </div>
 </template>
 
 <style scoped>
-.settings-page {
-  max-width: 600px;
+.settings-wrap {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  animation: fadeIn 0.35s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.settings-heading {
+  margin-bottom: 24px;
+}
+
+.settings-heading h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  font-family: 'Space Grotesk', sans-serif;
+  letter-spacing: -0.02em;
+}
+
+.grad-text {
+  background: linear-gradient(135deg, #4f7cff, #b557f6);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.settings-subtitle {
+  margin: 4px 0 0;
+  font-size: 11px;
+  color: #6f6aa0;
+  font-family: 'Manrope', sans-serif;
+}
+
+.settings-grid {
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 20px;
 }
-.settings-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 1.5rem;
+
+/* ── Glass Card ─────────────────────────────── */
+.glass-card {
+  background: linear-gradient(160deg, rgba(20, 17, 48, 0.75), rgba(14, 12, 32, 0.75));
+  border: 1px solid rgba(150, 140, 255, 0.10);
+  border-radius: 18px;
+  padding: 24px;
+  backdrop-filter: blur(12px);
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 }
-.settings-header {
+
+.card-head {
   display: flex;
   align-items: center;
-  gap: 0.6rem;
-  margin-bottom: 1.25rem;
-  color: var(--text-primary);
+  gap: 10px;
+  color: #ece9ff;
+  padding-bottom: 14px;
+  border-bottom: 1px solid rgba(150, 140, 255, 0.08);
 }
-.settings-header h2 {
-  font-size: 1.1rem;
-  font-weight: 600;
+
+.card-head h2 {
   margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  font-family: 'Space Grotesk', sans-serif;
 }
-.setting-row {
-  margin-bottom: 1rem;
+
+.create-user-btn {
+  margin-left: auto;
 }
-.setting-row label {
-  display: block;
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: var(--text-secondary);
+
+/* ── Fields ──────────────────────────────────── */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field label {
+  font-size: 10px;
+  font-weight: 600;
+  color: #a8a3d6;
   text-transform: uppercase;
-  letter-spacing: 0.03em;
-  margin-bottom: 0.3rem;
+  letter-spacing: 0.05em;
 }
-.setting-value {
-  font-size: 0.95rem;
-  color: var(--text-primary);
+
+.field-row {
+  display: flex;
+  gap: 24px;
 }
-.setting-value-row {
+
+.field-row > .field {
+  flex: 1;
+}
+
+.galaxy-input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid rgba(150, 140, 255, 0.12);
+  border-radius: 11px;
+  background: rgba(10, 9, 24, 0.55);
+  color: #ece9ff;
+  font-size: 13.5px;
+  font-family: 'Manrope', sans-serif;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+}
+
+.galaxy-input:focus {
+  border-color: rgba(124, 108, 255, 0.5);
+  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.12);
+}
+
+.galaxy-select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6aa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 36px;
+}
+
+.galaxy-select option {
+  background: #141130;
+  color: #ece9ff;
+}
+
+.value-tag {
+  font-size: 14px;
+  color: #ece9ff;
+  font-weight: 500;
+}
+
+.value-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.setting-edit {
+
+.role-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: linear-gradient(135deg, rgba(79, 124, 255, 0.15), rgba(181, 87, 246, 0.15));
+  color: #b8adff;
+  border: 1px solid rgba(124, 108, 255, 0.15);
+  width: fit-content;
+}
+
+/* ── Name Edit ──────────────────────────────────── */
+.name-edit {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 8px;
 }
-.setting-edit-actions {
+
+.input-group {
   display: flex;
-  gap: 0.5rem;
+  gap: 8px;
+  align-items: center;
 }
-.setting-input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  background: var(--surface-raised);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 0.95rem;
-  color: var(--text-primary);
+
+.input-group .galaxy-input {
+  flex: 1;
 }
+
+/* ── Password ────────────────────────────────── */
 .password-form {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 14px;
 }
+
+.pw-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.pw-wrap .galaxy-input {
+  padding-right: 44px;
+}
+
+.pw-toggle {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #6f6aa0;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.pw-toggle:hover {
+  background: rgba(124, 108, 255, 0.08);
+  color: #a8a3d6;
+}
+
+/* ── Messages ──────────────────────────────────── */
+.msg {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  font-size: 12px;
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+
+.msg.error {
+  background: rgba(244, 63, 94, 0.1);
+  border: 1px solid rgba(244, 63, 94, 0.2);
+  color: #fda4af;
+}
+
+.msg.success {
+  background: rgba(34, 197, 94, 0.1);
+  border: 1px solid rgba(34, 197, 94, 0.2);
+  color: #86efac;
+}
+
+/* ── Buttons ──────────────────────────────────── */
 .btn-primary {
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
-  padding: 0.55rem 1rem;
-  background: var(--nx-accent);
-  color: #fff;
+  gap: 6px;
+  padding: 9px 16px;
   border: none;
-  border-radius: 8px;
-  font-size: 0.9rem;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #4f7cff, #7c6cff, #b557f6);
+  color: #fff;
+  font-size: 12.5px;
+  font-weight: 600;
+  font-family: 'Manrope', sans-serif;
   cursor: pointer;
+  transition: opacity 0.2s, transform 0.15s;
   width: fit-content;
 }
+
+.btn-primary:hover:not(:disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
 .btn-primary:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
 }
+
 .btn-sm {
-  padding: 0.35rem 0.65rem;
-  font-size: 0.8rem;
+  padding: 6px 12px;
+  font-size: 11px;
+  border-radius: 8px;
 }
+
 .btn-ghost {
-  background: none;
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 11px;
+  font-family: 'Manrope', sans-serif;
+  background: transparent;
+  border: 1px solid rgba(150, 140, 255, 0.12);
+  color: #a8a3d6;
+  border-radius: 8px;
   cursor: pointer;
+  transition: background 0.15s, color 0.15s;
 }
-.setting-error {
-  color: rgb(239, 68, 68);
-  font-size: 0.85rem;
-  margin: 0.35rem 0 0;
+
+.btn-ghost:hover {
+  background: rgba(124, 108, 255, 0.08);
+  color: #ece9ff;
 }
-.setting-success {
-  color: rgb(34, 197, 94);
-  font-size: 0.85rem;
-  margin: 0.35rem 0 0;
+
+/* ── Admin User Management ───────────────────── */
+.admin-card {
+  border-color: rgba(124, 108, 255, 0.15);
 }
-.badge {
+
+.user-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.user-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: rgba(10, 9, 24, 0.35);
+  border: 1px solid rgba(150, 140, 255, 0.06);
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.user-row:hover {
+  background: rgba(124, 108, 255, 0.05);
+  border-color: rgba(150, 140, 255, 0.12);
+}
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, rgba(79, 124, 255, 0.2), rgba(181, 87, 246, 0.2));
+  border: 1px solid rgba(124, 108, 255, 0.15);
+  color: #b8adff;
+  font-weight: 700;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: #ece9ff;
+}
+
+.user-email {
+  font-size: 11px;
+  color: #6f6aa0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.user-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.role-tag {
   display: inline-block;
-  padding: 0.15rem 0.5rem;
-  background: var(--nx-accent-soft);
-  color: var(--nx-accent);
-  border-radius: 4px;
-  font-size: 0.8rem;
+  padding: 1px 8px;
+  border-radius: 5px;
+  font-size: 10px;
+  font-weight: 600;
   text-transform: uppercase;
+  letter-spacing: 0.04em;
+  background: rgba(124, 108, 255, 0.1);
+  color: #b8adff;
+  border: 1px solid rgba(124, 108, 255, 0.1);
+}
+
+.role-tag.owner {
+  background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(251, 191, 36, 0.15));
+  color: #fde68a;
+  border-color: rgba(251, 191, 36, 0.2);
+}
+
+.role-tag.admin {
+  background: rgba(79, 124, 255, 0.12);
+  color: #93c5fd;
+  border-color: rgba(79, 124, 255, 0.2);
+}
+
+.role-tag.viewer {
+  background: rgba(107, 103, 150, 0.15);
+  color: #a8a3d6;
+  border-color: rgba(107, 103, 150, 0.2);
+}
+
+.user-date {
+  font-size: 10px;
+  color: #6f6aa0;
+}
+
+.loading-pulse {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.pulse-bar {
+  height: 52px;
+  border-radius: 12px;
+  background: linear-gradient(90deg, rgba(124, 108, 255, 0.04), rgba(124, 108, 255, 0.1), rgba(124, 108, 255, 0.04));
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 32px;
+  color: #6f6aa0;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 12px;
+}
+
+/* ── Modal ────────────────────────────────── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(5, 4, 16, 0.75);
+  backdrop-filter: blur(16px);
+}
+
+.modal-card {
+  width: 100%;
+  max-width: 460px;
+  background: linear-gradient(160deg, rgba(20, 17, 48, 0.92), rgba(14, 12, 32, 0.92));
+  border: 1px solid rgba(150, 140, 255, 0.18);
+  border-radius: 18px;
+  padding: 24px;
+  box-shadow: 0 0 0 1px rgba(124, 108, 255, 0.12), 0 20px 60px -12px rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid rgba(150, 140, 255, 0.08);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: #ece9ff;
+  font-family: 'Space Grotesk', sans-serif;
+}
+
+.modal-close {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: #6f6aa0;
+  cursor: pointer;
+  border-radius: 6px;
+  font-size: 20px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.modal-close:hover {
+  background: rgba(124, 108, 255, 0.08);
+  color: #ece9ff;
+}
+
+.req {
+  color: #fb7185;
+}
+
+.modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
 }
 </style>
diff --git a/frontend/src/views/TaskBoardView.vue b/frontend/src/views/TaskBoardView.vue
index 8e4e236..40e237d 100644
--- a/frontend/src/views/TaskBoardView.vue
+++ b/frontend/src/views/TaskBoardView.vue
@@ -1,17 +1,39 @@
 <script setup lang="ts">
 /**
  * TaskBoardView – Linear-style Kanban Board
+ * Galaxy/Dashboard V2 styled edition.
  *
- * 4 columns: Offen, In Bearbeitung, Review, Erledigt
+ * 6 columns: Offen, In Bearbeitung, Delegiert, Review, Blockiert, Erledigt
  * HTML5 Drag & Drop (no external lib)
  */
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { Plus, X, CalendarDays, Clock3, ExternalLink, Link2, ListChecks, Save } from '@lucide/vue'
+import { useRouter } from 'vue-router'
 import { useTaskStore } from '../stores/tasks'
-import { Plus } from '@lucide/vue'
+
+type BoardTask = ReturnType<typeof flattenBoard>[number]
+
+type TaskFormState = {
+  title: string
+  detail: string
+  priority: string
+  assignedTo: string
+  state: string
+  dueDate: string
+}
 
 const taskStore = useTaskStore()
+const router = useRouter()
 const showCreateModal = ref(false)
+const showDetailPanel = ref(false)
 const dragOverColumn = ref<string | null>(null)
+const selectedTaskId = ref<string | null>(null)
+const detailSaving = ref(false)
+const detailError = ref('')
+const detailSuccess = ref('')
+const detailLoading = ref(false)
+const childTasks = ref<BoardTask[]>([])
+const taskActivity = ref<Array<{ id?: string; message?: string; type?: string; createdAt?: string; timestamp?: string }>>([])
 
 /* ── Create Task Form ───────────────────────────── */
 const formTitle = ref('')
@@ -21,6 +43,15 @@ const formAssignedTo = ref('bao')
 const formSubmitting = ref(false)
 const formError = ref('')
 
+const detailForm = reactive<TaskFormState>({
+  title: '',
+  detail: '',
+  priority: 'Medium',
+  assignedTo: 'bao',
+  state: 'Backlog',
+  dueDate: '',
+})
+
 function resetForm() {
   formTitle.value = ''
   formDetail.value = ''
@@ -45,7 +76,7 @@ async function handleCreateTask() {
     })
     showCreateModal.value = false
     resetForm()
-  } catch (err) {
+  } catch (_err) {
     formError.value = 'Fehler beim Erstellen der Aufgabe'
   } finally {
     formSubmitting.value = false
@@ -60,15 +91,15 @@ function onDragStart(e: DragEvent, taskId: string) {
   draggedTaskId.value = taskId
   e.dataTransfer.effectAllowed = 'move'
   e.dataTransfer.setData('text/plain', taskId)
-  const el = e.target as HTMLElement
-  el.classList.add('dragging')
+  const el = e.currentTarget as HTMLElement | null
+  el?.classList.add('dragging')
 }
 
 function onDragEnd(e: DragEvent) {
   draggedTaskId.value = null
   dragOverColumn.value = null
-  const el = e.target as HTMLElement
-  el.classList.remove('dragging')
+  const el = e.currentTarget as HTMLElement | null
+  el?.classList.remove('dragging')
 }
 
 function onDragOver(e: DragEvent, column: string) {
@@ -106,22 +137,156 @@ function priorityColor(p: string): string {
   return '#facc15'
 }
 
+function statusTone(state: string): string {
+  switch (state.toLowerCase()) {
+    case 'done': return 'is-done'
+    case 'blocked': return 'is-blocked'
+    case 'review': return 'is-review'
+    case 'delegated': return 'is-delegated'
+    case 'in progress': return 'is-progress'
+    default: return 'is-backlog'
+  }
+}
+
+function stateLabel(state: string): string {
+  return state === 'Backlog' ? 'Offen' : state
+}
+
+function formatDate(date?: string | null, withTime = false): string {
+  if (!date) return '—'
+  return new Date(date).toLocaleString('de-DE', withTime
+    ? { dateStyle: 'medium', timeStyle: 'short' }
+    : { dateStyle: 'medium' })
+}
+
+function toDateInputValue(date?: string | null): string {
+  if (!date) return ''
+  return new Date(date).toISOString().slice(0, 10)
+}
+
+function flattenBoard() {
+  return [
+    ...taskStore.board.offen,
+    ...taskStore.board.inProgress,
+    ...taskStore.board.delegated,
+    ...taskStore.board.review,
+    ...taskStore.board.blocked,
+    ...taskStore.board.done,
+  ]
+}
+
+const allBoardTasks = computed(() => flattenBoard())
+const selectedTask = computed(() => allBoardTasks.value.find(task => task.id === selectedTaskId.value) ?? null)
+const canSaveDetail = computed(() => detailForm.title.trim().length > 0 && !detailSaving.value)
+
+function hydrateDetailForm(task: BoardTask | null) {
+  detailError.value = ''
+  detailSuccess.value = ''
+  if (!task) return
+  detailForm.title = task.title
+  detailForm.detail = task.detail ?? ''
+  detailForm.priority = task.priority || 'Medium'
+  detailForm.assignedTo = task.assignedTo || ''
+  detailForm.state = task.state || 'Backlog'
+  detailForm.dueDate = toDateInputValue(task.dueDate)
+}
+
+async function openTask(taskId: string) {
+  selectedTaskId.value = taskId
+  showDetailPanel.value = true
+  await loadDetailContext(taskId)
+}
+
+function closeDetailPanel() {
+  showDetailPanel.value = false
+  selectedTaskId.value = null
+  childTasks.value = []
+  taskActivity.value = []
+  detailError.value = ''
+  detailSuccess.value = ''
+}
+
+async function loadDetailContext(taskId: string) {
+  detailLoading.value = true
+  detailError.value = ''
+  try {
+    const [children, activity] = await Promise.all([
+      taskStore.fetchTaskChildren(taskId),
+      taskStore.fetchTaskActivity(taskId),
+    ])
+    childTasks.value = children
+    taskActivity.value = activity
+  } catch (_err) {
+    detailError.value = 'Zusätzliche Details konnten nicht vollständig geladen werden'
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+async function saveTaskDetail() {
+  if (!selectedTask.value || !detailForm.title.trim()) return
+
+  detailSaving.value = true
+  detailError.value = ''
+  detailSuccess.value = ''
+
+  try {
+    await taskStore.updateTask(selectedTask.value.id, {
+      title: detailForm.title.trim(),
+      detail: detailForm.detail.trim() || null,
+      priority: detailForm.priority,
+      assignedTo: detailForm.assignedTo || null,
+      dueDate: detailForm.dueDate || null,
+    })
+
+    if (detailForm.state !== selectedTask.value.state) {
+      await taskStore.moveTask(selectedTask.value.id, detailForm.state)
+    }
+
+    detailSuccess.value = 'Änderungen gespeichert'
+    await loadDetailContext(selectedTask.value.id)
+  } catch (_err) {
+    detailError.value = 'Änderungen konnten nicht gespeichert werden'
+  } finally {
+    detailSaving.value = false
+  }
+}
+
+function onGlobalKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && showDetailPanel.value) {
+    closeDetailPanel()
+  }
+}
+
+watch(selectedTask, (task) => {
+  hydrateDetailForm(task)
+})
+
+watch(showDetailPanel, (open) => {
+  document.body.style.overflow = open ? 'hidden' : ''
+})
+
 /* ── Lifecycle ────────────────────────────────────── */
 onMounted(() => {
   taskStore.startBoardPolling()
+  window.addEventListener('keydown', onGlobalKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.body.style.overflow = ''
 })
 
 onUnmounted(() => {
   taskStore.stopBoardPolling()
+  window.removeEventListener('keydown', onGlobalKeydown)
 })
 </script>
 
 <template>
   <div class="board-wrap">
-    <!-- Header -->
     <div class="board-header">
       <div>
-        <h1>Aufgaben</h1>
+        <h1><span class="grad-text">Aufgaben</span></h1>
         <p class="board-subtitle">Task Board — Übersicht aller Arbeitspakete</p>
       </div>
       <button class="create-btn" @click="showCreateModal = true">
@@ -130,15 +295,12 @@ onUnmounted(() => {
       </button>
     </div>
 
-    <!-- Loading state -->
     <div v-if="taskStore.boardLoading" class="board-loading">
       <div class="spinner"></div>
       <span>Lade Aufgaben…</span>
     </div>
 
-    <!-- Board columns -->
     <div v-else class="board-columns">
-      <!-- Offen / Backlog -->
       <div
         class="col"
         :class="{ 'drag-over': dragOverColumn === 'offen' }"
@@ -146,21 +308,24 @@ onUnmounted(() => {
         @dragleave="onDragLeave"
         @drop="onDrop($event, 'offen')"
       >
-        <div class="col-header" style="--col-accent: var(--st-queue)">
+        <div class="col-header">
+          <span class="col-icon" style="background: var(--st-queue); box-shadow: 0 0 0 2px rgba(251,191,36,.25);"></span>
           <span class="col-name">Offen</span>
           <span class="col-count">{{ taskStore.board.offen.length }}</span>
         </div>
         <div class="col-cards">
-          <div
+          <button
             v-for="task in taskStore.board.offen"
             :key="task.id"
+            type="button"
             class="card"
             draggable="true"
+            @click="openTask(task.id)"
             @dragstart="onDragStart($event, task.id)"
             @dragend="onDragEnd"
           >
             <div class="card-top">
-              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority), borderColor: priorityColor(task.priority) }">
                 {{ priorityLabel(task.priority) }}
               </span>
               <span
@@ -172,13 +337,13 @@ onUnmounted(() => {
               </span>
             </div>
             <div class="card-title">{{ task.title }}</div>
+            <div v-if="task.detail" class="card-preview">{{ task.detail }}</div>
             <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
-          </div>
+          </button>
           <div v-if="!taskStore.board.offen.length" class="empty-col">Keine Aufgaben</div>
         </div>
       </div>
 
-      <!-- In Bearbeitung / InProgress -->
       <div
         class="col"
         :class="{ 'drag-over': dragOverColumn === 'inProgress' }"
@@ -186,21 +351,24 @@ onUnmounted(() => {
         @dragleave="onDragLeave"
         @drop="onDrop($event, 'inProgress')"
       >
-        <div class="col-header" style="--col-accent: #60a5fa">
+        <div class="col-header">
+          <span class="col-icon" style="background: var(--st-work); box-shadow: 0 0 0 2px rgba(61,220,151,.25);"></span>
           <span class="col-name">In Bearbeitung</span>
           <span class="col-count">{{ taskStore.board.inProgress.length }}</span>
         </div>
         <div class="col-cards">
-          <div
+          <button
             v-for="task in taskStore.board.inProgress"
             :key="task.id"
+            type="button"
             class="card"
             draggable="true"
+            @click="openTask(task.id)"
             @dragstart="onDragStart($event, task.id)"
             @dragend="onDragEnd"
           >
             <div class="card-top">
-              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority), borderColor: priorityColor(task.priority) }">
                 {{ priorityLabel(task.priority) }}
               </span>
               <span
@@ -212,13 +380,13 @@ onUnmounted(() => {
               </span>
             </div>
             <div class="card-title">{{ task.title }}</div>
+            <div v-if="task.detail" class="card-preview">{{ task.detail }}</div>
             <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
-          </div>
+          </button>
           <div v-if="!taskStore.board.inProgress.length" class="empty-col">Keine Aufgaben</div>
         </div>
       </div>
 
-      <!-- Delegiert / Delegated -->
       <div
         class="col"
         :class="{ 'drag-over': dragOverColumn === 'delegated' }"
@@ -226,21 +394,24 @@ onUnmounted(() => {
         @dragleave="onDragLeave"
         @drop="onDrop($event, 'delegated')"
       >
-        <div class="col-header" style="--col-accent: #a78bfa">
+        <div class="col-header">
+          <span class="col-icon" style="background: var(--a-purple); box-shadow: 0 0 0 2px rgba(181,87,246,.25);"></span>
           <span class="col-name">Delegiert</span>
           <span class="col-count">{{ taskStore.board.delegated.length }}</span>
         </div>
         <div class="col-cards">
-          <div
+          <button
             v-for="task in taskStore.board.delegated"
             :key="task.id"
+            type="button"
             class="card"
             draggable="true"
+            @click="openTask(task.id)"
             @dragstart="onDragStart($event, task.id)"
             @dragend="onDragEnd"
           >
             <div class="card-top">
-              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority), borderColor: priorityColor(task.priority) }">
                 {{ priorityLabel(task.priority) }}
               </span>
               <span
@@ -252,13 +423,13 @@ onUnmounted(() => {
               </span>
             </div>
             <div class="card-title">{{ task.title }}</div>
+            <div v-if="task.detail" class="card-preview">{{ task.detail }}</div>
             <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
-          </div>
+          </button>
           <div v-if="!taskStore.board.delegated.length" class="empty-col">Keine delegierten Aufgaben</div>
         </div>
       </div>
 
-      <!-- Review -->
       <div
         class="col"
         :class="{ 'drag-over': dragOverColumn === 'review' }"
@@ -266,21 +437,24 @@ onUnmounted(() => {
         @dragleave="onDragLeave"
         @drop="onDrop($event, 'review')"
       >
-        <div class="col-header" style="--col-accent: #fb923c">
+        <div class="col-header">
+          <span class="col-icon" style="background: #fb923c; box-shadow: 0 0 0 2px rgba(251,146,60,.25);"></span>
           <span class="col-name">Review</span>
           <span class="col-count">{{ taskStore.board.review.length }}</span>
         </div>
         <div class="col-cards">
-          <div
+          <button
             v-for="task in taskStore.board.review"
             :key="task.id"
+            type="button"
             class="card"
             draggable="true"
+            @click="openTask(task.id)"
             @dragstart="onDragStart($event, task.id)"
             @dragend="onDragEnd"
           >
             <div class="card-top">
-              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority), borderColor: priorityColor(task.priority) }">
                 {{ priorityLabel(task.priority) }}
               </span>
               <span
@@ -292,13 +466,13 @@ onUnmounted(() => {
               </span>
             </div>
             <div class="card-title">{{ task.title }}</div>
+            <div v-if="task.detail" class="card-preview">{{ task.detail }}</div>
             <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
-          </div>
+          </button>
           <div v-if="!taskStore.board.review.length" class="empty-col">Keine Aufgaben</div>
         </div>
       </div>
 
-      <!-- Erledigt / Done -->
       <div
         class="col"
         :class="{ 'drag-over': dragOverColumn === 'done' }"
@@ -306,21 +480,24 @@ onUnmounted(() => {
         @dragleave="onDragLeave"
         @drop="onDrop($event, 'done')"
       >
-        <div class="col-header" style="--col-accent: #4ade80">
+        <div class="col-header">
+          <span class="col-icon" style="background: var(--st-work); box-shadow: 0 0 0 2px rgba(61,220,151,.25);"></span>
           <span class="col-name">Erledigt</span>
           <span class="col-count">{{ taskStore.board.done.length }}</span>
         </div>
         <div class="col-cards">
-          <div
+          <button
             v-for="task in taskStore.board.done"
             :key="task.id"
+            type="button"
             class="card"
             draggable="true"
+            @click="openTask(task.id)"
             @dragstart="onDragStart($event, task.id)"
             @dragend="onDragEnd"
           >
             <div class="card-top">
-              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority), borderColor: priorityColor(task.priority) }">
                 {{ priorityLabel(task.priority) }}
               </span>
               <span
@@ -332,13 +509,13 @@ onUnmounted(() => {
               </span>
             </div>
             <div class="card-title">{{ task.title }}</div>
+            <div v-if="task.detail" class="card-preview">{{ task.detail }}</div>
             <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
-          </div>
+          </button>
           <div v-if="!taskStore.board.done.length" class="empty-col">Keine Aufgaben</div>
         </div>
       </div>
 
-      <!-- Blocked column (collapsed/small) -->
       <div
         class="col col-blocked"
         :class="{ 'drag-over': dragOverColumn === 'blocked' }"
@@ -346,21 +523,24 @@ onUnmounted(() => {
         @dragleave="onDragLeave"
         @drop="onDrop($event, 'blocked')"
       >
-        <div class="col-header" style="--col-accent: #f87171">
+        <div class="col-header">
+          <span class="col-icon" style="background: var(--st-block); box-shadow: 0 0 0 2px rgba(251,113,133,.25);"></span>
           <span class="col-name">Blockiert</span>
           <span class="col-count">{{ taskStore.board.blocked.length }}</span>
         </div>
         <div class="col-cards">
-          <div
+          <button
             v-for="task in taskStore.board.blocked"
             :key="task.id"
+            type="button"
             class="card card-blocked"
             draggable="true"
+            @click="openTask(task.id)"
             @dragstart="onDragStart($event, task.id)"
             @dragend="onDragEnd"
           >
             <div class="card-top">
-              <span class="prio-badge" :style="{ color: priorityColor(task.priority) }">
+              <span class="prio-badge" :style="{ color: priorityColor(task.priority), borderColor: priorityColor(task.priority) }">
                 {{ priorityLabel(task.priority) }}
               </span>
               <span
@@ -372,24 +552,24 @@ onUnmounted(() => {
               </span>
             </div>
             <div class="card-title">{{ task.title }}</div>
+            <div v-if="task.detail" class="card-preview">{{ task.detail }}</div>
             <div class="card-meta">{{ new Date(task.createdAt).toLocaleDateString('de-DE') }}</div>
-          </div>
+          </button>
           <div v-if="!taskStore.board.blocked.length" class="empty-col">Keine Blockierer</div>
         </div>
       </div>
     </div>
 
-    <!-- Create Task Modal -->
     <Teleport to="body">
       <div v-if="showCreateModal" class="modal-overlay" @click.self="showCreateModal = false">
-        <div class="modal-content">
+        <div class="modal-card">
           <div class="modal-header">
             <h2>Neue Aufgabe</h2>
             <button class="modal-close" @click="showCreateModal = false">&times;</button>
           </div>
           <form @submit.prevent="handleCreateTask" class="modal-form">
             <div class="field">
-              <label for="task-title">Titel *</label>
+              <label for="task-title">Titel <span class="req">*</span></label>
               <input
                 id="task-title"
                 v-model="formTitle"
@@ -436,6 +616,147 @@ onUnmounted(() => {
         </div>
       </div>
     </Teleport>
+
+    <Teleport to="body">
+      <div v-if="showDetailPanel && selectedTask" class="detail-overlay" @click.self="closeDetailPanel">
+        <aside class="detail-panel">
+          <div class="detail-topbar">
+            <div class="detail-breadcrumb">Task Board / {{ stateLabel(selectedTask.state) }}</div>
+            <button type="button" class="detail-close" @click="closeDetailPanel" aria-label="Detailansicht schließen">
+              <X :size="18" />
+            </button>
+          </div>
+
+          <div class="detail-content">
+            <section class="detail-main">
+              <div class="detail-title-block">
+                <span class="detail-state-pill" :class="statusTone(selectedTask.state)">{{ stateLabel(selectedTask.state) }}</span>
+                <input v-model="detailForm.title" class="detail-title-input" maxlength="240" />
+                <div class="detail-meta-row">
+                  <span>#{{ selectedTask.id.slice(0, 8) }}</span>
+                  <span><Clock3 :size="13" /> Aktualisiert {{ formatDate(selectedTask.updatedAt, true) }}</span>
+                  <span><CalendarDays :size="13" /> Erstellt {{ formatDate(selectedTask.createdAt) }}</span>
+                </div>
+              </div>
+
+              <div class="detail-section">
+                <div class="detail-section-header">Beschreibung</div>
+                <textarea
+                  v-model="detailForm.detail"
+                  class="detail-textarea"
+                  rows="8"
+                  placeholder="Mehr Kontext, Akzeptanzkriterien oder Notizen…"
+                ></textarea>
+              </div>
+
+              <div class="detail-grid">
+                <section class="detail-section">
+                  <div class="detail-section-header"><ListChecks :size="14" /> Unteraufgaben</div>
+                  <div v-if="detailLoading" class="detail-empty">Lade…</div>
+                  <div v-else-if="childTasks.length" class="detail-stack">
+                    <article v-for="child in childTasks" :key="child.id" class="mini-card">
+                      <div class="mini-card-row">
+                        <span class="mini-title">{{ child.title }}</span>
+                        <span class="mini-state">{{ stateLabel(child.state) }}</span>
+                      </div>
+                      <p v-if="child.detail" class="mini-copy">{{ child.detail }}</p>
+                    </article>
+                  </div>
+                  <div v-else class="detail-empty">Noch keine Unteraufgaben verknüpft.</div>
+                </section>
+
+                <section class="detail-section">
+                  <div class="detail-section-header"><Link2 :size="14" /> Aktivität</div>
+                  <div v-if="detailLoading" class="detail-empty">Lade…</div>
+                  <div v-else-if="taskActivity.length" class="activity-list">
+                    <article v-for="(entry, index) in taskActivity" :key="entry.id ?? index" class="activity-item">
+                      <div class="activity-dot"></div>
+                      <div>
+                        <div class="activity-message">{{ entry.message ?? 'Aktivität' }}</div>
+                        <div class="activity-time">{{ formatDate(entry.createdAt ?? entry.timestamp ?? null, true) }}</div>
+                      </div>
+                    </article>
+                  </div>
+                  <div v-else class="detail-empty">Noch keine Aktivität vorhanden.</div>
+                </section>
+              </div>
+            </section>
+
+            <aside class="detail-sidebar">
+              <section class="sidebar-card">
+                <div class="sidebar-heading">Eigenschaften</div>
+                <label class="sidebar-field">
+                  <span>Status</span>
+                  <select v-model="detailForm.state" class="field-input field-select slim">
+                    <option value="Backlog">Offen</option>
+                    <option value="In progress">In Bearbeitung</option>
+                    <option value="Delegated">Delegiert</option>
+                    <option value="Review">Review</option>
+                    <option value="Blocked">Blockiert</option>
+                    <option value="Done">Erledigt</option>
+                  </select>
+                </label>
+                <label class="sidebar-field">
+                  <span>Priorität</span>
+                  <select v-model="detailForm.priority" class="field-input field-select slim">
+                    <option value="High">High</option>
+                    <option value="Medium">Medium</option>
+                    <option value="Low">Low</option>
+                  </select>
+                </label>
+                <label class="sidebar-field">
+                  <span>Zuständig</span>
+                  <select v-model="detailForm.assignedTo" class="field-input field-select slim">
+                    <option value="">Nicht zugewiesen</option>
+                    <option value="bao">👤 Bao</option>
+                    <option value="iris">🤖 Iris</option>
+                    <option value="programmer">🛠 Programmer</option>
+                    <option value="reviewer">🔎 Reviewer</option>
+                    <option value="architekt">🏛 Architekt</option>
+                  </select>
+                </label>
+                <label class="sidebar-field">
+                  <span>Fällig am</span>
+                  <input v-model="detailForm.dueDate" type="date" class="field-input slim" />
+                </label>
+              </section>
+
+              <section class="sidebar-card subtle">
+                <div class="sidebar-heading">Snapshot</div>
+                <dl class="snapshot-list">
+                  <div>
+                    <dt>Quelle</dt>
+                    <dd>{{ selectedTask.source || '—' }}</dd>
+                  </div>
+                  <div>
+                    <dt>Priorität</dt>
+                    <dd>{{ selectedTask.priority }}</dd>
+                  </div>
+                  <div>
+                    <dt>Fällig</dt>
+                    <dd>{{ formatDate(selectedTask.dueDate) }}</dd>
+                  </div>
+                </dl>
+              </section>
+
+              <p v-if="detailError" class="detail-flash error">{{ detailError }}</p>
+              <p v-else-if="detailSuccess" class="detail-flash success">{{ detailSuccess }}</p>
+
+              <div class="detail-actions">
+                <button type="button" class="btn-cancel" @click="closeDetailPanel">Schließen</button>
+                <button type="button" class="btn-ghost" @click="router.push('/tasks/' + selectedTask.id)">
+                  <ExternalLink :size="13" /> Vollansicht
+                </button>
+                <button type="button" class="btn-submit" :disabled="!canSaveDetail" @click="saveTaskDetail">
+                  <Save :size="14" />
+                  {{ detailSaving ? 'Speichert…' : 'Speichern' }}
+                </button>
+              </div>
+            </aside>
+          </div>
+        </aside>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -446,382 +767,112 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   gap: 20px;
+  animation: board-fade-in 0.35s ease-out;
 }
-
-.board-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.board-header h1 {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--nx-text);
-}
-
-.board-subtitle {
-  margin: 4px 0 0;
-  font-size: 11px;
-  color: var(--nx-text-dim);
-}
-
-.create-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  border: none;
-  border-radius: 8px;
-  background: var(--nx-accent);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: opacity .15s;
-  flex-shrink: 0;
-}
-
-.create-btn:hover {
-  opacity: .85;
-}
-
-.board-loading {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 40px;
-  color: var(--nx-text-dim);
-  font-size: 13px;
-}
-
-.spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--nx-line);
-  border-top-color: var(--nx-accent);
-  border-radius: 50%;
-  animation: spin .6s linear infinite;
-}
-
+@keyframes board-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+.board-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.board-header h1 { margin: 0; font-size: 22px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
+.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.board-subtitle { margin: 4px 0 0; font-size: 11px; color: var(--tx-3); font-family: 'Manrope', sans-serif; }
+.create-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: var(--r-sm, 10px); background: var(--grad); color: #fff; font-size: 12.5px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: opacity .15s, transform .15s; flex-shrink: 0; box-shadow: var(--glow-purple); }
+.create-btn:hover { opacity: .85; transform: translateY(-1px); }
+.create-btn:active { transform: translateY(0); }
+.board-loading { display: flex; align-items: center; gap: 10px; padding: 40px; color: var(--tx-3); font-size: 13px; font-family: 'Manrope', sans-serif; }
+.spinner { width: 20px; height: 20px; border: 2px solid var(--line-2); border-top-color: var(--a-mid); border-radius: 50%; animation: spin .6s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
-
-.board-columns {
-  display: flex;
-  gap: 14px;
-  flex: 1;
-  overflow-x: auto;
-  padding-bottom: 20px;
-  min-height: calc(100vh - 200px);
-}
-
-.col {
-  flex: 1;
-  min-width: 240px;
-  max-width: 320px;
-  display: flex;
-  flex-direction: column;
-  background: var(--glass);
-  border: 1px solid var(--nx-line);
-  border-radius: 12px;
-  padding: 12px;
-  transition: border-color .15s, background .15s;
-}
-
-.col.drag-over {
-  border-color: var(--nx-accent);
-  background: color-mix(in srgb, var(--nx-accent) 8%, transparent);
-}
-
-.col-blocked {
-  max-width: 240px;
-}
-
-.col-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--nx-line);
-}
-
-.col-name {
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: .06em;
-  color: var(--col-accent);
-}
-
-.col-count {
-  margin-left: auto;
-  font-size: 10px;
-  font-weight: 700;
-  padding: 1px 7px;
-  border-radius: 10px;
-  background: var(--glass);
-  color: var(--col-accent);
-  border: 1px solid var(--nx-line);
-}
-
-.col-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  flex: 1;
-}
-
-/* ── Cards ── */
-.card {
-  padding: 10px 12px;
-  border-radius: 8px;
-  background: var(--glass);
-  border: 1px solid var(--nx-line);
-  cursor: grab;
-  transition: transform .12s, box-shadow .12s, opacity .15s;
-}
-
-.card:hover {
-  transform: scale(1.02);
-  box-shadow: 0 4px 12px rgba(0,0,0,.15);
-}
-
-.card.dragging {
-  opacity: .4;
-}
-
-.card-blocked {
-  border-left: 3px solid #f87171;
-}
-
-.card-top {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 6px;
-}
-
-.prio-badge {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 9px;
-  font-weight: 700;
-  padding: 1px 5px;
-  border-radius: 4px;
-  background: color-mix(in srgb, currentColor 12%, transparent);
-}
-
-.assignee {
-  font-size: 10px;
-  font-weight: 600;
-  padding: 1px 6px;
-  border-radius: 4px;
-}
-
-.assignee-iris {
-  background: rgba(147, 51, 234, .12);
-  color: #c084fc;
-}
-
-.assignee-bao {
-  background: rgba(59, 130, 246, .12);
-  color: #60a5fa;
-}
-
-.card-title {
-  font-size: 12.5px;
-  font-weight: 600;
-  color: var(--nx-text);
-  line-height: 1.4;
-  word-break: break-word;
-}
-
-.card-meta {
-  font-size: 10px;
-  color: var(--nx-text-dim);
-  margin-top: 5px;
-}
-
-.empty-col {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px 12px;
-  font-size: 11px;
-  color: var(--nx-text-dim);
-  font-style: italic;
-}
-
-/* ── Modal ── */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0,0,0,.55);
-  backdrop-filter: blur(4px);
-}
-
-.modal-content {
-  width: 100%;
-  max-width: 460px;
-  background: var(--space-1);
-  border: 1px solid var(--nx-line);
-  border-radius: 14px;
-  padding: 24px;
-  box-shadow: 0 12px 40px rgba(0,0,0,.3);
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 18px;
-}
-
-.modal-header h2 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--nx-text);
-}
-
-.modal-close {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  color: var(--nx-text-dim);
-  font-size: 20px;
-  cursor: pointer;
-  border-radius: 6px;
-  transition: background .15s;
-}
-
-.modal-close:hover {
-  background: var(--glass);
-}
-
-.modal-form {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  flex: 1;
-}
-
-.field label {
-  font-size: 10.5px;
-  font-weight: 600;
-  color: var(--nx-text-dim);
-  text-transform: uppercase;
-  letter-spacing: .04em;
-}
-
-.field-input {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid var(--nx-line);
-  border-radius: 6px;
-  background: var(--glass);
-  color: var(--nx-text);
-  font-size: 13px;
-  outline: none;
-  transition: border-color .15s;
-  box-sizing: border-box;
-}
-
-.field-input:focus {
-  border-color: var(--nx-accent);
-}
-
-.field-textarea {
-  resize: vertical;
-  min-height: 60px;
-  font-family: inherit;
-}
-
-.field-select {
-  cursor: pointer;
-}
-
-.field-row {
-  display: flex;
-  gap: 12px;
-}
-
-.form-error {
-  color: #f87171;
-  font-size: 11px;
-  margin: 0;
-}
-
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 4px;
-}
-
-.btn-cancel {
-  padding: 7px 14px;
-  border: 1px solid var(--nx-line);
-  border-radius: 6px;
-  background: transparent;
-  color: var(--nx-text-dim);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background .15s;
-}
-
-.btn-cancel:hover {
-  background: var(--glass);
-}
-
-.btn-submit {
-  padding: 7px 16px;
-  border: none;
-  border-radius: 6px;
-  background: var(--nx-accent);
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: opacity .15s;
-}
-
-.btn-submit:disabled {
-  opacity: .5;
-  cursor: not-allowed;
-}
-
-.btn-submit:not(:disabled):hover {
-  opacity: .85;
-}
-
-/* ── Responsive ── */
-@media (max-width: 860px) {
-  .board-columns {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: thin;
-  }
-
-  .col {
-    min-width: 260px;
-  }
-}
+.board-columns { display: flex; gap: 14px; flex: 1; overflow-x: auto; padding-bottom: 20px; min-height: calc(100vh - 200px); scrollbar-width: thin; scrollbar-color: rgba(124,108,255,.22) transparent; }
+.col { flex: 1; min-width: 240px; max-width: 320px; display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r, 14px); padding: 12px; transition: border-color .2s, background .2s; backdrop-filter: blur(12px); }
+.col.drag-over { border-color: var(--a-mid); background: linear-gradient(160deg, rgba(124,108,255,.10), rgba(20,17,48,.55)); box-shadow: 0 0 0 1px rgba(124,108,255,.15); }
+.col-blocked { max-width: 240px; }
+.col-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
+.col-icon { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
+.col-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx-2); font-family: 'Space Grotesk', sans-serif; }
+.col-count { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 10px; background: var(--glass-2); color: var(--tx-2); border: 1px solid var(--line); }
+.col-cards { display: flex; flex-direction: column; gap: 8px; flex: 1; }
+.card { padding: 10px 12px; border-radius: var(--r-sm, 10px); background: linear-gradient(160deg, rgba(28,24,64,.45), rgba(20,17,48,.35)); border: 1px solid var(--line); cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .15s, opacity .15s; text-align: left; width: 100%; }
+.card:hover { transform: scale(1.02); border-color: var(--line-2); box-shadow: 0 0 0 1px rgba(124,108,255,.10), 0 8px 24px -6px rgba(0,0,0,.4); }
+.card:active { cursor: grabbing; }
+.card.dragging { opacity: .4; cursor: grabbing; }
+.card-blocked { border-left: 3px solid var(--st-block); }
+.card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
+.prio-badge { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; border: 1px solid; background: transparent; }
+.assignee { font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
+.assignee-iris { background: rgba(147, 51, 234, .12); color: #c084fc; }
+.assignee-bao { background: rgba(59, 130, 246, .12); color: #60a5fa; }
+.card-title { font-size: 12.5px; font-weight: 600; color: var(--tx); line-height: 1.4; word-break: break-word; font-family: 'Manrope', sans-serif; }
+.card-preview { margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--tx-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.card-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--tx-3); margin-top: 5px; font-variant-numeric: tabular-nums; }
+.empty-col, .detail-empty { display: flex; align-items: center; justify-content: center; padding: 24px 12px; font-size: 11px; color: var(--tx-3); font-style: italic; font-family: 'Manrope', sans-serif; }
+.modal-overlay, .detail-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(5,4,16,.75); backdrop-filter: blur(16px); }
+.modal-card { width: 100%; max-width: 460px; background: linear-gradient(160deg, rgba(20,17,48,.85), rgba(14,12,32,.85)); border: 1px solid var(--line-2); border-radius: var(--r, 14px); padding: 24px; box-shadow: 0 0 0 1px rgba(124,108,255,.12), 0 20px 60px -12px rgba(0,0,0,.5); backdrop-filter: blur(12px); }
+.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
+.modal-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--tx); font-family: 'Space Grotesk', sans-serif; }
+.modal-close, .detail-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--tx-3); cursor: pointer; border-radius: 6px; transition: background .15s, color .15s; }
+.modal-close { font-size: 20px; }
+.modal-close:hover, .detail-close:hover { background: rgba(124,108,255,.10); color: var(--tx); }
+.modal-form { display: flex; flex-direction: column; gap: 14px; }
+.field { display: flex; flex-direction: column; gap: 5px; flex: 1; }
+.field label, .sidebar-field span { font-size: 10.5px; font-weight: 600; color: var(--tx-2); text-transform: uppercase; letter-spacing: .04em; font-family: 'Manrope', sans-serif; }
+.req { color: var(--st-block); }
+.field-input { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: rgba(14,12,32,.5); color: var(--tx); font-size: 13px; font-family: 'Manrope', sans-serif; outline: none; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }
+.field-input:focus, .detail-title-input:focus, .detail-textarea:focus { border-color: var(--a-mid); box-shadow: 0 0 0 2px rgba(124,108,255,.15); }
+.field-textarea, .detail-textarea { resize: vertical; min-height: 60px; font-family: inherit; }
+.field-select { cursor: pointer; }
+.field-row { display: flex; gap: 12px; }
+.form-error, .detail-flash.error { color: var(--st-block); font-size: 11px; margin: 0; font-family: 'Manrope', sans-serif; }
+.detail-flash.success { color: #86efac; font-size: 11px; margin: 0; }
+.modal-actions, .detail-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+.btn-cancel { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: transparent; color: var(--tx-2); font-size: 12px; font-weight: 500; font-family: 'Manrope', sans-serif; cursor: pointer; transition: background .15s, color .15s; }
+.btn-cancel:hover { background: rgba(124,108,255,.08); color: var(--tx); }
+.btn-ghost { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: transparent; color: var(--tx-2); font-size: 12px; font-weight: 500; font-family: 'Manrope', sans-serif; cursor: pointer; transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 6px; }
+.btn-ghost:hover { background: rgba(124,108,255,.08); color: var(--tx); }
+.btn-submit { padding: 7px 18px; border: none; border-radius: var(--r-sm, 10px); background: var(--grad); color: #fff; font-size: 12px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: opacity .15s, transform .15s; box-shadow: var(--glow-purple); display: inline-flex; align-items: center; gap: 6px; }
+.btn-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
+.btn-submit:not(:disabled):hover { opacity: .85; transform: translateY(-1px); }
+.detail-panel { width: min(1120px, calc(100vw - 48px)); height: min(88vh, 860px); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(13,11,28,.97), rgba(10,9,24,.96)); border: 1px solid rgba(124,108,255,.18); border-radius: 22px; box-shadow: 0 28px 90px rgba(0,0,0,.45); overflow: hidden; }
+.detail-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
+.detail-breadcrumb { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
+.detail-content { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; flex: 1; }
+.detail-main { padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
+.detail-sidebar { padding: 24px; border-left: 1px solid var(--line); background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 14px; }
+.detail-title-block { display: flex; flex-direction: column; gap: 12px; }
+.detail-state-pill { width: fit-content; border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 700; letter-spacing: .03em; border: 1px solid transparent; }
+.detail-state-pill.is-backlog { color: #fde68a; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.25); }
+.detail-state-pill.is-progress { color: #86efac; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); }
+.detail-state-pill.is-delegated { color: #d8b4fe; background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.25); }
+.detail-state-pill.is-review { color: #fdba74; background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.25); }
+.detail-state-pill.is-blocked { color: #fda4af; background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.25); }
+.detail-state-pill.is-done { color: #86efac; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); }
+.detail-title-input { background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 0; color: var(--tx); font-family: 'Space Grotesk', sans-serif; font-size: 31px; font-weight: 700; letter-spacing: -0.03em; outline: none; }
+.detail-meta-row { display: flex; flex-wrap: wrap; gap: 14px; color: var(--tx-3); font-size: 11.5px; }
+.detail-meta-row span { display: inline-flex; align-items: center; gap: 5px; }
+.detail-section { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
+.detail-section-header, .sidebar-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--tx-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
+.detail-textarea { width: 100%; min-height: 180px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10,9,24,.55); color: var(--tx); padding: 14px; font-size: 14px; line-height: 1.6; outline: none; box-sizing: border-box; }
+.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
+.detail-stack, .activity-list { display: flex; flex-direction: column; gap: 10px; }
+.mini-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(10,9,24,.45); }
+.mini-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.mini-title { font-size: 13px; font-weight: 600; color: var(--tx); }
+.mini-state { font-size: 10px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .05em; }
+.mini-copy { margin: 8px 0 0; font-size: 11.5px; color: var(--tx-2); line-height: 1.5; }
+.activity-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: start; }
+.activity-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; background: linear-gradient(135deg, #8b5cf6, #3b82f6); box-shadow: 0 0 0 4px rgba(124,108,255,.12); }
+.activity-message { color: var(--tx); font-size: 12.5px; line-height: 1.45; }
+.activity-time { color: var(--tx-3); font-size: 10.5px; margin-top: 4px; }
+.sidebar-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: rgba(10,9,24,.45); }
+.sidebar-card.subtle { background: rgba(255,255,255,.02); }
+.sidebar-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
+.sidebar-field:last-child { margin-bottom: 0; }
+.slim { min-height: 38px; }
+.snapshot-list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
+.snapshot-list div { display: flex; justify-content: space-between; gap: 12px; }
+.snapshot-list dt { color: var(--tx-3); font-size: 11px; }
+.snapshot-list dd { margin: 0; color: var(--tx); font-size: 12px; text-align: right; }
+.board-columns::-webkit-scrollbar { height: 9px; }
+.board-columns::-webkit-scrollbar-thumb { background: rgba(124,108,255,.22); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
+.board-columns::-webkit-scrollbar-thumb:hover { background: rgba(124,108,255,.4); background-clip: padding-box; }
+.board-columns::-webkit-scrollbar-track { background: transparent; }
+@media (max-width: 1100px) { .detail-content { grid-template-columns: 1fr; } .detail-sidebar { border-left: none; border-top: 1px solid var(--line); } }
+@media (max-width: 860px) { .board-columns { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .col { min-width: 260px; } .detail-panel { width: 100vw; height: 100vh; border-radius: 0; } .detail-grid { grid-template-columns: 1fr; } .detail-main, .detail-sidebar { padding: 18px; } .detail-title-input { font-size: 24px; } }
 </style>
diff --git a/frontend/src/views/TaskDetailView.vue b/frontend/src/views/TaskDetailView.vue
new file mode 100644
index 0000000..64933be
--- /dev/null
+++ b/frontend/src/views/TaskDetailView.vue
@@ -0,0 +1,1109 @@
+<script setup lang="ts">
+/**
+ * TaskDetailView – URL-basierte Task-Detailansicht (V2)
+ *
+ * Galaxy-theme konsistent mit TaskBoardView, aber als eigene Route.
+ * Bietet:
+ * 1. URL-basierte Task-Details (/tasks/:id)
+ * 2. Verbesserte Kommentare/Aktivität (mit Typ + Timestamp)
+ * 3. Subtasks direkt anlegen/bearbeiten
+ */
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  ArrowLeft, Clock3, CalendarDays, ListChecks, Save, Plus,
+  X, Link2, MessageSquare, Trash2, CheckCircle, AlertCircle,
+} from '@lucide/vue'
+import { apiFetch } from '../services/api'
+
+/* ── Types ──────────────────────────────────── */
+interface TaskDto {
+  id: string
+  title: string
+  detail: string | null
+  source: string
+  state: string
+  priority: string
+  assignedTo: string | null
+  parentTaskId: string | null
+  dueDate: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+interface ActivityEntry {
+  id?: string
+  type?: string
+  message?: string
+  createdAt?: string
+  timestamp?: string
+}
+
+/* ── State ───────────────────────────────────── */
+const route = useRoute()
+const router = useRouter()
+const taskId = computed(() => route.params.id as string)
+
+const task = ref<TaskDto | null>(null)
+const loading = ref(true)
+const error = ref('')
+const saving = ref(false)
+const saveSuccess = ref(false)
+
+const children = ref<TaskDto[]>([])
+const activity = ref<ActivityEntry[]>([])
+const detailsLoading = ref(false)
+
+/* ── Edit Form ──────────────────────────────── */
+const form = reactive({
+  title: '',
+  detail: '',
+  state: 'Backlog',
+  priority: 'Medium',
+  assignedTo: '',
+  dueDate: '',
+})
+
+/* ── Subtask creation ───────────────────────── */
+const showNewSubtask = ref(false)
+const subtaskTitle = ref('')
+const subtaskDetail = ref('')
+const subtaskPriority = ref('Medium')
+const subtaskAssign = ref('')
+const creatingSubtask = ref(false)
+const subtaskError = ref('')
+
+/* ── Activity / Comments ────────────────────── */
+const newComment = ref('')
+const postingComment = ref(false)
+
+/* ── Delete state ───────────────────────────── */
+const deletingTask = ref('') // id of subtask being deleted
+
+/* ── Helpers ────────────────────────────────── */
+function statusLabel(state: string): string {
+  const map: Record<string, string> = {
+    'Backlog': 'Offen',
+    'In progress': 'In Bearbeitung',
+    'Delegated': 'Delegiert',
+    'Review': 'Review',
+    'Blocked': 'Blockiert',
+    'Done': 'Erledigt',
+  }
+  return map[state] || state
+}
+
+function statusClass(state: string): string {
+  const s = state.toLowerCase()
+  if (s === 'done') return 'is-done'
+  if (s === 'blocked') return 'is-blocked'
+  if (s === 'review') return 'is-review'
+  if (s === 'delegated') return 'is-delegated'
+  if (s === 'in progress') return 'is-progress'
+  return 'is-backlog'
+}
+
+function priorityColor(p: string): string {
+  const lower = p.toLowerCase()
+  if (lower === 'high') return '#f87171'
+  if (lower === 'low') return '#60a5fa'
+  return '#facc15'
+}
+
+function priorityLabel(p: string): string {
+  const lower = p.toLowerCase()
+  if (lower === 'high') return 'High'
+  if (lower === 'low') return 'Low'
+  return 'Med'
+}
+
+function formatDate(date?: string | null, withTime = false): string {
+  if (!date) return '—'
+  return new Date(date).toLocaleString('de-DE', withTime
+    ? { dateStyle: 'medium', timeStyle: 'short' }
+    : { dateStyle: 'medium' })
+}
+
+function toDateInput(date?: string | null): string {
+  if (!date) return ''
+  return new Date(date).toISOString().slice(0, 10)
+}
+
+/* ── API calls ───────────────────────────────── */
+async function loadTask() {
+  loading.value = true
+  error.value = ''
+  try {
+    const res = await apiFetch(`/api/dashboard/tasks/${taskId.value}`)
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const data: TaskDto = await res.json()
+    task.value = data
+    form.title = data.title
+    form.detail = data.detail ?? ''
+    form.state = data.state
+    form.priority = data.priority
+    form.assignedTo = data.assignedTo ?? ''
+    form.dueDate = toDateInput(data.dueDate)
+    await loadDetails()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Aufgabe konnte nicht geladen werden'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadDetails() {
+  detailsLoading.value = true
+  try {
+    const [childrenRes, activityRes] = await Promise.all([
+      apiFetch(`/api/dashboard/tasks/${taskId.value}/children`),
+      apiFetch(`/api/dashboard/tasks/${taskId.value}/activity`),
+    ])
+    if (childrenRes.ok) children.value = await childrenRes.json()
+    if (activityRes.ok) activity.value = await activityRes.json()
+  } catch {
+    // silent — partial load ok
+  } finally {
+    detailsLoading.value = false
+  }
+}
+
+async function saveTask() {
+  if (!task.value || !form.title.trim()) return
+  saving.value = true
+  saveSuccess.value = false
+  error.value = ''
+  try {
+    const res = await apiFetch(`/api/dashboard/tasks/${taskId.value}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        title: form.title.trim(),
+        detail: form.detail.trim() || null,
+        priority: form.priority,
+        assignedTo: form.assignedTo || null,
+        dueDate: form.dueDate || null,
+      }),
+    })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    // Also update state if changed
+    if (form.state !== task.value.state) {
+      const stateRes = await apiFetch(`/api/dashboard/tasks/${taskId.value}/status`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: form.state }),
+      })
+      if (!stateRes.ok) throw new Error('Status-Update fehlgeschlagen')
+    }
+    saveSuccess.value = true
+    await loadTask()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Speichern fehlgeschlagen'
+  } finally {
+    saving.value = false
+  }
+}
+
+async function createSubtask() {
+  if (!subtaskTitle.value.trim()) return
+  creatingSubtask.value = true
+  subtaskError.value = ''
+  try {
+    const res = await apiFetch('/api/dashboard/tasks', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        title: subtaskTitle.value.trim(),
+        detail: subtaskDetail.value.trim() || null,
+        priority: subtaskPriority.value,
+        assignedTo: subtaskAssign.value || null,
+        parentTaskId: taskId.value,
+        source: 'bao',
+      }),
+    })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    showNewSubtask.value = false
+    subtaskTitle.value = ''
+    subtaskDetail.value = ''
+    subtaskPriority.value = 'Medium'
+    subtaskAssign.value = ''
+    await loadDetails()
+  } catch (e) {
+    subtaskError.value = e instanceof Error ? e.message : 'Fehler beim Anlegen'
+  } finally {
+    creatingSubtask.value = false
+  }
+}
+
+async function updateSubtaskState(subtaskId: string, newState: string) {
+  try {
+    await apiFetch(`/api/dashboard/tasks/${subtaskId}/status`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ status: newState }),
+    })
+    await loadDetails()
+  } catch {
+    // silent
+  }
+}
+
+async function deleteSubtask(subtaskId: string) {
+  deletingTask.value = subtaskId
+  try {
+    await apiFetch(`/api/dashboard/tasks/${subtaskId}`, { method: 'DELETE' })
+    await loadDetails()
+  } catch {
+    // silent
+  } finally {
+    deletingTask.value = ''
+  }
+}
+
+async function postComment() {
+  if (!newComment.value.trim()) return
+  postingComment.value = true
+  try {
+    // Use activity endpoint to log a comment
+    await apiFetch(`/api/dashboard/tasks/${taskId.value}/activity`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        type: 'comment',
+        message: newComment.value.trim(),
+      }),
+    })
+    newComment.value = ''
+    await loadDetails()
+  } catch {
+    // silent
+  } finally {
+    postingComment.value = false
+  }
+}
+
+/* ── Lifecycle ───────────────────────────────── */
+watch(taskId, () => {
+  if (taskId.value) loadTask()
+}, { immediate: true })
+
+function goBack() {
+  router.push('/tasks')
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') goBack()
+}
+</script>
+
+<template>
+  <div class="detail-wrap">
+    <!-- Back -->
+    <button class="back-btn" @click="goBack">
+      <ArrowLeft :size="16" />
+      Zurück zum Board
+    </button>
+
+    <!-- Loading -->
+    <div v-if="loading" class="loading-state">
+      <div class="spinner"></div>
+      <span>Lade Aufgabe…</span>
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="error-state">
+      <AlertCircle :size="32" />
+      <p>{{ error }}</p>
+      <button class="btn-primary" @click="loadTask">Erneut versuchen</button>
+    </div>
+
+    <!-- Task Detail -->
+    <template v-else-if="task">
+      <div class="detail-header">
+        <div class="detail-meta-top">
+          <span class="state-badge" :class="statusClass(task.state)">{{ statusLabel(task.state) }}</span>
+          <span class="meta-chip" v-if="task.source">Quelle: {{ task.source }}</span>
+          <span class="meta-chip">{{ task.priority }} Priorität</span>
+        </div>
+      </div>
+
+      <div class="detail-body">
+        <!-- Main Column -->
+        <div class="detail-main">
+          <input v-model="form.title" class="title-input" maxlength="240" placeholder="Titel der Aufgabe" />
+
+          <div class="meta-row">
+            <span>
+              <Clock3 :size="13" />
+              Erstellt {{ formatDate(task.createdAt) }}
+            </span>
+            <span>
+              <CalendarDays :size="13" />
+              Aktualisiert {{ formatDate(task.updatedAt, true) }}
+            </span>
+          </div>
+
+          <!-- Description -->
+          <section class="section-card">
+            <div class="section-head">Beschreibung</div>
+            <textarea
+              v-model="form.detail"
+              class="detail-textarea"
+              rows="8"
+              placeholder="Kontext, Akzeptanzkriterien, Notizen…"
+            ></textarea>
+          </section>
+
+          <!-- Subtasks -->
+          <section class="section-card">
+            <div class="section-head">
+              <ListChecks :size="14" />
+              Unteraufgaben
+              <button class="btn-icon-sm" @click="showNewSubtask = !showNewSubtask" title="Unteraufgabe anlegen">
+                <Plus :size="14" />
+              </button>
+            </div>
+
+            <div v-if="showNewSubtask" class="new-subtask-form">
+              <input v-model="subtaskTitle" class="galaxy-input" placeholder="Unteraufgabe Titel" maxlength="240" />
+              <textarea v-model="subtaskDetail" class="galaxy-input mini-textarea" placeholder="Details (optional)" rows="2"></textarea>
+              <div class="subtask-form-row">
+                <select v-model="subtaskPriority" class="galaxy-input galaxy-select narrow">
+                  <option value="High">High</option>
+                  <option value="Medium">Medium</option>
+                  <option value="Low">Low</option>
+                </select>
+                <input v-model="subtaskAssign" class="galaxy-input narrow" placeholder="Zuständig (bao, iris…)" />
+                <button class="btn-primary btn-sm" @click="createSubtask" :disabled="creatingSubtask">
+                  {{ creatingSubtask ? 'Erstelle…' : 'Anlegen' }}
+                </button>
+              </div>
+              <p v-if="subtaskError" class="msg error">{{ subtaskError }}</p>
+            </div>
+
+            <div v-if="detailsLoading" class="loading-mini">
+              <div class="spinner-sm"></div>
+              Lade Unteraufgaben…
+            </div>
+            <div v-else-if="children.length === 0" class="empty-section">
+              <p>Keine Unteraufgaben vorhanden.</p>
+              <p class="hint">Klicke auf <Plus :size="12" /> um eine anzulegen.</p>
+            </div>
+            <div v-else class="subtask-list">
+              <div v-for="child in children" :key="child.id" class="subtask-row">
+                <div class="subtask-info">
+                  <div class="subtask-title">{{ child.title }}</div>
+                  <p v-if="child.detail" class="subtask-detail">{{ child.detail }}</p>
+                </div>
+                <div class="subtask-actions">
+                  <select
+                    :value="child.state"
+                    class="state-select-mini"
+                    @change="updateSubtaskState(child.id, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="Backlog">Offen</option>
+                    <option value="In progress">In Arbeit</option>
+                    <option value="Done">Erledigt</option>
+                  </select>
+                  <button
+                    class="btn-icon-sm danger"
+                    @click="deleteSubtask(child.id)"
+                    :disabled="deletingTask === child.id"
+                    title="Löschen"
+                  >
+                    <Trash2 :size="13" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Activity / Comments -->
+          <section class="section-card">
+            <div class="section-head">
+              <MessageSquare :size="14" />
+              Aktivität &amp; Kommentare
+            </div>
+
+            <div class="comment-input-row">
+              <input
+                v-model="newComment"
+                class="galaxy-input"
+                placeholder="Kommentar oder Notiz hinzufügen…"
+                @keydown.enter.prevent="postComment"
+              />
+              <button class="btn-primary btn-sm" @click="postComment" :disabled="postingComment || !newComment.trim()">
+                Senden
+              </button>
+            </div>
+
+            <div v-if="detailsLoading" class="loading-mini">
+              <div class="spinner-sm"></div>
+              Lade Aktivität…
+            </div>
+            <div v-else-if="activity.length === 0" class="empty-section">
+              Noch keine Aktivität vorhanden.
+            </div>
+            <div v-else class="activity-list">
+              <div v-for="(entry, idx) in activity" :key="entry.id ?? idx" class="activity-item">
+                <div class="activity-icon">
+                  <MessageSquare v-if="entry.type === 'comment'" :size="12" />
+                  <Link2 v-else :size="12" />
+                </div>
+                <div class="activity-body">
+                  <div class="activity-msg">{{ entry.message ?? '—' }}</div>
+                  <div class="activity-time">{{ formatDate(entry.createdAt ?? entry.timestamp ?? null, true) }}</div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <!-- Sidebar -->
+        <div class="detail-sidebar">
+          <section class="sidebar-card">
+            <div class="sidebar-head">Eigenschaften</div>
+            <label class="sidebar-field">
+              <span>Status</span>
+              <select v-model="form.state" class="galaxy-input galaxy-select">
+                <option value="Backlog">Offen</option>
+                <option value="In progress">In Bearbeitung</option>
+                <option value="Delegated">Delegiert</option>
+                <option value="Review">Review</option>
+                <option value="Blocked">Blockiert</option>
+                <option value="Done">Erledigt</option>
+              </select>
+            </label>
+            <label class="sidebar-field">
+              <span>Priorität</span>
+              <select v-model="form.priority" class="galaxy-input galaxy-select">
+                <option value="High">High</option>
+                <option value="Medium">Medium</option>
+                <option value="Low">Low</option>
+              </select>
+            </label>
+            <label class="sidebar-field">
+              <span>Zuständig</span>
+              <select v-model="form.assignedTo" class="galaxy-input galaxy-select">
+                <option value="">Nicht zugewiesen</option>
+                <option value="bao">👤 Bao</option>
+                <option value="iris">🤖 Iris</option>
+                <option value="programmer">🛠 Programmer</option>
+                <option value="reviewer">🔎 Reviewer</option>
+                <option value="architekt">🏛 Architekt</option>
+              </select>
+            </label>
+            <label class="sidebar-field">
+              <span>Fällig am</span>
+              <input v-model="form.dueDate" type="date" class="galaxy-input" />
+            </label>
+          </section>
+
+          <section class="sidebar-card subtle">
+            <div class="sidebar-head">Informationen</div>
+            <dl class="info-list">
+              <div><dt>ID</dt><dd>#{{ task.id.slice(0, 8) }}</dd></div>
+              <div><dt>Quelle</dt><dd>{{ task.source || '—' }}</dd></div>
+              <div><dt>Erstellt</dt><dd>{{ formatDate(task.createdAt) }}</dd></div>
+              <div><dt>Geändert</dt><dd>{{ formatDate(task.updatedAt, true) }}</dd></div>
+            </dl>
+          </section>
+
+          <p v-if="error" class="msg error">{{ error }}</p>
+          <p v-if="saveSuccess" class="msg success">
+            <CheckCircle :size="14" /> Gespeichert.
+          </p>
+
+          <div class="detail-actions">
+            <button class="btn-ghost" @click="goBack">Schließen</button>
+            <button class="btn-primary" :disabled="saving || !form.title.trim()" @click="saveTask">
+              <Save :size="14" />
+              {{ saving ? 'Speichert…' : 'Speichern' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.detail-wrap {
+  width: 100%;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 20px;
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Back ───────────────────────────────────── */
+.back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid rgba(150, 140, 255, 0.12);
+  border-radius: 10px;
+  background: transparent;
+  color: #a8a3d6;
+  font-size: 12px;
+  font-family: 'Manrope', sans-serif;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  margin-bottom: 20px;
+}
+
+.back-btn:hover {
+  background: rgba(124, 108, 255, 0.08);
+  color: #ece9ff;
+}
+
+/* ── Loading / Error ────────────────────────── */
+.loading-state, .error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 80px 20px;
+  color: #6f6aa0;
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2.5px solid rgba(150, 140, 255, 0.15);
+  border-top-color: #7c6cff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+.spinner-sm {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(150, 140, 255, 0.15);
+  border-top-color: #7c6cff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.error-state p {
+  font-size: 14px;
+  margin: 0;
+  color: #fda4af;
+}
+
+/* ── Detail Header ──────────────────────────── */
+.detail-header {
+  margin-bottom: 20px;
+}
+
+.detail-meta-top {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.state-badge {
+  display: inline-block;
+  padding: 5px 12px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  border: 1px solid transparent;
+}
+
+.state-badge.is-backlog { color: #fde68a; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.25); }
+.state-badge.is-progress { color: #86efac; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); }
+.state-badge.is-delegated { color: #d8b4fe; background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.25); }
+.state-badge.is-review { color: #fdba74; background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.25); }
+.state-badge.is-blocked { color: #fda4af; background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.25); }
+.state-badge.is-done { color: #86efac; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); }
+
+.meta-chip {
+  font-size: 10px;
+  color: #6f6aa0;
+  background: rgba(10, 9, 24, 0.35);
+  padding: 3px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(150, 140, 255, 0.08);
+}
+
+/* ── Detail Body Grid ────────────────────────── */
+.detail-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 24px;
+  align-items: start;
+}
+
+.detail-main {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.title-input {
+  width: 100%;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 4px 0;
+  color: #ece9ff;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.title-input:focus {
+  border-bottom-color: rgba(124, 108, 255, 0.3);
+}
+
+.meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 12px;
+  color: #6f6aa0;
+}
+
+.meta-row span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/* ── Sections ──────────────────────────── */
+.section-card {
+  border: 1px solid rgba(150, 140, 255, 0.10);
+  border-radius: 16px;
+  padding: 18px;
+  background: rgba(10, 9, 24, 0.25);
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+  color: #a8a3d6;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.section-head button {
+  margin-left: auto;
+}
+
+.detail-textarea {
+  width: 100%;
+  min-height: 160px;
+  padding: 14px;
+  border: 1px solid rgba(150, 140, 255, 0.10);
+  border-radius: 12px;
+  background: rgba(10, 9, 24, 0.45);
+  color: #ece9ff;
+  font-size: 14px;
+  line-height: 1.6;
+  font-family: 'Manrope', sans-serif;
+  outline: none;
+  resize: vertical;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+
+.detail-textarea:focus {
+  border-color: rgba(124, 108, 255, 0.3);
+}
+
+/* ── Subtasks ──────────────────────────── */
+.new-subtask-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  margin-bottom: 14px;
+  border: 1px solid rgba(124, 108, 255, 0.15);
+  border-radius: 12px;
+  background: rgba(124, 108, 255, 0.04);
+}
+
+.subtask-form-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.subtask-form-row .narrow {
+  flex: 1;
+  min-width: 0;
+}
+
+.mini-textarea {
+  resize: vertical;
+}
+
+.subtask-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.subtask-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: rgba(10, 9, 24, 0.35);
+  border: 1px solid rgba(150, 140, 255, 0.06);
+  transition: background 0.15s;
+}
+
+.subtask-row:hover {
+  background: rgba(10, 9, 24, 0.5);
+  border-color: rgba(150, 140, 255, 0.1);
+}
+
+.subtask-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.subtask-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #ece9ff;
+}
+
+.subtask-detail {
+  margin: 4px 0 0;
+  font-size: 11.5px;
+  color: #6f6aa0;
+  line-height: 1.4;
+}
+
+.subtask-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.state-select-mini {
+  padding: 4px 8px;
+  border: 1px solid rgba(150, 140, 255, 0.12);
+  border-radius: 6px;
+  background: rgba(10, 9, 24, 0.5);
+  color: #a8a3d6;
+  font-size: 10px;
+  font-family: 'Manrope', sans-serif;
+  cursor: pointer;
+  outline: none;
+}
+
+.state-select-mini option {
+  background: #141130;
+  color: #ece9ff;
+}
+
+.loading-mini {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  color: #6f6aa0;
+  font-size: 12px;
+}
+
+.empty-section {
+  padding: 20px;
+  text-align: center;
+  color: #6f6aa0;
+  font-size: 12px;
+}
+
+.empty-section p { margin: 0; }
+.empty-section .hint {
+  margin-top: 6px;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+/* ── Activity / Comments ─────────────────── */
+.comment-input-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.comment-input-row .galaxy-input {
+  flex: 1;
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.activity-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: rgba(10, 9, 24, 0.2);
+  border: 1px solid rgba(150, 140, 255, 0.04);
+}
+
+.activity-icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  background: rgba(124, 108, 255, 0.08);
+  color: #7c6cff;
+  flex-shrink: 0;
+}
+
+.activity-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.activity-msg {
+  font-size: 12.5px;
+  color: #a8a3d6;
+  line-height: 1.4;
+}
+
+.activity-time {
+  font-size: 10px;
+  color: #6f6aa0;
+  margin-top: 3px;
+}
+
+/* ── Sidebar ──────────────────────────── */
+.detail-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  position: sticky;
+  top: 20px;
+}
+
+.sidebar-card {
+  border: 1px solid rgba(150, 140, 255, 0.10);
+  border-radius: 16px;
+  padding: 18px;
+  background: rgba(10, 9, 24, 0.35);
+}
+
+.sidebar-card.subtle {
+  background: rgba(255, 255, 255, 0.01);
+}
+
+.sidebar-head {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #a8a3d6;
+  margin-bottom: 14px;
+}
+
+.sidebar-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.sidebar-field:last-child {
+  margin-bottom: 0;
+}
+
+.sidebar-field span {
+  font-size: 10px;
+  font-weight: 600;
+  color: #6f6aa0;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0;
+}
+
+.info-list div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.info-list dt {
+  color: #6f6aa0;
+  font-size: 11px;
+}
+
+.info-list dd {
+  margin: 0;
+  color: #a8a3d6;
+  font-size: 11.5px;
+  text-align: right;
+}
+
+.detail-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+/* ── Shared Components ───────────────────── */
+.galaxy-input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid rgba(150, 140, 255, 0.12);
+  border-radius: 10px;
+  background: rgba(10, 9, 24, 0.55);
+  color: #ece9ff;
+  font-size: 13.5px;
+  font-family: 'Manrope', sans-serif;
+  outline: none;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.galaxy-input:focus {
+  border-color: rgba(124, 108, 255, 0.5);
+  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.12);
+}
+
+.galaxy-select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6aa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 36px;
+}
+
+.galaxy-select option {
+  background: #141130;
+  color: #ece9ff;
+}
+
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 9px 16px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #4f7cff, #7c6cff, #b557f6);
+  color: #fff;
+  font-size: 12.5px;
+  font-weight: 600;
+  font-family: 'Manrope', sans-serif;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.btn-primary:hover:not(:disabled) { opacity: 0.9; }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 11px;
+  border-radius: 8px;
+}
+
+.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid rgba(150, 140, 255, 0.12);
+  border-radius: 8px;
+  background: transparent;
+  color: #a8a3d6;
+  font-size: 11px;
+  font-family: 'Manrope', sans-serif;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-ghost:hover { background: rgba(124, 108, 255, 0.08); }
+
+.btn-icon-sm {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 7px;
+  background: rgba(124, 108, 255, 0.06);
+  color: #a8a3d6;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.btn-icon-sm:hover { background: rgba(124, 108, 255, 0.12); color: #ece9ff; }
+.btn-icon-sm.danger:hover { background: rgba(244, 63, 94, 0.12); color: #fda4af; }
+.btn-icon-sm:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.msg {
+  margin: 0;
+  font-size: 11px;
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+
+.msg.error { background: rgba(244, 63, 94, 0.08); border: 1px solid rgba(244, 63, 94, 0.15); color: #fda4af; }
+.msg.success { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.15); color: #86efac; display: flex; align-items: center; gap: 6px; }
+
+/* ── Responsive ──────────────────────────────── */
+@media (max-width: 860px) {
+  .detail-body {
+    grid-template-columns: 1fr;
+  }
+  .detail-sidebar {
+    position: static;
+  }
+  .title-input {
+    font-size: 22px;
+  }
+}
+</style>