/* Hoofdmenu, gedeeld door alle pagina's (kopbalk en mobiel menu).
   Een lichte balk met een wit pilletje op het onderdeel waar je bent, zoals de tabbladen in het platform.
   Bij aanwijzen schuift er een zachte markering mee. Script: /menu.js (welk tabblad actief is, en op de
   homepage meeschuiven met het onderdeel in beeld). Kleuren komen uit de tokens van de pagina. */

nav.topnav{position:relative;display:flex;align-items:center;gap:2px;padding:4px;border-radius:13px;
  background:color-mix(in srgb,var(--ink) 5%,transparent);isolation:isolate}
nav.topnav>a{position:relative;z-index:2;display:inline-flex;align-items:center;height:34px;padding:0 13px;
  border-radius:9px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;line-height:1;
  white-space:nowrap;transition:color .2s ease}
nav.topnav>a:hover,nav.topnav>a[aria-current]{color:var(--ink)}
nav.topnav>a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Knoppen in de kopbalk nooit over twee regels (anders knijpt de balk "Plan een demo" samen). */
.hdr-actions>a,.hdr-actions>.btn{white-space:nowrap;flex:none}
.topnav-pil,.topnav-zweef{position:absolute;top:4px;left:0;width:0;height:34px;border-radius:9px;pointer-events:none;opacity:0}
.topnav-pil{z-index:1;background:var(--surface);box-shadow:0 1px 2px rgba(18,31,54,.08),0 4px 12px -6px rgba(18,31,54,.22)}
.topnav-zweef{z-index:0;background:color-mix(in srgb,var(--ink) 6%,transparent)}
nav.topnav.klaar .topnav-pil{transition:transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),opacity .25s ease}
nav.topnav.klaar .topnav-zweef{transition:transform .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1),opacity .2s ease}
nav.topnav .topnav-zweef.direct{transition:opacity .2s ease}

/* Mobiel menu: het actieve onderdeel in de merkkleur met een stip. */
.mobile-nav-panel nav a[data-nav]{display:flex;align-items:center;gap:10px}
.mobile-nav-panel nav a[aria-current]{color:var(--accent-tekst,#0B735E)}
.mobile-nav-panel nav a[aria-current]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:auto;flex:none}

/* Op een klein laptopscherm eerst de tekst van Inloggen weg (het pictogram blijft), daarna de kleinere maat.
   Onder 1000 px neemt het menuknopje het over (zie onderaan). */
@media (max-width:1230px){
  .hdr-actions>.hdr-login span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* alleen visueel: de link houdt zijn naam */
}
@media (max-width:1120px){
  nav.topnav>a{padding:0 10px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  nav.topnav.klaar .topnav-pil,nav.topnav.klaar .topnav-zweef,nav.topnav>a{transition:none}
}

/* Onder 1000 px passen de zeven tabbladen niet meer naast taal, inloggen en demo: dan neemt het
   menuknopje het over (tot 880 px regelt elke pagina dat ook zelf). Het menuscript van de pagina sluit
   het open menu pas boven deze grens. */
@media (max-width:1000px){
  nav.topnav{display:none!important}
  .hdr-burger{display:inline-flex!important}
  header>div:first-child,.headbar{grid-template-columns:1fr auto!important}
  .hdr-actions>[data-lang-switch],.hdr-actions>.lang-switch,.hdr-actions>.taalkeuze,.hdr-actions>.hdr-login,.hdr-actions>.hdr-cta,.hdr-actions>.btn{display:none!important}
}

/* Rechts in de kopbalk: alleen "Plan een demo" is een gevulde knop. Inloggen is een rustige tekstlink en de taal
   een wereldbol met de taalcode; een klik opent een klein menu (gedrag in /menu.js). De sterkere selectors zijn
   nodig omdat de pagina's taalknoppen met !important wit kleuren (voor de schuifknop in het mobiele menu). */
.hdr-actions{gap:6px!important}
.hdr-actions>.hdr-cta,.hdr-actions>.btn-accent{margin-left:8px}
.hdr-actions>.hdr-login{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 11px;border-radius:10px;color:var(--ink);
  text-decoration:none;font-size:14.5px;font-weight:600;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.hdr-actions>.hdr-login:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.hdr-actions>.hdr-login svg{width:16px;height:16px;flex:none}
.taalkeuze{position:relative;flex:none}
.taal-knop{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 10px;border:0;border-radius:10px;background:transparent;
  color:var(--muted);font:inherit;font-size:13.5px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.taal-knop:hover,.taal-knop[aria-expanded="true"]{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}
.taal-knop:focus-visible,.hdr-actions>.hdr-login:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.taal-pijl{transition:transform .2s ease}
.taal-knop[aria-expanded="true"] .taal-pijl{transform:rotate(180deg)}
.taal-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:160;min-width:168px;padding:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 44px -20px rgba(18,31,54,.4);transform-origin:top right;animation:taalIn .18s cubic-bezier(.2,.7,.2,1)}
.taal-menu[hidden]{display:none}
.taal-menu [data-lang-btn]{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 10px;border:0;
  border-radius:8px;font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;color:var(--ink)!important;background:transparent!important}
.taal-menu [data-lang-btn]:hover,.taal-menu [data-lang-btn]:focus-visible{background:color-mix(in srgb,var(--ink) 5%,transparent)!important;outline:none}
.taal-menu [data-lang-btn][aria-pressed="true"]{color:var(--accent-tekst,#0B735E)!important}
.taal-menu [data-lang-btn] svg{flex:none;opacity:0}
.taal-menu [data-lang-btn][aria-pressed="true"] svg{opacity:1}
@keyframes taalIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.taal-menu{animation:none}.taal-pijl,.taal-knop,.hdr-actions>.hdr-login{transition:none}}

/* Veegovergang naar en van de demopagina (zie het einde van menu.js). */
@keyframes bo-veeg-links-uit{to{transform:translateX(-100%)}}
@keyframes bo-veeg-links-in{from{transform:translateX(100%)}}
@keyframes bo-veeg-rechts-uit{to{transform:translateX(100%)}}
@keyframes bo-veeg-rechts-in{from{transform:translateX(-100%)}}
:root:active-view-transition-type(naar-demo)::view-transition-old(root){animation:bo-veeg-links-uit .6s cubic-bezier(.7,0,.25,1) both}
:root:active-view-transition-type(naar-demo)::view-transition-new(root){animation:bo-veeg-links-in .6s cubic-bezier(.7,0,.25,1) both;box-shadow:-40px 0 80px -20px rgba(18,31,54,.28)}
:root:active-view-transition-type(van-demo)::view-transition-old(root){animation:bo-veeg-rechts-uit .6s cubic-bezier(.7,0,.25,1) both}
:root:active-view-transition-type(van-demo)::view-transition-new(root){animation:bo-veeg-rechts-in .6s cubic-bezier(.7,0,.25,1) both;box-shadow:40px 0 80px -20px rgba(18,31,54,.28)}

/* Footer-contact, gedeeld door alle pagina's: e-mail, telefoon, WhatsApp en LinkedIn als rijen met een
   pictogramvakje (zelfde vorm als het LinkedIn-vakje eerder). Bij aanwijzen kleurt het vakje mee en tilt licht op.
   Alle regels beginnen met .foot-contact: anders wint .foot-grid a van de pagina (kleur, display, marge). */
.foot-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px 14px;margin-top:18px}
/* De linkerkolom van de footer is anders veel hoger dan de linklijsten: tekst breder, contactrijen in twee kolommen.
   Op brede schermen krijgt de linkerkolom drie delen tegen een voor elke andere kolom; die blijven minimaal 180 px zodat
   "Algemene Voorwaarden" niet breekt. De max-width op .foot-contact houdt het daar bij twee kolommen, ook als de kolom
   breed genoeg is voor drie. Alleen vanaf 1101 px: een max-width telt bij auto-fit als beschikbare ruimte, dus op een
   telefoon zou de footerkolom naar 406 px springen en de pagina breder worden dan het scherm. */
p:has(~ .foot-contact){max-width:560px!important}
@media (min-width:1101px){footer .foot-grid,footer [data-4col]{grid-template-columns:minmax(410px,3fr) repeat(3,minmax(180px,1fr))!important}footer .foot-contact{max-width:560px}}
.foot-contact .fc-rij{display:inline-flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin:0;color:var(--ink);
  font-size:14px;font-weight:600;line-height:1.3;text-decoration:none}
.foot-contact .fc-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
.foot-contact .fc-rij:hover .fc-ico,.foot-contact .fc-rij:focus-visible .fc-ico{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));transform:translateY(-1px)}
.foot-contact .fc-rij:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.foot-contact .fc-tekst{transition:color .2s ease}
.foot-contact .fc-rij:hover .fc-tekst{color:var(--accent-tekst)}
.foot-contact .fc-mail .fc-tekst{color:var(--accent-tekst)}
.foot-contact .fc-tel .fc-tekst{font-weight:700}
.foot-contact .fc-in .fc-tekst{color:var(--muted)}
.foot-contact .fc-in:hover .fc-tekst{color:var(--accent-tekst)}
.foot-contact .fc-wa .fc-ico{color:#25D366}
.foot-contact .fc-wa:hover .fc-ico,.foot-contact .fc-wa:focus-visible .fc-ico{border-color:#25D366;background:color-mix(in srgb,#25D366 9%,var(--surface))}
@media (prefers-reduced-motion:reduce){.foot-contact .fc-ico,.foot-contact .fc-tekst{transition:none}.foot-contact .fc-rij:hover .fc-ico{transform:none}}

/* Tussen 1001 en 1160 px paste de homepage-kopbalk net niet (Plan een demo viel er rechts 11 px af): iets minder ruimte om de menu-items.
   Sinds de zoekknop erbij staat is het nog krapper tot 1100 px: kleinere tabbladen en minder tussenruimte (zie /zoek.js). */
@media (min-width:1001px) and (max-width:1160px){nav.topnav>a{padding:0 9px}}
@media (min-width:1001px) and (max-width:1100px){
  nav.topnav>a{padding:0 5px;font-size:13px}
  .hdr-actions{gap:3px!important}
  .hdr-actions>.hdr-cta,.hdr-actions>.btn-accent{margin-left:4px}
  .hdr-actions>.taalkeuze .taal-knop{padding:0 6px}
}

/* Telefoon en tablet, onder 1000 px (waar het menuknopje staat): de zoekknop is even groot als het menuknopje. */
@media (max-width:1000px){
  .hdr-actions>.zoek-knop{width:44px;height:44px;border-radius:12px}
  .hdr-actions>.zoek-knop svg{width:20px;height:20px}
}

/* Het mobiele menu op een lage telefoon (iPhone SE, 667 px hoog): minder ruimte tussen de regels, zodat taalkeuze en Inloggen
   onderaan zonder scrollen in beeld staan. Is het scherm nog lager, dan blijven die twee onderaan het paneel vastzitten. */
@media (max-width:1000px) and (max-height:760px){
  .mobile-nav-panel{padding:14px 24px 16px}
  .mobile-nav-panel .zoek-mobiel{margin-bottom:10px;padding:10px 16px}
  .mobile-nav-cta{margin-bottom:10px;padding:12px 20px}
  .mobile-nav-panel nav a{padding:11px 2px}
  .mobile-nav-divider{margin:10px 0}
}
@media (max-width:1000px){
  .mobile-nav-footer{position:sticky;bottom:-16px;z-index:1;background:var(--bg);padding:8px 0 16px}
}

/* Tikdoelen op een telefoon: losse links en knoppen zijn minimaal 44 px hoog (logo, broodkruimels, "meer"-links, footer). */
@media (max-width:880px){
  header a:has(>img){display:flex;align-items:center;min-height:44px}
  .kruimel a,a.faq-link,a.meer,a.terug{display:inline-flex;align-items:center;min-height:44px}
  footer a:not(.fc-rij){display:flex;align-items:center;min-height:44px}
  .foot-grid a{margin-bottom:0}
  footer div[style*="flex-direction:column"]{gap:0!important}
  .foot-contact .fc-rij{min-height:44px}
  .toc-mobiel a{padding-top:12px;padding-bottom:12px}
  .norm-rij a{min-height:44px}
}

/* Invoervelden zijn op een telefoon minimaal 16 px: bij een kleiner lettertype zoomt iOS Safari in zodra je een veld aantikt
   (demoformulier, zoekvelden in kennisbank en begrippen). */
@media (max-width:880px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),select,textarea{font-size:16px!important}
}

/* Kopbalk: op telefoon en tablet bijna effen. Met 82% doorschijnend kleurde hij vuilgrijs boven donkere secties
   (de AI-scène, donkere kaarten); de blur blijft. */
@media (max-width:1000px){
  header{background:color-mix(in srgb,var(--surface,#fff) 97%,transparent)!important}
}

/* Knoppen onder de kop: onder elkaar even breed (de homepage en careers hadden twee verschillend brede knoppen). */
@media (max-width:600px){
  .hero-cta>a{flex:1 1 100%;justify-content:center;text-align:center}
}

/* Menu open: de kopbalk blijft bovenaan staan en is dan helemaal effen. Op de homepage heeft de kopbalk inline position:sticky, dat de gewone regel
   body.mobile-nav-open header{position:fixed} overstemde: bij een gescrolde pagina (de body is dan vast) verdween de kopbalk, bleef het menu zonder logo
   en sluitknop achter en scheen paginatekst door boven de zoekbalk. */
body.mobile-nav-open header{position:fixed!important;top:0!important;left:0;right:0;background:var(--surface,#fff)!important}