Text referenced by is covered by position:fixed element

Question

I guess the main reason why I'm asking is because I don't really know what exatcly to search for - so sorry if this questions got asked already a thousand times.

Here's a JSFiddle. I've got a big green bar at the top of the page which is fixed. When I use one of the links which are pointing to the ID of the same page the browser scrolls down to them. Unfortunately then the green bar is covering most of the text to which we just scrolled. What are my options to teach the browser to scroll down 6rem more than normally?

HTML:

<div id="bar"></div>
<nav>
  <a href="#c1">First text</a>
  <a href="#c2"> Second text</a>
</nav>
<div id="c1">
  <h1> First </h1> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>
<div id="c2">
  <h1>Second</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repreenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS:

body {
  padding-top: 6.5rem;
}

#bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6rem;
}