* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1d2b36; background: #f4f6f8; }
body { display: flex; }
#map { flex: 1; height: 100%; }

#panel { width: 300px; height: 100%; overflow-y: auto; padding: 16px; background: #fff; border-right: 1px solid #dde3e8; z-index: 2; }
h1 { font-size: 18px; margin: 0 0 12px; }
h1 span { font-weight: 400; color: #5a6b78; }

.basemap { display: flex; gap: 4px; margin-bottom: 14px; }
.basemap button { flex: 1; padding: 6px; border: 1px solid #c9d2d9; background: #fff; border-radius: 6px; cursor: pointer; font: inherit; }
.basemap button.active { background: #1d2b36; color: #fff; border-color: #1d2b36; }

#gruppen label { display: flex; align-items: center; gap: 8px; margin: 4px 0; cursor: pointer; }
.swatch { width: 14px; height: 14px; border-radius: 3px; border: 2px solid; }

#liste { list-style: none; padding: 0; margin: 12px 0; border-top: 1px solid #eef1f4; }
#liste li { padding: 7px 4px; border-bottom: 1px solid #eef1f4; cursor: pointer; }
#liste li:hover { background: #f2f6f9; }
#liste li small { display: block; color: #6b7b88; }

.hinweis-klein { font-size: 12px; color: #6b7b88; }

.popup h3 { margin: 0 0 4px; font-size: 15px; }
.popup .gruppe { color: #5a6b78; font-size: 12px; margin-bottom: 6px; }
.popup p { margin: 4px 0; }
.popup .status { color: #a15c00; font-size: 12px; }
.popup { padding-right: 28px; } /* Platz für das große Schließen-Kreuz */
.popup .gmaps {
  display: block; margin-top: 8px; padding: 8px 10px; text-align: center;
  background: #1a73e8; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 600;
}
.popup .gmaps:hover { background: #1558b0; }

/* Großes, gut treffbares Schließen-Kreuz (MapLibre und Mapbox) */
.maplibregl-popup-close-button,
.mapboxgl-popup-close-button {
  width: 36px; height: 36px; font-size: 28px; line-height: 32px;
  color: #1d2b36; border-radius: 0 6px 0 8px;
}
.maplibregl-popup-close-button:hover,
.mapboxgl-popup-close-button:hover { background: #eef1f4; }

@media (max-width: 700px) {
  body { flex-direction: column-reverse; }
  #panel { width: 100%; height: 40%; border-right: 0; border-top: 1px solid #dde3e8; }
  #map { height: 60%; }
}