/* ============================================================
   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;
  }
}

/* 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;
}