/* Section: Google Maps */

.googlemaps {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--padding-page);
}

.googlemaps .consent {
  background: var(--color-bg-alt);
  padding: var(--space-6);
  text-align: center;
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
}

#map_canvas {
  width: 100%;
  height: 450px;
}

#googlemaps-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
  list-style: none;
  padding: 0;
}

#googlemaps-legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* Pin-Mockups in der Legende — beide Pin-SVGs verwenden currentColor.
   Default-Pin (Immobilie mit Adresse) bekommt --color-primary fuer den
   Brand-Akzent. Makler-Pin nutzt --color-bg-dark fuer eine zurueckhaltende,
   dunkle Variante — visuell ergibt sich die Hierarchie: Immobilie ist
   prominent, Makler ist unterstuetzend. Circle-Mockup ist ein einfaches
   gefuelltes Kreis-Element analog zum Bereichs-Circle auf der Karte. */
.legend-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.legend-default {
  color: var(--color-primary);
}

.legend-makler {
  color: var(--color-bg-dark);
}

.legend-circle {
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 0.0938rem solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.map-info {
  font-size: var(--text-sm);
  line-height: 1.4;
  max-width: 260px;
}

.map-info img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-block-end: var(--space-1);
}

.map-info a {
  text-decoration: none;
  /* Browser-Default a img border + focus-Outline nullen */
  border: none;
  outline: none;
}

.map-info a img {
  border: none;
}

.map-info strong {
  display: block;
}

.map-info small {
  color: var(--color-text-muted);
}

/* Google InfoWindow Close-Button (X) sitzt per Default mit ~38px Inset ins
   Card hinein — sieht "verloren" aus. Auf den Card-Rand ziehen. Beide
   möglichen Container ansprechen (Google ändert Class-Names mit API-Updates).
   !important nötig, weil Google die Werte inline setzt. */
.googlemaps .gm-ui-hover-effect,
.googlemaps .gm-style-iw-chr > button {
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}

@media screen and (max-width: 44.999rem) {
  #map_canvas {
    height: 18rem;
  }

  #googlemaps-legend {
    flex-direction: column;
  }
}

@media screen and (min-width: 45rem) and (max-width: 79.499rem) {
  #map_canvas {
    height: 22rem;
  }
}