fix: PWA icon, robust socket.io reconnect, faster real-time sync

next.config.js

@@ -31,6 +31,18 @@ const nextConfig = {
             key: 'Cross-Origin-Opener-Policy',
             value: 'same-origin',
           },
+          {
+            key: 'Strict-Transport-Security',
+            value: 'max-age=63072000; includeSubDomains; preload',
+          },
+          {
+            key: 'X-DNS-Prefetch-Control',
+            value: 'on',
+          },
+          {
+            key: 'X-XSS-Protection',
+            value: '1; mode=block',
+          },
           {
             key: 'Content-Security-Policy',
             value: [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lageplan",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
   "private": true,
   "scripts": {

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": [],

public/sw.js

@@ -1,6 +1,10 @@
-const TILE_CACHE = 'lageplan-tiles-v2'
-const STATIC_CACHE = 'lageplan-static-v2'
-const APP_CACHE = 'lageplan-app-v2'
+const TILE_CACHE = 'lageplan-tiles-v3'
+const STATIC_CACHE = 'lageplan-static-v3'
+const APP_CACHE = 'lageplan-app-v3'
+const API_CACHE = 'lageplan-api-v3'
+
+// API routes that should be cached for offline use
+const CACHEABLE_API = ['/api/icons', '/api/hose-types', '/api/dictionary']
 
 // Pre-cache essential app shell on install
 self.addEventListener('install', (event) => {
@@ -8,6 +12,8 @@ self.addEventListener('install', (event) => {
     caches.open(APP_CACHE).then((cache) =>
       cache.addAll([
         '/app',
+        '/login',
+        '/',
         '/logo.svg',
         '/logo-icon.png',
         '/manifest.json',
@@ -17,7 +23,6 @@ self.addEventListener('install', (event) => {
   self.skipWaiting()
 })
 
-// Cache strategy: Network First for API, Cache First for tiles, Stale While Revalidate for static assets
 self.addEventListener('fetch', (event) => {
   const url = event.request.url
   const { pathname } = new URL(url)
@@ -25,19 +30,71 @@ self.addEventListener('fetch', (event) => {
   // Skip non-GET requests
   if (event.request.method !== 'GET') return
 
-  // API requests: network only (don't cache dynamic data)
+  // 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(
+      caches.open(API_CACHE).then((cache) =>
+        fetch(event.request).then((response) => {
+          if (response.ok) cache.put(event.request, response.clone())
+          return response
+        }).catch(() =>
+          cache.match(event.request).then((cached) => cached || new Response('{"error":"offline"}', {
+            status: 503, headers: { 'Content-Type': 'application/json' }
+          }))
+        )
+      )
+    )
+    return
+  }
+
+  // Projects API: Network First with cache fallback
+  if (pathname === '/api/projects' || pathname.match(/^\/api\/projects\/[^/]+$/)) {
+    event.respondWith(
+      caches.open(API_CACHE).then((cache) =>
+        fetch(event.request).then((response) => {
+          if (response.ok) cache.put(event.request, response.clone())
+          return response
+        }).catch(() =>
+          cache.match(event.request).then((cached) => cached || new Response('{"error":"offline"}', {
+            status: 503, headers: { 'Content-Type': 'application/json' }
+          }))
+        )
+      )
+    )
+    return
+  }
+
+  // Features API: Network First with cache fallback
+  if (pathname.match(/^\/api\/projects\/[^/]+\/features$/)) {
+    event.respondWith(
+      caches.open(API_CACHE).then((cache) =>
+        fetch(event.request).then((response) => {
+          if (response.ok) cache.put(event.request, response.clone())
+          return response
+        }).catch(() =>
+          cache.match(event.request).then((cached) => cached || new Response('{"error":"offline"}', {
+            status: 503, headers: { 'Content-Type': 'application/json' }
+          }))
+        )
+      )
+    )
+    return
+  }
+
+  // Other API requests: network only
   if (pathname.startsWith('/api/')) return
 
-  // Cache map tiles from OpenStreetMap (Cache First)
+  // Cache map tiles from OpenStreetMap / MapTiler (Cache First — tiles don't change)
   if (url.includes('tile.openstreetmap.org') || url.includes('api.maptiler.com')) {
     event.respondWith(
       caches.open(TILE_CACHE).then((cache) =>
         cache.match(event.request).then((cached) => {
           if (cached) return cached
           return fetch(event.request).then((response) => {
-            if (response.ok) {
-              cache.put(event.request, response.clone())
-            }
+            if (response.ok) cache.put(event.request, response.clone())
             return response
           }).catch(() => new Response('', { status: 503 }))
         })
@@ -46,7 +103,23 @@ self.addEventListener('fetch', (event) => {
     return
   }
 
-  // Static assets (JS, CSS, images): Stale While Revalidate
+  // Next.js build chunks (_next/static): Cache First (hashed filenames = immutable)
+  if (pathname.startsWith('/_next/static/')) {
+    event.respondWith(
+      caches.open(STATIC_CACHE).then((cache) =>
+        cache.match(event.request).then((cached) => {
+          if (cached) return cached
+          return fetch(event.request).then((response) => {
+            if (response.ok) cache.put(event.request, response.clone())
+            return response
+          }).catch(() => new Response('', { status: 503 }))
+        })
+      )
+    )
+    return
+  }
+
+  // Other static assets (JS, CSS, images, fonts): Stale While Revalidate
   if (pathname.match(/\.(js|css|png|jpg|jpeg|svg|ico|woff2?)$/)) {
     event.respondWith(
       caches.open(STATIC_CACHE).then((cache) =>
@@ -62,8 +135,8 @@ self.addEventListener('fetch', (event) => {
     return
   }
 
-  // App pages: Network First with cache fallback
-  if (pathname === '/app' || pathname === '/' || pathname.startsWith('/app')) {
+  // App pages / navigation: Network First with cache fallback
+  if (event.request.mode === 'navigate' || pathname === '/app' || pathname === '/' || pathname.startsWith('/app')) {
     event.respondWith(
       fetch(event.request).then((response) => {
         if (response.ok) {
@@ -81,7 +154,7 @@ self.addEventListener('fetch', (event) => {
 
 // Clean old caches on activation
 self.addEventListener('activate', (event) => {
-  const currentCaches = [TILE_CACHE, STATIC_CACHE, APP_CACHE]
+  const currentCaches = [TILE_CACHE, STATIC_CACHE, APP_CACHE, API_CACHE]
   event.waitUntil(
     caches.keys().then((keys) =>
       Promise.all(
@@ -92,3 +165,23 @@ self.addEventListener('activate', (event) => {
     ).then(() => self.clients.claim())
   )
 })
+
+// Listen for sync events (Background Sync for queued saves)
+self.addEventListener('sync', (event) => {
+  if (event.tag === 'sync-saves') {
+    event.waitUntil(syncQueuedSaves())
+  }
+})
+
+// Process queued saves from IndexedDB/localStorage
+async function syncQueuedSaves() {
+  try {
+    const clients = await self.clients.matchAll()
+    clients.forEach(client => client.postMessage({ type: 'SYNC_START' }))
+
+    // Read queue from a BroadcastChannel or let the main thread handle it
+    clients.forEach(client => client.postMessage({ type: 'FLUSH_SYNC_QUEUE' }))
+  } catch (e) {
+    console.error('[SW] Sync error:', e)
+  }
+}

src/app/api/auth/change-password/route.ts

@@ -2,9 +2,16 @@ import { NextRequest, NextResponse } from 'next/server'
 import { getSession } from '@/lib/auth'
 import { prisma } from '@/lib/db'
 import bcrypt from 'bcryptjs'
+import { rateLimit, getClientIp, rateLimitResponse } from '@/lib/rate-limit'
+
+const changePwLimiter = rateLimit({ id: 'change-pw', max: 5, windowSeconds: 60 * 15 })
 
 export async function POST(req: NextRequest) {
   try {
+    const ip = getClientIp(req)
+    const rl = changePwLimiter.check(ip)
+    if (!rl.success) return rateLimitResponse(rl.resetAt)
+
     const user = await getSession()
     if (!user) return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
 
@@ -14,8 +21,8 @@ export async function POST(req: NextRequest) {
       return NextResponse.json({ error: 'Beide Felder sind erforderlich' }, { status: 400 })
     }
 
-    if (newPassword.length < 6) {
-      return NextResponse.json({ error: 'Neues Kennwort muss mindestens 6 Zeichen lang sein' }, { status: 400 })
+    if (newPassword.length < 8) {
+      return NextResponse.json({ error: 'Neues Kennwort muss mindestens 8 Zeichen lang sein' }, { status: 400 })
     }
 
     const dbUser = await (prisma as any).user.findUnique({

src/app/api/auth/delete-account/route.ts

@@ -3,10 +3,15 @@ import { prisma } from '@/lib/db'
 import { getSession } from '@/lib/auth'
 import bcrypt from 'bcryptjs'
 import { cookies } from 'next/headers'
+import { deleteAccountLimiter, getClientIp, rateLimitResponse } from '@/lib/rate-limit'
 
 // POST: User deletes their own account
 export async function POST(req: NextRequest) {
   try {
+    const ip = getClientIp(req)
+    const rl = deleteAccountLimiter.check(ip)
+    if (!rl.success) return rateLimitResponse(rl.resetAt)
+
     const session = await getSession()
     if (!session) return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
 

src/app/api/auth/forgot-password/route.ts

@@ -2,9 +2,14 @@ import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/lib/db'
 import { randomBytes } from 'crypto'
 import { sendEmail, getSmtpConfig } from '@/lib/email'
+import { forgotPasswordLimiter, getClientIp, rateLimitResponse } from '@/lib/rate-limit'
 
 export async function POST(req: NextRequest) {
   try {
+    const ip = getClientIp(req)
+    const rl = forgotPasswordLimiter.check(ip)
+    if (!rl.success) return rateLimitResponse(rl.resetAt)
+
     const { email } = await req.json()
     if (!email) {
       return NextResponse.json({ error: 'E-Mail erforderlich' }, { status: 400 })

src/app/api/auth/login/route.ts

@@ -3,9 +3,14 @@ import { cookies } from 'next/headers'
 import { login, createToken } from '@/lib/auth'
 import { loginSchema } from '@/lib/validations'
 import { prisma } from '@/lib/db'
+import { loginLimiter, getClientIp, rateLimitResponse } from '@/lib/rate-limit'
 
 export async function POST(request: NextRequest) {
   try {
+    const ip = getClientIp(request)
+    const rl = loginLimiter.check(ip)
+    if (!rl.success) return rateLimitResponse(rl.resetAt)
+
     const body = await request.json()
     
     const validated = loginSchema.safeParse(body)

src/app/api/auth/register/route.ts

@@ -4,16 +4,21 @@ import { hashPassword } from '@/lib/auth'
 import { sendEmail } from '@/lib/email'
 import { randomBytes } from 'crypto'
 import { z } from 'zod'
+import { registerLimiter, getClientIp, rateLimitResponse } from '@/lib/rate-limit'
 
 const registerSchema = z.object({
   organizationName: z.string().min(2, 'Organisationsname zu kurz').max(200),
   name: z.string().min(2, 'Name zu kurz').max(200),
   email: z.string().email('Ungültige E-Mail-Adresse'),
-  password: z.string().min(6, 'Passwort muss mindestens 6 Zeichen haben'),
+  password: z.string().min(8, 'Passwort muss mindestens 8 Zeichen haben'),
 })
 
 export async function POST(req: NextRequest) {
   try {
+    const ip = getClientIp(req)
+    const rl = registerLimiter.check(ip)
+    if (!rl.success) return rateLimitResponse(rl.resetAt)
+
     const body = await req.json()
     const data = registerSchema.parse(body)
 

src/app/api/auth/resend-verification/route.ts

@@ -2,9 +2,14 @@ import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/lib/db'
 import { sendEmail } from '@/lib/email'
 import { randomBytes } from 'crypto'
+import { resendVerificationLimiter, getClientIp, rateLimitResponse } from '@/lib/rate-limit'
 
 export async function POST(req: NextRequest) {
   try {
+    const ip = getClientIp(req)
+    const rl = resendVerificationLimiter.check(ip)
+    if (!rl.success) return rateLimitResponse(rl.resetAt)
+
     const { email } = await req.json()
 
     if (!email) {

src/app/api/auth/reset-password/route.ts

@@ -1,16 +1,21 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/lib/db'
 import { hashPassword } from '@/lib/auth'
+import { resetPasswordLimiter, getClientIp, rateLimitResponse } from '@/lib/rate-limit'
 
 export async function POST(req: NextRequest) {
   try {
+    const ip = getClientIp(req)
+    const rl = resetPasswordLimiter.check(ip)
+    if (!rl.success) return rateLimitResponse(rl.resetAt)
+
     const { token, password } = await req.json()
     if (!token || !password) {
       return NextResponse.json({ error: 'Token und Passwort erforderlich' }, { status: 400 })
     }
 
-    if (password.length < 6) {
-      return NextResponse.json({ error: 'Passwort muss mindestens 6 Zeichen lang sein' }, { status: 400 })
+    if (password.length < 8) {
+      return NextResponse.json({ error: 'Passwort muss mindestens 8 Zeichen lang sein' }, { status: 400 })
     }
 
     const user = await (prisma as any).user.findFirst({

src/app/api/contact/route.ts

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/lib/db'
 import { sendEmail, getSmtpConfig } from '@/lib/email'
 import { z } from 'zod'
+import { contactLimiter, getClientIp, rateLimitResponse } from '@/lib/rate-limit'
 
 const contactSchema = z.object({
   name: z.string().min(1).max(200),
@@ -23,6 +24,10 @@ async function getContactEmail(): Promise<string> {
 
 export async function POST(req: NextRequest) {
   try {
+    const ip = getClientIp(req)
+    const rl = contactLimiter.check(ip)
+    if (!rl.success) return rateLimitResponse(rl.resetAt)
+
     const body = await req.json()
     const data = contactSchema.parse(body)
 

src/app/app/page.tsx

@@ -19,9 +19,10 @@ import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { JournalView } from '@/components/journal/journal-view'
 import { jsPDF } from 'jspdf'
-import { Lock, Unlock, Eye, AlertTriangle } from 'lucide-react'
-import { getSocket } from '@/lib/socket'
+import { Lock, Unlock, Eye, AlertTriangle, WifiOff } from 'lucide-react'
+import { getSocket, setSocketRoom } from '@/lib/socket'
 import { CustomDragLayer } from '@/components/map/custom-drag-layer'
+import { addToSyncQueue, flushSyncQueue, getSyncQueue, isOnline as checkOnline } from '@/lib/offline-sync'
 
 export interface Project {
   id: string
@@ -366,6 +367,54 @@ export default function AppPage() {
   // Ref to access the map for export
   const mapRef = useRef<any>(null)
 
+  // Offline detection
+  const [isOffline, setIsOffline] = useState(false)
+  const [syncQueueCount, setSyncQueueCount] = useState(0)
+
+  useEffect(() => {
+    setIsOffline(!checkOnline())
+    setSyncQueueCount(getSyncQueue().length)
+
+    const goOffline = () => {
+      setIsOffline(true)
+      toast({ title: 'Offline-Modus', description: 'Änderungen werden lokal gespeichert und beim Reconnect synchronisiert.' })
+    }
+    const goOnline = async () => {
+      setIsOffline(false)
+      const queue = getSyncQueue()
+      if (queue.length > 0) {
+        toast({ title: 'Verbindung wiederhergestellt', description: `${queue.length} Änderung(en) werden synchronisiert...` })
+        const result = await flushSyncQueue()
+        setSyncQueueCount(getSyncQueue().length)
+        if (result.success > 0) {
+          toast({ title: 'Synchronisiert', description: `${result.success} Änderung(en) erfolgreich gespeichert.` })
+        }
+        if (result.failed > 0) {
+          toast({ title: 'Sync-Fehler', description: `${result.failed} Änderung(en) konnten nicht gespeichert werden.`, variant: 'destructive' })
+        }
+      } else {
+        toast({ title: 'Wieder online' })
+      }
+    }
+
+    window.addEventListener('offline', goOffline)
+    window.addEventListener('online', goOnline)
+
+    // Listen for SW sync messages
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.addEventListener('message', (event) => {
+        if (event.data?.type === 'FLUSH_SYNC_QUEUE') {
+          flushSyncQueue().then(() => setSyncQueueCount(getSyncQueue().length))
+        }
+      })
+    }
+
+    return () => {
+      window.removeEventListener('offline', goOffline)
+      window.removeEventListener('online', goOnline)
+    }
+  }, [])
+
   // Undo/Redo history
   const undoStackRef = useRef<DrawFeature[][]>([])
   const redoStackRef = useRef<DrawFeature[][]>([])
@@ -458,27 +507,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
@@ -497,6 +550,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)
@@ -643,11 +697,22 @@ export default function AppPage() {
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const saveFeaturesToApi = useCallback(async () => {
     if (!currentProject?.id) return
+    const url = `/api/projects/${currentProject.id}/features`
+    const body = { features: featuresRef.current }
+
+    // If offline, queue the save for later sync
+    if (!navigator.onLine) {
+      addToSyncQueue(url, 'PUT', body)
+      setSyncQueueCount(getSyncQueue().length)
+      console.log('[Auto-Save] Offline — in Sync-Queue gespeichert')
+      return
+    }
+
     try {
-      const res = await fetch(`/api/projects/${currentProject.id}/features`, {
+      const res = await fetch(url, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ features: featuresRef.current }),
+        body: JSON.stringify(body),
       })
       if (res.ok) {
         console.log('[Auto-Save] Features gespeichert')
@@ -659,7 +724,10 @@ export default function AppPage() {
         console.warn('[Auto-Save] Projekt nicht in DB')
       }
     } catch (e) {
-      console.warn('[Auto-Save] Fehler:', e)
+      // Network error — queue for later
+      addToSyncQueue(url, 'PUT', body)
+      setSyncQueueCount(getSyncQueue().length)
+      console.warn('[Auto-Save] Netzwerkfehler — in Sync-Queue:', e)
     }
   }, [currentProject])
 
@@ -1389,6 +1457,17 @@ export default function AppPage() {
           onLogout={logout}
         />
 
+        {/* Offline banner */}
+        {isOffline && (
+          <div className="flex items-center justify-center gap-3 px-4 py-2 bg-orange-50 dark:bg-orange-950/40 border-b border-orange-200 dark:border-orange-800 text-sm text-orange-800 dark:text-orange-300">
+            <WifiOff className="w-4 h-4 shrink-0" />
+            <span>
+              <strong>Offline-Modus</strong> — Änderungen werden lokal gespeichert und beim Reconnect synchronisiert.
+              {syncQueueCount > 0 && ` (${syncQueueCount} ausstehend)`}
+            </span>
+          </div>
+        )}
+
         {/* Email verification banner */}
         {user && user.emailVerified === false && (
           <div className="flex items-center justify-center gap-3 px-4 py-2 bg-amber-50 dark:bg-amber-950/40 border-b border-amber-200 dark:border-amber-800 text-sm text-amber-800 dark:text-amber-300">

src/app/register/page.tsx

@@ -30,8 +30,8 @@ export default function RegisterPage() {
       return
     }
 
-    if (password.length < 6) {
-      toast({ title: 'Passwort muss mindestens 6 Zeichen haben', variant: 'destructive' })
+    if (password.length < 8) {
+      toast({ title: 'Passwort muss mindestens 8 Zeichen haben', variant: 'destructive' })
       return
     }
 
@@ -163,7 +163,7 @@ export default function RegisterPage() {
               <Input
                 id="password"
                 type="password"
-                placeholder="Mindestens 6 Zeichen"
+                placeholder="Mindestens 8 Zeichen"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 required

src/app/reset-password/page.tsx

@@ -32,8 +32,8 @@ function ResetPasswordForm() {
     e.preventDefault()
     setError('')
 
-    if (password.length < 6) {
-      setError('Passwort muss mindestens 6 Zeichen lang sein.')
+    if (password.length < 8) {
+      setError('Passwort muss mindestens 8 Zeichen lang sein.')
       return
     }
     if (password !== confirmPassword) {
@@ -108,7 +108,7 @@ function ResetPasswordForm() {
                   <Input
                     id="password"
                     type="password"
-                    placeholder="Min. 6 Zeichen"
+                    placeholder="Min. 8 Zeichen"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     required

src/components/map/map-view.tsx

@@ -23,6 +23,19 @@ function formatDistance(meters: number): string {
   return `${(meters / 1000).toFixed(2)} km`
 }
 
+// Approximate polygon area in m² using the Shoelace formula on spherical coordinates
+function polygonArea(ring: number[][]): number {
+  const toRad = Math.PI / 180
+  const R = 6371000
+  let area = 0
+  const n = ring.length - 1 // exclude closing duplicate
+  for (let i = 0; i < n; i++) {
+    const j = (i + 1) % n
+    area += (ring[j][0] - ring[i][0]) * toRad * (2 + Math.sin(ring[i][1] * toRad) + Math.sin(ring[j][1] * toRad))
+  }
+  return Math.abs(area * R * R / 2)
+}
+
 // Point-to-segment distance in screen pixels (for click detection on lines)
 function pointToSegmentDist(px: number, py: number, x1: number, y1: number, x2: number, y2: number): number {
   const dx = x2 - x1, dy = y2 - y1
@@ -1396,7 +1409,7 @@ export function MapView({
             pointer-events: none;
           `
 
-          const marker = new maplibregl.Marker({ element: arrowEl, anchor: 'center' })
+          const marker = new maplibregl.Marker({ element: arrowEl, anchor: 'center', rotationAlignment: 'viewport' })
             .setLngLat(p2 as [number, number])
             .addTo(map.current)
           markersRef.current.push(marker)
@@ -1468,7 +1481,21 @@ export function MapView({
           el.appendChild(labelLine)
           el.appendChild(infoLine)
         } else {
-          el.textContent = label
+          // Polygon: show label + area
+          const ring = (f.geometry.coordinates as number[][][])[0]
+          const area = polygonArea(ring)
+          const areaText = area < 10000 ? `${Math.round(area)} m²` : `${(area / 10000).toFixed(2)} ha`
+
+          const labelLine = document.createElement('div')
+          labelLine.textContent = label
+          labelLine.style.cssText = 'font-size:11px;font-weight:600;line-height:1.2;'
+
+          const infoLine = document.createElement('div')
+          infoLine.textContent = areaText
+          infoLine.style.cssText = 'font-size:8px;opacity:0.8;line-height:1.2;font-weight:400;'
+
+          el.appendChild(labelLine)
+          el.appendChild(infoLine)
         }
 
         // Double-click to edit label — only in select mode
@@ -1481,7 +1508,7 @@ export function MapView({
           })
         }
 
-        const marker = new maplibregl.Marker({ element: el, anchor: 'center' })
+        const marker = new maplibregl.Marker({ element: el, anchor: 'center', rotationAlignment: 'viewport' })
           .setLngLat(midpoint)
           .addTo(map.current)
         markersRef.current.push(marker)
@@ -1568,7 +1595,7 @@ export function MapView({
           }
 
           try {
-            const marker = new maplibregl.Marker({ element: wrapper, draggable: canEdit, anchor: 'center' })
+            const marker = new maplibregl.Marker({ element: wrapper, draggable: canEdit, anchor: 'center', rotationAlignment: 'viewport' })
               .setLngLat(coords)
               .addTo(map.current)
 
@@ -1634,7 +1661,7 @@ export function MapView({
           el.textContent = (f.properties.text as string) || ''
           wrapper.appendChild(el)
 
-          const marker = new maplibregl.Marker({ element: wrapper, draggable: canEdit, anchor: 'center' })
+          const marker = new maplibregl.Marker({ element: wrapper, draggable: canEdit, anchor: 'center', rotationAlignment: 'viewport' })
             .setLngLat(coords)
             .addTo(map.current)
 

src/lib/auth.ts

@@ -64,12 +64,12 @@ export async function login(
   }) as any)
 
   if (!user) {
-    return { success: false, error: 'Benutzer nicht gefunden' }
+    return { success: false, error: 'E-Mail oder Passwort falsch' }
   }
 
   const isValidPassword = await bcrypt.compare(password, user.password)
   if (!isValidPassword) {
-    return { success: false, error: 'Ungültiges Passwort' }
+    return { success: false, error: 'E-Mail oder Passwort falsch' }
   }
 
   // Track email verification status (allow login regardless)

src/lib/offline-sync.ts

@@ -0,0 +1,97 @@
+// Offline detection and sync queue for saving changes when reconnecting
+
+const SYNC_QUEUE_KEY = 'lageplan-sync-queue'
+
+interface SyncQueueItem {
+  id: string
+  url: string
+  method: string
+  body: string
+  timestamp: number
+}
+
+/** Get all queued saves */
+export function getSyncQueue(): SyncQueueItem[] {
+  try {
+    const raw = localStorage.getItem(SYNC_QUEUE_KEY)
+    return raw ? JSON.parse(raw) : []
+  } catch {
+    return []
+  }
+}
+
+/** Add a save operation to the sync queue (called when offline) */
+export function addToSyncQueue(url: string, method: string, body: any): void {
+  const queue = getSyncQueue()
+  // Deduplicate: if same URL+method exists, replace it with newer data
+  const existing = queue.findIndex(q => q.url === url && q.method === method)
+  const item: SyncQueueItem = {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    url,
+    method,
+    body: JSON.stringify(body),
+    timestamp: Date.now(),
+  }
+  if (existing >= 0) {
+    queue[existing] = item
+  } else {
+    queue.push(item)
+  }
+  localStorage.setItem(SYNC_QUEUE_KEY, JSON.stringify(queue))
+}
+
+/** Flush the sync queue — send all queued requests to the server */
+export async function flushSyncQueue(): Promise<{ success: number; failed: number }> {
+  const queue = getSyncQueue()
+  if (queue.length === 0) return { success: 0, failed: 0 }
+
+  let success = 0
+  let failed = 0
+  const remaining: SyncQueueItem[] = []
+
+  for (const item of queue) {
+    try {
+      const res = await fetch(item.url, {
+        method: item.method,
+        headers: { 'Content-Type': 'application/json' },
+        body: item.body,
+      })
+      if (res.ok) {
+        success++
+      } else {
+        // Server error — keep in queue for retry
+        remaining.push(item)
+        failed++
+      }
+    } catch {
+      // Still offline — keep in queue
+      remaining.push(item)
+      failed++
+    }
+  }
+
+  localStorage.setItem(SYNC_QUEUE_KEY, JSON.stringify(remaining))
+  return { success, failed }
+}
+
+/** Clear the sync queue */
+export function clearSyncQueue(): void {
+  localStorage.removeItem(SYNC_QUEUE_KEY)
+}
+
+/** Check if we're online */
+export function isOnline(): boolean {
+  return navigator.onLine
+}
+
+/** Register Background Sync (if supported) */
+export async function registerBackgroundSync(): Promise<void> {
+  if ('serviceWorker' in navigator && 'SyncManager' in window) {
+    try {
+      const reg = await navigator.serviceWorker.ready
+      await (reg as any).sync.register('sync-saves')
+    } catch {
+      // Background Sync not supported or failed — will use manual flush
+    }
+  }
+}

src/lib/rate-limit.ts

@@ -0,0 +1,107 @@
+// In-memory rate limiter for API endpoints
+// Tracks request counts per IP within sliding windows
+
+interface RateLimitEntry {
+  count: number
+  resetAt: number
+}
+
+const stores = new Map<string, Map<string, RateLimitEntry>>()
+
+interface RateLimitConfig {
+  /** Unique identifier for this limiter (e.g. 'login', 'register') */
+  id: string
+  /** Maximum requests allowed within the window */
+  max: number
+  /** Window duration in seconds */
+  windowSeconds: number
+}
+
+interface RateLimitResult {
+  success: boolean
+  remaining: number
+  resetAt: number
+}
+
+function getStore(id: string): Map<string, RateLimitEntry> {
+  if (!stores.has(id)) {
+    stores.set(id, new Map())
+  }
+  return stores.get(id)!
+}
+
+// Periodic cleanup of expired entries (every 5 minutes)
+setInterval(() => {
+  const now = Date.now()
+  for (const [, store] of stores) {
+    for (const [key, entry] of store) {
+      if (now > entry.resetAt) {
+        store.delete(key)
+      }
+    }
+  }
+}, 5 * 60 * 1000)
+
+export function rateLimit(config: RateLimitConfig) {
+  const store = getStore(config.id)
+
+  return {
+    check(ip: string): RateLimitResult {
+      const now = Date.now()
+      const key = ip
+      const entry = store.get(key)
+
+      // No entry or expired → fresh window
+      if (!entry || now > entry.resetAt) {
+        store.set(key, {
+          count: 1,
+          resetAt: now + config.windowSeconds * 1000,
+        })
+        return { success: true, remaining: config.max - 1, resetAt: now + config.windowSeconds * 1000 }
+      }
+
+      // Within window
+      entry.count++
+      if (entry.count > config.max) {
+        return { success: false, remaining: 0, resetAt: entry.resetAt }
+      }
+
+      return { success: true, remaining: config.max - entry.count, resetAt: entry.resetAt }
+    },
+  }
+}
+
+// Pre-configured limiters for different endpoints
+export const loginLimiter = rateLimit({ id: 'login', max: 5, windowSeconds: 60 * 15 })          // 5 attempts per 15 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 })
+export const contactLimiter = rateLimit({ id: 'contact', max: 5, windowSeconds: 60 * 60 })      // 5 per hour
+export const deleteAccountLimiter = rateLimit({ id: 'delete-acct', max: 3, windowSeconds: 60 * 15 })
+export const resetPasswordLimiter = rateLimit({ id: 'reset-pw', max: 5, windowSeconds: 60 * 15 })
+
+/** Extract client IP from request headers */
+export function getClientIp(req: Request): string {
+  const forwarded = req.headers.get('x-forwarded-for')
+  if (forwarded) {
+    return forwarded.split(',')[0].trim()
+  }
+  const realIp = req.headers.get('x-real-ip')
+  if (realIp) return realIp
+  return '127.0.0.1'
+}
+
+/** Helper: create a 429 response with retry-after header */
+export function rateLimitResponse(resetAt: number) {
+  const retryAfter = Math.ceil((resetAt - Date.now()) / 1000)
+  return new Response(
+    JSON.stringify({ error: 'Zu viele Anfragen. Bitte versuchen Sie es später erneut.' }),
+    {
+      status: 429,
+      headers: {
+        'Content-Type': 'application/json',
+        'Retry-After': String(retryAfter),
+      },
+    }
+  )
+}

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
+}

src/middleware.ts

@@ -0,0 +1,114 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { jwtVerify } from 'jose'
+
+const JWT_SECRET = new TextEncoder().encode(
+  process.env.NEXTAUTH_SECRET || 'dev-only-fallback-do-not-use-in-production'
+)
+
+// Routes that require authentication
+const PROTECTED_ROUTES = ['/app', '/settings', '/admin']
+
+// Routes that should redirect to /app if already logged in
+const AUTH_ROUTES = ['/login', '/register']
+
+// API routes that are public (no auth needed)
+const PUBLIC_API_PREFIXES = [
+  '/api/auth/login',
+  '/api/auth/register',
+  '/api/auth/forgot-password',
+  '/api/auth/reset-password',
+  '/api/auth/verify-email',
+  '/api/auth/resend-verification',
+  '/api/auth/logout',
+  '/api/contact',
+  '/api/demo',
+  '/api/donate',
+  '/api/rapports/',
+  '/api/tenants/by-slug/',
+]
+
+export async function middleware(req: NextRequest) {
+  const { pathname } = req.nextUrl
+  const token = req.cookies.get('auth-token')?.value
+
+  // Verify token if present
+  let user: any = null
+  if (token) {
+    try {
+      const { payload } = await jwtVerify(token, JWT_SECRET)
+      user = payload.user
+    } catch {
+      // Invalid/expired token — clear it
+      const response = NextResponse.redirect(new URL('/login', req.url))
+      response.cookies.delete('auth-token')
+      // Only redirect if accessing protected routes
+      if (PROTECTED_ROUTES.some(r => pathname.startsWith(r))) {
+        return response
+      }
+    }
+  }
+
+  // Protected routes: redirect to login if not authenticated
+  if (PROTECTED_ROUTES.some(r => pathname.startsWith(r))) {
+    if (!user) {
+      const loginUrl = new URL('/login', req.url)
+      loginUrl.searchParams.set('redirect', pathname)
+      return NextResponse.redirect(loginUrl)
+    }
+
+    // Admin routes: only SERVER_ADMIN and TENANT_ADMIN
+    if (pathname.startsWith('/admin') && user.role !== 'SERVER_ADMIN' && user.role !== 'TENANT_ADMIN') {
+      return NextResponse.redirect(new URL('/app', req.url))
+    }
+  }
+
+  // Auth routes: redirect to /app if already logged in
+  if (AUTH_ROUTES.some(r => pathname.startsWith(r))) {
+    if (user) {
+      return NextResponse.redirect(new URL('/app', req.url))
+    }
+  }
+
+  // API routes: check auth for non-public endpoints
+  if (pathname.startsWith('/api/') && !PUBLIC_API_PREFIXES.some(p => pathname.startsWith(p))) {
+    if (!user) {
+      // Allow /api/auth/me to return null (used for auth check)
+      if (pathname === '/api/auth/me') {
+        return NextResponse.next()
+      }
+      // Allow /api/icons GET (public for symbol loading)
+      if (pathname === '/api/icons' && req.method === 'GET') {
+        return NextResponse.next()
+      }
+      return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
+    }
+  }
+
+  // Security: block common attack paths
+  if (
+    pathname.includes('..') ||
+    pathname.includes('.env') ||
+    pathname.includes('wp-admin') ||
+    pathname.includes('wp-login') ||
+    pathname.includes('.php') ||
+    pathname.includes('xmlrpc') ||
+    pathname.match(/\.(sql|bak|config|log|ini)$/i)
+  ) {
+    return new NextResponse(null, { status: 404 })
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except:
+     * - _next/static (static files)
+     * - _next/image (image optimization)
+     * - favicon.ico, sitemap.xml, robots.txt
+     * - public files (images, sw.js, etc.)
+     */
+    '/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt|icons/|sw.js|manifest.json|opengraph-image).*)',
+  ],
+}