/* ═══════════ De echte site (Hangar): letter en basis, in plaats van de mockupschil ═══════════
   Gegenereerd door wit/maak.py --hangar. Host Grotesk staat op onze eigen server (geen Google). */
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/host-grotesk-var-latin-ext.woff2?v=19e5576127) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/host-grotesk-var-latin.woff2?v=20ab8958a7) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { color-scheme: light; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: #fff; color: #0e0e10; -webkit-font-smoothing: antialiased; }
:where(.site) img { display: block; max-width: 100%; height: auto; }
:where(.site) a { color: inherit; text-decoration: none; }
.site :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }
/* ═══════════════════════ RICHTING WIT ═══════════════════════
   Zwart op wit, Zwitserse precisie. Eén raster van 12 kolommen op 1280, haarlijnen in plaats van kaarten,
   het pakket zelf groot in beeld. Geen kleur behalve die van de schermen en de foto's. */
.a {
  --a-bg: #ffffff;
  --a-inkt: #0e0e10;
  --a-inkt2: #2c2d31;
  --a-grijs: #5b5d64;
  --a-lijn: #e4e4e7;
  --a-was: #f4f4f5;
  --a-waslijn: #dfdfe3;
  --a-knop: #0e0e10;
  --a-knop-op: #2b2b30;
  --a-letter: "Host Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --a-g: 40px;
  --a-sec: 136px;
  background: var(--a-bg); color: var(--a-inkt); font: 400 16px/1.6 var(--a-letter); font-feature-settings: "ss01" 1;
}
.a-wrap { max-width: 1360px; margin: 0 auto; padding-left: max(var(--a-g), env(safe-area-inset-left, 0px)); padding-right: max(var(--a-g), env(safe-area-inset-right, 0px)); }
:where(.a) :where(h1, h2, h3, h4, p, dl, dd, ol, ul, figure, blockquote) { margin: 0; }
:where(.a) :where(ol, ul) { padding: 0; list-style: none; }
.a h1 { font-size: 76px; line-height: 1.0; font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
.a h2 { font-size: 46px; line-height: 1.06; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
:where(.a) h3 { font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.a-lead { font-size: 20px; line-height: 1.5; color: var(--a-inkt2); max-width: 34em; text-wrap: pretty; }
.a-label { font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-grijs); }
.a-knop, .a-knop2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 8px; font: 500 15px/1 var(--a-letter); white-space: nowrap; transition: background .15s, border-color .15s; }
.a-knop { background: var(--a-knop); color: #fff !important; }
.a-knop:hover { background: var(--a-knop-op); }
.a-knop2 { background: transparent; color: var(--a-inkt); box-shadow: inset 0 0 0 1px #cfcfd4; }
.a-knop2:hover { box-shadow: inset 0 0 0 1px var(--a-inkt); }
.a-knop-groot { height: 52px; padding: 0 26px; font-size: 16px; }
.a-pijl { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--a-inkt); }
.a-pijl svg { width: 16px; height: 16px; transition: transform .15s; }
.a-pijl:hover svg { transform: translateX(3px); }
.a-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* kop */
.a-kop { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--a-lijn); }
.a-kop-in { display: flex; align-items: center; gap: 40px; height: 72px; }
.a-merk img { width: 112px; height: auto; }
.a-nav { display: flex; gap: 30px; font-size: 15px; font-weight: 500; color: var(--a-inkt2); }
.a-nav a:hover, .a-kop-r .a-kl:hover { color: var(--a-inkt); }
.a-kop-r { margin-left: auto; display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 500; color: var(--a-inkt2); }
.a-knop-kop { height: 40px; padding: 0 16px; font-size: 14px; }
.a-menu { display: none; appearance: none; border: 0; background: transparent; width: 44px; height: 44px; margin-right: -10px; color: var(--a-inkt); cursor: pointer; align-items: center; justify-content: center; }
.a-menu svg { width: 22px; height: 22px; }
.a-lade { border-top: 1px solid var(--a-lijn); background: #fff; }
.a-lade nav { display: grid; padding-block: 8px 20px; }
.a-lade a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--a-lijn); }
.a-lade .a-knop { margin-top: 20px; height: 52px; border-bottom: 0; justify-content: center; }

/* opening */
.a-held { padding-top: 96px; }
.a-held-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.a-held-tekst { grid-column: 1 / span 8; display: grid; gap: 28px; }
.a-held-tekst h1 { max-width: 10.5em; }
.a-knoppen { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.a-spec { grid-column: 9 / span 4; border-top: 1px solid var(--a-inkt); }
.a-spec > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 13px 0 12px; border-bottom: 1px solid var(--a-lijn); font-size: 15px; line-height: 1.4; }
.a-spec dt { font-size: 13px; line-height: 1.55; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-grijs); }
.a-spec dd { color: var(--a-inkt); font-variant-numeric: tabular-nums; }
.a-podium { margin-top: 72px; background: var(--a-was); border-radius: 14px; padding: 56px 56px 0; overflow: hidden; }
.a-podium img { width: 100%; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px var(--a-waslijn), 0 30px 60px -30px rgba(15,15,20,.35); }
.a-onder { display: flex; justify-content: space-between; gap: 24px; padding-top: 16px; font-size: 14px; color: var(--a-grijs); }
.a-onder span { white-space: nowrap; }

/* klanten in één tint */
.a-logos { padding-top: 88px; }
.a-band { padding-top: 104px; }
.a-band-foto { border-radius: 14px; overflow: hidden; background: var(--a-was); }
.a-band-foto img { width: 100%; aspect-ratio: 2400 / 812; object-fit: cover; }
.a-onder .a-pijl { font-size: 14px; white-space: nowrap; }
.a-band-tekst { white-space: normal !important; }
.a-logos-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.a-logos-in p { grid-column: 1 / span 4; font-size: 14px; line-height: 1.45; color: var(--a-grijs); max-width: 18em; }
.a-logos-in ul { grid-column: 5 / span 8; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.a-logos-in li img { width: auto; opacity: .5; }
.a-l-hjs { height: 28px; } .a-l-mw { height: 17px; } .a-l-lava { height: 16px; } .a-l-oak { height: 15px; } .a-l-rwr { height: 30px; }

/* secties */
.a-sec { padding-block: var(--a-sec); }
.a-sec:not(.a-was) + .a-sec:not(.a-was) { padding-top: 0; }
.a-band + .a-sec { padding-top: var(--a-sec); }
.a-was { background: var(--a-was); }
.a-sec-kop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: end; margin-bottom: 64px; }
.a-sec-kop h2 { grid-column: 1 / span 6; }
.a-sec-kop .a-lead { grid-column: 8 / span 5; font-size: 18px; }

/* het pakket als index */
.a-index { border-top: 1px solid var(--a-inkt); }
.a-groep { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; border-bottom: 1px solid var(--a-lijn); }
.a-groep > .a-label { grid-column: 1 / span 3; padding-top: 25px; }
.a-groep > div { grid-column: 4 / span 9; }
.a-mod { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) 20px; column-gap: 24px; align-items: baseline; padding: 17px 0 16px; border-top: 1px solid var(--a-lijn); }
.a-groep > div > .a-mod:first-child { border-top: 0; }
.a-mod-naam { font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.a-mod-naam small { display: block; font-size: 13px; line-height: 1.4; font-weight: 500; letter-spacing: 0; color: var(--a-grijs); margin-top: 3px; }
.a-mod-wat { font-size: 15px; line-height: 1.5; color: var(--a-inkt2); }
.a-mod svg { width: 18px; height: 18px; align-self: center; color: var(--a-grijs); transition: transform .15s, color .15s; }
.a-mod:hover .a-mod-naam { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.a-mod:hover svg { transform: translateX(3px); color: var(--a-inkt); }
.a-plekken { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; padding-top: 28px; }
.a-plekken p { grid-column: 1 / span 3; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-grijs); }
.a-plekken ul { grid-column: 4 / span 7; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; font-weight: 500; }
.a-plekken ul a { border-bottom: 1px solid #c9c9ce; padding-bottom: 2px; }
.a-plekken ul a:hover { border-color: var(--a-inkt); }
.a-plekken > a { grid-column: 11 / span 2; justify-self: end; font-size: 15px; }

/* één order door het bedrijf */
.a-stroom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.a-stappen { grid-column: 1 / span 4; border-top: 1px solid var(--a-inkt); counter-reset: st; }
.a-stappen button { appearance: none; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--a-grijs);
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; padding: 14px 0 13px; border-bottom: 1px solid var(--a-waslijn); }
.a-stappen .a-nr { grid-row: 1 / span 2; font-size: 15px; line-height: 1.45; font-weight: 500; font-variant-numeric: tabular-nums; }
.a-stappen .a-st-t { font-size: 18px; line-height: 1.35; font-weight: 500; color: var(--a-inkt2); }
.a-stappen .a-st-o { font-size: 15px; line-height: 1.5; }
.a-stappen button[aria-selected="true"] { color: var(--a-inkt2); }
.a-stappen button[aria-selected="true"] .a-nr, .a-stappen button[aria-selected="true"] .a-st-t { color: var(--a-inkt); }
.a-stappen button[aria-selected="true"] .a-st-o { color: var(--a-inkt2); }
.a-stappen button:hover .a-st-t { color: var(--a-inkt); }
.a-stroom-beeld { grid-column: 5 / span 8; position: relative; background: #fff; border-radius: 12px; padding: 32px 32px 0; overflow: hidden; box-shadow: 0 0 0 1px var(--a-waslijn); }
.a-stroom-beeld img { width: 100%; border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1px var(--a-waslijn); }
.a-stroom-beeld img[hidden] { display: none; }

/* waar je verkoopt */
.a-kanalen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.a-kanaal { display: grid; align-content: start; gap: 20px; }
.a-kanaal.a-k-groot { grid-column: span 6; }
.a-kanaal.a-k-klein { grid-column: span 4; }
.a-k-beeld { background: var(--a-was); border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10.5; max-width: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 32px 32px 0; }
.a-k-beeld img { width: 100%; border-radius: 6px 6px 0 0; box-shadow: 0 0 0 1px var(--a-waslijn), 0 18px 40px -24px rgba(15,15,20,.35); }
.a-k-groot .a-k-beeld { aspect-ratio: auto; }
.a-k-klein .a-k-beeld { aspect-ratio: 4 / 3.3; }
.a-k-beeld.a-k-tel img { width: 46%; border-radius: 22px 22px 0 0; box-shadow: 0 0 0 6px #111114, 0 0 0 7px #2a2a2e, 0 24px 50px -24px rgba(15,15,20,.45); margin-bottom: -6px; }
.a-k-beeld.a-k-kassa { padding: 40px 32px 0; }
.a-k-beeld.a-k-kassa img { border-radius: 16px 16px 0 0; box-shadow: 0 0 0 7px #111114, 0 24px 50px -24px rgba(15,15,20,.45); width: 92%; }
.a-k-beeld.a-k-3d { padding: 0; }
.a-k-beeld.a-k-3d img { border-radius: 0; box-shadow: none; height: 100%; object-fit: cover; }
.a-k-tekst { display: grid; gap: 6px; }
.a-k-titel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 18px; font-weight: 500; }
.a-k-titel img { height: 22px; width: auto; }
.a-k-titel .a-k-adres { font-size: 14px; font-weight: 400; color: var(--a-grijs); }
.a-k-tekst p { font-size: 15px; line-height: 1.5; color: var(--a-inkt2); max-width: 36em; }
.a-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--a-was); color: var(--a-inkt2); font-size: 13px; font-weight: 500; }
.a-kanaal:hover .a-k-titel span:first-child, .a-kanaal:hover .a-k-naam { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* klantverhaal */
.a-verhaal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; }
.a-verhaal-foto { grid-column: 1 / span 7; border-radius: 12px; overflow: hidden; background: var(--a-was); }
.a-verhaal-foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.a-verhaal-tekst { grid-column: 9 / span 4; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding-block: 8px; }
.a-verhaal-tekst blockquote { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; text-wrap: pretty; }
.a-verhaal-wie { display: grid; gap: 4px; font-size: 15px; }
.a-verhaal-wie img { height: 24px; width: auto; margin-bottom: 14px; }
.a-verhaal-wie span { color: var(--a-grijs); }
.a-verhaal-wie .a-pijl { margin-top: 16px; }

/* zo is het geregeld */
.a-twee { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.a-twee > div:first-child { grid-column: 1 / span 5; display: grid; align-content: start; gap: 24px; }
.a-twee .a-lead { font-size: 18px; }
.a-links { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 8px; }
.a-regels { grid-column: 7 / span 6; border-top: 1px solid var(--a-inkt); }
.a-regels > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 24px; padding: 17px 0 16px; border-bottom: 1px solid var(--a-lijn); font-size: 15px; line-height: 1.5; }
.a-regels dt { font-weight: 500; color: var(--a-inkt); }
.a-regels dd { color: var(--a-inkt2); }
.a-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--a-inkt2); }
.a-status i { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 3px #dcf2e4; }

/* prijzen */
.a-prijzen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--a-inkt); }
.a-pakket { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 0; padding: 28px 24px 28px 0; border-right: 1px solid var(--a-waslijn); }
.a-pakket + .a-pakket { padding-left: 24px; }
.a-pakket:last-child { border-right: 0; padding-right: 0; }
.a-pakket h3 { font-size: 22px; }
.a-pakket .a-voor { font-size: 15px; color: var(--a-grijs); margin-top: 4px; }
.a-prijs { display: flex; align-items: baseline; gap: 8px; height: 42px; margin-top: 28px; font-variant-numeric: tabular-nums; }
.a-prijs b { font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; white-space: nowrap; }
.a-prijs span { font-size: 14px; color: var(--a-grijs); }
.a-pakket ul { display: grid; align-content: start; gap: 8px; margin-top: 24px; font-size: 15px; line-height: 1.45; color: var(--a-inkt2); }
.a-pakket li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.a-pakket li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--a-inkt); }
.a-pakket .a-knop2 { margin-top: 28px; justify-self: start; background: #fff; }
.a-prijs-voet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; font-size: 15px; color: var(--a-inkt2); }

/* slot */
.a-slot { background: var(--a-inkt); color: #fff; }
.a-slot-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; padding-block: 112px 104px; }
.a-slot h2 { grid-column: 1 / span 7; font-size: 56px; color: #fff; }
.a-slot-r { grid-column: 9 / span 4; display: grid; gap: 28px; align-content: end; }
.a-slot-r p { font-size: 18px; line-height: 1.5; color: #d4d4d8; }
.a-slot .a-knop { background: #fff; color: var(--a-inkt) !important; }
.a-slot .a-knop:hover { background: #e7e7ea; }
.a-slot .a-knop2 { color: #fff; box-shadow: inset 0 0 0 1px #5d5d64; }
.a-slot .a-knop2:hover { box-shadow: inset 0 0 0 1px #fff; }
.a-contact { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid #36363c; padding-top: 28px; }
.a-contact div { display: grid; gap: 4px; font-size: 15px; }
.a-contact b { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.a-contact span { color: #cfcfd4; }

/* voet */
.a-voet { background: #fff; padding-block: 72px 40px; font-size: 15px; }
.a-voet-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.a-voet-merk { grid-column: 1 / span 4; display: grid; align-content: start; gap: 18px; color: var(--a-inkt2); }
.a-voet-merk img { width: 112px; }
.a-voet-merk p { max-width: 24em; line-height: 1.55; }
.a-voet-kol { grid-column: span 2; display: grid; align-content: start; gap: 10px; }
.a-voet-kol .a-voet-kop { margin: 0 0 6px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-grijs); }
.a-voet-kol a { color: var(--a-inkt2); }
.a-voet-kol a:hover { color: var(--a-inkt); text-decoration: underline; text-underline-offset: 3px; }
.a-voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--a-lijn); font-size: 14px; color: var(--a-grijs); }
.a-voet-onder nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ── tussenmaten ── */
@media (max-width: 1240px) {
  .a h1 { font-size: 68px; }
  .a-nav { gap: 24px; }
}
@media (max-width: 1100px) {
  .a { --a-g: 32px; --a-sec: 112px; }
  .a-nav, .a-kop-r .a-kl { display: none; }
  .a-menu { display: inline-flex; }
  .a-kop-r { gap: 8px; }
  .a-held-tekst { grid-column: 1 / -1; }
  .a-spec { grid-column: 1 / -1; margin-top: 48px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--a-inkt); }
  .a-spec > div { grid-template-columns: minmax(0, 1fr); gap: 6px; border-bottom: 0; padding-top: 16px; }
  .a-podium { padding: 40px 40px 0; }
  .a-logos-in p { grid-column: 1 / -1; max-width: none; margin-bottom: 24px; }
  .a-logos-in ul { grid-column: 1 / -1; }
  .a-sec-kop h2 { grid-column: 1 / span 7; }
  .a-sec-kop .a-lead { grid-column: 1 / span 8; }
  .a-groep > .a-label { grid-column: 1 / -1; padding-top: 24px; }
  .a-groep > div { grid-column: 1 / -1; }
  .a-stappen { grid-column: 1 / span 5; }
  .a-stroom-beeld { grid-column: 6 / span 7; padding: 24px 24px 0; }
  .a-verhaal-foto { grid-column: 1 / span 6; }
  .a-verhaal-tekst { grid-column: 7 / span 6; }
  .a-verhaal-tekst blockquote { font-size: 26px; }
  .a-twee > div:first-child { grid-column: 1 / -1; }
  .a-regels { grid-column: 1 / -1; }
  .a-prijzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-pakket:nth-child(2) { border-right: 0; padding-right: 0; }
  .a-pakket:nth-child(3) { padding-left: 0; border-top: 1px solid var(--a-waslijn); }
  .a-pakket:nth-child(4) { border-top: 1px solid var(--a-waslijn); }
  .a-slot h2 { grid-column: 1 / -1; }
  .a-slot-r { grid-column: 1 / span 8; }
  .a-voet-merk { grid-column: 1 / -1; }
  .a-voet-kol { grid-column: span 3; }
}
@media (max-width: 900px) {
  .a { --a-g: 28px; --a-sec: 96px; }
  .a h1 { font-size: 54px; }
  .a h2 { font-size: 38px; }
  .a-held { padding-top: 72px; }
  .a-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-spec > div:nth-child(n+4) { border-top: 1px solid var(--a-lijn); }
  .a-logos-in ul { flex-wrap: wrap; justify-content: flex-start; gap: 28px 44px; }
  .a-sec-kop { margin-bottom: 48px; }
  .a-sec-kop h2, .a-sec-kop .a-lead { grid-column: 1 / -1; }
  .a-stroom { row-gap: 32px; }
  .a-stappen, .a-stroom-beeld { grid-column: 1 / -1; }
  .a-kanaal.a-k-groot { grid-column: 1 / -1; }
  .a-kanaal.a-k-klein { grid-column: span 6; }
  .a-kanaal.a-k-klein:last-child { grid-column: 1 / -1; }
  .a-kanaal.a-k-klein:last-child .a-k-beeld { aspect-ratio: 16 / 8; }
  .a-verhaal { row-gap: 32px; }
  .a-verhaal-foto, .a-verhaal-tekst { grid-column: 1 / -1; }
  .a-verhaal-foto img { aspect-ratio: 16 / 10; }
  .a-slot h2 { font-size: 44px; }
  .a-slot-r { grid-column: 1 / -1; }
  .a-contact { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .a-voet-kol { grid-column: span 6; }
}
@media (max-width: 600px) {
  .a { --a-g: 20px; --a-sec: 80px; }
  .a h1 { font-size: 42px; letter-spacing: -0.03em; }
  .a h2 { font-size: 31px; letter-spacing: -0.025em; }
  .a-lead { font-size: 18px; }
  .a-kop-in { height: 64px; gap: 16px; }
  .a-merk img { width: 100px; }
  .a-knop-kop { height: 40px; padding: 0 14px; }
  .a-held { padding-top: 48px; }
  .a-held-tekst { gap: 20px; }
  .a-knoppen .a-knop-groot { flex: 1 1 100%; }
  .a-spec { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .a-spec > div { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 12px 0 11px; border-top: 0 !important; border-bottom: 1px solid var(--a-lijn); }
  .a-podium { margin-top: 48px; border-radius: 10px; }
  .a-onder { flex-direction: column; gap: 4px; }
  .a-logos { padding-top: 64px; }
  .a-logos-in ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; align-items: center; }
  .a-l-hjs { height: 22px; } .a-l-mw { height: 13px; } .a-l-lava { height: 12px; } .a-l-oak { height: 14px; } .a-l-rwr { height: 24px; }

  .a-mod { grid-template-columns: minmax(0, 1fr) 20px; row-gap: 4px; padding: 16px 0 15px; }
  .a-mod-wat { grid-column: 1; grid-row: 2; }
  .a-mod svg { grid-column: 2; grid-row: 1 / span 2; }
  .a-mod-naam { font-size: 18px; }
  .a-mod-naam small { display: inline; margin: 0 0 0 8px; }
  .a-plekken p, .a-plekken ul, .a-plekken > a { grid-column: 1 / -1; justify-self: start; }
  .a-plekken ul { margin: 14px 0 20px; }
  .a-stroom-beeld { padding: 16px 16px 0; }
  .a-kanalen { row-gap: 40px; }
  .a-kanaal.a-k-klein { grid-column: 1 / -1; }
  .a-kanaal.a-k-klein:last-child .a-k-beeld, .a-k-klein .a-k-beeld { aspect-ratio: 4 / 3.2; }
  .a-k-beeld { padding: 20px 20px 0; }
  .a-verhaal-tekst blockquote { font-size: 23px; }
  .a-regels > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .a-prijzen { grid-template-columns: minmax(0, 1fr); }
  .a-pakket, .a-pakket + .a-pakket { padding: 24px 0; border-right: 0; border-top: 1px solid var(--a-waslijn); }
  .a-pakket:first-child { border-top: 0; }
  .a-prijs { margin-top: 18px; }
  .a-slot-in { padding-block: 80px 72px; }
  .a-slot h2 { font-size: 34px; }
  .a-slot .a-knoppen > a { flex: 1 1 100%; }
  .a-voet-kol { grid-column: 1 / -1; }
  .a-voet-onder { margin-top: 48px; }
}

/* ═══════════ WIT: de onderdelen van de hele site (na wit-basis.css) ═══════════
   Zelfde raster (12 kolommen op 1280), zelfde haarlijnen en letters als de home. */

/* kop: megamenu onder Pakket */
.a-nav { align-items: center; }
.a-nav-knop { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0; }
.a-nav-knop svg { width: 14px; height: 14px; transition: transform .2s; }
.a-nav-knop[aria-expanded="true"] svg { transform: rotate(180deg); }
.a-nav-knop:hover, .a-nav-knop[aria-expanded="true"] { color: var(--a-inkt); }
.a-nav a[aria-current="page"], .a-nav-knop.is-hier { color: var(--a-inkt); }
.a-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--a-lijn); box-shadow: 0 24px 48px -32px rgba(15,15,20,.28); }
.a-mega-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-block: 36px 40px; }
.a-mega-groepen { grid-column: 1 / span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; }
.a-mega-groep { display: grid; align-content: start; gap: 2px; }
.a-mega-groep .a-label { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--a-lijn); }
.a-mega-groep a { display: grid; gap: 1px; padding: 7px 0; }
.a-mega-groep a b { font-size: 15px; font-weight: 500; color: var(--a-inkt); }
.a-mega-groep a span { font-size: 13px; line-height: 1.4; color: var(--a-grijs); }
.a-mega-groep a:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.a-mega-kant { grid-column: 10 / span 3; display: grid; align-content: start; gap: 2px; padding-left: 24px; border-left: 1px solid var(--a-lijn); }
.a-mega-kant .a-label { padding-bottom: 8px; margin-bottom: 4px; }
.a-mega-kant a { padding: 7px 0; font-size: 15px; font-weight: 500; color: var(--a-inkt2); }
.a-mega-kant a:hover { color: var(--a-inkt); }
.a-mega-kant .a-pijl { margin-top: 12px; font-size: 14px; }
.a-lade-groep { padding-block: 16px 4px; }
.a-lade-groep .a-label { padding-bottom: 4px; }
.a-lade .a-lade-groep a { min-height: 44px; font-size: 16px; border-bottom: 0; }

/* kop van een binnenpagina */
.a-kopblok { padding-top: 72px; }
.a-kruim { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; color: var(--a-grijs); margin-bottom: 28px; }
.a-kruim a:hover { color: var(--a-inkt); text-decoration: underline; text-underline-offset: 3px; }
.a-kruim span[aria-hidden] { color: #b4b5bb; }
.a-kopblok-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: end; }
.a-kopblok-tekst { grid-column: 1 / span 8; display: grid; gap: 24px; }
.a-kopblok-tekst h1 { font-size: 60px; line-height: 1.02; max-width: 13em; }
.a-kopblok-raster > .a-spec { grid-column: 9 / span 4; }
.a-kopblok-raster.a-smal .a-kopblok-tekst { grid-column: 1 / span 9; }
.a-oog { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-grijs); }
.a-oog .a-chip { letter-spacing: 0; text-transform: none; }

/* een scherm op het podium, ook op binnenpagina's */
.a-podium.a-podium-klein { padding: 40px 40px 0; }
.a-podium-kassa { padding: 48px 64px 0; }
.a-podium-kassa img { border-radius: 18px 18px 0 0; box-shadow: 0 0 0 8px #111114, 0 30px 60px -30px rgba(15,15,20,.45); }
.a-podium-foto { padding: 0; }
.a-podium-foto img { border-radius: 0; box-shadow: none; width: 100%; aspect-ratio: 2400 / 812; object-fit: cover; }

/* lijst van onderdelen (functies) */
.a-functies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--a-inkt); }
.a-functie { position: relative; padding: 18px 0 17px 36px; border-bottom: 1px solid var(--a-lijn); }
.a-functie svg { position: absolute; left: 0; top: 20.5px; width: 18px; height: 18px; color: var(--a-inkt); }
.a-functie b { display: block; font-size: 17px; line-height: 1.35; font-weight: 500; }
.a-functie span { display: block; font-size: 15px; line-height: 1.5; color: var(--a-inkt2); margin-top: 2px; }
.a-functies-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* verwante modules en andere doorverwijzingen als rij */
.a-verwant { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--a-inkt); }
.a-verwant a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 12px; row-gap: 4px; padding: 20px 0 22px; border-bottom: 1px solid var(--a-lijn); }
.a-verwant a b { font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.a-verwant a span { grid-column: 1; font-size: 15px; line-height: 1.5; color: var(--a-inkt2); }
.a-verwant a svg { grid-column: 2; grid-row: 1; align-self: center; width: 18px; height: 18px; color: var(--a-grijs); transition: transform .15s, color .15s; }
.a-verwant a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.a-verwant a:hover svg { transform: translateX(3px); color: var(--a-inkt); }

/* het pakket per groep: tekst links, scherm rechts */
.a-groepblok { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; padding-block: 64px; border-top: 1px solid var(--a-lijn); }
.a-groepblok:first-of-type { border-top: 1px solid var(--a-inkt); }
.a-groepblok-tekst { grid-column: 1 / span 4; display: grid; align-content: start; gap: 16px; }
.a-groepblok-tekst h2 { font-size: 34px; }
.a-groepblok-tekst p:not(.a-label) { font-size: 16px; color: var(--a-inkt2); }
.a-groepblok-tekst ul { display: grid; margin-top: 8px; border-top: 1px solid var(--a-lijn); }
.a-groepblok-tekst li a { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 2px 12px; padding: 12px 0 11px; border-bottom: 1px solid var(--a-lijn); }
.a-groepblok-tekst li a b { font-size: 16px; font-weight: 500; }
.a-groepblok-tekst li a span { grid-column: 1; font-size: 14px; color: var(--a-grijs); }
.a-groepblok-tekst li a svg { grid-column: 2; grid-row: 1; width: 16px; height: 16px; align-self: center; color: var(--a-grijs); }
.a-groepblok-tekst li a:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.a-groepblok-beeld { grid-column: 6 / span 7; background: var(--a-was); border-radius: 12px; padding: 32px 32px 0; overflow: hidden; align-self: start; }
.a-groepblok-beeld img { width: 100%; border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1px var(--a-waslijn), 0 24px 48px -28px rgba(15,15,20,.35); }

/* snelheid: echte metingen */
.a-snel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--a-inkt); }
.a-meting { display: grid; align-content: start; gap: 10px; padding: 28px 24px 30px 0; border-right: 1px solid var(--a-lijn); }
.a-meting + .a-meting { padding-left: 0; }
.a-meting:last-child { border-right: 0; }
.a-meting b { font-size: 64px; line-height: .95; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-meting b small { font-size: 22px; letter-spacing: -0.01em; margin-left: 6px; color: var(--a-inkt2); }
.a-meting span { font-size: 15px; line-height: 1.5; color: var(--a-inkt2); max-width: 17em; }
.a-meting i { font-style: normal; display: block; font-size: 13px; color: var(--a-grijs); }
.a-balk { position: relative; height: 4px; margin-top: 6px; background: var(--a-lijn); border-radius: 2px; overflow: hidden; max-width: 220px; }
.a-balk i { position: absolute; inset: 0 auto 0 0; background: var(--a-inkt); border-radius: 2px; }
.a-bron { padding-top: 20px; font-size: 13px; line-height: 1.5; color: var(--a-grijs); max-width: 62em; }

/* alle pluspunten */
.a-plus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--a-inkt); }
.a-plus > div { display: grid; align-content: start; gap: 8px; padding: 24px 24px 28px 0; border-bottom: 1px solid var(--a-lijn); }
.a-plus > div:not(:nth-child(4n+1)) { padding-left: 24px; border-left: 1px solid var(--a-lijn); }
.a-plus b { font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.a-plus span { font-size: 15px; line-height: 1.5; color: var(--a-inkt2); }

/* vergelijking: gebruikelijk tegen Shopro, en de pakkettabel */
.a-tabelvak { position: relative; overflow-x: auto; }
.a-tabel { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.a-tabel th, .a-tabel td { text-align: left; padding: 14px 16px 13px 0; border-bottom: 1px solid var(--a-lijn); vertical-align: top; }
.a-tabel thead th { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-grijs); border-bottom: 1px solid var(--a-inkt); padding-top: 0; }
.a-tabel tbody th { font-weight: 500; color: var(--a-inkt); }
.a-tabel td { color: var(--a-inkt2); }
.a-tabel .a-groepkop th { padding-top: 32px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-grijs); border-bottom: 1px solid var(--a-inkt); }
.a-tabel .a-ja svg { width: 18px; height: 18px; color: var(--a-inkt); vertical-align: -3px; }
.a-tabel .a-nee { color: #b4b5bb; }
.a-tabel-pakket th:first-child { width: 28%; }
.a-tabel-pakket td, .a-tabel-pakket thead th:not(:first-child) { width: 18%; }
.a-tabel-shopro td:last-child { color: var(--a-inkt); font-weight: 500; }

/* tijdlijn (overstappen) */
.a-tijd { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--a-inkt); counter-reset: tijd; }
.a-tijd li { display: grid; align-content: start; gap: 8px; padding-top: 22px; position: relative; }
.a-tijd li::before { counter-increment: tijd; content: counter(tijd); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--a-grijs); }
.a-tijd b { font-size: 20px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.a-tijd span { font-size: 15px; line-height: 1.5; color: var(--a-inkt2); }
.a-baan { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; margin-top: 28px; font-size: 13px; font-weight: 500; }
.a-baan span { padding: 8px 12px; border-radius: 6px; }
.a-baan .a-oud { grid-column: 1 / span 4; background: var(--a-was); color: var(--a-inkt2); }
.a-baan .a-nieuw { grid-column: 5; background: var(--a-inkt); color: #fff; }
.a-baan .a-proef { grid-column: 2 / span 3; background: #fff; color: var(--a-inkt2); box-shadow: inset 0 0 0 1px var(--a-waslijn); margin-top: 6px; }

/* klanten */
.a-klant-rij { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; padding-block: 56px; border-top: 1px solid var(--a-lijn); }
.a-klant-rij:first-of-type { border-top: 1px solid var(--a-inkt); }
.a-klant-tekst { grid-column: 1 / span 4; display: grid; align-content: start; gap: 14px; }
.a-klant-tekst img { height: 24px; width: auto; margin-bottom: 6px; }
.a-klant-tekst img.a-l-hoog { height: 34px; }
.a-klant-tekst h2 { font-size: 30px; }
.a-klant-tekst p { font-size: 16px; color: var(--a-inkt2); }
.a-klant-tekst dl { display: grid; margin-top: 4px; border-top: 1px solid var(--a-lijn); }
.a-klant-tekst dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0 9px; border-bottom: 1px solid var(--a-lijn); font-size: 14px; }
.a-klant-tekst dt { color: var(--a-grijs); }
.a-klant-beelden { grid-column: 6 / span 7; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.a-klant-beelden .a-k-beeld { aspect-ratio: auto; }

/* feitenlijst (klantverhaal) en lange tekst */
.a-feiten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--a-inkt); }
.a-feiten div { display: grid; gap: 4px; padding: 16px 0 18px; border-bottom: 1px solid var(--a-lijn); font-size: 15px; }
.a-feiten dt { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-grijs); }
.a-feiten dd { margin: 0; color: var(--a-inkt); }
.a-leestekst { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; }
.a-leestekst h2 { grid-column: 1 / span 4; font-size: 30px; }
.a-leestekst > div { grid-column: 6 / span 7; display: grid; gap: 16px; font-size: 18px; line-height: 1.6; color: var(--a-inkt2); max-width: 36em; }
.a-leestekst + .a-leestekst { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--a-lijn); }
.a-citaatblok { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; padding-block: 56px; border-top: 1px solid var(--a-inkt); border-bottom: 1px solid var(--a-lijn); }
.a-citaatblok blockquote { grid-column: 1 / span 9; margin: 0; font-size: 40px; line-height: 1.16; font-weight: 500; letter-spacing: -0.025em; text-wrap: pretty; }
.a-citaatblok div { grid-column: 10 / span 3; align-self: end; display: grid; gap: 4px; font-size: 15px; }
.a-citaatblok div span { color: var(--a-grijs); }

/* branche: het probleem en wat Shopro doet */
.a-probleem { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
.a-probleem .a-label { grid-column: 1 / span 3; padding-top: 10px; }
.a-probleem p:not(.a-label) { grid-column: 4 / span 8; margin: 0; font-size: 28px; line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; color: var(--a-inkt); text-wrap: pretty; }
.a-doet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
.a-doet .a-label { grid-column: 1 / span 3; padding-top: 22px; }
.a-doet ul { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--a-inkt); }
.a-doet li { position: relative; padding: 18px 0 17px 36px; border-bottom: 1px solid var(--a-lijn); font-size: 16px; line-height: 1.5; color: var(--a-inkt2); }
.a-doet li svg { position: absolute; left: 0; top: 21px; width: 18px; height: 18px; color: var(--a-inkt); }
.a-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.a-tegel { display: grid; gap: 16px; align-content: start; }
.a-tegel .a-foto { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 10px; overflow: hidden; background: var(--a-was); }
.a-tegel .a-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.a-tegel:hover .a-foto img { transform: scale(1.03); }
.a-tegel h3 { font-size: 20px; }
.a-tegel p { font-size: 15px; line-height: 1.5; color: var(--a-inkt2); }
.a-tegel:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* telefoons en kassa naast elkaar (app, kassa) */
.a-toestellen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.a-toestel { display: grid; gap: 14px; align-content: start; }
.a-toestel .a-k-beeld { aspect-ratio: 4 / 5; }
.a-toestel p { font-size: 15px; line-height: 1.5; color: var(--a-inkt2); }
.a-toestel b { display: block; font-size: 17px; font-weight: 500; color: var(--a-inkt); margin-bottom: 2px; }
.a-k-beeld.a-k-tel img { width: 58%; }
.a-k-beeld.a-k-plat { align-items: center; padding: 28px; }
.a-k-beeld.a-k-plat img { border-radius: 10px; box-shadow: 0 0 0 1px var(--a-waslijn), 0 18px 40px -24px rgba(15,15,20,.35); }

/* vragen */
.a-vragen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
.a-vragen > div:first-child { grid-column: 1 / span 4; display: grid; align-content: start; gap: 16px; }
.a-vragen > div:first-child h2 { font-size: 34px; }
.a-vragen .a-vraaglijst { grid-column: 6 / span 7; border-top: 1px solid var(--a-inkt); }
.a-vraag { border-bottom: 1px solid var(--a-lijn); }
.a-vraag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 500; }
.a-vraag summary::-webkit-details-marker { display: none; }
.a-vraag summary svg { width: 18px; height: 18px; flex: none; color: var(--a-grijs); transition: transform .2s; }
.a-vraag[open] summary svg { transform: rotate(45deg); }
.a-vraag p { margin: 0; padding: 0 40px 20px 0; font-size: 16px; line-height: 1.6; color: var(--a-inkt2); }

/* formulieren (contact, demo) */
.a-formvak { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.a-formvak form { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.a-formvak aside { grid-column: 9 / span 4; display: grid; align-content: start; gap: 0; border-top: 1px solid var(--a-inkt); }
.a-veld { display: grid; gap: 6px; }
.a-veld.a-breed { grid-column: 1 / -1; }
.a-veld label { font-size: 14px; font-weight: 500; }
.a-veld input, .a-veld select, .a-veld textarea { font: 400 16px/1.4 var(--a-letter); color: var(--a-inkt); background: #fff; border: 1px solid #cfcfd4; border-radius: 8px; height: 48px; padding: 0 14px; width: 100%; box-sizing: border-box; }
.a-veld textarea { height: 132px; padding: 12px 14px; resize: vertical; }
.a-veld input:focus, .a-veld select:focus, .a-veld textarea:focus { outline: none; border-color: var(--a-inkt); }
.a-formvak form .a-knop { grid-column: 1 / -1; justify-self: start; }
.a-formvak form .a-klein { grid-column: 1 / -1; font-size: 14px; color: var(--a-grijs); }
.a-contactregel { display: grid; gap: 4px; padding: 18px 0 17px; border-bottom: 1px solid var(--a-lijn); font-size: 15px; }
.a-contactregel b { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.a-contactregel span { color: var(--a-grijs); }
.a-gelukt { grid-column: 1 / -1; padding: 16px 18px; border-radius: 8px; background: var(--a-was); font-size: 15px; }

/* zoeken in alle functies */
.a-zoekbalk { position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; flex-wrap: wrap; gap: 12px; padding-block: 16px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--a-lijn); }
.a-zoekbalk input, .a-zoekbalk select { font: 400 16px/1.4 var(--a-letter); height: 44px; border: 1px solid #cfcfd4; border-radius: 8px; padding: 0 14px; background: #fff; color: var(--a-inkt); }
.a-zoekbalk input { flex: 1 1 320px; min-width: 0; }
.a-zoekbalk select { flex: 0 1 240px; }
.a-zoekbalk output { align-self: center; font-size: 14px; color: var(--a-grijs); white-space: nowrap; }
.a-fmodule { padding-top: 56px; }
.a-fmodule-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.a-fmodule-kop h2 { font-size: 30px; }
.a-fmodule-kop a { font-size: 14px; }
.a-geen { padding: 40px 0; font-size: 16px; color: var(--a-grijs); }

/* korte band op binnenpagina's */
.a-band-tekst { white-space: normal; }
.a-foto-groot { border-radius: 14px; overflow: hidden; background: var(--a-was); }
.a-foto-groot img { width: 100%; aspect-ratio: 2400 / 900; object-fit: cover; }

@media (max-width: 1100px) {
  .a-mega { display: none; }
  .a-kopblok-tekst { grid-column: 1 / -1; }
  .a-kopblok-raster > .a-spec { grid-column: 1 / -1; }
  .a-kopblok-tekst h1 { font-size: 52px; }
  .a-groepblok-tekst { grid-column: 1 / span 5; }
  .a-groepblok-beeld { grid-column: 6 / span 7; padding: 24px 24px 0; }
  .a-snel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-meting:nth-child(2) { border-right: 0; }
  .a-meting:nth-child(n+3) { border-top: 1px solid var(--a-lijn); }
  .a-plus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-plus > div:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
  .a-plus > div:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--a-lijn); }
  .a-tijd { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .a-baan { display: none; }
  .a-klant-tekst { grid-column: 1 / -1; }
  .a-klant-beelden { grid-column: 1 / -1; }
  .a-feiten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-citaatblok blockquote { grid-column: 1 / -1; font-size: 32px; }
  .a-citaatblok div { grid-column: 1 / -1; }
  .a-toestellen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-vragen > div:first-child, .a-vragen .a-vraaglijst { grid-column: 1 / -1; }
  .a-formvak form, .a-formvak aside { grid-column: 1 / -1; }
  .a-zoekbalk { top: calc(72px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 900px) {
  .a-kopblok { padding-top: 56px; }
  .a-kopblok-tekst h1 { font-size: 44px; }
  .a-groepblok-tekst, .a-groepblok-beeld { grid-column: 1 / -1; }
  .a-functies, .a-functies-3 { grid-template-columns: minmax(0, 1fr); }
  .a-verwant { grid-template-columns: minmax(0, 1fr); }
  .a-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-leestekst h2, .a-leestekst > div { grid-column: 1 / -1; }
  .a-probleem .a-label, .a-probleem p:not(.a-label), .a-doet .a-label, .a-doet ul { grid-column: 1 / -1; }
  .a-probleem p:not(.a-label) { font-size: 24px; }
  .a-doet ul { grid-template-columns: minmax(0, 1fr); }
  .a-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .a-kopblok { padding-top: 40px; }
  .a-kruim { margin-bottom: 20px; }
  .a-kopblok-tekst h1 { font-size: 36px; letter-spacing: -0.03em; }
  .a-podium.a-podium-klein { padding: 16px 16px 0; }
  .a-podium-kassa { padding: 24px 20px 0; }
  .a-podium-kassa img { box-shadow: 0 0 0 5px #111114; border-radius: 12px 12px 0 0; }
  .a-groepblok { padding-block: 44px; }
  .a-groepblok-tekst h2 { font-size: 28px; }
  .a-groepblok-beeld { padding: 16px 16px 0; }
  .a-snel { grid-template-columns: minmax(0, 1fr); }
  .a-meting, .a-meting:nth-child(2) { border-right: 0; padding-right: 0; }
  .a-meting:nth-child(n+2) { border-top: 1px solid var(--a-lijn); }
  .a-meting b { font-size: 52px; }
  .a-plus { grid-template-columns: minmax(0, 1fr); }
  .a-plus > div, .a-plus > div:nth-child(2n) { padding: 20px 0 22px; border-left: 0; }
  .a-tabel { font-size: 14px; }
  .a-tabel th, .a-tabel td { padding-right: 12px; }
  .a-tabel-pakket { min-width: 560px; }
  .a-tijd { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .a-tijd li { padding: 18px 0 18px; border-bottom: 1px solid var(--a-lijn); }
  .a-tegels { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .a-feiten { grid-template-columns: minmax(0, 1fr); }
  .a-leestekst > div { font-size: 17px; }
  .a-citaatblok blockquote { font-size: 26px; }
  .a-toestellen { grid-template-columns: minmax(0, 1fr); }
  .a-formvak form { grid-template-columns: minmax(0, 1fr); }
  .a-probleem p:not(.a-label) { font-size: 21px; }
  .a-zoekbalk { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .a-zoekbalk select { flex: 1 1 100%; }
  .a-foto-groot img { aspect-ratio: 4 / 3; }
}

/* aanvullingen */
.a-held-beeld { padding-top: 56px; }
.a-held-beeld .a-podium { margin-top: 0; }
.a-tegels-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-tijd-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a-verwant-vervolg { border-top: 0; }
.a-verwant-vervolg:empty { display: none; }
@media (max-width: 1100px) { .a-tegels-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .a-tegels-4, .a-tijd-3 { grid-template-columns: minmax(0, 1fr); } .a-held-beeld { padding-top: 32px; } }

.a-k-beeld.a-k-tel { align-items: flex-start; padding-top: 28px; }
.a-k-beeld.a-k-tel img { margin-bottom: 0; }

@media (max-width: 600px) {
  .a-podium:not(.a-podium-kassa):not(.a-podium-foto):not(.a-podium-klein) { position: relative; aspect-ratio: 1.25; padding: 0; }
  .a-podium:not(.a-podium-kassa):not(.a-podium-foto):not(.a-podium-klein) img { position: absolute; width: 262%; max-width: none; left: -1.8%; top: -18%; border-radius: 0; box-shadow: none; }
  .a-podium-kassa img, .a-podium-klein img, .a-podium-foto img { position: static; width: 100%; }
}

@media (max-width: 400px) { .a-kopblok-tekst h1 { font-size: 31px; } }

/* artikelen: blog en helpcentrum */
.a-artikelsec { padding-top: 56px; }
.a-artikel-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.a-artikel { grid-column: 1 / span 7; display: grid; gap: 18px; font-size: 18px; line-height: 1.7; color: var(--a-inkt2); max-width: 40em; }
.a-artikel h2 { font-size: 28px; line-height: 1.2; margin-top: 22px; color: var(--a-inkt); scroll-margin-top: 96px; }
.a-artikel h3 { font-size: 21px; line-height: 1.3; margin-top: 10px; color: var(--a-inkt); scroll-margin-top: 96px; }
.a-artikel ul, .a-artikel ol { display: grid; gap: 10px; padding-left: 0; }
.a-artikel ul li { position: relative; padding-left: 22px; }
.a-artikel ul li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 8px; height: 1px; background: var(--a-inkt); }
.a-artikel ol { counter-reset: st; }
.a-artikel ol li { position: relative; padding-left: 30px; counter-increment: st; }
.a-artikel ol li::before { content: counter(st) "."; position: absolute; left: 0; font-weight: 500; color: var(--a-inkt); }
.a-artikel-kant { grid-column: 9 / span 4; position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--a-inkt); }
.a-artikel-kant .a-label { margin-top: 8px; }
.a-toc { display: grid; gap: 2px; margin-bottom: 8px; font-size: 15px; }
.a-toc a { display: block; padding: 6px 0; color: var(--a-inkt2); }
.a-toc a:hover { color: var(--a-inkt); text-decoration: underline; text-underline-offset: 3px; }
.a-artikel-kant .a-knop { justify-self: start; margin-top: 8px; }
@media (max-width: 900px) { .a-artikel, .a-artikel-kant { grid-column: 1 / -1; } .a-artikel-kant { position: static; } }
@media (max-width: 600px) { .a-artikel { font-size: 17px; } .a-artikel h2 { font-size: 24px; } }

.a-toestellen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
.a-toestellen-2 .a-k-beeld { aspect-ratio: 4 / 3; padding: 28px; }
@media (max-width: 600px) { .a-toestellen-2 { grid-template-columns: minmax(0, 1fr); } .a-toestellen-2 .a-k-beeld { padding: 14px; } }

/* de pakketnamen als h2 (op /pakketten): dezelfde maat als de h3 op de home */
.a .a-pakket h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: wrap; }

/* ═══════════ De echte site (Hangar): wat Hangar per bezoek toevoegt ═══════════
   Formulieren met keuzes en de demo-agenda, meldingen, de chat, de vraag over Meta, de nieuwsbrief. */
.a-overslaan { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--a-inkt); color: #fff !important; font-weight: 500; }
.a-overslaan:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
button.a-knop, button.a-knop2 { border: 0; margin: 0; cursor: pointer; }
.honing { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* formulieren: velden van Hangar in het raster van Wit */
.a-formvak form > .a-melding, .a-formvak form > noscript, .a-formvak form > .a-kies { grid-column: 1 / -1; }
.a-optie { margin-left: .3em; font-weight: 400; color: var(--a-grijs); }
.a-kies { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.a-kies legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.a-kies .a-klein { margin-top: -4px; }
.a-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.a-keuze, .a-dag { position: relative; display: flex; }
.a-keuze input, .a-dag input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.a-keuze span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #cfcfd4; font-size: 15px; line-height: 1.3; transition: background .15s, box-shadow .15s, color .15s; }
.a-keuze:hover span, .a-dag:hover .a-dag-in { box-shadow: inset 0 0 0 1px var(--a-inkt); }
.a-keuze input:checked + span, .a-dag input:checked + .a-dag-in { background: var(--a-inkt); color: #fff; box-shadow: none; }
.a-keuze input:focus-visible + span, .a-dag input:focus-visible + .a-dag-in { outline: 2px solid var(--a-inkt); outline-offset: 2px; }
.a-dagen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 20px; }
.a-dag-in { display: grid; gap: 2px; width: 100%; padding: 12px 14px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #cfcfd4; transition: background .15s, box-shadow .15s, color .15s; }
.a-dag-in b { font-size: 15px; font-weight: 500; }
.a-dag-in small { font-size: 13px; color: var(--a-grijs); }
.a-dag input:checked + .a-dag-in small { color: #c9c9cf; }

/* meldingen: in het formulier, en bovenaan na een doorverwijzing */
.a-melding { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 8px; font-size: 15px; line-height: 1.5; background: var(--a-was); color: var(--a-inkt); }
.a-melding svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.a-melding--fout { background: #fbeeec; color: #9b2418; }
.a-melding--ok { background: #ecf5ee; color: #1b5e33; }
.a-meldingbalk { background: #ecf5ee; color: #1b5e33; font-size: 15px; line-height: 22px; }
.a-meldingbalk--fout { background: #fbeeec; color: #9b2418; }
.a-meldingbalk-in { display: flex; gap: 10px; align-items: center; padding-block: 12px; }
.a-meldingbalk svg { flex: none; width: 18px; height: 18px; }

/* de nieuwsbrief in de voet */
.a-brief { display: grid; gap: 8px; max-width: 360px; }
.a-brief label { font-size: 14px; color: var(--a-grijs); }
.a-brief-rij { display: flex; gap: 8px; }
.a-brief input[type=email] { box-sizing: border-box; flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #cfcfd4; border-radius: 8px; background: #fff; color: var(--a-inkt); font: 400 15px/1.4 var(--a-letter); }
.a-brief input[type=email]:focus { outline: none; border-color: var(--a-inkt); }

/* artikelen uit het beheer: een kader en vette woorden in de tekst */
.a-artikel .kader { display: grid; gap: 6px; padding: 18px 20px; border-radius: 8px; background: var(--a-was); font-size: 16px; line-height: 1.6; }
.a-artikel .kader h4, .a-artikel .kader .a-kader-kop { margin: 0; font-size: 16px; font-weight: 500; color: var(--a-inkt); }
.a-artikel b, .a-artikel strong { font-weight: 500; color: var(--a-inkt); }
.a-artikel a { color: var(--a-inkt); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* de chat rechtsonder (site.js) */
.a-chat { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 50; font-size: 15px; line-height: 22px; }
.a-chat-knop { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--a-inkt); color: #fff; font: 500 15px/1 var(--a-letter); cursor: pointer; box-shadow: 0 16px 32px -16px rgba(0,0,0,.55); }
.a-chat-knop:hover { background: var(--a-knop-op); }
.a-chat-knop svg { width: 20px; height: 20px; }
.a-chat-teller { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: #fff; color: var(--a-inkt); font-size: 13px; line-height: 20px; text-align: center; }
.a-chat-paneel { position: absolute; right: 0; bottom: 58px; width: 360px; max-height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--a-lijn), 0 32px 64px -24px rgba(0,0,0,.4); overflow: hidden; }
.a-chat-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--a-lijn); }
.a-h4 { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--a-inkt); }
.a-chat .a-klein, .a-metavraag .a-klein { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--a-grijs); }
.a-chat-sluit { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--a-was); color: var(--a-inkt); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.a-chat-sluit svg { width: 18px; height: 18px; }
.a-chat-berichten { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; background: var(--a-was); }
.a-chat-berichten:empty { display: none; }
.a-chat-bericht { max-width: 85%; padding: 10px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-lijn); color: var(--a-inkt); white-space: pre-wrap; word-break: break-word; }
.a-chat-bericht.bezoeker { align-self: flex-end; background: var(--a-inkt); color: #fff; box-shadow: none; }
.a-chat-bericht small { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; opacity: .7; }
.a-chat-stil { font-size: 14px; line-height: 20px; color: var(--a-grijs); text-align: center; }
.a-chat-start, .a-chat-vorm { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--a-lijn); }
.a-chat-vorm { flex-direction: row; align-items: flex-end; }
.a-invoer { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid #cfcfd4; border-radius: 8px; background: #fff; color: var(--a-inkt); font: 400 15px/1.4 var(--a-letter); }
.a-invoer:focus { outline: none; border-color: var(--a-inkt); }
.a-chat-vorm textarea { flex: 1; min-height: 44px; height: 44px; resize: none; }
.a-chat-start .a-knop { justify-self: start; align-self: flex-start; }
.a-chat-fout { font-size: 14px; line-height: 20px; color: #9b2418; padding: 0 20px 12px; }
.a-chat-fout:empty { display: none; }

/* de ene vraag over Meta, voor wie via een advertentie kwam (site.js) */
.a-metavraag { position: fixed; left: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 50; max-width: 440px; padding: 20px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--a-lijn), 0 24px 48px -24px rgba(0,0,0,.35); }
.a-metavraag form { display: contents; }
.a-metavraag .a-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.a-pijllink { color: var(--a-inkt); text-decoration: underline; text-underline-offset: 3px; }
.a-knop--klein { height: 36px; padding: 0 14px; font-size: 14px; }
.a-knop--licht { background: transparent; color: var(--a-inkt) !important; box-shadow: inset 0 0 0 1px #cfcfd4; }
.a-knop--licht:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--a-inkt); }

@media (max-width: 900px) { .a-dagen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .a-chat { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .a-chat-paneel { position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); width: auto; }
  .a-metavraag { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-width: none; }
  .a-brief { max-width: none; }
}

/* ═══════════ De pagina's die Hangar zelf tekent, in Wit ═══════════
   Voorwaarden, privacy en cookies, verwerkersovereenkomst, developers, status, de pakketkiezer en zoeken
   houden hun opbouw en hun teksten uit het beheer (<main class="a-hoofd">); kop, voet en uiterlijk zijn die van Wit.
   Alles hangt onder .a-hoofd, zodat de pagina's van Wit zelf er niets van merken. */
.a-hoofd .a-binnen { max-width: 1360px; margin-left: auto; margin-right: auto; padding-left: max(var(--a-g), env(safe-area-inset-left, 0px)); padding-right: max(var(--a-g), env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.a-hoofd { padding-bottom: var(--a-sec); }
.a-hoofd .a-pagkop { padding-top: 72px; }
.a-hoofd .a-pagkop .a-oog { display: flex; margin-bottom: 24px; }
.a-hoofd .a-h1--pag { font-size: 60px; line-height: 1.02; font-weight: 500; letter-spacing: -0.035em; max-width: 13em; text-wrap: balance; }
.a-hoofd .a-pagkop .a-lead { margin-top: 24px; }
.a-hoofd .a-pagkop-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: end; }
.a-hoofd .a-pagkop-raster > :first-child { grid-column: 1 / span 7; }
.a-hoofd .a-pagkop-rechts { grid-column: 8 / span 5; display: grid; gap: 24px; }
.a-hoofd .a-pagkop-rechts .a-lead { margin-top: 0; font-size: 18px; }
.a-hoofd .a-pagkop-onder { margin-top: 24px; }
.a-hoofd .a-pagkop-onder .a-lead { margin-top: 0; }
.a-hoofd .a-kruimel { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 28px; font-size: 13px; color: var(--a-grijs); }
.a-hoofd .a-kruimel a:hover { color: var(--a-inkt); text-decoration: underline; text-underline-offset: 3px; }
.a-hoofd .a-kruimel span[aria-hidden] { color: #b4b5bb; }
.a-hoofd .a-kruimel-nu { color: var(--a-inkt2); }
.a-hoofd .a-sectie--na { margin-top: 72px; }
.a-hoofd .a-sectie { margin-top: var(--a-sec); }
.a-hoofd .a-h2, .a-hoofd .a-h2--m { font-size: 46px; line-height: 1.06; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.a-hoofd .a-h3 { font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; }
.a-hoofd .a-h4 { font-size: 17px; line-height: 1.35; font-weight: 500; }
.a-hoofd .a-klein, .a-hoofd .a-tekst { font-size: 15px; line-height: 1.6; color: var(--a-inkt2); }
.a-hoofd .a-tekst { font-size: 17px; margin-top: 12px; max-width: 36em; }
.a-hoofd .a-mini { font-size: 13px; line-height: 1.5; color: var(--a-grijs); }
.a-hoofd .a-knoppen { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.a-hoofd .a-knop--donker { background: var(--a-knop); color: #fff !important; }
.a-hoofd .a-pijllink { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; }
.a-hoofd .a-pijllink svg { width: 16px; height: 16px; }
.a-hoofd .a-label--groen { color: #1b5e33; }
.a-hoofd .a-label--oranje { color: #9a5b00; }
.a-hoofd .a-label--accent { color: var(--a-inkt); }
.a-hoofd .a-stip { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.a-hoofd .a-mark { background: #fff3b0; color: inherit; padding: 0 2px; border-radius: 3px; }

/* keuzes als knoppen: tabbladen van de voorwaarden, het zoeken en de vragen van de kiezer */
.a-hoofd .a-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.a-hoofd a.a-keuze, .a-hoofd label.a-keuze { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #cfcfd4; color: var(--a-inkt); font-size: 15px; line-height: 1.3; cursor: pointer; transition: background .15s, box-shadow .15s, color .15s; }
.a-hoofd a.a-keuze:hover, .a-hoofd label.a-keuze:hover { box-shadow: inset 0 0 0 1px var(--a-inkt); }
.a-hoofd a.a-keuze.is-aan, .a-hoofd label.a-keuze:has(input:checked) { background: var(--a-inkt); color: #fff; box-shadow: none; }
.a-hoofd label.a-keuze input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.a-hoofd label.a-keuze:has(input:focus-visible) { outline: 2px solid var(--a-inkt); outline-offset: 2px; }
.a-hoofd .a-vw-tabs { margin-top: 32px; }

/* voorwaarden, verwerkersovereenkomst, cookies: inhoud links, tekst rechts */
.a-hoofd .a-vw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.a-hoofd .a-vw-inhoud { grid-column: 1 / span 3; position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); display: grid; gap: 0; padding-top: 18px; border-top: 1px solid var(--a-inkt); }
.a-hoofd .a-vw-inhoud .a-oog { margin-bottom: 10px; }
.a-hoofd .a-vw-link { display: block; padding: 7px 0; font-size: 15px; line-height: 1.45; color: var(--a-inkt2); }
.a-hoofd .a-vw-link:hover { color: var(--a-inkt); text-decoration: underline; text-underline-offset: 3px; }
.a-hoofd .a-vw-link.is-aan { color: var(--a-inkt); font-weight: 500; }
.a-hoofd .a-vw-tekst { grid-column: 5 / span 8; max-width: 46em; }
.a-hoofd .a-vw-versie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 18px 0 20px; border-top: 1px solid var(--a-inkt); border-bottom: 1px solid var(--a-lijn); }
.a-hoofd .a-prose { display: grid; gap: 16px; font-size: 18px; line-height: 1.7; color: var(--a-inkt2); }
.a-hoofd .a-prose h2 { margin-top: 32px; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--a-inkt); scroll-margin-top: 96px; }
.a-hoofd .a-prose h3 { margin-top: 12px; font-size: 21px; line-height: 1.3; font-weight: 500; color: var(--a-inkt); scroll-margin-top: 96px; }
.a-hoofd .a-prose ul, .a-hoofd .a-prose ol { display: grid; gap: 10px; }
.a-hoofd .a-prose ul li { position: relative; padding-left: 22px; }
.a-hoofd .a-prose ul li::before { content: ""; position: absolute; left: 2px; top: .85em; width: 8px; height: 1px; background: var(--a-inkt); }
.a-hoofd .a-prose li svg { display: none; }
.a-hoofd .a-prose b, .a-hoofd .a-prose strong { font-weight: 500; color: var(--a-inkt); }
.a-hoofd .a-prose a { color: var(--a-inkt); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.a-hoofd .a-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.a-hoofd .a-prose th, .a-hoofd .a-prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--a-lijn); text-align: left; vertical-align: top; }
.a-hoofd .a-prose th { font-weight: 500; color: var(--a-inkt); }
.a-hoofd .a-prose .a-knoppen { padding-top: 0; }

/* status */
.a-hoofd .a-st-band { display: flex; align-items: center; gap: 18px; padding: 24px 0; border-top: 1px solid var(--a-inkt); border-bottom: 1px solid var(--a-lijn); }
.a-hoofd .a-st-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #ecf5ee; color: #1b5e33; flex: none; }
.a-hoofd .a-st-ic svg { width: 22px; height: 22px; }
.a-hoofd .a-st-band .a-klein { margin-top: 2px; }
.a-hoofd .a-st-rij { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 14px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--a-lijn); }
.a-hoofd .a-st-rij > :first-child { grid-column: 1 / span 4; display: grid; gap: 2px; }
.a-hoofd .a-st-rij > .a-label { grid-column: 5 / span 2; }
.a-hoofd .a-st-30 { grid-column: 7 / span 6; display: grid; gap: 8px; }
.a-hoofd .a-st-naam { font-size: 17px; font-weight: 500; }
.a-hoofd .a-st-wat { font-size: 14px; color: var(--a-grijs); }
.a-hoofd .a-st-dagen { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 28px; }
.a-hoofd .a-st-dag { border-radius: 2px; background: #8fc5a0; }
.a-hoofd .a-st-dag[class*="--"] { background: #e3a33b; }
.a-hoofd .a-st-onder { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--a-grijs); }
.a-hoofd .a-r2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.a-hoofd .a-blok { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 1px solid var(--a-inkt); }
.a-hoofd .a-blok--wit { background: transparent; }
.a-hoofd .a-blok-ic { color: var(--a-inkt); }
.a-hoofd .a-blok-ic svg { width: 22px; height: 22px; }
.a-hoofd .a-bl-meta { font-size: 13px; color: var(--a-grijs); }

/* developers */
.a-hoofd .a-dev { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.a-hoofd .a-dev > :first-child { grid-column: 1 / span 5; }
.a-hoofd .a-dev > .a-code { grid-column: 7 / span 6; }
.a-hoofd .a-dev .a-h3.a-sectie--na { margin-top: 44px; }
.a-hoofd .a-dev-lijst { display: grid; margin-top: 20px; border-top: 1px solid var(--a-lijn); }
.a-hoofd .a-dev-regel { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--a-lijn); font-size: 15px; line-height: 1.55; color: var(--a-inkt2); }
.a-hoofd .a-dev-regel svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--a-inkt); }
.a-hoofd code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; padding: 1px 5px; border-radius: 4px; background: var(--a-was); color: var(--a-inkt); overflow-wrap: anywhere; }
.a-hoofd .a-code { min-width: 0; border-radius: 12px; background: var(--a-inkt); color: #e4e4e7; overflow: hidden; }
.a-hoofd .a-code-kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 14px 20px; border-bottom: 1px solid #2c2d31; font-size: 13px; color: #a1a1aa; }
.a-hoofd .a-code pre { margin: 0; padding: 20px; overflow-x: auto; font: 13.5px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.a-hoofd .a-code-sleutel { color: #fff; }
.a-hoofd .a-code-tekst { color: #a7d3b3; }
.a-hoofd .a-code-zacht { color: #8b8b93; }
.a-hoofd .a-skop { display: grid; gap: 14px; margin-bottom: 48px; }
.a-hoofd .a-punten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--a-inkt); }
.a-hoofd .a-punt { display: flex; gap: 12px; align-items: flex-start; padding: 20px 0 22px; border-bottom: 1px solid var(--a-lijn); }
.a-hoofd .a-punt svg { flex: none; width: 20px; height: 20px; color: var(--a-inkt); }
.a-hoofd .a-punt p { display: grid; gap: 4px; }
.a-hoofd .a-punt-naam { font-size: 17px; line-height: 20px; font-weight: 500; }
.a-hoofd .a-punt-zin { font-size: 15px; line-height: 1.5; color: var(--a-inkt2); }

/* het slotblok onder developers en de kiezer */
.a-hoofd .a-slot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; margin-top: var(--a-sec); padding: 56px; border-radius: 16px; background: var(--a-inkt); color: #fff; }
.a-hoofd .a-slot > :first-child { grid-column: 1 / span 7; display: grid; gap: 16px; align-content: start; }
.a-hoofd .a-slot .a-h2 { grid-column: auto; color: #fff; font-size: 44px; }
.a-hoofd .a-slot .a-lead { color: #d4d4d8; font-size: 18px; }
.a-hoofd .a-slot .a-knop--donker { background: #fff; color: var(--a-inkt) !important; }
.a-hoofd .a-slot .a-knop--licht { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1px #5d5d64; }
.a-hoofd .a-slot .a-knop--licht:hover { background: transparent; box-shadow: inset 0 0 0 1px #fff; }
.a-hoofd .a-slot-prijs { grid-column: 9 / span 4; display: grid; gap: 8px; align-content: end; }
.a-hoofd .a-slot-prijs .a-oog { color: #a1a1aa; }
.a-hoofd .a-slot-bel, .a-hoofd .a-slot .a-prijs { font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; color: #fff; }
.a-hoofd .a-slot .a-klein { color: #d4d4d8; }
.a-hoofd .a-slot .a-pijllink { color: #fff; margin-top: 6px; }

/* welk pakket past */
.a-hoofd .a-pk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.a-hoofd .a-pk-form { grid-column: 1 / span 7; display: grid; gap: 28px; align-content: start; }
.a-hoofd .a-form { display: grid; gap: 16px 20px; }
.a-hoofd .a-form--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a-hoofd .a-veld { display: grid; gap: 6px; }
.a-hoofd .a-veldlabel { font-size: 14px; font-weight: 500; color: var(--a-inkt); }
.a-hoofd .a-veld .a-invoer, .a-hoofd .a-veld input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border: 1px solid #cfcfd4; border-radius: 8px; background: #fff; color: var(--a-inkt); font: 400 16px/1.4 var(--a-letter); }
.a-hoofd .a-veld input:focus { outline: none; border-color: var(--a-inkt); }
.a-hoofd .a-pk-groep { display: grid; gap: 10px; }
.a-hoofd .a-pk-vinken { display: flex; flex-wrap: wrap; gap: 8px; }
.a-hoofd .a-vink { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px #cfcfd4; font-size: 15px; cursor: pointer; }
.a-hoofd .a-vink:hover { box-shadow: inset 0 0 0 1px var(--a-inkt); }
.a-hoofd .a-vink input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.a-hoofd .a-vinkvak { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px #a1a1aa; color: transparent; }
.a-hoofd .a-vinkvak svg { width: 14px; height: 14px; }
.a-hoofd .a-vink:has(input:checked) .a-vinkvak { background: var(--a-inkt); box-shadow: none; color: #fff; }
.a-hoofd .a-vink:has(input:focus-visible) { outline: 2px solid var(--a-inkt); outline-offset: 2px; }
.a-hoofd .a-pk-advies { grid-column: 9 / span 4; display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--a-inkt); position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); }
.a-hoofd .a-pk-naam { font-size: 36px; line-height: 1.1; font-weight: 500; letter-spacing: -0.025em; }
.a-hoofd .a-pk-prijs { font-size: 16px; color: var(--a-inkt2); }
.a-hoofd .a-pk-uitleg { font-size: 15px; line-height: 1.55; color: var(--a-inkt2); }
.a-hoofd .a-pk-tabel { display: grid; margin-top: 6px; font-size: 14px; }
.a-hoofd .a-pk-rij { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--a-lijn); }
.a-hoofd .a-pk-rij--kop { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-grijs); }
.a-hoofd .a-pk-past { display: inline-flex; align-items: center; gap: 4px; color: #1b5e33; font-weight: 500; }
.a-hoofd .a-pk-past svg { width: 14px; height: 14px; }
.a-hoofd .a-pk-past--bijna { color: #9a5b00; }
.a-hoofd .a-pk-advies .a-knoppen { padding-top: 12px; }

/* zoeken */
.a-hoofd .a-zk-zoek { margin-top: 32px; max-width: 760px; }
.a-hoofd .a-invoer--met { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 16px; border: 1px solid #cfcfd4; border-radius: 10px; background: #fff; box-sizing: border-box; }
.a-hoofd .a-invoer--met:focus-within { border-color: var(--a-inkt); }
.a-hoofd .a-invoer--met > svg { flex: none; width: 20px; height: 20px; color: var(--a-grijs); }
.a-hoofd .a-invoer--met input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--a-inkt); font: 400 16px/1.4 var(--a-letter); outline: none; }
.a-hoofd .a-zk-knop { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--a-knop); color: #fff; font: 500 14px/1 var(--a-letter); cursor: pointer; }
.a-hoofd .a-zoektabs { margin-top: 24px; }
.a-hoofd .a-zoeklijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin-top: 40px; border-top: 1px solid var(--a-inkt); }
.a-hoofd .a-zoekres { display: grid; gap: 4px; align-content: start; padding: 20px 0 22px; border-bottom: 1px solid var(--a-lijn); }
.a-hoofd .a-zoekres:hover .a-h4 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.a-hoofd .a-zoekres-adres { font-size: 13px; color: var(--a-grijs); overflow-wrap: anywhere; }

/* berichten uit een mail (bevestigen, afmelden, een link die niet meer werkt) en de afspraak na het boeken van een demo */
.a-hoofd .a-smal { max-width: 960px; margin-left: auto; margin-right: auto; padding-left: max(var(--a-g), env(safe-area-inset-left, 0px)); padding-right: max(var(--a-g), env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.a-hoofd .a-bedankt { display: grid; gap: 24px; justify-items: start; max-width: 46em; padding-top: 72px; }
.a-hoofd .a-bedankt .a-lead, .a-hoofd .a-afspraak-lead { margin-top: 0; }
.a-hoofd .a-pagkop.a-smal .a-lead { margin-top: 24px; }
.a-hoofd .a-pagkop.a-smal .a-melding { margin-top: 24px; }
.a-hoofd .a-pagkop.a-smal .a-knoppen { margin-top: 20px; }
.a-hoofd .a-afspraak { display: grid; gap: 24px; }
.a-hoofd .a-fp-form, .a-hoofd .a-kw { display: grid; gap: 18px; padding: 28px 0 4px; border-top: 1px solid var(--a-inkt); }
.a-hoofd .a-kw { gap: 6px; }
.a-hoofd .a-fp-form .a-klein { margin-top: -10px; }
.a-hoofd .a-fp-verstuur { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.a-hoofd .a-veldlabel small { margin-left: .3em; font-size: 14px; font-weight: 400; color: var(--a-grijs); }
.a-hoofd .a-fp-groep { display: grid; gap: 10px; }
.a-hoofd .a-dag { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #cfcfd4; cursor: pointer; transition: background .15s, box-shadow .15s, color .15s; }
.a-hoofd .a-dag:hover { box-shadow: inset 0 0 0 1px var(--a-inkt); }
.a-hoofd .a-dag:has(input:checked) { background: var(--a-inkt); color: #fff; box-shadow: none; }
.a-hoofd .a-dag:has(input:focus-visible) { outline: 2px solid var(--a-inkt); outline-offset: 2px; }
.a-hoofd .a-dag-naam { font-size: 15px; font-weight: 500; }
.a-hoofd .a-dag-tijden { font-size: 13px; color: var(--a-grijs); }
.a-hoofd .a-dag:has(input:checked) .a-dag-tijden { color: #c9c9cf; }
.a-hoofd .a-knop--kaal { background: transparent; color: var(--a-inkt) !important; text-decoration: underline; text-underline-offset: 3px; padding: 0 12px; }
.a-hoofd .a-knop--kaal:hover { background: transparent; }
.a-hoofd .a-keur { display: grid; gap: 28px; max-width: 46em; padding-top: 72px; }
.a-hoofd .a-keur-held { display: grid; gap: 20px; }
.a-hoofd .a-keur-held .a-lead { margin-top: 0; }
.a-hoofd .a-keur-vak { display: grid; gap: 8px; margin: 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--a-inkt); min-width: 0; }
.a-hoofd .a-keur-vak legend { float: left; width: 100%; padding: 0 0 6px; font-size: 14px; }
.a-hoofd .a-keur-vak legend b { font-weight: 500; }
.a-hoofd .a-keur-reden { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--a-lijn); font-size: 16px; cursor: pointer; }
.a-hoofd .a-keur-reden input { width: 18px; height: 18px; margin: 0; accent-color: var(--a-inkt); }

@media (max-width: 1100px) {
  .a-hoofd .a-vw-inhoud { grid-column: 1 / span 4; }
  .a-hoofd .a-vw-tekst { grid-column: 5 / span 8; }
  .a-hoofd .a-punten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .a-hoofd .a-h1--pag { font-size: 44px; }
  .a-hoofd .a-pagkop-raster > :first-child, .a-hoofd .a-pagkop-rechts, .a-hoofd .a-vw-inhoud, .a-hoofd .a-vw-tekst, .a-hoofd .a-dev > :first-child, .a-hoofd .a-dev > .a-code,
  .a-hoofd .a-pk-form, .a-hoofd .a-pk-advies, .a-hoofd .a-slot > :first-child, .a-hoofd .a-slot-prijs, .a-hoofd .a-st-rij > :first-child, .a-hoofd .a-st-rij > .a-label, .a-hoofd .a-st-30 { grid-column: 1 / -1; }
  .a-hoofd .a-vw-inhoud, .a-hoofd .a-pk-advies { position: static; }
  .a-hoofd .a-form--3 { grid-template-columns: minmax(0, 1fr); }
  .a-hoofd .a-zoeklijst { grid-template-columns: minmax(0, 1fr); }
  .a-hoofd .a-slot { padding: 40px 32px; }
  .a-hoofd .a-slot .a-h2, .a-hoofd .a-h2, .a-hoofd .a-h2--m { font-size: 34px; }
}
@media (max-width: 600px) {
  .a-hoofd .a-pagkop { padding-top: 40px; }
  .a-hoofd .a-bedankt, .a-hoofd .a-keur { padding-top: 40px; }
  .a-hoofd .a-h1--pag { font-size: 36px; letter-spacing: -0.03em; }
  .a-hoofd .a-sectie--na { margin-top: 48px; }
  .a-hoofd .a-prose { font-size: 17px; }
  .a-hoofd .a-prose h2 { font-size: 24px; }
  .a-hoofd .a-punten, .a-hoofd .a-r2 { grid-template-columns: minmax(0, 1fr); }
  .a-hoofd .a-slot { padding: 32px 22px; border-radius: 12px; }
  .a-hoofd .a-slot .a-h2 { font-size: 30px; }
  .a-hoofd .a-st-dagen { gap: 2px; }
  .a-hoofd .a-zk-knop { padding: 0 12px; }
}
@media (max-width: 400px) { .a-hoofd .a-h1--pag { font-size: 31px; } }