/* Faifo, taalkeuze (julian-taalkeuze.md, besluiten Jouri 18-10-2026). Eén markup die meebeweegt:
   vanaf 561px wereldbol + de naam van de andere taal, op de telefoon alleen de wereldbol (de naam blijft voor de schermlezer).
   Ziet eruit als de navigatielinks: geen rand, geen pil, geen vlag. Kleuren uit de tokens van de pagina. */
.nav-acties{display:flex;align-items:center;gap:var(--s-2,.5rem)}
.taal{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;font-size:.9375rem;color:var(--ink-2,#47596B);text-decoration:none;border-radius:6px;transition:color .2s ease,transform .1s ease-out;-webkit-tap-highlight-color:transparent}
.taal svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.taal:hover{color:var(--ink,#0A1726)}}
.taal:focus-visible{color:var(--ink,#0A1726);outline:2px solid var(--blue,#1A5FD4);outline-offset:3px}
.taal:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.taal{transition:color .2s ease}.taal:active{transform:none}}
/* telefoon: alleen de wereldbol, raakvlak 44 x 44 */
@media(max-width:560px){
 .nav .taal,.hdr .taal{width:44px;justify-content:center;padding:0}
 .nav .taal svg,.hdr .taal svg{width:20px;height:20px;flex-basis:20px}
 .nav .taal .taal-naam,.hdr .taal .taal-naam{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* gemeten 18-10-2026 (sem-en-versie.md): "Plan een kennismaking" is 221px breed; onder 414px past de wereldbol er niet naast zonder het logo
   te raken of de knop af te breken. Dan staat hij op de Nederlandse homepage alleen in de footer (terugval uit julian-taalkeuze.md).
   "Book a call" is korter: op de Engelse pagina past hij wel, tot 360px. */
@media(max-width:413px){html[lang="nl"] .nav-acties .taal{display:none}}
/* in de footer: een gewone tekstlink met de wereldbol ervoor */
.fgrid a.taal{display:inline-flex;padding:0;font-size:1rem}
/* kennismaking: de taalkeuze naast "Naar faifo.ai" */
.hdr-r{display:flex;align-items:center;gap:4px}
/* binnenkort-scherm: licht op de zee, rechtsboven */
.scherm .taal{position:absolute;top:calc(clamp(22px,3.2vw,40px) - 4px);right:clamp(14px,3.2vw,32px);color:var(--p-ink-2,#8DA3BB);z-index:3}
@media(hover:hover){.scherm .taal:hover{color:#fff}}
.scherm .taal:focus-visible{color:#fff;outline-color:#fff}
@media(max-width:560px){.scherm .taal{width:44px;justify-content:center;padding:0}.scherm .taal svg{width:20px;height:20px;flex-basis:20px}.scherm .taal .taal-naam{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* het balkje (terugval zonder .htaccess): bovenaan, in de ruimte die taal.js vóór de eerste tekening vrijhoudt, dus zonder verspringen */
:root{--taalbalk-h:44px}
.met-taalbalk body{padding-top:var(--taalbalk-h)}
.met-taalbalk .scherm{padding-top:calc(var(--taalbalk-h) + clamp(22px,3.2vw,40px))}
.met-taalbalk .scherm .taal{top:calc(var(--taalbalk-h) + clamp(22px,3.2vw,40px) - 4px)}
.met-taalbalk body:has(.scherm){padding-top:0}
.taalbalk{position:absolute;top:0;left:0;right:0;z-index:70;height:var(--taalbalk-h);display:flex;align-items:center;justify-content:center;gap:4px;padding:0 4px 0 12px;background:var(--soft,#F5F7FA);color:var(--ink,#0A1726);font-size:.9375rem;animation:taalbalk-in .2s ease-out both}
.taalbalk-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;color:var(--blue,#1A5FD4);font-weight:600;text-decoration:none;border-radius:6px;transition:color .2s ease,transform .1s ease-out}
.taalbalk-link svg,.taalbalk-x svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.taalbalk-link:hover{color:var(--blue-2,#2E77EE)}.taalbalk-x:hover{color:var(--ink,#0A1726)}}
.taalbalk-link:active,.taalbalk-x:active{transform:scale(.97)}
.taalbalk-x{position:absolute;right:4px;top:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--ink-2,#47596B);cursor:pointer;border-radius:6px;transition:color .2s ease,transform .1s ease-out}
.taalbalk.weg{opacity:0;transition:opacity .2s ease}
/* op de zee: dezelfde band, donker */
.scherm ~ .taalbalk,body:has(.scherm) .taalbalk{position:fixed;background:rgba(6,21,39,.82);color:var(--p-ink,#EEF4FA)}
body:has(.scherm) .taalbalk-link{color:#fff}
body:has(.scherm) .taalbalk-x{color:var(--p-ink-2,#8DA3BB)}
@media(hover:hover){body:has(.scherm) .taalbalk-x:hover{color:#fff}}
@keyframes taalbalk-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.taalbalk{animation:none}.taalbalk-link,.taalbalk-x{transition:color .2s ease}.taalbalk-link:active,.taalbalk-x:active{transform:none}.taalbalk.weg{transition:none}}
@media(prefers-contrast:more){.taalbalk{box-shadow:0 1px 0 var(--ink-2,#47596B)}} /* taste-skill-ignore: rand bij meer contrast (apple-design, toegankelijkheid) */