/* =========================================
   ROED · V2 Native Horizontal Scroll (Core)
   – Wrapper scrollt nativ (overflow-x:auto)
   – Track bleibt Flex / max-content
========================================= */

.roed-drag-me-to-death {
  position: relative;
  overflow-x: auto;         /* <-- native scroll */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  touch-action: pan-x pan-y; /* native gestures */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;

  /* Optional: nicer feel */
  overscroll-behavior-x: contain;
}

.roed-drag-me-to-death.is-dragging {
  cursor: grabbing;
}

.roed-drag-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(1.5rem, 3vw, 3rem);
  width: max-content;
  padding-right: clamp(1.5rem, 3vw, 3rem);
}

.roed-drag-item {
  flex: 0 0 auto;
  width: clamp(280px, 45vw, 620px);
}

/* Optional: Scrollbar verstecken (WebKit + Firefox) */
.roed-drag-me-to-death::-webkit-scrollbar { height: 0; }
.roed-drag-me-to-death { scrollbar-width: none; }

/* -----------------------------------------
   Mobile: vertikal stapeln (dein bewährter Block)
----------------------------------------- */

@media (max-width: 768px) {

  .roed-drag-me-to-death {
    overflow: visible !important;
    cursor: default;
  }

  .roed-drag-track {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  .roed-drag-item {
    width: 100%;
    margin-bottom: 2rem;
  }

  .roed-drag-me-to-death.is-dragging {
    cursor: default;
  }
}