/* ==========================================================================
   Flash Digital Agency, versie B1 "Ademruimte / Uitgelicht"
   Papier voert het vlak, één luide plek, veel lucht.
   Signatuur: elk beeld staat licht gekanteld en steekt over de onderrand.
   Eén doorlopende animatie: de stip in de scroll-aanduiding.
   ========================================================================== */

:root {
  /* ---- kleur ---- */
  --primair: #004AAD;
  --primair-diep: #00337A;
  --primair-licht: #E7EEF9;
  --primair-waas: rgb(0 74 173 / 0.10);
  --primair-op-donker: #A8C8F0;
  --accent: #FFD400;
  --papier: #F6F5F1;
  --papier-warm: #FBFAF7;
  --wit: #FFFFFF;
  --inkt: #0B1B33;
  --inkt-diep: #050E1B;
  --inkt-zacht: #22344F;
  /* De lichte kern van de radiale gradiënt op de donkere slotsecties. Stond twee keer als
     losse hexwaarde in het blad, en dat is de enige plek waar dat nog gebeurde. (Sanne, ronde 3) */
  --inkt-hoog: #0F2748;
  --gedempt: #5B6B85;
  --gedempt-diep: #4A5972;
  --lijn: rgb(11 27 51 / 0.13);
  --lijn-fijn: rgb(11 27 51 / 0.07);
  --op-donker: #FFFFFF;
  --op-donker-zacht: rgb(246 245 241 / 0.82);

  /* ---- ruimte, alleen deze treden: 4 8 16 24 40 64 96 144 ---- */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 16px;
  --ruimte-4: 24px;
  --ruimte-5: 40px;
  --ruimte-6: 64px;
  --ruimte-7: 96px;
  --ruimte-8: 144px;
  --sectie: clamp(96px, 10vw, 144px);
  --kant: clamp(24px, 4vw, 64px);
  --gat: clamp(24px, 3vw, 40px);
  --breed: 1200px;
  /* 60ch mat in deze letter 76 tekens per regel; 52ch landt op 63 tot 67, binnen de norm 60-70. */
  --lees: 52ch;
  /* Eén leesmaat per rol. Vijf bouwers kozen los van elkaar zeventien verschillende breedtes:
     44, 46, 48, 50, 52 en 62 tekens voor lopende tekst en acht maten voor koppen. Dat zijn nu
     zes treden. Koppen blijven kort zodat ze als blok lezen naast het beeld. */
  /* Vijf beeldverhoudingen voor de hele site: 21/9 als band, 16/9 breed, 4/3 en 3/2 als
     kaart, 3/4 staand. Twaalf bijna-gelijke verhoudingen maakten de beeldtaal rommelig. */
  /* Drie kolomverdelingen voor de hele site, plus een kantlijn. Er stonden er twaalf, waarvan
     vijf binnen 10 procent van elkaar. Met kleine stapjes kies je bij twijfel de tussenmaat en
     verdwijnt het ritme, precies zoals bij de ruimteschaal. */
  --kolom-gelijk: minmax(0, 1fr) minmax(0, 1fr);
  --kolom-tekst: minmax(0, 1.3fr) minmax(0, 0.7fr);
  --kolom-beeld: minmax(0, 0.8fr) minmax(0, 1.2fr);
  --kolom-kantlijn: minmax(0, 0.28fr) minmax(0, 0.72fr);
  --lees-smal: 46ch;
  --lees-breed: 62ch;
  --kop-kort: 14ch;
  --kop-mid: 17ch;
  --kop-lang: 20ch;
  --kop-breed: 32ch;
  /* De maat van het h1-blok, en die geldt voor de hele site. Er liepen zeven verschillende
     h1-breedtes rond (524, 581, 635, 662, 706, 860 en 1200 op 1440) omdat elke bouwer de kop
     de breedte gaf van de kolom waar hij toevallig in viel. Dit is één maat, en het is de maat
     die de paginakop al had. Hij staat in pixels en niet in ch, net als --breed: de kop van een
     juridische pagina staat op h2-formaat en die van een inhoudspagina op h1-formaat, en een
     maat in ch zou dan twee verschillende blokken opleveren. Onder 1080 valt hij weg, want daar
     is de kolom zelf al smaller dan dit.
     De maat zelf komt van de kale paginakop (die stond op 581), plus de ruimte die het langste
     woord van de site nodig heeft: "concurrenten" mat op kopformaat 584 pixels en brak op 581
     dus af achter de laatste letter. Een kop hoort op een breed scherm nooit af te breken.

     Bijgesteld van 600 naar 780. Zeshonderd was de maat van de kale kop, maar hij gold ook in de
     kolom van 795 naast een beeld en in de volle kolom van 1200 zonder beeld. Daar brak de kop
     over vier tot zes regels terwijl er 200 tot 600 pixels leeg naast stond, en stond de lead
     bréder dan de kop erboven. Deze maat is een plafond en geen streefmaat: in de kolom naast
     een beeld (nu 754) bindt hij niet en volgt de kop gewoon zijn kolom, in de volle kolom van
     1200 houdt hij de regel op ruim zestig tekens. */
  --kop-blok: 840px;

  /* ---- type ---- */
  --font-schrift: "Futura", "Century Gothic", "Avenir Next", "Poppins", "Nunito Sans", system-ui, "Liberation Sans", Arial, sans-serif;
  --type-micro: clamp(11px, 0.14vw + 10.4px, 13px);
  --type-klein: clamp(14px, 0.2vw + 13.2px, 16px);
  --type-basis: clamp(17px, 0.32vw + 15.75px, 20px);
  --type-lead: clamp(19px, 0.62vw + 16.6px, 25px);
  --type-h4: clamp(21.4px, 0.55vw + 19.25px, 26px);
  --type-h3: clamp(27px, 0.8vw + 23.9px, 33px);
  --type-h2: clamp(34.2px, 2.7vw + 23.7px, 56px);
  --type-h1: clamp(51.5px, 4.8vw + 32.8px, 92px);
  --type-nummer: clamp(40px, 3.2vw + 27.5px, 76px);
  --w-licht: 300;
  --w-normaal: 400;
  --w-half: 500;
  --w-vet: 600;
  --ls-kop: -0.025em;
  --ls-tussenkop: -0.015em;
  --ls-caps: 0.16em;
  --ls-label: 0.09em;
  --ls-knop: 0.02em;
  --lh-kop: 1.06;
  --lh-tussen: 1.2;
  --lh-tekst: 1.68;

  /* ---- radius ---- */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-pil: 999px;

  /* ---- schaduw, één lichtrichting: van linksboven ---- */
  --schaduw-beeld: 0 24px 48px -20px rgb(11 27 51 / 0.28);
  --schaduw-knop: 0 10px 22px -12px rgb(0 51 122 / 0.55);
  --schaduw-knop-hover: 0 18px 34px -14px rgb(0 51 122 / 0.5);
  --schaduw-kaart: 0 2px 4px -2px rgb(11 27 51 / 0.06), 0 20px 44px -24px rgb(11 27 51 / 0.22);
  --schaduw-kaart-hover: 0 4px 8px -4px rgb(11 27 51 / 0.08), 0 34px 62px -28px rgb(11 27 51 / 0.3);
  --schaduw-zweef: 0 32px 70px -26px rgb(5 14 27 / 0.55);
  --schaduw-fijn: 0 1px 2px rgb(11 27 51 / 0.06);
  --focus-kleur: var(--primair);
  --focus-dikte: 3px;
  --focus-afstand: 4px;

  /* ---- beweging bij aanwijzen (Nick, feedbackronde 2026-08-15) ----
     Nick op de dienstenlijst: "als ik met mijn muis over het punt heen ga dan schiet hij
     werkelijk. ik vind de beweging mooi maar dit kan een stuk subtieler." Dat gold niet alleen
     daar: kaarten, pakketkaarten, pillen en beelden gebruikten allemaal --duur-micro (180ms) of
     --duur-onthul (400ms) met een verplaatsing van 6px en een schaal van 1,04. Dat leest als een
     sprong. Eén token voor ALLE hover-beweging op de site, ruim twee keer zo traag en met een
     curve die niet doorschiet, plus kleinere uitslagen (3px, schaal 1,015). De onthulling bij het
     scrollen blijft op --duur-onthul: die mag wel vlot zijn, want die zie je maar één keer. */
  --duur-hover: 460ms;
  --curve-hover: cubic-bezier(0.33, 0, 0.2, 1);
  --hef-hover: -3px;

  /* ---- hero: rustig ademen in plaats van trillen ---- */
  --duur-adem: 26s;
}

/* ==================== grond ==================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--font-schrift);
  font-size: var(--type-basis);
  font-weight: var(--w-normaal);
  line-height: var(--lh-tekst);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-weight: var(--w-licht);
  line-height: var(--lh-kop);
  letter-spacing: var(--ls-kop);
  text-wrap: balance;
}

/* Eén kopmaat voor de hele site. De h1 is op elke pagina hetzelfde blok, wat er verder ook naast
   staat: een beeld, een formulier, een kaart of niets. Zonder deze regel neemt de kop de breedte
   van de kolom waar hij toevallig in valt, en dat gaf zeven maten. De hero op de homepage is de
   ene uitzondering: die staat op een donker vol beeld en niet op papier. */
h1 { max-width: var(--kop-blok); }
.hero-kop { max-width: none; }

h2 { font-size: var(--type-h2); }
h3 {
  font-size: var(--type-h4);
  font-weight: var(--w-half);
  line-height: var(--lh-tussen);
  letter-spacing: var(--ls-tussenkop);
}

p { margin: 0 0 var(--ruimte-3); max-width: var(--lees); }
p:last-child { margin-bottom: 0; }

a { color: var(--primair); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--primair-diep); text-decoration-thickness: 2px; }

:focus-visible { outline-color: var(--primair); }

img, video { display: block; border-radius: var(--radius-m); }

.vzw {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.sla-over {
  background: var(--inkt);
  color: var(--op-donker);
  border-radius: var(--radius-pil);
  font-size: var(--type-klein);
  font-weight: var(--w-half);
  letter-spacing: var(--ls-knop);
  text-decoration: none;
  box-shadow: var(--schaduw-zweef);
}

.wrap {
  width: min(var(--breed), 100% - var(--kant) * 2);
  margin-inline: auto;
}

.sectie { padding-block: var(--sectie); }

/* ==================== oogje, label, bijschrift ==================== */
.oog {
  margin-bottom: var(--ruimte-3);
  color: var(--primair);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  line-height: 1.4;
  text-transform: uppercase;
}

.oog-licht { color: var(--op-donker-zacht); }

.inleiding {
  margin-top: var(--ruimte-4);
  color: var(--gedempt-diep);
  font-size: var(--type-lead);
  font-weight: var(--w-licht);
  line-height: 1.6;
  letter-spacing: -0.005em;
}

.bijschrift {
  margin-top: var(--ruimte-4);
  /* Was --gedempt. Onder de zachte schaduw van de scheve beeldkaarten is de ondergrond niet
     meer papier maar iets donkerder, en dan zakt 4,95 naar 4,04. Deze diepere tint uit hetzelfde
     merkpalet staat op papier op 6,5, dus ook het slechtste geval haalt AA ruim. (Bram, ronde 3) */
  color: var(--gedempt-diep);
  font-size: var(--type-klein);
  font-style: normal;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  max-width: var(--kop-breed);
}

.bron {
  color: var(--gedempt);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ==================== knoppen ==================== */
.knop {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  padding: var(--ruimte-3) var(--ruimte-4);
  border: 0;
  border-radius: var(--radius-pil);
  font-family: inherit;
  font-size: var(--type-klein);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-knop);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.knop-primair { background: var(--primair); color: var(--wit); }
.knop-primair:hover { background: var(--primair-diep); color: var(--wit); }

/* geel 3 van 3: de laatste actie op de pagina */
.knop-accent {
  background: var(--accent);
  color: var(--inkt);
  padding: var(--ruimte-3) var(--ruimte-5);
  font-size: var(--type-basis);
}
.knop-accent:hover { background: color-mix(in srgb, var(--accent) 86%, var(--inkt)); color: var(--inkt); }

.knop-klein {
  background: var(--primair);
  color: var(--wit);
  padding: var(--ruimte-2) var(--ruimte-3);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.knop-klein:hover { background: var(--primair-diep); color: var(--wit); }

.knop-tekst {
  color: var(--op-donker);
  font-size: var(--type-klein);
  font-weight: var(--w-half);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.45);
  padding-bottom: var(--ruimte-1);
  transition: border-color var(--duur-micro) var(--curve-uit), color var(--duur-micro) var(--curve-uit);
}
.knop-tekst:hover { color: var(--op-donker); border-bottom-color: var(--op-donker); }

/* ==================== kopbalk ==================== */
.kop {
  position: fixed;
  inset: var(--ruimte-3) var(--ruimte-3) auto;
  z-index: 60;
}

.kop-balk {
  display: flex;
  align-items: center;
  gap: var(--ruimte-4);
  width: min(1360px, 100%);
  margin-inline: auto;
  padding: var(--ruimte-2) var(--ruimte-2) var(--ruimte-2) var(--ruimte-3);
  background: rgb(246 245 241 / 0.84);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-pil);
  box-shadow: var(--schaduw-kaart);
  transition: background-color var(--duur-micro) var(--curve-uit),
              box-shadow var(--duur-micro) var(--curve-uit);
}

/* Hier stond: .kop[data-nav-scroll] .kop-balk { background: rgb(251 250 247 / .96) }, oftewel "bij
   het scrollen wordt de balk nog iets witter". Weggehaald, want de balk is sinds Nicks pin 144
   standaard donker en licht alleen op het heroframe van de homepage; die regel liep dus precies
   de verkeerde kant op. Ze weghalen was ook nodig en niet alleen netjes: met twee klassen plus een
   attribuut woog ze zwaarder dan de nieuwe .kop-balk verderop, dus ze won bij elke scroll.
   De hele kleurregeling van de kopbalk staat nu bij elkaar in het blok "#140 en #144" onderaan. */

.merk {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  color: var(--inkt);
  text-decoration: none;
}

/* Nick: "logo mag iets groter". Stond op 24 en verdween daarmee naast de woordmerknaam ernaast,
   die op 16 px staat: het beeldmerk las als een bullet, niet als het logo. Op 34 px is het het
   zwaarste element links in de balk en blijft de balkhoogte gelijk (de knop rechts is hoger).
   Geldt voor alle 23 pagina's, want dit is dezelfde kopbalk. */
.merk img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  box-shadow: none;
  border-radius: 0;
}

.merk-naam {
  font-size: var(--type-klein);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.1;
}

/* De kopbalk is doorschijnend, dus de effectieve ondergrond is donkerder dan papier. Op --gedempt
   haalde deze staart maar 3,59; met --inkt-zacht blijft hij ook boven het donkerste heroframe
   ruim boven 4,5. Het rangverschil met "Flash" ligt nu bij het gewicht. */
.merk-staart {
  color: var(--inkt-zacht);
  font-weight: var(--w-normaal);
  letter-spacing: var(--ls-label);
}
.merk-staart::before { content: " "; }

.hoofdmenu { margin-left: auto; }

.menu {
  display: flex;
  align-items: center;
  gap: var(--ruimte-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-link {
  display: block;
  padding: var(--ruimte-2) var(--ruimte-2);
  color: var(--inkt);
  font-size: var(--type-micro);
  font-weight: var(--w-half);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-s);
  transition: color var(--duur-micro) var(--curve-uit), background-color var(--duur-micro) var(--curve-uit);
}
.menu-link:hover { color: var(--primair); background: var(--primair-licht); }

.menu-tik {
  padding: var(--ruimte-1);
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  border-radius: var(--radius-s);
}
.menu-tik:hover { box-shadow: none; transform: none; }

.tik {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gedempt);
  border-bottom: 2px solid var(--gedempt);
  transform: rotate(45deg) translate3d(-1px, -1px, 0);
  transition: transform var(--duur-micro) var(--curve-uit), border-color var(--duur-micro) var(--curve-uit);
}
.menu-tik[aria-expanded="true"] .tik {
  transform: rotate(225deg) translate3d(-1px, -1px, 0);
  border-color: var(--primair);
}

.uitklap {
  position: absolute;
  top: calc(100% + var(--ruimte-2));
  left: 0;
  min-width: 220px;
  padding: var(--ruimte-2);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--radius-l);
  box-shadow: var(--schaduw-kaart-hover);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -8px, 0);
  transition: opacity var(--duur-micro) var(--curve-uit),
              transform var(--duur-micro) var(--curve-uit),
              visibility var(--duur-micro) var(--curve-uit);
}

.uitklap[data-open] {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.uitklap a {
  display: block;
  padding: var(--ruimte-2) var(--ruimte-3);
  color: var(--inkt);
  font-size: var(--type-klein);
  font-weight: var(--w-half);
  letter-spacing: 0;
  text-decoration: none;
  border-radius: var(--radius-m);
  transition: background-color var(--duur-micro) var(--curve-uit), color var(--duur-micro) var(--curve-uit);
}
.uitklap a:hover { background: var(--primair-licht); color: var(--primair-diep); }

.menu-knop {
  display: none;
  padding: var(--ruimte-2) var(--ruimte-3);
  background: var(--inkt);
  border: 0;
  border-radius: var(--radius-pil);
  cursor: pointer;
}

.streepjes { display: block; width: 16px; }
.streepjes i {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--op-donker);
  border-radius: var(--radius-pil);
}

/* ==================== mobiel paneel ==================== */
.mobielmenu {
  position: fixed;
  inset: 0;
  z-index: 55;
  padding: var(--ruimte-8) var(--kant) var(--ruimte-6);
  background: var(--papier-warm);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -16px, 0);
  transition: opacity var(--duur-onthul) var(--curve),
              transform var(--duur-onthul) var(--curve),
              visibility var(--duur-onthul) var(--curve);
}

.mobielmenu[data-open] { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); }

/* Op een telefoon is er geen Escape-toets. Deze knop staat boven in het paneel, is de eerste stop
   in de tabvolgorde en sluit het menu met muis en met toetsenbord. */
.mm-sluit {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-4);
  padding: var(--ruimte-2) var(--ruimte-3);
  background: var(--inkt);
  color: var(--op-donker);
  border: 0;
  border-radius: var(--radius-pil);
  font-family: inherit;
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
}
.mm-sluit:hover { background: var(--inkt-zacht); }

.mm-kruis {
  position: relative;
  width: var(--ruimte-3);
  height: var(--ruimte-3);
}
.mm-kruis::before, .mm-kruis::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--op-donker);
  border-radius: var(--radius-pil);
}
.mm-kruis::before { transform: rotate(45deg); }
.mm-kruis::after { transform: rotate(-45deg); }

.mm-groep { padding-block: var(--ruimte-3); border-top: 1px solid var(--lijn-fijn); }
.mm-groep:first-of-type { border-top: 0; }

.mm-groep a {
  display: block;
  padding: var(--ruimte-1) 0;
  color: var(--gedempt-diep);
  font-size: var(--type-klein);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.mm-groep a:hover { color: var(--primair); }

.mm-kop {
  color: var(--inkt) !important;
  font-size: var(--type-h4) !important;
  font-weight: var(--w-half);
  letter-spacing: var(--ls-tussenkop);
  line-height: var(--lh-tussen);
}

.mm-knop { margin-top: var(--ruimte-5); }

/* ==================== 1. hero ==================== */
.hero {
  position: relative;
  display: grid;
  align-content: end;
  min-height: min(92vh, 820px);
  padding: var(--ruimte-8) 0 var(--ruimte-6);
  overflow: hidden;
  isolation: isolate;
}

.hero-beeld { position: absolute; inset: 0; z-index: -1; }

.hero-poster, .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.hero-video { position: absolute; inset: 0; }

/* Nick over de hero: "de header video hoeft niet zo te trillen, maak deze alleen rustig in en
   uitzoomend op een subtiele manier." Het schudden zat in de opname zelf, niet in een CSS-regel,
   dus is er niets aan te temperen zolang de video speelt. De hero draait daarom op het stilstaande
   posterbeeld met een trage adembeweging: 26 seconden van 1 naar 1,05 en weer terug, ease-in-out,
   zonder pauze aan de uiteinden. Dat is de beweging die hij vraagt, en het scheelt ook nog 830 kB
   op de eerste laadbeurt. De video staat nog in media/hero.mp4: wil je hem terug, zet het
   <video>-blok in index.html terug en haal deze animatie weg. */
.hero-poster {
  transform-origin: 52% 46%;
  animation: hero-adem var(--duur-adem) var(--curve-hover) infinite alternate both;
  will-change: transform;
}

@keyframes hero-adem {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* gerichte gradient: het beeld blijft boven vrij, de tekst krijgt onder grond */
.hero-sluier {
  position: absolute;
  inset: 0;
  background:
    /* De 0,22-stop stond op 66 procent. Het hero-label staat op 79 procent van de hero-hoogte, dus
       precies in de dunste strook van de sluier: daar was de dekking nog maar 0,10, en juist daar
       kruist een lichte diagonale streep in het beeld. Gemeten per letterpixel zakte 3,4 tot 4,1
       procent van de letters onder 4,5. Deze stop naar 78 procent verdubbelt de dekking onder het
       label zonder de hero zichtbaar te verduisteren. (Sanne, ronde 3) */
    linear-gradient(to top,
      rgb(5 14 27 / 0.94) 0%,
      rgb(5 14 27 / 0.86) 18%,
      rgb(5 14 27 / 0.58) 42%,
      rgb(5 14 27 / 0.22) 78%,
      rgb(5 14 27 / 0.04) 90%,
      rgb(5 14 27 / 0) 100%),
    linear-gradient(to right,
      rgb(5 14 27 / 0.55) 0%,
      rgb(5 14 27 / 0.18) 46%,
      rgb(5 14 27 / 0) 74%);
}

/* lichte verzachting van het beeld precies daar waar de kop staat */
.hero-waas {
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0.75) 45%, rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0.75) 45%, rgb(0 0 0 / 0) 100%);
}

.hero-binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--gat);
  width: min(var(--breed), 100% - var(--kant) * 2);
  margin-inline: auto;
  padding-top: var(--ruimte-5);
}

.hero-label {
  margin-bottom: var(--ruimte-4);
  /* Stond op --op-donker-zacht (82 procent dekking) en zonder schaduw, op een BEWEGEND beeld. Op het
     gemeten frame zakte de onderkant naar 2,22 waar 4,5 moet. De kop eronder had zijn schaduw wel.
     Vol wit plus dezelfde schaduw, dan hangt de leesbaarheid niet meer af van welk frame er staat.
     (Bram, ronde 3) */
  color: var(--op-donker);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  text-shadow: 0 1px 2px rgb(5 14 27 / 0.92), 0 1px 12px rgb(5 14 27 / 0.7);
  text-transform: uppercase;
}

.hero-kop {
  max-width: var(--kop-lang);
  color: var(--op-donker);
  font-size: var(--type-h1);
  font-weight: var(--w-licht);
  letter-spacing: var(--ls-kop);
  line-height: 1.02;
  text-wrap: initial;
  text-shadow: 0 2px 24px rgb(5 14 27 / 0.45);
}

/* het ene uitgelichte woord, en verder niets gekleurd in de kop.
   Zonder blok eronder: op het donkere heroframe las dat papieren vlak als een tekstselectie.
   De kleur is een lichte tint van het primaire blauw, zodat het accent leesbaar blijft. */
.uitlicht {
  color: var(--primair-op-donker);
}

.hero-lead {
  margin-top: var(--ruimte-5);
  max-width: var(--lees-smal);
  color: var(--op-donker-zacht);
  font-size: var(--type-lead);
  font-weight: var(--w-licht);
  line-height: 1.6;
  text-shadow: 0 1px 12px rgb(5 14 27 / 0.6);
}

.hero-acties {
  display: flex;
  align-items: center;
  gap: var(--ruimte-5);
  flex-wrap: wrap;
  margin-top: var(--ruimte-5);
}

/* de enige doorlopende animatie op de pagina */
.wenk {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-3);
  margin-top: var(--ruimte-6);
  color: var(--op-donker-zacht);
  font-size: var(--type-micro);
  font-weight: var(--w-half);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duur-micro) var(--curve-uit);
}
.wenk:hover { color: var(--op-donker); }

.wenk-buis {
  display: block;
  width: 24px;
  height: 40px;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: var(--radius-pil);
  padding-top: var(--ruimte-2);
  text-align: center;
}

.wenk-stip {
  display: inline-block;
  width: 3px;
  height: 8px;
  background: var(--op-donker);
  border-radius: var(--radius-pil);
  /* Eén keer lopen na het laden, daarna stil. De hero-video is de enige doorlopende beweging. */
  animation: wenken 1900ms var(--curve) 600ms 1 both;
}

/* De stip zakt één keer door de buis en komt terug in ruststand: het eindbeeld is het beginbeeld,
   dus na die ene gang staat er niets meer te knipperen naast de heroteksten. */
@keyframes wenken {
  0%   { transform: translate3d(0, 0, 0); opacity: 1; }
  35%  { transform: translate3d(0, 14px, 0); opacity: 0.9; }
  55%  { transform: translate3d(0, 16px, 0); opacity: 0.2; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* de zwevende kaart rechtsonder */
.zweefkaart {
  width: 300px;
  padding: var(--ruimte-4);
  background: var(--wit);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-zweef);
  margin-bottom: var(--ruimte-6);
}

.zweef-beeld { margin-bottom: var(--ruimte-4); }

.zweef-beeld img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-m);
  transform: rotate(-2deg);
  box-shadow: var(--schaduw-beeld);
}

.zweef-label {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-2);
  /* Zelfde reden als .bijschrift, en hier woog het zwaarder: 11 tot 12,4 pixels vet kapitaal
     kwam op 3,77 uit onder de schaduw. (Bram, ronde 3) */
  color: var(--gedempt-diep);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* geel 1 van 3: de vonk bij het label */
.vonk {
  width: var(--ruimte-2);
  height: var(--ruimte-2);
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

.zweef-tekst {
  color: var(--inkt);
  font-size: var(--type-klein);
  font-weight: var(--w-half);
  line-height: 1.5;
  letter-spacing: var(--ls-tussenkop);
}

/* ==================== 2. kaartenrij ==================== */
.sectiekop { max-width: var(--lees-smal); margin-bottom: var(--ruimte-7); }
.sectiekop-breed { max-width: none; }
.sectiekop .inleiding { max-width: var(--lees); }

.kaartrij {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gat);
}

.kaart {
  display: flex;
  flex-direction: column;
  padding: var(--ruimte-5) var(--ruimte-4) 0;
  margin-bottom: var(--ruimte-5);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
  transition: box-shadow var(--duur-hover) var(--curve-hover),
              transform var(--duur-hover) var(--curve-hover);
}
.kaart:hover { transform: translate3d(0, var(--hef-hover), 0); box-shadow: var(--schaduw-kaart-hover); }

.kaart-oog {
  min-height: 2.8em;
  margin-bottom: var(--ruimte-4);
  color: var(--primair);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.kaart h3 { margin-bottom: var(--ruimte-3); }

.kaart p {
  color: var(--gedempt-diep);
  font-size: var(--type-klein);
  line-height: 1.65;
}

/* het signatuurmoment: gekanteld beeld dat over de onderrand steekt */
.kaart-beeld { margin-top: auto; padding-top: var(--ruimte-6); }

.kaart-beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-m);
  transform: rotate(-3deg) translate3d(0, var(--ruimte-5), 0);
  box-shadow: var(--schaduw-beeld);
  transition: transform var(--duur-hover) var(--curve-hover);
}
.kaart:hover .kaart-beeld img { transform: rotate(-2.2deg) translate3d(0, var(--ruimte-5), 0) scale(1.015); }

/* de plaat: het gekantelde beeld steekt over de onderrand van een wit vlak */
.plaat {
  padding: var(--ruimte-4) var(--ruimte-4) 0;
  margin-bottom: var(--ruimte-5);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
}

.werk-beeld .plaat img,
.sys-beeld .plaat img {
  transform: rotate(-3deg) translate3d(0, var(--ruimte-4), 0);
  box-shadow: var(--schaduw-beeld);
}

/* ==================== 3. abonnement ==================== */
.sectie-abo { background: linear-gradient(to bottom, var(--papier) 0%, var(--papier-warm) 100%); }

.abo-vlak {
  display: grid;
  grid-template-columns: var(--kolom-gelijk);
  gap: var(--ruimte-6);
  padding: var(--ruimte-6) var(--ruimte-6) var(--ruimte-7);
  background: var(--wit);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
}

/* geel 2 van 3: de vlag boven de kop van het abonnement */
.vlag {
  display: block;
  width: var(--ruimte-5);
  height: var(--ruimte-1);
  margin-bottom: var(--ruimte-4);
  background: var(--accent);
  border-radius: var(--radius-pil);
}

.abo-tekst h2 { max-width: var(--kop-kort); }
.abo-tekst .knop { margin-top: var(--ruimte-5); }

.abo-beeld img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-l);
  transform: rotate(-3deg) translate3d(0, var(--ruimte-4), 0);
  box-shadow: var(--schaduw-beeld);
}

.abo-beeld .bijschrift { margin-top: var(--ruimte-5); }

.abo-reeks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gat);
  margin: var(--ruimte-7) 0 0;
  padding: 0;
  list-style: none;
}

.abo-reeks li { padding-top: var(--ruimte-4); border-top: 2px solid var(--lijn); }

.reeks-nr {
  display: block;
  margin-bottom: var(--ruimte-3);
  color: var(--primair);
  font-size: var(--type-h4);
  font-weight: var(--w-licht);
  letter-spacing: var(--ls-caps);
  font-variant-numeric: tabular-nums;
}

.abo-reeks h3 { margin-bottom: var(--ruimte-2); font-size: var(--type-basis); font-weight: var(--w-vet); }

.abo-reeks p {
  color: var(--gedempt);
  font-size: var(--type-klein);
  line-height: 1.6;
}

/* ==================== 4. leessectie ==================== */
.lees-raster {
  display: grid;
  grid-template-columns: minmax(0, var(--lees)) minmax(0, 1fr);
  gap: var(--ruimte-8);
  justify-content: center;
}

.lees p { max-width: var(--lees); }
.lees h2 { margin-bottom: var(--ruimte-5); }

.lees-groot {
  margin-bottom: var(--ruimte-4);
  font-size: var(--type-lead);
  font-weight: var(--w-licht);
  line-height: 1.55;
  letter-spacing: var(--ls-tussenkop);
}

.lees h3 {
  margin-top: var(--ruimte-6);
  margin-bottom: var(--ruimte-4);
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--lijn-fijn);
  font-size: var(--type-h4);
  scroll-margin-top: var(--ruimte-7);
}

.lees > p { color: var(--gedempt-diep); }

.kantlijnen { padding-top: var(--ruimte-2); }

.kantlijn {
  padding-left: var(--ruimte-4);
  margin-bottom: var(--ruimte-6);
  border-left: 2px solid var(--primair-waas);
}

.kantlijn p {
  color: var(--gedempt);
  font-size: var(--type-klein);
  line-height: 1.6;
  max-width: var(--kop-breed);
}

/* De cijfers stonden hier op kopformaat en werden zo gelezen als een resultaat van Flash. Ze staan
   nu op broodtekstformaat in de zin zelf; boven de zin staat alleen nog wat voor soort getal het is. */
.kantlijn-noot {
  margin-bottom: var(--ruimte-2);
  color: var(--primair) !important;
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  line-height: 1.4;
  text-transform: uppercase;
}

/* ==================== 5. werkwijze ==================== */
.sectie-werk { background: var(--papier-warm); }

.werk-raster {
  display: grid;
  grid-template-columns: var(--kolom-beeld);
  gap: var(--ruimte-8);
  align-items: start;
}

.werk-links h2 { max-width: var(--kop-kort); }
.werk-beeld { margin-top: var(--ruimte-7); }

.werk-beeld img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-l);
  transform: rotate(-3deg) translate3d(0, var(--ruimte-3), 0);
  box-shadow: var(--schaduw-beeld);
}

.werk-beeld .bijschrift { margin-top: var(--ruimte-5); }

.stappen {
  margin: 0;
  padding: 0 0 0 var(--ruimte-5);
  list-style: none;
  border-left: 1px solid var(--lijn);
}

.stappen li { position: relative; padding-bottom: var(--ruimte-7); }
.stappen li:last-child { padding-bottom: 0; }

.stappen li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ruimte-5) - var(--ruimte-1) - 2px);
  top: var(--ruimte-2);
  width: 8px;
  height: 8px;
  background: var(--papier-warm);
  border: 2px solid var(--primair);
  border-radius: var(--radius-pil);
}

.stap-nr {
  margin-bottom: var(--ruimte-2);
  color: var(--gedempt);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.stappen h3 { margin-bottom: var(--ruimte-3); font-size: var(--type-h3); font-weight: var(--w-licht); }
.stappen p { color: var(--gedempt-diep); }

/* ==================== 6. dienstenlijst ==================== */
.dienstlijst { border-top: 1px solid var(--lijn); }

.dienst {
  display: grid;
  grid-template-columns: var(--kolom-kantlijn);
  gap: var(--gat);
  padding: var(--ruimte-6) var(--ruimte-4) var(--ruimte-6) 0;
  border-bottom: 1px solid var(--lijn);
  scroll-margin-top: var(--ruimte-7);
  /* De plek waar Nick het aanwees: het punt "schoot" naar rechts omdat padding-left in 400 ms van
     0 naar 24 px sprong en de tekst dus meebewoog. Nu schuift alleen het blok zelf, traag, over de
     helft van die afstand. De kleurwissel loopt mee zodat het één beweging blijft. */
  transition: background-color var(--duur-hover) var(--curve-hover),
              padding-left var(--duur-hover) var(--curve-hover);
}
.dienst:hover { background: var(--primair-licht); padding-left: var(--ruimte-3); }

.dienst-nr {
  color: var(--primair);
  font-size: var(--type-nummer);
  font-weight: var(--w-licht);
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.dienst-tekst h3 { margin-bottom: var(--ruimte-3); font-size: var(--type-h3); font-weight: var(--w-licht); }
.dienst-tekst p { color: var(--gedempt-diep); max-width: var(--lees); }

/* ==================== 7. marketing, drie kolommen ==================== */
.sectie-marketing { background: var(--papier-warm); }

.kolommen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ruimte-8);
}

.kolom { scroll-margin-top: var(--ruimte-7); }

.kolom h3 {
  margin-bottom: var(--ruimte-4);
  padding-bottom: var(--ruimte-3);
  border-bottom: 2px solid var(--primair-waas);
  font-size: var(--type-h3);
  font-weight: var(--w-licht);
}

.kolom p { color: var(--gedempt-diep); font-size: var(--type-klein); line-height: 1.7; }

/* ==================== 8. systemen ==================== */
.sys-raster {
  display: grid;
  grid-template-columns: var(--kolom-tekst);
  gap: var(--ruimte-8);
  align-items: center;
}

.sys-tekst h2 { max-width: var(--kop-mid); }

.pillen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  margin: var(--ruimte-6) 0 var(--ruimte-5);
  padding: 0;
  list-style: none;
}

.pil {
  padding: var(--ruimte-2) var(--ruimte-4);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--radius-pil);
  color: var(--inkt);
  font-size: var(--type-klein);
  font-weight: var(--w-half);
  letter-spacing: var(--ls-label);
  box-shadow: var(--schaduw-fijn);
  transition: transform var(--duur-hover) var(--curve-hover),
              box-shadow var(--duur-hover) var(--curve-hover),
              color var(--duur-hover) var(--curve-hover);
}
.pil:hover {
  transform: translate3d(0, -2px, 0) scale(1.015);
  box-shadow: var(--schaduw-kaart);
  color: var(--primair);
}

.naschrift {
  /* Zelfde reden als .bijschrift: slechtste geval 4,02 op websites.html. (Bram, ronde 3) */
  color: var(--gedempt-diep);
  font-size: var(--type-klein);
  line-height: 1.65;
  max-width: var(--lees);
}

.sys-beeld img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-l);
  transform: rotate(-3deg) translate3d(0, var(--ruimte-4), 0);
  box-shadow: var(--schaduw-beeld);
}

.sys-beeld .bijschrift { margin-top: var(--ruimte-6); }

/* ==================== 9. faq ==================== */
.faq-raster {
  display: grid;
  grid-template-columns: var(--kolom-beeld);
  gap: var(--ruimte-8);
  align-items: start;
}

.faq-kop h2 { max-width: var(--kop-kort); }
.faq-knop { margin-top: var(--ruimte-5); }

.faq-lijst details {
  padding: var(--ruimte-4) 0;
  border-bottom: 1px solid var(--lijn);
}
.faq-lijst details:first-child { border-top: 1px solid var(--lijn); }

.faq-lijst summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
  padding: var(--ruimte-2) 0;
  cursor: pointer;
  list-style: none;
  color: var(--inkt);
  font-size: var(--type-h4);
  font-weight: var(--w-half);
  letter-spacing: var(--ls-tussenkop);
  line-height: var(--lh-tussen);
  transition: color var(--duur-micro) var(--curve-uit);
}
.faq-lijst summary::-webkit-details-marker { display: none; }
.faq-lijst summary:hover { color: var(--primair); }

.plus {
  flex: none;
  width: var(--ruimte-4);
  height: var(--ruimte-4);
  background:
    linear-gradient(var(--primair), var(--primair)) center/2px 60% no-repeat,
    linear-gradient(var(--primair), var(--primair)) center/60% 2px no-repeat;
  border-radius: var(--radius-pil);
  transition: transform var(--duur-onthul) var(--curve);
}
details[open] .plus { transform: rotate(135deg); }

.antwoord { padding: var(--ruimte-3) var(--ruimte-6) var(--ruimte-2) 0; }
.antwoord p { color: var(--gedempt-diep); font-size: var(--type-klein); line-height: 1.7; }

/* ==================== 10. slot ==================== */
.slot {
  background:
    radial-gradient(120% 90% at 18% 0%, var(--inkt-hoog) 0%, rgb(15 39 72 / 0) 60%),
    var(--inkt-diep);
  color: var(--op-donker);
  text-align: left;
}

.slot-binnen { max-width: var(--lees-breed); }

.slot-kop {
  font-size: var(--type-h1);
  font-weight: var(--w-licht);
  letter-spacing: var(--ls-kop);
  line-height: 1.02;
}

.slot-lead {
  margin-top: var(--ruimte-5);
  max-width: var(--lees);
  color: var(--op-donker-zacht);
  font-size: var(--type-lead);
  font-weight: var(--w-licht);
  line-height: 1.6;
}

.slot .knop-accent { margin-top: var(--ruimte-6); }

.slot-gegevens {
  display: grid;
  gap: var(--ruimte-1);
  margin-top: var(--ruimte-6);
  padding-top: var(--ruimte-5);
  border-top: 1px solid rgb(255 255 255 / 0.16);
  color: var(--op-donker-zacht);
  font-size: var(--type-klein);
  font-style: normal;
  letter-spacing: var(--ls-label);
}
.slot-gegevens a { color: var(--op-donker); }
.slot-gegevens a:hover { color: var(--op-donker); }

.slot :focus-visible { outline-color: var(--accent); }

/* ==================== voet ==================== */
.voet {
  padding-block: var(--ruimte-7) var(--ruimte-5);
  background: var(--papier-warm);
  border-top: 1px solid var(--lijn-fijn);
}

.voet-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--gat);
  padding-bottom: var(--ruimte-6);
}

.voet-woord {
  margin-bottom: var(--ruimte-3);
  color: var(--inkt);
  font-size: var(--type-h3);
  font-weight: var(--w-licht);
  letter-spacing: var(--ls-kop);
  line-height: 1;
}

.voet-regel {
  /* --ruimte-1 (4px) was te krap: zie het blok "feedbackronde tweede ronde" onderaan dit blad.
     --ruimte-2 is dezelfde maat als .voet-kolom li ernaast, dus de vijf kolommen lopen gelijk. */
  margin-bottom: var(--ruimte-2);
  color: var(--gedempt);
  font-size: var(--type-klein);
  line-height: 1.6;
  max-width: var(--kop-breed);
}

.voet-kop {
  margin-bottom: var(--ruimte-4);
  color: var(--inkt);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.voet-kolom ul { margin: 0; padding: 0; list-style: none; }
.voet-kolom li { margin-bottom: var(--ruimte-2); }

.voet-kolom a {
  color: var(--gedempt);
  font-size: var(--type-klein);
  text-decoration: none;
  transition: color var(--duur-micro) var(--curve-uit);
}
.voet-kolom a:hover { color: var(--primair); text-decoration: underline; }

.voet-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-3) var(--ruimte-5);
  padding-top: var(--ruimte-5);
  border-top: 1px solid var(--lijn-fijn);
}

.voet-fijn, .flash-credit {
  margin: 0;
  color: var(--gedempt);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-label);
}

.flash-credit { margin-left: auto; }
.flash-credit a { color: var(--gedempt-diep); }

.voet-juridisch { display: flex; flex-wrap: wrap; gap: var(--ruimte-4); }

.voet-juridisch a {
  color: var(--gedempt);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  transition: color var(--duur-micro) var(--curve-uit);
}
.voet-juridisch a:hover { color: var(--primair); }

/* ==================== 404 ==================== */
.mis {
  display: grid;
  align-content: center;
  min-height: min(78vh, 700px);
  padding-block: var(--ruimte-8) var(--sectie);
}

/* Het getal stond op de nummermaat en werd daarmee 76 pixels, terwijl de kop van deze pagina op
   h2-formaat staat en 56 meet. De grootste letter op een pagina hoort de kop te zijn, niet de
   foutcode; het getal is een aanduiding en geen titel. Het staat nu een trede onder de kop. */
.mis-code {
  margin-bottom: var(--ruimte-4);
  color: var(--primair);
  font-size: var(--type-h3);
  font-weight: var(--w-licht);
  letter-spacing: var(--ls-kop);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mis h1 {
  font-size: var(--type-h2);
  font-weight: var(--w-licht);
  letter-spacing: var(--ls-kop);
}

.mis-lead {
  margin-top: var(--ruimte-4);
  max-width: var(--lees);
  color: var(--gedempt-diep);
  font-size: var(--type-lead);
  font-weight: var(--w-licht);
  line-height: 1.6;
}

.mis .knop { margin-top: var(--ruimte-5); }

.mis-verder { margin-top: var(--ruimte-6); padding-top: var(--ruimte-4); border-top: 1px solid var(--lijn-fijn); }
.mis-verder .voet-kop { margin-bottom: var(--ruimte-3); }
.mis-links { display: flex; flex-wrap: wrap; gap: var(--ruimte-3) var(--ruimte-4); }

.mis-links a {
  color: var(--gedempt-diep);
  font-size: var(--type-klein);
  letter-spacing: var(--ls-label);
  text-decoration: none;
}
.mis-links a:hover { color: var(--primair); text-decoration: underline; }

/* het beeld steekt over de rand van zijn vlak zodra er ruimte voor is */
@media (min-width: 1081px) {
  .abo-beeld {
    display: flex;
    flex-direction: column;
    margin-right: calc(-1 * (var(--ruimte-6) + var(--ruimte-4)));
  }
  .abo-beeld img { flex: 1 1 auto; min-height: 360px; aspect-ratio: auto; }
  .sys-beeld { margin-right: calc(-1 * var(--ruimte-5)); }
}

/* ==================== ademruimte op kleinere schermen ==================== */
@media (max-width: 1080px) {
  .kaartrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abo-reeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lees-raster, .werk-raster, .sys-raster, .faq-raster { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-7); }
  .kantlijnen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); }
  .kantlijn { margin-bottom: 0; }
  .kolommen { gap: var(--ruimte-6); }
  .sys-beeld { max-width: 380px; }
  .voet-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-5) var(--gat); }
}

/* Zodra alles onder elkaar valt, telt de lucht tussen de blokken dubbel: dezelfde treden uit de
   ruimteschaal, één stap kleiner. Zonder dit werd de mobiele pagina 18348px lang. */
@media (max-width: 900px) {
  :root { --sectie: var(--ruimte-6); }

  .sectiekop { margin-bottom: var(--ruimte-5); }
  .lees-raster, .werk-raster, .sys-raster, .faq-raster { gap: var(--ruimte-6); }
  .lees h3 { margin-top: var(--ruimte-5); }
  .werk-beeld { margin-top: var(--ruimte-5); }
  .werk-beeld .bijschrift, .abo-beeld .bijschrift, .sys-beeld .bijschrift { margin-top: var(--ruimte-4); }
  .stappen li { padding-bottom: var(--ruimte-6); }
  .abo-reeks { margin-top: var(--ruimte-6); }
  .pillen { margin: var(--ruimte-5) 0 var(--ruimte-4); }
  .voet { padding-block: var(--ruimte-6) var(--ruimte-5); }
  .voet-raster { padding-bottom: var(--ruimte-5); }
}

@media (max-width: 900px) {
  .hoofdmenu, .knop-klein { display: none; }
  .menu-knop { display: block; margin-left: auto; }
  .hero-video { display: none; }

  .hero { min-height: 0; padding: calc(var(--ruimte-8) - var(--ruimte-3)) 0 var(--ruimte-5); }
  .hero-binnen { grid-template-columns: minmax(0, 1fr); padding-top: var(--ruimte-5); }
  .hero-kop { max-width: none; }
  .zweefkaart { width: 100%; max-width: 340px; margin-bottom: 0; margin-top: var(--ruimte-5); }
  .wenk { margin-top: var(--ruimte-5); }

  .abo-vlak { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-6); padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-5); }
  .kolommen { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-4); }
  .dienst { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-3); padding-block: var(--ruimte-5); }
  .dienst-nr { line-height: 1; }
}

@media (max-width: 640px) {
  .kaartrij { grid-template-columns: minmax(0, 1fr); }
  .abo-reeks { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-4); margin-top: var(--ruimte-6); }

  /* één kaart per rij: de uitlijnhoogte van het oogje is dan dode ruimte, en het beeld hoeft
     niet zo hoog te staan om nog als overstekende plaat te lezen */
  .kaart { padding: var(--ruimte-4) var(--ruimte-4) 0; margin-bottom: var(--ruimte-4); }
  .kaart-oog { min-height: 0; margin-bottom: var(--ruimte-3); }
  .kaart-beeld { padding-top: var(--ruimte-5); }
  .kaart-beeld img { aspect-ratio: 16 / 9; }
  .sys-beeld img { aspect-ratio: 3 / 4; }
  .dienst { padding-block: var(--ruimte-4); }
  .faq-lijst details { padding: var(--ruimte-3) 0; }
  .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kantlijnen { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-5); }
  .voet-onder { gap: var(--ruimte-4); }
  .flash-credit { margin-left: 0; }
  .antwoord { padding-right: 0; }
  .hero-acties { gap: var(--ruimte-4); }
  .knop-accent { padding: var(--ruimte-3) var(--ruimte-4); font-size: var(--type-klein); }
}

@media (max-width: 380px) {
  .merk-staart { display: none; }
}

/* ==================== ruststaat ==================== */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-poster { animation: none; transform: none; }
  .logobalk-spoor { animation: none; }
  .logobalk { -webkit-mask-image: none; mask-image: none; }
  .logobalk-rij { overflow-x: auto; }
  .wenk-stip { animation: none; opacity: 1; }
  .uitklap { transition: none; }
}

/* ==========================================================================
   TOEVOEGING (Eva): de pagina's Over Flash, Waarom Flash, Missie en visie,
   Veelgestelde vragen en Contact.
   Hierboven verandert niets. Dit blok voegt alleen de vormen toe die er nog
   niet waren: een paginakop voor een pagina zonder hero, een tegenlijst,
   een gegevenslijst en het contactformulier. Al het andere op die vijf
   pagina's draait op de klassen die hierboven al staan.
   ========================================================================== */

/* ---- de paginakop: doet op een inhoudspagina wat de hero op de homepage doet.
   De kopbalk staat vast bovenin, dus de bovenruimte is de trede die eronderuit
   komt. --sectie zakt onder 900px vanzelf mee.

   Dit is de enige paginakop van de site. Er stonden er drie: deze, .dienstkop
   voor de servicepagina's en .mk-kop voor de kanaalpagina's. Dezelfde vorm,
   drie keer geschreven. Ze zijn hier ingetrokken.

   Daarna liepen er nog drie families onder deze ene naam door: de kale kop
   (familie A), --smal met het brede raster (familie B) en --vlak of --stil
   (familie C), plus de losse .kaderkop van seo-check. Verschillende
   kopbreedtes, verschillende leadbreedtes, verschillende achtergrond. Familie A
   is nu de maat, en --smal en --vlak zijn weg: wat ze deden staat hieronder in
   het component zelf. Er blijven twee varianten over, allebei met een echt
   doel en met dezelfde maatvoering:

     --stil   alles gecentreerd, voor de pagina waar een gesprek verkoopt en
              geen product
     --kader  de kop staat in een diep donker vlak binnen het papier

   De rasters en de knoppenrij hebben hun eigen varianten, want ze komen ook
   los van de kop op de pagina voor. ---- */
.paginakop {
  padding-block: var(--ruimte-8) var(--sectie);
  background: linear-gradient(to bottom, var(--papier-warm) 0%, var(--papier) 100%);
}

/* ---- de stille kop: voor de zachtste pagina's, waar een gesprek verkoopt en
   geen product. ---- */
.paginakop--stil {
  display: grid;
  justify-items: center;
  text-align: center;
  /* Deze kop draagt geen beeld en geen kaart, dus onder de knoppen stond de volle sluitruimte
     van de kop plus de openingsruimte van de volgende sectie: samen bijna 290 pixels leeg vlak.
     De volgende sectie brengt zijn eigen lucht mee; hier is er geen nodig. */
  padding-block-end: 0;
}

/* ---- de kaderkop: dezelfde kop, maar in een diep donker vlak. Het vlak is het doel; de
   maatvoering blijft die van de rest. ---- */
.paginakop--kader { padding-block: var(--ruimte-8) 0; }

/* De kop en de alinea's houden hun leesbreedte, maar die smallere kolom moet zelf ook midden in
   het vlak staan. Zonder deze regel staat elk blok links uitgelijnd met alleen de tekst erbinnen
   gecentreerd, en dan zwemt het oogje links van de kop. */
.paginakop--stil h1,
.paginakop--stil p,
.paginakop--stil .vlag { margin-inline: auto; }
.paginakop--stil .pk-acties { justify-content: center; }

/* Deze kop droeg geen beeld, en dat was op strategisch-advies één van de drie paginakoppen van
   de site zonder beeld. Het beeld komt hier niet naast de tekst te staan, want dat zou de
   middenas breken die deze variant juist maakt: het ligt eronder, gecentreerd, en houdt een
   breedte aan die smaller is dan de wrap zodat het geen band over de volle pagina wordt. */
.paginakop--stil .beeldvlak {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: 0;
}
.paginakop--stil .beeldvlak .plaat { margin-bottom: var(--ruimte-4); }

/* Er stonden drie rasters onder deze kop: 1.1/0.9 met een gat van 144, 1.15/0.85 met 96 en
   1.25/0.75 met 64. Dat gaf drie tekstkolommen (581, 635 en 710) en dus drie leadbreedtes.
   Dit is de enige verdeling.

   Bijgesteld van 1.4/0.6 met een gat van 64 naar 1.3/0.7 met een gat van 40. Reden: de
   beeldkolom kwam op 340 uit en het beeld zelf, binnen de witte plaat, op 291. Naast een kop
   van 92 pixels leest dat als een postzegel, en in de donkere beelden was het onderwerp niet
   meer te zien. Nu: tekstkolom 754, beeldkolom 406, het beeld zelf 372. De tekstkolom blijft
   ruim genoeg voor de knoppenrij (de zwaarste heeft er 728 nodig) en de lead landt op 59
   tekens per regel. De h1 vult deze kolom nu helemaal; --kop-blok bindt hier niet meer. */
.pk-raster {
  display: grid;
  grid-template-columns: var(--kolom-tekst);
  gap: var(--ruimte-5);
  align-items: center;
}

/* de tweede kolom draagt hier een kaart in plaats van een beeld, en die lijnt
   op de voet van de kop uit */
.pk-raster--voet { align-items: end; }

.pk-top { align-items: start; }

/* Op de smalste schermen past een lang Nederlands woord op kopformaat niet meer op één regel, en
   een woord dat niet past steekt buiten het vlak. break-word ligt eronder als vangnet voor een
   woord zonder afbreekpunt; de kop draagt zelf een zacht afbreekstreepje op de juiste plek. */
.paginakop h1 {
  font-size: var(--type-h1);
  font-weight: var(--w-licht);
  letter-spacing: var(--ls-kop);
  line-height: 1.04;
  overflow-wrap: break-word;
}

/* De lead stond op max-width: none en werd alleen door --smal teruggezet. Bij --vlak en --stil
   kwam er nooit een breedte terug, en dan loopt hij over de volle 1200: 85 tot 97 tekens per
   regel. Dit is de leesmaat van de site, en die geldt hier net zo goed.
   Met de tweede term erbij: 52ch meet op leadformaat 827 pixels, en in een volle kolom zonder
   beeld was de lead daarmee bréder dan de kop erboven. Een lead die verder doorloopt dan zijn
   eigen kop leest als een kop die te vroeg is afgekapt. Hij houdt nu de kopmaat aan als die
   krapper is. */
.paginakop .inleiding { max-width: min(var(--lees), var(--kop-blok)); }

.pk-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-4) var(--ruimte-5);
  margin-top: var(--ruimte-5);
}

/* Op waarom-flash stond deze rij als enige van de site gestapeld: de knop plus de zachte link
   hadden er 807 nodig en de kolom is 754, dus viel de link naar de tweede regel. Op een breed
   scherm hoort deze rij één regel te zijn. Boven 1081 breekt de rij daarom niet meer af en mag
   de zachte link zelf krimpen; zijn eigen tekst loopt dan over twee regels in plaats van de
   hele rij. Onder 1081 blijft de rij gewoon afbreken, want daar hoort hij te stapelen. */
@media (min-width: 1081px) {
  .paginakop .pk-acties { flex-wrap: nowrap; }
  /* De knop krimpt niet mee: een knoplabel over twee regels is erger dan de stapeling die we
     hier net weghalen. Alleen de zachte link geeft ruimte terug. */
  .paginakop .pk-acties > .knop { flex: 0 0 auto; }
  .paginakop .pk-acties > .zachte-link { min-width: 0; }
}

/* de knoppenrij onder een kop op vlak papier: dichter op elkaar, een trede
   verder onder de lead */
.pk-acties--dicht { gap: var(--ruimte-4); margin-top: var(--ruimte-6); }
/* en de ruime variant, waar de rij maar twee ingangen draagt */
.pk-acties--ruim { gap: var(--ruimte-5); }

/* de zachte ingang naast de hoofdactie, op papier in plaats van op het donkere heroframe.
   .mk-door van de kanaalpagina's is hierin opgegaan: zelfde kleur, zelfde maat, zelfde
   onderrand, alleen een zwaarder gewicht en een pijl. Het gewicht van deze link is de maat
   geworden; de pijl staat er nu bij voor iedereen die er een meegeeft. */
.zachte-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  color: var(--primair);
  font-size: var(--type-klein);
  font-weight: var(--w-half);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  border-bottom: 1px solid var(--primair-waas);
  padding-bottom: var(--ruimte-1);
  transition: color var(--duur-micro) var(--curve-uit), border-color var(--duur-micro) var(--curve-uit);
}
.zachte-link:hover { color: var(--primair-diep); border-bottom-color: var(--primair); }
.zachte-link [data-pijl] { display: inline-block; flex: none; transition: transform var(--duur-micro) var(--curve-uit); }
.zachte-link:hover [data-pijl] { transform: translate3d(4px, 0, 0); }

/* De plaat om een kopbeeld heeft een smallere rand dan de platen in de lopende tekst. De rand
   van 24 kostte hier 50 van de 340 pixels beeldkolom, oftewel een zevende van het beeld, en dat
   is precies de plek waar het beeld het smalst is. Zestien is nog steeds een zichtbare witte
   rand en levert 16 pixels beeld op. */
.pk-beeld .plaat { padding: var(--ruimte-3) var(--ruimte-3) 0; }

/* het signatuurmoment op deze pagina's: het beeld staat gekanteld over de onderrand van zijn plaat */
.pk-beeld .plaat img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-m);
  transform: rotate(-3deg) translate3d(0, var(--ruimte-4), 0);
  box-shadow: var(--schaduw-beeld);
}
.pk-beeld--staand .plaat img { aspect-ratio: 3 / 4; }
.pk-beeld .bijschrift { margin-top: var(--ruimte-4); }

/* ---- de tegenlijst: wat de positionering niet is ---- */
.tegen {
  display: grid;
  gap: var(--ruimte-5);
  margin: var(--ruimte-6) 0 0;
  padding: 0;
  list-style: none;
}

.tegen li { padding-left: var(--ruimte-4); border-left: 2px solid var(--primair-waas); }
.tegen h3 { margin-bottom: var(--ruimte-2); }
.tegen p { color: var(--gedempt-diep); font-size: var(--type-klein); line-height: 1.7; }

/* ---- de gegevenslijst ---- */
.gegevens {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ruimte-3) var(--ruimte-5);
  margin: var(--ruimte-5) 0 0;
}

.gegevens dt {
  color: var(--gedempt);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  line-height: 1.8;
  text-transform: uppercase;
}

.gegevens dd {
  margin: 0;
  color: var(--inkt);
  font-size: var(--type-klein);
  line-height: 1.6;
}

/* ---- het contactformulier ---- */
.formulier {
  display: grid;
  gap: var(--ruimte-4);
  padding: var(--ruimte-5);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
}

.veld { display: grid; gap: var(--ruimte-2); }

.veld label {
  color: var(--inkt);
  font-size: var(--type-klein);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-label);
}

.veld input,
.veld textarea {
  width: 100%;
  padding: var(--ruimte-3);
  background: var(--papier-warm);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  color: var(--inkt);
  font-family: inherit;
  font-size: var(--type-klein);
  line-height: 1.6;
  transition: border-color var(--duur-micro) var(--curve-uit);
}
.veld input:hover, .veld textarea:hover { border-color: var(--gedempt); }
.veld input::placeholder, .veld textarea::placeholder { color: var(--gedempt); }

/* Het chassis zet op elke focus-rand border-radius 2px. Op een invoerveld maakt dat de hoeken
   vierkant zodra je erin klikt; hier houden we de eigen radius vast. */
.veld input:focus-visible,
.veld textarea:focus-visible { border-radius: var(--radius-m); }

.veld textarea { min-height: 144px; resize: vertical; }

.veld-fijn {
  color: var(--gedempt);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-label);
  line-height: 1.7;
}

/* De spamval. Een echte bezoeker ziet dit veld niet en komt er met Tab ook niet in. */
.vangnet {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulier .knop { justify-content: center; }

.melding {
  padding: var(--ruimte-4);
  background: var(--primair-licht);
  border-radius: var(--radius-m);
}
.melding p { color: var(--inkt-zacht); font-size: var(--type-klein); line-height: 1.65; }

/* ---- meebuigen ---- */
@media (max-width: 1080px) {
  .pk-raster,
  .paginakop--kader .pk-raster { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-6); }
  .pk-beeld { max-width: 480px; }
  .pk-beeld--staand { max-width: 340px; }
  /* Zodra de kop de volle breedte krijgt is die breedte ook de kolom: het blok waar de kop
     hierboven op staat is dan de pagina zelf. De vaste blokmaat zou de kop hier smaller maken
     dan de kolom waar hij in staat, en dat leest als een kop die te vroeg afbreekt. */
  h1 { max-width: none; }
}

@media (max-width: 900px) {
  .paginakop { padding-block: var(--ruimte-7) var(--sectie); }
  .pk-raster { gap: var(--ruimte-6); }
  .tegen { margin-top: var(--ruimte-5); }
}

@media (max-width: 640px) {
  .formulier { padding: var(--ruimte-4); }
  .gegevens { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-1); }
  .gegevens dd { margin-bottom: var(--ruimte-3); }
  .gegevens dd:last-child { margin-bottom: 0; }
}

/* ==========================================================================
   TOEVOEGING ronde 2, deel A: de juridische tekstpagina's
   Platte leespagina's in dezelfde vormtaal: papier, veel lucht, een kolom van
   60 tot 70 tekens. Er is hierboven niets veranderd; alles hieronder is nieuw
   en wordt alleen gebruikt door privacyverklaring, cookiebeleid,
   algemene-voorwaarden en disclaimer.
   ========================================================================== */

/* De leeskolom. 52ch mat in deze letter 63 tot 67 tekens per regel, dus binnen
   de norm 60 tot 70. Dezelfde maat als --lees, zodat een alinea hier precies zo
   breed staat als in de leessectie op de homepage. */
/* De leeskolom stond gecentreerd in de wrap en begon daardoor op 389 pixels, terwijl de eerste
   letter op alle andere pagina's op 120 begint. Vier van de drieëntwintig pagina's die honderd
   pixels verderop beginnen leest als een andere site. De kolom houdt zijn leesmaat en gaat
   alleen tegen de linkerlijn aan staan. */
.jur-lees { max-width: var(--lees); }

/* De kop van een tekstpagina. De kopbalk zweeft, dus de eerste regel begint een
   ruimtetrede lager dan de sectiestandaard. */
.jur-intro { padding: var(--ruimte-8) 0 var(--ruimte-6); }

.jur-intro h1 {
  font-size: var(--type-h2);
  font-weight: var(--w-licht);
  letter-spacing: var(--ls-kop);
}

.jur-lead {
  margin-top: var(--ruimte-4);
  color: var(--gedempt-diep);
  font-size: var(--type-lead);
  font-weight: var(--w-licht);
  line-height: 1.6;
}

.jur-datum {
  margin-top: var(--ruimte-5);
  color: var(--gedempt);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* De lopende tekst. Eén niveau tussenkop, want dieper hoeft een leespagina niet
   te gaan. h1 staat op --type-h2 en h2 op --type-h4, dat is overal minstens
   1,5 verschil, ook op 320 pixels. */
.jur-tekst { padding-block: 0 var(--sectie); }

.jur-tekst h2 {
  margin-top: var(--ruimte-6);
  margin-bottom: var(--ruimte-3);
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--lijn-fijn);
  font-size: var(--type-h4);
  font-weight: var(--w-half);
  letter-spacing: var(--ls-tussenkop);
  line-height: var(--lh-tussen);
}

.jur-tekst p { color: var(--gedempt-diep); }

.jur-tekst ul {
  margin: 0 0 var(--ruimte-3);
  padding-left: var(--ruimte-4);
  max-width: var(--lees);
  color: var(--gedempt-diep);
}

.jur-tekst li { margin-bottom: var(--ruimte-2); }
.jur-tekst li:last-child { margin-bottom: 0; }
.jur-tekst li::marker { color: var(--primair); }

/* Het kaartje met de kern, boven de lange tekst. Wie alleen dit leest, weet
   genoeg. */
.jur-kort {
  margin-bottom: var(--ruimte-6);
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-4);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
}

.jur-kort-kop {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-4);
  color: var(--gedempt);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.jur-kort ul { margin: 0; padding-left: var(--ruimte-4); max-width: none; }
.jur-kort li { color: var(--inkt); font-size: var(--type-klein); line-height: 1.65; }

/* Het adresblok van de verwerkingsverantwoordelijke. */
.jur-gegevens {
  display: grid;
  gap: var(--ruimte-1);
  margin-bottom: var(--ruimte-3);
  padding: var(--ruimte-4);
  background: var(--papier-warm);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--radius-l);
  color: var(--inkt);
  font-size: var(--type-klein);
  font-style: normal;
  letter-spacing: var(--ls-label);
}

/* De afsluiter met de weg naar contact. De gele rand is het derde en laatste
   gele moment op deze pagina's: vlag, vonk, rand. */
.jur-slot {
  margin-top: var(--ruimte-6);
  padding: var(--ruimte-5);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-left: var(--ruimte-1) solid var(--accent);
  border-radius: var(--radius-l);
  box-shadow: var(--schaduw-kaart);
}

.jur-slot h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.jur-slot .knop { margin-top: var(--ruimte-4); }

@media (max-width: 640px) {
  .jur-intro { padding: var(--ruimte-7) 0 var(--ruimte-5); }
  .jur-kort, .jur-slot { padding: var(--ruimte-4); }
}

/* ==========================================================================
   TOEVOEGING ronde 2, deel B: de doorverwijzing onder een samenvatting
   De secties op de homepage zijn nu de samenvatting van een echte pagina. Een
   samenvatting zonder vervolgstap is een doodlopend blok, dus krijgt elke
   sectie die een eigen pagina heeft een link naar die pagina.
   ========================================================================== */

.verder { margin-top: var(--ruimte-5); max-width: none; }

.verder a {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  padding-bottom: var(--ruimte-1);
  color: var(--primair);
  font-size: var(--type-klein);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  border-bottom: 1px solid var(--primair-waas);
  transition: color var(--duur-micro) var(--curve-uit),
              border-color var(--duur-micro) var(--curve-uit);
}

.verder a:hover { color: var(--primair-diep); border-bottom-color: var(--primair); }
.verder a [data-pijl] { display: inline-block; transition: transform var(--duur-micro) var(--curve-uit); }
.verder a:hover [data-pijl] { transform: translate3d(4px, 0, 0); }

/* de variant onder een los onderdeel binnen een sectie */
.verder-klein { margin-top: var(--ruimte-3); }
.verder-klein a { font-size: var(--type-micro); letter-spacing: var(--ls-label); }

/* de variant op de donkere slotsectie */
.verder-licht a { color: var(--op-donker); border-bottom-color: rgb(255 255 255 / 0.4); }
.verder-licht a:hover { color: var(--op-donker); border-bottom-color: var(--op-donker); }

/* ==========================================================================
   TOEVOEGING (Eva, servicepagina's): de vijf servicepagina's
   services.html, seo-check.html, google-bedrijfsprofiel.html,
   online-presentatie.html, strategisch-advies.html

   Alleen vormen die op de homepage nog niet bestonden. Alles hierboven is
   ongewijzigd; de homepage draait daarop. Kleuren, ruimtetreden, type en
   schaduwen komen uit dezelfde tokens, en het signatuurmoment van B1 blijft:
   beeld staat licht gekanteld en steekt over de onderrand van zijn vlak.
   Geel blijft precies drie keer per pagina, altijd via .vonk, .vlag en
   .knop-accent; hieronder komt geen enkele nieuwe accentkleur bij.
   ========================================================================== */

/* De lichte paginakop en de stille paginakop die hier stonden zijn opgegaan in
   .paginakop hierboven. De donkere kaderkop stond daar los naast, met een eigen
   raster, een eigen kopmaat en een eigen leadmaat. Het diepe vlak blijft, want
   dat is het doel van deze pagina; de maatvoering komt nu uit .paginakop, via
   de variant --kader. Wat hieronder overblijft is alleen het vlak zelf. */

/* ---------- donkere kaderkop: een diep vlak binnen het papier ---------- */
.kadervlak {
  padding: var(--ruimte-6) var(--ruimte-5);
  background:
    radial-gradient(120% 90% at 12% 0%, var(--inkt-hoog) 0%, rgb(15 39 72 / 0) 62%),
    var(--inkt-diep);
  border-radius: var(--radius-xl);
  color: var(--op-donker);
}

/* De binnenruimte van het kader kost 80 pixels, dus dezelfde breukverdeling zou hier een
   smallere tekstkolom geven dan op papier. Deze verdeling laat de kolom naast dezelfde maat
   landen als op papier, zodat de lead ook binnen dit vlak op ruim zestig tekens per regel
   staat. Vanaf 1081, want daaronder valt het raster net als elders terug op één kolom.

   Twee dingen bijgesteld. De verdeling ging van 1.5/0.5 naar 1.3/0.7: het beeld rendeerde hier
   op 274 pixels, de smalste van de site, en de kop stond in een kolom van 792 op een blok van
   600. En het vlak schuift nu een binnenrand naar buiten, want de linkerlijn van deze pagina
   lag op 160 terwijl hij overal elders op 120 ligt. De wrap wordt precies de padding van het
   vlak breder en houdt dezelfde afstand tot de schermrand aan als elke andere wrap; de tekst
   erbinnen begint daardoor op dezelfde lijn als op de tweeëntwintig andere pagina's. */
@media (min-width: 1081px) {
  .paginakop--kader .pk-raster { grid-template-columns: var(--kolom-tekst); }
  .paginakop--kader > .wrap {
    width: min(calc(var(--breed) + var(--ruimte-5) * 2), 100% - (var(--kant) - var(--ruimte-5)) * 2);
  }
}

.kadervlak h1 { color: var(--op-donker); }
.kadervlak .inleiding { color: var(--op-donker-zacht); }
.kadervlak :focus-visible { outline-color: var(--accent); }

.kader-beeld img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-l);
  transform: rotate(-3deg) translate3d(0, var(--ruimte-3), 0);
  box-shadow: var(--schaduw-zweef);
}

/* ---------- tweede knop op papier: lijn in plaats van vlak ---------- */
.knop-lijn {
  background: var(--wit);
  color: var(--primair-diep);
  border: 1px solid rgb(0 74 173 / 0.3);
}
.knop-lijn:hover { background: var(--primair-licht); color: var(--primair-diep); }

/* ---------- wegwijzer: de vier routes als korte index ---------- */
.wegwijzer {
  padding: var(--ruimte-5);
  background: var(--wit);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
}

.wegwijzer ol { margin: 0; padding: 0; list-style: none; }

.wegwijzer li + li {
  margin-top: var(--ruimte-3);
  padding-top: var(--ruimte-3);
  border-top: 1px solid var(--lijn-fijn);
}

.wegwijzer a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ruimte-3);
  color: var(--inkt);
  text-decoration: none;
}

.weg-nr {
  color: var(--primair);
  font-size: var(--type-klein);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  font-variant-numeric: tabular-nums;
}

.weg-titel {
  display: block;
  font-size: var(--type-basis);
  font-weight: var(--w-half);
  letter-spacing: var(--ls-tussenkop);
  line-height: 1.3;
}

.weg-uitleg {
  display: block;
  margin-top: var(--ruimte-1);
  color: var(--gedempt);
  font-size: var(--type-klein);
  line-height: 1.55;
}

.wegwijzer a:hover .weg-titel { color: var(--primair); }

/* ---------- de vier wegen als kaarten, twee bij twee ---------- */
.wegen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gat);
}

.weg {
  display: flex;
  flex-direction: column;
  padding: var(--ruimte-5);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
  transition: box-shadow var(--duur-hover) var(--curve-hover),
              transform var(--duur-hover) var(--curve-hover);
}
.weg:hover { transform: translate3d(0, var(--hef-hover), 0); box-shadow: var(--schaduw-kaart-hover); }

.weg-cijfer {
  display: block;
  margin-bottom: var(--ruimte-4);
  color: var(--primair);
  font-size: var(--type-nummer);
  font-weight: var(--w-licht);
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.weg h3 { margin-bottom: var(--ruimte-3); font-size: var(--type-h3); font-weight: var(--w-licht); }
.weg p { color: var(--gedempt-diep); font-size: var(--type-klein); line-height: 1.65; }

.weg-link {
  margin-top: auto;
  padding-top: var(--ruimte-4);
  font-size: var(--type-klein);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-label);
  text-decoration: none;
}
.weg-link:hover { text-decoration: underline; }

/* ---------- punten: genummerd noch opgesomd, wel afgestreept ---------- */
.punten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ruimte-5) var(--ruimte-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.punten li { padding-top: var(--ruimte-4); border-top: 2px solid var(--primair-waas); }
.punten h3 { margin-bottom: var(--ruimte-2); font-size: var(--type-basis); font-weight: var(--w-vet); }
.punten p { color: var(--gedempt-diep); font-size: var(--type-klein); line-height: 1.65; }

/* ---------- blokjes: drie korte uitleggen naast elkaar ---------- */
.blokjes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gat);
}

.blokje {
  padding: var(--ruimte-5) var(--ruimte-4);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-top: 3px solid var(--primair);
  border-radius: var(--radius-l);
  box-shadow: var(--schaduw-kaart);
}

.blokje h3 { margin-bottom: var(--ruimte-3); font-size: var(--type-h4); }
.blokje p { color: var(--gedempt-diep); font-size: var(--type-klein); line-height: 1.65; }

/* ---------- het bezwaar hardop, in een eigen vlak ---------- */
.bezwaar {
  display: grid;
  grid-template-columns: var(--kolom-beeld);
  gap: var(--ruimte-6);
  padding: var(--ruimte-5);
  background: var(--wit);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
}

.bezwaar-vraag {
  max-width: var(--kop-mid);
  font-size: var(--type-h3);
  font-weight: var(--w-licht);
  letter-spacing: var(--ls-tussenkop);
  line-height: var(--lh-tussen);
}

.bezwaar p { color: var(--gedempt-diep); }
.bezwaar p + p { margin-top: var(--ruimte-3); }

/* ---------- beeldvlak: dezelfde plaat, drie verhoudingen ---------- */
/* De plaat vangt de onderkant van het gekantelde beeld op, en onder het bijschrift hoort een hele
   trede lucht: anders leest het bijschrift als de eerste regel van de alinea die erop volgt. */
.beeldvlak { margin-bottom: var(--ruimte-6); }
.beeldvlak .plaat { margin-bottom: var(--ruimte-6); }

.beeldvlak .plaat img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-l);
  transform: rotate(-2deg) translate3d(0, var(--ruimte-4), 0);
  box-shadow: var(--schaduw-beeld);
}

.beeldvlak-breed .plaat img { aspect-ratio: 21 / 9; }
.beeldvlak-blok .plaat img { aspect-ratio: 4 / 3; }
.beeldvlak-staand .plaat img { aspect-ratio: 3 / 4; }

/* ---------- adresproef: hetzelfde bedrijf, twee adressen ---------- */
.adresproef {
  padding: var(--ruimte-5);
  background: var(--wit);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
}

.adresregel {
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--papier);
  border-radius: var(--radius-m);
  color: var(--gedempt-diep);
  font-size: var(--type-klein);
  letter-spacing: 0.01em;
  line-height: 1.6;
}

.adresregel + .adresregel { margin-top: var(--ruimte-3); }

.adres-eigen {
  background: var(--primair-licht);
  color: var(--primair-diep);
  font-weight: var(--w-vet);
}

/* ---------- vragen: waar de lezer nu misschien staat ---------- */
.vragen { margin: 0; padding: 0; list-style: none; }

.vragen li {
  position: relative;
  max-width: var(--lees-smal);
  padding: var(--ruimte-4) 0 var(--ruimte-4) var(--ruimte-5);
  border-bottom: 1px solid var(--lijn-fijn);
  color: var(--inkt-zacht);
  font-size: var(--type-lead);
  font-weight: var(--w-licht);
  line-height: 1.6;
}

.vragen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--ruimte-4) + 0.7em);
  width: var(--ruimte-4);
  height: 2px;
  background: var(--primair);
  border-radius: var(--radius-pil);
}

/* Het .actievlak stond hier: een tweede afsluiter, wit op warm papier, met .actie-adres
   eronder. Eén pagina van de negentien sloot daarmee af en de andere achttien met .slot,
   terwijl allebei precies hetzelfde doen. Google Bedrijfsprofiel draait nu ook op .slot. */

/* ---------- slot gecentreerd, voor de pagina's die zacht eindigen ---------- */
.slot-midden { margin-inline: auto; text-align: center; }
.slot-midden .slot-lead { margin-inline: auto; }
.slot-midden .slot-gegevens { justify-items: center; }

/* ---------- twee kolommen tekst en beeld, beeld rechts ---------- */
.duo {
  display: grid;
  grid-template-columns: var(--kolom-gelijk);
  gap: var(--ruimte-7);
  align-items: center;
}

.duo-smal { grid-template-columns: var(--kolom-tekst); }

/* ---------- ademruimte op kleinere schermen ---------- */
@media (max-width: 1080px) {
  .bezwaar,
  .duo,
  .duo-smal { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-6); }
  .blokjes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* zodra het staande beeld onder de tekst valt, is staand de verkeerde vorm: het wordt dan een
     band over de volle breedte van het kader, met dezelfde kanteling. */
  .kader-beeld img { aspect-ratio: 21 / 9; }
}

@media (max-width: 900px) {
  .paginakop--kader { padding-block: var(--ruimte-7) 0; }
  .kadervlak { padding: var(--ruimte-5) var(--ruimte-4); }
  .beeldvlak .plaat { margin-bottom: var(--ruimte-5); }
}

@media (max-width: 640px) {
  .wegen, .punten, .blokjes { grid-template-columns: minmax(0, 1fr); }
  .punten { gap: var(--ruimte-4); }
  .kader-beeld img { aspect-ratio: 4 / 3; }
  /* Het kader legt binnen de wrap nog eens 24 pixels binnenruimte, en daardoor was de
     tekstkolom hier 294 pixels tegen 342 op elke andere pagina: de kop brak op 390 drie keer
     af waar hij elders twee regels haalt. Het vlak schuift nu een trede naar buiten en legt
     die trede zelf weer als binnenruimte, zodat de kolom precies zo breed is als overal. */
  .kadervlak {
    margin-inline: calc(var(--ruimte-2) * -1);
    padding: var(--ruimte-5) var(--ruimte-2);
  }
  .wegwijzer, .adresproef { padding: var(--ruimte-4); }
  .beeldvlak-breed .plaat img { aspect-ratio: 4 / 3; }
  .vragen li { padding-left: var(--ruimte-4); }
  .vragen li::before { width: var(--ruimte-3); }
}

/* twee naregels bij het blok hierboven: een genummerde reeks die direct onder een sectiekop
   begint heeft de extra bovenruimte niet nodig, en een duo met een lange lijst lijnt boven uit. */
.abo-reeks.reeks-los { margin-top: 0; }
.duo-top { align-items: start; }

/* ==========================================================================
   TOEVOEGING (Eva, de drie websitepagina's): websites.html, werkwijze.html
   en systemen.html.

   Deze drie pagina's draaien vrijwel volledig op klassen die hierboven al
   staan: .paginakop met .pk-raster en .pk-beeld voor de kop, .bezwaar voor
   het bezwaar dat hardop wordt benoemd, .blokjes, .wegen, .tegen,
   .dienstlijst, .abo-vlak, .stappen, .sys-raster, .lees-raster en .slot.
   Hieronder staan alleen de twee dingen die er nog niet waren. Er is
   hierboven niets veranderd, en er komt geen kleur bij: geel blijft precies
   drie keer per pagina, via .vonk, .vlag en .knop-accent.
   ========================================================================== */

/* Twee bezwaren onder elkaar in plaats van één. De .bezwaar-vlakken zijn
   losse witte platen, dus ze hebben lucht tussen zich nodig; dezelfde trede
   als de andere kaartrijen op de site. */
.bezwaren {
  display: grid;
  gap: var(--gat);
}

/* Het menu linkt naar websites.html#abonnement en de kopbalk staat vast
   bovenin. Zonder deze marge landt de sprong met de kop van het abonnement
   onder die balk. */
.anker { scroll-margin-top: var(--ruimte-7); }

/* Vervolg op het blok hierboven: op de contactpagina is het formulier zelf de hoofdactie. Het
   krijgt daarom de bredere helft en staat bovenaan uitgelijnd, niet gecentreerd naast de tekst. */
/* De tekstkolom was hier 524 pixels en dat was de smalste h1 van de site. Hij staat nu ruimer,
   zodat de kop hier net zoveel regels haalt als op de andere pagina's.
   De naam was .paginakop-contact met één streepje, naast .paginakop--kader en .paginakop--stil
   met twee. Dat zijn dezelfde soort varianten van hetzelfde component, dus schrijven ze zich
   hetzelfde. Nu .paginakop--contact. */
.paginakop--contact .pk-raster {
  grid-template-columns: var(--kolom-tekst);
  gap: var(--ruimte-5);
  align-items: start;
}

@media (max-width: 1080px) {
  .paginakop--contact .pk-raster { grid-template-columns: minmax(0, 1fr); }
}

/* op online-presentatie.html ligt de adresproef over de volle breedte onder de kop: twee
   adressen naast elkaar, zodat het verschil in een oogopslag te lezen is. */
/* Een blok dat onder de knoppenrij in de kop hangt heeft zijn eigen bovenruimte nodig. De plaat
   op google-bedrijfsprofiel had die niet: die begon vier pixels onder de knop en dat leest als
   een botsing. Dezelfde trede als de adresproef ernaast. */
.paginakop .adresproef,
.paginakop .beeldvlak { margin-top: var(--ruimte-6); }
.adresrij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ruimte-4); }
.adresrij .adresregel + .adresregel { margin-top: 0; }
.adresproef .bijschrift { margin-top: var(--ruimte-3); }

@media (max-width: 640px) {
  .adresrij { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   TOEVOEGING augustus 2026: de vier pagina's onder Online marketing
   (online-marketing, google-ads, social-media-ads, bing-ads).
   Alleen vormen die de homepage nog niet had. Boven deze regel is niets
   gewijzigd, dus de homepage draait onveranderd door.
   ========================================================================== */

/* -- kop van een inhoudspagina --------------------------------------------
   Die staat niet meer hier: deze vier pagina's draaien op .paginakop met de
   variant --smal en het raster --breed, hetzelfde component als de rest van de
   site. Wat hieronder overblijft zijn de vormen die alleen deze vier pagina's
   hebben. */

/* De bestaande .sectiekop is 46ch breed, gemeten op de broodtekstmaat. Een
   .inleiding staat daarbinnen op leadmaat en haalt dan maar 40 tekens per
   regel. Deze variant laat de kop smal en geeft de inleiding zijn eigen maat,
   zodat de regellengte tussen 60 en 70 tekens landt. */
.mk-lead { max-width: none; }
.mk-lead h2 { max-width: var(--kop-mid); }
.mk-lead .inleiding { max-width: var(--lees); }

/* De tekstlink naast de hoofdknop stond hier als .mk-door en is opgegaan in .zachte-link:
   dat waren twee klassen voor precies hetzelfde ding. */

/* -- brede beeldband ------------------------------------------------------ */
.mk-band .plaat { margin-bottom: var(--ruimte-5); }

.mk-band .plaat img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  transform: rotate(-1.2deg) translate3d(0, var(--ruimte-4), 0);
  box-shadow: var(--schaduw-beeld);
}

.mk-band .bijschrift { max-width: var(--lees-smal); }

/* -- oogje met de vonk ervoor -------------------------------------------- */
.mk-oog-vonk { display: flex; align-items: center; gap: var(--ruimte-2); }

/* -- lichte sectie -------------------------------------------------------- */
.mk-warm { background: var(--papier-warm); }

/* een kantlijnnoot onder de kop van de vragensectie */
.mk-faq-noot { margin-top: var(--ruimte-6); margin-bottom: 0; }

/* -- tweeluik: zoals het meestal gaat, en zoals wij het doen -------------- */
.mk-tweeluik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); }

.mk-vak {
  padding: var(--ruimte-5);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
}

/* de bestaande situatie krijgt geen kaart maar een omtrek, zodat het oog
   meteen ziet welke helft de onze is */
.mk-vak.mk-vak-nu { background: none; border: 1px dashed var(--lijn); box-shadow: none; }
.mk-vak.mk-vak-wij { border-top: 3px solid var(--primair); }

.mk-vak-kop {
  margin-bottom: var(--ruimte-3);
  color: var(--gedempt);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.mk-vak h3 { margin-bottom: var(--ruimte-4); font-size: var(--type-h3); font-weight: var(--w-licht); }
.mk-vak p { color: var(--gedempt-diep); font-size: var(--type-klein); line-height: 1.7; }

/* -- de drie wegen naar de kanaalpagina's --------------------------------- */
.mk-wegen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); }

.mk-weg {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-3);
  padding: var(--ruimte-5);
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-kaart);
  transition: transform var(--duur-hover) var(--curve-hover),
              box-shadow var(--duur-hover) var(--curve-hover);
}
.mk-weg:hover { transform: translate3d(0, var(--hef-hover), 0); box-shadow: var(--schaduw-kaart-hover); }

.mk-weg-nr {
  margin: 0;
  color: var(--primair);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.mk-weg h3 { font-size: var(--type-h3); font-weight: var(--w-licht); }
.mk-weg p { margin: 0; color: var(--gedempt-diep); font-size: var(--type-klein); line-height: 1.7; }
.mk-weg .zachte-link { margin-top: auto; align-self: flex-start; }

/* -- puntenlijst met een blauwe ruit -------------------------------------- */
.mk-punten { display: grid; gap: var(--ruimte-4); margin: var(--ruimte-5) 0 0; padding: 0; list-style: none; }

.mk-punten li {
  position: relative;
  padding-left: var(--ruimte-5);
  max-width: var(--lees);
  color: var(--gedempt-diep);
  font-size: var(--type-klein);
  line-height: 1.7;
}

.mk-punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: var(--ruimte-2);
  height: var(--ruimte-2);
  background: var(--primair);
  border-radius: 2px;
  transform: rotate(45deg);
}

.mk-punt-kop {
  display: block;
  margin-bottom: var(--ruimte-1);
  color: var(--inkt);
  font-size: var(--type-basis);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-tussenkop);
  line-height: 1.3;
}

/* -- genummerde reeks, drie of vijf breed --------------------------------- */
.mk-reeks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gat);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mk-reeks li { padding-top: var(--ruimte-4); border-top: 2px solid var(--lijn); }
.mk-reeks h3 { margin-bottom: var(--ruimte-2); font-size: var(--type-basis); font-weight: var(--w-vet); }
.mk-reeks p { margin: 0; color: var(--gedempt); font-size: var(--type-klein); line-height: 1.6; }

/* -- tegenover elkaar: vraag vangen naast vraag maken --------------------- */
.mk-tegenover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ruimte-6); align-items: start; }
.mk-tvak { padding-top: var(--ruimte-4); border-top: 2px solid var(--primair-waas); }
.mk-tvak h3 { margin-bottom: var(--ruimte-4); font-size: var(--type-h3); font-weight: var(--w-licht); }
.mk-tvak p { color: var(--gedempt-diep); }

.mk-tgroot {
  margin-bottom: var(--ruimte-4);
  color: var(--inkt);
  font-size: var(--type-lead);
  font-weight: var(--w-licht);
  letter-spacing: var(--ls-tussenkop);
  line-height: 1.55;
}

/* -- wanneer het wel past en wanneer niet --------------------------------- */
.mk-welniet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ruimte-6); align-items: start; }
.mk-welniet h3 { margin-bottom: var(--ruimte-4); font-size: var(--type-h3); font-weight: var(--w-licht); }
.mk-welniet ul { display: grid; gap: var(--ruimte-4); margin: 0; padding: 0; list-style: none; }

.mk-welniet li {
  padding-left: var(--ruimte-4);
  border-left: 2px solid var(--primair);
  color: var(--gedempt-diep);
  font-size: var(--type-klein);
  line-height: 1.7;
}
.mk-welniet .mk-niet li { border-left-color: var(--lijn); }

/* -- ademruimte op kleinere schermen, dezelfde treden --------------------- */
@media (max-width: 1080px) {
  .mk-wegen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-tegenover, .mk-welniet { gap: var(--ruimte-6); }
}

@media (max-width: 900px) {
  .mk-tweeluik, .mk-wegen, .mk-tegenover, .mk-welniet { grid-template-columns: minmax(0, 1fr); }
  .mk-reeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-band .plaat img { aspect-ratio: 16 / 9; }
  .mk-punten { margin-top: var(--ruimte-4); }
}

@media (max-width: 640px) {
  .mk-reeks { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-4); }
  .mk-vak, .mk-weg { padding: var(--ruimte-4); }
  .mk-band .plaat img { aspect-ratio: 3 / 2; }
}

/* Twee bezwaren naast elkaar in dezelfde kolombreedte als de rest van de
   lopende tekst: bij de standaardverdeling wordt de antwoordkolom 607 pixels
   en dat mat 52 tot 58 tekens per regel, net onder de norm van 60 tot 70.
   Met deze verdeling meet dezelfde alinea 60 tot 65 tekens, gelijk aan de
   leeskolom op de homepage. Alleen binnen .bezwaren, dus een los .bezwaar
   elders op de site verandert niet.
   Onder 1081 pixels valt .bezwaar al onder elkaar; deze regel staat dus
   binnen een min-width, anders zou hij die stapeling ongedaan maken. */
@media (min-width: 1081px) {
  .bezwaren .bezwaar { grid-template-columns: var(--kolom-beeld); }
}

/* Correctie op de spamval hierboven: met left -9999px telde het veld op een scherm van 320 pixels
   mee in de scrollbreedte, en dat gaf horizontale overloop. Dit is dezelfde wegwerktruc als .vzw:
   het veld blijft in het formulier staan en blijft invulbaar voor een robot, maar het heeft geen
   afmeting meer en kan dus niets meer opduwen. */
.vangnet {
  position: absolute;
  left: auto;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Correctie op het formulier: een invoerveld is hier een rasteritem, en een rasteritem krijgt van
   de browser een minimumbreedte gelijk aan zijn eigen inhoudsmaat. Bij een input is dat de breedte
   van het size-attribuut, ongeveer twintig tekens, en op een scherm van 320 pixels duwde dat het
   formulier buiten het vlak. Met min-width 0 telt alleen nog width 100 procent. */
.formulier, .veld { min-width: 0; }
.veld input, .veld textarea { min-width: 0; max-width: 100%; }

/* En het veld in de spamval krimpt mee. Het weggewerkte vlak was al 1 pixel breed, maar het veld
   erin hield zijn eigen maat en dat telde op 320 pixels alsnog mee in de scrollbreedte. */
.vangnet input { width: 1px; height: 1px; padding: 0; border: 0; }

/* Op de smalste schermen past een lang Nederlands woord ("concurrenten", "apenstaartje") niet
   meer naast de typeschaal. Daar breekt de kop dus af, met een koppelteken waar de browser dat
   kan. Deze regel staat bewust in een mediaquery: op bredere schermen hoort een kop nooit af te
   breken, en als dat daar toch gebeurt is de kolom te smal en niet de letter te groot.

   Gecorrigeerd voor de h1. Hierboven stond dat de schaal niet omlaag mocht, en het gevolg was
   "Wij verge-lijken jouw website met je con-currenten" over zes regels op 320, "Je website
   le-vert niets op" op 390 en "Frisse blik nodig om ver-der te groeien" op 414. Een afgebroken
   woord in de grootste letter van de pagina leest als een fout, en dat weegt zwaarder dan de
   sprong in de schaal. De h1 zakt onder 520 dus één trede, van 57,8 naar 41 op 320, en breekt
   niet meer af. De trap loopt door: op precies 520 komt hij op dezelfde 57,8 uit als de schaal
   erboven, dus er zit geen sprong in de overgang. Bij 41 pixels meet "concurrenten" 260 pixels
   in een kolom van 272, en dat is de krapste combinatie van de site.
   De andere koppen hieronder houden hun automatische afbreking: een h3 in een blokje van een
   halve kolom heeft die nodig, en daar is de letter niet de grootste van de pagina. */
@media (max-width: 520px) {
  :root { --type-h1: clamp(41px, 8.4vw + 14.1px, 57.8px); }

  .paginakop h1 {
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: break-word;
  }

  .bezwaar-vraag, .blokje h3, .weg h3, .punten h3 {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* In het tweekoloms blok zonder inleiding plakte de kop tegen de eerste alinea, omdat h2 in de
   grond geen ondermarge heeft. Eén trede lucht eronder. Staat er wel een lead onder de kop, dan
   brengt die zijn eigen bovenruimte mee en vallen de twee marges over elkaar heen. */
.pk-raster h2 { margin-bottom: var(--ruimte-4); }

/* ==================== kopbalk: passen tussen 900 en 1400 ====================
   De rij merk plus menu plus actieknop heeft ongeveer 1300 pixels binnenruimte nodig. Onder 1400
   paste hij dus niet meer op een regel en wrong het menu zich over twee regels, waardoor de kopbalk
   van 55 naar 74 pixels sprong. Dat gold voor de hele site en ook voor de losse b1-preview.

   Oplossing in twee treden, zonder de bureaunavigatie op te geven op een laptop:
     - onder 1400 vervalt de actieknop in de balk (de actie staat in de hero en in de voet)
     - onder 1180 vervalt ook de staart van het woordmerk, zodat alleen FLASH overblijft
   Onder 900 neemt het mobiele paneel het over, zoals het altijd al deed. */
@media (max-width: 1399px) {
  .kop .knop-klein { display: none; }
}

@media (max-width: 1179px) {
  .kop .merk-staart { display: none; }
}

/* Tussen 1400 en 1479 komt de actieknop terug (216 pixels) terwijl de balk nog niet genoeg is
   meegegroeid. De rij vraagt dan 1372 pixels binnenruimte en krijgt er 1312 tot 1389. Er moet dus
   iets wijken, en dat is de staart van het woordmerk en niet de knop: die knop is het enige
   conversiepad in de kopbalk, en FLASH met het logo ernaast leest nog steeds als het merk. Boven
   1480 past alles en komt de staart terug. Gemeten met scratchpad/kopbalk.mjs. (Sanne, ronde 3) */
@media (min-width: 1400px) and (max-width: 1479px) {
  .kop .merk-staart { display: none; }
}

/* Tussen 901 en 959 past de menu-rij nog steeds niet op een regel, ook zonder de actieknop en de
   woordmerkstaart. Daar neemt het paneel het over. Alleen de navigatie schuift mee; de rest van de
   opmaak houdt zijn eigen breekpunt op 900, want die past daar prima. */
@media (max-width: 959px) {
  .hoofdmenu, .kop .knop-klein { display: none; }
  .menu-knop { display: block; margin-left: auto; }
}

/* ==================== kopbalk: ook boven 1600 ====================
   De vorige reparatie loste alleen de onderkant op. Boven ongeveer 1700 pixels brak de balk alsnog:
   de menuletters groeien met vw mee terwijl de balk op min(1360px, 100%) blijft staan, dus de rij
   wordt breder dan zijn eigen doos. Gemeten: 55 pixels hoog tot 1640, daarna 77 en twee regels, met
   de uitklappijltjes losgeraakt van hun label en het woordmerk gebroken in FLASH DIGITAL / AGENCY.

   Twee ingrepen. De menu-items en het woordmerk breken nooit meer af, zodat een te krappe balk
   zichtbaar wringt in plaats van stilletjes te wrappen. En vanaf 1440 groeit de balk mee tot 1560,
   zodat de rij de ruimte krijgt die de grotere letters vragen. */
.menu-link,
.menu-item > a,
.merk-naam,
.merk-staart {
  white-space: nowrap;
}

/* De actieknop komt terug vanaf 1400, maar de balk groeide pas vanaf 1440 mee, en dan nog met een
   volle kantlijn aan beide zijden. Daardoor paste de rij tussen 1400 en 1530 niet in zijn eigen doos
   en stak de knop erbuiten: gemeten 2 pixels op 1400, 72 op 1440, 23 op 1500. Dat was op geen enkele
   overloopmeting te zien, want .kop is position:fixed en telt niet mee in document.scrollWidth.
   Daarom staat er nu een eigen meting voor de kopbalk.

   Twee ingrepen: de balk groeit vanaf hetzelfde punt waarop de knop terugkomt, en hij mag daarvoor
   één kantlijn opgeven in plaats van twee. De rij vraagt ongeveer 1362 pixels binnenruimte; met deze
   formule krijgt hij die vanaf 1400. (Sanne, ronde 3) */
@media (min-width: 1400px) {
  .kop-balk,
  .kop .wrap {
    width: min(1560px, 100% - var(--kant));
  }
}

/* ==================== de hoofdknop op smal scherm ====================
   "Plan een gratis kennismaking" is de knop waar de hele site naartoe wijst. Op smal scherm brak het
   label over twee regels terwijl de pijl als los flex-item rechts bleef plakken, met een gat van 160
   tot 234 pixels ertussen. Op 320 pixels gebeurde dat op alle twintig inhoudspagina's.

   De pijl hoort bij de laatste regel van het label, niet in een eigen kolom. Daarom is de knop geen
   flexrij meer maar gewone tekst met de pijl als inline element erin; het label mag afbreken, de
   pijl loopt mee. De uitlijning blijft gelijk omdat de knop zijn eigen padding houdt. */
.knop {
  display: inline-block;
  text-align: center;
  text-wrap: balance;
}

.knop [data-pijl] {
  display: inline;
  margin-left: var(--ruimte-2);
  white-space: nowrap;
}

/* De kleine knop in de kopbalk blijft wel op een regel: daar is de ruimte bekend en een
   afgebroken label in een balk van 55 pixels hoog past niet. */
.knop-klein { display: inline-flex; align-items: center; }

/* De kopbalk is een flexrij, en tussen 1440 en 1499 kneep die het merk en de actieknop samen: de
   knop zakte van 217 naar 204 pixels breed, brak over twee regels en trok de balk van 55 naar 64
   pixels hoog. Merk en knop hebben een vaste maat nodig; alleen het menu ertussen mag meebewegen. */
.kop-balk > .merk,
.kop-balk > .knop {
  flex: none;
  white-space: nowrap;
}

/* ==========================================================================
   TOEVOEGING: één liggende variant van de heroplaat in het kader
   ==========================================================================
   Het kader op seo-check droeg een staand beeld, en de nieuwe reeks levert
   daar een liggend beeld voor: de zwevende betonplaat, die van links naar
   rechts door het beeld loopt. In de staande sleuf van 3/4 valt van die plaat
   aan weerskanten een stuk weg, en dat is precies het onderwerp.

   Op de brede kolom wordt het daarom 4/3. Dat is de smalste sleuf waar de
   plaat nog helemaal in past, en hij houdt in de kolom van ruim 270 pixels
   meer hoogte over dan 16/9: het beeld blijft naast die grote kop staan als
   een beeld en niet als een streep. Zodra het kader één kolom wordt valt het
   beeld onder de tekst over de volle breedte, en dan is 16/9 de rustigste
   vorm; de band van 21/9 hierboven zou er een reep van maken.

   Alleen de verhouding wijzigt: kanteling, radius en schaduw komen uit
   .kader-beeld img hierboven. */
.kader-beeld--liggend img { aspect-ratio: 4 / 3; }

@media (max-width: 1080px) {
  .kader-beeld--liggend img { aspect-ratio: 16 / 9; }
}

/* ==================== toegankelijkheid, gemeten punten van Bram ====================
   1. De omtrek van een invoerveld moet 3:1 halen tegen zijn ondergrond (WCAG 2.1, 1.4.11). De rand
      stond op --lijn en mat 1,37:1 tegen de witte kaart: praktisch onzichtbaar, dus je ziet niet
      waar je kunt typen. --gedempt haalt 4,95:1.
   2. Een bedieningselement moet minstens 24 bij 24 pixels zijn (WCAG 2.2, 2.5.8). De uitklappijltjes
      in het bureaumenu waren 8 bij 8 in een raakvlak van 16 bij 16. Het pijltje zelf blijft even
      groot; het raakvlak eromheen groeit naar 24. */
.veld input,
.veld textarea,
.veld select {
  border-color: var(--gedempt);
}

.menu-tik {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   FEEDBACKRONDE NICK, 15 augustus 2026
   Drie nieuwe vormen die uit zijn opmerkingen op de homepage komen. Ze staan hier
   onderaan bij elkaar zodat je in één blok ziet wat deze ronde heeft toegevoegd.
     1. .voet-merknaam   het beeldmerk terug in de voet ("logo plaatsen") - ALLE pagina's
     2. .logobalk        de band met klantlogo's, traag van links naar rechts - homepage
     3. .merkvlak        het logo groot met schaduw - homepage
   ========================================================================== */

/* ---------- 1. logo in de voet ----------
   Nick zette een pin linksonder in de voet met "logo plaatsen". Daar stond alleen het woord
   "Flash" op kopformaat; het beeldmerk ontbrak op elke pagina van de site. Het logo staat nu naast
   dat woord, op de hoogte van de regel, zodat de voet dezelfde ondertekening krijgt als de kopbalk
   en het adresblok eronder gewoon blijft uitlijnen met de kolommen ernaast. */
.voet-merknaam {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-3);
}

.voet-merknaam .voet-woord { margin-bottom: 0; }

.voet-logo {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
  box-shadow: none;
  border-radius: 0;
}

/* ---------- 2. de band met klantlogo's ----------
   Nick: "moet hier niet een onderdeel komen met logo's van bedrijven die wij geholpen hebben? de
   logo's in een donkere kleur die past bij de stijl en kleuren van deze website en dan langzaam
   schuivend van links naar rechts op een subtiele manier."

   Hoe het werkt: .logobalk-spoor bevat de reeks TWEE KEER achter elkaar. De animatie schuift van
   -50% naar 0, dus naar rechts, en op het moment dat hij rondgaat staat de tweede reeks precies
   waar de eerste begon. Daardoor is er geen sprong te zien. 64 seconden voor een hele omloop:
   dat is traag genoeg om als achtergrondbeweging te lezen en niet als carrousel.
   Aanwijzen zet de band stil, zodat je een naam kunt lezen die je voorbij ziet komen. */
.logobalk {
  padding-block: var(--ruimte-6);
  background: var(--papier-warm);
  border-block: 1px solid var(--lijn-fijn);
  overflow: hidden;
  /* de randen vervagen, zodat een logo niet halverwege wordt afgesneden */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.logobalk-kop {
  width: min(var(--breed), 100% - var(--kant) * 2);
  margin: 0 auto var(--ruimte-5);
  color: var(--gedempt);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-align: center;
  max-width: none;
}

.logobalk-rij { display: flex; overflow: hidden; }

.logobalk-spoor {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  flex: none;
  padding-right: clamp(40px, 6vw, 96px);
  animation: logobalk-schuif 64s linear infinite;
  will-change: transform;
}

.logobalk:hover .logobalk-spoor,
.logobalk:focus-within .logobalk-spoor { animation-play-state: paused; }

@keyframes logobalk-schuif {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.logobalk-merk {
  flex: none;
  color: var(--inkt-zacht);
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: var(--w-half);
  letter-spacing: var(--ls-tussenkop);
  line-height: 1;
  white-space: nowrap;
  opacity: 0.62;
}

/* Zet je een echt logobestand neer in plaats van de naam, dan drukt dit filter het terug naar
   dezelfde donkere, ontkleurde toon als de tekstmerken hierboven. Elk logo, welke kleur ook,
   komt er hetzelfde uit; dat is precies wat Nick vroeg met "in een donkere kleur die past bij
   de stijl". Hoogte vast op 30 px zodat een breed en een vierkant logo even zwaar wegen. */
.logobalk-merk img {
  height: 30px;
  width: auto;
  box-shadow: none;
  border-radius: 0;
  filter: grayscale(1) brightness(0) opacity(0.62);
}

@media (max-width: 640px) {
  .logobalk { padding-block: var(--ruimte-5); }
  .logobalk-spoor { gap: var(--ruimte-6); padding-right: var(--ruimte-6); }
  .logobalk-merk { font-size: 17px; }
}

/* ---------- 3. het logo groot, met schaduw ----------
   Nick op de sectie "Dit is waar we goed in zijn": "Het logo van flash in het groot met de schaduw
   zou hier mooi uitkomen!" Het staat naast de sectiekop, niet erboven, want de vier kaarten
   eronder vullen de volle breedte al. De schaduw is drop-shadow en geen box-shadow: het logo is
   een PNG met transparante hoeken, dus box-shadow zou een vierkant onder een bliksem tekenen.
   Twee lagen, dezelfde lichtrichting als de rest van de site (van linksboven). */
.sectiekop-merk {
  display: grid;
  /* Twee gelijke kolommen (Nick, ronde 4): de tweede loopt van 50 naar 100 procent, dus het
     midden ervan ligt op 75 procent van de wrap. Stond op [1fr auto], waarmee het logo tegen
     de rechterrand plakte. */
  grid-template-columns: var(--kolom-gelijk);
  align-items: center;
  gap: var(--gat);
  /* .sectiekop staat op 46ch; die maat geldt hier alleen nog voor de tekstkolom, want het logo
     moet aan de andere kant van de volle breedte kunnen staan. */
  max-width: none;
}

.sectiekop-merk > .sectiekop-tekst { max-width: var(--lees-smal); }

.merkvlak {
  flex: none;
  justify-self: center;   /* midden van de tweede kolom = 75 procent van de wrap (Nick, ronde 4) */
  width: clamp(120px, 15vw, 190px);
  aspect-ratio: 1;
}

.merkvlak img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: none;
  border-radius: 0;
  filter:
    drop-shadow(0 18px 30px rgb(11 27 51 / 0.28))
    drop-shadow(0 3px 6px rgb(11 27 51 / 0.16));
}

@media (max-width: 900px) {
  .sectiekop-merk { grid-template-columns: minmax(0, 1fr); }
  .merkvlak { justify-self: start; width: clamp(96px, 22vw, 132px); }
}

/* ==========================================================================
   FEEDBACKRONDE NICK, 15 augustus 2026 (tweede ronde, pins op websites.html)
   Vier keer hetzelfde soort punt: een lijn of een tekstblok dat tegen zijn buur
   aan staat. Alles hieronder is ruimte, geen nieuwe vorm.
   ========================================================================== */

/* Nick, pin op de dienstenlijst van het abonnement: "creëer hier ruimte tussen, nu staat de lijn
   van punt 01 tegen het blok daarboven aan." De lijst begint met een border-top en stond direct
   onder het witte abonnementsvlak, zonder marge ertussen. Op de homepage staat op diezelfde plek
   .abo-reeks, en die HEEFT die ruimte al (margin-top --ruimte-7); dit trekt websites.html daarmee
   gelijk in plaats van er een eigen maat naast te zetten.
   Bewust op de combinatie en niet op .dienstlijst zelf: op index, systemen en waarom-flash staat
   de lijst onder een .sectiekop, die de ruimte al levert. Een marge op .dienstlijst zou daar
   96 pixels bovenop stapelen. */
.abo-vlak + .dienstlijst { margin-top: var(--ruimte-7); }

/* Zelfde punt aan de onderkant: "de lijn van punt 5 staat tegen het blok daaronder aan." Het
   laatste .dienst-item sluit af met een border-bottom en daaronder begon meteen het raster met
   pakketkaarten. Alleen op deze overgang, want op de andere pagina's is de dienstenlijst het
   laatste blok van zijn sectie en zou een marge daar de sectievoet oprekken. */
.dienstlijst + .wegen { margin-top: var(--ruimte-7); }

/* Nick op het naschrift onder de pakketten: "uitlijning van de tekst is slecht, creëer meer
   ruimte." Het naschrift had helemaal geen marges: het plakte aan de kaartenrij erboven en aan
   het blok eronder, en twee naschriften onder elkaar liepen in elkaar over.
   Een ronde later vroeg hij die twee blokken naast elkaar; ze zitten nu in .naschriften en die
   regelt zijn eigen ruimte. De losse combinatieregels die hier stonden
   (.wegen + .naschrift, .naschrift + .naschrift, .naschrift + .wegen) raakten daardoor geen
   enkel element meer en zijn weggehaald in plaats van blijven staan als dode regels. */

/* Nick in de voet: "creëer meer ruimte tussen de verschillende teksten in dit blok. het staat nu
   te dicht op elkaar, de rest zoals websites, online marketing, services en over flash zijn wel
   mooi uitgelijnd." Precies gemeten: de regels in het merkblok stonden op --ruimte-1 (4px) en de
   lijstregels in de kolommen ernaast op --ruimte-2 (8px). Het merkblok volgt nu diezelfde maat,
   zodat de linkerkolom hetzelfde ritme heeft als de vier kolommen ernaast. De eerste regel is de
   pay-off en loopt over twee regels door; die krijgt een volle regel lucht voordat het adres
   begint, zodat naam, adres en e-mail als drie blokjes lezen en niet als één lap.
   Dit is de voet van ALLE 23 pagina's, niet alleen die van websites.html.
   Zelfde punt dat hij eerder op stijl-6 aanwees ("meer afstand of een witregel tussen de naam,
   het adres, en de e-mail").
   De basismaat staat bij .voet-regel zelf, hierboven in dit blad; hier staat alleen de extra
   lucht onder de pay-off, zodat er één plek is waar de marge vandaan komt. */
.voet-merk .voet-regel:first-of-type { margin-bottom: var(--ruimte-3); }

/* ==========================================================================
   FEEDBACKRONDE NICK, 15 augustus 2026 (derde ronde, pins op websites.html)
   ========================================================================== */

/* ---------- #131: de twee naschriften naast elkaar ----------
   Nick: "zet deze twee tekstblokken naast elkaar over de gehele breedte van de website, ze staan
   nu onder elkaar." Het waren twee losse alinea's op leesbreedte onder elkaar, met een halve
   pagina leeg ernaast. Nu twee gelijke kolommen over de volle wrap. De leesmaat op de losse
   alinea's gaat eraf: de kolom bepaalt de regellengte al, en met --lees erbij zouden ze binnen
   hun eigen kolom nog eens versmallen. */
.naschriften {
  display: grid;
  grid-template-columns: var(--kolom-gelijk);
  gap: var(--gat);
  margin-top: var(--ruimte-6);
}

.naschriften .naschrift { max-width: none; margin: 0; }
.naschriften + .wegen { margin-top: var(--ruimte-6); }

@media (max-width: 900px) {
  .naschriften { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-4); }
  .naschriften .naschrift { max-width: var(--lees); }
}

/* ---------- #132: per pakket een knop die een e-mail opent ----------
   Nick: "voor elk blok misschien een knop om direct een e-mail te sturen over dit pakket. dus ze
   klikken op de knop en er opent een e-mail met in de titel van de e-mail aanvraag, welk pakket
   en dan kan de klant zelf de tekst in de e-mail bepalen en naar ons verzenden."
   Vandaar een mailto met alleen een subject en zonder body: de klant schrijft zelf.
   margin-top:auto duwt de knop naar de onderrand, zodat de vier knoppen op één lijn staan ook
   als de teksten erboven verschillen in lengte. align-self houdt hem zo breed als zijn label;
   zonder dat rekt hij over de hele kaart, want .weg is een kolom-flexbox.
   Op services.html staat onder dezelfde kaart al een "Lees over ..."-link; daar hangt de knop
   eronder in plaats van dat allebei om de onderrand vechten. */
.weg-knop {
  margin-top: auto;
  align-self: start;
}

.weg-link + .weg-knop { margin-top: var(--ruimte-3); }

/* ---------- #133: de inleiding naast de titel ----------
   Nick: "kan deze tekst niet naast de titel staan? nu is er een lege plek aan de rechterkant."
   .sectiekop stond op --lees-smal (46ch), dus op een breed scherm bleef ruim de helft leeg.
   Links het oogje en de kop, rechts de inleiding, onderlangs uitgelijnd zodat de laatste regel
   van de inleiding op dezelfde hoogte eindigt als de kop.

   De plaatsing is expliciet en niet op volgorde: daarom krijgt alleen een kop met precies de
   opbouw [oog of zweef-label, h2, inleiding] deze klasse. De kop op bing-ads met een extra vlag
   en een extra alinea is met opzet overgeslagen; daar zou een vaste rij-indeling de verkeerde
   elementen verplaatsen.

   De kop houdt --kop-mid (17ch): in een kolom van ~580 px zou hij anders over de volle breedte
   lopen en dat leest slechter dan een kort kopblok. De inleiding staat op --type-lead en haalt in
   die kolom ongeveer 46 tekens per regel, precies de maat die --lees-smal elders ook aanhoudt. */
.sectiekop.sectiekop-naast {
  max-width: none;
  display: grid;
  grid-template-columns: var(--kolom-gelijk);
  column-gap: var(--gat);
  row-gap: 0;
}

.sectiekop-naast > .oog,
.sectiekop-naast > .zweef-label { grid-column: 1; grid-row: 1; }
.sectiekop-naast > h2 { grid-column: 1; grid-row: 2; max-width: var(--kop-mid); }

.sectiekop.sectiekop-naast > .inleiding {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin-top: 0;
  max-width: none;
}

/* Onder de kolombreedte waarop twee tekstkolommen naast elkaar nog leesbaar zijn, valt de kop
   terug op de stapeling die hij altijd al had. */
@media (max-width: 900px) {
  .sectiekop.sectiekop-naast {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--lees-smal);
  }
  .sectiekop-naast > .oog,
  .sectiekop-naast > .zweef-label,
  .sectiekop-naast > h2,
  .sectiekop.sectiekop-naast > .inleiding {
    grid-column: 1;
    grid-row: auto;
  }
  .sectiekop-naast > h2 { max-width: none; }
  .sectiekop.sectiekop-naast > .inleiding { margin-top: var(--ruimte-4); max-width: var(--lees); }
}

/* ==========================================================================
   FEEDBACKRONDE NICK, 15 augustus 2026 (vierde ronde, pins op drie pagina's)
   ========================================================================== */

/* ---------- #135: het grote logo meer naar het midden (homepage) ----------
   Nick: "kan dit logo niet iets meer gecentreerd staan? dus bijvoorbeeld op 75% van de gehele
   breedte van de pagina?" Het stond met justify-self:end tegen de rechterrand van de wrap.
   De kop was een raster van [1fr auto], waarbij die tweede kolom precies zo breed was als het
   logo. Met twee gelijke kolommen loopt de tweede van 50 naar 100 procent, dus het midden ervan
   ligt op exact 75 procent van de wrap: het getal dat hij noemt, zonder een los percentage in
   het blad. De tekstkolom houdt zijn eigen leesmaat, dus die verandert niet mee.
   De twee gewijzigde waarden staan bij .sectiekop-merk en .merkvlak zelf, hierboven in dit blad,
   en niet hier als overschrijving. Reden: de mobiele variant van allebei staat in een mediaquery
   die VOOR dit blok komt, en een losse regel hier zou die op smalle schermen weer omverzetten. */

/* ---------- #136: Waarom Flash naast Missie en visie (homepage) ----------
   Nick: "missie en visie kan wel naast waarom flash stuk[ken]. maak het blok anders langer naar
   beneden om genoeg ruimte tussen de twee blokken te houden in de breedte."
   Binnen de leeskolom van 52 tekens zouden twee kolommen op ~29 tekens uitkomen, en dat is geen
   leesbare regel. Het duo hangt daarom onder de leeskolom en spant beide kolommen van
   .lees-raster, dus ongeveer 55 tekens per kolom. Het blok wordt daar langer van naar beneden,
   precies zoals hij als alternatief noemt. */
.lees-duo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--kolom-gelijk);
  gap: var(--ruimte-6) var(--ruimte-8);
}

.lees-deel h3 { margin-bottom: var(--ruimte-4); }
.lees-deel p { max-width: none; }

@media (max-width: 900px) {
  .lees-duo { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-6); }
  .lees-deel p { max-width: var(--lees); }
}

/* ---------- #134: het formulier onder de kop en over de volle breedte (contact) ----------
   Nick: "je gegevens onderdeel plaatsen onder de titel en tekst en dan een stuk breder maken.
   beter indelen van de ruimte." Het formulier stond in de smalle rechterkolom naast de kop, met
   alle velden onder elkaar op ongeveer een derde van de breedte.
   Nu: de kop over de volle breedte, het formulier daaronder, en de velden in twee kolommen zodat
   die breedte ook echt gebruikt wordt. Naam en bedrijf naast elkaar, de rest over beide kolommen,
   en de verzendknop naast de regel met het directe mailadres. */
.paginakop--contact .pk-raster { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-6); }
.paginakop--contact .pk-tekst .inleiding { max-width: var(--lees-breed); }

.paginakop--contact .formulier {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gat);
  padding: var(--ruimte-6);
}

/* alles over de volle breedte, behalve de twee korte velden die naast elkaar passen */
.paginakop--contact .formulier > * { grid-column: 1 / -1; }
.paginakop--contact .formulier .veld:nth-of-type(1) { grid-column: 1; }
.paginakop--contact .formulier .veld:nth-of-type(2) { grid-column: 2; }

/* De knop vulde met justify-content:center de halve formulierbreedte. In een breed formulier
   hoort een knop zo breed te zijn als zijn tekst; de fijne regel ernaast vult de rest. */
.paginakop--contact .formulier .knop {
  grid-column: 1;
  justify-self: start;
  justify-content: flex-start;
}
.paginakop--contact .formulier .veld-fijn { grid-column: 2; align-self: center; }

@media (max-width: 760px) {
  .paginakop--contact .formulier {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--ruimte-5);
  }
  .paginakop--contact .formulier > *,
  .paginakop--contact .formulier .veld:nth-of-type(1),
  .paginakop--contact .formulier .veld:nth-of-type(2),
  .paginakop--contact .formulier .knop,
  .paginakop--contact .formulier .veld-fijn { grid-column: 1; }
  .paginakop--contact .formulier .knop { justify-self: stretch; justify-content: center; }
}

/* ---------- #137: de punten twee bij twee (advertentiepagina's) ----------
   Nick: "zet dit onderdeel of breder op en gecentreerd in het midden of zet de punten naast
   elkaar. zodat het 2 om 2 is om de website netjes uit te lijnen en op te vullen."
   De lijst stond in één kolom met elk punt op leesbreedte, dus de halve breedte bleef leeg.
   Twee kolommen vullen de wrap; de leesmaat per punt gaat eraf omdat de kolom die nu bepaalt.
   Geldt voor alle vier de lijsten van dit type: online-marketing (waar hij het aanwees),
   google-ads, social-media-ads en bing-ads. Die laatste heeft vijf punten, dus daar staat het
   vijfde punt alleen op de laatste regel; dat leest als een lijst en niet als een gat. */
.mk-punten {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gat);
  row-gap: var(--ruimte-5);
}

.mk-punten li { max-width: none; }

@media (max-width: 900px) {
  .mk-punten { grid-template-columns: minmax(0, 1fr); row-gap: var(--ruimte-4); }
  .mk-punten li { max-width: var(--lees); }
}

/* ==========================================================================
   FEEDBACKRONDE NICK, 15 augustus 2026 (vijfde ronde, pins op vier pagina's)
   ========================================================================== */

/* ---------- #140 en #144: de kopbalk is standaard donker ----------
   Ronde 5 (pin 140) maakte de balk donker ZODRA je 24 pixels scrollde. Nick keek er een ronde
   later opnieuw naar (pin 144) en wees drie dingen aan:

     1. "de balk mag op elke pagina standaard deze kleur zijn dus donker zoals hij nu is"
     2. "alleen op de homepage waar de header donker is mag hij licht zijn tot het moment dat er
        voorbij de header is gescrolt. hij wordt nu namelijk al donker op de homepages als we nog
        op de header zitten"
     3. "als ik het menu opklik en er meerdere opties komen dan is de kleur van deze achtergrond
        nog wit, maak dit dan ook in dezelfde kleur als dat de balk nu is en maak de tekst ook
        dezelfde kleur"

   Daarom is de rolverdeling omgedraaid. DONKER is nu de gewone staat van de balk, op alle 23
   pagina's en vanaf de eerste pixel. Alleen index.html draagt data-nav-licht op de <header>, en
   die pagina begint licht; zodra je voorbij het heroframe bent valt dat attribuut weg tegen
   data-nav-scroll en wordt ook daar de balk donker.

   Het omslagpunt is niet langer 24 pixels maar de hoogte van het heroframe zelf. Dat rekent
   chassis.js uit; zie de toelichting daar. Zonder dat sloeg de balk om terwijl je nog midden in
   de donkere hero stond, precies punt 2 hierboven.

   Het uitklapmenu volgt de balk in allebei de staten, punt 3. */

.kop-balk,
.kop .merk,
.kop .merk-staart,
.kop .menu-link,
.kop .tik,
.kop .knop-klein,
.kop .menu-knop,
.kop .streepjes i,
.kop .uitklap,
.kop .uitklap a {
  /* transform en box-shadow staan er bewust bij: deze regel vervangt de transitie die de knop uit
     chassis.css meekrijgt, en zonder die twee zou het indrukeffect op de knop in de kopbalk
     verdwijnen terwijl de kleuren wel netjes overgaan. */
  transition: background-color var(--duur-hover) var(--curve-hover),
              border-color var(--duur-hover) var(--curve-hover),
              color var(--duur-hover) var(--curve-hover),
              transform var(--duur-micro) var(--curve-uit),
              box-shadow var(--duur-micro) var(--curve-uit);
}

/* ---- de gewone staat: donker ---- */
.kop-balk {
  background: rgb(5 14 27 / 0.88);
  border-color: rgb(255 255 255 / 0.16);
  box-shadow: var(--schaduw-zweef);
}

.kop .merk { color: var(--op-donker); }
.kop .merk-staart { color: var(--op-donker-zacht); }

.kop .menu-link { color: var(--op-donker); }
.kop .menu-link:hover { color: var(--wit); background: rgb(255 255 255 / 0.14); }

.kop .tik { border-color: var(--op-donker-zacht); }
.kop .menu-tik[aria-expanded="true"] .tik { border-color: var(--accent); }

/* De knop stond op --primair. Dat blauw op dit donkerblauw haalt de contrastnorm niet, dus op de
   donkere balk wisselt hij om: wit vlak, donkerblauwe letter. Dezelfde knop, andere ondergrond. */
.kop .knop-klein { background: var(--op-donker); color: var(--primair-diep); }
.kop .knop-klein:hover { background: var(--accent); color: var(--inkt); }

/* De menuknop op telefoon is een donkere pil met witte streepjes; op een donkere balk verdwijnt
   die. Daar draait hij dus ook om. */
.kop .menu-knop { background: var(--op-donker); }
.kop .streepjes i { background: var(--inkt); }

/* Punt 3 van Nick: het uitklapmenu was wit en bleef wit onder een donkere balk. Nu dezelfde
   ondergrond en dezelfde letterkleur. Iets minder doorzichtig dan de balk, want hier ligt tekst
   overheen die op een bewegende pagina leesbaar moet blijven. */
.kop .uitklap {
  background: rgb(5 14 27 / 0.96);
  border-color: rgb(255 255 255 / 0.16);
}
.kop .uitklap a { color: var(--op-donker); }
.kop .uitklap a:hover { background: rgb(255 255 255 / 0.14); color: var(--wit); }

/* Een blauwe focusrand op dit donkerblauw is niet te zien. Binnen de donkere balk wordt hij geel,
   net als in de andere donkere secties van de site. */
.kop :focus-visible { outline-color: var(--accent); }

/* ---- de uitzondering: de homepage, zolang je nog op het donkere heroframe staat ----
   Alleen index.html draagt data-nav-licht. Zodra chassis.js data-nav-scroll erbij zet (voorbij de
   hero) vervalt deze hele groep en staat de balk weer in zijn gewone donkere staat. */
.kop[data-nav-licht]:not([data-nav-scroll]) .kop-balk {
  background: rgb(246 245 241 / 0.84);
  border-color: rgb(255 255 255 / 0.6);
  box-shadow: var(--schaduw-kaart);
}

.kop[data-nav-licht]:not([data-nav-scroll]) .merk { color: var(--inkt); }
.kop[data-nav-licht]:not([data-nav-scroll]) .merk-staart { color: var(--inkt-zacht); }

.kop[data-nav-licht]:not([data-nav-scroll]) .menu-link { color: var(--inkt); }
.kop[data-nav-licht]:not([data-nav-scroll]) .menu-link:hover {
  color: var(--primair);
  background: var(--primair-licht);
}

.kop[data-nav-licht]:not([data-nav-scroll]) .tik { border-color: var(--gedempt); }
.kop[data-nav-licht]:not([data-nav-scroll]) .menu-tik[aria-expanded="true"] .tik { border-color: var(--primair); }

.kop[data-nav-licht]:not([data-nav-scroll]) .knop-klein { background: var(--primair); color: var(--wit); }
.kop[data-nav-licht]:not([data-nav-scroll]) .knop-klein:hover { background: var(--primair-diep); color: var(--wit); }

.kop[data-nav-licht]:not([data-nav-scroll]) .menu-knop { background: var(--inkt); }
.kop[data-nav-licht]:not([data-nav-scroll]) .streepjes i { background: var(--op-donker); }

.kop[data-nav-licht]:not([data-nav-scroll]) .uitklap {
  background: var(--wit);
  border-color: var(--lijn-fijn);
}
.kop[data-nav-licht]:not([data-nav-scroll]) .uitklap a { color: var(--inkt); }
.kop[data-nav-licht]:not([data-nav-scroll]) .uitklap a:hover {
  background: var(--primair-licht);
  color: var(--primair-diep);
}

.kop[data-nav-licht]:not([data-nav-scroll]) :focus-visible { outline-color: var(--primair); }

/* ---------- #141: nog meer lucht in het merkblok van de voet ----------
   Nick, een ronde na de vorige bijstelling: "creëer nog meer ruimte tussen de verschillende
   stukken tekst." Van --ruimte-2 (8px) naar --ruimte-3 (16px) tussen de regels, en de pay-off
   krijgt --ruimte-5 (40px) zodat naam, adres en e-mail echt als losse blokjes lezen.
   Geldt voor de voet van alle 23 pagina's. */
.voet-merk .voet-regel { margin-bottom: var(--ruimte-3); }
.voet-merk .voet-regel:first-of-type { margin-bottom: var(--ruimte-5); }
.voet-merknaam { margin-bottom: var(--ruimte-4); }

/* ---------- #142: de drie kolommen op gelijke hoogte ----------
   Nick op missie-en-visie: "dit onderdeel is niet hetzelfde uitgelijnd qua hoogte als de twee
   blokken ernaast. fix dit." De kop van elke kolom draagt een lijn onder zich. Bij een kop van
   twee regels zakt die lijn een regel lager dan bij de kop ernaast van één regel, en dan lopen
   de drie blokken uit de pas.
   EERSTE POGING, TERUGGEDRAAID: hier stond subgrid, met .kolom op grid-row: span 2. Dat werkt
   alleen als elke kolom precies twee kinderen heeft. Op missie-en-visie klopte dat (kop plus
   alinea), maar op de homepage staat er in elke kolom ook nog een "lees meer"-regel, en dat derde
   kind viel buiten de twee rijen van het subgrid en kwam boven op de tekst te staan. Nick zag dat
   meteen: "teksten en knoppen lopen in elkaar over. de knop zit door de tekst heen bij alle 3 de
   onderdelen." (pin 145)

   Wat er nu staat hangt niet van het aantal kinderen af: de kop krijgt de hoogte van twee regels,
   ongeacht of hij er één of twee vult. Daarmee staan de lijnen eronder op dezelfde hoogte en
   begint de tekst in alle kolommen gelijk, precies wat pin 142 vroeg, terwijl een kolom zoveel
   kinderen mag hebben als hij wil. Onder 900 staat er nog maar één kolom onder elkaar, dus daar
   valt de vaste hoogte weg. */
.kolom h3 { min-height: calc(2em * var(--lh-tussen)); }

@media (max-width: 900px) {
  .kolom h3 { min-height: 0; }
}

/* ---------- #138 en #139: de sectie "Het bewijs is deze pagina" (homepage) ----------
   Twee pins die dezelfde oorzaak hebben. .lees-raster is een raster van twee kolommen, en toen
   het duo-blok er vorige ronde tussen kwam te staan schoven de kantlijnen door naar een derde
   rij in de SMALLE kolom. Daardoor bleef rechts van de inleiding een gat staan (#138) en stonden
   de twee marktcijfers onder elkaar in een kolom die veel te smal was (#139).
   Deze sectie is daarom geen tweekolomsraster meer maar een stapeling over de volle breedte:
   de inleiding gecentreerd, daaronder de twee marktcijfers naast elkaar, daaronder Waarom Flash
   naast Missie en visie. Geen lege kolom meer over. */
.over-raster { display: grid; gap: var(--ruimte-7); }

.lees--midden {
  max-width: var(--lees-breed);
  margin-inline: auto;
  text-align: center;
}
.lees--midden p { max-width: none; }
.lees--midden .verder { margin-top: var(--ruimte-5); }

.kantlijnen--rij {
  display: grid;
  grid-template-columns: var(--kolom-gelijk);
  gap: var(--gat);
  padding-top: 0;
}
.kantlijnen--rij .kantlijn { margin-bottom: 0; }
.kantlijnen--rij .kantlijn p { max-width: none; }

@media (max-width: 900px) {
  .over-raster { gap: var(--ruimte-6); }
  .kantlijnen--rij { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-5); }
  .lees--midden { text-align: left; }
}

/* ---------- #143: het logo vult de lege kantlijn (missie-en-visie) ----------
   Zie de toelichting in de HTML. Het logo staat links uitgelijnd onder de twee noten, op de lijn
   waar ook de noten beginnen, en blijft kleiner dan het logo in de sectiekop van de homepage:
   dit is een vulling van de kantlijn en geen tweede blikvanger. */
.merkvlak--kantlijn {
  width: clamp(96px, 11vw, 148px);
  margin-top: var(--ruimte-7);
  /* De noot ernaast staat op een randlijn van 2px plus --ruimte-4 binnenruimte. Zonder die 2px
     erbij begint het logo twee pixels links van de tekst erboven, en dat zie je. */
  margin-left: calc(var(--ruimte-4) + 2px);
}

@media (max-width: 1080px) {
  .merkvlak--kantlijn { display: none; }
}

/* ---------- de kantlijn overal afsluiten (Nick: "doe dat overal waar die kantlijn leeg is") ----
   Op twaalf pagina's loopt de leeskolom veel verder door dan de twee noten ernaast. Geschat bij
   een wrap van 1200 liep dat gat van ongeveer 290 tot bijna 1000 pixels; op elke pagina bleef dus
   onderin de rechterkolom een leeg vlak staan.

   De kolom is een flexkolom en het logo staat op margin-top:auto. Daardoor hangt het altijd aan
   de ONDERKANT van de ruimte die er toevallig is: op missie-en-visie duwt het bijna duizend
   pixels weg, op online-marketing een paar honderd, en op een pagina waar de noten de kolom al
   vullen komt het gewoon direct onder de laatste noot. Eén regel, geen maat per pagina.

   Waarom in een min-width en niet los: onder 1080 zet het blad de kantlijnen al naast elkaar in
   een raster van twee. Een losse display:flex zou dat omvergooien, en daar is ook geen gat om te
   vullen; daarom staat het logo daar op display:none (zie .merkvlak--kantlijn hierboven). */
   De :not() is niet cosmetisch: op de homepage staat .kantlijnen--rij, dat de twee noten juist
   NAAST elkaar zet. Die klasse heeft dezelfde gewichtsklasse als .kantlijnen en staat eerder in
   dit blad, dus een kale .kantlijnen{display:flex} hier zou die rij weer tot een kolom maken. */
@media (min-width: 1081px) {
  .kantlijnen:not(.kantlijnen--rij) { display: flex; flex-direction: column; }
  .merkvlak--kantlijn { margin-top: auto; }
}

/* ---------- #146: geel bij het aanwijzen in het menu ----------
   Nick: "als ik met mijn muis op de tekst sta in de menu balk dan mag de tekst ook geel worden,
   dit geldt ook voor het submenu."
   Alleen op de donkere balk, en dat is sinds pin 144 dus bijna overal. Op de lichte staat van de
   homepage blijft het blauw: geel op papier haalt maar ongeveer 1,5:1 en is daar niet te lezen.
   De vulling achter de tekst blijft zoals hij was, zodat het aanwijzen één signaal geeft en niet
   twee. */
.kop .menu-link:hover,
.kop .menu-link:focus-visible,
.kop .uitklap a:hover,
.kop .uitklap a:focus-visible { color: var(--accent); }

.kop[data-nav-licht]:not([data-nav-scroll]) .menu-link:hover,
.kop[data-nav-licht]:not([data-nav-scroll]) .menu-link:focus-visible { color: var(--primair); }
.kop[data-nav-licht]:not([data-nav-scroll]) .uitklap a:hover,
.kop[data-nav-licht]:not([data-nav-scroll]) .uitklap a:focus-visible { color: var(--primair-diep); }

/* ---------- de advertentietarieven (Nick: prijzen en commissie inzichtelijk maken) ----------
   Dezelfde kaart als de website-pakketten op websites.html, maar met drie in plaats van vier, dus
   drie kolommen in plaats van twee bij twee. Onder 1080 vallen ze terug op de tweekolomsindeling
   van .wegen en onder 640 op een kolom, net als daar.

   .weg-commissie is de regel onder de uitleg: het percentage over het advertentiebudget hoort bij
   het bedrag maar is geen tweede prijs, dus hij staat als aparte regel met een lijn erboven en
   niet als kopcijfer. Anders lijkt het alsof er twee tarieven naast elkaar staan. */
.wegen--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.weg-commissie {
  margin-top: var(--ruimte-3);
  padding-top: var(--ruimte-3);
  border-top: 1px solid var(--lijn-fijn);
  color: var(--inkt-zacht);
  font-size: var(--type-klein);
  line-height: 1.6;
}
.weg-commissie strong { color: var(--primair-diep); font-weight: var(--w-vet); }

@media (max-width: 1080px) {
  .wegen--drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wegen--drie { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- #148: het uitklapmenu viel weg voordat je kon klikken ----------
   Nick: "het submenu valt weg als ik hier op wil klikken dus als het submenu opent op bijvoorbeeld
   websites dan valt hij weg en kan ik geen subpagina aanklikken."

   De oorzaak: .uitklap hangt op top: calc(100% + --ruimte-2), dus acht pixels onder het menu-item.
   Het paneel is wel een kind van dat item, maar het staat absoluut gepositioneerd en dus BUITEN de
   doos ervan. Die strook van acht pixels ertussen hoort bij geen van beide. Beweeg je van de link
   naar het paneel, dan gaat de muis daar doorheen, vuurt mouseleave op het menu-item, en sluit
   chassis.js het paneel precies op het moment dat je erheen wilt.

   De brug hieronder vult die strook. Hij bestaat alleen ZOLANG je het item aanwijst: geen inhoud,
   geen hoogte, niets, tot :hover. Dat is met opzet, want een altijd aanwezige onzichtbare strook
   onder elk menu-item zou kliks op de pagina eronder opvangen.

   De breedte volgt het paneel en niet het menu-item: het paneel is minstens 220 breed en een
   menu-item vaak smaller, dus wie er schuin naartoe beweegt zou anders alsnog naast de brug
   vallen. Alleen items met een echt submenu doen mee; die dragen data-menu-item. */
.menu-item[data-menu-item]:hover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: max(100%, 220px);
  height: calc(var(--ruimte-2) + 2px);
}

/* ---------- logo's bij de systemen (Nick, pins 70 en 83) ----------
   "misschien is het mooier om de logo's van deze systemen te plaatsen i.p.v. de tekst" en
   "wellicht zijn de logos van deze software mooier en professioneler dan alleen de tekst."
   Hij vroeg het twee keer, op twee verschillende versies, en op de uitgebouwde site stond het er
   nog niet in.

   Het logo staat VOOR de naam en niet in plaats daarvan. Reden: een schermlezer leest een logo
   niet, en een rij van zeven merkloze vlakjes is voor een bezoeker die er een niet herkent minder
   duidelijk dan nu. Wil je toch alleen de logo's, dan is dat een regel: .pil span { display: none }.

   Het filter drukt elk logo terug naar dezelfde donkere toon als de tekst ernaast, net als in de
   klantlogobalk op de homepage. Zo maakt het niet uit in welke kleur een merk zijn logo aanlevert.
   Staat het bestand er niet, dan haalt onerror in de HTML de afbeelding weg en is de pil precies
   wat hij was. De site breekt dus niet zolang de SVG's nog niet geplaatst zijn. */
.pil {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
}

.pil img {
  height: 18px;
  width: auto;
  flex: none;
  box-shadow: none;
  border-radius: 0;
  filter: grayscale(1) brightness(0) opacity(0.72);
}

.pil:hover img { filter: none; }

/* ---------- het aanbevolen pakket (Nick, in antwoord op pin 82) ----------
   Pin 82 was: "dit onderdeel springt er niet uit of heeft geen beweging als ik er met mijn muis
   overheen ga". De beweging zat er al op (.weg:hover), maar er wás geen uitgelicht pakket. Nick
   koos daarna: het Groei-pakket.

   De vlag staat absoluut in de rechterbovenhoek. Dat is geen opmaakvoorkeur maar een noodzaak: in
   de stapel zou hij het bedrag op deze ene kaart een regel omlaag duwen en dan staan de vier
   prijzen niet meer op een lijn. Nu verschuift er niets.

   Het geel is de accentkleur die de site verder maar op twee plekken gebruikt, dus hij trekt hier
   echt de aandacht. De letter is donker: geel met wit erop haalt de contrastnorm niet.
   De rand en de schaduw zijn zwaarder dan bij de andere drie, zodat de kaart ook zonder de vlag
   al anders leest, en bij het aanwijzen komt hij een tikje verder omhoog dan zijn buren. */
.weg--aanbevolen {
  position: relative;
  border-color: rgb(0 74 173 / 0.32);
  box-shadow: var(--schaduw-kaart-hover);
}

.weg--aanbevolen:hover {
  transform: translate3d(0, calc(var(--hef-hover) * 1.6), 0);
}

.weg-vlag {
  position: absolute;
  top: var(--ruimte-4);
  right: var(--ruimte-4);
  margin: 0;
  padding: var(--ruimte-1) var(--ruimte-3);
  max-width: none;
  background: var(--accent);
  color: var(--inkt);
  border-radius: var(--radius-pil);
  font-size: var(--type-micro);
  font-weight: var(--w-vet);
  letter-spacing: var(--ls-caps);
  line-height: 1.5;
  text-transform: uppercase;
}

/* Op één kolom staat het bedrag groot links en zou de vlag er dicht tegenaan komen; daar mag hij
   iets naar binnen. */
@media (max-width: 640px) {
  .weg-vlag { top: var(--ruimte-3); right: var(--ruimte-3); }
}

/* ---------- de vlag in het raster van DRIE ----------
   Op websites.html staan vier pakketten in twee kolommen; daar is een kaart breed genoeg om de
   vlag rechtsboven naast het bedrag te zetten. De advertentiepakketten staan met zijn drieen naast
   elkaar en die kaarten zijn een stuk smaller: nagerekend op 1200 breedte is de kaart ongeveer 344
   en loopt het bedrag tot circa 280, terwijl de vlag daar al op 193 zou beginnen. Die zouden dus
   over elkaar heen vallen.

   Daarom krijgt de vlag hier een eigen strook bovenin. Alle drie de kaarten krijgen die ruimte,
   ook de twee zonder vlag, want anders staan de bedragen niet meer op een lijn. Dat is dezelfde
   afweging als bij het raster van twee, alleen valt hij hier de andere kant op. */
.wegen--drie .weg { padding-top: calc(var(--ruimte-5) + var(--ruimte-5)); }

.wegen--drie .weg-vlag {
  top: var(--ruimte-5);
  left: var(--ruimte-5);
  right: auto;
}

@media (max-width: 640px) {
  .wegen--drie .weg { padding-top: calc(var(--ruimte-4) + var(--ruimte-5)); }
  .wegen--drie .weg-vlag { top: var(--ruimte-3); left: var(--ruimte-3); }
}