/* 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; /* Abstand zwischen Karten */
  padding-inline: 1rem; /* 1rem links & rechts */
  overflow-x: scroll; /* horizontales Scrolling */
  scroll-snap-type: x mandatory; /* Snap aktiv */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  --pad-inline-end: 1rem; /* für Spacer am Ende */
}

/* 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 */
}

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

/* === Mobile: Karte immer zentriert snappen === */
@media (max-width: 768px) {
  .restaurants-line > * {
    scroll-snap-align: center;
    
  }
  
  .restaurants-line {
    scroll-padding-left: 1rem; /* gleich wie padding-inline-start */
  }
}