/* =========================================================================
   Voorwerk — de openbare site. Gedeeld door /, /privacy, /terms en /cookies.
   =========================================================================

   VIJFDE ONTWERP (2026-08-18). DE NETTE STANDAARD, GOED GEDAAN.

   De vier ervoor staan in de geschiedenis: een donkere met een gloed, een
   crèmekleurige met een schreefletter, een werktekening, en een Notion-achtige.
   Er is er nog één geweest die het niet gehaald heeft: één ochtend lang een
   geëmailleerd bouwbord in kobalt en signaalgeel. Dat was uitgesproken en het
   was ook te veel — te veel blauw, te zwaar, te veel bouw, en een letter die
   schreeuwde waar dit product rustig werkt.

   Dit ontwerp is een bewuste keuze voor de gewone vorm. Niet uit gemakzucht:
   de lat ligt bij wat een Nederlandse ondernemer al kent en vertrouwt —
   Moneybird, Teamleader, Simplicate. Zulke sites winnen niet met een truc maar
   met verzorging: rustige kleuren, één accent, echte schermen groot in beeld,
   en typografie waar niets aan wringt. Dat is hier het werk.

   WAT DE WERELD STUURT

   1. WARM EN ZACHT, NIET KOEL EN STRAK. De grond is gebroken wit met een
      spoortje warmte; vlakken zijn wit met één haarlijn. Ronde hoeken van
      14px, nergens een scherpe kant. Schaduwen zijn laag en zacht, met verzet
      én onscherpte — nooit een gekleurde gloed.

   2. ÉÉN KLEUR, EN DAT IS DE PETROL VAN DE APP. Wie van de site naar /app
      loopt, hoort dezelfde kleur tegen te komen. Hij draagt de knoppen, de
      links en de accenten; verder is de pagina rustig. Geen tweede merkkleur,
      geen verlopen, geen gekleurd vlak over een half scherm.

   3. HET SCHERM IS HET ARGUMENT. Elke sectie die iets beweert, laat het
      bijbehorende scherm zien. Waar geen scherm bij hoort, staat geen sectie.
      Dat was de kritiek op de versie hiervoor: te veel praten, te weinig laten
      zien.

   Letters: Hanken Grotesk. Humanistisch, zachte uiteinden, en niet de
   standaardkeuze die elke tool voorstelt. JetBrains Mono alleen waar het om een
   code of een pad gaat (/app, /garage). Ze staan op onze eigen server, zie het
   blok hieronder.

   ÉÉN STAND, EN DAT BLIJFT ZO. Deze pagina's bewegen niet mee met de donkere
   stand van het apparaat. Dit is de etalage: je wilt niet dat de ene prospect
   iets anders voor zich heeft dan de andere, en niet dat je bij het openslaan
   in een gesprek iets anders ziet dan wat je gewend bent. `color-scheme:light`
   staat er wel, zodat ook de schuifbalken en de velden van de browser licht
   blijven.

   De app (/app, /m, /garage) houdt zijn eigen schakelaar met drie standen; zie
   public/huisstijl.js.
   ========================================================================= */

/* De letters staan hier zelf, niet bij Google. Twee redenen, en de tweede is de
   belangrijkste: een pagina die zegt "geen scripts of cookies van derden" hoort er ook
   geen te laden, en fonts.googleapis.com is een derde partij die het ip-adres van elke
   bezoeker ziet. De eerste reden is gewoon dat het dan altijd werkt, ook achter een
   bedrijfsnetwerk dat Google blokkeert.

   ÉÉN BESTAND PER FAMILIE, want het zijn variabele fonts. Hier stonden vier regels voor
   Hanken Grotesk (400/500/600/700) en twee voor JetBrains Mono, elk met een eigen
   bestandsnaam — maar die zes bestanden waren byte voor byte identiek: dezelfde variabele
   font, zes keer neergezet. De browser ziet zes verschillende URL's en haalt ze dus ook
   alle zes op: 208 kB voor 66 kB aan letters. Nu één regel per familie met de hele
   gewichtsas erin (Hanken 100–900, JetBrains 400–800), en de bestandsnaam zegt eindelijk
   wat het is. Alleen de latin-subset. */
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-grotesk-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-var.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}

:root{
  /* Vlakken. Gebroken wit met een spoortje warmte; wit voor wat erop ligt. */
  --grond:#f8f7f4;
  --vlak:#ffffff;
  --vlak-2:#f1efea;

  /* Inkt. Warm bijna-zwart; lopende tekst een stap lichter, nooit lichtgrijs. */
  --ink:#1a1a17;
  --ink-2:#55534c;
  /* #807d74 haalde 3,8:1 op de grond en zakte daarmee onder de 4,5:1 die lopende tekst hoort te
     halen. Dit is de lichtste tint die het wél haalt (4,7:1 op de grond, 5,0:1 op wit); zichtbaar
     lichter dan --ink-2 en toch leesbaar voor wie niet scherp ziet. */
  --ink-3:#736f66;

  --lijn:#e6e3dc;
  --lijn-2:#efece6;
  /* Een lijn die je moet zien bewegen (de rand van een knop bij hover) en de duim van de
     schuifbalk. De browser tekent die laatste zelf, maar hij hoort net zo goed bij het ontwerp. */
  --lijn-sterk:#d8d4cb;
  --schuif:#cfcbc2;
  --schuif-op:#b3aea3;

  /* Eén accent: de petrol van de app. */
  --merk:#0a5651;
  --merk-diep:#074340;
  --merk-op:#ffffff;
  --merk-zacht:#e4efed;
  --merk-rand:#c7ddd9;
  /* Tekst die op het petrolvlak staat en een stap terug moet doen. Uit de petrol zelf getint,
     niet grijs: grijs op een gekleurd vlak ziet er altijd vuil uit. 7,0:1 op --merk. En de
     hover van een witte knop op datzelfde vlak. */
  --merk-op-2:#bcd7d3;
  --merk-op-hover:#eef5f4;

  /* De drie dingen die echt bestaan en daarom kleur mogen dragen: de gevelbouw,
     het autobedrijf, en de kern die eronder ligt. */
  --gevel:#0a5651;
  --garage:#8a4b25;
  --garage-zacht:#f6ece5;   /* het vlakje achter het merkje van het autobedrijf */
  --kern:#4a5a74;

  --schaduw:0 1px 2px rgba(26,26,23,.05), 0 6px 18px rgba(26,26,23,.06);
  --schaduw-diep:0 2px 4px rgba(26,26,23,.06), 0 20px 50px rgba(26,26,23,.12);

  --font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-maat:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* De trap. Negen treden, meer niet. Er stonden hier eerst tweeëntwintig
     losse maten door elkaar (13, 13.5, 14, 14.5, 15, 15.5, 16, 16.5, 17, 18,
     18.5 ...), wat geen hiërarchie is maar per sectie bijgesteld gepriegel.
     Wie een nieuwe maat nodig denkt te hebben, kiest de dichtstbijzijnde trede. */
  --t-maat:12.5px;   /* cijfers, codes, paden (mono) */
  --t-fijn:13px;     /* etiketten, colofonregel */
  --t-klein:15px;    /* bijschriften, menu, knoppen, tweede regel in een kaart */
  --t-tekst:17px;    /* lopende tekst */
  --t-groot:19.5px;  /* lead onder een kop, het woordmerk */
  --t-kop-1:21px;    /* kaartkop */
  --t-kop-2:clamp(24px,2.8vw,30px);  /* rijkop (h3) */
  --t-kop-3:clamp(28px,3.6vw,40px);  /* sectiekop (h2) */
  --t-kop-4:clamp(38px,5.6vw,62px);  /* paginakop (h1) */

  --maxw:1120px; --prose:680px; --gut:24px;
  /* Vier rondingen: vlakken, knoppen, het fijne werk (focusring, schuifduim), en de pil. */
  --rond:14px; --rond-klein:10px; --rond-fijn:6px; --rond-pil:999px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--grond);
  color:var(--ink-2);
  font-family:var(--font);
  font-size:var(--t-tekst);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* De vlakken die de browser zelf tekent horen ook bij het ontwerp. */
::selection{background:var(--merk-zacht);color:var(--ink)}
:root{scrollbar-color:var(--schuif) var(--vlak-2);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--vlak-2)}
::-webkit-scrollbar-thumb{background:var(--schuif);border-radius:var(--rond-fijn);border:3px solid var(--vlak-2)}
::-webkit-scrollbar-thumb:hover{background:var(--schuif-op)}

/* SPATIËRING EN REGELAFSTAND HOREN BIJ DE MAAT, NIET BIJ "kop".
   Hier stond één regel voor alle vier de kopmaten: letter-spacing −.022em en line-height 1.16, van
   de kaartkop van 21px tot de paginakop van 62px. Dat kan niet allebei kloppen. Letters lijken
   verder uit elkaar te staan naarmate ze groter worden, dus grote tekst wil strákkere spatiëring en
   kleine tekst juist iets ruimere; regelafstand gaat andersom, die wordt kleiner als de letter
   groeit. Eén waarde voor alles is dus per definitie ergens verkeerd — bij 62px was 1.16 te los (de
   twee regels van de paginakop dreven uit elkaar) en bij 21px was −.022em te strak.
   Vijf treden, elk met een eigen paar. Regel per regel af te lezen: hoe groter de letter, hoe
   strakker de spatiëring en hoe dichter de regels. */
h1,h2,h3,h4,h5{font-family:var(--font);color:var(--ink);margin:0;font-weight:600;text-wrap:balance;
  font-optical-sizing:auto}
h1{letter-spacing:-.034em;line-height:1.06}
h2{letter-spacing:-.026em;line-height:1.12}
h3{letter-spacing:-.02em;line-height:1.2}
h4{letter-spacing:-.012em;line-height:1.28}
h5{letter-spacing:.005em;line-height:1.4}

/* Kleurwissels van links sprongen hard: de ene beeldopbouw stond er de oude kleur, de volgende de
   nieuwe. Dat leest als een storing, niet als een reactie. Kort en zacht, en op :active meteen de
   diepe kleur — dan weet je bij het indrukken al dat het aankwam. */
a{color:var(--merk);text-decoration:none;transition:color .16s cubic-bezier(.32,.72,0,1)}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
a:active{color:var(--merk-diep);transition-duration:.06s}
:focus-visible{outline:2px solid var(--merk);outline-offset:3px;border-radius:var(--rond-fijn)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%}

/* ---- balk ----------------------------------------------------------------
   Blijft plakken, met een lichte vertroebeling zodat er geen harde rand over de
   inhoud schuift.

   GEEN STREEP MAAR EEN RAND. Onder de balk stond een lijn van één pixel. Dat is de gewone
   oplossing en hij vecht met wat de balk verder doet: hij is doorschijnend, de inhoud schuift
   eronder door, en dan trekt een harde streep juist de aandacht naar de scheiding in plaats van
   naar wat eronder langs komt. In de plaats komt een verloop van acht pixels dat de inhoud laat
   wegzakken onder het materiaal — je ziet dat er iets overheen ligt, niet dat er een lijn getrokken
   is. De streep zelf blijft alleen staan waar het moet: zonder doorschijnendheid, en bij hoog
   contrast (zie onderaan dit bestand). */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--grond) 90%,transparent);
  backdrop-filter:saturate(1.4) blur(10px)}
header::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--ink) 6%,transparent),transparent)}
.balk{display:flex;align-items:center;gap:20px;height:64px}
.merk{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:var(--t-groot);
  letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.merk:hover{text-decoration:none}
/* Het beeldmerk uit public/logo, hier als pad zodat het de kleur van de balk volgt. */
.merk .teken{width:20px;height:14.2px;flex:none;color:var(--merk)}

/* ---- knoppen ------------------------------------------------------------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 19px;border-radius:var(--rond-klein);font-size:var(--t-klein);font-weight:600;
  letter-spacing:-.01em;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  text-decoration:none;
  /* Naar buiten (loslaten) iets trager dan naar binnen: een reactie hoort meteen te komen, een
     terugkeer mag bezinken. Dezelfde curve gespiegeld, zodat heen en terug bij elkaar horen. */
  transition:background .16s cubic-bezier(.32,.72,0,1),border-color .16s cubic-bezier(.32,.72,0,1),
             color .16s cubic-bezier(.32,.72,0,1),transform .16s cubic-bezier(.32,.72,0,1)}
.knop:hover{text-decoration:none}
.knop.vol{background:var(--merk);color:var(--merk-op);box-shadow:var(--schaduw)}
.knop.vol:hover{background:var(--merk-diep)}
.knop.lijn{background:var(--vlak);color:var(--ink);border-color:var(--lijn)}
.knop.lijn:hover{background:var(--vlak-2);border-color:var(--lijn-sterk)}
.knop.stil{background:none;color:var(--ink-2);padding:0 13px}
.knop.stil:hover{background:var(--vlak-2);color:var(--ink)}
.knop svg{width:16px;height:16px;flex:none}

/* HET ANTWOORD KOMT BIJ HET INDRUKKEN, NIET BIJ HET LOSLATEN.
   In dit hele bestand stond geen enkele :active-regel. Je kon een knop indrukken en er gebeurde
   niets tot de pagina wisselde — op een trage verbinding is dat een halve seconde waarin je je
   afvraagt of je hem wel geraakt hebt, en dan druk je nog een keer. Een knop die meegeeft zegt
   "ik heb je" op het moment dat je hem raakt, en dat is precies het moment waarop je het wilt
   horen. Klein houden: 1,5% is genoeg om te voelen en te weinig om op te vallen.
   Sneller in dan uit, want indrukken is de gebeurtenis en loslaten de nasleep. */
.knop:active{transform:scale(.985);transition-duration:.06s}
.knop.vol:active{background:var(--merk-diep)}
.knop.lijn:active{background:var(--vlak-2);border-color:var(--lijn-sterk)}
.knop.stil:active{background:var(--vlak-2)}

/* ---- voettekst ----------------------------------------------------------- */
footer{border-top:1px solid var(--lijn);background:var(--vlak)}
.voet{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-top:54px;padding-bottom:38px}
.voet h5{font-size:var(--t-fijn);font-weight:600;color:var(--ink);margin:0 0 14px}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.voet a{color:var(--ink-2);font-size:var(--t-klein)}
.voet a:hover{color:var(--merk)}
.voet .over{margin:14px 0 0;max-width:34ch;font-size:var(--t-klein);color:var(--ink-3)}
.voet-onder{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--lijn);padding:16px 0 32px;font-size:var(--t-fijn);color:var(--ink-3)}
.voet-onder a{color:var(--ink-3)}
.voet-onder .juridisch{display:flex;gap:20px;flex-wrap:wrap}

/* ---- lopende tekst (de juridische pagina's) -------------------------------
   Geen bovenschrift boven de kop. Er stond "Juridisch" boven elke titel; dat vertelt niets wat de
   titel zelf niet zegt en het is precies het soort labeltje dat een pagina er machinaal uit laat
   zien. De broodkruimel terug naar de site staat er al onderaan. */
.prose{max-width:var(--prose);margin:0 auto}
.prose h1{font-size:var(--t-kop-3)}
.prose h2{font-size:var(--t-kop-1);margin:46px 0 12px}
.prose h3{font-size:var(--t-tekst);margin:26px 0 8px}
.prose p{margin:0 0 17px}
.prose ul{margin:0 0 17px;padding:0;list-style:none}
/* De bolletjes staan absoluut en niet als flex-item. Met een flex-li wordt elk kind van de
   <li> een eigen kolom, en dan breekt "<strong>Klant- en contactgegevens</strong>: namen, …"
   in twee kolommen af in plaats van door te lopen als één zin. */
.prose li{position:relative;padding:9px 0 9px 21px;border-bottom:1px solid var(--lijn-2)}
.prose li::before{content:"";position:absolute;left:3px;top:18px;width:6px;height:6px;
  border-radius:50%;background:var(--merk-rand)}
.prose strong{color:var(--ink);font-weight:600}
.updated{margin-top:14px;padding-bottom:20px;border-bottom:1px solid var(--lijn);
  font-size:var(--t-fijn);color:var(--ink-3)}
.callout{background:var(--merk-zacht);border:1px solid var(--merk-rand);border-radius:var(--rond);
  padding:22px 24px;margin:28px 0}
.callout p:last-child{margin-bottom:0}
.lead{font-size:var(--t-groot);line-height:1.55;color:var(--ink);margin-top:22px}

.back{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-klein);font-weight:500;color:var(--ink-2);
  border:1px solid var(--lijn);background:var(--vlak);border-radius:var(--rond-klein);padding:9px 15px;
  text-decoration:none}
.back:hover{background:var(--vlak-2);color:var(--ink);text-decoration:none}
.back svg{width:15px;height:15px}

@media (max-width:860px){
  .voet{grid-template-columns:1fr 1fr}
  .voet>div:first-child{grid-column:1/-1}
}
@media (max-width:680px){
  :root{--gut:18px}
  .voet{gap:30px;padding-top:40px}
}

/* ---- wat de bezoeker heeft ingesteld -------------------------------------
   Drie voorkeuren die het besturingssysteem doorgeeft en waar dit bestand tot nu toe niets mee
   deed. Ze staan los van elkaar: iemand kan beweging uitzetten zonder doorschijnendheid uit te
   zetten. Elk krijgt daarom zijn eigen antwoord in plaats van één "alles uit". */

/* Minder beweging. Dat betekent niet géén reactie — een knop moet nog steeds laten merken dat je
   hem raakt. Wat weg moet is wat je lichaam meesleept: het verschuiven en het schalen. De
   kleurwissel blijft, want die helpt begrijpen en beweegt niets. */
@media (prefers-reduced-motion:reduce){
  .knop:active{transform:none}
  .knop,a{transition-duration:.01ms}
}

/* Minder doorschijnendheid. Het materiaal van de balk wordt dan gewoon een vlak, en dan is het
   verloop eronder ook niet meer wat het uitlegt: zonder doorschijnendheid schuift er niets meer
   onderdoor, dus komt de streep terug. */
@media (prefers-reduced-transparency:reduce){
  header{background:var(--grond);backdrop-filter:none;border-bottom:1px solid var(--lijn)}
  header::after{display:none}
}

/* Meer contrast. Randen moeten dan te zíen zijn: de scheiding onder de balk wordt een echte lijn,
   en de omlijnde knop krijgt een rand die zich niet in de achtergrond verstopt. */
@media (prefers-contrast:more){
  header{background:var(--grond);backdrop-filter:none;border-bottom:1px solid var(--lijn-sterk)}
  header::after{display:none}
  .knop.lijn{border-color:var(--lijn-sterk)}
  a:hover{text-decoration-thickness:2px}
}