/* JSM – Standortkarte im Footer (siehe assets/js/map.js) */
.jsm-map {
  position: relative;
  height: clamp(340px, 52vh, 560px);
  margin: 0 0 clamp(56px, 7vw, 88px);
  border-radius: 24px;
  overflow: hidden;
  background: #fbfbfc;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 60px -30px rgba(0, 0, 0, .18);
  isolation: isolate;
}
.jsm-map canvas { outline: none; }
.jsm-map.is-failed::after {
  content: "Karte konnte nicht geladen werden";
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--jsm-muted, #6e6e73); font-size: 15px;
}

/* Routen-Link oben rechts */
.jsm-map__route {
  position: absolute; right: 16px; top: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: .45em;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
  font-size: 14px; font-weight: 500; color: var(--jsm-text, #1d1d1f) !important;
  transition: background .25s, transform .25s;
}
.jsm-map__route:hover { background: #fff; transform: translateY(-1px); }

/* Markierung: Puls-Punkt + Schild, blendet beim Heranzoomen ein (--jsm-map-in 0…1) */
.jsm-map__marker {
  --jsm-map-in: 0;
  display: flex; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
/* Deckkraft an den Kindern – MapLibre setzt am Marker selbst ein eigenes opacity */
.jsm-map__marker > * { opacity: var(--jsm-map-in); }
.jsm-map__marker i {
  position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: #C1D68D; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(92, 116, 36, .5);
}
.jsm-map__marker i::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid #7a9a35; animation: jsm-map-pulse 2.2s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes jsm-map-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.jsm-map__marker span {
  transform: translateY(calc((1 - var(--jsm-map-in)) * 8px)) translateY(-14px);
  padding: 9px 14px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 30px -12px rgba(0, 0, 0, .25);
  font-size: 14px; font-weight: 600; color: #1d1d1f; white-space: nowrap; line-height: 1.25;
}
.jsm-map__marker small { display: block; font-size: 12px; font-weight: 400; color: #6e6e73; }

.jsm-map .maplibregl-ctrl-attrib { font-size: 10px; background: rgba(255, 255, 255, .7); }

@media (max-width: 900px) {
  .jsm-map { height: clamp(360px, 62vh, 520px); border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .jsm-map__marker i::after { animation: none; }
}