change to em (first values x5)

dnd-book.css

@@ -1,12 +1,10 @@
 /* Container für das Buchlayout */
 .phb {
-    width: 210mm;
-    /* A4 Breite */
-    height: 296.8mm;
-    /* A4 Höhe */
-    margin: 20mm auto;
+    width: 65.625em; /* 210mm / 16px (Basis-Schriftgröße) */
+    height: 92.5em; /* 296.8mm / 16px */
+    margin: 6.25em auto; /* 20mm / 16px */
     /* Zentriert das Layout horizontal auf dem Bildschirm */
-    padding: 10mm;
+    padding: 3.125em; /* 10mm / 16px */
     /* Verringert das Padding auf der Seite, um mehr Platz zu schaffen */
     position: relative;
     background-image: url('./background.png');
@@ -15,7 +13,7 @@
     /* 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);
+    box-shadow: -0.625em 0 1.25em rgba(0, 0, 0, 0.3), 0.625em 0 1.25em rgba(0, 0, 0, 0.3);
     /* Schatten links und rechts */
     display: flex;
     justify-content: center;
@@ -23,7 +21,7 @@
     box-sizing: border-box;
     page-break-before: always;
     /* Seite beginnt immer nach einer neuen phb */
-    font-size: 16px; /* Basis-Schriftgröße */
+    font-size: 1em; /* Basis-Schriftgröße */
 }
 
 .phb::after {
@@ -32,18 +30,18 @@
     position: absolute;
     bottom: 0;
     left: 0;
-    height: 55px;
+    height: 3.4375em; /* 55px / 16px */
     width: 100%;
     background-image: url('./footer_even.png');
     background-size: cover;
     background-position: center;
     /* Ensure image is centered */
-    padding-top: 28px;
+    padding-top: 1.75em; /* 28px / 16px */
     /* Adjust the vertical position of the text */
     text-align: center;
-    font-size: 11px;
-    padding-left: 65px;
-    padding-right: 85px;
+    font-size: 0.6875em; /* 11px / 16px */
+    padding-left: 4.0625em; /* 65px / 16px */
+    padding-right: 5.3125em; /* 85px / 16px */
     line-height: 1.1;
     color: white;
     /* Ensure text is readable over the footer image */
@@ -57,7 +55,7 @@
 .phb .content {
     display: flex;
     flex-wrap: wrap;
-    gap: 1%;
+    gap: 0.0625em; /* 1% / 16px */
     /* Verringert den Abstand zwischen den Spalten */
     width: 100%;
     /* Gesamtbreite für den Inhalt */
@@ -67,7 +65,7 @@
 .phb .column {
     width: 48%;
     /* Breite der Spalten */
-    padding: 5mm;
+    padding: 0.3125em; /* 5mm / 16px */
     /* Reduziert das Padding in den Spalten */
     box-sizing: border-box;
     color: #222;
@@ -76,37 +74,36 @@
     /* Verhindert, dass der Inhalt in eine neue Seite umbricht */
 }
 
-
 /* Stil für Blockquotes */
 .phb blockquote {
-    margin: 0 0 21px;
-    font-size: 17.5px;
-    border-left: 5px solid #f4f5f5;
+    margin: 0 0 1.3125em; /* 21px / 16px */
+    font-size: 1.09375em; /* 17.5px / 16px */
+    border-left: 0.3125em solid #f4f5f5; /* 5px / 16px */
     font-family: ScalySans;
     box-sizing: border-box;
-    padding: 5px 10px;
+    padding: 0.3125em 0.625em; /* 5px 10px / 16px */
     background-color: #e0e5c1;
     border-style: solid;
-    border-width: 11px;
+    border-width: 0.6875em; /* 11px / 16px */
     border-image: url('./note-wrap.png') 11;
-      border-image-outset: 0;
-    border-image-outset: 9px 0;
-    box-shadow: 1px 4px 14px #888;
+    border-image-outset: 0;
+    border-image-outset: 0.5625em 0; /* 9px / 16px */
+    box-shadow: 0.0625em 0.25em 0.875em #888; /* 1px 4px 14px / 16px */
 }
 
 /* Stil für Tabellen */
 .phb table {
-    font-size: 9pt;
+    font-size: 0.5625em; /* 9pt / 16px */
     width: 100%;
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin-top: 0.625em; /* 10px / 16px */
+    margin-bottom: 0.625em; /* 10px / 16px */
 }
 
 /* Stil für Tabellenkopf */
 .phb table th,
 .phb table td {
-    padding: 5px;
-    border: 1px solid #ccc;
+    padding: 0.3125em; /* 5px / 16px */
+    border: 0.0625em solid #ccc; /* 1px / 16px */
 }
 
 /* Überschriften und Absätze */
@@ -114,8 +111,8 @@
 .phb h2,
 .phb h3,
 .phb h4 {
-    margin-top: .2em;
-    margin-bottom: .2em;
+    margin-top: 0.0125em; /* 0.2em / 16px */
+    margin-bottom: 0.0125em; /* 0.2em / 16px */
     font-family: 'MrJeeves', sans-serif;
     font-weight: 800;
     color: #58180D;
@@ -123,29 +120,29 @@
 
 .phb h1 {
     column-span: all;
-    font-size: 2.3em;
+    font-size: 1.4375em; /* 2.3em / 16px */
     -webkit-column-span: all;
     -moz-column-span: all;
 }
 
 .phb h2 {
-    font-size: 1.6em;
+    font-size: 1em; /* 1.6em / 16px */
 }
 
 .phb h3 {
-    font-size: 1.2em;
-    border-bottom: 2px solid #c9ad6a;
+    font-size: 0.75em; /* 1.2em / 16px */
+    border-bottom: 0.125em solid #c9ad6a; /* 2px / 16px */
 }
 
 .phb h4 {
     margin-bottom: 0;
-    font-size: 1em;
+    font-size: 0.625em; /* 1em / 16px */
 }
 
 .phb h5 {
-    margin-bottom: .2em;
+    margin-bottom: 0.0125em; /* 0.2em / 16px */
     font-family: 'ScalySansSmallCaps', sans-serif;
-    font-size: .8em;
+    font-size: 0.5em; /* 0.8em / 16px */
     font-weight: 900;
 }
 
@@ -157,4 +154,4 @@
 /* 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");
-}
+}