/* ==========================================================================
   Alimer — site.css
   Thema "Warm en rustig": Alimer-kleuren met Duolingo-vormtaal
   (tactiele knoppen, 2px randen, ronde vormen, grote koppen)
   ========================================================================== */

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

:root {
  /* Palet "Warm en rustig": vijf merkkleuren (groen, diepgroen, amber, bosgroen, crème),
     de tinten die het statuskaartje nodig heeft, en de vier statustoestanden. Niets
     daarbuiten; een nieuwe kleur komt eerst in huisstijl/DESIGN.md.
     Achtervoegsels: -soft = vlak, -line = 2px rand, -ink = als tekst, -deep = donkerder
     massief. Zie huisstijl/DESIGN.md voor wanneer u welke neemt. */
  --green: #286955;          /* primair, logokleur */
  --green-deep: #1B4A3B;     /* indrukrand, hover */
  --green-soft: #DDEDE4;     /* "in orde" */
  --green-line: #CFE4D8;     /* rand rond iets dat in orde is */
  --amber: #F2A541;          /* accent (enkel als vlak) */
  --amber-ink: #8A5A2F;      /* accent als tekst, indrukrand amber knop */
  --amber-soft: #FCEBD5;     /* "let op" */
  --amber-line: #F0D9B4;     /* rand rond "let op" */
  --red-ink: #8C3B2A;        /* "niet in orde" als tekst */
  --red-soft: #FBE9E4;       /* "niet in orde" */
  --red-line: #F2CFC5;       /* rand rond "niet in orde" */
  --forest: #2A3C2D;         /* donkere tekst en vlakken */
  --cream: #FBF8F2;          /* achtergrond */
  --neutral-soft: #F1ECE2;   /* statuspil zolang er niets te melden valt */
  --line: #EAE3D6;           /* 2px randen, ook de indrukrand van witte knoppen */

  --ink: var(--forest);
  --text: #4A5548;
  --muted: #7A8276;
  --neutral-ink: #62695F;    /* --muted haalt op --neutral-soft maar 3,4:1; dit 4,8:1 */
  --on-amber: #3A2600;       /* tekst op een amber vlak */
  --on-dark: rgba(251, 248, 242, .82);        /* crème op bosgroen */
  --on-dark-muted: rgba(251, 248, 242, .62);  /* kleine lettertjes op bosgroen */
  --on-dark-line: rgba(251, 248, 242, .14);   /* lijn op bosgroen */

  --display: "Nunito", "Segoe UI Rounded", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;

  --r-card: 20px;
  --r-block: 16px;
  --r-btn: 12px;

  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--body); font-size: 1rem; line-height: 1.6;
  color: var(--text); background: var(--cream);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 12px; background: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Typografie ---------- */
.h-hero { font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1.02; font-weight: 900; letter-spacing: -0.02em; }
.h-page { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; }
.h-section { font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.1; font-weight: 900; }
.h-block { font-size: 1.35rem; line-height: 1.25; font-weight: 800; }
.lead { font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.6; max-width: 34em; }
.kicker { font-size: .92rem; font-weight: 600; color: var(--amber-ink); margin-bottom: 14px; }

/* ---------- Knoppen: tactiel ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 800 1.02rem/1 var(--display); letter-spacing: .01em;
  padding: 14px 22px 13px; border-radius: var(--r-btn);
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-bottom-width: 4px;
  transition: transform .12s var(--ease), border-bottom-width .12s var(--ease), background-color .2s var(--ease), filter .2s var(--ease);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); border-bottom-color: var(--green-deep); }
.btn-light, .btn-outline { background: #fff; color: var(--ink); border-color: var(--line); border-bottom-color: var(--line); }
.btn-light:hover, .btn-outline:hover { filter: none; background: var(--cream); }
.btn-amber { background: var(--amber); color: var(--on-amber); border-color: var(--amber); border-bottom-color: var(--amber-ink); }

.link {
  font-weight: 600; color: var(--green); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s var(--ease); padding-bottom: 2px;
}
.link:hover { background-size: 100% 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 242, .94);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 2px solid transparent; transition: border-color .3s var(--ease);
}
.site-header.is-scrolled { border-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 80px; position: relative; }
.brand img { height: 32px; width: auto; }
.menu { display: flex; align-items: center; gap: 26px; }
/* Enkel de directe kinderen: de links binnen het uitklappaneel hebben hun eigen stijl. */
.menu > a:not(.btn), .subknop { font-family: var(--display); font-weight: 800; font-size: 1.02rem; color: var(--ink); text-decoration: none; position: relative; padding: 6px 2px; }
.menu > a:not(.btn)::after, .subknop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; border-radius: 4px;
  background: var(--amber); transform: scaleX(0); transform-origin: center; transition: transform .35s var(--pop);
}
.menu > a:not(.btn):hover::after, .menu > a[aria-current="page"]::after,
.subknop:hover::after, .subknop.is-tak::after, .heeftsub[open] > .subknop::after { transform: scaleX(1); }
.menu .btn { padding: 11px 18px 10px; font-size: .95rem; }
.menu-toggle { display: none; }

/* ---------- Uitklappaneel onder IT ----------
   Een <details>, zodat het menu ook zonder JavaScript openklapt. site.js voegt er enkel
   het sluiten aan toe: bij Escape, bij een klik ernaast en bij het wegtabben. */
/* Het paneel hangt aan de balk, niet aan de knop: IT staat rechts in de kop, dus een
   paneel van 640 px dat daar links begint, loopt het scherm uit. Zo sluit de rechterrand
   ervan aan op die van de knop "Plan een kennismaking". */
.heeftsub { position: static; }
.subknop { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.subknop::-webkit-details-marker { display: none; }
.chev {
  flex: none; width: 7px; height: 7px; border-right: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor;
  border-radius: 0 0 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease);
}
.heeftsub[open] > .subknop .chev { transform: translateY(2px) rotate(-135deg); }
.subpaneel {
  position: absolute; top: calc(100% + 16px); right: var(--gutter); z-index: 60;
  width: 640px; max-width: calc(100vw - 2 * var(--gutter));
  background: #fff; border: 2px solid var(--line); border-bottom-width: 5px;
  border-radius: var(--r-card); padding: 14px;
}
.subpaneel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.subpaneel-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; text-decoration: none; transition: background-color .2s var(--ease); }
.subpaneel-item:hover { background: var(--cream); }
.subpaneel-item[aria-current="page"] { background: var(--green-soft); }
.subpaneel .ico { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--green-soft); color: var(--green-deep); display: grid; place-items: center; }
.subpaneel .ico svg { width: 20px; height: 20px; display: block; }
.subpaneel-item[aria-current="page"] .ico { background: #fff; }
.subpaneel-item b { display: block; font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--ink); line-height: 1.25; }
.subpaneel-item em { display: block; font-style: normal; font-size: .83rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.subpaneel-voet { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 8px; padding: 13px 10px 2px; border-top: 2px solid var(--line); }
.subpaneel-meer { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--green); text-decoration: none; }
.subpaneel-meer:hover { color: var(--green-deep); }
.subpaneel-meer .chev { transform: translateX(-1px) rotate(-45deg); }
.subpaneel-scan { display: flex; align-items: center; gap: 11px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--amber-soft); text-decoration: none; }
.subpaneel-scan .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--amber); color: var(--on-amber); }
.subpaneel-scan .ico svg { width: 18px; height: 18px; }
.subpaneel-scan b { display: block; font-family: var(--display); font-weight: 800; font-size: .92rem; color: var(--on-amber); line-height: 1.25; }
.subpaneel-scan em { display: block; font-style: normal; font-size: .81rem; color: var(--amber-ink); margin-top: 2px; }

@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; background: #fff; cursor: pointer; }
  .menu-toggle span { position: relative; width: 18px; height: 2.5px; background: var(--ink); border-radius: 2px; }
  .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); }
  .menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
  .menu-toggle[aria-expanded="true"] span { background: transparent; }
  .menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
  .menu {
    position: absolute; left: 0; right: 0; top: 80px; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 2px solid var(--line); padding: 8px var(--gutter) 22px;
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .4s var(--ease), visibility 0s linear .4s;
  }
  .menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .4s var(--ease); }
  .menu > a:not(.btn), .subknop { padding: 14px 0; border-bottom: 2px solid var(--line); font-size: 1.1rem; }
  .menu > a:not(.btn)::after, .subknop::after { display: none; }
  .menu .btn { margin-top: 16px; padding: 15px 20px 14px; }

  /* Geen zwevend paneel op een smal scherm: IT wordt een rij die openklapt. */
  .subknop { display: flex; justify-content: space-between; }
  .subpaneel {
    position: static; width: auto; max-width: none; padding: 4px 0 12px;
    background: transparent; border: 0; border-bottom: 2px solid var(--line); border-radius: 0;
  }
  .subpaneel-grid { grid-template-columns: 1fr; gap: 0; }
  .subpaneel-item { padding: 9px 4px; align-items: center; }
  .subpaneel-item em { display: none; }
  .subpaneel-item b { font-size: 1rem; }
  .subpaneel .ico { width: 28px; height: 28px; border-radius: 9px; }
  .subpaneel .ico svg { width: 15px; height: 15px; }
  .subpaneel-voet { margin-top: 2px; padding: 0; border-top: 0; }
  .subpaneel-meer { padding: 9px 4px; font-size: 1rem; }
  /* De scan staat als eigen regel in ditzelfde menu, vlak eronder. */
  .subpaneel-scan { display: none; }
}

/* ---------- Rij snelkoppelingen onder de hero ---------- */
.sprong { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: clamp(30px, 4vw, 46px); padding-top: 20px; border-top: 2px solid var(--line); }
.sprong-kop { width: 100%; font-size: .88rem; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.sprong a, .sprong-hier {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 17px 7px 9px;
  font-family: var(--display); font-weight: 800; font-size: .92rem; color: var(--ink); text-decoration: none;
  border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 999px;
}
.sprong a { background: #fff; transition: transform .12s var(--ease), border-bottom-width .12s var(--ease), background-color .2s var(--ease); }
.sprong a:hover { background: var(--cream); }
.sprong a:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.sprong-hier { background: var(--green-soft); color: var(--green-deep); border-color: var(--green-line); border-bottom-color: var(--green-line); }
.sprong .ico { flex: none; width: 27px; height: 27px; border-radius: 9px; background: var(--green-soft); color: var(--green-deep); display: grid; place-items: center; }
.sprong-hier .ico { background: #fff; }
.sprong .ico svg { width: 15px; height: 15px; display: block; }

/* ---------- Hero (licht) ---------- */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 104px); position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.hero .lead, .page-hero .lead { margin-top: 22px; color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; align-items: flex-start; }
.hero-note { margin-top: 18px; font-size: .92rem; color: var(--muted); }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.rise { opacity: 0; transform: translateY(18px); animation: rise .8s var(--ease) forwards; }
.rise.d1 { animation-delay: .06s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .28s; } .rise.d4 { animation-delay: .4s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Statuskaartje ---------- */
.status {
  background: #fff; color: var(--ink); border-radius: var(--r-card);
  border: 2px solid var(--line); border-bottom-width: 6px; padding: 20px 20px 16px;
  opacity: 0; transform: translateY(24px) scale(.98); animation: pop .7s var(--pop) .3s forwards;
}
@keyframes pop { to { opacity: 1; transform: none; } }
.status-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; }
.status-title { font-family: var(--display); font-weight: 900; font-size: 1.12rem; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--amber-ink); }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); position: relative; }
.live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; animation: ping 2.4s var(--ease) 2.6s infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

.status-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; margin-top: 8px; border: 2px solid var(--line); border-radius: 14px; font-size: .94rem; }
.status-row.no-tag { grid-template-columns: 1fr auto; }
.status-row b { font-weight: 600; color: var(--ink); }
.tag { font-size: .72rem; font-weight: 600; padding: 3px 0; width: 32px; text-align: center; border-radius: 8px; line-height: 1.3; }
.tag-hr { background: var(--amber-soft); color: var(--amber-ink); }
.tag-it { background: var(--green-soft); color: var(--green-deep); }

.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px;
  min-width: 98px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-family: var(--display); font-size: .8rem; font-weight: 800; white-space: nowrap;
  background: var(--neutral-soft); color: var(--neutral-ink);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.pill .chk { width: 12px; height: 12px; flex: none; }
.pill .chk path { stroke: currentColor; stroke-width: 2.8; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s var(--ease) .08s; }
.pill .wait, .pill .done { transition: opacity .25s var(--ease); }
.pill .done { position: absolute; right: 12px; opacity: 0; display: inline-flex; align-items: center; gap: 6px; }
.pill .wait::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.status-row.is-ok .pill { background: var(--green-soft); color: var(--green-deep); animation: bump .45s var(--pop); }
.status-row.is-ok .pill .wait { opacity: 0; }
.status-row.is-ok .pill .done { opacity: 1; }
.status-row.is-ok .pill .chk path { stroke-dashoffset: 0; }
@keyframes bump { 40% { transform: scale(1.08); } }

.status-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--cream); font-size: .85rem; color: var(--muted); }
.status-foot strong { font-family: var(--display); font-weight: 900; font-size: 1.08rem; color: var(--green); font-variant-numeric: tabular-nums; }

/* ---------- Secties ---------- */
.section { padding: clamp(72px, 10vw, 124px) 0; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 8vw, 104px); }
.section-white { background: #fff; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 60px); }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

/* Peilers */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pillar { padding: clamp(30px, 4vw, 48px); display: flex; flex-direction: column; background: #fff; border: 2px solid var(--line); border-bottom-width: 6px; border-radius: var(--r-card); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.pillar:hover { transform: translateY(-3px); }
.pillar-hr:hover { border-color: var(--amber-line); }
.pillar-it:hover { border-color: var(--green-line); }
.pillar-mark { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-width: 88px; height: 72px; padding: 0 18px; border-radius: 18px; font-family: var(--display); font-weight: 900; font-size: 2.6rem; line-height: 1; margin-bottom: 24px; border-bottom: 5px solid; }
.pillar-hr .pillar-mark { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--amber-line); }
.pillar-it .pillar-mark { background: var(--green-soft); color: var(--green-deep); border-color: var(--green-line); }
.pillar h3 { margin-bottom: 10px; }
.pillar p { max-width: 30em; }
.ticks { margin: 24px 0 30px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 32px; color: var(--ink); font-weight: 500; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: 8.5px; width: 8px; height: 4.5px; border-left: 2.4px solid var(--green); border-bottom: 2.4px solid var(--green); transform: rotate(-45deg); }
.pillar .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

/* Scanstrook: de gratis DNS-scan als lage drempel, onder de twee pijlers. Amber in plaats
   van het groen van de pijlers, zodat ze leest als een uitnodiging en niet als een derde
   dienst. Op een smal scherm zakt de knop onder de tekst, over de volle breedte. */
.scanband {
  margin-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(18px, 2.6vw, 32px); align-items: center;
  padding: clamp(24px, 3.2vw, 34px) clamp(24px, 3.4vw, 40px);
  background: #fff; border: 2px solid var(--line); border-bottom-width: 6px;
  border-radius: var(--r-card);
}
.scanband .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--amber-soft); display: grid; place-items: center; }
.scanband .ico svg { width: 26px; height: 26px; color: var(--amber-ink); }
.scanband h3 { margin-bottom: 6px; }
.scanband p { max-width: 42em; font-size: .97rem; }
.scanband .btn { white-space: nowrap; }
@media (max-width: 860px) {
  .scanband { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .scanband .btn { grid-column: 1 / -1; justify-self: stretch; }
}

/* Doelgroep */
.audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.audience article { background: #fff; border: 2px solid var(--line); border-radius: var(--r-block); padding: 26px 24px; }
.audience .num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--green-soft); color: var(--green-deep); font-family: var(--display); font-weight: 900; margin-bottom: 16px; }
.audience h3 { margin-bottom: 8px; }
.audience p { font-size: .98rem; }
@media (max-width: 860px) { .audience { grid-template-columns: 1fr; } }

/* Werkwijze */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; list-style: none; margin: 0; padding: 0; }
.steps::before, .steps::after { content: ""; position: absolute; left: 26px; right: calc((100% - 84px) / 4 - 27px); top: 25px; height: 4px; border-radius: 4px; }
.steps::before { background: var(--line); }
.steps::after { background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .15s; }
.steps.is-drawn::after { transform: scaleX(1); }
.step { position: relative; }
.step-num {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: 1.3rem; color: var(--muted);
  background: #fff; border: 2px solid var(--line); border-bottom-width: 5px;
  margin-bottom: 22px; position: relative; z-index: 1;
  transition: border-color .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), transform .45s var(--pop);
}
.steps.is-drawn .step-num { border-color: var(--green); border-bottom-color: var(--green-deep); color: var(--green); }
.steps.is-drawn .step:nth-child(1) .step-num { transition-delay: .15s; }
.steps.is-drawn .step:nth-child(2) .step-num { transition-delay: .65s; }
.steps.is-drawn .step:nth-child(3) .step-num { transition-delay: 1.1s; }
.steps.is-drawn .step:nth-child(4) .step-num { transition-delay: 1.55s; background: var(--green); color: #fff; }
.step h3 { font-size: 1.2rem; margin-bottom: 8px; }
.step p { font-size: .97rem; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 30px; }
  /* Verticaal loopt de lijn per stap, van het ene cijfer tot het volgende (30px tussenruimte
     plus 27px tot het midden). Eén lijn over de hele lijst zou onder het laatste cijfer
     doorlopen, omdat de laatste stap door zijn tekst hoger is dan het cijfer. */
  .steps::before, .steps::after { content: none; }
  .step:not(:last-child)::before, .step:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 27px; bottom: -57px; width: 4px; border-radius: 4px; }
  .step:not(:last-child)::before { background: var(--line); }
  .step:not(:last-child)::after { background: var(--green); transform: scaleY(0); transform-origin: top; transition: transform .5s linear; }
  .steps.is-drawn .step::after { transform: scaleY(1); }
  .steps.is-drawn .step:nth-child(1)::after { transition-delay: .15s; }
  .steps.is-drawn .step:nth-child(2)::after { transition-delay: .65s; transition-duration: .45s; }
  .steps.is-drawn .step:nth-child(3)::after { transition-delay: 1.1s; transition-duration: .45s; }
  .step { padding-left: 78px; min-height: 54px; }
  .step-num { position: absolute; left: 0; top: 0; margin: 0; }
}

/* Principes */
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.principle { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 26px; background: #fff; border: 2px solid var(--line); border-radius: var(--r-block); }
.principle .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--green-soft); display: grid; place-items: center; }
.principle svg { width: 26px; height: 26px; color: var(--green-deep); }
.principle h3 { font-size: 1.15rem; margin-bottom: 6px; }
.principle p { font-size: .97rem; }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }

/* Diensten */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.service { border: 2px solid var(--line); border-radius: var(--r-card); padding: 30px 30px 28px; background: #fff; }
.service-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--green-soft); display: grid; place-items: center; margin-bottom: 20px; }
.service-ico svg { width: 26px; height: 26px; color: var(--green-deep); }
.service h3 { font-size: 1.25rem; margin-bottom: 8px; }
.service p { font-size: .97rem; }
.service .ticks { margin: 18px 0 0; gap: 8px; }
.service .ticks li { font-size: .95rem; }
.service-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; background: var(--cream); }
.service-wide .ticks { margin-top: 0; align-content: center; }
.service-cta { margin-top: 24px; }
@media (max-width: 860px) { .services { grid-template-columns: 1fr; } .service-wide { grid-template-columns: 1fr; row-gap: 28px; } }

/* ---------- Ontwikkeling op maat ---------- */
/* De kaart naast de titel van /it/ontwikkeling-op-maat/: vier soorten werk onder elkaar.
   Geen statuskaartje: er valt hier niets na te kijken, dus een pil zou "in orde" beloven
   waar enkel een opsomming staat. */
.bouwkaart { background: #fff; border: 2px solid var(--line); border-bottom-width: 6px; border-radius: var(--r-card); padding: 28px 30px; }
.bouwkaart h2 { font-size: 1.18rem; margin-bottom: 4px; }
.bouwkaart-sub { font-size: .94rem; color: var(--muted); margin-bottom: 20px; }
.bouwlijst { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.bouwlijst li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.bouwlijst .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--green-soft); display: grid; place-items: center; }
.bouwlijst .ico svg { width: 24px; height: 24px; color: var(--green-deep); }
.bouwlijst b { display: block; font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--ink); }
.bouwlijst b + span { font-size: .92rem; color: var(--text); }

/* Een tegel met het merk van een ander erop. Wit in plaats van lichtgroen: een vreemd logo
   hoort niet in ons palet getrokken te worden. Zie assets/img/merken/HERKOMST.md. */
.ico-merk { background: #fff; border: 2px solid var(--line); }
.ico-merk img { width: 30px; height: 30px; }

/* Het portfolio van eigen apps. auto-fit, want er komen er bij: met een app staat er een
   brede kaart, met drie staan ze naast elkaar. */
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.app { background: #fff; border: 2px solid var(--line); border-bottom-width: 6px; border-radius: var(--r-card); padding: 28px 30px; display: grid; align-content: start; gap: 28px; }
.app-tekst { display: grid; align-content: start; gap: 14px; }
.app-visueel img { display: block; width: 100%; height: auto; border-radius: var(--r-block); border: 2px solid var(--line); }
/* Staat er maar een app, dan is de kaart zo breed als de sectie en komt het beeld ernaast.
   Vanaf twee apps staan de kaarten naast elkaar en zakt het beeld onder de tekst. */
@media (min-width: 900px) { .app:only-child { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 44px; } }
.app-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 34px; }
.app-kop h3 { font-size: 1.45rem; margin: 0; }
.app-kop img { height: 30px; width: auto; display: block; }
.app p { font-size: .97rem; margin: 0; }
.app .ticks { margin: 0; gap: 8px; }
.app .ticks li { font-size: .95rem; }
.app .service-cta { margin-top: 6px; }
/* De toestand van een app: groen zodra ze te gebruiken is, grijs zolang ze dat niet is.
   Dezelfde afspraak als bij het statuskaartje, en daarom ook dezelfde kleuren. */
.app-staat { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: .82rem; background: var(--neutral-soft); color: var(--neutral-ink); border: 2px solid var(--line); }
.app-staat.is-klaar { background: var(--green-soft); color: var(--green-deep); border-color: var(--green-line); }

.page-hero { padding: clamp(44px, 6vw, 84px) 0 clamp(56px, 7vw, 92px); }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--green); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 2px solid var(--line); border-radius: var(--r-block); transition: border-color .25s var(--ease); }
.faq details[open] { border-color: var(--green-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 22px; font-family: var(--display); font-weight: 800; font-size: 1.12rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--green-soft); position: relative; transition: transform .45s var(--pop), background-color .25s var(--ease); }
.faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.6px; background: var(--green-deep); border-radius: 2px; transform: translate(-50%, -50%); }
.faq .plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .45s var(--pop); }
.faq details[open] .plus { transform: rotate(180deg); background: var(--amber-soft); }
.faq details[open] .plus::before, .faq details[open] .plus::after { background: var(--amber-ink); }
.faq details[open] .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .answer { overflow: hidden; }
.faq .answer p { padding: 0 64px 22px 22px; max-width: 48em; }

/* ---------- Contactblok ---------- */
.cta { border-radius: var(--r-card); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); overflow: hidden; background: var(--forest); color: var(--on-dark); border-bottom: 6px solid var(--green-deep); }
.cta h2 { color: #fff; }
.cta-main { padding: clamp(36px, 5vw, 60px); }
.cta-main .lead { color: var(--on-dark); margin: 16px 0 30px; }
.cta-side { background: var(--green); padding: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.contact-line { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; color: #fff; text-decoration: none; font-weight: 500; }
.contact-line svg { width: 21px; height: 21px; color: var(--amber); }
.contact-line span { background-image: linear-gradient(var(--amber), var(--amber)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s var(--ease); }
a.contact-line:hover span { background-size: 100% 2px; }
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; } }

/* ---------- Contactpagina ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 80px); align-items: start; }
.contact-aside .contact-line { color: var(--ink); }
.contact-aside .contact-line svg { color: var(--green); }
.contact-aside .contact-line span { background-image: linear-gradient(var(--green), var(--green)); }
.contact-aside .stack { display: grid; gap: 16px; margin-top: 28px; }
.contact-aside .note { margin-top: 32px; padding: 20px 22px; border-radius: var(--r-block); background: #fff; border: 2px solid var(--line); font-size: .95rem; }
.form { border: 2px solid var(--line); border-bottom-width: 6px; border-radius: var(--r-card); padding: clamp(24px, 4vw, 42px); background: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: grid; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label, .field legend { font-size: .92rem; font-weight: 600; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea { font: inherit; color: var(--ink); background: var(--cream); border: 2px solid var(--line); border-radius: 12px; padding: 13px 14px; width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.choice { position: relative; }
.choice input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; padding: 10px 16px 9px; border-radius: 12px; border: 2px solid var(--line); border-bottom-width: 4px; font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--ink); background: #fff; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); }
.choice span:active { transform: translateY(2px); }
.choice input:checked + span { background: var(--green-soft); border-color: var(--green); color: var(--green-deep); }
.choice input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.form-privacy { font-size: .94rem; margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 26px; }
.form-foot small { color: var(--muted); }
.form-msg { grid-column: 1 / -1; display: none; padding: 14px 16px; border-radius: 12px; font-size: .95rem; }
noscript:has(> .form-msg) { grid-column: 1 / -1; }
.form-msg.is-error { display: block; background: var(--red-soft); color: var(--red-ink); border: 2px solid var(--red-line); }
.form-done { display: none; }
.form.is-sent .form-body { display: none; }
.form.is-sent .form-done { display: block; animation: pop .6s var(--pop) both; }
.done-mark { width: 64px; height: 64px; border-radius: 18px; background: var(--green-soft); display: grid; place-items: center; margin-bottom: 22px; border-bottom: 5px solid var(--green-line); }
.done-mark svg { width: 30px; height: 30px; }
.done-mark path { stroke: var(--green-deep); stroke-width: 2.8; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s var(--ease) .25s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Juridisch ---------- */
.prose { max-width: 44em; background: #fff; border: 2px solid var(--line); border-radius: var(--r-card); padding: clamp(24px, 4vw, 48px); }
.prose h2 { font-size: 1.35rem; margin: 36px 0 10px; }
.prose h2:first-of-type { margin-top: 0; }
.prose p, .prose li { margin-bottom: 12px; }
.prose a { color: var(--green); }
.prose ul { padding-left: 1.2em; margin-bottom: 12px; }
.prose-intro { font-size: 1.08rem; color: var(--forest); margin-bottom: 28px !important; }
/* De tabel met de verwerkingen: te breed voor een gsm, dus scrollt ze in haar eigen kader. */
.prose-tabel { overflow-x: auto; margin: 4px 0 20px; border: 2px solid var(--line); border-radius: 14px; }
.prose-tabel table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9rem; line-height: 1.45; }
.prose-tabel th, .prose-tabel td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 2px solid var(--line); }
.prose-tabel thead th { background: var(--cream); font-weight: 600; color: var(--forest); font-size: .8rem; letter-spacing: .02em; }
.prose-tabel tbody th { font-weight: 600; color: var(--forest); width: 18%; }
.prose-tabel tbody tr:last-child th, .prose-tabel tbody tr:last-child td { border-bottom: 0; }
.prose-bezwaar { background: var(--amber-soft); border-radius: 14px; padding: 18px 20px; margin: 8px 0 16px; }
.prose-bezwaar h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--forest); }
.prose-bezwaar p { margin: 0 !important; }
.prose-adres { background: var(--cream); border-radius: 14px; padding: 14px 18px; }
.prose-versie { margin-top: 28px; padding-top: 16px; border-top: 2px solid var(--line); font-size: .88rem; color: var(--amber-ink); }

/* ---------- Prijzen (/it/websites/) ---------- */
/* De bedragen komen uit de productcatalogus; zie tools/producten.json. */
.p-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.p-kaart { background: #fff; border: 2px solid var(--line); border-bottom-width: 6px; border-radius: var(--r-card); padding: 26px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.p-kaart.is-uit { border-color: var(--green); border-bottom-color: var(--green-deep); }
.p-label { position: absolute; top: -14px; left: 24px; background: var(--amber); color: var(--on-amber); font: 800 .8rem/1 var(--display); padding: 7px 12px; border-radius: 999px; }
.p-naam { font: 900 1.3rem/1.2 var(--display); color: var(--ink); margin: 0; }
.p-sub { color: var(--muted); font-size: .92rem; margin: -8px 0 0; }
.p-prijs { font: 900 2.2rem/1 var(--display); color: var(--green); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.p-prijs small { font: 600 .95rem/1 var(--body); color: var(--muted); margin-left: 4px; }
.p-prijs.p-offerte { font-size: 1.6rem; }
.p-lijst { display: grid; gap: 8px; margin: 4px 0 0; }
.p-lijst li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: .95rem; }
.p-lijst .vink { width: 16px; height: 16px; margin-top: 3px; }
.p-lijst .vink path { stroke: var(--green); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.p-kaart .btn { margin-top: auto; align-self: flex-start; }
.p-opties { margin-top: 28px; background: #fff; border: 2px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.p-opties h3 { margin: 0; padding: 18px 22px; font: 800 1.05rem/1.2 var(--display); border-bottom: 2px solid var(--line); background: var(--cream); }
.p-optie { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 14px 22px; border-bottom: 2px solid var(--line); align-items: baseline; }
.p-optie:last-child { border-bottom: 0; }
.p-optie b { color: var(--ink); font-weight: 600; }
.p-optie span { color: var(--muted); font-size: .9rem; grid-column: 1; }
.p-optie strong { font: 900 1.15rem/1 var(--display); color: var(--green); grid-row: 1; grid-column: 2; font-variant-numeric: tabular-nums; text-align: right; }
.p-optie strong small { font: 600 .85rem/1 var(--body); color: var(--muted); margin-left: 4px; }
/* Op een smal scherm krijgt de uitleg de volle breedte, anders knijpt een prijs met eenheid ze samen. */
@media (max-width: 560px) { .p-optie:has(small) span { grid-column: 1 / -1; } }
/* Links midden in lopende tekst: groen, zoals in .prose. */
.lead a, .service p a, .answer a, .p-voet a { color: var(--green); font-weight: 600; text-underline-offset: 2px; }
.p-tweede { margin-top: 64px; }
.p-voet { margin-top: 18px; font-size: .85rem; color: var(--muted); max-width: 60em; }

/* ---------- DNS-scan ---------- */
/* Het `hidden`-attribuut verliest het van elke display-regel hieronder; zonder deze regel
   staan de blokken van de scan al open voor er iets gescand is. */
[hidden] { display: none !important; }

/* Het invoerblok blijft staan waar het staat, ook tijdens en na de scan. De uitslag komt in
   een eigen paneel over de volle breedte daaronder. Twee eerdere pogingen lieten de uitslag
   in of naast de kaart groeien; dan verspringt er altijd iets wat de bezoeker al zag. */
/* De plakkende kop is 80 hoog en zou anders over de titel van het paneel vallen: wie op
   "Kijk mijn domein na" klikt, landt dan midden in de kaarten. Dezelfde marge geldt voor
   elk anker op de site, zoals de sla-over-link naar #inhoud. */
:root { --kop-hoogte: 80px; }
[id], .scan-sectie { scroll-margin-top: calc(var(--kop-hoogte) + 18px); }

.scan-sectie { padding-top: 0; }

/* De uitslag springt niet in beeld maar groeit open. Naar een hoogte animeren die je niet
   op voorhand kent, kan alleen met dit grid-trucje: de rij gaat van 0fr naar 1fr en het
   kind eronder wordt meegenomen. Bij prefers-reduced-motion zet de regel onderaan deze
   overgang op nul, en dan verschijnt alles gewoon meteen. */
.scan-onthul { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .45s var(--ease); }
.scan-onthul.is-open { grid-template-rows: 1fr; opacity: 1; }
.scan-onthul-in { overflow: hidden; min-height: 0; }
.scan-paneel {
  background: #fff; border: 2px solid var(--line); border-bottom-width: 6px;
  border-radius: var(--r-card); padding: clamp(22px, 3.2vw, 34px);
  animation: pop .55s var(--pop) both;
}
.scan-paneel-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.scan-domein { font-family: var(--display); font-weight: 900; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--ink); overflow-wrap: anywhere; }
.scan-domein:focus { outline: none; }

/* Vijf stappen naast elkaar op een breed scherm, onder elkaar op een smal. Wat er over een
   stap te zeggen valt, staat niet in de stap zelf maar in een toelichting over de volle
   breedte eronder; anders rekt één lange tekst alle vijf de stappen mee uit. `dense` doet
   het plaatswerk: de toelichting staat in de DOM direct na haar stap, neemt de eerste lege
   rij, en de volgende stappen vullen de rij erboven verder aan. Zo komt ze op elke breedte
   onder de rij van haar eigen stap. */
.scan-stappen { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; margin-top: 18px; }
.scan-stap {
  display: grid; align-content: start; gap: 10px;
  padding: 14px 15px; border: 2px solid var(--line); border-radius: 14px;
  opacity: .45; transition: opacity .35s var(--ease), border-color .35s var(--ease);
}
.scan-stap b { font-weight: 600; font-size: .94rem; line-height: 1.35; color: var(--ink); }

/* Het pijltje wijst naar de stap waar de toelichting bij hoort; site.js zet de plaats in
   --pijl. Staat er al een andere toelichting tussen, dan wijst het nergens meer naar en
   neemt de naam van de stap zijn rol over (.is-los). */
.scan-toelichting {
  grid-column: 1 / -1; position: relative;
  padding: 12px 16px; border: 2px solid var(--amber-line); border-radius: 14px; background: var(--amber-soft);
  opacity: 0; transform: translateY(-6px); animation: pop .45s var(--pop) forwards;
}
.scan-toelichting.is-fout { border-color: var(--red-line); background: var(--red-soft); }
.scan-toelichting p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink); }
.scan-toelichting .scan-toelichting-kop { display: none; font-family: var(--display); font-weight: 800; font-size: .84rem; margin-bottom: 2px; color: var(--amber-ink); }
.scan-toelichting.is-fout .scan-toelichting-kop { color: var(--red-ink); }
.scan-toelichting.is-los .scan-toelichting-kop { display: block; }
.scan-toelichting::before, .scan-toelichting::after {
  content: ""; position: absolute; left: var(--pijl, 50%); width: 0; height: 0;
  border: solid transparent; transform: translateX(-50%);
}
.scan-toelichting::before { bottom: 100%; border-width: 0 9px 10px; border-bottom-color: var(--amber-line); }
.scan-toelichting::after { bottom: calc(100% - 3px); border-width: 0 7px 8px; border-bottom-color: var(--amber-soft); }
.scan-toelichting.is-fout::before { border-bottom-color: var(--red-line); }
.scan-toelichting.is-fout::after { border-bottom-color: var(--red-soft); }
.scan-toelichting.is-los::before, .scan-toelichting.is-los::after { display: none; }
.scan-stap.is-klaar { opacity: 1; }
.scan-stap.is-ok { border-color: var(--green-line); }
.scan-stap.is-letop { border-color: var(--amber-line); }
.scan-stap.is-fout { border-color: var(--red-line); }

.scan-pil {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  justify-self: start; height: 26px; padding: 0 12px; border-radius: 999px;
  font-family: var(--display); font-size: .76rem; font-weight: 800; white-space: nowrap;
  background: var(--neutral-soft); color: var(--neutral-ink);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.scan-pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1s ease-in-out infinite; }
.scan-stap.is-klaar .scan-pil::before { display: none; }
.scan-stap.is-klaar .scan-pil { animation: bump .45s var(--pop); }
.scan-stap.is-ok .scan-pil { background: var(--green-soft); color: var(--green-deep); }
.scan-stap.is-letop .scan-pil { background: var(--amber-soft); color: var(--amber-ink); }
.scan-stap.is-fout .scan-pil { background: var(--red-soft); color: var(--red-ink); }
.scan-pil .chk { width: 12px; height: 12px; flex: none; }
.scan-pil .chk path { stroke: currentColor; stroke-width: 2.8; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s var(--ease) .08s; }
.scan-stap.is-klaar .scan-pil .chk path { stroke-dashoffset: 0; }

.scan-balk { height: 6px; margin-top: 18px; border-radius: 999px; background: var(--line); overflow: hidden; }
.scan-balk span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--green); transition: width .45s var(--ease); }

/* Oordeel links, het aanbod om het rapport te mailen rechts. */
.scan-slot { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 48px); margin-top: 26px; padding-top: 26px; border-top: 2px solid var(--line); }
.scan-oordeel > h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.scan-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.scan-rapport { padding: 20px 22px; border-radius: var(--r-block); background: var(--cream); border: 2px solid var(--line); align-self: start;
  transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.scan-rapport h3 { font-size: 1.05rem; }
.scan-rapport-veld { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 14px; }
.scan-rapport-veld .field { flex: 1 1 11em; min-width: 0; }
.scan-rapport-veld .btn { flex: none; max-width: 100%; padding-top: 13px; padding-bottom: 12px; }
.scan-rapport-klein { display: block; margin-top: 12px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.scan-rapport .form-msg { margin-top: 12px; }
/* Zodra het rapport onderweg is, kleurt het blok naar het lichtgroen dat op deze pagina
   "in orde" betekent. Het vinkje is hetzelfde als na het contactformulier, zodat elke
   bevestiging op de site er gelijk uitziet; op dat groene vlak wordt het tegeltje wit,
   anders valt groen op groen weg. De kop zegt het ook in woorden, dus het vinkje draagt
   de betekenis niet alleen. */
.scan-rapport:has(.scan-rapport-klaar:not([hidden])) { background: var(--green-soft); border-color: var(--green-line); }
.scan-rapport-klaar .done-mark { width: 56px; height: 56px; margin-bottom: 16px; background: #fff; border-bottom-color: var(--green-line); }
.scan-rapport-klaar .done-mark svg { width: 28px; height: 28px; }

/* Bewust bescheiden: de techniek hoort erbij voor wie ze doorstuurt naar zijn IT'er, maar
   ze mag het oordeel erboven niet overstemmen. */
.scan-details { margin-top: 22px; border-top: 2px solid var(--line); }
.scan-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 2px; font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--muted); }
.scan-details summary::-webkit-details-marker { display: none; }
.scan-details summary:hover { color: var(--ink); }
.scan-details .plus { width: 24px; height: 24px; flex: none; border-radius: 8px; background: var(--cream); position: relative; transition: transform .45s var(--pop), background-color .25s var(--ease); }
/* De balkjes meten 10 bij 2 px en niet 9 bij 2,4: het vakje is 24 px, dus alleen bij een even
   maat blijft de rand errond een heel getal ((24 - 10) / 2 = 7). Bij 9 px werd dat 7,5 px, en
   die halve pixel rondde de browser naar één kant af: de plus stond zichtbaar te ver rechts. */
.scan-details .plus::before, .scan-details .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--muted); border-radius: 2px; transform: translate(-50%, -50%); }
.scan-details .plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .45s var(--pop); }
.scan-details[open] .plus { transform: rotate(180deg); background: var(--green-soft); }
.scan-details[open] .plus::before, .scan-details[open] .plus::after { background: var(--green-deep); }
.scan-details .answer { padding: 0 2px 8px; }
.scan-techniek { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 28px; }
.scan-groep-kop { position: relative; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: .9rem; color: var(--ink); margin: 12px 0 4px; }
/* Het vraagteken is een bolletje van 20 px, maar het raakvlak is 44 px: het pseudo-element
   vergroot het zonder de kop op te duwen. Zelfde lichtgroen als de plus van de details. */
.scan-vraag { position: relative; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--green-soft); color: var(--green-deep); font-family: var(--display); font-weight: 900; font-size: .75rem; line-height: 20px; text-align: center; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.scan-vraag::before { content: ""; position: absolute; inset: -12px; }
.scan-vraag:hover, .scan-vraag[aria-expanded="true"] { background: var(--green); color: #fff; }
.scan-vraag:focus-visible { border-radius: 50%; }
.scan-vraag-uitleg { position: absolute; z-index: 3; top: calc(100% + 8px); left: 0; width: min(320px, 100%); padding: 12px 14px; background: #fff; border: 2px solid var(--line); border-radius: var(--r-btn); font-family: var(--body); font-weight: 400; font-size: .84rem; line-height: 1.5; color: var(--text); }
.scan-waarden { margin: 0 0 10px; }
.scan-waarden li { font-size: .84rem; color: var(--muted); line-height: 1.55; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .scan-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-slot { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .scan-stappen { grid-template-columns: 1fr; }
  /* Naast het veld past de knop hier niet meer; onder het veld neemt hij de volle breedte. */
  .scan-rapport-veld .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-pil::before { animation: none; }
  .scan-stap, .scan-paneel { transition: none; animation: none; }
  .scan-toelichting { animation: none; opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--forest); color: var(--on-dark); padding: 64px 0 36px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.footer-grid h4 { font-family: var(--display); font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 14px; }
.footer-grid ul { display: grid; gap: 9px; }
.footer-grid a { color: var(--on-dark); text-decoration: none; }
.footer-grid a:hover { color: #fff; }
.footer-brand img { height: 32px; width: auto; }
.footer-brand p { margin-top: 18px; max-width: 24em; }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 2px solid var(--on-dark-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--on-dark-muted); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.notfound { min-height: 60vh; display: grid; align-content: center; }
.mt-s { margin-top: 10px; }
.mt-0 { margin-top: 0; }
.lead-gap { margin: 18px 0 30px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .rise, .status { opacity: 1; transform: none; }
}