feat(todo): add To-Do list feature with 3-column layout

- New todo_items DB table with priority, due date, description, user assignment
- Full CRUD API with WebSocket real-time sync
- 3-column UI: sidebar filters (All, My Tasks, Overdue, Done, by Priority),
  task list with inline badges, and detail/create pane
- Apple-inspired design with custom dropdowns, date picker, priority system (P1-P3)
- Mobile responsive: icon-only sidebar, bottom-sheet modals for detail/create
- Lists tab with sub-tabs (Packing List + To-Do), persisted selection
- Addon renamed from "Packing List" to "Lists"
- i18n keys for all 13 languages
- UI polish: notification colors use system theme, mobile navbar cleanup,
  settings page responsive buttons

client/src/pages/InAppNotificationsPage.tsx

@@ -54,8 +54,8 @@ export default function InAppNotificationsPage(): React.ReactElement {
               <h1 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
                 {t('notifications.title')}
                 {unreadCount > 0 && (
-                  <span className="ml-2 px-2 py-0.5 rounded-full text-xs font-medium"
-                    style={{ background: '#6366f1', color: '#fff' }}>
+                  <span className="ml-2 px-2 py-0.5 rounded-full text-xs font-medium align-middle inline-flex items-center justify-center"
+                    style={{ background: 'var(--text-primary)', color: 'var(--bg-primary)' }}>
                     {unreadCount}
                   </span>
                 )}
@@ -97,8 +97,8 @@ export default function InAppNotificationsPage(): React.ReactElement {
               onClick={() => setUnreadOnly(false)}
               className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
               style={{
-                background: !unreadOnly ? '#6366f1' : 'var(--bg-hover)',
-                color: !unreadOnly ? '#fff' : 'var(--text-secondary)',
+                background: !unreadOnly ? 'var(--text-primary)' : 'var(--bg-hover)',
+                color: !unreadOnly ? 'var(--bg-primary)' : 'var(--text-secondary)',
               }}
             >
               {t('notifications.all')}
@@ -107,8 +107,8 @@ export default function InAppNotificationsPage(): React.ReactElement {
               onClick={() => setUnreadOnly(true)}
               className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
               style={{
-                background: unreadOnly ? '#6366f1' : 'var(--bg-hover)',
-                color: unreadOnly ? '#fff' : 'var(--text-secondary)',
+                background: unreadOnly ? 'var(--text-primary)' : 'var(--bg-hover)',
+                color: unreadOnly ? 'var(--bg-primary)' : 'var(--text-secondary)',
               }}
             >
               {t('notifications.unreadOnly')}
@@ -122,7 +122,7 @@ export default function InAppNotificationsPage(): React.ReactElement {
           >
             {isLoading && displayed.length === 0 ? (
               <div className="flex items-center justify-center py-16">
-                <div className="w-6 h-6 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin" />
+                <div className="w-6 h-6 border-2 border-slate-200 border-t-current rounded-full animate-spin" />
               </div>
             ) : displayed.length === 0 ? (
               <div className="flex flex-col items-center justify-center py-16 px-4 text-center gap-3">
@@ -139,7 +139,7 @@ export default function InAppNotificationsPage(): React.ReactElement {
             {/* Infinite scroll trigger */}
             {hasMore && (
               <div ref={loaderRef} className="flex items-center justify-center py-4">
-                {isLoading && <div className="w-5 h-5 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin" />}
+                {isLoading && <div className="w-5 h-5 border-2 border-slate-200 border-t-current rounded-full animate-spin" />}
               </div>
             )}
           </div>

client/src/pages/SettingsPage.tsx

@@ -550,7 +550,7 @@ export default function SettingsPage(): React.ReactElement {
             {/* Dark Mode Toggle */}
             <div>
               <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.colorMode')}</label>
-              <div className="flex gap-3">
+              <div className="flex gap-3" style={{ flexWrap: 'wrap' }}>
                 {[
                   { value: 'light', label: t('settings.light'), icon: Sun },
                   { value: 'dark', label: t('settings.dark'), icon: Moon },
@@ -567,8 +567,8 @@ export default function SettingsPage(): React.ReactElement {
                         } catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
                       }}
                       style={{
-                        display: 'flex', alignItems: 'center', gap: 8,
-                        padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                        display: 'flex', alignItems: 'center', gap: 6,
+                        padding: '10px 14px', borderRadius: 10, cursor: 'pointer', flex: '1 1 0', justifyContent: 'center', minWidth: 0,
                         fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
                         border: isActive ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
                         background: isActive ? 'var(--bg-hover)' : 'var(--bg-card)',
@@ -1275,7 +1275,8 @@ export default function SettingsPage(): React.ReactElement {
                 className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
               >
                 {saving.profile ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <Save className="w-4 h-4" />}
-                {t('settings.saveProfile')}
+                <span className="hidden sm:inline">{t('settings.saveProfile')}</span>
+                <span className="sm:hidden">{t('common.save')}</span>
               </button>
               <button
                 onClick={async () => {
@@ -1295,7 +1296,8 @@ export default function SettingsPage(): React.ReactElement {
                 style={{ border: '1px solid #fecaca' }}
               >
                 <Trash2 size={14} />
-                {t('settings.deleteAccount')}
+                <span className="hidden sm:inline">{t('settings.deleteAccount')}</span>
+                <span className="sm:hidden">{t('common.delete')}</span>
               </button>
             </div>
           </Section>

client/src/pages/TripPlannerPage.tsx

@@ -17,6 +17,7 @@ import { ReservationModal } from '../components/Planner/ReservationModal'
 import MemoriesPanel from '../components/Memories/MemoriesPanel'
 import ReservationsPanel from '../components/Planner/ReservationsPanel'
 import PackingListPanel from '../components/Packing/PackingListPanel'
+import TodoListPanel from '../components/Todo/TodoListPanel'
 import FileManager from '../components/Files/FileManager'
 import BudgetPanel from '../components/Budget/BudgetPanel'
 import CollabPanel from '../components/Collab/CollabPanel'
@@ -31,7 +32,40 @@ import { useTripWebSocket } from '../hooks/useTripWebSocket'
 import { useRouteCalculation } from '../hooks/useRouteCalculation'
 import { usePlaceSelection } from '../hooks/usePlaceSelection'
 import { usePlannerHistory } from '../hooks/usePlannerHistory'
-import type { Accommodation, TripMember, Day, Place, Reservation } from '../types'
+import type { Accommodation, TripMember, Day, Place, Reservation, PackingItem, TodoItem } from '../types'
+import { ListTodo } from 'lucide-react'
+
+function ListsContainer({ tripId, packingItems, todoItems }: { tripId: number; packingItems: PackingItem[]; todoItems: TodoItem[] }) {
+  const [subTab, setSubTab] = useState<'packing' | 'todo'>(() => {
+    return (sessionStorage.getItem(`trip-lists-subtab-${tripId}`) as 'packing' | 'todo') || 'packing'
+  })
+  const setSubTabPersist = (tab: 'packing' | 'todo') => { setSubTab(tab); sessionStorage.setItem(`trip-lists-subtab-${tripId}`, tab) }
+  const { t } = useTranslation()
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: 4, padding: '4px 16px 0', borderBottom: '1px solid var(--border-faint)', marginBottom: 8 }}>
+        {([
+          { id: 'packing' as const, label: t('todo.subtab.packing'), icon: PackageCheck },
+          { id: 'todo' as const, label: t('todo.subtab.todo'), icon: ListTodo },
+        ]).map(tab => (
+          <button key={tab.id} onClick={() => setSubTabPersist(tab.id)}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 500, padding: '8px 14px',
+              border: 'none', cursor: 'pointer', fontFamily: 'inherit', background: 'none',
+              color: subTab === tab.id ? 'var(--text-primary)' : 'var(--text-faint)',
+              borderBottom: subTab === tab.id ? '2px solid var(--text-primary)' : '2px solid transparent',
+              marginBottom: -1, transition: 'color 0.15s',
+            }}>
+            <tab.icon size={14} />
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      {subTab === 'packing' && <PackingListPanel tripId={tripId} items={packingItems} />}
+      {subTab === 'todo' && <TodoListPanel tripId={tripId} items={todoItems} />}
+    </div>
+  )
+}
 
 export default function TripPlannerPage(): React.ReactElement | null {
   const { id: tripId } = useParams<{ id: string }>()
@@ -44,6 +78,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const places = useTripStore(s => s.places)
   const assignments = useTripStore(s => s.assignments)
   const packingItems = useTripStore(s => s.packingItems)
+  const todoItems = useTripStore(s => s.todoItems)
   const categories = useTripStore(s => s.categories)
   const reservations = useTripStore(s => s.reservations)
   const budgetItems = useTripStore(s => s.budgetItems)
@@ -88,7 +123,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const TRIP_TABS = [
     { id: 'plan', label: t('trip.tabs.plan'), icon: Map },
     { id: 'buchungen', label: t('trip.tabs.reservations'), shortLabel: t('trip.tabs.reservationsShort'), icon: Ticket },
-    ...(enabledAddons.packing ? [{ id: 'packliste', label: t('trip.tabs.packing'), shortLabel: t('trip.tabs.packingShort'), icon: PackageCheck }] : []),
+    ...(enabledAddons.packing ? [{ id: 'listen', label: t('trip.tabs.lists'), shortLabel: t('trip.tabs.listsShort'), icon: PackageCheck }] : []),
     ...(enabledAddons.budget ? [{ id: 'finanzplan', label: t('trip.tabs.budget'), icon: Wallet }] : []),
     ...(enabledAddons.documents ? [{ id: 'dateien', label: t('trip.tabs.files'), icon: FolderOpen }] : []),
     ...(enabledAddons.memories ? [{ id: 'memories', label: t('memories.title'), icon: Camera }] : []),
@@ -861,9 +896,9 @@ export default function TripPlannerPage(): React.ReactElement | null {
           </div>
         )}
 
-        {activeTab === 'packliste' && (
-          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', maxWidth: 1200, margin: '0 auto', width: '100%', padding: '8px 0' }}>
-            <PackingListPanel tripId={tripId} items={packingItems} />
+        {activeTab === 'listen' && (
+          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', maxWidth: 1800, margin: '0 auto', width: '100%', padding: '8px 0' }}>
+            <ListsContainer tripId={tripId} packingItems={packingItems} todoItems={todoItems} />
           </div>
         )}