/* urenregistratie.nl */
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-display: swap; font-weight: 400; src:url(fonts/dm-serif-display-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans Variable'; font-style: normal; font-display: swap; font-weight: 100 1000; src:url(fonts/dm-sans-latin-wght-normal.woff2) format('woff2-variations'); }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{margin:0;overflow-x:clip}
a{transition:color .2s,background-color .2s,border-color .2s,transform .2s,box-shadow .2s}
h1,h2,strong{overflow-wrap:break-word;hyphens:auto}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Zakelijk vertrouwen — navy band, teal, DM Serif + DM Sans */
:root{--navy:#0e2640;--navy2:#163657;--teal:#12a59a;--bg:#f3f6f9;--ink:#15212e;--muted:#5a6878;--line:#dde4ec;--serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans Variable',system-ui,sans-serif}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;overflow-x:clip}
a{color:#0b7d74;text-underline-offset:3px}
a:hover{color:var(--navy)}
nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding:20px max(20px,calc((100% - 1160px)/2));background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08)}
nav a{color:#c9d6e4;text-decoration:none;font-weight:500;font-size:.95rem;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{color:#fff;border-bottom-color:var(--teal)}
nav a:first-child{margin-right:auto;color:#fff;font-family:var(--serif);font-size:1.45rem;border:0;display:flex;align-items:center;gap:12px}
nav a:first-child::before{content:"";width:30px;height:30px;border-radius:50%;border:3px solid var(--teal);background:conic-gradient(var(--teal) 0 25%,transparent 0);box-sizing:border-box}
main{max-width:1160px;margin:0 auto;padding:0 20px}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:2px;background:currentColor}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em}
.hero{position:relative;color:#fff;padding:88px 0 140px;background:var(--navy);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax);
  background-image:radial-gradient(600px 300px at 90% 30%,rgba(18,165,154,.28),transparent 70%)}
.hero h1{font-size:clamp(3rem,8vw,5.8rem);margin:.3em 0 .3em}
.hero p{font-size:1.25rem;color:#b9c8d8;max-width:620px;margin:0}
.cards{counter-reset:c;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:-84px;position:relative}
.card{counter-increment:c;display:flex;flex-direction:column;padding:30px;background:#fff;border-radius:6px;border-top:4px solid var(--teal);text-decoration:none;color:var(--ink);box-shadow:0 24px 48px -24px rgba(14,38,64,.4)}
.card::before{content:"0" counter(c);font-family:var(--serif);font-size:2.2rem;color:var(--teal);line-height:1;margin-bottom:18px}
.card strong{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2}
.card span{margin-top:12px;color:var(--muted);font-size:.95rem}
.card::after{content:"Lees meer";margin-top:20px;font-weight:700;font-size:.88rem;color:var(--navy);padding-top:16px;border-top:1px solid var(--line)}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(14,38,64,.5);color:var(--ink)}
.card:hover::after{color:var(--teal)}
.linkbox{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.linkbox h2{grid-row:1;margin:0;padding:28px 32px 6px;font-size:1.45rem}
.linkbox p{grid-row:2;margin:0;padding:0 32px 30px;line-height:2}
.linkbox h2:nth-of-type(2),.linkbox p:nth-of-type(2){background:#f7f9fb;border-left:1px solid var(--line)}
article{max-width:820px;margin:64px auto 0;background:#fff;border:1px solid var(--line);border-radius:6px;padding:56px 64px;border-left:5px solid var(--teal)}
article h1{font-size:clamp(2.3rem,5.5vw,3.8rem);margin:.4em 0 .45em;color:var(--navy)}
.lead{font-size:1.28rem;color:var(--muted);line-height:1.6;padding-bottom:26px;border-bottom:1px solid var(--line)}
article h2{font-size:1.8rem;margin:1.9em 0 .55em;color:var(--navy)}
article ul{list-style:none;padding:0}
article li{position:relative;padding-left:36px;margin:.9em 0}
article li::before{content:"";position:absolute;left:4px;top:.5em;width:14px;height:8px;border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);transform:rotate(-45deg)}
aside{margin-top:48px;padding:28px 32px;background:var(--navy);color:#c9d6e4;border-radius:6px;line-height:2}
aside strong{color:#fff;font-family:var(--serif);font-weight:400;font-size:1.3rem}
aside a{color:#7fe0d6}aside a:hover{color:#fff}
footer{margin-top:80px;padding:30px max(20px,calc((100% - 1160px)/2)) 50px;background:var(--navy);color:#9fb2c6;display:flex;justify-content:space-between;gap:20px;font-size:.92rem}
footer span:first-child{color:#fff;font-family:var(--serif);font-size:1.2rem}
@media(max-width:820px){nav{gap:18px}nav a:first-child{flex-basis:100%}.hero{padding:56px 0 110px}.cards{grid-template-columns:1fr;margin-top:-70px}.linkbox{grid-template-columns:1fr}.linkbox h2,.linkbox p{grid-row:auto}.linkbox h2:nth-of-type(2),.linkbox p:nth-of-type(2){border-left:0}article{padding:32px 22px;border-left-width:4px;margin-top:36px}footer{flex-direction:column}}