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

/* --- Vollbild-Variante (Section\Map, 'variant' => 'full') ---
   Für Seiten, die im Wesentlichen aus der Karte bestehen. Die Karte füllt den sichtbaren
   Bereich unter dem Header; --sticky-offset wird von header.js mit der echten Header-Höhe
   befüllt (dasselbe Muster wie die sticky Aside auf der Objektseite).
   Untergrenze 30rem, damit die Karte auf niedrigen Fenstern nicht zum Schlitz wird.
   dvh statt vh: auf Mobilgeräten sonst Sprünge beim Ein-/Ausblenden der Browserleisten.
   ⚠ Die Karte IST das [data-map-config]-Element (maps.js renderMultiMap); das
   16:9 aus components/map.css muss dafür ausdrücklich weichen. */
.googlemaps-full [data-map-config] {
  height: max(30rem, calc(100dvh - var(--sticky-offset, 0px) - var(--gap-section)));
  aspect-ratio: auto;
}

/* Volle Breite — eine Kartenseite soll nicht in der Textspalte kleben. */
.googlemaps-full {
  max-width: none;
}

/* Solange die Cookie-Zustimmung fehlt, ist dieses Panel auf einer reinen Kartenseite der
   EINZIGE sichtbare Inhalt (die Karte selbst lädt erst nach Zustimmung, s. maps.js).
   Oben links wirkt es dann wie ein Rest; hier bekommt es die Fläche der Karte und sitzt
   mittig — wie eine bewusste Zwischenseite. Nur in der Vollbild-Variante nötig. */
.googlemaps-full [data-map-consent] {
  display: grid;
  place-content: center;
  gap: var(--space-4);
  justify-items: center;
  min-height: max(30rem, calc(100dvh - var(--sticky-offset, 0px) - var(--gap-section)));
  text-align: center;
}

/* --- Mehrere Objekte auf einer Position ---------------------------------------
   ⚠ Die Plakette mit der Anzahl wird NICHT hier gestylt: beide Karten zeichnen
   sie als Google-Symbol-Marker (maps.js IMMO_MAP_COUNT_MARKER), weil sie mit
   JSON-Styles arbeiten und deshalb keine HTML-Marker (AdvancedMarkerElement)
   setzen können. Farben und Schriftgrößen stehen dort — beim Anpassen also
   dort schauen, nicht hier. Was CSS-seitig bleibt, ist das Blättern:

   Blättern im Infofenster („‹ 3 / 21 ›"). Der Zähler ist sprachneutral. */
.map-info-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 0.0625rem solid var(--color-panel-border);
  font-size: var(--text-sm);
}

.map-info-nav button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0 var(--space-2);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-primary);
}

.map-info-nav button:hover {
  opacity: 0.7;
}

#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;
}

/* Bild in seinem eigenen Format — GANZ sichtbar, nichts weggeschnitten.
   Zwischenzeitlich stand hier eine feste Höhe mit `cover`; das war nur die
   Notbremse gegen Googles internen Scrollbalken, und der ist unten an der
   Wurzel behoben (max-height/overflow der drei Fenster-Ebenen). Ohne Deckel
   wächst das Fenster einfach mit.
   `max-height` fängt nur den Ausreißer ab: ein Hochformat-Foto würde das
   Fenster sonst über die halbe Karte ziehen. Dann greift `contain`, das Bild
   wird eingepasst statt beschnitten. */
.map-info img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 12rem;
  object-fit: contain;
  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 deckelt Fenster UND Inhalt per inline max-height und scrollt den Rest
   intern weg — bei uns hieß das: das Objektbild stand beim Öffnen schon halb
   über dem oberen Rand. Ein schmalerer Balken kuriert nur das Symptom.
   Der Deckel ist hier unnötig, weil der Inhalt SELBST begrenzt ist: Bild auf
   feste Höhe, Titel bei 40 Zeichen gekürzt (maps.js buildObjektInfo), darunter
   drei Zeilen und die Blätterleiste — zusammen rund 300px, das passt in jede
   Kartenfläche. Deckel abnehmen statt scrollen.
   ⚠ Es sind MEHRERE Ebenen: Google schachtelt zwischen Fensterrahmen
   (.gm-style-iw-c) und unserem .map-info noch .gm-style-iw-d UND — je nach
   API-Version — ein klassenloses div mit inline `overflow: auto`. Nur die
   benannten Ebenen freizugeben reichte nicht; der Balken saß danach im
   namenlosen Wrapper. Deshalb alle drei, und `overflow: visible` statt
   `hidden`: lieber wächst das Fenster, als dass unten etwas abgeschnitten
   wird (autoPan schiebt die Karte nach). */
.gm-style-iw-c,
.gm-style-iw-d,
.gm-style-iw-d > div {
  max-height: none !important;
  overflow: visible !important;
}

/* Google baut ÜBER dem Inhalt eine eigene Kopfzeile (.gm-style-iw-chr), die nur
   den Close-Button trägt — je nach API-Version 40–56px. Sie liegt im Fluss und
   zählt gegen die gedeckelte Fensterhöhe: was am Bild gespart wird, holt sie
   sich zurück. Deshalb blieb der Scrollbalken trotz kleinerem Bild.
   Kopfzeile aus dem Fluss nehmen und oben rechts über den Inhalt legen.
   Kein Scope auf .googlemaps — gilt für ALLE Karten (Suche, Objekt, Anfahrt). */
.gm-style-iw-chr {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 2;
}

/* Der Button liegt jetzt auf dem Objektbild — weißer Grund, damit das ✕ auf
   hellen wie dunklen Motiven erkennbar bleibt. Beide möglichen Container
   ansprechen (Google ändert Class-Names mit API-Updates); !important nötig,
   weil Google die Werte inline setzt. */
.gm-ui-hover-effect,
.gm-style-iw-chr > button {
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border-end-start-radius: var(--radius);
}

@media screen and (max-width: 44.999rem) {
  #googlemaps-legend {
    flex-direction: column;
  }
}