Professionelles Redesign + Directus-Auth + Tag/Nacht-Modus

- Vollbild App-Shell mit Topbar, drei-Spalten-Workspace
- Login-Seite mit Directus JWT-Authentifizierung (in-memory Token)
- Tag/Nacht-Modus mit CSS Custom Properties (Systemfarbe als Default)
- Directus 'pictures' Collection (status=new) als Bildquelle in DrawIt
- Pfeil-Navigation durch Bilder mit Bildnummer-Anzeige
- Neues Design-System: Indigo-Akzent, SVG-Icons, professionelle Typografie
- ThemeProvider, AuthProvider, PrivateRoute, Topbar-Komponente

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/context/AuthContext.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext, useState, type ReactNode } from 'react'
+
+interface AuthContextType {
+  token: string | null
+  login: (token: string) => void
+  logout: () => void
+}
+
+const AuthContext = createContext<AuthContextType | null>(null)
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [token, setToken] = useState<string | null>(null)
+
+  return (
+    <AuthContext.Provider value={{ token, login: setToken, logout: () => setToken(null) }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext)
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider')
+  return ctx
+}

frontend/src/context/ThemeContext.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'
+
+interface ThemeContextType {
+  dark: boolean
+  toggle: () => void
+}
+
+const ThemeContext = createContext<ThemeContextType>({ dark: false, toggle: () => {} })
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [dark, setDark] = useState(
+    () => window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false
+  )
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')
+  }, [dark])
+
+  return (
+    <ThemeContext.Provider value={{ dark, toggle: () => setDark(d => !d) }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useTheme = () => useContext(ThemeContext)