feat: Mehrere Suchbegriffe im Maps-Tab (Chip-System)

- Keywords als Chip-Input statt einzelnem Textfeld
- Queries = jedes Keyword × jede Region (Kreuzprodukt)
- Vorschläge für gängige deutsche B2B-Branchen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/maps/page.tsx

@@ -32,12 +32,10 @@ const RESULTS_OPTIONS = [
   { value: "60", label: "60 per query (max)" },
 ];
 
-// Preset queries for common German solar use cases
+const KEYWORD_PRESETS = [
-const PRESET_QUERIES = [
+  "Solaranlage Installateur", "Dachdecker", "Elektriker",
-  "Solaranlage Installateur Deutschland",
+  "Heizungsbauer", "Sanitär", "Steuerberater", "Rechtsanwalt",
-  "Photovoltaik Montage",
+  "Zahnarzt", "Physiotherapeut", "Immobilienmakler",
-  "Solar Handwerker",
-  "Solarstrom Installation",
 ];
 
 const GERMAN_REGIONS = [
@@ -50,7 +48,8 @@ const GERMAN_REGIONS = [
 type Stage = "idle" | "running" | "done" | "failed";
 
 export default function MapsPage() {
-  const [keyword, setKeyword] = useState("Solaranlage Installateur");
+  const [keywords, setKeywords] = useState<string[]>(["Solaranlage Installateur"]);
+  const [keywordInput, setKeywordInput] = useState("");
   const [regions, setRegions] = useState<string[]>(["Bayern", "Baden-Württemberg"]);
   const [regionInput, setRegionInput] = useState("");
   const [maxResults, setMaxResults] = useState("60");
@@ -62,10 +61,18 @@ export default function MapsPage() {
   const [results, setResults] = useState<ResultRow[]>([]);
   const { addJob, updateJob, removeJob } = useAppStore();
 
-  // Build the final queries array: one per region
+  // Build queries: every keyword × every region
-  const queries = regions.length > 0
+  const queries = keywords.length === 0 ? [] :
-    ? regions.map(r => `${keyword} ${r}`)
+    regions.length > 0
-    : [keyword];
+      ? keywords.flatMap(k => regions.map(r => `${k} ${r}`))
+      : keywords;
+
+  const addKeyword = (k: string) => {
+    const trimmed = k.trim();
+    if (trimmed && !keywords.includes(trimmed)) setKeywords(prev => [...prev, trimmed]);
+    setKeywordInput("");
+  };
+  const removeKeyword = (k: string) => setKeywords(prev => prev.filter(x => x !== k));
 
   const addRegion = (r: string) => {
     const trimmed = r.trim();
@@ -78,7 +85,7 @@ export default function MapsPage() {
   const removeRegion = (r: string) => setRegions(prev => prev.filter(x => x !== r));
 
   const startJob = async () => {
-    if (!keyword.trim()) return toast.error("Suchbegriff eingeben");
+    if (!keywords.length) return toast.error("Mindestens einen Suchbegriff eingeben");
 
     setStage("running");
     setResults([]);
@@ -208,28 +215,41 @@ export default function MapsPage() {
           Suchanfrage konfigurieren
         </h2>
 
-        {/* Keyword */}
+        {/* Keywords */}
         <div>
-          <Label className="text-gray-300 text-sm mb-1.5 block">Suchbegriff</Label>
+          <Label className="text-gray-300 text-sm mb-1.5 block">
-          <Input
+            Suchbegriffe
-            placeholder="z.B. Solaranlage Installateur"
+            <span className="text-gray-500 font-normal ml-2">— mehrere möglich</span>
-            value={keyword}
+          </Label>
-            onChange={e => setKeyword(e.target.value)}
+          <div className="min-h-[44px] flex flex-wrap gap-2 p-2.5 bg-[#0d0d18] border border-[#2e2e3e] rounded-lg focus-within:border-green-500 transition-colors mb-2">
-            className="bg-[#0d0d18] border-[#2e2e3e] text-white placeholder:text-gray-600 focus:border-green-500"
+            {keywords.map(k => (
-          />
+              <span key={k} className="flex items-center gap-1 bg-green-500/15 text-green-300 border border-green-500/25 rounded-md px-2.5 py-0.5 text-sm">
-          {/* Presets */}
+                {k}
-          <div className="flex flex-wrap gap-1.5 mt-2">
+                <button onClick={() => removeKeyword(k)} className="hover:text-white transition-colors">
-            {PRESET_QUERIES.map(q => (
+                  <X className="w-3 h-3" />
+                </button>
+              </span>
+            ))}
+            <input
+              className="flex-1 min-w-[160px] bg-transparent text-sm text-white outline-none placeholder:text-gray-600"
+              placeholder="Begriff eingeben, Enter drücken..."
+              value={keywordInput}
+              onChange={e => setKeywordInput(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addKeyword(keywordInput); }
+              }}
+              onBlur={() => keywordInput && addKeyword(keywordInput)}
+            />
+          </div>
+          {/* Keyword presets */}
+          <div className="flex flex-wrap gap-1.5">
+            {KEYWORD_PRESETS.filter(k => !keywords.includes(k)).map(k => (
               <button
-                key={q}
+                key={k}
-                onClick={() => setKeyword(q)}
+                onClick={() => addKeyword(k)}
-                className={`text-xs px-2.5 py-1 rounded-md border transition-all ${
+                className="flex items-center gap-1 text-xs px-2 py-0.5 rounded border border-[#2e2e3e] text-gray-500 hover:border-green-500/30 hover:text-gray-300 transition-all"
-                  keyword === q
-                    ? "bg-green-500/20 text-green-300 border-green-500/40"
-                    : "bg-[#0d0d18] text-gray-500 border-[#2e2e3e] hover:border-green-500/30 hover:text-gray-300"
-                }`}
               >
-                {q}
+                <Plus className="w-2.5 h-2.5" /> {k}
               </button>
             ))}
           </div>
@@ -380,7 +400,7 @@ export default function MapsPage() {
         {stage === "idle" || stage === "failed" ? (
           <Button
             onClick={startJob}
-            disabled={!keyword.trim()}
+            disabled={!keywords.length}
             className="bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white font-medium px-8 shadow-lg hover:shadow-green-500/25 transition-all"
           >
             <MapPin className="w-4 h-4 mr-2" />