docs(marketing): Beta-Flyer mit App-Screenshots und größerer Typografie

Zwei Screenshots nebeneinander, Schriftgrößen für bessere Seitennutzung auf A4.

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/marketing/beta-flyer.html

@@ -28,9 +28,11 @@
     .page {
       width: 210mm;
       height: 297mm;
-      padding: 14mm 16mm 12mm;
+      max-height: 297mm;
+      padding: 12mm 15mm 10mm;
       display: flex;
       flex-direction: column;
+      gap: 5mm;
       background:
         radial-gradient(ellipse 120% 80% at 100% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 55%),
         radial-gradient(ellipse 90% 60% at 0% 100%, rgba(134, 59, 255, 0.14) 0%, transparent 50%),
@@ -52,20 +54,20 @@
       display: flex;
       align-items: center;
       gap: 5mm;
-      margin-bottom: 6mm;
+      flex-shrink: 0;
       position: relative;
       z-index: 1;
     }
 
     .logo {
-      width: 14mm;
+      width: 16mm;
-      height: 14mm;
+      height: 16mm;
       flex-shrink: 0;
       object-fit: contain;
     }
 
     .title-block h1 {
-      font-size: 22pt;
+      font-size: 23pt;
       font-weight: 700;
       letter-spacing: -0.02em;
       color: #f8fafc;
@@ -73,7 +75,7 @@
     }
 
     .title-block p {
-      font-size: 10.5pt;
+      font-size: 12pt;
       color: #94a3b8;
       margin-top: 1.5mm;
     }
@@ -83,19 +85,19 @@
       align-self: flex-start;
       background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
       color: #1e293b;
-      font-size: 9pt;
+      font-size: 11pt;
       font-weight: 800;
       letter-spacing: 0.12em;
-      padding: 2mm 4mm;
+      padding: 2.5mm 4.5mm;
       border-radius: 2mm;
       text-transform: uppercase;
     }
 
     .intro {
-      font-size: 10.5pt;
+      font-size: 12pt;
-      line-height: 1.55;
+      line-height: 1.5;
       color: #cbd5e1;
-      margin-bottom: 6mm;
+      flex-shrink: 0;
       max-width: 95%;
       position: relative;
       z-index: 1;
@@ -105,11 +107,48 @@
       color: #f8fafc;
     }
 
+    .screenshots {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 4mm;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 1;
+    }
+
+    .screenshot-card {
+      border-radius: 2.5mm;
+      overflow: hidden;
+      border: 1px solid rgba(148, 163, 184, 0.22);
+      background: rgba(15, 23, 42, 0.55);
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .screenshot-card img {
+      width: 100%;
+      height: 54mm;
+      object-fit: contain;
+      object-position: top center;
+      display: block;
+      background: #0b1220;
+    }
+
+    .screenshot-caption {
+      font-size: 9pt;
+      color: #94a3b8;
+      text-align: center;
+      padding: 1.5mm 2mm;
+      line-height: 1.3;
+      flex-shrink: 0;
+    }
+
     .features {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 3mm 6mm;
+      gap: 2.5mm 6mm;
-      margin-bottom: 6mm;
+      flex-shrink: 0;
       position: relative;
       z-index: 1;
     }
@@ -118,7 +157,7 @@
       display: flex;
       gap: 2.5mm;
       align-items: flex-start;
-      font-size: 9.5pt;
+      font-size: 10.5pt;
       line-height: 1.4;
       color: #e2e8f0;
     }
@@ -136,20 +175,20 @@
       border-left: 3px solid #fbbf24;
       border-radius: 3mm;
       padding: 5mm 6mm;
-      margin-bottom: 6mm;
+      flex-shrink: 0;
       position: relative;
       z-index: 1;
     }
 
     .beta-box h2 {
-      font-size: 11pt;
+      font-size: 12.5pt;
       color: #fbbf24;
       margin-bottom: 2mm;
       font-weight: 700;
     }
 
     .beta-box p {
-      font-size: 9.5pt;
+      font-size: 10.5pt;
       line-height: 1.5;
       color: #cbd5e1;
     }
@@ -157,12 +196,12 @@
     .cta {
       display: flex;
       align-items: center;
-      gap: 8mm;
+      gap: 7mm;
       background: rgba(15, 23, 42, 0.6);
       border: 1px solid rgba(148, 163, 184, 0.2);
       border-radius: 4mm;
       padding: 5mm 6mm;
-      margin-bottom: auto;
+      flex-shrink: 0;
       position: relative;
       z-index: 1;
     }
@@ -183,16 +222,16 @@
     }
 
     .cta-text h3 {
-      font-size: 13pt;
+      font-size: 14.5pt;
       color: #38bdf8;
       font-weight: 700;
       margin-bottom: 2mm;
     }
 
     .cta-text p {
-      font-size: 9pt;
+      font-size: 11pt;
       color: #94a3b8;
-      line-height: 1.45;
+      line-height: 1.5;
     }
 
     .tags {
@@ -203,7 +242,7 @@
     }
 
     .tag {
-      font-size: 7.5pt;
+      font-size: 9.5pt;
       font-weight: 600;
       letter-spacing: 0.04em;
       text-transform: uppercase;
@@ -216,8 +255,9 @@
     footer {
       border-top: 1px solid rgba(148, 163, 184, 0.15);
       padding-top: 3mm;
-      margin-top: 5mm;
+      margin-top: auto;
-      font-size: 7.5pt;
+      flex-shrink: 0;
+      font-size: 9.5pt;
       line-height: 1.5;
       color: #64748b;
       position: relative;
@@ -265,6 +305,17 @@
       <div class="feature"><span class="feature-icon">✦</span><span>Crafted in Kiel.Sailing.City.</span></div>
     </section>
 
+    <section class="screenshots" aria-label="App-Screenshots">
+      <figure class="screenshot-card">
+        <img src="assets/screenshot-login.png" alt="Anmeldung mit Passkey und Demo" />
+        <figcaption class="screenshot-caption">Anmeldung &amp; Passkey</figcaption>
+      </figure>
+      <figure class="screenshot-card">
+        <img src="assets/screenshot-logbook.png" alt="Logbuch-Journal mit Reisetagen" />
+        <figcaption class="screenshot-caption">Logbuch-Journal</figcaption>
+      </figure>
+    </section>
+
     <section class="beta-box">
       <h2>Beta-Phase — Dein Feedback zählt</h2>
       <p>