/* Mobile Wischreihen (2026-10-01): Karten, die am Desktop nebeneinander stehen, auf dem Handy seitlich wischen
   statt stapeln. Reihe bekommt class="m-swipe" + data-m-swipe (Punkte aus js/m-swipe.js).
   Nur unter 761 px aktiv, Desktop bleibt unverändert. Pro Seite anpassbar:
   --m-card (Kartenbreite), --m-gap, --m-bleed (Überstand bis zum Kachelrand), --m-dot (Punktfarbe). */
@media (max-width: 760px) {
  .m-swipe {
    display: flex !important; flex-wrap: nowrap !important; gap: max(var(--m-gap, 14px), var(--m-bleed, 0px)) !important;
    grid-template-columns: none !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--m-bleed, 0px)) !important;
    padding-inline: var(--m-bleed, 0px) !important;
    scroll-padding-inline: var(--m-bleed, 0px);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * { flex: 0 0 var(--m-card, 82%) !important; max-width: none !important; min-width: 0; scroll-snap-align: start; }
}
.m-swipe-dots { display: flex; justify-content: center; margin: 6px auto 0; max-width: 100%; }
.m-swipe-dots[hidden] { display: none; }
.m-swipe-dots button {
  flex: 0 1 44px; min-width: 18px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.m-swipe-dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--m-dot, #16336a); opacity: .25; transition: opacity .2s ease, transform .2s ease;
}
.m-swipe-dots button[aria-current="true"]::before { opacity: 1; transform: scale(1.3); }
.m-swipe-dots button:focus-visible { outline: 2px solid var(--m-dot, #16336a); outline-offset: -8px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .m-swipe-dots button::before { transition: none; } }