/* Karten-Bedienung (MapLibre). Die Seitenabschnitte der Kartenseite (.mvm-seo-*)
   stehen seit 2026-09-30 in scss/map-page.scss -> muvamo-map-page.css. */

/**
 * muvamo-maplibre-demo.css — Klassen-Parität für die MapLibre-Demo (/map-demo/).
 *
 * Unser Map-Styling in main.scss/muvamo.css hängt an Mapbox' generierten Klassen
 * (`mapboxgl-ctrl`, `mapboxgl-marker`, …). MapLibre generiert dieselben Elemente
 * mit `maplibregl-*`-Präfix, deshalb greift dort nichts davon. Diese Datei
 * spiegelt genau die betroffenen Regeln — 1:1 dieselben Werte wie in muvamo.css,
 * nur mit MapLibre-Präfix. Sie wird ausschliesslich auf /map-demo/ geladen.
 *
 * Produktiv-Gegenstücke (Stand 2026-07-29): scss/main.scss Zeilen ~3755, ~3765,
 * ~3789, ~3793, ~4205, ~8014, ~9712. Ändert sich dort etwas, hier nachziehen —
 * oder, wenn MapLibre produktiv wird, die Selektoren in main.scss um die
 * maplibre-Variante ergänzen und diese Datei löschen.
 */

/* main.scss ~4205: .mapboxgl-control-container */
.maplibregl-control-container {
  z-index: 9999;
}

/* main.scss ~3765: Control-Ecken über die Karte, unter Menü/Suche */
.maplibregl-ctrl-bottom,
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-left,
.maplibregl-ctrl-right,
.maplibregl-ctrl-top,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-top-right {
  z-index: 999 !important;
}

/* main.scss ~3789: Button-Grösse der Control-Gruppen (Zoom, Suche, Filter, GPS) */
.maplibregl-ctrl-group button {
  height: 40px !important;
  width: 40px !important;
}

/* main.scss ~3793: Icon-Font in unseren eigenen Controls */
.maplibregl-ctrl .et-pb-icon {
  font-size: 15px;
  color: #587abc;
}

/* main.scss ~8014: GPS-Punkt über den Basemap-Layern, unter den Markern.
   MapLibre kennt keine gemeinsame `maplibregl-user-location`-Klasse, sondern nur
   die beiden konkreten Elemente — deshalb hier zwei Selektoren statt einem. */
.maplibregl-user-location-dot,
.maplibregl-user-location-accuracy-circle {
  z-index: 145;
}

/* main.scss ~3755: Mapbox' Gesten-Overlay wird produktiv ausgeblendet.
   MapLibres Pendant heisst .maplibregl-cooperative-gesture-screen — die
   cooperativeGestures-Logik selbst bleibt aktiv, nur der Hinweis-Layer geht weg. */
.maplibregl-cooperative-gesture-screen {
  z-index: 10000 !important;
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
  display: none !important;
  visibility: hidden !important;
}

/* main.scss ~9712: Itinerary-Übersicht zeigt Spot-Marker erst ab Zoom 12.5 */
.muvamo_itinerary_map:not(.itz-show-markers) .maplibregl-marker {
  display: none !important;
}

/* Attribution muss sichtbar bleiben (© OpenFreeMap © OpenMapTiles © OSM).
   Die Bottom-Card-Leiste liegt auf z-index 9999 und würde sie sonst je nach
   Kartenhöhe überdecken. */
.maplibregl-ctrl-bottom-right {
  z-index: 10001 !important;
}

.maplibregl-ctrl-attrib {
  font-size: 11px;
}

/* ------------------------------------------------------------------------
 * Performance-Build (muvamo-maplibre.js, P8): Marker-Scaling über EINE
 * CSS-Variable am #map statt eines Inline-transform je Marker.
 * Spezifität (1,2,0) schlägt `.muvamoMarkerOuter .muvamoMarker:hover` wie
 * vorher der Inline-Style; das `transform: scale(1)!important` des Highlights
 * gewinnt weiterhin. Ohne .mvm-scale (Marker-Spread > 50 km) gilt das
 * Standard-CSS wie in der Produktiv-Karte ohne Scaling.
 * ---------------------------------------------------------------------- */
#map .muvamoMarkerOuter .muvamoMarker {
  transform-origin: center bottom;
}

#map.mvm-scale .muvamoMarkerOuter .muvamoMarker {
  transform: scale(var(--mvm-marker-scale, 1));
}

/* Mindestgrößen (UX-Build, #map.mvm-ci): Symbol-Marker ohne Foto nie unter 0.75,
   Foto-Marker nie unter 0.5 - sonst werden sie rausgezoomt zu namenlosen Punkten.
   Werte gespiegelt in MVM_MIN_SCALE (muvamo-maplibre.js, Kollisionsprüfung). */
#map.mvm-ci.mvm-scale .muvamoMarkerOuter .muvamoMarker.size1,
#map.mvm-ci.mvm-scale .muvamoMarkerOuter .muvamoMarker.size0 {
  transform: scale(max(var(--mvm-marker-scale, 1), 0.75));
}

#map.mvm-ci.mvm-scale .muvamoMarkerOuter .muvamoMarker.size2,
#map.mvm-ci.mvm-scale .muvamoMarkerOuter .muvamoMarker.size3 {
  transform: scale(max(var(--mvm-marker-scale, 1), 0.5));
}

/* Blickrichtungs-Kegel am GPS-Punkt (assets/muvamo-maplibre-heading.js): unter dem
   Standortpunkt (z-index 145, s. o.), über den Muvamo-Markern. */
.muvamo-user-heading {
  z-index: 144;
  pointer-events: none;
  width: 110px;
  height: 110px;
}

.muvamo-user-heading svg {
  display: block;
}

/* ==========================================================================
 * UX-Umbau A/B (2026-09-25) - NUR optimierter Build: muvamo-maplibre.js setzt
 * #map.mvm-ci (CI-Look) und .mvm-hier (Zoom-Rangfolge, Vollbild + Modal).
 * Baseline und Produktiv-Karte sind nicht betroffen.
 * ========================================================================== */

/* A2: Rangfolge per Kollision (.mvm-collide aus declutterMarkers()) + feste
   Zoom-Schwelle nur für Hotels (z14); Fotopunkte size0 seit 2026-09-26 ohne Schwelle (Wunsch: POIs immer sichtbar).
   !important, weil filterMarkers() Inline-display setzt.
   Mit aktivem Filter (.mvm-filtered) ist alles Gefilterte sichtbar; das gerade
   ausgewählte Popup (.highlight) ist immer sichtbar. In der Übersicht bleiben
   einzeln stehende Spots (.mvm-solo) und Guide-Icons (.mvm-guide) sichtbar. */
#map.mvm-hier:not(.mvm-overview) .muvamoMarkerOuter.mvm-collide:not(.highlight):not(.mvm-guide),
#map.mvm-hier:not(.mvm-filtered):not(.mvm-z14) .muvamoMarkerOuter.mvm-hotel:not(.highlight):not(.mvm-solo),
#map.mvm-hier.mvm-overview .muvamoMarkerOuter:not(.highlight):not(.mvm-solo):not(.mvm-guide):not(.mvm-imploding) {
  display: none !important;
}

/* Must-Sees + Awards verschwinden nie (declutterMarkers): bei Platzmangel
   kleiner Fotopunkt statt ausgeblendet. Spezifität schlägt die Scale-Regeln. */
#map.mvm-ci.mvm-scale .muvamoMarkerOuter.mvm-mini .muvamoMarker,
#map.mvm-ci .muvamoMarkerOuter.mvm-mini .muvamoMarker {
  transform: scale(0.36) !important;
}

#map.mvm-ci .muvamoMarkerOuter.mvm-mini.mvm-size1 .muvamoMarker {
  transform: scale(0.68) !important;
}

#map.mvm-ci .muvamoMarkerOuter.mvm-mini:not(.highlight) {
  z-index: 95 !important;
}

/* B: Steuerelemente - runde weiße Knöpfe, weicher Schatten, CI-Blau */
#map.mvm-ci .maplibregl-ctrl-top-left .maplibregl-ctrl,
#map.mvm-ci .maplibregl-ctrl-top-right .maplibregl-ctrl {
  margin: 12px 12px 0;
}

/* KEIN overflow:hidden - das Filter-Dropdown hängt IN der Control-Gruppe
   (addFilterDropdowns: .after() am Filter-Knopf) und würde abgeschnitten. */
#map.mvm-ci .maplibregl-ctrl-group {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(38, 50, 80, 0.16);
  background: #ffffff;
}

#map.mvm-ci .maplibregl-ctrl-group button:first-child {
  border-radius: 14px 14px 0 0;
}

#map.mvm-ci .maplibregl-ctrl-group button:last-of-type {
  border-radius: 0 0 14px 14px;
}

#map.mvm-ci .maplibregl-ctrl-group button:only-of-type {
  border-radius: 14px;
}

/* Zoom-Gruppe: nach „−“ folgt der (ungedreht versteckte) Kompass - „−“ ist dann
   optisch der letzte Knopf und braucht die runden Ecken (Hover war sonst eckig) */
#map.mvm-ci:not(.mvm-rotated) .maplibregl-ctrl-zoom-out {
  border-radius: 0 0 14px 14px;
}

#map.mvm-ci .maplibregl-ctrl-group button {
  width: 44px !important;
  height: 44px !important;
}

#map.mvm-ci .maplibregl-ctrl-group button + button {
  border-top: 1px solid #eef0f5;
}

#map:not(.mvm-touch).mvm-ci .maplibregl-ctrl-group button:hover {
  background-color: #feefe6;
}

/* GPS-Symbol (schwarzes SVG aus MapLibre) im Ruhezustand in Muvamo-Blau */
#map.mvm-ci .maplibregl-ctrl-geolocate:not(.maplibregl-ctrl-geolocate-active):not(.maplibregl-ctrl-geolocate-background):not(.maplibregl-ctrl-geolocate-waiting) .maplibregl-ctrl-icon {
  filter: invert(45%) sepia(19%) saturate(1395%) hue-rotate(187deg) brightness(92%) contrast(88%);
}

/* aktiver Filter: Pfirsich statt Vollblau (CI-Akzent) */
#map.mvm-ci .muvamo_filter.loaded {
  background-color: #f6d8c1 !important;
}

#map.mvm-ci .muvamo_filter.loaded .et-pb-icon {
  color: #587abc !important;
}

/* Suche */
#map.mvm-ci #mapsearch input {
  top: 12px;
  left: 68px;
  height: 44px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(38, 50, 80, 0.16);
  padding: 0 16px;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  font-size: 15px;
}

#map.mvm-ci .muvamo_autocomplete_result.map {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(38, 50, 80, 0.18);
  overflow: hidden;
}

/* Filter-Dropdowns */
#map.mvm-ci .muvamo_filter_dropdown,
#map.mvm-ci .muvamo_filter_dropdown_2 {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(38, 50, 80, 0.18);
  top: 58px;
}

#map:not(.mvm-touch).mvm-ci .muvamo_filter_dropdown li:hover,
#map:not(.mvm-touch).mvm-ci .muvamo_filter_dropdown_2 li:hover {
  background-color: #feefe6;
}

/* Tooltip */
#map.mvm-ci #marker-tooltip {
  border-radius: 10px;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(38, 50, 80, 0.18);
}

/* Popup (ausgewählter Marker) */
#map.mvm-ci .muvamoMarkerOuter.highlight .muvamoMarker {
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(38, 50, 80, 0.24);
}

#map.mvm-ci .muvamoMarkerOuter.highlight .muvamoMarker .thumb,
#map.mvm-ci .muvamoMarkerOuter.highlight .muvamoMarker .mapswiper {
  border-radius: 12px;
  overflow: hidden;
}

#map.mvm-ci .muvamoMarkerOuter.highlight .muvamoMarker .details .title {
  font-size: 16px;
  color: #2f3b55;
}

#map.mvm-ci .muvamoMarkerOuter.highlight .muvamoMarker .muvamo_button.muvamo_photo_button {
  background-color: #587abc !important;
  color: #ffffff !important;
  border-radius: 999px;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 700;
  border: 0;
}

#map:not(.mvm-touch).mvm-ci .muvamoMarkerOuter.highlight .muvamoMarker .muvamo_button.muvamo_photo_button:hover {
  background-color: #4a69a6 !important;
}

/* Bottom-Leiste */
#map.mvm-ci .map_bottom_menu_marker {
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 6px 16px rgba(38, 50, 80, 0.14);
}

#map.mvm-ci .map_bottom_menu_marker .thumb {
  border-radius: 10px;
}

#map.mvm-ci .map_bottom_menu_marker .title {
  font-size: 12.5px;
  font-weight: 700;
  color: #2f3b55;
  line-height: 1.25;
}

#map.mvm-ci .map_bottom_menu_marker.active .title {
  color: #ffffff;
}

/* Leistenkarten-Zustände wie die Marker (Michael 2026-10-06): Hover = weiß bleiben + dunkelblauer
   Rand (wie der Marker-Hover-Ring; vorher pfirsichfarbener Hintergrund aus der allgemeinen
   .openMap:hover-Regel), aktiv = dunkelblau gefüllt (wie der Auswahl-Pin, vorher CI-blau).
   Touch ohne Hover-Rand. */
#map.mvm-ci .map_bottom_menu_marker.openMap:hover {
  background-color: #ffffff !important;
}
#map.mvm-ci:not(.mvm-touch) .map_bottom_menu_marker:hover {
  /* Ring INNEN (im weißen Innenabstand): außen schnitt der scrollende Leisten-Container
     ihn oben ab. Ohne Gebiets-Streifen, sonst doppelte Linie oben. */
  box-shadow: inset 0 0 0 2.5px #3d4a75, 0 6px 16px rgba(38, 50, 80, 0.14);
}
#map.mvm-ci .map_bottom_menu_marker.active,
#map.mvm-ci .map_bottom_menu_marker.mvm-bar-inarea.active,
#map.mvm-ci .map_bottom_menu_marker.active.openMap:hover {
  background-color: #3d4a75 !important;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(38, 50, 80, 0.14);
}

@media (max-width: 980px) {
  #map.mvm-ci .map_bottom_menu_marker {
    border-radius: 10px;
    padding: 4px;
  }

  #map.mvm-ci .map_bottom_menu_marker .thumb {
    border-radius: 7px;
  }

  #map.mvm-ci .map_bottom_menu_marker .title {
    font-size: 11px;
  }
}

/* Übersicht: Einzel-Spots und Guide-Icons in fester, lesbarer Größe - das
   Zoom-Scaling (bis 0.25) machte aus kleinen Restaurant-Markern namenlose rote
   Punkte (Feedback Michael 2026-09-25: "Zum Martin Sepp ... rote Punkte ohne
   irgendwas"). Spezifität schlägt die .mvm-scale-Regel. */
#map.mvm-ci.mvm-overview .muvamoMarkerOuter.mvm-solo .muvamoMarker,
#map.mvm-ci.mvm-overview .muvamoMarkerOuter.mvm-guide .muvamoMarker {
  transform: scale(0.62) !important;
}

/* Symbol-Marker ohne Foto (size0/size1) sind von Haus aus kleiner - in der
   Übersicht etwas größer, damit das Kategorie-Symbol erkennbar bleibt. */
#map.mvm-ci.mvm-overview .muvamoMarkerOuter.mvm-solo.mvm-size1 .muvamoMarker,
#map.mvm-ci.mvm-overview .muvamoMarkerOuter.mvm-solo.mvm-size0 .muvamoMarker {
  transform: scale(0.85) !important;
}

/* ------------------------------------------------------------------------
 * Bereichs-Karten der Übersicht (A4, muvamo-maplibre.js setupCityAreas()):
 * kompakt, eine Zeile - Foto mit Anzahl-Badge + Name. Nur unter z12.5
 * (.mvm-overview). Im Stadt-Modus (Marker .mvm-city-collapsed: Karten würden sich
 * berühren) nur die Stadt-Karte. Das äußere Element trägt MapLibres
 * Positions-Transform - Hover-Effekte deshalb nur am Kind.
 * ---------------------------------------------------------------------- */
#map .mvm-area-marker {
  z-index: 120;
  cursor: pointer;
}

/* Bereichs-Karten nur in der Übersicht; Stadt-Karten steuert das JS je Stadt
   (.mvm-area-hidden), sie bleiben auch in der Europa-Ansicht sichtbar. */
#map .mvm-area-marker.mvm-area-hidden:not(.mvm-area-leaving) {
  display: none;
}

#map .mvm-area-marker.mvm-area-leaving {
  pointer-events: none;
}

/* Marker einer Stadt im Stadt-Modus (rausgezoomt / Stadt nicht geladen) und
   Guide-Icons, die eine Stadt-Karte ersetzt */
#map .muvamoMarkerOuter.mvm-city-collapsed:not(.highlight),
#map .muvamoMarkerOuter.mvm-guide-replaced {
  display: none !important;
}

/* Europa-Ansicht: Stadt-Karte noch kleiner */
#map .mvm-area.mvm-tiny {
  transform: scale(0.72);
}

#map:not(.mvm-touch) .mvm-area-marker:hover {
  z-index: 1000 !important;
}

#map .mvm-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 13px 3px 3px;
  background: #ffffff;
  border: 2px solid var(--area-color, #587abc);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(38, 50, 80, 0.2);
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#map:not(.mvm-touch) .mvm-area:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(38, 50, 80, 0.26);
}

#map .mvm-area-photo {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
}

/* Gebiet ohne Spots/POIs (Malta 2026-09-30): Namensmarke = Punkt in Gebietsfarbe +
   Name/Kurztext, ohne Foto und Zahl; Klick öffnet die Gebietsseite */
#map .mvm-area-empty .mvm-area-photo {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--area-color, #587abc);
  box-shadow: 0 0 0 2.5px #ffffff, 0 2px 6px rgba(38, 50, 80, 0.3);
}

#map .mvm-area-empty .mvm-area-initial,
#map .mvm-area-empty .mvm-area-badge,
#map .mvm-area-empty .mvm-tag-n {
  display: none !important;
}

#map .mvm-area-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: #f6d8c1;
}

/* Bereich/Stadt ohne Foto (z.B. Malta: Spots noch ohne Beitragsbild) */
#map .mvm-area-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--area-color, #587abc);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

#map .map_bottom_menu_marker .thumb .mvm-noimg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #e9eef8, #f6d8c1);
}

#map .mvm-area-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 10px;
  background: var(--area-color, #587abc);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

#map .mvm-area-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #2f3b55;
}

/* Kompakte Foto-Blase: Karte würde eine größere berühren -> nur Foto + Anzahl,
   Name beim Hover (dann liegt die Karte ganz oben, siehe :hover z-index). */
#map .mvm-area.mvm-compact {
  gap: 0;
  padding: 3px;
}

#map .mvm-area.mvm-compact .mvm-area-name {
  display: none;
}

#map:not(.mvm-touch) .mvm-area-marker:hover .mvm-area.mvm-compact {
  gap: 8px;
  padding: 3px 13px 3px 3px;
}

#map:not(.mvm-touch) .mvm-area-marker:hover .mvm-area.mvm-compact .mvm-area-name {
  display: inline;
}

/* Stadt-Karte als "Stadt-Pin": runde Foto-Blase mit Anzahl + kleines Namens-
   Etikett darunter (Feedback Michael: Pill mit Bild + Text war für eine ganze
   Stadt zu groß). Das Etikett liegt absolut unter dem Foto, damit der Marker-
   Anker (center) auf dem Foto bleibt. Europa: < z7.5 kleiner (.mvm-compact),
   < z5.5 ohne Etikett (.mvm-tiny) - Wien und Salzburg lägen sonst übereinander. */
#map .mvm-area-city,
#map:not(.mvm-touch) .mvm-area-marker:hover .mvm-area-city.mvm-compact {
  position: relative;
  gap: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

#map:not(.mvm-touch) .mvm-area-city:hover {
  box-shadow: none;
}

#map .mvm-area-city .mvm-area-photo {
  width: 40px;
  height: 40px;
}

#map .mvm-area-city .mvm-area-photo img {
  box-sizing: border-box;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px var(--area-color, #587abc), 0 6px 16px rgba(38, 50, 80, 0.28);
}

#map .mvm-area-city .mvm-area-name,
#map .mvm-area-city.mvm-compact .mvm-area-name,
#map:not(.mvm-touch) .mvm-area-marker:hover .mvm-area-city.mvm-compact .mvm-area-name {
  display: block;
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(38, 50, 80, 0.2);
  font-size: 11.5px;
  line-height: 17px;
}

#map .mvm-area-city.mvm-compact .mvm-area-photo {
  width: 32px;
  height: 32px;
}

#map .mvm-area-city.mvm-compact .mvm-area-name {
  font-size: 10.5px;
  line-height: 15px;
  padding: 0 6px;
}

#map .mvm-area-city.mvm-tiny .mvm-area-name {
  display: none;   /* Hover zeigt ihn (Regel oben ist spezifischer) */
}

/* ------------------------------------------------------------------------
 * Bereichskarte mit Charakter-Zeile + Highlight-Panel (onAreaCardClick,
 * Leiste): Name + "Kaiserliches Wien & Kaffeehäuser"; Klick lässt aufplatzen,
 * die Übersicht über den Inhalt zeigt die Fotoleiste (decorateBar/updateBar).
 * ---------------------------------------------------------------------- */
#map .mvm-area-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

#map .mvm-area-tag {
  font-size: 11px;
  font-weight: 600;
  color: #5b6680;
  white-space: nowrap;
}

#map .mvm-area.mvm-compact .mvm-area-tag {
  display: none;
}

@media (max-width: 599px) {
  #map .mvm-area-tag {
    display: none;
  }
}

/* Übersicht: kompakte Karten klappen beim Hover NICHT auf (Name steht in der Leiste) */
#map:not(.mvm-touch).mvm-overview .mvm-area-marker:not(.mvm-city-marker):hover .mvm-area.mvm-compact {
  gap: 0;
  padding: 3px;
}

#map:not(.mvm-touch).mvm-overview .mvm-area-marker:not(.mvm-city-marker):hover .mvm-area.mvm-compact .mvm-area-name {
  display: none;
}

/* ------------------------------------------------------------------------
 * Fotoleiste (decorateBar): Spot-Karten mit Streifen + Etikett ihres Bereichs
 * ---------------------------------------------------------------------- */
/* Spot-Karten: Streifen + Etikett ihres Bereichs */
#map.mvm-ci .map_bottom_menu_marker.mvm-bar-inarea {
  box-shadow: inset 0 3px 0 var(--area-color, #587abc), 0 6px 16px rgba(38, 50, 80, 0.14);
}

#map .mvm-bar-arealbl {
  position: absolute;
  top: 6px;
  left: 6px;
  max-width: calc(100% - 12px);
  padding: 0 7px;
  border-radius: 999px;
  background: var(--area-color, #587abc);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 980px) {
  #map .mvm-bar-arealbl {
    top: 3px;
    left: 3px;
    max-width: calc(100% - 6px);
    padding: 0 5px;
    font-size: 8.5px;
    line-height: 13px;
  }
}

/* Spot-Popup: Bereich als Chip über dem Titel */
#map .mvm-pop-area {
  display: inline-block;
  margin-bottom: 4px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--area-color, #587abc);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
}

/* ------------------------------------------------------------------------
 * Normale Spots (size1) als kleiner runder Punkt ohne Tropfen-Spitze
 * (2026-09-26; Must-See/Award-Look mit Goldring/Abzeichen und ausgeblendete
 * Tour-Stationen wurden verworfen - POIs und Stationen bleiben immer sichtbar).
 * ---------------------------------------------------------------------- */
#map.mvm-ci .muvamoMarkerOuter.mvm-size1:not(.highlight) .muvamoMarker .icon {
  width: 24px;
  height: 24px;
  padding: 5px;
}

#map.mvm-ci .muvamoMarkerOuter.mvm-size1:not(.highlight) .muvamoMarker {
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(38, 50, 80, 0.28);
}

#map.mvm-ci .muvamoMarkerOuter.mvm-size1:not(.highlight) .muvamoMarker::after {
  display: none;
}

/* Hotels (bleiben HTML-Marker, anchor bottom): Ring gold statt blau, ohne Spitze und mittig
   auf dem Ort wie alle Foto-Marker der Kartenebene (Michael 2026-10-06). translate (eigene
   Eigenschaft) statt transform - die Position setzt MapLibre am äußeren Element. Ausgewählt
   gilt weiter der normale Auswahl-Pin. */
#map.mvm-ci .muvamoMarkerOuter.mvm-hotel:not(.highlight) .muvamoMarker {
  background-color: #a8842c;
  translate: 0 50%;
}
#map.mvm-ci .muvamoMarkerOuter.mvm-hotel:not(.highlight) .muvamoMarker::after {
  display: none;
}

/* ------------------------------------------------------------------------
 * Handy-Spotkarte (openSpotSheet): Panel von unten, nicht modal. Der
 * gewählte Marker bleibt ein Pin mit Ring (.mvm-sheet-pin) statt Popup.
 * ---------------------------------------------------------------------- */
#map .mvm-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  height: var(--sheet-h, 62%);
  max-height: calc(100% - 8px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 28px rgba(38, 50, 80, 0.22);
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  color: #2f3b55;
  transform: translateY(105%);
  transition: transform 0.25s ease;
}

#map .mvm-sheet.mvm-sheet-open {
  transform: translateY(var(--sheet-y, 0px));
}

/* halbe Höhe: Inhalt scrollt nicht, Wischen nach oben vergrößert */
#map .mvm-sheet.mvm-sheet-half .mvm-sheet-scroll {
  overflow-y: hidden;
}

#map .mvm-sheet-handle {
  cursor: pointer;
}

#map.mvm-sheet-on .map_bottom_menu {
  visibility: hidden;
}

#map .mvm-sheet-handle {
  flex: none;
  width: 42px;
  height: 5px;
  margin: 8px auto 4px;
  border-radius: 3px;
  background: #d5d9e3;
}

#map .mvm-sheet-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f3f8;
  color: #5b6680;
  font-size: 22px;
  line-height: 32px;
  cursor: pointer;
}

#map .mvm-sheet-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 16px 12px;
}

#map .mvm-sheet-top {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-right: 34px;
}

#map .mvm-sheet-img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
}

#map .mvm-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 2px;
}

#map .mvm-sheet-chip {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--area-color, #587abc);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
}

#map .mvm-sheet-cat {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  color: #8a93a8;
}

#map .mvm-sheet-title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#map .mvm-sheet-meta {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: #587abc;
}

/* Tour-Kennzahlen unter dem Titel (Stopps · km · Gehzeit), 2026-10-02 */
#map .mvm-sheet-tourstats {
  color: #4a5570;
}

#map .mvm-sheet-tourstats .fa-person-walking {
  margin-right: 3px;
  color: #587abc;
}

#map .mvm-sheet-text {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #4a5570;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#map .mvm-sheet-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Hotels: Affiliate-Hinweis unter dem Knopf (Michael 2026-10-07) */
#map .mvm-sheet-affnote {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: #6b7590;
}

#map .mvm-sheet-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eef2fa;
  color: #587abc;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

#map .mvm-sheet-btn-route,
#map .mvm-sheet-btn-main {
  background: #587abc;
  color: #ffffff;
}

#map .mvm-sheet-near {
  margin-top: 10px;
}

#map .mvm-sheet-near-head {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #8a93a8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#map .mvm-sheet-near ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#map .mvm-sheet-near-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid #f0f2f7;
  cursor: pointer;
}

#map .mvm-sheet-near-item img,
#map .mvm-sheet-near-dot {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef2fa;
}

#map .mvm-sheet-near-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

#map .mvm-sheet-near-min {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #587abc;
}

/* gewählter Marker im Panel-Modus: klarer "ausgewählt"-Pin statt Popup
   (blauer Punkt mit weißem Kern + Spitze; Inhalt des Markers ausgeblendet) */
#map .muvamoMarkerOuter.highlight.mvm-sheet-pin {
  z-index: 1100 !important;
}

/* gleiche Form wie ein normaler Foto-Marker (runder Rahmen + kurze Spitze,
   die in den Kreis übergeht), nur in Auswahl-Blau und etwas größer */
#map .muvamoMarkerOuter.highlight.mvm-sheet-pin .muvamoMarker {
  width: 52px;
  height: 52px;
  padding: 4px;
  gap: 0;
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #3d4a75;   /* Zustandsfarbe Auswahl/Hover (2026-10-06), CI-blau ist jetzt Things */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transform: none !important;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin .muvamoMarker > * {
  display: none !important;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin .muvamoMarker::before {
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff var(--pin-img, none) center / cover no-repeat;
}

/* ohne Foto: Kategorie-Symbol weiß auf Auswahl-Blau */
#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-noimg .muvamoMarker {
  width: 44px;
  height: 44px;
  padding: 11px;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-noimg .muvamoMarker::before {
  background: #ffffff;
  -webkit-mask: var(--pin-icon) no-repeat center / contain;
  mask: var(--pin-icon) no-repeat center / contain;
  border-radius: 0;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin .muvamoMarker::after {
  display: block;
  top: 95%;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #3d4a75 !important;
}

/* ------------------------------------------------------------------------
 * Leiste -> Karte: pulsierender Ort (pulseAt) + Gehzeit auf Leistenkarten
 * ---------------------------------------------------------------------- */
/* Ort einer Leistenkarte: Foto-Pin mit Spitze + ein sanfter Ring; die
   Bereichskarten treten währenddessen zurück (.mvm-pulse-on) */
/* Ort einer Leistenkarte: gleiche Form wie ein normaler Foto-Marker (Rahmen
   in Bereichsfarbe + Spitze aus dem Kreis), dazu ein dezenter Ring; die
   Bereichskarten treten währenddessen zurück (.mvm-pulse-on) */
#map .mvm-pulse {
  position: relative;
  z-index: 1200;
  width: 46px;
  height: 54px;
  pointer-events: none;
}

#map .mvm-pulse-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--pulse-color, #587abc);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

#map .mvm-pulse-photo::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff var(--pulse-img, none) center / cover no-repeat;
}

#map .mvm-pulse-photo.mvm-pulse-nophoto::before {
  background: #ffffff;
  transform: scale(0.4);
}

#map .mvm-pulse-photo::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 95%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid var(--pulse-color, #587abc);
}

#map .mvm-pulse-ring {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border: 2px solid var(--pulse-color, #587abc);
  border-radius: 50%;
  animation: mvm-pulse 1.6s ease-out infinite;
}

#map .mvm-pulse.mvm-pulse-pop .mvm-pulse-photo {
  animation: mvm-pulse-pop 0.28s cubic-bezier(.2, 1.4, .4, 1);
  transform-origin: 50% 110%;
}

@keyframes mvm-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.2); opacity: 0; }
}

@keyframes mvm-pulse-pop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

#map.mvm-pulse-on .mvm-area-marker {
  opacity: 0.35 !important;   /* MapLibre setzt opacity inline am Marker */
  transition: opacity 0.15s ease;
}

#map .mvm-area-marker {
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  #map .mvm-pulse-ring,
  #map .mvm-pulse.mvm-pulse-pop .mvm-pulse-photo {
    animation: none;
  }
}

/* Routen-Modus der Leiste (syncBarRoute, 2026-10-06): Stationsnummer oben links, Farben wie
   das Nummern-Etikett am Kartenmarker (drawGlNum); Tour-Karten zeigen sich auch, wenn ein
   Filter-Chip sie ausblendet (die Karte zeigt die Stationen im Fokus ja auch) */
#map .mvm-bar-num {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f6d8c1;
  color: #3d4a75;
  box-shadow: 0 1px 2px rgba(38, 50, 80, 0.25);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-sizing: border-box;
}
#map .map_bottom_menu_marker.hidden.mvm-bar-route {
  display: block !important;
}
/* Gebiets-Etikett rückt neben die Nummer */
#map .thumb:has(.mvm-bar-num) .mvm-bar-arealbl {
  left: 32px;
  max-width: calc(100% - 38px);
}
@media (max-width: 980px) {
  #map .mvm-bar-num {
    top: 3px;
    left: 3px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
  }
  #map .thumb:has(.mvm-bar-num) .mvm-bar-arealbl {
    left: 22px;
    max-width: calc(100% - 25px);
  }
}

#map .mvm-bar-walk {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(38, 50, 80, 0.78);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}

@media (max-width: 980px) {
  #map .mvm-bar-walk {
    top: auto;
    bottom: 3px;
    right: 3px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 13px;
  }
}

/* Kopfzeile im Leistenbild (barTopRow): Desktop = Gebiets-Etikett links + Gehzeit/km rechts
   in einer Flex-Zeile, das Etikett bekommt genau den Restplatz und endet mit „…“ statt unter
   das Kärtchen zu laufen (Michael 2026-10-07). Handy: Zeile löst sich auf (display:contents),
   Etikett/Kärtchen behalten ihre eigene Lage (Kärtchen unten rechts). */
#map .mvm-bar-top {
  display: contents;
}
@media (min-width: 981px) {
  #map .thumb .mvm-bar-top {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }
  #map .thumb:has(.mvm-bar-num) .mvm-bar-top {
    left: 32px;
  }
  #map .thumb .mvm-bar-top .mvm-bar-arealbl,
  #map .thumb .mvm-bar-top .mvm-bar-walk {
    position: static;
  }
  #map .thumb .mvm-bar-top .mvm-bar-arealbl {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
  }
  #map .thumb .mvm-bar-top .mvm-bar-walk {
    flex: none;
    margin-left: auto;
  }
}

/* offenes Panel: Karten-Info-Knopf (Attribution) lag über dem letzten Eintrag */
/* (früher: rechts unten bei offenem Panel ausgeblendet - seit 2026-09-29 sitzen
   GPS/Zoom dort und rutschen per layoutCornerCtrls über das Panel) */

/* ------------------------------------------------------------------------
 * Filter-Chips (buildChips/setChip) + Ebene "Praktisches" (WC, Trinkwasser)
 * ---------------------------------------------------------------------- */
#map .mvm-chips {
  position: absolute;
  z-index: 9998;
  top: 12px;
  left: 70px;
  right: 70px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
}

#map .mvm-chips::-webkit-scrollbar {
  display: none;
}

#map .mvm-chip-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(38, 50, 80, 0.18);
  color: #2f3b55;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

/* Kategorie-Symbol in Kategoriefarbe (wie auf der Karte) */
#map .mvm-chip-ic {
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--chip-color, #587abc);
  -webkit-mask: var(--chip-icon) no-repeat center / contain;
  mask: var(--chip-icon) no-repeat center / contain;
}

#map .mvm-chip-btn.mvm-chip-on {
  background: var(--chip-color, #587abc);
  color: #ffffff;
}

#map .mvm-chip-btn.mvm-chip-on .mvm-chip-ic {
  background: #ffffff;
}

/* WC / Trinkwasser / Bankomat: runder Punkt mit zentriertem Zeichen */
#map .mvm-chip-btn.mvm-chip-practical::before {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

#map .mvm-chip-btn.mvm-chip-wc { --chip-color: #3d8a99; margin-left: 10px; }
#map .mvm-chip-btn.mvm-chip-water { --chip-color: #4a90d9; }
#map .mvm-chip-btn.mvm-chip-atm { --chip-color: #6c8551; }
#map .mvm-chip-btn.mvm-chip-wc::before { content: 'WC'; background: #3d8a99; }
#map .mvm-chip-btn.mvm-chip-atm::before { content: '\20AC'; background: #6c8551; font-size: 11px; }
#map .mvm-chip-btn.mvm-chip-water::before {
  content: '';
  background: #4a90d9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1C6.8 3.4 8 5 8 6.4A3 3 0 0 1 2 6.4C2 5 3.2 3.4 5 1Z' fill='white'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

#map .mvm-chip-btn.mvm-chip-practical.mvm-chip-on::before {
  box-shadow: 0 0 0 2px #ffffff;
}

@media (max-width: 980px) {
  #map .mvm-chips {
    top: 10px;
    left: 64px;
    right: 64px;
  }

  #map .mvm-chip-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
  }
}

#map .mvm-practical-popup .maplibregl-popup-content {
  padding: 10px 28px 10px 12px;
  border-radius: 12px;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #2f3b55;
}

#map .mvm-practical-popup a {
  display: inline-block;
  margin-top: 4px;
  color: #587abc;
  font-weight: 700;
}

/* Panel: Hinweis aus den Spot-Notifications (z.B. geschlossen) */
#map .mvm-sheet-notice {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 6px;
  background: #fdf1e3;
  color: #9a5a12;
  font-size: 11.5px;
  font-weight: 700;
}

#map .mvm-sheet-notice--high {
  background: #fbe6e6;
  color: #a33a3a;
}

/* ------------------------------------------------------------------------
 * Desktop-Seitenleiste (openSpotSheet, Vollbildkarte >= 768 px): links wie
 * bei Google Maps, gleicher Inhalt wie das Handy-Panel.
 * ---------------------------------------------------------------------- */
@media (min-width: 768px) {
  #map .mvm-sheet {
    left: 12px;
    top: 12px;
    /* unten immer 12 px Luft - auch am iPad, wo die Karte unter die Safari-Leiste
       reicht (--mvm-under), sonst lief die Leiste bis unter den Rand (Michael 2026-09-30) */
    bottom: calc(12px + var(--mvm-under, 0px) + env(safe-area-inset-bottom, 0px));
    right: auto;
    width: 380px;
    height: auto;
    max-height: none;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(38, 50, 80, 0.25);
    transform: translateX(calc(-100% - 24px));
  }

  #map .mvm-sheet.mvm-sheet-open {
    transform: translateX(0);
  }

  #map .mvm-sheet-handle {
    display: none;
  }

  #map .mvm-sheet-close {
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 6px rgba(38, 50, 80, 0.2);
  }

  #map .mvm-sheet-scroll {
    height: 100%;
    padding: 0 0 16px;
  }

  #map .mvm-sheet-top {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0;
  }

  #map .mvm-sheet-img {
    width: 100%;
    height: 210px;
    border-radius: 16px 16px 0 0;
  }

  #map .mvm-sheet-head,
  #map .mvm-sheet-text,
  #map .mvm-sheet-buttons,
  #map .mvm-sheet-near,
  #map .mvm-sheet-affnote {
    margin-left: 18px;
    margin-right: 18px;
  }

  #map .mvm-sheet-title {
    font-size: 19px;
    -webkit-line-clamp: 3;
  }

  #map .mvm-sheet-text {
    font-size: 14px;
    -webkit-line-clamp: 6;
  }

  #map:not(.mvm-touch) .mvm-sheet-near-item:hover {
    background: #f5f7fb;
  }

  /* Leiste, Chips und Knöpfe rücken neben die Seitenleiste */
  #map.mvm-sheet-on .map_bottom_menu {
    visibility: visible;
    left: 404px;
    max-width: calc(100% - 434px);
  }

  #map.mvm-sheet-on .mvm-chips {
    left: 460px;
  }

  #map.mvm-sheet-on .maplibregl-ctrl-top-left {
    left: 392px;
  }

  #map.mvm-sheet-on .maplibregl-ctrl-bottom-right {
    visibility: visible;
  }
}

/* Ausgewählter Pin: pulsierender Halo + Namens-Etikett, damit am Desktop
   (Seitenleiste) sofort klar ist, welcher Ort offen ist */
#map .muvamoMarkerOuter.highlight.mvm-sheet-pin {
  z-index: 1100 !important;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin .muvamoMarker {
  animation: mvm-pin-halo 1.8s ease-out infinite;
}

@keyframes mvm-pin-halo {
  0% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(61, 74, 117, 0.55); }
  70% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 0 0 16px rgba(61, 74, 117, 0); }
  100% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(61, 74, 117, 0); }
}

#map .mvm-pin-label {
  display: none;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin .mvm-pin-label {
  display: block;
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 999px;
  background: #3d4a75;
  color: #ffffff;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 17px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(38, 50, 80, 0.3);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #map .muvamoMarkerOuter.highlight.mvm-sheet-pin .muvamoMarker {
    animation: none;
  }
}

/* ------------------------------------------------------------------------
 * Spotkarte erweitert (2026-09-27): Galerie, Abzeichen, Aktionen, Bereich
 * ---------------------------------------------------------------------- */
#map .mvm-sheet-gallery {
  position: relative;
  flex: none;
}

#map .mvm-sheet-gal-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 16px 16px 0 0;
}

#map .mvm-sheet-gal-track::-webkit-scrollbar {
  display: none;
}

#map .mvm-sheet-gal-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 230px;
  object-fit: cover;
  scroll-snap-align: start;
  background: #eef2fa;
}

#map .mvm-sheet-gal-btn {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #2f3b55;
  font-size: 22px;
  line-height: 30px;
  box-shadow: 0 2px 6px rgba(38, 50, 80, 0.25);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#map:not(.mvm-touch) .mvm-sheet-gallery:hover .mvm-sheet-gal-btn {
  opacity: 1;
}

#map .mvm-sheet-gal-btn.mvm-prev { left: 10px; }
#map .mvm-sheet-gal-btn.mvm-next { right: 10px; }

#map .mvm-sheet-gal-count {
  position: absolute;
  right: 54px;
  top: 14px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(38, 50, 80, 0.7);
  color: #ffffff;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

#map .mvm-sheet-badge {
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  color: #ffffff;
}

#map .mvm-badge-must { background: #e0a526; }
#map .mvm-badge-award { background: #2f3b55; }

#map .mvm-sheet-actions {
  display: flex;
  gap: 16px;
  margin: 8px 18px 0;
}

#map .mvm-sheet-act {
  padding: 0;
  border: 0;
  background: none;
  color: #587abc;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

#map .mvm-sheet-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: calc(100% - 36px);
  margin: 14px 18px 0;
  padding: 12px 14px;
  border: 0;
  border-left: 4px solid var(--area-color, #587abc);
  border-radius: 10px;
  background: #f5f7fb;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

#map .mvm-sheet-area-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--area-color, #587abc);
}

#map .mvm-sheet-area-tag {
  font-size: 12px;
  font-weight: 600;
  color: #5b6680;
}

#map .mvm-sheet-area-go {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--area-color, #587abc);
}

@media (max-width: 767px) {
  #map .mvm-sheet-actions {
    margin: 8px 0 0;
  }
}

@media (min-width: 768px) {
  #map .mvm-sheet-top {
    padding-top: 14px;
  }

  #map .mvm-sheet-text {
    -webkit-line-clamp: unset;
    display: block;
  }
}

/* Auswahl deutlicher: übrige Marker treten zurück (nur Deckkraft - billig),
   der gewählte Pin ist größer */
/* !important: MapLibre setzt die Deckkraft der Marker inline */
#map.mvm-sheet-on .muvamoMarkerOuter:not(.highlight):not(.mvm-nb) {
  opacity: 0.4 !important;
  transition: opacity 0.2s ease;
}

#map:not(.mvm-touch).mvm-sheet-on .muvamoMarkerOuter:not(.highlight):hover {
  opacity: 1 !important;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin:not(.mvm-pin-noimg) .muvamoMarker {
  width: 60px;
  height: 60px;
}

/* Performance: das Produktiv-CSS gibt JEDEM Marker zwei eigene Compositor-
   Ebenen (will-change + translateZ auf äußerem UND innerem Element, ~520
   Ebenen). Das innere braucht keine dauerhafte Ebene - Animationen fordern sie
   bei Bedarf selbst an. Spart Commit/Layerize, vor allem am Übergang. */
#map .muvamoMarkerOuter .muvamoMarker {
  will-change: auto;
}

/* Kategorie-/Must-See-/Award-Symbole im Foto (globale Klassen icon_overlay /
   award_overlay wie auf der ganzen Seite); über der Galerie, nicht klickbar */
#map .mvm-sheet-gallery .icon_overlay,
#map .mvm-sheet-gallery .award_overlay {
  z-index: 2;
  pointer-events: none;
}

#map .mvm-sheet-gallery .award_overlay {
  display: flex;
}

#map .mvm-sheet-imgwrap {
  position: relative;
  flex: none;
  line-height: 0;
}

#map .mvm-sheet-imgwrap .icon_overlay,
#map .mvm-sheet-imgwrap .award_overlay {
  padding: 3px;
}

#map .mvm-sheet-imgwrap .award_overlay {
  display: flex;
}

#map .mvm-sheet-imgwrap .muvamo_cat_overlay_image_mask {
  width: 13px !important;
  height: 13px !important;
}

#map .mvm-sheet-imgwrap .icon_overlay .muvamo_cat_overlay {
  padding: 3px;
}

/* Tickets & Reservierung (schlicht: Liste ohne Kasten/Überschrift, eine Zeile je
   Angebot mit Symbol, Titel, Unterzeile und Pfeil; Symbole wie im Ticket-Kasten
   der Spotseiten) */
#map .mvm-sheet-tickets:empty {
  display: none;
}

#map .mvm-sheet-tickets {
  margin: 12px 18px 0;
}

#map .mvm-ticket-text {
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #5b6680;
}

#map .mvm-ticket-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-top: 1px solid #edf0f6;
  color: #2f3b55;
  text-decoration: none;
}

#map .mvm-ticket-row:last-child {
  border-bottom: 1px solid #edf0f6;
}

#map:not(.mvm-touch) .mvm-ticket-row:hover {
  background: #f7f9fc;
}

#map .mvm-ticket-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef2fa;
  position: relative;
}

#map .mvm-ticket-ic::after {
  content: '';
  position: absolute;
  inset: 8px;
  background: #587abc;
  -webkit-mask: var(--ic, url(https://www.muvamo.com/wp-content/uploads/2024/01/ticket.svg)) no-repeat center / contain;
  mask: var(--ic, url(https://www.muvamo.com/wp-content/uploads/2024/01/ticket.svg)) no-repeat center / contain;
}

#map .mvm-ticket-pass .mvm-ticket-ic { background: #fbf3dc; --ic: url(https://www.muvamo.com/wp-content/uploads/2024/01/pass.svg); }
#map .mvm-ticket-pass .mvm-ticket-ic::after { background: #b8860b; }
#map .mvm-ticket-table .mvm-ticket-ic { --ic: url(https://www.muvamo.com/wp-content/uploads/2023/07/eat.svg); }

#map .mvm-ticket-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

#map .mvm-ticket-txt strong {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

#map .mvm-ticket-txt small {
  font-size: 11.5px;
  font-weight: 600;
  color: #8a93a8;
}

#map .mvm-ticket-go {
  flex: none;
  width: 16px;
  height: 16px;
  color: #587abc;
}

@media (max-width: 767px) {
  #map .mvm-sheet-tickets {
    margin: 10px 0 0;
  }
}

/* Bereich links oben im Galerie-Foto (wie das Etikett der Leistenkarten) */
#map .mvm-sheet-gallery .mvm-gal-area {
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 0 9px;
  font-size: 11px;
  line-height: 20px;
  pointer-events: none;
}

/* Einheitlicher Hover für alle Marker (HTML wie Kartenpunkte): statt
   Vergrößern ein weißer Rand + CI-blauer Ring - Vergrößern ging bei den
   Kartenpunkten nicht und löste bei HTML-Markern ein Neuzeichnen aus */
#map .muvamoMarkerOuter.hovered:not(.highlight) .muvamoMarker {
  scale: 1 !important;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px #3d4a75, 0 4px 12px rgba(38, 50, 80, 0.3);
}

#map .muvamoMarkerOuter.hovered:not(.highlight) {
  z-index: 140 !important;
}

/* ------------------------------------------------------------------------
 * Auswahl-Pin für Marker der Kartenebene (2026-09-27): die Marker sind jetzt
 * Kreise MITTIG auf dem Ort -> auch der gewählte Marker sitzt mittig (keine
 * Spitze, um die halbe Höhe nach unten versetzt; der Marker selbst ist unten
 * verankert), blauer Auswahl-Rahmen + Puls wie bisher, Kategorie-Abzeichen oben
 * rechts wie beim Kartenmarker, Name darunter.
 * ---------------------------------------------------------------------- */
#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center .muvamoMarker {
  translate: 0 50%;
  width: var(--pin-size, 60px);
  height: var(--pin-size, 60px);
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center .muvamoMarker::after {
  display: none !important;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center .mvm-pin-label {
  top: calc(150% + 8px);
}

#map .mvm-pin-badge {
  display: none;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center .mvm-pin-badge:not([hidden]) {
  display: block;
  position: absolute;
  z-index: 150;   /* über dem Marker (z-index 90, beim Hover 140 aus muvamo.css - sonst
                     verschwand das Abzeichen beim Überfahren, Michael 2026-10-02) */
  /* wie im Kartenbild: Mitte bei (+0,43 / -0,22) x Durchmesser; Kreismitte
     liegt bei 100 % Höhe (um die halbe Höhe versetzt) */
  left: calc(50% + var(--pin-size, 60px) * 0.43 - 12px);
  top: calc(100% - var(--pin-size, 60px) * 0.22 - 12px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--badge-color, #587abc);
  box-shadow: 0 1px 4px rgba(38, 50, 80, 0.3);
  pointer-events: none;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center .mvm-pin-badge:not([hidden])::before {
  content: '';
  position: absolute;
  inset: 5px;
  background: #ffffff;
  -webkit-mask: var(--pin-icon) no-repeat center / contain;
  mask: var(--pin-icon) no-repeat center / contain;
}

/* Hover in der Leiste: pulsierender Ring um den (hervorgehobenen) Marker,
   gleiche Wellen wie der Auswahl-Pin; Größe/Versatz setzt showHalo() */
#map .mvm-halo {
  z-index: 1150;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 2.5px #3d4a75;
}

#map .mvm-halo.mvm-halo-go {
  animation: mvm-halo-wave 1.4s ease-out infinite;
}

@keyframes mvm-halo-wave {
  0% { box-shadow: 0 0 0 2.5px #3d4a75, 0 0 0 2.5px rgba(61, 74, 117, 0.6); }
  70% { box-shadow: 0 0 0 2.5px #3d4a75, 0 0 0 18px rgba(61, 74, 117, 0); }
  100% { box-shadow: 0 0 0 2.5px #3d4a75, 0 0 0 18px rgba(61, 74, 117, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #map .mvm-halo.mvm-halo-go { animation: none; }
}

/* Touch-Geräte (hover: none): keine Hover-Vergrößerung der Produktiv-Marker */
#map.mvm-touch:not(.mvm-scale) .muvamoMarkerOuter .muvamoMarker:hover {
  transform: none;
}

/* Aufplatzen mit Markern der Kartenebene: kurzlebige Flug-Kopie (glFlyStart) */
#map .mvm-fly {
  z-index: 5;
  pointer-events: none;
}

#map .mvm-fly-in {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(38, 50, 80, 0.3);
}

#map .mvm-fly-in img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Aufplatzen: Flug-Kopie eines Punkts (Kategoriefarbe, weißer Rand, Symbol) */
#map .mvm-fly-in.mvm-fly-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}

#map .mvm-fly-dot span {
  width: 52%;
  height: 52%;
  background: #ffffff;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

/* iOS-Safari: Karte läuft unter der Adressleiste weiter (--mvm-under aus
   setFullMapHeight, sonst 0) - Bedienelemente unten rücken darüber */
#map .map_bottom_menu,
#map .maplibregl-ctrl-bottom-left,
#map .maplibregl-ctrl-bottom-right {
  /* + Home-/Gestenleiste (Android-Chrome randlos, iOS-Home-Bildschirm-App) */
  translate: 0 calc(-1 * (var(--mvm-under, 0px) + env(safe-area-inset-bottom, 0px)));
}

@media (max-width: 767px) {
  #map .mvm-sheet {
    padding-bottom: var(--mvm-under, 0px);
    box-sizing: border-box;
  }
}

/* Panel: Scrollen bleibt im Panel, nie die Seite */
#map .mvm-sheet {
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------------------
 * Bereichskarten ohne Rahmen (Michael 2026-09-27, Variante 4a + c): rundes Foto
 * mit Anzahl mittig auf dem Bereich, Name (+ Charakter-Zeile) als freier Text
 * mit weißem Schein daneben. updateAreaCards wählt je nach Platz: rechts,
 * links (.mvm-lbl-left), ohne Charakter-Zeile (.mvm-notag), kleiner Name unter
 * dem Foto (.mvm-compact) oder nur das Foto (.mvm-noname). !important, weil die
 * älteren Karten-/Hover-Regeln spezifischer sind.
 * ---------------------------------------------------------------------- */
#map .mvm-area-lbl .mvm-area {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  gap: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

#map .mvm-area-lbl .mvm-area-photo {
  width: 38px;
  height: 38px;
}

#map .mvm-area-lbl .mvm-area-photo img,
#map .mvm-area-lbl .mvm-area-initial {
  box-sizing: border-box;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px var(--area-color, #587abc), 0 4px 12px rgba(38, 50, 80, 0.3);
}

#map .mvm-area-lbl .mvm-area-text {
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  transform: translateY(-50%);
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  pointer-events: none;
  /* schmaler, scharfer Rand in der Papierfarbe der Karte (wie die Orts- und
     Straßennamen) statt weißem Weichzeichner-Fleck (Michael 2026-09-28) */
  text-shadow: 1px 0 0 #f8f3ec, -1px 0 0 #f8f3ec, 0 1px 0 #f8f3ec, 0 -1px 0 #f8f3ec,
               1px 1px 0 #f8f3ec, -1px -1px 0 #f8f3ec, 1px -1px 0 #f8f3ec, -1px 1px 0 #f8f3ec,
               0 0 3px rgba(248, 243, 236, 0.9);
}

#map .mvm-area-lbl .mvm-area-name {
  display: block !important;
  font-size: 13px;
  font-weight: 700;
  color: #2f3b55;
}

#map .mvm-area-lbl .mvm-area-tag {
  display: block !important;
  font-size: 11px;
  font-weight: 600;
  color: #5b6680;
}

#map .mvm-area-lbl .mvm-lbl-left .mvm-area-text {
  left: auto;
  right: calc(100% + 6px);
  align-items: flex-end;
  text-align: right;
}

#map .mvm-area-lbl .mvm-notag .mvm-area-tag {
  display: none !important;
}

/* Name über dem Foto */
#map .mvm-area-lbl .mvm-lbl-top .mvm-area-text {
  top: auto;
  bottom: calc(100% + 4px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  align-items: center;
}

/* zusammengeklappt: kleiner, dezenter Name unter dem Foto */
#map .mvm-area-lbl .mvm-compact .mvm-area-text {
  top: calc(100% + 3px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  align-items: center;
}

#map .mvm-area-lbl .mvm-compact.mvm-lbl-top .mvm-area-text {
  top: auto;
  bottom: calc(100% + 3px);
}

#map .mvm-area-lbl .mvm-compact .mvm-area-name {
  font-size: 10.5px;
  color: #5b6680;
}

#map .mvm-area-lbl .mvm-compact .mvm-area-tag,
#map .mvm-area-lbl .mvm-noname .mvm-area-text {
  display: none !important;
}

/* ohne Platz: Name nur beim Hover (Maus) */
#map:not(.mvm-touch) .mvm-area-lbl:hover .mvm-noname .mvm-area-text {
  display: flex !important;
}

#map:not(.mvm-touch) .mvm-area-lbl:hover .mvm-area-photo img {
  box-shadow: 0 0 0 2px var(--area-color, #587abc), 0 6px 16px rgba(38, 50, 80, 0.4);
}

/* Auswahl-Etikett langer Namen (Variante 1c): Hauptname höchstens 2 Zeilen,
   bei Unter-Spots der Tourname klein und einzeilig darunter */
#map .muvamoMarkerOuter.highlight.mvm-sheet-pin .mvm-pin-label {
  width: max-content;
  max-width: 210px;
  white-space: normal;
  text-align: center;
  border-radius: 11px;
  padding: 3px 10px 4px;
}

#map .mvm-pin-main {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#map .mvm-pin-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 14px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* WC/Wasser/Bankomat-Chip aktiv: HTML-Marker treten wie die Kartenmarker zurück */
#map.mvm-practical-on .muvamoMarkerOuter:not(.highlight) {
  opacity: 0.45 !important;
}

/* Charakter-Zeile: Text höchstens 170 px mit "…", die Gesamtzahl dahinter wird nie abgeschnitten */
#map .mvm-area-lbl .mvm-area-tag {
  display: flex !important;
  white-space: nowrap;
}

#map .mvm-area-lbl .mvm-notag .mvm-area-tag,
#map .mvm-area-lbl .mvm-compact .mvm-area-tag {
  display: none !important;
}

#map .mvm-tag-txt {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#map .mvm-tag-n {
  flex: none;
  color: #8a93a8;
}

/* Bereichs-Zähler: Stern + Highlights groß, übrige Spots klein unten rechts */
#map .mvm-area-lbl .mvm-area-badge {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
}

#map .mvm-badge-star {
  font-size: 9px;
  line-height: 1;
}

#map .mvm-area-badge2 {
  position: absolute;
  right: -10px;
  bottom: -5px;
  padding: 0 4px;
  height: 15px;
  border: 1.5px solid #ffffff;
  border-radius: 8px;
  background: #ffffff;
  color: #5b6680;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 12px;
  box-shadow: 0 1px 4px rgba(38, 50, 80, 0.3);
  white-space: nowrap;
}

#map .mvm-area-badge2[hidden] {
  display: none;
}

/* Verbindungslinie zwischen den Stufen */

/* Stern-Zähler im Foto-Kreis (Michael): kleines Etikett mittig auf dem unteren
   Rand des Fotos, halb im Kreis - kein Platzbedarf rechts oben mehr */
#map .mvm-area-lbl .mvm-area-badge {
  top: auto;
  right: auto;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  min-width: 0;
  height: 16px;
  padding: 0 5px;
  border-width: 1.5px;
  font-size: 10px;
  line-height: 13px;
}

/* Nachschärfung (Michael): Zähler GANZ im Foto-Kreis (kompakt), unten im Bild */
#map .mvm-area-lbl .mvm-area-photo {
  overflow: hidden;
  border-radius: 50%;
}

#map .mvm-area-lbl .mvm-area-badge {
  bottom: 3px;
  height: 13px;
  padding: 0 4px;
  border: 0;
  border-radius: 7px;
  font-size: 9px;
  line-height: 13px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}

#map .mvm-area-lbl .mvm-badge-star {
  font-size: 7.5px;
}

/* Ring + Schatten des Fotos jetzt am Rahmen des (beschnittenen) Foto-Containers */
#map .mvm-area-lbl .mvm-area-photo img,
#map .mvm-area-lbl .mvm-area-initial {
  box-shadow: none;
}

#map .mvm-area-lbl .mvm-area-photo {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--area-color, #587abc), 0 4px 12px rgba(38, 50, 80, 0.3);
}

#map .mvm-area-lbl .mvm-area-photo img {
  border: 0;
}

#map .mvm-area-lbl .mvm-area-photo {
  display: block;   /* span: ohne block kein runder Rahmen (Schatten zerfiel in Klammern) */
}

/* Gesamtzahl dezent im Foto (Michael): kein hartes Etikett, sondern ein weicher
   dunkler Verlauf am unteren Fotorand mit kleiner weißer Zahl */
#map .mvm-area-lbl .mvm-area-badge {
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: auto;
  height: 17px;
  padding: 3px 0 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to top, rgba(20, 28, 45, 0.62), rgba(20, 28, 45, 0));
  box-shadow: none;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  justify-content: center;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}

#map .mvm-area-lbl .mvm-tag-n {
  display: none;
}

/* Tour ausgewählt (nur Linie, Michael 2026-09-28): kleines Start-Fähnchen
   statt Foto-Pin; Name der Tour bleibt darunter */
#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center.mvm-pin-start .muvamoMarker {
  padding: 8px;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center.mvm-pin-start .mvm-pin-label {
  top: calc(150% + 4px);
}

/* Zoom-Knöpfe (Desktop, seit dem Wegfall der Stufenleiter 2026-09-28):
   Symbole in CI-Blau wie der Standort-Knopf */
#map.mvm-ci .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
#map.mvm-ci .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  filter: invert(45%) sepia(19%) saturate(1395%) hue-rotate(187deg) brightness(92%) contrast(88%);
}

/* HTML-Marker (Hotels, Guides) sitzen über dem Ort (Anker unten): Auswahl-Pin
   an derselben Stelle statt um die halbe Höhe nach unten (sprang, 2026-09-28) */
#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center.mvm-pin-anchored .muvamoMarker {
  translate: 0 0;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center.mvm-pin-anchored .mvm-pin-label {
  top: calc(100% + 8px);
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center.mvm-pin-anchored .mvm-pin-badge:not([hidden]) {
  top: calc(100% - var(--pin-size, 60px) * 0.72 - 12px);
}

/* Pass-Chip außerhalb der Pass-Stadt ausgeblendet (updatePassChip) */
#map .mvm-chip-btn[hidden] {
  display: none !important;
}


/* Suche offen (Michael 2026-09-28: Chips verdeckten das Suchfeld): das
   Eingabefeld (z-index 999 aus muvamo.css) lag unter der Chip-Leiste (9998).
   Solange die Suche offen ist, ersetzt sie die Chip-Zeile. Per :has, damit
   jeder Weg zum Schließen (Knopf, Treffer, Escape) mitgenommen wird. */
#map:has(#mapsearch[style*="block"]) .mvm-chips {
  visibility: hidden;
}

#map.mvm-ci #mapsearch input,
#map.mvm-ci #mapsearch .muvamo_autocomplete_result.map {
  z-index: 10002 !important;
}

#map.mvm-ci #mapsearch input {
  width: min(420px, calc(100% - 140px)) !important;
}

/* Kartensuche: Gebiet als kleine zweite Zeile */
#map.mvm-ci #mapsearch .mvm-search-area {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--area-color, #5b6680);
}

/* Trefferliste der Kartensuche: direkt unter dem Suchfeld, gleiche Kante und
   Breite, Karten-Look statt alter Mini-Liste (Michael 2026-09-28) */
#map.mvm-ci #mapsearch .muvamo_autocomplete_result.map {
  position: absolute;
  top: 64px;
  left: 68px;
  width: min(420px, calc(100% - 140px)) !important;
  max-height: calc(100% - 64px - 170px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  contain: paint;
  overscroll-behavior: contain;
  padding: 6px;
  background: #ffffff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(38, 50, 80, 0.18);
}

#map.mvm-ci #mapsearch .muvamo_autocomplete_result.map .muvamo_autocomplete_result_element_outer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px !important;
  border-radius: 10px;
  text-decoration: none;
}

#map.mvm-ci #mapsearch .muvamo_autocomplete_result.map .muvamo_autocomplete_result_element_outer.marked,
#map:not(.mvm-touch).mvm-ci #mapsearch .muvamo_autocomplete_result.map .muvamo_autocomplete_result_element_outer:hover {
  background: #f6f1eb;
}

#map.mvm-ci #mapsearch .muvamo_autocomplete_result.map .muvamo_autocomplete_image {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px;
  border-radius: 9px;
  overflow: hidden;
  background: #efe7dd;
}

#map.mvm-ci #mapsearch .muvamo_autocomplete_result.map .muvamo_autocomplete_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#map.mvm-ci #mapsearch .muvamo_autocomplete_result.map .muvamo_autocomplete_text {
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.25 !important;
  color: #2f3b55;
}

/* Handy: Titel höchstens zwei Zeilen, damit 6 Treffer ohne Scrollen passen */
@media (max-width: 767px) {
  #map.mvm-ci #mapsearch .mvm-search-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* Suchleiste (Feld + X + Treffer als Einheit, 2026-09-28): rückt mit der
   Seitenleiste nach rechts wie die Knöpfe; Treffer hängen direkt darunter */
#map.mvm-ci #mapsearch .mvm-search-bar {
  position: absolute;
  top: 12px;
  left: 68px;
  width: min(420px, calc(100% - 140px));
  z-index: 10002;
  transition: left 0.25s ease;
}

#map.mvm-ci #mapsearch .mvm-search-bar input {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  padding-right: 48px;
  box-sizing: border-box;
}

#map.mvm-ci #mapsearch .mvm-search-x {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10005;   /* über dem Feld (z-index 10002 !important, siehe oben) */
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f3f8;
  color: #5b6680;
  font-size: 22px;
  line-height: 32px;
  cursor: pointer;
}

#map:not(.mvm-touch).mvm-ci #mapsearch .mvm-search-x:hover {
  background: #e6e9f1;
  color: #2f3b55;
}

#map.mvm-ci #mapsearch .mvm-search-bar .muvamo_autocomplete_result.map {
  top: 52px;
  left: 0;
  width: 100% !important;
  max-height: min(520px, 60vh) !important;
}

@media (min-width: 768px) {
  #map.mvm-ci.mvm-sheet-on #mapsearch .mvm-search-bar {
    left: 460px;
    width: min(420px, calc(100% - 532px));
  }
}

/* Tour-Stationen: vorige / nächste Station mit Gehzeit (2026-09-28) */
#map .mvm-tournav {
  margin: 12px 0 4px;
  display: grid;
  gap: 6px;
}

#map .mvm-tournav-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5b6680;
}

#map .mvm-tournav-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#map .mvm-tournav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: #eef2fa;
  color: #2f3b55;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#map .mvm-tournav-next {
  justify-content: flex-end;
  text-align: right;
}

#map:not(.mvm-touch) .mvm-tournav-btn[data-trigger]:hover {
  background: #e0e8f7;
}

#map .mvm-tournav-btn:focus-visible {
  outline: 2px solid #587abc;
  outline-offset: 2px;
}

#map .mvm-tournav-end {
  justify-content: center;
  background: #f6f1eb;
  color: #8f8279;
  font-size: 12.5px;
  font-weight: 700;
  cursor: default;
}

#map .mvm-tournav-arrow {
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: #587abc;
}

#map .mvm-tournav-txt {
  display: grid;
  min-width: 0;
}

#map .mvm-tournav-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#map .mvm-tournav-min {
  font-size: 11.5px;
  color: #5b6680;
}

@media (min-width: 768px) {
  #map .mvm-tournav {
    margin-left: 18px;
    margin-right: 18px;
  }
}

/* Voller Text (formatiert): Absätze, Links, Listen; beim Laden Platzhalter
   statt gekürztem Text, dann weich eingeblendet (2026-09-28) */
#map .mvm-sheet-text.mvm-text-rich {
  display: block;
  -webkit-line-clamp: unset;
}

#map .mvm-sheet-text.mvm-text-rich p {
  margin: 0 0 8px;
}

#map .mvm-sheet-text.mvm-text-rich p:last-child {
  margin-bottom: 0;
}

#map .mvm-sheet-text.mvm-text-rich ul,
#map .mvm-sheet-text.mvm-text-rich ol {
  margin: 0 0 8px;
  padding-left: 18px;
}

#map .mvm-sheet-text.mvm-text-rich a {
  color: #587abc;
  text-decoration: underline;
}

#map .mvm-sheet-text.mvm-text-loading {
  display: block;
  color: transparent;
  min-height: 3.9em;
  background:
    linear-gradient(#eef0f5, #eef0f5) 0 0.25em / 100% 0.8em no-repeat,
    linear-gradient(#eef0f5, #eef0f5) 0 1.55em / 92% 0.8em no-repeat,
    linear-gradient(#eef0f5, #eef0f5) 0 2.85em / 64% 0.8em no-repeat;
  border-radius: 4px;
  overflow: hidden;
  max-height: 3.9em;
}

#map .mvm-sheet-text.mvm-text-fade {
  animation: mvm-text-in 0.25s ease;
}

@keyframes mvm-text-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #map .mvm-sheet-text.mvm-text-fade { animation: none; }
}

/* Handy: im halben Panel 3 Zeilen Vorschau (weich auslaufend), ganz aufgezogen alles */
@media (max-width: 767px) {
  #map .mvm-sheet.mvm-sheet-half .mvm-sheet-text {
    display: block;
    -webkit-line-clamp: unset;
    max-height: 4.4em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 60%, transparent);
    mask-image: linear-gradient(#000 60%, transparent);
  }

  #map .mvm-sheet.mvm-sheet-full .mvm-sheet-text {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
  }
}

/* ------------------------------------------------------------------------
 * Tour-Werkzeuge (2026-09-28): Übersicht in der Kartenecke, Tour-Modus-Banner
 * ---------------------------------------------------------------------- */
#map .mvm-tourbox {
  position: absolute;
  z-index: 9990;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: calc(100% - 140px);
  padding: 8px 8px 8px 14px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(38, 50, 80, 0.16);
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  color: #2f3b55;
}

#map .mvm-tourbox-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #5b6680;
}

#map .mvm-tourbox-facts strong {
  color: #2f3b55;
  font-weight: 700;
}

#map .mvm-tourbox-go {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: #587abc;
  color: #ffffff;
  font: 700 13px/1 'Quicksand', Helvetica, Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

#map:not(.mvm-touch) .mvm-tourbox-go:hover {
  background: #4a69a8;
}

/* „Tour starten“ nur als Knopf, ohne Kasten/Infos (2026-10-01) */
#map .mvm-tourbox.mvm-tourbox-start {
  padding: 0;
  background: none;
  box-shadow: none;
}
#map .mvm-tourbox-start .mvm-tourbox-go {
  padding: 11px 16px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(38, 50, 80, 0.22);
}
#map .mvm-tourbox-start .mvm-tourbox-go i {
  margin-right: 4px;
  font-size: 12px;
}

#map.mvm-tourmode-on .mvm-tourbox:not(.mvm-tourbar) {
  display: none;
}

/* Tour-Seite, Handy: mitlaufender „Tour starten“-Knopf statt Eckknopf (2026-10-02),
   Aussehen wie „Open map“ der Kartenseite (.mvm-seo-sticky); im Vollbild aus */
.mvm-tour-sticky {
  display: none;
}

@media (max-width: 767px) {
  html:not(.mvm-fs-on) .mvm-tour-sticky {
    position: fixed;
    z-index: 9000;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border: 0;
    border-radius: 999px;
    background: #587abc;
    color: #ffffff;
    font: 700 15px 'Quicksand', Helvetica, Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(38, 50, 80, 0.35);
  }
  html:not(.mvm-fs-on) .mvm-tour-sticky i {
    font-size: 12px;
  }
  html.mvm-has-toursticky:not(.mvm-fs-on) #map .mvm-tourbox-start {
    display: none;
  }
}

@media (max-width: 767px) {
  #map .mvm-tourbox:not(.mvm-tourbox-start) {
    padding: 6px 6px 6px 10px;
  }
  #map .mvm-tourbox {
    left: 12px;
    max-width: calc(100% - 84px);
  }

}

/* ------------------------------------------------------------------------
 * Tour-Panel (Michael 2026-09-29): EINE Komponente für den Tour-Modus -
 * Kopf (Fortschritt + Beenden mit Rückfrage), Inhalt der gezeigten Station
 * (Du bist hier / Nächste Station / Vorschau + Zurück zu mir), unten fest die
 * Navigation für den Daumen. Handy: Höhe in drei Stufen (renderTourPanel /
 * tourPanelLayout), Wischen nach unten klappt zusammen, schließt nie.
 * ---------------------------------------------------------------------- */
#map .mvm-sheet.mvm-sheet-tp {
  transition: transform 0.25s ease, height 0.25s ease;
}

#map .mvm-sheet.mvm-sheet-tp .mvm-sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 16px 8px;
}

#map .mvm-tp-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 12px 10px 16px;
}

#map .mvm-tp-prog {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
}

#map .mvm-tp-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b6680;
}

#map .mvm-tp-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: #e6e9f1;
  overflow: hidden;
}

#map .mvm-tp-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: #587abc;
  transition: width 0.4s ease;
}

#map .mvm-sheet-tp button {
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  cursor: pointer;
}

#map .mvm-tp-end {
  flex: none;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: #f1f3f8;
  color: #5b6680;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

#map .mvm-tp-confirm {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: #fdf1e7;
  color: #7a4a2a;
  font-size: 14px;
  font-weight: 700;
}

#map .mvm-tp-confirm span {
  flex: 1 1 100%;
}

#map .mvm-tp-confirm button {
  flex: 1;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

#map .mvm-tp-goon {
  background: #587abc;
  color: #ffffff;
}

#map .mvm-tp-endyes {
  background: #ffffff;
  color: #b3402f;
  box-shadow: inset 0 0 0 1.5px #e7b8ae;
}

#map .mvm-tp-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin: 2px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3f6fc0;
}

#map .mvm-tp-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2f9bf0;
  box-shadow: 0 0 0 3px rgba(47, 155, 240, 0.25);
}

#map .mvm-tp-status--next {
  color: #c4692c;
}

#map .mvm-tp-status--next .mvm-tp-dot {
  background: #ee9a5d;
  box-shadow: 0 0 0 3px rgba(238, 154, 93, 0.28);
}

#map .mvm-tp-status--preview {
  color: #7b849b;
}

#map .mvm-tp-status--preview .mvm-tp-dot {
  background: #a9b0c2;
  box-shadow: none;
}

#map .mvm-tp-me {
  margin-left: auto;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: #eaf0fb;
  color: #3f5f9f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#map .mvm-tp-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

#map .mvm-tp-img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
}

#map .mvm-tp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 10px 0 4px;
}

#map .mvm-tp-nav {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 4px 10px 10px;
  padding: 6px;
  border-radius: 16px;
  background: #2e3c5c;
  color: #ffffff;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
}

#map .mvm-tp-nav button {
  border: 0;
  color: inherit;
}

#map .mvm-tp-prev,
#map .mvm-tp-next {
  flex: none;
  width: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 26px;
  line-height: 1;
}

#map .mvm-tp-prev[disabled],
#map .mvm-tp-next[disabled] {
  opacity: 0.28;
  cursor: default;
}

#map .mvm-tp-navmain {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 12px;
  background: transparent;
  text-align: center;
}

#map .mvm-tp-navlbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f6d8c1;
}

#map .mvm-tp-navmain strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#map .mvm-tp-navdist {
  font-size: 13px;
  color: #cfd6e6;
}

#map .mvm-tp-navmsg {
  padding: 12px 8px;
}

/* Einstiegsfrage als Overlay über der Karte (2026-10-04) */
#map .mvm-tp-choiceov {
  position: absolute;
  inset: 0;
  z-index: 10050;   /* über Panel (10000) und Kartenknöpfen (10001) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(23, 33, 54, 0.45);
  animation: mvm-chov-in 0.2s ease both;
}
@keyframes mvm-chov-in { from { opacity: 0; } to { opacity: 1; } }
#map .mvm-tp-chbox {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  padding: 20px 16px 10px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(20, 30, 50, 0.35);
  color: #2f3b55;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  animation: mvm-chbox-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes mvm-chbox-in { from { transform: translateY(12px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
#map .mvm-tp-chtour {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7b849b;
  text-align: center;
}
#map .mvm-tp-chq2 {
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
#map .mvm-tp-chbox .mvm-tp-choose {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: #587abc;
  color: #ffffff;
  text-align: left;
  font-family: inherit;
}
#map .mvm-tp-chbox .mvm-tp-choose.mvm-tp-choose-2 {
  background: #eef2fa;
  color: #2f3b55;
}
#map .mvm-tp-chimg {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
}
#map .mvm-tp-chbox .mvm-tp-flagimg { font-size: 20px; }
#map .mvm-tp-chtxt {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#map .mvm-tp-chbox .mvm-tp-navlbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}
#map .mvm-tp-chbox .mvm-tp-choose strong {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#map .mvm-tp-chbox .mvm-tp-navdist {
  font-size: 13px;
  color: inherit;
  opacity: 0.85;
}
#map .mvm-tp-chcancel {
  justify-self: center;
  padding: 6px 12px;
  border: 0;
  background: none;
  color: #587abc;
  font: 700 14px/1.2 'Quicksand', Helvetica, Arial, sans-serif;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  #map .mvm-tp-choiceov, #map .mvm-tp-chbox { animation: none; }
}

/* Einstieg mittendrin (Michael 2026-09-30): Frage + zwei Optionen im Daumenbereich */
#map .mvm-tp-choice {
  flex: 1;
  display: grid;
  gap: 6px;
  padding: 4px 2px 2px;
}

#map .mvm-tp-chq {
  padding: 2px 6px 2px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

#map .mvm-tp-choose {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #587abc;
  text-align: center;
  cursor: pointer;
}

#map .mvm-tp-choose.mvm-tp-choose-2 {
  background: rgba(255, 255, 255, 0.12);
}

#map .mvm-tp-choose strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#map:not(.mvm-touch) .mvm-tp-choose:hover {
  filter: brightness(1.08);
}

/* Tour-Card: „Tour starten“ + „Mehr Infos“ nebeneinander */
#map .mvm-act-starttour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

#map:not(.mvm-touch) .mvm-tp-end:hover {
  background: #e6e9f1;
}

#map:not(.mvm-touch) .mvm-tp-prev:not([disabled]):hover,
#map:not(.mvm-touch) .mvm-tp-next:not([disabled]):hover,
#map:not(.mvm-touch) button.mvm-tp-navmain:hover {
  background: rgba(255, 255, 255, 0.2);
}

#map .mvm-sheet-tp .mvm-sheet-text,
#map .mvm-sheet-tp .mvm-tp-title {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* halb offen: Text läuft weich aus statt hart abgeschnitten */
#map .mvm-sheet.mvm-sheet-tp.mvm-sheet-half:not(.mvm-tp-min) .mvm-sheet-scroll {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
}

/* zusammengeklappt: nur Kopf + Navigation */
#map .mvm-sheet.mvm-tp-min .mvm-sheet-scroll {
  visibility: hidden;
}

@media (min-width: 768px) {
  #map .mvm-sheet-tp .mvm-sheet-text {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
  }

  #map .mvm-sheet.mvm-sheet-tp .mvm-sheet-scroll {
    height: auto;
    padding: 0 18px 12px;
  }

  #map .mvm-sheet-tp .mvm-tp-head {
    padding: 16px 12px 12px 18px;
  }

  #map .mvm-tp-top {
    flex-direction: column;
    align-items: stretch;
  }

  #map .mvm-tp-img {
    width: 100%;
    height: 190px;
  }

  #map .mvm-tp-nav {
    margin: 4px 12px 12px;
  }
}

/* ------------------------------------------------------------------------
 * Vollbild für alle MapLibre-Karten (mapFsEnter/mapFsExit, Michael
 * 2026-09-29; zuerst Tourmodus): Karte über der ganzen Seite (auch über
 * muvamo-Kopf + WP-Adminleiste), Seite scrollt nicht, Bilderleiste unten
 * entfällt im Tourmodus (das Tour-Panel zeigt alles).
 * ---------------------------------------------------------------------- */
/* Scroll-Sperre erst, wenn das Vollbild ganz offen ist (mvm-fs-lock): sofort
   gesetzt ließ sie die klebende Navigation hinter der wachsenden Karte
   umspringen (Michael 2026-09-29: „nicht smooth“) */
html.mvm-fs-lock,
html.mvm-fs-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Scrollleiste verschwindet beim Öffnen -> die Seite dahinter bekommt ihre
   Breite als Abstand rechts, damit sie hinter der wachsenden Karte nicht
   verrutscht (scrollbar-gutter ging nicht: der Streifen lag ÜBER der Karte) */
html.mvm-fs-lock body {
  padding-right: var(--mvm-sbw, 0px) !important;
}

/* abgedunkelter Hintergrund hinter der wachsenden Karte (fsBackdrop) */
.mvm-fs-bd {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(24, 32, 52, 0.32);
  pointer-events: none;
}

#map.mvm-fs {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  /* iOS: unter die schwebende Safari-Leiste weiter (--mvm-under, sonst 0) */
  height: calc(100dvh + var(--mvm-under, 0px)) !important;
  height: var(--mvm-fs-h, calc(100dvh + var(--mvm-under, 0px))) !important;   /* iOS: Pixel aus JS (fsUnderUpdate) */
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 1000000 !important;
}

/* iOS offen: als Seiteninhalt statt fixed, sonst schneidet Safari unten an der
   Leiste ab (fsDocPin) */
#map.mvm-fs.mvm-fs-doc {
  position: absolute !important;
  top: var(--mvm-fs-top, 0px) !important;
  bottom: auto !important;
}

#map.mvm-tourmode-on .map_bottom_menu {
  display: none !important;
}

/* WP-Adminleiste und Vorschau-Schild (nur eingeloggt) lägen sonst über der
   Vollbild-Karte bzw. der Tour-Navigation */
html.mvm-fs-lock #wpadminbar,   /* erst ganz offen - sonst springt die Seite dahinter um 32 px */
html.mvm-fs-on .mvm-preview-badge,
body:has(.mvm-fs-shell) .mvm-preview-badge {
  display: none !important;
}

/* Fokus-Leiste: rechts großes X (beendet Vollbild/Tour) - die Kartenknöpfe
   rücken darunter. Das muvamo-Logo links wurde 2026-09-30 entfernt (Michael:
   gleiche Funktion wie X, Platz) - die Chips beginnen im Vollbild ganz links. */
#map .mvm-tf-top {
  position: absolute;
  z-index: 10002;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

#map.mvm-fs .mvm-chips {
  left: 12px;
}

@media (max-width: 980px) {
  #map.mvm-fs .mvm-chips {
    left: 10px;
  }
}

#map .mvm-tf-top button {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(38, 50, 80, 0.25);
}

#map .mvm-tf-x {
  background: #2e3c5c;
  color: #ffffff;
  font: 400 30px/48px 'Quicksand', Helvetica, Arial, sans-serif;
}

#map:not(.mvm-touch) .mvm-tf-x:hover {
  background: #3b4b70;
}

#map.mvm-fs .maplibregl-ctrl-top-left,
#map.mvm-fs .maplibregl-ctrl-top-right {
  top: calc(env(safe-area-inset-top, 0px) + 64px);
}

@media (max-width: 767px) {
  /* Inhalt endet über der Safari-Leiste: --mvm-under (iOS: Karte läuft darunter
     weiter, 157 px am iPhone 2026-09-30) - vorher nur die Home-Leiste (~34 px),
     dadurch lagen Tour-Navigation und Card-Ende unter der Leiste (Michael) */
  #map.mvm-fs .mvm-sheet {
    padding-bottom: max(var(--mvm-under, 0px), env(safe-area-inset-bottom, 0px));
  }
}

/* Vollbild-Knopf (⤢) eingebetteter Karten - im Vollbild übernimmt das X */
#map .mvm-fs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2f3b55;
}

#map.mvm-fs .mvm-fs-ctrl {
  display: none;
}

/* Desktop/Tablet: Seitenleiste im Vollbild über die ganze Höhe (Michael
   2026-09-30, seit das Logo weg ist) - die Chips beginnen dann rechts daneben */
@media (min-width: 768px) {
  #map.mvm-fs .mvm-sheet {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
  }

  #map.mvm-fs.mvm-sheet-on .mvm-chips {
    left: 404px;
  }
}

/* Popup-Karten: das Popup selbst (Rahmen, eigenes X) bleibt unter dem Vollbild */
html.mvm-fs-on .jquery-modal.blocker {
  background: transparent;
}

/* Popup-Karte: das Popup ist nur Behälter - sichtbar ist allein die Karte, die
   aus dem Knopf wächst (Michael 2026-09-29: erst Popup, dann Aufziehen wirkte
   unruhig). Klappt das Vollbild nicht, nimmt mvmFsEnterSoon die Klasse weg. */
#openMapsModal.mvm-fs-modal {
  opacity: 0 !important;
}

.jquery-modal.blocker:has(#openMapsModal.mvm-fs-modal) {
  background: transparent !important;
}

/* Tourmodus: gewählte Station dezent - kaum größer, ohne Puls und Namensschild
   (den Namen zeigt das Tour-Panel) */
#map.mvm-tourmode-on .muvamoMarkerOuter.highlight.mvm-sheet-pin .muvamoMarker {
  padding: 3px;
  animation: none;
}

/* ohne Foto: Symbol wie am Kartenmarker halb so groß wie der Kreis - mit den 3 px
   für Fotos füllte es den ganzen Pin (Michael 2026-09-30: „zu großes Icon“) */
#map.mvm-tourmode-on .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-noimg .muvamoMarker {
  padding: calc(var(--pin-size, 44px) * 0.25);
}

#map.mvm-tourmode-on .muvamoMarkerOuter.highlight.mvm-sheet-pin .mvm-pin-label {
  display: none !important;
}

/* Status „Gerade besucht“ (Station verlassen) */
#map .mvm-tp-status--visited {
  color: #7b849b;
}

#map .mvm-tp-status--visited .mvm-tp-dot {
  background: #a9b0c2;
  box-shadow: none;
}

/* Hülle beim Öffnen einer Popup-Karte (mvmFsShell): sofort sichtbar, bis die
   Karte bereit ist - gleiche Papierfarbe wie der Kartenhintergrund */
.mvm-fs-shell {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #f8f3ec;
}

.mvm-fs-shell::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(88, 122, 188, 0.25);
  border-top-color: #587abc;
  border-radius: 50%;
  animation: mvm-fs-spin 0.8s linear infinite;
}

@keyframes mvm-fs-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------------
 * Bedienelemente einheitlich (Michael 2026-09-29): rechts oben ⤢ bzw. X +
 * Filter, links oben Suche (+ muvamo im Vollbild), rechts unten GPS mit +/−
 * (Desktop) und Kompass (nur gedreht) - rutscht über Fotoleiste/Panel
 * (layoutCornerCtrls setzt --mvm-br), Info (i) links unten.
 * ---------------------------------------------------------------------- */
#map .maplibregl-ctrl-bottom-right {
  bottom: var(--mvm-br, 0px);
  transition: bottom 0.25s ease;
}

#map .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group {
  margin: 0 12px 12px 0;
}

#map .maplibregl-ctrl-bottom-left {
  z-index: 10001 !important;
  /* über Fotoleiste bzw. Handy-Panel/Tour-Panel (layoutCornerCtrls setzt --mvm-bl) */
  bottom: var(--mvm-bl, 0px);
  transition: bottom 0.25s ease;
}

#map:not(.mvm-rotated) .maplibregl-ctrl-compass {
  display: none;
}

/* Handy ohne Zoom-Knöpfe: Gruppe nur zeigen, wenn der Kompass gebraucht wird */
#map:not(.mvm-rotated) .mvm-nav-ctrl:not(:has(.maplibregl-ctrl-zoom-in)) {
  display: none;
}

/* Tour-Übersicht: links oben (dort sitzt nichts mehr); im Vollbild neben dem
   muvamo-Knopf */
#map.mvm-fs .mvm-tourbox {
  left: 12px;   /* seit das Logo weg ist (2026-09-30) ganz links */
}

@media (max-width: 767px) {
  #map.mvm-fs .mvm-tourbox {
    max-width: calc(100% - 84px);
  }
}

/* Info (i) muss sichtbar bleiben (Lizenzangabe): bei offener Desktop-Seitenleiste
   rechts daneben */
@media (min-width: 768px) {
  #map.mvm-sheet-on .maplibregl-ctrl-bottom-left {
    left: 392px;
  }
}

#map.muvamo_fullmap[data-mvm-scrollpage]:not(.mvm-fs) {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 40px -22px rgba(38, 50, 80, 0.3), 0 0 0 1px rgba(38, 50, 80, 0.06);   /* nur nach unten: seitlich lief er in den Spalt zur Gebiets-Spalte (Linie) */
}

/* Eingebettete Karte = Vorschau (Michael 2026-09-29): keine Filter-Chips, keine
   Suche, kein Filter-Knopf - alles erst im Vollbild. Übrig: Vollbild (⤢), Zoom
   (Desktop), Standort. Am Handy öffnet der erste Tipp ohnehin das Vollbild. */
#map[data-mvm-scrollpage]:not(.mvm-fs) .mvm-chips,
#map.muvamo_inline_map:not(.mvm-fs) .mvm-chips,
#map[data-mvm-scrollpage]:not(.mvm-fs) .maplibregl-ctrl-group:has(> .maplibregl-ctrl-search),
#map.muvamo_inline_map:not(.mvm-fs) .maplibregl-ctrl-group:has(> .maplibregl-ctrl-search),
#map[data-mvm-scrollpage]:not(.mvm-fs) .mapbox-filter,
#map.muvamo_inline_map:not(.mvm-fs) .mapbox-filter,
#map[data-mvm-scrollpage]:not(.mvm-fs) .muvamo_filter_clear,
#map.muvamo_inline_map:not(.mvm-fs) .muvamo_filter_clear,
#map[data-mvm-scrollpage]:not(.mvm-fs) #mapsearch,
#map.muvamo_inline_map:not(.mvm-fs) #mapsearch,
#map[data-mvm-scrollpage]:not(.mvm-fs) .mvm-chip-search,
#map.muvamo_inline_map:not(.mvm-fs) .mvm-chip-search {
  display: none !important;
}

/* eingebettet ohne Fotoleiste (die Karten darunter übernehmen), im Vollbild wieder da */
#map[data-mvm-scrollpage]:not(.mvm-fs) .map_bottom_menu {
  display: none !important;
}

@media (max-width: 767px) {

  #map.muvamo_fullmap[data-mvm-scrollpage]:not(.mvm-fs) {
    border-radius: 18px;
  }
}

/* Gebietskarten + Gebietsflächen: Zoom-Zeiger (Klick zoomt ins Gebiet) */
#map .mvm-area-lbl,
#map .mvm-area-lbl * {
  cursor: zoom-in !important;
}

/* Kartenseite eingebettet: der Vollbild-Knopf ragt ~22 px in die Karte -
   Copyright-Hinweis (aufgeklappt lang) darüber heben (Michael 2026-09-29) */
#map[data-mvm-scrollpage]:not(.mvm-fs) .maplibregl-ctrl-bottom-left {
  bottom: max(28px, var(--mvm-bl, 0px));
}

/* aufgeklappter Copyright-Hinweis bricht vor den Knöpfen rechts unten um
   (lief am Handy unter den GPS-Knopf) */
#map .maplibregl-ctrl-bottom-left {
  right: 70px;
}

/* Vollbild-Animation (fsFlip): Ecken als registrierte Variablen, damit sie sich
   animieren lassen - das Vollbild-CSS setzt den Radius sonst mit !important auf 0 */
@property --mvm-fs-rx {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --mvm-fs-ry {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

#map.mvm-fs.mvm-fs-anim {
  border-radius: var(--mvm-fs-rx) / var(--mvm-fs-ry) !important;
  overflow: hidden !important;
  will-change: transform;
}

/* SEO-Kartenseite: Kartenbereich hat schon VOR dem Skript die richtige Höhe
   (gleiche Formel wie setFullMapHeight - kein Springen beim Laden, CLS) und
   eine Kartenfarbe mit sanftem Schimmer, bis die Karte gezeichnet ist
   (Klasse mvm-ready beim ersten load). Michael 2026-09-29 */
#map.muvamo_fullmap[data-mvm-scrollpage]:not(.mvm-fs) {
  height: clamp(380px, 66vh, 720px);
  height: clamp(380px, 66svh, 720px);
}

@media (min-width: 1100px) {
  #map.muvamo_fullmap[data-mvm-scrollpage]:not(.mvm-fs) {
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 420px;
    max-height: min(82vh, 820px);
    max-height: min(82svh, 820px);   /* stabil beim Scrollen (iOS-Leiste) */
  }
}

#map.muvamo_fullmap[data-mvm-scrollpage]:not(.mvm-ready) {
  background: linear-gradient(100deg, #efe7db 30%, #f8f3ec 50%, #efe7db 70%) 0 0 / 300% 100%;
  animation: mvm-map-shimmer 1.6s ease-in-out infinite;
}

#map.muvamo_fullmap[data-mvm-scrollpage].mvm-ready {
  background: #f8f3ec;
}

@keyframes mvm-map-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  #map.muvamo_fullmap[data-mvm-scrollpage]:not(.mvm-ready) {
    animation: none;
  }
}

/* Gebietskarten der Übersicht aus - hier stehen die Baustein-Marker */
#map[data-mvm-itinerary] .mvm-area-lbl {
  display: none !important;
}

/* Baustein-Marker: Nummer im Farbkreis + Name (beim Hineinzoomen nur die Nummer) */
.mvm-it-mk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(38, 50, 80, 0.22), 0 0 0 2px var(--c);
  font: 700 13.5px 'Quicksand', Helvetica, Arial, sans-serif;
  color: #26324f;
  white-space: nowrap;
  cursor: pointer;
  /* KEINE transition auf transform: MapLibre setzt die Marker-Position per
     transform - sonst „schwimmen“ die Marker beim Ziehen hinterher */
  transition: box-shadow 0.15s ease;
}

.mvm-it-mk:hover {
  box-shadow: 0 8px 22px rgba(38, 50, 80, 0.28), 0 0 0 3px var(--c);
}

.mvm-it-mk-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c);
  color: #ffffff;
  font-size: 14px;
}

.mvm-it-mk-l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mvm-it-mk-l i {
  color: var(--c);
  font-size: 12px;
}

#map.mvm-it-compact .mvm-it-mk,
#map:not(.mvm-fs).mvm-touch .mvm-it-mk {
  padding: 3px;
}

#map.mvm-it-compact .mvm-it-mk-l,
#map:not(.mvm-fs).mvm-touch .mvm-it-mk-l {
  display: none;
}

/* Chips + Bausteine unter der Karte */
.mvm-it-body {
  padding-top: 20px !important;
}

.mvm-it-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mvm-it-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, #ffffff);
  color: #26324f !important;
  font: 700 14px 'Quicksand', Helvetica, Arial, sans-serif;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

.mvm-it-chip:hover {
  background: color-mix(in srgb, var(--c) 10%, #ffffff);
}

.mvm-it-chip i {
  color: var(--c);
}

.mvm-it-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c);
  color: #ffffff;
  font-size: 12.5px;
}

.mvm-it-blockslist [id^="block-"] {
  scroll-margin-top: 110px;
}

/* überdeckte Beschriftung: nur die Nummer (itinInit/declutter) */
.mvm-it-mk.mvm-it-mk--nl {
  padding: 3px;
}

.mvm-it-mk.mvm-it-mk--nl .mvm-it-mk-l {
  display: none;
}

.mvm-it-mk:hover {
  z-index: 5;
}

/* Itinerary-Karte als Bild (mode=itinerary3) */
.mvm-it-imgwrap {
  padding-bottom: 0 !important;
}

.mvm-it-figure {
  max-width: 860px;
  margin: 0 !important;
}

.mvm-it-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 24px 40px -22px rgba(38, 50, 80, 0.3), 0 0 0 1px rgba(38, 50, 80, 0.06);
}

/* Knöpfe unten (GPS/Zoom rechts, Info links): bei groß gezogenem Panel nicht
   mitwandern (layoutCornerCtrls → mvm-corner-off) */
#map .maplibregl-ctrl-bottom-right,
#map .maplibregl-ctrl-bottom-left {
  transition: bottom 0.25s ease, opacity 0.18s ease;
}

/* groß gezogen: Knöpfe bleiben stehen und werden vom Panel verdeckt (Michael:
   nicht ausblenden) - unter das Panel (z 10000) legen */
#map.mvm-corner-off .maplibregl-ctrl-bottom-right,
#map.mvm-corner-off .maplibregl-ctrl-bottom-left {
  z-index: 9990 !important;
}

/* X der Spot-Karte: Trefferfläche 44 px (Apple-Mindestmaß), sichtbar bleibt 32 px */
#map .mvm-sheet-close::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

/* Diagnose ?debug=fs (Vollbild-Höhen auf iOS) */
#map .mvm-fs-debug {
  position: absolute;
  z-index: 2000;
  left: 8px;
  right: 8px;
  top: 96px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  white-space: pre-line;
  color: #fff;
  font: 600 11px/1.35 ui-monospace, Menlo, monospace;
  pointer-events: none;
}


/* ------------------------------------------------------------------------
 * Suche in der Chipreihe (Michael 2026-09-30): Lupe als festes erstes Element
 * links (.mvm-chip-search, buildChips), die Chips wischen rechts daneben; Tipp =
 * die Reihe wird zum Suchfeld (Chips + Lupe weg, X im Feld schließt). Der
 * Such-Knopf in der Ecke entfällt überall, wo es Chips gibt (.mvm-has-cs).
 * ---------------------------------------------------------------------- */
#map .mvm-chip-search {
  position: absolute;
  z-index: 9998;
  top: 14px;
  left: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(38, 50, 80, 0.18);
  color: #587abc;
  font-size: 15px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}

#map:not(.mvm-touch) .mvm-chip-search:hover {
  background: #f5f7fb;
}

#map.mvm-has-cs .maplibregl-ctrl-group:has(> .maplibregl-ctrl-search) {
  display: none !important;
}

#map.mvm-has-cs .mvm-chips {
  left: 56px;
}

#map:has(#mapsearch[style*="block"]) .mvm-chip-search {
  visibility: hidden;
}

/* Suchfeld an der Stelle der Chipreihe */
#map.mvm-ci.mvm-has-cs #mapsearch .mvm-search-bar {
  top: 12px;
  left: 12px;
  width: min(420px, calc(100% - 84px));
}

@media (max-width: 980px) {
  #map .mvm-chip-search {
    top: 12px;
    left: 10px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
  }

  #map.mvm-has-cs .mvm-chips {
    left: 50px;
  }

  #map.mvm-ci.mvm-has-cs #mapsearch .mvm-search-bar {
    top: 10px;
    left: 10px;
    width: calc(100% - 80px);
  }
}

/* Desktop/Tablet mit offener Seitenleiste: Lupe, Chips und Suchfeld daneben */
@media (min-width: 768px) {
  #map.mvm-has-cs.mvm-sheet-on .mvm-chip-search {
    left: 404px;
  }

  #map.mvm-has-cs.mvm-sheet-on .mvm-chips {
    left: 448px;
  }

  #map.mvm-ci.mvm-has-cs.mvm-sheet-on #mapsearch .mvm-search-bar {
    left: 404px;
    width: min(420px, calc(100% - 476px));
  }
}


/* ------------------------------------------------------------------------
 * Tour zeichnet sich selbst: Geh-Männchen an der Spitze (tourDrawOn). Nie eine
 * transition auf transform am Marker selbst (MapLibre positioniert per transform)
 * - Aus-Blenden nur über opacity des inneren Elements.
 * ---------------------------------------------------------------------- */
#map .mvm-walker {
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 9;
}

#map .mvm-walker span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c, #587abc);
  border: 2.5px solid #ffffff;
  box-shadow: 0 3px 10px rgba(38, 50, 80, 0.35);
  box-sizing: border-box;
  color: #ffffff;
  font-size: 14px;
  transition: opacity 0.4s ease;
}

#map .mvm-walker.mvm-walker-out span {
  opacity: 0;
}

/* Tour-Modus (auch aus der vollen Karte gestartet, 2026-09-30): Chips, Suche und
   Filter treten ab - sie änderten die Auswahl unter der laufenden Tour. */
#map.mvm-tourmode-on .mvm-chips,
#map.mvm-tourmode-on .mvm-chip-search,
#map.mvm-tourmode-on #mapsearch,
#map.mvm-tourmode-on .maplibregl-ctrl-group:has(> .maplibregl-ctrl-search),
#map.mvm-tourmode-on .mapbox-filter,
#map.mvm-tourmode-on .muvamo_filter_clear {
  display: none !important;
}

/* Tour-Stationen ohne Foto (2026-09-30, Mönchsberg Walk): Mini-Routenkarte
   (SVG, fillRouteCards zeichnet sie in der tatsächlichen Größe) statt Bild -
   gleiche Maße wie das Bild an derselben Stelle. */
#map .mvm-rc {
  display: block;
  overflow: hidden;
  line-height: 0;
}
#map .mvm-rc .mvm-rc-svg {
  display: block;
  width: 100%;
  height: 100%;
}
#map .map_bottom_menu_marker .thumb .mvm-rc-bar {
  width: 100%;
  aspect-ratio: 16 / 9;
}
#map .mvm-rc-gal .mvm-rc-fill {
  width: 100%;
  height: 230px;
}
#map .muvamo_autocomplete_image .mvm-rc-fill {
  width: 100%;
  height: 100%;
}

/* Pfeile als Font-Awesome-Winkel statt Unicode „‹ ›“ (2026-09-30: am iPhone nicht
   sichtbar - Unicode-Symbole rendert iOS unzuverlässig; nur FA/SVG verwenden) */
#map .mvm-tournav-arrow { font-size: 14px; }
#map .mvm-tp-prev, #map .mvm-tp-next { font-size: 18px; }
#map .mvm-sheet-gal-btn { font-size: 14px; }
#map .mvm-sheet-area-go .fa-chevron-right { font-size: 0.85em; margin-left: 2px; }

/* Vollbild: klebende Stadt-/Abschnittsleiste der Seite ausblenden - sie liegen an der
   Oberkante hinter der Karte, und Safari 26 färbt seine Statusleiste nach ihnen
   (blau statt Kartenfarbe, Michael 2026-09-30) */
html.mvm-fs-on #muvamo-placebar,
html.mvm-fs-on #muvamo_scrollheader_outer {
  visibility: hidden !important;
}

/* Stationsnummer am Auswahl-Pin (Tour-Stationen), wie die Nummer am Kartenmarker:
   pfirsichfarbener Chip unten mittig über dem Kreisrand (2026-09-30) */
#map .mvm-pin-num {
  display: none;
}

#map .muvamoMarkerOuter.highlight.mvm-sheet-pin.mvm-pin-center .mvm-pin-num:not([hidden]) {
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 150;   /* über dem Hover-z-index 140 */
  left: 50%;
  top: calc(100% + var(--pin-size, 60px) / 2 - 10px);
  translate: -50% 0;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 11px;
  background: #f6d8c1;
  color: #3d4a75;
  font: 700 12.5px/1 'Quicksand', Helvetica, Arial, sans-serif;
  box-shadow: 0 1px 4px rgba(38, 50, 80, 0.3);
  pointer-events: none;
}

/* Tour-Modus: Essen & Trinken am aktuellen Wegstück bzw. „Zum Ausklang“ - als
   Karte in Weg-Orange (Michael 2026-09-30: vorher zu dezent), antippen = Vorschau */
#map .mvm-tp-eat {
  flex: none;
  display: grid;
  gap: 6px;
  margin: 0 10px 6px;
}
#map .mvm-tp-eat[hidden] {
  display: none;
}
#map .mvm-tp-eatbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 10px 7px 7px;
  border: 1.5px solid #ee9a5d;
  border-radius: 14px;
  background: #fff4ec;
  color: #2f3b55;
  font: 500 13px/1.25 'Quicksand', Helvetica, Arial, sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(238, 154, 93, 0.18);
}
#map .mvm-tp-eatimg {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}
#map .mvm-tp-eatico {
  display: grid;
  place-items: center;
  background: #ee9a5d;
  color: #ffffff;
  font-size: 18px;
}
#map .mvm-tp-eattxt {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
}
#map .mvm-tp-eatlbl {
  color: #c96f2e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#map .mvm-tp-eatlbl i {
  margin-right: 2px;
}
#map .mvm-tp-eattxt strong {
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#map .mvm-tp-eatoff {
  color: #5b6680;
  font-size: 12px;
}
#map .mvm-tp-eatgo {
  flex: none;
  color: #ee9a5d;
  font-size: 14px;
}
#map:not(.mvm-touch) .mvm-tp-eatbtn:hover {
  background: #ffeadb;
}

/* Start-/Ziel-Karte: Tourname als Überschrift, darunter Start-/Zielpunkt mit Fahne;
   am Ziel „Tour geschafft“ in Grün wie „Angekommen“ (2026-10-04) */
#map .mvm-tp-ttl {
  min-width: 0;
}
#map .mvm-tp-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 14px;
  color: #5d6780;
}
#map .mvm-tp-sub i {
  flex: none;
  color: #587abc;
  font-size: 12px;
}
#map .mvm-tp-done {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(79, 138, 76, 0.12);
  color: #3f7a3c;
  font-size: 14px;
  font-weight: 700;
}
/* Start-/Ziel-Karte im Tour-Panel (eigener Start bzw. eigenes Ziel, 2026-09-30):
   Fahnen-Kachel an der Stelle des Fotos */
#map .mvm-tp-flagimg {
  display: grid;
  place-items: center;
  flex: none;
  background: #eef2fa;
  color: #587abc;
  font-size: 26px;
}

/* Zwischenüberschriften im Text der Start-/Ziel-Karte („Where to go from here“) */
#map .mvm-sheet-text .mvm-text-h {
  margin: 14px 0 4px;
}

/* „Zurück zum Ziel“ - Spot aus der Ziel-Karte geöffnet (2026-10-01) */
#map .mvm-tp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border: 0;
  border-radius: 999px;
  background: #eef2fa;
  color: #3d4a75;
  font: 700 13px/1 'Quicksand', Helvetica, Arial, sans-serif;
  cursor: pointer;
}
#map .mvm-tp-back i {
  font-size: 12px;
  color: #587abc;
}

/* Optionen am Ziel (2026-10-01): Namensschild je Option + kleine Info-Blase */
.mvm-endopt-lbl {
  max-width: 150px;
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 5px rgba(38, 50, 80, 0.28);
  color: #2f3b55;
  font: 700 11.5px/1.25 'Quicksand', Helvetica, Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.mvm-endopt-lbl.mvm-endopt-route {
  background: #2e3c5c;
  color: #ffffff;
}
.mvm-endopt-lbl i { margin-right: 2px; }
.mvm-endbub {
  position: relative;
  width: 250px;
  padding: 10px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(38, 50, 80, 0.3);
  color: #2f3b55;
  font: 500 13px/1.35 'Quicksand', Helvetica, Arial, sans-serif;
  z-index: 5;
}
.mvm-endbub::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  translate: -50% 0;
  border: 8px solid transparent;
  border-bottom: 0;
  border-top-color: #ffffff;
}
.mvm-endbub-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #eef2fa;
  color: #3d4a75;
  cursor: pointer;
}
.mvm-endbub-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 26px;
}
.mvm-endbub-top img,
.mvm-endbub-ico {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
}
.mvm-endbub-ico {
  display: grid;
  place-items: center;
  background: #eef2fa;
  color: #587abc;
  font-size: 20px;
}
.mvm-endbub-txt {
  display: grid;
  min-width: 0;
}
.mvm-endbub-txt strong {
  font-size: 14.5px;
  line-height: 1.25;
}
.mvm-endbub-txt span {
  color: #5b6680;
  font-size: 12px;
}
.mvm-endbub-ex {
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #3d4a75;
}
.mvm-endbub-act {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.mvm-endbub-act:empty { display: none; }
.mvm-endbub-start,
.mvm-endbub-more {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  font: 700 13px/1 'Quicksand', Helvetica, Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.mvm-endbub-start { background: #587abc; color: #ffffff; }
.mvm-endbub-more { background: #eef2fa; color: #3d4a75; }

/* X auf der Ziel-Karte (Tour beenden) */
#map .mvm-tp-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #eef2fa;
  color: #3d4a75;
  font-size: 15px;
  cursor: pointer;
}
.mvm-endbub-txt strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tour-Modus 2026-10-01: Restzeit, Zurück-Chip, Ankunft, Abseits-Hinweis, Vorschau */
#map .mvm-tp-remain {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #5b6680;
}
#map .mvm-tp-backme {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ankunft dezent (2026-10-01): grüne Wellen um die Station + Status „✓ Angekommen“ */
.mvm-arrive-ripple {
  position: relative;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.mvm-arrive-ripple i {
  position: absolute;
  left: -24px;
  top: -24px;
  width: 48px;
  height: 48px;
  border: 3px solid #4f8a4c;
  border-radius: 50%;
  opacity: 0;
  animation: mvm-ripple 1.6s ease-out 3 both;
}
.mvm-arrive-ripple i:nth-child(2) { animation-delay: 0.3s; }
.mvm-arrive-ripple i:nth-child(3) { animation-delay: 0.6s; }
@keyframes mvm-ripple { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
#map .mvm-tp-status--arrived {
  color: #3f7a3c;
  animation: mvm-arrived-flash 2.6s ease both;
  border-radius: 999px;
  margin-left: -8px;
  padding-left: 8px;
}
@keyframes mvm-arrived-flash { 0% { background: rgba(79, 138, 76, 0); } 15% { background: rgba(79, 138, 76, 0.16); } 80% { background: rgba(79, 138, 76, 0.16); } 100% { background: rgba(79, 138, 76, 0); } }
#map .mvm-tp-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4f8a4c;
  color: #ffffff;
  font-size: 11px;
  animation: mvm-check-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
@keyframes mvm-check-pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .mvm-arrive-ripple i, #map .mvm-tp-check, #map .mvm-tp-status--arrived { animation: none; }
}

/* Tour läuft: Leiste oben links statt „Tour starten“ (2026-10-01) */
#map .mvm-tourbar .mvm-tourbar-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #4f8a4c;
  vertical-align: 1px;
  animation: mvm-tourbar-pulse 1.8s ease-in-out infinite;
}
@keyframes mvm-tourbar-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
#map .mvm-tourbar .mvm-tourbar-end,
#map .mvm-tourbar .mvm-tourbar-no {
  background: #eef2fa;
  color: #3d4a75;
}
#map .mvm-tourbar .mvm-tourbar-yes {
  background: #b5483c;
}
#map .mvm-tourbar-end i { margin-right: 4px; font-size: 11px; }
/* Vollbild per X verlassen, Tour läuft weiter: „Fortsetzen“ + Beenden als Symbol (2026-10-01) */
#map .mvm-tourbar:has(.mvm-tourbar-resume) { flex-wrap: nowrap; gap: 8px; }
#map .mvm-tourbar .mvm-tourbar-resume { white-space: nowrap; }
#map .mvm-tourbar .mvm-tourbar-resume i { margin-right: 5px; }
#map .mvm-tourbar > .mvm-tourbar-dot { margin-right: 0; flex: none; }
#map .mvm-tourbar .mvm-tourbar-endico { padding-left: 10px; padding-right: 10px; }
#map .mvm-tourbar .mvm-tourbar-endico i { margin-right: 0; }
#map.mvm-tour-paused .mvm-sheet-tp { display: none !important; }
/* Desktop/iPad (Seitenleiste links): Tour-Leiste rechts neben die Leiste statt darunter
   (Michael 2026-10-01: „auf Web wird der Stopp-Knopf von der Sidebar verdeckt“) */
@media (min-width: 768px) {
  #map.mvm-sheet-on:not(.mvm-tour-paused) .mvm-tourbar {
    left: 404px;
  }
}
/* Mobile Card/Tour-Panel: Gesten gehören uns, nicht Safari (2026-10-01: „große Sprünge“ -
   Safari scrollte Seite/Leiste mit, sobald das erste touchmove nicht verhindert war).
   Frei: Galerie waagrecht, Inhalt in voller Höhe senkrecht. */
@media (max-width: 767px) {
  #map .mvm-sheet { touch-action: none; overscroll-behavior: contain; }
  #map .mvm-sheet .mvm-sheet-gal-track { touch-action: pan-x; }
  #map .mvm-sheet.mvm-sheet-full .mvm-sheet-scroll { touch-action: pan-y; overscroll-behavior: contain; }
  #map .mvm-sheet.mvm-sheet-full .mvm-sheet-scroll .mvm-sheet-gal-track { touch-action: pan-x pan-y; }
}

/* „Teil der Tour“ in der Spot-Card (2026-10-02): je Tour eine Zeile „Stop 10 · Tourname ›“,
   Antippen zeigt die Tour; mehr als zwei Touren hinter „+N weitere“ */
#map .mvm-sheet-tours {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 2px;
}
#map .mvm-sheet-tourrow {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dfe5f2;
  border-radius: 12px;
  background: #f5f8fd;
  color: #2f3b55;
  font: 600 13.5px/1.25 'Quicksand', Helvetica, Arial, sans-serif;
  text-align: left;
  cursor: pointer;
}
#map .mvm-sheet-tourrow > i:first-child { color: #587abc; font-size: 14px; flex: none; }
#map .mvm-sheet-tourrow-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#map .mvm-sheet-tourrow-txt strong { color: #587abc; font-weight: 700; }
/* Tour-Hinweis außerhalb des Routen-Modus (2026-10-07): dezent, ohne Kasten-Fläche und Fettung */
#map .mvm-sheet-tourrow.mvm-sheet-tourrow-quiet { background: transparent; border-color: #e6eaf2; font-weight: 500; color: #4a5570; }
#map .mvm-sheet-tourrow-quiet .mvm-sheet-tourrow-lbl { color: #8a93a8; }
#map .mvm-sheet-tourrow-quiet > i:first-child { color: #8a93a8; }
#map .mvm-sheet-tourrow-go { flex: none; color: #8a93a8; font-size: 12px; }
#map:not(.mvm-touch) .mvm-sheet-tourrow:hover { background: #eaf0fa; }
/* Zeile + ▶ „Tour ab dieser Station starten“ (2026-10-04) */
#map .mvm-sheet-tourline { display: flex; gap: 6px; align-items: stretch; }
#map .mvm-sheet-tourline .mvm-sheet-tourrow { flex: 1; min-width: 0; width: auto; }
#map .mvm-sheet-tourstart {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  border: 0;
  border-radius: 12px;
  background: #587abc;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
}
#map:not(.mvm-touch) .mvm-sheet-tourstart:hover { background: #4a69a6; }
/* ▶ bei Touren außerhalb des Kontexts (2026-10-07): umrandet statt gefüllt, die gewählte Tour bleibt vorn */
#map .mvm-sheet-tourstart.mvm-sheet-tourstart-quiet { background: #ffffff; color: #587abc; box-shadow: inset 0 0 0 1px #c9d4ea; }
#map:not(.mvm-touch) .mvm-sheet-tourstart.mvm-sheet-tourstart-quiet:hover { background: #eaf0fa; }
#map .mvm-sheet-tourrow-more { display: none; }
#map .mvm-sheet-tours-all .mvm-sheet-tourrow-more { display: flex; }
#map .mvm-sheet-tourmore {
  align-self: flex-start;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: #587abc;
  font: 700 12.5px/1.2 'Quicksand', Helvetica, Arial, sans-serif;
  cursor: pointer;
}
@media (min-width: 768px) {
  #map .mvm-sheet-tours { margin-left: 18px; margin-right: 18px; }
}

/* Quellenhinweis statt ⓘ (2026-10-04): Zeile links unten in der Karte (Vollbild, Popup,
   Vollbild-Kartenseite); eingebettete Karten zeigen ihn als Bildunterschrift darunter */
#map .mvm-credit {
  margin: 0 0 4px 8px;
  padding: 2px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.78);
  color: #6b7385;
  font: 500 10.5px/1.45 'Quicksand', Helvetica, Arial, sans-serif;
  box-shadow: none;
}
#map .mvm-credit a, .mvm-map-credit a { white-space: nowrap; }   /* nur zwischen den Quellen umbrechen */
#map .mvm-credit a { color: inherit; text-decoration: none; }
@media (max-width: 600px) {
  #map .mvm-credit { margin-left: 6px; padding: 2px 6px; font-size: 10px; letter-spacing: -0.01em; }
}
#map:not(.mvm-touch) .mvm-credit a:hover { text-decoration: underline; }
#map.muvamo_inline_map:not(.mvm-fs):not(.modalMap) .mvm-credit,
#map[data-mvm-scrollpage]:not(.mvm-fs) .mvm-credit {
  display: none;
}
.mvm-map-credit {
  margin: 8px 6px 0;
  color: #8a8f9c;
  font: 500 11.5px/1.5 'Quicksand', Helvetica, Arial, sans-serif;
}
/* Kartenseite (Michael 2026-10-04: zu knapp am Vollbild-Knopf, der zur Hälfte unter der
   Karte herausragt): Desktop rechtsbündig + etwas tiefer, Handy zentriert mit mehr Luft */
.mvm-map-credit--page { margin: 40px 4px 0; text-align: right; }
.mvm-map-credit .mvm-nw { white-space: nowrap; }   /* „Relief © Mapterhorn“ nicht trennen */
@media (max-width: 767px) {
  .mvm-map-credit--page { margin-top: 46px; text-align: center; }
}
.mvm-map-credit a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(138, 143, 156, 0.6); }
.mvm-map-credit a:hover { color: #587abc; border-bottom-color: currentColor; }

/* „+ Quellen“ und Fenster „Kartenquellen“ (2026-10-04) */
#map .mvm-credit-more {
  padding: 0;
  border: 0;
  background: none;
  color: #587abc;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
#map .mvm-credit-pop {
  position: absolute;
  left: 8px;
  bottom: calc(100% + 6px);
  z-index: 10002;
  width: min(330px, calc(100vw - 32px));
  padding: 12px 14px 10px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(20, 30, 50, 0.25);
  color: #2f3b55;
  font: 500 12.5px/1.4 'Quicksand', Helvetica, Arial, sans-serif;
  pointer-events: auto;
}
#map .mvm-credit-pophead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#map .mvm-credit-pophead strong { font-size: 14px; }
#map .mvm-credit-popx { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #eef2fa; color: #3f5f9f; cursor: pointer; }
#map .mvm-credit-pop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
#map .mvm-credit-pop li { display: grid; gap: 1px; padding: 0; }
#map .mvm-credit-pop li a { color: #2f3b55; font-weight: 700; text-decoration: none; }
#map:not(.mvm-touch) .mvm-credit-pop li a:hover { color: #587abc; text-decoration: underline; }
#map .mvm-credit-pop li span { color: #7b849b; font-size: 11.5px; }

/* Punkte ohne Kategorie (Ratgeber-Seiten mit Google-Orten, z. B. Day trips from Salzburg):
   Standardfarbe statt durchsichtig - :where() = Spezifität 0, echte Kategorien gewinnen (2026-10-05) */
:where(#map .colorCat, .map_bottom_menu .colorCat) {
  --category-color: #587abc;
}

/* Stadt als Bezugspunkt auf einfachen Karten (addPlainCityRef, 2026-10-05): ohne Zähler */
#map .mvm-cityref .mvm-area-badge { display: none; }

/* Randhinweis beim Leisten-Hover auf einen Spot außerhalb des Bildes (2026-10-07):
   Zustandsfarbe Dunkelblau wie Hover/Auswahl, Pfeil zeigt zum Spot */
#map .mvm-edge-hint {
  position: absolute;
  z-index: 1150;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: #3d4a75;
  color: #ffffff;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(38, 50, 80, 0.3);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
#map .mvm-edge-hint.mvm-edge-on {
  opacity: 1;
  visibility: visible;
}
#map .mvm-edge-hint .mvm-edge-arrow {
  flex: none;
  font-size: 12px;
}
#map .mvm-edge-hint .mvm-edge-txt {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  #map .mvm-edge-hint { transition: none; }
}

/* Etikett „In der Nähe“ über der Leiste, solange die GPS-Nähe-Liste gilt (2026-10-07) */
#map .mvm-near-chip {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: #3d4a75;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(38, 50, 80, 0.2);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
#map .mvm-near-chip.mvm-near-on {
  opacity: 1;
  visibility: visible;
}
#map .mvm-near-chip i {
  color: #587abc;
  font-size: 11px;
}
#map.mvm-tourmode-on .mvm-near-chip {
  display: none;
}

/* Abschnitts-Karten in der GPS-Leiste: „In walking distance“ + „Top highlights“
   (barSepPlace, 2026-10-07). Schmale Karte in Leistenhöhe, nicht klickbar. */
#map .mvm-bar-sep {
  flex: 0 0 96px;
  width: 96px;
  margin-right: 15px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 16px rgba(38, 50, 80, 0.14);
  color: #3d4a75;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif;
  text-align: center;
  pointer-events: none;
}
/* Symbole der Abschnitts-Karten: Font Awesome (Fußgänger, Stern) in Muvamo-Blau */
#map .mvm-bar-sep i {
  color: #587abc;
  font-size: 17px;
}
#map .mvm-bar-sep strong {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
#map .mvm-bar-sep small {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #6b7590;
}
@media (min-width: 981px) and (max-width: 1400px) {
  #map .mvm-bar-sep { margin-right: 10px; }
}
@media (max-width: 980px) {
  #map .mvm-bar-sep {
    flex-basis: 72px;
    width: 72px;
    margin-right: 5px;
    padding: 4px 5px;
    border-radius: 10px;
  }
  #map .mvm-bar-sep strong { font-size: 10.5px; }
  #map .mvm-bar-sep small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #map .mvm-near-chip { transition: none; }
}

/* Animationen geglättet (Michael 2026-10-07): Leistenkarten-Zustände blenden über statt zu
   springen (Hover-Ring innen, Auswahl-Füllung), Tooltip erscheint weich, Randhinweis gleitet
   von Karte zu Karte. Gleiche Kurve wie Kamera/Leiste (cubic-bezier .4,0,.2,1). */
#map.mvm-ci .map_bottom_menu_marker {
  transition: box-shadow 0.18s cubic-bezier(.4, 0, .2, 1), background-color 0.22s cubic-bezier(.4, 0, .2, 1);
}
#map.mvm-ci .map_bottom_menu_marker .title {
  transition: color 0.22s cubic-bezier(.4, 0, .2, 1);
}
#map #marker-tooltip {
  animation: mvm-tip-in 0.14s cubic-bezier(.4, 0, .2, 1);
}
@keyframes mvm-tip-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
#map .mvm-edge-hint.mvm-edge-glide {
  transition: opacity 0.15s ease, left 0.22s cubic-bezier(.4, 0, .2, 1), top 0.22s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  #map.mvm-ci .map_bottom_menu_marker,
  #map.mvm-ci .map_bottom_menu_marker .title,
  #map .mvm-edge-hint.mvm-edge-glide { transition: none; }
  #map #marker-tooltip { animation: none; }
}

/* Leiste mit neuem Inhalt (barSwap, 2026-10-07): sofort weg, dann weich von leicht unten
   einblenden - statt hart an den Anfang zu springen */
#map .map_bottom_menu {
  transition: opacity 0.24s cubic-bezier(.4, 0, .2, 1), transform 0.24s cubic-bezier(.4, 0, .2, 1);
}
#map .map_bottom_menu.mvm-bar-swap {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  #map .map_bottom_menu { transition: none; }
}