/* ============================================================
   Google Maps Container + Consent Overlay
   HTML: <section data-map-consent> + <div data-map-config>
   ============================================================ */

[data-map-config] {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}

/* Layout der Consent-Box — bg/border/radius kommen aus globaler .panel-Klasse
   (siehe 02-base.css). Markup: <section data-map-consent class="panel">. */
[data-map-consent] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: var(--gap-block);
  text-align: center;
}

[data-map-consent] p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Mobile: mehr Kartenhöhe (16:9 ist zu flach auf schmalem Viewport) */
@media (max-width: 44.999rem) {
  [data-map-config],
  gmp-map-3d {
    aspect-ratio: 3 / 4;
  }
}

/* InfoWindow-Text explizit dunkel halten. Im dunklen Lightbox-Dialog
   (.media-dialog: color var(--color-text-inverse)) würde der Google-InfoWindow
   sonst die helle Farbe erben → unsichtbar (weiß auf weiß). Betrifft Property-
   Marker (strong + Adresse) wie Nearby-Boxen (.map-info). */
.gm-style .gm-style-iw {
  color: var(--color-text);
}

/* 3D Toggle Button — sits top-right inside the map container's parent */
.map-3d-toggle {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 5;
  padding: var(--space-1) var(--space-3);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--transition), border-color var(--transition);
}

.map-3d-toggle:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
}

/* 3D Map element matches 2D map dimensions */
gmp-map-3d {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  display: block;
}

/* Grundstuecksgrenzen (maps.js addParcels, Migration 2006). Die Kataster-Bilder sind schwarz/blau/lila je
   Amt — auf dem Satellitenbild (.parcels-light) einheitlich weiss, auf der Strassenkarte im Original. */
[data-map-config].parcels-light img[src*="REQUEST=GetMap"] {   /* das GroundOverlay-Bild des Amts */
  filter: brightness(0) invert(1);
}

.map-parcels-btn {
  margin: var(--space-3) 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: 0.125rem;
  background: #fff;
  color: #333;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, .3);
}

.map-parcels-btn[aria-pressed="true"] {
  box-shadow: inset 0 0 0 0.125rem var(--color-primary), 0 0.0625rem 0.25rem rgba(0, 0, 0, .3);
}

.map-parcels-note {
  margin: 0 0 var(--space-1) var(--space-1);
  padding: 0 var(--space-1);
  background: rgba(255, 255, 255, .75);
  color: #333;
  font-size: 0.625rem;
}