<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Family Pace — Mach dein Training zum Game</title>
    <style>
        /* BASE & COLOR PALETTE (Gaming + Sport Theme) */
        :root {
            --bg-dark: #0f172a;       /* Dark Navy / Anthrazit */
            --bg-card: #1e293b;       /* Slightly lighter Card Background */
            --primary-blue: #2563eb;  /* Power Blue */
            --accent-volt: #22c55e;   /* Neon Volt Green for Gamification */
            --accent-gold: #eab308;   /* Level & XP Gold */
            --text-main: #f8fafc;     /* Clean White Text */
            --text-muted: #94a3b8;    /* Muted Gray Text */
            --border-glow: #334155;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            line-height: 1.6;
            padding-bottom: 60px;
        }

        /* HEADER & NAVIGATION */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 8%;
            border-bottom: 1px solid var(--border-glow);
            background: rgba(15, 23, 42, 0.9);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: -0.5px;
        }

        .logo span {
            color: var(--primary-blue);
        }

        .logo-bolt {
            color: var(--accent-gold);
        }

        nav a {
            color: var(--text-muted);
            text-decoration: none;
            margin-left: 25px;
            font-weight: 600;
            font-size: 0.95rem;
            transition: color 0.2s;
        }

        nav a:hover {
            color: var(--accent-volt);
        }

        .nav-btn {
            background: var(--accent-volt);
            color: #000 !important;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 700;
        }

        /* HERO SECTION */
        .hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            padding: 80px 8%;
            align-items: center;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 900;
            line-height: 1.15;
            margin-bottom: 20px;
        }

        .hero-title span {
            color: var(--accent-volt);
        }

        .hero-subtitle {
            color: var(--text-muted);
            font-size: 1.15rem;
            margin-bottom: 30px;
        }

        .cta-box {
            display: flex;
            gap: 10px;
            background: var(--bg-card);
            padding: 8px;
            border-radius: 10px;
            border: 1px solid var(--border-glow);
            max-width: 480px;
        }

        .cta-input {
            background: transparent;
            border: none;
            padding: 12px 16px;
            color: white;
            flex-grow: 1;
            font-size: 0.95rem;
            outline: none;
        }

        .cta-btn {
            background-color: var(--accent-volt);
            color: #000;
            font-weight: 700;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: transform 0.2s;
        }

        .cta-btn:hover {
            transform: scale(1.03);
        }

        /* MOCKUP / AVATAR CARD (Right Side Hero) */
        .mockup-card {
            background: linear-gradient(145deg, #1e293b, #0f172a);
            border: 2px solid var(--primary-blue);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 0 30px rgba(37, 99, 235, 0.2);
            text-align: center;
            position: relative;
        }

        .badge-lvl {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--accent-gold);
            color: #000;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
        }

        .avatar-img-placeholder {
            width: 140px;
            height: 140px;
            background: #334155;
            border-radius: 50%;
            margin: 20px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            border: 4px solid var(--accent-volt);
        }

        .xp-bar-bg {
            background: #334155;
            height: 14px;
            border-radius: 10px;
            overflow: hidden;
            margin: 15px 0 8px 0;
        }

        .xp-bar-fill {
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-volt));
            width: 75%;
            height: 100%;
        }

        .merch-preview {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px dashed var(--border-glow);
            font-size: 0.9rem;
            color: var(--accent-gold);
            font-weight: 600;
        }

        /* FEATURES SECTION */
        .section-title {
            text-align: center;
            font-size: 2rem;
            margin: 80px 0 40px 0;
            font-weight: 800;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            padding: 0 8%;
        }

        .feature-card {
            background: var(--bg-card);
            padding: 25px;
            border-radius: 14px;
            border: 1px solid var(--border-glow);
            transition: border-color 0.2s;
        }

        .feature-card:hover {
            border-color: var(--accent-volt);
        }

        .feature-icon {
            font-size: 2rem;
            margin-bottom: 15px;
        }

        .feature-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .feature-desc {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        /* PARENT & ANTI-CHEAT SPOTLIGHT */
        .spotlight-box {
            margin: 80px 8% 0 8%;
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid var(--primary-blue);
            border-radius: 16px;
            padding: 40px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        .spotlight-col h3 {
            font-size: 1.3rem;
            color: var(--accent-volt);
            margin-bottom: 12px;
        }

        .spotlight-col p {
            color: var(--text-muted);
            font-size: 0.95rem;
        }
    </style>
</head>
<body>

    <!-- HEADER -->
    <header>
        <div class="logo">FAMILY<span>PACE</span><span class="logo-bolt">⚡</span></div>
        <nav>
            <a href="#how">So funktioniert's</a>
            <a href="#eltern">Für Eltern & Trainer</a>
            <a href="app.html" class="nav-btn">Demo-App starten 🚀</a>
        </nav>
    </header>

    <!-- HERO SECTION -->
    <section class="hero">
        <div>
            <h1 class="hero-title">Mach dein Training zum <span>Game.</span></h1>
            <p class="hero-subtitle">
                Sammle XP für jedes Baseball- oder Fußball-Training, halte deine Wochen-Streak und drucke deinen freigespielten Avatar als echtes T-Shirt!
            </p>
            <div class="cta-box">
                <input type="email" class="cta-input" placeholder="Deine E-Mail-Adresse...">
                <a href="app.html" class="cta-btn">Beta-Zugang 🚀</a>
            </div>
            <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 10px;">100% kostenlos für Nachwuchssportler & Eltern.</p>
        </div>

        <!-- HERO MOCKUP CARD -->
        <div class="mockup-card">
            <span class="badge-lvl">LVL 15 PITCHER</span>
            <div class="avatar-img-placeholder">⚾</div>
            <h3 style="font-size: 1.2rem;">Max "The Rocket"</h3>
            <p style="font-size: 0.85rem; color: var(--text-muted);">Moorpark Baseball Squad</p>

            <div class="xp-bar-bg">
                <div class="xp-bar-fill"></div>
            </div>
            <p style="font-size: 0.8rem; color: var(--text-muted); text-align: right;">1.450 / 2.000 XP</p>

            <div class="merch-preview">
                👕 T-Shirt Druck freigeschaltet!
            </div>
        </div>
    </section>

    <!-- FEATURES GRID -->
    <h2 class="section-title" id="how">In 4 Schritten zum Sport-Hero</h2>
    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">⚾</div>
            <div class="feature-title">1. Sportart wählen</div>
            <div class="feature-desc">Egal ob Baseball, Fußball, Schwimmen oder deine eigene Custom-Sportart.</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">🔥</div>
            <div class="feature-title">2. Trainieren & Quests</div>
            <div class="feature-desc">Gehe zum Training, halte deine Wochen-Streak & besiege den inneren Schweinehund.</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">⚡</div>
            <div class="feature-title">3. XP & Avatare</div>
            <div class="feature-desc">Steige in Ligen auf, passe deinen Charakter an und sammle seltene Items.</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">👕</div>
            <div class="feature-title">4. Echte T-Shirts</div>
            <div class="feature-desc">Lass dir dein erarbeitetes Avatar-Outfit als echtes Shirt für den Sportplatz drucken.</div>
        </div>
    </div>

    <!-- PARENT & ANTI-CHEAT SPOTLIGHT -->
    <div class="spotlight-box" id="eltern">
        <div class="spotlight-col">
            <h3>🛡️ Der Schweinehund-Bonus (Für Eltern)</h3>
            <p>
                Keine Lust auf Training? Wenn sich dein Kind überwindet, schalten Eltern per App den exklusiven Überwindungs-Bonus frei. Das motiviert ohne Stress vor der Haustür!
            </p>
        </div>
        <div class="spotlight-col">
            <h3>⌚ Fairplay & Smarte Integrationen</h3>
            <p>
                Nutze Geofencing auf dem Sportplatz, Fitnessuhren (Puls & GPS) oder die Anbindung an Vereins-Apps wie <strong>SpielerPlus</strong>, um XP automatisch und fälschungssicher gutzuschreiben.
            </p>
        </div>
    </div>

</body>
</html>