TechDay: mITapp-Abschnitt mit echten Mockups

Platzhalter durch drei mITapp-Screenshots ersetzt (Dashboard,
Event-Roadmap, Networking per QR-Code), je auf 1100px skaliert
und mit Beschriftung im 3-Spalten-Raster.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

public/styles.css

@@ -884,24 +884,24 @@ a { color: inherit; text-decoration: none; }
   color: var(--gray-1);
 }
 
-/* Platzhalter für mITapp-Screenshots (folgen vom Betreiber) */
-.placeholder-grid {
+/* mITapp-Mockups */
+.mitapp-shots {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-top: 8px;
 }
-.placeholder-img {
-  border: 1.5px dashed var(--line-strong);
-  background: var(--paper-2);
-  aspect-ratio: 4 / 3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 16px;
+.shot { margin: 0; }
+.shot img {
+  width: 100%;
+  height: auto;
+  display: block;
+  border: 1px solid var(--line-strong);
+}
+.shot figcaption {
+  margin-top: 10px;
   font-size: 11px;
-  letter-spacing: .12em;
+  letter-spacing: .1em;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--gray-2);
@@ -910,10 +910,10 @@ a { color: inherit; text-decoration: none; }
 @media (max-width: 820px) {
   .td-feature { grid-template-columns: 1fr; gap: 32px; }
   .td-split { grid-template-columns: 1fr; gap: 36px; }
-  .placeholder-grid { grid-template-columns: 1fr 1fr; }
+  .mitapp-shots { grid-template-columns: 1fr 1fr; }
 }
 @media (max-width: 560px) {
-  .placeholder-grid { grid-template-columns: 1fr; }
+  .mitapp-shots { grid-template-columns: 1fr; }
 }
 
 /* ============================================================

public/techday.html

@@ -155,11 +155,19 @@
       </p>
     </div>
 
-    <!-- Platzhalter — Screenshots & Mockups werden noch ergänzt -->
-    <div class="placeholder-grid">
-      <div class="placeholder-img">Screenshot folgt</div>
-      <div class="placeholder-img">Screenshot folgt</div>
-      <div class="placeholder-img">Mockup folgt</div>
+    <div class="mitapp-shots">
+      <figure class="shot">
+        <img src="/assets/mitapp-dashboard.png" alt="mITapp Dashboard-Ansicht" />
+        <figcaption>Dashboard</figcaption>
+      </figure>
+      <figure class="shot">
+        <img src="/assets/mitapp-roadmap.png" alt="mITapp Event-Roadmap" />
+        <figcaption>Event-Roadmap</figcaption>
+      </figure>
+      <figure class="shot">
+        <img src="/assets/mitapp-qr.png" alt="mITapp Networking per QR-Code" />
+        <figcaption>Networking per QR-Code</figcaption>
+      </figure>
     </div>
 
     <div class="hero-actions" style="margin-top:32px;">