add more images and including those

dnd-book.css

@@ -1,45 +1,97 @@
 /* Container für das Buchlayout */
 .phb {
-    width: 210mm; /* A4 Breite */
-    height: 296.8mm; /* A4 Höhe */
-    margin: 20mm auto; /* Zentriert das Layout horizontal auf dem Bildschirm */
-    padding: 10mm; /* Verringert das Padding auf der Seite, um mehr Platz zu schaffen */
+    width: 210mm;
+    /* A4 Breite */
+    height: 296.8mm;
+    /* A4 Höhe */
+    margin: 20mm auto;
+    /* Zentriert das Layout horizontal auf dem Bildschirm */
+    padding: 10mm;
+    /* Verringert das Padding auf der Seite, um mehr Platz zu schaffen */
     position: relative;
-    background-image: url('./background.png'); /* Hintergrundbild */
-    background-size: cover; /* Hintergrundbild strecken */
-    background-position: center; /* Bild zentrieren */
-    box-shadow: -10px 0 20px rgba(0, 0, 0, 0.3), 10px 0 20px rgba(0, 0, 0, 0.3); /* Schatten links und rechts */
+    background-image: url('./background.png');
+    /* Hintergrundbild */
+    background-size: cover;
+    /* Hintergrundbild strecken */
+    background-position: center;
+    /* Bild zentrieren */
+    box-shadow: -10px 0 20px rgba(0, 0, 0, 0.3), 10px 0 20px rgba(0, 0, 0, 0.3);
+    /* Schatten links und rechts */
     display: flex;
-    justify-content: center; /* Zentriert die Spalten */
+    justify-content: center;
+    /* Zentriert die Spalten */
     box-sizing: border-box;
-    page-break-before: always; /* Seite beginnt immer nach einer neuen phb */
+    page-break-before: always;
+    /* Seite beginnt immer nach einer neuen phb */
+    font-size: 16px; /* Basis-Schriftgröße */
+}
+
+.phb::after {
+    content: "";
+    /* Necessary for the pseudo-element to be visible */
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 55px;
+    width: 100%;
+    background-image: url('./footer_even.png');
+    background-size: cover;
+    background-position: center;
+    /* Ensure image is centered */
+    padding-top: 28px;
+    /* Adjust the vertical position of the text */
+    text-align: center;
+    font-size: 11px;
+    padding-left: 65px;
+    padding-right: 85px;
+    line-height: 1.1;
+    color: white;
+    /* Ensure text is readable over the footer image */
+    z-index: 2;
+    /* Ensure footer is always above other content */
+    box-sizing: border-box;
+    /* Ensure padding is included in the element's width/height */
 }
 
 /* Layout für die Spalten */
 .phb .content {
     display: flex;
     flex-wrap: wrap;
-    gap: 1%; /* Verringert den Abstand zwischen den Spalten */
-    width: 100%; /* Gesamtbreite für den Inhalt */
+    gap: 1%;
+    /* Verringert den Abstand zwischen den Spalten */
+    width: 100%;
+    /* Gesamtbreite für den Inhalt */
 }
 
 /* Jede Spalte nimmt 48% der Breite ein */
 .phb .column {
-    width: 48%; /* Breite der Spalten */
-    padding: 5mm; /* Reduziert das Padding in den Spalten */
+    width: 48%;
+    /* Breite der Spalten */
+    padding: 5mm;
+    /* Reduziert das Padding in den Spalten */
     box-sizing: border-box;
     color: #222;
     line-height: 1.5;
-    page-break-inside: avoid; /* Verhindert, dass der Inhalt in eine neue Seite umbricht */
+    page-break-inside: avoid;
+    /* Verhindert, dass der Inhalt in eine neue Seite umbricht */
 }
 
 
 /* Stil für Blockquotes */
 .phb blockquote {
-    background-color: lightgrey;
-    margin-top: 1em;
-    padding: 0.5em;
-    font-style: italic;
+    margin: 0 0 21px;
+    font-size: 17.5px;
+    border-left: 5px solid #f4f5f5;
+    font-family: ScalySans;
+    box-sizing: border-box;
+    padding: 5px 10px;
+    background-color: #e0e5c1;
+    border-style: solid;
+    border-width: 11px;
+    border-image: url('./note-wrap.png') 11;
+      border-image-outset: 0;
+    border-image-outset: 9px 0;
+    box-shadow: 1px 4px 14px #888;
 }
 
 /* Stil für Tabellen */
@@ -51,17 +103,50 @@
 }
 
 /* Stil für Tabellenkopf */
-.phb table th, .phb table td {
+.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;
+.phb h1,
+.phb h2,
+.phb h3,
+.phb h4 {
+    margin-top: .2em;
+    margin-bottom: .2em;
+    font-family: 'MrJeeves', sans-serif;
+    font-weight: 800;
     color: #58180D;
-    font-weight: bold;
+}
+
+.phb h1 {
+    column-span: all;
+    font-size: 2.3em;
+    -webkit-column-span: all;
+    -moz-column-span: all;
+}
+
+.phb h2 {
+    font-size: 1.6em;
+}
+
+.phb h3 {
+    font-size: 1.2em;
+    border-bottom: 2px solid #c9ad6a;
+}
+
+.phb h4 {
+    margin-bottom: 0;
+    font-size: 1em;
+}
+
+.phb h5 {
+    margin-bottom: .2em;
+    font-family: 'ScalySansSmallCaps', sans-serif;
+    font-size: .8em;
+    font-weight: 900;
 }
 
 /* Sicherstellen, dass die nächste Seite nach der ersten immer auf einer neuen Seite beginnt */
@@ -69,16 +154,6 @@
     page-break-before: always;
 }
 
-.phb h2 {
-    font-size: 1.8em;
-    margin-bottom: 10px;
-}
-
-.phb h3 {
-    font-size: 0.529cm;
-    border-bottom: 2px solid #c9ad6a;
-}
-
 /* 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");