/* =========================================================================
   olefinn.com — de voorpagina. Bovenop landing.css (tokens, letter, vel, kop,
   matten en slot komen daarvandaan); dit blad heeft alleen wat de voorpagina
   zelf heeft: het levende veld, de wisselende regel, de band met gereedschap,
   de tabs met het aanbod, het eigen werk, de werkwijze en de blauwe afsluiter.

   WAAROM DEZE PAGINA (11 okt 2026). Ole: "ik bouw websites maar doe ook meer,
   laat dat duidelijk reflecteren op mijn site. websites kunnen dus een tab
   zijn, zorg voor vette animaties." De goedgekeurde landing ("om de hoek", de
   zeventien vensters) staat sindsdien ongewijzigd op /websites/; dit is het
   dak erboven.

   BEWEGING MET EEN REDEN. Elke animatie hieronder zegt iets: het veld is Life
   Wallpaper (zijn eigen app, zelfde regels), de wisselende regel is de
   breedte van het aanbod, de tabpil wijst aan waar je bent, de spaken laten
   data stromen, de balken zijn echte meetwaarden, de vinkjes zijn echte
   headers van deze site. Alles wat beweegt staat in een no-preference-blok;
   wat een startpositie heeft staat bovendien onder html.onthullen, een klasse
   die thuis.js zelf zet. Laadt dat script niet, dan staat alles gewoon.

   Kleur: alleen tokens. Twee nieuwe, allebei vast in beide schema's: het blauw
   van de afsluiter (#0064ed, de lichte --accent-tekst) en wit erop. Gemeten
   5,2:1, dus ook kleine tekst mag erop. Het accent zelf (#0d75ff) haalt met
   wit maar 4,2:1 en draagt daarom geen kleine tekst.
   ========================================================================= */

:root {
  --blok: #0064ed;
  --op-blok: #ffffff;
  /* De wisselende regel loopt van goot tot goot. Elk woord krijgt zijn eigen
     breedte-as zodat alle vijf even breed zetten: gemeten in Chromium op de
     echte subset, wght 800, letter-spacing -0,02em (scripts/wissel_meten.js).
     --wissel-em is die gezamenlijke breedte in em. VERANDERT EEN WOORD, DAN
     OPNIEUW METEN. */
  --wissel-em: 5.738;
}

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

/* ---- Knoppen ------------------------------------------------------------ */
/* Capsules van 44 px, zoals de kop. De volle is de enige getinte actie per
   scherm; de lege is een haarlijn. */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding-inline: 1.35em;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--haar);
  font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--soepel), box-shadow .2s var(--soepel);
}
.knop:hover { background: color-mix(in oklab, var(--inkt) 7%, transparent); }
.knop--vol { background: var(--accent-tekst); color: var(--vel); box-shadow: none; }
.knop--vol:hover { background: color-mix(in oklab, var(--accent-tekst) 86%, var(--inkt)); }

/* Een tekstlink met een pijl. De pijl is een getekende punthaak en geen
   teken: de subset van Archivo heeft geen U+2192. */
.pijl {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 2.75rem; font-weight: 600; text-decoration: none;
  color: var(--accent-tekst);
}
.pijl::after {
  content: ""; width: .45em; height: .45em;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  rotate: 45deg; transition: translate .25s var(--soepel);
}
.pijl:hover::after { translate: .25em 0; }
:where(button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Het eerste scherm: het levende veld ------------------------------ */
/* Bouw als de held van /websites/: de bovenste helft is leeg, alles zakt naar
   onderen. Alleen leeft die lege helft hier. Twee rijen: het veld neemt alle
   ruimte boven de tekst (1fr), de tekst zo veel als hij nodig heeft. Zo staat
   de naam altijd midden in de vrije ruimte en nooit tegen de grote regel aan —
   dat deed hij wel toen het veld over de hele sectie lag en de naam op 30 %
   van de hoogte stond (gemeten 12 okt op 1440 x 756, een 13-inch scherm).
   Zonder JavaScript is het canvas leeg en is de held die van /websites/: een
   leeg vel met een grote regel onderin. */
.start {
  position: relative;
  min-height: calc(100svh - 6rem);
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  padding: 0 var(--goot) clamp(2.5rem, 6vh, 5rem);
  touch-action: pan-y;
}
.start__vak { position: relative; min-height: 6rem; margin: 0 calc(-1 * var(--goot)) clamp(1rem, 3vh, 2rem); }
.start__veld {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  color: var(--accent);
  -webkit-mask-image: linear-gradient(black 70%, transparent);
  mask-image: linear-gradient(black 70%, transparent);
}
.start__tekst { position: relative; container-type: inline-size; }
.start__titel { display: block; }
.start__klein {
  display: block; font-size: var(--t-klein); letter-spacing: .2em;
  text-transform: uppercase; color: var(--gedempt); font-weight: 500;
  margin-bottom: clamp(.5rem, 1.4vh, .9rem);
}

/* De wisselende regel. Vijf woorden in één rastercel; zonder beweging staat
   alleen het laatste ("software."), met beweging wisselen ze om de 2,5 s. Het
   woord dat komt veert open over de breedte-as (62 -> zijn eigen breedte),
   het woord dat gaat knijpt dicht en schuift weg. Omdat alle vijf even breed
   zetten, verspringt er niets. */
.wissel {
  display: grid; overflow: clip;
  font-family: var(--display);
  font-size: calc(100cqw / var(--wissel-em));
  line-height: .9; letter-spacing: -.02em;
  padding-bottom: .14em; margin-left: -.045em;
  color: var(--accent); white-space: nowrap;
}
.wissel__woord { grid-area: 1 / 1; font-variation-settings: "wdth" var(--wdth), "wght" 800; }
.wissel__woord--websites    { --wdth: 123.6; }
.wissel__woord--webapps     { --wdth: 123.2; }
.wissel__woord--koppelingen { --wdth: 90.7; }
.wissel__woord--agents      { --wdth: 116.1; }
.wissel__woord--software    { --wdth: 125; }
.wissel__woord:not(:last-child) { display: none; }

.start__voet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem 2.5rem; margin-top: clamp(1.4rem, 3.5vh, 2.4rem);
}
.start__alinea { max-width: 46ch; text-wrap: pretty; }
.start__acties { display: flex; flex-wrap: wrap; gap: .6rem; }
.start__hint { display: none; }

@media (max-width: 39.99rem) {
  /* De kop is hier twee rijen hoog; de held krimpt mee, zodat de knoppen
     boven de vouw blijven. */
  .start { min-height: calc(100svh - 9.5rem); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Twee regels en niet één: een selectorlijst met :not(:last-child) erin
     krijgt die hogere specificiteit voor álle woorden, en dan wint de
     shorthand (vertraging 0) van de vertragingen hieronder — alle vijf
     tegelijk in beeld, gemeten 12 okt. */
  .wissel__woord:not(:last-child) { display: block; }
  .wissel__woord { animation: wisselen 12.5s var(--soepel) infinite both; }
  .wissel__woord--webapps     { animation-delay: 2.5s; }
  .wissel__woord--koppelingen { animation-delay: 5s; }
  .wissel__woord--agents      { animation-delay: 7.5s; }
  .wissel__woord--software    { animation-delay: 10s; }
  /* Elk woord heeft 20 % van de cyclus (2,5 s). Het gaande woord vertrekt op
     18 % en is op 22 % weg; het volgende begint op 20 %. Die overlap van een
     kwart seconde is de wissel: zonder overlap stond de regel 0,3 s leeg
     (gezien op een schermbeeld, 12 okt). */
  @keyframes wisselen {
    0%        { opacity: 0; transform: translateY(.45em); font-variation-settings: "wdth" 62, "wght" 800; }
    4%, 18%   { opacity: 1; transform: none; font-variation-settings: "wdth" var(--wdth), "wght" 800; }
    22%, 100% { opacity: 0; transform: translateY(-.45em); font-variation-settings: "wdth" 62, "wght" 800; }
  }
  html.veld-aan .start__hint {
    display: block; position: absolute; top: 1.1rem; right: var(--goot);
    font-size: var(--t-meta); color: var(--gedempt);
  }
}

/* ---- Gereedschap: één band, gekoppeld aan het scrollen ----------------- */
/* De enige band op de pagina. Hij loopt niet vanzelf maar schuift mee met de
   scrollstand, dus elk woord komt één keer langs en niemand hoeft te wachten.
   Zonder beweging of zonder scroll-tijdlijnen vouwt hij gewoon om. */
.gereedschap { padding-block: clamp(2.5rem, 8vh, 5.5rem); overflow: clip; }
.gereedschap__kop {
  padding-inline: var(--goot);
  font-size: var(--t-klein); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gedempt); font-weight: 500;
}
.gereedschap__rij {
  list-style: none; margin: 1rem 0 0; padding: 0 var(--goot);
  display: flex; flex-wrap: wrap; gap: .1em .55em;
  font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 800;
  font-size: clamp(2.1rem, 1rem + 6vw, 7rem); line-height: 1; letter-spacing: -.03em;
  /* Grote tekst, dus eis 3:1. Inkt op 55 % over het vel: berekend ~4,0:1 in
     licht en ~5:1 in donker. De eerste versie stond op 22 % en haalde 1,6:1. */
  color: color-mix(in oklab, var(--inkt) 55%, transparent);
}
.gereedschap__rij li:nth-child(3n + 2) { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.js .gereedschap__rij {
      flex-wrap: nowrap; width: max-content;
      animation: glijden linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes glijden {
      from { transform: translateX(0); }
      to   { transform: translateX(calc(-100% + 100vw - 2 * var(--rand))); }
    }
  }
}

/* ---- Sectiekoppen ------------------------------------------------------- */
.sectiekop {
  font-family: var(--display); font-variation-settings: "wdth" 112, "wght" 750;
  font-size: clamp(2.2rem, 1.1rem + 4.4vw, 4.75rem);
  line-height: .98; letter-spacing: -.035em; text-wrap: balance;
}

/* ---- Wat ik bouw: de tabs ---------------------------------------------- */
.aanbod {
  padding: clamp(4rem, 12vh, 8.5rem) var(--goot) clamp(3rem, 8vh, 6rem);
  scroll-margin-top: calc(var(--rand) + var(--kophoogte));
}
@media (max-width: 39.99rem) { .aanbod { scroll-margin-top: calc(var(--rand) + 6.6rem); } }
.aanbod__kop { display: grid; gap: 1.1rem; }
.aanbod__regel { color: var(--gedempt); max-width: 50ch; text-wrap: pretty; }

/* Zonder JavaScript is er geen tablijst: dan staan de vier panelen onder
   elkaar, elk met zijn eigen kop. Met JavaScript één capsule met een pil die
   naar de gekozen tab glijdt; de stand komt uit aria-selected via :has(),
   dus het script zet alleen dat attribuut. */
.tabs { margin-top: clamp(2rem, 5vh, 3.25rem); }
.tabs__lijst { display: none; }
html.js .tabs__lijst {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative; isolation: isolate;
  max-width: 34rem; padding: 4px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--haar);
  background: color-mix(in oklab, var(--inkt) 5%, transparent);
}
.tabs__tab {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  min-height: 2.75rem; border-radius: 999px; padding-inline: .4em;
  font-weight: 500; color: var(--gedempt);
  transition: color .3s var(--soepel);
}
.tabs__tab:hover { color: var(--inkt); }
@media (max-width: 39.99rem) { .tabs__tab { font-size: .9375rem; } }
.tabs__tab[aria-selected="true"] { color: var(--vel); }
.tabs__pil {
  position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / 4);
  border-radius: 999px; background: var(--inkt);
  transition: translate .55s var(--soepel);
}
.tabs__lijst:has(> :nth-child(2)[aria-selected="true"]) .tabs__pil { translate: 100% 0; }
.tabs__lijst:has(> :nth-child(3)[aria-selected="true"]) .tabs__pil { translate: 200% 0; }
.tabs__lijst:has(> :nth-child(4)[aria-selected="true"]) .tabs__pil { translate: 300% 0; }

.paneel {
  display: grid; gap: clamp(2.2rem, 4vw, 4.5rem);
  padding-top: clamp(2.5rem, 6vh, 4rem);
}
.paneel[hidden] { display: none; }
.paneel + .paneel { margin-top: 2.5rem; border-top: 1px solid var(--haar); }
html.js .paneel + .paneel { margin-top: 0; border-top: 0; }
.paneel:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; border-radius: 6px; }
@media (min-width: 60rem) {
  .paneel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
.paneel__kop {
  font-family: var(--display); font-variation-settings: "wdth" 108, "wght" 680;
  font-size: clamp(1.65rem, 1.1rem + 2vw, 2.6rem); line-height: 1.04;
  letter-spacing: -.025em; text-wrap: balance;
}
.paneel__alinea { margin-top: 1rem; color: var(--gedempt); max-width: 46ch; text-wrap: pretty; }
.producten { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.product__naam {
  margin: 0; font-family: var(--display); font-variation-settings: "wdth" 104, "wght" 680;
  font-size: 1.1875rem; letter-spacing: -.01em;
}
.product p { margin-top: .25rem; color: var(--gedempt); max-width: 46ch; text-wrap: pretty; }
.paneel__actie { margin-top: 1.4rem; }
.paneel__noot { margin-top: .4rem; font-size: var(--t-meta); color: var(--gedempt); }
.paneel__beeld { margin: 0; min-width: 0; }
.beeld__onderschrift { margin-top: 1.2rem; font-size: var(--t-meta); color: var(--gedempt); max-width: 52ch; text-wrap: pretty; }

/* Websites: drie echte opzetten als waaier. Dezelfde vensters als op
   /websites/ (landing.js laadt het frame pas als het in beeld komt); hier op
   360 px gerenderd en geschaald, zodat elk venster de telefoonversie toont. */
.waaier { --schaal: .58; position: relative; height: calc(640px * var(--schaal) + 4rem); }
@media (min-width: 40rem) { .waaier { --schaal: .66; } }
@media (min-width: 80rem) { .waaier { --schaal: .74; } }
.waaier__kaart {
  position: absolute; top: 50%; left: 50%;
  width: calc(360px * var(--schaal)); height: calc(640px * var(--schaal));
  translate: -50% -50%;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--haar), 0 28px 50px -28px color-mix(in oklab, var(--inkt) 55%, transparent);
  transition: translate .6s var(--soepel), rotate .6s var(--soepel);
}
.waaier__kaart--een  { translate: -112% -47%; rotate: -7deg; }
.waaier__kaart--twee { z-index: 2; }
.waaier__kaart--drie { translate: 12% -47%; rotate: 7deg; }
.waaier:hover .waaier__kaart--een  { translate: -122% -49%; rotate: -10deg; }
.waaier:hover .waaier__kaart--drie { translate: 22% -49%; rotate: 10deg; }
.waaier .venster { height: 100%; border: 0; border-radius: inherit; }
.waaier .venster__frame {
  width: 360px; height: 640px;
  transform: scale(var(--schaal)); transform-origin: 0 0;
}
@media (max-width: 39.99rem) {
  .waaier__kaart--een  { translate: -96% -46%; }
  .waaier__kaart--drie { translate: -4% -46%; }
}

/* Software: een schema. De spaken zijn streepjes die lopen, dus je ziet de
   richting van de data: de bestelling komt binnen, de rest gaat eruit. */
.schema__tekening {
  display: block; width: 100%; max-width: 34rem; height: auto; margin-inline: auto;
  overflow: visible; font-family: var(--tekst);
}
.schema__knoop rect { fill: var(--vel-op); stroke: var(--haar); stroke-width: 1.5; }
.schema__knoop text, .schema__hart text {
  text-anchor: middle; font-size: 15px; font-weight: 600; fill: var(--inkt);
}
.schema__hart rect { fill: var(--accent-tekst); }
.schema__hart text { fill: var(--vel); }
.schema__spaak { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 8; }
/* De puls heeft in rust geen lijn; alleen de animatie geeft hem er een. */
.schema__puls { fill: none; stroke: none; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }

/* AI: de meting. Balken zonder achtergrondspoor; het getal is de maat. */
.meting__kop { font-size: var(--t-meta); color: var(--gedempt); max-width: 54ch; text-wrap: pretty; }
.meting__rijen { margin: 1.6rem 0 0; display: grid; gap: 1.35rem; }
.meting__rij dt { font-size: var(--t-meta); color: var(--gedempt); }
.meting__rij dd { margin: .35rem 0 0; display: flex; align-items: center; gap: 1rem; }
.meting__getal {
  flex: 0 0 auto; min-width: 3.3ch;
  font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 800;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.meting__balk {
  display: block; height: .7rem; border-radius: 999px; background: var(--accent);
  width: calc(var(--w) * (100% - 5rem)); transform-origin: left;
}
.meting__balk--10 { --w: .10; }
.meting__balk--19 { --w: .19; }
.meting__balk--33 { --w: .33; }
.meting__balk--55 { --w: .55; }

/* Advies: de keuring van deze site zelf. */
.keuring {
  padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 14px;
  background: var(--vel-op); box-shadow: inset 0 0 0 1px var(--haar);
}
.keuring__kop {
  font-family: var(--display); font-variation-settings: "wdth" 110, "wght" 720;
  font-size: 1.3rem; letter-spacing: -.015em;
}
.keuring__lijst { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .9rem; }
.keuring__punt { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.vinkje {
  width: 1.5rem; height: 1.5rem; fill: none;
  stroke: var(--accent-tekst); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.vinkje path { stroke-dasharray: 18; }

/* ---- Wat ik voor mezelf bouw -------------------------------------------- */
.eigen { padding: clamp(3.5rem, 10vh, 7.5rem) var(--goot); }
.eigen__raster { margin-top: clamp(2rem, 5vh, 3.25rem); display: grid; gap: var(--gat); }
@media (min-width: 60rem) {
  .eigen__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .vak--sites { grid-column: 1 / -1; }
  .vak--stack { grid-column: span 7; }
  .vak--leven { grid-column: span 5; }
}
.vak {
  position: relative; overflow: hidden;
  border-radius: 14px; padding: clamp(1.4rem, 3vw, 2.5rem);
  background: var(--vel-op); box-shadow: inset 0 0 0 1px var(--haar);
}
.vak__kop {
  font-family: var(--display); font-variation-settings: "wdth" 118, "wght" 760;
  font-size: clamp(1.55rem, 1rem + 1.7vw, 2.3rem); line-height: 1.02; letter-spacing: -.028em;
}
.vak p { margin-top: .8rem; color: var(--gedempt); max-width: 52ch; text-wrap: pretty; }
.vak .vak__actie { margin-top: .9rem; }
/* Op een vak (--vel-op) haalt --accent-tekst in donker maar 4,45:1 (poort C14,
   gemeten 12 okt op 390 px). Een zevende inkt erdoor: lichter in donker,
   donkerder in licht, dus in beide schema's verder van de grond af. */
.vak .pijl { color: color-mix(in oklab, var(--accent-tekst) 85%, var(--inkt)); }
.vak--sites { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .vak--sites { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; }
}
.stalen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem;
}
@media (min-width: 40rem) { .stalen { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.staal {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 5px;
  box-shadow: 0 0 0 1px var(--haar);
  transition: translate .35s var(--soepel);
}
.vak--sites:hover .staal { translate: 0 -3px; }
.vak--sites:hover .staal:nth-child(2n) { translate: 0 3px; }

.rooster { margin: 1.5rem 0 0; display: grid; gap: .6rem; }
.rooster__rij {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem;
  padding-top: .6rem; border-top: 1px solid var(--haar);
}
.rooster dt { font-weight: 600; }
.rooster dd { margin: 0; color: var(--gedempt); }

.vak--leven { display: grid; gap: 1.5rem; align-content: start; }
.vak__veld {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px;
  color: var(--accent); background: color-mix(in oklab, var(--inkt) 4%, transparent);
}

/* ---- Hoe het gaat ------------------------------------------------------- */
.werkwijze { padding: clamp(3.5rem, 10vh, 7.5rem) var(--goot) clamp(4rem, 12vh, 8rem); }
.stappen {
  list-style: none; margin: clamp(2rem, 5vh, 3.25rem) 0 0; padding: 0;
  display: grid; gap: 2.4rem var(--gat);
}
@media (min-width: 40rem) { .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .stappen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stap { position: relative; padding-top: 1.3rem; border-top: 2px solid var(--haar); }
.stap::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--accent); transform-origin: left;
}
.stap__kop {
  font-family: var(--display); font-variation-settings: "wdth" 125, "wght" 800;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem); line-height: 1; letter-spacing: -.03em;
  color: var(--accent);
}
.stap p { margin-top: .8rem; color: var(--gedempt); max-width: 34ch; text-wrap: pretty; }

/* ---- De blauwe afsluiter ------------------------------------------------ */
/* Eén vlak, één regel, het adres zo groot als het vlak breed is. Het adres
   rekt op hover uit over de breedte-as: gemeten zodat het op wdth 125 / wght
   880 precies tussen de binnenranden past (11,34 em) en in rust op 100 / 800
   (8,90 em) ruimte overhoudt. scripts/wissel_meten.js meet beide. */
.slot--thuis { padding-top: 0; }
.afsluiter {
  container-type: inline-size;
  background: var(--blok); color: var(--op-blok);
  border-radius: clamp(12px, 1.4vw, 20px);
  padding: clamp(2.4rem, 8vw, 6rem) clamp(1.4rem, 5vw, 4.5rem);
}
.afsluiter__regel {
  font-family: var(--display); font-variation-settings: "wdth" 110, "wght" 650;
  font-size: clamp(1.35rem, 3.6cqw, 2.4rem); line-height: 1.1; letter-spacing: -.02em;
}
.afsluiter__mail {
  display: inline-block; margin-top: .35em;
  font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 800;
  font-size: calc(100cqw / 11.34); line-height: 1; letter-spacing: -.03em;
  color: inherit; text-decoration: none; white-space: nowrap;
  transition: font-variation-settings .7s var(--soepel);
}
.afsluiter__mail:hover { font-variation-settings: "wdth" 125, "wght" 880; }
.afsluiter a:focus-visible { outline-color: var(--op-blok); outline-offset: 6px; }

/* ---- Onthullen ---------------------------------------------------------- */
/* thuis.js zet html.onthullen en geeft elke .onthul-sectie is-in-beeld zodra
   hij binnenkomt (IntersectionObserver, één keer). Tijd en geen scroll-
   tijdlijn, zodat het ook in browsers zonder scroll-tijdlijnen beweegt, en
   zodat een tabwissel (display: none -> grid) de animatie opnieuw start. */
@media (prefers-reduced-motion: no-preference) {
  html.onthullen .onthul:not(.is-in-beeld) :is(.sectiekop, .tabs, .staal, .stap) { opacity: 0; }

  html.onthullen .onthul.is-in-beeld .sectiekop { animation: uitrekken 1s var(--soepel) backwards; }
  @keyframes uitrekken {
    from { opacity: 0; font-variation-settings: "wdth" 62, "wght" 750; transform: translateY(.3em); }
  }
  /* De tabs komen ná de kop: eerst het onderwerp, dan de keuze. */
  html.onthullen .onthul.is-in-beeld .tabs { animation: opkomen .8s var(--soepel) .25s backwards; }
  @keyframes opkomen { from { opacity: 0; transform: translateY(1.2rem); } }

  /* Elk paneel dat zichtbaar wordt: tekst schuift in, beeld volgt. */
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .paneel__tekst > * { animation: opkomen .65s var(--soepel) backwards; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .paneel__tekst > :nth-child(2) { animation-delay: .05s; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .paneel__tekst > :nth-child(3) { animation-delay: .1s; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .paneel__tekst > :nth-child(n + 4) { animation-delay: .15s; }

  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .waaier__kaart { animation: waaieren 1s var(--soepel) backwards; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .waaier__kaart--twee { animation-delay: .06s; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .waaier__kaart--drie { animation-delay: .12s; }
  @keyframes waaieren { from { opacity: 0; translate: -50% -38%; rotate: 0deg; } }

  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .schema__spaak { animation: stromen 1.4s linear infinite; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .schema__spaak--1 { animation-direction: reverse; }
  @keyframes stromen { to { stroke-dashoffset: -20; } }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .schema__puls { animation: pulseren 2.4s var(--soepel) infinite; }
  @keyframes pulseren { from { stroke: var(--accent); opacity: .75; transform: scale(.85); } to { stroke: var(--accent); opacity: 0; transform: scale(2.1); } }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .schema__knoop rect { animation: oplichten 4.8s linear infinite; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .schema__knoop--2 rect { animation-delay: 1.2s; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .schema__knoop--3 rect { animation-delay: 2.4s; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .schema__knoop--4 rect { animation-delay: 3.6s; }
  @keyframes oplichten { 0%, 26%, 100% { stroke: var(--haar); } 8% { stroke: var(--accent); } }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .schema__hart { animation: opkomen .7s var(--soepel) backwards; }

  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .meting__balk { animation: groeien 1.1s var(--soepel) backwards; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .meting__rij:nth-child(2) .meting__balk { animation-delay: .1s; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .meting__rij:nth-child(3) .meting__balk { animation-delay: .2s; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .meting__rij:nth-child(4) .meting__balk { animation-delay: .3s; }
  @keyframes groeien { from { transform: scaleX(0); } }

  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .keuring__punt { animation: opkomen .55s var(--soepel) backwards; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .vinkje path { animation: aanvinken .5s var(--soepel) backwards; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .keuring__punt:nth-child(2), html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .keuring__punt:nth-child(2) .vinkje path { animation-delay: .12s; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .keuring__punt:nth-child(3), html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .keuring__punt:nth-child(3) .vinkje path { animation-delay: .24s; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .keuring__punt:nth-child(4), html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .keuring__punt:nth-child(4) .vinkje path { animation-delay: .36s; }
  html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .keuring__punt:nth-child(5), html.onthullen .aanbod.is-in-beeld .paneel:not([hidden]) .keuring__punt:nth-child(5) .vinkje path { animation-delay: .48s; }
  @keyframes aanvinken { from { stroke-dashoffset: 18; } }

  html.onthullen .eigen.is-in-beeld .staal { animation: stalen-in .7s var(--soepel) backwards; animation-delay: calc(var(--i, 0) * 45ms + .2s); }
  @keyframes stalen-in { from { opacity: 0; transform: translateY(.9rem) rotate(-4deg); } }

  html.onthullen .werkwijze.is-in-beeld .stap { animation: opkomen .7s var(--soepel) backwards; }
  html.onthullen .werkwijze.is-in-beeld .stap::before { animation: trekken .9s var(--soepel) backwards; }
  html.onthullen .werkwijze.is-in-beeld .stap:nth-child(2), html.onthullen .werkwijze.is-in-beeld .stap:nth-child(2)::before { animation-delay: .25s; }
  html.onthullen .werkwijze.is-in-beeld .stap:nth-child(3), html.onthullen .werkwijze.is-in-beeld .stap:nth-child(3)::before { animation-delay: .5s; }
  html.onthullen .werkwijze.is-in-beeld .stap:nth-child(4), html.onthullen .werkwijze.is-in-beeld .stap:nth-child(4)::before { animation-delay: .75s; }
  @keyframes trekken { from { transform: scaleX(0); } }
}
.staal:nth-child(1)  { --i: 0; }  .staal:nth-child(2)  { --i: 1; }  .staal:nth-child(3)  { --i: 2; }
.staal:nth-child(4)  { --i: 3; }  .staal:nth-child(5)  { --i: 4; }  .staal:nth-child(6)  { --i: 5; }
.staal:nth-child(7)  { --i: 6; }  .staal:nth-child(8)  { --i: 7; }  .staal:nth-child(9)  { --i: 8; }
.staal:nth-child(10) { --i: 9; }  .staal:nth-child(11) { --i: 10; } .staal:nth-child(12) { --i: 11; }
.staal:nth-child(13) { --i: 12; } .staal:nth-child(14) { --i: 13; } .staal:nth-child(15) { --i: 14; }
.staal:nth-child(16) { --i: 15; } .staal:nth-child(17) { --i: 16; }

@media (prefers-contrast: more) {
  html.js .tabs__lijst, .knop, .vak, .keuring { box-shadow: inset 0 0 0 1px var(--inkt); }
}