erste Fassung mit erster Seite und Bildern

doc/Cockburn.md

@@ -3,11 +3,11 @@ marp: true
 html: true
 paginate: true
 style: |
-  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
   section {
-    font-family: 'Ubuntu', sans-serif;
+    font-family: 'Ubuntu', Arial, sans-serif;
     padding-top: 55px;
-    font-size: 30px;  /* Normaler Text */
+    font-size: 30px;
   }
   .columns {
     display: grid;
@@ -17,35 +17,79 @@ style: |
   .grau, .grau p, .grau li, .grau ol { color: #888 !important; }
   section h1 {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+    top: 0; left: 0; right: 0;
     margin: 0;
     padding: 8px 30px;
     font-size: 1.0em;
-    background-color: #2c3e50;
+    background-color: #44546A;
     color: white;
   }
   footer {
     position: absolute;
-    bottom: 15px;
-    left: 30px;
-    font-size: 0.85em
+    bottom: 15px; left: 30px;
+    font-size: 0.85em;
     color: #888;
     font-style: italic;
   }
   section::after {
-    content: "S." attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
+    content: "Seite " attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
     position: absolute;
-    bottom: 15px;
-    right: 30px;
+    bottom: 15px; right: 30px;
     font-size: 0.75em;
     color: #666;
   }
+  /* Cover Slide */
+  section.cover { padding: 0; background: #ffffff; }
+  section.cover h1, section.cover::after { display: none; }
+  .cover-wrap { display: flex; width: 100%; height: 100%; }
+  .cover-left {
+    flex: 0 0 63%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    padding: 40px 80px 40px 40px;
+    background: #ffffff;
+  }
+  .cover-left img {
+    width: 400px;
+    margin-bottom: 14px;
+  }
+  .cover-subtitle {
+    align-self: flex-start;
+    margin-left: 23%;
+    color: #737373;
+    font-size: 0.5em;
+    letter-spacing: 0.03em;
+  }
+  .cover-right { flex: 0 0 37%; position: relative; overflow: hidden; }
+  .cover-right img {
+    width: 150%; height: 150%;
+    object-fit: cover;
+    object-position: right center;
+    display: block;
+  }
+  .cover-right::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(255, 255, 255, 0.68);
+  }
 
 ---
 
+<!-- _class: cover -->
+<div class="cover-wrap">
+  <div class="cover-left">
+    <img src="img/logo-mista.svg" alt="Mista GmbH Logo">
+    <p class="cover-subtitle">Digitalisierung &amp; Engineering</p>
+  </div>
+  <div class="cover-right">
+    <img src="img/photo-mista-2.jpeg" alt="">
+  </div>
+</div>
 
+---
 
 # Zentraler Projekt-Anker: Use Cases (Epics, Sollprozesse ...)
 
@@ -66,9 +110,9 @@ style: |
 
 - Bankkunde hebt an einem Geldautomaten einen beliebigen Geldbetrag von einem Konto ab.
 
-## Designer creates CAD Document
+## Konstrukteur erzeugt CAD Document
 
-- Designer creates a new CAD document from a template.
+- Designer erzeugt eins neues CAD document aus einem template.
 
 ## Tester führt Testcase durch