diff --git a/dnd-book.css b/dnd-book.css
index 2e2d71f..8fbb351 100644
--- a/dnd-book.css
+++ b/dnd-book.css
@@ -1,60 +1,60 @@
-/* Setzt den Hintergrund und das Layout der Seite */
-    .phb {
-    width: 210mm; /* A4-Breite */
-    height: 296.8mm; /* A4-Höhe */
-    font-family: 'bookmania', sans-serif; 
-    background-image: url('./background.png'); /* Hintergrundbild */
-    background-size: cover; 
-    background-position: center;
-    color: #222;
-    padding: 20mm; 
-    box-sizing: border-box;
-    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); 
-    page-break-after: always; /* Um sicherzustellen, dass nach jeder Seite ein Umbruch erfolgt */
+/* Container für das Buchlayout */
+.phb {
+    width: 210mm; /* A4 Breite */
+    height: 296.8mm; /* A4 Höhe */
+    margin: 20mm;
+    padding: 20mm;
     position: relative;
+    background-image: url('./background.png'); /* Hintergrundbild */
+    background-size: cover; /* Hintergrundbild strecken */
+    background-position: center; /* Bild zentrieren */
+    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Schatten */
+    page-break-after: always; /* Seitensprung nach jeder Seite */
+    box-sizing: border-box;
 }
 
-/* Flexbox für die Spalten */
+/* Layout für die Spalten */
 .phb .content {
     display: flex;
-    justify-content: space-between;
-    gap: 2%;
-    padding-top: 10mm;
+    flex-wrap: wrap;
+    gap: 2%; /* Abstand zwischen den Spalten */
 }
 
 /* Jede Spalte nimmt 48% der Breite ein */
 .phb .column {
-    width: 48%;
+    width: 48%; /* Breite der Spalten */
     padding: 10px;
     box-sizing: border-box;
     color: #222;
     line-height: 1.5;
+    page-break-inside: avoid; /* Verhindert, dass der Inhalt in eine neue Seite umbricht */
 }
 
-/* Seitenumbruch nach jeder zweiten Spalte */
-@media print {
-    .phb {
-        page-break-before: always; /* Neue Seite, wenn genug Inhalt vorhanden ist */
-    }
+/* Blockquote */
+.phb blockquote {
+    background-color: lightgrey;
+    margin-top: 1em;
+    padding: 0.5em;
 }
 
-/* Stil für den Inhalt, wenn eine neue Seite beginnt */
-.phb .content:after {
-    content: "";
-    display: block;
-    clear: both;
+.phb table {
+    font-size: 9pt;
+    width: 100%;
 }
 
-/* Stile für Überschriften */
+/* Zusätzliche Stile für Tabellen und andere Elemente */
+.phb table th, .phb table td {
+    padding: 5px;
+    border: 1px solid #ccc;
+}
+
+/* Überschriften und Absätze */
 .phb h1, .phb h2, .phb h3, .phb h4, .phb h5 {
     margin-top: 0.2em;
     margin-bottom: 0.2em;
-    font-family: 'MrJeeves', sans-serif;
-    font-weight: 800;
     color: #58180D;
 }
 
-/* Stil für Unterüberschriften */
 .phb h2 {
     font-size: 1.8em;
     margin-bottom: 10px;
@@ -65,59 +65,7 @@
     border-bottom: 2px solid #c9ad6a;
 }
 
-.phb h5 {
-    font-family: ff-scala-sans-pro;
-    font-variant: small-caps;
-    font-weight: 600;
-}
-
-
-/* Zusätzlicher Stil für Blockquotes */
-.phb blockquote {
-    background-color: lightgrey;
-    margin-top: 1em;
-    padding: 0.5em;
-}
-
-/* Beispiel für Bilder in einem Blockquote */
-.phb blockquote img {
-    max-width: 100%;
-    height: auto;
-}
-
-/* Dynamische Spaltenerstellung auf der Seite */
-.phb .column {
-    display: inline-block;
-    vertical-align: top;
-    width: 48%;
-    padding-right: 2%;
-}
-
-/* Zusätzliche Stile für Text */
-.phb table {
-    font-size: 9pt;
-    width: 100%;
-    font-family: ff-scala-sans-pro;
-}
-
-/* Porträts */
-.portrait {
-    width: 22%;
-    position: absolute;
-    right: 0;
-    top: 4px;
-    z-index: 1;
-}
-
-/* Dynamische Bildpositionierung innerhalb der Seite */
-.phb .content hr+hr+section blockquote img.portrait {
-    width: 10%;
-    left: 38%;
-}
-
-/* Seitenumbruch innerhalb des Drucks */
-@media print {
-    .phb {
-        page-break-before: always;
-    }
+/* Stil für den Blockquote */
+.phb blockquote hr {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M0 0l2 1L0 2z' fill='%239c2b1b'/%3E%3C/svg%3E");
 }
diff --git a/test.html b/test.html
index 16dd6c3..70530bd 100644
--- a/test.html
+++ b/test.html
@@ -7,60 +7,118 @@
     <link rel="stylesheet" href="dnd-book.css"> <!-- Dein CSS-File -->
 </head>
 <body>
+
+    <!-- Seite 1 -->
     <div class="phb">
         <div class="content">
-            <!-- Erster Abschnitt der Spalten: Elfen -->
+            <!-- Erste Spalte: Elfen -->
             <div class="column">
                 <h1>Die Elfen und ihre Geschichte</h1>
                 <p>Die Elfen sind eine uralte Rasse, bekannt für ihre Weisheit und Verbindung zur Natur...</p>
-    
+
                 <h2>Der Aufstieg des ersten Elfenkönigs</h2>
                 <p>Der erste Elfenkönig, Ilinthar, führte seine Leute aus der Dunkelheit der frühen Zeiten...</p>
-    
+
                 <h3>Die goldene Ära der Elfen</h3>
                 <p>In der goldenen Ära der Elfen errichteten sie monumentale Städte...</p>
+
+                <blockquote>
+                    <p>„Der Wald ist nicht nur ein Ort, sondern ein lebendiger Organismus“, sagte der weise Magier. „Wer sich in ihn wagt, muss die Regeln des Waldes respektieren.“</p>
+                </blockquote>
+
+                <table>
+                    <tr>
+                        <th>Charakter</th>
+                        <th>Rasse</th>
+                        <th>Waffe</th>
+                    </tr>
+                    <tr>
+                        <td>Filaron</td>
+                        <td>Elf</td>
+                        <td>Bogen</td>
+                    </tr>
+                    <tr>
+                        <td>Grunther</td>
+                        <td>Zwerg</td>
+                        <td>Axt</td>
+                    </tr>
+                </table>
             </div>
-    
-            <!-- Zweiter Abschnitt der Spalten: Zwerge -->
+
+            <!-- Zweite Spalte: Zwerge -->
             <div class="column">
                 <h1>Die Zwerge und ihre Bedeutung</h1>
                 <p>Die Zwerge sind für ihre Handwerkskunst und ihren tiefen Bezug zu den Bergen bekannt...</p>
-    
+
                 <h2>Die Entstehung der ersten Zwergenreiche</h2>
                 <p>Als die Zwerge das erste Mal die Berge betraten, fanden sie in den tiefen Höhlen reiche Erzvorkommen...</p>
-    
+
                 <h3>Die Zwergenkriege und ihre Krieger</h3>
                 <p>Die Geschichte der Zwerge ist von zahllosen Kriegen und Schlachten geprägt...</p>
 
-        <!-- Blockquote -->
-        <blockquote>
-            <p>„Der Wald ist nicht nur ein Ort, sondern ein lebendiger Organismus“, sagte der weise Magier. „Wer sich in ihn wagt, muss die Regeln des Waldes respektieren.“</p>
-        </blockquote>
+                <blockquote>
+                    <p>„Die Stärke eines Zwerges liegt nicht nur in seiner Axt, sondern in seinem unerschütterlichen Willen“, sagte der alte Schmied.</p>
+                </blockquote>
 
-        <!-- Tabelle -->
-        <table>
-            <tr>
-                <th>Charakter</th>
-                <th>Rasse</th>
-                <th>Waffe</th>
-            </tr>
-            <tr>
-                <td>Filaron</td>
-                <td>Elf</td>
-                <td>Bogen</td>
-            </tr>
-            <tr>
-                <td>Grunther</td>
-                <td>Zwerg</td>
-                <td>Axt</td>
-            </tr>
-        </table>
-
-        <!-- Weiterer Text -->
-        <p>Die beiden Abenteurer erreichten schließlich den Wald und standen vor der Entscheidung, ob sie den geheimen Pfad betreten sollten...</p>
+                <table>
+                    <tr>
+                        <th>Charakter</th>
+                        <th>Rasse</th>
+                        <th>Waffe</th>
+                    </tr>
+                    <tr>
+                        <td>Thorin</td>
+                        <td>Zwerg</td>
+                        <td>Hammer</td>
+                    </tr>
+                    <tr>
+                        <td>Haldor</td>
+                        <td>Zwerg</td>
+                        <td>Schwert</td>
+                    </tr>
+                </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">
+                <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>
+
+                <blockquote>
+                    <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">
+                <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>
+
+                <table>
+                    <tr>
+                        <th>Gottheit</th>
+                        <th>Domäne</th>
+                        <th>Anhänger</th>
+                    </tr>
+                    <tr>
+                        <td>Aerath</td>
+                        <td>Winde</td>
+                        <td>Flügelvolk</td>
+                    </tr>
+                    <tr>
+                        <td>Valkor</td>
+                        <td>Krieg</td>
+                        <td>Kriegsherren</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
     </div>
-</div>
-</div>
 
 </body>
 </html>