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

package.json

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

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

@@ -107,6 +107,7 @@ export function MapView({
   const measureCoordsRef = useRef<number[][]>([])
   const [isMapLoaded, setIsMapLoaded] = 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)
@@ -2106,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)))
                 }
               }
             }}
@@ -2155,33 +2157,52 @@ export function MapView({
       )}
 
       {/* Layer selector dropdown */}
-      <select
-        value={activeBaseLayer}
-        onChange={(e) => {
-          if (!map.current) return
-          const newLayer = e.target.value as 'osm' | 'satellite' | 'swisstopo' | 'swissimage'
-          const allLayers: Array<'osm' | 'satellite' | 'swisstopo' | 'swissimage'> = ['osm', 'satellite', 'swisstopo', 'swissimage']
-          for (const l of allLayers) {
-            map.current.setLayoutProperty(l, 'visibility', l === newLayer ? 'visible' : 'none')
-          }
-          setActiveBaseLayer(newLayer)
-        }}
-        className="absolute top-3 right-3 z-10 px-2.5 py-1.5 rounded-lg text-xs font-semibold shadow-lg border transition-colors cursor-pointer appearance-none pr-7"
-        style={{
-          background: activeBaseLayer !== 'osm' ? 'rgba(0,0,0,0.75)' : 'rgba(255,255,255,0.95)',
-          color: activeBaseLayer !== 'osm' ? '#fff' : '#333',
-          borderColor: activeBaseLayer !== 'osm' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.15)',
-          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='${activeBaseLayer !== 'osm' ? 'white' : '%23333'}' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'right 6px center',
-        }}
-        title="Kartenstil wählen"
-      >
-        <option value="osm">🗺️ OpenStreetMap</option>
-        <option value="satellite">🛰️ Satellit (Esri)</option>
-        <option value="swisstopo">🇨🇭 Swisstopo Karte</option>
-        <option value="swissimage">🇨🇭 Swisstopo Luftbild</option>
-      </select>
+      <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>
+          </>
+        )}
+      </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>