/* ============================================================
   CX-UI — Typ-Modul: MAP (Karten-Portale)
   Sites: ladestationguru, chargemap24, cannapreis, cannamesse,
   privatjetcharter
   ============================================================ */

/* Vollflaechige Karte mit Sidebar */
.cx-map {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  height: calc(100vh - var(--cx-header-h));
  min-height: 520px;
}
.cx-map--right { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.cx-map--full  { grid-template-columns: minmax(0, 1fr); }

.cx-map__canvas { position: relative; background: var(--cx-bg-alt); }
/* Nur der Kartencontainer selbst wird flaechendeckend — NICHT jedes Kind.
   Overlays (.cx-map__overlay) muessen davon ausgenommen bleiben. */
.cx-map__canvas > .leaflet-container,
.cx-map__canvas > .cx-map__el { position: absolute; inset: 0; height: 100%; width: 100%; }

.cx-map__sidebar {
  display: flex; flex-direction: column;
  background: var(--cx-white);
  border-right: 1px solid var(--cx-border);
  overflow: hidden;
}
.cx-map--right .cx-map__sidebar { border-right: 0; border-left: 1px solid var(--cx-border); }

.cx-map__head {
  padding: var(--cx-s4) var(--cx-s5);
  border-bottom: 1px solid var(--cx-border);
  flex: 0 0 auto;
}
.cx-map__count { font-size: var(--cx-fs-sm); color: var(--cx-text-light); }
.cx-map__count b { color: var(--cx-text); font-variant-numeric: tabular-nums; }

.cx-map__list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.cx-map__item {
  display: block;
  padding: var(--cx-s4) var(--cx-s5);
  border-bottom: 1px solid var(--cx-border-light);
  color: inherit;
  cursor: pointer;
  transition: background var(--cx-t);
}
.cx-map__item:hover, .cx-map__item.is-active { background: var(--cx-bg-alt); color: inherit; }
.cx-map__item.is-active { box-shadow: inset 3px 0 0 var(--cx-accent); }
.cx-map__item-title { font-size: var(--cx-fs-base); font-weight: 600; margin-bottom: 2px; }
.cx-map__item-meta  { font-size: var(--cx-fs-xs); color: var(--cx-text-light); display: flex; gap: var(--cx-s3); flex-wrap: wrap; }

/* Filter-Leiste */
.cx-map__filters {
  display: flex; gap: var(--cx-s2); flex-wrap: wrap;
  padding: var(--cx-s3) var(--cx-s5);
  border-bottom: 1px solid var(--cx-border);
  background: var(--cx-white);
}
.cx-filter-chip {
  padding: 5px 12px;
  font-size: var(--cx-fs-sm); font-weight: 500;
  color: var(--cx-text-mid);
  background: var(--cx-bg-alt);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--cx-t);
}
.cx-filter-chip:hover { border-color: var(--cx-border-dark); }
.cx-filter-chip.is-active {
  background: var(--cx-accent); border-color: var(--cx-accent); color: var(--cx-white);
}

/* Karten-Overlay-Controls */
.cx-map__overlay {
  position: absolute; z-index: 500;
  top: var(--cx-s4); left: var(--cx-s4); right: var(--cx-s4);
  display: flex; gap: var(--cx-s2); flex-wrap: wrap;
  pointer-events: none;
}
.cx-map__overlay > * { pointer-events: auto; }
.cx-map__search {
  flex: 1 1 240px; max-width: 380px;
  padding: 10px var(--cx-s4);
  font-size: var(--cx-fs-base);
  background: var(--cx-white);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r);
  box-shadow: var(--cx-sh-lg);
}
.cx-map__search:focus { outline: none; border-color: var(--cx-accent); }

/* Leaflet-Popup auf CX-UI trimmen */
.leaflet-popup-content-wrapper {
  border-radius: var(--cx-r-lg) !important;
  box-shadow: var(--cx-sh-xl) !important;
  padding: 0 !important;
}
.leaflet-popup-content { margin: 0 !important; font-family: var(--cx-font) !important; width: 260px !important; }
.cx-popup { padding: var(--cx-s4); }
.cx-popup__title { font-size: var(--cx-fs-md); font-weight: 600; margin-bottom: var(--cx-s1); }
.cx-popup__meta  { font-size: var(--cx-fs-xs); color: var(--cx-text-light); margin-bottom: var(--cx-s3); }
.cx-popup .cx-btn { width: 100%; }

/* Mobile: Karte oben, Liste als Sheet darunter */
@media (max-width: 1024px) {
  .cx-map, .cx-map--right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 55vh auto;
    height: auto;
  }
  .cx-map__sidebar { border: 0; border-top: 1px solid var(--cx-border); }
  .cx-map__list { max-height: 60vh; }
}
@media (max-width: 480px) {
  .cx-map, .cx-map--right { grid-template-rows: 45vh auto; }
  .cx-map__head, .cx-map__item, .cx-map__filters { padding-inline: var(--cx-s4); }
}