korrektes css

Asz.html

@@ -9,7 +9,7 @@
       <div class="main">
         <div class="main-grid">
           <div class="main-left">
-            <b>Frau   ,</b><br />geboren am xyu in Halle/Westf.,<br />war vom 01.08.xx bis zur Aushändigung des Zeugnisses Studierende des Bildungsgangs<br /><b>Fachschule des Sozialwesens in der Fachrichtung Sozialpädagogik</b>
+            <b>Frau   ,</b><br />geboren am xrr in Halle/Westf.,<br />war vom 01.08.xx bis zur Aushändigung des Zeugnisses Studierende des Bildungsgangs<br /><b>Fachschule des Sozialwesens in der Fachrichtung Sozialpädagogik</b>
             <div class="voffset-halb"></div>
             Der allgemeine Prüfungsausschuss stellte in seiner Abschlusskonferenz am 27.6.x fest:
             <div class="voffset-halb"></div>

daten/main.css

@@ -22,9 +22,6 @@
   font-style: italic;
   font-weight: bold;
 }
-svelte {
-  font-size: 62.5%;
-}
 
 @media print {
   * {
@@ -33,12 +30,8 @@ svelte {
 
   .page {
     page-break-after: always;
+    page-break-inside: avoid;
     margin: 0px;
-    border: none;
-    margin-bottom: 0px;
-    -webkit-box-shadow: initial;
-    -moz-box-shadow: initial;
-    box-shadow: initial;
   }
 
   .page[size="A4"][orientation="portrait"] {
@@ -58,13 +51,56 @@ svelte {
   }
 }
 
+@media screen {
+  .page {
+  border: 1px solid black;
+  box-shadow: 5px 5px 4px 0px silver;
+  }
+}
+
+svelte {
+  font-size: 62.5%;
+}
+
 .page {
   font-size: 1.2em;
-  /* currently ems cause chrome bug misinterpreting ems on body element */
   line-height: 1.5;
   font-weight: normal;
   font-family: "Tex Gyre Heros";
   color: #333;
+  position: relative;
+  padding: 10mm 25mm 10mm 25mm;
+  display: block;
+}
+
+.page[size="A4"][orientation="portrait"] {
+  width: 210mm;
+  height: 297mm;
+}
+
+.page[size="A4"][orientation="landscape"] {
+  width: 297mm;
+  height: 210mm;
+}
+
+.page[size="A3"][orientation="portrait"] {
+  width: 297mm;
+  height: 420mm;
+}
+
+.page[size="A3"][orientation="landscape"] {
+  width: 420mm;
+  height: 297mm;
+}
+
+.page[size="A5"][orientation="portrait"] {
+  width: 148mm;
+  height: 210mm;
+}
+
+.page[size="A5"][orientation="landscape"] {
+  width: 210mm;
+  height: 148mm;
 }
 
 /* Typography */
@@ -114,46 +150,6 @@ p {
   margin-top: 0;
 }
 
-.page {
-  position: relative;
-  padding: 10mm 25mm 10mm 25mm;
-  display: block;
-  border: 1px solid black;
-  -webkit-box-shadow: 5px 5px 4px 0px silver;
-  -moz-box-shadow: 5px 5px 4px 0px silver;
-  box-shadow: 5px 5px 4px 0px silver;
-}
-
-.page[size="A4"][orientation="portrait"] {
-  width: 210mm;
-  height: 296.8mm;
-}
-
-.page[size="A4"][orientation="landscape"] {
-  width: 296.8mm;
-  height: 210mm;
-}
-
-.page[size="A3"][orientation="portrait"] {
-  width: 296.8mm;
-  height: 420mm;
-}
-
-.page[size="A3"][orientation="landscape"] {
-  width: 420mm;
-  height: 296.8mm;
-}
-
-.page[size="A5"][orientation="portrait"] {
-  width: 14.8cm;
-  height: 21cm;
-}
-
-.page[size="A5"][orientation="landscape"] {
-  width: 21cm;
-  height: 14.8cm;
-}
-
 .grid {
   display: grid;
   grid-gap: 0px;