fix: Suchfeld optimiert und alle unnötigen Elemente entfernt

- Container vereinfacht und auf Volle-Breite-Layout umgestellt.
- Überflüssige Elemente im Suchfeld (z.B. Buttons) entfernt.
- Eingabefeld auf maximale Breite erweitert.
- Platzhaltertext auf Deutsch gesetzt.

components/MapComponent.js

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
+
 import "leaflet-contextmenu";
 import * as config from "../config/config.js";
 import "leaflet.smooth_marker_bouncing";
@@ -736,18 +737,95 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         ref.current = new L.LayerGroup().addTo(map);
       }
     });
-
-    // Fügt das Suchfeld (Geocoder) zur Karte hinzu
+    //--------------------------------------------
+    // Benutzerdefiniertes Icon erstellen für den Geocoder
+    const customIcon = L.icon({
+      iconUrl: "/img/marker-icon.png", // Pfad zum Icon
+      iconSize: [32, 32], // Größe des Icons
+      iconAnchor: [16, 32], // Ankerpunkt (Mitte unten)
+      popupAnchor: [0, -32], // Popup-Ankerpunkt
+    });
+    // Geocoder mit benutzerdefiniertem Icon verwenden
     const geocoder = L.Control.geocoder({
-      position: "topleft", // Position des Suchfeldes
-      defaultMarkGeocode: false, // Deaktiviert den automatischen Marker
+      position: "topleft",
+      defaultMarkGeocode: false,
+      geocoder: new L.Control.Geocoder.Nominatim({
+        serviceUrl: "https://nominatim.openstreetmap.org/",
+        geocodingQueryParams: {
+          "accept-language": "de", // Sprache auf Deutsch setzen
+          countrycodes: "DE", // Nur Ergebnisse aus Deutschland
+        },
+      }),
     })
       .on("markgeocode", function (e) {
         const latlng = e.geocode.center;
-        map.setView(latlng, 15); // Zoom zur Position
-        L.marker(latlng).addTo(map).bindPopup(e.geocode.name).openPopup(); // Marker hinzufügen
+        map.setView(latlng, 15);
+
+        // Marker hinzufügen
+        L.marker(latlng, { icon: customIcon }).addTo(map).bindPopup(e.geocode.name).openPopup();
       })
-      .addTo(map); // Suchfeld zur Karte hinzufügen
+      .addTo(map);
+
+    // Tailwind-Klassen dynamisch hinzufügen
+    setTimeout(() => {
+      // Geocoder-Container stylen
+      const geocoderContainer = document.querySelector(".leaflet-control-geocoder");
+      if (geocoderContainer) {
+        // Nur minimale Klassen für Volle Breite und abgerundetes Design
+        geocoderContainer.classList.add(
+          "shadow-md",
+          "border",
+          "border-gray-300",
+          "rounded-full",
+          "bg-white",
+          "p-2",
+          "w-96" // Breite des gesamten Suchfeldes
+        );
+
+        // Alle anderen Elemente im Container entfernen außer Eingabefeld
+        Array.from(geocoderContainer.children).forEach((child) => {
+          if (!child.querySelector("input")) {
+            child.remove(); // Löscht alle Elemente außer dem Eingabefeld
+          }
+        });
+      }
+
+      // Eingabefeld stylen und Platzhaltertext setzen
+      const geocoderInput = document.querySelector(".leaflet-control-geocoder input");
+      if (geocoderInput) {
+        geocoderInput.classList.add(
+          "border-none",
+          "outline-none",
+          "w-full", // Volle Breite nutzen
+          "text-sm",
+          "text-gray-700",
+          "pl-3"
+        );
+        geocoderInput.placeholder = "Ort oder Adresse suchen..."; // Platzhalter auf Deutsch
+      }
+
+      // Meldung "Nothing found." ausblenden
+      const noResultsMessage = document.querySelector(".leaflet-control-geocoder-form-no-error");
+      if (noResultsMessage) {
+        noResultsMessage.style.display = "none"; // Verstecke die Meldung
+      }
+
+      // Alternativen (falls leer) ebenfalls ausblenden
+      const observer = new MutationObserver(() => {
+        const alternatives = document.querySelector(".leaflet-control-geocoder-alternatives");
+        if (alternatives && alternatives.children.length === 0) {
+          alternatives.style.display = "none"; // Verstecke die Liste, wenn keine Vorschläge vorhanden sind
+        }
+      });
+
+      // Beobachte Änderungen im Geocoder-Container
+      const targetNode = document.querySelector(".leaflet-control-geocoder");
+      if (targetNode) {
+        observer.observe(targetNode, { childList: true, subtree: true });
+      }
+    }, 100);
+
+    //--------------------------------------------
 
     const updateMarkers = ({ ref, id, setState }) => {
       if (ref.current) {