/* ==========================================================================
   tasmeem.it — sitestijl
   Overgenomen uit Designs/tasmeem.css. Bewuste verschillen met dat bestand:

   - Plus Jakarta Sans self-hosted i.p.v. Instrument Sans via Google Fonts
   - donker thema verwijderd (site is licht)
   - het #tw-schakelpaneel verwijderd; dat was ontwerpgereedschap
   - de varianten data-font / data-corners / data-density / data-svc zijn
     platgeslagen naar de gekozen defaults: rond, ruim, specialismen als lijst
   - data-rust is @media (prefers-reduced-motion: reduce) geworden, maar
     alléén voor de beweging. Het ontwerp verborg in die modus ook het
     hero-beeld en verruimde de regelafstand; dat hoort niet bij een
     bewegingsvoorkeur en is hier niet overgenomen.
   - <image-slot> is <img> geworden
   ========================================================================== */

/* ---- lettertype ---------------------------------------------------------- */
/* Gesubset met scripts/build-fonts.sh: latin + latin-ext, ~13K per gewicht. */
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- tokens -------------------------------------------------------------- */
/*
   Contrast — afwijking van de ontwerpbestanden, met opzet.

   De landingspagina belooft "teksten en knoppen met genoeg contrast, ook
   op een telefoon in de zon". Drie tokens uit het ontwerp haalden de
   4.5:1 voor gewone tekst niet:

     --mute  #9AA1AA op de achtergrond   2.35:1  (datums, metaregels)
     --ink-3 #6F7680 op de achtergrond   4.13:1  (specialismenlijst)
     --accent #3979F3 als tekst op wit   4.04:1  (links, knoplabels)

   De eerste twee zijn een tint donkerder gezet. Voor het blauw is
   --accent ongewijzigd gebleven — dat is de merkkleur en die wordt
   gebruikt voor vlakken, randen en iconen, waar 3:1 volstaat. Voor tekst
   en knoppen is --accent-sterk toegevoegd: #1F5BD1, óók een officiële
   kleur uit het merkpalet (t-blue-700 in Designs/system.css).
*/
:root{
  --accent:#3979F3;
  --accent-sterk:#1F5BD1;
  --bg:#F2F3F5;
  --surface:#FFFFFF;
  --ink:#15181D;
  --ink-2:#464C55;
  --ink-3:#636A73;
  --mute:#686F78;
  --line:#E4E6EA;
  --line-2:#CFD3D9;
  --field:#F7F8FA;
  --tint:color-mix(in srgb,var(--accent) 7%,var(--surface));
  --tint-line:color-mix(in srgb,var(--accent) 24%,var(--line));
  --r:18px;
  --r-sm:12px;
  --r-btn:12px;
  --gap:14px;
  --secpad:76px;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --soepel:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Ankersprongen mogen niet onder de plakkende navigatiebalk verdwijnen.
   --nav-h wordt door site.js gemeten, want de balk wordt hoger zodra het
   menu op smalle schermen naar een tweede regel valt. */
:target{scroll-margin-top:calc(var(--nav-h,74px) + 16px)}
[id]{scroll-margin-top:calc(var(--nav-h,74px) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent-sterk);text-decoration:none}
a:hover{opacity:.8}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em}
p{margin:0}
/* Container 1200 pixels: binnen de gangbare 1140 tot 1280, zodat de
   inhoud op een breed scherm niet uit elkaar getrokken wordt. */
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:760px){.wrap{padding:0 20px}body{font-size:16px}}
/* Onder 380 pixels wordt 20 pixels marge aan weerszijden te veel;
   dan blijft er te weinig over voor de tekst zelf. */
@media(max-width:380px){.wrap{padding:0 16px}.nav-in{padding:0 16px}}
.acc{color:var(--accent)}

/* Beeld dat een vaste verhouding moet vullen (was <image-slot>) */
.beeld img,.hero-f img,.artikel-beeld img,.breed img{width:100%;height:100%;object-fit:cover}
/* Het hero-kader snijdt boven en onder weg, want de foto is hoger dan
   het kader. Waar dat gebeurt bepaalt object-position.

   Stond op 18 procent. Dat sneed de bovenkant van het hoofd eraf: de
   foto begint al op 3 procent met de kruin, dus alles boven de 4 procent
   haalt daar een stuk vanaf. Nu 5 procent, en het kader is hoger, zodat
   er lucht boven het hoofd blijft. */
.hero-f img{object-position:50% 5%}

/* ---- knoppen ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 26px;border-radius:var(--r-btn);border:1px solid transparent;background:var(--accent-sterk);color:#fff;font:500 16px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:filter .18s,background .18s,border-color .18s,transform .15s}
.btn:hover{filter:brightness(1.07);color:#fff;opacity:1;transform:translateY(-1px)}
.btn.alt{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn.alt:hover{filter:none;border-color:var(--ink-3);color:var(--ink)}
.btn.sm{height:42px;padding:0 20px;font-size:15px}
.btn[disabled]{opacity:.4;pointer-events:none}
.ar{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;flex:none}

/* ---- navigatie ----------------------------------------------------------- */
.nav{padding:18px 0;position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.nav-in{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:32px}
.nav-in>a{display:flex;align-items:center;flex:none}
.nav-in>a>img{height:30px;width:auto;display:block}
/* Het menu vult de ruimte tussen het logo en de knop en staat daarin
   gecentreerd, in plaats van tegen het logo aan te plakken. */
.nav-l{display:flex;gap:26px;font-size:15px;flex:1;justify-content:center;align-items:center}
.nav-l a{color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;min-height:26px}
.nav-l a:hover{color:var(--ink);opacity:1}
/* De huidige pagina markeren met kleur en een streepje, niet met een
   zwaarder lettertype. Vetter zetten maakt het item breder, en dan
   verschuift het hele gecentreerde menu per pagina een paar pixels. */
.nav-l a[aria-current="page"]{color:var(--ink);position:relative}
.nav-l a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent-sterk);border-radius:2px}
.nav-r{flex:none}
/* Het paneel telt op een breed scherm niet mee: de menu-items en de knop
   staan dan rechtstreeks in de balk, precies zoals zonder paneel. */
.nav-paneel{display:contents}

/* De menuknop bestaat alleen op een smal scherm, en alleen als er
   JavaScript draait. Zonder script staat het menu gewoon in de balk. */
.nav-knop{display:none}

@media(max-width:1010px){
  .nav-in{padding:0 20px;gap:12px 16px;flex-wrap:wrap}
  /* De menuregel liep hiervoor zijwaarts weg: overflow-x met een
     verborgen scrollbalk. Op een telefoon van 390 pixels stond "Blog"
     dan half buiten beeld en "Contact" helemaal, zonder dat iets liet
     zien dat er meer was. Een menu dat je moet ontdekken is geen menu.
     Nu breekt de regel gewoon af, en staat alles er. */
  .nav-l{order:3;width:100%;gap:12px 20px;flex-wrap:wrap;justify-content:flex-start;flex:1 0 100%}
}

/* ---- menu op een telefoon en tablet -------------------------------------- */
/*
   Onder 1010 pixels past de balk niet meer op één regel. Hij viel eerst
   uit elkaar over meerdere regels: logo, knop, en daaronder de menu-items.
   Op een tablet werd de balk daardoor 117 pixels hoog, en die staat vast
   bovenaan, dus dat is 117 pixels die je op elke pagina kwijt bent.

   Nu gaat alles achter één knop. Dezelfde grens als waarop de balk
   anders zou afbreken, zodat er geen tussenstand bestaat waarin het half
   het een en half het ander is. De knop is minstens 44 pixels hoog, dat
   is de maat die met een duim te raken is. Het paneel schuift niet en
   fadet niet: het staat er, of het staat er niet.

   De regels hierboven voor max-width:1010px blijven staan als terugval
   voor een bezoeker zonder JavaScript. Die ziet geen knop maar het menu
   gewoon uitgeklapt in de balk.
*/
@media(max-width:1010px){
  .js-nav .nav-in{gap:0;justify-content:space-between;flex-wrap:nowrap}

  .js-nav .nav-knop{
    display:inline-flex;align-items:center;gap:9px;
    min-height:44px;padding:0 14px 0 12px;margin-right:-6px;
    background:none;border:1px solid transparent;border-radius:var(--r-btn);
    font:500 15px/1 var(--sans);color:var(--ink);cursor:pointer;
    transition:border-color .18s var(--soepel),background .18s var(--soepel);
  }
  .js-nav .nav-knop:hover{border-color:var(--line-2);background:var(--surface)}

  /* De drie streepjes zijn één element met twee schaduwen erboven en
     eronder. Bij open worden het twee gekruiste strepen. */
  .js-nav .nav-knop-streep{
    position:relative;display:block;width:20px;height:2px;border-radius:2px;
    background:var(--ink);
    box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink);
    transition:background .12s linear,box-shadow .12s linear;
  }
  .js-nav .nav-knop-streep::before,
  .js-nav .nav-knop-streep::after{
    content:"";position:absolute;left:0;top:0;width:20px;height:2px;border-radius:2px;
    background:var(--ink);opacity:0;transition:transform .18s var(--soepel),opacity .12s linear;
  }
  .js-nav .nav-knop[aria-expanded="true"] .nav-knop-streep{background:transparent;box-shadow:none}
  .js-nav .nav-knop[aria-expanded="true"] .nav-knop-streep::before{opacity:1;transform:rotate(45deg)}
  .js-nav .nav-knop[aria-expanded="true"] .nav-knop-streep::after{opacity:1;transform:rotate(-45deg)}

  .js-nav .nav-paneel{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--surface);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px -28px rgba(15,20,30,.55);
    padding:10px 20px 20px;
  }
  .js-nav .nav.open .nav-paneel{display:block}

  /* In het paneel staan de items onder elkaar, elk hoog genoeg om met een
     duim te raken. */
  /* align-items:stretch is hier nodig. De balk zet in de horizontale
     stand `align-items:center`, en in een kolom betekent datzelfde woord
     iets anders: dan gaan de items in het midden staan in plaats van dat
     ze de volle breedte pakken. De items en de scheidingslijnen stonden
     daardoor gecentreerd, als een lijstje in het midden van het scherm. */
  .js-nav .nav-paneel .nav-l{
    display:flex;flex-direction:column;align-items:stretch;
    gap:0;width:auto;flex:none;font-size:17px;
  }
  .js-nav .nav-paneel .nav-l a{
    min-height:52px;display:flex;align-items:center;color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .js-nav .nav-paneel .nav-l a:last-child{border-bottom:0}
  /* Het streepje onder de huidige pagina hoort bij de horizontale balk.
     In een lijst onder elkaar staat het over de scheidingslijn heen. */
  .js-nav .nav-paneel .nav-l a[aria-current="page"]::after{display:none}
  .js-nav .nav-paneel .nav-l a[aria-current="page"]{color:var(--accent-sterk);font-weight:500}

  .js-nav .nav-paneel .nav-r{margin-top:16px}
  .js-nav .nav-paneel .nav-r .btn{width:100%;height:50px;font-size:16px}
}

/* ---- hero ---------------------------------------------------------------- */
.hero{padding:calc(var(--secpad) - 8px) 0 var(--secpad)}
.hero-g{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:900px){.hero-g{grid-template-columns:1fr;gap:32px}}
/* Op een smal scherm was het kader 4:3, en dat is liggend terwijl de
   foto staand is. Er ging daardoor bijna de helft van de hoogte af, en
   dat is precies het deel waar het hoofd staat. Nu 4:5. */
.hero-f{margin:0;border-radius:var(--r);overflow:hidden;background:var(--field);border:1px solid var(--line);aspect-ratio:4/5;box-shadow:0 18px 44px -28px rgba(15,20,30,.42)}
/* 620 en niet 520: honderd pixels hoger, zodat de foto groter op de
   pagina staat en het hoofd er helemaal in past. Hoger kan niet, want
   dan wordt de hero langer dan een scherm van een laptop. */
@media(min-width:901px){.hero-f{aspect-ratio:5/6;max-height:620px;margin-left:auto;width:100%}}
.hero h1{font-size:clamp(38px,4.8vw,58px);line-height:1.05;margin-bottom:22px;text-wrap:balance;max-width:20ch}
.hero .lead{font-size:19.5px;color:var(--ink-2);max-width:46ch}
.hero-b{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
/* Hero zonder beeld (dienstpagina's, blog) vult de volle breedte */
.hero.enkel .hero-g{grid-template-columns:1fr}

/* ---- secties ------------------------------------------------------------- */
/* Secties delen de ruimte: onderaan volledig, bovenaan iets minder.
   Twee keer 76 pixels tussen twee secties leest als een gat. */
.sec{padding:calc(var(--secpad) * .62) 0 var(--secpad)}
.sec + .sec{padding-top:calc(var(--secpad) * .34)}
.sec-h{max-width:720px;margin-bottom:40px}
.sec-h h2{font-size:clamp(30px,3.8vw,46px);line-height:1.06;max-width:22ch;margin-bottom:14px;text-wrap:balance}
.sec-h p{color:var(--ink-2);font-size:18px}

/* ---- sectieaanduiding ----------------------------------------------------- */
/*
   Een kort label boven de kop, zodat je met scannen ziet waar je bent
   zonder elke kop te hoeven lezen. Dat helpt iedereen die een pagina eerst
   afspeurt voordat hij gaat lezen, en dat zijn er meer dan je denkt.
   Bewust geen hoofdletters: die lezen trager.
*/
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--accent-sterk);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent-sterk);border-radius:2px;flex:none}

/* ---- feitenbalk ------------------------------------------------------------ */
/*
   Vier harde feiten direct onder de hero. Wie een bureau zoekt, wil weten
   met wie hij te maken heeft voordat hij verder leest.
*/
.feiten{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
@media(max-width:820px){.feiten{grid-template-columns:1fr 1fr;gap:22px var(--gap)}}
@media(max-width:420px){.feiten{grid-template-columns:1fr}}
.feit{display:flex;flex-direction:column;gap:3px}
.feit b{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.feit span{font-size:14.5px;color:var(--ink-3)}

/* ---- hoofdkaarten -------------------------------------------------------- */
.hoofd{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:900px){.hoofd{grid-template-columns:1fr}}
.hoofd-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.hoofd-card:hover{border-color:var(--tint-line);transform:translateY(-2px)}
.hoofd-card .beeld{aspect-ratio:16/9;background:var(--field)}
.hoofd-card .body{padding:26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.hoofd-card h3{font-size:20px}
.hoofd-card p{color:var(--ink-3);font-size:15.5px}
.hoofd-card ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.hoofd-card li{font-size:13px;color:var(--ink-2);background:var(--field);border-radius:999px;padding:4px 12px}
.hoofd-card .meer{margin-top:auto;padding-top:16px;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:7px;color:var(--accent-sterk)}

/* ---- specialismen (lijstweergave) ---------------------------------------- */
.verder{margin-top:calc(var(--secpad) - 20px)}
.verder h3{font-size:20px;margin-bottom:20px;font-weight:600}
.verder-body{border-top:1px solid var(--line)}
.vitem{display:grid;grid-template-columns:280px 1fr;gap:24px;padding:18px 4px;border-bottom:1px solid var(--line);align-items:baseline}
.vitem b{font-weight:500;font-size:17px}
.vitem span{color:var(--ink-3);font-size:15.5px}
@media(max-width:760px){.vitem{grid-template-columns:1fr;gap:4px}}

/* ---- getint blok --------------------------------------------------------- */
.tintblok{background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r);padding:44px}
@media(max-width:760px){.tintblok{padding:28px 22px}}
.tintblok-g{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(max-width:900px){.tintblok-g{grid-template-columns:1fr;gap:24px}}
.tintblok h2{font-size:clamp(26px,3.2vw,38px);line-height:1.08;max-width:17ch;margin-bottom:14px}
.tintblok p{color:var(--ink-2);max-width:60ch}
.tintblok ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.tintblok li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:16px;color:var(--ink-2)}
.tintblok li svg{width:15px;height:15px;margin-top:6px;stroke:var(--accent);stroke-width:2.2;fill:none}

/* ---- stappen ------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:30px 26px}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
/* De streep boven elke stap loopt door, zodat de vier stappen als één
   reeks lezen in plaats van vier losse blokken. De eerste is gemarkeerd
   omdat je daar begint. */
.stp{border-top:2px solid var(--line-2);padding-top:20px}
.stp:first-child{border-top-color:var(--accent-sterk)}
.stp span{font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--accent-sterk);line-height:1;display:block}
.stp:nth-child(n+2) span{color:var(--ink-3)}
.stp h3{font-size:19px;margin:10px 0 8px}
.stp p{font-size:15.5px;color:var(--ink-3)}

/* ---- opsomming met accenten ---------------------------------------------- */
.punten{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media(max-width:820px){.punten{grid-template-columns:1fr}}
.punt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;display:flex;flex-direction:column;gap:8px}
.punt b{font-weight:500;font-size:17.5px}
.punt span{color:var(--ink-3);font-size:15.5px}

/* ---- breed beeld --------------------------------------------------------- */
.breed{aspect-ratio:16/7;border-radius:var(--r);overflow:hidden;background:var(--field);border:1px solid var(--line)}

/* ---- faq ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 4px;display:grid;grid-template-columns:1fr 20px;gap:20px;align-items:center;font-size:18px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;justify-self:end;background:var(--ink-3);clip-path:polygon(44% 0,56% 0,56% 44%,100% 44%,100% 56%,56% 56%,56% 100%,44% 100%,44% 56%,0 56%,0 44%,44% 44%);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--accent)}
.faq p{margin:0 4px 22px;color:var(--ink-2);font-size:16.5px;max-width:720px}

/* ---- verwante pagina's --------------------------------------------------- */
.verwant{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:820px){.verwant{grid-template-columns:1fr}}
.verwant a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:6px;color:var(--ink);transition:border-color .2s,transform .2s}
.verwant a:hover{border-color:var(--tint-line);transform:translateY(-2px);opacity:1}
.verwant b{font-weight:500;font-size:17.5px}
.verwant span{color:var(--ink-3);font-size:15px}

/* ---- cta ----------------------------------------------------------------- */
.ctablok{background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r);padding:44px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
@media(max-width:760px){.ctablok{grid-template-columns:1fr;padding:28px 22px}}
.ctablok h2{font-size:clamp(26px,3vw,38px);line-height:1.08;max-width:20ch;margin-bottom:12px}
.ctablok p{color:var(--ink-2);max-width:50ch}

/* ---- aanvraagflow -------------------------------------------------------- */
/* De linkerkolom draagt de kop "Vertel wat er speelt". Op 1.34fr voor het
   formulier bleef daar zo weinig over dat het laatste woord op een tweede
   regel viel. Op 1.1fr past de kop op één regel en houdt het formulier
   nog steeds ruim de helft. */
.flow-g{display:grid;grid-template-columns:minmax(280px,.66fr) 1.1fr;gap:40px;align-items:start}
@media(max-width:1000px){.flow-g{grid-template-columns:1fr;gap:28px}}
.flow-aside{position:sticky;top:96px}
@media(max-width:1000px){.flow-aside{position:static}}
.flow-aside h2{font-size:clamp(28px,3.4vw,42px);line-height:1.06;margin-bottom:16px;max-width:15ch}
.flow-aside p{color:var(--ink-2)}
.flow-aside .contactlijn{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-3);display:flex;flex-direction:column;gap:6px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:38px}
@media(max-width:600px){.card{padding:24px 20px}}
.ptop{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;color:var(--ink-3)}
.bar{height:3px;background:var(--field);border-radius:999px;overflow:hidden;margin:18px 0 30px}
.bar i{display:block;height:100%;background:var(--accent);width:20%;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.pane{display:none}
.pane.on{display:block;animation:fade .3s cubic-bezier(.2,.7,.2,1)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane h3{font-size:26px;line-height:1.14;margin-bottom:8px}
.pane .sub{color:var(--ink-3);font-size:15.5px;margin-bottom:26px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.opts{grid-template-columns:1fr}}
.opt{position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--field);border-radius:var(--r-sm);padding:14px 16px;cursor:pointer;font-size:16px}
.opt:hover{border-color:var(--line-2)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .tick{width:20px;height:20px;border-radius:6px;border:1px solid var(--line-2);flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface)}
.opt.radio .tick{border-radius:50%}
.opt .tick svg{width:12px;height:12px;stroke:#fff;stroke-width:2.6;fill:none;opacity:0}
.opt input:checked~.tick{background:var(--accent);border-color:var(--accent)}
.opt input:checked~.tick svg{opacity:1}
.opt:has(input:checked){border-color:var(--accent);background:var(--surface)}
/* Toetsenbordfocus moet zichtbaar zijn, ook al is de input zelf verborgen */
.opt:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.f{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.f label{font-size:15px;font-weight:500;color:var(--ink-2)}
.f input,.f textarea,.f select{font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;width:100%}
.f textarea{min-height:120px;resize:vertical;line-height:1.55}
.f input:focus,.f textarea:focus,.f select:focus{outline:0;border-color:var(--accent);background:var(--surface)}
.f input::placeholder,.f textarea::placeholder{color:var(--mute)}
.f input[type="file"]{padding:12px;font-size:14px;color:var(--ink-3)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.two{grid-template-columns:1fr}}
.review{background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 22px;margin-bottom:22px}
.review dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:15px}
.review dt{color:var(--ink-3)}
.review dd{margin:0}
.privacy{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2);cursor:pointer;margin-top:4px}
.privacy input{position:absolute;opacity:0;pointer-events:none}
.privacy .tick{width:20px;height:20px;border-radius:6px;border:1px solid var(--line-2);flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface);margin-top:2px}
.privacy .tick svg{width:12px;height:12px;stroke:#fff;stroke-width:2.6;fill:none;opacity:0}
.privacy input:checked~.tick{background:var(--accent);border-color:var(--accent)}
.privacy input:checked~.tick svg{opacity:1}
.privacy:focus-within{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.navb{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.navb .go{margin-left:auto}
.hint{font-size:13.5px;color:var(--mute);margin-top:14px}
.hint.err{color:#B02D1D}
.done{text-align:center;padding:22px 0 6px}
.done .circle{width:62px;height:62px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.done .circle svg{width:26px;height:26px;stroke:#fff;stroke-width:2.2;fill:none}
.done h3{font-size:30px;margin-bottom:12px}
.done p{color:var(--ink-3);max-width:42ch;margin:0 auto}

/* ---- footer -------------------------------------------------------------- */
.foot{padding:var(--secpad) 0 44px;font-size:15px;color:var(--ink-3)}
.foot-g{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px 32px}
@media(max-width:1100px){.foot-g{grid-template-columns:1fr 1fr 1fr;gap:36px 28px}}
@media(max-width:700px){.foot-g{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.foot-g{grid-template-columns:1fr}}
.foot img{height:30px;width:auto;margin-bottom:18px}
.foot .foot-kop{font-size:15px;font-weight:500;color:var(--ink);margin:0 0 14px;letter-spacing:0}
.foot-col{display:flex;flex-direction:column;gap:6px}
.foot-col a{color:var(--ink-3);display:inline-flex;align-items:center;min-height:26px}
.foot-soc{display:flex;gap:10px;margin-top:20px}
.foot-soc a{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:border-color .18s,color .18s}
.foot-soc a:hover{border-color:var(--accent);color:var(--accent);opacity:1}
.foot-soc svg{width:17px;height:17px;fill:currentColor}
.foot-regio{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.foot-regio .foot-kop{margin-bottom:12px}
.foot-regio .foot-kop a{color:var(--ink);display:inline-flex;align-items:center;min-height:26px}
.foot-regio .foot-kop a:hover{color:var(--accent-sterk);opacity:1}
.foot-regio-links{display:flex;flex-wrap:wrap;gap:2px 18px}
.foot-regio-links a{color:var(--ink-3);font-size:14.5px;display:inline-flex;align-items:center;min-height:26px}
.foot-regio-links a:hover{color:var(--accent-sterk);opacity:1}
.foot-b{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;font-size:14px;color:var(--mute)}
/* De juridische links en de feeds. Ruim uit elkaar, want ze staan naast
   elkaar op één regel en anders lezen ze als één lange zin. Elk raakvlak
   is minstens 24 pixels hoog, ook op een telefoon. */
.foot-b-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-b-links a{color:var(--ink-3);display:inline-flex;align-items:center;min-height:26px}
.foot-b-links a:hover{color:var(--ink);opacity:1}
@media(max-width:640px){
  .foot-b{flex-direction:column;gap:12px}
  .foot-b-links{gap:4px 20px}
}

/* ---- blog ---------------------------------------------------------------- */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:900px){.postgrid{grid-template-columns:1fr}}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;color:var(--ink);transition:border-color .2s,transform .2s}
.post:hover{border-color:var(--tint-line);transform:translateY(-2px);opacity:1}
.post .beeld{aspect-ratio:16/9;background:var(--field)}
.post .body{padding:24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post h3{font-size:20px;line-height:1.22}
.post p{color:var(--ink-3);font-size:15.5px}
.post .meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:12px;font-size:13.5px;color:var(--mute)}
.tag{font-size:13px;color:var(--accent-sterk);font-weight:500}
.uitgelicht{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;gap:var(--gap);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:var(--gap);color:var(--ink)}
@media(max-width:900px){.uitgelicht{grid-template-columns:1fr}}
.uitgelicht .beeld{position:relative;background:var(--field);min-height:300px}
.uitgelicht .beeld img{position:absolute;inset:0}
.uitgelicht .body{padding:38px;display:flex;flex-direction:column;gap:12px;justify-content:center}
@media(max-width:600px){.uitgelicht .body{padding:24px 20px}}
.uitgelicht h2{font-size:clamp(26px,3vw,36px);line-height:1.08;max-width:20ch}
.uitgelicht p{color:var(--ink-2)}
.leeg{border:1px dashed var(--line-2);border-radius:var(--r);padding:44px;text-align:center;color:var(--ink-3)}

/* ---- artikel ------------------------------------------------------------- */
/* Lopende tekst op 720 pixels: dat komt neer op ongeveer 65 tekens
   per regel, precies in het gebied waar je het prettigst leest. */
.prose{max-width:720px}
.prose p{margin:0 0 22px;font-size:17.5px;color:var(--ink-2);line-height:1.72}
.prose h2{font-size:28px;margin:40px 0 14px;color:var(--ink)}
.prose h3{font-size:21px;margin:32px 0 10px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 22px;padding-left:20px;color:var(--ink-2)}
.prose li{margin-bottom:8px}
.prose blockquote{margin:28px 0;padding:20px 24px;background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-sm);color:var(--ink-2);font-size:17.5px}
.prose blockquote p:last-child{margin-bottom:0}
.prose img{border-radius:var(--r-sm);margin:0 0 22px}
.prose figure{margin:0 0 22px}
.prose figcaption{font-size:14.5px;color:var(--ink-3);margin-top:8px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.artikel-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14.5px;color:var(--ink-3);margin-bottom:28px}

/* ---- artikelkop: gecentreerd -------------------------------------------- */
/* De kop van een artikel staat midden op de pagina, de lopende tekst
   eronder blijft links uitgelijnd in een kolom van 720 pixels. Een
   gecentreerde titel werkt bij één blok van een paar regels; gecentreerde
   lopende tekst niet, want dan verspringt het beginpunt van elke regel en
   moet je oog hem elke keer opnieuw zoeken. */
/* Meer lucht tussen het uitgelichte artikel en het raster eronder. Op
   --gap (14px) plakten ze aan elkaar en las het als één blok van vier
   kaarten in plaats van als één uitgelicht artikel met de rest eronder. */
.uitgelicht{margin-bottom:44px}
@media(max-width:900px){.uitgelicht{margin-bottom:28px}}

/* De leeskolom van een artikel midden op de pagina. De kolom blijft 720
   pixels breed, want dat is de leesbreedte; alleen de lege ruimte wordt
   links en rechts gelijk verdeeld in plaats van helemaal rechts te staan. */
.prose-midden{margin-left:auto;margin-right:auto}

.artikel-kop{text-align:center}
.artikel-kop h1{margin-left:auto;margin-right:auto;text-wrap:balance}
.artikel-kop .artikel-meta{justify-content:center;margin-bottom:0}

/* Het label boven de titel. Een gevuld bolletje ervoor, zoals in de rest
   van de site bij .punt. Het is een blokje en geen link: de categorie
   heeft geen eigen pagina die de moeite waard is. */
.artikel-label{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  background:var(--tint);border:1px solid var(--tint-line);color:var(--accent-sterk);
  font-size:13px;font-weight:500;margin-bottom:20px}
.artikel-label::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* De pictogrammen bij datum en leestijd. aria-hidden in het sjabloon, want
   "10 augustus 2026" zegt zelf al dat het een datum is. */
.artikel-meta span{display:inline-flex;align-items:center;gap:7px}
.artikel-meta svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.8}

/* ---- uitgevulde lopende tekst ------------------------------------------- */
/* Uitvullen ziet er verzorgd uit maar duwt de spaties uit elkaar. Zonder
   afbreken levert dat witte rivieren door de alinea, en bij Nederlandse
   samenstellingen als "toegankelijkheidsrichtlijn" wordt dat gat een halve
   regel breed. hyphens:auto laat de browser afbreken volgens de
   woordenboekregels van de taal in het lang-attribuut, en dat is precies
   wat uitvullen leesbaar houdt. Ze horen bij elkaar; zet er nooit één van
   de twee los neer. */
/* hyphenate-limit-chars is geprobeerd om de uitschieters te temmen en gaf
   gemeten geen enkel verschil; de standaard van Chrome breekt al net zo
   ruim. Niet opnieuw toevoegen. */
.prose p,.prose li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* Niet uitvullen waar het misgaat: één losse regel wordt uitgerekt tot de
   volle breedte, en een adres of stuk code mag nooit afgebroken worden. */
.prose blockquote p:only-child,.prose figcaption,.prose code,.prose pre{text-align:left;hyphens:manual}

/* De openingsalinea zwaarder zetten. Dat geeft de lezer een samenvatting
   voordat hij besluit door te lezen, en het breekt de muur tekst. */
.prose>p:first-of-type{font-size:19px;font-weight:600;color:var(--ink);line-height:1.62}
.artikel-beeld{aspect-ratio:16/7;border-radius:var(--r);overflow:hidden;background:var(--field);border:1px solid var(--line);margin-bottom:var(--secpad)}

/* ---- paginering ---------------------------------------------------------- */
.pager{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--gap);justify-content:center}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);font-size:15px}
.pager .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}
.pager a.page-numbers:hover{border-color:var(--ink-3);opacity:1}

/* ---- locatiepagina's ------------------------------------------------------ */
.kruimels{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:14.5px;color:var(--ink-3);margin-bottom:22px}
.kruimels a{color:var(--ink-3);display:inline-flex;align-items:center;min-height:26px}
.kruimels a:hover{color:var(--accent-sterk);opacity:1}
.kruimels span[aria-hidden]{color:var(--line-2)}
.kruimels [aria-current]{color:var(--ink-2)}
.plaatsen{display:flex;flex-wrap:wrap;gap:10px}
.plaatsen a{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:15.5px;color:var(--ink-2);transition:border-color .2s var(--soepel),color .2s var(--soepel)}
.plaatsen a:hover{border-color:var(--accent-sterk);color:var(--accent-sterk);opacity:1}

/* ---- contactpagina -------------------------------------------------------- */
/* Vier kaarten sinds bellen en appen uit elkaar zijn gehaald. auto-fit in
   plaats van een vast aantal kolommen: op 1200 pixels staan ze met z'n
   vieren naast elkaar, daaronder vallen ze vanzelf naar twee en dan naar
   één, zonder dat er een losse kaart onderaan overblijft. */
.contactkaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--gap)}
@media(max-width:620px){.contactkaarten{grid-template-columns:1fr}}
.contactkaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;display:flex;flex-direction:column;gap:6px;color:var(--ink);transition:border-color .2s var(--soepel),transform .2s var(--soepel),box-shadow .2s var(--soepel)}
.contactkaart:hover{border-color:var(--tint-line);transform:translateY(-2px);opacity:1;box-shadow:0 12px 28px -20px rgba(15,20,30,.45)}
.contactkaart-label{font-size:13px;font-weight:500;color:var(--accent-sterk);display:inline-flex;align-items:center;gap:7px}
/* WhatsApp houdt zijn eigen groen, ook in een knop met een andere kleur. */
.ic-wa{width:18px;height:18px;flex:none}
.contactkaart-label .ic-wa{width:16px;height:16px}
.btn-wa .ic-wa{width:19px;height:19px}
.btn.alt.btn-wa:hover{border-color:#25D366}
.contactkaart b{font-weight:500;font-size:19px;letter-spacing:-.01em}
.contactkaart>span:last-child{color:var(--ink-3);font-size:15px}

/* Bericht en agenda naast elkaar. Onder de 1000 pixels onder elkaar,
   want twee kolommen van 400 pixels leest geen van beide prettig. */
/* De twee kolommen worden even hoog. Zo eindigen het formulier en de
   agenda op dezelfde lijn in plaats van dat de een halverwege de ander
   ophoudt. */
.contact-duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:stretch}
.contact-duo.enkel{grid-template-columns:minmax(0,700px)}
@media(max-width:1000px){.contact-duo{grid-template-columns:1fr;gap:52px}}
.contact-kolom{min-width:0;display:flex;flex-direction:column}
/* Het kaartje en de agenda vullen wat er onder de kop overblijft. */
.contact-kolom .card{flex:1}
.contact-kolom h2{font-size:clamp(24px,2.6vw,30px);line-height:1.12;margin-bottom:10px}
.contact-kolom-lead{color:var(--ink-2);margin-bottom:22px;max-width:46ch}
.contact-kolom .card{padding:30px}
@media(max-width:600px){.contact-kolom .card{padding:24px 20px}}
/* De agenda rekt mee met de kolom.
   De ondergrens is 610 pixels. Dat is precies wat de kalender nodig heeft
   zonder eigen scrollbalk, gemeten met hide_event_type_details aan (zie
   page-contact.php). Hoger zetten is verleidelijk maar levert onder de
   kalender een lege strook op, en dan wordt de hele pagina te lang. */
.contact-kolom .agenda{flex:1;display:flex;min-height:610px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.contact-kolom .agenda .calendly-inline-widget{flex:1;height:auto;border:0;border-radius:0}

.agenda{margin-top:8px}
.agenda-uitleg{margin-top:14px;max-width:70ch}
.agenda-aanzet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:38px;max-width:62ch}
@media(max-width:600px){.agenda-aanzet{padding:26px 22px}}
.agenda-aanzet p{color:var(--ink-2);margin-bottom:22px}
.agenda-aanzet .hint{margin-top:18px;margin-bottom:0}
.agenda .calendly-inline-widget{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.agenda .calendly-inline-widget:focus{outline:2px solid var(--accent-sterk);outline-offset:3px}

/* ---- beweging ------------------------------------------------------------- */
/*
   Terughoudend gehouden: één beweging per element, kort, en altijd van
   onder naar boven. Niets dat blijft bewegen, niets dat op zichzelf begint
   te lopen. Dat is een keuze voor lezers die snel afgeleid raken — een
   pagina waar dingen uit zichzelf blijven bewegen is voor hen niet te
   gebruiken, en voor de rest voegt het niets toe.

   Alles hieronder is opgehangen aan .reveal, die site.js pas zet als
   IntersectionObserver beschikbaar is. Zonder JavaScript staat alles
   gewoon zichtbaar.
*/
.js-reveal .reveal{opacity:0;transform:translateY(14px)}
.js-reveal .reveal.zichtbaar{opacity:1;transform:none;transition:opacity .5s var(--soepel),transform .5s var(--soepel)}
/* Kaarten in een rij komen kort na elkaar, niet allemaal tegelijk. */
.js-reveal .reveal[data-vertraging="1"].zichtbaar{transition-delay:.07s}
.js-reveal .reveal[data-vertraging="2"].zichtbaar{transition-delay:.14s}
.js-reveal .reveal[data-vertraging="3"].zichtbaar{transition-delay:.21s}

/* De hero staat er meteen, zonder wachten op een observer. */
.hero-t>*{animation:opkomst .55s var(--soepel) both}
.hero-t>*:nth-child(2){animation-delay:.06s}
.hero-t>*:nth-child(3){animation-delay:.12s}
.hero-f{animation:opkomst .65s var(--soepel) .1s both}
@keyframes opkomst{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* De plakkende balk krijgt pas een rand zodra er iets onder verdwijnt. */
.nav{transition:box-shadow .25s var(--soepel),border-color .25s var(--soepel);border-bottom:1px solid transparent}
.nav.vast{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(15,20,30,.5)}

/* Onderstreping die meegroeit, alleen in lopende tekst.
   Niet op .meer: dat is een flexblok dat de volle kaartbreedte pakt, dus
   de streep liep door tot achter de pijl en tot aan de rand van de kaart. */
.prose a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s var(--soepel);text-decoration:none}
.prose a:hover{background-size:100% 1px}

/* De "meer"-link krimpt tot de tekst; de streep zit op de tekst zelf. */
.meer{align-self:flex-start;width:fit-content;text-decoration:none}
.meer>span{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s var(--soepel)}
.meer:hover>span{background-size:100% 1px}
.meer .ar{transition:transform .2s var(--soepel)}
.meer:hover .ar,.btn:hover .ar,.contactkaart:hover .ar{transform:translateX(3px)}

.faq summary{transition:color .18s var(--soepel)}
.faq summary:hover{color:var(--accent-sterk)}
.faq details[open] summary{color:var(--ink)}

/* ---- toegankelijkheid ---------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);padding:12px 18px;border-radius:var(--r-btn);box-shadow:0 8px 24px rgba(0,0,0,.12)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/*
   Wie in zijn systeem heeft aangegeven weinig beweging te willen, krijgt
   hier een stilstaande site. Dat is precies de knop die mensen met
   migraine, vestibulaire klachten of prikkelgevoeligheid gebruiken, dus
   die blijft werken — de animaties hierboven zijn voor iedereen die hem
   niet heeft aangezet.
*/
@media (prefers-reduced-motion: reduce){
  /*
     Alleen bewéging weghalen, niet elke overgang.

     De vorige versie zette transition-duration op nul voor alles. Daarmee
     verdwenen ook kleur-, rand- en schaduwovergangen, en dan voelt de hele
     site dood aan terwijl daar geen reden voor is. Wat mensen met deze
     voorkeur hindert is verplaatsing en schaal, niet een knop die van
     kleur wisselt.

     Dus: geen verschuiving, geen opkomst. Wel kleur, rand, schaduw en een
     korte overvloeier.
  */
  html{scroll-behavior:auto}
  .hoofd-card:hover,.post:hover,.verwant a:hover,.btn:hover,.contactkaart:hover{transform:none}
  .meer:hover .ar,.btn:hover .ar,.contactkaart:hover .ar{transform:none}
  .js-reveal .reveal{transform:none}
  .js-reveal .reveal.zichtbaar{transform:none;transition:opacity .3s linear}
  .hero-t>*,.hero-f{animation:vervaag .3s linear both}
  @keyframes vervaag{from{opacity:0}to{opacity:1}}
}

/* ---- hoog contrast in Windows ------------------------------------------- */
/*
   Windows heeft een stand waarin de gebruiker zelf de kleuren bepaalt:
   vaak wit op zwart, of geel op zwart. De browser gooit dan onze kleuren
   weg en zet die van de gebruiker ervoor in de plaats. Dat is precies de
   bedoeling en we vechten er niet tegen.

   Twee dingen gaan in die stand wel stuk en die repareren we hier.
   Achtergrondafbeeldingen worden weggehaald, dus een vinkje dat als
   achtergrond staat verdwijnt. En scheidingen die alleen uit een schaduw
   of een lichtgrijs vlak bestaan zijn er niet meer, dus kaarten lopen in
   elkaar over.
*/
@media (forced-colors: active){
  /* Randen die anders alleen uit een schaduw bestonden. */
  .hoofd-card,.post,.card,.tintblok,.breed,.verwant a,.ctablok,.contactkaart,
  .agenda-aanzet,.faq details,.feit,.stp,.punt{
    border:1px solid CanvasText;
  }

  /* De focusring hoort de systeemkleur te volgen, anders valt hij weg. */
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
  select:focus-visible,summary:focus-visible{outline-color:Highlight}

  /* Doorzichtige balk met vervaging bestaat hier niet; maak hem dekkend
     zodat de tekst eronder er niet doorheen leest. */
  .nav{background:Canvas;backdrop-filter:none;border-bottom:1px solid CanvasText}

  /* Een knop moet er als knop uitzien, ook zonder onze achtergrond. */
  .btn{border:1px solid ButtonText}
}

/* ---- leesbaarheid en stabiliteit ---------------------------------------- */
/*
   text-wrap: pretty voorkomt dat de laatste regel van een alinea uit een
   enkel woord bestaat. Op koppen staat al `balance`, dat de regels even
   lang maakt; voor lopende tekst is `pretty` de juiste variant, want die
   houdt de leessnelheid gelijk en kijkt alleen naar het einde.
*/
p,li,dd,figcaption,.lead,.prose{text-wrap:pretty}
h3,h4,.faq summary{text-wrap:balance}

/*
   De scrollbalk krijgt vaste ruimte. Zonder deze regel is een korte
   pagina zonder balk een paar pixels breder dan een lange pagina met
   balk, en verspringt de hele inhoud bij het wisselen van pagina.
*/
html{scrollbar-gutter:stable}

/*
   Bij tabben mag het element waar de focus op komt niet onder de
   plakkende balk schuiven. scroll-margin-top op [id] regelt dat voor
   ankers; scroll-padding-top regelt het voor alles wat de browser zelf
   in beeld schuift, en dat is precies wat er bij toetsenbordgebruik
   gebeurt. WCAG 2.2 noemt dit "focus niet afgedekt".
*/
html{scroll-padding-top:calc(var(--nav-h,74px) + 16px)}

/* ---- kleine tekst op een telefoon --------------------------------------- */
/*
   Op een breed scherm mag een label of een chip 13 pixels zijn: je zit er
   dicht op en je leest hem in één oogopslag. Op een telefoon niet. Daar
   is 13 pixels het formaat waarbij mensen gaan inzoomen, en dan
   verschuift de hele pagina.

   Veertien pixels is de ondergrens die we aanhouden. Meer wordt het niet,
   want dan gaan de chips over twee regels en verliezen ze hun vorm.
*/
@media(max-width:1010px){
  .hoofd-card li,.contactkaart-label,.tag{font-size:14px}
  .hint,.post .meta{font-size:14px}
}

/* ---- knoppen met een lang label ------------------------------------------ */
/*
   Een knoplabel komt uit een veld en kan langer zijn dan bedacht. Op een
   breed scherm valt dat niet op; op 390 pixels liep de knop 76 pixels
   buiten het scherm en moest de hele pagina zijwaarts scrollen.

   Vanaf hier mag een knop over meerdere regels. De hoogte wordt dan een
   ondergrens in plaats van een vaste maat. Op een breed scherm blijft
   alles zoals het was.
*/
@media(max-width:760px){
  .btn{
    white-space:normal;text-align:center;
    height:auto;min-height:52px;padding:12px 22px;line-height:1.3;
    max-width:100%;
  }
  .btn.sm{min-height:44px;padding:10px 18px}
  .hero-b{flex-wrap:wrap}
  .hero-b .btn{flex:1 1 100%}
}

/* ---- de vraag in plaats van de agenda ------------------------------------ */
/*
   Staat er waar anders de agenda staat, en is dus even hoog. Zonder die
   hoogte springt de pagina zodra iemand op "Agenda laden" klikt.
*/
.agenda-vraag{
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:34px 32px;width:100%;
}
.agenda-vraag h3{font-size:20px;line-height:1.25;margin:0}
.agenda-vraag p{color:var(--ink-2);margin:0;max-width:46ch}
.agenda-vraag .hint{margin:0}
.agenda-vraag .btn{align-self:flex-start}
@media(max-width:600px){.agenda-vraag{padding:26px 22px}}

/* ---- logostraat ---------------------------------------------------------- */
/*
   Klantlogo's onder de hero. Zie template-parts/sections/logostraat.php
   voor waarom dit de enige plek is waar iets uit zichzelf beweegt.

   De maatvoering: elk logo krijgt dezelfde hoogte en dezelfde ruimte
   eromheen. Logo's verschillen enorm in vorm, en zonder een vast kader
   wordt het een rij van willekeurige blokjes. scripts/build-logos.py
   zet ze vooraf al op één hoogte; deze regels zijn het vangnet.
*/
/* Dicht tegen de hero aan, en met wat meer lucht eronder. De rij hoort
   bij de kop van de pagina, niet bij de sectie die erna komt. Zonder kop
   erboven mag hij ook hoger staan dan eerst. */
.straat-sec{padding-top:calc(var(--secpad) * .18);padding-bottom:calc(var(--secpad) * .62);overflow:hidden}
/* De pauzeknop is eruit. De opmaak blijft staan voor als hij terugkomt. */
.straat-bediening{display:flex;justify-content:flex-start;margin-top:18px}

/* Ruimte boven en onder de rij. Het maskervlak hieronder knipt alles weg
   wat buiten dit blok valt, en zonder die ruimte werd een logo dat bij
   aanwijzen zes procent groeit aan de boven- en onderkant afgesneden. */
.straat{position:relative;display:flex;width:100%;padding:14px 0}
/* Zonder beweging: gewoon een rij die afbreekt, netjes gecentreerd. */
.straat:not(.straat-loopt) .straat-rij{flex-wrap:wrap;justify-content:center}

/* Ruim uit elkaar. Logo's die dicht op elkaar staan lezen als één
   plaatje in plaats van als losse klanten. */
.straat-rij{display:flex;align-items:center;gap:clamp(64px,8vw,132px);flex:none;padding:0 clamp(32px,4vw,66px)}

.straat-item{
  display:flex;align-items:center;justify-content:center;
  height:78px;flex:none;
  /* Grijs, en pas kleur bij aanwijzen. Een rij logo's in twintig
     verschillende kleuren trekt de aandacht weg van de tekst eromheen. */
  filter:grayscale(1);opacity:.62;
  transition:filter .25s var(--soepel),opacity .25s var(--soepel);
}
.straat-item img{max-height:78px;width:auto;height:auto;max-width:260px;object-fit:contain;transition:transform .25s var(--soepel)}
/* Bij aanwijzen komt de kleur terug en wordt het logo iets groter.
   Let op de selector: dit stond eerst op `a.straat-item`, en zolang het
   portfolio offline staat is elk item een <span>. Daardoor deed het
   aanwijzen niets. */
.straat-item:hover,.straat-item:focus-visible{filter:grayscale(0);opacity:1}
.straat-item:hover img{transform:scale(1.06)}
.straat-item:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}

/* De beweging zelf. --straat-duur wordt door site.js gezet op basis van
   het aantal logo's, zodat de snelheid gelijk blijft of het er nu vijf
   of vijftien zijn. */
@keyframes straat-loop{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.js-straat .straat-loopt .straat-rij{animation:straat-loop var(--straat-duur,40s) linear infinite}
.js-straat .straat-loopt:hover .straat-rij,
.js-straat .straat-loopt:focus-within .straat-rij,
.js-straat .straat-loopt.straat-pauze .straat-rij{animation-play-state:paused}

/* Randen die vervagen, zodat de logo's niet hard afgesneden lijken. */
.straat-loopt{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

.straat-knop{
  display:inline-flex;align-items:center;gap:8px;min-height:32px;
  padding:0 12px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  font:500 14px/1 var(--sans);
  transition:border-color .18s var(--soepel),color .18s var(--soepel);
}
.straat-knop:hover{border-color:var(--ink-3);color:var(--ink)}
/* Twee streepjes bij "pauzeer", een driehoek bij "afspelen".
   Twee losse balkjes gaan niet met één clip-path: dat werd een vlag.
   Met twee randen op een leeg vlak wel. */
.straat-knop-ico{width:10px;height:11px;background:none;
  border-left:3px solid currentColor;border-right:3px solid currentColor}
.straat-knop[aria-pressed="true"] .straat-knop-ico{
  border:0;background:currentColor;clip-path:polygon(0 0,10px 5.5px,0 11px)}

.straat-meer{margin-top:26px}
/* De link is een raakvlak, dus minstens 24 pixels hoog. Hij was 21.
   min-height doet niets op een inline element, vandaar inline-flex. */
.straat-meer .meer{display:inline-flex;min-height:26px;align-items:center;gap:7px}

@media(max-width:760px){
  .straat-item,.straat-item img{height:58px;max-height:58px}
  .straat-item img{max-width:190px}
  .straat-bediening{margin-top:14px}
}

/* Wie minder beweging wil, krijgt een stilstaande rij. Niet een langzame
   rij: helemaal stil. En dan ook zonder de vervagende randen, want die
   suggereren dat er nog iets buiten beeld staat te wachten. */
@media (prefers-reduced-motion: reduce){
  /*
     De logostraat is hier de uitzondering op de uitzondering.

     Eerst stond hij hier helemaal stil. Dat is netter, maar het gevolg
     was dat de eigenaar van deze site zelf nooit zag dat hij bewoog: die
     heeft de animatie-effecten van Windows uitgezet, en dan geldt deze
     regel. Op zijn verzoek loopt hij nu ook in deze stand.

     Wat er tegenover staat en waarom dat verantwoord is: richtlijn 2.2.2
     van WCAG vraagt om een manier om beweging te stoppen, niet om
     afwezigheid van beweging. Die manier is er, en hij is hier
     nadrukkelijk aanwezig:

       - de pauzeknop staat er (die verdween hier eerst);
       - de rij stopt zodra de muis erop komt of iets erin focus krijgt;
       - hij loopt langzaam, twintig pixels per seconde;
       - het is het enige dat op de hele site uit zichzelf beweegt.

     Wil je hem hier tóch stil, zet dan de regel `animation:none`
     hieronder terug.
  */
  .straat-loopt .straat-rij{animation-duration:calc(var(--straat-duur, 60s) * 1.6)}
}

@media (forced-colors: active){
  .straat-item{filter:none;opacity:1}
  .straat-knop{border-color:ButtonText}
}

/* ---- portfolio ----------------------------------------------------------- */
/*
   Twee soorten kaarten in één raster. Een project met een eigen pagina is
   een <a> en reageert op aanwijzen; een project zonder beeldmateriaal is
   een <div> en doet niets. Dat verschil moet je kunnen zien zonder erop te
   klikken, anders klikt iedereen een keer mis.
*/
/* align-items:start: een kaart wordt zo hoog als zijn eigen inhoud.
   Zonder deze regel rekt elke kaart mee met de langste in de rij, en dan
   staat er onder een project zonder omschrijving een leeg vlak van
   honderd pixels. */
.werkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:start}
@media(max-width:900px){.werkgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.werkgrid{grid-template-columns:1fr}}

.werkkaart{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;color:inherit;
  transition:border-color .2s var(--soepel),box-shadow .2s var(--soepel),transform .2s var(--soepel);
}
a.werkkaart:hover{
  border-color:var(--line-2);opacity:1;transform:translateY(-2px);
  box-shadow:0 16px 34px -26px rgba(15,20,30,.5);
}
a.werkkaart:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Het logo krijgt een eigen vlak met een vaste hoogte, zodat kaarten met
   een breed en een smal logo even hoog blijven. */
.werkkaart-logo{
  display:flex;align-items:center;justify-content:center;
  height:118px;padding:24px;background:var(--field);border-bottom:1px solid var(--line);
}
.werkkaart-logo img{max-height:52px;max-width:80%;width:auto;height:auto;object-fit:contain}
.werkkaart-naam{font-size:19px;font-weight:600;color:var(--ink-2);letter-spacing:-.02em}

.werkkaart-body{display:flex;flex-direction:column;gap:8px;padding:22px;flex:1}
.werkkaart-body h2{font-size:19px;line-height:1.25}
.werkkaart-body p{color:var(--ink-2);font-size:15.5px}
/* Geen margin-top:auto meer: dat duwde de metaregel naar de onderkant
   van een kaart die toch al te hoog was. */
.werkkaart-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--mute);padding-top:4px}
.werkkaart .meer{margin-top:10px;font-size:15px;color:var(--accent-sterk)}

/* Zonder eigen pagina: geen schaduw bij aanwijzen, en de cursor blijft
   een pijl. Iets subtieler zodat het niet als "kapot" leest. */
.werkkaart-stil{background:var(--surface)}
.werkkaart-stil .werkkaart-logo{background:var(--surface)}

/* ---- één project --------------------------------------------------------- */
.werk-hero-logo{display:flex;align-items:center;height:56px;margin-bottom:22px}
.werk-hero-logo img{max-height:56px;max-width:220px;width:auto;height:auto;object-fit:contain}
.werk-feiten{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px var(--gap);
  margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line);
}
@media(max-width:760px){.werk-feiten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.werk-feiten dt{font-size:14px;color:var(--mute);margin-bottom:3px}
.werk-feiten dd{margin:0;font-size:16px;color:var(--ink);font-weight:500}
.werk-beeld{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/7}

/* ---- cookiemelding ------------------------------------------------------- */
/*
   Complianz levert zijn eigen opmaak. Drie dingen zetten we recht: het
   lettertype, de tekstgrootte van de twee links onderaan (die stonden op
   12 pixels, en de site houdt 14 aan als ondergrens), en de knoppen in
   dezelfde vorm als de rest van de site.
*/
#cmplz-cookiebanner-container .cmplz-cookiebanner{font-family:var(--sans)}
#cmplz-cookiebanner-container .cmplz-links a,
#cmplz-cookiebanner-container .cmplz-documents a{font-size:14px;color:var(--accent-sterk)}
#cmplz-cookiebanner-container .cmplz-btn{
  font-family:var(--sans);font-weight:500;font-size:15px;
  min-height:44px;border-radius:var(--r-btn);
}
#cmplz-cookiebanner-container .cmplz-message{font-size:15px;line-height:1.55;color:var(--ink-2)}
#cmplz-cookiebanner-container .cmplz-title{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
/* De melding staat rechtsonder, waar ook de WhatsApp-knop staat. Zolang
   de melding er is, schuift die knop een stukje op. */
.cmplz-show .joinchat{bottom:calc(var(--joinchat-bottom, 20px) + 40px)}

/* ---- taalkeuze in de balk ------------------------------------------------ */
/*
   Alleen vlaggen, naast elkaar. De huidige taal staat er vol op, de
   andere wat lichter tot je erover gaat. Het raakvlak is 32 bij 32
   pixels, ook al is de vlag zelf 24 breed: kleiner is met een duim niet
   te raken.
*/
.nav-r{display:flex;align-items:center;gap:14px}
.nav-taal{display:flex;align-items:center;gap:4px}
.taal-vlag{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:32px;border-radius:6px;
  transition:opacity .18s var(--soepel),background .18s var(--soepel);
}
.taal-vlag img,.taal-vlag .vlag{width:24px;height:16px;border-radius:2px;display:block}
.vlag-code{font:600 12px/1 var(--sans);letter-spacing:.04em}
a.taal-vlag{opacity:.55}
a.taal-vlag:hover,a.taal-vlag:focus-visible{opacity:1;background:var(--surface)}
.taal-nu{opacity:1}
a.taal-vlag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Op een telefoon staat de taalkeuze in het uitklapmenu, boven de knop. */
@media(max-width:1010px){
  .js-nav .nav-paneel .nav-r{flex-direction:column;align-items:stretch;gap:14px}
  .js-nav .nav-paneel .nav-taal{justify-content:flex-start;gap:6px}
}

@media (forced-colors: active){
  .taal-vlag{opacity:1}
  .taal-nu{outline:2px solid CanvasText;outline-offset:-2px}
}