/*!
 * Naar boven · v1.0 · opmaak van de pijl naar boven (hoort bij naar-boven.js)
 * Huisstijl Tandartspraktijk Diever: pijl leisteen, ring salie-diep op mist, focus diepblauw.
 */
:root{
  --nb-kleur:#243746;        /* pijl en hoverachtergrond: leisteen */
  --nb-accent:#3F766D;       /* gevuld deel van de voortgangsring: salie-diep */
  --nb-spoor:#DCECF4;        /* leeg deel van de ring: mist */
  --nb-vlak:#ffffff;         /* achtergrond van de knop */
  --nb-focus:#2C6C96;        /* focusrand: diepblauw */
  --nb-grootte:56px;
  --nb-grootte-mobiel:50px;
  --nb-rechts:22px;
  --nb-onder:24px;
  --nb-z:140;
}
.nb-pijl{--nb-v:0;--nb-extra:0px;position:fixed;z-index:var(--nb-z);
  right:max(var(--nb-rechts),env(safe-area-inset-right));
  bottom:calc(max(var(--nb-onder),env(safe-area-inset-bottom)) + var(--nb-extra));
  display:grid;place-items:center;width:var(--nb-grootte);height:var(--nb-grootte);box-sizing:border-box;border-radius:50%;
  color:var(--nb-kleur);background:var(--nb-vlak);border:1.5px solid var(--nb-spoor);text-decoration:none;
  box-shadow:0 10px 26px rgba(36,55,70,.22);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .25s,transform .3s cubic-bezier(.16,1,.3,1),visibility .25s,color .15s,background .15s,bottom .2s}
.nb-pijl.nb-met-ring{border:0;background:radial-gradient(closest-side,var(--nb-vlak) 82%,transparent 84%),conic-gradient(var(--nb-accent) calc(var(--nb-v) * 1%),var(--nb-spoor) 0)}
.nb-pijl.nb-zicht{opacity:1;visibility:visible;transform:none}
.nb-pijl svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nb-pijl:hover{color:var(--nb-vlak);background:var(--nb-kleur)}
.nb-pijl.nb-met-ring:hover{background:radial-gradient(closest-side,var(--nb-kleur) 82%,transparent 84%),conic-gradient(var(--nb-accent) calc(var(--nb-v) * 1%),var(--nb-spoor) 0)}
.nb-pijl:hover svg{transform:translateY(-2px)}
.nb-pijl:focus-visible{outline:3px solid var(--nb-focus);outline-offset:3px}
@media (max-width:767px){.nb-pijl{width:var(--nb-grootte-mobiel);height:var(--nb-grootte-mobiel);right:max(16px,env(safe-area-inset-right))}}
@media (prefers-reduced-motion:reduce){.nb-pijl,.nb-pijl svg{transition:none}}
@media print{.nb-pijl{display:none!important}}
/* de kennisbank had een eigen knop; die vervalt ten gunste van deze */
#naarBoven{display:none!important}
