change to grid layout and make navigation header not show up when printing

test.html

@@ -19,11 +19,9 @@
         </div>
     </header>
 
-    <!-- Seite 1 -->
-    <div class="phb">
-        <div class="content">
-            <!-- Erste Spalte: Elfen -->
-            <div class="column">
+    <div class="pages">
+        <div class="page">
+            <div>
                 <h1>Die Elfen und ihre Geschichte</h1>
                 <p>Die Elfen sind eine uralte Rasse, bekannt für ihre Weisheit und Verbindung zur Natur...</p>
 
@@ -55,9 +53,7 @@
                     </tr>
                 </table>
             </div>
-
-            <!-- Zweite Spalte: Zwerge -->
-            <div class="column">
+            <div>
                 <h1>Die Zwerge und ihre Bedeutung</h1>
                 <p>Die Zwerge sind für ihre Handwerkskunst und ihren tiefen Bezug zu den Bergen bekannt...</p>
 
@@ -90,13 +86,8 @@
                 </table>
             </div>
         </div>
-    </div>
-
-    <!-- Seite 2 (neues Bild und Inhalt) -->
-    <div class="phb">
-        <div class="content">
-            <!-- Erste Spalte für die nächste Seite -->
-            <div class="column">
+        <div class="page">
+            <div>
                 <h1>Die Magie der Welt</h1>
                 <p>Die Magie durchzieht die Welt, sie ist die Quelle der größten Kräfte und der gefährlichsten Geheimnisse...</p>
 
@@ -104,9 +95,7 @@
                     <p>„Magie ist die Sprache der Welt, die jeder versteht, der mit der richtigen Intention hört“, erklärte der alte Zauberer.</p>
                 </blockquote>
             </div>
-        
-            <!-- Zweite Spalte für die nächste Seite -->
-            <div class="column">
+            <div>
                 <h1>Die Götter und ihre Anhänger</h1>
                 <p>Die Götter der Welt sind nicht nur Wesen von unvorstellbarer Macht, sondern auch Teil des täglichen Lebens...</p>
 
@@ -130,6 +119,5 @@
             </div>
         </div>
     </div>
-
 </body>
 </html>