feat: Statischer firmenweiter QR-Code für mobiles Ein-/Ausstempeln

Mitarbeiter scannen einen am Eingang ausgehängten QR-Code mit dem Privat-Handy
(/stamp?t=<token>), melden sich per Personalnummer + PIN an und stempeln ein/aus.

Eigener öffentlicher Endpunkt-Pfad, da der Kiosk-PIN-Login Ed25519-Geräte-
Signaturen verlangt, die ein Privat-Handy nicht hat.

Backend:
- Company.public_stamp_enabled (opt-in, default OFF) + rotierbares
  public_stamp_token_hash (SHA-256) + created_at; Migration 0033
- Router /time/public: company/auth/action (slowapi-Limits, AuditLog)
- kiosk_auth_service.login_pin_public() reused PIN-Lockout, keyed auf
  (public:company_id, personnel_number)
- public_stamp_session_service: 120s Redis-Kurz-Session
- Admin-Token-Endpunkte in companies.py (GET/rotate/DELETE)

Frontend:
- Public-Route /stamp (PublicStampPage)
- Stempel-PIN-Verwaltung in ProfilePage (reused POST /users/{id}/kiosk-pin)
- QR-Generierung/Druck/Toggle in CompanySettingsPage

Sicherheit: schwächer als Kiosk (keine Geräte-Signatur/Nonce/IP-Whitelist),
bewusster BYOD-Komfort-Tradeoff; Schutz über PIN + Lockout + opt-in.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -24,6 +24,7 @@ import { KioskDevicesPage } from './pages/KioskDevicesPage'
 import { AuditLogPage } from './pages/AuditLogPage'
 import { KioskSetupPage } from './pages/KioskSetupPage'
 import { KioskStampPage } from './pages/KioskStampPage'
+import { PublicStampPage } from './pages/PublicStampPage'
 import { MobilePage } from './pages/mobile/MobilePage'
 import { MobileLoginPage } from './pages/mobile/MobileLoginPage'
 import { SpecialAssignmentsPage } from './pages/SpecialAssignmentsPage'
@@ -40,6 +41,7 @@ export default function App() {
           <Route path='/auth/reset-password' element={<ResetPasswordPage />} />
           <Route path='/kiosk/setup' element={<KioskSetupPage />} />
           <Route path='/kiosk'       element={<KioskStampPage />} />
+          <Route path='/stamp'        element={<PublicStampPage />} />
           <Route path='/mobile'       element={<MobilePage />} />
           <Route path='/mobile/login' element={<MobileLoginPage />} />
           <Route element={<ProtectedRoute />}>

frontend/src/pages/CompanySettingsPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import QRCode from 'qrcode'
 import { api } from '../api/client'
 import { Layout } from '../components/Layout'
 
@@ -75,6 +76,13 @@ export function CompanySettingsPage() {
   const [blPlaintext, setBlPlaintext] = useState<string | null>(null)
   const [blBusy, setBlBusy] = useState(false)
   const [blCopied, setBlCopied] = useState(false)
+  // Öffentliches QR-Stempeln
+  const [psEnabled, setPsEnabled] = useState(false)
+  const [psStatus, setPsStatus] = useState<{ configured: boolean; created_at: string | null } | null>(null)
+  const [psUrl, setPsUrl] = useState<string | null>(null)
+  const [psQr, setPsQr] = useState<string | null>(null)
+  const [psBusy, setPsBusy] = useState(false)
+  const [psCopied, setPsCopied] = useState(false)
   const [saving, setSaving] = useState(false)
   const [saved, setSaved] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -110,8 +118,68 @@ export function CompanySettingsPage() {
     api.get<{ configured: boolean; created_at: string | null }>('/companies/me/busylight-token')
       .then(setBlStatus)
       .catch(() => {})
+    api.get<{ enabled: boolean; configured: boolean; created_at: string | null }>('/companies/me/public-stamp-token')
+      .then(s => { setPsStatus({ configured: s.configured, created_at: s.created_at }); setPsEnabled(s.enabled) })
+      .catch(() => {})
   }, [])
 
+  async function rotatePublicStampToken() {
+    setPsBusy(true)
+    setError(null)
+    try {
+      const res = await api.post<{ token: string; public_url: string; created_at: string }>(
+        '/companies/me/public-stamp-token/rotate', {}
+      )
+      setPsUrl(res.public_url)
+      setPsStatus({ configured: true, created_at: res.created_at })
+      setPsCopied(false)
+      setPsQr(await QRCode.toDataURL(res.public_url, { width: 320, margin: 2, errorCorrectionLevel: 'H' }))
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Fehler beim Generieren des QR-Tokens')
+    } finally {
+      setPsBusy(false)
+    }
+  }
+
+  async function revokePublicStampToken() {
+    if (!confirm('QR-Code wirklich deaktivieren? Bestehende ausgedruckte Codes funktionieren danach nicht mehr.')) return
+    setPsBusy(true)
+    setError(null)
+    try {
+      await api.del('/companies/me/public-stamp-token')
+      setPsStatus({ configured: false, created_at: null })
+      setPsUrl(null)
+      setPsQr(null)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Fehler beim Deaktivieren')
+    } finally {
+      setPsBusy(false)
+    }
+  }
+
+  async function copyPublicStampUrl() {
+    if (!psUrl) return
+    try {
+      await navigator.clipboard.writeText(psUrl)
+      setPsCopied(true)
+      setTimeout(() => setPsCopied(false), 2000)
+    } catch { /* clipboard nicht verfügbar */ }
+  }
+
+  function printPublicStampQr() {
+    if (!psQr) return
+    const w = window.open('', '_blank', 'width=600,height=800')
+    if (!w) return
+    w.document.write(`<!doctype html><html><head><title>QR-Stempel</title>
+      <style>body{font-family:sans-serif;text-align:center;padding:40px}
+      h1{font-size:22px}img{width:340px;height:340px}p{color:#555;font-size:15px}</style></head>
+      <body><h1>Zeiterfassung – ${name || company?.name || ''}</h1>
+      <img src="${psQr}" alt="QR" />
+      <p>Mit dem Handy scannen, dann Personalnummer + PIN eingeben und ein-/ausstempeln.</p>
+      <script>window.onload=function(){window.print()}</script></body></html>`)
+    w.document.close()
+  }
+
   async function rotateBusylightToken() {
     setBlBusy(true)
     setError(null)
@@ -179,6 +247,7 @@ export function CompanySettingsPage() {
         kiosk_require_approval: kioskRequireApproval,
         kiosk_track_current_user: kioskTrackCurrentUser,
         kiosk_heartbeat_interval_sec: kioskHeartbeatIntervalSec,
+        public_stamp_enabled: psEnabled,
         overtime_cap_hours: overtimeCapEnabled ? overtimeCapHours : null,
         overtime_expiry_enabled: overtimeExpiryEnabled,
         overtime_expiry_month: overtimeExpiryMonth,
@@ -572,6 +641,104 @@ export function CompanySettingsPage() {
           </div>
         )}
 
+        {/* Öffentliches QR-Stempeln */}
+        {isAdmin && (
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-5">
+            <div className="flex items-center gap-2">
+              <span className="text-lg">📲</span>
+              <h2 className="font-semibold text-gray-700">QR-Stempeln (Handy)</h2>
+            </div>
+            <p className="text-xs text-gray-400 -mt-2">
+              Statischer QR-Code zum Aushängen am Eingang. Mitarbeiter scannen mit dem privaten Handy,
+              melden sich per Personalnummer + PIN an und stempeln ein/aus.
+            </p>
+
+            <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
+              ⚠ Schwächer als Kiosk-Terminals: keine Geräte-Signatur. Schutz nur über PIN + Sperre nach
+              Fehlversuchen. Nur aktivieren, wenn benötigt.
+            </div>
+
+            {/* Toggle aktiv */}
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="text-sm font-medium text-gray-800">QR-Stempeln aktivieren</p>
+                <p className="text-xs text-gray-500 mt-0.5">Speichern nicht vergessen.</p>
+              </div>
+              <button
+                type="button"
+                onClick={() => setPsEnabled(v => !v)}
+                className={`relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none ${
+                  psEnabled ? 'bg-blue-600' : 'bg-gray-300'
+                }`}
+              >
+                <span className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform transition-transform duration-200 ${
+                  psEnabled ? 'translate-x-5' : 'translate-x-0'
+                }`} />
+              </button>
+            </div>
+
+            <div className="text-sm">
+              {psStatus?.configured ? (
+                <div className="flex items-center gap-2 text-green-700">
+                  <span className="inline-block w-2 h-2 rounded-full bg-green-500" />
+                  <span>QR-Code aktiv
+                    {psStatus.created_at && (
+                      <span className="text-gray-400 ml-1">(seit {new Date(psStatus.created_at).toLocaleString('de-DE')})</span>
+                    )}
+                  </span>
+                </div>
+              ) : (
+                <div className="flex items-center gap-2 text-gray-500">
+                  <span className="inline-block w-2 h-2 rounded-full bg-gray-300" />
+                  <span>Kein QR-Code generiert</span>
+                </div>
+              )}
+            </div>
+
+            {psUrl && (
+              <div className="rounded-lg border-2 border-amber-300 bg-amber-50 p-4 space-y-3">
+                <p className="text-xs font-semibold text-amber-800">
+                  ⚠ QR-Code jetzt drucken/sichern – die URL wird nur einmal angezeigt.
+                </p>
+                {psQr && (
+                  <div className="flex justify-center">
+                    <img src={psQr} alt="QR-Code" className="w-48 h-48 rounded-lg border border-amber-300 bg-white p-2" />
+                  </div>
+                )}
+                <div className="flex items-stretch gap-2">
+                  <input type="text" readOnly value={psUrl}
+                    onFocus={e => e.currentTarget.select()}
+                    className="flex-1 font-mono text-xs px-3 py-2 border border-amber-300 rounded bg-white" />
+                  <button onClick={copyPublicStampUrl}
+                    className="px-3 py-2 bg-amber-600 text-white text-xs font-medium rounded hover:bg-amber-700">
+                    {psCopied ? '✓ Kopiert' : 'Kopieren'}
+                  </button>
+                </div>
+                <button onClick={printPublicStampQr}
+                  className="w-full px-3 py-2 bg-gray-800 text-white text-xs font-medium rounded hover:bg-gray-900">
+                  🖨 QR-Code drucken
+                </button>
+              </div>
+            )}
+
+            <div className="flex flex-wrap items-center gap-3">
+              <button onClick={rotatePublicStampToken} disabled={psBusy}
+                className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50">
+                {psStatus?.configured ? 'Neuen QR-Code generieren' : 'QR-Code generieren'}
+              </button>
+              {psStatus?.configured && (
+                <button onClick={revokePublicStampToken} disabled={psBusy}
+                  className="px-4 py-2 bg-white border border-red-300 text-red-700 text-sm font-medium rounded-lg hover:bg-red-50 disabled:opacity-50">
+                  Deaktivieren
+                </button>
+              )}
+              {psStatus?.configured && (
+                <span className="text-xs text-gray-400">Beim Neugenerieren wird der bisherige QR-Code ungültig.</span>
+              )}
+            </div>
+          </div>
+        )}
+
         {/* Mobile-Einstellungen */}
         <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
           <div className="flex items-center gap-2">

frontend/src/pages/ProfilePage.tsx

@@ -178,6 +178,12 @@ export function ProfilePage() {
   const [saving, setSaving] = useState(false)
   const [success, setSuccess] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  // Stempel-PIN (Kiosk / öffentliches QR-Stempeln)
+  const [pin, setPin] = useState('')
+  const [pinConfirm, setPinConfirm] = useState('')
+  const [pinSaving, setPinSaving] = useState(false)
+  const [pinSuccess, setPinSuccess] = useState(false)
+  const [pinError, setPinError] = useState<string | null>(null)
 
   const loadMe = () => {
     api.get<UserOut>('/auth/me').then(u => {
@@ -204,6 +210,23 @@ export function ProfilePage() {
     }
   }
 
+  async function savePin(e: React.FormEvent) {
+    e.preventDefault()
+    if (!me) return
+    if (pin !== pinConfirm) { setPinError('PINs stimmen nicht überein'); return }
+    if (!/^\d{4,6}$/.test(pin)) { setPinError('PIN muss 4 bis 6 Ziffern haben'); return }
+    setPinSaving(true); setPinError(null); setPinSuccess(false)
+    try {
+      await api.post(`/users/${me.id}/kiosk-pin`, { pin })
+      setPinSuccess(true)
+      setPin(''); setPinConfirm('')
+    } catch (e: unknown) {
+      setPinError(e instanceof Error ? e.message : 'Fehler beim Setzen der PIN')
+    } finally {
+      setPinSaving(false)
+    }
+  }
+
   return (
     <Layout userRole={me?.role ?? ''} userName={me ? `${me.first_name} ${me.last_name}` : ''}>
       <div className='max-w-lg mx-auto space-y-6'>
@@ -242,6 +265,38 @@ export function ProfilePage() {
           <TotpSection enabled={totpEnabled} onToggle={loadMe} />
         </div>
 
+        {/* Stempel-PIN */}
+        <div className='bg-white rounded-xl shadow-sm border border-gray-200 p-6'>
+          <div className='mb-4'>
+            <h2 className='font-semibold text-gray-800'>Stempel-PIN</h2>
+            <p className='text-sm text-gray-400 mt-0.5'>
+              4–6 Ziffern · für Kiosk-Terminals und das mobile QR-Stempeln (Personalnummer + PIN).
+            </p>
+          </div>
+          <form onSubmit={savePin} className='space-y-4'>
+            <div>
+              <label className='block text-sm font-medium text-gray-700 mb-1'>Neue PIN</label>
+              <input type='password' inputMode='numeric' value={pin}
+                onChange={e => setPin(e.target.value.replace(/\D/g, '').slice(0, 6))}
+                autoComplete='off'
+                className='w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono tracking-widest focus:outline-none focus:ring-2 focus:ring-blue-500' />
+            </div>
+            <div>
+              <label className='block text-sm font-medium text-gray-700 mb-1'>PIN bestätigen</label>
+              <input type='password' inputMode='numeric' value={pinConfirm}
+                onChange={e => setPinConfirm(e.target.value.replace(/\D/g, '').slice(0, 6))}
+                autoComplete='off'
+                className='w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono tracking-widest focus:outline-none focus:ring-2 focus:ring-blue-500' />
+            </div>
+            {pinError && <p className='text-sm text-red-600'>{pinError}</p>}
+            {pinSuccess && <p className='text-sm text-green-600 font-medium'>PIN erfolgreich gesetzt</p>}
+            <button type='submit' disabled={pinSaving || !pin || !pinConfirm}
+              className='w-full py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50'>
+              {pinSaving ? 'Speichern…' : 'PIN speichern'}
+            </button>
+          </form>
+        </div>
+
         {/* Passwort ändern */}
         <div className='bg-white rounded-xl shadow-sm border border-gray-200 p-6'>
           <h2 className='font-semibold text-gray-700 mb-4'>Passwort ändern</h2>

frontend/src/pages/PublicStampPage.tsx

@@ -0,0 +1,265 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+const BASE = '/api/v1'
+
+// Öffentliche Endpunkte: KEIN Bearer-Token, daher nicht der api-Client (der
+// hängt Authorization an und triggert Token-Refresh). Schlankes fetch.
+async function publicPost<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ detail: res.statusText }))
+    const e = new Error(typeof err.detail === 'string' ? err.detail : res.statusText)
+    ;(e as Error & { status?: number }).status = res.status
+    throw e
+  }
+  return res.json()
+}
+
+interface TimeEntry { id: string; start_time: string; end_time: string | null }
+interface StampStatus { open: boolean; on_break: boolean; today: TimeEntry[] }
+interface AuthResponse extends StampStatus { session_token: string; user_name: string; expires_in_seconds: number }
+interface ActionResponse extends StampStatus { warnings: string[] }
+
+function fmtTime(iso: string | null): string {
+  if (!iso) return '–'
+  return iso.slice(0, 5)
+}
+
+export function PublicStampPage() {
+  const [params] = useSearchParams()
+  const token = params.get('t') ?? ''
+
+  const [companyName, setCompanyName] = useState<string | null>(null)
+  const [enabled, setEnabled] = useState(true)
+  const [loadingCompany, setLoadingCompany] = useState(true)
+
+  const [personnelNumber, setPersonnelNumber] = useState('')
+  const [pin, setPin] = useState('')
+
+  const [sessionToken, setSessionToken] = useState<string | null>(null)
+  const [userName, setUserName] = useState('')
+  const [status, setStatus] = useState<StampStatus | null>(null)
+
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [warnings, setWarnings] = useState<string[]>([])
+  const [info, setInfo] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!token) { setLoadingCompany(false); return }
+    fetch(`${BASE}/time/public/company?t=${encodeURIComponent(token)}`)
+      .then(r => r.ok ? r.json() : Promise.reject(new Error('ungültig')))
+      .then((c: { company_name: string; enabled: boolean }) => {
+        setCompanyName(c.company_name)
+        setEnabled(c.enabled)
+      })
+      .catch(() => setCompanyName(null))
+      .finally(() => setLoadingCompany(false))
+  }, [token])
+
+  const resetToLogin = useCallback((msg: string) => {
+    setSessionToken(null)
+    setStatus(null)
+    setPin('')
+    setInfo(msg)
+  }, [])
+
+  async function authenticate(e: React.FormEvent) {
+    e.preventDefault()
+    setBusy(true); setError(null); setWarnings([]); setInfo(null)
+    try {
+      const res = await publicPost<AuthResponse>('/time/public/auth', {
+        token, personnel_number: personnelNumber, pin,
+      })
+      setSessionToken(res.session_token)
+      setUserName(res.user_name)
+      setStatus({ open: res.open, on_break: res.on_break, today: res.today })
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Anmeldung fehlgeschlagen')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function doAction(action: 'in' | 'out' | 'break_start' | 'break_end') {
+    if (!sessionToken) return
+    setBusy(true); setError(null); setWarnings([])
+    try {
+      const res = await publicPost<ActionResponse>('/time/public/action', {
+        session_token: sessionToken, action,
+      })
+      setStatus({ open: res.open, on_break: res.on_break, today: res.today })
+      if (res.warnings.length) setWarnings(res.warnings)
+    } catch (err: unknown) {
+      const status = (err as Error & { status?: number }).status
+      if (status === 401) {
+        resetToLogin('Sitzung abgelaufen. Bitte erneut anmelden.')
+      } else {
+        setError(err instanceof Error ? err.message : 'Aktion fehlgeschlagen')
+      }
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  // ── Render-Zustände ─────────────────────────────────────────────────────────
+
+  if (loadingCompany) {
+    return (
+      <Shell>
+        <div className='flex flex-col items-center gap-3 py-10'>
+          <div className='animate-spin rounded-full h-9 w-9 border-4 border-blue-500 border-t-transparent' />
+          <p className='text-sm text-gray-400'>Wird geladen…</p>
+        </div>
+      </Shell>
+    )
+  }
+
+  if (!token || companyName === null) {
+    return (
+      <Shell>
+        <div className='bg-red-50 border border-red-200 rounded-xl px-4 py-5 text-center'>
+          <p className='text-3xl mb-2'>🚫</p>
+          <p className='font-semibold text-red-700'>QR-Code ungültig</p>
+          <p className='text-sm text-red-600 mt-1'>Dieser QR-Code ist nicht (mehr) gültig. Bitte an die Verwaltung wenden.</p>
+        </div>
+      </Shell>
+    )
+  }
+
+  if (!enabled) {
+    return (
+      <Shell company={companyName}>
+        <div className='bg-amber-50 border border-amber-200 rounded-xl px-4 py-5 text-center'>
+          <p className='text-3xl mb-2'>🔒</p>
+          <p className='font-semibold text-amber-800'>QR-Stempeln deaktiviert</p>
+          <p className='text-sm text-amber-700 mt-1'>Das mobile Stempeln per QR ist für dieses Unternehmen derzeit nicht aktiviert.</p>
+        </div>
+      </Shell>
+    )
+  }
+
+  // Angemeldet → Stempel-Ansicht
+  if (sessionToken && status) {
+    const isOpen = status.open
+    const onBreak = status.on_break
+    return (
+      <Shell company={companyName}>
+        <div className='space-y-4'>
+          <p className='text-center text-sm text-gray-500'>Angemeldet als</p>
+          <p className='text-center text-xl font-bold text-gray-900 -mt-3'>{userName}</p>
+
+          {warnings.length > 0 && (
+            <div className='bg-yellow-50 border border-yellow-200 rounded-xl px-4 py-3'>
+              <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>
+          )}
+          {error && <div className='bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-700'>{error}</div>}
+
+          <div className={`inline-flex w-full justify-center items-center gap-2 px-3 py-2 rounded-full text-sm font-semibold ${
+            onBreak ? '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 ${onBreak ? 'bg-yellow-400' : isOpen ? 'bg-green-500' : 'bg-gray-400'}`} />
+            {onBreak ? 'In Pause' : isOpen ? 'Eingestempelt' : 'Nicht eingestempelt'}
+          </div>
+
+          {!isOpen ? (
+            <button onClick={() => doAction('in')} disabled={busy}
+              className='w-full min-h-[80px] rounded-3xl bg-green-500 active:bg-green-700 text-white text-2xl font-bold shadow-md disabled:opacity-50'>
+              {busy ? '…' : 'EINSTEMPELN'}
+            </button>
+          ) : onBreak ? (
+            <button onClick={() => doAction('break_end')} disabled={busy}
+              className='w-full min-h-[80px] rounded-3xl bg-yellow-400 active:bg-yellow-600 text-white text-2xl font-bold shadow-md disabled:opacity-50'>
+              {busy ? '…' : 'PAUSE BEENDEN'}
+            </button>
+          ) : (
+            <>
+              <button onClick={() => doAction('out')} disabled={busy}
+                className='w-full min-h-[80px] rounded-3xl bg-red-500 active:bg-red-700 text-white text-2xl font-bold shadow-md disabled:opacity-50'>
+                {busy ? '…' : 'AUSSTEMPELN'}
+              </button>
+              <button onClick={() => doAction('break_start')} disabled={busy}
+                className='w-full min-h-[48px] rounded-xl border border-yellow-300 text-yellow-600 font-semibold active:bg-yellow-50 disabled:opacity-50'>
+                ☕ Pause starten
+              </button>
+            </>
+          )}
+
+          {status.today.length > 0 && (
+            <div className='bg-white rounded-xl border border-gray-200 px-4 py-3'>
+              <p className='text-xs font-semibold text-gray-400 uppercase tracking-widest mb-2'>Heute</p>
+              <ul className='text-sm text-gray-700 space-y-1'>
+                {status.today.map(e => (
+                  <li key={e.id} className='flex justify-between'>
+                    <span>{fmtTime(e.start_time)} – {fmtTime(e.end_time)}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          <button onClick={() => resetToLogin('')}
+            className='w-full text-sm text-gray-400 underline pt-2'>
+            Fertig / Abmelden
+          </button>
+        </div>
+      </Shell>
+    )
+  }
+
+  // PIN-Anmeldung
+  return (
+    <Shell company={companyName}>
+      <form onSubmit={authenticate} className='space-y-4'>
+        {info && <div className='bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 text-sm text-blue-700'>{info}</div>}
+        {error && <div className='bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-700'>{error}</div>}
+
+        <div>
+          <label className='block text-sm font-medium text-gray-700 mb-1'>Personalnummer</label>
+          <input
+            inputMode='numeric' autoComplete='off' value={personnelNumber}
+            onChange={e => setPersonnelNumber(e.target.value.replace(/\D/g, ''))}
+            className='w-full text-center text-2xl tracking-widest font-mono border border-gray-300 rounded-xl px-3 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500'
+            required
+          />
+        </div>
+        <div>
+          <label className='block text-sm font-medium text-gray-700 mb-1'>PIN</label>
+          <input
+            type='password' inputMode='numeric' autoComplete='off' value={pin}
+            onChange={e => setPin(e.target.value.replace(/\D/g, '').slice(0, 6))}
+            className='w-full text-center text-2xl tracking-widest font-mono border border-gray-300 rounded-xl px-3 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500'
+            required
+          />
+          <p className='mt-1 text-xs text-gray-400'>PIN im Mitarbeiter-Portal unter „Mein Profil“ setzen/ändern.</p>
+        </div>
+        <button type='submit' disabled={busy || !personnelNumber || pin.length < 4}
+          className='w-full min-h-[56px] rounded-2xl bg-blue-600 active:bg-blue-800 text-white text-lg font-bold shadow-md disabled:opacity-50'>
+          {busy ? 'Anmelden…' : 'Anmelden'}
+        </button>
+      </form>
+    </Shell>
+  )
+}
+
+function Shell({ company, children }: { company?: string; children: React.ReactNode }) {
+  return (
+    <div className='min-h-screen bg-gray-50 flex flex-col items-center px-4 py-8'>
+      <div className='w-full max-w-sm'>
+        <div className='text-center mb-6'>
+          <p className='text-xs font-semibold text-blue-600 uppercase tracking-widest'>Zeiterfassung</p>
+          <h1 className='text-2xl font-bold text-gray-900 mt-1'>{company ?? 'Stempeln'}</h1>
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}