<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Karte - Waterdeep - Im Sumpf des Hafens</title>
<style>
  @page {
    size: A4 portrait;
    margin: 0;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: #fff;
  }

  .page {
    width: 210mm;
    height: 297mm;
    page-break-after: always;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
  }

  .page:last-child {
    page-break-after: auto;
  }

  .page img {
    width: 210mm;
    display: block;
  }

  @media screen {
    body {
      background: #888;
    }

    .page {
      background: #fff;
      margin: 10mm auto;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
  }
</style>
</head>
<body>
  <div class="page"><img src="rect2.png" alt="Karte Teil 2"></div>
  <div class="page"><img src="rect3.png" alt="Karte Teil 3"></div>
  <div class="page"><img src="rect4.png" alt="Karte Teil 4"></div>
  <div class="page"><img src="rect5.png" alt="Karte Teil 5"></div>
  <div class="page"><img src="rect6.png" alt="Karte Teil 6"></div>
  <div class="page"><img src="rect7.png" alt="Karte Teil 7"></div>
  <div class="page"><img src="rect8.png" alt="Karte Teil 8"></div>
  <div class="page"><img src="rect9.png" alt="Karte Teil 9"></div>
</body>
</html>