:root {
  --primary: #0d6efd;
}

.hero-section {
  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)),
              url("https://lh3.googleusercontent.com/aida-public/AB6AXuCSBS4wSOZkhfe1W0PGUgh3muKE4J1YxYmAZ4VZBuLG5LDn-8pJ7dcRYWGlC_pQcROZefZYlh6PCF70mrF-Sa0EgW_FLx9lA79-v7TgR_x0hhGxsexQPBHWxPU9oaJDjoTEWypC9uVqcVFNA_tma_9uaTaLzV9whOY7i39-g__aunlhm8EqGxvGrRi6Qp77SWHeSbRVywpH-Lz_AE-591vdwAy3y9jBzPxP6rUJT-nAAyDU7c6rNw-BxDkj6353oMk86aMib86_BjzR")
              center/cover no-repeat;
  height: 70vh;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.text-primary {
  color: var(--primary) !important;
}

section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

html {
  scroll-behavior: smooth;
}

/* Hover-Effekt für Feature-Karten */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}

/* Horizontales Scrollen für mobile */
.routes-scroll {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}

.routes-scroll::-webkit-scrollbar {
  height: 8px;
}

.routes-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.route-card {
  scroll-snap-align: start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bike-pill {
  font-size: 0.95rem;          /* etwas größer */
  font-weight: 400;            /* weniger fett (normal statt bold) */
  padding: 0.4em 0.7em;        /* größere Fläche */
  border-radius: 50rem;        /* schöner runder Look */
  background-color: #f8f9fa;   /* leicht hellgrau */
  color: #333;                 /* etwas dunklerer Text für Kontrast */
}