/* map — interaktive Karte (Leaflet + OSM), Klick-to-Load (nDSG) */

.map-wrap{
  margin-top:34px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}

/* Platzhalter (vor dem Laden) — kein Request an OSM */
.map-placeholder{
  position:relative;
  min-height:380px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:32px 24px;
  color:var(--body);
  background:
    radial-gradient(circle at 22% 28%, rgba(0,166,201,.10), transparent 42%),
    radial-gradient(circle at 82% 74%, rgba(0,73,145,.10), transparent 46%),
    linear-gradient(160deg, var(--soft) 0%, var(--soft2) 100%);
}
/* dezentes Straßenraster als statischer Hintergrund */
.map-placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.55;
  mask-image:radial-gradient(circle at 50% 45%, #000 55%, transparent 100%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 55%, transparent 100%);
  pointer-events:none;
}
.map-placeholder__inner{position:relative;max-width:460px;display:grid;justify-items:center;gap:6px}
.map-placeholder__pin{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;color:var(--blue);
  box-shadow:var(--shadow-lg);
  margin-bottom:8px;
}
.map-placeholder__pin svg{width:32px;height:32px}
.map-placeholder__title{
  font-family:var(--fh);font-weight:800;color:var(--ink);
  font-size:1.15rem;margin:0;
}
.map-placeholder__addr{margin:0;color:var(--muted);font-size:.95rem}
.map-placeholder__note{margin:8px 0 16px;color:var(--muted);font-size:.82rem;max-width:400px}
.map-placeholder .btn{cursor:pointer}

/* geladener Zustand */
.map-canvas{width:100%;height:380px;display:none}
.map-wrap.is-loaded .map-placeholder{display:none}
.map-wrap.is-loaded .map-canvas{display:block}

/* Ladezustand des Buttons */
.map-placeholder.is-loading .btn{opacity:.7;pointer-events:none}

/* Leaflet-Attribution soll ins Design passen */
.map-canvas .leaflet-container{
  font-family:var(--ff);
  background:var(--soft);
}
.map-canvas .leaflet-control-attribution{
  font-size:.72rem;
  background:rgba(255,255,255,.9);
}
.map-canvas .leaflet-bar a{color:var(--ink)}

@media (max-width:640px){
  .map-placeholder{min-height:320px}
  .map-canvas{height:320px}
}