/* Takje (de gids, in de kop) en de rondleiding in /mijn/ — zie demo/assets/gids.js, takkie.js, takkietekst.js */
@keyframes gdKring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.4);opacity:0}}
.kb-gids,.mj-wie .kb-hulpkop.kb-gids{position:relative;color:var(--lak)}
.kb-gids .tk-slot{display:block;flex:none;line-height:0}
.kb-gids.gd-licht{background:var(--perk)}
.tk-svg{display:block;overflow:visible}
/* Takje beweegt alleen als hij je aandacht nodig heeft (klasse tk-beweeg, vier rondjes van ruim 2 seconden) en nooit bij "minder beweging" */
.tk-beweeg .tk-lijf{animation:tkHop 2.6s ease-in-out 4}
.tk-beweeg .tk-tak{transform-box:fill-box;transform-origin:50% 100%;animation:tkTak 2.6s ease-in-out 4}
.tk-beweeg .tk-wuif{transform-box:fill-box;transform-origin:100% 100%;animation:tkWuif .6s ease-in-out 12 alternate}
.tk-beweeg .tk-glas{transform-box:fill-box;transform-origin:50% 50%;animation:tkGlas 2.6s ease-in-out 4}
/* in de ballon beweegt hij één keer, als begroeting */
.tk-fig .tk-beweeg .tk-lijf{animation:tkHop 1.6s ease-in-out 1}
.tk-fig .tk-beweeg .tk-tak{animation:tkTak 1.6s ease-in-out 1}
.tk-fig .tk-beweeg .tk-wuif{animation:tkWuif .5s ease-in-out 5 alternate}
@keyframes tkHop{0%,48%,100%{transform:translateY(0)}10%{transform:translateY(-7px)}20%{transform:translateY(0)}30%{transform:translateY(-4px)}40%{transform:translateY(0)}}
@keyframes tkTak{0%,40%,100%{transform:rotate(0)}8%{transform:rotate(-9deg)}16%{transform:rotate(8deg)}24%{transform:rotate(-5deg)}32%{transform:rotate(3deg)}}
@keyframes tkWuif{from{transform:rotate(-12deg)}to{transform:rotate(10deg)}}
@keyframes tkGlas{0%,40%,100%{transform:rotate(0)}12%{transform:rotate(-8deg)}24%{transform:rotate(7deg)}}
@media (max-width:760px){.kb-gids .tk-svg{height:42px;width:auto}}
.gd-bel{position:fixed;z-index:9970;box-sizing:border-box;max-width:300px;margin:0;padding:11px 16px;border-radius:16px;background:var(--perk);border:2px solid var(--galnoot);color:var(--galnoot);font:400 16px/1.4 'Source Serif 4',Georgia,serif;text-align:left;box-shadow:3px 4px 0 rgba(58,38,20,.22);cursor:pointer}
.gd-bel::before{content:"";position:absolute;top:-9px;right:var(--gd-pijl,30px);width:14px;height:14px;background:var(--perk);border-left:2px solid var(--galnoot);border-top:2px solid var(--galnoot);border-radius:3px 0 0 0;transform:rotate(45deg)}
.gd-bel:focus-visible{outline:3px solid var(--inkt);outline-offset:2px}
/* het rode bolletje op Takje: er ligt post */
.kb-gids .tk-bol{display:block}
.tk-bol{position:absolute;top:-4px;right:-6px;min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--lak);color:#fff;font:800 13px/18px 'Plus Jakarta Sans',system-ui,sans-serif;text-align:center;border:2px solid #fff}
.kb-gids .tk-p-post .tk-glas{transform-box:fill-box;transform-origin:50% 100%}
.tk-beweeg.tk-p-post .tk-glas{animation:tkGlas 1.3s ease-in-out 6}

/* het gidsvenster */
.gd-venster{position:fixed;z-index:9990;box-sizing:border-box;background:var(--perk);border:1px solid var(--perk-r);border-radius:16px;padding:16px 20px 14px;box-shadow:0 18px 50px rgba(16,24,40,.25);font:400 16px/1.5 'Source Serif 4',Georgia,serif;color:var(--galnoot);max-height:calc(100vh - 100px);overflow:auto}
.gd-pijl{position:absolute;top:-9px;width:16px;height:16px;background:var(--perk);border-left:1px solid var(--perk-r);border-top:1px solid var(--perk-r);transform:rotate(45deg)}
.tk-fig{flex:none;line-height:0;padding:2px 6px 0 2px}
.tk-naam{display:flex;flex-direction:column;min-width:0}
.tk-naam span{font:700 12px/1.2 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--sepia)}
.gd-x{margin-left:auto;width:40px;height:40px;border:0;border-radius:999px;background:transparent;font-size:24px;color:var(--grijs);cursor:pointer}
.gd-x:hover{background:#E9DCBB}
.tk-lach{margin:4px 0 0;font:400 24px/1.2 'IM Fell English',Georgia,serif;color:var(--galnoot)}
.tk-rustig .tk-lach{font-size:22px}
/* de vaste opbouw: positief (tk-lach), feitje (tk-feit), actie (tk-zin en één rode knop) */
.tk-kick,.gd-kick2{display:block;margin:0;font:700 11px/1.3 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.14em;color:var(--sepia)}
.tk-kick{padding-right:40px;margin-bottom:6px}
.tk-feit{margin:10px 0 0;color:var(--galnoot);font-size:17px;line-height:1.5}
.tk-feit p{margin:8px 0 0}
.tk-feit>p:first-child{margin-top:0}
.tk-feit .vb-kaart{margin-top:10px;background:var(--perk-l)}
.tk-feit .tb-kop{margin-bottom:8px}
.tk-feit .tb-kop h3{margin:0;font:400 22px/1.2 'IM Fell English',Georgia,serif;color:var(--galnoot)}
.tk-zin{margin:10px 0 0;color:var(--galnoot);font-size:17px;line-height:1.5}
.tk-knoppen{position:sticky;bottom:-12px;z-index:1;margin-top:6px;padding:10px 0 12px;background:linear-gradient(rgba(243,233,210,0),var(--perk) 38%)}
.tk-wolk a{color:var(--lak)}
.tk-na{margin:0}
.tk-onder{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--sepia)}
.tk-teken{margin:6px 0 0;text-align:right}
.tk-teken span{font:400 34px/1 'Pinyon Script',cursive;color:var(--lak)}
/* de vraag: meer helpen, zo doorgaan of minder helpen */
.tk-keuze{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.tk-kies{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:10px 16px;border:1.5px solid var(--galnoot);border-radius:16px;background:var(--perk-l);color:var(--galnoot);font:400 15px/1.35 'Plus Jakarta Sans',system-ui,sans-serif;text-align:left;cursor:pointer}
.tk-kies b{font-size:16px}
.tk-kies small{font-size:14px;color:var(--sepia)}
.tk-kies:hover{background:#fff}
.tk-kies.rood{background:var(--lak);border-color:var(--lak);color:#fff}
.tk-kies.rood small{color:var(--perk)}
.tk-kies.rood:hover{background:#7F211C}
.tk-mail{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--perk-r);font:400 15px/1.4 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--galnoot);cursor:pointer}
.tk-mail input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--lak)}
.tk-kies:focus-visible{outline:3px solid var(--inkt);outline-offset:2px}
/* de plek waar je na een tip of brief landt, licht kort op */
@keyframes tkHier{0%,100%{box-shadow:0 0 0 0 rgba(158,43,37,0)}20%,60%{box-shadow:0 0 0 5px rgba(158,43,37,.55)}40%,80%{box-shadow:0 0 0 9px rgba(158,43,37,.18)}}
.tk-hier{animation:tkHier 2.4s ease-out 1;outline:2px solid var(--lak);outline-offset:2px;border-radius:10px}
.tk-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--lak);color:#fff;font:700 16px 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer}
.tk-cta:hover{background:#7F211C}
.tk-cta:focus-visible,.gd-link:focus-visible{outline:3px solid var(--inkt);outline-offset:2px}
.gd-rij{display:flex;gap:18px;margin-top:8px;flex-wrap:wrap}
.gd-link{border:0;background:none;min-height:44px;padding:6px 0;font:700 14px 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--lak);cursor:pointer}
.gd-link:hover{text-decoration:underline}
.gd-link.gd-stil{color:var(--sepia);margin-left:auto}
.tk-hulpvak{margin-top:4px}
.tk-hulpvak[hidden]{display:none}
.gd-scherm{margin-top:8px;padding-top:12px;border-top:1px solid var(--perk-r)}
.gd-scherm p{margin:6px 0 0;color:var(--galnoot);font-size:15px}
.gd-hulp{display:flex;flex-direction:column;margin-top:12px;padding-top:8px;border-top:1px solid var(--perk-r)}
.gd-hulp button,.gd-hulp a{display:flex;justify-content:space-between;align-items:center;min-height:44px;border:0;background:none;padding:0;font:700 15px 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--galnoot);text-decoration:none;cursor:pointer;text-align:left}
.gd-hulp button:hover,.gd-hulp a:hover{color:var(--lak)}
.gd-dek{position:fixed;inset:0;z-index:9985;background:rgba(16,24,40,.45)}
.gd-blad{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;border-radius:20px 20px 0 0;padding:10px 20px 26px;max-height:85vh}

/* de rondleiding */
body.tr-aan .gd-bel{display:none!important}
.tr-laag{position:fixed;inset:0;z-index:9995;font:400 16px/1.55 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--inkt)}
.tr-dim{position:absolute;inset:0;background:rgba(16,24,40,.55)}
.tr-gat{position:absolute;border-radius:16px;box-shadow:0 0 0 3px #fff,0 0 0 4000px rgba(16,24,40,.55);pointer-events:none;transition:all .25s ease}
.tr-gat.rond{border-radius:999px}
.tr-kring{position:absolute;width:0;height:0;pointer-events:none}
.tr-kring i{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:999px;border:2px solid var(--lak);box-sizing:border-box;animation:gdKring 1.8s ease-out infinite}
.tr-kring i+i{animation-delay:.6s}
.tr-kaart,.tr-welkom{position:absolute;box-sizing:border-box;background:var(--perk);border:2px solid var(--galnoot);border-radius:24px;padding:18px 22px 18px;box-shadow:4px 5px 0 rgba(58,38,20,.3);color:var(--galnoot)}
.tr-pijl{position:absolute;top:-11px;left:40px;width:18px;height:18px;background:var(--perk);border-left:2px solid var(--galnoot);border-top:2px solid var(--galnoot);border-radius:4px 0 0 0;transform:rotate(45deg)}
.tr-kaart.links .tr-pijl{top:40px;left:-11px;transform:rotate(-45deg)}
.tr-boven{display:flex;align-items:center;gap:10px}
.tr-boven .tr-link{margin-left:auto}
.tr-tk{flex:none;line-height:0;margin:-4px 0 -4px -4px}
.tr-kick{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--sepia)}
.tr-welkom{background:transparent;border:0;box-shadow:none}
.tr-wolk{position:relative;margin-top:14px;padding:18px 22px;background:var(--perk);border:2px solid var(--galnoot);border-radius:24px;box-shadow:4px 5px 0 rgba(58,38,20,.3);text-align:left}
.tr-wolk::before{content:"";position:absolute;top:-11px;left:50%;margin-left:-9px;width:18px;height:18px;background:var(--perk);border-left:2px solid var(--galnoot);border-top:2px solid var(--galnoot);border-radius:4px 0 0 0;transform:rotate(45deg)}
.tr-wolk h2{margin-top:0}
.tr-kaart h2,.tr-welkom h2{margin:10px 0 0;font:400 28px/1.15 'IM Fell English',Georgia,serif}
.tr-kaart p,.tr-welkom p{margin:10px 0 0;color:var(--galnoot)}
.tr-kaart .tr-noot{padding:12px 14px;border-radius:3px;background:var(--perk-l);border:1px solid var(--perk-r);color:var(--galnoot);font-size:14px;line-height:1.5}
.tr-laag .mj-knop{background:var(--lak);color:#fff}
.tr-laag .mj-knop:hover{background:#7F211C}
.tr-onder{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.tr-stip{display:flex;gap:6px}
.tr-stip span{width:8px;height:8px;border-radius:999px;background:#D9C99F}
.tr-stip span.aan{width:18px;background:var(--lak)}
.tr-k{display:flex;align-items:center;gap:8px}
.tr-link{border:0;background:none;min-height:44px;padding:0 6px;font:700 15px 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--sepia);cursor:pointer}
.tr-link:hover{color:var(--lak)}
.tr-welkom{left:50%;top:50%;width:520px;max-width:calc(100vw - 32px);transform:translate(-50%,-50%);text-align:center;padding:34px 36px 28px;border-radius:20px}
.tr-welkom h2{font-size:34px;margin-top:14px}
.tr-welkom .tr-k{flex-direction:column;margin-top:22px}
.tr-welkom .mj-knop{min-width:240px;justify-content:center}
.tr-blad{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;transform:none;border-radius:22px 22px 0 0;border-bottom:0;box-shadow:none;padding:14px 20px 26px;max-height:70vh;overflow:auto}
.tr-welkom.tr-blad{padding:0 14px 22px;background:transparent}
.tr-welkom .tr-link{color:#fff;text-decoration:underline}
.tr-welkom .tr-link:hover{color:var(--perk)}
.tr-welkom.tr-blad h2{font-size:28px}
.tr-blad h2{font-size:25px}
@media (prefers-reduced-motion:reduce){.tk-beweeg .tk-lijf,.tk-beweeg .tk-tak,.tk-beweeg .tk-wuif,.tk-beweeg .tk-glas,.tr-kring i,.tk-hier{animation:none}.tr-gat{transition:none}}
.gd-inhulp{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--perk);color:var(--galnoot);font:400 14px/1.5 'Plus Jakarta Sans',system-ui,sans-serif}
.gd-inhulp .gd-ico{flex:none;line-height:0;margin-top:-2px}
.gd-inhulp p{margin:2px 0 0}
.gd-inhulp .gd-x{flex:none;width:36px;height:36px;margin:-6px -6px 0 auto;font-size:20px}

/* De ballon als tekstwolkje (12-11-2026): het venster is alleen de plek, de wolk (.tk-wolk) is het gele wolkje met een donkere rand en een staart */
.gd-venster.tk-ballon{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible;max-height:none}
.tk-wolk{position:relative;box-sizing:border-box;background:var(--perk);border:2px solid var(--galnoot);border-radius:24px;padding:18px 20px 12px;box-shadow:4px 5px 0 rgba(58,38,20,.22);max-height:calc(100vh - 110px);overflow:auto}
.tk-wolk .gd-x{position:absolute;top:6px;right:8px;margin:0;width:40px;height:40px}
.tk-wolk .tk-lach{padding-right:30px;margin-top:0}
.gd-venster.tk-ballon .gd-pijl{top:-11px;z-index:1;width:18px;height:18px;border-left:2px solid var(--galnoot);border-top:2px solid var(--galnoot);border-radius:4px 0 0 0;background:var(--perk)}
/* op de laptop staat Takje in de kop en wijst de staart naar hem: zijn naam is alleen voor schermlezers */
.tk-rij{display:none}
.gd-blad.tk-ballon{padding:0 14px 16px}
.gd-blad.tk-ballon .tk-rij{display:flex;align-items:flex-end;gap:12px;padding:0 6px;position:relative;z-index:1}
.gd-blad.tk-ballon .tk-fig{padding:0 0 0 4px}
.tk-ballon .tk-naam{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gd-blad.tk-ballon .tk-wolk{border-radius:22px;max-height:60vh;margin-top:-6px}
.gd-blad.tk-ballon .tk-wolk::before{content:"";position:absolute;top:-11px;left:100px;width:18px;height:18px;background:var(--perk);border-left:2px solid var(--galnoot);border-top:2px solid var(--galnoot);border-radius:4px 0 0 0;transform:rotate(45deg)}
.gd-blad.tk-ballon .gd-pijl{display:none}
.tr-welkom .tk-groot{display:block;line-height:0}.tr-welkom .tk-groot .tk-svg{margin:0 auto}
/* Takje staat op de telefoon onderaan (mijn.css, blok MB): het ballonnetje komt dan boven hem, met de staart omlaag */
.gd-bel.gd-bel-onder::before{top:auto;bottom:-9px;right:auto;left:var(--gd-pijl-l,24px);transform:rotate(225deg)}
/* Telefoon: in de brief blijven de knop én Later/Hulp in beeld; je hoeft niet naar het einde te scrollen (usability-onderzoek 12-11-2026) */
.gd-blad.tk-post .tk-knoppen{bottom:40px}
.gd-blad.tk-post .gd-rij{position:sticky;bottom:-12px;z-index:1;margin:0;padding:6px 0 14px;background:var(--perk);align-items:center}
.gd-blad.tk-post .gd-rij .gd-link{min-height:44px}

/* twee keuzes in een bericht: twee knoppen naast elkaar (13-11-2026) */
.tk-knoppen:has(.tk-cta2){display:flex;flex-wrap:wrap;gap:10px}
.tk-cta2{background:#fff;color:var(--lak);box-shadow:inset 0 0 0 2px var(--lak)}
.tk-cta2:hover{background:#fbf3ee}
.tk-knoppen:has(.tk-cta2) .tk-cta{flex:1 1 0;min-width:0;padding:0 10px;font-size:15px;white-space:nowrap}