init

- standard css has looots of problems
2024-12-08 21:23:17 +01:00 · 2024-12-08 21:23:17 +01:00 · 5e7766abbd
commit 5e7766abbd
6 changed files with 613 additions and 0 deletions
--- a/background.png
+++ b/background.png
--- a/cystrelias-almanac.html
+++ b/cystrelias-almanac.html
@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Cystrelias Almanac Of Wondrous Secrets</title>
+  <link rel="stylesheet" href="/dnd-book.css">
+</head>
+
+<body >
+    <!-- Erstelle ein Container-Div mit der Klasse "phb" -->
+    <div class="phb">
+  <h1 id="cystrelias-almanac-of-wondrous-secrets">Cystrelias Almanac Of Wondrous Secrets</h1>
+  <p><a
+      href="https://www.gmbinder.com/share/-L0WUSjJyFHG7PDyIFta">https://www.gmbinder.com/share/-L0WUSjJyFHG7PDyIFta</a>
+  </p>
+  <h2 id="kapitel-1---v%C3%B6lker-und-spezies-a">Kapitel 1 - Völker und Spezies </a></h2>
+  <h3 id="satyrn">Satyrn</h3>
+  <p>Satyrn haben einen wohlverdienten Ruf für ihre gute Laune, ihre geselligen Persönlichkeiten und ihre Liebe zu
+    Festen. Die meisten Satyrn werden von einfachen Wünschen angetrieben, die Welt zu sehen und alle ihre Freuden zu
+    genießen. Ihre Spontaneität und Launenhaftigkeit bringen sie zwar manchmal in Konflikt mit stoischeren Völkern, aber
+    Satyrn lassen sich von der Launenhaftigkeit anderer selten von ihrem eigenen Glück abhalten. Das Leben ist
+    schließlich ein Segen der Götter, und die angemessene Reaktion auf ein solches Geschenk ist für die meisten Satyrn,
+    es mit Freude anzunehmen.</p>
+  <h4 id="geborene-der-wildnis">Geborene der Wildnis</h4>
+  <p>In ihrer körperlichen Gestalt verkörpern die Satyrn eine Verschmelzung von menschlicher Zivilisation und der
+    Freiheit wilder Tiere. Im Allgemeinen sehen sie den Menschen ähnlich, mit einer Reihe von Staturen und Merkmalen.
+    Aber ihre ziegenartigen Hörner, spitzen Ohren und behaarten Unterkörper unterscheiden sie deutlich. Die massiven
+    Hörner der Satyrn sind an der Schädelbasis mit dem Kopf verbunden, während ihre Beine in kräftigen Hufen enden. Ihr
+    Körper ist von der Taille abwärts mit dickem Fell bedeckt, das an der Taille kürzer und unterhalb der Knie länger
+    ist. Kurze, weiche Haare wachsen an Hals und Wirbelsäule, entlang der Schultern und auf den Unterarmen.</p>
+  <h4 id="das-leben-sch%C3%BCtzen">Das Leben Schützen</h4>
+  <p>Die meisten Satyrn glauben, dass die anderen Völker von Theros mit der Plage der Ernsthaftigkeit behaftet sind.
+    Satyrn spotten über die Bemühungen der Polisbauer mit ihren Gesetzen und rechten Winkeln, und sie machen sich über
+    die Philosophen mit ihren endlosen Theorien und endlosen Diskussionen lustig.</p>
+  <p>Satyrn sind der Meinung, dass das Leben mit allen Sinnen gelebt und erlebt werden muss. Satyrn sehen die Welt und
+    alles in ihr als einen Haken voller Genüsse, und sie wollen jede Seite erkunden. In Kapitel 3 erfährst du mehr über
+    die Heimat der Satyrn, das Skola-Tal.</p>
+  <h4 id="die-kunst-der-offenbarung">Die Kunst der Offenbarung</h4>
+  <p>Die Menschen der Poleis stellen sich Satyrfeste im Allgemeinen als rauschende Bacchanale vor, bei denen alles
+    Mögliche passieren kann. Dieses Bild ist nicht falsch, aber es ist unvollständig, denn zu einem Gelage gehört mehr
+    als Ausschweifung. Für Satyrn ist das Feiern eine Lebenseinstellung. Sie erfreuen sich an den kleinen Dingen: dem
+    Gesang eines Vogels, einer warmen Brise, dem Geruch eines leckeren Kuchens, dem Entspannen an einem Fluss im
+    Sonnenschein. Das Leben bietet diese Gaben frei an, und für einen Satyr sind sie wertvoller als Gold oder Ruhm.
+    Schwelgen bedeutet, die Zwänge der Zeit zu vergessen, die Zukunft und die Vergangenheit loszulassen und ganz im
+    gegenwärtigen Augenblick zu sein. Für Satyrn ist die Begegnung mit dem Leben mit allen Sinnen eine Ehre für die
+    Götter, und - was am wichtigsten ist - sie fühlt sich wirklich gut an. Angetrieben von Instinkt und Intuition,
+    erweisen sich die meisten Satyrn als unberechenbar und folgen ihrem Sinn für Wunder, wohin auch immer er sie führt.
+  </p>
+  <h4 id="ein-exzentrisches-v%C3%B6lkchen">Ein Exzentrisches Völkchen</h4>
+  <p>Satyrn sind für ihre Exzentrik bekannt. Manche Menschen verbringen zu viel Zeit damit, sich darüber Gedanken zu
+    machen, warum Satyrn sich so verhalten, wie sie es tun. Aber Satyrn selbst sind einfach so, wie sie sind, und haben
+    kein Bedürfnis zu verstehen, was sie antreibt, geschweige denn es anderen zu erklären. Die Tabelle der
+    Satyr-Exzentrizitäten zeigt einige Vorlieben oder Neigungen, die dein Satyr-Charakter haben könnte.</p>
+  <h5 id="satyr-eigenschaften">Satyr Eigenschaften</h5>
+  <table>
+    <thead>
+      <tr>
+        <th>D8</th>
+        <th>Charakteristik</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1</td>
+        <td>Blumen sind die tollsten Dinge überhaupt. Ich möchte sie pflücken, sie tragen und ihre stillen Geheimnisse
+          entdecken.</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>Es gibt keinen Baum und keine Statue, auf die man nicht klettern könnte.</td>
+      </tr>
+      <tr>
+        <td>3</td>
+        <td>Nichts vereint das Unglück so gut wie ein fröhlicher Tanz.</td>
+      </tr>
+      <tr>
+        <td>4</td>
+        <td>Manchmal hilft es wirklich mit einer Pflanze zu sprechen.</td>
+      </tr>
+      <tr>
+        <td>5</td>
+        <td>Wenn ich ratlos bin, rauche ich eine Pfeife. Und wenn ich eine rauche, so wird es eine wunderbare Pfeife
+          sein.</td>
+      </tr>
+      <tr>
+        <td>6</td>
+        <td>Ich stelle mir vor, dass meine Kleidung meine glorreiche Seele ist, die ich vor aller Welt zur Schau stelle,
+          und ich kleide mich entsprechend.</td>
+      </tr>
+      <tr>
+        <td>7</td>
+        <td>Hörner zu haben, ist das Beste. Es macht Spaß, sie zu schmücken, und man kann eine Amphore öffnen, ohne
+          Probleme.</td>
+      </tr>
+      <tr>
+        <td>8</td>
+        <td>Wenn ich etwas wirklich Wichtiges zu sagen habe, singe ich es immer.</td>
+      </tr>
+    </tbody>
+  </table>
+  <h3 id="satyr-namen">Satyr Namen</h3>
+  <p>Der Name eines Satyrs ist so verspielt und schelmisch wie er selbst, und jeder Name wird vergeben, wenn die
+    Persönlichkeit des Satyrs durchscheint. Die meisten Satyrn geben sich auch gegenseitig Spitznamen.</p>
+  <p><strong>Weibliche Namen:</strong> Aliki, Avra, Chan, Dafni, Eirini, Elpida, Irini, Kaiti, Lia, Niki, Tasia, Xeni,
+    Yanna, Zoi</p>
+  <p><strong>Männliche Namen:</strong> Aleksos, Dimi, Filippos, Ilias, Kyriakos, Neofytos, Omiros, Pantelis, Spyro,
+    Takis, Zemon</p>
+  <p><strong>Spitznamen:</strong> Hüpfer, Glitzerauge, Sonnenstrahl, Klip-Klop, Schnellfuß, Blütenkink</p>
+  <h3 id="merkmale-der-satyr">Merkmale der Satyr</h3>
+  <p>Dein Satyrcharakter hat die folgenden Volkseigenschaften</p>
+  <p><strong>Attributswerterhöhung.</strong> Dein Charisma-Wert erhöht sich um zwei und dein Geschicklichkeitswert
+    steigt um eins.</p>
+  <p><strong>Alter.</strong> Satyrn reifen und altern in etwa gleich schnell wie Menschen.</p>
+  <p><strong>Ausrichtung.</strong> Satyrn genießen es, ein Leben frei vom Mantel des Gesetzes zu führen. Sie neigen
+    dazu, gut zu sein, aber einige haben eine hinterhältige Ader und sorgen gerne für Unruhe.</p>
+  <p><strong>Größe.</strong> Satyrn sind zwischen knapp 1,80 m und etwa 1,80 m groß und im Allgemeinen schlank gebaut.
+    Deine Größe ist mittelgroß.</p>
+  <p><strong>Bewegungsrate.</strong> Deine Grundgeschwindigkeit beträgt neun Meter.</p>
+  <p><strong>Rammen.</strong> Du kannst deinen Kopf und deine Hörner für unbewaffnete Schläge einsetzen. Wenn du damit
+    triffst, fügst du 1w4 + deinen Stärke-Modifikator als Schlagschaden zu.</p>
+  <p><strong>Magieresistenz.</strong> Du hast einen Vorteil bei Rettungswürfen gegen Zauber und andere magische Effekte.
+  </p>
+  <p><strong>Fröhliche Sprünge.</strong> Immer wenn du einen Weit- oder Hochsprung machst, kannst du einen 1w6 Wurf
+    machen und die gewürfelte Zahl zu der Anzahl der Meter addieren, die du zurücklegst, selbst wenn du einen Sprung aus
+    dem Stand machst. Diese zusätzliche Distanz kostet wie üblich Bewegung.</p>
+  <p><strong>Feiernder.</strong> Du beherrschst die Fertigkeiten Darstellendes Spiel und Überredungskunst und ein
+    musikalisches Instrument deiner Wahl.</p>
+  <p><strong>Sprachen.</strong> Du kannst die Allgemeinsprache und Sylvan sprechen, lesen und schreiben.</p>
+
+
+</div>
+</body>
+
+</html>
--- a/cystrelias-almanac.md
+++ b/cystrelias-almanac.md
@ -0,0 +1,74 @@
+# Cystrelias Almanac Of Wondrous Secrets
+
+https://www.gmbinder.com/share/-L0WUSjJyFHG7PDyIFta
+
+## Kapitel 1 - Völker und Spezies </a>
+
+### Satyrn
+
+Satyrn haben einen wohlverdienten Ruf für ihre gute Laune, ihre geselligen Persönlichkeiten und ihre Liebe zu Festen. Die meisten Satyrn werden von einfachen Wünschen angetrieben, die Welt zu sehen und alle ihre Freuden zu genießen. Ihre Spontaneität und Launenhaftigkeit bringen sie zwar manchmal in Konflikt mit stoischeren Völkern, aber Satyrn lassen sich von der Launenhaftigkeit anderer selten von ihrem eigenen Glück abhalten. Das Leben ist schließlich ein Segen der Götter, und die angemessene Reaktion auf ein solches Geschenk ist für die meisten Satyrn, es mit Freude anzunehmen.
+
+#### Geborene der Wildnis
+
+In ihrer körperlichen Gestalt verkörpern die Satyrn eine Verschmelzung von menschlicher Zivilisation und der Freiheit wilder Tiere. Im Allgemeinen sehen sie den Menschen ähnlich, mit einer Reihe von Staturen und Merkmalen. Aber ihre ziegenartigen Hörner, spitzen Ohren und behaarten Unterkörper unterscheiden sie deutlich. Die massiven Hörner der Satyrn sind an der Schädelbasis mit dem Kopf verbunden, während ihre Beine in kräftigen Hufen enden. Ihr Körper ist von der Taille abwärts mit dickem Fell bedeckt, das an der Taille kürzer und unterhalb der Knie länger ist. Kurze, weiche Haare wachsen an Hals und Wirbelsäule, entlang der Schultern und auf den Unterarmen.
+
+#### Das Leben Schützen
+
+Die meisten Satyrn glauben, dass die anderen Völker von Theros mit der Plage der Ernsthaftigkeit behaftet sind. Satyrn spotten über die Bemühungen der Polisbauer mit ihren Gesetzen und rechten Winkeln, und sie machen sich über die Philosophen mit ihren endlosen Theorien und endlosen Diskussionen lustig.
+
+Satyrn sind der Meinung, dass das Leben mit allen Sinnen gelebt und erlebt werden muss. Satyrn sehen die Welt und alles in ihr als einen Haken voller Genüsse, und sie wollen jede Seite erkunden. In Kapitel 3 erfährst du mehr über die Heimat der Satyrn, das Skola-Tal.
+
+#### Die Kunst der Offenbarung
+
+Die Menschen der Poleis stellen sich Satyrfeste im Allgemeinen als rauschende Bacchanale vor, bei denen alles Mögliche passieren kann. Dieses Bild ist nicht falsch, aber es ist unvollständig, denn zu einem Gelage gehört mehr als Ausschweifung. Für Satyrn ist das Feiern eine Lebenseinstellung. Sie erfreuen sich an den kleinen Dingen: dem Gesang eines Vogels, einer warmen Brise, dem Geruch eines leckeren Kuchens, dem Entspannen an einem Fluss im Sonnenschein. Das Leben bietet diese Gaben frei an, und für einen Satyr sind sie wertvoller als Gold oder Ruhm. Schwelgen bedeutet, die Zwänge der Zeit zu vergessen, die Zukunft und die Vergangenheit loszulassen und ganz im gegenwärtigen Augenblick zu sein. Für Satyrn ist die Begegnung mit dem Leben mit allen Sinnen eine Ehre für die Götter, und - was am wichtigsten ist - sie fühlt sich wirklich gut an. Angetrieben von Instinkt und Intuition, erweisen sich die meisten Satyrn als unberechenbar und folgen ihrem Sinn für Wunder, wohin auch immer er sie führt.
+
+#### Ein Exzentrisches Völkchen
+
+Satyrn sind für ihre Exzentrik bekannt. Manche Menschen verbringen zu viel Zeit damit, sich darüber Gedanken zu machen, warum Satyrn sich so verhalten, wie sie es tun. Aber Satyrn selbst sind einfach so, wie sie sind, und haben kein Bedürfnis zu verstehen, was sie antreibt, geschweige denn es anderen zu erklären. Die Tabelle der Satyr-Exzentrizitäten zeigt einige Vorlieben oder Neigungen, die dein Satyr-Charakter haben könnte.
+
+##### Satyr Eigenschaften
+
+| D8 | Charakteristik                                                                 |
+|----|-------------------------------------------------------------------------------|
+| 1  | Blumen sind die tollsten Dinge überhaupt. Ich möchte sie pflücken, sie tragen und ihre stillen Geheimnisse entdecken. |
+| 2  | Es gibt keinen Baum und keine Statue, auf die man nicht klettern könnte.      |
+| 3  | Nichts vereint das Unglück so gut wie ein fröhlicher Tanz.                    |
+| 4  | Manchmal hilft es wirklich mit einer Pflanze zu sprechen.                     |
+| 5  | Wenn ich ratlos bin, rauche ich eine Pfeife. Und wenn ich eine rauche, so wird es eine wunderbare Pfeife sein. |
+| 6  | Ich stelle mir vor, dass meine Kleidung meine glorreiche Seele ist, die ich vor aller Welt zur Schau stelle, und ich kleide mich entsprechend. |
+| 7  | Hörner zu haben, ist das Beste. Es macht Spaß, sie zu schmücken, und man kann eine Amphore öffnen, ohne Probleme. |
+| 8  | Wenn ich etwas wirklich Wichtiges zu sagen habe, singe ich es immer.          |
+
+### Satyr Namen
+
+Der Name eines Satyrs ist so verspielt und schelmisch wie er selbst, und jeder Name wird vergeben, wenn die Persönlichkeit des Satyrs durchscheint. Die meisten Satyrn geben sich auch gegenseitig Spitznamen.
+
+**Weibliche Namen:** Aliki, Avra, Chan, Dafni, Eirini, Elpida, Irini, Kaiti, Lia, Niki, Tasia, Xeni, Yanna, Zoi  
+
+**Männliche Namen:** Aleksos, Dimi, Filippos, Ilias, Kyriakos, Neofytos, Omiros, Pantelis, Spyro, Takis, Zemon  
+
+**Spitznamen:** Hüpfer, Glitzerauge, Sonnenstrahl, Klip-Klop, Schnellfuß, Blütenkink  
+
+### Merkmale der Satyr
+
+Dein Satyrcharakter hat die folgenden Volkseigenschaften
+
+**Attributswerterhöhung.** Dein Charisma-Wert erhöht sich um zwei und dein Geschicklichkeitswert steigt um eins.  
+
+**Alter.** Satyrn reifen und altern in etwa gleich schnell wie Menschen.  
+
+**Ausrichtung.** Satyrn genießen es, ein Leben frei vom Mantel des Gesetzes zu führen. Sie neigen dazu, gut zu sein, aber einige haben eine hinterhältige Ader und sorgen gerne für Unruhe.  
+
+**Größe.** Satyrn sind zwischen knapp 1,80 m und etwa 1,80 m groß und im Allgemeinen schlank gebaut. Deine Größe ist mittelgroß.  
+
+**Bewegungsrate.** Deine Grundgeschwindigkeit beträgt neun Meter.  
+
+**Rammen.** Du kannst deinen Kopf und deine Hörner für unbewaffnete Schläge einsetzen. Wenn du damit triffst, fügst du 1w4 + deinen Stärke-Modifikator als Schlagschaden zu.  
+
+**Magieresistenz.** Du hast einen Vorteil bei Rettungswürfen gegen Zauber und andere magische Effekte.  
+
+**Fröhliche Sprünge.** Immer wenn du einen Weit- oder Hochsprung machst, kannst du einen 1w6 Wurf machen und die gewürfelte Zahl zu der Anzahl der Meter addieren, die du zurücklegst, selbst wenn du einen Sprung aus dem Stand machst. Diese zusätzliche Distanz kostet wie üblich Bewegung.  
+
+**Feiernder.** Du beherrschst die Fertigkeiten Darstellendes Spiel und Überredungskunst und ein musikalisches Instrument deiner Wahl.  
+
+**Sprachen.** Du kannst die Allgemeinsprache und Sylvan sprechen, lesen und schreiben.  
--- a/dnd-book.css
+++ b/dnd-book.css
@ -0,0 +1,131 @@
+/* Setzt den Hintergrund und das Layout der Seite */
+.phb {
+    width: 210mm; /* A4-Breite */
+    height: 296.8mm; /* A4-Höhe */
+    font-family: 'bookmania', sans-serif; /* Schriftart */
+    background-image: url('./background.png'); /* Lokales Hintergrundbild */
+    background-size: cover; /* Bild auf die ganze Seite strecken */
+    background-position: center; /* Bild zentrieren */
+    color: #222; /* Textfarbe */
+    padding: 20mm; /* Innenabstand */
+    box-sizing: border-box; /* Boxmodell */
+    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Schatten für den Buch-Effekt */
+    page-break-after: always; /* Seitenumbruch nach jeder Seite */
+    position: relative; /* Damit andere absolute Positionierungen innerhalb der Seite funktionieren */
+    column-count: 2; /* Teilt den Inhalt in zwei Spalten */
+    column-gap: 2%; /* Abstand zwischen den Spalten */
+    column-rule: 1px solid #ccc; /* Regel zwischen den Spalten */
+    overflow: hidden; /* Verhindert Überlauf in die Spalten */
+}
+
+/* Stil für den Inhalt */
+.phb .content {
+    padding-top: 10mm;
+}
+
+
+/* Text innerhalb von Blockquotes */
+.phb blockquote {
+    background-color: lightgrey;
+    margin-top: 1em;
+    padding: 0.5em;
+}
+
+.phb blockquote p {
+    font-size: 9pt;
+    font-family: ff-scala-sans-pro;
+}
+
+.phb blockquote p strong {
+    font-weight: bold;
+    font-family: ff-scala-sans-pro;
+}
+
+/* Tabellen */
+.phb table {
+    font-size: 9pt;
+    font-family: ff-scala-sans-pro;
+    width: 100%; /* Volle Breite der Tabelle */
+}
+
+.phb table em {
+    font-family: ff-scala-sans-pro;
+}
+
+.phb table strong {
+    font-family: ff-scala-sans-pro;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+}
+
+/* Titeln und Ü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;
+}
+
+/* Stil für den ersten Buchstaben nach einer h1 */
+.phb h1+p::first-letter {
+    float: left;
+    font-family: Solberry;
+    font-size: 92pt;
+    color: #222;
+    line-height: 1.05em;
+    padding-right: 4pt;
+}
+
+/* Zusätzliche Styles für das 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");
+}
+
+/* Porträts */
+.portrait {
+    width: 22%;
+    position: absolute;
+    right: 0;
+    top: 4px;
+    z-index: 1 !important; 
+}
+
+/* Layout für ein weiteres Porträt */
+.phb hr+hr+section blockquote img.portrait {
+    width: 10%;
+    left: 38%;
+}
+
+/* Für zusätzliche Anpassungen bei Blockquote-Tischen */
+.phb hr+section blockquote table {
+    font-size: 10pt;
+}
+
+.phb hr+section blockquote ul {
+    font-family: "Scala Sans Pro";
+    padding-left: 1em;
+    font-size: 10pt;
+}
+
+.phb hr+section blockquote em {
+    font-family: "Scala Sans Pro";
+    font-style: italic;
+}
--- a/monsterblock.css
+++ b/monsterblock.css
@ -0,0 +1,205 @@
+
+body {
+    text-align: center;
+    font-size: 13.5px;
+    line-height: 1.2em;
+  }
+  body *{
+    box-sizing: border-box;
+    max-width: 100%;
+    font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica,
+      Arial, sans-serif;
+  }
+  .stat-block {
+    text-align: left;
+    margin: 20px;
+    display: inline-block;
+    vertical-align: top;
+    width: 17%;
+    min-width:280px;
+    background: #FDF1DC;
+    padding: 5px 10px 20px;
+    box-shadow: 0 0 1.5em #867453;
+  }
+  .stat-block.wide{
+    width: 46.5%;
+    min-width: 560px;
+    text-align: center;
+  }
+  .stat-block.wide .section-left,
+  .stat-block.wide .section-right{
+    display: inline-block;
+    vertical-align: top;
+    width: 48%;
+    text-align: left;
+  }
+  .stat-block.wide .section-left{
+    margin-right: 1.5%;
+  }
+  .stat-block.wide .section-right{
+    margin-left: 1.5%;
+  }
+  @media screen and (max-width: 675px){
+      .stat-block.wide{
+          min-width: 280px;
+      }
+      .stat-block.wide .section-left,
+      .stat-block.wide .section-right{
+        display: block;
+        width: 100%;
+      }
+      .stat-block.wide .section-left{
+        margin: 0;
+      }
+      .stat-block.wide .section-right{
+          margin: 0;
+      }
+  }
+  .orange-border{
+    display: block;
+    background: #E69A28;
+    border: 1px solid #000;
+    height: 5px;
+    padding: 0 10px 0;
+    margin: -10px -10px 0;
+    box-sizing: initial;
+  }
+  .orange-border.bottom{
+    margin: 15px -10px -20px;
+  }
+  .tapered-rule{
+    display: block;
+    width: 100%;
+    height: 5px;
+    border: none;
+    color: #922610;
+    fill: #922610;
+    stroke: #922610;
+  }
+  .creature-heading h1{
+    font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
+    color: #922610;
+    font-size: 23px;
+    line-height: 1.2em;
+    margin: 10px 0 0;
+    letter-spacing: 1px;
+    font-variant: small-caps;
+    font-weight: bold;
+  }
+  .creature-heading h2{
+    font-weight: normal;
+    font-style: italic;
+    font-size: 12px;
+    line-height: 1.2em;
+    margin: 0 0 10px;
+  }
+  .property-line h4,
+  .property-line p{
+    display: inline;
+    margin: 0;
+    color: #922610;
+    font-size: 13.5px;
+    line-height: 1.2em;
+  }
+  .property-line h4{
+    color: #7A200D;
+  }
+  .property-line{
+    text-indent: -1em;
+    padding-left: 1.1em;
+    line-height: 1.4em;
+  }
+  .property-line.first{
+    margin: 8px 0 0
+  }
+  .property-line.last{
+    margin: 0 0 10px;
+  }
+  .abilities{
+    text-align: center;
+    color: #922610;
+  }
+  .abilities > div{
+    display: inline-block;
+    vertical-align: middle;
+    width: 15.5%;
+    min-width: 40px; 
+    font-size: 12px;
+    line-height: 1em;
+  }
+  .abilities h4{
+    margin: 10px 0 2px;
+    font-size: 14px;
+    line-height: 1.2em;
+    text-transform: uppercase;
+    color: #7A200D;
+  }
+  .abilities p{
+    margin: 0 0 10px;
+    line-height: 1.2em;
+  }
+  .property-block h4,
+  .property-block p{
+    font-size: 13.5px;
+    line-height: 1.2em;
+    display: inline;
+    margin: 0;
+  }
+  .property-block h4{
+    font-style: italic;
+  }
+  .property-block{
+    padding: 10px 2px 0;
+  }
+  .actions h3{
+    border-bottom: 1px solid #7A200D;
+    color: #7A200D;
+    font-size: 21px;
+    font-variant: small-caps;
+    font-weight: normal;
+    letter-spacing: 1px;
+    margin: 20px 0 0;
+    padding: 0 0 10px;
+    text-indent: 5px;
+  }
+  .actions{
+    margin: 0 0 20px;
+  }
+  .actions:last-child{
+    margin: 0;
+  }
+  
+  @media print{
+      .orange-border{
+          display: none;
+      }
+      .stat-block,
+      .stat-block.wide, 
+      .stat-block.wide .section-left,
+      .stat-block.wide .section-right,
+      .property-line,
+      .property-block{
+          width: 100%;
+          display: block;
+      }
+      .stat-block.wide .section-left{
+        margin: 0;
+      }
+      .stat-block.wide .section-right{
+        margin: 0;
+      }
+      .stat-block{
+          width: 40%;
+          display: inline-block;
+          vertical-align: top;
+      }
+      .stat-block.wide{
+          page-break-after: always;
+      }
+  }
+  @media screen and (max-width: 575px){
+      .stat-block{
+          margin: 20px 0;
+      }
+  }
+  
--- a/test.html
+++ b/test.html
@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PhB Layout mit Spalten</title>
+    <link rel="stylesheet" href="dnd-book.css"> <!-- Dein CSS-File -->
+</head>
+<body>
+    <div class="phb">
+
+            <h1>Die Elfen und ihre Geschichte</h1>
+            <p>Die Elfen sind eine uralte Rasse, bekannt für ihre Weisheit und Verbindung zur Natur. Ihr Ursprung reicht tief in die Vergangenheit zurück, als sie die ersten Wälder des Kontinents bevölkerten. Ihre Magie ist stark mit der Natur verknüpft und wird oft als die "grüne Magie" bezeichnet.</p>
+            
+            <h2>Der Aufstieg des ersten Elfenkönigs</h2>
+            <p>Der erste Elfenkönig, Ilinthar, führte seine Leute aus der Dunkelheit der frühen Zeiten in ein goldenes Zeitalter. Unter seiner Führung florierte das elfische Volk, und ihre Städte wurden zu Zentren der Kultur und Magie.</p>
+            
+            <h3>Die goldene Ära der Elfen</h3>
+            <p>In der goldenen Ära der Elfen errichteten sie monumentale Städte, die in den Baumkronen gewachsen und von Magie durchzogen waren. Diese Städte sind heute noch legendär, obwohl viele inzwischen verschwunden sind.</p>
+            
+            <h4>Elfische Magie und ihre Geheimnisse</h4>
+            <p>Elfische Magie ist tief verwurzelt in der Natur. Sie können die Elemente kontrollieren, das Wachstum der Pflanzen lenken und mit Tieren kommunizieren. Doch die ältesten Zauber sind nur wenigen Elfen zugänglich, da sie das Wissen der Vorfahren erfordern.</p>
+            
+            <h5>Der ewige Konflikt mit den anderen Völkern</h5>
+            <p>Obwohl die Elfen für ihre Weisheit und Schönheit berühmt sind, sind sie auch in zahlreiche Konflikte verwickelt. Der ewige Streit mit den Zwergen um die Kontrolle der Wälder und Berge ist eines der bekanntesten Beispiele ihrer schwierigen Beziehungen zu anderen Völkern.</p>
+
+
+            <h1>Die Zwerge und ihre Bedeutung</h1>
+            <p>Die Zwerge sind für ihre Handwerkskunst und ihren tiefen Bezug zu den Bergen bekannt. Ihre Städte liegen tief unter der Erde, wo sie enorme Hallen und Festungen aus Stein errichteten, die von Generation zu Generation weitergegeben wurden.</p>
+
+            <h2>Die Entstehung der ersten Zwergenreiche</h2>
+            <p>Als die Zwerge das erste Mal die Berge betraten, fanden sie in den tiefen Höhlen reiche Erzvorkommen und begannen, die ersten Zwergenreiche zu bauen. Diese Reiche sind bis heute ein Symbol für die unermüdliche Arbeit und die Kunstfertigkeit der Zwerge.</p>
+            
+            <h3>Die Zwergenkriege und ihre Krieger</h3>
+            <p>Die Geschichte der Zwerge ist von zahllosen Kriegen und Schlachten geprägt. Ihr unerschütterlicher Mut und ihre Fähigkeit, unglaubliche Waffen und Rüstungen zu schmieden, machten sie zu gefürchteten Kriegern.</p>
+            
+            <h4>Das Geheimnis der Zwergenschmiedekunst</h4>
+            <p>Die Zwerge sind Meister im Schmieden von Waffen und Rüstungen. Die besten Schmiede des Zwergenreiches haben die Fähigkeit, Magie in ihre Werke einzuflechten und so legendäre Waffen zu erschaffen, die von den Mächtigsten der Welt begehrt werden.</p>
+            
+            <h5>Die Weisheit der Berge und die ewige Schöpfung</h5>
+            <p>Die Berge sind das Herz der zwergischen Kultur. In den Tiefen der Erde finden sie nicht nur die Materialien für ihre Kunstwerke, sondern auch die Weisheit der Erde selbst. Jeder Berg birgt Geheimnisse und Schätze, die nur den tapfersten und weisesten Zwergen zugänglich sind.</p>
+
+        <blockquote>
+            <p>„Der Wald ist nicht nur ein Ort, sondern ein lebendiger Organismus“, sagte der weise Magier. „Wer sich in ihn wagt, muss die Regeln des Waldes respektieren.“</p>
+        </blockquote>
+
+        <table>
+            <tr>
+                <th>Charakter</th>
+                <th>Rasse</th>
+                <th>Waffe</th>
+            </tr>
+            <tr>
+                <td>Filaron</td>
+                <td>Elf</td>
+                <td>Bogen</td>
+            </tr>
+            <tr>
+                <td>Grunther</td>
+                <td>Zwerg</td>
+                <td>Axt</td>
+            </tr>
+        </table>
+
+        <p>Die beiden Abenteurer erreichten schließlich den Wald und standen vor der Entscheidung, ob sie den geheimen Pfad betreten sollten...</p>
+    </div>
+</body>
+</html>