/*
 * carousel.css — Stile des gekrümmten 3D-Karussells (Variante A)
 * Alles ist unter .carousel gekapselt; die Seite liefert nur den Platz im Hero.
 *
 * Kartenmaße: carousel.js setzt --card-w / --card-h / --band-h in px (Basiseinheit
 * u = min(100vw, 137vh), siehe SPEC §2). Die Werte hier sind der Fallback ohne JS.
 */

.carousel {
  /* Fallback-Maße (werden von carousel.js per Inline-Style überschrieben) */
  --unit: min(100vw, 137vh);
  --card-w: calc(var(--unit) * 0.2014);
  --card-h: calc(var(--card-w) * 1.2);
  --band-h: calc(var(--card-h) * 1.27);
  --carousel-radius: var(--radius-card, 6px);

  position: relative;
  width: 100%;
  height: var(--band-h);
  /* Horizontal abschneiden, vertikal offen lassen (hohe Randkarten), kein Scroll-Container */
  overflow-x: clip;
  overflow-y: visible;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.carousel.is-dragging {
  cursor: grabbing;
}

.carousel:focus-visible {
  outline: 2px solid var(--color-text, #111);
  outline-offset: -2px;
}

/* Die Spur ist nur ein Bezugsrahmen: Karten werden absolut um die Mitte positioniert */
.carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y; /* vertikales Scrollen auf Touch-Geräten bleibt möglich */
}

/* Karte: Mitte auf der Viewport-Mitte; carousel.js verschiebt/dreht per transform */
.carousel__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2);
  transform-origin: 50% 50%;
  transform-style: flat;
  backface-visibility: hidden;
  will-change: transform;
}

.carousel__card {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--carousel-radius);
  overflow: hidden;
  background: var(--color-line, #e6e6e6);
  cursor: inherit;
  -webkit-user-drag: none;
  outline-offset: 3px;
}

.carousel__card:focus-visible {
  outline: 3px solid var(--color-text, #111);
}

.carousel__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* Drag/Klick landen immer auf dem Link */
  -webkit-user-drag: none;
  user-select: none;
}

/* Ohne JS: die Karten würden alle übereinander liegen → einfache Reihe zeigen */
.no-js .carousel__track {
  display: flex;
  justify-content: center;
  gap: calc(var(--card-w) * 0.035);
}

.no-js .carousel__item {
  position: static;
  margin: 0;
  flex: 0 0 auto;
}