/* Container für das Buchlayout */
.phb {
    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: 3.125em; /* 10mm / 16px */
    /* 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: -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;
    /* Zentriert die Spalten */
    box-sizing: border-box;
    page-break-before: always;
    /* Seite beginnt immer nach einer neuen phb */
    font-size: 1em; /* Basis-Schriftgröße */
}

.phb::after {
    content: "";
    /* Necessary for the pseudo-element to be visible */
    position: absolute;
    bottom: 0;
    left: 0;
    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: 1.75em; /* 28px / 16px */
    /* Adjust the vertical position of the text */
    text-align: center;
    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 */
    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: 0.0625em; /* 1% / 16px */
    /* 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: 0.3125em; /* 5mm / 16px */
    /* 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 */
}

/* Stil für Blockquotes */
.phb blockquote {
    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: 0.3125em 0.625em; /* 5px 10px / 16px */
    background-color: #e0e5c1;
    border-style: solid;
    border-width: 0.6875em; /* 11px / 16px */
    border-image: url('./note-wrap.png') 11;
    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: 0.5625em; /* 9pt / 16px */
    width: 100%;
    margin-top: 0.625em; /* 10px / 16px */
    margin-bottom: 0.625em; /* 10px / 16px */
}

/* Stil für Tabellenkopf */
.phb table th,
.phb table td {
    padding: 0.3125em; /* 5px / 16px */
    border: 0.0625em solid #ccc; /* 1px / 16px */
}

/* Überschriften und Absätze */
.phb h1,
.phb h2,
.phb h3,
.phb h4 {
    margin-top: 0.0125em; /* 0.2em / 16px */
    margin-bottom: 0.0125em; /* 0.2em / 16px */
    font-family: 'MrJeeves', sans-serif;
    font-weight: 800;
    color: #58180D;
}

.phb h1 {
    column-span: all;
    font-size: 1.4375em; /* 2.3em / 16px */
    -webkit-column-span: all;
    -moz-column-span: all;
}

.phb h2 {
    font-size: 1em; /* 1.6em / 16px */
}

.phb h3 {
    font-size: 0.75em; /* 1.2em / 16px */
    border-bottom: 0.125em solid #c9ad6a; /* 2px / 16px */
}

.phb h4 {
    margin-bottom: 0;
    font-size: 0.625em; /* 1em / 16px */
}

.phb h5 {
    margin-bottom: 0.0125em; /* 0.2em / 16px */
    font-family: 'ScalySansSmallCaps', sans-serif;
    font-size: 0.5em; /* 0.8em / 16px */
    font-weight: 900;
}

/* Sicherstellen, dass die nächste Seite nach der ersten immer auf einer neuen Seite beginnt */
.phb:not(:first-of-type) {
    page-break-before: always;
}

/* 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");
}