.pages { --page-width: 210mm; --page-height: calc(var(--page-width) * sqrt(2)); width: var(--page-width); margin: 2em auto; font-size: 12pt; color: #222; display: grid; gap: 2em; & * { box-sizing: border-box; } & > * { position: relative; width: var(--page-width); height: var(--page-height); padding: 15mm; background-image: url('./background.png'); background-size: cover; box-shadow: -10px 0 20px rgba(0, 0, 0, 0.3), 10px 0 20px rgba(0, 0, 0, 0.3); display: grid; gap: 10mm; &:has(> :last-child:nth-child(1)) { grid-template-columns: 1fr; } &:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, 1fr); } & > * > :first-child { margin-top: 0; } & blockquote { margin: 1em 0; padding: 1em; background-color: #e0e5c1; border-image: url('./note-wrap.png') 11 / auto / 9px 0; box-shadow: 1px 4px 14px #888; } & table { width: 100%; & td, th { border: 1pt solid #ccc; } } &::after { position: absolute; bottom: 0; width: 100%; height: 42pt; content: ""; background-image: url('./footer_even.png'); background-size: cover; } } @media print { margin: 0; } } /* Überschriften und Absätze */ .phb h1, .phb h2, .phb h3, .phb h4 { margin-top: .2em; margin-bottom: .2em; font-family: 'Times New Roman'; font-weight: 800; color: #58180D; } .phb h1 { column-span: all; font-size: 1.6; -webkit-column-span: all; -moz-column-span: all; } .phb h2 { font-size: 1.4em; } .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: 'Times New Roman'; font-size: .8em; font-weight: 900; }