Add interactive map to Impressum with configurable coordinates

- Add OpenStreetMap iframe to legal page showing business location
- Support ADDRESS_LATITUDE and ADDRESS_LONGITUDE environment variables
- Generate dynamic map URLs based on configured coordinates
- Include link to full map view
- Update legal-config.ts interface to include latitude/longitude
- Document new environment variables in README.md
- Use Kiel coordinates as default (54.3233, 10.1228)

src/client/components/legal-page.tsx

@@ -1,6 +1,21 @@
 import React, { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 
+// Helper function to generate map coordinates based on address
+function generateMapUrl(address: any) {
+  // Use coordinates from config or default to Kiel coordinates
+  const lat = address.latitude || 54.3233;
+  const lon = address.longitude || 10.1228;
+  
+  // Generate bounding box around the coordinates (0.05 degrees ≈ 5km radius)
+  const bbox = `${lon - 0.05},${lat - 0.05},${lon + 0.05},${lat + 0.05}`;
+  
+  const embedUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat},${lon}`;
+  const fullUrl = `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}#map=16/${lat}/${lon}`;
+  
+  return { embedUrl, fullUrl };
+}
+
 export default function LegalPage() {
   const [activeSection, setActiveSection] = useState<"impressum" | "datenschutz">("impressum");
 
@@ -137,6 +152,37 @@ export default function LegalPage() {
                     {legalConfig.address.postalCode} {legalConfig.address.city}<br />
                     {legalConfig.address.country}
                   </p>
+                  
+                  {/* Map */}
+                  <div className="mt-4">
+                    {(() => {
+                      const { embedUrl, fullUrl } = generateMapUrl(legalConfig.address);
+                      return (
+                        <>
+                          <iframe
+                            src={embedUrl}
+                            width="100%"
+                            height="300"
+                            style={{ border: 0 }}
+                            allowFullScreen
+                            loading="lazy"
+                            referrerPolicy="no-referrer-when-downgrade"
+                            title={`Karte der Umgebung von ${legalConfig.companyName}`}
+                          ></iframe>
+                          <div className="mt-2">
+                            <a 
+                              href={fullUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-sm text-blue-600 hover:text-blue-800 underline"
+                            >
+                              Größere Karte anzeigen
+                            </a>
+                          </div>
+                        </>
+                      );
+                    })()}
+                  </div>
                 </div>
 
                 <div>