/* Regelmapje v5 productpagina's (mapjes/). Kleuren: lichtblauw, wit, navy; goud alleen voor de bestelknop. */
.pp{--n:#1F3A5F;--n2:#2B5C9E;--lb:#EAF3FC;--lb2:#CFE0F3;--tz:#3D5577;color:var(--n)}
.pp p,.pp li,.pp dd{color:var(--tz)}
.pp h1,.pp h2,.pp h3{color:var(--n)}
.kruimel{font-size:.88rem;padding:12px 0 0;margin:0;color:var(--tz)}.kruimel a{color:var(--n2)}
.pp-kop{overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--lb) 100%);padding:16px 0 34px;border-bottom:1px solid var(--lb2)}
.pp-kop .wrap{display:grid;gap:22px}
.herken{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--n2);background:#fff;border:1px solid var(--lb2);border-radius:999px;padding:4px 12px;margin:6px 0 4px}
.pp-kop h1{font-size:clamp(1.55rem,5.4vw,2.5rem);line-height:1.15;margin:.35em 0 .4em}
.situatie{font-size:1.06rem;margin:0 0 14px}
.product-naam{font-size:1.15rem;font-weight:700;color:var(--n);margin:14px 0 4px}
.voorwie{margin:0 0 10px}
.helpt{list-style:none;padding:0;margin:8px 0 14px;display:flex;flex-wrap:wrap;gap:6px}
.helpt li{background:#fff;border:1px solid var(--lb2);border-radius:999px;padding:4px 11px;font-size:.88rem;color:var(--n)}
.feiten{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px;padding:0;list-style:none}
.feiten li{background:var(--n);color:#fff;border-radius:10px;padding:6px 11px;font-size:.88rem;font-weight:600}
.snel{font-size:.9rem;margin:8px 0 0}.snel a{color:var(--n2);font-weight:600}
.snel .betaal-taal{margin:0 0 2px}
/* 3D-mockup met echte paginabeelden */
.mock{perspective:1200px;display:flex;justify-content:center;align-items:center;min-height:300px;padding:10px 0 18px}
.mock-map{position:relative;width:min(56vw,250px);aspect-ratio:210/297;transform-style:preserve-3d;transform:rotateY(-22deg) rotateX(10deg) rotateZ(1deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mock:hover .mock-map{transform:rotateY(-10deg) rotateX(6deg)}
.mock-rug{position:absolute;inset:-4% -9% -4% -5%;background:linear-gradient(135deg,#2B5C9E,#1F3A5F);border-radius:6px 12px 12px 6px;transform:translateZ(-26px);box-shadow:18px 26px 40px rgba(31,58,95,.32)}
.mock-rug::before{content:"";position:absolute;top:-16px;left:12%;width:34%;height:20px;background:#2B5C9E;border-radius:8px 8px 0 0}
.mock-rug::after{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:rgba(255,255,255,.12);border-radius:6px 0 0 6px}
.mock-blad{position:absolute;inset:0;background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 2px 6px rgba(31,58,95,.18)}
.mock-blad img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.mock-blad.b3{transform:translateZ(-18px) translate(9%,-4%) rotateZ(5deg)}
.mock-blad.b2{transform:translateZ(-9px) translate(4%,-2%) rotateZ(2.5deg)}
.mock-blad.b1{transform:translateZ(0)}
.mock-klem{position:absolute;left:-7%;top:8%;width:9%;height:84%;background:linear-gradient(90deg,#1F3A5F,#2B5C9E);border-radius:6px;transform:translateZ(8px);box-shadow:2px 0 6px rgba(31,58,95,.3)}
.mock-label{position:absolute;right:-8%;bottom:7%;transform:translateZ(14px);background:#F2B544;color:var(--n);font-weight:700;font-size:.82rem;padding:5px 10px;border-radius:8px;box-shadow:0 4px 10px rgba(31,58,95,.25)}
/* bundel: vijf mappen in een waaier */
.mock.waaier .mock-map{width:min(44vw,190px)}
.mock.waaier .mock-blad{box-shadow:0 6px 16px rgba(31,58,95,.25)}
.mock.waaier .w1{transform:translateZ(-40px) translateX(-58%) rotateZ(-10deg)}
.mock.waaier .w2{transform:translateZ(-30px) translateX(-30%) rotateZ(-5deg)}
.mock.waaier .w3{transform:translateZ(-20px)}
.mock.waaier .w4{transform:translateZ(-10px) translateX(30%) rotateZ(5deg)}
.mock.waaier .w5{transform:translateZ(0) translateX(58%) rotateZ(10deg)}
@media(prefers-reduced-motion:reduce){.mock-map{transition:none}}
/* inhoud */
.pp-sectie{padding:32px 0}.pp-sectie.licht{background:var(--lb)}
.pp-sectie h2{font-size:1.45rem;margin:0 0 6px}.pp-sectie .lead{margin:0 0 16px;max-width:66ch}
.groep-kop{font-size:1.08rem;margin:22px 0 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.groep-kop small{font-weight:500;color:var(--tz);font-size:.9rem}
.bladen{display:grid;grid-template-columns:1fr;gap:12px;list-style:none;margin:0;padding:0}
.blad{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start;background:#fff;border:1px solid var(--lb2);border-radius:14px;padding:10px}
.blad img{width:96px;height:auto;border-radius:4px;border:1px solid var(--lb2);background:#fff;display:block}
.blad.xl{grid-template-columns:120px 1fr}.blad.xl img{width:120px}
.blad h4{margin:2px 0 3px;font-size:.98rem;color:var(--n)}.blad p{margin:0;font-size:.93rem}
.blad .pnr{display:block;font-size:.75rem;font-weight:700;color:var(--n2);letter-spacing:.04em;text-transform:uppercase}
.vb-noot{font-size:.85rem;margin:8px 0 0}
.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;background:#fff;border:1px solid var(--lb2);border-radius:14px;padding:14px 16px;margin:18px 0 0}
.spec dt{font-weight:700;color:var(--n)}.spec dd{margin:0}
.stap3{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:s}
.stap3 li{counter-increment:s;background:#fff;border:1px solid var(--lb2);border-radius:14px;padding:14px 14px 14px 58px;position:relative}
.stap3 li::before{content:counter(s);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--n);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.stap3 b{color:var(--n);display:block}
.pp details{border-color:var(--lb2)}.pp summary{color:var(--n)}
.bestel{background:#fff;border:2px solid var(--n2);border-radius:18px;padding:20px;max-width:560px}
.bestel .prijs{font-size:1.7rem;font-weight:800;color:var(--n)}.bestel .prijs small{font-weight:500;font-size:.55em}
.bestel .koop{color:var(--n);font-size:1.05rem;padding:14px 22px;margin-top:4px}
.bestel .betaal-taal{font-size:.92rem;margin:10px 0 8px;color:var(--tz)}
.bestel .ook{font-size:.92rem;margin:14px 0 0}
.voorbereiding{font-weight:700;color:var(--n);border:1px dashed var(--n2);border-radius:10px;padding:10px 14px;display:inline-block}
.btw-regel{padding:14px 0 6px}.btw-regel p{font-size:.82rem;color:var(--tz);margin:0 0 4px;max-width:80ch}
.andere{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));list-style:none;padding:0;margin:12px 0 0}
.andere a{display:block;background:#fff;border:1px solid var(--lb2);border-radius:12px;padding:10px 12px;text-decoration:none;color:var(--n);font-weight:600;font-size:.92rem;min-height:44px}
.andere a:hover,.andere a:focus-visible{background:var(--lb)}
.bundel-map{grid-template-columns:110px 1fr}.bundel-map img{width:110px}
.bundel-map a{color:var(--n2);font-weight:600;font-size:.92rem}
@media(min-width:700px){.bladen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.pp-kop .wrap{grid-template-columns:1.15fr .85fr;align-items:center}.pp-kop{padding:22px 0 46px}
.mock{min-height:420px}.mock-map{width:280px}.mock.waaier .mock-map{width:200px}.bladen{grid-template-columns:repeat(3,1fr)}
.pp-twee{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}}
/* kaarten op start- en overzichtspagina: knop naar productpagina */
.bekijk{display:inline-block;background:#fff;color:#1F3A5F;border:2px solid #1F3A5F;font-weight:700;padding:10px 16px;border-radius:10px;text-decoration:none;min-height:44px}
.bekijk:hover,.bekijk:focus-visible{background:#EAF3FC}
.btw-onder{font-size:.82rem;color:#3D5577;margin:14px 0 0}