/* ============================================================
   KARTEN-KARUSSELL „Einblicke“ (nur index-liquid-2.html)
   Vordere Karte groß, Nachbarn gekippt dahinter – Stil wie bencho.dev „Carousel“.
   Die Lage jeder Karte setzt js/carousel.js über CSS-Variablen.
   ============================================================ */
.peek{ max-width: var(--container); margin: 0 auto; padding: 120px 24px 40px; overflow-x: clip; }   /* Nachbarkarten dürfen nicht seitlich überstehen */
.peek .section-head{ margin-bottom: 24px; }

.stack{
  --card-w: clamp(210px, 25vw, 300px);
  position: relative; height: calc(var(--card-w) * 4 / 3 + 70px);
  perspective: 1400px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  outline: none; cursor: grab;
}
.stack.is-dragging{ cursor: grabbing; }
.stack:focus-visible{ outline: 2px solid var(--olive-light); outline-offset: 8px; border-radius: var(--radius-l); }

.stack__card{
  --x: 0px; --s: 1; --ry: 0deg; --rz: 0deg; --b: 1; --o: 1; --tx: 0deg; --ty: 0deg;
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: var(--card-w); aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.35);
  transform: translate(-50%, -50%) translateX(var(--x)) scale(var(--s)) rotateY(calc(var(--ry) + var(--ty))) rotateX(var(--tx)) rotateZ(var(--rz));
  filter: brightness(var(--b)); opacity: var(--o);
  transition: transform .8s var(--ease-out), filter .6s var(--ease-out), opacity .6s var(--ease-out);
  will-change: transform;
}
.stack.is-dragging .stack__card{ transition-duration: .25s; }
.stack__card img{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* Lichtkante + leichter Glanz wie bei Glas */
.stack__card::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.16), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.stack__card.is-side{ cursor: pointer; }
.stack__tag{
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  padding: 7px 13px; border-radius: 100px; font-size: .78rem; font-weight: 700; color: #fff;
  background: rgba(10,11,8,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-out);
}
.stack__card.is-front .stack__tag{ opacity: 1; transform: none; transition-delay: .25s; }

.peek__bar{ display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.peek__btn{
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--ink); border: 1px solid var(--border);
  transition: transform .3s var(--ease-out), border-color .3s;
}
.peek__btn:hover{ transform: translateY(-2px); border-color: var(--border-strong); }
.peek__btn svg{ width: 18px; height: 18px; }
.peek__dots{ display: flex; gap: 8px; }
.peek__dot{
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--border-strong); transition: width .4s var(--ease-out), background .3s;
}
.peek__dot[aria-current="true"]{ width: 26px; background: var(--olive-light); }
.peek__caption{ text-align: center; margin-top: 18px; color: var(--ink-dim); font-size: .98rem; min-height: 1.6em; }

@media (max-width: 640px){
  .peek{ padding-top: 90px; }
  .stack{ --card-w: min(62vw, 250px); }
}
@media (prefers-reduced-motion: reduce){
  .stack__card{ transition-duration: .01s; }
}