<div id="map"></div>

<div class="user-location-crosshair">
  <div class="line-top"></div>
  <div class="line-bottom"></div>
  <!-- Diese Linie existiert jetzt -->
  <div class="line-left"></div>
  <div class="line-right"></div>
  <!-- Diese Linie existiert jetzt -->
</div>




    userMarker = L.marker(userPosition, {
      icon: L.divIcon({
        className: "user-location-crosshair", // Das Fadenkreuz CSS verwenden
        iconSize: [60, 60], // Größe des Fadenkreuzes
        iconSize: [30, 30], // Größe des Fadenkreuzes
      }),
    }).addTo(map); // Marker wieder zur Karte hinzufügen














.user-location-crosshair {
    position: absolute;  /* Damit es exakt auf der Karte positioniert wird */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Zentriert das Fadenkreuz */
    width: 60px;  /* Größe des Fadenkreuzes */
    height: 60px;  /* Größe des Fadenkreuzes */
    z-index: 9999;  /* Stellt sicher, dass das Fadenkreuz immer im Vordergrund bleibt */
}

.line-top,
.line-bottom,
.line-left,
.line-right {
    position: absolute;
    background-color: black;
}

.line-top {
    width: 4px;
    height: 24px;
    top: 50%;
    left: 50%;
    margin-top: -28px;
    margin-left: -2px;
}

.line-bottom {
    width: 4px;
    height: 24px;
    top: 50%;
    left: 50%;
    margin-top: 4px;
    margin-left: -2px;
}

.line-left {
    width: 24px;
    height: 4px;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    margin-left: -28px;
}

.line-right {
    width: 24px;
    height: 4px;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    margin-left: 4px;
}