diff --git a/css/theme/latex.css b/css/theme/latex.css
index e5c87c0..37e91a5 100644
--- a/css/theme/latex.css
+++ b/css/theme/latex.css
@@ -11,6 +11,7 @@ section {
 /* config */
 :root {
   --primary: #f8f281;
+  --primary-dark: #928c1b;
   --secondary: #bbd6ec;
   --secondary-dark: #3f5d75;
   --margin: 0.1; }
@@ -71,13 +72,25 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--secondary); }
+    background: var(--secondary);
+    position: relative; }
+    body .layout-preview figure {
+      display: contents; }
     body .layout-preview img {
       width: auto;
       height: auto;
       max-width: 90%;
       max-height: 90%;
       box-shadow: 0.2em 0.2em 0.5em 0 rgba(0, 0, 0, 0.3); }
+    body .layout-preview figcaption {
+      position: absolute;
+      background: rgba(0, 0, 0, 0.5);
+      bottom: 0;
+      width: 100%;
+      text-align: center;
+      color: white;
+      padding: .5em;
+      box-sizing: border-box; }
   body .layout-two-columns {
     display: grid;
     min-height: 100vh;
@@ -108,6 +121,23 @@ body {
     body .layout-two-columns .layout-column-two {
       grid-area: column2;
       background: white; }
+  body .layout-two-previews {
+    display: grid;
+    min-height: 100vh;
+    max-height: 100vh;
+    min-width: 100vw;
+    max-width: 100vw;
+    overflow: auto;
+    grid-template-rows: auto auto;
+    grid-template-columns: auto;
+    background: var(--secondary); }
+    @media screen and (min-aspect-ratio: 1 / 1) {
+      body .layout-two-previews {
+        grid-template-rows: 100vh;
+        grid-template-columns: 50vw 50vw;
+        grid-template-areas: "preview preview"; } }
+    body .layout-two-previews .layout-preview {
+      grid-area: auto; }
 
 /* content layout */
 @font-face {
@@ -150,20 +180,34 @@ body {
     .layout-content-only .layout-content .layout-title h2 {
       margin: 0;
       line-height: 1.15em; }
-  .layout-content-and-preview .layout-content ul,
-  .layout-content-only .layout-content ul {
+  .layout-content-and-preview .layout-content ul, .layout-content-and-preview .layout-content ol,
+  .layout-content-only .layout-content ul,
+  .layout-content-only .layout-content ol {
     list-style-type: none;
     padding-left: 0;
     position: relative; }
-    .layout-content-and-preview .layout-content ul li::before,
-    .layout-content-only .layout-content ul li::before {
+    .layout-content-and-preview .layout-content ul li::before, .layout-content-and-preview .layout-content ol li::before,
+    .layout-content-only .layout-content ul li::before,
+    .layout-content-only .layout-content ol li::before {
       content: '▪';
       color: var(--secondary);
       position: absolute;
       left: calc(-0.33 * var(--margin) * var(--square)); }
-    .layout-content-and-preview .layout-content ul ul,
-    .layout-content-only .layout-content ul ul {
+    .layout-content-and-preview .layout-content ul ul, .layout-content-and-preview .layout-content ul ol, .layout-content-and-preview .layout-content ol ul, .layout-content-and-preview .layout-content ol ol,
+    .layout-content-only .layout-content ul ul,
+    .layout-content-only .layout-content ul ol,
+    .layout-content-only .layout-content ol ul,
+    .layout-content-only .layout-content ol ol {
       margin-left: calc(0.33 * var(--margin) * var(--square)); }
+  .layout-content-and-preview .layout-content ol,
+  .layout-content-only .layout-content ol {
+    counter-reset: ol-counter; }
+    .layout-content-and-preview .layout-content ol li::before,
+    .layout-content-only .layout-content ol li::before {
+      counter-increment: ol-counter;
+      content: counter(ol-counter) ".";
+      color: var(--secondary-dark);
+      left: calc(-0.36 * var(--margin) * var(--square)); }
   .layout-content-and-preview .layout-content pre,
   .layout-content-only .layout-content pre {
     margin-left: calc(-1 * var(--margin) * var(--square));
@@ -314,3 +358,35 @@ blockquote {
     color: var(--secondary-dark); }
   blockquote cite::before {
     content: ' – '; }
+
+.layout-content figure {
+  margin: 0 1em 1em 0; }
+
+.bubble {
+  display: inline-block;
+  position: absolute;
+  margin-top: -2em;
+  margin-left: -3.8em;
+  width: 6em;
+  border: 0.1em solid var(--primary-dark);
+  background: var(--primary);
+  text-align: center;
+  border-radius: 1em; }
+  .bubble::before {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: .5em solid transparent;
+    border-top-color: var(--primary-dark);
+    bottom: -1em;
+    left: calc(50% - .5em); }
+  .bubble::after {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: .5em solid transparent;
+    border-top-color: var(--primary);
+    bottom: -0.87em;
+    left: calc(50% - .5em); }
diff --git a/css/theme/source/latex.scss b/css/theme/source/latex.scss
index 90608c9..149568f 100644
--- a/css/theme/source/latex.scss
+++ b/css/theme/source/latex.scss
@@ -11,6 +11,7 @@ section {
 /* config */
 :root {
   --primary: #f8f281;
+  --primary-dark: #928c1b;
   --secondary: #bbd6ec;
   --secondary-dark: #3f5d75;
   --margin: 0.1;
@@ -104,6 +105,10 @@ body {
     align-items: center;
     justify-content: center;
     background: var(--secondary);
+    position: relative;
+    figure {
+      display: contents;
+    }
     img {
       width: auto;
       height: auto;
@@ -111,6 +116,16 @@ body {
       max-height: 90%;
       box-shadow: .2em .2em .5em 0 rgba(0, 0, 0, .3);
     }
+    figcaption {
+      position: absolute;
+      background: rgba(0,0,0,.5);
+      bottom: 0;
+      width: 100%;
+      text-align: center;
+      color: white;
+      padding: .5em;
+      box-sizing: border-box;
+    }
   }
 
   .layout-two-columns {
@@ -160,6 +175,27 @@ body {
       background: white;
     }
   }
+
+  .layout-two-previews {
+    display: grid;
+    min-height: 100vh;
+    max-height: 100vh;
+    min-width: 100vw;
+    max-width: 100vw;
+    overflow: auto;
+    grid-template-rows: auto auto;
+    grid-template-columns: auto;
+    background: var(--secondary);
+    @media screen and (min-aspect-ratio: 1/1) {
+      grid-template-rows: 100vh;
+      grid-template-columns: 50vw 50vw;
+      grid-template-areas:
+        "preview preview";
+    }
+    .layout-preview {
+      grid-area: auto;
+    }
+  }
 }
 
 /* content layout */
@@ -211,7 +247,7 @@ body {
       }
     }
 
-    ul {
+    ul, ol {
       list-style-type: none;
       padding-left: 0;
       position: relative;
@@ -221,10 +257,19 @@ body {
         position: absolute;
         left: calc(-0.33 * var(--margin) * var(--square));
       }
-      ul {
+      ul, ol {
         margin-left: calc(0.33 * var(--margin) * var(--square));
       }
     }
+    ol {
+      counter-reset: ol-counter;
+      li::before {
+        counter-increment: ol-counter;
+        content: counter(ol-counter) '.';
+        color: var(--secondary-dark);
+        left: calc(-0.36 * var(--margin) * var(--square));
+      }
+    }
 
     pre {
       margin-left: calc(-1 * var(--margin) * var(--square));
@@ -406,3 +451,41 @@ blockquote {
     content: ' – '
   }
 }
+
+.layout-content {
+  figure {
+    margin: 0 1em 1em 0;
+  }
+}
+
+.bubble {
+  display: inline-block;
+  position: absolute;
+  margin-top: -2em;
+  margin-left: -3.8em;
+  width: 6em;
+  border: .1em solid var(--primary-dark);
+  background: var(--primary);
+  text-align: center;
+  border-radius: 1em;
+  &::before {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: .5em solid transparent;
+    border-top-color: var(--primary-dark);
+    bottom: -1em;
+    left: calc(50% - .5em);
+  }
+  &::after {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: .5em solid transparent;
+    border-top-color: var(--primary);
+    bottom: -0.87em;
+    left: calc(50% - .5em);
+  }
+}
diff --git a/sections/german/01/01.md b/sections/german/01/01.md
index 19ed30d..29cc9d9 100644
--- a/sections/german/01/01.md
+++ b/sections/german/01/01.md
@@ -1,18 +1,153 @@
 <div class="layout-content-only">
-	<div class="layout-content">
-		<h1>Was ist L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X?</h1>
-	</div>
+    <div class="layout-content">
+        <h1>Was ist L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X?</h1>
+    </div>
+</div>
+
+---
+
+<div class="layout-two-previews">
+    <div class="layout-preview">
+        <figure>
+            <img src="sections/german/04/projekt_dokument.png">
+            <figcaption>TODO: Klassisches Word-Dokument</figcaption>
+        </figure>
+    </div>
+    <div class="layout-preview">
+        <figure>
+            <img src="sections/german/04/projekt_dokument.png">
+            <figcaption>TODO: Klassisches LaTeX-Dokument</figcaption>
+        </figure>
+    </div>
 </div>
 
 ---
 
 <div class="layout-content-and-preview">
-	<div class="layout-content">
-		<h2>Titel</h2>
-		<p>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.</p>
-		<pre class="hljs"><code>bar</code></pre>
-	</div>
-	<div class="layout-preview">
-		<img class="layout-content-right" src="sections/german/04/projekt_dokument.png">
-	</div>
+    <div class="layout-content">
+        <h2>Entstehung</h2>
+        <ul>
+            <li>Donald **Knuth**, 1977–1986: Textsatzsystem **TeX**<span class="bubble fragment">τεχ → /tɛç/</span> für The Art of Computer Programming</li>
+            <li>Leslie **Lamport**, ab 1980er: Softwarepaket **LaTeX** zur einfacheren Benutzung von TeX</li>
+        </ul>
+        <div style="display: flex; justify-content: space-between; align-items: stretch;">
+            <figure>
+                <img src="sections/german/01/knuth.jpg">
+                <figcaption>Donald Knuth</figcaption>
+            </figure>
+            <figure>
+                <img src="sections/german/01/lamport.jpg">
+                <figcaption>Leslie Lamport</figcaption>
+            </figure>
+        </div>
+    </div>
+    <div class="layout-preview">
+        <img src="sections/german/01/taocp.jpg">
+        <!-- https://in.pinterest.com/pin/813110907700064708/ -->
+    </div>
+</div>
+
+---
+
+<div class="layout-two-previews">
+    <div class="layout-preview">
+        <figure>
+            <img src="sections/german/04/projekt_dokument.png">
+            <figcaption>TODO: Klassisches Word-Dokument</figcaption>
+        </figure>
+    </div>
+    <div class="layout-preview">
+        <figure>
+            <img src="sections/german/04/projekt_dokument.png">
+            <figcaption>TODO: Klassisches LaTeX-Dokument</figcaption>
+        </figure>
+    </div>
+</div>
+
+---
+
+<div class="layout-content-and-preview">
+    <div class="layout-content">
+        <h2>Typografie</h2>
+        <h3>Makrotypografie</h3>
+        <ul>
+            <li>Satzspiegel</li>
+            <li>Zeilenlänge vs. -abstand</li>
+            <li>Platzierung von Bildern und Tabellen</li>
+            <li>Schusterjungen / Hurenkinder</li>
+            <li>…</li>
+        </ul>
+    </div>
+    <div class="layout-preview">
+        TODO: Illustration
+    </div>
+</div>
+
+---
+
+<div class="layout-content-and-preview">
+    <div class="layout-content">
+        <h2>Typografie</h2>
+        <h3>Mikrotypografie</h3>
+        <ul>
+            <li>Ligaturen</li>
+            <li>Kerning</li>
+            <li>echte Kursiven, Kapitälchen, …</li>
+            <li>Wortabstände</li>
+            <li>…</li>
+        </ul>
+    </div>
+    <div class="layout-preview">
+        TODO: Illustration
+    </div>
+</div>
+
+---
+
+<div class="layout-content-only">
+    <div class="layout-content">
+        <h2>Weitere Vorteile</h2>
+        <ul>
+            <li>strukturiertes Arbeiten</li>
+            <li>zuverlässiges Undo</li>
+            <li>einfache Versionierung</li>
+            <li>unabhängig von proprietären Programmen</li>
+            <li>Quelltext und Ausgabe langfristig lesbar</li>
+        </ul>
+    </div>
+</div>
+
+---
+
+<div class="layout-content-only">
+    <div class="layout-content">
+        <h2>Ablauf des Workshops</h2>
+        <p><strong>Ziel:</strong> Ihr baut eure eigene LaTeX-Referenz</li>
+        <ul>
+            <li>Learning by Doing</li>
+            <li>Verstehen, wie LaTeX funktioniert</li>
+            <li>Einzelheiten später nachschlagen</li>
+        </ul>
+        <div class="fragment">
+        <p><strong>Gliederung:</strong></p>
+        <ol>
+            <li><del>Was ist LaTeX?</del></li>
+            <li>Wie funktioniert LaTeX?</li>
+            <li>Grundstruktur eines LaTeX-Dokuments</li>
+            <li>Projektstruktur</li>
+            <li>Viele Features</li>
+            <li>Literaturverwaltung</li>
+            <li>Ausblick</li>
+        </ol>
+        </div>
+    </div>
+</div>
+
+<div class="layout-content-and-preview">
+    <div class="layout-content">
+        Leer
+    </div>
+    <div class="layout-preview">
+        Leer
+    </div>
 </div>
diff --git a/sections/german/01/knuth.jpg b/sections/german/01/knuth.jpg
new file mode 100644
index 0000000..9ad890c
Binary files /dev/null and b/sections/german/01/knuth.jpg differ
diff --git a/sections/german/01/lamport.jpg b/sections/german/01/lamport.jpg
new file mode 100644
index 0000000..8ba8e7c
Binary files /dev/null and b/sections/german/01/lamport.jpg differ
diff --git a/sections/german/01/taocp.jpg b/sections/german/01/taocp.jpg
new file mode 100644
index 0000000..0527c59
Binary files /dev/null and b/sections/german/01/taocp.jpg differ