/* Camplix · umgebung.css — Umgebungs-Orte: runde Icon-Marker auf den Karten
   (Gastgeber-Spot-Seite und /spots/) und die Karten-Liste „Rund um deinen
   Platz". Wird nur dort eingebunden (spot-detail.js, spots-index.js) und in
   build.mjs versioniert wie die anderen Stylesheets. */

/* ── Marker: runder weißer Kreis mit Typ-Icon, Anker mittig ─────────────── */
.camplix-ort-pin { cursor: pointer; }
.camplix-ort-pin-inner {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #fff;
  color: #2BA8A8;
  border: 2px solid #2BA8A8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.28);
  transition: transform 150ms ease-out, background 150ms, color 150ms;
}
.camplix-ort-pin:hover .camplix-ort-pin-inner,
.camplix-ort-pin.is-active .camplix-ort-pin-inner {
  background: #2BA8A8;
  color: #fff;
  transform: scale(1.1);
}
/* Kultur und Essen in Terracotta, Natur und Bewegung in Türkis — zwei
   Farben reichen, damit die Karte lesbar bleibt. */
.camplix-ort-pin[data-typ="sehenswuerdigkeit"] .camplix-ort-pin-inner,
.camplix-ort-pin[data-typ="kulinarik"] .camplix-ort-pin-inner {
  color: #C17252;
  border-color: #C17252;
}
.camplix-ort-pin[data-typ="sehenswuerdigkeit"]:hover .camplix-ort-pin-inner,
.camplix-ort-pin[data-typ="sehenswuerdigkeit"].is-active .camplix-ort-pin-inner,
.camplix-ort-pin[data-typ="kulinarik"]:hover .camplix-ort-pin-inner,
.camplix-ort-pin[data-typ="kulinarik"].is-active .camplix-ort-pin-inner {
  background: #C17252;
  color: #fff;
}

/* ── Infokarte (Mapbox-Popup) — Grundrahmen kommt aus .camplix-popup ───── */
.mapboxgl-popup.camplix-ort-popup .mapboxgl-popup-content { width: 260px; }
.camplix-ort-popup-typ {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2BA8A8;
}
.camplix-ort-popup-km { color: #7A6C60; text-transform: none; letter-spacing: 0; font-weight: 600; }
.camplix-ort-popup-name {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  color: #2C2C2C;
  font-size: 15px;
  line-height: 1.25;
  margin-top: 3px;
}
.camplix-ort-popup-text { font-size: 12px; color: #7A6C60; margin-top: 6px; line-height: 1.45; }
.camplix-ort-popup-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #2BA8A8;
  text-decoration: none;
}
.camplix-ort-popup-link:hover { text-decoration: underline; }

/* ── Karten-Liste unter der Karte auf der Spot-Seite ───────────────────── */
.cx-ort-card { transition: box-shadow 150ms, border-color 150ms; }
.cx-ort-card.is-active {
  border-color: #2BA8A8;
  box-shadow: 0 0 0 2px rgba(43, 168, 168, 0.25);
}