/* Dienstpagina's (07-10-2026). Bouwt voort op over.css. */
.kruimel{display:flex;flex-wrap:wrap;gap:8px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin:0 0 18px}
.kruimel a{color:var(--steel);text-decoration:none}
.kruimel a:hover{color:var(--paper)}
.kruimel [aria-current]{color:var(--paper)}
.dienst-kop{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);align-items:center}
.dienst-kop .ph1{margin-top:0}
.dienst-beeld{display:grid;place-items:center}
.dienst-beeld img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.icoon.groot{width:min(260px,70%);height:auto;fill:none;stroke:var(--paper);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.icoon.groot .ac{stroke:var(--signal)}
@media (max-width:820px){.dienst-kop{grid-template-columns:1fr}.dienst-beeld{display:none}.dienst-beeld:has(img){display:block}}
.btn.groot{padding:16px 24px;font-size:16px}
.cta-blok{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;font:400 15px/1.4 var(--body);color:var(--muted)}
.cta-blok a:not(.btn){color:var(--paper)}
.belofte{margin:14px 0 0;font:400 13px/1.5 var(--mono);letter-spacing:.04em;color:var(--steel)}
.belofte::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;background:var(--signal);vertical-align:1px}
.dienst-body{margin-top:64px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:900px){.dienst-body{grid-template-columns:1fr}}
.dienst .dienst-tekst h2,.dienst .faq-kop{font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.6vw,34px);line-height:1;margin:40px 0 14px}
.dienst-tekst h2:first-child{margin-top:0}
.dienst-tekst p{color:var(--muted);font-size:17px;line-height:1.65;max-width:64ch;margin:0 0 14px}
.kort{position:sticky;top:110px;padding:26px 24px;border:1px solid var(--line);border-left:3px solid var(--signal);background:var(--petrol)}
.kort .facts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;font:400 14px/1.45 var(--mono);color:var(--paper)}
.kort .facts li{display:flex;gap:10px}
.kort .facts li::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;background:var(--signal)}
.dienst .faq-kop{margin-top:72px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font:600 17px/1.4 var(--body);color:var(--paper)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font:500 24px/1 var(--mono);color:var(--signal)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px;color:var(--muted);max-width:70ch}
.tegels{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px}
@media (max-width:980px){.tegels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tegels{grid-template-columns:1fr}}
.tegel{position:relative;background:var(--ink);box-shadow:0 0 0 1px var(--line);padding:26px 24px 24px;display:flex;flex-direction:column;gap:10px;transition:background .2s}
.tegel:hover{background:var(--petrol)}
.tegel .icoon{width:54px;height:54px;fill:none;stroke:var(--paper);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px;transition:transform .3s}
.tegel .icoon .ac{stroke:var(--signal)}
.tegel:hover .icoon{transform:translateY(-3px)}
.tegel h3{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:800;font-size:22px;line-height:1;margin:0;text-transform:uppercase}
.tegel p{margin:0;color:var(--muted);font-size:15px;flex:1}
.tegel-link{color:inherit;text-decoration:none}
.tegel-link::after{content:"";position:absolute;inset:0}
.tegel-link:focus-visible{outline:none}
.tegel:has(.tegel-link:focus-visible){outline:2px solid var(--signal);outline-offset:-2px}
.tegel .meer{margin-top:6px;font:600 14px/1 var(--body);color:var(--signal)}
.dienst-tegels.klein{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.dienst-tegels.klein .tegel{padding:20px 20px 18px}
.dienst-tegels.klein .icoon{width:40px;height:40px}
.dienst-tegels.klein h3{font-size:18px}
.partnerregel{margin:28px 0 0;color:var(--muted);max-width:70ch}
.dienstlinks{display:flex;flex-wrap:wrap;gap:6px 18px}
/* formulier: wat in site.css stond en hier ook nodig is */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg.fout{color:var(--signal)}
.dienst .ph1{font-size:clamp(40px,6.2vw,92px)}