/* --- 2. PHOCA MAPS RESPONSIVE HÖHEN & BREITEN (Für Beiträge UND Menü) --- */

/* Das hier zwingt die Karte im Menü, sichtbar zu sein */
#phocaMaps, 
#phocamapsbox, 
.phocamaps-box, 
.phocamaps-map, 
.leaflet-container {
  height: 500px !important;
  min-height: 500px !important;
  display: block !important;
}

/* Tablet */
@media (max-width: 991px) {
  #phocaMaps, #phocamapsbox, .phocamaps-box, .phocamaps-map, .leaflet-container {
    height: 420px !important;
    min-height: 420px !important;
  }
}

/* Smartphone */
@media (max-width: 767px) {
  #phocaMaps, #phocamapsbox, .phocamaps-box, .phocamaps-map, .leaflet-container {
    height: 360px !important;
    min-height: 360px !important;
  }
}


/* --- 3. FIX FÜR DIE KARTEN-BREITE IM MENÜ --- */

/* Wenn die Karte direkt im Menü geladen wird (phocaMaps ID), begrenzen wir sie hier direkt auf 800px */
div#phocaMaps {
  max-width: 800px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.leaflet-container {
  overflow: hidden !important; /* Hält die Kartenelemente im Zaum */
}

.leaflet-popup-pane,
.leaflet-marker-pane,
.leaflet-tooltip-pane {
  z-index: 1000 !important;
}