/* ============================================================
   Sitechirurg · systeem.css · richting "De Operatiekamer"
   Bron: design-system/tokens.css + richting B (gekozen 21-07). De ontwerpverkenningen
   staan sinds 21-07 in references/ontwerp-verkenningen/, buiten de gedeployde map:
   ze waren publiek bereikbaar op de live Worker en dat hoort niet.
   Dit is de nieuwe sitewide stylesheet; pagina's migreren
   gefaseerd van style.css hierheen (home eerst).
   ============================================================ */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jbmono-500.woff2') format('woff2'); }

:root {
  --nacht: #0B1826;
  --nacht-diep: #071120;
  --staal: #24507A;
  --orange: #E87722;
  --orange-gloed: rgba(232, 119, 34, 0.55);
  --wit-92: rgba(255, 255, 255, 0.92);
  --wit-70: rgba(255, 255, 255, 0.68);
  --wit-40: rgba(255, 255, 255, 0.58);  /* gedempte mono-labels; 0.58 haalt AA (~5,3:1) op #071120 */
  --glas: rgba(255, 255, 255, 0.055);
  --glas-rand: rgba(255, 255, 255, 0.14);
  --rand-zacht: rgba(255, 255, 255, 0.09);
  --rand-paneel: rgba(255, 255, 255, 0.1);
  --gloed-koel: rgba(120, 180, 240, 0.35);
  --lamp-blauw: rgba(78, 137, 189, 0.22);
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-paneel: 16px;
  --radius-rij: 12px;
  --radius-knop: 8px;
  --radius-chip: 999px;
  --sectie-padding: clamp(3.5rem, 7vw, 6rem);
  --paneel-padding: clamp(1.4rem, 2.4vw, 1.9rem);
  --wrap-breedte: min(100% - 3rem, 74rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--sans); color: var(--wit-92); line-height: 1.65;
  font-size: 1.0625rem; -webkit-font-smoothing: antialiased;
  background-color: var(--nacht-diep);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(232, 119, 34, 0.45); color: #fff; }
/* Focusring op álles wat bedienbaar is. De selector dekte alleen a, button en [tabindex];
   zodra het formulier en de vragenlijst erbij komen vallen input, textarea, select en
   summary erbuiten, en dan zakt de eis "zichtbare focusring op elk klikbaar element"
   stil weg op precies de pagina waar iemand klant wordt. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
/* Vangregel voor het hidden-attribuut. Het werkt via de UA-stylesheet en die verliest van
   élke auteursregel, dus een eigen display-declaratie schakelt hem stil uit. Op /contact/
   wisselt site.js tussen vraag en uitslag door .si-opties (display: grid) en .si-r-prijs
   (display: block) op hidden te zetten; zonder deze regel blijft de vraag naast de uitslag
   staan. Op de home valt dat niet op, want daar wordt alleen .si-uitslag verborgen en dat
   element heeft geen display-regel. !important is hier correct: het herstelt semantiek. */
[hidden] { display: none !important; }
/* De kop is sticky met min-height 4.5rem en er is nul scroll-margin, dus elk anker landt
   onder de kopbalk. Raakt onder meer /diensten/#diagnose, waar de home naartoe linkt. */
[id] { scroll-margin-top: 5.5rem; }
.wrap { width: var(--wrap-breedte); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -- Decor: vaste achtergrondlaag (géén background-attachment) -- */
.decor { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(56rem 32rem at 50% -6rem, var(--lamp-blauw), transparent 60%),
    radial-gradient(40rem 28rem at 50% 30rem, rgba(232, 119, 34, 0.09), transparent 62%),
    linear-gradient(180deg, var(--nacht) 0%, var(--nacht-diep) 100%); }

/* -- Signature: de ECG-draad langs de linkerflank -- */
.draad { position: fixed; left: clamp(0.6rem, 2vw, 2rem); top: 0; bottom: 0; width: 2px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(232, 119, 34, 0.35) 12%, rgba(232, 119, 34, 0.35) 88%, transparent); }
.draad::after { content: ""; position: absolute; left: -3px; top: 38%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 14px var(--orange-gloed); animation: draadpuls 5s ease-in-out infinite; }
@keyframes draadpuls { 0%, 100% { top: 32%; opacity: 0.7; } 50% { top: 66%; opacity: 1; } }
/* Progressive enhancement: waar de browser het kan, volgt de dot de scroll-positie */
@supports (animation-timeline: scroll()) {
  .draad::after { animation: draadscroll linear both; animation-timeline: scroll(root); }
  @keyframes draadscroll { from { top: 6%; opacity: 0.85; } to { top: 92%; opacity: 1; } }
}
@media (max-width: 40rem) { .draad { display: none; } }

/* ============================================================
   Header + navigatie
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--rand-zacht);
  background: rgba(7, 17, 32, 0.92); }
@supports (backdrop-filter: blur(4px)) {
  .site-header { background: rgba(7, 17, 32, 0.66); backdrop-filter: blur(14px) saturate(1.3); }
  /* backdrop-filter maakt de header een containing block voor position:fixed-kinderen;
     dat perst het open menu-overlay in de header-box. Uitzetten zodra het menu open is,
     dan is .site-nav.open weer viewport-relatief (inset:0 = hele viewport). */
  body.menu-open .site-header { backdrop-filter: none; background: transparent; }
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.brand-link { display: flex; align-items: center; gap: 0.65rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; color: #fff; }
.brand-link svg { width: 32px; height: 32px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.92rem; font-weight: 500; color: var(--wit-70); }
.site-nav a { text-decoration: none; padding-block: 0.3rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.5); }
.nav-toggle { display: none; }
@media (max-width: 68rem) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; position: relative; z-index: 50; cursor: pointer;
    font: 600 0.85rem var(--sans); letter-spacing: 0.04em; color: #fff;
    background: var(--glas); border: 1px solid var(--glas-rand); border-radius: var(--radius-knop); padding: 0.55rem 1rem; }
  .nav-toggle[aria-expanded="true"] { border-color: var(--orange); box-shadow: 0 0 16px rgba(232, 119, 34, 0.25); }
  .site-nav.open { display: grid; position: fixed; inset: 0; z-index: 40; align-content: center; justify-items: center;
    gap: 1.1rem; font-size: 1.35rem; font-weight: 600; text-align: center;
    background:
      radial-gradient(40rem 24rem at 50% -4rem, var(--lamp-blauw), transparent 65%),
      linear-gradient(180deg, var(--nacht) 0%, var(--nacht-diep) 100%); }
  .site-nav.open a { color: var(--wit-92); }
  body.menu-open { overflow: hidden; }
}

/* ============================================================
   Hero: de operatielamp stuurt de compositie
   ============================================================ */
.hero { position: relative; padding-block: clamp(2.2rem, 4.5vw, 3.4rem) clamp(2.6rem, 5vw, 4rem); overflow: clip;
  --hero-gap: clamp(1.8rem, 4vw, 3rem); --lamp-x: 50%; }
/* Een operatielamp schijnt op de patiënt, niet op het plafond. De kegel mikt daarom op
   de klachtkeuze: `--lamp-x` zet de top van de kegel recht boven het midden daarvan, en
   het masker laat de bundel uitdoven op de hoogte waar hij landt, zodat het licht daar
   overgaat in de lichtplas (`.intake::before`) in plaats van als koker door te lopen. */
.lamp { position: absolute; top: 0; left: var(--lamp-x); translate: -50% 0; width: min(120rem, 160vw); aspect-ratio: 2 / 1; pointer-events: none;
  background: conic-gradient(from 158deg at 50% 0%, transparent 0deg, rgba(255, 255, 255, 0.10) 22deg, rgba(255, 255, 255, 0.04) 40deg, transparent 44deg);
  -webkit-mask-image: linear-gradient(180deg, #000 24%, rgba(0, 0, 0, 0.5) 58%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 24%, rgba(0, 0, 0, 0.5) 58%, transparent 86%);
  animation: lampaan 1.4s ease-out both; }
@keyframes lampaan { from { opacity: 0; } to { opacity: 1; } }
/* Vanaf de tweekolomsgrens staat de klachtkeuze in de LINKERkolom, dus schuift de lamp
   mee. Het midden van die kolom ligt op -0,1914 x wrap - 0,3086 x gap vanaf het midden
   van het scherm: de kolommen staan 1 : 0,62, dus de linkerkolom is (wrap - gap) / 1,62
   breed en begint op wrap / 2 links van het midden. Uitgerekend i.p.v. een rond getal,
   want de wrap loopt van 74rem terug naar 100% - 3rem en dan verschuift het midden mee. */
@media (min-width: 62rem) {
  .hero { --lamp-x: calc(50% - 0.1914 * var(--wrap-breedte) - 0.3086 * var(--hero-gap)); }
}
/* Onder de tweekolomsgrens staat de klachtkeuze lager op de pagina, terwijl de bundel
   even lang blijft: gemeten viel hij op 390 px al dood op y=341 terwijl de lichtplas pas
   rond y=390 aanzet, dus zat er een gat van 55 px (op 320 px zelfs 150 px) waardoor het
   als twee losse effecten las. De kegel is hoeklijk, dus een hogere verhouding rekt hem
   niet uit maar laat 'm simpelweg verder doorlopen tot over de plas heen. */
@media (max-width: 61.99rem) { .lamp { aspect-ratio: 1.15 / 1; } }
.hero .wrap { position: relative; z-index: 1; }
/* Links de tekst ÉN de klachtkeuze, rechts de doorsnede. Door de intake in de
   linkerkolom te houden vult die de hoogte naast het beeld, zodat er geen leeg gat
   onder de introzin ontstaat en alles samen boven de vouw past. */
.hero-grid { display: grid; gap: var(--hero-gap); align-items: center; }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); } }
.hero-tekst { max-width: 40rem; }
/* Bovenaan uitlijnen in plaats van centreren: gecentreerd raakte het figuur geen enkele
   lijn links (de bovenrand viel tussen twee kopregels in) waardoor het zweefde, én het
   verschoof 20 px zodra de intake van hoogte veranderde bij het tonen van de uitslag. */
/* .figuur is de algemene naam voor een beeldkolom naast een hero of binnen een .duo;
   .anatomie blijft als alias staan zodat de al goedgekeurde home niet breekt. Zes
   analisten stelden hier zes eigen componenten voor (.blauwdruk, .portret, .bestelweg,
   .hartlijn, .beeldtray, .duo-beeld); dat is allemaal dit, onder een andere naam. */
.figuur, .anatomie { justify-self: center; align-self: start; width: min(100%, 25rem); }
.figuur img, .anatomie img { width: 100%; height: auto; }
/* Portret: echt fotoportret als beeld-object in de over-hero. Hergebruikt .figuur voor
   plaatsing én de mobiele order:3; .portret voegt alleen het kader, de vignet die de
   lichte studio-achtergrond naar het marineblauw verzacht, en het bijschrift toe. */
.portret { width: min(100%, 22rem); }
.portret-lijst { position: relative; border-radius: var(--radius-paneel); overflow: hidden; border: 1px solid var(--rand-paneel); box-shadow: 0 24px 55px rgba(0, 0, 0, 0.5); background: #0b1424; }
.portret-lijst img { display: block; width: 100%; height: auto; }
.portret-lijst::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(115% 85% at 50% 32%, transparent 56%, rgba(7, 17, 32, 0.5) 100%), linear-gradient(to bottom, transparent 58%, rgba(7, 17, 32, 0.62) 100%); }
.portret figcaption { margin-top: 1rem; text-align: center; }
.portret figcaption b { display: block; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.portret figcaption span { display: block; margin-top: 0.25rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wit-40); }
/* Founder-strip op de home: klein portret naast de belofte 'je praat met de chirurg
   zelf', vlak voor de eind-CTA. Bewust secundair aan de anatomie-signatuur in de hero;
   hergebruikt .portret-lijst voor kader + vignet. Stapelt gecentreerd op smal. */
.chirurg { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; justify-items: center; text-align: center; }
@media (min-width: 46rem) { .chirurg { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; } }
.chirurg-foto { width: min(46vw, 9.5rem); }
@media (min-width: 46rem) { .chirurg-foto { width: min(30vw, 17rem); } }
.chirurg-tekst h2 { margin-top: 0.2rem; }
.chirurg-tekst p { margin-top: 0.8rem; color: var(--wit-70); max-width: 48ch; }
.chirurg-tekst a { display: inline-block; margin-top: 1rem; color: var(--wit-92); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.chirurg-tekst a:hover { color: #fff; }
.eyebrow { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wit-40); display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.3rem; }
.eyebrow::before, .eyebrow::after { content: ""; width: 2rem; height: 1px; background: rgba(255, 255, 255, 0.25); }
/* In de hero geen streepjes: ze voegen niets toe en ze kosten de ruimte die de regel
   op smalle schermen nodig heeft om niet af te breken op een wees-woord. */
.hero .eyebrow { gap: 0; margin-bottom: 1.1rem; }
.hero .eyebrow::before, .hero .eyebrow::after { display: none; }
h1 { font-size: clamp(1.95rem, 5vw, 4.1rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 250; max-width: 17ch; text-wrap: balance; }
h1 strong { font-weight: 800; display: inline-block; }
h1 .k { font-family: var(--mono); font-weight: 500; color: var(--orange); text-shadow: 0 0 26px var(--orange-gloed); }
.lead { margin-top: 1.4rem; font-size: 1.12rem; color: var(--wit-70); max-width: 58ch; }
/* Laad-choreografie: eyebrow, kop, lead en tafel komen na elkaar in het licht */
/* Kort gehouden: de hele keten staat binnen ~0,7s. Een tragere choreografie laat een
   site die 100/100 scoort alsnog traag aanvoelen, en snelheid is hier het product. */
.intro { animation: introrijs 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes introrijs { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
.intro-1 { animation-delay: 0.03s; } .intro-2 { animation-delay: 0.08s; }
.intro-3 { animation-delay: 0.14s; } .intro-4 { animation-delay: 0.2s; }

/* -- Subpagina-hero: kop, introzin en één actie, zonder de klachtkeuze van de home --
   Modifier op .hero, geen tweede hero: alle onderdelen (.lamp, .hero-grid, .eyebrow,
   h1 .k, .lead, .intro-1..4) blijven ongewijzigd. Zeven analisten stelden dit onder vijf
   namen voor (--kort, --tekst, --kop, --dienst, --pagina); het is één component. */
.hero--pagina { padding-block: clamp(1.8rem, 3.5vw, 2.8rem) clamp(2rem, 4vw, 3.2rem); }
/* De lamp moet mee terug naar het midden. De mediaquery hierboven mikt de kegel op het
   hart van de LINKERkolom, want daar staat op de home de klachtkeuze; op een subpagina
   die zijn kop over de volle breedte zet, schijnt de bundel dan naast de inhoud en dat
   is precies wat de lichtlaag-regel verbiedt. Specificiteit (0,2,0) zodat de volgorde in
   het bestand niet meebeslist. */
.hero.hero--pagina { --lamp-x: 50%; }
/* Uitzondering op de uitzondering: zet een subpagina wél een beeld naast de tekst, dan
   staat de kop weer in diezelfde linkerkolom en is de oorspronkelijke offset juist goed.
   Zonder :has()-ondersteuning valt de bundel terug op het midden; dat is de zachte
   degradatie, en de al goedgekeurde home raakt hij niet, want die is geen --pagina. */
@media (min-width: 62rem) {
  .hero.hero--pagina:has(.hero-grid) { --lamp-x: calc(50% - 0.1914 * var(--wrap-breedte) - 0.3086 * var(--hero-gap)); }
  /* Zonder beeld staat de kop links uitgelijnd binnen de wrap, begrensd op de 40rem van
     .hero-tekst. Het wrap-midden ligt dan naast de kop, dus de lamp mikte op het rechter-
     einde ervan (gemeten 272 px te ver op 1440). Mik hem op het midden van de tekstkolom:
     dat ligt (wrap - 40rem)/2 links van het wrap-midden. max(0rem, ...) vangt smalle
     schermen af waar de tekst de hele wrap vult en de term negatief zou worden.
     Specificiteit (0,3,0) door het :not(:has()), wint van de 50%-basisregel (0,2,0). */
  .hero.hero--pagina:not(:has(.hero-grid)) { --lamp-x: calc(50% - max(0rem, (var(--wrap-breedte) - 40rem) / 2)); }
}
/* 17ch is uitgerekend op "Eerst de diagnose"; langere subpagina-koppen breken daarop af
   op een wees-woord. 22ch houdt ze op twee volle regels. */
.hero--pagina h1 { max-width: 22ch; }
/* De .knoprij is de enige eigenaar van deze afstand. Ook één losse knop hoort er dus in;
   zet je 'm ernaast met een eigen margin, dan staat de afstand op twee plekken en lopen
   ze bij de eerstvolgende wijziging uit elkaar. */
.hero--pagina .knoprij { margin-top: 1.8rem; }

/* ============================================================
   De spoedintake: zes losse blokken, geen paneel eromheen
   ============================================================ */
.intake { position: relative; z-index: 1; margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
/* De lichtplas: de plek waar de bundel landt. Zonder deze laag schijnt de lamp in het
   luchtledige en blijven de gaten tússen de blokken dood zwart; met de plas valt het
   licht zichtbaar over het hele veld en lezen de zes blokken als één belichte tafel.
   z-index: -1 houdt hem binnen de stapelcontext van .intake, dus vóór de bundel en
   áchter de blokken zelf - die zijn half doorzichtig, dus ze vangen wat licht op. */
/* Breed gehouden met een trage afloop: met een strakke ellips was de helderste plek de
   lege kier tussen de twee kolommen (halfwaarde 286 px op een veld van 701 px), en dan
   verlicht je precies het gat in plaats van de blokken. Vier stops i.p.v. twee houden
   het licht tot ver in de buitenste blokken op sterkte. */
.intake::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -2.4rem; translate: -50% 0; width: min(60rem, 150%); height: calc(100% + 4.5rem);
  background: radial-gradient(70% 56% at 50% 44%, rgba(168, 208, 248, 0.14), rgba(150, 195, 242, 0.095) 40%, rgba(120, 170, 220, 0.038) 66%, transparent 88%);
  animation: lampaan 1.8s ease-out both; }
.t-voet { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; justify-content: space-between; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.02em; color: var(--wit-40); margin-top: 1.15rem; }
.t-voet a { color: var(--wit-70); text-decoration-color: var(--orange); }

/* Spoedintake: vraag + zes klachten */
.si-stap { padding-top: 0.2rem; }
.si-q { font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 700; letter-spacing: -0.015em; color: #fff; }
/* Elke klacht is een eigen blok met een eigen rand: dat is functionele affordance
   (dit is één klikbaar ding, tot hier), niet decoratie. Wat er NIET omheen zit is
   een omhullend paneel: dat sloot de zes samen tot één groot blok. Los van elkaar,
   niet los van vorm. Ruim gehouden: geperste blokken met kleine letters lezen als
   een menubalk, en dat was precies de klacht. */
/* Ruime tussenruimte is hier geen smaakkwestie: bij 10 px (2,7% van de blokbreedte)
   lezen zes gelijke rechthoeken als één raster met scheidingslijnen, precies het
   "het is nog een blok"-effect dat we juist kwijt wilden. Rond 18 px vallen ze uiteen. */
.si-opties { margin-top: 1.15rem; display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); }
.si-opt { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 0.75rem; min-width: 0; text-decoration: none;
  /* Belicht van boven i.p.v. vlak gevuld: de lichtplas ligt áchter deze blokken, dus
     zonder dit verloop lichten alleen de kieren ertussen op en blijven de blokken zelf
     silhouetten. Het verloop geeft ze de materie van een glasplaat op een verlichte tafel.
     GEEN opgelichte bovenrand erbij: gemeten was die lijn met de lamp uit stérker (+42,5)
     dan met de lamp aan (+38,7), en vier keer zo sterk als het verloop zelf. Dat is per
     definitie geen weerkaatsing maar sierrand, en sierrand is hier niet gewenst. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.038) 68%);
  border: 1px solid var(--glas-rand); border-radius: var(--radius-rij);
  padding: 1rem 1.1rem; min-height: 3rem; font-size: 0.98rem; font-weight: 550; line-height: 1.35; color: var(--wit-92);
  animation: optIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease; }
/* Binnenkomst één voor één: de kop komt in het licht, daarna lichten de klachten op volgorde op */
@keyframes optIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.si-opt:nth-child(1) { animation-delay: 0.22s; }
.si-opt:nth-child(2) { animation-delay: 0.255s; }
.si-opt:nth-child(3) { animation-delay: 0.29s; }
.si-opt:nth-child(4) { animation-delay: 0.325s; }
.si-opt:nth-child(5) { animation-delay: 0.36s; }
.si-opt:nth-child(6) { animation-delay: 0.395s; }
.si-opt::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(232, 119, 34, 0.6); transition: background-color 0.18s ease, box-shadow 0.18s ease; }
/* Gloed die de cursor volgt: dankzij isolate + z-index:-1 ligt hij tussen de glas-
   achtergrond en de tekst. JS zet --mx/--my; zonder JS blijft hij netjes gecentreerd. */
.si-opt::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(10rem 10rem at var(--mx, 50%) var(--my, 50%), rgba(232, 119, 34, 0.32), transparent 58%);
  opacity: 0; transition: opacity 0.3s ease; }
.si-opt:hover { color: #fff; border-color: rgba(232, 119, 34, 0.6);
  box-shadow: 0 0 26px rgba(232, 119, 34, 0.14), 0 12px 26px rgba(0, 0, 0, 0.35); transform: translateY(-2px); }
.si-opt:hover::before { background: var(--orange); box-shadow: 0 0 10px var(--orange-gloed); }
.si-opt:hover::after, .si-opt:focus-visible::after { opacity: 1; }
/* Op /contact/ bouwt site.js deze knoppen als <button>, op de home zijn het <a>'s. Een
   button erft font-family en tekstuitlijning niet van de pagina, dus zonder deze regel
   staan daar zes systeemfont-knoppen met gecentreerde tekst tussen de rest. */
button.si-opt { font-family: inherit; text-align: left; cursor: pointer; width: 100%; }
/* Maximaal drie kolommen, bewust GEEN zes. Gemeten op 1440: bij zes kolommen is een
   blok 189 px breed met 136 px tekstruimte, en dan breken de langste labels naar drie
   regels; het blok wordt 98 px hoog en de tekst zit erin geperst. Bij drie kolommen is
   een blok 388 px, past elk label op één regel, en zijn twee rijen samen 114 px: zestien
   pixels hoger, maar rustig in plaats van gedrongen. Alle zes staan zo nog steeds
   volledig boven de vouw, wat de eigenlijke eis was. */
@media (min-width: 34rem) { .si-opties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tussen 52 en 62rem staat het beeld nog onder de tekst, dus is de volle breedte
   beschikbaar en passen er drie kolommen. Daarboven schuift het beeld ernaast en
   wordt de linkerkolom smaller: dan terug naar twee, anders breken de labels weer. */
@media (min-width: 52rem) and (max-width: 61.99rem) { .si-opties { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Spoedintake: voorlopige uitslag (JS-upgrade) */
.si-uitslag { padding-top: 0.2rem; animation: introrijs 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.si-r-kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); }
.si-r-titel { margin-top: 0.4rem; font-size: clamp(1.3rem, 2.2vw, 1.6rem); letter-spacing: -0.015em; font-weight: 800; color: #fff; }
/* Deze kop krijgt programmatisch focus zodat schermlezers de uitslag aankondigen, maar
   is zelf niet interactief. Een focusring over de volle kolombreedte laat 'm lezen als
   een leeg invoerveld; de aankondiging werkt zonder die ring precies zo goed. */
.si-r-titel:focus-visible { outline: none; }
.si-r-body { margin-top: 0.55rem; font-size: 0.98rem; color: var(--wit-70); max-width: 62ch; }
.si-r-prijs { display: block; margin-top: 0.8rem; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--wit-40); }
/* .knoprij is de algemene naam: twee of meer knoppen of tekstlinks naast elkaar onder een
   tekstblok. .si-r-acties blijft als alias staan zodat de home niet breekt. Geen rand en
   geen vlak: dit is een rij, geen kaart, en de knoppen erin dragen hun eigen affordance. */
.knoprij, .si-r-acties { margin-top: 1.15rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; }
.si-r-lees { font-size: 0.92rem; color: var(--wit-70); text-decoration-color: var(--orange); text-underline-offset: 3px; }
.si-r-lees:hover, .si-terug:hover { color: #fff; }
.si-terug { cursor: pointer; background: none; border: none; padding: 0.3rem 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wit-40); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Knoppen
   ============================================================ */
.btn { display: inline-block; background: var(--orange); color: #fff; font-weight: 650; text-decoration: none; cursor: pointer; border: none; font-size: 1rem;
  padding: 0.95rem 2rem; border-radius: var(--radius-knop);
  box-shadow: 0 0 30px rgba(232, 119, 34, 0.42), 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.18s ease, transform 0.18s ease; }
.btn:hover { box-shadow: 0 0 44px rgba(232, 119, 34, 0.62), 0 8px 24px rgba(0, 0, 0, 0.35); transform: translateY(-1px); }
.btn--klein { padding: 0.75rem 1.5rem; font-size: 0.95rem; }
/* De tweede, niet-concurrerende knop. Zes pagina's dragen nu een .btn--ghost uit style.css
   en die modifier bestaat hier niet: bij een kale stylesheet-wissel valt hij terug op de
   volle oranje .btn, en dan staan er twee oranje knoppen naast elkaar. Oranje is dan geen
   accent meer maar het dominante vlak. Hier blijft het binnen de hover-rand. De rand is
   legitiem: dit is een echte link of knop, dus rand plus vlak is affordance. */
.btn--stil { background: transparent; color: var(--wit-92); border: 1px solid var(--glas-rand);
  box-shadow: none; transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; }
.btn--stil:hover { border-color: rgba(232, 119, 34, 0.6); color: #fff; box-shadow: none; transform: translateY(-1px); }
.cta-note { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--wit-40); }

/* ============================================================
   Secties + koppen
   ============================================================ */
.sectie { position: relative; z-index: 1; padding-block: var(--sectie-padding); }
/* Blok-scheiding: om-en-om een licht opgetild paneel met haarfijne randen, zodat de
   secties als losse blokken lezen i.p.v. één doorlopend donker verloop. Subtiel houden:
   de hairlines doen het scheidingswerk, de tint geeft alleen diepte. */
.sectie--paneel { background: rgba(255, 255, 255, 0.045); border-block: 1px solid var(--rand-zacht); }
/* Alle vier de sectiegrenzen liggen op identiek substraat (de border wordt over de
   eigen paneel-achtergrond geschilderd), dus ze horen dezelfde alpha te hebben.
   Gemeten 21-07: een zwaardere eerste lijn las +37 tegen +32 R-punten en sprong eruit. */
.sectie-kop { max-width: 48rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.sectie-kop .eyebrow { justify-content: flex-start; margin-bottom: 1rem; }
.sectie-kop .eyebrow::after { display: none; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -0.028em; font-weight: 250; line-height: 1.12; }
h2 strong { font-weight: 800; }
.sectie-kop p { margin-top: 0.9rem; color: var(--wit-70); max-width: 54ch; }

/* ============================================================
   De instrumenten-tray: zes behandelingen als brede rijen
   ============================================================ */
.tray { display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .tray { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.instrument { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; min-width: 0;
  background: var(--glas); border: 1px solid var(--glas-rand); border-radius: var(--radius-rij); padding: 1.2rem 1.3rem; text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.instrument:hover { border-color: rgba(232, 119, 34, 0.6); box-shadow: 0 0 30px rgba(232, 119, 34, 0.14), 0 14px 30px rgba(0, 0, 0, 0.35); transform: translateY(-2px); }
.i-dot { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(232, 119, 34, 0.5); display: grid; place-items: center; font-family: var(--mono); font-size: 0.72rem; color: var(--orange); box-shadow: 0 0 14px rgba(232, 119, 34, 0.15) inset; transition: box-shadow 0.18s ease; }
.instrument:hover .i-dot { box-shadow: 0 0 14px rgba(232, 119, 34, 0.4); }
.instrument strong { font-size: 1.05rem; letter-spacing: -0.01em; color: #fff; }
.instrument .sub { display: block; margin-top: 0.25rem; font-size: 0.9rem; color: var(--wit-70); }
.i-tekst { display: block; min-width: 0; }
/* Prijs rechts op dezelfde regel als de naam: zo is de lijst in één kolom te scannen
   op wat iets kost. Wrapt netjes onder de naam zodra de kolom te smal wordt. */
.i-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15rem 1rem; }
.i-prijs { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.01em; color: var(--wit-40); white-space: nowrap; }
.instrument:hover .i-prijs { color: var(--wit-70); }
/* Onder de 480 px wrapt de prijs bij zes van de zeven items vanzelf onder de naam, maar
   bij het kortste item (Diagnose) net niet. Eén item met de prijs rechts en zes eronder
   is een ritmebreuk, en dan uitgerekend bij het eerste item dat je leest. Onder die grens
   dus altijd stapelen, zodat de hele lijst hetzelfde patroon volgt. */
@media (max-width: 29.99rem) { .i-kop { flex-direction: column; align-items: flex-start; } }
/* Het onderhoud sluit de reeks af over de volle breedte: het volgt op elke behandeling
   en is daarmee geen zevende keuze maar de stap erna. Wél de kop begrenzen: over de volle
   1184 px zou `space-between` de prijs 833 px van de naam wegduwen (tegen 204-370 px bij
   de andere zes) en dan koppelt het oog naam en prijs niet meer aan elkaar. */
@media (min-width: 56rem) {
  .instrument--breed { grid-column: 1 / -1; }
  .instrument--breed .i-kop { justify-content: flex-start; gap: 0.15rem 1.6rem; }
}

/* ============================================================
   De methode: drie stappen onder één lichtlijn
   ============================================================ */
.stappen { --stap-gap: clamp(1.7rem, 3.2vw, 2.6rem);
  position: relative; display: grid; gap: var(--stap-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) {
  .stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* De lijn loopt van hart tot hart van de eerste en de laatste badge. Verticaal op 1,2rem
     (de helft van een badge van 2,4rem, die zonder kaart-padding tegen de bovenkant staat).
     Horizontaal uitgerekend i.p.v. op 4% van de grid: de badges staan links in hun kolom,
     dus met een gecentreerd percentage begon de lijn 9 px náást badge 01 en liep hij 281 px
     door in het niets voorbij badge 03, terwijl hij juist claimt de drie te verbinden.
     Kolombreedte is (100% - 2 gaten) / 3, en het hart van de laatste badge ligt precies
     één kolombreedte min 1,2rem vanaf de rechterrand. */
  .stappen::before { content: ""; position: absolute; top: 1.2rem; height: 1px;
    left: 1.2rem; right: calc((100% - 2 * var(--stap-gap)) / 3 - 1.2rem);
    background: rgba(255, 255, 255, 0.16); }
}
/* Geen kaart om deze drie: een rand is affordance ("dit is één klikbaar ding, tot hier")
   en deze stappen zijn geen links. Zonder die rand blijft de dienstenlijst de enige echte
   kaartensectie, en leest de pagina niet meer als drie keer dezelfde doos met andere
   woorden erin. Wat de blokken bij elkaar houdt is nu de badge plus de verbindingslijn. */
.stap { position: relative; min-width: 0; padding-right: clamp(0.6rem, 1.5vw, 1.4rem); }
.stap h3 { margin-top: 0.9rem; font-size: 1.12rem; letter-spacing: -0.01em; color: #fff; }
.stap .prijs { display: block; margin-top: 0.35rem; font-family: var(--mono); font-size: 1.05rem; color: var(--wit-92); }
.stap .prijs .per { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wit-40); }
.stap p { margin-top: 0.6rem; font-size: 0.93rem; color: var(--wit-70); }
/* Bullet-lijst binnen een .stap: neutrale opsomming (geen 'geregeld'-vinkje). De bullet hangt
   absoluut i.p.v. in een grid-track: een <li> met "<strong>kop.</strong> tekst" is twee losse
   nodes, en in een grid valt het kale tekstnode in de auto-kolom die op smal tot het breedste
   woord groeit (~46px overflow op 390/320). Zie memory reference_grid_bullet_multichild_overflow.
   Gepromoveerd uit /website-laten-maken/ en /webshop/ + /wordpress-sneller-maken/ bij de
   buster-bump 20260803a; de gefixte versie vervangt meteen de oude grid-variant op sneller-maken. */
.stap ul { margin-top: 0.95rem; display: grid; gap: 0.4rem; list-style: none; }
.stap li { position: relative; padding-left: 1.2rem; font-size: 0.9rem; color: var(--wit-70); }
.stap li strong { color: var(--wit-92); font-weight: 650; }
.stap li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--wit-40); }
/* Groot mono-kerncijfer boven een korte uitleg (webshop + sneller-maken). */
.kerncijfer { display: block; font-family: var(--mono); font-size: clamp(2.4rem,4.5vw,3.2rem);
  line-height: 1; letter-spacing: -0.02em; color: #fff; text-shadow: 0 0 26px var(--gloed-koel); margin-bottom: 0.6rem; }
.kerncijfer .eenheid { font-size: 0.5em; color: var(--wit-40); }
/* .noot is de algemene naam voor een losse toelichtende slotregel onder een blok; de oude
   naam .prijs-note dekte alleen het prijs-geval en wordt inmiddels ook voor niet-prijzen
   gebruikt (bedankt, contact). Alias zodat bestaande pagina's niet breken. */
.noot, .prijs-note { margin-top: 1.4rem; font-size: 0.88rem; color: var(--wit-40); }
.noot a, .prijs-note a { color: var(--wit-70); text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* -- .stappen--raster: dezelfde blokken, maar als opsomming in plaats van als volgorde --
   Zes analisten stelden hiervoor zes eigen componenten voor (.symptomen, .oorzaken,
   .kast, .profielen, .uitleg, .verslag); het is één patroon en .stap dekt het al volledig.
   Alleen de container klopt niet: .stappen is hard uitgerekend op precies drie kolommen en
   de verbindingslijn gebruikt (100% - 2 gaten) / 3, dus bij vier of zes items loopt die
   zichtbaar mis. Inhoudelijk erger: een lijn claimt een volgorde, en oorzaken hebben er
   geen. Kies dus bewust: mét lijn en drie kolommen als het écht een volgorde is (de
   methode, de werkwijze), zonder lijn zodra het een opsomming is. */
/* Nooit meer dan drie kolommen. Een kale `minmax(16rem, 1fr)` gaf op 1440 vier kolommen,
   en zes blokken lezen dan als 4 + 2 met een gat onder de laatste twee. De ondergrens is
   daarom óók een derde van de container: dan pást een vierde kolom simpelweg niet, terwijl
   de 16rem op smalle schermen nog steeds terugschakelt naar twee en één kolom. Drie is
   bovendien het ritme dat de methode en de dienstenlijst al aanhouden. */
/* De ondergrens is 15rem en niet het rondere 16rem, omdat dat laatste gemeten precies
   2,2 px te breed was op een viewport van 600 px. De site reserveert daar via
   `scrollbar-gutter: stable` 15 px, dus de wrap is 537 px en niet 552; twee kolommen van
   16rem plus een gat van 1,7rem vragen 539,2 px. auto-fit kent geen "bijna" en viel dus
   hard terug op één kolom, midden in het tabletbereik. Met 15rem begint de tweekoloms-
   indeling bij 570 px viewport, met 30 px speling in plaats van 2 px tekort. */
.stappen--raster { grid-template-columns: repeat(auto-fit, minmax(max(15rem, (100% - 2 * var(--stap-gap, 2.6rem)) / 3), 1fr)); }
/* Vier blokken is een TELkwestie, geen breedtekwestie. De onderliggende regel is "volle
   rijen": zes items willen drie of twee kolommen, vier items willen vier of twee, en juist
   zes-in-vier en vier-in-drie laten een halflege staart achter. Dat druk je niet uit in een
   ondergrens maar in breekpunten per aantal, dus hier expliciet en zonder auto-fit.
   Waarom vier en niet twee op een breed scherm: gemeten op 1440 gaven twee kolommen van
   571 px de royaalste witruimte van de hele pagina in het midden, terwijl vier kolommen van
   265 px als één set lezen. Onder 72rem past dat niet meer en is twee bij twee juist wél
   het antwoord. De selector betekent letterlijk "het laatste kind is ook het vierde",
   oftewel exact vier stuks. */
.stappen--raster:has(> :last-child:nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) {
  .stappen--raster:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  .stappen--raster:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stappen--raster::before { display: none; }

/* -- .eenkoloms: een raster dat binnen een smalle kolom staat en niet mag opsplitsen --
   .stappen en .trusts schakelen op VIEWPORT-breedte, niet op containerbreedte. Zet je een
   .stappen in de zijkolom van een contactformulier, dan krijg je op 1440 px alsnog drie
   geplette kolommen met een verbindingslijn dwars door de aside. Specificiteit (0,2,0)
   wint van de mediaquery-regels (0,1,0), dus geen !important nodig. */
.stappen.eenkoloms, .trusts.eenkoloms { grid-template-columns: minmax(0, 1fr); }
.stappen.eenkoloms::before { display: none; }

/* ============================================================
   Bewijs: grote cijfers + zo opereren we
   ============================================================ */
.bewijs { background: rgba(255, 255, 255, 0.045); border-block: 1px solid var(--rand-zacht); text-align: center; position: relative; overflow: clip; }
.bewijs::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(36rem 16rem at 50% 0%, rgba(78, 137, 189, 0.16), transparent 70%); }
.bewijs .wrap { position: relative; display: grid; justify-items: center; }
.bewijs .intro-p { color: var(--wit-70); margin-top: 0.9rem; max-width: 54ch; }
.cijfers { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 1.2rem 3.5rem; margin-top: 2.2rem; }
.cijfer-blok .cijfer { font-family: var(--mono); font-size: clamp(2.6rem, 4.5vw, 3.6rem); letter-spacing: -0.02em; color: #fff; text-shadow: 0 0 30px var(--gloed-koel); }
.cijfer-blok .cijfer .eenheid { font-size: 0.5em; color: var(--wit-40); }
.cijfer-blok .toel { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wit-40); margin-top: 0.4rem; }
/* De meetlat: geeft het kale getal betekenis door het af te zetten tegen de grens
   die Google zelf "goed" noemt. Zonder die schaal weet een leek niet of 1,4 s veel is.
   Alle tekst staat in HTML, niet in een SVG, zodat de labels op een telefoon niet
   meeschalen naar 5 px. De --x-waarden zijn percentages op een as van 0 tot 4 seconden. */
.meetlat { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); width: min(100%, 34rem); margin-inline: auto; }
.ml-hier { position: relative; height: 3.2rem; }
.ml-hier b, .ml-hier span { position: absolute; left: var(--x); translate: -50% 0; white-space: nowrap; font-family: var(--mono); }
.ml-hier b { top: 0; font-size: 1.55rem; font-weight: 500; color: #fff; text-shadow: 0 0 26px var(--gloed-koel); }
.ml-hier span { top: 2.15rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.ml-balk { position: relative; display: flex; gap: 3px; height: 10px; }
/* De goede zone in steunblauw en de matige in gedempt wit: met twee wittinten was
   het verschil puur "lichter of donkerder" en dus willekeurig, zodat je het bijschrift
   moest lezen om te weten welke kant goed is. Staal is per merkspec de kleur voor
   datavisualisatie. */
.ml-zone-goed { flex: 0 0 62.5%; background: rgba(36, 80, 122, 0.85); border-radius: 5px 0 0 5px; }
.ml-zone-matig { flex: 1; background: rgba(255, 255, 255, 0.09); border-radius: 0 5px 5px 0; }
.ml-grens { position: absolute; left: var(--x); top: -7px; bottom: -7px; width: 1px; background: rgba(255, 255, 255, 0.45); }
.ml-punt { position: absolute; left: var(--x); top: 50%; width: 15px; height: 15px; translate: -50% -50%; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px var(--orange-gloed); }
.ml-as { display: flex; justify-content: space-between; margin-top: 0.85rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--wit-40); }
.meetlat figcaption { margin-top: 0.55rem; font-size: 0.84rem; color: var(--wit-40); }

/* Het bewijsstuk: de echte PageSpeed-schermafdruk. Een wit rapport op een donkere pagina
   leest als een gat in de achtergrond, dus de rand en de slagschaduw laten het als een vel
   papier ÓP de pagina liggen in plaats van erin. De radius blijft klein (10px), want een
   sterk afgeronde schermafdruk gaat er juist nagemaakt uitzien.
   Het bijschrift staat links uitgelijnd terwijl de rest van deze sectie centreert: dit is
   drie zinnen lopende tekst, en gecentreerde lopende tekst geeft bij elke regel een nieuw
   startpunt voor het oog. De maat is op 58ch gehouden zodat hij niet de volle 46rem uitloopt. */
.bewijsstuk { margin-top: clamp(2.2rem, 4vw, 3.2rem); width: min(100%, 46rem); margin-inline: auto; }
.bewijsstuk picture { display: block; }
.bewijsstuk img { display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.bewijsstuk figcaption { margin-top: 1.05rem; text-align: left; max-width: 58ch; }
.bewijsstuk figcaption b { display: block; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.bw-uitleg { display: block; margin-top: 0.45rem; font-size: 0.88rem; line-height: 1.6; color: var(--wit-70); }
.bw-acties { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: 0.85rem;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.03em; }
.bw-acties a { color: var(--wit-92); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }

/* Op mobiel staan deze punten onder elkaar zonder kaart, en dan is de tussenruimte het
   enige wat losse punten scheidt. Bij 1,5rem was die 24 px tegen een regelhoogte van
   23,2 px binnen één punt: nabijheid zei dan "dit hoort bij elkaar" terwijl het vier losse
   punten zijn. 2rem brengt de verhouding op 1,38. Op desktop doet het kolomgat van 3rem
   dat werk al, dus daar mag de rij dichter. */
.trusts { margin-top: clamp(2.2rem, 4vw, 3rem); display: grid; gap: 2rem 3rem; text-align: left; width: 100%; max-width: 58rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .trusts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; } }
/* Zelfde reden als bij .stap: geen link, dus geen kaart. Het oranje vinkje is hier de
   drager; die had de rand niet nodig om als los punt te lezen. */
.trust { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.trust::before { content: ""; margin-top: 0.35em; width: 0.5em; height: 0.85em; border-right: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); rotate: 45deg; filter: drop-shadow(0 0 6px rgba(232, 119, 34, 0.5)); }
.trust strong { display: block; font-size: 0.98rem; color: #fff; }
.trust .sub { display: block; margin-top: 0.2rem; font-size: 0.88rem; color: var(--wit-70); }
.trust .sub a { color: var(--wit-92); text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* ============================================================
   Slot-CTA
   ============================================================ */
.cta-band { text-align: center; position: relative; overflow: clip; }
.cta-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(32rem 15rem at 50% 100%, rgba(232, 119, 34, 0.10), transparent 70%); }
.cta-band .wrap { position: relative; display: grid; justify-items: center; }
.cta-band p { color: var(--wit-70); margin-top: 0.9rem; max-width: 52ch; }
.cta-band .btn { margin-top: 1.8rem; }
.cta-band .cta-note { margin-top: 0.9rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--rand-zacht); padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem; }
.site-footer .wrap { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .site-footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer .f-brand { grid-column: 1 / -1; } }
@media (min-width: 60rem) { .site-footer .wrap { grid-template-columns: 1.5fr 1fr 1fr; } .site-footer .f-brand { grid-column: auto; } }
.site-footer .f-brand p { margin-top: 0.9rem; font-size: 0.92rem; color: var(--wit-70); max-width: 34ch; }
.site-footer nav { display: grid; gap: 0.45rem; align-content: start; font-size: 0.92rem; }
.site-footer nav a { color: var(--wit-70); text-decoration: none; }
.site-footer nav a:hover { color: #fff; }
.f-kop { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wit-40); margin-bottom: 0.5rem; }
.footer-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rand-zacht); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--wit-40); }

/* ============================================================
   .duo: tekst links, formulier of beeld rechts
   ============================================================ */
/* Voorgesteld als .contact-raster en als .duo; één component. .hero-grid is hier niet
   herbruikbaar: die put zijn gap uit --hero-gap, een variabele die op .hero staat en
   buiten de hero leeg is (gap valt dan terug op 0), en de verhouding 1 : 0,62 is
   uitgerekend op de hero-compositie. Geen rand, geen vlak, geen achtergrond: dit is een
   lay-out en geen blok; het scheidingswerk doet .sectie--paneel. */
.duo { display: grid; gap: clamp(2rem, 4vw, 3.2rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
/* ALLE kolomtracks krijgen minmax(0, ...). De Turnstile-iframe is 300 px vast en rekt een
   gewone 1fr-track op tot voorbij de viewport; dat is exact de horizontale scroll op 320 px. */
@media (min-width: 56rem) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); } }
.duo--midden { align-items: center; }

/* ============================================================
   Formulier
   ============================================================ */
/* De klassenaam .form MOET blijven ondanks de Nederlandse namen elders: site.js voegt de
   reveal toe op de selector '.form > label'. Hier is de rand wél toegestaan, want een
   invoerveld is bedienbaar en dan is rand plus vlak affordance in plaats van decoratie. */
/* De expliciete kolom is geen opmaak maar een klem. Zonder grid-template-columns krijgt
   .form één impliciete auto-track, en een auto-track groeit mee met zijn breedste kind:
   de Turnstile-iframe van 300 px vast. Gemeten op 320 px rekte die élk label en veld op
   tot 300 px binnen een wrap van 272 px, dus 4 px horizontale scroll. Dezelfde klem staat
   op .duo; hij hoort op iedere grid-container in de keten, niet alleen op de buitenste. */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
.form label { display: block; font-size: 0.92rem; font-weight: 600; color: #fff; }
.form input, .form textarea, .form select {
  /* Expliciet 1rem: onder 16 px zoomt iOS Safari in zodra een veld focus krijgt, en de
     pagina schaalt daarna niet vanzelf terug. */
  display: block; margin-top: 0.45rem; font-family: inherit; font-size: 1rem; line-height: 1.55;
  width: 100%; min-width: 0; color: var(--wit-92); background: var(--glas);
  border: 1px solid var(--glas-rand); border-radius: var(--radius-rij); padding: 0.8rem 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.form textarea { min-height: 9.5rem; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--wit-40); opacity: 1; }
.form input:hover, .form textarea:hover, .form select:hover { border-color: rgba(255, 255, 255, 0.24); }
.form input:focus, .form textarea:focus, .form select:focus { border-color: rgba(232, 119, 34, 0.55); box-shadow: 0 0 24px rgba(232, 119, 34, 0.12); }
.form .btn { justify-self: start; }
/* .hint staat zowel als <span> binnen een label als als los <p> onder het formulier, dus
   hier geen display forceren: dat zou de inline-variant op een eigen regel duwen. */
.hint { font-size: 0.84rem; font-weight: 400; color: var(--wit-40); }
.hint a { color: var(--wit-70); text-decoration-color: var(--orange); text-underline-offset: 3px; }
/* De Turnstile-iframe is 300 bij 65 px vast. De min-height reserveert die ruimte zodat de
   pagina niet verspringt zodra het script laadt; onder 360 px past hij niet meer binnen de
   padding en wordt hij geschaald vanaf de linkerbovenhoek. */
.cf-turnstile { min-height: 65px; }
/* De schaalfactor is uitgerekend, niet overgenomen. Op 320 px is de wrap 320 - 3rem = 272 px
   breed; de 0,92 die in style.css stond levert 300 x 0,92 = 276 px en dus 4 px scroll. Met
   0,88 wordt het 264 px en blijft er 8 px over. Boven 360 px past de widget ongeschaald
   (312 px beschikbaar), dus daar gebeurt er niets. */
@media (max-width: 22.5rem) { .cf-turnstile { transform: scale(0.88); transform-origin: left top; } }

/* ============================================================
   Vragen en antwoorden
   ============================================================ */
/* Nuance op de kaartregel: een <summary> IS bedienbaar, dus een rand zou hier mógen. Toch
   een hairline-lijst en geen kaart, om twee redenen. Alleen de summary is bedienbaar; het
   opengeklapte antwoord valt binnen dezelfde rand en is dat niet, dus de rand belooft meer
   klikvlak dan er is. En zes omrande blokken vlak onder secties die we net hebben
   ontkaderd duwen het paginabeeld terug naar waar we vandaan komen. De affordance zit in
   het teken rechts en in de cursor; de lijn doet alleen het scheidingswerk. */
.vragen { display: grid; max-width: 62rem; border-top: 1px solid var(--rand-zacht); }
.vraag { border-block-end: 1px solid var(--rand-zacht); }
.vraag summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  cursor: pointer; list-style: none; padding-block: 1.15rem;
  font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: #fff; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: "+"; flex: 0 0 auto; font-family: var(--mono); font-size: 1.15rem; font-weight: 500; line-height: 1; color: var(--orange); }
.vraag[open] summary::after { content: "\2212"; }
.vraag summary:hover { color: var(--wit-92); }
.vraag p, .vraag ul { font-size: 0.95rem; color: var(--wit-70); max-width: 62ch; }
.vraag p + p, .vraag ul { margin-top: 0.8rem; }
.vraag > :last-child { margin-bottom: 1.3rem; }

/* ============================================================
   Lopende leestekst: de juridische en verhalende pagina's
   ============================================================ */
/* Voorgesteld als .lopend, .relaas en .bijsluiter; één component. Er was niets bestaands
   om op te leunen: elke tekstdrager in dit systeem is een korte kop met introzin, er is
   geen p+p-afstand, geen tussenkop en geen lijststijl. Leesmaat 62ch, niet de 74rem wrap. */
.lopend { max-width: 62ch; color: var(--wit-92); }
.lopend > :first-child { margin-top: 0; }
.lopend p + p { margin-top: 1rem; }
/* De systeem-h2 is met clamp(1.9rem, 3.4vw, 2.7rem) op font-weight 250 een sectiekop en
   geen tussenkop; binnen lopende tekst zou hij de sectie-opening beconcurreren. Merkteken
   is een mono-nummer met een korte hairline: géén kaart en géén paneel, want een tussenkop
   is niet klikbaar. De 2,6rem erboven is ruim de 1,3 keer de regelafstand die de
   ontkader-regel eist (hier 1,65 maal 17 px, dus 28 px).
   BEWUST een ander merkteken dan de ronde .i-dot-badge uit de rasters, en dat verschil is
   geen slordigheid: een badge zegt "dit is item N van een set", dit nummer zegt "dit is
   hoofdstuk N van een document". Zet je hier dezelfde badge, dan gaat een privacyverklaring
   eruitzien als een stappenplan. Wie beide ooit gelijk wil trekken, trekt daarmee dus ook
   die twee betekenissen gelijk. */
.lopend h2 { margin-top: 2.6rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: #fff; }
.lopend h2 .nr { display: block; margin-bottom: 0.5rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; color: var(--wit-40); }
.lopend h2 .nr::after { content: ""; display: block; margin-top: 0.5rem; width: 2.5rem; height: 1px; background: rgba(255, 255, 255, 0.25); }
.lopend h2 + p { margin-top: 0.8rem; }
.lopend h3 { margin-top: 1.8rem; font-size: 1.05rem; font-weight: 700; color: #fff; }
.lopend h3 + p { margin-top: 0.5rem; }
/* padding: 0 haalt de browser-inspringing van 40 px weg; die hoort bij een lijst met
   bolletjes van de browser en die staat hier op none, dus hij spronk de lijst alleen maar
   uit de leeskolom. minmax(0, 1fr) klemt de impliciete grid-track: zonder die klem groeit
   een auto-track tot het breedste ONAFBREEKBARE woord van zijn items ("administratiedocumenten"),
   en dat gaf op 320 px 10 px horizontale schuif. De klem hoort op iedere grid-container in de
   keten, niet alleen op de li. Memory: reference_grid_bullet_multichild_overflow. */
.lopend ul { margin-top: 0.9rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; list-style: none; }
/* Marker absoluut, NIET als eigen grid-kolom. Met `grid-template-columns: auto minmax(0,1fr)`
   valt een li die uit meerdere kinderen bestaat ("<strong>Inzage</strong> in de gegevens…")
   verkeerd uiteen: het eerste kind bezet de auto-kolom en die groeit tot het breedste woord,
   wat op 390 en 320 px een constante horizontale overflow geeft. Met padding-left plus een
   absolute marker mag een li voortaan willekeurige inhoud dragen.
   Memory: reference_grid_bullet_multichild_overflow. */
.lopend li { position: relative; padding-left: 1.25rem; color: var(--wit-70); }
/* Bewust een neutraal bolletje en NIET het oranje vinkje van .trust: dat vinkje betekent
   "dit is geregeld", en op een privacyverklaring is dat een claim vermomd als opmaak. */
.lopend li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--wit-40); }
/* Genummerde stappen. Bestond nog niet: de kennisbank droeg tot nu toe alleen ongeordende
   lijsten, dus een <ol> zou de browserstandaard houden EN het bolletje van .lopend li erbij
   krijgen. Dat leest als een nummer met een stip ernaast, op een dubbele inspringing.
   Zelfde grid-klem als bij ul (zie de toelichting daar), en het cijfer in het mono-font zodat
   een stap dezelfde vormtaal draagt als de .nr-nummers boven de koppen. Alleen van toepassing
   binnen .lopend, en er bestond nergens een <ol>, dus deze regel kan niets bestaands raken. */
.lopend ol { margin-top: 0.9rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem; list-style: none; counter-reset: stap; }
.lopend ol li { padding-left: 1.9rem; counter-increment: stap; }
.lopend ol li::before { content: counter(stap) "."; top: 0.1em; width: auto; height: auto;
  border-radius: 0; background: none; font-family: var(--mono); font-size: 0.78rem;
  font-weight: 500; color: var(--wit-40); }
/* Een alinea NA een lijst had geen marge, dus die plakte tegen het laatste lijstitem. Bleef
   onzichtbaar zolang op elke lijst een h2 volgde, want die brengt zijn eigen marge mee. Zodra
   er lopende tekst achter een lijst komt, raken de twee elkaar. Stond ook al fout op de
   privacyverklaring. Zelfde ritme als p + p, zodat de tekst één maat houdt. */
.lopend ul + p, .lopend ol + p { margin-top: 1rem; }
.lopend a { color: var(--wit-92); text-decoration-color: var(--orange); text-underline-offset: 3px; }
.lopend a:hover { color: #fff; }
/* Inline code in kennisbank-artikelen (bestandsnamen, mapnamen). Bewust géén rand: dat is in dit
   systeem een klik-belofte. Alleen het monospace-font plus een subtiel vlak, zodat een bestandsnaam
   herkenbaar is als iets wat je letterlijk overneemt. word-break houdt een lang pad binnen de kolom. */
.lopend code { font-family: var(--mono); font-size: 0.88em; padding: 0.12em 0.38em; border-radius: 5px;
  background: var(--glas); color: #fff; word-break: break-word; }

/* .specs: het register binnen lopende tekst (veld naar waarde).
   Een privacyverklaring is voor een groot deel een register: identiteitsgegevens, en per
   verwerking het doel, de gegevens, de grondslag en de bewaartermijn. In de brontekst staat
   dat in tabellen van drie en vier kolommen, en die zijn op 320 px onleesbaar: elke kolom
   wordt daar smaller dan een woord en de tabel gaat horizontaal scrollen. Een <dl> draagt
   dezelfde informatie, gestapeld op smal en tweekoloms zodra er ruimte is.
   Geen rand rondom en geen vlak: een register is niet klikbaar. De hairline tussen de rijen
   doet enkel scheidingswerk, hetzelfde patroon als .vraag. */
.lopend .specs { margin-top: 1.1rem; }
.lopend .specs > div { padding-block: 0.75rem; border-block-start: 1px solid var(--rand-zacht); }
.lopend .specs > div:last-child { border-block-end: 1px solid var(--rand-zacht); }
.lopend .specs dt { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.09em; color: var(--wit-40); }
.lopend .specs dd { margin-top: 0.3rem; color: var(--wit-70); }
@media (min-width: 40rem) {
  /* minmax(0, ...) op beide tracks: zonder die klem rekt een lange ononderbroken waarde
     (een btw-identificatienummer, een webadres) de kolom op in plaats van af te breken. */
  /* 11.5rem is uitgerekend op het langste label dat hier voorkomt
     ("Btw-identificatienummer"); op 10,5rem brak dat als enige rij over twee regels. */
  .lopend .specs > div { display: grid; grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); gap: 0.2rem 1.4rem; align-items: baseline; }
  .lopend .specs dd { margin-top: 0; }
}

/* ============================================================
   .av: de algemene voorwaarden. Genummerde leden, nummer in de HTML.
   ============================================================ */
/* BEWUST NIET .lopend ol, en dat verschil is geen dubbeling maar een correctie.
   .lopend ol zet list-style op none en tekent het nummer met content: counter(stap),
   dus een <ol start="4"> toont daar gewoon "1.". Artikel 6 heeft een tussenkop tussen
   lid 3 en lid 4 staan en zou de counter daar resetten: lid 4 werd "1", lid 5 werd "2",
   en elke verwijzing naar artikel 6.4 wees naar de verkeerde tekst op een pagina die er
   verder perfect uitziet.
   In een contract is het lidnummer bovendien INHOUD en geen opmaak. "Artikel 6.4" is een
   naam waarnaar de tekst negentig keer verwijst; een nummer dat alleen in CSS bestaat
   verdwijnt bij kopieren-plakken en een screenreader leest het niet mee. Daarom staat het
   in de HTML en tekent deze component het alleen op.
   De pagina wordt gegenereerd door legal/bouw_av_pagina.py; die toetst de nummering apart. */
/* De CONTAINER is breder dan de leesmaat, en dat onderscheid is bewust. Het inhoudspaneel
   is een register en geen lopende tekst: op 68ch klemde het tot 848 px op een viewport van
   1440, waardoor vier van de zes rechteritems over twee regels braken terwijl links alles
   op een regel paste. Dat las als twee losse lijstjes in plaats van een register. De
   lopende tekst houdt wel een leesmaat, en krap: op 68ch kwam die op circa 84 tekens per
   regel uit, boven de norm van 45 tot 75. */
.lopend.av { max-width: 78ch; }
.lopend.av > p, .av-leden { max-width: 64ch; }
.av-inhoud { max-width: none; }
/* Juridisch Nederlands zit vol lange samenstellingen, en de kolom is hier smaller dan
   elders omdat het lidnummer links meehangt. Gemeten op 320 px: "cyberaansprakelijkheids-
   verzekering," (35 tekens) uit artikel 9.2 rekte de kolom van 210 naar 294 px op en gaf
   44 px horizontale schuif over de hele pagina. hyphens breekt netjes af met een streepje
   waar de taalregels dat toestaan; overflow-wrap is het vangnet voor het woord waar dat
   niet lukt. Let op bij het zoeken naar zo'n schuif: een scan op getBoundingClientRect
   wees hier .lamp aan, en die steekt op elke hero-pagina even ver uit zonder iets te
   veroorzaken. Alleen scrollWidth > clientWidth wijst de echte veroorzaker aan. */
.lopend.av { overflow-wrap: break-word; hyphens: auto; }
/* Bewust NIET op wit-40 zoals de andere mono-bijschriften: dit is de regel waarop iemand
   terugkomt om te controleren WELKE versie gold toen hij tekende, en dat is juridisch het
   belangrijkste gegeven op de pagina. Hij stond eerst het dimst van alles. */
.av-versie { font-family: var(--mono); font-size: 0.82rem; color: var(--wit-70); }

/* Inhoudsopgave. Zestien artikelen op 44 kB tekst: zonder ingang is dit niet te gebruiken.
   Geen eigen nummering, want de linktekst draagt "Artikel N" al; het bolletje van
   .lopend li en de counter van .lopend ol moeten hier dus allebei uit. */
.av-inhoud { margin-top: 1.6rem; padding: 1.1rem 1.3rem; border: 1px solid var(--rand-zacht);
  border-radius: var(--radius-paneel); background: var(--glas); }
.av-inhoud ol { margin-top: 0.6rem; padding: 0; display: block; list-style: none;
  counter-reset: none; }
.av-inhoud ol li { padding-left: 0; counter-increment: none; margin-top: 0.32rem; }
.av-inhoud ol li::before { content: none; }
/* Deze links MOETEN er als links uitzien, en dat deden ze niet: met text-decoration none
   droegen ze dezelfde kleur, grootte en gewicht als bodytekst, dus niets zei dat je erop
   kon springen. Op een document van 44 kB is dat de enige interactie die telt. Het
   artikelnummer staat in mono zodat de nummers een scanbare kolom vormen. */
.av-inhoud a { color: var(--wit-70); text-decoration: underline;
  text-decoration-color: rgba(232, 119, 34, 0.4); text-underline-offset: 3px; }
.av-inhoud a:hover { color: #fff; text-decoration-color: var(--orange); }
.av-inhoud .a-nr { font-family: var(--mono); font-size: 0.78rem; color: var(--wit-40); }
.av-inhoud a:hover .a-nr { color: var(--orange); }
/* Twee kolommen via `columns` en NIET via grid: een grid vult rijgewijs, dus links kwam
   artikel 1 te staan en rechts artikel 2, met 3 en 4 op de regel eronder. Een
   inhoudsopgave van een contract lees je van boven naar beneden, dus de kolommen moeten
   1 tot en met 8 en 9 tot en met 16 dragen. `columns` doet dat en rekent zelf uit hoeveel
   rijen dat zijn, zodat een zeventiende artikel geen hardgecodeerd rijaantal breekt. */
@media (min-width: 40rem) {
  .av-inhoud ol { columns: 2; column-gap: 1.8rem; }
  .av-inhoud ol li { break-inside: avoid; }
}

/* Hangend nummer via padding-left plus een absolute marker, NIET als eigen grid-kolom.
   Een auto-grid-kolom groeit tot het breedste onafbreekbare woord van zijn items en gaf
   op 320 px horizontale schuif; dat is dezelfde val die .lopend li al ontweek.
   Memory: reference_grid_bullet_multichild_overflow. */
.av-leden { margin-top: 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.av-lid, .av-sublid { position: relative; padding-left: 3.4rem; scroll-margin-top: 6rem; }
.av-sublid { padding-left: 5.4rem; }
.av-lid > .av-nr, .av-sublid > .av-nr { position: absolute; left: 0; top: 0.15em;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500; color: var(--wit-40); }
.av-sublid > .av-nr { left: 3.4rem; }
.av-tekst > p { margin: 0; color: var(--wit-70); }
.av-tekst > p + p { margin-top: 0.6rem; }

/* Landt een kruisverwijzing, dan moet zichtbaar zijn WAAR je landde: op een document van
   deze lengte is een sprong zonder markering niet van scrollen te onderscheiden. De
   markering blijft staan zolang het anker actief is, want dat is precies de tijd dat je
   hem nodig hebt. */
.av-lid:target, .av-sublid:target { background: var(--glas); border-radius: var(--radius-rij);
  box-shadow: inset 3px 0 0 var(--orange); padding-block: 0.5rem; }
.av-lid:target { padding-left: 3.4rem; }
/* De ARTIKELkop hoort er ook bij, en dat was hij eerst niet. Gemeten op de live pagina:
   32 van de 90 interne links wijzen naar #artikel-N en niet naar een lid, dus ruim een
   derde van de sprongen landde zonder enige bevestiging dat er iets gebeurd was. Een
   statische screenshot laat dat nooit zien; het kwam pas boven door na te doen wat een
   lezer doet, namelijk op een kruisverwijzing klikken. Eigen vorm omdat een h2 hier geen
   hangend nummer heeft: de markering staat links van de kop in plaats van eromheen. */
.lopend.av h2:target { box-shadow: inset 3px 0 0 var(--orange); padding-left: 0.9rem;
  border-radius: var(--radius-rij); }
.lopend.av h2:target .nr { color: var(--orange); }

@media (max-width: 30rem) {
  .av-lid { padding-left: 2.9rem; }
  .av-sublid { padding-left: 4.4rem; }
  .av-sublid > .av-nr { left: 2.9rem; }
}
/* Onder 384 px gaat het nummer BOVEN de tekst in plaats van ernaast. Gemeten op 320 px:
   hangend kostte het nummer 46 van de 257 px leesbreedte, dus 18 procent, en dan blijven
   er circa 25 tekens per regel over waar 45 tot 75 de leesbare maat is. Op een lopende
   juridische tekst van 44 kB is dat het verschil tussen doorlezen en afhaken.
   De grens ligt bewust op 24rem en niet hoger: op 390 px (de gangbare telefoonmaat) is er
   ruimte zat en leest de hangende vorm beter, omdat het nummer dan naast de tekst staat
   in plaats van er een regel bij te kosten. */
@media (max-width: 24rem) {
  .av-lid, .av-sublid { padding-left: 0; }
  .av-sublid { padding-left: 1.1rem; }
  .av-lid > .av-nr, .av-sublid > .av-nr { position: static; left: auto; display: block;
    margin-bottom: 0.2rem; }
  .av-lid:target, .av-sublid:target { padding-left: 0.8rem; }
  .av-sublid:target { padding-left: 1.1rem; }
}

/* ============================================================
   Scroll-choreografie (JS voegt .reveal toe; zonder JS is alles
   gewoon zichtbaar). Reveal via `translate`, hover via `transform`:
   losse properties, dus hover-lifts blijven werken.
   ============================================================ */
/* De reveal-transition somt óók de hover-properties op: deze regel staat later
   in de cascade dan .instrument/.si-opt en zou hun hover-transitions anders
   volledig vervangen. De stagger-delay geldt per property, alleen voor de reveal. */
.reveal { opacity: 0; translate: 0 26px;
  transition: opacity 0.8s ease var(--rd, 0s), translate 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0s),
    border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.reveal.in { opacity: 1; translate: 0 0; }
.tray > :nth-child(2), .stappen > :nth-child(2), .trusts > :nth-child(2) { --rd: 0.08s; }
.tray > :nth-child(3), .stappen > :nth-child(3), .trusts > :nth-child(3) { --rd: 0.16s; }
/* Tot en met drie liep de trap al; vanaf .stappen--raster dragen deze rasters vier tot zes
   items, en zonder deze delays komt de tweede rij als één blok tegelijk binnen. */
.tray > :nth-child(4), .stappen > :nth-child(4), .trusts > :nth-child(4) { --rd: 0.24s; }
.tray > :nth-child(5), .stappen > :nth-child(5) { --rd: 0.32s; }
.tray > :nth-child(6), .stappen > :nth-child(6) { --rd: 0.4s; }
.cijfers > :nth-child(2) { --rd: 0.12s; }

/* -- Smalle schermen -- */
/* Onder de tweekolomsgrens staat de doorsnede ná de klachtkeuze: een beeld van bijna
   500 px hoog tussen de kop en de interactie zou de hele intake onder de vouw duwen.
   `display: contents` laat de kinderen van .hero-kolom meedoen in de grid, zodat
   `order` werkt over die grens heen. */
@media (max-width: 62rem) {
  .hero-kolom { display: contents; }
  .hero-tekst { order: 1; }
  .intake { order: 2; }
  .figuur, .anatomie { order: 3; margin-top: clamp(1.6rem, 4vw, 2.4rem); width: min(84%, 21rem); }
}

/* Hero compacter zodat de eerste klachten boven de vouw komen */
@media (max-width: 40rem) {
  .hero { padding-block: 1.8rem 2.2rem; }
  .eyebrow { margin-bottom: 1rem; }
  .lead { font-size: 1.02rem; margin-top: 1.1rem; }
  .intake { margin-top: 1.9rem; }
  .si-opt { padding-block: 0.85rem; }
  .t-voet { margin-top: 0.95rem; }
}

@media (max-width: 30rem) {
  /* De eyebrow moet op één regel passen: bij 0,2em spatiëring breekt hij anders af
     op een wees-woord, en dat leest als een fout in plaats van als een keuze. */
  .hero .eyebrow { font-size: 0.66rem; letter-spacing: 0.16em; }
  /* Op 320 px past de volledige intake nooit boven de vouw: kop plus introzin plus zes
     blokken is simpelweg meer dan 568 px. Kop en tekst hier compacter, zodat er in
     plaats van één klacht drie zichtbaar zijn en duidelijk is dat er meer volgt. */
  h1 { font-size: 1.8rem; }
  .lead { font-size: 0.97rem; margin-top: 0.9rem; }
  .si-opt { padding: 0.75rem 0.9rem; font-size: 0.94rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; translate: 0 0; }
}

/* ── Diagram: gedeelde diagramcomponent voor de kennisbank ────────────────────
   Stond eerst pagina-lokaal op kritieke-fout-wordpress, net als de .monitor op
   /wordpress-sneller-maken/. Zodra een TWEEDE artikel hem gebruikt is een pagina-lokale
   kopie een tijdbom: twee definities die stil uit elkaar lopen. Daarom hier, eenmalig.
   Heette eerst .beslispad; hernoemd toen het derde diagram een TIJDLIJN bleek te zijn en
   de naam dus niet meer klopte met wat de component doet.
   Volgt bewust dezelfde grammatica als de bestaande datavisuals: haarlijnen, ronde
   lijneinden, oranje ALLEEN als accenttick. */
.diagram { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); }
.diagram-head { display: flex; align-items: center; gap: 0.6rem; font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wit-40); }
.diagram-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }
.diagram-head .spread { margin-left: auto; white-space: nowrap; }
.diagram svg { width: 100%; height: auto; margin-top: 1rem; }
.diagram .route { stroke: rgba(255, 255, 255, 0.34); }
/* De route mét herstelmail is de korte weg: iets helderder, zodat het oog daar eerst landt. */
.diagram .route-kort { stroke: rgba(255, 255, 255, 0.5); }
.diagram .knoop { fill: rgba(255, 255, 255, 0.5); }
.diagram .splitsing { stroke: rgba(255, 255, 255, 0.28); }
/* Een periode i.p.v. een moment (tijdlijn-variant). Bewust een WITTE tint en geen oranje
   wolk: oranje blijft klein en vol, alleen als tick en CTA. Een groot halfdoorzichtig
   accentvlak is precies wat het merk niet doet. */
.diagram .venster { fill: rgba(255, 255, 255, 0.05); }
.diagram .label { font-family: var(--mono); letter-spacing: 2.2px; fill: var(--wit-40); }
/* Twee labelsets. Tekst in een SVG schaalt mee met de viewport, dus op smal moet het corps in
   SVG-eenheden omhoog om leesbaar te blijven (10 a 13 echte px). Bij 26 eenheden beslaat
   "MET HERSTELMAIL" echter 41% van de 560 brede viewBox en loopt het label dwars door de
   routelijnen heen. Vandaar korte woorden op smal in plaats van kleinere letters: leesbaarheid
   en een schoon diagram gaan hier niet samen in één set. */
.diagram .kort { display: none; }
.diagram figcaption { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--wit-40); padding-top: 0.9rem; }
/* Tekst in een geschaalde SVG krimpt mee met de viewport, dus op smal moet het lettercorps
   in SVG-eenheden juist omhoog om leesbaar te blijven. Zelfde ingreep als bij .ecg-label. */
@media (max-width: 40rem) {
  .diagram .lang { display: none; }
  .diagram .kort { display: block; letter-spacing: 1px; }
  .diagram-head .spread { display: none; }
}