slightly less bad layozut?

_layouts/loan.html

@@ -9,7 +9,7 @@ layout: default
 	<article class="article  article--page  content  typeset">
 
 <div class= "form-line">
-	<p>Hiermit beantrage ich,</p>
+	<p">Hiermit beantrage ich,</p>
 	<br>
 	<br>
 </div> 
@@ -70,7 +70,6 @@ layout: default
 	<p>Außerdem entliehen:</p>
 	<div id = "square"></div>
 </div>
-<div class="pagebreak"> </div>
 <div class= "form-line">
 	<p>Ich garantiere,</p>
 	<ul>
@@ -79,6 +78,12 @@ layout: default
 		<li>dass ich, oder die Orgnisation für die ich entleihe, über eine Haftpflichtversicherung verfügen</li>
 	</ul>
 </div> 
+<br>
+<br>
+<div class= "form-line">
+<p><sup>1</sup>: Kmmerzielle Interessen haben wir in unserem Wiki unter <a href="https://wiki.chaotikum.org/hackspace:kommerzielle_interessen">https://wiki.chaotikum.org/hackspace:kommerzielle_interessen</a> definiert.</p>
+</div>
+<div class="pagebreak"> </div>
 <div class= "form-line">
 	<p>Anmerkungen:</p>
 	<div id = "square"></div>
@@ -91,7 +96,7 @@ layout: default
 </div> 
 <div class= "form-line">
 	<br>
-	<span class = "long-line-with-text-under">Ab dieser Linie bei Rückgabe vom Chaotikum Video Team auszufüllen:</span>  
+	<span class = "long-line-with-text-under">Ab dieser Linie bei Rückgabe vom Chaotikum auszufüllen:</span>  
 </div>
 <div class= "form-line">
 	<p>Rückgabe:</p>
@@ -102,11 +107,25 @@ layout: default
 	<span class = "line-with-text-under">Unterschrift für das Chaotikum e.V.</span>  
 	<p>Nach Rückgabe diesen Zettel unterschrieben der/dem Leihnehmer*in geben.</p>
 </div>
-<div class= "form-line">
-<br>
-<br>
-<p><sup>1</sup>: Kmmerzielle Interessen haben wir in unserem Wiki unter <a href="https://wiki.chaotikum.org/hackspace:kommerzielle_interessen">https://wiki.chaotikum.org/hackspace:kommerzielle_interessen</a> definiert.</p>
-</div>
 </main>
 
 {% include site-footer.html %}
+
+        <script type="text/javascript">
+          window.onload = addPageNumbers;
+
+          function addPageNumbers() {
+            var totalPages = Math.ceil(document.body.scrollHeight / 1123);  //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi, 
+            totalPages = 2
+            for (var i = 1; i <= totalPages; i++) {
+              var pageNumberDiv = document.createElement("div");
+              var pageNumber = document.createTextNode("Page " + i + " of " + totalPages);
+              pageNumberDiv.style.position = "absolute";
+              pageNumberDiv.style.top = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
+              pageNumberDiv.style.height = "16px";
+              pageNumberDiv.appendChild(pageNumber);
+              document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
+              pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))";
+            }
+          }
+        </script>