/* De opmaak van de website bovenop de template Launch UI (vendor/launchui.css, gebouwd met tools/sitecss.sh), met de kleuren en de letter van
   root DESIGN.md; wat de site daarnaast nodig heeft staat in naslag/design.md. Het artikel gebruikt ze ook, met de kop en voet van de voorpagina.
   Hangt af van: vendor/launchui.css, dat op de voorpagina vóór dit bestand laadt, en de letter Inter in vendor/.
   Geeft naar buiten: de klassen die index.html en artikel/ gebruiken. */
@font-face {
  font-family: 'Inter';
  src: url('vendor/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* DESIGN.md §1 en §4: dezelfde namen en waarden als in de apps */
  --bg: #07090d;
  --bg-soft: #0a0d13;
  --surface: #131519;
  --surface-2: #171a20;
  --surface-3: rgba(255,255,255,.04);
  --text-2-soft: rgba(148,162,179,.15);
  --text: #e7edf4;
  --text-2: #94a2b3;
  --text-3: #778597;
  --gold: #b38e5d;
  --line: rgba(255,255,255,.05);
  --line-2: rgba(255,255,255,.07);
  --edge-hover: rgba(255,255,255,.18);
  --focus: var(--text-2);
  --r: 8px;
  --r-sm: 4px;
  --sh-rust: 0 24px 50px -32px rgba(0,0,0,.9);
  --sh-zweef: 0 16px 48px rgba(0,0,0,.55);
  --z-kopbalk: 255;
  --z-popup: 350;
  /* het paginaraam (§8a): kopbalk 57 hoog, 36 opzij; de kolom en de knophoogte van de site staan in naslag/design.md */
  --kopbalk: 57px;
  --opzij: 36px;
  --breed: 1200px;
  --knop: 22px;   /* een knop zoals in de apps (Dashboard §14.1) */
  --veld: 30px;   /* een invulveld, zoals een regel met een invulveld in de app */
}

@layer base {   /* in een laag, zodat de klassen van Launch UI op de voorpagina voorgaan */
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; scroll-padding-top: var(--kopbalk); }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 16px/24px 'Inter', -apple-system, sans-serif;
    font-feature-settings: 'tnum';
    -webkit-font-smoothing: antialiased;
  }
  img, video { display: block; max-width: 100%; height: auto; }
  h1, h2, h3, p, figure, blockquote { margin: 0; }
  h1, h2, h3 { font-weight: 600; text-wrap: balance; }
  h1 { font-size: 48px; line-height: 56px; letter-spacing: -.02em; }
  h2 { font-size: 20px; line-height: 28px; }
  h3 { font-size: 16px; line-height: 24px; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* Klikbare tekst (D59, D60): wat ergens anders heen brengt is een link, --text-2, zonder vlak en nooit onderstreept */
  a, .link { color: var(--text-2); text-decoration: none; }
}





.vanaf { color: var(--text-3); font-size: 12px; line-height: 16px; }
.acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }

/* Het venster: een browserbalk en de rondleiding door het dashboard */
.venster { min-width: 0; }
.adres { padding: 2px 48px; border-radius: var(--r-sm); background: var(--bg-soft); color: var(--text-3); font-size: 10px; line-height: 14px; }


/* Wat het kost */
.pakketten { margin-top: 48px; }
.prijskeus { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.prijsrij { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; }   /* de groep en Per maand of Per jaar op één rij */
.groep-uitleg p { margin: 0; max-width: 560px; color: var(--text-2); font-size: 15px; line-height: 22px; text-align: center; text-wrap: balance; }   /* wat bij die groep over de prijs te weten valt, onder de keuze */
@media (max-width: 420px) { .groep-uitleg p { font-size: 14px; } }   /* zo past de regel ook op een telefoon op één regel */
.onder-kaarten { display: flex; flex-direction: column; align-items: center; }   /* knop en regel eronder op één as */
.voor { min-height: 48px; margin-top: 4px; }   /* twee regels, zodat de prijzen van de drie pakketten op één lijn staan */
.prijs { color: var(--text-2); font-size: 14px; line-height: 20px; }   /* de prijs van Launch UI: een groot getal, het euroteken kleiner en grijs */
.prijs b { display: block; margin-bottom: 4px; color: var(--text); font-size: 60px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.munt { margin-right: 4px; color: var(--text-2); font-size: 24px; vertical-align: .9em; }
.prijs small { display: block; margin-top: 4px; color: var(--text-3); font-size: 12px; line-height: 16px; }
.prijs b .btw-achter { display: inline-block; vertical-align: bottom; margin: 0 0 4px 10px; font-size: 13px; line-height: 17px; font-weight: 400; letter-spacing: 0; }   /* btw en periode klein achter het bedrag, in twee regels */
#pakketten.per-jaar .prijs .maand, #pakketten:not(.per-jaar) .prijs .jaar { display: none; }   /* Per maand of per jaar (2278): één prijs tegelijk */

.verder-lezen { margin-top: 12px; }



.cookies {   /* weigeren en toestaan wegen even zwaar: twee gelijke knoppen */
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  display: flex;
  flex-direction: column;   /* knoppen onder de tekst, linksonder (D61) */
  gap: 12px;
  padding: 16px;
  border-radius: var(--r);
  background: var(--surface-2);
  box-shadow: var(--sh-zweef);
  color: var(--text-2);
  font-size: 14px;
  line-height: 20px;
  z-index: var(--z-popup);
}
.cookies p { margin: 0; }
.cookies-keus { display: flex; gap: 6px; }   /* linksonder, zoals D61 */
.cookies button {
  height: var(--knop);
  padding: 0 12px;
  border: 0;
  border-radius: var(--r);
  background: var(--surface-3);
  color: var(--text-2);
  font: 500 11px/normal 'Inter', -apple-system, sans-serif;
  cursor: pointer;
  transition: color .12s;
}
.cookies button:hover { color: var(--text); }


/* Launch UI in jouw kleuren: zijn donkere stand met de waarden van DESIGN §1, het goud van het logo als gloed */
.dark {
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--bg-soft);
  --card-foreground: var(--text);
  --popover: var(--surface-2);
  --popover-foreground: var(--text);
  --primary: var(--text);
  --primary-foreground: var(--bg);
  --secondary: var(--surface-2);
  --secondary-foreground: var(--text);
  --muted: var(--surface-2);
  --muted-foreground: var(--text-2);
  --accent: var(--surface-2);
  --accent-foreground: var(--text);
  --border: var(--text);
  --input: var(--surface-2);
  --ring: var(--text-2);
  --brand: var(--gold);
  --brand-foreground: var(--gold);
}
.site { --knop: 36px; --veld: 40px; }   /* de knop van Launch UI (h-9) en de velden (h-10), naslag/design.md */
.site .cookies button { padding: 0 16px; font-size: 14px; }
.site .vanaf { font-size: 14px; line-height: 20px; }
.merkbeeld { height: 20px; width: auto; }
.logo-hoog { height: 44px; width: auto; }   /* onderaan het hoge logo, bovenaan het lange */
@media (max-width: 639px) { .merkbeeld { height: 12px; } }   /* het woordmerk past dan naast de knop Kennismaken */
.citaat { color: var(--gold); }
.site .app { border-radius: 0; }
/* De opening van Launch UI: de gloed achter de kop en de schermen van de app schuin in de hoek */
.held-gloed { left: 20%; top: 5%; width: 85%; height: 720px; opacity: .9; }
.held-gloed-kern { left: 40%; top: 28%; width: 45%; height: 360px; opacity: 1; }
.kaart { background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--sh-rust); }   /* de kaart van de app (DESIGN D104), voor reviews en pakketten */
.stem-rond { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--bg); border-radius: 50%; background: var(--surface-2); }
.stem-groot { width: 40px; height: 40px; flex: none; }
.stem-rond:empty { display: none; }
.stem-rond.foto { overflow: hidden; }
.stem-rond img { width: 100%; height: 100%; object-fit: cover; }
.oprichter { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }   /* de foto bij het verhaal van de oprichter, rond zoals de portretten bij de reviews */
/* Het demovenster uit de opening: de foto en zin van de oprichter, vijf tegels met de zin van elke groep, de laatste over de hele breedte, compact (naslag/design.md, De demo) */
#demovenster { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--text); padding: 24px; box-shadow: var(--sh-zweef); }
#demovenster::backdrop { background: rgba(0,0,0,.6); }
#demovenster .demokop { display: flex; gap: 16px; align-items: center; margin: 0 36px 18px 0; }
#demovenster .demokop img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
#demovenster h3 { margin: 0 0 4px; font-size: 19px; font-weight: 600; line-height: 1.3; }
#demovenster .demokop p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
#demovenster .tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#demovenster .tegel { display: block; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); color: inherit; text-decoration: none; transition: border-color .15s; }
#demovenster .tegel:last-child:nth-child(odd) { grid-column: 1 / -1; }
#demovenster .tegel:hover, #demovenster .tegel:focus-visible { border-color: var(--edge-hover); }
#demovenster .tegel b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600; }
#demovenster .tegel span { display: block; color: var(--text-2); font-size: 13px; line-height: 1.45; }
#demovenster .sluit { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: none; color: var(--text-2); font-size: 22px; cursor: pointer; }
@media (max-width: 479px) { #demovenster { padding: 20px 16px; } #demovenster .tegels { grid-template-columns: 1fr; } #demovenster .demokop { align-items: flex-start; } }
/* De schermen gestapeld zoals de opening van Launch UI: drie lagen plat gekanteld en scheef, die bij aanwijzen rechter gaan staan en uitwaaieren */
.held { -webkit-mask-image: linear-gradient(#000 calc(100% - 160px), transparent); mask-image: linear-gradient(#000 calc(100% - 160px), transparent); }
.stapel { --w: calc(min(1280px, 100vw - 32px) - 192px); position: relative; max-width: 1280px; height: calc(var(--w) * .52); margin: 48px auto 0; padding: 0 96px; }   /* --w: de breedte van een scherm; de opening stopt waar de schermen de breedte vullen, op een hoekje linksonder na dat in de vervaging valt (gemeten op 1280 en 1440) */
.laag { position: relative; z-index: 10; height: 24px; rotate: -24deg; transform: skewY(12deg); transition: all .7s ease-in-out .2s; }
.laag:last-child { height: auto; }
.laag-1 { translate: -30%; } .laag-2 { translate: -4%; } .laag-3 { translate: 28%; }   /* opzij met translate en niet met left, want left laat bij aanwijzen de pagina verspringen (CLS 0,078 op 1440, gemeten 27-10); de laag is even breed als de stapel, dus het beeld blijft gelijk; de achterste loopt links buiten beeld, zodat onderaan de hele breedte vol is; van de middelste blijft het menu in beeld */
.stapel:hover .laag { rotate: -12deg; transform: skewY(6deg); }
.stapel:hover .laag-1 { translate: -38%; } .stapel:hover .laag-3 { translate: 44%; }
.vel { margin: 0; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--text) 10%, var(--bg)); box-shadow: -12px 16px 48px rgba(0, 0, 0, .53); }   /* zonder opbouw bij het laden: de schermen staan er meteen gestapeld (naslag/design.md) */
.vel > div { overflow: hidden; border-radius: 8px; background: var(--bg); }
.vel img { display: block; width: 100%; height: auto; }
@media (max-width: 639px) {
  .stapel { --w: 600px; width: var(--w); max-width: none; padding: 0; margin: 64px 0 0 -220px; }   /* op de telefoon breder dan het scherm, zodat ze ook daar onderaan de breedte vullen, en naar links, zodat het voorste scherm in beeld staat; 64 px boven, want bij 32 viel de schuine hoek over Wat klanten zeggen (gemeten 26-10 van 360 tot 639 breed) */
}

/* Een uitlegartikel: één leeskolom, het schermbeeld ernaast */
.artikel { padding-top: 48px; padding-bottom: 96px; }
.artikel-kop { max-width: 40em; }
.artikel h1 { max-width: 14em; }
.artikel-intro { margin-top: 16px; color: var(--muted-foreground); font-size: 18px; line-height: 28px; }
.artikel-bron { margin-top: 12px; color: var(--text-3); font-size: 14px; line-height: 20px; }
.artikel section { display: flow-root; margin-top: 48px; }
.artikel section p { max-width: 36em; margin-top: 12px; color: var(--muted-foreground); }
.artikel .uitsnede img { border-radius: var(--r); box-shadow: var(--sh-rust); }
.artikel .naast { float: right; width: 300px; margin: 0 0 24px 48px; }
.artikel .breed { width: 100%; max-width: 660px; margin: 24px 0 0; }   /* een liggend scherm: op 300px zijn de getallen niet meer te lezen, dus onder de tabel in plaats van ernaast */
.artikel figcaption { margin-top: 8px; color: var(--text-3); font-size: 12px; line-height: 16px; }
.reken-vak { max-width: 36em; margin-top: 24px; padding: 8px 24px; }
.reken { width: 100%; border-collapse: collapse; }
.reken td { padding: 8px 0; color: var(--text); }
.reken tr + tr td { border-top: 1px solid var(--line); }   /* D82: licht tussen gewone regels, sterk boven een totaal */
.reken tr.som td { border-top-color: var(--line-2); font-weight: 600; }
.reken tr.kop td { font-weight: 600; color: var(--text-2); }   /* een tabel met drie kolommen heeft een kopregel nodig, anders leest hij als een gewone regel (deel 6, 27-10) */
.reken td + td { text-align: right; white-space: nowrap; }
.voorbeeld .reken-vak { width: calc(100% - 348px); }

/* De foutpagina: de voet staat onderaan het scherm, de melding in het midden ertussen */
.fout-pagina { display: flex; flex-direction: column; min-height: 100svh; }
.fout-pagina main { flex: 1; display: flex; align-items: center; justify-content: center; }

@media (max-width: 860px) {
  :root { --opzij: 16px; }
  .stemmen { grid-template-columns: 1fr; }
  .voor { min-height: 0; }
  .pakketten { gap: 36px; }
  .cookies { flex-direction: column; align-items: stretch; }
  .cookies-keus button { flex: 1; }
  .artikel .voorbeeld { display: flex; flex-direction: column; }
  .voorbeeld .reken-vak { width: auto; }
  .artikel .naast { order: 1; float: none; width: 100%; max-width: 340px; margin: 36px auto 0; }
}

@media (pointer: coarse) {
  .knop, .cookies button, .keus-tekst button, .contact { position: relative; }
  .knop::after, .cookies button::after, .keus-tekst button::after, .contact::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; translate: 0 -50%; }   /* 44 px om aan te tikken (D39), de knop zelf blijft slank */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Simpel, zonder glans (naslag/design.md Niet): één vlakke knop per blok, de rest een tekstlink of een icoon */
.knop { display: inline-flex; align-items: center; justify-content: center; height: var(--knop); padding: 0 16px; border-radius: var(--r); background: var(--text-2-soft); color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap; }
.knop:hover { opacity: .88; }
.tekstlink { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.tekstlink:hover { color: var(--text); }
/* Op de pagina Uitleg is dit de enige weg naar een stuk, dus daar moet hij als link te zien zijn: de kop klikt mee en de regel eronder is onderstreept. */
.artikel h2 a { color: inherit; text-decoration: none; }
.artikel h2 a:hover { text-decoration: underline; text-underline-offset: 6px; }
.tekstlink.lees { text-decoration: underline; text-underline-offset: 4px; }
.contact { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.contact:hover { color: var(--text); }
.contact svg { width: 18px; height: 18px; }
.volgen { display: flex; gap: 16px; margin: 0; }
/* De logo's van Instagram en LinkedIn ongewijzigd in wit, want LinkedIn staat alleen blauw, zwart en wit toe en geen van beide een andere vorm,
   op 29px, de kleinste maat van Meta (naslag/design.md, Volgen). WhatsApp ernaast in hetzelfde wit en even groot getekend:
   Phosphor tekent op driekwart van zijn vak, dus een vak van 38px dat met een negatieve marge 29px plaats inneemt. */
.volgen .contact, .volgen .contact:hover { color: #fff; }
.volgen img { width: auto; height: 29px; }
.volgen svg { width: 38px; height: 38px; margin: -4.5px; }
/* Adres, KvK en btw-id klein achter het copyright, zonder kop; ze breken alleen tussen de stukken (naslag/design.md, Vast). */
.voetregel span { white-space: nowrap; }
.voetregel .praktijk { white-space: normal; }
@media (max-width: 639px) { .voetregel { text-align: center; } }
.contactrij { display: inline-flex; gap: 20px; }
.vragen-eerst { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 20px; margin: 0; color: var(--text-2); }
/* Een keuze uit een paar opties is een schuifje (DESIGN D90): één balk in de
   donkere pil, de gekozen in --text met het vlakje in de aan-kleur eronder; groep.js schuift het vlakje */
.keus-tekst { position: relative; display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--surface-2); }
.keus-tekst button { position: relative; z-index: 1; height: calc(var(--knop) - 4px); padding: 0 16px; border: 0; border-radius: var(--r); background: none; cursor: pointer; color: var(--text-2); font: 500 14px/normal 'Inter', -apple-system, sans-serif; white-space: nowrap; transition: color .12s; }
@media (max-width: 479px) { .keus-tekst button { padding: 0 9px; font-size: 13px; } }   /* drie groepen naast elkaar op 390 breed */
.keus-tekst button[aria-pressed="true"] { color: var(--text); }
@media (hover: hover) { .keus-tekst button:hover { color: var(--text); } .keus-tekst:has(button:hover) button:not(:hover) { color: var(--text-2); } }   /* onder de muis staat alleen de aangewezen knop wit; een vinger zweeft niet (D90) */
.keus-tekst .vlakje { position: absolute; top: 2px; bottom: 2px; left: 0; border-radius: var(--r); background: var(--text-2-soft); pointer-events: none; }
.prijs .bespaar { margin-top: 6px; color: var(--gold); font-size: 14px; line-height: 20px; }   /* de besparing valt op, zonder vlak (naslag/design.md) */
.faq { display: grid; gap: 28px; }
.vraag-open h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; color: var(--text); }
.vraag-open p { margin: 0; color: var(--text-2); }
.vraag-open a, .cookies a { color: var(--text); }   /* een link in lopende tekst is wit, zodat je ziet dat hij klikt */
.schuif { aspect-ratio: 1440 / 844; overflow: hidden; }   /* het voorste scherm: groep.js schuift de hoge foto erdoorheen */
.schuif img { display: block; width: 100%; height: auto; will-change: transform; }
/* Stel je dashboard samen: eerst alleen de vraag hoe je je geld verdient, daarna links de onderdelen per onderwerp en rechts het kale dashboard */
#dashboard[data-stap="vraag"] .stap-bouw, #dashboard[data-stap="bouw"] .stap-vraag { display: none; }
.samenstel-vraag { display: flex; width: fit-content; margin: 0 auto; }   /* hetzelfde schuifje als erna, nog zonder keus: een klik zet het vlakje en het dashboard eronder (naslag/design.md) */
.samenstel-bouw { display: grid; grid-template-columns: 300px 1fr; gap: 32px 48px; align-items: start; animation: erin .35s ease both; }
.samenstel-bouw .keus-tekst { grid-column: 1 / -1; justify-self: center; }
.demo-rij { grid-column: 1 / -1; justify-self: center; }   /* de knop naar de demo van de gekozen groep, onder het voorbeeld */
.samenstel-keuzes { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.erbij { display: flex; flex-direction: column; gap: 16px; }
.erbij-groep p { margin: 0 0 8px; font-size: 13px; color: var(--text-3); }
.erbij-knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.erbij-knoppen button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.erbij-knoppen svg, .voorbeeld-menu svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .5; }   /* het pictogram uit de app (../naslag/pictogrammen.md) */
.erbij-knoppen button[aria-pressed="true"] svg { opacity: .9; }
.voorbeeld-menu svg { opacity: .8; }
.erbij-knoppen button:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, transparent); }
.erbij-knoppen button[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); border-color: color-mix(in srgb, var(--text) 50%, transparent); }   /* aan valt op zonder de volle witte rand (naslag/design.md) */
.vakken { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; row-gap: 2px; }   /* de rijen van de app: twee vakken naast elkaar, een tabel over de hele breedte; elk beeld draagt zelf de ruimte tot zijn buur */
.vak { margin: 0; }
.vak img { display: block; width: 100%; height: auto; }
.vak[data-vak$="tabel"] { column-span: all; }   /* een tabel over de volle breedte, anders is zijn tekst op een laptop 4 pixels (naslag/design.md) */
.vak.nieuw, .voorbeeld-menu .nieuw { animation: erin .35s ease both; }
@keyframes erin { from { opacity: 0; transform: translateY(8px); } }
.voorbeeld { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }   /* het menu van de app naast de aangevinkte vakken */
.samenstel .voorbeeld { grid-template-columns: 180px 1fr; gap: 20px; height: 640px; align-items: stretch; }   /* een vast scherm: wat erbij komt schuift in beeld, de pagina groeit niet mee */
.voorbeeld-menu { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); font-size: 14px; overflow: hidden; }
.voorbeeld-menu p { margin: 10px 10px 4px; font-size: 12px; color: var(--text-3); }
.voorbeeld-menu span, .voorbeeld-menu button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: var(--r); background: none; color: var(--text); font: inherit; text-align: left; white-space: nowrap; }
.voorbeeld-menu button { cursor: pointer; transition: background-color .15s; }
.voorbeeld-menu button:hover { background: var(--surface-3); }
.voorbeeld-menu span { color: var(--text-3); }   /* Contact opent niets op de site */
.voorbeeld-menu .hier { background: var(--surface-3); }
.raam { position: relative; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent); mask-image: linear-gradient(to bottom, #000 85%, transparent); }
.paginabeeld { margin: 0; }
.paginabeeld img { display: block; width: 100%; height: auto; border-radius: 12px; }   /* een pagina als echte opname, de bovenkant; het raam loopt onderaan uit */
.paginabeeld.nieuw { animation: erin .35s ease both; }
.samenstel .voorbeeld-menu { -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent); mask-image: linear-gradient(to bottom, #000 85%, transparent); }   /* een lang menu loopt zacht uit, net als het scherm */
@media (max-width: 860px) {
  .samenstel-bouw { grid-template-columns: 1fr; gap: 20px; }
  .samenstel-keuzes { display: contents; }   /* op een telefoon staat het scherm tussen de vraag en de onderdelen */
  .samenstel-bouw .keus-tekst { order: 0; }
  .samenstel .voorbeeld { order: 1; position: sticky; top: 64px; z-index: 2; height: 400px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; padding-bottom: 10px; background: var(--bg); }
  .erbij { order: 2; }
  .demo-rij { order: 3; }
  .voorbeeld-menu { flex-flow: row nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px; }
  .voorbeeld-menu p { display: none; }
  .samenstel .voorbeeld-menu { -webkit-mask-image: none; mask-image: none; }
  .vak { width: 100% !important; }   /* op een telefoon staan de vakken onder elkaar, zoals in de app */
}
@media (pointer: coarse) { .erbij-knoppen { gap: 8px; } .erbij-knoppen button { height: 36px; } }   /* 44 px van rij tot rij om aan te tikken (D39) */
@media (prefers-reduced-motion: reduce) { .vak.nieuw, .voorbeeld-menu .nieuw, .paginabeeld.nieuw, .samenstel-bouw { animation: none; } }
.belastingvlak img { display: block; max-width: 100%; height: auto; margin: 0 auto; }   /* het vlak van Belasting kaal op de pagina, op ware grootte */
/* De uitleg naast Belasting: het aangewezen deel blijft helder, de rest wijkt; het masker schuift mee van deel naar deel */
@property --van { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --tot { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --rest { syntax: '<number>'; inherits: false; initial-value: 1; }
.belastingvlak img { mask-image: linear-gradient(to bottom, rgb(0 0 0 / var(--rest)) var(--van), #000 var(--van), #000 var(--tot), rgb(0 0 0 / var(--rest)) var(--tot)); transition: --van .25s ease, --tot .25s ease, --rest .25s ease; }
.belastingvlak img.deel { --rest: .25; }
.uitleg { margin: 8px -16px 0; }
.uitleg-knoppen { display: grid; gap: 2px; }
.uitleg-zin { display: none; }
.uitleg button { display: grid; gap: 2px; padding: 12px 16px; border: 0; border-radius: var(--r); background: none; color: var(--text-2); font: inherit; font-size: 15px; line-height: 22px; text-align: left; cursor: pointer; transition: background .2s; }
.uitleg b { color: var(--text); font-size: 16px; font-weight: 500; }
.uitleg button.aan { background: var(--text-2-soft); }
.belasting-tekst { position: sticky; top: 120px; }   /* de tekst blijft naast het lange vlak staan */
@media (min-width: 1024px) {   /* naast de tekst is het vlak een venster zo hoog als die tekst, waarin het beeld schuift: het vlak is tot ruim twee keer zo hoog als de tekst, dus anders licht een deel op dat ver onder het scherm ligt */
  .belasting-rooster { align-items: stretch; }
  .belastingvlak { position: relative; overflow: hidden; }
  .belastingvlak img { position: absolute; top: 0; left: 0; right: 0; transition: translate .45s ease, --van .25s ease, --tot .25s ease, --rest .25s ease; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .belastingvlak img { transition: --van .25s ease, --tot .25s ease, --rest .25s ease; } }
@media (max-width: 1023px) {   /* op een telefoon staat het vlak onder de tekst: de vier delen plakken als één schuifje bovenaan, zodat je ziet wat oplicht terwijl je langs het vlak scrolt */
  .belasting-rooster { display: flex; flex-direction: column; align-items: stretch; row-gap: 16px; }   /* een kolom, geen rooster: in een rooster plakt de rij alleen binnen zijn eigen vakje */
  .belasting-tekst { display: contents; }   /* de rij hoort dan bij het hele blok, dus hij blijft staan tot het vlak voorbij is */
  .belasting-rooster .keus-tekst { align-self: flex-start; }
  .belastingvlak { margin-top: 32px; }
  .uitleg { position: sticky; top: 64px; z-index: 2; min-width: 0; margin: 0 -16px; padding: 8px 16px; background: var(--bg); }   /* min-width 0: de rij blijft binnen het scherm, niet de pagina breder */
  .uitleg-knoppen { display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 2px; border-radius: var(--r); background: var(--surface-2); }   /* meer delen dan op één rij passen, zoals de zes van de eenmanszaak, lopen door op een tweede rij in plaats van uit beeld */
  .uitleg button { height: calc(var(--knop) - 4px); padding: 0 7px; align-content: center; white-space: nowrap; }   /* vier namen naast elkaar op 390 breed */
  .uitleg button span { display: none; }
  .uitleg b { color: inherit; font-size: 13px; }
  .uitleg button.aan { color: var(--text); }
  .uitleg-zin { display: block; margin: 8px 0 0; color: var(--text-2); font-size: 15px; line-height: 22px; }
  .uitleg-zin:empty { display: none; }
}
@media (max-width: 379px) { .uitleg b { font-size: 12px; } .uitleg button { padding: 0 5px; } }   /* ook op 360 breed passen de vier namen naast elkaar */
@media (min-width: 640px) and (max-width: 1023px) { .belasting-rooster { row-gap: 24px; } .belastingvlak { margin-top: 24px; } }

/* Een juridische pagina (privacyverklaring, voorwaarden): dezelfde leeskolom als het artikel, met opsommingen en
   het kader met wie de praktijk is (2109) */
.artikel section ul { max-width: 36em; margin-top: 12px; padding-left: 20px; list-style: disc; color: var(--muted-foreground); }
.artikel section li + li { margin-top: 12px; }
.artikel .kader { max-width: 36em; margin-top: 16px; padding: 16px 24px; border: 1px solid var(--line); border-radius: var(--r); }
.artikel .kader p { margin-top: 0; color: var(--text); }
.artikel code { font-family: ui-monospace, monospace; font-size: 14px; color: var(--text-2); }