/* "Bel mij terug" — zwevende knop linksonder + paneel (Dick Joosten, 02-11-2026). Geel #E5BF2C + bijna-zwart, zoals de site. */
.tb{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9998;font-family:"Manrope","Segoe UI",system-ui,sans-serif;color:#17150F}
.tb *,.tb *::before,.tb *::after{box-sizing:border-box}
.tb-knop{position:relative;display:flex;align-items:center;gap:10px;height:58px;padding:0 20px 0 8px;border:0;border-radius:999px;background:#E5BF2C;color:#121212;font:800 16px/1 "Figtree","Segoe UI",system-ui,sans-serif;cursor:pointer;box-shadow:0 18px 34px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .2s,box-shadow .2s}
.tb-knop:hover{transform:translateY(-2px);box-shadow:0 22px 40px -14px rgba(0,0,0,.6)}
.tb-knop:focus-visible{outline:3px solid #121212;outline-offset:3px}
.tb-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#121212;color:#E5BF2C}
.tb-ic svg{width:20px;height:20px}
.tb-ring{position:absolute;left:8px;top:8px;width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 0 rgba(18,18,18,.35);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .tb-ring{animation:tb-puls 2.8s ease-out infinite}
  .tb-ic svg{animation:tb-bel 2.8s ease-in-out infinite;transform-origin:50% 50%}
  @keyframes tb-puls{0%{box-shadow:0 0 0 0 rgba(18,18,18,.35)}70%,100%{box-shadow:0 0 0 14px rgba(18,18,18,0)}}
  @keyframes tb-bel{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-14deg)}70%{transform:rotate(12deg)}74%{transform:rotate(-8deg)}78%{transform:rotate(0)}}
  .tb-paneel:not([hidden]){animation:tb-in .22s ease-out}
  @keyframes tb-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
}
.tb.is-open .tb-ring,.tb.is-open .tb-ic svg{animation:none}
.tb-paneel{position:absolute;left:0;bottom:72px;width:min(360px,calc(100vw - 32px));padding:22px 20px 18px;border-radius:24px;background:#FFFDF5;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(23,21,15,.08);overflow:hidden}
.tb-paneel::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:#E5BF2C}
.tb-sluit{position:absolute;right:12px;top:14px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#F1EBD6;color:#17150F;cursor:pointer}
.tb-sluit svg{width:16px;height:16px}
.tb-sluit:hover{background:#E9E1C6}
.tb-kop{display:flex;gap:12px;align-items:center;margin:0 36px 16px 0}
.tb-kop-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#121212;color:#E5BF2C}
.tb-kop-ic svg{width:20px;height:20px}
.tb-titel{margin:0;font:900 20px/1.15 "Figtree","Segoe UI",system-ui,sans-serif;letter-spacing:-.01em}
.tb-sub{margin:3px 0 0;font-size:14px;line-height:1.4;color:#5F5B50}
.tb-form{display:grid;gap:11px}
.tb-veld{display:grid;gap:5px}
.tb-veld>span,.tb-moment legend{font-size:13px;font-weight:700;color:#5F5B50}
.tb-veld input,.tb-veld select{width:100%;min-height:46px;padding:10px 13px;border:1.5px solid #E2D8BC;border-radius:12px;background:#fff;font:500 16px/1.2 "Manrope","Segoe UI",system-ui,sans-serif;color:#17150F}
.tb-veld input:focus,.tb-veld select:focus{outline:none;border-color:#121212;box-shadow:0 0 0 3px rgba(229,191,44,.45)}
.tb-moment{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:6px}
.tb-moment legend{margin-bottom:6px;padding:0}
.tb-moment label{position:relative}
.tb-moment input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tb-moment span{display:inline-block;padding:8px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #E2D8BC;font-size:13.5px;font-weight:700}
.tb-moment input:checked+span{background:#121212;color:#E5BF2C;box-shadow:none}
.tb-moment input:focus-visible+span{outline:3px solid #E5BF2C;outline-offset:2px}
.tb-web{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.tb-fout{margin:0;padding:10px 12px;border-radius:12px;background:#FDECEC;color:#8A1C1C;font-size:14px;line-height:1.4}
.tb-fout a{color:inherit;font-weight:700}
.tb-verstuur{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin-top:2px;border:0;border-radius:14px;background:#121212;color:#fff;font:800 16px/1 "Figtree","Segoe UI",system-ui,sans-serif;cursor:pointer;transition:background .2s}
.tb-verstuur svg{width:18px;height:18px;color:#E5BF2C}
.tb-verstuur:hover{background:#2B2B2B}
.tb-verstuur.is-bezig{opacity:.6;cursor:progress}
.tb-klein{margin:0;text-align:center;font-size:13.5px;color:#5F5B50}
.tb-klein a{color:#17150F;font-weight:800}
.tb-klaar{padding:8px 4px 6px;text-align:center}
.tb-klaar:focus{outline:none}
.tb-vink{display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:10px;border-radius:50%;background:#E5BF2C;color:#121212}
.tb-vink svg{width:26px;height:26px}
.tb-klaar p:last-child{margin:6px 0 0;font-size:15px;color:#5F5B50}
@media (max-width:600px){
  .tb{left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .tb-knop{height:52px;padding:0 16px 0 6px;font-size:15px}
  .tb-ic,.tb-ring{width:40px;height:40px}
  .tb-ring{left:6px;top:6px}
  .tb-paneel{position:fixed;left:12px;right:12px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));max-height:calc(100vh - 110px);overflow-y:auto}
}
@media print{.tb{display:none}}
.tb-paneel{max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain}
@media (max-height:720px) and (min-width:601px){.tb-sub{display:none}.tb-kop{margin-bottom:10px}.tb-form{gap:8px}.tb-veld input,.tb-veld select{min-height:42px}}
.tb-klaar b{white-space:nowrap}
