further rework to the documentation

docs/archive/screenshots/tenant-admin-onboarding/02-how-it-works.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#0f172a"/>
+  <text x="80" y="120" font-size="56" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#f8fafc">
+    So funktioniert es
+  </text>
+  <g transform="translate(80,180)">
+    <rect width="320" height="360" rx="32" fill="#1e293b"/>
+    <text x="40" y="80" font-size="36" font-family="Inter, Arial, sans-serif" font-weight="600" fill="#f472b6">
+      Momente festhalten
+    </text>
+    <text x="40" y="130" font-size="22" font-family="Inter, Arial, sans-serif" fill="#e2e8f0">
+      Gäste laden Fotos direkt über die PWA hoch – du moderierst in Echtzeit.
+    </text>
+  </g>
+  <g transform="translate(460,180)">
+    <rect width="320" height="360" rx="32" fill="#1e293b"/>
+    <text x="40" y="80" font-size="36" font-family="Inter, Arial, sans-serif" font-weight="600" fill="#60a5fa">
+      Aufgaben aktivieren
+    </text>
+    <text x="40" y="130" font-size="22" font-family="Inter, Arial, sans-serif" fill="#e2e8f0">
+      Challenges und Badges halten deine Community bei Laune.
+    </text>
+  </g>
+  <g transform="translate(840,180)">
+    <rect width="320" height="360" rx="32" fill="#1e293b"/>
+    <text x="40" y="80" font-size="36" font-family="Inter, Arial, sans-serif" font-weight="600" fill="#34d399">
+      Gäste begeistern
+    </text>
+    <text x="40" y="130" font-size="22" font-family="Inter, Arial, sans-serif" fill="#e2e8f0">
+      Likes, Slideshow und QR-Einladungen bringen Aufmerksamkeit an jeden Tisch.
+    </text>
+  </g>
+</svg>