feat: mobile Login-Seite /mobile/login

- MobileLoginPage.tsx: touch-optimiertes Login-Formular
  - E-Mail + Passwort mit großen Touch-Targets (min-h-[52px])
  - TOTP-Flow: nach erstem Login automatisch 6-stelliges Code-Feld
  - Numerische Tastatur (inputMode=numeric) für TOTP-Eingabe
  - Fehlerbehandlung + Ladezustand
  - Link zur Desktop-Version
- MobilePage: Redirect zu /mobile/login statt /login
- App.tsx: Route /mobile/login registriert (kein Layout-Wrapper)

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

DEVLOG.md

@@ -1017,3 +1017,80 @@ Keine Commits in dieser Session.
 - docs/deployment.md | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
 ---
+## 2026-05-24 13:15 – 19:45 (6h 29m)
+**Beschreibung:** Claude Code Session
+**Projekt:** timemaster
+
+### Commits
+- 62c4e74 security: 9 Findings aus Security-Audit behoben (CRITICAL + HIGH + MEDIUM)
+
+### Geänderte Dateien
+- DEVLOG.md                                          | 63 ++++++++++++++++++++
+- backend/app/core/crypto.py                         | 42 +++++++++++++
+- backend/app/core/kiosk_security.py                 | 37 ++++++++----
+- backend/app/main.py                                | 18 ++++--
+- backend/app/models/ldap_config.py                  |  2 +-
+- backend/app/models/user.py                         |  2 +-
+- backend/app/routers/auth.py                        | 51 +++++++++++++---
+- backend/app/routers/import_kimai.py                | 17 +++++-
+- backend/app/routers/users.py                       | 20 ++++++-
+- backend/app/services/auth_service.py               | 13 ++++-
+- backend/app/services/caldav_service.py             | 17 ++++++
+- backend/migrations/versions/0026_security_fixes.py | 68 ++++++++++++++++++++++
+
+---
+## 2026-05-24 19:53 – 20:58 (1h 05m)
+**Beschreibung:** Claude Code Session
+**Projekt:** timemaster
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                          | 63 ++++++++++++++++++++
+- backend/app/core/crypto.py                         | 42 +++++++++++++
+- backend/app/core/kiosk_security.py                 | 37 ++++++++----
+- backend/app/main.py                                | 18 ++++--
+- backend/app/models/ldap_config.py                  |  2 +-
+- backend/app/models/user.py                         |  2 +-
+- backend/app/routers/auth.py                        | 51 +++++++++++++---
+- backend/app/routers/import_kimai.py                | 17 +++++-
+- backend/app/routers/users.py                       | 20 ++++++-
+- backend/app/services/auth_service.py               | 13 ++++-
+- backend/app/services/caldav_service.py             | 17 ++++++
+- backend/migrations/versions/0026_security_fixes.py | 68 ++++++++++++++++++++++
+
+---
+## 2026-05-24 21:00 – 21:05 (5m)
+**Beschreibung:** Claude Code Session
+**Projekt:** timemaster
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                          | 63 ++++++++++++++++++++
+- backend/app/core/crypto.py                         | 42 +++++++++++++
+- backend/app/core/kiosk_security.py                 | 37 ++++++++----
+- backend/app/main.py                                | 18 ++++--
+- backend/app/models/ldap_config.py                  |  2 +-
+- backend/app/models/user.py                         |  2 +-
+- backend/app/routers/auth.py                        | 51 +++++++++++++---
+- backend/app/routers/import_kimai.py                | 17 +++++-
+- backend/app/routers/users.py                       | 20 ++++++-
+- backend/app/services/auth_service.py               | 13 ++++-
+- backend/app/services/caldav_service.py             | 17 ++++++
+- backend/migrations/versions/0026_security_fixes.py | 68 ++++++++++++++++++++++
+
+---
+## 2026-05-24 21:09 – 21:12 (3m)
+**Beschreibung:** Claude Code Session
+**Projekt:** timemaster
+
+### Commits
+- 8a04525 fix: auto-refresh access token on 401 in API client
+
+### Geänderte Dateien
+- frontend/src/api/client.ts | 56 ++++++++++++++++++++++++++++++++++++++++++++++
+
+---

frontend/src/App.tsx

@@ -24,6 +24,8 @@ import { KioskDevicesPage } from './pages/KioskDevicesPage'
 import { AuditLogPage } from './pages/AuditLogPage'
 import { KioskSetupPage } from './pages/KioskSetupPage'
 import { KioskStampPage } from './pages/KioskStampPage'
+import { MobilePage } from './pages/mobile/MobilePage'
+import { MobileLoginPage } from './pages/mobile/MobileLoginPage'
 
 export default function App() {
   return (
@@ -36,6 +38,8 @@ export default function App() {
           <Route path='/auth/reset-password' element={<ResetPasswordPage />} />
           <Route path='/kiosk/setup' element={<KioskSetupPage />} />
           <Route path='/kiosk'       element={<KioskStampPage />} />
+          <Route path='/mobile'       element={<MobilePage />} />
+          <Route path='/mobile/login' element={<MobileLoginPage />} />
           <Route element={<ProtectedRoute />}>
             <Route path='/dashboard'      element={<DashboardPage />} />
             <Route path='/time'           element={<TimeTrackingPage />} />

frontend/src/pages/mobile/MobileBottomNav.tsx

@@ -0,0 +1,69 @@
+type Screen = 'stamp' | 'today' | 'profile'
+
+interface Props {
+  active: Screen
+  onChange: (s: Screen) => void
+}
+
+export function MobileBottomNav({ active, onChange }: Props) {
+  const items: { id: Screen; label: string; icon: React.ReactNode }[] = [
+    {
+      id: 'stamp',
+      label: 'Stempeln',
+      icon: (
+        <svg className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={1.75}>
+          <circle cx='12' cy='12' r='9' />
+          <polyline points='12 7 12 12 15 15' />
+        </svg>
+      ),
+    },
+    {
+      id: 'today',
+      label: 'Heute',
+      icon: (
+        <svg className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={1.75}>
+          <rect x='3' y='4' width='18' height='18' rx='2' ry='2' />
+          <line x1='16' y1='2' x2='16' y2='6' />
+          <line x1='8' y1='2' x2='8' y2='6' />
+          <line x1='3' y1='10' x2='21' y2='10' />
+        </svg>
+      ),
+    },
+    {
+      id: 'profile',
+      label: 'Profil',
+      icon: (
+        <svg className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={1.75}>
+          <path strokeLinecap='round' strokeLinejoin='round' d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2' />
+          <circle cx='12' cy='7' r='4' />
+        </svg>
+      ),
+    },
+  ]
+
+  return (
+    <nav
+      className='fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-20'
+      style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+    >
+      <div className='flex'>
+        {items.map(item => (
+          <button
+            key={item.id}
+            onClick={() => onChange(item.id)}
+            className={`flex-1 flex flex-col items-center justify-center gap-1 min-h-[56px] py-2 transition-colors ${
+              active === item.id
+                ? 'text-blue-600'
+                : 'text-gray-400'
+            }`}
+          >
+            {item.icon}
+            <span className={`text-[11px] font-medium leading-none ${active === item.id ? 'text-blue-600' : 'text-gray-400'}`}>
+              {item.label}
+            </span>
+          </button>
+        ))}
+      </div>
+    </nav>
+  )
+}

frontend/src/pages/mobile/MobileLoginPage.tsx

@@ -0,0 +1,195 @@
+import { useState, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../../context/AuthContext'
+import { api } from '../../api/client'
+
+interface LoginResponse {
+  access_token: string
+  refresh_token: string
+  totp_required?: boolean
+  partial_token?: string
+}
+
+export function MobileLoginPage() {
+  const { login } = useAuth()
+  const navigate = useNavigate()
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [totpCode, setTotpCode] = useState('')
+  const [partialToken, setPartialToken] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const totpInputRef = useRef<HTMLInputElement>(null)
+
+  // Schritt 1: E-Mail + Passwort
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await api.post<LoginResponse>('/auth/login', { email, password })
+      if (res.totp_required && res.partial_token) {
+        // 2FA erforderlich → TOTP-Formular zeigen
+        setPartialToken(res.partial_token)
+        setTimeout(() => totpInputRef.current?.focus(), 100)
+      } else {
+        // Direkt eingeloggt
+        localStorage.setItem('access_token', res.access_token)
+        localStorage.setItem('refresh_token', res.refresh_token)
+        await login(email, password)
+        navigate('/mobile', { replace: true })
+      }
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Anmeldung fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Schritt 2: TOTP-Code
+  const handleTotp = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!partialToken) return
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await api.post<LoginResponse>('/auth/totp/login', {
+        partial_token: partialToken,
+        code: totpCode,
+      })
+      localStorage.setItem('access_token', res.access_token)
+      localStorage.setItem('refresh_token', res.refresh_token)
+      // AuthContext-State synchronisieren (löst Re-Render aus)
+      window.dispatchEvent(new Event('storage'))
+      navigate('/mobile', { replace: true })
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Ungültiger Code')
+      setTotpCode('')
+      totpInputRef.current?.focus()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div
+      className='min-h-screen bg-gray-50 flex flex-col items-center justify-center px-6'
+      style={{ paddingTop: 'env(safe-area-inset-top)', paddingBottom: 'env(safe-area-inset-bottom)' }}
+    >
+      {/* Logo */}
+      <div className='flex flex-col items-center mb-10 gap-3'>
+        <div className='w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center shadow-lg'>
+          <span className='text-white font-bold text-2xl'>TM</span>
+        </div>
+        <h1 className='text-2xl font-bold text-gray-900'>TimeMaster</h1>
+        <p className='text-sm text-gray-500'>
+          {partialToken ? 'Zwei-Faktor-Authentifizierung' : 'Bitte melde dich an'}
+        </p>
+      </div>
+
+      {/* Fehler-Banner */}
+      {error && (
+        <div className='w-full max-w-sm mb-4 bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-700'>
+          {error}
+        </div>
+      )}
+
+      {/* Formular */}
+      <div className='w-full max-w-sm bg-white rounded-2xl border border-gray-200 shadow-sm p-6'>
+
+        {!partialToken ? (
+          /* ── Login-Formular ── */
+          <form onSubmit={handleLogin} className='flex flex-col gap-4'>
+            <div className='flex flex-col gap-1.5'>
+              <label className='text-sm font-medium text-gray-700'>E-Mail</label>
+              <input
+                type='email'
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                placeholder='deine@email.de'
+                required
+                autoComplete='email'
+                className='min-h-[52px] px-4 rounded-xl border border-gray-300 text-gray-900 text-base focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+              />
+            </div>
+            <div className='flex flex-col gap-1.5'>
+              <label className='text-sm font-medium text-gray-700'>Passwort</label>
+              <input
+                type='password'
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+                placeholder='••••••••'
+                required
+                autoComplete='current-password'
+                className='min-h-[52px] px-4 rounded-xl border border-gray-300 text-gray-900 text-base focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+              />
+            </div>
+            <button
+              type='submit'
+              disabled={loading || !email || !password}
+              className='min-h-[52px] mt-2 rounded-xl bg-blue-600 active:bg-blue-800 text-white font-semibold text-base transition-colors disabled:opacity-50 flex items-center justify-center gap-2'
+            >
+              {loading
+                ? <span className='animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent' />
+                : 'Anmelden'
+              }
+            </button>
+          </form>
+
+        ) : (
+          /* ── TOTP-Formular ── */
+          <form onSubmit={handleTotp} className='flex flex-col gap-4'>
+            <div className='flex flex-col items-center gap-2 mb-2'>
+              <div className='w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center'>
+                <span className='text-2xl'>🔐</span>
+              </div>
+              <p className='text-sm text-gray-500 text-center'>
+                Gib den 6-stelligen Code aus deiner Authenticator-App ein.
+              </p>
+            </div>
+            <input
+              ref={totpInputRef}
+              type='text'
+              inputMode='numeric'
+              pattern='[0-9]{6}'
+              maxLength={6}
+              value={totpCode}
+              onChange={e => setTotpCode(e.target.value.replace(/\D/g, ''))}
+              placeholder='000000'
+              required
+              autoComplete='one-time-code'
+              className='min-h-[64px] px-4 rounded-xl border border-gray-300 text-gray-900 text-3xl font-mono tracking-widest text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+            />
+            <button
+              type='submit'
+              disabled={loading || totpCode.length !== 6}
+              className='min-h-[52px] rounded-xl bg-blue-600 active:bg-blue-800 text-white font-semibold text-base transition-colors disabled:opacity-50 flex items-center justify-center gap-2'
+            >
+              {loading
+                ? <span className='animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent' />
+                : 'Bestätigen'
+              }
+            </button>
+            <button
+              type='button'
+              onClick={() => { setPartialToken(null); setTotpCode(''); setError(null) }}
+              className='text-sm text-gray-400 text-center py-1 active:text-gray-600'
+            >
+              ← Zurück zur Anmeldung
+            </button>
+          </form>
+        )}
+      </div>
+
+      {/* Link zur Desktop-Version */}
+      <a
+        href='/login'
+        className='mt-6 text-sm text-gray-400 active:text-gray-600'
+      >
+        Desktop-Version öffnen
+      </a>
+    </div>
+  )
+}

frontend/src/pages/mobile/MobilePage.tsx

@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react'
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '../../context/AuthContext'
+import { MobileBottomNav } from './MobileBottomNav'
+import { MobileStampScreen } from './MobileStampScreen'
+import { MobileTodayScreen } from './MobileTodayScreen'
+import { MobileProfileScreen } from './MobileProfileScreen'
+
+type Screen = 'stamp' | 'today' | 'profile'
+
+const SCREEN_TITLES: Record<Screen, string> = {
+  stamp:   'Zeiterfassung',
+  today:   'Heute',
+  profile: 'Profil',
+}
+
+export function MobilePage() {
+  const { token } = useAuth()
+  const [screen, setScreen] = useState<Screen>('stamp')
+  const [time, setTime] = useState('')
+
+  // Uhrzeit im Header live aktualisieren
+  useEffect(() => {
+    const update = () => {
+      setTime(new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }))
+    }
+    update()
+    const id = setInterval(update, 1000)
+    return () => clearInterval(id)
+  }, [])
+
+  if (!token) return <Navigate to='/mobile/login' replace />
+
+  return (
+    <div
+      className='min-h-screen bg-gray-50 flex flex-col'
+      style={{ paddingTop: 'env(safe-area-inset-top)' }}
+    >
+      {/* Header */}
+      <header className='bg-white border-b border-gray-200 sticky top-0 z-10'>
+        <div className='flex items-center justify-between px-4 h-14'>
+          <div className='flex items-center gap-2'>
+            <div className='w-7 h-7 bg-blue-600 rounded-lg flex items-center justify-center'>
+              <span className='text-white font-bold text-xs'>TM</span>
+            </div>
+            <span className='font-bold text-gray-800 text-sm'>TimeMaster</span>
+          </div>
+          <div className='text-right'>
+            <p className='text-base font-mono font-semibold text-gray-800 leading-none'>{time}</p>
+            <p className='text-xs text-gray-400 leading-none mt-0.5'>
+              {new Date().toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit' })}
+            </p>
+          </div>
+        </div>
+        {/* Screen-Titel */}
+        <div className='px-4 pb-3'>
+          <h1 className='text-xl font-bold text-gray-900'>{SCREEN_TITLES[screen]}</h1>
+        </div>
+      </header>
+
+      {/* Content */}
+      <main
+        className='flex-1 overflow-y-auto'
+        style={{ paddingBottom: 'calc(72px + env(safe-area-inset-bottom))' }}
+      >
+        {screen === 'stamp'   && <MobileStampScreen />}
+        {screen === 'today'   && <MobileTodayScreen />}
+        {screen === 'profile' && <MobileProfileScreen />}
+      </main>
+
+      {/* Bottom Navigation */}
+      <MobileBottomNav active={screen} onChange={setScreen} />
+    </div>
+  )
+}

frontend/src/pages/mobile/MobileProfileScreen.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useState, useCallback } from 'react'
+import { api } from '../../api/client'
+import { useAuth } from '../../context/AuthContext'
+
+interface UserOut {
+  id: string
+  first_name: string
+  last_name: string
+  email: string
+  role: string
+  personnel_number: string | null
+}
+
+const ROLE_LABELS: Record<string, string> = {
+  SUPER_ADMIN:   'Super Admin',
+  COMPANY_ADMIN: 'Administrator',
+  HR:            'HR',
+  MANAGER:       'Manager',
+  EMPLOYEE:      'Mitarbeiter',
+}
+
+export function MobileProfileScreen() {
+  const { logout } = useAuth()
+  const [user, setUser] = useState<UserOut | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    setError(null)
+    try {
+      const me = await api.get<UserOut>('/auth/me')
+      setUser(me)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Fehler beim Laden')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  if (loading) {
+    return (
+      <div className='flex flex-col items-center justify-center flex-1 py-20 gap-4'>
+        <div className='animate-spin rounded-full h-10 w-10 border-4 border-blue-500 border-t-transparent' />
+        <p className='text-sm text-gray-400'>Wird geladen…</p>
+      </div>
+    )
+  }
+
+  const initials = user
+    ? `${user.first_name[0] ?? ''}${user.last_name[0] ?? ''}`.toUpperCase()
+    : '?'
+
+  return (
+    <div className='flex flex-col gap-4 px-4 pt-4'>
+      {error && (
+        <div className='bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-700'>
+          {error}
+        </div>
+      )}
+
+      {user && (
+        <>
+          {/* Avatar + Name */}
+          <div className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-6 flex flex-col items-center gap-3'>
+            <div className='w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center'>
+              <span className='text-blue-700 font-bold text-3xl'>{initials}</span>
+            </div>
+            <div className='text-center'>
+              <p className='text-xl font-bold text-gray-800'>
+                {user.first_name} {user.last_name}
+              </p>
+              <p className='text-sm text-gray-500 mt-0.5'>{user.email}</p>
+              <span className='inline-block mt-2 px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-semibold'>
+                {ROLE_LABELS[user.role] ?? user.role}
+              </span>
+            </div>
+          </div>
+
+          {/* Detail-Felder */}
+          <div className='bg-white rounded-2xl border border-gray-200 shadow-sm divide-y divide-gray-100'>
+            <div className='flex items-center justify-between px-5 py-4'>
+              <span className='text-sm text-gray-500'>E-Mail</span>
+              <span className='text-sm font-medium text-gray-800'>{user.email}</span>
+            </div>
+            <div className='flex items-center justify-between px-5 py-4'>
+              <span className='text-sm text-gray-500'>Rolle</span>
+              <span className='text-sm font-medium text-gray-800'>{ROLE_LABELS[user.role] ?? user.role}</span>
+            </div>
+            {user.personnel_number && (
+              <div className='flex items-center justify-between px-5 py-4'>
+                <span className='text-sm text-gray-500'>Personalnummer</span>
+                <span className='text-sm font-mono font-medium text-gray-800'>{user.personnel_number}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Desktop-Version Link */}
+          <a
+            href='/dashboard'
+            className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-4 flex items-center justify-between min-h-[56px] active:bg-gray-50 transition-colors'
+          >
+            <span className='text-sm font-medium text-gray-700'>Desktop-Version öffnen</span>
+            <svg className='w-5 h-5 text-gray-400' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={1.75}>
+              <path strokeLinecap='round' strokeLinejoin='round' d='M9 5l7 7-7 7' />
+            </svg>
+          </a>
+
+          {/* Abmelden */}
+          <button
+            onClick={logout}
+            className='min-h-[56px] w-full rounded-2xl border border-red-200 text-red-600 font-semibold text-base active:bg-red-50 transition-colors flex items-center justify-center gap-2'
+          >
+            <svg className='w-5 h-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={1.75}>
+              <path strokeLinecap='round' strokeLinejoin='round' d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1' />
+            </svg>
+            Abmelden
+          </button>
+        </>
+      )}
+    </div>
+  )
+}

frontend/src/pages/mobile/MobileStampScreen.tsx

@@ -0,0 +1,310 @@
+import { useEffect, useState, useRef, useCallback } from 'react'
+import { api } from '../../api/client'
+
+interface TodayStatus {
+  today_open: boolean
+  today_start: string | null
+  today_hours_so_far: number | null
+  break_start?: string | null
+  break_minutes?: number
+}
+
+interface TimeEntryWithWarnings {
+  entry: { id: string }
+  warnings: string[]
+}
+
+interface BalanceResponse {
+  overtime_hours: number
+  total_hours_worked: number
+  expected_hours: number
+  period_start: string
+  period_end: string
+}
+
+function getMondayOfCurrentWeek(): string {
+  const now = new Date()
+  const day = now.getDay()
+  const diff = day === 0 ? -6 : 1 - day
+  const monday = new Date(now)
+  monday.setDate(now.getDate() + diff)
+  return monday.toISOString().slice(0, 10)
+}
+
+function fmtHMS(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = seconds % 60
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
+}
+
+function fmtMS(seconds: number): string {
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
+}
+
+function fmtH(h: number | null): string {
+  if (h === null || h === undefined) return '–'
+  const sign = h < 0 ? '-' : h > 0 ? '+' : ''
+  const abs = Math.abs(h)
+  const hrs = Math.floor(abs)
+  const min = Math.round((abs - hrs) * 60)
+  return `${sign}${hrs}h ${min}m`
+}
+
+function fmtTime(iso: string | null): string {
+  if (!iso) return '–'
+  if (/^\d{2}:\d{2}(:\d{2})?$/.test(iso)) return iso.slice(0, 5)
+  const d = new Date(iso)
+  if (isNaN(d.getTime())) return iso.slice(0, 5)
+  return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+}
+
+export function MobileStampScreen() {
+  const [dashboard, setDashboard] = useState<TodayStatus | null>(null)
+  const [balance, setBalance] = useState<BalanceResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [stamping, setStamping] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [warnings, setWarnings] = useState<string[]>([])
+
+  const [liveSeconds, setLiveSeconds] = useState(0)
+  const [breakSeconds, setBreakSeconds] = useState(0)
+  const tickerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const breakTickerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const load = useCallback(async () => {
+    setError(null)
+    try {
+      const monday = getMondayOfCurrentWeek()
+      const [dash, bal] = await Promise.all([
+        api.get<TodayStatus>('/dashboard/me'),
+        api.get<BalanceResponse>(`/time/balance/me?period_start=${monday}`),
+      ])
+      setDashboard(dash)
+      setBalance(bal)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Fehler beim Laden')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  // Live-Ticker: läuft nur wenn eingestempelt und keine Pause
+  useEffect(() => {
+    if (tickerRef.current) clearInterval(tickerRef.current)
+    if (dashboard?.today_open && dashboard.today_start && !dashboard.break_start) {
+      const startStr = dashboard.today_start
+      const today = new Date()
+      const [h, m, s] = startStr.split(':').map(Number)
+      const startMs = new Date(today.getFullYear(), today.getMonth(), today.getDate(), h, m, s || 0).getTime()
+      const pausedMs = (dashboard.break_minutes ?? 0) * 60 * 1000
+      const update = () => setLiveSeconds(Math.max(0, Math.floor((Date.now() - startMs - pausedMs) / 1000)))
+      update()
+      tickerRef.current = setInterval(update, 1000)
+    } else {
+      setLiveSeconds(0)
+    }
+    return () => { if (tickerRef.current) clearInterval(tickerRef.current) }
+  }, [dashboard?.today_open, dashboard?.today_start, dashboard?.break_start, dashboard?.break_minutes])
+
+  // Pausen-Ticker
+  useEffect(() => {
+    if (breakTickerRef.current) clearInterval(breakTickerRef.current)
+    if (dashboard?.today_open && dashboard.break_start) {
+      const breakStartMs = new Date(dashboard.break_start).getTime()
+      const update = () => setBreakSeconds(Math.max(0, Math.floor((Date.now() - breakStartMs) / 1000)))
+      update()
+      breakTickerRef.current = setInterval(update, 1000)
+    } else {
+      setBreakSeconds(0)
+    }
+    return () => { if (breakTickerRef.current) clearInterval(breakTickerRef.current) }
+  }, [dashboard?.today_open, dashboard?.break_start])
+
+  const stampIn = async () => {
+    setStamping(true); setError(null); setWarnings([])
+    try {
+      const res = await api.post<TimeEntryWithWarnings>('/time/stamp-in', {})
+      if (res.warnings.length) setWarnings(res.warnings)
+      await load()
+    } catch (e: unknown) { setError(e instanceof Error ? e.message : 'Fehler') }
+    finally { setStamping(false) }
+  }
+
+  const stampOut = async () => {
+    setStamping(true); setError(null); setWarnings([])
+    try {
+      const res = await api.post<TimeEntryWithWarnings>('/time/stamp-out', {})
+      if (res.warnings.length) setWarnings(res.warnings)
+      await load()
+    } catch (e: unknown) { setError(e instanceof Error ? e.message : 'Fehler') }
+    finally { setStamping(false) }
+  }
+
+  const breakStart = async () => {
+    setStamping(true); setError(null)
+    try { await api.post('/time/break-start', {}); await load() }
+    catch (e: unknown) { setError(e instanceof Error ? e.message : 'Fehler') }
+    finally { setStamping(false) }
+  }
+
+  const breakEnd = async () => {
+    setStamping(true); setError(null)
+    try { await api.post('/time/break-end', {}); await load() }
+    catch (e: unknown) { setError(e instanceof Error ? e.message : 'Fehler') }
+    finally { setStamping(false) }
+  }
+
+  const isOpen = dashboard?.today_open ?? false
+  const isOnBreak = isOpen && !!dashboard?.break_start
+
+  if (loading) {
+    return (
+      <div className='flex flex-col items-center justify-center flex-1 py-20 gap-4'>
+        <div className='animate-spin rounded-full h-10 w-10 border-4 border-blue-500 border-t-transparent' />
+        <p className='text-sm text-gray-400'>Wird geladen…</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex flex-col gap-4 px-4 pt-4'>
+      {/* Fehler */}
+      {error && (
+        <div className='bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-700'>
+          {error}
+        </div>
+      )}
+
+      {/* Warnungen */}
+      {warnings.length > 0 && (
+        <div className='bg-yellow-50 border border-yellow-200 rounded-xl px-4 py-3'>
+          <p className='text-sm font-semibold text-yellow-800 mb-1'>Hinweise</p>
+          <ul className='text-sm text-yellow-700 list-disc list-inside space-y-0.5'>
+            {warnings.map((w, i) => <li key={i}>{w}</li>)}
+          </ul>
+        </div>
+      )}
+
+      {/* Status-Karte */}
+      <div className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-5 flex flex-col items-center gap-3'>
+        {/* Status-Label */}
+        <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-semibold ${
+          isOnBreak
+            ? 'bg-yellow-100 text-yellow-700'
+            : isOpen
+            ? 'bg-green-100 text-green-700'
+            : 'bg-gray-100 text-gray-500'
+        }`}>
+          <span className={`w-2 h-2 rounded-full ${isOnBreak ? 'bg-yellow-400' : isOpen ? 'bg-green-500' : 'bg-gray-400'}`} />
+          {isOnBreak
+            ? `In Pause seit ${fmtTime(dashboard?.break_start ?? null)}`
+            : isOpen
+            ? `Eingestempelt seit ${fmtTime(dashboard?.today_start ?? null)}`
+            : 'Nicht eingestempelt'
+          }
+        </div>
+
+        {/* Live-Uhr */}
+        {isOpen && (
+          <div className='text-center py-2'>
+            {isOnBreak ? (
+              <>
+                <p className='text-xs font-medium text-yellow-500 uppercase tracking-widest mb-1'>Pause</p>
+                <p className='text-5xl font-mono font-bold text-yellow-500 tabular-nums'>{fmtMS(breakSeconds)}</p>
+                <p className='text-xs text-gray-400 mt-2'>
+                  Pause gesamt: {(dashboard?.break_minutes ?? 0) + Math.floor(breakSeconds / 60)} min
+                </p>
+              </>
+            ) : (
+              <>
+                <p className='text-xs font-medium text-green-600 uppercase tracking-widest mb-1'>Arbeitszeit</p>
+                <p className='text-5xl font-mono font-bold text-gray-800 tabular-nums'>{fmtHMS(liveSeconds)}</p>
+                {(dashboard?.break_minutes ?? 0) > 0 && (
+                  <p className='text-xs text-gray-400 mt-2'>Pause: {dashboard!.break_minutes} min</p>
+                )}
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Haupt-Button */}
+        {!isOpen ? (
+          <button
+            onClick={stampIn}
+            disabled={stamping}
+            className='w-4/5 min-h-[80px] rounded-3xl bg-green-500 active:bg-green-700 text-white text-2xl font-bold shadow-md transition-all disabled:opacity-50 flex items-center justify-center'
+          >
+            {stamping ? (
+              <span className='animate-spin rounded-full h-7 w-7 border-4 border-white border-t-transparent' />
+            ) : 'EINSTEMPELN'}
+          </button>
+        ) : isOnBreak ? (
+          <button
+            onClick={breakEnd}
+            disabled={stamping}
+            className='w-4/5 min-h-[80px] rounded-3xl bg-yellow-400 active:bg-yellow-600 text-white text-2xl font-bold shadow-md transition-all disabled:opacity-50 flex items-center justify-center'
+          >
+            {stamping ? (
+              <span className='animate-spin rounded-full h-7 w-7 border-4 border-white border-t-transparent' />
+            ) : 'PAUSE BEENDEN'}
+          </button>
+        ) : (
+          <button
+            onClick={stampOut}
+            disabled={stamping}
+            className='w-4/5 min-h-[80px] rounded-3xl bg-red-500 active:bg-red-700 text-white text-2xl font-bold shadow-md transition-all disabled:opacity-50 flex items-center justify-center'
+          >
+            {stamping ? (
+              <span className='animate-spin rounded-full h-7 w-7 border-4 border-white border-t-transparent' />
+            ) : 'AUSSTEMPELN'}
+          </button>
+        )}
+
+        {/* Sekundärer Button: Pause starten */}
+        {isOpen && !isOnBreak && (
+          <button
+            onClick={breakStart}
+            disabled={stamping}
+            className='min-h-[48px] px-6 rounded-xl border border-yellow-300 text-yellow-600 font-semibold text-base active:bg-yellow-50 transition-colors disabled:opacity-50 flex items-center gap-2'
+          >
+            <span>☕</span>
+            Pause starten
+          </button>
+        )}
+      </div>
+
+      {/* Wochen-Statistik */}
+      {balance && (
+        <div className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-4'>
+          <p className='text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3'>
+            Aktuelle Woche
+          </p>
+          <div className='grid grid-cols-3 gap-2'>
+            <div className='flex flex-col items-center gap-1'>
+              <p className='text-xs text-gray-400'>Gearbeitet</p>
+              <p className='text-xl font-bold text-gray-800'>{fmtH(balance.total_hours_worked).replace('+', '')}</p>
+            </div>
+            <div className='flex flex-col items-center gap-1 border-x border-gray-100'>
+              <p className='text-xs text-gray-400'>Erwartet</p>
+              <p className='text-xl font-bold text-gray-800'>{fmtH(balance.expected_hours).replace('+', '')}</p>
+            </div>
+            <div className='flex flex-col items-center gap-1'>
+              <p className='text-xs text-gray-400'>Überstunden</p>
+              <p className={`text-xl font-bold ${
+                balance.overtime_hours > 0 ? 'text-green-600' :
+                balance.overtime_hours < 0 ? 'text-red-500' : 'text-gray-800'
+              }`}>
+                {fmtH(balance.overtime_hours)}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/pages/mobile/MobileTodayScreen.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useState, useCallback } from 'react'
+import { api } from '../../api/client'
+
+interface TimeEntryOut {
+  id: string
+  date: string
+  start_time: string
+  end_time: string | null
+  break_minutes: number
+  worked_hours: number | null
+  status: string
+  note: string | null
+}
+
+interface TimeEntryListResponse {
+  total: number
+  items: TimeEntryOut[]
+}
+
+function fmtTime(iso: string | null): string {
+  if (!iso) return '–'
+  if (/^\d{2}:\d{2}(:\d{2})?$/.test(iso)) return iso.slice(0, 5)
+  const d = new Date(iso)
+  if (isNaN(d.getTime())) return iso.slice(0, 5)
+  return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+}
+
+function fmtH(h: number | null): string {
+  if (h === null || h === undefined) return '–'
+  const hrs = Math.floor(h)
+  const min = Math.round((h - hrs) * 60)
+  return `${hrs}h ${min}m`
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  open:     'Offen',
+  pending:  'Zur Prüfung',
+  approved: 'Genehmigt',
+  rejected: 'Abgelehnt',
+  auto:     'Auto',
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  open:     'bg-yellow-100 text-yellow-700',
+  pending:  'bg-blue-100 text-blue-700',
+  approved: 'bg-green-100 text-green-700',
+  rejected: 'bg-red-100 text-red-700',
+  auto:     'bg-gray-100 text-gray-500',
+}
+
+export function MobileTodayScreen() {
+  const [entries, setEntries] = useState<TimeEntryOut[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const today = new Date().toISOString().slice(0, 10)
+
+  const load = useCallback(async () => {
+    setError(null)
+    try {
+      const res = await api.get<TimeEntryListResponse>(`/time/entries?date_from=${today}&date_to=${today}&limit=20`)
+      setEntries(res.items)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Fehler beim Laden')
+    } finally {
+      setLoading(false)
+    }
+  }, [today])
+
+  useEffect(() => { load() }, [load])
+
+  const totalWorked = entries.reduce((sum, e) => sum + (e.worked_hours ?? 0), 0)
+
+  if (loading) {
+    return (
+      <div className='flex flex-col items-center justify-center flex-1 py-20 gap-4'>
+        <div className='animate-spin rounded-full h-10 w-10 border-4 border-blue-500 border-t-transparent' />
+        <p className='text-sm text-gray-400'>Wird geladen…</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex flex-col gap-4 px-4 pt-4'>
+      {/* Header-Karte mit Datum + Gesamtzeit */}
+      <div className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-4 flex items-center justify-between'>
+        <div>
+          <p className='text-xs text-gray-400 font-medium uppercase tracking-widest'>Heute</p>
+          <p className='text-base font-semibold text-gray-800 mt-0.5'>
+            {new Date(today + 'T00:00:00').toLocaleDateString('de-DE', {
+              weekday: 'long', day: '2-digit', month: 'long',
+            })}
+          </p>
+        </div>
+        <div className='text-right'>
+          <p className='text-xs text-gray-400'>Gesamt</p>
+          <p className='text-2xl font-bold text-gray-800'>{fmtH(totalWorked)}</p>
+        </div>
+      </div>
+
+      {error && (
+        <div className='bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-700'>
+          {error}
+        </div>
+      )}
+
+      {/* Eintrags-Liste */}
+      {entries.length === 0 ? (
+        <div className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-10 text-center'>
+          <p className='text-4xl mb-3'>📋</p>
+          <p className='text-sm font-medium text-gray-500'>Noch keine Einträge heute</p>
+          <p className='text-xs text-gray-400 mt-1'>Stempel dich ein, um loszulegen</p>
+        </div>
+      ) : (
+        <div className='flex flex-col gap-3'>
+          {entries.map((entry, idx) => (
+            <div key={entry.id} className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-4'>
+              <div className='flex items-start justify-between gap-3'>
+                <div>
+                  <p className='text-xs text-gray-400 mb-1'>Eintrag {idx + 1}</p>
+                  <div className='flex items-center gap-2'>
+                    <span className='text-lg font-mono font-semibold text-gray-800'>{fmtTime(entry.start_time)}</span>
+                    <span className='text-gray-400'>→</span>
+                    <span className='text-lg font-mono font-semibold text-gray-800'>{fmtTime(entry.end_time)}</span>
+                  </div>
+                  {entry.break_minutes > 0 && (
+                    <p className='text-xs text-gray-400 mt-1'>Pause: {entry.break_minutes} min</p>
+                  )}
+                  {entry.note && (
+                    <p className='text-xs text-gray-500 mt-1 italic'>{entry.note}</p>
+                  )}
+                </div>
+                <div className='flex flex-col items-end gap-2 flex-shrink-0'>
+                  <p className='text-xl font-bold text-gray-800'>{fmtH(entry.worked_hours)}</p>
+                  <span className={`text-xs px-2.5 py-1 rounded-full font-medium ${STATUS_COLORS[entry.status] ?? 'bg-gray-100 text-gray-500'}`}>
+                    {STATUS_LABELS[entry.status] ?? entry.status}
+                  </span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}