/* 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 */ position: relative; } /* Flexbox für die Spalten */ .phb .content { display: flex; justify-content: space-between; gap: 2%; padding-top: 10mm; } /* Jede Spalte nimmt 48% der Breite ein */ .phb .column { width: 48%; padding: 10px; box-sizing: border-box; color: #222; line-height: 1.5; } /* Seitenumbruch nach jeder zweiten Spalte */ @media print { .phb { page-break-before: always; /* Neue Seite, wenn genug Inhalt vorhanden ist */ } } /* Stil für den Inhalt, wenn eine neue Seite beginnt */ .phb .content:after { content: ""; display: block; clear: both; } /* Stile für Überschriften */ .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; } .phb h3 { font-size: 0.529cm; 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; } }