/* ==========================================================================
   Heights Payments Consultants - heights-2027.css
   Moderne stylesheet voor de kernpagina's. Huisstijl: navy #000B33 met blauw accent #3498DB.
   ========================================================================== */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-latin-700-normal.woff2") format("woff2")}

:root{
  /* Huisstijl */
  --deep:#000b33;
  --royal:#001f4d;
  --accent:#001f4d;
  --accent-ink:#001f4d;
  --accent-soft:#eef2f8;
  --accent-line:#c8d3e4;
  --on-dark:#9fb3d9;
  --bg:#fafbfc;
  --surface:#ffffff;
  --ink:#2c3e50;
  --muted:#6c7a89;
  --line:#e4e7eb;
  --ok:#27ae60;
  --ok-soft:#e8f6ee;
  --info:#3498db;
  --info-soft:#e9f3fb;
  --warn:#f39c12;
  --warn-soft:#fdf2e0;

  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;
  --shadow-xs:0 1px 2px rgba(0,11,51,.05);
  --shadow:0 1px 2px rgba(0,11,51,.04),0 10px 30px -12px rgba(0,11,51,.16);
  --shadow-lg:0 2px 4px rgba(0,11,51,.05),0 28px 60px -22px rgba(0,11,51,.32);
  --max:1200px;
  --gutter:24px;

  /* Snappy: korte, strakke overgangen */
  --t-fast:120ms cubic-bezier(.2,.8,.3,1);
  --t:180ms cubic-bezier(.2,.8,.3,1);

  --font:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--bg);
  font-feature-settings:"cv05" 1,"ss01" 1;-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--royal);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--accent-ink)}
h1,h2,h3,h4{color:var(--deep);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:600;letter-spacing:-.035em;line-height:1.08}
h2{font-size:clamp(1.8rem,3.6vw,3rem);font-weight:600;letter-spacing:-.03em;line-height:1.12}
h3{font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
h4{font-size:1.02rem;font-weight:600}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin:.3em 0}
strong{font-weight:600;color:var(--deep)}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:820px}
.lead{font-size:1.2rem;color:var(--muted);max-width:44rem;line-height:1.6}
.muted{color:var(--muted)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:999;background:var(--deep);color:#fff;padding:.7rem 1.1rem;border-radius:8px}

/* ---------------------------------------------------------------- secties */
.section{padding:84px 0}
.section.tight{padding:48px 0}
.section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.deep{background:var(--deep);color:#c3cbdd}
.section.deep h2,.section.deep h3,.section.deep h4{color:#fff}
.section.deep .lead{color:#9fabc4}
.section.deep a{color:#fff}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)}
.section.deep .eyebrow::before,.calc-output .eyebrow::before{background:var(--on-dark)}
.calc-output .eyebrow{color:var(--on-dark)}
.section.deep .eyebrow{color:var(--on-dark)}
.section-head{max-width:48rem;margin-bottom:48px}
.section-head.center{margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------------- knoppen */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:999px;font-weight:600;font-size:.98rem;
  border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2;
  white-space:nowrap;transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-primary{background:var(--deep);color:#fff;box-shadow:0 6px 18px -8px rgba(0,11,51,.7)}
.btn-primary:hover{background:var(--royal);color:#fff;transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:var(--deep)}
.btn-accent:hover{background:#0a2e66;color:var(--deep);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);color:var(--deep);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--deep);transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--deep)}
.btn-light:hover{background:var(--accent-soft);color:var(--deep);transform:translateY(-1px)}
.btn-lg{padding:1.02rem 1.8rem;font-size:1.05rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:100;padding:12px 0;
  background:rgba(250,251,252,.82);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t);
}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-xs)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:700;color:var(--deep);font-size:1.06rem;letter-spacing:-.02em}
.brand-mark{
  width:38px;height:38px;border-radius:10px;background:var(--deep);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:1rem;flex:none;
}
.brand small{display:block;font-size:.68rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);line-height:1}
.nav{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:.5rem .72rem;border-radius:999px;color:var(--ink);font-weight:500;font-size:.92rem;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
.nav a:hover{background:var(--surface);color:var(--deep);box-shadow:var(--shadow-xs)}
.nav a.active{background:var(--surface);color:var(--deep);box-shadow:var(--shadow-xs)}
.nav .nav-cta a{background:var(--deep);color:#fff;margin-left:.4rem}
.nav .nav-cta a:hover{background:var(--royal);color:#fff}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:var(--surface);border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:20px;height:2px;background:var(--deep);position:relative;transition:transform var(--t)}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}

/* Leesvoortgang bovenaan */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--royal);z-index:200;transition:width 80ms linear}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:76px 0 56px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;pointer-events:none;
  background:
    radial-gradient(52% 48% at 22% 18%,rgba(0,31,77,.10),transparent 68%),
    radial-gradient(40% 42% at 84% 8%,rgba(0,31,77,.16),transparent 70%);
}
.hero .container{position:relative}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero h1 em{font-style:normal;color:var(--royal);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.32em;background:var(--royal);opacity:.16;border-radius:2px;z-index:-1}
.hero .lead{margin-bottom:1.7rem}
.hero-points{list-style:none;margin:1.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;font-size:.93rem;color:var(--muted)}
.hero-points li{display:flex;align-items:center;gap:.45rem}
.hero-points li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.hero-sub{padding:64px 0 24px}

/* Regel: op een donkere achtergrond is de voorgrond altijd wit of --on-dark,
   nooit --accent. Accent is een kleur voor lichte vlakken. */

/* ---------------------------------------------------------------- kaarten */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 32px 30px;box-shadow:var(--shadow-xs);position:relative;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.card p:last-child{margin-bottom:0}
a.card{display:block;color:inherit}
a.card:hover,.card.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-line)}
a.card:hover h3{color:var(--royal)}
.card .more{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;font-weight:600;color:var(--royal);font-size:.95rem}
.card .more::after{content:"→";transition:transform var(--t-fast)}
a.card:hover .more::after{transform:translateX(3px)}
.tag{
  position:absolute;top:18px;right:18px;font-size:.68rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.25rem .55rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);
}
.icon{
  width:46px;height:46px;border-radius:12px;background:var(--deep);color:#fff;
  display:grid;place-items:center;margin-bottom:16px;flex:none;
}
.icon svg{width:22px;height:22px}
.icon.soft{background:var(--accent-soft);color:var(--accent-ink)}

/* Kerncijfers */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.stat b{display:block;font-size:2.6rem;font-weight:600;color:var(--deep);letter-spacing:-.04em;line-height:1.05}
.stat b .unit{font-size:1rem;color:var(--muted);font-weight:600}
.stat span{color:var(--muted);font-size:.92rem}

/* Vinklijst */
.check{list-style:none;padding:0;margin:0}
.check li{position:relative;padding-left:1.8rem;margin:.55rem 0}
.check li::before{content:"";position:absolute;left:0;top:.5rem;width:16px;height:16px;border-radius:50%;background:var(--accent-soft)}
.check li::after{content:"";position:absolute;left:5px;top:.72rem;width:5px;height:8px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:.45rem 1rem;font-size:.9rem;font-weight:500;color:var(--deep);
  transition:border-color var(--t-fast),transform var(--t-fast);
}
a.chip:hover{border-color:var(--accent);transform:translateY(-1px)}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev>:first-child{order:2}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-xs)}
.panel.deep{background:var(--deep);color:#c3cbdd;border-color:transparent}
.panel.deep h3,.panel.deep h4{color:#fff}
.panel.accent{background:var(--accent-soft);border-color:var(--accent-line)}

/* Stappen */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative}
.step::before{
  counter-increment:s;content:counter(s);display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--deep);color:#fff;font-weight:700;font-size:.92rem;margin-bottom:14px;
}
.step h3{font-size:1.05rem}
.step p{margin:0;color:var(--muted);font-size:.95rem}

/* ---------------------------------------------------------------- interactie: rekenmodule */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr}
.calc-inputs{padding:34px}
.calc-output{background:var(--deep);color:#c3cbdd;padding:34px;display:flex;flex-direction:column;justify-content:center}
.calc-output h3{color:#fff;margin-bottom:.2rem}
.field{margin-bottom:20px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:.92rem;color:var(--deep);margin-bottom:.45rem}
.field .val{font-variant-numeric:tabular-nums;color:var(--royal);font-weight:700}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;
  background:var(--line);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--deep);border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:grab;
  transition:transform var(--t-fast);
}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.12);cursor:grabbing}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--deep);border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:grab}
.seg{display:flex;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px}
.seg button{
  flex:1;border:0;background:transparent;font-family:inherit;font-size:.88rem;font-weight:600;
  color:var(--muted);padding:.5rem .6rem;border-radius:999px;cursor:pointer;transition:all var(--t-fast);
}
.seg button[aria-pressed=true]{background:var(--deep);color:#fff}
.result-big{font-size:clamp(2.4rem,5.4vw,3.6rem);font-weight:600;color:#fff;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.result-big .cur{color:#fff;opacity:.55;font-size:.5em;vertical-align:.34em;margin-right:.14em;font-weight:600}
.result-rows{margin-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.result-rows div{display:flex;justify-content:space-between;gap:1rem;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.94rem}
.result-rows span:last-child{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.calc-note{font-size:.82rem;color:var(--muted);margin-top:16px}

/* ---------------------------------------------------------------- interactie: woordenboek */
.dict-search{position:relative;margin-bottom:26px}
.dict-search input{
  width:100%;font:inherit;font-size:1.05rem;padding:1rem 1rem 1rem 3rem;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.dict-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,31,77,.16)}
.dict-search svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
.dict-count{font-size:.9rem;color:var(--muted);margin-bottom:18px}
.dict-alpha{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:26px}
.dict-alpha button{
  width:34px;height:34px;border:1px solid var(--line);background:var(--surface);border-radius:9px;
  font-family:inherit;font-weight:600;font-size:.86rem;color:var(--deep);cursor:pointer;
  transition:all var(--t-fast);
}
.dict-alpha button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.dict-alpha button[aria-pressed=true]{background:var(--deep);color:#fff;border-color:var(--deep)}
.dict-alpha button:disabled{opacity:.3;cursor:default}
.dict-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.dict-item{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);padding:16px 18px;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.dict-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-xs)}
.dict-item a{font-weight:600;color:var(--deep);display:block}
.dict-item a:hover{color:var(--royal)}
.dict-item p{margin:.3rem 0 0;font-size:.92rem;color:var(--muted)}
.dict-empty{padding:40px;text-align:center;color:var(--muted)}

/* ---------------------------------------------------------------- interactie: betaalketen */
.chain{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:thin}
.chain button{
  flex:1;min-width:132px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 14px;cursor:pointer;text-align:left;
  font-family:inherit;transition:all var(--t-fast);
}
.chain button:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.chain button[aria-selected=true]{background:var(--deep);border-color:var(--deep)}
.chain button[aria-selected=true] .chain-n,.chain button[aria-selected=true] .chain-t{color:#fff}
.chain button[aria-selected=true] .chain-n{color:var(--on-dark)}
.chain-n{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--accent-ink);margin-bottom:.35rem}
.chain-t{display:block;font-weight:600;color:var(--deep);font-size:.98rem;line-height:1.25}
.chain-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-top:8px}
.chain-panel h3{margin-bottom:.4rem}
.chain-panel p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- accordeon */
.faq{max-width:52rem;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;padding:0 22px;transition:border-color var(--t-fast)}
.faq details[open]{border-color:var(--accent-line)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 0;font-weight:600;color:var(--deep);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--accent);flex:none;transition:transform var(--t)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding-bottom:18px;margin:0}

/* ---------------------------------------------------------------- tabellen */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line)}
table.data{width:100%;border-collapse:collapse;background:var(--surface);font-size:.95rem}
table.data th,table.data td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{background:#f6f8fa;color:var(--deep);font-weight:600}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background var(--t-fast)}
table.data tbody tr:hover{background:var(--accent-soft)}

/* ---------------------------------------------------------------- notitieblokken */
.note{border-radius:var(--radius-sm);padding:18px 22px;margin:0 0 20px;border:1px solid var(--line);border-left-width:3px;background:var(--surface)}
.note h4{margin-bottom:.3rem}
.note p:last-child{margin-bottom:0}
.note.info{border-left-color:var(--info);background:var(--info-soft)}
.note.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.note.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.note.accent{border-left-color:var(--accent);background:var(--accent-soft)}

/* ---------------------------------------------------------------- cta */
.cta{
  background:var(--deep);color:#fff;border-radius:var(--radius-lg);padding:58px 48px;
  display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 65%);pointer-events:none;
}
.cta h2{color:#fff}
.cta p{color:#a9b4c9}
.cta-lines{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:24px}
.cta-lines small{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark);margin-bottom:.2rem}
.cta-lines a{color:#fff;font-weight:600;font-size:1.1rem}
.cta-lines a:hover{color:var(--accent-ink)}
.cta-lines div+div{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}

/* ---------------------------------------------------------------- formulier */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:span 2}
label.lbl{display:block;font-weight:600;font-size:.9rem;color:var(--deep);margin-bottom:.35rem}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font:inherit;padding:.8rem .95rem;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,31,77,.16)}
textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.alert{padding:14px 16px;border-radius:10px;margin-bottom:16px;font-size:.95rem;display:none}
.alert.ok{display:block;background:var(--ok-soft);color:#1d7a45}
.alert.err{display:block;background:#fdeaea;color:#a63535}

/* ---------------------------------------------------------------- prose */
.prose{max-width:50rem}
.prose h2{font-size:1.5rem;margin-top:2.4rem}
.prose h3{font-size:1.15rem;margin-top:1.7rem}
.prose>p:first-of-type{font-size:1.1rem;color:var(--muted)}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--deep);color:#9fabc4;padding:56px 0 26px;margin-top:64px}
.site-footer .brand{color:#fff}
.site-footer .brand small{color:#9fabc4}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:44px;margin-bottom:36px}
.site-footer h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:.42rem 0}
.site-footer a{color:#c3cbdd}
.site-footer a:hover{color:var(--accent-ink)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem}

/* ---------------------------------------------------------------- animatie */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 420ms ease,transform 420ms cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .hero-grid,.split,.cta,.calc-grid{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
  .grid-3,.grid-4,.steps,.stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .dict-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .section{padding:56px 0}
  .hero{padding:40px 0 20px}
  .grid-2,.grid-3,.grid-4,.steps,.stats,.form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:span 1}
  .footer-grid{grid-template-columns:1fr}
  .cta{padding:36px 24px;border-radius:20px}
  .calc-inputs,.calc-output{padding:26px}
  .menu-toggle{display:inline-flex}
  .nav{
    display:none;position:absolute;left:16px;right:16px;top:calc(100% + 8px);
    flex-direction:column;align-items:stretch;background:var(--surface);
    border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow-lg);
  }
  .nav.open{display:flex}
  .nav a{padding:.8rem 1rem}
  .nav .nav-cta a{margin:.4rem 0 0;text-align:center}
  .btn-row .btn{width:100%}
  .chain button{min-width:150px}
}

/* ---------------------------------------------------------------- print */
@media print{
  .site-header,.progress,.cta,.btn-row,.menu-toggle{display:none}
  body{background:#fff;font-size:11pt}
  .card,.panel{box-shadow:none;border-color:#ccc}
}

/* ==========================================================================
   Compatibiliteit met bestaande contentklassen
   De kernpagina's houden hun bestaande HTML. Deze regels geven die klassen
   het uiterlijk van de nieuwe stylesheet, zodat de inhoud niet herschreven
   hoeft te worden.
   ========================================================================== */

.modern-card,.heights-box,.info-box,.success-box,.warning-box,.highlight-box,.training-section{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 32px;margin:0 0 24px;box-shadow:var(--shadow-xs);
}
.modern-card>*:last-child,.heights-box>*:last-child,.info-box>*:last-child,
.success-box>*:last-child,.warning-box>*:last-child,.highlight-box>*:last-child,
.training-section>*:last-child{margin-bottom:0}
.heights-box{border-left:3px solid var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
.info-box{border-left:3px solid var(--info);background:var(--info-soft);border-color:#cfe4f5}
.success-box{border-left:3px solid var(--ok);background:var(--ok-soft);border-color:#c9ead8}
.warning-box{border-left:3px solid var(--warn);background:var(--warn-soft);border-color:#f6e0bb}
.highlight-box{border-left:3px solid var(--deep)}
.training-section{border-left:3px solid var(--accent);background:linear-gradient(135deg,var(--accent-soft),var(--surface) 60%)}
.training-section img{border-radius:12px}

.entrytextintro{font-size:1.18rem;color:var(--muted);line-height:1.6}
.entrytext{font-size:1rem}
.entrylink,.entrylinkintro{
  color:var(--royal);font-weight:500;border-bottom:1px solid var(--accent-line);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.entrylink:hover,.entrylinkintro:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}

.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:24px}
.service-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:24px 20px;text-align:center;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.service-card a{display:block;color:inherit}
.service-card img{margin:0 auto 12px;width:52px;height:auto}
.service-card h3{font-size:1rem;margin:0 0 .3rem}
.service-card p{font-size:.88rem;color:var(--muted);margin:0}
.service-card:hover,.hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-line)}

.service-links{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}
.service-link{
  background:var(--surface);border:1px solid var(--accent-line);border-radius:999px;
  padding:.45rem 1.05rem;font-size:.92rem;font-weight:600;color:var(--deep);
  transition:transform var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.service-link:hover{background:var(--deep);color:#fff;transform:translateY(-1px)}

.modern-button,.modern-button-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:999px;font-weight:600;font-size:.98rem;
  border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2;
  transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.modern-button{background:var(--deep);color:#fff;box-shadow:0 6px 18px -8px rgba(0,11,51,.7)}
.modern-button:hover{background:var(--royal);color:#fff;transform:translateY(-1px)}
.modern-button-outline{background:var(--surface);color:var(--deep);border-color:var(--line)}
.modern-button-outline:hover{border-color:var(--accent);color:var(--deep);transform:translateY(-1px)}
.cta-buttons{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.text-center .cta-buttons{justify-content:center}

.modern-list{margin:0 0 22px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-weight:600;font-size:.9rem;color:var(--deep);margin-bottom:.35rem}
.form-group .required{color:var(--warn)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.full-width{width:100%}

@media (max-width:760px){
  .modern-card,.heights-box,.info-box,.success-box,.warning-box,.highlight-box,.training-section{padding:22px}
  .form-row{grid-template-columns:1fr}
  .training-section img{float:none!important;display:block;margin:0 0 14px}
}

/* ------------------------------------------------ pagina-kop en sitemap */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pagina-kop{margin-bottom:38px;max-width:52rem}
.kruimel{font-size:.85rem;color:var(--muted);margin-bottom:.9rem}
.kruimel a{color:var(--muted);border-bottom:1px solid transparent}
.kruimel a:hover{color:var(--deep);border-bottom-color:var(--accent-line)}
.pagina-kop h1{margin-bottom:1rem}

.sitemap-blok{margin-bottom:46px}
.sitemap-blok h2{font-size:1.45rem;margin-bottom:.4rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.sitemap-lijst{list-style:none;padding:0;margin:1.1rem 0 0}
.sitemap-lijst li{padding:.34rem 0;font-size:.97rem}
.sitemap-lijst a{color:var(--ink);border-bottom:1px solid transparent}
.sitemap-lijst a:hover{color:var(--deep);border-bottom-color:var(--accent)}
.sitemap-lijst.kolommen{column-count:3;column-gap:38px}
.sitemap-lijst.kolommen li{break-inside:avoid}
@media (max-width:900px){.sitemap-lijst.kolommen{column-count:2}}
@media (max-width:620px){.sitemap-lijst.kolommen{column-count:1}}

/* ------------------------------------------------ voet op legacy-pagina's */
.paginavoet{background:var(--deep);color:#9fabc4;padding:34px 20px 28px;margin-top:56px;text-align:center;font-family:var(--font);font-size:.9rem}
.voet-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin-bottom:1rem}
.voet-links a{color:#c3cbdd;text-decoration:none;border-bottom:1px solid transparent}
.voet-links a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.voet-copyright{color:#7d8dab;font-size:.82rem}

/* ==========================================================================
   Correcties 2027.1
   Aanleiding: --accent en --accent-ink stonden allebei op #001f4d. Daardoor
   kreeg elke hover, knop en markering dezelfde kleur als de donkerblauwe
   achtergrond en was die onleesbaar. Vanaf hier is er een echte
   interactiekleur, apart van de huisstijlkleur.
   ========================================================================== */

:root{
  /* Interactiekleur. --hot staat op een donkere ondergrond, --hot-ink op een
     lichte. Beide halen ruim WCAG AA. Ze zijn uitsluitend voor interactie:
     hover, focus, de tweede knop. Nooit als vlakkleur voor hele secties. */
  --hot:#34d399;
  --hot-ink:#0f7a52;
  --hot-zacht:#e8f7f1;

  /* Leeskolom. Regels langer dan ongeveer 90 tekens lezen slecht; breder dan
     dit oogt de pagina leeg aan de rechterkant. */
  --lees:1000px;
}

/* ------------------------------------------------------------- leeskolom */
.container.leesbaar{max-width:var(--lees)}

/* ------------------------------------------------------------- hover */
a:hover{color:var(--hot-ink)}
.kruimel a:hover{color:var(--hot-ink);border-bottom-color:var(--hot-ink)}
.entrylink:hover,.entrylinkintro:hover{color:var(--hot-ink);border-bottom-color:var(--hot-ink)}
.sitemap-lijst a:hover{color:var(--hot-ink);border-bottom-color:var(--hot-ink)}
.dict-item a:hover{color:var(--hot-ink)}

/* Op donkerblauw is de voorgrond wit; de interactiekleur markeert de hover. */
.section.deep a:hover,
.site-footer a:hover,
.cta a:hover,
.cta-lines a:hover{color:var(--hot)}
.cta-lines a{border-bottom:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.cta-lines a:hover{border-bottom-color:var(--hot)}

/* ------------------------------------------------------------- knoppen */
/* De tweede knop op een donkere achtergrond was navy op navy. */
.btn-accent{background:var(--hot);color:#00261a;border-color:var(--hot)}
.btn-accent:hover{background:#5ee0b0;color:#00261a;transform:translateY(-1px)}
.btn-light:hover{background:var(--hot);color:#00261a}
.btn-ghost:hover{border-color:var(--hot-ink);color:var(--hot-ink)}
.btn-primary:hover{background:var(--royal);color:#fff}

/* Verzendknoppen van de formulieren waren onopgemaakte browserknoppen. */
.submit-button,
button[type=submit],
input[type=submit],
input[type=button],
input[type=reset]{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem 1.9rem;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:1.02rem;font-weight:600;line-height:1.2;cursor:pointer;
  background:var(--deep);color:#fff;box-shadow:0 6px 18px -8px rgba(0,11,51,.7);
  transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.submit-button:hover,
button[type=submit]:hover,
input[type=submit]:hover{background:var(--royal);color:#fff;transform:translateY(-1px)}
.submit-button:disabled,button[type=submit]:disabled{opacity:.55;cursor:not-allowed;transform:none}
.form-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:26px 0 8px;clear:both}

/* ------------------------------------------------------------- afbeeldingen */
/* De oude pagina's mengen gecentreerde en links uitgelijnde beelden. Alles
   volgt nu de tekstkolom. Zwevende beelden blijven zweven. */
main img{margin-left:0;margin-right:0}
main div[align="center"],main p[align="center"],main center,main td[align="center"]{text-align:left}
main div[align="center"] img,main center img,main p[align="center"] img{margin-left:0;margin-right:0}
main img[align="left"]{float:left;margin:.25rem 1.6rem 1rem 0}
main img[align="right"]{float:right;margin:.25rem 0 1rem 1.6rem}
@media (max-width:620px){
  main img[align="left"],main img[align="right"]{float:none;margin:0 0 1.2rem}
}
/* Kaders sluiten hun zwevende inhoud zelf af, zodat beeld niet uit de kaart loopt. */
.modern-card,.heights-box,.info-box,.success-box,.warning-box,.highlight-box,
.training-section,.note,.card{display:flow-root}

/* Losse schema's en tabellen mogen de volle kolombreedte gebruiken. */
main table{max-width:100%}
main figure{margin:1.6rem 0}
main figcaption{font-size:.9rem;color:var(--muted);margin-top:.6rem}

/* ------------------------------------------------------------- focus */
:focus-visible{outline:2px solid var(--hot-ink);outline-offset:3px}
.section.deep :focus-visible,.site-footer :focus-visible,.cta :focus-visible{outline-color:var(--hot)}
input:focus,select:focus,textarea:focus{border-color:var(--hot-ink);box-shadow:0 0 0 4px rgba(15,122,82,.18)}
.dict-search input:focus{border-color:var(--hot-ink);box-shadow:0 0 0 4px rgba(15,122,82,.18)}

/* ------------------------------------------------------------- kaarten */
/* Gecentreerde lopende tekst leest slecht. Titel en beeld blijven boven,
   de tekst volgt de linkerkantlijn. */
.service-card{text-align:left;padding:22px}
.service-card img{margin:0 0 14px}
.service-card h3{color:var(--deep);font-size:1.05rem;margin:0 0 .45rem}
.service-card h3 a{color:inherit}
.service-card p{color:var(--muted);margin:0 0 .6rem}
.service-card p:last-child{margin-bottom:0}
.service-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}

/* ------------------------------------------------------------- keuzevakjes */
input[type=checkbox],input[type=radio]{
  width:1.06rem;height:1.06rem;margin:.28rem .1rem 0 0;flex:none;accent-color:var(--deep);cursor:pointer;
}
.checkbox-label,label.checkbox-label{
  display:flex;align-items:flex-start;gap:.65rem;font-weight:400;color:var(--ink);
  line-height:1.5;margin-bottom:.9rem;cursor:pointer;
}
.checkbox-label .required{margin-left:.2rem}

/* ==========================================================================
   Correcties 2027.2
   ========================================================================== */

/* De hoverregels voor links golden ook binnen knoppen: .cta a:hover (0,2,1)
   won van .btn-accent:hover (0,2,0), waardoor de knoptekst de accentkleur
   kreeg. Knoppen zijn geen gewone links; ze regelen hun eigen hover. */
a:not(.btn):hover{color:var(--hot-ink)}
.section.deep a:not(.btn):hover,
.site-footer a:not(.btn):hover,
.cta a:not(.btn):hover,
.cta-lines a:hover{color:var(--hot)}
.cta .btn:hover,.section.deep .btn:hover{color:inherit}

.btn-accent,.cta .btn-accent{background:var(--hot);color:#052e20;border-color:var(--hot)}
.btn-accent:hover,.cta .btn-accent:hover{background:#1fbc86;color:#052e20;border-color:#1fbc86}
.btn-light,.cta .btn-light{background:#fff;color:var(--deep);border-color:#fff}
/* De witte knop blijft wit; alleen de rand en de schaduw reageren. */
.btn-light:hover,.cta .btn-light:hover{background:#fff;color:var(--deep);border-color:var(--hot);box-shadow:0 0 0 3px rgba(52,211,153,.35)}

/* ------------------------------------------------------------- kennisbank */
.dict-blok{margin:0 0 46px}
.dict-blok>h2{font-size:1.5rem;margin:0 0 .35rem}
.dict-blok>p.dict-intro{color:var(--muted);margin:0 0 22px;font-size:.98rem}
.dict-groep{margin-bottom:28px}
.dict-groep h3{
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .8rem;padding-bottom:.55rem;border-bottom:1px solid var(--line);
}
.dict-groep ul{list-style:none;margin:0;padding:0;columns:2;column-gap:36px}
.dict-groep li{break-inside:avoid;padding:.3rem 0}
.dict-groep a{
  color:var(--ink);border-bottom:1px solid transparent;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.dict-groep a:hover{color:var(--hot-ink);border-bottom-color:var(--hot-ink)}
@media (max-width:720px){.dict-groep ul{columns:1}}
.dict-blok[hidden],.dict-groep[hidden]{display:none}

/* De onderwerpen delen de klasse .dict-item met de begrippen, zodat het
   zoekveld ze meeneemt. Als lijstitem hebben ze geen kaartopmaak nodig. */
.dict-groep .dict-item{
  background:none;border:0;border-radius:0;padding:.32rem 0;box-shadow:none;transform:none;
}
.dict-groep .dict-item:hover{background:none;box-shadow:none;transform:none}
.dict-groep .dict-item a{font-weight:500;display:inline}

/* ==========================================================================
   Correcties 2027.3 - opmaakklassen uit de oudste pagina's
   Alle pagina's draaien nu op deze stylesheet. Onderstaande klassen komen uit
   de generatie van 2006-2012 en krijgen hier hun plek in het systeem.
   ========================================================================== */

.entrytitle,.entrytitlegrey{
  display:block;font-size:1.5rem;font-weight:600;color:var(--deep);
  letter-spacing:-.02em;line-height:1.2;margin:2.4rem 0 .8rem;
}
.entrytitlegrey{color:var(--muted);font-size:1.15rem}
.entrytitle:first-child,.entrytitlegrey:first-child{margin-top:0}

hr.streep,.streep{
  border:0;border-top:1px solid var(--line);margin:34px 0;height:0;
}

.gray-background{background:var(--accent-soft);border-radius:var(--radius-sm);padding:20px 22px;margin:0 0 22px}
.shadow-medium{box-shadow:var(--shadow)}
.rounded-medium{border-radius:var(--radius-sm)}
.slider-container{margin:1.6rem 0}
.js-kit-comments{display:none}

/* Tabellen uit de oude pagina's */
main table{border-collapse:collapse;width:100%;margin:1.6rem 0;font-size:.95rem}
main th,main td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
main th,.tbltitel{font-weight:600;color:var(--deep);background:var(--accent-soft)}
main tr.odd{background:var(--surface)}
main tr.even{background:var(--bg)}
main table[bgcolor],main td[bgcolor],main tr[bgcolor]{background:transparent}

/* De oude pagina's zetten afmetingen en kleuren rechtstreeks op de tags. */
main img[width],main img[height]{max-width:100%;height:auto}
main [bgcolor]{background-color:transparent}
main font{font:inherit;color:inherit}
main b,main strong{font-weight:600;color:var(--deep)}


/* Brede tabellen schuiven binnen hun eigen kader in plaats van de pagina
   scheef te duwen. */
.tabelwrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6rem 0;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
}
.tabelwrap>table{margin:0;min-width:100%;width:auto;border-radius:0}
.tabelwrap>table th:first-child,.tabelwrap>table td:first-child{padding-left:1rem}
.tabelwrap>table th:last-child,.tabelwrap>table td:last-child{padding-right:1rem}
.tabelwrap>table tr:last-child td{border-bottom:0}
main table{table-layout:auto}
main td,main th{word-break:normal;overflow-wrap:anywhere}

/* Veel oude pagina's zetten hun raster rechtstreeks op de tag, met
   minmax(300px, 1fr). Op een telefoon van 390 pixels past die minimumbreedte
   niet binnen de kolom en duwt het raster de pagina scheef. */
@media (max-width:760px){
  main [style*="grid-template-columns"],
  main .service-grid,
  main .form-row{grid-template-columns:1fr!important}
  main [style*="minmax"]{grid-template-columns:1fr!important}
}
@media (max-width:480px){
  :root{--gutter:16px}
  .modern-card,.heights-box,.info-box,.success-box,.warning-box,
  .highlight-box,.training-section{padding:20px 18px}
}

/* Lange losse woorden (URL's, technische termen) mogen afbreken. */
main p,main li,main h1,main h2,main h3,main h4,main dd,main dt{overflow-wrap:break-word}
main a{overflow-wrap:break-word}

/* Niets binnen de inhoud mag breder worden dan de kolom. */
main img,main iframe,main video,main embed,main object,main pre{max-width:100%}
main pre{overflow-x:auto}

/* Rasteritems hebben standaard min-width:auto, waardoor een kolom niet kleiner
   kan worden dan de inhoud en het item buiten zijn baan groeit. */
main [style*="grid-template-columns"]>*,
main .service-grid>*,
main .form-row>*,
.footer-grid>*,.cta>*,.dict-grid>*{min-width:0}
@media (max-width:760px){
  main [style*="grid-template-columns"],
  main .service-grid,
  main .form-row{grid-template-columns:minmax(0,1fr)!important}
}