Header/Footer on each print Page

Using HTML/CSS, I want to print a header (p.e. logo+company name) / footer (p.e. contact details) on each print page. Using this:

@media print {
      @page {
        margin-top: 3.5cm;
        margin-bottom: 3.5cm;
      }

      header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: 2.5cm;
      }
  }

I get the header element to appear on each page. But, due to it's fixed positioning, it overlays the normal contend behind. I do not want to overlay the content. The obvious way to have all content visible seems to add a margin to each @page, but this also moves the footer down.

(Margins from other Elements I tried appear only once, and not on each page.)

Page 1 and 2 with body margin on left; Page 1 and 2 with @page margin on right:

The body margin is only applied on the first page (left). The @page margin also moves the header element (right).

I have tried several tutorials, answers (and comments) but they don't work (in current Firefox). Also most questions seem to be from 2012.

How do I create a header / footer on each page, without overlapping normal text? (Ideally it should render in FlyingSaucer/OpenPDF)

For future searchers: This answer does work:

Set margin/padding for each page to print (html/css)?

It uses table < thead > to free up space on each print page.