<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SNP Consulting - Negative Stakes Preview</title>
    <style>
        :root {
            --primary-gold: #c5a059;
            --bg-dark: #0b1120;
            --bg-accent: #111827; /* Leicht helleres Dunkelblau für Abhebung */
            --text-white: #ffffff;
            --text-gray: #9ca3af;
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-white);
            line-height: 1.6;
        }

        .stakes-section {
            padding: 80px 5%;
            background-color: var(--bg-accent);
            text-align: center;
        }

        .section-header {
            max-width: 800px;
            margin: 0 auto 60px auto;
        }

        .section-header h2 {
            font-size: 36px;
            color: var(--primary-gold);
            text-transform: uppercase;
            margin-bottom: 20px;
            letter-spacing: 1px;
        }

        .section-header p {
            font-size: 18px;
            color: var(--text-gray);
            font-style: italic;
        }

        .stakes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .stake-item {
            background: rgba(255, 255, 255, 0.03);
            padding: 30px;
            border-radius: 12px;
            transition: transform 0.3s ease;
            text-align: left;
            border-left: 3px solid transparent;
        }

        .stake-item:hover {
            transform: translateY(-5px);
            border-left: 3px solid var(--primary-gold);
            background: rgba(255, 255, 255, 0.05);
        }

        .icon {
            font-size: 40px;
            margin-bottom: 20px;
            display: block;
        }

        .stake-item h3 {
            font-size: 20px;
            color: var(--primary-gold);
            margin-bottom: 15px;
        }

        .stake-item p {
            font-size: 16px;
            color: var(--text-gray);
            margin: 0;
        }

        .highlight {
            color: var(--text-white);
            font-weight: bold;
        }

        /* Footer-Hinweis für die "Spirale" */
        .stakes-footer {
            margin-top: 50px;
            font-size: 14px;
            color: var(--primary-gold);
            opacity: 0.8;
        }
    </style>
</head>
<body>

    <section class="stakes-section">
        <div class="section-header">
            <h2>Hast du auch das Gefühl, dass du weit unter deinen Möglichkeiten bleibst?</h2>
            <p>Wenn wir uns nie die Zeit für echte Selbstreflexion nehmen, riskieren wir mehr als nur Stress – wir riskieren ein Leben, das nicht unser eigenes ist.</p>
        </div>

        <div class="stakes-grid">
            <div class="stake-item">
                <span class="icon">🏔️</span>
                <h3>Das „Unsichtbare“ Potenzial</h3>
                <p>Du spürst genau, dass <span class="highlight">viel mehr in dir steckt</span>, aber die Welt sieht weiterhin nur die <span class="highlight">Oberfläche</span>.</p>
            </div>

            <div class="stake-item">
                <span class="icon">🌀</span>
                <h3>Die alte Abwärtsspirale</h3>
                <p>Ohne einen Moment des Innehaltens drehst du dich immer wieder <span class="highlight">im Kreis</span> und wiederholst die <span class="highlight">gleichen Fehler</span>.</p>
            </div>

            <div class="stake-item">
                <span class="icon">🎭</span>
                <h3>Fremdbestimmt statt Selbstverantwortlich</h3>
                <p>Du reagierst nur noch auf die <span class="highlight">Erwartungen anderer</span>, während deine eigenen Werte und Visionen langsam <span class="highlight">verblassen</span>.</p>
            </div>

            <div class="stake-item">
                <span class="icon">🪫</span>
                <h3>Einfluss ohne Wirkung</h3>
                <p>Egal wie hart du arbeitest – ohne Klarheit über dein Wirken <span class="highlight">verpufft deine Energie</span>, ohne etwas zu bewegen.</p>
            </div>

            <div class="stake-item">
                <span class="icon">⏳</span>
                <h3>Das Risiko des „Ewig Gleichen“</h3>
                <p>In fünf Jahren wirst du genau an <span class="highlight">demselben Punkt stehen</span> wie heute, wenn du den Mut zur Selbstanalyse nicht aufbringst.</p>
            </div>
        </div>

        <div class="stakes-footer">
            * Der erste Schritt aus der Spirale beginnt mit der richtigen Analyse.
        </div>
    </section>

</body>
</html>