v1.1.0: keyboard shortcuts (CH), onboarding tour, admin projects tab, remember-me login, Luftbild CH removed, hose settings in admin, credit link, font Barlow, map auto-save viewport, rate-limit 10/5min

v1.0.9: fix emoji rendering, Pizza label, auto payment methods
v1.0.8: fix rapport logos, donation tiers 10/20/50+custom, payment methods, app story
2026-02-24 19:49:42 +01:00 · 2026-02-22 10:43:23 +01:00 · 2026-02-22 10:14:53 +01:00 · 2026-02-22 01:09:33 +01:00 · 2026-02-22 00:32:14 +01:00 · 2026-02-22 00:09:02 +01:00
27 changed files with 857 additions and 172 deletions
--- a/next.config.js
+++ b/next.config.js
@@ -49,9 +49,9 @@ const nextConfig = {
              "default-src 'self'",
              "script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:",
              "style-src 'self' 'unsafe-inline'",
-              "img-src 'self' data: blob: https://*.tile.openstreetmap.org https://api.maptiler.com http://localhost:9000 http://minio:9000",
+              "img-src 'self' data: blob: https://*.tile.openstreetmap.org https://api.maptiler.com https://server.arcgisonline.com https://*.geo.admin.ch http://localhost:9000 http://minio:9000",
              "font-src 'self' data:",
-              "connect-src 'self' ws: wss: https://api.maptiler.com https://*.tile.openstreetmap.org https://api.open-meteo.com",
+              "connect-src 'self' ws: wss: https://api.maptiler.com https://*.tile.openstreetmap.org https://api.open-meteo.com https://server.arcgisonline.com https://*.geo.admin.ch",
              "frame-ancestors 'self'",
              "base-uri 'self'",
              "form-action 'self'",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lageplan",
-  "version": "1.0.5",
+  "version": "1.1.0",
  "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
  "private": true,
  "scripts": {
--- a/public/logo-icon-maskable.png
+++ b/public/logo-icon-maskable.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -20,7 +20,13 @@
      "src": "/logo-icon.png",
      "sizes": "192x192",
      "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "/logo-icon-maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
    }
  ],
  "screenshots": [],
--- a/public/sw.js
+++ b/public/sw.js
@@ -30,6 +30,9 @@ self.addEventListener('fetch', (event) => {
  // Skip non-GET requests
  if (event.request.method !== 'GET') return

+  // Never intercept Socket.IO — let it pass through directly
+  if (pathname.startsWith('/socket.io')) return
+
  // Cacheable API routes: Network First with cache fallback (icons, hose-types, dictionary)
  if (CACHEABLE_API.some(p => pathname.startsWith(p))) {
    event.respondWith(
@@ -84,8 +87,8 @@ self.addEventListener('fetch', (event) => {
  // Other API requests: network only
  if (pathname.startsWith('/api/')) return

-  // Cache map tiles from OpenStreetMap / MapTiler (Cache First — tiles don't change)
-  if (url.includes('tile.openstreetmap.org') || url.includes('api.maptiler.com')) {
+  // Cache map tiles from OSM / MapTiler / ArcGIS / Swisstopo (Cache First — tiles don't change)
+  if (url.includes('tile.openstreetmap.org') || url.includes('api.maptiler.com') || url.includes('server.arcgisonline.com') || url.includes('geo.admin.ch')) {
    event.respondWith(
      caches.open(TILE_CACHE).then((cache) =>
        cache.match(event.request).then((cached) => {
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -58,6 +58,7 @@ import {
 } from 'lucide-react'
 import Link from 'next/link'
 import { TenantDetailDialog } from '@/components/admin/tenant-detail-dialog'
+import { HoseSettingsDialog } from '@/components/dialogs/hose-settings-dialog'

 // --- Types ---
 interface IconCategory {
@@ -214,6 +215,14 @@ export default function AdminPage() {
  const [symbolScaleLoading, setSymbolScaleLoading] = useState(false)
  const [symbolScaleStatus, setSymbolScaleStatus] = useState<string | null>(null)

+  // Admin Projects (SERVER_ADMIN)
+  const [adminProjects, setAdminProjects] = useState<any[]>([])
+  const [adminProjectsLoading, setAdminProjectsLoading] = useState(false)
+  const [adminProjectTenantFilter, setAdminProjectTenantFilter] = useState<string>('all')
+
+  // Hose Settings (Tenant Admin)
+  const [isHoseSettingsOpen, setIsHoseSettingsOpen] = useState(false)
+
  // Redirect to login if not authenticated, or to app if not admin
  useEffect(() => {
    if (authLoading) return
@@ -251,6 +260,25 @@ export default function AdminPage() {
    if (user?.role === 'SERVER_ADMIN') fetchGlobalDict()
  }, [user?.role])

+  // Fetch admin projects (SERVER_ADMIN)
+  const fetchAdminProjects = async (tenantFilter?: string) => {
+    setAdminProjectsLoading(true)
+    try {
+      const url = tenantFilter && tenantFilter !== 'all'
+        ? `/api/admin/projects?tenantId=${tenantFilter}`
+        : '/api/admin/projects'
+      const res = await fetch(url)
+      if (res.ok) {
+        const data = await res.json()
+        setAdminProjects(data.projects || [])
+      }
+    } catch {}
+    setAdminProjectsLoading(false)
+  }
+  useEffect(() => {
+    if (user?.role === 'SERVER_ADMIN') fetchAdminProjects()
+  }, [user?.role])
+
  const fetchData = async () => {
    setIsLoading(true)
    try {
@@ -683,11 +711,15 @@ export default function AdminPage() {
      <div className="container mx-auto py-6 px-4 max-w-7xl">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          {user?.role === 'SERVER_ADMIN' ? (
-            <TabsList className="grid w-full grid-cols-6 max-w-3xl">
+            <TabsList className="grid w-full grid-cols-7 max-w-4xl">
              <TabsTrigger value="tenants" className="gap-2">
                <Shield className="w-4 h-4" />
                Mandanten
              </TabsTrigger>
+              <TabsTrigger value="projects" className="gap-2">
+                <Map className="w-4 h-4" />
+                Einsätze
+              </TabsTrigger>
              <TabsTrigger value="icons" className="gap-2">
                <Image className="w-4 h-4" />
                Symbole
@@ -710,7 +742,7 @@ export default function AdminPage() {
              </TabsTrigger>
            </TabsList>
          ) : user?.role === 'TENANT_ADMIN' ? (
-            <TabsList className="grid w-full grid-cols-5 max-w-2xl">
+            <TabsList className="grid w-full grid-cols-6 max-w-3xl">
              <TabsTrigger value="users" className="gap-2">
                <Users className="w-4 h-4" />
                Benutzer
@@ -719,6 +751,10 @@ export default function AdminPage() {
                <ClipboardList className="w-4 h-4" />
                Wörterliste
              </TabsTrigger>
+              <TabsTrigger value="hose-types" className="gap-2">
+                <Settings className="w-4 h-4" />
+                Schläuche
+              </TabsTrigger>
              <TabsTrigger value="donate" className="gap-2">
                <Heart className="w-4 h-4" />
                Spenden
@@ -960,6 +996,97 @@ export default function AdminPage() {
          </TabsContent>
          )}

+          {/* ===== PROJECTS TAB (SERVER_ADMIN — Einsätze verwalten) ===== */}
+          {user?.role === 'SERVER_ADMIN' && (
+          <TabsContent value="projects" className="space-y-4">
+            <div className="flex items-center justify-between gap-4 flex-wrap">
+              <p className="text-sm text-muted-foreground">
+                {adminProjects.length} Einsatz/Einsätze
+              </p>
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-muted-foreground">Feuerwehr:</span>
+                <Select value={adminProjectTenantFilter} onValueChange={(val) => { setAdminProjectTenantFilter(val); fetchAdminProjects(val) }}>
+                  <SelectTrigger className="w-[220px]">
+                    <SelectValue placeholder="Alle Mandanten" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">Alle Mandanten</SelectItem>
+                    {tenants.map(t => (
+                      <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {adminProjectsLoading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : adminProjects.length === 0 ? (
+              <p className="text-center text-muted-foreground py-8">Keine Einsätze gefunden.</p>
+            ) : (
+              <div className="border rounded-lg overflow-hidden">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted/50">
+                    <tr>
+                      <th className="text-left px-4 py-2.5 font-medium">Einsatz-Nr</th>
+                      <th className="text-left px-4 py-2.5 font-medium">Titel</th>
+                      <th className="text-left px-4 py-2.5 font-medium">Ort</th>
+                      <th className="text-left px-4 py-2.5 font-medium">Erstellt von</th>
+                      <th className="text-left px-4 py-2.5 font-medium">Feuerwehr</th>
+                      <th className="text-left px-4 py-2.5 font-medium">Elemente</th>
+                      <th className="text-left px-4 py-2.5 font-medium">Geändert</th>
+                      <th className="text-left px-4 py-2.5 font-medium">Aktion</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y">
+                    {adminProjects.map((p: any) => (
+                      <tr key={p.id} className="hover:bg-muted/30">
+                        <td className="px-4 py-2.5 font-mono text-xs">{p.einsatzNr || '—'}</td>
+                        <td className="px-4 py-2.5 font-semibold">{p.title}</td>
+                        <td className="px-4 py-2.5 text-muted-foreground truncate max-w-[200px]">{p.location || '—'}</td>
+                        <td className="px-4 py-2.5">
+                          <span className="text-xs">{p.owner?.name || p.owner?.email || '—'}</span>
+                        </td>
+                        <td className="px-4 py-2.5">
+                          <span className="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded">{p.tenant?.name || '—'}</span>
+                        </td>
+                        <td className="px-4 py-2.5 text-center">{p._count?.features || 0}</td>
+                        <td className="px-4 py-2.5 text-xs text-muted-foreground">{new Date(p.updatedAt).toLocaleString('de-CH')}</td>
+                        <td className="px-4 py-2.5">
+                          <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => window.open(`/app?project=${p.id}`, '_blank')}>
+                            <Eye className="w-3 h-3 mr-1" />
+                            Öffnen
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </TabsContent>
+          )}
+
+          {/* ===== HOSE TYPES TAB (Schlauchtypen) ===== */}
+          <TabsContent value="hose-types" className="space-y-4">
+            <div className="border rounded-lg p-6">
+              <h3 className="font-semibold text-lg mb-2 flex items-center gap-2">
+                <Settings className="w-5 h-5" />
+                Schlauchtypen verwalten
+              </h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Konfiguriere die Schlauchtypen für die Druckberechnung im Messwerkzeug. Der Standard-Schlauch wird automatisch für neue Berechnungen verwendet.
+              </p>
+              <Button variant="outline" onClick={() => setIsHoseSettingsOpen(true)}>
+                <Settings className="w-4 h-4 mr-2" />
+                Schlauchtypen bearbeiten
+              </Button>
+            </div>
+            <HoseSettingsDialog open={isHoseSettingsOpen} onOpenChange={setIsHoseSettingsOpen} />
+          </TabsContent>
+
          {/* ===== SUGGESTIONS TAB (Word Library) ===== */}
          <TabsContent value="suggestions" className="space-y-4">
            <div className="border rounded-lg p-6">
--- a/src/app/api/admin/projects/route.ts
+++ b/src/app/api/admin/projects/route.ts
@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getSession } from '@/lib/auth'
+import { prisma } from '@/lib/db'
+
+export async function GET(request: NextRequest) {
+  try {
+    const user = await getSession()
+    if (!user || user.role !== 'SERVER_ADMIN') {
+      return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
+    }
+
+    const { searchParams } = new URL(request.url)
+    const tenantId = searchParams.get('tenantId')
+
+    const where: any = {}
+    if (tenantId) where.tenantId = tenantId
+
+    const projects = await (prisma as any).project.findMany({
+      where,
+      orderBy: { updatedAt: 'desc' },
+      include: {
+        owner: {
+          select: { id: true, name: true, email: true },
+        },
+        tenant: {
+          select: { id: true, name: true },
+        },
+        _count: {
+          select: { features: true },
+        },
+      },
+    })
+
+    return NextResponse.json({ projects })
+  } catch (error) {
+    console.error('Error fetching admin projects:', error)
+    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 })
+  }
+}
--- a/src/app/api/auth/login/route.ts
+++ b/src/app/api/auth/login/route.ts
@@ -22,11 +22,16 @@ export async function POST(request: NextRequest) {
    }

    const { email, password } = validated.data
+    const rememberMe = body.rememberMe === true
    const result = await login(email, password)

    if (!result.success || !result.user) {
+      const remaining = rl.remaining
+      const warningText = remaining <= 3 && remaining > 0
+        ? ` (Noch ${remaining} Versuch${remaining === 1 ? '' : 'e'})`
+        : ''
      return NextResponse.json(
-        { error: result.error || 'Login fehlgeschlagen' },
+        { error: (result.error || 'Login fehlgeschlagen') + warningText, remaining },
        { status: 401 }
      )
    }
@@ -39,13 +44,13 @@ export async function POST(request: NextRequest) {
      })
    } catch {}

-    const token = await createToken(result.user)
+    const token = await createToken(result.user, rememberMe)
    
    ;(await cookies()).set('auth-token', token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'lax',
-      maxAge: 60 * 60 * 24, // 24 hours
+      maxAge: rememberMe ? 60 * 60 * 24 * 30 : 60 * 60 * 24, // 30 days or 24 hours
      path: '/',
    })

--- a/src/app/api/donate/checkout/route.ts
+++ b/src/app/api/donate/checkout/route.ts
@@ -21,7 +21,6 @@ export async function POST(req: NextRequest) {
    const origin = req.headers.get('origin') || req.nextUrl.origin

    const session = await stripe.checkout.sessions.create({
-      payment_method_types: ['card', 'twint'],
      mode: 'payment',
      line_items: [
        {
--- a/src/app/api/projects/[id]/features/route.ts
+++ b/src/app/api/projects/[id]/features/route.ts
@@ -113,7 +113,19 @@ export async function PUT(
    }

    const body = await request.json()
-    const { features } = body as { features: Array<{ id?: string; type: string; geometry: object; properties?: object }> }
+    const { features, mapCenter, mapZoom } = body as {
+      features: Array<{ id?: string; type: string; geometry: object; properties?: object }>
+      mapCenter?: { lng: number; lat: number }
+      mapZoom?: number
+    }
+
+    // Persist map viewport alongside features (if provided)
+    if (mapCenter && mapZoom !== undefined) {
+      await (prisma as any).project.update({
+        where: { id },
+        data: { mapCenter, mapZoom },
+      })
+    }

    await (prisma as any).feature.deleteMany({
      where: { projectId: id },
--- a/src/app/app/page.tsx
+++ b/src/app/app/page.tsx
@@ -20,8 +20,9 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
 import { JournalView } from '@/components/journal/journal-view'
 import { jsPDF } from 'jspdf'
 import { Lock, Unlock, Eye, AlertTriangle, WifiOff } from 'lucide-react'
-import { getSocket } from '@/lib/socket'
+import { getSocket, setSocketRoom } from '@/lib/socket'
 import { CustomDragLayer } from '@/components/map/custom-drag-layer'
+import { OnboardingTour, resetOnboardingTour } from '@/components/onboarding/onboarding-tour'
 import { addToSyncQueue, flushSyncQueue, getSyncQueue, isOnline as checkOnline } from '@/lib/offline-sync'

 export interface Project {
@@ -92,6 +93,9 @@ export default function AppPage() {
  const [lastMapScreenshot, setLastMapScreenshot] = useState<string>('')
  const [defaultSymbolScale, setDefaultSymbolScale] = useState(1.5)

+  // Onboarding tour
+  const [showTour, setShowTour] = useState(false)
+
  // Live editing lock state
  const [editingBy, setEditingBy] = useState<{ id: string; name: string; since: string } | null>(null)
  const [isEditingByMe, setIsEditingByMe] = useState(false)
@@ -507,27 +511,31 @@ export default function AppPage() {
  const socketRef = useRef<any>(null)
  const prevProjectIdRef = useRef<string | null>(null)

-  // Throttled socket broadcast for near-real-time sync (1.5s instead of 10s auto-save)
+  // Throttled socket broadcast for near-real-time sync
  const lastEmitRef = useRef(0)
  const emitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const currentProjectRef = useRef(currentProject)
+  useEffect(() => { currentProjectRef.current = currentProject }, [currentProject])
+
  const broadcastFeatures = useCallback((feats: DrawFeature[]) => {
-    if (!socketRef.current || !currentProject?.id || !isEditingByMe) return
+    const proj = currentProjectRef.current
+    if (!socketRef.current || !proj?.id || !isEditingByMeRef.current) return
    const now = Date.now()
    const emit = () => {
      socketRef.current?.emit('features-updated', {
-        projectId: currentProject!.id,
+        projectId: proj!.id,
        features: feats,
      })
      lastEmitRef.current = Date.now()
    }
-    // Throttle: emit at most every 1.5 seconds
-    if (now - lastEmitRef.current > 1500) {
+    // Throttle: emit at most every 800ms for snappier sync
+    if (now - lastEmitRef.current > 800) {
      emit()
    } else {
      if (emitTimerRef.current) clearTimeout(emitTimerRef.current)
-      emitTimerRef.current = setTimeout(emit, 1500 - (now - lastEmitRef.current))
+      emitTimerRef.current = setTimeout(emit, 800 - (now - lastEmitRef.current))
    }
-  }, [currentProject?.id, isEditingByMe])
+  }, [])
  const isEditingByMeRef = useRef(false)

  // Keep ref in sync with state
@@ -546,6 +554,7 @@ export default function AppPage() {
      socket.emit('leave-project', prevProjectIdRef.current)
    }
    socket.emit('join-project', currentProject.id)
+    setSocketRoom(currentProject.id)
    prevProjectIdRef.current = currentProject.id

    // Listen for features changes from other clients (only apply if NOT the editor)
@@ -693,7 +702,13 @@ export default function AppPage() {
  const saveFeaturesToApi = useCallback(async () => {
    if (!currentProject?.id) return
    const url = `/api/projects/${currentProject.id}/features`
-    const body = { features: featuresRef.current }
+    const mapInstance = mapRef.current
+    const body: any = { features: featuresRef.current }
+    if (mapInstance) {
+      const c = mapInstance.getCenter()
+      body.mapCenter = { lng: c.lng, lat: c.lat }
+      body.mapZoom = mapInstance.getZoom()
+    }

    // If offline, queue the save for later sync
    if (!navigator.onLine) {
@@ -880,10 +895,16 @@ export default function AppPage() {

    setIsSaving(true)
    try {
+      const saveBody: any = { features }
+      if (mapRef.current) {
+        const c = mapRef.current.getCenter()
+        saveBody.mapCenter = { lng: c.lng, lat: c.lat }
+        saveBody.mapZoom = mapRef.current.getZoom()
+      }
      let res = await fetch(`/api/projects/${currentProject.id}/features`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ features }),
+        body: JSON.stringify(saveBody),
      })

      // If project doesn't exist in DB (404), re-create it first then retry
@@ -1043,6 +1064,59 @@ export default function AppPage() {
    }
  }, [])

+  // Keyboard shortcuts for tools
+  const [isShortcutHelpOpen, setIsShortcutHelpOpen] = useState(false)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ignore when typing in inputs/textareas
+      const tag = (e.target as HTMLElement)?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (e.target as HTMLElement)?.isContentEditable) return
+
+      // ? or F1 → help
+      if (e.key === '?' || e.key === 'F1') { e.preventDefault(); setIsShortcutHelpOpen(true); return }
+
+      // DEL / Backspace → delete selected feature(s)
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        e.preventDefault()
+        // Remove all selected features
+        const current = featuresRef.current
+        const selected = current.filter(f => f.properties?._selected)
+        if (selected.length > 0) {
+          handleFeaturesChange(current.filter(f => !f.properties?._selected))
+        }
+        return
+      }
+
+      // Ctrl/Cmd shortcuts (CH keyboard: Z and Y are swapped)
+      if (e.ctrlKey || e.metaKey) {
+        if (e.key === 'z') { e.preventDefault(); handleRedo(); return }
+        if (e.key === 'y') { e.preventDefault(); handleUndo(); return }
+        if (e.key === 's') { e.preventDefault(); handleSaveProject(); return }
+        return
+      }
+
+      // Tool shortcuts (single key, no modifier)
+      const shortcuts: Record<string, DrawMode> = {
+        'v': 'select', 's': 'select',
+        'p': 'point',
+        'l': 'linestring',
+        'g': 'polygon',
+        'r': 'rectangle',
+        'c': 'circle',
+        'f': 'freehand',
+        'a': 'arrow',
+        't': 'text',
+        'e': 'eraser',
+        'm': 'measure',
+        'd': 'dangerzone',
+      }
+      const mode = shortcuts[e.key.toLowerCase()]
+      if (mode) { e.preventDefault(); setDrawMode(mode); return }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [handleUndo, handleRedo, handleSaveProject, setDrawMode, handleFeaturesChange])
+
  const handlePlanUpload = useCallback(() => {
    if (!currentProject) return
    const input = document.createElement('input')
@@ -1450,6 +1524,7 @@ export default function AppPage() {
          userName={user?.name}
          userRole={user?.role}
          onLogout={logout}
+          onStartTour={() => { resetOnboardingTour(); setShowTour(true) }}
        />

        {/* Offline banner */}
@@ -1525,7 +1600,7 @@ export default function AppPage() {

        <div className="flex-1 flex overflow-hidden">
          {/* Map view — always mounted, hidden via CSS to preserve state */}
-          <div className={`contents ${activeTab !== 'map' ? 'hidden' : ''}`}>
+          <div data-tour="toolbar" className={`contents ${activeTab !== 'map' ? 'hidden' : ''}`}>
            <LeftToolbar
              drawMode={drawMode}
              onDrawModeChange={setDrawMode}
@@ -1578,6 +1653,7 @@ export default function AppPage() {

          {/* Right sidebar — always visible, contains Karte/Journal tabs */}
          <RightSidebar
+            data-tour="sidebar"
            onSymbolDrop={handleSymbolDrop}
            canEdit={canEdit}
            isOpen={isSidebarOpen}
@@ -1611,6 +1687,39 @@ export default function AppPage() {
          lineType={(pendingLineFeature?.type as any) || 'linestring'}
        />

+        {/* Keyboard Shortcuts Help Dialog */}
+        <Dialog open={isShortcutHelpOpen} onOpenChange={setIsShortcutHelpOpen}>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle>Tastenkürzel</DialogTitle>
+            </DialogHeader>
+            <div className="grid grid-cols-2 gap-x-6 gap-y-1.5 text-sm mt-2">
+              <div className="font-semibold text-muted-foreground col-span-2 mt-1 mb-0.5">Werkzeuge</div>
+              {[
+                ['V', 'Auswählen'], ['P', 'Punkt'], ['L', 'Linie'], ['G', 'Polygon'],
+                ['R', 'Rechteck'], ['C', 'Kreis'], ['F', 'Freihand'], ['A', 'Pfeil / Route'],
+                ['T', 'Text'], ['E', 'Radiergummi'], ['M', 'Messen'], ['D', 'Gefahrenzone'],
+              ].map(([key, label]) => (
+                <div key={key} className="flex items-center justify-between">
+                  <span>{label}</span>
+                  <kbd className="ml-2 px-1.5 py-0.5 bg-muted rounded border border-border font-mono text-xs">{key}</kbd>
+                </div>
+              ))}
+              <div className="font-semibold text-muted-foreground col-span-2 mt-3 mb-0.5">Aktionen</div>
+              {[
+                ['Ctrl+Y', 'Rückgängig'], ['Ctrl+Z', 'Wiederholen'],
+                ['Ctrl+S', 'Speichern'], ['Del', 'Auswahl löschen'],
+                ['Esc', 'Abbrechen'], ['?', 'Diese Hilfe'],
+              ].map(([key, label]) => (
+                <div key={key} className="flex items-center justify-between">
+                  <span>{label}</span>
+                  <kbd className="ml-2 px-1.5 py-0.5 bg-muted rounded border border-border font-mono text-xs">{key}</kbd>
+                </div>
+              ))}
+            </div>
+          </DialogContent>
+        </Dialog>
+
        {/* Delete All Confirmation Dialog */}
        <Dialog open={isDeleteAllConfirmOpen} onOpenChange={setIsDeleteAllConfirmOpen}>
          <DialogContent className="max-w-sm">
@@ -1630,6 +1739,12 @@ export default function AppPage() {
            </div>
          </DialogContent>
        </Dialog>
+
+        {/* Onboarding Tour */}
+        <OnboardingTour
+          forceShow={showTour}
+          onComplete={() => setShowTour(false)}
+        />
      </div>
    </DndProvider>
  )
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -56,6 +56,9 @@
  }
  body {
    @apply bg-background text-foreground;
+    font-size: 15px;
+    line-height: 1.6;
+    letter-spacing: 0.01em;
  }
 }

--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,12 @@
 import type { Metadata, Viewport } from 'next'
-import { Inter } from 'next/font/google'
+import { Barlow } from 'next/font/google'
 import './globals.css'
 import { Toaster } from '@/components/ui/toaster'
 import { AuthProvider } from '@/components/providers/auth-provider'
 import { ServiceWorkerRegister } from '@/components/providers/sw-register'
 import { CookieConsent } from '@/components/ui/cookie-consent'

-const inter = Inter({
+const barlow = Barlow({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  display: 'swap',
@@ -105,7 +105,7 @@ export default function RootLayout({
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="theme-color" content="#dc2626" />
      </head>
-      <body className={`${inter.className} antialiased`} style={{ fontFeatureSettings: '"tnum", "cv01"' }}>
+      <body className={`${barlow.className} antialiased`} style={{ fontFeatureSettings: '"tnum"' }}>
        <AuthProvider>
          <ServiceWorkerRegister />
          {children}
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -22,6 +22,7 @@ export default function LoginPage() {
 function LoginForm() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
+  const [rememberMe, setRememberMe] = useState(true)
  const [isLoading, setIsLoading] = useState(false)
  const [resendLoading, setResendLoading] = useState(false)
  const [resendSuccess, setResendSuccess] = useState(false)
@@ -55,7 +56,7 @@ function LoginForm() {
    e.preventDefault()
    setIsLoading(true)

-    const result = await login(email, password)
+    const result = await login(email, password, rememberMe)

    if (result.success) {
      toast({
@@ -173,6 +174,16 @@ function LoginForm() {
              />
            </div>

+            <label className="flex items-center gap-2 cursor-pointer select-none">
+              <input
+                type="checkbox"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                className="w-4 h-4 rounded border-gray-300 text-red-600 focus:ring-red-500"
+              />
+              <span className="text-sm text-muted-foreground">Angemeldet bleiben</span>
+            </label>
+
            <Button
              type="submit"
              className="w-full bg-red-600 hover:bg-red-700"
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -526,10 +526,10 @@ function SupportSection() {
          {/* Tier preview */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8">
            {[
-              { emoji: '\u2615', label: 'Kaffee', amount: 'CHF 5' },
              { emoji: '\uD83C\uDF55', label: 'Pizza', amount: 'CHF 10' },
-              { emoji: '\uD83D\uDDA5\uFE0F', label: 'Server', amount: 'CHF 25' },
+              { emoji: '\uD83D\uDDA5\uFE0F', label: 'Server', amount: 'CHF 20' },
              { emoji: '\uD83D\uDE80', label: 'Feature', amount: 'CHF 50' },
+              { emoji: '\u2764\uFE0F', label: 'Freibetrag', amount: 'Frei' },
            ].map(tier => (
              <div key={tier.label} className="rounded-xl p-4 border border-gray-100 bg-gray-50">
                <span className="text-2xl block mb-1">{tier.emoji}</span>
@@ -540,7 +540,7 @@ function SupportSection() {
          </div>

          <p className="text-gray-500 mb-6">
-            Wähle einen Betrag auf unserer Spendenseite — Zahlung sicher via Stripe (Kreditkarte, Twint).
+            Wähle einen Betrag auf unserer Spendenseite — Zahlung sicher via Stripe (Kreditkarte, Twint, Apple Pay, Google Pay).
          </p>

          <Link href="/spenden">
--- a/src/app/rapport/[token]/page.tsx
+++ b/src/app/rapport/[token]/page.tsx
@@ -72,7 +72,7 @@ export default function RapportViewerPage({ params }: { params: Promise<{ token:
      {/* Action bar */}
      <div className="max-w-[210mm] mx-auto mb-4 flex justify-between items-center px-4">
        <div className="flex items-center gap-2">
-          <MapPin className="w-5 h-5 text-red-500" />
+          <img src="/logo.svg" alt="Lageplan" className="w-5 h-5 object-contain" />
          <span className="font-semibold text-sm">Lageplan — Einsatzrapport</span>
        </div>
        <div className="flex gap-2">
@@ -168,8 +168,7 @@ export default function RapportViewerPage({ params }: { params: Promise<{ token:
            <Field label="Alarmzeit" value={d.alarmzeit} mono />
            <Field label="Priorität" value={d.prioritaet} last />
            <Field label="Einsatzort / Adresse" value={d.einsatzort} span={2} />
-            <Field label="Koordinaten" value={d.koordinaten} mono />
-            <Field label="Objekt / Gebäude" value={d.objekt} last />
+            <Field label="Objekt / Gebäude" value={d.objekt} span={2} last />
            <Field label="Alarmierungsart" value={d.alarmierungsart} span={2} />
            <Field label="Stichwort / Meldebild" value={d.stichwort} span={2} last />
          </div>
@@ -177,15 +176,9 @@ export default function RapportViewerPage({ params }: { params: Promise<{ token:

        {/* 2. Zeitverlauf */}
        <Section num="2" title="Zeitverlauf">
-          <div className="grid grid-cols-4 border rounded">
+          <div className="grid grid-cols-2 border rounded">
            <Field label="Alarmierung" value={d.zeitAlarm} mono highlight />
-            <Field label="Ausrücken" value={d.zeitAusruecken} mono highlight />
-            <Field label="Eintreffen" value={d.zeitEintreffen} mono highlight />
-            <Field label="Einsatzbereit" value={d.zeitBereit} mono highlight last />
-            <Field label="Feuer unter Kontrolle" value={d.zeitKontrolle} mono highlight />
-            <Field label="Feuer aus" value={d.zeitAus} mono highlight />
-            <Field label="Einrücken" value={d.zeitEinruecken} mono highlight />
-            <Field label="Einsatzende" value={d.zeitEnde} mono highlight last />
+            <Field label="Eintreffen" value={d.zeitEintreffen} mono highlight last />
          </div>
        </Section>

--- a/src/app/spenden/page.tsx
+++ b/src/app/spenden/page.tsx
@@ -10,14 +10,15 @@ import {
 import { Logo } from '@/components/ui/logo'

 const tiers = [
-  { value: 5, label: 'Kaffee', emoji: '\u2615', desc: 'Ein Kaffee für die nächste Coding-Session' },
-  { value: 10, label: 'Pizza', emoji: '\uD83C\uDF55', desc: 'Pizza-Abend nach einem langen Entwicklungstag' },
-  { value: 25, label: 'Server', emoji: '\uD83D\uDDA5\uFE0F', desc: 'Hilft die monatlichen Serverkosten zu decken' },
+  { value: 10, label: 'Pizza', emoji: '\uD83C\uDF55', desc: 'Eine Pizza für die nächste Coding-Session' },
+  { value: 20, label: 'Server', emoji: '\uD83D\uDDA5\uFE0F', desc: 'Hilft die monatlichen Serverkosten zu decken' },
  { value: 50, label: 'Feature', emoji: '\uD83D\uDE80', desc: 'Finanziert die Entwicklung eines neuen Features' },
 ]

 export default function SpendenPage() {
-  const [amount, setAmount] = useState(10)
+  const [amount, setAmount] = useState(20)
+  const [customAmount, setCustomAmount] = useState('')
+  const [isCustom, setIsCustom] = useState(false)
  const [name, setName] = useState('')
  const [message, setMessage] = useState('')
  const [isLoading, setIsLoading] = useState(false)
@@ -112,9 +113,9 @@ export default function SpendenPage() {
            {tiers.map(tier => (
              <button
                key={tier.value}
-                onClick={() => setAmount(tier.value)}
+                onClick={() => { setAmount(tier.value); setIsCustom(false); setCustomAmount('') }}
                className={`rounded-xl p-4 text-center transition-all border-2 ${
-                  amount === tier.value
+                  !isCustom && amount === tier.value
                    ? 'border-red-500 bg-red-50 shadow-md'
                    : 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'
                }`}
@@ -124,34 +125,52 @@ export default function SpendenPage() {
                <span className="text-xs text-gray-500 block mt-0.5">{tier.label}</span>
              </button>
            ))}
+            <button
+              onClick={() => setIsCustom(true)}
+              className={`rounded-xl p-4 text-center transition-all border-2 ${
+                isCustom
+                  ? 'border-red-500 bg-red-50 shadow-md'
+                  : 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'
+              }`}
+            >
+              <span className="text-2xl block mb-1">{"\u2764\uFE0F"}</span>
+              <span className="text-lg font-bold text-gray-900">Frei</span>
+              <span className="text-xs text-gray-500 block mt-0.5">Eigener Betrag</span>
+            </button>
          </div>

-          {/* Slider */}
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-2">
-              <span className="text-sm text-gray-500">Oder wähle einen eigenen Betrag:</span>
-              <span className="text-xl font-bold text-red-600">CHF {amount}</span>
+          {/* Custom amount input */}
+          {isCustom && (
+            <div className="mb-8">
+              <label className="block text-sm font-medium text-gray-700 mb-2">Eigener Betrag in CHF</label>
+              <div className="relative">
+                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium">CHF</span>
+                <input
+                  type="number"
+                  min="1"
+                  max="1000"
+                  step="1"
+                  value={customAmount}
+                  onChange={e => {
+                    setCustomAmount(e.target.value)
+                    const val = parseInt(e.target.value)
+                    if (val > 0) setAmount(val)
+                  }}
+                  placeholder="Betrag eingeben..."
+                  className="w-full rounded-lg border border-gray-300 pl-14 pr-4 py-3 text-lg font-bold focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
+                  autoFocus
+                />
+              </div>
            </div>
-            <input
-              type="range"
-              min="5"
-              max="200"
-              step="5"
-              value={amount}
-              onChange={e => setAmount(parseInt(e.target.value))}
-              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-red-600"
-            />
-            <div className="flex justify-between text-xs text-gray-400 mt-1">
-              <span>CHF 5</span>
-              <span>CHF 200</span>
-            </div>
-          </div>
+          )}

          {/* Current tier description */}
-          <div className="bg-gray-50 rounded-xl p-4 mb-6 text-center">
-            <span className="text-3xl">{activeTier.emoji}</span>
-            <p className="text-sm text-gray-600 mt-2">{activeTier.desc}</p>
-          </div>
+          {!isCustom && (
+            <div className="bg-gray-50 rounded-xl p-4 mb-6 text-center">
+              <span className="text-3xl">{activeTier.emoji}</span>
+              <p className="text-sm text-gray-600 mt-2">{activeTier.desc}</p>
+            </div>
+          )}

          {/* Optional name & message */}
          <div className="space-y-4 mb-6">
@@ -203,14 +222,32 @@ export default function SpendenPage() {
            </Button>
          )}

-          <div className="mt-4 flex flex-wrap items-center justify-center gap-4 text-xs text-gray-400">
+          <div className="mt-4 flex flex-wrap items-center justify-center gap-3 text-xs text-gray-400">
            <span className="flex items-center gap-1"><Shield className="w-3.5 h-3.5" /> Sichere Zahlung via Stripe</span>
-            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Kreditkarte & Twint</span>
+            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Kreditkarte</span>
+            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Twint</span>
+            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Apple Pay</span>
+            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Google Pay</span>
          </div>
        </div>

+        {/* Story */}
+        <div className="mt-10 bg-gray-50 rounded-2xl p-6 md:p-8 border border-gray-100">
+          <h3 className="font-bold text-gray-900 mb-3">Die Geschichte hinter Lageplan</h3>
+          <p className="text-sm text-gray-600 leading-relaxed">
+            Lageplan wird seit über 2 Jahren von einem aktiven Feuerwehrmann in seiner Freizeit entwickelt.
+            Die App ist und bleibt <strong>kostenlos</strong> — weil jede Feuerwehr Zugang zu guten Werkzeugen haben soll,
+            unabhängig vom Budget. Es gibt zwar kommerzielle Alternativen, aber die Idee war immer:
+            Ein Werkzeug <em>von der Feuerwehr, für die Feuerwehr</em>.
+          </p>
+          <p className="text-sm text-gray-600 leading-relaxed mt-3">
+            Mit deiner Spende hilfst du, dass das so bleibt. Jeder Franken fliesst direkt in
+            Serverkosten und Weiterentwicklung. Danke für deine Unterstützung!
+          </p>
+        </div>
+
        {/* Trust */}
-        <div className="mt-10 text-center">
+        <div className="mt-8 text-center">
          <p className="text-sm text-gray-500">
            100% deiner Spende fliesst direkt in Serverkosten und Weiterentwicklung.
            <br />Kein Unternehmen, keine Investoren — nur ein Feuerwehrmann mit einer Idee.
--- a/src/components/journal/journal-view.tsx
+++ b/src/components/journal/journal-view.tsx
@@ -948,10 +948,6 @@ export function JournalView({ projectId, projectTitle, projectLocation, einsatzl
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="text-xs font-semibold text-gray-500 uppercase">Koordinaten</label>
-                  <Input value={rapportForm.koordinaten || ''} onChange={e => setRapportForm(f => ({ ...f, koordinaten: e.target.value }))} />
-                </div>
                <div>
                  <label className="text-xs font-semibold text-gray-500 uppercase">Alarmierungsart</label>
                  <Input value={rapportForm.alarmierungsart || ''} onChange={e => setRapportForm(f => ({ ...f, alarmierungsart: e.target.value }))} />
@@ -964,22 +960,15 @@ export function JournalView({ projectId, projectTitle, projectLocation, einsatzl
              {/* Zeitverlauf */}
              <div>
                <label className="text-xs font-semibold text-gray-500 uppercase mb-1 block">Zeitverlauf</label>
-                <div className="grid grid-cols-4 gap-2">
-                  {[
-                    ['zeitAlarm', 'Alarm'],
-                    ['zeitAusruecken', 'Ausrücken'],
-                    ['zeitEintreffen', 'Eintreffen'],
-                    ['zeitBereit', 'Bereit'],
-                    ['zeitKontrolle', 'F. u. Kontrolle'],
-                    ['zeitAus', 'F. aus'],
-                    ['zeitEinruecken', 'Einrücken'],
-                    ['zeitEnde', 'Ende'],
-                  ].map(([key, label]) => (
-                    <div key={key}>
-                      <label className="text-[10px] text-gray-400">{label}</label>
-                      <Input className="text-sm h-8" value={rapportForm[key] || ''} onChange={e => setRapportForm(f => ({ ...f, [key]: e.target.value }))} placeholder="HH:MM" />
-                    </div>
-                  ))}
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="text-[10px] text-gray-400">Alarm</label>
+                    <Input type="time" className="text-sm h-8" value={rapportForm.zeitAlarm || ''} onChange={e => setRapportForm(f => ({ ...f, zeitAlarm: e.target.value }))} />
+                  </div>
+                  <div>
+                    <label className="text-[10px] text-gray-400">Eintreffen</label>
+                    <Input type="time" className="text-sm h-8" value={rapportForm.zeitEintreffen || ''} onChange={e => setRapportForm(f => ({ ...f, zeitEintreffen: e.target.value }))} />
+                  </div>
                </div>
              </div>
              {/* Lagebild */}
--- a/src/components/layout/left-toolbar.tsx
+++ b/src/components/layout/left-toolbar.tsx
@@ -48,18 +48,18 @@ const colors = [
  { value: '#ffffff', name: 'Weiss' },
 ]

-const drawTools: { mode: DrawMode; icon: typeof MousePointer2; label: string }[] = [
-  { mode: 'select', icon: MousePointer2, label: 'Auswählen' },
-  { mode: 'point', icon: CircleDot, label: 'Punkt' },
-  { mode: 'linestring', icon: Minus, label: 'Linie' },
-  { mode: 'polygon', icon: Pentagon, label: 'Polygon' },
-  { mode: 'rectangle', icon: Square, label: 'Rechteck' },
-  { mode: 'circle', icon: Circle, label: 'Kreis' },
-  { mode: 'freehand', icon: Pencil, label: 'Freihand' },
-  { mode: 'arrow', icon: MoveRight, label: 'Pfeil / Route' },
-  { mode: 'text', icon: Type, label: 'Text' },
-  { mode: 'eraser', icon: Eraser, label: 'Radiergummi' },
-  { mode: 'measure', icon: Ruler, label: 'Messen' },
+const drawTools: { mode: DrawMode; icon: typeof MousePointer2; label: string; shortcut: string }[] = [
+  { mode: 'select', icon: MousePointer2, label: 'Auswählen', shortcut: 'V' },
+  { mode: 'point', icon: CircleDot, label: 'Punkt', shortcut: 'P' },
+  { mode: 'linestring', icon: Minus, label: 'Linie', shortcut: 'L' },
+  { mode: 'polygon', icon: Pentagon, label: 'Polygon', shortcut: 'G' },
+  { mode: 'rectangle', icon: Square, label: 'Rechteck', shortcut: 'R' },
+  { mode: 'circle', icon: Circle, label: 'Kreis', shortcut: 'C' },
+  { mode: 'freehand', icon: Pencil, label: 'Freihand', shortcut: 'F' },
+  { mode: 'arrow', icon: MoveRight, label: 'Pfeil / Route', shortcut: 'A' },
+  { mode: 'text', icon: Type, label: 'Text', shortcut: 'T' },
+  { mode: 'eraser', icon: Eraser, label: 'Radiergummi', shortcut: 'E' },
+  { mode: 'measure', icon: Ruler, label: 'Messen', shortcut: 'M' },
 ]

 export function LeftToolbar({
@@ -92,7 +92,7 @@ export function LeftToolbar({
                </Button>
              </TooltipTrigger>
              <TooltipContent side="right">
-                <p>{tool.label}</p>
+                <p>{tool.label} <kbd className="ml-1.5 text-[10px] px-1 py-0.5 bg-muted rounded border border-border font-mono">{tool.shortcut}</kbd></p>
              </TooltipContent>
            </Tooltip>
          ))}
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -39,6 +39,7 @@ import {
  Shield,
  Building2,
  MapPin,
+  HelpCircle,
 } from 'lucide-react'
 import { HoseSettingsDialog } from '@/components/dialogs/hose-settings-dialog'
 import type { Project, DrawFeature } from '@/app/app/page'
@@ -65,6 +66,7 @@ interface TopbarProps {
  userName?: string
  userRole?: string
  onLogout?: () => void
+  onStartTour?: () => void
 }

 export function Topbar({
@@ -87,6 +89,7 @@ export function Topbar({
  userName,
  userRole,
  onLogout,
+  onStartTour,
 }: TopbarProps) {
  const [isLoadDialogOpen, setIsLoadDialogOpen] = useState(false)
  const [isHoseSettingsOpen, setIsHoseSettingsOpen] = useState(false)
@@ -159,6 +162,7 @@ export function Topbar({

        <div className="flex items-center gap-1 md:gap-2">
          <Button
+            data-tour="save"
            variant="outline"
            className="h-9 md:h-10 px-2 md:px-4 text-sm"
            onClick={onSaveProject}
@@ -177,7 +181,7 @@ export function Topbar({
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-52">
-              <DropdownMenuItem onClick={onNewProject} className="py-2.5 px-3">
+              <DropdownMenuItem data-tour="new-project" onClick={onNewProject} className="py-2.5 px-3">
                <Plus className="w-4 h-4 mr-2" />
                Neuer Einsatz
              </DropdownMenuItem>
@@ -294,6 +298,12 @@ export function Topbar({
                    Administration
                  </DropdownMenuItem>
                )}
+                {onStartTour && (
+                  <DropdownMenuItem onClick={onStartTour}>
+                    <HelpCircle className="w-4 h-4 mr-2" />
+                    Tour starten
+                  </DropdownMenuItem>
+                )}
                <DropdownMenuItem
                  onClick={() => { setShowDeleteAccountDialog(true); setDeleteAccountPw(''); setDeleteAccountError('') }}
                  className="text-destructive focus:text-destructive"
@@ -414,6 +424,9 @@ export function Topbar({
                          </p>
                        )}
                        <p className="text-xs text-muted-foreground mt-1">
+                          {(p as any).owner?.name && (
+                            <><span className="font-medium text-foreground/70">{(p as any).owner.name}</span> · </>
+                          )}
                          Erstellt: {formatDateTime(p.createdAt)} | Geändert: {formatDateTime(p.updatedAt)}
                        </p>
                      </button>
--- a/src/components/map/map-view.tsx
+++ b/src/components/map/map-view.tsx
@@ -106,7 +106,8 @@ export function MapView({
  const measureMarkersRef = useRef<maplibregl.Marker[]>([])
  const measureCoordsRef = useRef<number[][]>([])
  const [isMapLoaded, setIsMapLoaded] = useState(false)
-  const [isSatellite, setIsSatellite] = useState(false)
+  const [activeBaseLayer, setActiveBaseLayer] = useState<'osm' | 'satellite' | 'swisstopo'>('osm')
+  const [layerDropdownOpen, setLayerDropdownOpen] = useState(false)
  const [measurePointCount, setMeasurePointCount] = useState(0)
  const [measureFinished, setMeasureFinished] = useState(false)
  const [drawingPointCount, setDrawingPointCount] = useState(0)
@@ -689,6 +690,15 @@ export function MapView({
            attribution: '© Esri, Maxar, Earthstar Geographics',
            maxzoom: 19,
          },
+          'swisstopo': {
+            type: 'raster',
+            tiles: [
+              'https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg',
+            ],
+            tileSize: 256,
+            attribution: '© swisstopo',
+            maxzoom: 17,
+          },
        },
        layers: [
          {
@@ -702,6 +712,12 @@ export function MapView({
            source: 'satellite',
            layout: { visibility: 'none' },
          },
+          {
+            id: 'swisstopo',
+            type: 'raster',
+            source: 'swisstopo',
+            layout: { visibility: 'none' },
+          },
        ],
      },
      center: [initialCenter.lng, initialCenter.lat],
@@ -953,7 +969,7 @@ export function MapView({
        // Eraser mode: click on/near a feature to delete it
        if (mode === 'eraser') {
          const pixel = e.point
-          const tolerance = 10 // px
+          const tolerance = 20 // px
          const currentFeatures = featuresRef.current
          let closestIdx = -1
          let closestDist = Infinity
@@ -962,29 +978,44 @@ export function MapView({
            const f = currentFeatures[i]
            const geom = f.geometry

-            // Get all coordinates to check proximity
-            let allCoords: number[][] = []
            if (geom.type === 'Point') {
-              allCoords = [geom.coordinates as number[]]
-            } else if (geom.type === 'LineString') {
-              allCoords = geom.coordinates as number[][]
-            } else if (geom.type === 'Polygon') {
-              allCoords = (geom.coordinates as number[][][])[0] || []
-            }
-
-            for (const c of allCoords) {
-              const projected = m.project([c[0], c[1]])
+              const projected = m.project(geom.coordinates as [number, number])
              const dx = projected.x - pixel.x
              const dy = projected.y - pixel.y
              const dist = Math.sqrt(dx * dx + dy * dy)
-              if (dist < closestDist) {
-                closestDist = dist
-                closestIdx = i
+              if (dist < closestDist) { closestDist = dist; closestIdx = i }
+            } else if (geom.type === 'LineString') {
+              const lineCoords = geom.coordinates as number[][]
+              for (let j = 0; j < lineCoords.length - 1; j++) {
+                const p1 = m.project(lineCoords[j] as [number, number])
+                const p2 = m.project(lineCoords[j + 1] as [number, number])
+                const dist = pointToSegmentDist(pixel.x, pixel.y, p1.x, p1.y, p2.x, p2.y)
+                if (dist < closestDist) { closestDist = dist; closestIdx = i }
              }
+            } else if (geom.type === 'Polygon') {
+              const ring = (geom.coordinates as number[][][])[0] || []
+              // Check edges
+              for (let j = 0; j < ring.length - 1; j++) {
+                const p1 = m.project(ring[j] as [number, number])
+                const p2 = m.project(ring[j + 1] as [number, number])
+                const dist = pointToSegmentDist(pixel.x, pixel.y, p1.x, p1.y, p2.x, p2.y)
+                if (dist < closestDist) { closestDist = dist; closestIdx = i }
+              }
+              // Point-in-polygon test (screen space)
+              const projected = ring.map(c => m.project(c as [number, number]))
+              let inside = false
+              for (let j = 0, k = projected.length - 1; j < projected.length; k = j++) {
+                const xi = projected[j].x, yi = projected[j].y
+                const xk = projected[k].x, yk = projected[k].y
+                if (((yi > pixel.y) !== (yk > pixel.y)) && (pixel.x < (xk - xi) * (pixel.y - yi) / (yk - yi) + xi)) {
+                  inside = !inside
+                }
+              }
+              if (inside) { closestDist = 0; closestIdx = i }
            }
          }

-          if (closestIdx >= 0 && closestDist < tolerance * 3) {
+          if (closestIdx >= 0 && closestDist < tolerance) {
            const deleted = currentFeatures[closestIdx]
            const newFeatures = currentFeatures.filter((_, i) => i !== closestIdx)
            onFeaturesChangeRef.current(newFeatures)
@@ -2061,11 +2092,12 @@ export function MapView({
                  selectedSymbolRef.current.scale = Math.max(0.2, Math.min(10, startScale * ratio))
                  selectedSymbolRef.current.innerEl.style.fontSize = `${baseFontSize * selectedSymbolRef.current.scale}px`
                } else {
-                  // For symbols: resize wrapper
+                  // For symbols: resize wrapper, use ratio from start to preserve zoom-aware scale
                  selectedSymbolRef.current.wrapperEl.style.width = `${width}px`
                  selectedSymbolRef.current.wrapperEl.style.height = `${height}px`
-                  const baseSize = 32
-                  selectedSymbolRef.current.scale = Math.max(0.1, Math.min(10, width / baseSize))
+                  const startW = selectedSymbolRef.current.resizeStartWidth || 1
+                  const startScale = selectedSymbolRef.current.resizeStartScale || 1
+                  selectedSymbolRef.current.scale = Math.max(0.1, Math.min(10, startScale * (width / startW)))
                }
              }
            }}
@@ -2109,29 +2141,52 @@ export function MapView({
        </>
      )}

-      {/* Layer toggle: OSM / Satellite */}
-      <button
-        onClick={() => {
-          if (!map.current) return
-          const newSat = !isSatellite
-          setIsSatellite(newSat)
-          map.current.setLayoutProperty('osm', 'visibility', newSat ? 'none' : 'visible')
-          map.current.setLayoutProperty('satellite', 'visibility', newSat ? 'visible' : 'none')
-        }}
-        className="absolute top-3 right-3 z-10 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold shadow-lg border transition-colors"
-        style={{
-          background: isSatellite ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.95)',
-          color: isSatellite ? '#fff' : '#333',
-          borderColor: isSatellite ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.15)',
-        }}
-        title={isSatellite ? 'Zur Kartenansicht wechseln' : 'Zur Satellitenansicht wechseln'}
-      >
-        {isSatellite ? (
-          <><svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3z"/><path d="M9 4v13"/><path d="M15 7v13"/></svg>Karte</>
-        ) : (
-          <><svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>Satellit</>
+      {/* Layer selector dropdown */}
+      <div className="absolute top-3 right-3 z-10">
+        <button
+          onClick={() => setLayerDropdownOpen(v => !v)}
+          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[11px] font-medium shadow-md border backdrop-blur-sm transition-all"
+          style={{
+            background: activeBaseLayer !== 'osm' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.92)',
+            color: activeBaseLayer !== 'osm' ? '#fff' : '#1f2937',
+            borderColor: activeBaseLayer !== 'osm' ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.1)',
+          }}
+        >
+          <svg className="w-3.5 h-3.5 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+          {{ osm: 'OpenStreetMap', satellite: 'Satellit', swisstopo: 'Swisstopo' }[activeBaseLayer]}
+          <svg className={`w-3 h-3 opacity-50 transition-transform ${layerDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
+        </button>
+        {layerDropdownOpen && (
+          <>
+            <div className="fixed inset-0 z-10" onClick={() => setLayerDropdownOpen(false)} />
+            <div className="absolute right-0 mt-1 z-20 min-w-[160px] rounded-lg shadow-xl border overflow-hidden backdrop-blur-md"
+              style={{ background: 'rgba(255,255,255,0.95)', borderColor: 'rgba(0,0,0,0.08)' }}>
+              {([
+                { key: 'osm', label: 'OpenStreetMap' },
+                { key: 'satellite', label: 'Satellit (Esri)' },
+                { key: 'swisstopo', label: 'Swisstopo Karte' },
+              ] as const).map(({ key, label }) => (
+                <button
+                  key={key}
+                  onClick={() => {
+                    if (!map.current) return
+                    const allLayers: Array<'osm' | 'satellite' | 'swisstopo'> = ['osm', 'satellite', 'swisstopo']
+                    for (const l of allLayers) {
+                      map.current.setLayoutProperty(l, 'visibility', l === key ? 'visible' : 'none')
+                    }
+                    setActiveBaseLayer(key)
+                    setLayerDropdownOpen(false)
+                  }}
+                  className={`w-full text-left px-3 py-2 text-[11px] font-medium transition-colors ${activeBaseLayer === key ? 'bg-blue-50 text-blue-700' : 'text-gray-700 hover:bg-gray-50'}`}
+                >
+                  {activeBaseLayer === key && <span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-500 mr-2 align-middle" />}
+                  {label}
+                </button>
+              ))}
+            </div>
+          </>
        )}
-      </button>
+      </div>

      {/* Zeichnung abschliessen Button (Linie/Polygon/Pfeil) */}
      {(drawMode === 'linestring' || drawMode === 'polygon' || drawMode === 'arrow' || drawMode === 'dangerzone') && drawingPointCount >= 2 && (
@@ -2244,6 +2299,16 @@ export function MapView({
        </div>
      )}

+      {/* Credit link */}
+      <a
+        href="/"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="absolute bottom-1 left-24 z-10 text-[10px] text-muted-foreground/50 hover:text-muted-foreground/80 transition-colors no-underline hidden md:block"
+      >
+        mit ♥ von Pepe
+      </a>
+
      {/* Cursor-following tooltip — always mounted for stable ref */}
      <div
        ref={tooltipRef}
--- a/src/components/onboarding/onboarding-tour.tsx
+++ b/src/components/onboarding/onboarding-tour.tsx
@@ -0,0 +1,246 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { Button } from '@/components/ui/button'
+import { X, ChevronRight, ChevronLeft, SkipForward } from 'lucide-react'
+
+const TOUR_STORAGE_KEY = 'lageplan-onboarding-completed'
+
+interface TourStep {
+  title: string
+  description: string
+  targetSelector?: string
+  position?: 'top' | 'bottom' | 'left' | 'right'
+}
+
+const TOUR_STEPS: TourStep[] = [
+  {
+    title: 'Willkommen bei Lageplan!',
+    description: 'Diese kurze Tour zeigt dir die wichtigsten Funktionen. Du kannst sie jederzeit überspringen.',
+  },
+  {
+    title: 'Neuer Einsatz',
+    description: 'Erstelle einen neuen Einsatz über das Menü oben links. Gib eine Adresse ein und die Karte fliegt automatisch dorthin.',
+    targetSelector: '[data-tour="new-project"]',
+    position: 'bottom',
+  },
+  {
+    title: 'Zeichenwerkzeuge',
+    description: 'Links findest du alle Werkzeuge: Punkte, Linien, Polygone, Freihand, Pfeile, Text und mehr. Jedes Werkzeug hat ein Tastenkürzel (drücke ? für die Übersicht).',
+    targetSelector: '[data-tour="toolbar"]',
+    position: 'right',
+  },
+  {
+    title: 'Symbole & Karte',
+    description: 'Rechts findest du die Symbol-Bibliothek. Ziehe Symbole per Drag & Drop auf die Karte. Wechsle zwischen Karte und Journal.',
+    targetSelector: '[data-tour="sidebar"]',
+    position: 'left',
+  },
+  {
+    title: 'Speichern & Exportieren',
+    description: 'Dein Einsatz wird automatisch gespeichert. Du kannst ihn auch als PNG oder PDF exportieren.',
+    targetSelector: '[data-tour="save"]',
+    position: 'bottom',
+  },
+  {
+    title: 'Tastenkürzel',
+    description: 'Drücke ? oder F1 für eine Übersicht aller Tastenkürzel. Ctrl+S speichert, Ctrl+Z macht rückgängig.',
+  },
+  {
+    title: 'Bereit!',
+    description: 'Das war\'s! Du kannst diese Tour jederzeit über das Benutzermenü erneut starten. Viel Erfolg im Einsatz!',
+  },
+]
+
+interface OnboardingTourProps {
+  forceShow?: boolean
+  onComplete?: () => void
+}
+
+export function OnboardingTour({ forceShow = false, onComplete }: OnboardingTourProps) {
+  const [isVisible, setIsVisible] = useState(false)
+  const [currentStep, setCurrentStep] = useState(0)
+  const [highlightRect, setHighlightRect] = useState<DOMRect | null>(null)
+
+  useEffect(() => {
+    if (forceShow) {
+      setIsVisible(true)
+      setCurrentStep(0)
+      return
+    }
+    const completed = localStorage.getItem(TOUR_STORAGE_KEY)
+    if (!completed) {
+      // Small delay so the app renders first
+      const timer = setTimeout(() => setIsVisible(true), 1500)
+      return () => clearTimeout(timer)
+    }
+  }, [forceShow])
+
+  const updateHighlight = useCallback(() => {
+    const step = TOUR_STEPS[currentStep]
+    if (step.targetSelector) {
+      const el = document.querySelector(step.targetSelector)
+      if (el) {
+        setHighlightRect(el.getBoundingClientRect())
+        return
+      }
+    }
+    setHighlightRect(null)
+  }, [currentStep])
+
+  useEffect(() => {
+    if (!isVisible) return
+    updateHighlight()
+    window.addEventListener('resize', updateHighlight)
+    return () => window.removeEventListener('resize', updateHighlight)
+  }, [isVisible, currentStep, updateHighlight])
+
+  const completeTour = useCallback(() => {
+    localStorage.setItem(TOUR_STORAGE_KEY, 'true')
+    setIsVisible(false)
+    onComplete?.()
+  }, [onComplete])
+
+  const nextStep = () => {
+    if (currentStep < TOUR_STEPS.length - 1) {
+      setCurrentStep(currentStep + 1)
+    } else {
+      completeTour()
+    }
+  }
+
+  const prevStep = () => {
+    if (currentStep > 0) setCurrentStep(currentStep - 1)
+  }
+
+  if (!isVisible) return null
+
+  const step = TOUR_STEPS[currentStep]
+  const isFirst = currentStep === 0
+  const isLast = currentStep === TOUR_STEPS.length - 1
+
+  // Calculate tooltip position based on highlight
+  const getTooltipStyle = (): React.CSSProperties => {
+    if (!highlightRect) {
+      // Center on screen
+      return {
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      }
+    }
+    const pos = step.position || 'bottom'
+    const gap = 12
+    switch (pos) {
+      case 'bottom':
+        return {
+          position: 'fixed',
+          top: highlightRect.bottom + gap,
+          left: Math.max(16, Math.min(highlightRect.left, window.innerWidth - 360)),
+        }
+      case 'top':
+        return {
+          position: 'fixed',
+          bottom: window.innerHeight - highlightRect.top + gap,
+          left: Math.max(16, Math.min(highlightRect.left, window.innerWidth - 360)),
+        }
+      case 'right':
+        return {
+          position: 'fixed',
+          top: Math.max(16, highlightRect.top),
+          left: highlightRect.right + gap,
+        }
+      case 'left':
+        return {
+          position: 'fixed',
+          top: Math.max(16, highlightRect.top),
+          right: window.innerWidth - highlightRect.left + gap,
+        }
+      default:
+        return { position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }
+    }
+  }
+
+  return (
+    <>
+      {/* Backdrop overlay */}
+      <div
+        className="fixed inset-0 z-[99998]"
+        style={{ background: 'rgba(0,0,0,0.5)' }}
+        onClick={completeTour}
+      />
+
+      {/* Highlight cutout */}
+      {highlightRect && (
+        <div
+          className="fixed z-[99999] pointer-events-none rounded-lg"
+          style={{
+            top: highlightRect.top - 4,
+            left: highlightRect.left - 4,
+            width: highlightRect.width + 8,
+            height: highlightRect.height + 8,
+            boxShadow: '0 0 0 9999px rgba(0,0,0,0.5)',
+            border: '2px solid rgba(59,130,246,0.7)',
+          }}
+        />
+      )}
+
+      {/* Tooltip card */}
+      <div
+        className="z-[100000] w-[340px] bg-card border border-border rounded-xl shadow-2xl p-5"
+        style={getTooltipStyle()}
+      >
+        <div className="flex items-start justify-between mb-2">
+          <h3 className="font-semibold text-base">{step.title}</h3>
+          <button
+            onClick={completeTour}
+            className="text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <p className="text-sm text-muted-foreground leading-relaxed mb-4">
+          {step.description}
+        </p>
+
+        {/* Progress dots */}
+        <div className="flex items-center justify-between">
+          <div className="flex gap-1">
+            {TOUR_STEPS.map((_, i) => (
+              <div
+                key={i}
+                className={`w-1.5 h-1.5 rounded-full transition-colors ${
+                  i === currentStep ? 'bg-primary' : i < currentStep ? 'bg-primary/40' : 'bg-muted-foreground/20'
+                }`}
+              />
+            ))}
+          </div>
+
+          <div className="flex items-center gap-1.5">
+            {!isFirst && (
+              <Button variant="ghost" size="sm" className="h-8 px-2" onClick={prevStep}>
+                <ChevronLeft className="w-4 h-4" />
+              </Button>
+            )}
+            {isFirst && (
+              <Button variant="ghost" size="sm" className="h-8 text-xs text-muted-foreground" onClick={completeTour}>
+                <SkipForward className="w-3 h-3 mr-1" />
+                Überspringen
+              </Button>
+            )}
+            <Button size="sm" className="h-8 px-3" onClick={nextStep}>
+              {isLast ? 'Fertig' : 'Weiter'}
+              {!isLast && <ChevronRight className="w-4 h-4 ml-0.5" />}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+/** Reset the onboarding tour so it shows again next time */
+export function resetOnboardingTour() {
+  localStorage.removeItem(TOUR_STORAGE_KEY)
+}
--- a/src/components/providers/auth-provider.tsx
+++ b/src/components/providers/auth-provider.tsx
@@ -29,7 +29,7 @@ interface AuthContextType {
  user: User | null
  tenant: TenantInfo | null
  loading: boolean
-  login: (email: string, password: string) => Promise<{ success: boolean; error?: string }>
+  login: (email: string, password: string, rememberMe?: boolean) => Promise<{ success: boolean; error?: string }>
  logout: () => Promise<void>
  canEdit: () => boolean
  isAdmin: () => boolean
@@ -62,12 +62,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
    }
  }

-  const login = async (email: string, password: string) => {
+  const login = async (email: string, password: string, rememberMe = false) => {
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, password }),
+        body: JSON.stringify({ email, password, rememberMe }),
      })

      const data = await res.json()
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -21,11 +21,11 @@ export interface UserPayload {
  emailVerified?: boolean
 }

-export async function createToken(user: UserPayload): Promise<string> {
+export async function createToken(user: UserPayload, rememberMe = false): Promise<string> {
  return await new SignJWT({ user })
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
-    .setExpirationTime('24h')
+    .setExpirationTime(rememberMe ? '30d' : '24h')
    .sign(JWT_SECRET)
 }

--- a/src/lib/rapport-pdf.tsx
+++ b/src/lib/rapport-pdf.tsx
@@ -166,8 +166,7 @@ export function RapportDocument({ data }: { data: RapportData }) {
            </View>
            <View style={styles.fieldRow}>
              <FieldCell label="Einsatzort / Adresse" value={data.einsatzort} width="50%" />
-              <FieldCell label="Koordinaten" value={data.koordinaten} mono width="25%" />
-              <FieldCell label="Objekt / Gebäude" value={data.objekt} width="25%" />
+              <FieldCell label="Objekt / Gebäude" value={data.objekt} width="50%" />
            </View>
            <View style={styles.fieldRow}>
              <FieldCell label="Alarmierungsart" value={data.alarmierungsart} width="50%" />
@@ -185,16 +184,8 @@ export function RapportDocument({ data }: { data: RapportData }) {
          </View>
          <View style={styles.fieldGrid}>
            <View style={styles.fieldRow}>
-              <FieldCell label="Alarmierung" value={data.zeitAlarm} mono highlight width="25%" />
-              <FieldCell label="Ausrücken" value={data.zeitAusruecken} mono highlight width="25%" />
-              <FieldCell label="Eintreffen" value={data.zeitEintreffen} mono highlight width="25%" />
-              <FieldCell label="Einsatzbereit" value={data.zeitBereit} mono highlight width="25%" />
-            </View>
-            <View style={styles.fieldRow}>
-              <FieldCell label="Feuer unter Kontrolle" value={data.zeitKontrolle} mono highlight width="25%" />
-              <FieldCell label="Feuer aus" value={data.zeitAus} mono highlight width="25%" />
-              <FieldCell label="Einrücken" value={data.zeitEinruecken} mono highlight width="25%" />
-              <FieldCell label="Einsatzende" value={data.zeitEnde} mono highlight width="25%" />
+              <FieldCell label="Alarmierung" value={data.zeitAlarm} mono highlight width="50%" />
+              <FieldCell label="Eintreffen" value={data.zeitEintreffen} mono highlight width="50%" />
            </View>
          </View>
        </View>
--- a/src/lib/rate-limit.ts
+++ b/src/lib/rate-limit.ts
@@ -72,7 +72,7 @@ export function rateLimit(config: RateLimitConfig) {
 }

 // Pre-configured limiters for different endpoints
-export const loginLimiter = rateLimit({ id: 'login', max: 5, windowSeconds: 60 * 15 })          // 5 attempts per 15 min
+export const loginLimiter = rateLimit({ id: 'login', max: 10, windowSeconds: 60 * 5 })          // 10 attempts per 5 min
 export const registerLimiter = rateLimit({ id: 'register', max: 3, windowSeconds: 60 * 60 })    // 3 per hour
 export const forgotPasswordLimiter = rateLimit({ id: 'forgot-pw', max: 3, windowSeconds: 60 * 15 }) // 3 per 15 min
 export const resendVerificationLimiter = rateLimit({ id: 'resend-verify', max: 3, windowSeconds: 60 * 15 })
@@ -94,8 +94,12 @@ export function getClientIp(req: Request): string {
 /** Helper: create a 429 response with retry-after header */
 export function rateLimitResponse(resetAt: number) {
  const retryAfter = Math.ceil((resetAt - Date.now()) / 1000)
+  const minutes = Math.ceil(retryAfter / 60)
  return new Response(
-    JSON.stringify({ error: 'Zu viele Anfragen. Bitte versuchen Sie es später erneut.' }),
+    JSON.stringify({
+      error: `Zu viele Versuche. Bitte warten Sie ${minutes > 1 ? `${minutes} Minuten` : `${retryAfter} Sekunden`} und versuchen es erneut.`,
+      retryAfter,
+    }),
    {
      status: 429,
      headers: {
--- a/src/lib/socket.ts
+++ b/src/lib/socket.ts
@@ -3,23 +3,50 @@
 import { io, Socket } from 'socket.io-client'

 let socket: Socket | null = null
+let currentRoom: string | null = null

 export function getSocket(): Socket {
  if (!socket) {
    socket = io({
      path: '/socket.io',
-      transports: ['polling', 'websocket'],
+      transports: ['websocket', 'polling'],
      upgrade: true,
-      reconnectionAttempts: 10,
-      reconnectionDelay: 2000,
+      reconnection: true,
+      reconnectionAttempts: Infinity,
+      reconnectionDelay: 1000,
+      reconnectionDelayMax: 5000,
      timeout: 10000,
+      forceNew: false,
    })
    socket.on('connect', () => {
      console.log('[Socket.io] Connected:', socket?.id)
+      // Re-join project room after reconnect
+      if (currentRoom) {
+        console.log('[Socket.io] Re-joining room:', currentRoom)
+        socket?.emit('join-project', currentRoom)
+      }
+    })
+    socket.on('disconnect', (reason) => {
+      console.warn('[Socket.io] Disconnected:', reason)
+      if (reason === 'io server disconnect') {
+        // Server disconnected us, need to manually reconnect
+        socket?.connect()
+      }
    })
    socket.on('connect_error', (err) => {
      console.warn('[Socket.io] Connection error:', err.message)
    })
+    socket.io.on('reconnect', (attempt) => {
+      console.log('[Socket.io] Reconnected after', attempt, 'attempts')
+    })
+    socket.io.on('reconnect_attempt', (attempt) => {
+      console.log('[Socket.io] Reconnect attempt', attempt)
+    })
  }
  return socket
 }
+
+/** Track which room the socket should be in (for auto-rejoin on reconnect) */
+export function setSocketRoom(projectId: string | null): void {
+  currentRoom = projectId
+}
Author	SHA1	Message	Date
Pepe Ziberi	d893373bd9	v1.1.0: keyboard shortcuts (CH), onboarding tour, admin projects tab, remember-me login, Luftbild CH removed, hose settings in admin, credit link, font Barlow, map auto-save viewport, rate-limit 10/5min	2026-02-24 19:49:42 +01:00
Pepe Ziberi	cb575f9a82	v1.0.9: fix emoji rendering, Pizza label, auto payment methods	2026-02-22 10:43:23 +01:00
Pepe Ziberi	6b96f1ffb1	v1.0.8: fix rapport logos, donation tiers 10/20/50+custom, payment methods, app story	2026-02-22 10:14:53 +01:00
Pepe Ziberi	0784553017	v1.0.7: fix symbol scale bug, custom layer dropdown, simplify rapport form, app logo in rapport	2026-02-22 01:09:33 +01:00
Pepe Ziberi	e4c3c92cab	v1.0.6: fix CSP wildcard *.geo.admin.ch, fix SW tile caching, dropdown layer selector, reduce swisstopo maxzoom	2026-02-22 00:32:14 +01:00
Pepe Ziberi	0abc1c6b02	fix: eraser tool works on polygon areas and line edges, not just vertices	2026-02-22 00:09:02 +01:00
Pepe Ziberi	5bf4106db2	fix: CSP allow ArcGIS/Swisstopo tiles, add 4 base maps (OSM, Satellit, Swisstopo, Luftbild CH)	2026-02-22 00:06:56 +01:00
Pepe Ziberi	2432e9a17f	fix: PWA icon, robust socket.io reconnect, faster real-time sync	2026-02-21 23:37:36 +01:00