v1.0.9: fix emoji rendering, Pizza label, auto payment methods

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'",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lageplan",
-  "version": "1.0.5",
+  "version": "1.0.9",
   "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

@@ -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) => {

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: [
         {

src/app/app/page.tsx

@@ -20,7 +20,7 @@ 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 { addToSyncQueue, flushSyncQueue, getSyncQueue, isOnline as checkOnline } from '@/lib/offline-sync'
 
@@ -507,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
@@ -546,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)

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">

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>
 

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.

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 */}

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' | 'swissimage'>('osm')
+  const [layerDropdownOpen, setLayerDropdownOpen] = useState(false)
   const [measurePointCount, setMeasurePointCount] = useState(0)
   const [measureFinished, setMeasureFinished] = useState(false)
   const [drawingPointCount, setDrawingPointCount] = useState(0)
@@ -689,6 +690,24 @@ 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,
+          },
+          'swissimage': {
+            type: 'raster',
+            tiles: [
+              'https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.swissimage/default/current/3857/{z}/{x}/{y}.jpeg',
+            ],
+            tileSize: 256,
+            attribution: '© swisstopo SWISSIMAGE',
+            maxzoom: 18,
+          },
         },
         layers: [
           {
@@ -702,6 +721,18 @@ export function MapView({
             source: 'satellite',
             layout: { visibility: 'none' },
           },
+          {
+            id: 'swisstopo',
+            type: 'raster',
+            source: 'swisstopo',
+            layout: { visibility: 'none' },
+          },
+          {
+            id: 'swissimage',
+            type: 'raster',
+            source: 'swissimage',
+            layout: { visibility: 'none' },
+          },
         ],
       },
       center: [initialCenter.lng, initialCenter.lat],
@@ -953,7 +984,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 +993,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 +2107,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 +2156,53 @@ 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', swissimage: 'Luftbild CH' }[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' },
+                { key: 'swissimage', label: 'Luftbild CH' },
+              ] as const).map(({ key, label }) => (
+                <button
+                  key={key}
+                  onClick={() => {
+                    if (!map.current) return
+                    const allLayers: Array<'osm' | 'satellite' | 'swisstopo' | 'swissimage'> = ['osm', 'satellite', 'swisstopo', 'swissimage']
+                    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 && (

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>

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