/* Card row of the city overview pages (Michael, 2026-11-05/06, from the approved demo ?karten=ideal; markup
   includes/kartenreihe.php, script assets/muvamo-kartenreihe.js). Applies only to .mvk-block / .mvk-row, so the
   Swiper sliders (header slider, Did you know, photo rows, photographer page, Malta, spots, routes) stay untouched.
   One look on every screen: photo 16:9 with rounded corners and the photo arrows, no tag band, title blue, grey line,
   blue end card, native scroll row with snap, no loop. Phones: one card at 78 % with the next one peeking, no row
   buttons, the heading is the link. Desktop: two cards (three from 1450 px), link and round buttons beside the heading.
   The row runs over the full band (50 px from the window edge, 28 px up to 980 px); Where to stay stays in the page column. */

.mvk-block { --mvk-gap: 24px; --mvk-edge: 50px; }
@media (max-width: 980px) { .mvk-block { --mvk-edge: 28px; } }

/* heading row */
.mvk-block > .mvk-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mv-space-4); margin: 0 var(--mvk-edge) 24px; }
.mvk-block--in > .mvk-head { margin-left: 0; margin-right: 0; }
.mvk-block .mvk-head .mvk-h { margin: 0; padding-bottom: 0; }
.mvk-hlink { color: inherit !important; text-decoration: none !important; }
.mvk-nw { white-space: nowrap; }
.mvk-hchev { display: none; width: .78em; height: .78em; margin-left: .14em; vertical-align: -.06em; }
.mvk-tools { display: flex; align-items: center; gap: var(--mv-space-3); flex: none; }
.mvk-all { display: inline-flex; align-items: center; gap: var(--mv-space-1); font-weight: var(--mv-fw-semi); font-size: var(--mv-fs-2); color: var(--mv-blue, #5774c3) !important; text-decoration: none !important; margin-right: var(--mv-space-2); white-space: nowrap; }
.mvk-all span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--mv-dur-fast); }
.mvk-all:hover span, .mvk-all:focus-visible span { text-decoration-color: currentColor; }
.mvk-all svg { width: 16px; height: 16px; flex: none; }
.mvk-btn {
  width: 44px; height: var(--mv-tap); border-radius: var(--mv-radius-round); border: 0; background: var(--mv-blue, #5774c3); color: var(--mv-white);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background-color var(--mv-dur-fast), color var(--mv-dur-fast);
}
.mvk-btn:hover:not([aria-disabled="true"]) { background: var(--mv-blue-deep, #435f95); color: var(--mv-white); }
.mvk-btn:focus-visible { outline: var(--mv-border-strong) solid var(--mv-blue, #5774c3); outline-offset: 2px; }
.mvk-btn[aria-disabled="true"] { background: #f0f0f0; color: #b8b8b8; cursor: default; }

/* the row */
.mvk-row { position: relative; margin: 0 var(--mvk-edge); }
.mvk-block--in .mvk-row { margin: 0; }
.mvk-row > .mvk-track {
  display: flex; align-items: flex-start; gap: var(--mvk-gap);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.mvk-row > .mvk-track::-webkit-scrollbar { display: none; }
.mvk-row > .mvk-track > .muvamo_carousel_item,
.mvk-row > .mvk-track > .mvk-end {
  flex: 0 0 calc((100% - var(--mvk-gap)) / 2); width: calc((100% - var(--mvk-gap)) / 2); margin: 0; scroll-snap-align: start; min-width: 0;
}
@media (min-width: 1450px) {
  .mvk-row > .mvk-track > .muvamo_carousel_item,
  .mvk-row > .mvk-track > .mvk-end { flex-basis: calc((100% - 2 * var(--mvk-gap)) / 3); width: calc((100% - 2 * var(--mvk-gap)) / 3); }
}

/* the card */
.mvk-row .muvamo_carousel_item { background: transparent; position: relative; }
.mvk-row .muvamo_carousel_item_image { display: block; position: relative; border-radius: var(--mv-radius-m); overflow: hidden; }
.mvk-row .muvamo_carousel_item .muvamo_carousel_item_text_content { display: block; padding: 0; background: transparent; }
.mvk-row.muvamo-carousel-outer .muvamo_carousel_item .muvamo_carousel_header { margin: var(--mv-space-3) 0 var(--mv-space-1); color: var(--mv-blue); font-size: 20px; font-weight: var(--mv-fw-bold); line-height: var(--mv-lh-head); }
.mvk-row.hotelslider .muvamo_carousel_header::after { content: none; }
.mvk-meta { font-size: var(--mv-fs-2); line-height: 1.4; color: #6b6b6b; }
.mvk-row.muvamo-carousel-outer .muvamo_carousel_item .muvamo_carousel_item_excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: var(--mv-space-1); font-size: var(--mv-fs-2); line-height: var(--mv-lh-box); color: var(--mv-ink);
}
/* photo arrows as round buttons in the photo */
.mvk-row.muvamo-carousel-outer .muvamo_carousel_item .muvamo-map-slider-button {
  display: flex; position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: var(--mv-radius-round);
  background: rgba(255, 255, 255, .85); color: var(--mv-ink); font-size: var(--mv-fs-1); box-shadow: none;
}
.mvk-row.muvamo-carousel-outer .muvamo_carousel_item .muvamo-map-slider-button:hover { background: var(--mv-white); color: var(--mv-blue); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.mvk-row .muvamo-map-slider-left { left: 10px; right: auto; }
.mvk-row .muvamo-map-slider-right { right: 10px; left: auto; }

/* end card */
.mvk-end {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mv-space-3);
  aspect-ratio: 16 / 9; align-self: flex-start; box-sizing: border-box; padding: var(--mv-space-4); border-radius: var(--mv-radius-m);
  background: var(--mv-blue, #5774c3); color: var(--mv-white) !important; font-weight: var(--mv-fw-bold); font-size: var(--mv-fs-3); line-height: 1.25; text-decoration: none !important;
}
.mvk-end:hover { filter: brightness(1.06); }
.mvk-end svg { flex: none; }

/* Where to stay: space under the row before the boxes "Our recommendations" and Expedia */
.mvk-block--in { margin-bottom: 40px; }

@media (max-width: 767px) {
  .mvk-block { --mvk-gap: 12px; }
  .mvk-block > .mvk-head { margin: 0 3.5vw var(--mv-space-4); }
  .mvk-block--in > .mvk-head { margin-left: 0; margin-right: 0; }
  .mvk-head .mvk-tools { display: none; }
  .mvk-hchev { display: inline-block; }
  .mvk-row { margin: 0; }
  .mvk-row > .mvk-track { scroll-padding-inline: 3.5vw; padding: 0 3.5vw var(--mv-space-1); }  /* the inset of the page column (93 %) */
  .mvk-block--in .mvk-row > .mvk-track { margin: 0 -3.5vw; }
  .mvk-row > .mvk-track > .muvamo_carousel_item,
  .mvk-row > .mvk-track > .mvk-end { flex-basis: 78%; width: 78%; }
  .mvk-row.muvamo-carousel-outer .muvamo_carousel_item .muvamo_carousel_header { margin-top: var(--mv-space-2); font-size: var(--mv-fs-2); font-weight: var(--mv-fw-bold); color: var(--mv-ink); }  /* Ausnahme Slider-Karten (muvamo-design, Michael 30.10.2026): Handy 15 px fett in Tinte */
  .mvk-meta { font-size: var(--mv-fs-2); }
  .mvk-end { font-size: var(--mv-fs-3); padding: var(--mv-space-4); }
  .mvk-row.muvamo-carousel-outer .muvamo_carousel_item .muvamo-map-slider-button { width: 32px; height: 32px; font-size: var(--mv-fs-1); }
  .mvk-row .muvamo-map-slider-left { left: 8px; }
  .mvk-row .muvamo-map-slider-right { right: 8px; }
  .mvk-row.muvamo-carousel-outer .muvamo_carousel_item .muvamo_carousel_item_excerpt { display: none; }
  .mvk-block--in { margin-bottom: var(--mv-space-6); }
}

/* lists (stories, events; Michael 2026-11-06, from the demo ?karten=ideal): the heading is the link with the chevron on
   phones only, at the end of the list a small right-aligned text link with an arrow, like the link of the card rows */
.mvk-listlink { display: flex; width: fit-content; margin: var(--mv-space-4) 0 0 auto; align-items: center; gap: var(--mv-space-1); font-weight: var(--mv-fw-semi); font-size: var(--mv-fs-2); color: var(--mv-blue, #5774c3) !important; text-decoration: none !important; }
.mvk-listlink span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--mv-dur-fast); }
.mvk-listlink:hover span, .mvk-listlink:focus-visible span { text-decoration-color: currentColor; }
.mvk-listlink svg { width: 16px; height: 16px; flex: none; }
.muvamo-related-posts > .mvk-listlink { margin-top: var(--mv-space-5); }