Landingpage: "Von einem Pio, für Pios"

Ersetzt das kaputte, generische Platzhalter-Template (verwies auf nicht
existierende assets/img/appstore.jpg etc.) unter der Root-Domain durch eine
echte Landingpage.

Design bewusst eigenständiger als die Install-Seite (dort ging es um
Vertrauen/Klarheit, hier darf es Persönlichkeit zeigen) - Fraunces-Kursiv
für die persönliche Stimme des Erstellers, ansonsten Systemschrift und die
etablierten Marken-Farben (Teal/Mint). Drei echte Screenshots der App statt
Stock-Bildern, erzeugt mit Playwright + demo-befüllter IndexedDB (Datum,
Namen frei erfunden, keine echten Nutzerdaten) - zeigt die tatsächliche
Oberfläche.

Inhaltlich auf die vier genannten Unterscheidungsmerkmale fokussiert:
einfache/übersichtliche Bedienung (keine Grafen), eingebauter Timer, 100%
Anonymität, und daraus abgeleitet der Backup/Wiederherstellen-Hinweis
(möglich, weil alles nur lokal liegt). Bewusst textarm, Screenshots tragen
die Botschaft.

Footer verlinkt Feedback-Mail, WhatsApp-Community und das Impressum von
zielke.studio (Popup-Button auf deren Startseite, kein eigener Deep-Link
verfügbar) mit Hinweis, dass PioMint ein privates Projekt ist.

Lokal getestet: Django-Check sauber, Rendering bei 390px (mobil) und 1280px
(Desktop) per Playwright-Screenshot geprüft.

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

web/templates/web/index.html

@@ -1,24 +1,461 @@
-<section data-cid="slide-05-7059bc59" class="slide fade-6 kenBurns">
+{% load static %}
-    <div class="content">
+<!DOCTYPE html>
-      <div class="container">
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="PioMint: die einfache, anonyme App für Pioniere, um Dienststunden zu erfassen. Kein Account, keine Cloud – alles bleibt auf deinem Gerät.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;1,9..144,500;1,9..144,600&display=swap" rel="stylesheet">
+    <title>PioMint – von einem Pio, für Pios</title>
+    <style>
+        :root {
+            --teal: #026670;
+            --teal-deep: #013e45;
+            --mint: rgb(120, 170, 86);
+            --mint-soft: #eef3e7;
+            --paper: #fbf9f4;
+            --ink: #1c2723;
+            --ink-soft: #5b6b63;
+        }
+
+        * { box-sizing: border-box; }
+
+        html, body {
+            overflow-x: hidden;
+        }
+
+        body {
+            margin: 0;
+            background: var(--paper);
+            color: var(--ink);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            line-height: 1.55;
+        }
+
+        a { color: inherit; }
+
+        .display {
+            font-family: "Fraunces", Georgia, serif;
+        }
+
+        img { max-width: 100%; display: block; }
+
+        .wrap {
+            max-width: 1080px;
+            margin: 0 auto;
+            padding: 0 1.5rem;
+        }
+
+        /* --- Top mark --- */
+        .topbar {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            padding: 1.5rem 1.5rem 0 1.5rem;
+            max-width: 1080px;
+            margin: 0 auto;
+        }
+
+        .topbar img {
+            width: 34px;
+            height: 34px;
+            border-radius: 9px;
+        }
+
+        .topbar span {
+            font-weight: 700;
+            letter-spacing: 0.02em;
+        }
+
+        .topbar span b { color: var(--mint); }
+
+        /* --- Hero --- */
+        .hero {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 2.5rem;
+            align-items: center;
+            padding: 2.5rem 1.5rem 3rem 1.5rem;
+            max-width: 1080px;
+            margin: 0 auto;
+        }
+
+        @media (min-width: 900px) {
+            .hero {
+                grid-template-columns: 1.05fr 0.95fr;
+                padding-top: 4rem;
+                gap: 3rem;
+            }
+        }
+
+        .hero-quote {
+            font-size: clamp(2rem, 6vw, 3.1rem);
+            font-weight: 500;
+            font-style: italic;
+            line-height: 1.12;
+            margin: 0 0 1.25rem 0;
+            position: relative;
+        }
+
+        .hero-quote .squiggle {
+            display: block;
+            width: 132px;
+            height: 14px;
+            margin-top: 0.4rem;
+        }
+
+        .hero-sub {
+            font-size: 1.08rem;
+            color: var(--ink-soft);
+            max-width: 34rem;
+            margin: 0 0 1.75rem 0;
+        }
+
+        .cta {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.6rem;
+            background: var(--teal);
+            color: white;
+            font-weight: 700;
+            font-size: 1.05rem;
+            padding: 0.9rem 1.6rem;
+            border-radius: 999px;
+            text-decoration: none;
+            box-shadow: 0 0.6rem 1.4rem rgba(2, 102, 112, 0.28);
+            transition: transform 0.15s ease, box-shadow 0.15s ease;
+        }
+
+        .cta:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 0.9rem 1.8rem rgba(2, 102, 112, 0.34);
+            color: white;
+        }
+
+        .cta svg { width: 20px; height: 20px; }
+
+        .cta-note {
+            margin: 0.85rem 0 0 0;
+            font-size: 0.85rem;
+            color: var(--ink-soft);
+        }
+
+        /* --- Phone frame --- */
+        .phone {
+            justify-self: center;
+            width: min(280px, 78vw);
+            border-radius: 2.4rem;
+            padding: 0.55rem;
+            background: linear-gradient(160deg, #ffffff, #eef1ee);
+            box-shadow: 0 1.5rem 3rem rgba(2, 30, 33, 0.18), 0 0 0 1px rgba(2, 30, 33, 0.05);
+        }
+
+        .phone img {
+            border-radius: 1.9rem;
+            width: 100%;
+        }
+
+        .phone.float {
+            animation: floaty 5s ease-in-out infinite;
+        }
+
+        @keyframes floaty {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .phone.float { animation: none; }
+        }
+
+        /* --- Feature sections --- */
+        .features {
+            background: white;
+            padding: 3.5rem 0 4rem 0;
+            border-top: 1px solid rgba(2, 30, 33, 0.06);
+            border-bottom: 1px solid rgba(2, 30, 33, 0.06);
+        }
+
+        .features-head {
+            text-align: center;
+            margin-bottom: 2.75rem;
+        }
+
+        .features-head .eyebrow {
+            color: var(--mint);
+            font-weight: 700;
+            font-size: 0.85rem;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+        }
+
+        .features-head h2 {
+            font-family: "Fraunces", Georgia, serif;
+            font-style: italic;
+            font-weight: 500;
+            font-size: clamp(1.7rem, 4vw, 2.3rem);
+            margin: 0.4rem 0 0 0;
+        }
+
+        .feature-row {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 2rem;
+            align-items: center;
+            padding: 2.5rem 1.5rem;
+            max-width: 1080px;
+            margin: 0 auto;
+        }
+
+        .feature-row:not(:last-child) {
+            border-bottom: 1px dashed rgba(2, 30, 33, 0.12);
+        }
+
+        @media (min-width: 900px) {
+            .feature-row {
+                grid-template-columns: 1fr 1fr;
+                gap: 3.5rem;
+            }
+            .feature-row.reverse .feature-text { order: 2; }
+            .feature-row.reverse .feature-shot { order: 1; }
+        }
+
+        .feature-row-center {
+            grid-template-columns: 1fr !important;
+            text-align: center;
+            padding-top: 2.5rem;
+            padding-bottom: 2.5rem;
+        }
+
+        .feature-row-center .feature-text {
+            max-width: 34rem;
+            margin: 0 auto;
+        }
+
+        .feature-row-center .feature-callout {
+            text-align: left;
+        }
+
+        .feature-icon {
+            width: 46px;
+            height: 46px;
+            border-radius: 14px;
+            background: var(--mint-soft);
+            color: var(--teal);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 1rem;
+        }
+
+        .feature-icon svg { width: 22px; height: 22px; }
+
+        .feature-text h3 {
+            font-size: 1.4rem;
+            font-weight: 700;
+            margin: 0 0 0.6rem 0;
+        }
+
+        .feature-text p {
+            color: var(--ink-soft);
+            font-size: 1.02rem;
+            margin: 0;
+        }
+
+        .feature-callout {
+            margin-top: 1.1rem;
+            background: var(--mint-soft);
+            border-radius: 0.9rem;
+            padding: 0.9rem 1.1rem;
+            font-size: 0.92rem;
+            color: var(--teal-deep);
+            display: flex;
+            gap: 0.6rem;
+        }
+
+        .feature-callout svg {
+            width: 18px;
+            height: 18px;
+            flex-shrink: 0;
+            margin-top: 0.15rem;
+            color: var(--mint);
+        }
+
+        .feature-shot {
+            justify-self: center;
+        }
+
+        .feature-shot .phone {
+            width: min(230px, 62vw);
+        }
+
+        /* --- Closing CTA --- */
+        .closing {
+            background: linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 100%);
+            color: white;
+            text-align: center;
+            padding: 4rem 1.5rem;
+        }
+
+        .closing h2 {
+            font-family: "Fraunces", Georgia, serif;
+            font-style: italic;
+            font-weight: 500;
+            font-size: clamp(1.8rem, 5vw, 2.6rem);
+            margin: 0 0 0.75rem 0;
+        }
+
+        .closing p {
+            color: rgba(255, 255, 255, 0.82);
+            max-width: 30rem;
+            margin: 0 auto 1.75rem auto;
+        }
+
+        .closing .cta {
+            background: var(--mint);
+            box-shadow: 0 0.6rem 1.4rem rgba(120, 170, 86, 0.35);
+        }
+
+        /* --- Footer --- */
+        footer {
+            padding: 2.5rem 1.5rem 3rem 1.5rem;
+            text-align: center;
+            font-size: 0.85rem;
+            color: var(--ink-soft);
+        }
+
+        footer a {
+            color: var(--teal);
+            font-weight: 600;
+            text-decoration: none;
+        }
+
+        footer .links {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.4rem 1.2rem;
+            justify-content: center;
+            margin-bottom: 1rem;
+        }
+
+        footer .fineprint {
+            max-width: 32rem;
+            margin: 0 auto;
+            opacity: 0.85;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="topbar">
+        <img src="{% static 'app/images/appleicon_whitebg.png' %}" alt="">
+        <span>PIO<b>MINT</b></span>
+    </div>
+
+    <section class="hero">
+        <div>
+            <p class="hero-quote display">
+                Von einem Pio.<br>Für Pios gemacht.
+                <svg class="squiggle" viewBox="0 0 132 14" fill="none">
+                    <path d="M2 10C20 2 34 2 50 8C66 14 80 2 96 6C108 9 118 6 130 2" stroke="var(--mint)" stroke-width="3" stroke-linecap="round"/>
+                </svg>
+            </p>
+            <p class="hero-sub">
+                Ich hab PioMint gebaut, weil ich selbst jeden Monat meine Stunden
+                eintragen musste – und keine der bestehenden Apps wollte. Zu
+                kompliziert, zu englisch, zu viel drumherum. Also hab ich meine
+                eigene gemacht. Jetzt darfst du sie auch benutzen.
+            </p>
+            <a class="cta" href="/app/install/">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3M8 7l4-4 4 4"/><path d="M4 13v6a2 2 0 002 2h12a2 2 0 002-2v-6"/></svg>
+                Jetzt installieren
+            </a>
+            <p class="cta-note">Kostenlos. Ohne Account. In unter einer Minute.</p>
+        </div>
+        <div class="phone float">
+            <img src="{% static 'app/images/landing/screen-uebersicht.png' %}" alt="PioMint Dashboard: Jahr, Monat, Timer und Aktivitäten auf einen Blick">
+        </div>
+    </section>
+
+    <section class="features">
+        <div class="features-head">
+            <div class="eyebrow">Warum PioMint?</div>
+            <h2 class="display">Nichts, was du nicht brauchst.</h2>
+        </div>
+
         <div class="wrap">
 
-          <ul class="flex">
+            <div class="feature-row">
-            <li class="col-12-12">
+                <div class="feature-text">
-              <div class="fix-4-12">
+                    <div class="feature-icon">
-                <h1>PioMint</h1>
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
-                <a href="#" class="button hollow ae-2 cropLeft"><img src="assets/img/appstore.jpg" height="63"/></a><a href="#" class="button hollow ae-3 cropRight"><img src="assets/img/googleplay.jpg" height="63"/></a>
+                    </div>
-              </div>
+                    <h3>Einfach, nicht kompliziert</h3>
-            </li>
+                    <p>Keine Diagramme, keine Statistik-Flut, kein Menü-Dschungel.
-            <li class="col-12-12">
+                        Nur deine Stunden – klar und auf einen Blick.</p>
-              <div class="fix-6-12 ae-2 margin-top-3">
+                </div>
-                <img class="iphone-5" width="380" src="assets/img/iphone-5.png" alt="iPhone App" data-action="zoom"/>
+                <div class="feature-shot">
-              </div>
+                    <div class="phone"><img src="{% static 'app/images/landing/screen-liste.png' %}" alt="Übersichtliche Liste aller Aktivitäten in PioMint"></div>
-            </li>
+                </div>
-          </ul>
+            </div>
+
+            <div class="feature-row reverse">
+                <div class="feature-text">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l3 2M9 2h6M12 2v3"/></svg>
+                    </div>
+                    <h3>Timer eingebaut</h3>
+                    <p>Starten, pausieren, fertig. Die Zeit läuft von selbst mit –
+                        du musst am Ende nichts mehr zusammenrechnen.</p>
+                </div>
+                <div class="feature-shot">
+                    <div class="phone"><img src="{% static 'app/images/landing/screen-timer.png' %}" alt="Laufender Timer in PioMint"></div>
+                </div>
+            </div>
+
+            <div class="feature-row feature-row-center">
+                <div class="feature-text">
+                    <div class="feature-icon" style="margin-left: auto; margin-right: auto;">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z"/></svg>
+                    </div>
+                    <h3>100&nbsp;% anonym</h3>
+                    <p>Kein Account, kein Login, keine Cloud. Deine Daten bleiben
+                        ausschließlich auf deinem Gerät – sonst nirgends.</p>
+                    <div class="feature-callout">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
+                        <span>Und genau weil alles nur lokal liegt, kannst du jederzeit
+                            ein Backup machen und es auf einem neuen Handy wieder
+                            einspielen – deine Daten gehen beim Wechsel nicht verloren.</span>
+                    </div>
+                </div>
+            </div>
 
         </div>
-      </div>
+    </section>
-    </div>
+
-    <div class="background" style="background-image:url(assets/img/background/img-05.jpg)"></div>
+    <section class="closing">
-  </section>
+        <h2 class="display">Bereit?</h2>
+        <p>Einmal einrichten, dann liegt PioMint als eigenes Icon auf deinem
+            Homescreen – ganz ohne App Store.</p>
+        <a class="cta" href="/app/install/">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3M8 7l4-4 4 4"/><path d="M4 13v6a2 2 0 002 2h12a2 2 0 002-2v-6"/></svg>
+            PioMint installieren
+        </a>
+    </section>
+
+    <footer>
+        <div class="links">
+            <a href="mailto:app-feedback@zielke.studio">Feedback</a>
+            <a href="https://chat.whatsapp.com/Cy4laGaEdLP1DZbhN04zRQ" target="_blank" rel="noopener noreferrer">WhatsApp-Community</a>
+            <a href="https://www.zielke.studio/" target="_blank" rel="noopener noreferrer">Impressum</a>
+        </div>
+        <p class="fineprint">
+            PioMint ist ein privates Herzensprojekt, kein kommerzielles Produkt.
+            Das Impressum stellt zielke.studio (Button unten auf der Seite).
+        </p>
+    </footer>
+
+</body>
+</html>