Public-Auth-Seiten in Landingpage-Stil integrieren

- gemeinsames Public-CSS fuer Landingpage und Auth-Seiten ergaenzen
- Login, Registrierung und Passwort-/E-Mail-Seiten vom App-Layout trennen
- App-Sidebar von Public-Login- und Registrierungslinks bereinigen
- Webspace- und Subdomain-Strategie dokumentieren

assets/css/public.css

@@ -0,0 +1,175 @@
+body.public-page {
+    background: #ffffff;
+}
+
+.public-shell {
+    min-height: 100vh;
+    background: #ffffff;
+}
+
+.public-hero {
+    min-height: 82vh;
+    background-image: url("../images/landing-hero.png");
+    background-size: cover;
+    background-position: center right;
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 4rem 6vw;
+}
+
+.public-hero:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.68);
+}
+
+.public-nav {
+    position: absolute;
+    top: 1.5rem;
+    left: 6vw;
+    right: 6vw;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
+.public-nav strong {
+    color: #3d4449;
+    font-family: "Roboto Slab", serif;
+    font-size: 1.1em;
+}
+
+.public-nav strong a {
+    border-bottom: 0;
+    color: inherit;
+}
+
+.public-nav .actions {
+    margin: 0;
+}
+
+.public-hero-content {
+    position: relative;
+    max-width: 42rem;
+}
+
+.public-hero h1 {
+    margin-bottom: 0.35em;
+}
+
+.public-hero p {
+    color: #3d4449;
+    font-size: 1.15em;
+    max-width: 34rem;
+}
+
+.public-section {
+    padding: 4rem 6vw;
+}
+
+.public-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1.25rem;
+    max-width: 72rem;
+}
+
+.public-feature,
+.public-panel {
+    border: solid 1px rgba(210, 215, 217, 0.75);
+    border-radius: 8px;
+    padding: 1.5rem;
+    background: #ffffff;
+}
+
+.public-feature h3 {
+    margin-bottom: 0.5rem;
+}
+
+.public-feature p {
+    margin-bottom: 0;
+}
+
+.public-auth {
+    min-height: 100vh;
+    background-image: url("../images/landing-hero.png");
+    background-size: cover;
+    background-position: center right;
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 6rem 6vw 4rem 6vw;
+}
+
+.public-auth:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.72);
+}
+
+.public-auth-grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(18rem, 0.85fr) minmax(22rem, 1.15fr);
+    gap: 2rem;
+    align-items: start;
+    width: min(72rem, 100%);
+}
+
+.public-auth-copy {
+    padding-top: 1.25rem;
+}
+
+.public-auth-copy p {
+    color: #3d4449;
+    font-size: 1.05em;
+    max-width: 30rem;
+}
+
+.public-panel {
+    box-shadow: 0 0.75rem 2.25rem rgba(61, 68, 73, 0.08);
+}
+
+.public-panel h2 {
+    margin-bottom: 0.5rem;
+}
+
+.public-panel form {
+    margin-bottom: 0;
+}
+
+.public-panel .actions {
+    margin-bottom: 0;
+}
+
+@media screen and (max-width: 980px) {
+    .public-hero {
+        min-height: 78vh;
+        padding: 5.5rem 2rem 3rem 2rem;
+        background-position: center right 30%;
+    }
+
+    .public-auth {
+        padding: 5.5rem 2rem 3rem 2rem;
+        background-position: center right 30%;
+    }
+
+    .public-nav {
+        left: 2rem;
+        right: 2rem;
+    }
+
+    .public-grid,
+    .public-auth-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .public-section {
+        padding: 3rem 2rem;
+    }
+}

docs/m3-saas-basis-vorbereitung.md

@@ -138,6 +138,7 @@ email-verifikation-senden.php
 email-verifizieren.php
 landing.php
 assets/images/landing-hero.png
+assets/css/public.css
 ```
 
 Umgesetzter Umfang:
@@ -153,8 +154,10 @@ Umgesetzter Umfang:
 - `konto.php` zeigt den aktuellen SaaS-Kontext fuer den angemeldeten User.
 - `functions.php` akzeptiert eine SaaS-Login-Session als erste Identitaetsquelle,
   laesst `DEV_AUTH_EMAIL` und `AUTH_USER` aber als Legacy-Fallback bestehen.
-- `footer.php` ist fuer nicht angemeldete Public-Seiten sicher und zeigt Links
+- `footer.php` bleibt App-Sidebar und zeigt keine Public-Login- oder
-  zu Login und Registrierung.
+  Registrierungslinks mehr.
+- Login, Registrierung, Passwort-Reset und E-Mail-Verifikation nutzen das
+  Public-Layout im Stil der Landingpage.
 - Passwort-Reset erzeugt Single-Use-Tokens und speichert nur Token-Hashes.
 - E-Mail-Verifikation erzeugt Single-Use-Tokens und setzt
   `users.email_verified_at`.
@@ -176,6 +179,7 @@ Umgesetzte Dateien:
 ```text
 landing.php
 assets/images/landing-hero.png
+assets/css/public.css
 ```
 
 Umgesetzter Umfang:
@@ -183,6 +187,8 @@ Umgesetzter Umfang:
 - Oeffentliche Landingpage ohne Legacy-DB-Zugriff.
 - Hero mit generiertem Bild-Asset, bestehender Typografie und gruenem Akzent.
 - CTA zu Login und Registrierung.
+- Login, Registrierung und oeffentliche Auth-Hilfsseiten sind optisch in den
+  Public-Bereich integriert.
 - Kurzabschnitt zu Stricherfassung, Mandantenfaehigkeit und Webspace-Betrieb.
 - Die geschuetzte App-Sidebar bleibt von der Public-Seite getrennt.
 
@@ -192,6 +198,8 @@ Entscheidung fuer den Webspace-Betrieb:
 
 - Keine Wildcard-Subdomains im ersten Schritt.
 - Primaere App-Adresse ist eine zentrale App-Domain wie `app.kaffeeliste.de`.
+- Die Public-Seite kann ueber `kaffeeliste.de` beziehungsweise
+  `www.kaffeeliste.de` laufen.
 - Der aktive Mandant wird nach Login ueber `tenant_memberships` und die PHP-
   Session gesetzt.
 - Bei genau einem Mandanten wird automatisch weitergeleitet.
@@ -202,6 +210,8 @@ Entscheidung fuer den Webspace-Betrieb:
 Noch offen:
 
 - `APP_PRIMARY_HOST` in der Zielumgebung setzen.
+- Optional `APP_PUBLIC_HOST` beziehungsweise Host-Rewrite fuer die Landingpage
+  in der Zielumgebung definieren.
 - Produktive Domain-/Zertifikatspruefung fuer einzelne feste Domains
   definieren.
 

docs/saas-umstrukturierungsplan.md

@@ -83,9 +83,10 @@ Empfohlene Routen:
 - `/`: Landingpage.
 - `/preise` oder spaeter `/pricing`: optional, falls Tarife eingefuehrt werden.
 - `/faq`: oeffentliche FAQ oder FAQ-Auszug.
-- `/registrieren`: Kundenregistrierung.
+- `/registrieren` beziehungsweise aktuell `register.php`: Kundenregistrierung.
-- `/login`: Login.
+- `/login` beziehungsweise aktuell `login.php`: Login.
-- `/passwort-vergessen`: Passwort-Reset.
+- `/passwort-vergessen` beziehungsweise aktuell `passwort-vergessen.php`:
+  Passwort-Reset.
 
 Landingpage-Inhalte:
 
@@ -121,6 +122,25 @@ Die App sollte eine Sidebar behalten, aber besser gruppiert werden:
 - Erfassung: Striche, Einzahlungen.
 - Auswertung: Kaffeeliste, Buchungen, Export.
 - Administration: Mitglieder, Hinweise, Einstellungen, Importe.
+- Konto: Kundenkonto und Logout. Public-Links wie Login und Registrierung
+  gehoeren nicht in die App-Sidebar.
+
+### Webspace- und Host-Strategie
+
+Empfohlen fuer den Start:
+
+- `kaffeeliste.de` oder `www.kaffeeliste.de` fuer Landingpage, Registrierung
+  und Login.
+- `app.kaffeeliste.de` fuer die geschuetzte App.
+- Keine Wildcard-Subdomains fuer Kunden.
+- Mandantenauswahl nach Login ueber Session und `tenant_memberships`.
+- Kundeneigene feste Domains oder Subdomains erst spaeter gezielt einrichten,
+  wenn DNS und Zertifikat pro Domain sauber geprueft sind.
+
+Damit bleibt der Betrieb webspace-tauglich: Fuer den Start reichen zwei feste
+Hosts mit normalen Let's-Encrypt-Zertifikaten. Die fachliche Tenant-Aufloesung
+ist in M3 vorbereitet; produktive Host-Rewrites, Cookie-Domain und Zertifikats-
+Details gehoeren zur M8-Betriebshaertung.
 
 ## Datenmodell
 
@@ -287,7 +307,7 @@ Uebersicht:
 | M4 | Datenmigration | Gestartet: Ledger-Tabelle, Legacy-Backfill, Paritaetscheck und Ledger-Service sind umgesetzt |
 | M5 | App-Kern | Dashboard, Striche, Einzahlungen, Mitglieder und Liste laufen |
 | M6 | Betriebsflows | Import, Export, Mail und Jahresprozesse sind auditierbar |
-| M7 | Landingpage | Erste werbliche Seite ist oeffentlich nutzbar; spaetere Ausbaustufen folgen |
+| M7 | Landingpage | Public-Seite und Auth-Seiten sind im gemeinsamen Stil nutzbar; spaetere Ausbaustufen folgen |
 | M8 | Haertung | Betrieb, Datenschutz, Monitoring und Isolation sind geprueft |
 | M9 | Cutover | Produktivumstellung ist vorbereitet und Legacy ist read-only |
 
@@ -427,6 +447,9 @@ Schritte:
 - Rollenpruefung zentralisieren: erster Owner/Admin-Check erledigt.
 - Erste Admin-/Owner-Seite fuer Grundeinstellungen: erledigt.
 - Erste Public-Landingpage mit CTA zu Login und Registrierung: erledigt.
+- Login, Registrierung, Passwort-Reset und E-Mail-Verifikation im Public-Stil:
+  erledigt.
+- App-Sidebar ohne Public-Login-/Registrierungslinks: erledigt.
 
 Ergebnis:
 
@@ -529,10 +552,13 @@ zu verwischen.
 Schritte:
 
 - Public-Layout mit bestehender Typografie und gruenem Akzent bauen. Erster
-  Stand als `landing.php` erledigt.
+  Stand als `landing.php` und `assets/css/public.css` erledigt.
 - Landingpage-Inhalte erstellen. Erster Stand erledigt.
 - Demo-Screenshot oder Demo-Ansicht einbinden.
 - 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.
 - Keine App-Sidebar im Public-Bereich.
 

email-verifizieren.php

@@ -8,31 +8,60 @@ $result = $token !== ''
     ? saas_verify_email_token($pdo, $token)
     : ['ok' => false, 'errors' => ['Der Link ist ungueltig oder abgelaufen.']];
 
-include 'header.php';
-include 'headerline.php';
-include 'nav.php';
 ?>
 
-<section id="banner">
+<!DOCTYPE HTML>
-    <div class="content">
+<html lang="de">
-        <h2>E-Mail verifizieren</h2>
+    <head>
+        <title>Kaffeeliste E-Mail verifizieren</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+        <link rel="stylesheet" href="assets/css/main.css" />
+        <link rel="stylesheet" href="assets/css/public.css" />
+    </head>
+    <body class="is-preload public-page">
+        <div class="public-shell">
+            <section class="public-auth">
+                <nav class="public-nav" aria-label="Hauptnavigation">
+                    <strong><a href="landing.php">Kaffeeliste</a></strong>
+                    <ul class="actions">
+                        <li><a href="login.php" class="button">Login</a></li>
+                    </ul>
+                </nav>
 
-        <?php if ($result['ok']): ?>
+                <div class="public-auth-grid">
-            <div class="hint-box success"><p>Die E-Mail-Adresse wurde bestaetigt.</p></div>
+                    <div class="public-auth-copy">
-            <ul class="actions">
+                        <h1>E-Mail verifizieren</h1>
-                <li><a href="konto.php" class="button">Zum Konto</a></li>
+                        <p>Bestaetige deine Adresse, damit dein Kundenkonto vollstaendig eingerichtet ist.</p>
-            </ul>
+                    </div>
-        <?php else: ?>
-            <div class="hint-box error">
-                <?php foreach ($result['errors'] as $error): ?>
-                    <p><?php echo saas_html($error); ?></p>
-                <?php endforeach; ?>
-            </div>
-            <ul class="actions">
-                <li><a href="login.php" class="button">Zum Login</a></li>
-            </ul>
-        <?php endif; ?>
-    </div>
-</section>
 
-<?php include 'footer.php'; ?>
+                    <div class="public-panel">
+                        <h2>Status</h2>
+
+                        <?php if ($result['ok']): ?>
+                            <div class="hint-box success"><p>Die E-Mail-Adresse wurde bestaetigt.</p></div>
+                            <ul class="actions">
+                                <li><a href="konto.php" class="button primary">Zum Konto</a></li>
+                            </ul>
+                        <?php else: ?>
+                            <div class="hint-box error">
+                                <?php foreach ($result['errors'] as $error): ?>
+                                    <p><?php echo saas_html($error); ?></p>
+                                <?php endforeach; ?>
+                            </div>
+                            <ul class="actions">
+                                <li><a href="login.php" class="button primary">Zum Login</a></li>
+                            </ul>
+                        <?php endif; ?>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <script src="assets/js/jquery.min.js"></script>
+        <script src="assets/js/browser.min.js"></script>
+        <script src="assets/js/breakpoints.min.js"></script>
+        <script src="assets/js/util.js"></script>
+        <script src="assets/js/main.js"></script>
+    </body>
+</html>

footer.php

@@ -54,11 +54,6 @@ if ($saasNavUser !== null) {
 ?>
 			<li><a href="logout.php">Logout</a></li>
 <?php
-} else {
-?>
-			<li><a href="login.php">Login</a></li>
-			<li><a href="register.php">Registrierung</a></li>
-<?php
 }
 ?>
 		</ul>

landing.php

@@ -5,125 +5,19 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
         <link rel="stylesheet" href="assets/css/main.css" />
-        <style>
+        <link rel="stylesheet" href="assets/css/public.css" />
-            body {
-                background: #ffffff;
-            }
-
-            .landing-shell {
-                min-height: 100vh;
-            }
-
-            .landing-hero {
-                min-height: 82vh;
-                background-image: url("assets/images/landing-hero.png");
-                background-size: cover;
-                background-position: center right;
-                position: relative;
-                display: flex;
-                align-items: center;
-                padding: 4rem 6vw;
-            }
-
-            .landing-hero:before {
-                content: "";
-                position: absolute;
-                inset: 0;
-                background: rgba(255, 255, 255, 0.68);
-            }
-
-            .landing-hero-content {
-                position: relative;
-                max-width: 42rem;
-            }
-
-            .landing-hero h1 {
-                margin-bottom: 0.35em;
-            }
-
-            .landing-hero p {
-                color: #3d4449;
-                font-size: 1.15em;
-                max-width: 34rem;
-            }
-
-            .landing-nav {
-                position: absolute;
-                top: 1.5rem;
-                left: 6vw;
-                right: 6vw;
-                z-index: 2;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                gap: 1rem;
-            }
-
-            .landing-nav strong {
-                color: #3d4449;
-                font-family: "Roboto Slab", serif;
-                font-size: 1.1em;
-            }
-
-            .landing-section {
-                padding: 4rem 6vw;
-            }
-
-            .landing-grid {
-                display: grid;
-                grid-template-columns: repeat(3, minmax(0, 1fr));
-                gap: 1.25rem;
-                max-width: 72rem;
-            }
-
-            .landing-feature {
-                border: solid 1px rgba(210, 215, 217, 0.75);
-                border-radius: 8px;
-                padding: 1.5rem;
-                background: #ffffff;
-            }
-
-            .landing-feature h3 {
-                margin-bottom: 0.5rem;
-            }
-
-            .landing-feature p {
-                margin-bottom: 0;
-            }
-
-            @media screen and (max-width: 980px) {
-                .landing-hero {
-                    min-height: 78vh;
-                    padding: 5.5rem 2rem 3rem 2rem;
-                    background-position: center right 30%;
-                }
-
-                .landing-nav {
-                    left: 2rem;
-                    right: 2rem;
-                }
-
-                .landing-grid {
-                    grid-template-columns: 1fr;
-                }
-
-                .landing-section {
-                    padding: 3rem 2rem;
-                }
-            }
-        </style>
     </head>
-    <body class="is-preload">
+    <body class="is-preload public-page">
-        <div class="landing-shell">
+        <div class="public-shell">
-            <section class="landing-hero">
+            <section class="public-hero">
-                <nav class="landing-nav" aria-label="Hauptnavigation">
+                <nav class="public-nav" aria-label="Hauptnavigation">
                     <strong>Kaffeeliste</strong>
                     <ul class="actions">
                         <li><a href="login.php" class="button">Login</a></li>
                         <li><a href="register.php" class="button primary">Registrieren</a></li>
                     </ul>
                 </nav>
-                <div class="landing-hero-content">
+                <div class="public-hero-content">
                     <h1>Kaffeeliste</h1>
                     <p>Die digitale Kaffeekasse fuer Teams, Bueros und Vereine: Striche, Einzahlungen und offene Betraege bleiben nachvollziehbar an einem Ort.</p>
                     <ul class="actions">
@@ -133,20 +27,20 @@
                 </div>
             </section>
 
-            <section class="landing-section">
+            <section class="public-section">
                 <header class="major">
                     <h2>Alles rund um die Kaffeekasse</h2>
                 </header>
-                <div class="landing-grid">
+                <div class="public-grid">
-                    <article class="landing-feature">
+                    <article class="public-feature">
                         <h3>Striche erfassen</h3>
                         <p>Teilnehmer und Admins behalten Verbrauch, Einzahlungen und Salden im Blick.</p>
                     </article>
-                    <article class="landing-feature">
+                    <article class="public-feature">
                         <h3>Mandantenfaehig</h3>
                         <p>Jeder Kunde arbeitet in seinem eigenen Bereich mit eigenen Einstellungen.</p>
                     </article>
-                    <article class="landing-feature">
+                    <article class="public-feature">
                         <h3>Webspace-tauglich</h3>
                         <p>Der Start erfolgt ueber eine zentrale App-Adresse mit Login und Mandantenauswahl.</p>
                     </article>

login.php

@@ -32,50 +32,78 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $errors = $result['errors'];
 }
 
-include 'header.php';
-include 'headerline.php';
-include 'nav.php';
 ?>
 
-<section id="banner">
+<!DOCTYPE HTML>
-    <div class="content">
+<html lang="de">
-        <h2>Login</h2>
+    <head>
+        <title>Kaffeeliste Login</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+        <link rel="stylesheet" href="assets/css/main.css" />
+        <link rel="stylesheet" href="assets/css/public.css" />
+    </head>
+    <body class="is-preload public-page">
+        <div class="public-shell">
+            <section class="public-auth">
+                <nav class="public-nav" aria-label="Hauptnavigation">
+                    <strong><a href="landing.php">Kaffeeliste</a></strong>
+                    <ul class="actions">
+                        <li><a href="register.php" class="button">Registrieren</a></li>
+                    </ul>
+                </nav>
 
-        <?php if (isset($_GET['logged_out'])): ?>
+                <div class="public-auth-grid">
-            <div class="hint-box success"><p>Du wurdest abgemeldet.</p></div>
+                    <div class="public-auth-copy">
-        <?php endif; ?>
+                        <h1>Login</h1>
+                        <p>Melde dich mit deinem Kundenkonto an. Wenn du mehreren Mandanten zugeordnet bist, waehlst du danach den passenden Bereich aus.</p>
+                    </div>
 
-        <?php if ($errors !== []): ?>
+                    <div class="public-panel">
-            <div class="hint-box error">
+                        <h2>Zur App</h2>
-                <?php foreach ($errors as $error): ?>
-                    <p><?php echo saas_html($error); ?></p>
-                <?php endforeach; ?>
-            </div>
-        <?php endif; ?>
 
-        <form method="post" action="login.php">
+                        <?php if (isset($_GET['logged_out'])): ?>
-            <?php echo app_csrf_field(); ?>
+                            <div class="hint-box success"><p>Du wurdest abgemeldet.</p></div>
-            <div class="row">
+                        <?php endif; ?>
-                <div class="col-6 col-12-small">
+
-                    <label for="email">E-Mail</label>
+                        <?php if ($errors !== []): ?>
-                    <input type="email" name="email" id="email" value="<?php echo saas_html($email); ?>" required>
+                            <div class="hint-box error">
+                                <?php foreach ($errors as $error): ?>
+                                    <p><?php echo saas_html($error); ?></p>
+                                <?php endforeach; ?>
+                            </div>
+                        <?php endif; ?>
+
+                        <form method="post" action="login.php">
+                            <?php echo app_csrf_field(); ?>
+                            <div class="row">
+                                <div class="col-12">
+                                    <label for="email">E-Mail</label>
+                                    <input type="email" name="email" id="email" value="<?php echo saas_html($email); ?>" required>
+                                </div>
+                                <div class="col-12">
+                                    <label for="password">Passwort</label>
+                                    <input type="password" name="password" id="password" required>
+                                </div>
+                                <div class="col-12">
+                                    <label for="tenant_slug">Kundenkuerzel</label>
+                                    <input type="text" name="tenant_slug" id="tenant_slug" value="<?php echo saas_html($tenantSlug); ?>" placeholder="optional">
+                                </div>
+                            </div>
+                            <ul class="actions">
+                                <li><button type="submit" class="primary">Einloggen</button></li>
+                                <li><a href="passwort-vergessen.php" class="button">Passwort vergessen</a></li>
+                            </ul>
+                        </form>
+                    </div>
                 </div>
-                <div class="col-6 col-12-small">
+            </section>
-                    <label for="password">Passwort</label>
+        </div>
-                    <input type="password" name="password" id="password" required>
-                </div>
-                <div class="col-6 col-12-small">
-                    <label for="tenant_slug">Kundenkuerzel</label>
-                    <input type="text" name="tenant_slug" id="tenant_slug" value="<?php echo saas_html($tenantSlug); ?>" placeholder="optional">
-                </div>
-            </div>
-            <ul class="actions">
-                <li><button type="submit">Einloggen</button></li>
-                <li><a href="register.php" class="button alt">Registrieren</a></li>
-                <li><a href="passwort-vergessen.php" class="button alt">Passwort vergessen</a></li>
-            </ul>
-        </form>
-    </div>
-</section>
 
-<?php include 'footer.php'; ?>
+        <script src="assets/js/jquery.min.js"></script>
+        <script src="assets/js/browser.min.js"></script>
+        <script src="assets/js/breakpoints.min.js"></script>
+        <script src="assets/js/util.js"></script>
+        <script src="assets/js/main.js"></script>
+    </body>
+</html>

passwort-vergessen.php

@@ -27,50 +27,80 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     }
 }
 
-include 'header.php';
-include 'headerline.php';
-include 'nav.php';
 ?>
 
-<section id="banner">
+<!DOCTYPE HTML>
-    <div class="content">
+<html lang="de">
-        <h2>Passwort vergessen</h2>
+    <head>
+        <title>Kaffeeliste Passwort vergessen</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+        <link rel="stylesheet" href="assets/css/main.css" />
+        <link rel="stylesheet" href="assets/css/public.css" />
+    </head>
+    <body class="is-preload public-page">
+        <div class="public-shell">
+            <section class="public-auth">
+                <nav class="public-nav" aria-label="Hauptnavigation">
+                    <strong><a href="landing.php">Kaffeeliste</a></strong>
+                    <ul class="actions">
+                        <li><a href="login.php" class="button">Login</a></li>
+                        <li><a href="register.php" class="button primary">Registrieren</a></li>
+                    </ul>
+                </nav>
 
-        <?php if ($message !== ''): ?>
+                <div class="public-auth-grid">
-            <div class="hint-box success">
+                    <div class="public-auth-copy">
-                <p><?php echo saas_html($message); ?></p>
+                        <h1>Passwort vergessen</h1>
-                <?php if ($resetLink !== null): ?>
+                        <p>Fordere einen Link an, um dein Passwort neu zu setzen. Wenn du mehrere Kundenbereiche nutzt, kannst du das Kuerzel optional angeben.</p>
-                    <p><a href="<?php echo saas_html($resetLink); ?>">Dev-Link zum Zuruecksetzen</a></p>
+                    </div>
-                <?php endif; ?>
-            </div>
-        <?php endif; ?>
 
-        <?php if ($errors !== []): ?>
+                    <div class="public-panel">
-            <div class="hint-box error">
+                        <h2>Reset-Link anfordern</h2>
-                <?php foreach ($errors as $error): ?>
-                    <p><?php echo saas_html($error); ?></p>
-                <?php endforeach; ?>
-            </div>
-        <?php endif; ?>
 
-        <form method="post" action="passwort-vergessen.php">
+                        <?php if ($message !== ''): ?>
-            <?php echo app_csrf_field(); ?>
+                            <div class="hint-box success">
-            <div class="row">
+                                <p><?php echo saas_html($message); ?></p>
-                <div class="col-6 col-12-small">
+                                <?php if ($resetLink !== null): ?>
-                    <label for="email">E-Mail</label>
+                                    <p><a href="<?php echo saas_html($resetLink); ?>">Dev-Link zum Zuruecksetzen</a></p>
-                    <input type="email" name="email" id="email" value="<?php echo saas_html($email); ?>" required>
+                                <?php endif; ?>
+                            </div>
+                        <?php endif; ?>
+
+                        <?php if ($errors !== []): ?>
+                            <div class="hint-box error">
+                                <?php foreach ($errors as $error): ?>
+                                    <p><?php echo saas_html($error); ?></p>
+                                <?php endforeach; ?>
+                            </div>
+                        <?php endif; ?>
+
+                        <form method="post" action="passwort-vergessen.php">
+                            <?php echo app_csrf_field(); ?>
+                            <div class="row">
+                                <div class="col-12">
+                                    <label for="email">E-Mail</label>
+                                    <input type="email" name="email" id="email" value="<?php echo saas_html($email); ?>" required>
+                                </div>
+                                <div class="col-12">
+                                    <label for="tenant_slug">Kundenkuerzel</label>
+                                    <input type="text" name="tenant_slug" id="tenant_slug" value="<?php echo saas_html($tenantSlug); ?>" placeholder="optional">
+                                </div>
+                            </div>
+                            <ul class="actions">
+                                <li><button type="submit" class="primary">Link vorbereiten</button></li>
+                                <li><a href="login.php" class="button">Zum Login</a></li>
+                            </ul>
+                        </form>
+                    </div>
                 </div>
-                <div class="col-6 col-12-small">
+            </section>
-                    <label for="tenant_slug">Kundenkuerzel</label>
+        </div>
-                    <input type="text" name="tenant_slug" id="tenant_slug" value="<?php echo saas_html($tenantSlug); ?>" placeholder="optional">
-                </div>
-            </div>
-            <ul class="actions">
-                <li><button type="submit">Link vorbereiten</button></li>
-                <li><a href="login.php" class="button alt">Zum Login</a></li>
-            </ul>
-        </form>
-    </div>
-</section>
 
-<?php include 'footer.php'; ?>
+        <script src="assets/js/jquery.min.js"></script>
+        <script src="assets/js/browser.min.js"></script>
+        <script src="assets/js/breakpoints.min.js"></script>
+        <script src="assets/js/util.js"></script>
+        <script src="assets/js/main.js"></script>
+    </body>
+</html>

passwort-zuruecksetzen.php

@@ -26,56 +26,85 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     }
 }
 
-include 'header.php';
-include 'headerline.php';
-include 'nav.php';
 ?>
 
-<section id="banner">
+<!DOCTYPE HTML>
-    <div class="content">
+<html lang="de">
-        <h2>Passwort zuruecksetzen</h2>
+    <head>
-
+        <title>Kaffeeliste Passwort zuruecksetzen</title>
-        <?php if ($success): ?>
+        <meta charset="utf-8" />
-            <div class="hint-box success"><p>Das Passwort wurde geaendert.</p></div>
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-            <ul class="actions">
+        <link rel="stylesheet" href="assets/css/main.css" />
-                <li><a href="login.php" class="button">Zum Login</a></li>
+        <link rel="stylesheet" href="assets/css/public.css" />
-            </ul>
+    </head>
-        <?php else: ?>
+    <body class="is-preload public-page">
-            <?php if ($errors !== []): ?>
+        <div class="public-shell">
-                <div class="hint-box error">
+            <section class="public-auth">
-                    <?php foreach ($errors as $error): ?>
+                <nav class="public-nav" aria-label="Hauptnavigation">
-                        <p><?php echo saas_html($error); ?></p>
+                    <strong><a href="landing.php">Kaffeeliste</a></strong>
-                    <?php endforeach; ?>
-                </div>
-            <?php elseif (!$tokenValid): ?>
-                <div class="hint-box error"><p>Der Link ist ungueltig oder abgelaufen.</p></div>
-            <?php endif; ?>
-
-            <?php if ($tokenValid): ?>
-                <form method="post" action="passwort-zuruecksetzen.php">
-                    <?php echo app_csrf_field(); ?>
-                    <input type="hidden" name="token" value="<?php echo saas_html($token); ?>">
-                    <div class="row">
-                        <div class="col-6 col-12-small">
-                            <label for="password">Neues Passwort</label>
-                            <input type="password" name="password" id="password" minlength="8" required>
-                        </div>
-                        <div class="col-6 col-12-small">
-                            <label for="password_confirm">Passwort wiederholen</label>
-                            <input type="password" name="password_confirm" id="password_confirm" minlength="8" required>
-                        </div>
-                    </div>
                     <ul class="actions">
-                        <li><button type="submit">Passwort speichern</button></li>
+                        <li><a href="login.php" class="button">Login</a></li>
                     </ul>
-                </form>
+                </nav>
-            <?php else: ?>
-                <ul class="actions">
-                    <li><a href="passwort-vergessen.php" class="button">Neuen Link anfordern</a></li>
-                </ul>
-            <?php endif; ?>
-        <?php endif; ?>
-    </div>
-</section>
 
-<?php include 'footer.php'; ?>
+                <div class="public-auth-grid">
+                    <div class="public-auth-copy">
+                        <h1>Passwort zuruecksetzen</h1>
+                        <p>Setze ein neues Passwort fuer dein Kaffeeliste-Konto.</p>
+                    </div>
+
+                    <div class="public-panel">
+                        <h2>Neues Passwort</h2>
+
+                        <?php if ($success): ?>
+                            <div class="hint-box success"><p>Das Passwort wurde geaendert.</p></div>
+                            <ul class="actions">
+                                <li><a href="login.php" class="button primary">Zum Login</a></li>
+                            </ul>
+                        <?php else: ?>
+                            <?php if ($errors !== []): ?>
+                                <div class="hint-box error">
+                                    <?php foreach ($errors as $error): ?>
+                                        <p><?php echo saas_html($error); ?></p>
+                                    <?php endforeach; ?>
+                                </div>
+                            <?php elseif (!$tokenValid): ?>
+                                <div class="hint-box error"><p>Der Link ist ungueltig oder abgelaufen.</p></div>
+                            <?php endif; ?>
+
+                            <?php if ($tokenValid): ?>
+                                <form method="post" action="passwort-zuruecksetzen.php">
+                                    <?php echo app_csrf_field(); ?>
+                                    <input type="hidden" name="token" value="<?php echo saas_html($token); ?>">
+                                    <div class="row">
+                                        <div class="col-6 col-12-small">
+                                            <label for="password">Neues Passwort</label>
+                                            <input type="password" name="password" id="password" minlength="8" required>
+                                        </div>
+                                        <div class="col-6 col-12-small">
+                                            <label for="password_confirm">Passwort wiederholen</label>
+                                            <input type="password" name="password_confirm" id="password_confirm" minlength="8" required>
+                                        </div>
+                                    </div>
+                                    <ul class="actions">
+                                        <li><button type="submit" class="primary">Passwort speichern</button></li>
+                                    </ul>
+                                </form>
+                            <?php else: ?>
+                                <ul class="actions">
+                                    <li><a href="passwort-vergessen.php" class="button primary">Neuen Link anfordern</a></li>
+                                </ul>
+                            <?php endif; ?>
+                        <?php endif; ?>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <script src="assets/js/jquery.min.js"></script>
+        <script src="assets/js/browser.min.js"></script>
+        <script src="assets/js/breakpoints.min.js"></script>
+        <script src="assets/js/util.js"></script>
+        <script src="assets/js/main.js"></script>
+    </body>
+</html>

register.php

@@ -39,57 +39,86 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $errors = $result['errors'];
 }
 
-include 'header.php';
-include 'headerline.php';
-include 'nav.php';
 ?>
 
-<section id="banner">
+<!DOCTYPE HTML>
-    <div class="content">
+<html lang="de">
-        <h2>Registrierung</h2>
+    <head>
+        <title>Kaffeeliste Registrierung</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+        <link rel="stylesheet" href="assets/css/main.css" />
+        <link rel="stylesheet" href="assets/css/public.css" />
+    </head>
+    <body class="is-preload public-page">
+        <div class="public-shell">
+            <section class="public-auth">
+                <nav class="public-nav" aria-label="Hauptnavigation">
+                    <strong><a href="landing.php">Kaffeeliste</a></strong>
+                    <ul class="actions">
+                        <li><a href="login.php" class="button">Login</a></li>
+                    </ul>
+                </nav>
 
-        <?php if ($errors !== []): ?>
+                <div class="public-auth-grid">
-            <div class="hint-box error">
+                    <div class="public-auth-copy">
-                <?php foreach ($errors as $error): ?>
+                        <h1>Registrierung</h1>
-                    <p><?php echo saas_html($error); ?></p>
+                        <p>Lege einen neuen Kundenbereich an. Danach bist du als Owner angemeldet und kannst die Kaffeeliste fuer dein Team einrichten.</p>
-                <?php endforeach; ?>
+                    </div>
-            </div>
-        <?php endif; ?>
 
-        <form method="post" action="register.php">
+                    <div class="public-panel">
-            <?php echo app_csrf_field(); ?>
+                        <h2>Kundenkonto anlegen</h2>
-            <div class="row">
-                <div class="col-6 col-12-small">
-                    <label for="tenant_name">Kundenname</label>
-                    <input type="text" name="tenant_name" id="tenant_name" value="<?php echo saas_html($values['tenant_name']); ?>" required>
-                </div>
-                <div class="col-6 col-12-small">
-                    <label for="tenant_slug">Kundenkuerzel</label>
-                    <input type="text" name="tenant_slug" id="tenant_slug" value="<?php echo saas_html($values['tenant_slug']); ?>" placeholder="kaffeeliste-team" required>
-                </div>
-                <div class="col-6 col-12-small">
-                    <label for="display_name">Dein Name</label>
-                    <input type="text" name="display_name" id="display_name" value="<?php echo saas_html($values['display_name']); ?>" required>
-                </div>
-                <div class="col-6 col-12-small">
-                    <label for="email">E-Mail</label>
-                    <input type="email" name="email" id="email" value="<?php echo saas_html($values['email']); ?>" required>
-                </div>
-                <div class="col-6 col-12-small">
-                    <label for="password">Passwort</label>
-                    <input type="password" name="password" id="password" minlength="8" required>
-                </div>
-                <div class="col-6 col-12-small">
-                    <label for="password_confirm">Passwort wiederholen</label>
-                    <input type="password" name="password_confirm" id="password_confirm" minlength="8" required>
-                </div>
-            </div>
-            <ul class="actions">
-                <li><button type="submit">Kundenkonto anlegen</button></li>
-                <li><a href="login.php" class="button alt">Zum Login</a></li>
-            </ul>
-        </form>
-    </div>
-</section>
 
-<?php include 'footer.php'; ?>
+                        <?php if ($errors !== []): ?>
+                            <div class="hint-box error">
+                                <?php foreach ($errors as $error): ?>
+                                    <p><?php echo saas_html($error); ?></p>
+                                <?php endforeach; ?>
+                            </div>
+                        <?php endif; ?>
+
+                        <form method="post" action="register.php">
+                            <?php echo app_csrf_field(); ?>
+                            <div class="row">
+                                <div class="col-6 col-12-small">
+                                    <label for="tenant_name">Kundenname</label>
+                                    <input type="text" name="tenant_name" id="tenant_name" value="<?php echo saas_html($values['tenant_name']); ?>" required>
+                                </div>
+                                <div class="col-6 col-12-small">
+                                    <label for="tenant_slug">Kundenkuerzel</label>
+                                    <input type="text" name="tenant_slug" id="tenant_slug" value="<?php echo saas_html($values['tenant_slug']); ?>" placeholder="kaffeeliste-team" required>
+                                </div>
+                                <div class="col-6 col-12-small">
+                                    <label for="display_name">Dein Name</label>
+                                    <input type="text" name="display_name" id="display_name" value="<?php echo saas_html($values['display_name']); ?>" required>
+                                </div>
+                                <div class="col-6 col-12-small">
+                                    <label for="email">E-Mail</label>
+                                    <input type="email" name="email" id="email" value="<?php echo saas_html($values['email']); ?>" required>
+                                </div>
+                                <div class="col-6 col-12-small">
+                                    <label for="password">Passwort</label>
+                                    <input type="password" name="password" id="password" minlength="8" required>
+                                </div>
+                                <div class="col-6 col-12-small">
+                                    <label for="password_confirm">Passwort wiederholen</label>
+                                    <input type="password" name="password_confirm" id="password_confirm" minlength="8" required>
+                                </div>
+                            </div>
+                            <ul class="actions">
+                                <li><button type="submit" class="primary">Kundenkonto anlegen</button></li>
+                                <li><a href="login.php" class="button">Zum Login</a></li>
+                            </ul>
+                        </form>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <script src="assets/js/jquery.min.js"></script>
+        <script src="assets/js/browser.min.js"></script>
+        <script src="assets/js/breakpoints.min.js"></script>
+        <script src="assets/js/util.js"></script>
+        <script src="assets/js/main.js"></script>
+    </body>
+</html>