/* =========================================================================
   Wat klanten over ons zeggen — kaartenstapel (home, 29 okt 2026)
   Citaten liggen als kaartjes op een stapel; het voorste schuift weg, het volgende komt naar voren.
   Alleen transform/opacity; vaste hoogte (alle kaarten in één rastercel), dus geen verspringen.
   ========================================================================= */
.stemmen.stapel-sectie .sectiekop { margin-bottom: 0; }
.stapel { display: grid; grid-template-columns: .8fr 1.2fr; column-gap: clamp(32px, 6vw, 90px); }
.stapel-links { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.stapel-besturing { display: flex; align-items: center; gap: 20px; }
.stapel-teller { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--inkt); }
.stapel-balk { position: relative; flex: 1; height: 2px; background: var(--lijn); overflow: hidden; }
.stapel-balk i { position: absolute; inset: 0; background: var(--inkt); transform: scaleX(0); transform-origin: 0 50%; }
.stapel-balk i.loopt { animation: stapel-vul var(--stapel-duur, 5s) linear forwards; }
.stapel.pauze .stapel-balk i.loopt { animation-play-state: paused; }
@keyframes stapel-vul { to { transform: scaleX(1); } }
.stapel-stap { display: flex; gap: 8px; }
.stapel-pijl { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--inkt); border-radius: 50%; background: transparent; color: var(--inkt); cursor: pointer; }
.stapel-pijl svg { width: 18px; height: 18px; }
@media (hover: hover) { .stapel-pijl:hover { background: var(--inkt); color: var(--wit); } }
.stapel-pijl:focus-visible, .stapel a:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }

.stapel-kaarten { display: grid; grid-template-rows: 1fr; justify-items: start; padding-top: 48px; padding-right: 56px; touch-action: pan-y; }
.stapel-kaart { grid-area: 1 / 1; width: 100%; max-width: 560px; min-height: 300px; margin: 0; background: var(--wit); border-radius: var(--hoek);
  padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 1px 0 var(--lijn), 0 20px 40px -30px rgba(30, 30, 30, .4);
  transform: translate(calc(var(--p, 0) * 18px), calc(var(--p, 0) * -14px)) scale(calc(1 - var(--p, 0) * .03)); transform-origin: 100% 0;
  opacity: calc(1 - var(--p, 0) * .2); transition: transform .8s var(--ease), opacity .8s var(--ease); }
.stapel-kaart.achter { opacity: 0; }
.stapel-kaart > * { opacity: 0; transition: opacity .3s ease; }
.stapel-kaart.aan > * { opacity: 1; transition: opacity .6s var(--ease) .3s; }
.stapel-kaart.weg { transform: translate(-7%, 10px) rotate(-2deg); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.stapel-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.stapel-nr { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--zacht); }
.stapel-logo { display: block; width: 96px; height: auto; margin: -6px -6px 0 0; }
.stapel-kaart blockquote { margin: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--inkt); text-wrap: pretty; }
.stapel-kaart figcaption { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--lijn); min-height: 57px; display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--grijs); }
.stapel-kaart figcaption a { color: var(--inkt); }
.stapel-portret { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--wit); }
.stapel-portret img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.5); transform-origin: 50% 18%; }

@media (max-width: 860px) {
  .stapel { grid-template-columns: 1fr; row-gap: 20px; }
  .stapel-links { display: contents; }
  .stapel-besturing { order: 3; margin-top: 8px; }
  .stapel-kaarten { padding-right: 40px; }
  .stapel-kaart { max-width: none; min-height: 0; transform: translate(calc(var(--p, 0) * 12px), calc(var(--p, 0) * -12px)) scale(calc(1 - var(--p, 0) * .03)); }
}
@media (max-width: 560px) { .stapel-logo { width: 76px; } }
@media (prefers-reduced-motion: reduce) {
  .stapel *, .stapel-kaart { transition: none !important; animation: none !important; }
}
/* Legal 500-logo is staand: even hoog als het Chambers-logo (96 × 227/240 ≈ 91px) */
.stapel-logo.stapel-logo-legal { flex: none; width: 75px; margin: -4px 0 0 0; }
@media (max-width: 560px) { .stapel-logo.stapel-logo-legal { width: 62px; } }
/* knop "naar boven" wijkt zolang hij over de pijlen van de stapel zou vallen (mobiel; zie citaten.js) */
.naarboven.wijkt { opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; }