/* Gegenereerd door maak_fotoband.py uit fotoband-oranjelift-bron.css. Niet met de hand wijzigen. */


.klantfotos{position:relative;isolation:isolate;background:#fff;border-top:1px solid #dfe5f3;border-bottom:1px solid #dfe5f3;padding:2.25rem 0 2rem;margin:2.5rem 0;overflow:hidden}
.klantfotos .kf-noot{max-width:1200px;margin:0 auto 1rem;padding:0 1.5rem;text-align:center;font-size:.9375rem;color:#58627b}
.klantfotos .section-header{position:relative;margin-bottom:1rem;padding:0 1.5rem}
.kf-score{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:1rem}
.kf-g{flex:none}
.kf-cijfer{font-size:2.75rem;font-weight:800;line-height:1;color:#142993;letter-spacing:-.02em}
.kf-grote-sterren{font-size:1.75rem;line-height:1;color:#f5b54a;letter-spacing:2px}
.kf-aantal-wrap{font-size:1.0625rem;color:#4b5563}
.kf-aantal-wrap strong{color:#142993;font-weight:800}
.klantfotos .section-header h2{font-size:clamp(1.5rem,4vw + .25rem,2.125rem)}
.klantfotos .section-header .kf-belofte{max-width:680px;font-size:1.0625rem;color:#374151;line-height:1.6}
.klantfotos .section-header .kf-noot{margin-top:.75rem;font-size:.875rem;color:#6b7280}
.kf-sterren{color:#f5b54a;letter-spacing:1px}

/* de band: een echte scrollbare rij met snap, zodat vegen op een telefoon precies aanvoelt zoals overal.
   Het JavaScript zet alleen de schaal per kaart; zonder JavaScript blijft het een gewone fotorij. */
.kf-baan{position:relative;--kw:250px;--ov:0.11}
.kf-band{display:flex;align-items:center;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
  padding:14px calc(50% - (var(--kw) / 2)) 18px;height:calc(var(--kw) * 1.86);cursor:grab}
.kf-band::-webkit-scrollbar{display:none}
.kf-band.sleept{cursor:grabbing;scroll-snap-type:none}.kf-band{scroll-snap-type:x proximity}
.kf-kaart{position:relative;flex:0 0 auto;width:var(--kw);margin:0 calc(var(--kw) * var(--ov) / -2);padding:0;border:0;
  scroll-snap-align:center;border-radius:12px;overflow:hidden;background:#e5e7eb;
  box-shadow:0 1px 3px rgba(20,41,147,.2),0 14px 30px rgba(20,41,147,.22);
  cursor:zoom-in;text-align:left;display:block;font:inherit;-webkit-tap-highlight-color:transparent;
  transform:scale(var(--s,1));transform-origin:50% 50%;opacity:var(--o,1);z-index:var(--z,1)}
/* bewust geen transition op de kaart: het script zet de schaal elke frame op de scrollpositie,
   een overgang loopt daar altijd achteraan en dat is wat je als schokken ziet tijdens het slepen */
.kf-kaart::before{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none;z-index:2}
.kf-kaart img{display:block;width:100%;height:auto;min-height:90px;background:#e5e7eb;border-radius:0;pointer-events:none}
.kf-naam{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:28px 10px 9px;font-size:12px;font-weight:600;color:#fff;line-height:1.2;background:linear-gradient(180deg,rgba(20,41,147,0) 0,rgba(20,41,147,.9) 55%);text-shadow:0 1px 2px rgba(0,0,0,.4);opacity:var(--n,1)}
.kf-naam::before{content:"G";flex:none;width:18px;height:18px;border-radius:50%;background:#fff;color:#4285F4;font:800 11px/18px system-ui,sans-serif;text-align:center;text-shadow:none}
.kf-naam span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kf-kaart:focus-visible{outline:3px solid #ef951a;outline-offset:3px}

/* pijlen naast de band */
.kf-baan-pijl{position:absolute;top:50%;transform:translateY(-50%);z-index:60;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:#142993;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(20,41,147,.25);transition:background .15s,transform .15s,opacity .15s}
.kf-baan-pijl:hover{background:#ef951a;color:#fff;transform:translateY(-50%) scale(1.06)}
.kf-baan-pijl[disabled]{opacity:.35;cursor:default}
.kf-baan-pijl svg{width:22px;height:22px}
.kf-baan-vorige{left:16px}.kf-baan-volgende{right:16px}

.kf-stippen{display:flex;gap:6px;justify-content:center;margin-top:.875rem;flex-wrap:wrap;padding:0 1rem}
.kf-stip{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:#d1d5db;cursor:pointer;transition:background .2s,transform .2s}
.kf-stip[aria-current="true"]{background:#ef951a;transform:scale(1.4)}

.kf-google-regel{margin:.75rem 0 0;text-align:center}
.kf-acties{position:relative;margin-top:1.5rem;text-align:center;padding:0 1.5rem}
.kf-knoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.kf-google{display:inline-block;padding:10px 6px;font-size:.9375rem;font-weight:700;color:#142993;text-decoration:underline;text-underline-offset:3px}

/* vergroting */
dialog.kf-lb{position:fixed;inset:0;margin:auto;border:0;padding:0;background:transparent;max-width:none;max-height:none;width:fit-content;height:fit-content;overflow:visible}
dialog.kf-lb:not([open]){display:none}
dialog.kf-lb:focus{outline:none}
.kf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
dialog.kf-lb::backdrop{background:rgba(20,41,147,.92)}
.kf-lb-inhoud{position:relative;background:#fff;padding:14px 14px 52px;border-radius:12px;box-shadow:0 40px 120px rgba(0,0,0,.5);min-width:min(92vw,380px);outline:none}
.kf-lb-inhoud img{display:block;margin:0 auto;max-width:min(88vw,1100px);max-height:74vh;width:auto;height:auto;border-radius:8px}
.kf-lb-cap{position:absolute;left:18px;right:120px;bottom:14px;margin:0;font-size:15px;font-weight:600;color:#142993;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-lb-cap a{color:#142993;text-decoration:underline}
.kf-lb-cap small{font-weight:400;color:#6b7280}
.kf-lb-teller{position:absolute;right:56px;bottom:19px;font-size:13px;font-weight:700;color:#6b7280;white-space:nowrap}
.kf-lb-sluit{position:absolute;right:10px;bottom:8px;width:38px;height:38px;border-radius:50%;border:0;background:#142993;color:#fff;font-size:19px;line-height:1;cursor:pointer}
.kf-lb-sluit:hover{background:#ef951a}
.kf-lb-pijl{position:absolute;top:calc(50% - 19px);transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#142993;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:background .15s,transform .15s}
.kf-lb-pijl:hover{background:#ef951a;color:#fff;transform:translateY(-50%) scale(1.06)}
.kf-lb-pijl svg{width:22px;height:22px}
.kf-lb-vorige{left:-72px}.kf-lb-volgende{right:-72px}.kf-lb-vorige{left:22px}.kf-lb-volgende{right:22px}
body.kf-lb-open{position:fixed;left:0;right:0;overflow:hidden}
@media (hover:none){.kf-band{scroll-snap-type:x proximity}}
@media (max-width:1300px){.kf-lb-vorige{left:22px}.kf-lb-volgende{right:22px}}
@media (max-width:1200px){.kf-baan{--kw:225px}}
@media (max-width:900px){.kf-baan{--kw:205px}.kf-baan-pijl{width:42px;height:42px}.kf-baan-vorige{left:8px}.kf-baan-volgende{right:8px}}
@media (max-width:760px){
  .kf-baan{--kw:178px}
  .kf-score{gap:8px 10px}.kf-cijfer{font-size:2.25rem}.kf-grote-sterren{font-size:1.4rem}.kf-aantal-wrap{flex-basis:100%;text-align:center;font-size:1rem}
  .kf-baan-pijl{display:none}
  .kf-lb-pijl{width:44px;height:44px}.kf-lb-vorige{left:16px}.kf-lb-volgende{right:16px}
  .kf-lb-inhoud{padding:8px 8px 52px;border-radius:10px}.kf-lb-inhoud img{max-width:92vw;max-height:70vh}
  .kf-lb-cap{left:12px;right:118px;bottom:16px;font-size:14px}.kf-lb-teller{right:64px;bottom:21px}.kf-lb-sluit{width:44px;height:44px;right:6px;bottom:4px}
}