/* ===== De site van InvoiceStack, ontwerp B (live sinds november 2026) =====
   Bron: ontwerp/site/concept2/_ontwerp-b/stijl.css, letterlijk overgenomen zonder de regel met Google Fonts: de letters
   (Lora en Hanken Grotesk) staan zelf meegeleverd in /statisch/fonts/fonts.css, dat de sjablonen eerst laden.
   Sjablonen: invoicestack/sjablonen/site_b/.
   Eén verschil met het concept: elke pagina heeft één nette kopvolgorde (h1, dan h2, dan h3) voor zoekmachines en
   schermlezers. Een kopje in een nagebouwd venster van de app is daarom geen kop maar een alinea met de klasse .h3,
   .h4 of .h5 (zelfde opmaak), en een kop die op een eigen pagina een niveau omhoog ging houdt met .h3 zijn maat. */
:root{
  /* kleuren */
  --grond:#FBF8F1;            /* papier: warm crème, hele pagina */
  --grond-zacht:#F3EEE1;      /* zacht papier: panelen en banden */
  --kaart:#FFFFFF;            /* kaart en schermpjes */
  --inkt:#16211F;             /* inkt: koppen, knoppen, donkere sectie */
  --tekst:#1F2A28;            /* lopende tekst */
  --gedempt:rgba(22,33,31,.70);/* gedempte tekst (inkt met doorzicht) */
  --licht:#F7F2E7;            /* tekst op inkt */
  --licht-gedempt:rgba(247,242,231,.74);
  --lijn:rgba(22,33,31,.12);  /* dunne lijnen */
  --accent:#7FD4CF;           /* mint uit het beeldmerk: vinkjes, kleine accenten */
  --accent-donker:#1E6F69;    /* mint-donker: tekstlinks en kleine tekstaccenten op crème */
  --vlak-zee:#D9EBE7;         /* beeldvlak 1: zeegroen nevel */
  --vlak-zee-diep:#BCD9D2;    /* vorm in beeldvlak 1 */
  --vlak-zand:#EBDFC7;        /* beeldvlak 2: zand */
  --vlak-zand-diep:#DCCBA8;   /* vorm in beeldvlak 2 */
  --vlak-leisteen:#22312F;    /* beeldvlak 3: leisteen (donker) */
  --vlak-leisteen-diep:#2E4440;
  --klaar:#2F7D4C; --klaar-vlak:#E7F3EA;
  --letop:#9A6212; --letop-vlak:#FBF0DC;
  --stop:#B83A2B;  --stop-vlak:#FBE8E5;
  /* letters */
  /* koppen: Lora. Wisselen: "Literata" (gewicht 400) of "Newsreader" (gewicht 500); pas dan ook de Google Fonts-link aan. */
  --kop:"Lora", Georgia, "Times New Roman", serif;
  /* tekst en knoppen: Hanken Grotesk. Wisselen: "Schibsted Grotesk" of "Inter". */
  --tekstletter:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --h1:72px; --h2:48px; --h3:30px; --h4:22px; --lead:20px; --body:17px; --klein:14px;
  /* maten */
  --breed:1240px; --tekstkolom:640px;
  --hoek-vlak:34px; --hoek-kaart:18px; --hoek-scherm:14px; --hoek-knop:999px;
  --sectie:120px; --gutter:24px;
  --schaduw-scherm:0 30px 70px -40px rgba(22,33,31,.45), 0 6px 18px rgba(22,33,31,.10);
  --binnenrand:inset 0 0 0 1px rgba(22,33,31,.10);
}
*{box-sizing:border-box}
/* vangnet: bij een klassieke (niet-zwevende) schuifbalk is 100vw een paar pixels breder dan het venster, en zou een vlak tot de rand net zijwaarts schuiven */
html{overflow-x:clip}
body{margin:0;background:var(--grond)}
.site{background:var(--grond);color:var(--tekst);font-family:var(--tekstletter);font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100%}
a{color:var(--accent-donker);text-decoration:none}a:hover{color:var(--inkt)}
h1,h2,h3,h4,.h3,.h4{font-family:var(--kop);font-weight:400;color:var(--inkt);margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--h1);line-height:1.1;letter-spacing:-.04em}
h2{font-size:var(--h2);line-height:1.1}
h3,.h3{font-size:var(--h3);line-height:1.2}
h4,.h4{font-size:var(--h4);line-height:1.3;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
b{font-weight:600;color:var(--inkt)}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 var(--gutter)}
.smal{max-width:var(--tekstkolom)}
.midden{margin-left:auto;margin-right:auto;text-align:center}
.lead{font-size:var(--lead);line-height:1.5;color:var(--gedempt)}
.gedempt{color:var(--gedempt)}
.klein{font-size:var(--klein)}
.label{display:block;font-size:15px;color:var(--gedempt);margin-bottom:18px}
.sectie{padding:var(--sectie) 0}
.sectie-kop{display:flex;flex-direction:column;gap:20px;margin-bottom:64px}
.mono{font-variant-numeric:tabular-nums}
.stapel{display:flex;flex-direction:column;gap:16px}
/* bovenkant: het eerste scherm, gecentreerd en rustig; op 1440×900 past alles tot en met de bovenrand van het beeldvlak eronder */
.bovenkant{padding:64px 0 56px}
/* twee kolommen: links de tekst, rechts de foto */
.bovenkant .wrap{display:grid;grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);gap:56px;align-items:center}
.bovenkant-tekst{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.bovenkant-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:65% 60%;border-radius:var(--hoek-vlak)}
.bovenkant .label{margin:0 0 22px}
/* de kop is de grote zin van de pagina, de uitleg eronder bewust kleiner */
.bovenkant h1{font-size:clamp(36px, 5vw, 72px);font-style:italic;line-height:1.04;margin:0 0 28px}
/* aanhalingstekens als opmaak, zodat de tekst van de kop zelf schoon blijft */
.bovenkant h1::before{content:"“"}
.bovenkant h1::after{content:"”"}
.bovenkant .lead{font-size:var(--body);max-width:560px;margin:0 0 32px;text-wrap:pretty}
.bovenkant .knoppen{justify-content:flex-start;margin:0 0 22px}
.bovenkant .knop{min-height:52px;padding:0 28px;font-size:16px}
/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--hoek-knop);font-size:15px;font-weight:500;line-height:1;white-space:nowrap;border:1px solid transparent;cursor:pointer;font-family:var(--tekstletter)}
.knop-inkt{background:var(--inkt);color:var(--licht)}.knop-inkt:hover{background:#2A3836;color:var(--licht)}
.knop-licht{background:transparent;color:var(--inkt);border-color:rgba(22,33,31,.22)}.knop-licht:hover{background:rgba(22,33,31,.06);color:var(--inkt)}
.knop-wit{background:var(--kaart);color:var(--inkt)}.knop-wit:hover{background:var(--grond-zacht);color:var(--inkt)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tekstlink{color:var(--inkt);font-weight:500;border-bottom:1px solid rgba(22,33,31,.3)}
.tekstlink:hover{border-color:var(--inkt)}
.pijl::after{content:" \2192"}
/* kop */
.nav{position:sticky;top:0;z-index:10;background:var(--grond)} /* blijft bovenaan staan tijdens het scrollen */
/* menubalk (Mees, 3 november 2026): logo links, de links precies in het midden, rechts alleen de zwarte knop.
   Inloggen staat klein en gedempt naast de knop (Mees, 3 november 2026); de links staan in het midden tussen logo en knoppen. */
.nav .wrap{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:40px;min-height:84px;padding-top:12px;padding-bottom:12px}
.nav .merk{justify-self:start}
.merk{display:inline-flex;align-items:center;gap:10px;color:var(--inkt);font-weight:600;font-size:19px;letter-spacing:-.01em}
.merk svg{width:30px;height:30px;color:var(--inkt);flex:none}
.merk .woord span{font-weight:400}
.nav-links{display:flex;gap:40px;justify-content:center}
.nav-links a{color:var(--gedempt);font-size:16px;white-space:nowrap}.nav-links a:hover{color:var(--inkt)}
.nav-rechts{display:flex;align-items:center;gap:18px;justify-self:end}
.nav-rechts .inloggen{color:var(--gedempt);font-size:14px;white-space:nowrap}.nav-rechts .inloggen:hover{color:var(--inkt)}
.menu-knop{display:none} /* menuknop: alleen op telefoon, zie onderaan */
/* pillenmenu: rond huisje + witte balk met pillen; bij aanwijzen vult een inktcirkel de pil van onder */
.pillnav{display:flex;align-items:center;gap:8px}
.pillnav .pillnav-huis{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;border-radius:50%;background:var(--inkt);color:var(--licht);transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.pillnav .pillnav-huis:hover{transform:rotate(360deg);color:var(--licht)}
.pillnav-huis svg{width:20px;height:20px}
.pillnav-items{display:flex;gap:4px;list-style:none;margin:0;padding:4px;height:46px;background:var(--kaart);border-radius:var(--hoek-knop);box-shadow:var(--binnenrand)}
.pillnav-items li{position:relative;display:flex}
.pillnav .pil{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;padding:0 18px;border-radius:var(--hoek-knop);background:var(--grond-zacht);color:var(--inkt);font-size:15px;font-weight:500;white-space:nowrap}
.pillnav .pil:hover{color:var(--inkt)}
.pil-cirkel{position:absolute;z-index:-1;left:50%;top:100%;width:180%;aspect-ratio:1;border-radius:50%;background:var(--inkt);transform:translate(-50%,-50%) scale(0);transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.pil-tekst{position:relative;display:block;height:1.25em;line-height:1.25;overflow:hidden}
.pil-label{display:block;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.pil-label-hover{position:absolute;left:0;top:100%;color:var(--licht)}
.pil:hover .pil-cirkel,.pil:focus-visible .pil-cirkel{transform:translate(-50%,-50%) scale(1)}
.pil:hover .pil-label,.pil:focus-visible .pil-label{transform:translateY(-100%)}
/* de proef: zwarte pil met lichte tekst; bij aanwijzen vult een mintcirkel hem en wordt de tekst inkt */
.pillnav .pil-uitgelicht,.pillnav .pil-uitgelicht:hover{background:var(--inkt);color:var(--licht)}
.pil-uitgelicht .pil-cirkel{background:var(--accent)}
.pil-uitgelicht .pil-label-hover{color:var(--inkt)}
.pillnav-items li.is-actief::after{content:"";position:absolute;left:50%;bottom:-12px;width:6px;height:6px;border-radius:50%;background:var(--inkt);transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){.pillnav-huis,.pil-cirkel,.pil-label{transition:none}}
/* beeldvlakken */
.vlak{position:relative;overflow:hidden;border-radius:var(--hoek-vlak);background:var(--vlak-zee);padding:56px;isolation:isolate}
.vlak.zand{background:var(--vlak-zand)}
.vlak.leisteen{background:var(--vlak-leisteen)}
.vlak .vorm{position:absolute;border-radius:50%;background:var(--vlak-zee-diep);z-index:-1}
.vlak.zand .vorm{background:var(--vlak-zand-diep)}
.vlak.leisteen .vorm{background:var(--vlak-leisteen-diep)}
.vlak .horizon{position:absolute;left:0;right:0;height:1px;background:rgba(22,33,31,.10);z-index:-1}
.vlak.leisteen .horizon{background:rgba(247,242,231,.12)}
/* podium: het scherm van de app in het midden van het vlak, gelijke ruimte rondom */
.vlak.podium{padding:64px;display:flex;align-items:center;justify-content:center}
/* bewegende achtergrond (Vanta): krijgt de klasse beweegt zodra het effect echt draait; de stille vorm en horizon gaan dan weg */
.vlak.beweegt .vorm,.vlak.beweegt .horizon{display:none}
.vlak .vanta-canvas{border-radius:inherit;pointer-events:none}
/* Probeer het zelf: de knop rechtsonder in het beeldvlak, en het klikbare venster van de app (app-demo/) in plaats van het plaatje */
.vlak.podium .podium-knop{position:absolute;right:20px;bottom:16px;z-index:2;box-shadow:var(--schaduw-scherm)}
/* het venster is 680 hoog; de app staat erin op 1280 breed (zoals de schermafbeeldingen) en wordt met het script geschaald tot de breedte van het scherm */
.scherm .demo-venster{position:relative;height:680px;overflow:hidden;background:var(--kaart)}
.scherm .demo-kader{display:block;position:absolute;left:0;top:0;width:1280px;height:680px;border:0;transform-origin:0 0;background:var(--kaart)}
/* het vlak loopt door tot de rand van het scherm, ook als het in een kolom van een raster staat: de marge is de ruimte naast de wrap plus de gutter, en hangt dus niet af van de breedte van de ouder (zoals .opbrengst-vlak) */
.rand-rechts{border-radius:var(--hoek-vlak) 0 0 var(--hoek-vlak);margin-right:calc(-1 * (max(100vw - var(--breed), 0px) / 2 + var(--gutter)))}
.rand-links{border-radius:0 var(--hoek-vlak) var(--hoek-vlak) 0;margin-left:calc(-1 * (max(100vw - var(--breed), 0px) / 2 + var(--gutter)))}
/* schermpje */
.scherm{background:var(--kaart);border-radius:var(--hoek-scherm);box-shadow:var(--schaduw-scherm);overflow:hidden;color:var(--tekst);font-size:15px;line-height:1.45;width:100%;max-width:560px}
.scherm-kop{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--lijn);font-size:13px;color:var(--gedempt)}
.scherm-kop .stippen{display:flex;gap:6px}.scherm-kop .stippen i{width:10px;height:10px;border-radius:50%;background:rgba(22,33,31,.14);display:block}
/* de drie vensterknopjes in rood, geel en groen, zoals op een Mac (kleuren van de eigenaar, 3 november 2026) */
.scherm-kop .stippen i:nth-child(1){background:#DF5550}.scherm-kop .stippen i:nth-child(2){background:#EEBA4F}.scherm-kop .stippen i:nth-child(3){background:#62BC6E}
.scherm-kop .titel{color:var(--inkt);font-weight:600}
.scherm-kop .sub{margin-left:auto}
.scherm-inhoud{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.rij{display:flex;gap:16px;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--lijn)}
.rij:last-child{border-bottom:0}
.rij .k{color:var(--gedempt);font-size:13px;flex:0 0 112px}
.rij .w{color:var(--inkt);flex:1;text-align:left}
/* statuslabels */
.status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.4}
.status.k{background:var(--klaar-vlak);color:var(--klaar)}
.status.o{background:var(--letop-vlak);color:var(--letop)}
.status.r{background:var(--stop-vlak);color:var(--stop)}
/* kaarten */
.kaart{background:var(--kaart);border-radius:var(--hoek-kaart);box-shadow:var(--binnenrand);padding:32px}
.kaart-zacht{background:var(--grond-zacht);border-radius:var(--hoek-kaart);padding:32px}
.raster-2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--gutter)}
.raster-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gutter)}
.raster-4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--gutter)}
/* vinkjeslijst */
.vinkjes li{display:flex;gap:12px;align-items:flex-start;padding:6px 0}
.vinkjes li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 10.5l2.6 2.6L14.4 7' fill='none' stroke='%2316211F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;margin-top:3px}
.puntjes li{display:flex;gap:12px;align-items:flex-start;padding:6px 0}
.puntjes li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--inkt);margin-top:10px}
/* vertrouwensregel: drie kaarten, elk met een lijnicoon in een zacht vakje, een kopje en een zin */
.feit-kaarten{list-style:none;margin:0;padding:0}
.feit-kaarten li{background:var(--kaart);border-radius:var(--hoek-kaart);box-shadow:var(--binnenrand);padding:28px;display:flex;flex-direction:column;gap:12px}
.feit-ikoon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--grond-zacht)}
.feit-kaarten h2{font-size:var(--h4);line-height:1.25;margin:4px 0 0}
.feit-kaarten p{margin:0;color:var(--gedempt);font-size:15px;line-height:1.5}
.feit-kaarten p b{color:var(--gedempt);font-weight:600}
/* ontwerp B: bovenkant gecentreerd met een zachte zandgloed onderaan */
.bovenkant-b{padding:96px 0 48px;background:radial-gradient(55% 42% at 50% 58%, var(--vlak-zand) 0%, rgba(235,223,199,0) 100%)}
.bovenkant-b .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.bovenkant-b h1{font-size:clamp(40px, 6vw, 88px);line-height:1.04;letter-spacing:-.035em;max-width:1200px;margin:0 0 32px}
.bovenkant-b .lead{font-size:var(--lead);max-width:760px;margin:0 0 40px;text-wrap:pretty}
.bovenkant-b .knoppen{justify-content:center;margin:0 0 36px}
.bovenkant-b .knop{min-height:56px;padding:0 30px;font-size:17px}
.bovenkant-b .knop-inkt{box-shadow:0 12px 26px -14px rgba(22,33,31,.7)}
.regeltje{font-size:15px;color:var(--gedempt);margin:0}
.knop-vink{width:18px;height:18px;flex:none;color:var(--accent)}
.bovenkant-b-tekst{display:flex;flex-direction:column;align-items:center}
/* met-foto (gekozen 2 november 2026): tekst links, foto rechts zoals ontwerp A; zonder het woord met-foto blijft de foto verborgen */
.bovenkant-b-foto{display:none}
.bovenkant-b.met-foto{padding-top:72px;background:radial-gradient(40% 45% at 28% 58%, var(--vlak-zand) 0%, rgba(235,223,199,0) 100%)} /* gloed achter de tekst links */
.bovenkant-b.met-foto .wrap{display:grid;grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);gap:56px;align-items:center;text-align:left}
.bovenkant-b.met-foto .bovenkant-b-tekst{align-items:flex-start}
.bovenkant-b.met-foto h1{font-size:clamp(36px, 5vw, 72px)}
.bovenkant-b.met-foto .lead{font-size:var(--body);max-width:560px}
.bovenkant-b.met-foto .knoppen{justify-content:flex-start}
.bovenkant-b.met-foto .bovenkant-b-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:65% 60%;border-radius:var(--hoek-vlak)}
/* tabbladen boven het beeld van de app: pil met de gekozen tab in mint-donker */
.tabs{display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 28px;padding:6px;border-radius:var(--hoek-knop);background:var(--grond-zacht);box-shadow:var(--binnenrand)}
.tab{font:inherit;font-size:18px;color:var(--gedempt);background:none;border:0;cursor:pointer;padding:12px 26px;border-radius:var(--hoek-knop);transition:background .2s,color .2s}
.tab:hover{color:var(--inkt)}
.tab[aria-selected="true"]{background:var(--accent-donker);color:var(--kaart)}
.tab-beeld{display:block;width:100%;height:auto}
.tab-beeld[hidden]{display:none}
/* audittrail-paneel: zoals het scherm in de app, een grijs vlak met tijd links en wat er gebeurde rechts */
.audit-paneel{padding:36px 40px 44px}
.audit-paneel[hidden]{display:none}
.audit-paneel .h4{font-family:var(--tekstletter);font-size:17px;font-weight:500;color:var(--gedempt);letter-spacing:0;margin:0 0 16px}
.audit-lijst{list-style:none;margin:0;padding:10px 28px;max-width:640px;background:var(--grond-zacht);border-radius:var(--hoek-scherm)}
.audit-lijst li{display:grid;grid-template-columns:150px minmax(0, 1fr);gap:20px;padding:12px 0;font-size:16px;line-height:1.5;color:var(--tekst)}
.audit-lijst time{font-family:ui-monospace, "SF Mono", Menlo, monospace;font-size:15px;color:var(--gedempt)}
/* details */
details{border-top:1px solid var(--lijn);margin-top:18px;padding-top:12px}
details summary{cursor:pointer;color:var(--inkt);font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:15px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--kop);font-size:24px;line-height:1;color:var(--gedempt)}
details[open] summary::after{content:"\2212"}
details .meer{padding-top:12px;display:flex;flex-direction:column;gap:10px;color:var(--gedempt)}
/* featureblok */
.blok{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:64px;align-items:center;padding:56px 0}
.blok .tekst{display:flex;flex-direction:column;gap:18px;max-width:520px}
.blok.beeld-links .tekst{order:2;justify-self:end}
.blok.beeld-links .vlak{order:1}
.blok .vlak{min-height:520px;display:flex;align-items:center;justify-content:center}
/* donkere sectie */
.donker{background:var(--inkt);color:var(--licht-gedempt)}
.donker h1,.donker h2,.donker h3,.donker h4,.donker b{color:var(--licht)}
.donker .label{color:var(--licht-gedempt)}
.donker .lead,.donker .gedempt{color:var(--licht-gedempt)}
.donker details{border-color:rgba(247,242,231,.16)}
.donker details summary{color:var(--licht)}
.donker details summary::after{color:var(--licht-gedempt)}
.donker details .meer{color:var(--licht-gedempt)}
.donker a{color:var(--accent)}.donker a:hover{color:var(--licht)}
.donker .tekstlink{color:var(--licht);border-color:rgba(247,242,231,.4)}
.donker .ikoon{color:var(--accent)}
.ikoon{width:24px;height:24px;flex:none;color:var(--inkt)}
/* formulieren */
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-size:14px;color:var(--inkt);font-weight:500}
.veld input,.veld select,.veld textarea{font:inherit;font-size:16px;color:var(--inkt);background:var(--kaart);border:1px solid rgba(22,33,31,.2);border-radius:12px;padding:12px 14px;min-height:46px;width:100%}
.veld textarea{min-height:110px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--accent-donker);outline-offset:1px}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* voet */
footer{border-top:1px solid var(--lijn);padding:72px 0 56px;background:var(--grond)}
footer .wrap{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:48px}
footer .regels{display:flex;flex-direction:column;gap:12px;color:var(--gedempt);font-size:14px;max-width:560px}
footer .links{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px 24px;align-content:start}
footer .links a{color:var(--inkt);font-size:15px}
/* smalle laptop: de pillen wat krapper */
@media (max-width:1240px){
  .nav .wrap{gap:16px}
  .pillnav .pil{padding:0 13px}
}
/* menubalk vanaf 1060px en smaller: logo en een menuknop, het pillenmenu klapt eronder uit */
/* smallere laptop: alles blijft in de balk, alleen dichter op elkaar (Mees, 3 november 2026: het menu hoort in de balk) */
@media (max-width:1140px){
  .nav .wrap{gap:20px}
  .nav-links{gap:28px}
  .nav-links a{font-size:15px}
  .nav-rechts .knop{padding:0 16px}
}
/* tablet en kleine laptop: nog steeds alles in de balk, kleiner en dichter op elkaar (Mees, 3 november 2026: het menu
   hoort in de balk, het menuknopje alleen op een telefoon) */
@media (max-width:960px){
  .nav .wrap{gap:14px}
  .nav-links{gap:16px}
  .nav-links a{font-size:14px}
  .nav-rechts{gap:12px}
  .nav-rechts .inloggen{font-size:13px}
  .nav-rechts .knop{padding:0 14px;font-size:14px;min-height:42px}
  .merk{font-size:17px;gap:8px}
  .merk svg{width:26px;height:26px}
}
@media (max-width:840px){
  .nav-links{gap:12px}
  .nav-links a{font-size:13px}
  .nav-rechts .knop{padding:0 12px;font-size:13px}
  .nav-rechts .knop .knop-vink{display:none}
}
@media (max-width:790px){
  /* menubalk: logo en een menuknop; open klapt het menu met alle links en beide knoppen onder de balk uit */
  .nav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;min-height:68px}
  details.menu-knop{display:block;margin:0 0 0 auto;padding:0;border:0} /* geen lijn en plusje van de uitklapvragen */
  .menu-knop summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--hoek-knop);border:1px solid rgba(22,33,31,.22);color:var(--inkt)}
  .menu-knop summary::-webkit-details-marker{display:none}
  .menu-knop summary::after,.menu-knop[open] summary::after{content:none}
  .menu-knop svg{width:20px;height:20px;display:block}
  .menu-knop .kruis,.menu-knop[open] .lijnen{display:none}
  .menu-knop[open] .kruis{display:block}
  .nav-links,.nav-rechts{display:none}
  .nav:has(.menu-knop[open]) .nav-links,.nav:has(.menu-knop[open]) .nav-rechts{display:flex;flex-direction:column;align-items:stretch;width:100%}
  .nav-links{order:3;gap:0;margin-top:12px;padding-top:8px;border-top:1px solid var(--lijn)}
  .nav-links a{padding:12px 0;font-size:17px;color:var(--inkt)}
  .nav-rechts{order:4;gap:10px;padding:8px 0 12px}
  .nav-rechts .inloggen{display:block;padding:12px 0;font-size:17px;color:var(--inkt)}
  .nav-rechts .knop{width:100%;min-height:50px}
  /* pillenmenu in het uitklapmenu: pillen onder elkaar, het huisje niet (het logo gaat al naar de voorpagina) */
  .pillnav .pillnav-huis{display:none}
  .pillnav-items{flex-direction:column;height:auto;width:100%;padding:0;background:none;box-shadow:none;gap:6px}
  .pillnav .pil{width:100%;padding:14px 18px;font-size:17px}
  .pillnav-items li.is-actief::after{left:auto;right:18px;bottom:50%;transform:translateY(50%)}
}
/* telefoon */
@media (max-width:900px){
  :root{--h1:42px;--h2:36px;--h3:26px;--lead:18px;--sectie:72px;--hoek-vlak:24px}
  /* bovenkant op telefoon: knoppen onder elkaar, volle breedte */
  .bovenkant{padding:36px 0 40px}
  .bovenkant .label{margin-bottom:16px}
  .bovenkant h1{margin-bottom:20px}
  .bovenkant .lead{margin-bottom:24px}
  .bovenkant .knoppen{flex-direction:column;align-items:stretch;width:100%;max-width:360px;gap:10px;margin-bottom:18px}
  .raster-2,.raster-3,.raster-4,.blok,footer .wrap{grid-template-columns:repeat(1, minmax(0, 1fr))}
  .blok{gap:32px;padding:32px 0}
  .blok.beeld-links .tekst{order:1;justify-self:start}
  .blok.beeld-links .vlak{order:2}
  .blok .vlak{min-height:0}
  .vlak,.vlak.podium{padding:24px}
  .rand-rechts,.rand-links{margin-left:0;margin-right:0;border-radius:var(--hoek-vlak)}
  .sectie-kop{margin-bottom:40px}
}
/* pas op een smal scherm komt de foto onder de tekst */
@media (max-width:700px){
  .bovenkant .wrap{grid-template-columns:minmax(0, 1fr);gap:32px}
  .bovenkant-foto{aspect-ratio:4/3}
}
/* ontwerp B op telefoon */
@media (max-width:900px){
  .bovenkant-b{padding:48px 0 32px}
  .bovenkant-b .knoppen{flex-direction:column;align-items:stretch;width:100%;max-width:360px;gap:10px}
  .tab{font-size:15px;padding:10px 16px}
}
/* op telefoon blijven de schermafbeeldingen: de app zelf is daar te breed voor */
@media (max-width:700px){
  .vlak.podium .podium-knop{display:none}
}
/* met-foto op een smal scherm: de foto onder de tekst */
@media (max-width:700px){
  .bovenkant-b.met-foto .wrap{grid-template-columns:minmax(0, 1fr);gap:32px}
  .bovenkant-b.met-foto .bovenkant-b-foto{aspect-ratio:4/3}
}
/* audittrail-paneel op telefoon: tijd boven de tekst */
@media (max-width:700px){
  .audit-paneel{padding:20px}
  .audit-lijst{padding:6px 16px}
  .audit-lijst li{grid-template-columns:minmax(0, 1fr);gap:2px}
}
/* Tweeluik: een beeldvlak tot de rand van het scherm met één venster van de app erop, en ernaast de tekst.
   Gedeeld door "Wat levert InvoiceStack op" (vlak links, .rand-links) en "Van software naar software" (gespiegeld: tekst links, vlak rechts, .rand-rechts).
   De marge naar de schermrand en de ronde hoeken aan één kant komen uit .rand-links en .rand-rechts hierboven. */
.tweeluik{display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);gap:72px;align-items:center}
.tweeluik.gespiegeld{grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr)}
.tweeluik-vlak{min-height:600px;padding:clamp(28px, 4.5vw, 72px) clamp(24px, 4vw, 64px);display:flex;align-items:center;justify-content:center}
.tweeluik-venster{max-width:540px;box-shadow:var(--schaduw-scherm), var(--binnenrand)}
.tweeluik-tekst{display:flex;flex-direction:column;gap:22px;max-width:520px}
.tweeluik-tekst .label{margin:0}
.tweeluik-tekst h2{font-size:clamp(34px, 3.4vw, 48px)}
.tweeluik-tekst .lead{font-size:var(--body)}
/* een lijst met een dun vinkje voor elke regel; het vinkje is een masker, zodat de kleur uit het token komt */
.dunne-vinkjes{display:flex;flex-direction:column;gap:8px}
.dunne-vinkjes li{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.dunne-vinkjes li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;background:var(--accent-donker);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/16px no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/16px no-repeat}
/* de statuspil met een klein lijnicoon, zoals in de app */
.tweeluik-venster .status{font-size:12.5px;padding:3px 10px 3px 8px}
.tweeluik-venster .status svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* op een smal scherm: tekst boven het vlak, het vlak weer met ronde hoeken rondom (dat doet .rand-links/.rand-rechts in de telefoonregels) */
@media (max-width:900px){
  .tweeluik,.tweeluik.gespiegeld{grid-template-columns:minmax(0, 1fr);gap:40px}
  .tweeluik-tekst{order:1;max-width:none}
  .tweeluik-vlak{order:2;min-height:0;padding:24px 16px}
}

/* Wat levert InvoiceStack op: links het vlak met mist, rechts de tekst (tweeluik hierboven) */
/* de achtergrond is de bewegende mist van Vanta (data-vanta="fog" in main.html, kleuren van Mees; ook achter het blok Boekhoudwerk). Dit is de stille terugval voor als het script of WebGL ontbreekt:
   de basiskleur van de mist met een zachte groene gloed, in dezelfde kleuren, zodat het vlak nooit leeg is. Draait de mist, dan ligt het canvas hierover */
.opbrengst-vlak,.boekwerk-vlak{background:radial-gradient(60% 55% at 30% 40%, color-mix(in srgb, #99AC73 42%, transparent) 0%, transparent 100%), radial-gradient(50% 45% at 80% 85%, color-mix(in srgb, #99AC73 28%, transparent) 0%, transparent 100%), #FFF6EB}
/* het venster: titel met regel eronder, drie stappen met een dun vinkje, en een kaart met drie facturen en hun status */
.opbrengst-inhoud{padding:26px 28px 28px;display:flex;flex-direction:column;gap:18px}
.opbrengst-inhoud .h4{font-family:var(--tekstletter);font-size:18px;font-weight:600;letter-spacing:0;line-height:1.3;margin:0 0 4px}
.opbrengst-sub{font-size:14px;color:var(--gedempt);margin:-18px 0 0;padding-bottom:16px;border-bottom:1px solid var(--lijn)}
.opbrengst-stappen{font-size:15px;color:var(--tekst)}
.opbrengst-rijen{background:var(--grond-zacht);border-radius:var(--hoek-scherm);padding:4px 18px}
.opbrengst-rijen li{padding:14px 0;border-bottom:1px solid var(--lijn);display:flex;flex-direction:column;gap:5px}
.opbrengst-rijen li:last-child{border-bottom:0}
.opbrengst-rij-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px}
.opbrengst-rij-kop b{font-weight:600}
.opbrengst-rijen p{font-size:14px;color:var(--gedempt);line-height:1.5}
/* de tekst rechts: label, kop, inleiding, drie voordelen met een mintvinkje en een tekstlink */
.opbrengst-voordelen{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.opbrengst-voordelen li{gap:14px;padding:8px 0}
.opbrengst-voordelen li::before{width:22px;height:22px;margin-top:2px;background-size:15px}
.opbrengst-voordelen li div{display:flex;flex-direction:column;gap:3px}
.opbrengst-voordelen span{color:var(--gedempt);font-size:15px;line-height:1.55}
@media (max-width:900px){
  .opbrengst-inhoud{padding:18px 18px 20px;gap:14px}
  .opbrengst-rijen{padding:2px 14px}
  .opbrengst-rij-kop{font-size:14px}
}
/* op telefoon staat de status onder de naam, bij alle drie gelijk */
@media (max-width:480px){
  .opbrengst-rij-kop{flex-direction:column;align-items:flex-start;gap:6px}
}

/* Van software naar software (gespiegeld tweeluik): links de kop als citaat, rechts het vlak met zandwolken en de route van één factuur */
.route-tekst{gap:24px}
/* de kop als citaat: groot in Lora, met aanhalingstekens als opmaak; het openingsteken hangt in de kantlijn zodat de tekst recht onder elkaar staat */
.route-tekst h2.citaat{font-size:clamp(36px, 4vw, 58px);line-height:1.06;letter-spacing:-.03em;text-indent:-.42em}
.citaat::before{content:"\201C"}
.citaat::after{content:"\201D"}
.route-tekst .lead{max-width:460px;text-wrap:pretty}
.route-tekst .knoppen{margin-top:6px}
.route-tekst .knop{min-height:52px;padding:0 28px;font-size:16px;box-shadow:0 12px 26px -14px rgba(22,33,31,.7)}
/* de stille terugval voor als WebGL er niet is of bij "minder beweging": zand met een lichte gloed linksboven en een diepere gloed rechtsonder.
   Draaien de zandwolken (data-vanta="clouds-zand"), dan ligt het canvas hierover */
.route-vlak{background:radial-gradient(65% 55% at 25% 20%, color-mix(in srgb, var(--grond) 85%, transparent) 0%, transparent 100%), radial-gradient(55% 50% at 85% 90%, color-mix(in srgb, var(--vlak-zand-diep) 90%, transparent) 0%, transparent 100%), var(--vlak-zand)}
/* het venster: titel in de serif, een regel eronder, de bron als pillen met rechts de status, en een binnenkaart met de controles */
.route-inhoud{padding:28px 30px 30px;display:flex;flex-direction:column;gap:16px}
.route-inhoud .h3{font-size:clamp(24px, 2.2vw, 30px);line-height:1.15}
.route-sub{font-size:14px;color:var(--gedempt);margin-top:-8px}
.route-pillen{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:4px 0 2px}
.route-bron{display:flex;gap:2px;padding:3px;border-radius:var(--hoek-knop);background:var(--grond-zacht);box-shadow:var(--binnenrand)}
.route-bron li{padding:4px 12px;border-radius:var(--hoek-knop);font-size:13px;font-weight:500;color:var(--gedempt);line-height:1.4}
.route-bron li[aria-current]{background:var(--kaart);color:var(--inkt);box-shadow:var(--binnenrand)}
.route-kaart{background:var(--grond-zacht);border-radius:var(--hoek-scherm);padding:18px 20px 16px;display:flex;flex-direction:column;gap:10px}
.route-kaart .h4{display:flex;align-items:center;gap:8px;font-family:var(--tekstletter);font-size:14px;font-weight:600;letter-spacing:0;color:var(--inkt)}
.route-kaart .h4:not(:first-child){margin-top:8px;padding-top:14px;border-top:1px solid var(--lijn)}
.route-kaart .h4 svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--accent-donker);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.route-regels{gap:6px;font-size:14.5px;color:var(--inkt)}
.route-regels span{color:var(--gedempt)}
.route-todo li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--inkt);line-height:1.5}
/* een leeg rondje: dit staat nog open, en dat doet een mens */
.route-todo li::before{content:"";flex:none;width:14px;height:14px;margin:3px 1px 0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--gedempt)}
.route-voet{font-size:12.5px;color:var(--gedempt);line-height:1.5;margin-top:6px;padding-top:12px;border-top:1px solid var(--lijn);text-wrap:pretty}
@media (max-width:900px){
  .route-tekst h2.citaat{font-size:clamp(32px, 9vw, 42px)}
  .route-tekst .knoppen{flex-direction:column;align-items:stretch;max-width:360px}
  .route-inhoud{padding:20px 18px 20px;gap:14px}
  .route-kaart{padding:16px 16px 14px}
}

/* De route van één factuur: witte kaarten onder elkaar, gecentreerd op een zeegroen vlak, met een dunne pijl ertussen.
   Zeegroen omdat het blok erboven zand is en het blok daarboven groene mist: koel na warm. De maten om bij te stellen staan bovenaan .reis. */
.reis-blok{margin-top:var(--sectie)}
.reis-kop{align-items:center;margin-bottom:48px}
.reis-kop .label{margin:0}
.reis-vlak{padding:clamp(40px, 6vw, 88px) clamp(20px, 4vw, 56px);background:radial-gradient(55% 45% at 50% 0%, color-mix(in srgb, var(--kaart) 45%, transparent) 0%, transparent 100%), radial-gradient(45% 40% at 50% 100%, var(--vlak-zee-diep) 0%, transparent 100%), var(--vlak-zee)}
.reis{--breedte:520px;--binnen:24px;--pijl:48px;display:flex;flex-direction:column;align-items:center;margin:0;padding:0;list-style:none}
.reis > li{display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--breedte)}
.reis-pijl{display:block;width:12px;height:var(--pijl);margin:6px 0;fill:none;stroke:var(--accent-donker);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.reis-kaart{width:100%;background:var(--kaart);border-radius:var(--hoek-kaart);box-shadow:var(--binnenrand), 0 18px 40px -26px rgba(22,33,31,.40), 0 2px 6px rgba(22,33,31,.05)}
/* kaart 1 en 3: een icoon in een vierkantje, titel met een grijze regel, rechts het bedrag */
.reis-gebeurtenis{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:16px;padding:18px var(--binnen)}
.reis-ikoon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--grond-zacht);color:var(--inkt)}
.reis-ikoon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reis-ikoon-klaar{background:var(--klaar-vlak);color:var(--klaar)}
.reis-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.reis-tekst b{font-size:16px;line-height:1.35;text-wrap:balance}
.reis-tekst span{font-size:14px;line-height:1.45;color:var(--gedempt)}
.reis-bedrag{font-size:16px;font-weight:600;color:var(--inkt);font-variant-numeric:tabular-nums;white-space:nowrap}
/* kaart 2: InvoiceStack, met een zachte kopbalk en ronde groene vinkjes */
.reis-dienst{position:relative}
.reis-dienst-kop{display:flex;align-items:center;gap:10px;padding:14px var(--binnen);border-radius:var(--hoek-kaart) var(--hoek-kaart) 0 0;background:var(--grond-zacht);border-bottom:1px solid var(--lijn);font-weight:600;font-size:16px;color:var(--inkt);letter-spacing:-.01em}
.reis-dienst-kop svg{width:24px;height:24px;flex:none;color:var(--inkt)}
.reis-vinkjes{display:flex;flex-direction:column;gap:12px;padding:20px var(--binnen) 0}
.reis-vinkjes > li{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 12px;padding-left:34px;font-size:15.5px;line-height:1.5;color:var(--inkt);text-wrap:pretty}
.reis-vinkjes > li::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--klaar-vlak) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 10.5l2.6 2.6L14.4 7' fill='none' stroke='%232F7D4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/15px no-repeat}
.reis-voet{margin:18px var(--binnen) 0;padding:12px 0 18px;border-top:1px solid var(--lijn);font-size:13px;line-height:1.5;color:var(--gedempt);text-wrap:pretty}
/* de stop: een korte rode pijl naar opzij, naar een klein rood kaartje, op de hoogte van de IBAN-regel */
.reis-iban{position:relative}
.reis-tak{position:absolute;top:50%;left:calc(100% + var(--binnen) + 4px);display:flex;align-items:center;gap:8px;width:max-content;transform:translateY(-50%)}
.reis-tak-pijl{width:40px;height:12px;flex:none;fill:none;stroke:var(--stop);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.reis-tak-haak{display:none}
.reis-tak p{display:flex;flex-direction:column;padding:10px 14px;border-radius:12px;background:var(--stop-vlak);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--stop) 18%, transparent), 0 12px 26px -20px rgba(22,33,31,.35);color:var(--stop);font-size:13.5px;line-height:1.4}
.reis-tak b{color:var(--stop);font-weight:600}
/* kaart 4: de klik van een mens, donker en anders dan de rest */
.reis-jij{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px var(--binnen) 24px 28px;background:var(--inkt);box-shadow:var(--schaduw-scherm)}
.reis-jij .reis-tekst{gap:6px}
.reis-jij b{font-family:var(--kop);font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-.02em;color:var(--licht)}
.reis-jij .reis-tekst span{font-size:15px;color:var(--licht-gedempt)}
.reis-knop{position:relative;flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:var(--hoek-knop);background:var(--kaart);color:var(--inkt);font-size:15px;font-weight:500;line-height:1;white-space:nowrap}
/* beweging: alleen als het script .reis-wacht zet; dan komen de kaarten kort na elkaar in beeld en groeien de pijlen omlaag */
.reis-wacht > li{opacity:0;transform:translateY(16px)}
.reis-wacht .reis-pijl{transform:scaleY(0);transform-origin:50% 0}
.reis-in-beeld > li{opacity:1;transform:none;transition:opacity .5s ease calc(var(--i) * .22s + .1s), transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .22s + .1s)}
.reis-in-beeld .reis-pijl{transform:none;transition:transform .35s ease calc(var(--i) * .22s)}
@media (prefers-reduced-motion:reduce){.reis-wacht > li,.reis-wacht .reis-pijl{opacity:1;transform:none;transition:none}}
/* niet genoeg ruimte naast de kaart: de stop wordt een regel in de kaart van InvoiceStack, onder de IBAN-regel */
@media (max-width:1180px){
  .reis-tak{position:static;flex-basis:100%;width:auto;margin-top:8px;transform:none;align-items:flex-start;gap:6px}
  .reis-tak-pijl{display:none}
  .reis-tak-haak{display:block;width:16px;height:16px;flex:none;margin-top:9px;fill:none;stroke:var(--stop);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .reis-tak p{flex:1;padding:8px 12px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--stop) 18%, transparent)}
}
@media (max-width:900px){
  .reis-kop{margin-bottom:32px}
  .reis-vlak{padding:32px 14px}
  .reis{--binnen:18px;--pijl:36px}
}
/* telefoon: het bedrag onder de titel, en bij jouw kaart de knop onder de zin */
@media (max-width:520px){
  .reis-gebeurtenis{grid-template-columns:auto minmax(0, 1fr);column-gap:14px;row-gap:4px;padding:16px var(--binnen)}
  .reis-gebeurtenis .reis-ikoon{grid-row:1 / span 2;align-self:start;width:40px;height:40px}
  .reis-bedrag{grid-column:2;font-size:15px}
  .reis-tekst b{font-size:15.5px}
  .reis-vinkjes > li{font-size:15px}
  .reis-jij{flex-direction:column;align-items:flex-start;gap:18px;padding:22px var(--binnen) 26px}
  .reis-jij b{font-size:25px}
}

/* Socials onderaan de voet: een glazen kaartje met drie ronde knoppen.
   Bij aanwijzen schuift het rondje schuin omhoog, met drie lagen in accentkleur eronder, en verschijnt de naam ernaast. */
footer .socials{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--lijn)}
.socials-kop{color:var(--gedempt);font-size:14px}
.socials-kaart{display:flex;gap:18px;margin:0;padding:14px 18px;list-style:none;border-radius:var(--hoek-kaart);background:color-mix(in srgb, var(--kaart) 60%, transparent);backdrop-filter:blur(15px);box-shadow:var(--binnenrand), inset 0 0 20px rgba(255,255,255,.6), 0 5px 5px rgba(22,33,31,.08);transition:background .5s}
.socials-kaart:hover{background:var(--kaart)}
.socials-item{position:relative;width:52px;height:52px}
.socials-item a{position:relative;z-index:1;display:block;width:52px;height:52px;border-radius:50%}
.socials-ikoon{display:block;width:52px;height:52px;padding:14px;border-radius:50%;color:var(--accent-donker);background:var(--kaart);box-shadow:var(--binnenrand), 0 5px 5px rgba(22,33,31,.12);transition:transform .3s, color .3s, background .3s}
.socials-item > span:not(.socials-naam){position:absolute;top:0;left:0;width:52px;height:52px;border-radius:50%;border:1px solid var(--accent-donker);background:var(--accent);opacity:0;transition:opacity .3s, transform .3s}
.socials-naam{position:absolute;top:12px;left:100%;z-index:2;padding:3px 8px;border-radius:6px;white-space:nowrap;font-size:13px;font-weight:600;color:var(--accent-donker);background:var(--kaart);box-shadow:-4px 0 0 var(--vlak-zee), -8px 0 0 var(--vlak-zee-diep), 0 5px 5px rgba(22,33,31,.08);opacity:0;pointer-events:none;transition:opacity .3s, transform .3s}
.socials-item:hover .socials-ikoon,.socials-item:focus-within .socials-ikoon{transform:translate(15px, -15px);color:var(--kaart);background:var(--accent-donker)}
.socials-item:hover > span:nth-child(1),.socials-item:focus-within > span:nth-child(1){opacity:.2}
.socials-item:hover > span:nth-child(2),.socials-item:focus-within > span:nth-child(2){opacity:.4;transform:translate(5px, -5px)}
.socials-item:hover > span:nth-child(3),.socials-item:focus-within > span:nth-child(3){opacity:.6;transform:translate(10px, -10px)}
.socials-item:hover .socials-naam,.socials-item:focus-within .socials-naam{opacity:1;transform:translate(25px, -2px) skew(-5deg)}
@media (prefers-reduced-motion:reduce){.socials-ikoon,.socials-item > span,.socials-naam{transition:none}}

/* knop rechtsonder in het vlak van de route, naar de pagina Zo werkt het; op telefoon onder de kaarten, in het midden.
   !important omdat Vanta bij het starten elk kind van het vlak position:relative geeft (in de style), en de knop dan naar links springt. */
.reis-vlak .reis-meer{position:absolute !important;right:20px;bottom:16px;z-index:2 !important;box-shadow:var(--schaduw-scherm)}
@media (max-width:700px){.reis-vlak .reis-meer{position:static !important;display:flex;width:max-content;margin:24px auto 0}}

/* Het verschil (tweeluik zoals "Wat levert InvoiceStack op": vlak links, tekst rechts). In het venster een stukje van het instellingenscherm:
   twee gewone instellingen, de IBAN-regel die vastzit, en daaronder wat InvoiceStack doet en wat het nooit doet. */
/* de stille terugval voor als WebGL er niet is of bij "minder beweging": dezelfde lichte zeegroene lucht als clouds2, boven zeegroen en onder bijna wit.
   Draait de lucht (data-vanta="clouds2"), dan ligt het canvas hierover */
.verschil-vlak{background:radial-gradient(60% 45% at 75% 18%, color-mix(in srgb, var(--vlak-zee-diep) 70%, transparent) 0%, transparent 100%), linear-gradient(180deg, var(--vlak-zee) 0%, color-mix(in srgb, var(--kaart) 75%, var(--vlak-zee)) 100%)}
.verschil-inhoud{padding:10px 24px 24px;display:flex;flex-direction:column;gap:18px}
/* de instellingen: naam met een grijze regel eronder, rechts een schuifje of een bedrag */
.verschil-instellingen li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--lijn)}
.verschil-instellingen li > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.verschil-instellingen b{font-size:14.5px;line-height:1.4}
.verschil-instellingen li span:not([class]){font-size:13px;line-height:1.45;color:var(--gedempt);text-wrap:pretty}
.verschil-bedrag{flex:none;padding:5px 10px;border-radius:8px;box-shadow:var(--binnenrand);font-size:13.5px;color:var(--inkt);font-variant-numeric:tabular-nums;white-space:nowrap}
/* het schuifje zoals in het blok Voor wie: inkt met een mint knopje rechts (aan) */
.verschil-schuif{position:relative;flex:none;display:block;width:40px;height:24px;border-radius:12px;background:var(--inkt)}
.verschil-schuif::after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--accent)}
/* de regel die vastzit: zacht papier met een dunne rand, het schuifje grijs en aan, met een slotje in inkt op het knopje */
.verschil-instellingen .verschil-vast{align-items:flex-start;margin-top:12px;padding:14px 16px;border-bottom:0;border-radius:12px;background:var(--grond-zacht);box-shadow:var(--binnenrand)}
.verschil-vast .verschil-schuif{margin-top:2px}
.verschil-schuif.vast{background:color-mix(in srgb, var(--inkt) 22%, transparent)}
.verschil-schuif.vast::after{background:var(--kaart);box-shadow:0 1px 2px rgba(22,33,31,.18)}
.verschil-schuif.vast svg{position:absolute;z-index:1;right:6px;top:6px;width:12px;height:12px;fill:none;stroke:var(--inkt);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* de twee lijstjes naast elkaar: groene vinkjes voor wat het doet, een klein slotje en gedempte tekst voor wat het nooit doet */
.verschil-lijsten{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:22px;padding-top:18px;border-top:1px solid var(--lijn)}
.verschil-lijsten .h4{font-family:var(--tekstletter);font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--inkt);margin:0 0 10px}
.verschil-lijsten ul{display:flex;flex-direction:column;gap:7px}
.verschil-lijsten li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.4;color:var(--inkt);text-wrap:pretty}
.verschil-doet li::before{content:"";position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;background:var(--klaar-vlak) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 10.5l2.6 2.6L14.4 7' fill='none' stroke='%232F7D4C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat}
.verschil-nooit li{color:var(--gedempt)}
.verschil-nooit li::before{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;background:var(--gedempt);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3.5' y='7' width='9' height='6.5' rx='1.6' fill='none' stroke='black' stroke-width='1.6'/><path d='M5.6 7V5.2a2.4 2.4 0 0 1 4.8 0V7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center/13px no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3.5' y='7' width='9' height='6.5' rx='1.6' fill='none' stroke='black' stroke-width='1.6'/><path d='M5.6 7V5.2a2.4 2.4 0 0 1 4.8 0V7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center/13px no-repeat}
.verschil-tekst p:not(.lead){color:var(--tekst);text-wrap:pretty}
@media (max-width:900px){
  .verschil-inhoud{padding:6px 18px 20px}
  .verschil-instellingen .verschil-vast{padding:12px 14px}
}
/* telefoon: de twee lijstjes onder elkaar, en bij de gewone instellingen alleen de naam, zodat het venster niet te hoog wordt */
@media (max-width:520px){
  .verschil-lijsten{grid-template-columns:minmax(0, 1fr);gap:18px}
  .verschil-instellingen li:not(.verschil-vast) span:not([class]){display:none}
  .verschil-lijsten ul{gap:5px}
}

/* Boekhoudwerk (gespiegeld tweeluik zoals "Van software naar software": tekst links, vlak rechts met de mist van Vanta fog).
   Links de drie onderwerpen als een lijst met een dunne lijn ervoor; het open onderwerp krijgt een stukje lijn in mint-donker.
   Rechts liggen drie vensters op dezelfde plek; het script in main.html toont het venster van het gekozen onderwerp.
   Zonder script (geen .boekwerk-js) staan alle onderwerpen open en toont het vlak het eerste venster. */
.boekwerk{align-items:start}
.boekwerk-tekst{padding-top:24px}
/* het vlak blijft in beeld als de tekst langer wordt (Meer details open); alleen op een breed scherm */
.boekwerk-vlak{position:sticky;top:104px}
.boekwerk-lijst{margin-top:8px;border-left:1px solid var(--lijn)}
.boekwerk-item{position:relative;padding-left:26px}
.boekwerk-item::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--accent-donker);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.boekwerk-js .boekwerk-item.is-open::before{transform:none}
.boekwerk-item h3{font-size:inherit;line-height:inherit}
.boekwerk-knop{display:block;width:100%;margin:0;padding:14px 0;border:0;background:none;text-align:left;cursor:pointer;font-family:var(--kop);font-size:25px;font-weight:400;line-height:1.2;letter-spacing:-.02em;color:var(--inkt);transition:color .2s}
.boekwerk-js .boekwerk-item:not(.is-open) .boekwerk-knop{color:var(--gedempt)}
.boekwerk-js .boekwerk-item:not(.is-open) .boekwerk-knop:hover{color:var(--inkt)}
.boekwerk-knop[aria-disabled="true"]{cursor:default}
.boekwerk-knop:focus-visible{outline:2px solid var(--accent-donker);outline-offset:4px;border-radius:6px}
.boekwerk-paneel{padding:0 0 18px}
.boekwerk-paneel[hidden]{display:none}
.boekwerk-paneel > p{font-size:16px;line-height:1.6;color:var(--tekst);text-wrap:pretty}
.boekwerk-paneel details{margin-top:14px}
.boekwerk-paneel .meer p{font-size:15.5px;line-height:1.6;text-wrap:pretty}
.boekwerk-js .boekwerk-paneel:not([hidden]){animation:boekwerk-in .4s cubic-bezier(.2,.7,.2,1)}
@keyframes boekwerk-in{from{opacity:0;transform:translateY(6px)}}
/* de drie vensters op één plek (zelfde rastercel), zodat het vlak niet van hoogte verandert; het gekozen schuift zacht omhoog in beeld */
.boekwerk-vensters{display:grid;width:100%;max-width:540px}
.boekwerk-venster{grid-area:1 / 1;align-self:center;max-width:none}
.boekwerk-venster[hidden]{display:none}
.boekwerk-js .boekwerk-venster{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease, transform .5s cubic-bezier(.2,.7,.2,1), visibility 0s linear .5s}
.boekwerk-js .boekwerk-venster.is-actief{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .12s, transform .6s cubic-bezier(.2,.7,.2,1) .12s, visibility 0s}
@media (prefers-reduced-motion:reduce){
  .boekwerk-item::before,.boekwerk-knop,.boekwerk-js .boekwerk-venster,.boekwerk-js .boekwerk-venster.is-actief{transition:none}
  .boekwerk-js .boekwerk-venster{transform:none}
  .boekwerk-js .boekwerk-paneel:not([hidden]){animation:none}
}
/* de inhoud van de vensters: kop met een grijze regel, een zachte binnenkaart en een voetregel, zoals in de andere vensters */
.boekwerk-inhoud{padding:22px 26px 24px;display:flex;flex-direction:column;gap:16px}
.boekwerk-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.boekwerk-kop .h4{font-family:var(--tekstletter);font-size:17px;font-weight:600;letter-spacing:0;line-height:1.3}
.boekwerk-kop .status{flex:none;margin-top:1px}
.boekwerk-sub{font-size:13.5px;line-height:1.45;color:var(--gedempt);margin-top:3px}
.boekwerk-inhoud .h5{margin:0;font-family:var(--tekstletter);font-size:13.5px;font-weight:600;line-height:1.4;color:var(--inkt)}
.boekwerk-kaart{background:var(--grond-zacht);border-radius:var(--hoek-scherm);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.boekwerk-kaart-kop{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap}
.boekwerk-voet{font-size:12.5px;line-height:1.5;color:var(--gedempt);padding-top:12px;border-top:1px solid var(--lijn);text-wrap:pretty}
/* 1. transitorisch: velden, twaalf balkjes met de jaargrens als stippellijn, en een legenda */
.boekwerk-velden{margin:0;display:flex;flex-direction:column;gap:6px}
.boekwerk-velden div{display:grid;grid-template-columns:104px minmax(0, 1fr);gap:12px;font-size:13.5px;line-height:1.45}
.boekwerk-velden dt{color:var(--gedempt)}
.boekwerk-velden dd{margin:0;color:var(--inkt);font-variant-numeric:tabular-nums}
.boekwerk-maanden{display:flex;flex-direction:column;gap:6px;padding:12px 14px 10px;border-radius:12px;background:var(--kaart);box-shadow:var(--binnenrand)}
.boekwerk-balken,.boekwerk-letters{display:flex;gap:4px}
.boekwerk-balken{align-items:flex-end;height:46px}
.boekwerk-balken i{flex:1;height:100%;border-radius:3px;background:var(--accent-donker)}
.boekwerk-balken i.later{background:var(--vlak-zee-diep)}
.boekwerk-letters span{flex:1;text-align:center;font-size:10.5px;line-height:1;color:var(--gedempt);text-transform:uppercase}
.boekwerk-grens{flex:none;width:0;align-self:stretch;margin:0 3px;border-left:1px dashed color-mix(in srgb, var(--inkt) 40%, transparent)}
.boekwerk-balken .boekwerk-grens{margin-top:-6px}
.boekwerk-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12.5px;color:var(--gedempt);font-variant-numeric:tabular-nums}
.boekwerk-legenda span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.boekwerk-legenda i{width:9px;height:9px;border-radius:2px;background:var(--accent-donker)}
.boekwerk-legenda i.later{background:var(--vlak-zee-diep)}
.boekwerk-legenda .boekwerk-noot{margin-left:auto;color:var(--inkt)}
/* 2. contracten: de stand van het contract met een balk, en de termijn in rente en aflossing */
.boekwerk-positie{display:flex;flex-direction:column;gap:10px}
.boekwerk-stand{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;font-size:14px;color:var(--gedempt);font-variant-numeric:tabular-nums}
.boekwerk-stand span{display:flex;flex-direction:column;gap:1px}
.boekwerk-stand span:last-child{align-items:flex-end;text-align:right}
.boekwerk-stand small{font-size:12px}
.boekwerk-stand b{font-size:20px;font-weight:600;line-height:1.2}
.boekwerk-voortgang{display:block;height:8px;border-radius:var(--hoek-knop);background:var(--grond-zacht);box-shadow:var(--binnenrand);overflow:hidden}
.boekwerk-voortgang i{display:block;height:100%;border-radius:inherit;background:var(--accent-donker)}
.boekwerk-split{margin:0;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px}
.boekwerk-split div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:var(--kaart);box-shadow:var(--binnenrand)}
.boekwerk-split dt{font-size:12px;color:var(--gedempt)}
.boekwerk-split dd{margin:0;font-size:14.5px;font-weight:600;color:var(--inkt);font-variant-numeric:tabular-nums;white-space:nowrap}
.boekwerk-mutatie{font-size:13px;line-height:1.45;color:var(--gedempt);font-variant-numeric:tabular-nums}
/* 3. btw: per rekening de keuze als een keuzelijstje, en de jaarlijsten onderaan */
.boekwerk-inhoud .boekwerk-sectie{margin-bottom:-8px}
.boekwerk-inhoud .boekwerk-sectie:not(:first-child){margin-top:4px}
.boekwerk-rekeningen li{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;padding:10px 0;border-bottom:1px solid var(--lijn);font-size:13.5px;line-height:1.4}
.boekwerk-rekeningen li:last-child{border-bottom:0}
.boekwerk-rekening{min-width:0;color:var(--inkt)}
.boekwerk-rekening b,.boekwerk-keuze b{font-weight:600;font-variant-numeric:tabular-nums}
.boekwerk-rekening b{margin-right:4px}
.boekwerk-keuze{flex:none;display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:8px;background:var(--kaart);box-shadow:var(--binnenrand);font-size:13px;color:var(--inkt);white-space:nowrap}
.boekwerk-keuze::after{content:"";flex:none;width:10px;height:10px;background:var(--gedempt);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/10px no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/10px no-repeat}
.boekwerk-jaarlijsten{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 14px;border-radius:12px;background:var(--grond-zacht);font-size:13px;line-height:1.4;color:var(--gedempt)}
.boekwerk-download{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--hoek-knop);background:var(--inkt);color:var(--licht);font-size:12.5px;font-weight:500;white-space:nowrap}
@media (max-width:900px){
  .boekwerk-tekst{padding-top:0}
  .boekwerk-vlak{position:relative;top:auto}
  .boekwerk-knop{font-size:22px;padding:12px 0}
  .boekwerk-item{padding-left:20px}
  .boekwerk-inhoud{padding:18px 18px 20px;gap:14px}
  .boekwerk-kaart{padding:14px}
}
/* telefoon: de keuze per rekening onder de naam, de termijn als drie regels, de status onder de titel */
@media (max-width:520px){
  .boekwerk-kop{flex-direction:column;gap:8px}
  .boekwerk-velden div{grid-template-columns:minmax(0, 1fr);gap:0}
  .boekwerk-maanden{padding:10px 10px 8px}
  .boekwerk-balken,.boekwerk-letters{gap:3px}
  .boekwerk-legenda .boekwerk-noot{margin-left:0}
  .boekwerk-split{grid-template-columns:minmax(0, 1fr);gap:6px}
  .boekwerk-split div{flex-direction:row;justify-content:space-between;align-items:baseline;padding:8px 12px}
  .boekwerk-rekeningen li{flex-direction:column;align-items:flex-start;gap:6px}
  .boekwerk-keuze{max-width:100%;white-space:normal}
}

/* Juridische pagina's (privacy, voorwaarden, verwerkersovereenkomst): dezelfde tekst als op de huidige site, in de kleuren en
   letters van ontwerp B. Rustig en leesbaar: één smalle kolom, koppen in Lora, tabellen en artikelnummers in de sitekleuren. */
.juridisch{padding:72px 0 var(--sectie)}
.juridisch .wrap{max-width:calc(72ch + 2 * var(--gutter))}
.juridisch .eyebrow{display:block;font-size:15px;color:var(--gedempt);margin-bottom:14px}
.juridisch h1{font-size:var(--h2);line-height:1.1;margin:0 0 18px}
.juridisch .lead{margin:0 0 40px}
.juridisch h2{font-size:26px;line-height:1.25;margin:40px 0 12px;padding-top:28px;border-top:1px solid var(--lijn)}
.juridisch h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.juridisch p{margin:0 0 16px}
.juridisch ul{margin:0 0 16px;padding-left:20px;list-style:disc;display:flex;flex-direction:column;gap:8px}
.juridisch li::marker{color:var(--accent-donker)}
.juridisch a{color:var(--accent-donker);text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--accent-donker) 35%, transparent);text-underline-offset:3px}
.juridisch a:hover{color:var(--inkt)}
.juridisch .tabel{border:1px solid var(--lijn);border-radius:var(--hoek-scherm);overflow:hidden;margin:0 0 16px;background:var(--kaart)}
.juridisch table{border-collapse:collapse;width:100%;font-size:15px}
.juridisch th{text-align:left;font-size:13px;font-weight:600;color:var(--gedempt);padding:12px 16px;background:var(--grond-zacht);border-bottom:1px solid var(--lijn)}
.juridisch td{padding:12px 16px;border-bottom:1px solid var(--lijn);vertical-align:top}
.juridisch tr:last-child td{border-bottom:0}
.juridisch details.diensten{margin:0 0 16px}
.juridisch details.diensten summary{cursor:pointer;color:var(--accent-donker);margin-bottom:16px}
.juridisch dl{margin:0 0 16px;display:flex;flex-direction:column;gap:8px}
.juridisch dt{font-weight:600;color:var(--inkt)}
.juridisch dd{margin:0}
.juridisch mark.open{background:var(--letop-vlak);color:var(--letop);padding:1px 4px;border-radius:4px}
.juridisch .versie{margin-top:24px;color:var(--gedempt);font-size:var(--klein)}
.juridisch section h2 .nr{font-size:var(--klein);font-family:var(--tekstletter);font-weight:600;color:var(--accent-donker);margin-right:12px}
.juridisch ol.leden{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:12px}
.juridisch ol.leden > li{display:grid;grid-template-columns:3em 1fr;gap:4px}
.juridisch ol.leden > li > .n{font-size:var(--klein);color:var(--gedempt);line-height:1.9}
.juridisch ol.leden > li > div{min-width:0}
.juridisch ul.punten{margin:8px 0 0}
.juridisch .bewaar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:-16px 0 40px;font-size:var(--klein);color:var(--gedempt)}
.juridisch .knop-bewaar{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--hoek-knop);border:1px solid rgba(22,33,31,.22);background:transparent;color:var(--inkt);font:inherit;font-weight:500;cursor:pointer}
.juridisch .knop-bewaar:hover{background:rgba(22,33,31,.06)}
@media print{
  .nav,footer,.juridisch .knop-bewaar{display:none !important}
  .juridisch{padding-top:0}
  .juridisch mark.open{background:none;color:inherit}
}
@media (max-width:600px){
  /* drie kolommen passen niet op een telefoon: elke rij wordt een blokje, met de kolomkop erboven */
  .juridisch{padding-top:40px}
  .juridisch thead{display:none}
  .juridisch tr{display:block;padding:12px 16px;border-bottom:1px solid var(--lijn)}
  .juridisch tr:last-child{border-bottom:0}
  .juridisch td{display:block;padding:4px 0;border-bottom:0}
  .juridisch td::before{content:attr(data-kop);display:block;font-size:12px;font-weight:600;color:var(--gedempt)}
}

/* ===== Alleen op de echte site (niet in het concept) ===== */
/* Demo- en contactformulier: de melding als iets niet lukte, en de kaart die het formulier vervangt na het versturen
   (POST /demo in web.py komt terug met fout of bedankt). Zelfde kleuren als de statuslabels. */
.formulier-fout{background:var(--stop-vlak);color:var(--stop);border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.5}
.formulier-bedankt h2{font-size:var(--h3);margin:0}
.formulier-bedankt p{color:var(--gedempt)}
.knop[aria-busy="true"]{opacity:.7;cursor:progress}
/* De plaatjes staan in een picture (webp met png of jpg als terugval); die gedraagt zich als het plaatje zelf. */
.site picture{display:block}
/* Zonder script blijft de knop "Opslaan als pdf of printen" verborgen (het script haalt hidden weg). */
.juridisch .knop-bewaar[hidden]{display:none}