fix: resolve marker positioning bug and integrate Kirby design system

- Fix marker positioning issue where markers would glide and misalign during zoom
- Implement two-wrapper structure to isolate CSS transforms from MapLibre positioning
- Outer .custom-marker: MapLibre handles positioning via translate3d()
- Inner .marker-inner: Visual transforms (rotate, scale) isolated from MapLibre
- Remove debug console.log statements
- Integrate Kirby design system in MarkerList and GeocodeSearch components
- Use Kirby CSS variables (--input-color-back, --color-border, etc.)

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

public/site/plugins/map-editor/src/components/map/MapPreview.vue

@@ -138,10 +138,11 @@ export default {
           const isMarkerClick = target.closest('.custom-marker');
 
           if (!isMarkerClick) {
-            emit("map-click", {
+            const clickPos = {
               lat: e.lngLat.lat,
               lng: e.lngLat.lng
-            });
+            };
+            emit("map-click", clickPos);
           }
         });
       } catch (error) {
@@ -176,20 +177,27 @@ export default {
         return;
       }
 
-      // Create marker element
+      // Create marker element (outer wrapper for MapLibre positioning)
       const el = document.createElement("div");
       el.className = "custom-marker";
+
+      // Create inner wrapper for visual transforms (isolates from MapLibre transforms)
+      const inner = document.createElement("div");
+      inner.className = "marker-inner";
       if (props.selectedMarkerId === markerData.id) {
-        el.classList.add("selected");
+        inner.classList.add("selected");
       }
 
       // Add marker number
       const numberEl = document.createElement("div");
       numberEl.className = "marker-number";
       numberEl.textContent = index + 1;
-      el.appendChild(numberEl);
+      inner.appendChild(numberEl);
+      el.appendChild(inner);
 
       try {
+        const coords = [markerData.position.lon, markerData.position.lat];
+
         // Create MapLibre marker
         // Anchor at bottom-center (where the pin tip is)
         const marker = new maplibregl.Marker({
@@ -197,7 +205,7 @@ export default {
           draggable: true,
           anchor: 'bottom'
         })
-          .setLngLat([markerData.position.lon, markerData.position.lat])
+          .setLngLat(coords)
           .addTo(map.value);
 
         // Handle marker drag
@@ -244,10 +252,13 @@ export default {
     function updateMarkerSelection(selectedId) {
       markerElements.value.forEach(({ element }, markerId) => {
         if (element) {
-          if (markerId === selectedId) {
-            element.classList.add("selected");
-          } else {
-            element.classList.remove("selected");
+          const inner = element.querySelector('.marker-inner');
+          if (inner) {
+            if (markerId === selectedId) {
+              inner.classList.add("selected");
+            } else {
+              inner.classList.remove("selected");
+            }
           }
         }
       });
@@ -332,22 +343,27 @@ export default {
   }
 }
 
-/* Custom marker styles */
+/* Custom marker outer wrapper - NO transforms here, MapLibre handles positioning */
 .custom-marker {
-  width: 40px;
-  height: 40px;
+  /* MapLibre will position this element via transform: translate3d() */
   cursor: grab;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
 }
 
 .custom-marker:active {
   cursor: grabbing;
 }
 
-.custom-marker::before {
+/* Inner wrapper for visual styling - transforms are isolated here */
+.marker-inner {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.marker-inner::before {
   content: "";
   position: absolute;
   width: 40px;
@@ -360,12 +376,12 @@ export default {
   transition: all 0.2s;
 }
 
-.custom-marker:hover::before {
+.marker-inner:hover::before {
   background: #c0392b;
   transform: rotate(-45deg) scale(1.1);
 }
 
-.custom-marker.selected::before {
+.marker-inner.selected::before {
   background: #3498db;
   border-color: #2980b9;
   box-shadow: 0 4px 12px rgba(52, 152, 219, 0.6);
@@ -378,7 +394,7 @@ export default {
   font-weight: 700;
   font-size: 14px;
   line-height: 1;
-  transform: translateY(-4px);
+  /* transform removed - was causing positioning issues */
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   pointer-events: none;
 }