/* D2 / Relaunch: interactive Leaflet result map. Loaded only when MAP_INTERACTIVE
   is on; the static-map view keeps its existing styles untouched. */
#results_map.lmap { width: 100%; height: 520px; border-radius: 3px; z-index: 1; }
#results_map.lmap .leaflet-container { font: inherit; }

/* Classic map pins (client, 2026-10-28; before: MoLo's round pictures): a teardrop in navy (--rl-accent) for jobs,
   bigger and gold (--rl-top, as the list's "Top-Stelle") with the logo in the head for paid jobs, the count in the
   head for several jobs at one address; raspberry for the list <-> map highlight. Teal was tried for paid jobs: on
   map tiles it is too close to the navy (MODERNISIERUNG.md D3). Markup: map.js pinIcon() */
#results_map.lmap { --pin-job: var(--rl-accent, #144f7a); --pin-top: var(--rl-top, #c9930e); --pin-hl: #d23c5a; }
.pin { position: relative; transition: transform .12s ease; transform-origin: bottom center; }
.pin svg { display: block; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.pin path { fill: var(--pin-job); stroke: #fff; stroke-width: 1.5; transition: fill .12s ease; }
.pin--top path { fill: var(--pin-top); }
/* the head's centre sits at 16/32 of the width, 15.8/44 of the height */
.pin__dot, .pin__img, .pin__count { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); border-radius: 50%; }
.pin__dot { width: 34%; height: 25%; background: #fff; }
/* logos are mostly not square: contained on white, not cropped */
.pin__img { width: 74%; height: 54%; background: #fff center/80% no-repeat; }
.pin__count { min-width: 60%; height: 44%; padding: 0 3px; background: #fff; color: var(--pin-job);
    font-size: 12px; font-weight: 700; line-height: 15px; display: flex; align-items: center; justify-content: center; }
.pin--top .pin__count { color: #6e5000; }
.pin__badge { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--pin-top); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
    box-shadow: 0 0 0 2px #fff; }

/* clusters: navy discs with a light halo, whatever their size (MarkerCluster.Default.css colours them green to orange) */
#results_map .marker-cluster-small, #results_map .marker-cluster-medium, #results_map .marker-cluster-large { background: rgba(20, 79, 122, .25); }
#results_map .marker-cluster-small div, #results_map .marker-cluster-medium div, #results_map .marker-cluster-large div {
    background: var(--pin-job); color: #fff; font-weight: 700; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
    transition: transform .12s ease, box-shadow .12s ease;
}

/* list <-> map: hovering a job enlarges its pin and turns it raspberry, or rings the cluster holding it
   (the inner element is scaled: Leaflet positions .leaflet-marker-icon itself with a transform) */
.leaflet-marker-icon.pin--highlight { z-index: 10000 !important; }
.pin--highlight .pin { transform: scale(1.25); }
.pin--highlight .pin path { fill: var(--pin-hl); }
#results_map .pin--highlight.marker-cluster > div { transform: scale(1.2); box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--pin-hl); }

.mp__title  { font-weight: 700; margin-bottom: 2px; }
.mp__meta   { color: #666; font-size: 12px; }
.mp__members{ margin: 4px 0 0; padding-left: 16px; }
.mp__more   { color: #666; list-style: none; margin-left: -16px; }

.result--highlight { background: #fffbe6; }