/* =========================================================
   VeldApp — designsysteem
   Merkkleuren en typografie volgen logo-export/README.txt
   en het ontwerp "VeldApp Website.dc.html".
   ========================================================= */

/* ---------- Lettertypen ----------
   Manrope en Sora komen van Google Fonts (SIL Open Font License) en
   worden vanaf ons eigen domein geserveerd: geen verzoek naar Google,
   en één variabel bestand per familie voor alle gewichten. */
@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: Sora;
  src: url("/assets/fonts/sora.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* Merk */
  --green: #2A9C4B;        /* merkgroen: iconen, accenten en grote koppen; geen knopvlak onder witte tekst (3,5:1) */
  --green-dark: #1F7C3A;   /* knoppen en links: 5,2:1 op wit */
  --green-darker: #1A6B32; /* hover van knoppen */
  --green-deep: #10371D;
  --green-night: #4CBE68;
  --green-light: #7BD494;  /* kleine tekst en labels op donkergroen */

  /* Inkt & tekst */
  --ink: #182420;
  --body: #3D4A42;
  --muted: #5B6B62;        /* secundaire tekst: 5,6:1 op wit */
  --soft: #8AA391;         /* alleen decoratief (scheidingstekens): 2,7:1, dus nooit als tekstkleur */

  /* Vlakken & lijnen */
  --line: #EDF1EE;
  --line-strong: #DCE5DE;
  --wash: #F5F7F6;
  --mint: #E8F6EC;
  --mint-2: #E7F3EC;
  --white: #fff;

  /* Accenten (labels, badges) */
  --purple: #6B46C1;
  --purple-bg: #EDE7FB;
  --blue: #2F6DB4;
  --blue-bg: #E6F0FB;
  --red: #C03A3A;          /* 5,4:1 op wit */
  --amber: #C98A1A;        /* vlak of icoon op donker; als tekst altijd --amber-text */
  --amber-text: #8A5E10;   /* 5,3:1 op --amber-bg */
  --amber-ink: #5E400C;
  --amber-bg: #FDF6E7;
  --amber-line: #F0E0BC;
  --amber-wash: #FFFBF3;

  /* Donkere secties en footer */
  --deep-text: #DCE9DE;
  --deep-muted: #A9C4B2;
  --deep-link: #C3D8C9;
  --deep-soft: #8FAE9B;
  --deep-line: rgba(255,255,255,.12);
  --mint-line: #CFE8D6;

  /* Toestel- en browsermockups */
  --metal-light: #E8ECE9;  /* laptopvoet, van licht naar donker */
  --metal: #CBD3CD;
  --metal-dark: #A6B0A9;
  --metal-edge: #A9B3AC;
  --metal-edge-light: #D5DBD6;

  /* Typografie */
  --font-head: Sora, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ritme */
  --wrap: 1200px;
  --gap: 24px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Schaduw */
  --shadow-sm: 0 1px 2px rgba(24, 36, 32, .05), 0 2px 8px rgba(24, 36, 32, .04);
  --shadow: 0 2px 6px rgba(24, 36, 32, .06), 0 12px 28px rgba(24, 36, 32, .07);
  --shadow-lg: 0 8px 24px rgba(24, 36, 32, .10), 0 32px 64px rgba(24, 36, 32, .12);

  --nav-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
img { height: auto; }
/* svg krijgt bewust geen max-width: dat laat inline iconen in een
   breedteloze ouder (zoals de menuknop) inklappen tot enkele pixels. */
svg { display: block; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 .5em;
  text-wrap: balance;
  /* Een kop breekt niet midden in een woord af ("be-taalt", "gemeen-ten"):
     alleen op de spaties. Een woord dat echt niet past, mag breken zodat de
     pagina niet oprekt; op telefoonbreedte krijgen alleen heel lange
     samenstellingen ("soortenmanagementplan") een afbreekstreepje. */
  overflow-wrap: break-word;
  hyphens: manual;
}
@media (max-width: 620px) {
  h1, h2 { hyphens: auto; hyphenate-limit-chars: 16 6 6; }
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1.1em; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }
li, td, th, dd, dt { overflow-wrap: break-word; }

a { color: var(--green-dark); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--green-deep); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin: .3em 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

::selection { background: var(--mint); color: var(--green-deep); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}
.wrap-narrow { max-width: 800px; margin: 0 auto; padding: 0 32px; }
.wrap-mid { max-width: 980px; margin: 0 auto; padding: 0 32px; }

section { padding: 88px 0; }
section.tight { padding: 56px 0; }
section.wash { background: var(--wash); }
section.mint { background: var(--mint); }
section.deep {
  background: var(--green-deep);
  color: var(--deep-text);
}
section.deep h1, section.deep h2, section.deep h3, section.deep h4 { color: #fff; }

section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Typografische helpers ----------
   Geen eyebrow-labels boven koppen: de kop draagt zichzelf en het
   kruimelpad benoemt de categorie al. */
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--muted);
  max-width: 65ch;
  line-height: 1.6;
}
section.deep .lead { color: var(--deep-muted); }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; }

.small { font-size: .875rem; color: var(--muted); }
.tiny { font-size: .8rem; color: var(--muted); }
.hl { color: var(--green); }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: 700 15px/1 var(--font-body);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--green-dark); color: #fff; box-shadow: 0 2px 10px rgba(31,124,58,.28); }
.btn-primary:hover { background: var(--green-darker); color: #fff; box-shadow: 0 6px 18px rgba(31,124,58,.34); }

.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-dark); background: #fff; }

.btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-light:hover { background: rgba(255,255,255,.2); color: #fff; }

.btn-white { background: #fff; color: var(--green-deep); }
.btn-white:hover { background: var(--mint); color: var(--green-deep); }

.btn-lg { padding: 17px 32px; font-size: 16px; }
.btn-sm { padding: 12px 18px; font-size: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row.center { justify-content: center; }

/* ---------- Kaarten ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
/* Eén koptekstmaat voor alle kaarten: 1,27× de kaarttekst, zodat het
   verschil tussen kop en tekst in één oogopslag te zien is. */
.card h3 { margin-bottom: .35em; font-size: 1.22rem; }
a.card { display: block; }
.card-problem { background: var(--amber-wash); border-color: var(--amber-line); }
/* Donkere kaart; de selectors zijn bewust specifieker dan .card p en a:hover,
   anders wint de gewone kaarttekstkleur en wordt de tekst onleesbaar. */
.card.card-deep, a.card.card-deep:hover { background: var(--green-deep); border-color: transparent; color: var(--deep-link); }
.card.card-deep h2, .card.card-deep h3 { color: #fff; }
.card.card-deep p { color: var(--deep-muted); }
.card.card-deep .badge { background: rgba(76,190,104,.18); color: var(--green-light); }
.card p { color: var(--muted); font-size: .96rem; }

.card-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--mint);
  color: var(--green-dark);
  margin-bottom: 18px;
}
.card-icon svg { width: 23px; height: 23px; }

section.deep .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}
section.deep .card p { color: var(--deep-muted); }
section.deep .card-icon { background: rgba(76,190,104,.16); color: var(--green-night); }

/* ---------- Badges & pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 12px/1 var(--font-body);
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: var(--mint); color: var(--green-dark);
  white-space: nowrap;
}
.badge-module { background: var(--purple-bg); color: var(--purple); }
.badge-soon { background: var(--amber-bg); color: var(--amber-text); }

/* ---------- "In ontwikkeling" ----------
   Voor functies die we al tonen maar die nog niet beschikbaar zijn.
   Eerlijk zijn hierover is belangrijker dan de pagina mooi houden. */
.soon-note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  border-radius: 12px;
  padding: 13px 16px;
  margin: 18px 0;
  font-size: .9rem;
  color: var(--amber-text);
  line-height: 1.5;
}
.soon-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--amber-text); }
.soon-note strong { color: var(--amber-ink); }

/* Compacte variant, bijvoorbeeld in het mega-menu of op een kaart. */
.soon-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 11px/1 var(--font-body);
  background: var(--amber-bg);
  color: var(--amber-text);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  vertical-align: middle;
}
.soon-tag svg { width: 12px; height: 12px; }
.badge-new { background: var(--blue-bg); color: var(--blue); }
.badge-outline { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); }

/* ---------- Checklijst ---------- */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li {
  position: relative;
  padding-left: 30px;
  margin: 11px 0;
  color: var(--body);
  font-size: .96rem;
}
.checks li::before {
  content: "";
  position: absolute; left: 0; top: .34em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7C3A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
section.deep .checks li { color: var(--deep-link); }
section.deep .checks li::before { background-color: rgba(76,190,104,.2); }

/* ---------- Navigatie ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
}
/* De matglas-blur alleen op desktop: op telefoons kost hij bij elke
   scrollstap een repaint en is het effect nauwelijks te zien. */
@media (min-width: 901px) {
  .nav {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
.nav-inner {
  position: relative; /* het mega-menu positioneert zich t.o.v. de hele balk */
  max-width: var(--wrap); margin: 0 auto;
  height: var(--nav-h);
  padding: 0 32px;
  display: flex; align-items: center; gap: 28px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-logo svg { width: 30px; height: 27px; }
.nav-logo span {
  font: 800 21px var(--font-head);
  letter-spacing: -.02em;
  color: var(--ink);
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
/* Bewust static: een mega-menu van 1120px gecentreerd onder zijn eigen
   knop viel op laptops links buiten beeld. Nu centreert het onder .nav-inner. */
.nav-links > * { position: static; }
.nav-link {
  display: flex; align-items: center; gap: 5px;
  font: 600 15px var(--font-body);
  color: var(--body);
  padding: 9px 13px;
  border-radius: 10px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--green-dark); background: var(--wash); }
.nav-link.active { color: var(--green-dark); }
.nav-link svg { width: 13px; height: 13px; transition: transform .2s ease; }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-spacer { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Mega-menu */
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); /* de schaduw tekent de rand; geen hairline erbij */
  padding: 22px;
  opacity: 0; visibility: hidden;
  /* visibility pas ná het uitfaden op hidden, maar bij openen direct visible,
     zodat focus meteen in het paneel kan. */
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 120;
}
.mega[data-open="true"] {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.mega-foot { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; text-align: center; }
.mega-foot a { font: 700 14px var(--font-body); }
.mega-grid { display: grid; gap: 6px 22px; }
.mega-col-title {
  font: 700 11px var(--font-body);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px 4px;
}
.mega-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: 11px;
  transition: background .15s ease;
}
.mega-item:hover { background: var(--wash); }
.mega-item .mi-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px; display: grid; place-items: center;
  background: var(--mint); color: var(--green-dark);
}
.mega-item .mi-ico svg { width: 17px; height: 17px; }
.mega-item strong {
  display: block; font: 700 14.5px var(--font-body); color: var(--ink);
  margin-bottom: 1px;
}
.mega-item span { display: block; font-size: 12.8px; color: var(--muted); line-height: 1.45; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; /* tikdoel */
  place-items: center;
  background: none; border: 0; cursor: pointer;
  padding: 0; margin-left: auto;
  border-radius: 10px;
  color: var(--ink);
}
.nav-toggle svg { width: 26px; height: 26px; flex-shrink: 0; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }

/* ---------- Footer ---------- */
.footer {
  background: var(--green-deep);
  color: var(--deep-muted);
  padding: 72px 0 32px;
  font-size: .93rem;
}
.footer a { color: var(--deep-link); }
.footer a:hover { color: #fff; }
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px 28px;
  padding-bottom: 48px;
}
/* Kolomtitels zijn h2's (na de CTA-h2 van elke pagina), gestyled als label. */
.footer-title {
  color: #fff; font: 700 13px/1.4 var(--font-body);
  letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin: 9px 0; }
.footer-brand svg { width: 34px; height: 31px; margin-bottom: 16px; }
.footer-brand p { max-width: 32ch; line-height: 1.6; }
.footer-bottom {
  border-top: 1px solid var(--deep-line);
  padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
  font-size: .85rem;
}
.footer-bottom .links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legalinfo { color: var(--deep-soft); font-size: .85rem; line-height: 1.7; }
/* Herkomst en eigendom: leesbaar, niet weggestopt in de kleine lettertjes. */
.footer-origin { color: var(--deep-text); font-size: .92rem; line-height: 1.6; }
.footer-origin a { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom .footer-legalinfo { font-size: .82rem; }

/* ---------- Tabel ---------- */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  background: #fff;
  box-shadow: var(--shadow-sm);
  /* Referentie voor de absoluut geplaatste .sr-only-teksten in de cellen;
     zonder dit steken die op een smal scherm buiten de pagina en ontstaat
     horizontale overloop, ook al scrolt de tabel zelf netjes. */
  position: relative;
}
table.cmp { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .93rem; }
table.cmp th, table.cmp td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.cmp thead th {
  background: var(--wash);
  font: 700 13px var(--font-body);
  color: var(--ink);
  white-space: nowrap;
}
table.cmp thead th.own { background: var(--mint); color: var(--green-deep); }
table.cmp td.own { background: rgba(232,246,236,.4); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td.c { text-align: center; }
.yes { color: var(--green); font-weight: 700; }
.no { color: var(--muted); }
.partial { color: var(--amber-text); font-weight: 600; }
/* De symbolen zijn decoratie; de betekenis staat in een .sr-only-tekst ernaast. */
.table-wrap:focus-visible { outline-offset: 4px; }

/* ---------- Accordeon (FAQ) ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; text-align: left;
  font: 700 1.03rem var(--font-head); color: var(--ink);
  letter-spacing: -.015em;
}
.faq-q:hover { color: var(--green-dark); }
.faq-q .ico {
  flex-shrink: 0; width: 26px; height: 26px;
  border-radius: 50%; background: var(--mint); color: var(--green-dark);
  display: grid; place-items: center;
  transition: transform .22s ease, background .22s ease;
  font-size: 17px; line-height: 1;
}
.faq-item[data-open="true"] .faq-q .ico { transform: rotate(45deg); background: var(--green-dark); color: #fff; }
/* Het antwoord klapt open via grid-template-rows, zonder hoogtemeting in
   JS. Ingeklapt is het ook voor toetsenbord en schermlezer onzichtbaar. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
}
.faq-a > div { min-height: 0; overflow: hidden; }
.faq-body { padding-bottom: 24px; color: var(--muted); max-width: 72ch; }
.faq-item[data-open="true"] .faq-a {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .3s cubic-bezier(.16,1,.3,1), visibility 0s;
}

/* ---------- Statistiek ---------- */
.stat { text-align: center; }
.stat .n {
  font: 800 clamp(2rem, 4vw, 3rem) var(--font-head);
  color: var(--green);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat .l { font-size: .9rem; color: var(--muted); margin-top: 8px; }
section.deep .stat .n { color: var(--green-night); }
section.deep .stat .l { color: var(--deep-muted); }

/* ---------- Toestelframes ----------
   De schermafbeeldingen in assets/screens/ zijn kale schermen: de app op een
   iPhone 17 Pro (1206 × 2622), de webomgeving in een venster van 1440 × 900.
   De behuizing tekenen we hier, zodat elk beeld dezelfde iPhone of dezelfde
   MacBook krijgt en de verhoudingen overal gelijk zijn. Alle maten staan in
   procenten van het toestel, zodat het meeschaalt van hero tot telefoonscherm. */

/* iPhone: behuizing met een lichte rand, de Dynamic Island en de knoppen aan
   de zijkanten (actieknop, volume links; zijknop rechts). */
.phone {
  position: relative;
  padding: 3.4%;
  background: #121416;
  border-radius: 16% / 7.4%;
  box-shadow: inset 0 0 0 1.5px #3a3e43, 0 30px 70px rgba(16, 55, 29, .28);
}
.phone img { width: 100%; display: block; border-radius: 13.6% / 6.3%; }
/* De Dynamic Island staat op de hoogte van de tijd in de statusbalk: die
   staat in de schermen op 3,7 % van de schermhoogte, dus op 5,2 % van het
   toestel (de rand van 3,4 % van de breedte erbij opgeteld). */
.phone::before {
  content: "";
  position: absolute;
  left: 50%; top: 3.2%;
  width: 29%; height: 4.1%;
  transform: translateX(-50%);
  background: #000;
  border-radius: 999px;
}
.phone::after {
  content: "";
  position: absolute;
  inset: 0 -1.3%;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(#2c3034, #2c3034) 0 17% / 1.3% 4% no-repeat,
    linear-gradient(#2c3034, #2c3034) 0 24% / 1.3% 8% no-repeat,
    linear-gradient(#2c3034, #2c3034) 0 34.5% / 1.3% 8% no-repeat,
    linear-gradient(#2c3034, #2c3034) 100% 27% / 1.3% 13% no-repeat;
}
/* De wikkel om .phone bepaalt de breedte (zie phone() in layout.js): de
   procenten van de behuizing rekenen dan met de breedte van het toestel
   zelf, niet met die van de kolom eromheen. */
.phone-shot { max-width: 290px; margin: 0 auto; }
/* Op een donkere achtergrond: lichtere rand, zwaardere schaduw. */
.on-deep .phone { box-shadow: inset 0 0 0 1.5px #4d5258, 0 30px 70px rgba(0, 0, 0, .45); }

/* MacBook: deksel met dun bezel en de notch in de bovenrand, het scherm in
   16:10, daaronder de zilverkleurige voet die breder is dan het deksel. */
.laptop { position: relative; filter: drop-shadow(0 22px 50px rgba(16, 55, 29, .20)); }
.laptop-lid {
  position: relative;
  width: 87%;
  margin: 0 auto;
  background: #141618;
  border-radius: 14px 14px 0 0;
  padding: 2.6% 1.5% 1.5%;
  box-shadow: inset 0 0 0 1px #2c3034;
}
.laptop-lid::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 14%; height: 4%;
  background: #000;
  border-radius: 0 0 6px 6px;
}
.laptop-screen {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16 / 10;
}
.laptop-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.laptop-foot {
  position: relative;
  height: 14px;
  width: 100%;
  background: linear-gradient(180deg, var(--metal-light) 0%, var(--metal) 45%, var(--metal-dark) 100%);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 5px 14px rgba(16, 55, 29, .20), inset 0 -2px 3px rgba(16, 55, 29, .16);
}
/* Uitsparing om het deksel te openen. */
.laptop-foot::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 14%; height: 5px;
  background: linear-gradient(180deg, var(--metal-edge), var(--metal-edge-light));
  border-radius: 0 0 8px 8px;
}

/* Een toestel in een eigen sectie staat naast zijn tekst, niet eronder. */
.split.showcase { align-items: center; gap: 48px; }
.split.showcase .lead { max-width: 52ch; }
/* Een lijst naast lopende tekst (de eisen uit een aanbesteding): een licht
   groen vlak, zodat het als een apart stuk leest zonder kaartraster te worden. */
.aside-list {
  background: var(--mint); border: 1px solid var(--mint-line); border-radius: 16px;
  padding: 28px 30px;
}
.aside-list h3 { font-size: 1.15rem; margin: 0 0 .7em; }
.aside-list ul { margin: 0; padding-left: 1.15em; color: var(--body); }
.aside-list li { margin: .55em 0; }
.aside-list li::marker { color: var(--green-dark); }

/* Hero: tekst links, toestellen rechts. De beeldkolom krijgt het ruimste
   deel — de toestellen zijn hier het argument, de tekst leest ook smaller. */
.hero-split { grid-template-columns: 0.72fr 1.28fr; gap: 24px; }


/* ---------- Veldfoto's ----------
   Echte foto's uit het veld, met een subtiele merkgloed eroverheen. */
.photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--wash);
  box-shadow: var(--shadow);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.tall { aspect-ratio: 4 / 5; }
.photo.wide { aspect-ratio: 3 / 2; }
.photo.square { aspect-ratio: 1 / 1; }

/* Bijschrift over de foto. */
.photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 24px 20px;
  background: linear-gradient(180deg, rgba(16, 55, 29, 0) 0%, rgba(16, 55, 29, .82) 70%);
  color: #fff;
  font: 600 .92rem var(--font-body);
  line-height: 1.45;
}
.photo-caption strong { display: block; font: 700 1.02rem var(--font-head); margin-bottom: 3px; }

/* Foto naast tekst, in het ritme van de rest van de pagina. */
/* Tekst iets breder dan de foto, zodat een lange titel ("VeldApp voor het
   soortenmanagementplan") in twee regels valt en geen woord hoeft te breken. */
.split.photo-split { grid-template-columns: 1.15fr .85fr; align-items: center; }

/* Fotostrook: drie beelden naast elkaar, gelijke hoogte.
   Een vaste verhouding per beeld zou liggende foto's te veel bijsnijden,
   dus geven we de strook één hoogte en laten we de breedte vrij. */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.photo-strip .photo { aspect-ratio: auto; height: 420px; }
@media (max-width: 900px) {
  .photo-strip { grid-template-columns: 1fr 1fr; }
  .photo-strip > *:last-child { display: none; }
}
@media (max-width: 560px) {
  .photo-strip { grid-template-columns: 1fr; }
  .photo-strip > *:last-child { display: block; }
}

/* ---------- Chips ----------
   Categorie-ankers op /functies/ en filters in de kennisbank. Ze lopen om
   in plaats van horizontaal te scrollen (met verborgen scrollbalk was de
   laatste chip niet te ontdekken) en zijn 40px hoog voor aanraking. */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: #fff; color: var(--body);
  font: 700 13.5px/1 var(--font-body);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--green-dark); color: var(--green-dark); }
.chip[aria-pressed="true"] { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
/* Chipbalk op /functies/: op desktop blijft hij onder de navigatie hangen,
   op telefoons niet, want dan zou hij drie regels van het scherm opeten. */
.chip-bar { padding: 16px 0; border-bottom: 1px solid var(--line); background: #fff; }
@media (min-width: 901px) {
  .chip-bar {
    position: sticky; top: var(--nav-h); z-index: 40;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ---------- Lijsten in plaats van kaartrasters ----------
   Een lijst met lijnen leest als een index, niet als een raster van gelijke
   tegels. Het icoon staat naast de kop, nooit erboven in een eigen tegel. */
.feature-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px;
  border-top: 1px solid var(--line-strong);
}
.feature-list.cols-3 { grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
.feature-list li { border-bottom: 1px solid var(--line); margin: 0; }
.feature-list .fl-item, .feature-list > li > a { display: flex; gap: 16px; padding: 22px 0; color: inherit; }
.feature-list .fl-ico { color: var(--green-dark); flex-shrink: 0; margin-top: 2px; }
.feature-list .fl-ico svg { width: 22px; height: 22px; }
.feature-list h3 { font-size: 1.2rem; margin: 0 0 .25em; }
.feature-list p { color: var(--muted); font-size: .98rem; margin: 0; }
.feature-list .fl-meta { display: block; margin-top: 8px; font-size: .85rem; color: var(--muted); }
.feature-list a:hover h3 { color: var(--green-dark); }
.feature-list .step-num { margin: 2px 0 0; }
@media (max-width: 900px) {
  .feature-list, .feature-list.cols-3 { grid-template-columns: 1fr; }
}

/* Artikelen: type, kop, samenvatting, leestijd. */
.article-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px;
  border-top: 1px solid var(--line-strong);
}
.article-list li { border-bottom: 1px solid var(--line); margin: 0; }
.article-list a { display: block; padding: 22px 0; color: inherit; }
.article-list .al-type { font-size: .85rem; font-weight: 700; color: var(--green-dark); }
.article-list h3, .article-list h4 { font-size: 1.2rem; margin: 6px 0 .3em; }
.article-list p { color: var(--muted); font-size: .98rem; margin: 0 0 8px; }
.article-list a:hover h3 { color: var(--green-dark); }
@media (max-width: 900px) { .article-list { grid-template-columns: 1fr; } }

/* Link onder een lijst of tekstblok. */
.more { margin-top: 28px; }
.more a:not(.btn) { font-weight: 700; }

/* Tellers en klantquotes op de homepage. Drie kolommen met een dunne
   bovenlijn, het getal groot in Sora op knopgroen, met gewone in plaats van
   tabulaire cijfers omdat die op deze maat beter staan. Onder elk getal
   twee balkjes uit dezelfde groene reeks: januari 2025 licht, nu donker. De
   breedte van het eerste balkje staat inline in de HTML, want dat is data. */
.stats {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px;
}
.stats li { border-top: 1px solid var(--line-strong); padding-top: 18px; margin: 0; }
.stats strong {
  display: block;
  font: 600 clamp(2.3rem, 4.4vw, 3.5rem)/1.05 var(--font-head);
  letter-spacing: -.025em;
  color: var(--green-dark);
}
.stat-label { display: block; margin-top: 8px; font: 500 1rem/1.4 var(--font-body); color: var(--body); }
.bars { margin-top: 14px; display: grid; gap: 7px; }
.bar {
  display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 10px;
  font: 500 .8rem/1 var(--font-body); color: var(--muted); white-space: nowrap;
}
.bar .track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar i { display: block; height: 6px; border-radius: 3px; background: var(--green-light); flex: none; }
.bar.now i { background: var(--green-dark); }
.bar b { font-weight: 600; color: var(--body); }
.stats-note { margin: 22px 0 0; font-size: .875rem; color: var(--muted); max-width: 70ch; }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; gap: 20px; } }
.quotes {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 40px;
}
.quotes li { border-top: 1px solid var(--line-strong); padding-top: 18px; margin: 0; }
.quotes blockquote { margin: 0 0 10px; font: 500 1.02rem/1.55 var(--font-body); color: var(--ink); }
.quotes cite { font-style: normal; font-size: .9rem; color: var(--muted); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; gap: 16px; } }


/* Hero */
.hero-band h1 { margin-bottom: .35em; }
.hero-lead { font-size: 1.2rem; max-width: 52ch; }
.hero-actions { margin: 32px 0 20px; }

/* Hero: laptop achter, telefoon links ervoor. Beide beelden hebben hun
   behuizing al ingebakken, dus hier geen frames — alleen de opstelling.
   De hoogte komt van de laptop; de telefoon steekt er links buiten.

   De MacBook en de iPhone zijn de gewone toestelframes; de telefoon staat
   linksonder over de laptop heen. */
.hero-stage {
  position: relative;
  padding-left: 11%;
  /* Het beeld breekt rechts uit de wrap naar de schermrand, zodat de
     toestellen op groot formaat staan zonder de tekstkolom te knellen.
     max() begrenst de uitbraak: nooit meer dan 80px. */
  margin-right: max(-8vw, -80px);
}
.hero-stage .hero-laptop { width: 100%; }
.hero-stage .hero-phone {
  position: absolute;
  left: 0;
  bottom: -6%;
  width: 30%;
  z-index: 2;
}
.hero-stage .hero-phone .phone { box-shadow: inset 0 0 0 1.5px #3a3e43, 0 24px 50px rgba(16, 55, 29, .32); }

/* Onder 900px staat het beeld onder de tekst. De telefoon is hoger dan de
   laptop en steekt er aan de bovenkant ruim een tiende van de breedte bovenuit;
   zonder extra marge schuift hij over de regel onder de knoppen. */
@media (max-width: 900px) {
  .hero-stage { padding-left: 15%; margin-right: 0; margin-top: 8%; }
  .hero-stage .hero-phone { width: 32%; }
}
/* Smal scherm: onder elkaar zou de telefoon te klein worden, dus houden
   we de overlap vast en schalen we het geheel mee met de kolom. */
@media (max-width: 620px) {
  .hero-stage { padding-left: 14%; margin-top: 2%; }
  .hero-stage .hero-phone { width: 30%; bottom: -4%; }
}

/* Verwijzingen onderaan een pagina horen kleiner dan de inhoud erboven. */
.section-head.minor h2 { font-size: 1.35rem; }
.section-head.minor { margin-bottom: 24px; }

/* ---------- Functiepagina ---------- */
.feature-title { font-size: clamp(2rem, 4vw, 3.1rem); }
.feature-intro { font-size: 1.15rem; }
.feature-module { margin: 18px 0 0; font-size: .95rem; font-weight: 700; color: var(--purple); }
.feature-hero { gap: 48px; align-items: center; }
.feature-shot { margin: 0; }
.feature-shot figcaption { margin-top: 14px; font-size: .85rem; color: var(--muted); text-align: center; }

/* Wat een functie doet: term en uitleg, twee kolommen met lijnen. Geen
   vinkjes; een definitielijst zegt zelf al dat het een opsomming is. */
.spec-list {
  margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px;
  border-top: 1px solid var(--line-strong);
}
.spec-list > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.spec-list dt { font: 700 1.08rem/1.3 var(--font-head); letter-spacing: -.015em; color: var(--ink); margin-bottom: 4px; }
.spec-list dd { margin: 0; color: var(--muted); font-size: .98rem; }
.good-to-know { margin-top: 48px; max-width: 760px; }
.good-to-know h2 { font-size: 1.25rem; margin-bottom: .6em; }
.good-to-know ul { margin: 0; padding-left: 1.2em; color: var(--body); }
.good-to-know li { margin: .5em 0; }
@media (max-width: 900px) { .spec-list { grid-template-columns: 1fr; } }

/* Vergelijkingstabel: een cel met tekst in plaats van een symbool. */
.cmp-text { font-weight: 700; color: var(--body); }
.compare-intro { font-size: 1.15rem; }

/* ---------- Homepage: kleine lijsten zonder icoontjes ---------- */
.mini-spec { margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.mini-spec dt { font: 700 1.02rem/1.3 var(--font-head); letter-spacing: -.015em; color: var(--ink); }
.mini-spec dd { margin: 2px 0 0; font-size: .92rem; color: var(--muted); }
.plain-checks { list-style: none; padding: 0; margin: 24px 0 0; columns: 2; column-gap: 28px; font-size: .95rem; color: var(--body); }
.plain-checks li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--line); margin: 0; }
.origin { align-items: center; }
/* Over ons: zelfde verdeling en kopmaat als de oplossingspagina's met foto,
   anders valt "Een samenwerking tussen Ecosprong en Athos Digital" in vijf regels. */
.split.about-split { grid-template-columns: 1.15fr .85fr; align-items: center; }
.about-split h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.legal-head { padding: 56px 0 32px; background: var(--wash); }
.legal-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
@media (max-width: 620px) { .mini-spec { grid-template-columns: 1fr; } .plain-checks { columns: 1; } }

/* ---------- Prijzen ---------- */
.plans { gap: 28px; align-items: start; }
.plan { padding: 40px; }
.plan-main { border: 2px solid var(--green); }
.plan-price { margin: 26px 0 10px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plan-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-sub { font-weight: 700; margin: 22px 0 8px; }
table.tiers { width: 100%; border-collapse: collapse; }
table.tiers th, table.tiers td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: .95rem; }
table.tiers th { font-weight: 600; color: var(--body); }
table.tiers td { text-align: right; font: 800 1.05rem var(--font-head); color: var(--ink); font-variant-numeric: tabular-nums; }
/* Modules als tabel: naam, wat het doet, prijs. Een tabel is hier eerlijker dan
   negen gelijke kaarten, want het ís een prijslijst. */
table.modules { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line-strong); }
table.modules th, table.modules td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.modules thead th { font: 700 .82rem var(--font-body); color: var(--muted); padding-top: 12px; padding-bottom: 12px; }
table.modules tbody th { width: 26%; font: 700 1.05rem/1.3 var(--font-head); letter-spacing: -.015em; }
table.modules tbody th a { color: var(--ink); }
table.modules tbody th a:hover { color: var(--green-dark); }
table.modules td { color: var(--muted); font-size: .97rem; }
table.modules .num { text-align: right; padding-right: 0; white-space: nowrap; font: 800 1.05rem var(--font-head); color: var(--ink); font-variant-numeric: tabular-nums; }
table.modules thead .num { font: 700 .82rem var(--font-body); color: var(--muted); }
.module-trial { display: block; margin-top: 4px; font: 700 .8rem var(--font-body); letter-spacing: 0; color: var(--green-dark); }
table.modules .is-soon th, table.modules .is-soon .num { color: var(--muted); }
table.modules .is-soon .module-trial { color: var(--amber-text); }
@media (max-width: 720px) {
  table.modules thead { display: none; }
  table.modules tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); }
  table.modules th, table.modules td { display: block; width: auto !important; padding: 2px 0; border: 0; text-align: left !important; }
  .plan { padding: 28px; }
}

/* ---------- Contact ---------- */
.contact-split { align-items: start; gap: 56px; }
.contact-form { padding: 36px; }
.contact-caption { margin: 12px 0 28px; color: var(--muted); }
.contact-list { margin: 0; border-top: 1px solid var(--line-strong); }
.contact-list > div { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.contact-list dt { font-weight: 700; color: var(--ink); font-size: .95rem; }
.contact-list dd { margin: 0; color: var(--body); font-size: .95rem; }
@media (max-width: 620px) { .contact-list > div { grid-template-columns: 1fr; gap: 2px; } .contact-form { padding: 24px; } }

/* ---------- Oplossingspagina ---------- */
.solution-intro { font-size: 1.18rem; }
/* Naast een foto is de kolom smal: houd lange woorden als "soortenmanagementplan" heel. */
.photo-split h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
/* Het verhaal in lopende tekst: leesbreedte, geen raster. */
.story h2 { margin-bottom: .6em; }
.story p { font-size: 1.12rem; line-height: 1.7; color: var(--body); max-width: 68ch; margin: 0 0 1em; }
.read-on { margin: 0; color: var(--muted); }
.read-on a { font-weight: 700; }

/* ---------- Split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split.narrow-media { grid-template-columns: 1.1fr .9fr; }
/* Rasterkolommen mogen smaller worden dan hun inhoud (formuliervelden, lange links). */
.split > * { min-width: 0; }
.split.reverse .split-media { order: -1; }

/* ---------- Prose (blog/kennisbank) ---------- */
.prose { font-size: 1.06rem; line-height: 1.75; color: var(--body); }
.prose h2 { margin-top: 2em; font-size: 1.65rem; }
.prose h3 { margin-top: 1.6em; font-size: 1.25rem; }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .5em 0; }
.prose blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 24px;
  border-left: 1px solid var(--soft);
  color: var(--ink); font-style: italic;
}
.prose img { border-radius: var(--radius); margin: 1.8em 0; }
.prose code {
  background: var(--wash); padding: 2px 6px; border-radius: 5px;
  font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose table { border-collapse: collapse; width: 100%; margin: 1.6em 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.prose th { background: var(--wash); font-weight: 700; }

/* Beeld in de lopende tekst: schermafbeeldingen uit handleidingen en foto's
   bij blogberichten. Een dunne rand houdt witte schermafbeeldingen los van
   de pagina. Telefoonschermen ("tall") vullen niet de hele kolom. */
.prose-img { margin: 1.8em 0; }
.prose-img img {
  width: 100%; height: auto; margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--wash);
}
.prose-img.tall { max-width: 320px; }
/* Een echt scherm in zijn toestel ({{shot …}} in een artikel). */
.prose-shot { margin: 2em 0; }
.prose-shot .laptop { max-width: 640px; margin: 0 auto; }
.prose-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 1.8em 0; align-items: start;
}
.prose-gallery .prose-img { margin: 0; max-width: none; }
@media (max-width: 620px) { .prose-gallery { grid-template-columns: 1fr 1fr; } }

/* Stap-blok in de kennisbank: telefoonscherm links, genummerde stappen rechts.
   De oranje nummers in het beeld horen bij de stappen ernaast. */
.prose-step {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px;
  align-items: start; margin: 1.8em 0;
}
.prose-step .prose-img { margin: 0; max-width: none; }
.prose-step > ol, .prose-step > ul, .prose-step > p { margin: 0; }
.prose-step > ol > li:first-child, .prose-step > ul > li:first-child { margin-top: 0; }
@media (max-width: 620px) {
  .prose-step { grid-template-columns: 1fr; gap: 14px; }
  .prose-step .prose-img { max-width: 320px; }
}

/* Artikelkop en -voet. */
.article-title { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.article-desc { font-size: 1.15rem; }
.article-meta {
  font-size: .9rem; color: var(--muted);
  margin: 18px 0 0; padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
section.article-lead { padding-top: 28px; padding-bottom: 0; }
section.article-body { padding: 32px 0 64px; }
.article-help {
  border-top: 1px solid var(--line-strong);
  padding-top: 20px; margin: 0;
  color: var(--muted); font-size: .98rem;
}

/* Kennisbank-index: groepen met een kop, zonder icoontegels. */
.kb-search { max-width: 520px; margin-top: 26px; }
.kb-group-title { font-size: 1.35rem; margin: 0 0 .3em; }
.kb-group-desc { color: var(--muted); margin: 0 0 22px; max-width: 70ch; }
/* Onderwerp-secties binnen een groep: een kopje met een lijn erboven, daaronder
   de artikelen van dat onderwerp. */
.kb-topic { margin-top: 30px; }
.kb-topic-title {
  font-size: .9rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green-dark); margin: 0; padding: 14px 0 4px;
  border-top: 2px solid var(--green-dark);
}
.kb-topic .article-list { border-top: 0; }
section.kb-filter { padding-top: 8px; padding-bottom: 8px; }
/* De achtergrond bij het vak staat los van de handleidingen. */
section.kb-aside { background: var(--wash); padding-top: 56px; padding-bottom: 64px; margin-top: 32px; }
.feature-list.kb-start h3 { font-size: 1.35rem; }

/* Blog-index: één kolom op datum, zoals een logboek. Het beeld is optioneel. */
.post-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.post-list li { border-bottom: 1px solid var(--line); margin: 0; }
.post-list a {
  display: grid; grid-template-columns: 150px 1fr 180px; gap: 8px 32px;
  align-items: start; padding: 26px 0; color: inherit;
}
.post-meta { font-size: .88rem; color: var(--muted); line-height: 1.5; padding-top: 4px; }
.post-meta time { display: block; font-variant-numeric: tabular-nums; }
.post-meta span { display: block; font-weight: 700; color: var(--green-dark); }
.post-text h2 { font-size: 1.35rem; margin: 0 0 .35em; }
.post-text p { color: var(--muted); font-size: .98rem; margin: 0; max-width: 62ch; }
.post-list a:hover h2 { color: var(--green-dark); }
.post-thumb { grid-column: 3; }
.post-thumb img {
  width: 180px; height: 120px; object-fit: cover; object-position: top center;
  border-radius: 10px; border: 1px solid var(--line-strong);
}
@media (max-width: 900px) {
  .post-list a { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .post-meta time, .post-meta span { display: inline; }
  .post-meta span::before { content: " · "; color: var(--muted); font-weight: 400; }
  .post-thumb { display: none; }
}

/* Zoeken en filteren verbergen met het hidden-attribuut; lijstitems hebben
   een eigen display, dus dat moet hier expliciet. */
[hidden] { display: none !important; }

.callout {
  background: var(--mint);
  border: 1px solid var(--mint-line);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 1.8em 0;
  font-size: .98rem;
}
.callout strong { color: var(--green-deep); }
.callout.warn { background: var(--amber-bg); border-color: var(--amber-line); }
.callout.warn strong { color: var(--amber-text); }

/* ---------- Formulier ---------- */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font: 700 14px var(--font-body);
  color: var(--ink);
  margin-bottom: 7px;
}
.field .req { color: var(--red); }
.input, .field input, .field textarea, .field select {
  width: 100%;
  font: 400 15px var(--font-body);
  color: var(--ink);
  padding: 13px 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: 11px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(42,156,75,.13);
}
.field .hint { font-size: .82rem; color: var(--muted); margin-top: 6px; }

/* ---------- Breadcrumb ---------- */
.crumb {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 18px;
  overflow-wrap: break-word;
}
.crumb a, .crumb span { overflow-wrap: break-word; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--green-dark); }
.crumb span { margin: 0 7px; color: var(--soft); }

/* ---------- Beweging ----------
   Geen inschuifanimaties bij het scrollen: inhoud staat er gewoon. Beweging
   zit alleen in toestandswissels (menu, FAQ, hover). */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-links, .nav-actions .desktop-only { display: none; }
  .nav-toggle { display: grid; }
  .nav-inner { gap: 12px; }

  .split, .split.narrow-media, .split.photo-split, .split.about-split, .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .split-media { order: 0; }
  .g2, .g3 { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
  .wrap, .wrap-narrow, .wrap-mid { padding: 0 22px; }
  .nav-inner { padding: 0 22px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .g4 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .btn-row .btn { width: 100%; }
  .card { padding: 22px; }

  /* In de balk moeten knop en menu naast elkaar blijven passen. */
  .nav-actions { gap: 6px; min-width: 0; }
  .nav-actions .btn { width: auto; padding: 12px 14px; font-size: 13.5px; }
  .nav-toggle { margin-left: 0; }
  .nav-inner { gap: 8px; padding: 0 16px; }
  .nav-logo span { font-size: 19px; }
}

/* Zeer smalle telefoons (320px): laat de CTA in de balk weg, hij staat
   ook in het uitklapmenu. */
@media (max-width: 380px) {
  .nav-actions .btn { display: none; }
  .mobile-menu .m-actions .btn { display: flex; }

  /* Lange labels mogen afbreken in plaats van de pagina op te rekken. */
  .btn, .badge, .crumb { white-space: normal; }
  .btn { padding-left: 18px; padding-right: 18px; }
  .footer-top { grid-template-columns: 1fr; }
  .table-wrap { max-width: 100%; }
}

/* ---------- Mobiel menu ---------- */
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0;
  background: #fff;
  z-index: 99;
  padding: 24px 22px 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.mobile-menu[data-open="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.mobile-menu details { border-bottom: 1px solid var(--line); }
.mobile-menu summary {
  padding: 15px 0; cursor: pointer; list-style: none;
  font: 700 17px var(--font-head); color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after { content: "+"; color: var(--green); font-size: 20px; }
.mobile-menu details[open] summary::after { content: "–"; }
.mobile-menu .m-sub { padding: 0 0 14px; }
.mobile-menu .m-sub a { display: block; padding: 9px 0; color: var(--body); font-weight: 600; font-size: 15px; }
.mobile-menu > a.m-top {
  display: block; padding: 15px 0; border-bottom: 1px solid var(--line);
  font: 700 17px var(--font-head); color: var(--ink);
}
.mobile-menu .m-actions { margin-top: 26px; display: grid; gap: 12px; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--green-dark); color: #fff;
  padding: 12px 20px; border-radius: 0 0 10px 0;
  font-weight: 700; z-index: 200;
}
.skip:focus { left: 0; }
.skip:focus, .skip:hover { color: #fff; }

/* ---------- Hulpklassen ----------
   Voor patronen die in meerdere templates terugkwamen als inline style.
   Kleur en typografie horen hier of in een component, nooit inline. */
.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;
}
/* Paginakop met de lichte mintverloop-achtergrond. */
.hero-band { padding: 64px 0 40px; background: linear-gradient(180deg, var(--mint), rgba(232,246,236,0)); }
.hero-band.tall { padding: 80px 0 72px; }
.hero-band.plain { background: none; padding: 48px 0 8px; }
/* De kop mag breed uitlopen, zodat een titel in één of twee regels valt in
   plaats van drie; de tekst eronder blijft op leeslengte. */
.intro { max-width: 960px; }
.intro p { max-width: 740px; }
/* Genummerde stap. */
.step-num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green-dark); color: #fff;
  display: grid; place-items: center;
  font: 800 15px var(--font-head);
  margin-bottom: 16px;
  flex: 0 0 34px; /* naast een lange tekst in een flex-rij mag de cirkel niet krimpen */
}
.block { display: block; }
/* Kleinere kop binnen een kaart of blok (h2 of h3, afhankelijk van de plek). */
.h-small { font-size: 1.1rem; margin-bottom: .3em; }
.h-small svg { display: inline-block; vertical-align: -3px; margin-right: 4px; }
/* Prijzen */
.plan-name { font-size: 1.7rem; margin: 16px 0 6px; }
.price-big { font: 800 3rem var(--font-head); color: var(--ink); letter-spacing: -.03em; }
.price-mid { font: 800 2.1rem var(--font-head); color: var(--ink); letter-spacing: -.03em; }
/* Formulierstatus, gevuld door site.js na verzenden. */
.form-status { margin-top: 14px; font-size: .875rem; color: var(--green-dark); font-weight: 600; }
.form-status[data-state="error"] { color: var(--ink); }
/* Honeypot van het contactformulier: buiten beeld voor mensen, bots vullen het wel in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: .65; cursor: progress; }
/* Het grote getal op de 404-pagina. */
.big-404 { font: 800 clamp(4rem, 12vw, 8rem) var(--font-head); color: var(--mint); letter-spacing: -.04em; line-height: 1; }
figure.photo { margin: 0; }
table.cmp tbody th { font-weight: 500; color: var(--body); }