Sticky footer overlaps main content

Expected behavior I am using the angular version of the mdb footer. it is sticky, so that it stys always at the bottom.

Actual behavior the footer overlaps the content. the problem is that this causes the site to be unusable at some parts. I tried to use a padding on the container i use for main content, but nothing works. I think this is also important for other users. Thanking you very much in advance for help. best regards Thomas

Resources (screenshots, code snippets etc.) using information from documentation: https://mdbootstrap.com/docs/angular/navigation/footer/

<!-- main app container -->
<div class="app-container pb-10" style="height: 100vh; padding-bottom: 10em;">
    <alert></alert>
    <router-outlet></router-outlet>
</div>

<!-- footer -->
<footer class="page-footer font-small fixed-bottom" style="background-color: #144762;">
  <div class="container text-center">

    <div class="row">
      <div class="col-6 col-md-3 mx-auto">
        <a [routerLink]="['/legalinfo/termsofservice']" routerLinkActive="active" mdbWavesEffect>Terms</a>
      </div>
      <div class="col-6 col-md-3 mx-auto">
        <a [routerLink]="['/legalinfo/privacy']" routerLinkActive="active" mdbWavesEffect>Privacy</a>
      </div>
      <div class="col-6 col-md-3 mx-auto">
        <a [routerLink]="['/legalinfo/imprint']" routerLinkActive="active" mdbWavesEffect>Imprint</a>
      </div>
      <div class="col-6 col-md-3 mx-auto">
        Copyright &copy; Demo
      </div>
    </div>
  </div>
</footer>