/*
 * Ebenen-Karussell (nach der Vorlage „Layer Carousel“).
 * Alle Maße in einer Karte sind Anteile von --lc-card (Kartenbreite in cqw) – Rahmen, Schrift, Knopf
 * und Radien wachsen gemeinsam. Die Bildschleife schreibt nur transform, filter und z-index.
 */
.lc {
  --lc-card: 28.6cqw; --lc-ratio: 1.35; --lc-radius: .06; --lc-image-radius: .04;
  --lc-bg: #eef6f8; --lc-surface: #fff; --lc-title: #1f2a30; --lc-button: #007E91; --lc-button-text: #fff;
  --lc-arrow: #fff; --lc-arrow-icon: #007E91; --lc-track: rgba(0, 126, 145, .15); --lc-fill: #007E91; --lc-shadow: rgba(0, 40, 50, .1);
  position: relative;
  width: 100%;
  aspect-ratio: 2.1;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 28px;
  background: var(--lc-bg);
  outline: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.lc.is-dragging { cursor: grabbing; }
.lc:focus-visible { box-shadow: inset 0 0 0 2px var(--lc-fill); }
.lc__stage { position: absolute; inset: 0; }
.lc__card { position: absolute; left: 50%; top: 47%; width: var(--lc-card); aspect-ratio: 1 / var(--lc-ratio); will-change: transform, filter; cursor: pointer; }
.lc__inner {
  display: flex; flex-direction: column; gap: calc(var(--lc-card) * .04); width: 100%; height: 100%;
  padding: calc(var(--lc-card) * .05) calc(var(--lc-card) * .05) calc(var(--lc-card) * .11);
  border-radius: calc(var(--lc-card) * var(--lc-radius)); background: var(--lc-surface);
  box-shadow: 0 0 calc(var(--lc-card) * .08) 1px var(--lc-shadow);
}
.lc__title { font-size: max(11px, calc(var(--lc-card) * .045)); font-weight: 800; letter-spacing: .04em; line-height: 1.25; text-align: center; color: var(--lc-title); overflow-wrap: break-word; }
.lc__media { position: relative; flex: 1; min-height: 0; border-radius: calc(var(--lc-card) * var(--lc-image-radius)); }
.lc__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
/* Die Pille sitzt halb auf dem Bild, halb auf der Karte – das verbindet die beiden Flächen. */
.lc__button {
  position: absolute; left: 50%; bottom: calc(var(--lc-card) * -.05); translate: -50% 0;
  padding: calc(var(--lc-card) * .035) calc(var(--lc-card) * .08); border-radius: 999px; background: var(--lc-button);
  color: var(--lc-button-text) !important; font-size: max(11px, calc(var(--lc-card) * .038)); font-weight: 700; line-height: 1; white-space: nowrap;
  text-decoration: none !important; pointer-events: none; transition: scale .2s ease, box-shadow .2s ease;
}
.lc__card.is-active .lc__button { pointer-events: auto; }
.lc__card.is-active .lc__button:hover { scale: 1.05; box-shadow: 0 4px 12px rgb(0 0 0 / .15); }
.lc__arrow {
  position: absolute; top: 47%; z-index: 200; display: grid; place-items: center; width: 46px; height: 46px; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: var(--lc-arrow) !important; color: var(--lc-arrow-icon) !important;
  translate: 0 -50%; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 40, 50, .12); transition: scale .2s ease;
}
.lc__arrow--prev { left: 16px; } .lc__arrow--next { right: 16px; }
.lc__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lc__arrow:hover { scale: 1.08; }
.lc__progress { position: absolute; left: 50%; bottom: 18px; z-index: 200; width: var(--lc-card); height: 3px; overflow: hidden; border-radius: 2px; background: var(--lc-track); translate: -50% 0; pointer-events: none; }
.lc__progress-fill { width: 100%; height: 100%; background: var(--lc-fill); transform: scaleX(0); transform-origin: left center; }
@media (max-width: 640px) {
  .lc { aspect-ratio: .95; border-radius: 22px; }
  .lc__arrow { width: 38px; height: 38px; } .lc__arrow--prev { left: 8px; } .lc__arrow--next { right: 8px; }
}