/* ============================================================
   Ambulante Pflege Entwurf – seitenspezifische Bausteine
   Ergänzt tagespflege.css (gleiches tp-Designsystem)
   ============================================================ */

/* ---------- Leistungs-Karten (ohne Nummerierung) ---------- */
.tp-scope .ap-leistungen > .elementor-container {
  /* min() sorgt dafür, dass die Spalten auf schmalen Displays schrumpfen dürfen */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.tp-scope .ap-leistung > .elementor-element-populated {
  background: #ffffff;
  border: 1px solid #e6e8ea;
  border-radius: 12px;
  padding: 24px 26px !important;
  height: 100%;
  align-content: flex-start;
}
/* Doppelte Klasse hebt die Spezifität über die Elementor-Kit-Regel (die sonst Gewicht 400 setzt),
   ohne !important – eigene Typografie-Einstellungen im Editor gewinnen weiterhin. */
.tp-scope .ap-leistung .ap-leistung-title .elementor-heading-title { font-size: 18px; font-weight: 600; color: #141414; }
.tp-scope .elementor-widget.ap-leistung-title { margin-bottom: 8px; }
.tp-scope .ap-leistung-text p { margin: 0; font-size: 15px; line-height: 1.6; color: #666666; }
.tp-scope .elementor-widget.ap-leistung-text:not(:last-child) { margin-bottom: 10px; }

/* ---------- Vorteils-Karten (Klasse ap-check) ---------- */
.tp-scope .ap-check { background: #fff; border: 1px solid #e6e8ea; border-radius: 12px; padding: 20px 22px; }
.tp-scope .elementor-widget.ap-check:not(:last-child) { margin-bottom: 18px; }
.tp-scope .ap-check .elementor-icon-box-wrapper { display: flex; gap: 16px; align-items: flex-start; text-align: left; }
.tp-scope .ap-check .elementor-icon-box-icon { margin: 0 !important; }
.tp-scope .ap-check .elementor-icon {
  width: 34px; height: 34px; border-radius: 50%; background: #eef5e3;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.tp-scope .ap-check .elementor-icon i { color: #65a747 !important; }
.tp-scope .ap-check .elementor-icon-box-content .elementor-icon-box-title {
  font-size: 16px; margin: 0 0 4px; color: #141414; font-weight: 600;
  font-family: 'Montserrat', system-ui, sans-serif !important;
}
.tp-scope .ap-check .elementor-icon-box-description { font-size: 14px; line-height: 1.6; color: #666666 !important; margin: 0; }

/* ---------- Direktkontakt-Karte ---------- */
.tp-scope .ap-info .ap-info-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid #e6e8ea; font-size: 15px;
}
.tp-scope .ap-info .ap-info-row:last-child { border-bottom: 0; }
.tp-scope .ap-info .ap-info-label { color: #999999; flex: none; }
.tp-scope .ap-info .ap-info-row > span:last-child { text-align: right; color: #3b3d42; font-weight: 500; }
.tp-scope .ap-info a { color: #65a747; font-weight: 600; }
.tp-scope .ap-info a:hover { color: #96c15e; }
.tp-scope .elementor-widget.ap-info { margin-bottom: 4px; }

/* Layout: Text links, Karte rechts */
.tp-scope .tp-area-grid > .elementor-container {
  grid-template-columns: 1fr 1.6fr !important;
  gap: 32px !important;
  align-items: stretch !important;
}

/* Karten-Canvas (wird per JS in das Spacer-Widget #gh-map gemountet) */
.gh-map-canvas {
  width: 100%;
  flex: 1 1 100%;
  height: 100%;
  min-height: 520px;
  border-radius: 12px;
  border: 1px solid #e6e8ea;
  background: #f7fafd;
  overflow: hidden;
  z-index: 0;
}
#gh-map, #gh-map .elementor-widget-container { height: 100%; }

/* Leaflet-Feinschliff */
.gh-map-canvas .leaflet-container { font-family: 'Montserrat', system-ui, sans-serif; background: #f7fafd; }
.gh-map-tip {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #3b3d42;
  border: 1px solid #e6e8ea;
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  padding: 8px 11px;
}
.gh-map-tip-home { border-color: #96c15e; }
.gh-map-label {
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #33531f;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .9);
  pointer-events: none;
}
.gh-map-label::before { display: none; }
.gh-marker span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #65a747;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #65a747, 0 4px 10px rgba(0, 0, 0, .25);
}
.gh-map-canvas .leaflet-control-zoom a {
  color: #3b3d42;
  border-color: #e6e8ea;
}
.gh-map-canvas .leaflet-control-attribution {
  font-size: 10px;
  color: #999;
  background: rgba(255, 255, 255, .75);
}

/* Stadtteil-Chips (dunklere Variante auf weißem Grund) */
.tp-scope .tp-area-chips .tp-chip {
  display: inline-block;
  background: #f7faf6;
  border: 1px solid #d9e7c8;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 14px;
  color: #3b3d42;
  font-weight: 500;
  margin: 0 8px 10px 0;
}
.tp-scope .elementor-widget.tp-area-note { margin-top: 10px; }
.tp-scope .tp-area-note p { margin: 0; font-size: 14px; line-height: 1.6; color: #999; }

/* Responsive */
@media (max-width: 1024px) {
  .tp-scope .tp-area-grid > .elementor-container { grid-template-columns: 1fr !important; }
  .gh-map-canvas { min-height: 440px; }
}
@media (max-width: 767px) {
  .gh-map-canvas { min-height: 380px; }
}