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

.map-wrap{
  /* Leaflet vergibt seinen Panes z-index bis 1000 und schob die Karte damit
     beim Scrollen ueber die klebende Kopfzeile. `isolation` sperrt diese
     Werte in einen eigenen Stapelkontext ein. */
  isolation:isolate;
  margin-top:var(--sp-10);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:var(--bw) 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:var(--surface-sunken);
}
/* dezentes Straßenraster als statischer Hintergrund */
.map-placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--line) var(--bw), transparent var(--bw)),
    linear-gradient(90deg, var(--line) var(--bw), transparent var(--bw));
  background-size:44px 44px;
  opacity:.55;
  mask-image:radial-gradient(circle at 50% 45%, var(--ink) 55%, transparent 100%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, var(--ink) 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:var(--radius-pill);
  display:grid;place-items:center;
  background:var(--surface);color:var(--accent-d);
  border:var(--bw) solid var(--line);
  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(--surface-sunken);
}
.map-canvas .leaflet-control-attribution{
  font-size:.72rem;
  background:var(--surface-header);
}
.map-canvas .leaflet-bar a{color:var(--ink)}

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

/* ----------------------------------------------------------------
   Gelade Karte an die Designsprache angleichen.
   Die bunten OSM-Kacheln stehen quer zur zurueckhaltenden Flaeche der
   Site. Statt einen anderen Kachel-Anbieter einzubinden — das waere ein
   weiterer Dritt-Host und damit ein neuer Datenschutz-Fall — wird die
   vorhandene Kachel-Ebene per Filter entfaerbt. Marker, Bedienelemente
   und die Attribution liegen in anderen Panes und bleiben unberuehrt,
   die Quellenangabe also lesbar.
   ---------------------------------------------------------------- */
.map-canvas .leaflet-tile-pane{
  filter:grayscale(1) contrast(1.04);
}

/* Marker: ein DIV statt der Leaflet-Grafik, damit die Farbe exakt aus den
   Tokens kommt (das Leaflet-Blau liegt daneben).

   ACHTUNG Spezifitaet: leaflet.css wird erst beim Klick nachgeladen, also
   NACH map.css. Bei gleicher Spezifitaet gewinnt deshalb Leaflets
   `.leaflet-div-icon { background:#fff; border:1px solid #666 }` — der
   Marker sah dann wie ein weisses Kaestchen aus. Die Regel muss die
   Leaflet-Klasse mitnennen. */
.leaflet-div-icon.im-marker{background:none;border:0}
.im-marker span{
  display:block;width:22px;height:22px;border-radius:var(--radius-pill);
  background:var(--blue);
  border:calc(var(--bw) * 3) solid var(--white);
  outline:var(--bw) solid var(--blue);
}

/* Bedienelemente: eckig wie der Rest, ohne Schlagschatten */
.map-canvas .leaflet-bar{border:var(--bw) solid var(--line);box-shadow:none;border-radius:0}
.map-canvas .leaflet-bar a{border-radius:0;background:var(--surface)}
.map-canvas .leaflet-bar a:hover{background:var(--surface-sunken)}
.map-canvas .leaflet-control-attribution a{color:var(--blue)}