:root{--navy:#1F3A5F;--navy-2:#182E4C;--ink:#1B2333;--zacht:#4A5568;--creme:#F6F7F9;--vlak:#fff;--lijn:#DCE1E8;--hero-sub:#D5DEEA;--accent:#F2B544;--accent-hover:#E3A230}
*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--creme)}
a{color:var(--navy)}.wrap{max-width:1120px;margin:0 auto;padding:0 18px}.smal{max-width:760px}
.skiplink{position:absolute;left:-999px}.skiplink:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
.top{background:var(--vlak);border-bottom:1px solid var(--lijn)}.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap}
.top nav a{margin-left:14px;text-decoration:none;font-weight:600}
.hero{background:var(--navy);color:#fff;padding:28px 0 36px}.hero-grid{display:grid;gap:20px}
.eyebrow{font-size:.85rem;color:var(--hero-sub);letter-spacing:.04em}
h1{font-size:clamp(1.8rem,6vw,3rem);line-height:1.1;margin:.3em 0}.hero p{color:var(--hero-sub)}.hero a{color:#fff}
.hero-koop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 6px}.hero .prijs{font-size:1.5rem;font-weight:700}
.prijs small{font-size:.7em;font-weight:400}
.koop{display:inline-block;background:var(--accent);color:var(--ink);font-weight:700;padding:12px 18px;border-radius:10px;text-decoration:none;min-height:44px}
.koop:hover{background:var(--accent-hover)}.koop:focus-visible{outline:3px solid var(--navy);outline-offset:2px}.hero .koop:focus-visible{outline-color:#fff}
.koop.klein{padding:8px 12px;min-height:0;margin-left:6px}
.hero-beeld{position:relative;aspect-ratio:1;max-width:440px;width:100%;justify-self:center}
.hero-beeld img,.hero-beeld canvas{width:100%;height:100%;display:block;border-radius:16px}
.hero-beeld canvas{position:absolute;inset:0;opacity:0;transition:opacity .6s}.hero-beeld.live canvas{opacity:1}
section{padding:36px 0}h2{color:var(--navy);margin-top:0}.intro{color:var(--zacht)}
.dash-grid{display:grid;gap:16px}
.tablist{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.tablist button{flex:0 0 auto;font:inherit;font-weight:600;border:1px solid var(--lijn);background:var(--vlak);color:var(--navy);padding:10px 14px;border-radius:999px;cursor:pointer;min-height:44px}
.tablist button[aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.tablist button:focus-visible,[role=tabpanel]:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.js [data-verberg]{display:none}.pkop{margin:0 0 10px;color:var(--navy)}
.kaarten{display:grid;gap:12px}
.kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(31,58,95,.06)}
.kaart h4{margin:.3em 0;font-size:1.05rem}.kaart p{margin:.3em 0;color:var(--zacht)}
.laag{font-size:.78rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em}
.regel{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px}.kaart .prijs{font-weight:700;font-size:1.15rem}
.binnenkort{color:var(--zacht);font-weight:600;border:1px dashed var(--lijn);padding:8px 12px;border-radius:10px}
.jurist{border-color:var(--navy)}.btw{margin:6px 0 0}.btw small,.betaalregel small{color:var(--zacht)}
.officieel{font-size:.92rem;margin-top:14px;padding:10px 12px;background:#E9EDF3;border-radius:10px}
.stappen li{margin:.5em 0}.tegels{display:grid;gap:12px;margin-top:20px}.tegel{background:var(--vlak);border:1px solid var(--lijn);border-radius:14px;padding:14px}.tegel h3{margin:0 0 4px;font-size:1rem;color:var(--navy)}
details{background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;padding:10px 14px;margin:8px 0}summary{cursor:pointer;font-weight:600}
footer{background:var(--navy);color:var(--hero-sub);padding:22px 0}footer a{color:#fff}
@media(min-width:760px){.kaarten,.tegels{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.hero-grid{grid-template-columns:1.2fr 1fr;align-items:center}.hero{padding:56px 0}
.dash-grid{grid-template-columns:240px 1fr}.tablist{flex-direction:column;position:sticky;top:12px;align-self:start}.tablist button{text-align:left;border-radius:10px}
.kaarten{grid-template-columns:repeat(3,1fr)}.tegels{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.hero-beeld.live img{opacity:0;transition:opacity .6s}.hero-beeld.live{background:radial-gradient(circle at 50% 40%,#2B4C78,#1F3A5F 70%);border-radius:16px}

.feedback{background:#EEF3FA;border-top:3px solid #2B5C9E;padding:28px 0}.feedback h2{margin:0 0 6px;font-size:1.15rem;color:#1F2A44}.feedback p{margin:0;max-width:62ch}.feedback a{color:#2B5C9E;font-weight:600}footer .sig{font-size:1rem;margin-bottom:6px}footer .sig em{font-style:italic;font-weight:600}
/* taalkeuze (privacy NL/EN) */
header .taalkeuze{display:flex;gap:0;flex-shrink:0}
header .taalkeuze a{font-size:.8rem;padding:6px 7px;font-weight:600;letter-spacing:.02em}
header .taalkeuze a[aria-current="page"]{background:var(--navy,#1f2a44);color:#fff}
@media(max-width:700px){header .wrap{flex-wrap:wrap;row-gap:6px}header .taalkeuze a{padding:4px 6px;font-size:.75rem}}

/* knop naar productpagina (mapjes/) op kaarten en tegels */
.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}.ov-tegel .bekijk{align-self:flex-start;margin-top:auto}.btw-onder{font-size:.82rem;color:#3D5577;margin:14px 0 0}

.talen{font-size:.9rem;margin:.4em 0 0}.talen a{margin-right:.6em}