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;

docs/saas-umstrukturierungsplan.md

@@ -307,7 +307,7 @@ Nicht tun:
 | M4 | Datenmigration | Gestartet: Ledger-Tabelle, Legacy-Backfill, Paritätscheck, Ledger-Service und Preview sind umgesetzt |
 | M5 | App-Kern | Weit fortgeschritten: Kernseiten lesen und schreiben tenant-sicher gegen das Ledger, inklusive Hinweise und rollenbasiertem Zugang; offen ist ein eigener Zahlungs-Screen |
 | M6 | Betriebsflows | Abgeschlossen: Import, Export, Mail und Jahresabschluss sind auditierbar |
-| M7 | Landingpage | Public-Seite und Auth-Seiten sind im gemeinsamen Stil nutzbar; spätere Ausbaustufen folgen |
+| M7 | Landingpage | Abgeschlossen: Public-Seite mit Kernabläufen, Funktionsübersicht, Demo-Screenshot und FAQ-Auszug; Auth-Seiten im gemeinsamen Stil |
 | M8 | Härtung | Abgeschlossen: Security-Headers, Rate-Limits, Audit-Log, Mandanten-Isolation/Rollenmatrix getestet, Datenexport, Löschung/Anonymisierung, Backup/Monitoring dokumentiert (CSP als bewusst offener Punkt) |
 | M9 | Cutover | Produktivumstellung ist vorbereitet und Legacy ist read-only |
 
@@ -615,19 +615,31 @@ Schritte:
 
 - Public-Layout mit bestehender Typografie und grünem Akzent bauen. Erster
   Stand als `landing.php` und `assets/css/public.css` erledigt.
-- Landingpage-Inhalte erstellen. Erster Stand erledigt.
+- Landingpage-Inhalte erstellen: erledigt und überarbeitet. Klarere
-- Demo-Screenshot oder Demo-Ansicht einbinden.
+  Nutzenbeschreibung, expliziter Drei-Schritte-Ablauf (Kaffee nehmen →
+  Strich setzen → bei Bedarf bezahlen) und erweiterte Funktionsübersicht
+  (Mitglieder/Rollen, Guthaben/Einzahlungen, PayPal, CSV-Import/-Export,
+  Mandantenfähigkeit, Hinweise/Info-Mails).
+- Demo-Screenshot oder Demo-Ansicht einbinden: erledigt. Bereinigter
+  Screenshot der Gesamtübersicht (Testdaten, keine echten Kundendaten)
+  aus `docs/m0/screenshots/` als `assets/images/demo-kaffeeliste.png`.
 - CTA zu Registrierung und Login. Erledigt.
 - Login, Registrierung und Passwort-Reset in den Public-Stil integrieren.
   Erledigt.
 - App-Sidebar von Public-Links trennen. Erledigt.
-- FAQ-Auszug strukturieren.
+- FAQ-Auszug strukturieren: erledigt. Fünf produktbezogene Fragen
+  (Einrichtung, Mandantentrennung, Rollen, Export/Löschung, PayPal) direkt
+  auf der Landingpage, mit Verweis auf die vollständige FAQ. Die
+  bestehende `faq.php` bleibt bewusst unverändert AOK-spezifisch
+  (Kaffeemaschine, Ansprechpartner) und wurde nicht 1:1 auf die
+  Landingpage übernommen.
 - Keine App-Sidebar im Public-Bereich.
 
 Ergebnis:
 
 - Interessenten verstehen das Produkt und können sich registrieren.
 - Bestehende App bleibt optisch eigenständig und arbeitsorientiert.
+- Stand: abgeschlossen.
 
 Abhängigkeiten:
 

landing.php

@@ -2,9 +2,10 @@
 <!DOCTYPE HTML>
 <html lang="de">
     <head>
-        <title>Kaffeeliste</title>
+        <title>Kaffeeliste – die digitale Kaffeekasse für Teams</title>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+        <meta name="description" content="Kaffeeliste ist die digitale Kaffeekasse für Teams, Büros und Vereine: Striche erfassen, Guthaben im Blick behalten, bequem per PayPal ausgleichen." />
         <link rel="stylesheet" href="assets/css/main.css" />
         <link rel="stylesheet" href="assets/css/public.css" />
     </head>
@@ -19,34 +20,121 @@
                     </ul>
                 </nav>
                 <div class="public-hero-content">
-                    <h1>Kaffeeliste</h1>
+                    <h1>Die Kaffeekasse, die von allein mitrechnet</h1>
-                    <p>Die digitale Kaffeekasse für Teams, Büros und Vereine: Striche, Einzahlungen und offene Beträge bleiben nachvollziehbar an einem Ort.</p>
+                    <p>Schluss mit Strichlisten auf Papier und Kopfrechnen beim Kassensturz: Kaffeeliste hält für dein Team, Büro oder deinen Verein fest, wer wie viele Striche gemacht hat, wer bezahlt hat und wer gerade offen ist – jederzeit einsehbar, für jeden nachvollziehbar.</p>
                     <ul class="actions">
-                        <li><a href="register.php" class="button primary big">Kundenkonto anlegen</a></li>
+                        <li><a href="register.php" class="button primary big">Kostenlos einrichten</a></li>
                         <li><a href="login.php" class="button big">Zur App</a></li>
                     </ul>
                 </div>
             </section>
 
+            <section class="public-section">
+                <header class="major">
+                    <h2>So funktioniert's</h2>
+                </header>
+                <div class="public-grid public-steps">
+                    <article class="public-feature">
+                        <span class="public-step-number">1</span>
+                        <h3>Kaffee nehmen</h3>
+                        <p>Wie bisher: Kaffee holen, Tee, Wasser – ganz ohne App am Automaten oder an der Maschine selbst.</p>
+                    </article>
+                    <article class="public-feature">
+                        <span class="public-step-number">2</span>
+                        <h3>Strich setzen</h3>
+                        <p>Der Strich landet in der Kaffeeliste – entweder durch eine verantwortliche Person gesammelt oder, wenn gewünscht, direkt selbst im eigenen Dashboard.</p>
+                    </article>
+                    <article class="public-feature">
+                        <span class="public-step-number">3</span>
+                        <h3>Bei Bedarf bezahlen</h3>
+                        <p>Der aktuelle Stand ist jederzeit sichtbar. Ausgleich bequem per PayPal, wenn dein Team das nutzt – ganz ohne Bargeld und Wechselgeld.</p>
+                    </article>
+                </div>
+            </section>
+
             <section class="public-section">
                 <header class="major">
                     <h2>Alles rund um die Kaffeekasse</h2>
                 </header>
                 <div class="public-grid">
                     <article class="public-feature">
-                        <h3>Striche erfassen</h3>
+                        <h3>Mitglieder &amp; Rollen</h3>
-                        <p>Teilnehmer und Admins behalten Verbrauch, Einzahlungen und Salden im Blick.</p>
+                        <p>Mitglieder anlegen, deaktivieren oder anonymisieren. Zugang mit passender Rolle (Admin, Kassenwart, Mitglied) gezielt vergeben oder wieder entziehen.</p>
+                    </article>
+                    <article class="public-feature">
+                        <h3>Guthaben &amp; Einzahlungen</h3>
+                        <p>Striche, Einzahlungen und Korrekturen laufen über ein durchgängiges Journal – jede Buchung bleibt nachvollziehbar, auch nachträglich.</p>
+                    </article>
+                    <article class="public-feature">
+                        <h3>PayPal-Zahlung</h3>
+                        <p>Offene Beträge lassen sich optional direkt per PayPal ausgleichen, inklusive automatischem Abgleich in der Liste.</p>
+                    </article>
+                    <article class="public-feature">
+                        <h3>CSV-Import &amp; Export</h3>
+                        <p>Zahlungen aus einem PayPal-Export einlesen, mit Vorschau und Dublettenprüfung vor der Übernahme. Kaffeeliste als PDF für den Ausdruck exportieren.</p>
                     </article>
                     <article class="public-feature">
                         <h3>Mandantenfähig</h3>
-                        <p>Jeder Kunde arbeitet in seinem eigenen Bereich mit eigenen Einstellungen.</p>
+                        <p>Jeder Kunde arbeitet in einem eigenen, streng getrennten Bereich mit eigenen Mitgliedern, Einstellungen und Buchungen.</p>
                     </article>
                     <article class="public-feature">
-                        <h3>Webspace-tauglich</h3>
+                        <h3>Hinweise &amp; Info-Mails</h3>
-                        <p>Der Start erfolgt über eine zentrale App-Adresse mit Login und Mandantenauswahl.</p>
+                        <p>Aktuelle Hinweise für alle sichtbar einblenden, und bei Bedarf eine Info-Mail mit dem aktuellen Stand an alle Mitglieder verschicken.</p>
                     </article>
                 </div>
             </section>
+
+            <section class="public-section public-demo">
+                <header class="major">
+                    <h2>So sieht's in der App aus</h2>
+                    <p>Klares Layout, aufgeräumte Tabellen, alles auf einen Blick – die Kaffeeliste bleibt bewusst eine Arbeitsoberfläche statt einer verspielten Marketing-App.</p>
+                </header>
+                <div class="public-demo-frame">
+                    <img src="assets/images/demo-kaffeeliste.png" alt="Ausschnitt aus der Kaffeeliste: Gesamtübersicht mit aktivem Mitglied, Stand, Ausgabe, Strichen und Einzahlungen" loading="lazy">
+                </div>
+            </section>
+
+            <section class="public-section">
+                <header class="major">
+                    <h2>Häufige Fragen</h2>
+                </header>
+                <div class="public-faq">
+                    <div class="public-panel">
+                        <h3>Wie schnell ist meine Kaffeeliste startklar?</h3>
+                        <p>Kundenkonto anlegen, Mitglieder eintragen, loslegen. Es ist keine Einrichtung durch uns nötig, und die bestehenden Abläufe rund um Striche und Einzahlungen bleiben dieselben.</p>
+                    </div>
+                    <div class="public-panel">
+                        <h3>Sind unsere Daten von denen anderer Kunden getrennt?</h3>
+                        <p>Ja. Jeder Kunde hat einen eigenen, isolierten Bereich für Mitglieder, Buchungen und Einstellungen. Diese Trennung ist fester Bestandteil der App und wird automatisiert geprüft.</p>
+                    </div>
+                    <div class="public-panel">
+                        <h3>Wer darf in unserem Team was ändern?</h3>
+                        <p>Ihr vergebt Rollen wie Administrator, Kassenwart oder Mitglied gezielt pro Person – und könnt den Zugang jederzeit wieder entziehen, ohne den Mitgliedseintrag selbst zu löschen.</p>
+                    </div>
+                    <div class="public-panel">
+                        <h3>Können wir unsere Daten exportieren oder löschen lassen?</h3>
+                        <p>Ja. Ihr könnt alle gespeicherten Daten jederzeit als Export herunterladen und einzelne Mitglieder oder euren gesamten Kundenbereich selbstständig wieder entfernen lassen.</p>
+                    </div>
+                    <div class="public-panel">
+                        <h3>Müssen wir PayPal nutzen?</h3>
+                        <p>Nein, PayPal ist optional und lässt sich in den Mandant-Einstellungen aktivieren. Einzahlungen können weiterhin auch manuell erfasst werden.</p>
+                    </div>
+                </div>
+                <ul class="actions">
+                    <li><a href="faq.php" class="button">Weitere Fragen ansehen</a></li>
+                </ul>
+            </section>
+
+            <section class="public-section public-cta">
+                <header class="major">
+                    <h2>Bereit für eine Kaffeekasse, die mitdenkt?</h2>
+                    <p>In wenigen Minuten eingerichtet, für dein ganzes Team nutzbar.</p>
+                </header>
+                <ul class="actions">
+                    <li><a href="register.php" class="button primary big">Kundenkonto anlegen</a></li>
+                    <li><a href="login.php" class="button big">Zur App</a></li>
+                </ul>
+            </section>
         </div>
 
         <script src="assets/js/jquery.min.js"></script>