/* Local demo map band (rounds 17 and 18, Michael 30.10.2026), includes/kartenband-demo.php. Remove with it.
   One blue (#587abc), tap targets 44 px, small text never blue; pills in the look of the quick filters of the map. */
.mvkb-band { padding: var(--mv-space-7) 0 !important; background: var(--mv-white); }
.mvkb-band .et_pb_row { padding: 0 !important; }
.mvkb-band .mvkb-h { margin: 0 0 var(--mv-space-4); padding: 0; }
.mvkb-map {
  position: relative; display: block; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; cursor: pointer;
  border-radius: var(--mv-radius-card); background: #eef1f4; -webkit-tap-highlight-color: transparent;
}
.mvkb-canvas, .mvkb-canvas.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.mvkb-canvas .maplibregl-canvas { cursor: pointer; }
.mvkb-map .maplibregl-ctrl-attrib { font-size: var(--mv-fs-1); }
.mvkb-hint {
  position: absolute; right: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: var(--mv-tap); border-radius: var(--mv-radius-round); background: var(--mv-white); color: #2f3b55; box-shadow: 0 3px 10px rgba(38, 50, 80, .18);
}
.mvkb-map:focus-visible { outline: 3px solid var(--mv-ink); outline-offset: 2px; }
.mvkb-map:hover .mvkb-hint { box-shadow: 0 3px 10px rgba(38, 50, 80, .28), inset 0 0 0 999px rgba(17, 17, 17, .06); }
.mvkb-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--mv-space-4); margin-top: var(--mv-space-4); }
.mvkb-chips { display: flex; flex-wrap: wrap; gap: var(--mv-space-2); min-width: 0; }
.mvkb-chip {
  display: inline-flex; align-items: center; gap: var(--mv-space-1); min-height: var(--mv-tap); padding: 0 var(--mv-space-3) 0 var(--mv-space-2); border: 0; border-radius: var(--mv-radius-pill);
  background: var(--mv-white); box-shadow: 0 3px 10px rgba(38, 50, 80, .18); color: #2f3b55;
  font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-size: var(--mv-fs-1); font-weight: var(--mv-fw-bold); line-height: 1; white-space: nowrap; cursor: pointer;
}
.mvkb-chip:hover { box-shadow: 0 3px 10px rgba(38, 50, 80, .28), inset 0 0 0 999px rgba(17, 17, 17, .06); }
.mvkb-chip:focus-visible, .mvkb-open:focus-visible, .mvkb-mini:focus-visible { outline: 3px solid var(--mv-ink); outline-offset: 2px; }
.mvkb-chip-ic {
  flex: none; width: 16px; height: 16px; background: var(--category-color, var(--mv-blue));
  -webkit-mask: var(--chip-icon) no-repeat center / contain; mask: var(--chip-icon) no-repeat center / contain;
}
.mvkb-open {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--mv-space-2); min-height: var(--mv-tap); padding: 0 var(--mv-space-4);
  border-radius: var(--mv-radius-m); background: var(--mv-blue); color: var(--mv-white) !important; font-size: var(--mv-fs-3); font-weight: var(--mv-fw-bold); line-height: 1.2; text-decoration: none !important;
}
.mvkb-open:hover { box-shadow: inset 0 0 0 999px rgba(17, 17, 17, .12); }
/* the bar button and the locator map */
.mvkb-barmap { cursor: pointer; }
.subheader a.mvkb-barmap-m, .et-db #et-boc .et-l .subheader a.mvkb-barmap-m {
  flex: 0 0 44px; width: 44px; min-width: 44px; height: var(--mv-tap); padding: 0 !important; display: flex; align-items: center; justify-content: center;
}
.subheader a.mvkb-barmap-m .subheaderLinkInner { display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; }
.subheader a.mvkb-barmap-m i { font-size: var(--mv-fs-3); margin: 0; }
.mvkb-mini { cursor: pointer; }
@media (max-width: 767px) {
  .mvkb-band { padding: var(--mv-space-6) 0 !important; }
  .mvkb-map { aspect-ratio: 4 / 3; }
  .mvkb-foot { flex-direction: column; align-items: stretch; }
  .mvkb-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: var(--mv-space-1) var(--mv-space-3) var(--mv-space-2); scrollbar-width: none; }
  .mvkb-chips::-webkit-scrollbar { display: none; }
  .mvkb-open { width: 100%; }
}

/* Round 18: the preview without controls (no map-type sign, no info sign); the attribution as a 12 px line below */
.mvkb-hint { display: none; }
.mvkb-map .maplibregl-ctrl-bottom-right, .mvkb-map .maplibregl-ctrl-bottom-left,
.mvkb-map .maplibregl-ctrl-top-right, .mvkb-map .maplibregl-ctrl-top-left { display: none !important; }
.mvkb-attr { margin: var(--mv-space-1) 0 0; padding: 0; font-size: var(--mv-fs-1); line-height: 1.4; color: #5f6673; }
.mvkb-attr:empty { display: none; }
.mvkb-attr a { color: inherit !important; text-decoration: underline; }
/* phone: flat preview (16:9) at the band position; desktop (sidebar beside the text): the card in the sidebar */
.mvkb-band--flat .mvkb-map { aspect-ratio: 16 / 9; }
.mvkb-band--flat .mvkb-foot { margin-top: var(--mv-space-3); }
.mvkb-side .mvkb-map--side { aspect-ratio: 1 / 1; border-radius: var(--mv-radius-m); }
.mvkb-open--full { display: flex; width: 100%; margin-top: var(--mv-space-3); font-size: var(--mv-fs-2); }
@media (min-width: 981px) { .mvkb-band--flat { display: none !important; } }
@media (max-width: 980px) { .mvkb-side-mod { display: none !important; } .mvkb-band--flat .mvkb-open { width: 100%; } }
/* guide overview with area map: button and pills under the area map */
.mvkb-foot--areas { margin-top: 0; min-width: 0; max-width: 100%; }
.mvkb-foot--areas .mvkb-chips { min-width: 0; max-width: 100%; }
#muvamo-areas.muvamo_region_v2 .muvamo_region_layout > .muvamo_region_frame { grid-column: 1; grid-row: 1; }
#muvamo-areas.muvamo_region_v2 .muvamo_region_layout > .mvkb-foot--areas { grid-column: 1; grid-row: 2; align-items: flex-start; }
#muvamo-areas.muvamo_region_v2 .muvamo_region_layout > .muvamo_region_cards { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 980px) {
  #muvamo-areas.muvamo_region_v2 .muvamo_region_layout > .muvamo_region_cards { grid-column: 1; grid-row: 3; }
  .mvkb-foot--areas .mvkb-chips { margin: 0; padding: var(--mv-space-1) 0 var(--mv-space-2); }
}

/* Round 20: compact sidebar cards (?kartenkarte=flach | zeile) */
.mvkb-side--flach, .mvkb-side--zeile { margin: 0 0 var(--mv-space-5); }
.mvkb-map--flach { aspect-ratio: 16 / 10; border-radius: var(--mv-radius-card); }
.mvkb-map--flach .mvkb-tag {
  position: absolute; left: 12px; top: 12px; z-index: 2; margin: 0; padding: var(--mv-space-2) var(--mv-space-3); max-width: calc(100% - 24px);
  border-radius: var(--mv-radius-pill); background: var(--mv-white); box-shadow: 0 2px 8px rgba(38, 50, 80, .16);
  color: #1f2533; font-size: var(--mv-fs-2); font-weight: var(--mv-fw-bold); line-height: 1.25; letter-spacing: 0;
}
.mvkb-map--flach .mvkb-pill {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: var(--mv-space-2);
  min-height: var(--mv-tap); padding: 0 var(--mv-space-4); border-radius: var(--mv-radius-pill); background: var(--mv-blue); color: var(--mv-white);
  font-size: var(--mv-fs-2); font-weight: var(--mv-fw-bold); line-height: 1; box-shadow: 0 4px 14px rgba(38, 50, 80, .28);
}
.mvkb-map--flach:hover .mvkb-pill { box-shadow: 0 4px 14px rgba(38, 50, 80, .28), inset 0 0 0 999px rgba(17, 17, 17, .12); }
.mvkb-side--zeile .mvkb-row {
  display: flex; align-items: center; gap: var(--mv-space-4); min-height: var(--mv-tap); padding: var(--mv-space-3); border-radius: var(--mv-radius-card); background: var(--mv-white);
  box-shadow: 0 2px 12px rgba(38, 50, 80, .10); color: #1f2533 !important; text-decoration: none !important;
}
.mvkb-side--zeile .mvkb-row:hover { box-shadow: 0 2px 12px rgba(38, 50, 80, .18); }
.mvkb-side--zeile .mvkb-row:focus-visible { outline: 3px solid var(--mv-ink); outline-offset: 2px; }
.mvkb-map--thumb { flex: 0 0 88px; width: 88px; height: 88px; aspect-ratio: auto; border-radius: var(--mv-radius-m); }
.mvkb-row-txt { display: flex; flex-direction: column; gap: var(--mv-space-1); min-width: 0; }
.mvkb-row-h { font-size: var(--mv-fs-3); font-weight: var(--mv-fw-bold); line-height: 1.25; color: #1f2533; }
.mvkb-row-sub { font-size: var(--mv-fs-2); line-height: var(--mv-lh-head); color: #3d4352; }
.mvkb-side--zeile .mvkb-attr { margin-top: var(--mv-space-1); }
/* the label is an h2: the theme heading style (blue, large) must not win */
.mvkb-side .mvkb-map--flach h2.mvkb-tag, .et-db #et-boc .et-l .mvkb-side .mvkb-map--flach h2.mvkb-tag {
  color: #1f2533 !important; font-size: var(--mv-fs-2) !important; font-weight: var(--mv-fw-bold) !important; line-height: 1.25 !important; padding: var(--mv-space-2) var(--mv-space-3) !important; margin: 0 !important;
}

/* Round 21: the row above "Plan your visit" (?kartenkarte=zeilelinks): same corners as the plan block, 16 px above it;
   above it only 6 px, the paragraph before brings 18 px of its own (Michael, 11.11.2026: the gap above was twice the gap below) */
.mvkb-side--links { margin: var(--mv-space-1) 0 var(--mv-space-4); }
.mvkb-side--links + .mvm-plan--place { margin-top: 0 !important; }
.mvkb-side--links .mvkb-row { border-radius: var(--mv-radius-card); box-shadow: none; background: var(--mv-linen, #f4f1ec); }
.mvkb-side--links .mvkb-row:hover { box-shadow: inset 0 0 0 999px rgba(17, 17, 17, .04); }

/* Round 22: the row on list pages, at the end of the intro */
.mvkb-side--liste { margin: var(--mv-space-5) 0 0; }
/* the map icon takes room in the phone bar: a long place label stays on one line instead of breaking the bar */
@media (max-width: 1100px) {
  .subheader:has(.mvkb-barmap-m) .subheaderLinksOuter, .subheader:has(.mvkb-barmap-m) a.subheaderMobile { min-width: 0; }
  .subheader:has(.mvkb-barmap-m) .subheaderMobileInner { max-width: 100%; min-width: 0; }
  .subheader:has(.mvkb-barmap-m) .subheaderMobileInnerLabel { white-space: nowrap; min-width: 0; }
}