/* Animation irrelevant für das Scrolling */
#gastro-art span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

/* === Haupt-Container für die Karten === */
.restaurants-line {
  display: flex;
  gap: 2rem;
  padding-inline: 1rem;
  overflow-x: scroll;
  scroll-snap-type: x mandatory; /* Mobile bleibt native snap */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;

  /* Nur End-Spacer (wird per JS auf Mobile angepasst) */
  --pad-inline-end: 1rem;

  cursor: grab;
}

/* Scrollbar (optional) */
.restaurants-line::-webkit-scrollbar {
  height: 6px;
  background: transparent;
}
.restaurants-line::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 999px;
}

/* Karten-Items */
.restaurants-line > * {
  flex: 0 0 auto;
  scroll-snap-align: start; /* Desktop: bündig (wird per JS auf Desktop deaktiviert) */
}

/* Spacer am Ende, damit letzte Karte sauber zentrierbar ist */
.restaurants-line::after {
  content: "";
  flex: 0 0 var(--pad-inline-end);
}

/* Drag state */
.restaurants-line.is-dragging {
  cursor: grabbing;
}

/* Während Drag: keine Link-Clicks + kein Select */
.restaurants-line.is-dragging,
.restaurants-line.is-dragging * {
  user-select: none;
}
.restaurants-line.is-dragging a {
  pointer-events: none;
}

/* Native Bild-Drag aus */
.restaurants-line img {
  -webkit-user-drag: none;
  user-select: none;
}

/* === Mobile Styles (< 768px) === */
@media (max-width: 768px) {
  /* Standard: center snap */
  .restaurants-line > * {
    scroll-snap-align: center;
  }

  /* Aber: erstes Item NIE zentrieren */
  .restaurants-line > :first-child {
    scroll-snap-align: start;
  }

  /* Wie davor */
  .restaurants-line {
    scroll-padding-left: 1rem;
  }
}