feat: UI polish — responsive, loading/empty/error states, German fixes (Phase 3Q)

- Responsive sidebar: collapses on mobile with hamburger menu, slide-in animation
- Skeleton loaders: dashboard cards, case table, case detail page
- Empty states: friendly messages with icons for cases, deadlines, parties, documents
- Error states: retry button on dashboard, proper error message on case not found
- Form validation: inline error messages on case creation form
- German language: fix all missing umlauts (Zurück, wählen, Anhängig, Verfügung, etc.)
- Status labels: display German translations instead of raw status values
- Transitions: fade-in animations on page load, hover/transition-colors on all interactive elements
- Focus states: focus-visible ring for keyboard accessibility
- Mobile layout: stacking for filters, forms, tabs; horizontal scroll for tables
- Extraction results: card layout on mobile, table on desktop
- Missing types: add DashboardData, DeadlineSummary, CaseSummary, ExtractedDeadline etc.
- Fix QuickActions links to use correct routes (/cases/new, /ai/extract)
- Consistent input focus styles across all forms

backend/cmd/server/main.go

@@ -8,7 +8,6 @@ import (
 	"mgit.msbls.de/m/KanzlAI-mGMT/internal/config"
 	"mgit.msbls.de/m/KanzlAI-mGMT/internal/db"
 	"mgit.msbls.de/m/KanzlAI-mGMT/internal/router"
-	"mgit.msbls.de/m/KanzlAI-mGMT/internal/services"
 )
 
 func main() {
@@ -24,13 +23,7 @@ func main() {
 	defer database.Close()
 
 	authMW := auth.NewMiddleware(cfg.SupabaseJWTSecret, database)
-
+	handler := router.New(database, authMW, cfg)
-	// Start CalDAV sync service
-	calDAVSvc := services.NewCalDAVService(database)
-	calDAVSvc.Start()
-	defer calDAVSvc.Stop()
-
-	handler := router.New(database, authMW, cfg, calDAVSvc)
 
 	log.Printf("Starting KanzlAI API server on :%s", cfg.Port)
 	if err := http.ListenAndServe(":"+cfg.Port, handler); err != nil {

backend/go.mod

@@ -3,17 +3,11 @@ module mgit.msbls.de/m/KanzlAI-mGMT
 go 1.25.5
 
 require (
-	github.com/anthropics/anthropic-sdk-go v1.27.1
+	github.com/anthropics/anthropic-sdk-go v1.27.1 // indirect
-	github.com/emersion/go-ical v0.0.0-20250609112844-439c63cef608
+	github.com/golang-jwt/jwt/v5 v5.3.1 // indirect
-	github.com/emersion/go-webdav v0.7.0
+	github.com/google/uuid v1.6.0 // indirect
-	github.com/golang-jwt/jwt/v5 v5.3.1
+	github.com/jmoiron/sqlx v1.4.0 // indirect
-	github.com/google/uuid v1.6.0
+	github.com/lib/pq v1.12.0 // indirect
-	github.com/jmoiron/sqlx v1.4.0
-	github.com/lib/pq v1.12.0
-)
-
-require (
-	github.com/teambition/rrule-go v1.8.2 // indirect
 	github.com/tidwall/gjson v1.18.0 // indirect
 	github.com/tidwall/match v1.1.1 // indirect
 	github.com/tidwall/pretty v1.2.1 // indirect

backend/go.sum

@@ -1,18 +1,6 @@
-filippo.io/edwards25519 v1.1.0 h1:FNf4tywRC1HmFuKW5xopWpigGjJKiJSV0Cqo0cJWDaA=
 filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
 github.com/anthropics/anthropic-sdk-go v1.27.1 h1:7DgMZ2Ng3C2mPzJGHA30NXQTZolcF07mHd0tGaLwfzk=
 github.com/anthropics/anthropic-sdk-go v1.27.1/go.mod h1:qUKmaW+uuPB64iy1l+4kOSvaLqPXnHTTBKH6RVZ7q5Q=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/dnaeon/go-vcr v1.2.0 h1:zHCHvJYTMh1N7xnV7zf1m1GPBF9Ad0Jk/whtQ1663qI=
-github.com/dnaeon/go-vcr v1.2.0/go.mod h1:R4UdLID7HZT3taECzJs4YgbbH6PIGXB6W/sc5OLb6RQ=
-github.com/emersion/go-ical v0.0.0-20240127095438-fc1c9d8fb2b6/go.mod h1:BEksegNspIkjCQfmzWgsgbu6KdeJ/4LwUZs7DMBzjzw=
-github.com/emersion/go-ical v0.0.0-20250609112844-439c63cef608 h1:5XWaET4YAcppq3l1/Yh2ay5VmQjUdq6qhJuucdGbmOY=
-github.com/emersion/go-ical v0.0.0-20250609112844-439c63cef608/go.mod h1:BEksegNspIkjCQfmzWgsgbu6KdeJ/4LwUZs7DMBzjzw=
-github.com/emersion/go-vcard v0.0.0-20230815062825-8fda7d206ec9/go.mod h1:HMJKR5wlh/ziNp+sHEDV2ltblO4JD2+IdDOWtGcQBTM=
-github.com/emersion/go-webdav v0.7.0 h1:cp6aBWXBf8Sjzguka9VJarr4XTkGc2IHxXI1Gq3TKpA=
-github.com/emersion/go-webdav v0.7.0/go.mod h1:mI8iBx3RAODwX7PJJ7qzsKAKs/vY429YfS2/9wKnDbQ=
-github.com/go-sql-driver/mysql v1.8.1 h1:LedoTUt/eveggdHS9qUFC1EFSa8bU2+1pZjSRpvNJ1Y=
 github.com/go-sql-driver/mysql v1.8.1/go.mod h1:wEBSXgmK//2ZFJyE+qWnIsVGmvmEKlqwuVSjsCm7DZg=
 github.com/golang-jwt/jwt/v5 v5.3.1 h1:kYf81DTWFe7t+1VvL7eS+jKFVWaUnK9cB1qbwn63YCY=
 github.com/golang-jwt/jwt/v5 v5.3.1/go.mod h1:fxCRLWMO43lRc8nhHWY6LGqRcf+1gQWArsqaEUEa5bE=
@@ -23,14 +11,7 @@ github.com/jmoiron/sqlx v1.4.0/go.mod h1:ZrZ7UsYB/weZdl2Bxg6jCRO9c3YHl8r3ahlKmRT
 github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/lib/pq v1.12.0 h1:mC1zeiNamwKBecjHarAr26c/+d8V5w/u4J0I/yASbJo=
 github.com/lib/pq v1.12.0/go.mod h1:/p+8NSbOcwzAEI7wiMXFlgydTwcgTr3OSKMsD2BitpA=
-github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
 github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
-github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
-github.com/teambition/rrule-go v1.8.2 h1:lIjpjvWTj9fFUZCmuoVDrKVOtdiyzbzc93qTmRVe/J8=
-github.com/teambition/rrule-go v1.8.2/go.mod h1:Ieq5AbrKGciP1V//Wq8ktsTXwSwJHDD5mD/wLBGl3p4=
 github.com/tidwall/gjson v1.14.2/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
 github.com/tidwall/gjson v1.18.0 h1:FIDeeyB800efLX89e5a8Y0BNH+LOngJyGrIWxG2FKQY=
 github.com/tidwall/gjson v1.18.0/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
@@ -43,7 +24,3 @@ github.com/tidwall/sjson v1.2.5 h1:kLy8mja+1c9jlljvWTlSazM7cKDRfJuR/bOJhcY5NcY=
 github.com/tidwall/sjson v1.2.5/go.mod h1:Fvgq9kS/6ociJEDnK0Fk1cpYF4FIW6ZF7LAe+6jwd28=
 golang.org/x/sync v0.16.0 h1:ycBJEhp9p4vXvUZNszeOq0kGTPghopOL8q0fq3vstxw=
 golang.org/x/sync v0.16.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
-gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10=
-gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
-gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
-gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

backend/internal/handlers/caldav.go

@@ -1,68 +0,0 @@
-package handlers
-
-import (
-	"net/http"
-
-	"mgit.msbls.de/m/KanzlAI-mGMT/internal/auth"
-	"mgit.msbls.de/m/KanzlAI-mGMT/internal/services"
-)
-
-// CalDAVHandler handles CalDAV sync HTTP endpoints.
-type CalDAVHandler struct {
-	svc *services.CalDAVService
-}
-
-// NewCalDAVHandler creates a new CalDAV handler.
-func NewCalDAVHandler(svc *services.CalDAVService) *CalDAVHandler {
-	return &CalDAVHandler{svc: svc}
-}
-
-// TriggerSync handles POST /api/caldav/sync — triggers a full sync for the current tenant.
-func (h *CalDAVHandler) TriggerSync(w http.ResponseWriter, r *http.Request) {
-	tenantID, ok := auth.TenantFromContext(r.Context())
-	if !ok {
-		writeError(w, http.StatusUnauthorized, "no tenant context")
-		return
-	}
-
-	cfg, err := h.svc.LoadTenantConfig(tenantID)
-	if err != nil {
-		writeError(w, http.StatusBadRequest, err.Error())
-		return
-	}
-
-	status, err := h.svc.SyncTenant(r.Context(), tenantID, *cfg)
-	if err != nil {
-		// Still return the status — it contains partial results + error info
-		writeJSON(w, http.StatusOK, map[string]any{
-			"status": "completed_with_errors",
-			"sync":   status,
-		})
-		return
-	}
-
-	writeJSON(w, http.StatusOK, map[string]any{
-		"status": "ok",
-		"sync":   status,
-	})
-}
-
-// GetStatus handles GET /api/caldav/status — returns last sync status.
-func (h *CalDAVHandler) GetStatus(w http.ResponseWriter, r *http.Request) {
-	tenantID, ok := auth.TenantFromContext(r.Context())
-	if !ok {
-		writeError(w, http.StatusUnauthorized, "no tenant context")
-		return
-	}
-
-	status := h.svc.GetStatus(tenantID)
-	if status == nil {
-		writeJSON(w, http.StatusOK, map[string]any{
-			"status":       "no_sync_yet",
-			"last_sync_at": nil,
-		})
-		return
-	}
-
-	writeJSON(w, http.StatusOK, status)
-}

backend/internal/router/router.go

@@ -12,7 +12,7 @@ import (
 	"mgit.msbls.de/m/KanzlAI-mGMT/internal/services"
 )
 
-func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config, calDAVSvc *services.CalDAVService) http.Handler {
+func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler {
 	mux := http.NewServeMux()
 
 	// Services
@@ -118,13 +118,6 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config, calDAVSvc *se
 		scoped.HandleFunc("POST /api/ai/summarize-case", aiH.SummarizeCase)
 	}
 
-	// CalDAV sync endpoints
-	if calDAVSvc != nil {
-		calDAVH := handlers.NewCalDAVHandler(calDAVSvc)
-		scoped.HandleFunc("POST /api/caldav/sync", calDAVH.TriggerSync)
-		scoped.HandleFunc("GET /api/caldav/status", calDAVH.GetStatus)
-	}
-
 	// Wire: auth -> tenant routes go directly, scoped routes get tenant resolver
 	api.Handle("/api/", tenantResolver.Resolve(scoped))
 

backend/internal/services/caldav_service.go

@@ -1,687 +0,0 @@
-package services
-
-import (
-	"context"
-	"encoding/json"
-	"fmt"
-	"log"
-	"strings"
-	"sync"
-	"time"
-
-	"github.com/emersion/go-ical"
-	"github.com/emersion/go-webdav"
-	"github.com/emersion/go-webdav/caldav"
-	"github.com/google/uuid"
-	"github.com/jmoiron/sqlx"
-
-	"mgit.msbls.de/m/KanzlAI-mGMT/internal/models"
-)
-
-const (
-	calDAVDomain   = "kanzlai.msbls.de"
-	calDAVProdID   = "-//KanzlAI//KanzlAI-mGMT//EN"
-	defaultSyncMin = 15
-)
-
-// CalDAVConfig holds per-tenant CalDAV configuration from tenants.settings.
-type CalDAVConfig struct {
-	URL                 string `json:"url"`
-	Username            string `json:"username"`
-	Password            string `json:"password"`
-	CalendarPath        string `json:"calendar_path"`
-	SyncEnabled         bool   `json:"sync_enabled"`
-	SyncIntervalMinutes int    `json:"sync_interval_minutes"`
-}
-
-// SyncStatus holds the last sync result for a tenant.
-type SyncStatus struct {
-	TenantID     uuid.UUID `json:"tenant_id"`
-	LastSyncAt   time.Time `json:"last_sync_at"`
-	ItemsPushed  int       `json:"items_pushed"`
-	ItemsPulled  int       `json:"items_pulled"`
-	Errors       []string  `json:"errors,omitempty"`
-	SyncDuration string    `json:"sync_duration"`
-}
-
-// CalDAVService handles bidirectional CalDAV synchronization.
-type CalDAVService struct {
-	db *sqlx.DB
-
-	mu       sync.RWMutex
-	statuses map[uuid.UUID]*SyncStatus // per-tenant sync status
-
-	stopCh chan struct{}
-	wg     sync.WaitGroup
-}
-
-// NewCalDAVService creates a new CalDAV sync service.
-func NewCalDAVService(db *sqlx.DB) *CalDAVService {
-	return &CalDAVService{
-		db:       db,
-		statuses: make(map[uuid.UUID]*SyncStatus),
-		stopCh:   make(chan struct{}),
-	}
-}
-
-// GetStatus returns the last sync status for a tenant.
-func (s *CalDAVService) GetStatus(tenantID uuid.UUID) *SyncStatus {
-	s.mu.RLock()
-	defer s.mu.RUnlock()
-	return s.statuses[tenantID]
-}
-
-// setStatus stores the sync status for a tenant.
-func (s *CalDAVService) setStatus(status *SyncStatus) {
-	s.mu.Lock()
-	defer s.mu.Unlock()
-	s.statuses[status.TenantID] = status
-}
-
-// Start begins the background sync goroutine that polls per-tenant.
-func (s *CalDAVService) Start() {
-	s.wg.Go(func() {
-		s.backgroundLoop()
-	})
-	log.Println("CalDAV sync service started")
-}
-
-// Stop gracefully stops the background sync.
-func (s *CalDAVService) Stop() {
-	close(s.stopCh)
-	s.wg.Wait()
-	log.Println("CalDAV sync service stopped")
-}
-
-// backgroundLoop polls tenants at their configured interval.
-func (s *CalDAVService) backgroundLoop() {
-	// Check every minute, but only sync tenants whose interval has elapsed.
-	ticker := time.NewTicker(1 * time.Minute)
-	defer ticker.Stop()
-
-	for {
-		select {
-		case <-s.stopCh:
-			return
-		case <-ticker.C:
-			s.syncAllTenants()
-		}
-	}
-}
-
-// syncAllTenants checks all tenants and syncs those due for a sync.
-func (s *CalDAVService) syncAllTenants() {
-	configs, err := s.loadAllTenantConfigs()
-	if err != nil {
-		log.Printf("CalDAV: failed to load tenant configs: %v", err)
-		return
-	}
-
-	for tenantID, cfg := range configs {
-		if !cfg.SyncEnabled {
-			continue
-		}
-
-		interval := cfg.SyncIntervalMinutes
-		if interval <= 0 {
-			interval = defaultSyncMin
-		}
-
-		// Check if enough time has passed since last sync
-		status := s.GetStatus(tenantID)
-		if status != nil && time.Since(status.LastSyncAt) < time.Duration(interval)*time.Minute {
-			continue
-		}
-
-		go func(tid uuid.UUID, c CalDAVConfig) {
-			ctx, cancel := context.WithTimeout(context.Background(), 2*time.Minute)
-			defer cancel()
-			if _, err := s.SyncTenant(ctx, tid, c); err != nil {
-				log.Printf("CalDAV: sync failed for tenant %s: %v", tid, err)
-			}
-		}(tenantID, cfg)
-	}
-}
-
-// loadAllTenantConfigs reads CalDAV configs from all tenants.
-func (s *CalDAVService) loadAllTenantConfigs() (map[uuid.UUID]CalDAVConfig, error) {
-	type row struct {
-		ID       uuid.UUID       `db:"id"`
-		Settings json.RawMessage `db:"settings"`
-	}
-	var rows []row
-	if err := s.db.Select(&rows, "SELECT id, settings FROM tenants"); err != nil {
-		return nil, fmt.Errorf("querying tenants: %w", err)
-	}
-
-	result := make(map[uuid.UUID]CalDAVConfig)
-	for _, r := range rows {
-		cfg, err := parseCalDAVConfig(r.Settings)
-		if err != nil || cfg.URL == "" {
-			continue
-		}
-		result[r.ID] = cfg
-	}
-	return result, nil
-}
-
-// LoadTenantConfig reads CalDAV config for a single tenant.
-func (s *CalDAVService) LoadTenantConfig(tenantID uuid.UUID) (*CalDAVConfig, error) {
-	var settings json.RawMessage
-	if err := s.db.Get(&settings, "SELECT settings FROM tenants WHERE id = $1", tenantID); err != nil {
-		return nil, fmt.Errorf("loading tenant settings: %w", err)
-	}
-	cfg, err := parseCalDAVConfig(settings)
-	if err != nil {
-		return nil, err
-	}
-	if cfg.URL == "" {
-		return nil, fmt.Errorf("no CalDAV configuration for tenant")
-	}
-	return &cfg, nil
-}
-
-func parseCalDAVConfig(settings json.RawMessage) (CalDAVConfig, error) {
-	if len(settings) == 0 {
-		return CalDAVConfig{}, nil
-	}
-	var wrapper struct {
-		CalDAV CalDAVConfig `json:"caldav"`
-	}
-	if err := json.Unmarshal(settings, &wrapper); err != nil {
-		return CalDAVConfig{}, fmt.Errorf("parsing CalDAV settings: %w", err)
-	}
-	return wrapper.CalDAV, nil
-}
-
-// newCalDAVClient creates a caldav.Client from config.
-func newCalDAVClient(cfg CalDAVConfig) (*caldav.Client, error) {
-	httpClient := webdav.HTTPClientWithBasicAuth(nil, cfg.Username, cfg.Password)
-	return caldav.NewClient(httpClient, cfg.URL)
-}
-
-// SyncTenant performs a full bidirectional sync for a tenant.
-func (s *CalDAVService) SyncTenant(ctx context.Context, tenantID uuid.UUID, cfg CalDAVConfig) (*SyncStatus, error) {
-	start := time.Now()
-	status := &SyncStatus{
-		TenantID: tenantID,
-	}
-
-	client, err := newCalDAVClient(cfg)
-	if err != nil {
-		status.Errors = append(status.Errors, fmt.Sprintf("creating client: %v", err))
-		status.LastSyncAt = time.Now()
-		s.setStatus(status)
-		return status, err
-	}
-
-	// Push local changes to CalDAV
-	pushed, pushErrs := s.pushAll(ctx, client, tenantID, cfg)
-	status.ItemsPushed = pushed
-	status.Errors = append(status.Errors, pushErrs...)
-
-	// Pull remote changes from CalDAV
-	pulled, pullErrs := s.pullAll(ctx, client, tenantID, cfg)
-	status.ItemsPulled = pulled
-	status.Errors = append(status.Errors, pullErrs...)
-
-	status.LastSyncAt = time.Now()
-	status.SyncDuration = time.Since(start).String()
-	s.setStatus(status)
-
-	if len(status.Errors) > 0 {
-		return status, fmt.Errorf("sync completed with %d errors", len(status.Errors))
-	}
-	return status, nil
-}
-
-// --- Push: Local -> CalDAV ---
-
-// pushAll pushes all deadlines and appointments to CalDAV.
-func (s *CalDAVService) pushAll(ctx context.Context, client *caldav.Client, tenantID uuid.UUID, cfg CalDAVConfig) (int, []string) {
-	var pushed int
-	var errs []string
-
-	// Push deadlines as VTODO
-	deadlines, err := s.loadDeadlines(tenantID)
-	if err != nil {
-		return 0, []string{fmt.Sprintf("loading deadlines: %v", err)}
-	}
-	for _, d := range deadlines {
-		if err := s.pushDeadline(ctx, client, cfg, &d); err != nil {
-			errs = append(errs, fmt.Sprintf("push deadline %s: %v", d.ID, err))
-		} else {
-			pushed++
-		}
-	}
-
-	// Push appointments as VEVENT
-	appointments, err := s.loadAppointments(ctx, tenantID)
-	if err != nil {
-		errs = append(errs, fmt.Sprintf("loading appointments: %v", err))
-		return pushed, errs
-	}
-	for _, a := range appointments {
-		if err := s.pushAppointment(ctx, client, cfg, &a); err != nil {
-			errs = append(errs, fmt.Sprintf("push appointment %s: %v", a.ID, err))
-		} else {
-			pushed++
-		}
-	}
-
-	return pushed, errs
-}
-
-// PushDeadline pushes a single deadline to CalDAV (called on create/update).
-func (s *CalDAVService) PushDeadline(ctx context.Context, tenantID uuid.UUID, deadline *models.Deadline) error {
-	cfg, err := s.LoadTenantConfig(tenantID)
-	if err != nil || !cfg.SyncEnabled {
-		return nil // CalDAV not configured or disabled — silently skip
-	}
-	client, err := newCalDAVClient(*cfg)
-	if err != nil {
-		return fmt.Errorf("creating CalDAV client: %w", err)
-	}
-	return s.pushDeadline(ctx, client, *cfg, deadline)
-}
-
-func (s *CalDAVService) pushDeadline(ctx context.Context, client *caldav.Client, cfg CalDAVConfig, d *models.Deadline) error {
-	uid := deadlineUID(d.ID)
-
-	cal := ical.NewCalendar()
-	cal.Props.SetText(ical.PropProductID, calDAVProdID)
-	cal.Props.SetText(ical.PropVersion, "2.0")
-
-	todo := ical.NewComponent(ical.CompToDo)
-	todo.Props.SetText(ical.PropUID, uid)
-	todo.Props.SetText(ical.PropSummary, d.Title)
-	todo.Props.SetDateTime(ical.PropDateTimeStamp, time.Now().UTC())
-
-	if d.Description != nil {
-		todo.Props.SetText(ical.PropDescription, *d.Description)
-	}
-	if d.Notes != nil {
-		desc := ""
-		if d.Description != nil {
-			desc = *d.Description + "\n\n"
-		}
-		todo.Props.SetText(ical.PropDescription, desc+*d.Notes)
-	}
-
-	// Parse due_date (stored as string "YYYY-MM-DD")
-	if due, err := time.Parse("2006-01-02", d.DueDate); err == nil {
-		todo.Props.SetDate(ical.PropDue, due)
-	}
-
-	// Map status
-	switch d.Status {
-	case "completed":
-		todo.Props.SetText(ical.PropStatus, "COMPLETED")
-		if d.CompletedAt != nil {
-			todo.Props.SetDateTime(ical.PropCompleted, d.CompletedAt.UTC())
-		}
-	case "pending":
-		todo.Props.SetText(ical.PropStatus, "NEEDS-ACTION")
-	default:
-		todo.Props.SetText(ical.PropStatus, "IN-PROCESS")
-	}
-
-	cal.Children = append(cal.Children, todo)
-
-	path := calendarObjectPath(cfg.CalendarPath, uid)
-	obj, err := client.PutCalendarObject(ctx, path, cal)
-	if err != nil {
-		return fmt.Errorf("putting VTODO: %w", err)
-	}
-
-	// Update caldav_uid and etag in DB
-	return s.updateDeadlineCalDAV(d.ID, uid, obj.ETag)
-}
-
-// PushAppointment pushes a single appointment to CalDAV (called on create/update).
-func (s *CalDAVService) PushAppointment(ctx context.Context, tenantID uuid.UUID, appointment *models.Appointment) error {
-	cfg, err := s.LoadTenantConfig(tenantID)
-	if err != nil || !cfg.SyncEnabled {
-		return nil
-	}
-	client, err := newCalDAVClient(*cfg)
-	if err != nil {
-		return fmt.Errorf("creating CalDAV client: %w", err)
-	}
-	return s.pushAppointment(ctx, client, *cfg, appointment)
-}
-
-func (s *CalDAVService) pushAppointment(ctx context.Context, client *caldav.Client, cfg CalDAVConfig, a *models.Appointment) error {
-	uid := appointmentUID(a.ID)
-
-	cal := ical.NewCalendar()
-	cal.Props.SetText(ical.PropProductID, calDAVProdID)
-	cal.Props.SetText(ical.PropVersion, "2.0")
-
-	event := ical.NewEvent()
-	event.Props.SetText(ical.PropUID, uid)
-	event.Props.SetText(ical.PropSummary, a.Title)
-	event.Props.SetDateTime(ical.PropDateTimeStamp, time.Now().UTC())
-	event.Props.SetDateTime(ical.PropDateTimeStart, a.StartAt.UTC())
-
-	if a.EndAt != nil {
-		event.Props.SetDateTime(ical.PropDateTimeEnd, a.EndAt.UTC())
-	}
-	if a.Description != nil {
-		event.Props.SetText(ical.PropDescription, *a.Description)
-	}
-	if a.Location != nil {
-		event.Props.SetText(ical.PropLocation, *a.Location)
-	}
-
-	cal.Children = append(cal.Children, event.Component)
-
-	path := calendarObjectPath(cfg.CalendarPath, uid)
-	obj, err := client.PutCalendarObject(ctx, path, cal)
-	if err != nil {
-		return fmt.Errorf("putting VEVENT: %w", err)
-	}
-
-	return s.updateAppointmentCalDAV(a.ID, uid, obj.ETag)
-}
-
-// DeleteDeadlineCalDAV removes a deadline's VTODO from CalDAV.
-func (s *CalDAVService) DeleteDeadlineCalDAV(ctx context.Context, tenantID uuid.UUID, deadline *models.Deadline) error {
-	if deadline.CalDAVUID == nil || *deadline.CalDAVUID == "" {
-		return nil
-	}
-	cfg, err := s.LoadTenantConfig(tenantID)
-	if err != nil || !cfg.SyncEnabled {
-		return nil
-	}
-	client, err := newCalDAVClient(*cfg)
-	if err != nil {
-		return fmt.Errorf("creating CalDAV client: %w", err)
-	}
-	path := calendarObjectPath(cfg.CalendarPath, *deadline.CalDAVUID)
-	return client.RemoveAll(ctx, path)
-}
-
-// DeleteAppointmentCalDAV removes an appointment's VEVENT from CalDAV.
-func (s *CalDAVService) DeleteAppointmentCalDAV(ctx context.Context, tenantID uuid.UUID, appointment *models.Appointment) error {
-	if appointment.CalDAVUID == nil || *appointment.CalDAVUID == "" {
-		return nil
-	}
-	cfg, err := s.LoadTenantConfig(tenantID)
-	if err != nil || !cfg.SyncEnabled {
-		return nil
-	}
-	client, err := newCalDAVClient(*cfg)
-	if err != nil {
-		return fmt.Errorf("creating CalDAV client: %w", err)
-	}
-	path := calendarObjectPath(cfg.CalendarPath, *appointment.CalDAVUID)
-	return client.RemoveAll(ctx, path)
-}
-
-// --- Pull: CalDAV -> Local ---
-
-// pullAll fetches all calendar objects from CalDAV and reconciles with local DB.
-func (s *CalDAVService) pullAll(ctx context.Context, client *caldav.Client, tenantID uuid.UUID, cfg CalDAVConfig) (int, []string) {
-	var pulled int
-	var errs []string
-
-	query := &caldav.CalendarQuery{
-		CompFilter: caldav.CompFilter{
-			Name: ical.CompCalendar,
-		},
-	}
-
-	objects, err := client.QueryCalendar(ctx, cfg.CalendarPath, query)
-	if err != nil {
-		return 0, []string{fmt.Sprintf("querying calendar: %v", err)}
-	}
-
-	for _, obj := range objects {
-		if obj.Data == nil {
-			continue
-		}
-
-		for _, child := range obj.Data.Children {
-			switch child.Name {
-			case ical.CompToDo:
-				uid, _ := child.Props.Text(ical.PropUID)
-				if uid == "" || !isKanzlAIUID(uid, "deadline") {
-					continue
-				}
-				if err := s.reconcileDeadline(ctx, tenantID, child, obj.ETag); err != nil {
-					errs = append(errs, fmt.Sprintf("reconcile deadline %s: %v", uid, err))
-				} else {
-					pulled++
-				}
-			case ical.CompEvent:
-				uid, _ := child.Props.Text(ical.PropUID)
-				if uid == "" || !isKanzlAIUID(uid, "appointment") {
-					continue
-				}
-				if err := s.reconcileAppointment(ctx, tenantID, child, obj.ETag); err != nil {
-					errs = append(errs, fmt.Sprintf("reconcile appointment %s: %v", uid, err))
-				} else {
-					pulled++
-				}
-			}
-		}
-	}
-
-	return pulled, errs
-}
-
-// reconcileDeadline handles conflict resolution for a pulled VTODO.
-// KanzlAI wins for dates/status, CalDAV wins for notes/description.
-func (s *CalDAVService) reconcileDeadline(ctx context.Context, tenantID uuid.UUID, comp *ical.Component, remoteEtag string) error {
-	uid, _ := comp.Props.Text(ical.PropUID)
-	deadlineID := extractIDFromUID(uid, "deadline")
-	if deadlineID == uuid.Nil {
-		return fmt.Errorf("invalid UID: %s", uid)
-	}
-
-	// Load existing deadline
-	var d models.Deadline
-	err := s.db.Get(&d, `SELECT id, tenant_id, case_id, title, description, due_date, original_due_date,
-		warning_date, source, rule_id, status, completed_at,
-		caldav_uid, caldav_etag, notes, created_at, updated_at
-		FROM deadlines WHERE id = $1 AND tenant_id = $2`, deadlineID, tenantID)
-	if err != nil {
-		return fmt.Errorf("loading deadline: %w", err)
-	}
-
-	// Check if remote changed (etag mismatch)
-	if d.CalDAVEtag != nil && *d.CalDAVEtag == remoteEtag {
-		return nil // No change
-	}
-
-	// CalDAV wins for description/notes
-	description, _ := comp.Props.Text(ical.PropDescription)
-	hasConflict := false
-
-	if description != "" {
-		existingDesc := ""
-		if d.Description != nil {
-			existingDesc = *d.Description
-		}
-		existingNotes := ""
-		if d.Notes != nil {
-			existingNotes = *d.Notes
-		}
-		// CalDAV wins for notes/description
-		if description != existingDesc && description != existingNotes {
-			hasConflict = true
-			_, err = s.db.Exec(`UPDATE deadlines SET notes = $1, caldav_etag = $2, updated_at = NOW()
-				WHERE id = $3 AND tenant_id = $4`, description, remoteEtag, deadlineID, tenantID)
-			if err != nil {
-				return fmt.Errorf("updating deadline notes: %w", err)
-			}
-		}
-	}
-
-	if !hasConflict {
-		// Just update etag
-		_, err = s.db.Exec(`UPDATE deadlines SET caldav_etag = $1, updated_at = NOW()
-			WHERE id = $2 AND tenant_id = $3`, remoteEtag, deadlineID, tenantID)
-		if err != nil {
-			return fmt.Errorf("updating deadline etag: %w", err)
-		}
-	}
-
-	// Log conflict in case_events if detected
-	if hasConflict {
-		s.logConflictEvent(ctx, tenantID, d.CaseID, "deadline", deadlineID, "CalDAV description updated from remote")
-	}
-
-	return nil
-}
-
-// reconcileAppointment handles conflict resolution for a pulled VEVENT.
-func (s *CalDAVService) reconcileAppointment(ctx context.Context, tenantID uuid.UUID, comp *ical.Component, remoteEtag string) error {
-	uid, _ := comp.Props.Text(ical.PropUID)
-	appointmentID := extractIDFromUID(uid, "appointment")
-	if appointmentID == uuid.Nil {
-		return fmt.Errorf("invalid UID: %s", uid)
-	}
-
-	var a models.Appointment
-	err := s.db.GetContext(ctx, &a, `SELECT * FROM appointments WHERE id = $1 AND tenant_id = $2`, appointmentID, tenantID)
-	if err != nil {
-		return fmt.Errorf("loading appointment: %w", err)
-	}
-
-	if a.CalDAVEtag != nil && *a.CalDAVEtag == remoteEtag {
-		return nil
-	}
-
-	// CalDAV wins for description
-	description, _ := comp.Props.Text(ical.PropDescription)
-	location, _ := comp.Props.Text(ical.PropLocation)
-	hasConflict := false
-
-	updates := []string{"caldav_etag = $1", "updated_at = NOW()"}
-	args := []any{remoteEtag}
-	argN := 2
-
-	if description != "" {
-		existingDesc := ""
-		if a.Description != nil {
-			existingDesc = *a.Description
-		}
-		if description != existingDesc {
-			hasConflict = true
-			updates = append(updates, fmt.Sprintf("description = $%d", argN))
-			args = append(args, description)
-			argN++
-		}
-	}
-	if location != "" {
-		existingLoc := ""
-		if a.Location != nil {
-			existingLoc = *a.Location
-		}
-		if location != existingLoc {
-			hasConflict = true
-			updates = append(updates, fmt.Sprintf("location = $%d", argN))
-			args = append(args, location)
-			argN++
-		}
-	}
-
-	args = append(args, appointmentID, tenantID)
-	query := fmt.Sprintf("UPDATE appointments SET %s WHERE id = $%d AND tenant_id = $%d",
-		strings.Join(updates, ", "), argN, argN+1)
-
-	if _, err := s.db.ExecContext(ctx, query, args...); err != nil {
-		return fmt.Errorf("updating appointment: %w", err)
-	}
-
-	if hasConflict {
-		caseID := uuid.Nil
-		if a.CaseID != nil {
-			caseID = *a.CaseID
-		}
-		s.logConflictEvent(ctx, tenantID, caseID, "appointment", appointmentID, "CalDAV description/location updated from remote")
-	}
-
-	return nil
-}
-
-// --- DB helpers ---
-
-func (s *CalDAVService) loadDeadlines(tenantID uuid.UUID) ([]models.Deadline, error) {
-	var deadlines []models.Deadline
-	err := s.db.Select(&deadlines, `SELECT id, tenant_id, case_id, title, description, due_date,
-		original_due_date, warning_date, source, rule_id, status, completed_at,
-		caldav_uid, caldav_etag, notes, created_at, updated_at
-		FROM deadlines WHERE tenant_id = $1`, tenantID)
-	return deadlines, err
-}
-
-func (s *CalDAVService) loadAppointments(ctx context.Context, tenantID uuid.UUID) ([]models.Appointment, error) {
-	var appointments []models.Appointment
-	err := s.db.SelectContext(ctx, &appointments, "SELECT * FROM appointments WHERE tenant_id = $1", tenantID)
-	return appointments, err
-}
-
-func (s *CalDAVService) updateDeadlineCalDAV(id uuid.UUID, calDAVUID, etag string) error {
-	_, err := s.db.Exec(`UPDATE deadlines SET caldav_uid = $1, caldav_etag = $2, updated_at = NOW()
-		WHERE id = $3`, calDAVUID, etag, id)
-	return err
-}
-
-func (s *CalDAVService) updateAppointmentCalDAV(id uuid.UUID, calDAVUID, etag string) error {
-	_, err := s.db.Exec(`UPDATE appointments SET caldav_uid = $1, caldav_etag = $2, updated_at = NOW()
-		WHERE id = $3`, calDAVUID, etag, id)
-	return err
-}
-
-func (s *CalDAVService) logConflictEvent(ctx context.Context, tenantID, caseID uuid.UUID, objectType string, objectID uuid.UUID, msg string) {
-	if caseID == uuid.Nil {
-		return
-	}
-	metadata, _ := json.Marshal(map[string]string{
-		"object_type": objectType,
-		"object_id":   objectID.String(),
-		"source":      "caldav_sync",
-	})
-	_, err := s.db.ExecContext(ctx, `INSERT INTO case_events (id, tenant_id, case_id, event_type, title, description, metadata, created_at, updated_at)
-		VALUES ($1, $2, $3, 'caldav_conflict', $4, $5, $6, NOW(), NOW())`,
-		uuid.New(), tenantID, caseID, "CalDAV sync conflict", msg, metadata)
-	if err != nil {
-		log.Printf("CalDAV: failed to log conflict event: %v", err)
-	}
-}
-
-// --- UID helpers ---
-
-func deadlineUID(id uuid.UUID) string {
-	return fmt.Sprintf("kanzlai-deadline-%s@%s", id, calDAVDomain)
-}
-
-func appointmentUID(id uuid.UUID) string {
-	return fmt.Sprintf("kanzlai-appointment-%s@%s", id, calDAVDomain)
-}
-
-func isKanzlAIUID(uid, objectType string) bool {
-	return strings.HasPrefix(uid, "kanzlai-"+objectType+"-") && strings.HasSuffix(uid, "@"+calDAVDomain)
-}
-
-func extractIDFromUID(uid, objectType string) uuid.UUID {
-	prefix := "kanzlai-" + objectType + "-"
-	suffix := "@" + calDAVDomain
-	if !strings.HasPrefix(uid, prefix) || !strings.HasSuffix(uid, suffix) {
-		return uuid.Nil
-	}
-	idStr := uid[len(prefix) : len(uid)-len(suffix)]
-	id, err := uuid.Parse(idStr)
-	if err != nil {
-		return uuid.Nil
-	}
-	return id
-}
-
-func calendarObjectPath(calendarPath, uid string) string {
-	path := strings.TrimSuffix(calendarPath, "/")
-	return path + "/" + uid + ".ics"
-}

backend/internal/services/caldav_service_test.go

@@ -1,124 +0,0 @@
-package services
-
-import (
-	"testing"
-
-	"github.com/google/uuid"
-)
-
-func TestDeadlineUID(t *testing.T) {
-	id := uuid.MustParse("550e8400-e29b-41d4-a716-446655440000")
-	uid := deadlineUID(id)
-	want := "kanzlai-deadline-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de"
-	if uid != want {
-		t.Errorf("deadlineUID = %q, want %q", uid, want)
-	}
-}
-
-func TestAppointmentUID(t *testing.T) {
-	id := uuid.MustParse("550e8400-e29b-41d4-a716-446655440000")
-	uid := appointmentUID(id)
-	want := "kanzlai-appointment-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de"
-	if uid != want {
-		t.Errorf("appointmentUID = %q, want %q", uid, want)
-	}
-}
-
-func TestIsKanzlAIUID(t *testing.T) {
-	tests := []struct {
-		uid        string
-		objectType string
-		want       bool
-	}{
-		{"kanzlai-deadline-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de", "deadline", true},
-		{"kanzlai-appointment-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de", "appointment", true},
-		{"kanzlai-deadline-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de", "appointment", false},
-		{"random-uid@other.com", "deadline", false},
-		{"", "deadline", false},
-	}
-	for _, tt := range tests {
-		got := isKanzlAIUID(tt.uid, tt.objectType)
-		if got != tt.want {
-			t.Errorf("isKanzlAIUID(%q, %q) = %v, want %v", tt.uid, tt.objectType, got, tt.want)
-		}
-	}
-}
-
-func TestExtractIDFromUID(t *testing.T) {
-	id := uuid.MustParse("550e8400-e29b-41d4-a716-446655440000")
-
-	tests := []struct {
-		uid        string
-		objectType string
-		want       uuid.UUID
-	}{
-		{"kanzlai-deadline-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de", "deadline", id},
-		{"kanzlai-appointment-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de", "appointment", id},
-		{"invalid-uid", "deadline", uuid.Nil},
-		{"kanzlai-deadline-not-a-uuid@kanzlai.msbls.de", "deadline", uuid.Nil},
-	}
-	for _, tt := range tests {
-		got := extractIDFromUID(tt.uid, tt.objectType)
-		if got != tt.want {
-			t.Errorf("extractIDFromUID(%q, %q) = %v, want %v", tt.uid, tt.objectType, got, tt.want)
-		}
-	}
-}
-
-func TestCalendarObjectPath(t *testing.T) {
-	tests := []struct {
-		calendarPath string
-		uid          string
-		want         string
-	}{
-		{"/dav/calendars/user/cal", "kanzlai-deadline-abc@kanzlai.msbls.de", "/dav/calendars/user/cal/kanzlai-deadline-abc@kanzlai.msbls.de.ics"},
-		{"/dav/calendars/user/cal/", "kanzlai-deadline-abc@kanzlai.msbls.de", "/dav/calendars/user/cal/kanzlai-deadline-abc@kanzlai.msbls.de.ics"},
-	}
-	for _, tt := range tests {
-		got := calendarObjectPath(tt.calendarPath, tt.uid)
-		if got != tt.want {
-			t.Errorf("calendarObjectPath(%q, %q) = %q, want %q", tt.calendarPath, tt.uid, got, tt.want)
-		}
-	}
-}
-
-func TestParseCalDAVConfig(t *testing.T) {
-	settings := []byte(`{"caldav": {"url": "https://dav.example.com", "username": "user", "password": "pass", "calendar_path": "/cal", "sync_enabled": true, "sync_interval_minutes": 30}}`)
-	cfg, err := parseCalDAVConfig(settings)
-	if err != nil {
-		t.Fatalf("parseCalDAVConfig: %v", err)
-	}
-	if cfg.URL != "https://dav.example.com" {
-		t.Errorf("URL = %q, want %q", cfg.URL, "https://dav.example.com")
-	}
-	if cfg.Username != "user" {
-		t.Errorf("Username = %q, want %q", cfg.Username, "user")
-	}
-	if cfg.SyncIntervalMinutes != 30 {
-		t.Errorf("SyncIntervalMinutes = %d, want 30", cfg.SyncIntervalMinutes)
-	}
-	if !cfg.SyncEnabled {
-		t.Error("SyncEnabled = false, want true")
-	}
-}
-
-func TestParseCalDAVConfig_Empty(t *testing.T) {
-	cfg, err := parseCalDAVConfig(nil)
-	if err != nil {
-		t.Fatalf("parseCalDAVConfig(nil): %v", err)
-	}
-	if cfg.URL != "" {
-		t.Errorf("expected empty config, got URL=%q", cfg.URL)
-	}
-}
-
-func TestParseCalDAVConfig_NoCalDAV(t *testing.T) {
-	settings := []byte(`{"other_setting": true}`)
-	cfg, err := parseCalDAVConfig(settings)
-	if err != nil {
-		t.Fatalf("parseCalDAVConfig: %v", err)
-	}
-	if cfg.URL != "" {
-		t.Errorf("expected empty caldav config, got URL=%q", cfg.URL)
-	}
-}

frontend/src/app/(app)/ai/extract/page.tsx

@@ -90,14 +90,14 @@ export default function AIExtractPage() {
 
       await Promise.all(promises);
       toast.success(
-        `${deadlines.length} Frist(en) erfolgreich uebernommen.`,
+        `${deadlines.length} Frist(en) erfolgreich übernommen.`,
       );
-      router.push(`/akten/${selectedCaseId}`);
+      router.push(`/cases/${selectedCaseId}`);
     } catch (err: unknown) {
       const message =
         err && typeof err === "object" && "error" in err
           ? (err as { error: string }).error
-          : "Uebernahme fehlgeschlagen";
+          : "Übernahme fehlgeschlagen";
       toast.error(message);
     } finally {
       setIsAdopting(false);
@@ -105,7 +105,7 @@ export default function AIExtractPage() {
   }
 
   return (
-    <div className="mx-auto max-w-4xl">
+    <div className="animate-fade-in mx-auto max-w-4xl">
       <div className="mb-6 flex items-center gap-3">
         <Brain className="h-5 w-5 text-neutral-500" />
         <div>
@@ -118,7 +118,7 @@ export default function AIExtractPage() {
         </div>
       </div>
 
-      <div className="rounded-lg border border-neutral-200 bg-white p-6">
+      <div className="rounded-lg border border-neutral-200 bg-white p-4 sm:p-6">
         <ExtractionForm
           cases={cases}
           selectedCaseId={selectedCaseId}
@@ -129,7 +129,7 @@ export default function AIExtractPage() {
       </div>
 
       {results !== null && (
-        <div className="mt-6 rounded-lg border border-neutral-200 bg-white p-6">
+        <div className="animate-fade-in mt-6 rounded-lg border border-neutral-200 bg-white p-4 sm:p-6">
           <ExtractionResults
             deadlines={results}
             onAdopt={handleAdopt}

frontend/src/app/(app)/cases/[id]/page.tsx

@@ -6,11 +6,19 @@ import { api } from "@/lib/api";
 import type { Case, CaseEvent, Party, Deadline, Document } from "@/lib/types";
 import { CaseTimeline } from "@/components/cases/CaseTimeline";
 import { PartyList } from "@/components/cases/PartyList";
-import { ArrowLeft, Clock, FileText, Users, Activity } from "lucide-react";
+import {
+  ArrowLeft,
+  Clock,
+  FileText,
+  Users,
+  Activity,
+  AlertTriangle,
+} from "lucide-react";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
 import Link from "next/link";
 import { useState } from "react";
+import { Skeleton } from "@/components/ui/Skeleton";
 
 interface CaseDetail extends Case {
   parties: Party[];
@@ -25,6 +33,13 @@ const STATUS_BADGE: Record<string, string> = {
   archived: "bg-neutral-100 text-neutral-400",
 };
 
+const STATUS_LABEL: Record<string, string> = {
+  active: "Aktiv",
+  pending: "Anhängig",
+  closed: "Geschlossen",
+  archived: "Archiviert",
+};
+
 const TABS = [
   { key: "timeline", label: "Verlauf", icon: Activity },
   { key: "deadlines", label: "Fristen", icon: Clock },
@@ -34,11 +49,43 @@ const TABS = [
 
 type TabKey = (typeof TABS)[number]["key"];
 
+function CaseDetailSkeleton() {
+  return (
+    <div>
+      <Skeleton className="h-4 w-28" />
+      <div className="mt-4 flex items-start justify-between">
+        <div>
+          <Skeleton className="h-6 w-48" />
+          <Skeleton className="mt-2 h-4 w-64" />
+        </div>
+        <div className="space-y-1">
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="h-3 w-24" />
+        </div>
+      </div>
+      <div className="mt-6 flex gap-4 border-b border-neutral-200 pb-2.5">
+        {[1, 2, 3, 4].map((i) => (
+          <Skeleton key={i} className="h-4 w-20" />
+        ))}
+      </div>
+      <div className="mt-6 space-y-3">
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-14 rounded-md" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export default function CaseDetailPage() {
   const { id } = useParams<{ id: string }>();
   const [activeTab, setActiveTab] = useState<TabKey>("timeline");
 
-  const { data: caseDetail, isLoading } = useQuery({
+  const {
+    data: caseDetail,
+    isLoading,
+    error,
+  } = useQuery({
     queryKey: ["case", id],
     queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
   });
@@ -59,17 +106,28 @@ export default function CaseDetailPage() {
   });
 
   if (isLoading) {
-    return (
+    return <CaseDetailSkeleton />;
-      <div className="py-12 text-center text-sm text-neutral-400">
-        Laden...
-      </div>
-    );
   }
 
-  if (!caseDetail) {
+  if (error || !caseDetail) {
     return (
-      <div className="py-12 text-center text-sm text-neutral-400">
+      <div className="py-12 text-center">
-        Akte nicht gefunden.
+        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
+          <AlertTriangle className="h-6 w-6 text-red-500" />
+        </div>
+        <p className="text-sm font-medium text-neutral-900">
+          Akte nicht gefunden
+        </p>
+        <p className="mt-1 text-sm text-neutral-500">
+          Die Akte existiert nicht oder Sie haben keine Berechtigung.
+        </p>
+        <Link
+          href="/cases"
+          className="mt-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Zurück zu Akten
+        </Link>
       </div>
     );
   }
@@ -78,28 +136,28 @@ export default function CaseDetailPage() {
   const documents = documentsData ?? [];
 
   return (
-    <div>
+    <div className="animate-fade-in">
       <Link
         href="/cases"
-        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
+        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
       >
         <ArrowLeft className="h-3.5 w-3.5" />
-        Zuruck zu Akten
+        Zurück zu Akten
       </Link>
 
-      <div className="flex items-start justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <div className="flex items-center gap-3">
+          <div className="flex flex-wrap items-center gap-3">
             <h1 className="text-lg font-semibold text-neutral-900">
               {caseDetail.title}
             </h1>
             <span
               className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[caseDetail.status] ?? "bg-neutral-100 text-neutral-500"}`}
             >
-              {caseDetail.status}
+              {STATUS_LABEL[caseDetail.status] ?? caseDetail.status}
             </span>
           </div>
-          <div className="mt-1 flex gap-4 text-sm text-neutral-500">
+          <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm text-neutral-500">
             <span>Az. {caseDetail.case_number}</span>
             {caseDetail.case_type && <span>{caseDetail.case_type}</span>}
             {caseDetail.court && <span>{caseDetail.court}</span>}
@@ -129,12 +187,12 @@ export default function CaseDetailPage() {
       )}
 
       <div className="mt-6 border-b border-neutral-200">
-        <nav className="-mb-px flex gap-4">
+        <nav className="-mb-px flex gap-1 overflow-x-auto sm:gap-4">
           {TABS.map((tab) => (
             <button
               key={tab.key}
               onClick={() => setActiveTab(tab.key)}
-              className={`inline-flex items-center gap-1.5 border-b-2 px-1 pb-2.5 text-sm font-medium transition-colors ${
+              className={`inline-flex shrink-0 items-center gap-1.5 border-b-2 px-1 pb-2.5 text-sm font-medium transition-colors ${
                 activeTab === tab.key
                   ? "border-neutral-900 text-neutral-900"
                   : "border-transparent text-neutral-400 hover:text-neutral-600"
@@ -181,9 +239,14 @@ export default function CaseDetailPage() {
 function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
   if (deadlines.length === 0) {
     return (
-      <p className="py-8 text-center text-sm text-neutral-400">
+      <div className="flex flex-col items-center py-8 text-center">
+        <div className="rounded-xl bg-neutral-100 p-3">
+          <Clock className="h-5 w-5 text-neutral-400" />
+        </div>
+        <p className="mt-2 text-sm text-neutral-500">
           Keine Fristen vorhanden.
         </p>
+      </div>
     );
   }
 
@@ -193,12 +256,18 @@ function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
     overdue: "bg-red-50 text-red-700",
   };
 
+  const DEADLINE_STATUS_LABEL: Record<string, string> = {
+    pending: "Offen",
+    completed: "Erledigt",
+    overdue: "Überfällig",
+  };
+
   return (
     <div className="space-y-2">
       {deadlines.map((d) => (
         <div
           key={d.id}
-          className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-3"
+          className="flex flex-col gap-2 rounded-md border border-neutral-200 bg-white px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
         >
           <div>
             <p className="text-sm font-medium text-neutral-900">{d.title}</p>
@@ -212,9 +281,9 @@ function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
             <span
               className={`rounded-full px-2 py-0.5 text-xs font-medium ${DEADLINE_STATUS[d.status] ?? "bg-neutral-100 text-neutral-500"}`}
             >
-              {d.status}
+              {DEADLINE_STATUS_LABEL[d.status] ?? d.status}
             </span>
-            <span className="text-sm text-neutral-500">
+            <span className="whitespace-nowrap text-sm text-neutral-500">
               {format(new Date(d.due_date), "d. MMM yyyy", { locale: de })}
             </span>
           </div>
@@ -227,9 +296,14 @@ function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
 function DocumentsList({ documents }: { documents: Document[] }) {
   if (documents.length === 0) {
     return (
-      <p className="py-8 text-center text-sm text-neutral-400">
+      <div className="flex flex-col items-center py-8 text-center">
+        <div className="rounded-xl bg-neutral-100 p-3">
+          <FileText className="h-5 w-5 text-neutral-400" />
+        </div>
+        <p className="mt-2 text-sm text-neutral-500">
           Keine Dokumente vorhanden.
         </p>
+      </div>
     );
   }
 
@@ -256,7 +330,7 @@ function DocumentsList({ documents }: { documents: Document[] }) {
           </div>
           <a
             href={`/api/documents/${doc.id}`}
-            className="text-sm text-neutral-500 hover:text-neutral-700"
+            className="text-sm text-neutral-500 transition-colors hover:text-neutral-700"
           >
             Herunterladen
           </a>

frontend/src/app/(app)/cases/new/page.tsx

@@ -26,19 +26,19 @@ export default function NewCasePage() {
   });
 
   return (
-    <div className="mx-auto max-w-2xl">
+    <div className="animate-fade-in mx-auto max-w-2xl">
       <Link
         href="/cases"
-        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
+        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
       >
         <ArrowLeft className="h-3.5 w-3.5" />
-        Zuruck zu Akten
+        Zurück zu Akten
       </Link>
       <h1 className="text-lg font-semibold text-neutral-900">Neue Akte</h1>
       <p className="mt-0.5 text-sm text-neutral-500">
         Neue Akte im System anlegen
       </p>
-      <div className="mt-6 rounded-md border border-neutral-200 bg-white p-6">
+      <div className="mt-6 rounded-md border border-neutral-200 bg-white p-4 sm:p-6">
         <CaseForm
           onSubmit={(data) => mutation.mutate(data)}
           isSubmitting={mutation.isPending}

frontend/src/app/(app)/cases/page.tsx

@@ -5,13 +5,15 @@ import { api } from "@/lib/api";
 import type { Case } from "@/lib/types";
 import Link from "next/link";
 import { useSearchParams, useRouter } from "next/navigation";
-import { Plus, Search } from "lucide-react";
+import { Plus, Search, FolderOpen } from "lucide-react";
 import { useState } from "react";
+import { SkeletonTable } from "@/components/ui/Skeleton";
+import { EmptyState } from "@/components/ui/EmptyState";
 
 const STATUS_OPTIONS = [
   { value: "", label: "Alle Status" },
   { value: "active", label: "Aktiv" },
-  { value: "pending", label: "Anhangig" },
+  { value: "pending", label: "Anhängig" },
   { value: "closed", label: "Geschlossen" },
   { value: "archived", label: "Archiviert" },
 ];
@@ -20,9 +22,9 @@ const TYPE_OPTIONS = [
   { value: "", label: "Alle Typen" },
   { value: "INF", label: "Verletzungsklage" },
   { value: "REV", label: "Widerruf" },
-  { value: "CCR", label: "Einstweilige Verfugung" },
+  { value: "CCR", label: "Einstweilige Verfügung" },
   { value: "APP", label: "Berufung" },
-  { value: "PI", label: "Vorlaufiger Rechtsschutz" },
+  { value: "PI", label: "Vorläufiger Rechtsschutz" },
   { value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
 ];
 
@@ -33,6 +35,16 @@ const STATUS_BADGE: Record<string, string> = {
   archived: "bg-neutral-100 text-neutral-400",
 };
 
+const STATUS_LABEL: Record<string, string> = {
+  active: "Aktiv",
+  pending: "Anhängig",
+  closed: "Geschlossen",
+  archived: "Archiviert",
+};
+
+const inputClass =
+  "rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
 export default function CasesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -59,24 +71,24 @@ export default function CasesPage() {
   const cases = data?.cases ?? [];
 
   return (
-    <div>
+    <div className="animate-fade-in">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-lg font-semibold text-neutral-900">Akten</h1>
           <p className="mt-0.5 text-sm text-neutral-500">
-            {data ? `${data.total} Akten` : "Laden..."}
+            {data ? `${data.total} Akten` : "\u00A0"}
           </p>
         </div>
         <Link
           href="/cases/new"
-          className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800"
+          className="inline-flex w-fit items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
         >
           <Plus className="h-4 w-4" />
           Neue Akte
         </Link>
       </div>
 
-      <div className="mt-4 flex items-center gap-3">
+      <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center">
         <div className="relative flex-1">
           <Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-400" />
           <input
@@ -84,13 +96,14 @@ export default function CasesPage() {
             placeholder="Suchen nach Aktenzeichen, Titel..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="w-full rounded-md border border-neutral-200 bg-white py-1.5 pl-9 pr-3 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+            className={`w-full pl-9 pr-3 ${inputClass}`}
           />
         </div>
+        <div className="flex gap-3">
           <select
             value={status}
             onChange={(e) => setStatus(e.target.value)}
-          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-neutral-400"
+            className={inputClass}
           >
             {STATUS_OPTIONS.map((o) => (
               <option key={o.value} value={o.value}>
@@ -101,7 +114,7 @@ export default function CasesPage() {
           <select
             value={type}
             onChange={(e) => setType(e.target.value)}
-          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-neutral-400"
+            className={inputClass}
           >
             {TYPE_OPTIONS.map((o) => (
               <option key={o.value} value={o.value}>
@@ -110,27 +123,49 @@ export default function CasesPage() {
             ))}
           </select>
         </div>
+      </div>
 
       <div className="mt-4">
         {isLoading ? (
-          <div className="py-12 text-center text-sm text-neutral-400">
+          <SkeletonTable rows={5} />
-            Laden...
-          </div>
         ) : cases.length === 0 ? (
-          <div className="py-12 text-center text-sm text-neutral-400">
+          <EmptyState
-            Keine Akten gefunden.
+            icon={FolderOpen}
-          </div>
+            title="Keine Akten gefunden"
+            description={
+              search || status || type
+                ? "Versuchen Sie andere Suchkriterien."
+                : "Erstellen Sie Ihre erste Akte, um loszulegen."
+            }
+            action={
+              !search && !status && !type ? (
+                <Link
+                  href="/cases/new"
+                  className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
+                >
+                  <Plus className="h-4 w-4" />
+                  Neue Akte anlegen
+                </Link>
+              ) : undefined
+            }
+          />
         ) : (
+          <div className="-mx-4 overflow-x-auto sm:mx-0">
+            <div className="min-w-[640px] sm:min-w-0">
               <div className="overflow-hidden rounded-md border border-neutral-200 bg-white">
                 <table className="w-full text-sm">
                   <thead>
                     <tr className="border-b border-neutral-100 text-left text-xs font-medium uppercase tracking-wider text-neutral-400">
                       <th className="px-4 py-2.5">Aktenzeichen</th>
                       <th className="px-4 py-2.5">Titel</th>
-                  <th className="px-4 py-2.5">Typ</th>
+                      <th className="hidden px-4 py-2.5 md:table-cell">Typ</th>
-                  <th className="px-4 py-2.5">Gericht</th>
+                      <th className="hidden px-4 py-2.5 lg:table-cell">
+                        Gericht
+                      </th>
                       <th className="px-4 py-2.5">Status</th>
-                  <th className="px-4 py-2.5">Erstellt</th>
+                      <th className="hidden px-4 py-2.5 sm:table-cell">
+                        Erstellt
+                      </th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-neutral-100">
@@ -138,26 +173,28 @@ export default function CasesPage() {
                       <tr
                         key={c.id}
                         onClick={() => router.push(`/cases/${c.id}`)}
-                    className="cursor-pointer hover:bg-neutral-50"
+                        className="cursor-pointer transition-colors hover:bg-neutral-50"
                       >
-                    <td className="px-4 py-2.5 font-medium text-neutral-900">
+                        <td className="whitespace-nowrap px-4 py-2.5 font-medium text-neutral-900">
                           {c.case_number}
                         </td>
-                    <td className="px-4 py-2.5 text-neutral-700">{c.title}</td>
+                        <td className="max-w-[200px] truncate px-4 py-2.5 text-neutral-700">
-                    <td className="px-4 py-2.5 text-neutral-500">
+                          {c.title}
+                        </td>
+                        <td className="hidden px-4 py-2.5 text-neutral-500 md:table-cell">
                           {c.case_type ?? "-"}
                         </td>
-                    <td className="px-4 py-2.5 text-neutral-500">
+                        <td className="hidden px-4 py-2.5 text-neutral-500 lg:table-cell">
                           {c.court ?? "-"}
                         </td>
                         <td className="px-4 py-2.5">
                           <span
                             className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[c.status] ?? "bg-neutral-100 text-neutral-500"}`}
                           >
-                        {c.status}
+                            {STATUS_LABEL[c.status] ?? c.status}
                           </span>
                         </td>
-                    <td className="px-4 py-2.5 text-neutral-400">
+                        <td className="hidden whitespace-nowrap px-4 py-2.5 text-neutral-400 sm:table-cell">
                           {new Date(c.created_at).toLocaleDateString("de-DE")}
                         </td>
                       </tr>
@@ -165,6 +202,8 @@ export default function CasesPage() {
                   </tbody>
                 </table>
               </div>
+            </div>
+          </div>
         )}
       </div>
     </div>

frontend/src/app/(app)/dashboard/page.tsx

@@ -8,35 +8,71 @@ import { CaseOverviewGrid } from "@/components/dashboard/CaseOverviewGrid";
 import { UpcomingTimeline } from "@/components/dashboard/UpcomingTimeline";
 import { AISummaryCard } from "@/components/dashboard/AISummaryCard";
 import { QuickActions } from "@/components/dashboard/QuickActions";
-import { Loader2 } from "lucide-react";
+import { Skeleton, SkeletonCard } from "@/components/ui/Skeleton";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+
+function DashboardSkeleton() {
+  return (
+    <div className="mx-auto max-w-6xl space-y-6">
+      <div>
+        <Skeleton className="h-5 w-28" />
+        <Skeleton className="mt-2 h-3.5 w-52" />
+      </div>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-28 rounded-xl" />
+        ))}
+      </div>
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <div className="lg:col-span-2">
+          <SkeletonCard className="min-h-[200px]" />
+        </div>
+        <div className="space-y-6">
+          <SkeletonCard />
+          <SkeletonCard />
+          <SkeletonCard />
+        </div>
+      </div>
+    </div>
+  );
+}
 
 export default function DashboardPage() {
-  const { data, isLoading, error } = useQuery({
+  const { data, isLoading, error, refetch } = useQuery({
     queryKey: ["dashboard"],
     queryFn: () => api.get<DashboardData>("/dashboard"),
     refetchInterval: 60_000,
   });
 
   if (isLoading) {
-    return (
+    return <DashboardSkeleton />;
-      <div className="flex h-full items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
-      </div>
-    );
   }
 
   if (error || !data) {
     return (
-      <div className="flex h-full items-center justify-center">
+      <div className="mx-auto max-w-md py-16 text-center">
-        <p className="text-sm text-neutral-500">
+        <div className="mx-auto mb-3 rounded-xl bg-red-50 p-3 w-fit">
-          Dashboard konnte nicht geladen werden.
+          <AlertTriangle className="h-6 w-6 text-red-500" />
+        </div>
+        <h2 className="text-sm font-medium text-neutral-900">
+          Dashboard konnte nicht geladen werden
+        </h2>
+        <p className="mt-1 text-sm text-neutral-500">
+          Bitte versuchen Sie es erneut oder prüfen Sie Ihre Verbindung.
         </p>
+        <button
+          onClick={() => refetch()}
+          className="mt-4 inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
+        >
+          <RefreshCw className="h-3.5 w-3.5" />
+          Erneut laden
+        </button>
       </div>
     );
   }
 
   return (
-    <div className="mx-auto max-w-6xl space-y-6">
+    <div className="animate-fade-in mx-auto max-w-6xl space-y-6">
       <div>
         <h1 className="text-lg font-semibold text-neutral-900">Dashboard</h1>
         <p className="mt-0.5 text-sm text-neutral-500">
@@ -44,20 +80,15 @@ export default function DashboardPage() {
         </p>
       </div>
 
-      {/* Traffic Lights — the hero section */}
       <DeadlineTrafficLights data={data.deadline_summary} />
 
-      {/* Main content grid */}
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        {/* Left column: Timeline (takes 2 cols) */}
         <div className="lg:col-span-2">
           <UpcomingTimeline
             deadlines={data.upcoming_deadlines}
             appointments={data.upcoming_appointments}
           />
         </div>
-
-        {/* Right column: Case overview, AI summary, Quick actions */}
         <div className="space-y-6">
           <CaseOverviewGrid data={data.case_summary} />
           <AISummaryCard data={data} />

frontend/src/app/(app)/fristen/page.tsx

@@ -20,12 +20,12 @@ export default function FristenPage() {
   });
 
   return (
-    <div className="space-y-4">
+    <div className="animate-fade-in space-y-4">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
           <p className="mt-0.5 text-sm text-neutral-500">
-            Alle Fristen im Uberblick
+            Alle Fristen im Überblick
           </p>
         </div>
         <div className="flex items-center gap-2">

frontend/src/app/(app)/fristen/rechner/page.tsx

@@ -6,18 +6,20 @@ import Link from "next/link";
 
 export default function FristenrechnerPage() {
   return (
-    <div className="space-y-4">
+    <div className="animate-fade-in space-y-4">
       <div>
         <Link
           href="/fristen"
-          className="mb-2 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
+          className="mb-2 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
         >
           <ArrowLeft className="h-3.5 w-3.5" />
-          Zuruck zu Fristen
+          Zurück zu Fristen
         </Link>
-        <h1 className="text-lg font-semibold text-neutral-900">Fristenrechner</h1>
+        <h1 className="text-lg font-semibold text-neutral-900">
+          Fristenrechner
+        </h1>
         <p className="mt-0.5 text-sm text-neutral-500">
-          Berechnen Sie Fristen basierend auf Verfahrensart und Auslosedatum
+          Berechnen Sie Fristen basierend auf Verfahrensart und Auslösedatum
         </p>
       </div>
       <DeadlineCalculator />

frontend/src/app/(app)/layout.tsx

@@ -13,7 +13,7 @@ export default function AppLayout({
       <Sidebar />
       <div className="flex flex-1 flex-col overflow-hidden">
         <Header />
-        <main className="flex-1 overflow-y-auto p-6">{children}</main>
+        <main className="flex-1 overflow-y-auto p-4 sm:p-6">{children}</main>
       </div>
     </div>
   );

frontend/src/app/globals.css

@@ -10,6 +10,19 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Focus-visible ring for accessibility */
+*:focus-visible {
+  outline: 2px solid #404040;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: none;
+}
+
 @keyframes count-up {
   0% {
     transform: translateY(8px);
@@ -24,3 +37,31 @@ body {
 .animate-count-up {
   animation: count-up 0.3s ease-out;
 }
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+@keyframes slide-in-left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-left {
+  animation: slide-in-left 0.2s ease-out;
+}

frontend/src/components/ai/ExtractionForm.tsx

@@ -13,6 +13,9 @@ interface ExtractionFormProps {
   isLoading: boolean;
 }
 
+const inputClass =
+  "w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
 export function ExtractionForm({
   cases,
   selectedCaseId,
@@ -63,10 +66,10 @@ export function ExtractionForm({
           id="case-select"
           value={selectedCaseId}
           onChange={(e) => onCaseChange(e.target.value)}
-          className="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-500"
+          className={inputClass}
           disabled={isLoading}
         >
-          <option value="">Akte auswaehlen...</option>
+          <option value="">Akte auswählen...</option>
           {cases.map((c) => (
             <option key={c.id} value={c.id}>
               {c.case_number} - {c.title}
@@ -95,7 +98,7 @@ export function ExtractionForm({
               type="button"
               onClick={removeFile}
               disabled={isLoading}
-              className="rounded p-1 text-neutral-400 hover:bg-neutral-200 hover:text-neutral-600"
+              className="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-200 hover:text-neutral-600"
             >
               <X className="h-4 w-4" />
             </button>
@@ -142,10 +145,10 @@ export function ExtractionForm({
             setText(e.target.value);
             if (e.target.value.trim()) setFile(null);
           }}
-          placeholder="Gerichtsschriftsatz, Beschluss oder sonstigen Text hier einfuegen..."
+          placeholder="Gerichtsschriftsatz, Beschluss oder sonstigen Text hier einfügen..."
           rows={6}
           disabled={isLoading}
-          className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-500 disabled:opacity-50"
+          className={`${inputClass} resize-y placeholder:text-neutral-400 disabled:opacity-50`}
         />
       </div>
 

frontend/src/components/ai/ExtractionResults.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Trash2, Check, Pencil, X, Loader2 } from "lucide-react";
+import { Trash2, Check, Pencil, X, Loader2, Brain } from "lucide-react";
 import type { ExtractedDeadline } from "@/lib/types";
 
 interface ExtractionResultsProps {
@@ -22,6 +22,9 @@ function confidenceLabel(confidence: number): string {
   return "Niedrig";
 }
 
+const editInputClass =
+  "w-full rounded border border-neutral-300 px-2 py-1 text-sm outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
 export function ExtractionResults({
   deadlines: initialDeadlines,
   onAdopt,
@@ -56,8 +59,11 @@ export function ExtractionResults({
 
   if (deadlines.length === 0) {
     return (
-      <div className="rounded-md border border-neutral-200 bg-neutral-50 p-6 text-center">
+      <div className="flex flex-col items-center py-8 text-center">
-        <p className="text-sm text-neutral-500">
+        <div className="rounded-xl bg-neutral-100 p-3">
+          <Brain className="h-5 w-5 text-neutral-400" />
+        </div>
+        <p className="mt-2 text-sm text-neutral-500">
           Keine Fristen gefunden. Alle extrahierten Fristen wurden entfernt.
         </p>
       </div>
@@ -66,7 +72,7 @@ export function ExtractionResults({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <h3 className="text-sm font-medium text-neutral-900">
           {deadlines.length} Frist{deadlines.length !== 1 ? "en" : ""} erkannt
         </h3>
@@ -78,18 +84,19 @@ export function ExtractionResults({
           {isAdopting ? (
             <>
               <Loader2 className="h-4 w-4 animate-spin" />
-              Uebernehme...
+              Übernehme...
             </>
           ) : (
             <>
               <Check className="h-4 w-4" />
-              Fristen uebernehmen
+              Fristen übernehmen
             </>
           )}
         </button>
       </div>
 
-      <div className="overflow-hidden rounded-md border border-neutral-200">
+      {/* Mobile: card layout, Desktop: table */}
+      <div className="hidden overflow-hidden rounded-md border border-neutral-200 sm:block">
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-neutral-200 bg-neutral-50">
@@ -97,7 +104,7 @@ export function ExtractionResults({
                 Frist
               </th>
               <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
-                Faelligkeitsdatum
+                Fälligkeitsdatum
               </th>
               <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
                 Rechtsgrundlage
@@ -105,7 +112,7 @@ export function ExtractionResults({
               <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
                 Konfidenz
               </th>
-              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
+              <th className="hidden px-4 py-2.5 text-left font-medium text-neutral-700 lg:table-cell">
                 Quellenangabe
               </th>
               <th className="px-4 py-2.5 text-right font-medium text-neutral-700">
@@ -117,7 +124,7 @@ export function ExtractionResults({
             {deadlines.map((d, i) => (
               <tr
                 key={i}
-                className="border-b border-neutral-100 last:border-b-0"
+                className="border-b border-neutral-100 transition-colors last:border-b-0 hover:bg-neutral-50"
               >
                 {editingIndex === i && editForm ? (
                   <>
@@ -127,7 +134,7 @@ export function ExtractionResults({
                         onChange={(e) =>
                           setEditForm({ ...editForm, title: e.target.value })
                         }
-                        className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
+                        className={editInputClass}
                       />
                     </td>
                     <td className="px-4 py-2">
@@ -140,7 +147,7 @@ export function ExtractionResults({
                             due_date: e.target.value || null,
                           })
                         }
-                        className="rounded border border-neutral-300 px-2 py-1 text-sm"
+                        className={editInputClass}
                       />
                     </td>
                     <td className="px-4 py-2">
@@ -152,7 +159,7 @@ export function ExtractionResults({
                             rule_reference: e.target.value,
                           })
                         }
-                        className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
+                        className={editInputClass}
                       />
                     </td>
                     <td className="px-4 py-2">
@@ -162,21 +169,21 @@ export function ExtractionResults({
                         {confidenceLabel(editForm.confidence)}
                       </span>
                     </td>
-                    <td className="px-4 py-2 text-xs text-neutral-500">
+                    <td className="hidden px-4 py-2 text-xs text-neutral-500 lg:table-cell">
                       {editForm.source_quote}
                     </td>
                     <td className="px-4 py-2 text-right">
                       <div className="flex items-center justify-end gap-1">
                         <button
                           onClick={saveEdit}
-                          className="rounded p-1 text-green-600 hover:bg-green-50"
+                          className="rounded p-1 text-green-600 transition-colors hover:bg-green-50"
                           title="Speichern"
                         >
                           <Check className="h-4 w-4" />
                         </button>
                         <button
                           onClick={cancelEdit}
-                          className="rounded p-1 text-neutral-400 hover:bg-neutral-100"
+                          className="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-100"
                           title="Abbrechen"
                         >
                           <X className="h-4 w-4" />
@@ -205,21 +212,21 @@ export function ExtractionResults({
                         {Math.round(d.confidence * 100)}%
                       </span>
                     </td>
-                    <td className="max-w-48 truncate px-4 py-2.5 text-xs text-neutral-500">
+                    <td className="hidden max-w-48 truncate px-4 py-2.5 text-xs text-neutral-500 lg:table-cell">
                       {d.source_quote || "-"}
                     </td>
                     <td className="px-4 py-2.5 text-right">
                       <div className="flex items-center justify-end gap-1">
                         <button
                           onClick={() => startEdit(i)}
-                          className="rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
+                          className="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
                           title="Bearbeiten"
                         >
                           <Pencil className="h-3.5 w-3.5" />
                         </button>
                         <button
                           onClick={() => removeDeadline(i)}
-                          className="rounded p-1 text-neutral-400 hover:bg-red-50 hover:text-red-600"
+                          className="rounded p-1 text-neutral-400 transition-colors hover:bg-red-50 hover:text-red-600"
                           title="Entfernen"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
@@ -233,6 +240,53 @@ export function ExtractionResults({
           </tbody>
         </table>
       </div>
+
+      {/* Mobile card layout */}
+      <div className="space-y-3 sm:hidden">
+        {deadlines.map((d, i) => (
+          <div
+            key={i}
+            className="rounded-md border border-neutral-200 bg-white p-4"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <p className="text-sm font-medium text-neutral-900">{d.title}</p>
+              <div className="flex shrink-0 items-center gap-1">
+                <button
+                  onClick={() => startEdit(i)}
+                  className="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </button>
+                <button
+                  onClick={() => removeDeadline(i)}
+                  className="rounded p-1 text-neutral-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            </div>
+            <div className="mt-2 flex flex-wrap gap-2 text-xs text-neutral-500">
+              <span>
+                {d.due_date
+                  ? new Date(d.due_date).toLocaleDateString("de-DE")
+                  : `${d.duration_value} ${d.duration_unit}`}
+              </span>
+              {d.rule_reference && (
+                <>
+                  <span>·</span>
+                  <span>{d.rule_reference}</span>
+                </>
+              )}
+              <span
+                className={`rounded-full px-2 py-0.5 font-medium ${confidenceColor(d.confidence)}`}
+              >
+                {confidenceLabel(d.confidence)} {Math.round(d.confidence * 100)}
+                %
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

frontend/src/components/cases/CaseForm.tsx

@@ -3,12 +3,12 @@
 import { useState } from "react";
 
 const TYPE_OPTIONS = [
-  { value: "", label: "-- Typ wahlen --" },
+  { value: "", label: "-- Typ wählen --" },
   { value: "INF", label: "Verletzungsklage (INF)" },
   { value: "REV", label: "Widerruf (REV)" },
-  { value: "CCR", label: "Einstweilige Verfugung (CCR)" },
+  { value: "CCR", label: "Einstweilige Verfügung (CCR)" },
   { value: "APP", label: "Berufung (APP)" },
-  { value: "PI", label: "Vorlaufiger Rechtsschutz (PI)" },
+  { value: "PI", label: "Vorläufiger Rechtsschutz (PI)" },
   { value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
 ];
 
@@ -43,8 +43,23 @@ export function CaseForm({
     status: initialData?.status ?? "active",
   });
 
+  const [errors, setErrors] = useState<Partial<Record<keyof CaseFormData, string>>>({});
+
+  function validate(): boolean {
+    const newErrors: Partial<Record<keyof CaseFormData, string>> = {};
+    if (!form.case_number.trim()) {
+      newErrors.case_number = "Aktenzeichen ist erforderlich";
+    }
+    if (!form.title.trim()) {
+      newErrors.title = "Titel ist erforderlich";
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }
+
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
+    if (!validate()) return;
     const data: CaseFormData = {
       ...form,
       case_type: form.case_type || undefined,
@@ -56,26 +71,31 @@ export function CaseForm({
 
   function update(field: keyof CaseFormData, value: string) {
     setForm((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined }));
+    }
   }
 
   const inputClass =
-    "w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+    "w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <div>
           <label className="mb-1 block text-sm font-medium text-neutral-700">
             Aktenzeichen *
           </label>
           <input
             type="text"
-            required
             value={form.case_number}
             onChange={(e) => update("case_number", e.target.value)}
             placeholder="z.B. 2026/001"
-            className={inputClass}
+            className={`${inputClass} ${errors.case_number ? "border-red-300 focus:border-red-400 focus:ring-red-400" : ""}`}
           />
+          {errors.case_number && (
+            <p className="mt-1 text-xs text-red-600">{errors.case_number}</p>
+          )}
         </div>
         <div>
           <label className="mb-1 block text-sm font-medium text-neutral-700">
@@ -87,7 +107,7 @@ export function CaseForm({
             className={inputClass}
           >
             <option value="active">Aktiv</option>
-            <option value="pending">Anhangig</option>
+            <option value="pending">Anhängig</option>
             <option value="closed">Geschlossen</option>
           </select>
         </div>
@@ -99,15 +119,17 @@ export function CaseForm({
         </label>
         <input
           type="text"
-          required
           value={form.title}
           onChange={(e) => update("title", e.target.value)}
           placeholder="Bezeichnung der Akte"
-          className={inputClass}
+          className={`${inputClass} ${errors.title ? "border-red-300 focus:border-red-400 focus:ring-red-400" : ""}`}
         />
+        {errors.title && (
+          <p className="mt-1 text-xs text-red-600">{errors.title}</p>
+        )}
       </div>
 
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <div>
           <label className="mb-1 block text-sm font-medium text-neutral-700">
             Verfahrensart
@@ -132,7 +154,7 @@ export function CaseForm({
             type="text"
             value={form.court}
             onChange={(e) => update("court", e.target.value)}
-            placeholder="z.B. UPC Munich Central Division"
+            placeholder="z.B. UPC München Zentralkammer"
             className={inputClass}
           />
         </div>
@@ -155,7 +177,7 @@ export function CaseForm({
         <button
           type="submit"
           disabled={isSubmitting}
-          className="rounded-md bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+          className="rounded-md bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:opacity-50"
         >
           {isSubmitting ? "Speichern..." : submitLabel}
         </button>

frontend/src/components/cases/CaseTimeline.tsx

@@ -3,6 +3,7 @@
 import type { CaseEvent } from "@/lib/types";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
+import { Activity } from "lucide-react";
 
 const EVENT_ICONS: Record<string, string> = {
   case_created: "bg-emerald-500",
@@ -20,9 +21,14 @@ interface CaseTimelineProps {
 export function CaseTimeline({ events }: CaseTimelineProps) {
   if (events.length === 0) {
     return (
-      <p className="py-8 text-center text-sm text-neutral-400">
+      <div className="flex flex-col items-center py-8 text-center">
+        <div className="rounded-xl bg-neutral-100 p-3">
+          <Activity className="h-5 w-5 text-neutral-400" />
+        </div>
+        <p className="mt-2 text-sm text-neutral-500">
           Keine Ereignisse vorhanden.
         </p>
+      </div>
     );
   }
 

frontend/src/components/cases/PartyList.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { toast } from "sonner";
 import { api } from "@/lib/api";
 import type { Party } from "@/lib/types";
-import { Plus, Trash2, X } from "lucide-react";
+import { Plus, Trash2, X, Users } from "lucide-react";
 
 interface PartyListProps {
   caseId: string;
@@ -19,13 +19,16 @@ interface PartyFormData {
 }
 
 const ROLE_OPTIONS = [
-  "Klager",
+  "Kläger",
   "Beklagter",
   "Nebenintervenient",
   "Patentinhaber",
   "Streithelfer",
 ];
 
+const inputClass =
+  "w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
 export function PartyList({ caseId, parties }: PartyListProps) {
   const queryClient = useQueryClient();
   const [showForm, setShowForm] = useState(false);
@@ -44,11 +47,11 @@ export function PartyList({ caseId, parties }: PartyListProps) {
       }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["case", caseId] });
-      toast.success("Partei hinzugefugt");
+      toast.success("Partei hinzugefügt");
       setShowForm(false);
       setForm({ name: "", role: "", representative: "" });
     },
-    onError: () => toast.error("Fehler beim Hinzufugen"),
+    onError: () => toast.error("Fehler beim Hinzufügen"),
   });
 
   const deleteMutation = useMutation({
@@ -60,9 +63,6 @@ export function PartyList({ caseId, parties }: PartyListProps) {
     onError: () => toast.error("Fehler beim Entfernen"),
   });
 
-  const inputClass =
-    "w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
-
   return (
     <div>
       <div className="flex items-center justify-between">
@@ -72,25 +72,37 @@ export function PartyList({ caseId, parties }: PartyListProps) {
         {!showForm && (
           <button
             onClick={() => setShowForm(true)}
-            className="inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
+            className="inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
           >
             <Plus className="h-3.5 w-3.5" />
-            Hinzufugen
+            Hinzufügen
           </button>
         )}
       </div>
 
       {parties.length === 0 && !showForm && (
-        <p className="mt-4 py-4 text-center text-sm text-neutral-400">
+        <div className="mt-4 flex flex-col items-center py-6 text-center">
+          <div className="rounded-xl bg-neutral-100 p-3">
+            <Users className="h-5 w-5 text-neutral-400" />
+          </div>
+          <p className="mt-2 text-sm text-neutral-500">
             Keine Parteien vorhanden.
           </p>
+          <button
+            onClick={() => setShowForm(true)}
+            className="mt-3 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Erste Partei hinzufügen
+          </button>
+        </div>
       )}
 
       <div className="mt-3 space-y-2">
         {parties.map((party) => (
           <div
             key={party.id}
-            className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-2.5"
+            className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-2.5 transition-colors hover:bg-neutral-50"
           >
             <div>
               <p className="text-sm font-medium text-neutral-900">
@@ -105,7 +117,7 @@ export function PartyList({ caseId, parties }: PartyListProps) {
             </div>
             <button
               onClick={() => deleteMutation.mutate(party.id)}
-              className="rounded p-1 text-neutral-300 hover:bg-neutral-100 hover:text-red-500"
+              className="rounded p-1 text-neutral-300 transition-colors hover:bg-neutral-100 hover:text-red-500"
               title="Partei entfernen"
             >
               <Trash2 className="h-3.5 w-3.5" />
@@ -122,7 +134,7 @@ export function PartyList({ caseId, parties }: PartyListProps) {
             </span>
             <button
               onClick={() => setShowForm(false)}
-              className="text-neutral-400 hover:text-neutral-600"
+              className="text-neutral-400 transition-colors hover:text-neutral-600"
             >
               <X className="h-4 w-4" />
             </button>
@@ -130,19 +142,22 @@ export function PartyList({ caseId, parties }: PartyListProps) {
           <form
             onSubmit={(e) => {
               e.preventDefault();
+              if (!form.name.trim()) {
+                toast.error("Bitte Namen eingeben");
+                return;
+              }
               addMutation.mutate(form);
             }}
             className="mt-3 space-y-3"
           >
             <input
               type="text"
-              required
               placeholder="Name der Partei"
               value={form.name}
               onChange={(e) => setForm({ ...form, name: e.target.value })}
               className={inputClass}
             />
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
               <select
                 value={form.role}
                 onChange={(e) => setForm({ ...form, role: e.target.value })}
@@ -169,9 +184,9 @@ export function PartyList({ caseId, parties }: PartyListProps) {
               <button
                 type="submit"
                 disabled={addMutation.isPending}
-                className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+                className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:opacity-50"
               >
-                {addMutation.isPending ? "..." : "Hinzufugen"}
+                {addMutation.isPending ? "Speichern..." : "Hinzufügen"}
               </button>
             </div>
           </form>

frontend/src/components/dashboard/QuickActions.tsx

@@ -6,19 +6,19 @@ import { FolderPlus, Clock, Sparkles, CalendarSync } from "lucide-react";
 const actions = [
   {
     label: "Neue Akte",
-    href: "/akten?new=1",
+    href: "/cases/new",
     icon: FolderPlus,
     color: "text-blue-600 bg-blue-50 hover:bg-blue-100",
   },
   {
     label: "Frist eintragen",
-    href: "/fristen?new=1",
+    href: "/fristen",
     icon: Clock,
     color: "text-amber-600 bg-amber-50 hover:bg-amber-100",
   },
   {
     label: "AI Analyse",
-    href: "/ai",
+    href: "/ai/extract",
     icon: Sparkles,
     color: "text-violet-600 bg-violet-50 hover:bg-violet-100",
   },

frontend/src/components/deadlines/DeadlineCalculator.tsx

@@ -2,10 +2,19 @@
 
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { api } from "@/lib/api";
-import type { ProceedingType, CalculateResponse, CalculatedDeadline } from "@/lib/types";
+import type {
+  ProceedingType,
+  CalculateResponse,
+  CalculatedDeadline,
+} from "@/lib/types";
 import { format, parseISO, isPast, isThisWeek } from "date-fns";
 import { de } from "date-fns/locale";
-import { Calculator, Calendar, ArrowRight, AlertTriangle } from "lucide-react";
+import {
+  Calculator,
+  Calendar,
+  ArrowRight,
+  AlertTriangle,
+} from "lucide-react";
 import { useState } from "react";
 
 function getTimelineUrgency(dueDate: string): "red" | "amber" | "green" {
@@ -21,6 +30,9 @@ const dotColors = {
   green: "bg-green-500",
 };
 
+const inputClass =
+  "w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
 export function DeadlineCalculator() {
   const [proceedingType, setProceedingType] = useState("");
   const [triggerDate, setTriggerDate] = useState("");
@@ -31,8 +43,10 @@ export function DeadlineCalculator() {
   });
 
   const calculateMutation = useMutation({
-    mutationFn: (params: { proceeding_type: string; trigger_event_date: string }) =>
+    mutationFn: (params: {
-      api.post<CalculateResponse>("/api/deadlines/calculate", params),
+      proceeding_type: string;
+      trigger_event_date: string;
+    }) => api.post<CalculateResponse>("/api/deadlines/calculate", params),
   });
 
   function handleCalculate(e: React.FormEvent) {
@@ -49,7 +63,10 @@ export function DeadlineCalculator() {
   return (
     <div className="space-y-6">
       {/* Input form */}
-      <form onSubmit={handleCalculate} className="rounded-lg border border-neutral-200 bg-white p-5">
+      <form
+        onSubmit={handleCalculate}
+        className="rounded-lg border border-neutral-200 bg-white p-5"
+      >
         <div className="flex items-center gap-2 text-sm font-medium text-neutral-900">
           <Calculator className="h-4 w-4" />
           Fristenberechnung
@@ -63,9 +80,9 @@ export function DeadlineCalculator() {
               value={proceedingType}
               onChange={(e) => setProceedingType(e.target.value)}
               disabled={typesLoading}
-              className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
+              className={inputClass}
             >
-              <option value="">Bitte wahlen...</option>
+              <option value="">Bitte wählen...</option>
               {proceedingTypes?.map((pt) => (
                 <option key={pt.id} value={pt.code}>
                   {pt.name} ({pt.code})
@@ -75,19 +92,23 @@ export function DeadlineCalculator() {
           </div>
           <div>
             <label className="mb-1 block text-xs font-medium text-neutral-500">
-              Auslosedatum
+              Auslösedatum
             </label>
             <input
               type="date"
               value={triggerDate}
               onChange={(e) => setTriggerDate(e.target.value)}
-              className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
+              className={inputClass}
             />
           </div>
           <div className="flex items-end">
             <button
               type="submit"
-              disabled={!proceedingType || !triggerDate || calculateMutation.isPending}
+              disabled={
+                !proceedingType ||
+                !triggerDate ||
+                calculateMutation.isPending
+              }
               className="flex w-full items-center justify-center gap-2 rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
             >
               {calculateMutation.isPending ? "Berechne..." : "Berechnen"}
@@ -101,20 +122,22 @@ export function DeadlineCalculator() {
       {calculateMutation.isError && (
         <div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
           <AlertTriangle className="h-4 w-4 shrink-0" />
-          Fehler bei der Berechnung. Bitte Eingaben prufen.
+          Fehler bei der Berechnung. Bitte Eingaben prüfen.
         </div>
       )}
 
       {/* Results */}
       {results && results.deadlines && (
-        <div className="space-y-3">
+        <div className="animate-fade-in space-y-3">
           <div className="flex items-center justify-between">
             <h3 className="text-sm font-medium text-neutral-900">
               Berechnete Fristen
             </h3>
             <span className="text-xs text-neutral-500">
               {results.deadlines.length} Fristen ab{" "}
-              {format(parseISO(results.trigger_event_date), "dd. MMM yyyy", { locale: de })}
+              {format(parseISO(results.trigger_event_date), "dd. MMM yyyy", {
+                locale: de,
+              })}
             </span>
           </div>
 
@@ -129,15 +152,16 @@ export function DeadlineCalculator() {
                   key={d.rule_id}
                   className={`flex gap-3 px-4 py-3 ${!isLast ? "border-b border-neutral-100" : ""}`}
                 >
-                  {/* Timeline dot + line */}
                   <div className="flex flex-col items-center pt-1">
-                    <div className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColors[urgency]}`} />
+                    <div
-                    {!isLast && <div className="mt-1 w-px flex-1 bg-neutral-200" />}
+                      className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColors[urgency]}`}
+                    />
+                    {!isLast && (
+                      <div className="mt-1 w-px flex-1 bg-neutral-200" />
+                    )}
                   </div>
-
-                  {/* Content */}
                   <div className="min-w-0 flex-1">
-                    <div className="flex items-start justify-between gap-2">
+                    <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-2">
                       <span className="text-sm font-medium text-neutral-900">
                         {d.title}
                       </span>
@@ -145,13 +169,18 @@ export function DeadlineCalculator() {
                         {format(parseISO(d.due_date), "dd.MM.yyyy")}
                       </span>
                     </div>
-                    <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
+                    <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-neutral-500">
                       {d.rule_code && <span>{d.rule_code}</span>}
                       {d.was_adjusted && (
                         <>
                           {d.rule_code && <span>·</span>}
                           <span className="text-amber-600">
-                            Angepasst (Original: {format(parseISO(d.original_due_date), "dd.MM.yyyy")})
+                            Angepasst (Original:{" "}
+                            {format(
+                              parseISO(d.original_due_date),
+                              "dd.MM.yyyy",
+                            )}
+                            )
                           </span>
                         </>
                       )}
@@ -166,10 +195,12 @@ export function DeadlineCalculator() {
 
       {/* Empty state */}
       {!results && !calculateMutation.isPending && (
-        <div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
+        <div className="flex flex-col items-center rounded-lg border border-dashed border-neutral-300 bg-white px-6 py-12 text-center">
-          <Calendar className="mx-auto h-8 w-8 text-neutral-300" />
+          <div className="rounded-xl bg-neutral-100 p-3">
-          <p className="mt-2 text-sm text-neutral-500">
+            <Calendar className="h-6 w-6 text-neutral-400" />
-            Verfahrensart und Auslosedatum wahlen, um Fristen zu berechnen
+          </div>
+          <p className="mt-3 text-sm text-neutral-500">
+            Verfahrensart und Auslösedatum wählen, um Fristen zu berechnen
           </p>
         </div>
       )}

frontend/src/components/deadlines/DeadlineList.tsx

@@ -8,6 +8,7 @@ import { de } from "date-fns/locale";
 import { Check, Clock, Filter } from "lucide-react";
 import { toast } from "sonner";
 import { useState, useMemo } from "react";
+import { EmptyState } from "@/components/ui/EmptyState";
 
 type StatusFilter = "all" | "pending" | "completed" | "overdue";
 
@@ -25,7 +26,7 @@ const urgencyConfig = {
     border: "border-red-200",
     badge: "bg-red-100 text-red-700",
     dot: "bg-red-500",
-    label: "Uberschritten",
+    label: "Überfällig",
   },
   amber: {
     bg: "bg-amber-50",
@@ -43,6 +44,9 @@ const urgencyConfig = {
   },
 };
 
+const selectClass =
+  "rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700 transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400 outline-none";
+
 export function DeadlineList() {
   const queryClient = useQueryClient();
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
@@ -66,7 +70,7 @@ export function DeadlineList() {
       toast.success("Frist als erledigt markiert");
     },
     onError: () => {
-      toast.error("Fehler beim Abschliessen der Frist");
+      toast.error("Fehler beim Abschließen der Frist");
     },
   });
 
@@ -80,7 +84,8 @@ export function DeadlineList() {
     if (!deadlines) return [];
     return deadlines.filter((d) => {
       if (statusFilter === "pending" && d.status !== "pending") return false;
-      if (statusFilter === "completed" && d.status !== "completed") return false;
+      if (statusFilter === "completed" && d.status !== "completed")
+        return false;
       if (statusFilter === "overdue") {
         if (d.status === "completed") return false;
         if (!isPast(parseISO(d.due_date))) return false;
@@ -92,7 +97,9 @@ export function DeadlineList() {
 
   const counts = useMemo(() => {
     if (!deadlines) return { overdue: 0, thisWeek: 0, ok: 0 };
-    let overdue = 0, thisWeek = 0, ok = 0;
+    let overdue = 0,
+      thisWeek = 0,
+      ok = 0;
     for (const d of deadlines) {
       if (d.status === "completed") continue;
       const urgency = getUrgency(d);
@@ -107,7 +114,10 @@ export function DeadlineList() {
     return (
       <div className="space-y-3">
         {[1, 2, 3, 4, 5].map((i) => (
-          <div key={i} className="h-16 animate-pulse rounded-lg bg-neutral-100" />
+          <div
+            key={i}
+            className="h-16 animate-pulse rounded-lg bg-neutral-100"
+          />
         ))}
       </div>
     );
@@ -118,42 +128,52 @@ export function DeadlineList() {
       {/* Summary cards */}
       <div className="grid grid-cols-3 gap-3">
         <button
-          onClick={() => setStatusFilter(statusFilter === "overdue" ? "all" : "overdue")}
+          onClick={() =>
-          className={`rounded-lg border p-3 text-left transition-colors ${
+            setStatusFilter(statusFilter === "overdue" ? "all" : "overdue")
+          }
+          className={`rounded-lg border p-3 text-left transition-all ${
             statusFilter === "overdue"
-              ? "border-red-300 bg-red-50"
+              ? "border-red-300 bg-red-50 ring-1 ring-red-200"
               : "border-neutral-200 bg-white hover:bg-neutral-50"
           }`}
         >
-          <div className="text-2xl font-semibold text-red-600">{counts.overdue}</div>
+          <div className="text-2xl font-semibold tabular-nums text-red-600">
-          <div className="text-xs text-neutral-500">Uberschritten</div>
+            {counts.overdue}
+          </div>
+          <div className="text-xs text-neutral-500">Überfällig</div>
         </button>
         <button
-          onClick={() => setStatusFilter(statusFilter === "pending" ? "all" : "pending")}
+          onClick={() =>
-          className={`rounded-lg border p-3 text-left transition-colors ${
+            setStatusFilter(statusFilter === "pending" ? "all" : "pending")
+          }
+          className={`rounded-lg border p-3 text-left transition-all ${
             statusFilter === "pending"
-              ? "border-amber-300 bg-amber-50"
+              ? "border-amber-300 bg-amber-50 ring-1 ring-amber-200"
               : "border-neutral-200 bg-white hover:bg-neutral-50"
           }`}
         >
-          <div className="text-2xl font-semibold text-amber-600">{counts.thisWeek}</div>
+          <div className="text-2xl font-semibold tabular-nums text-amber-600">
+            {counts.thisWeek}
+          </div>
           <div className="text-xs text-neutral-500">Diese Woche</div>
         </button>
         <button
           onClick={() => setStatusFilter("all")}
-          className={`rounded-lg border p-3 text-left transition-colors ${
+          className={`rounded-lg border p-3 text-left transition-all ${
             statusFilter === "all"
-              ? "border-green-300 bg-green-50"
+              ? "border-green-300 bg-green-50 ring-1 ring-green-200"
               : "border-neutral-200 bg-white hover:bg-neutral-50"
           }`}
         >
-          <div className="text-2xl font-semibold text-green-600">{counts.ok}</div>
+          <div className="text-2xl font-semibold tabular-nums text-green-600">
+            {counts.ok}
+          </div>
           <div className="text-xs text-neutral-500">OK</div>
         </button>
       </div>
 
       {/* Filters */}
-      <div className="flex items-center gap-3">
+      <div className="flex flex-wrap items-center gap-3">
         <div className="flex items-center gap-1.5 text-sm text-neutral-500">
           <Filter className="h-3.5 w-3.5" />
           <span>Filter:</span>
@@ -161,18 +181,18 @@ export function DeadlineList() {
         <select
           value={statusFilter}
           onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
-          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
+          className={selectClass}
         >
           <option value="all">Alle Status</option>
           <option value="pending">Offen</option>
           <option value="completed">Erledigt</option>
-          <option value="overdue">Uberschritten</option>
+          <option value="overdue">Überfällig</option>
         </select>
         {cases && cases.length > 0 && (
           <select
             value={caseFilter}
             onChange={(e) => setCaseFilter(e.target.value)}
-            className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
+            className={selectClass}
           >
             <option value="all">Alle Akten</option>
             {cases.map((c) => (
@@ -186,10 +206,15 @@ export function DeadlineList() {
 
       {/* Deadline list */}
       {filtered.length === 0 ? (
-        <div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
+        <EmptyState
-          <Clock className="mx-auto h-8 w-8 text-neutral-300" />
+          icon={Clock}
-          <p className="mt-2 text-sm text-neutral-500">Keine Fristen gefunden</p>
+          title="Keine Fristen gefunden"
-        </div>
+          description={
+            statusFilter !== "all" || caseFilter !== "all"
+              ? "Versuchen Sie andere Filtereinstellungen."
+              : "Es sind noch keine Fristen vorhanden."
+          }
+        />
       ) : (
         <div className="space-y-2">
           {filtered.map((deadline) => {
@@ -200,15 +225,19 @@ export function DeadlineList() {
             return (
               <div
                 key={deadline.id}
-                className={`flex items-center gap-3 rounded-lg border px-4 py-3 ${config.bg} ${config.border}`}
+                className={`flex items-center gap-3 rounded-lg border px-4 py-3 transition-colors ${config.bg} ${config.border}`}
               >
-                <div className={`h-2.5 w-2.5 shrink-0 rounded-full ${config.dot}`} />
+                <div
+                  className={`h-2.5 w-2.5 shrink-0 rounded-full ${config.dot}`}
+                />
                 <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2">
+                  <div className="flex flex-wrap items-center gap-2">
                     <span className="truncate text-sm font-medium text-neutral-900">
                       {deadline.title}
                     </span>
-                    <span className={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${config.badge}`}>
+                    <span
+                      className={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${config.badge}`}
+                    >
                       {config.label}
                     </span>
                     {deadline.status === "completed" && (
@@ -217,9 +246,11 @@ export function DeadlineList() {
                       </span>
                     )}
                   </div>
-                  <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
+                  <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-neutral-500">
                     <span>
-                      {format(parseISO(deadline.due_date), "dd. MMM yyyy", { locale: de })}
+                      {format(parseISO(deadline.due_date), "dd. MMM yyyy", {
+                        locale: de,
+                      })}
                     </span>
                     {caseInfo && (
                       <>
@@ -242,7 +273,7 @@ export function DeadlineList() {
                     onClick={() => completeMutation.mutate(deadline.id)}
                     disabled={completeMutation.isPending}
                     title="Als erledigt markieren"
-                    className="shrink-0 rounded-md p-1.5 text-neutral-400 hover:bg-white hover:text-green-600"
+                    className="shrink-0 rounded-md p-1.5 text-neutral-400 transition-colors hover:bg-white hover:text-green-600"
                   >
                     <Check className="h-4 w-4" />
                   </button>

frontend/src/components/layout/Header.tsx

@@ -25,16 +25,19 @@ export function Header() {
 
   return (
     <header className="flex h-14 items-center justify-between border-b border-neutral-200 bg-white px-4">
-      <div />
+      {/* Spacer for mobile hamburger */}
-      <div className="flex items-center gap-3">
+      <div className="w-8 lg:w-0" />
+      <div className="flex items-center gap-2 sm:gap-3">
         <TenantSwitcher />
         {email && (
-          <span className="text-sm text-neutral-500">{email}</span>
+          <span className="hidden text-sm text-neutral-500 sm:inline">
+            {email}
+          </span>
         )}
         <button
           onClick={handleLogout}
           title="Abmelden"
-          className="rounded-md p-1.5 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
+          className="rounded-md p-1.5 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
         >
           <LogOut className="h-4 w-4" />
         </button>

frontend/src/components/layout/Sidebar.tsx

@@ -9,11 +9,14 @@ import {
   Calendar,
   Brain,
   Settings,
+  Menu,
+  X,
 } from "lucide-react";
+import { useState, useEffect } from "react";
 
 const navigation = [
   { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
-  { name: "Akten", href: "/akten", icon: FolderOpen },
+  { name: "Akten", href: "/cases", icon: FolderOpen },
   { name: "Fristen", href: "/fristen", icon: Clock },
   { name: "Termine", href: "/termine", icon: Calendar },
   { name: "AI Analyse", href: "/ai/extract", icon: Brain },
@@ -22,20 +25,43 @@ const navigation = [
 
 export function Sidebar() {
   const pathname = usePathname();
+  const [mobileOpen, setMobileOpen] = useState(false);
 
-  return (
+  // Close on route change
-    <aside className="flex h-full w-56 flex-col border-r border-neutral-200 bg-white">
+  useEffect(() => {
-      <div className="flex h-14 items-center border-b border-neutral-200 px-4">
+    setMobileOpen(false);
+  }, [pathname]);
+
+  // Close on escape
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") setMobileOpen(false);
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const navContent = (
+    <>
+      <div className="flex h-14 items-center justify-between border-b border-neutral-200 px-4">
         <span className="text-sm font-semibold text-neutral-900">KanzlAI</span>
+        <button
+          onClick={() => setMobileOpen(false)}
+          className="rounded-md p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 lg:hidden"
+          aria-label="Menü schließen"
+        >
+          <X className="h-4 w-4" />
+        </button>
       </div>
       <nav className="flex-1 space-y-0.5 p-2">
         {navigation.map((item) => {
-          const isActive = pathname.startsWith(item.href);
+          const isActive =
+            pathname === item.href || pathname.startsWith(item.href + "/");
           return (
             <Link
               key={item.href}
               href={item.href}
-              className={`flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors ${
+              className={`flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm transition-colors ${
                 isActive
                   ? "bg-neutral-100 font-medium text-neutral-900"
                   : "text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900"
@@ -47,6 +73,39 @@ export function Sidebar() {
           );
         })}
       </nav>
+    </>
+  );
+
+  return (
+    <>
+      {/* Mobile hamburger button */}
+      <button
+        onClick={() => setMobileOpen(true)}
+        className="fixed left-3 top-3.5 z-40 rounded-md bg-white p-1.5 shadow-sm ring-1 ring-neutral-200 transition-colors hover:bg-neutral-50 lg:hidden"
+        aria-label="Menü öffnen"
+      >
+        <Menu className="h-5 w-5 text-neutral-700" />
+      </button>
+
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm lg:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      {/* Mobile sidebar */}
+      {mobileOpen && (
+        <aside className="animate-slide-in-left fixed inset-y-0 left-0 z-50 flex w-56 flex-col border-r border-neutral-200 bg-white shadow-lg lg:hidden">
+          {navContent}
         </aside>
+      )}
+
+      {/* Desktop sidebar */}
+      <aside className="hidden h-full w-56 flex-col border-r border-neutral-200 bg-white lg:flex">
+        {navContent}
+      </aside>
+    </>
   );
 }

frontend/src/components/layout/TenantSwitcher.tsx

@@ -12,7 +12,9 @@ export function TenantSwitcher() {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    api.get<TenantWithRole[]>("/tenants").then((data) => {
+    api
+      .get<TenantWithRole[]>("/tenants")
+      .then((data) => {
         setTenants(data);
         const savedId = localStorage.getItem("kanzlai_tenant_id");
         const match = data.find((t) => t.id === savedId) || data[0];
@@ -20,7 +22,8 @@ export function TenantSwitcher() {
           setCurrent(match);
           localStorage.setItem("kanzlai_tenant_id", match.id);
         }
-    }).catch(() => {
+      })
+      .catch(() => {
         // Not authenticated or no tenants
       });
   }, []);
@@ -48,14 +51,16 @@ export function TenantSwitcher() {
     <div ref={ref} className="relative">
       <button
         onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50"
+        className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
       >
-        <span className="max-w-[160px] truncate">{current.name}</span>
+        <span className="max-w-[120px] truncate sm:max-w-[160px]">
+          {current.name}
+        </span>
         <ChevronsUpDown className="h-3.5 w-3.5 text-neutral-400" />
       </button>
 
       {open && tenants.length > 1 && (
-        <div className="absolute right-0 top-full z-50 mt-1 w-56 rounded-md border border-neutral-200 bg-white py-1 shadow-lg">
+        <div className="animate-fade-in absolute right-0 top-full z-50 mt-1 w-56 rounded-md border border-neutral-200 bg-white py-1 shadow-lg">
           {tenants.map((tenant) => (
             <button
               key={tenant.id}

frontend/src/components/ui/EmptyState.tsx

@@ -0,0 +1,28 @@
+import type { LucideIcon } from "lucide-react";
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+}: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-neutral-300 bg-white px-6 py-12 text-center">
+      <div className="rounded-xl bg-neutral-100 p-3">
+        <Icon className="h-6 w-6 text-neutral-400" />
+      </div>
+      <h3 className="mt-3 text-sm font-medium text-neutral-900">{title}</h3>
+      {description && (
+        <p className="mt-1 max-w-sm text-sm text-neutral-500">{description}</p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}

frontend/src/components/ui/Skeleton.tsx

@@ -0,0 +1,43 @@
+export function Skeleton({ className = "" }: { className?: string }) {
+  return (
+    <div
+      className={`animate-pulse rounded-md bg-neutral-200/60 ${className}`}
+    />
+  );
+}
+
+export function SkeletonCard({ className = "" }: { className?: string }) {
+  return (
+    <div
+      className={`rounded-xl border border-neutral-200 bg-white p-5 ${className}`}
+    >
+      <Skeleton className="h-4 w-24" />
+      <div className="mt-4 space-y-3">
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-3/4" />
+        <Skeleton className="h-3 w-1/2" />
+      </div>
+    </div>
+  );
+}
+
+export function SkeletonTable({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="overflow-hidden rounded-md border border-neutral-200 bg-white">
+      <div className="border-b border-neutral-100 px-4 py-3">
+        <Skeleton className="h-3 w-full" />
+      </div>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-4 border-b border-neutral-100 px-4 py-3 last:border-b-0"
+        >
+          <Skeleton className="h-3 w-20" />
+          <Skeleton className="h-3 flex-1" />
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-3 w-12" />
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/lib/types.ts

@@ -163,3 +163,62 @@ export interface PaginatedResponse<T> {
   page: number;
   per_page: number;
 }
+
+// Dashboard types
+
+export interface DeadlineSummary {
+  overdue_count: number;
+  due_this_week: number;
+  due_next_week: number;
+  ok_count: number;
+}
+
+export interface CaseSummary {
+  active_count: number;
+  new_this_month: number;
+  closed_count: number;
+}
+
+export interface UpcomingDeadline {
+  id: string;
+  title: string;
+  due_date: string;
+  case_id: string;
+  case_number: string;
+  case_title: string;
+}
+
+export interface UpcomingAppointment {
+  id: string;
+  title: string;
+  start_at: string;
+  end_at?: string;
+  location?: string;
+  case_id?: string;
+  case_number?: string;
+  case_title?: string;
+}
+
+export interface DashboardData {
+  deadline_summary: DeadlineSummary;
+  case_summary: CaseSummary;
+  upcoming_deadlines: UpcomingDeadline[];
+  upcoming_appointments: UpcomingAppointment[];
+}
+
+// AI Extraction types
+
+export interface ExtractedDeadline {
+  title: string;
+  due_date: string | null;
+  duration_value?: number;
+  duration_unit?: string;
+  rule_reference: string;
+  source_quote: string;
+  confidence: number;
+}
+
+export interface ExtractionResponse {
+  deadlines: ExtractedDeadline[];
+  count: number;
+}