M7 abschliessen: Landingpage mit Kernabläufen, Demo-Screenshot und FAQ

Ergaenzt die beiden letzten offenen M7-Punkte und schaerft nebenbei die
Copy insgesamt:

- Neue Sektion 'So funktioniert's' mit dem im Plan vorgesehenen
  Drei-Schritte-Ablauf (Kaffee nehmen, Strich setzen, bei Bedarf
  bezahlen), bisher komplett gefehlt.
- Funktionsuebersicht von drei auf sechs Karten erweitert (Mitglieder/
  Rollen, Guthaben/Einzahlungen, PayPal, CSV-Import/-Export,
  Mandantenfaehigkeit, Hinweise/Info-Mails) statt der bisherigen,
  eher technischen Kurzbeschreibung.
- Demo-Screenshot: bereinigter Screenshot der Gesamtuebersicht mit
  Testdaten (keine echten Kundendaten) aus docs/m0/screenshots/ als
  assets/images/demo-kaffeeliste.png eingebunden.
- FAQ-Auszug: fuenf produktbezogene Fragen (Einrichtung, Mandanten-
  trennung, Rollen, Export/Loeschung, PayPal) direkt auf der
  Landingpage. Bewusst nicht die bestehende faq.php excerpted, da die
  komplett AOK-spezifisch ist (Kaffeemaschinen-Bedienung, interner
  Ansprechpartner) und fuer Interessenten nicht generisch verstaendlich
  waere.
- Neue CSS-Klassen fuer Schritte/Demo-Rahmen/FAQ-Grid/Abschluss-CTA in
  assets/css/public.css, konsistent mit dem bestehenden Grundton
  (gruener Akzent, schlichte Kartenoptik, keine Marketing-Verspieltheit).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

assets/css/public.css

@@ -147,7 +147,76 @@ body.public-page {
     margin-bottom: 0;
 }
 
+.public-steps .public-feature {
+    position: relative;
+    padding-top: 2.75rem;
+}
+
+.public-step-number {
+    position: absolute;
+    top: 1rem;
+    left: 1.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 50%;
+    background: #38761d;
+    color: #ffffff;
+    font-family: "Roboto Slab", serif;
+    font-weight: 700;
+    font-size: 0.95em;
+}
+
+.public-demo-frame {
+    max-width: 72rem;
+    border: solid 1px rgba(210, 215, 217, 0.75);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 0.75rem 2.25rem rgba(61, 68, 73, 0.08);
+}
+
+.public-demo-frame img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.public-faq {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1.25rem;
+    max-width: 72rem;
+    margin-bottom: 1.5rem;
+}
+
+.public-faq .public-panel h3 {
+    font-size: 1.05em;
+    margin-bottom: 0.5rem;
+}
+
+.public-faq .public-panel p {
+    margin-bottom: 0;
+    color: #3d4449;
+}
+
+.public-cta {
+    text-align: center;
+}
+
+.public-cta .major {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 @media screen and (max-width: 980px) {
+    .public-faq {
+        grid-template-columns: 1fr;
+    }
+
+
     .public-hero {
         min-height: 78vh;
         padding: 5.5rem 2rem 3rem 2rem;