/* ====== Karussell-Basis (wird per JS auf .courses-wrap angewendet) ====== */

.courses-wrap.is-carousel {
  --gap: 2rem;          /* Abstand zwischen Karten */
  --visible: 3;         /* Default: Desktop = 3 Karten sichtbar */
}

img.course-thumb {
    border-radius: var(--lm-radius-lg)
}

.courses-wrap {
  position: relative;
}

.courses-wrap.is-carousel .course-grid {
  display: block;          /* Grid aus */
}

.courses-wrap.is-carousel .course-track {
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform .35s ease;
}

.courses-wrap.is-carousel .course-viewport {
  overflow: hidden;
  width: 100%;
}

.courses-wrap.is-carousel .course-card {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  max-width: none; /* überschreibt evtl. alte max-width */
}

/* Pfeile */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  border: none;
  background: #111;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  cursor: pointer;
  opacity: .9;
}
.carousel-btn:focus { outline: 2px solid #fff; outline-offset: 2px; }
.carousel-btn.prev { left: -6px; }
.carousel-btn.next { right: -6px; }

/* Standard Grid wie gehabt */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Karten-Styles aus Deiner Vorlage (belassen) */
.course-card { background:#fff; border-radius:var(--lm-radius-lg); overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.1); transition:transform .2s ease; width:100%; max-width:100%; }
.course-card:hover { transform: scale(1.01); }
.course-card a { color: inherit; text-decoration: none; display: block; }
.course-info { padding: 1rem; }
.course-info h3 { margin: .5rem 0; font-size: 1.1rem; }
.progress-bar { background:#e4e4e4; height:6px; border-radius:3px; margin:.5rem 0; overflow:hidden; }
.progress { background:#0073aa; height:100%; }
.course-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

@media (max-width: 1279px) {        /* Tablet */
  .courses-wrap.is-carousel { --visible: 2; }
}
@media (max-width: 639px) {         /* Phone */
  .courses-wrap.is-carousel { --visible: 1; }
}