Inhalt

Aktueller Ordner: /

modal2tutorial.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal-Tutorial (Version 2) – Die Trinität als notwendige Struktur einer monistischen Modalontologie</title>
    <base href="https://the-last-freedom.org/Projekt_Pompeji/">
    <style>
        /* ========== GLOBAL ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Georgia', 'Times New Roman', Times, serif;
            background-color: #f5f3ef;
            color: #2c2c2c;
            line-height: 1.7;
            padding: 2rem 1rem;
        }
        .container {
            max-width: 820px;
            margin: 0 auto;
            background-color: #fffef7;
            padding: 2rem 2.2rem;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
            border: 1px solid #e0d6c8;
        }
        h1 {
            font-size: 1.8rem;
            font-weight: normal;
            color: #2c2c2c;
            border-left: 6px solid #6b4f8a;
            padding-left: 1rem;
            margin-bottom: 0.3rem;
        }
        .subhead {
            font-size: 0.95rem;
            color: #6b6b6b;
            margin-bottom: 1.8rem;
            border-bottom: 1px solid #e0d6c8;
            padding-bottom: 0.8rem;
        }
        .subhead a {
            color: #6b4f8a;
            text-decoration: none;
        }
        .subhead a:hover {
            text-decoration: underline;
        }

        /* ========== STEP BLOCK ========== */
        .step-block {
            background-color: #faf8f3;
            border-left: 4px solid #6b4f8a;
            padding: 1.5rem 1.8rem;
            margin-bottom: 2rem;
            border-radius: 0 10px 10px 0;
        }
        .step-number {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #6b4f8a;
            font-weight: bold;
        }
        .step-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin: 0.2rem 0 0.8rem 0;
            color: #2c2c2c;
        }
        .step-explanation {
            margin-bottom: 1.2rem;
        }
        .step-explanation p {
            margin-bottom: 0.8rem;
        }
        .step-explanation ul, .step-explanation ol {
            margin: 0.5rem 0 0.8rem 1.5rem;
        }
        .step-explanation li {
            margin-bottom: 0.3rem;
        }

        /* Formula box */
        .formula-box {
            background-color: #f0ede6;
            padding: 0.8rem 1.2rem;
            border-radius: 8px;
            margin: 0.8rem 0;
            font-family: 'Courier New', monospace;
            font-size: 1.05rem;
            text-align: center;
            border: 1px solid #d4cab8;
            overflow-x: auto;
        }

        /* ========== QUESTION ========== */
        .question-box {
            background-color: #f5f0ea;
            padding: 1.2rem 1.5rem;
            border-radius: 10px;
            margin-top: 1rem;
            border: 1px solid #d4cab8;
        }
        .question-box .qtext {
            font-weight: bold;
            margin-bottom: 0.6rem;
        }
        .question-box .qoptions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem 1rem;
            margin-bottom: 0.8rem;
        }
        .question-box .qoptions label {
            display: inline-block;
            background-color: #fffef7;
            padding: 0.15rem 0.8rem;
            border-radius: 30px;
            border: 1px solid #d4cab8;
            font-size: 0.85rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .question-box .qoptions label:hover {
            background-color: #e8e2d7;
        }
        .question-box .qoptions input[type="radio"] {
            margin-right: 0.3rem;
            accent-color: #6b4f8a;
        }
        .question-box .qsubmit {
            background-color: #6b4f8a;
            color: #fffef7;
            border: none;
            padding: 0.4rem 1.6rem;
            border-radius: 30px;
            font-size: 0.85rem;
            font-family: inherit;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .question-box .qsubmit:hover {
            background-color: #4d3a63;
        }
        .question-box .qsubmit:disabled {
            background-color: #b0a89a;
            cursor: not-allowed;
        }
        .question-box .qfeedback {
            margin-top: 0.8rem;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-weight: bold;
            display: none;
        }
        .question-box .qfeedback.correct {
            display: block;
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .question-box .qfeedback.wrong {
            display: block;
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        /* ========== PROGRESS ========== */
        .progress-bar {
            background-color: #e0d6c8;
            border-radius: 20px;
            height: 8px;
            margin: 1.8rem 0 1rem 0;
            overflow: hidden;
        }
        .progress-bar .fill {
            height: 100%;
            width: 0%;
            background-color: #6b4f8a;
            border-radius: 20px;
            transition: width 0.4s ease;
        }
        .progress-text {
            text-align: right;
            font-size: 0.8rem;
            color: #8b8b8b;
            margin-top: -0.3rem;
        }

        /* ========== NAVI ========== */
        .nav-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid #e0d6c8;
        }
        .nav-links a {
            color: #6b4f8a;
            text-decoration: none;
            font-size: 0.9rem;
            padding: 0.3rem 0.8rem;
            border-radius: 30px;
            background-color: #f0ede6;
            transition: background-color 0.2s;
        }
        .nav-links a:hover:not(.disabled) {
            background-color: #d4cab8;
        }
        .nav-links .disabled {
            color: #b0a89a;
            pointer-events: none;
            background-color: #f5f3ef;
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 640px) {
            .container {
                padding: 1.2rem;
            }
            h1 {
                font-size: 1.4rem;
            }
            .step-block {
                padding: 1rem 1.2rem;
            }
            .question-box {
                padding: 1rem;
            }
            .question-box .qoptions {
                flex-direction: column;
                gap: 0.2rem;
            }
            .formula-box {
                font-size: 0.9rem;
                padding: 0.6rem 0.8rem;
            }
            .nav-links {
                flex-direction: column;
                gap: 0.6rem;
                align-items: stretch;
                text-align: center;
            }
        }

        /* ========== HELPER CLASSES ========== */
        .highlight {
            background-color: #f5f0ea;
            padding: 0.1rem 0.3rem;
            border-radius: 4px;
            font-weight: bold;
        }
        .symbol {
            font-family: 'Courier New', monospace;
            background-color: #f0ede6;
            padding: 0.05rem 0.4rem;
            border-radius: 4px;
            font-size: 0.95rem;
        }
        .boxed {
            border: 1px solid #c4a86b;
            padding: 0.3rem 0.8rem;
            border-radius: 6px;
            display: inline-block;
            background-color: #faf8f3;
            font-weight: bold;
        }
        .mt-1 { margin-top: 1rem; }
        .mb-1 { margin-bottom: 1rem; }
        .text-center { text-align: center; }
        .text-muted { color: #8b8b8b; font-size: 0.85rem; }
        .version-badge {
            display: inline-block;
            background-color: #6b4f8a;
            color: #fffef7;
            font-size: 0.65rem;
            padding: 0.15rem 0.6rem;
            border-radius: 20px;
            vertical-align: middle;
            margin-left: 0.5rem;
        }
    </style>
</head>
<body>

<div class="container" id="app">

    <!-- ===== HEADER ===== -->
    <h1>📐 Die Trinität als notwendige Struktur einer monistischen Modalontologie <span class="version-badge">Version 2 – Minimalistisch</span></h1>
    <div class="subhead">
        Ein interaktives Tutorial – Schritt für Schritt<br>
        <a href="index.html">← Zurück zur Einstiegsseite</a> |
        <a href="modal2.pdf">📄 PDF der Abhandlung</a>
    </div>

    <!-- ===== PROGRESS ===== -->
    <div class="progress-bar" id="progressBar">
        <div class="fill" id="progressFill" style="width: 0%;"></div>
    </div>
    <div class="progress-text" id="progressText">Schritt 0 von 17</div>

    <!-- ===== STEPS ===== -->
    <div id="stepContainer">
        <!-- Will be filled by JavaScript -->
    </div>

    <!-- ===== NAVIGATION ===== -->
    <div class="nav-links" id="navLinks">
        <a href="#" id="prevBtn" class="disabled">← Zurück</a>
        <span id="stepIndicator" style="font-size:0.85rem; color:#8b8b8b;">0 / 17</span>
        <a href="#" id="nextBtn">Weiter →</a>
    </div>

    <!-- ===== FOOTER ===== -->
    <div style="margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid #e0d6c8; font-size: 0.75rem; color: #8b8b8b; text-align: center;">
        <p>© Paul Koop – <a href="index.html" style="color: #6b4f8a;">the-last-freedom.org/Projekt_Pompeji</a></p>
        <p style="margin-top:0.2rem;">Diese Version der Abhandlung kommt mit nur zwei Axiomen aus – Monismus und Existenz einer Welt.</p>
    </div>

</div>

<script>
    // ================================================================
    //  DATA: All 17 steps for Version 2 (Minimalist, Limit-Based)
    // ================================================================

    const steps = [
        // ---- Step 0 ----
        {
            id: 0,
            title: "Was ist das Ziel dieser Version?",
            explanation: `
                <p>Diese Version der Abhandlung ist <strong>minimalistischer</strong> als die vorherige. Sie kommt mit nur <strong>zwei Axiomen</strong> aus:</p>
                <ol>
                    <li><strong>A1 – Monismus:</strong> Es gibt keine fundamental getrennten Wirklichkeitsbereiche.</li>
                    <li><strong>A4 – Existenz einer Welt:</strong> Es gibt mindestens eine mögliche Welt.</li>
                </ol>
                <p>Alle anderen Prinzipien (Modalrealismus, Bewusstsein, Reflexivität usw.) werden aus diesen zwei Axiomen <strong>abgeleitet</strong>.</p>
                <p>Die Begriffe <strong>U (Ursprung)</strong>, <strong>T (Totalität)</strong> und <strong>S (Selbsterkenntnis)</strong> werden nicht als Substanzen verstanden, sondern als <strong>Grenzwerte</strong> eines offenen Intervalls.</p>
                <div class="formula-box">T := (U, S) &nbsp;&nbsp;–&nbsp;&nbsp; U = lim inf T &nbsp;&nbsp;–&nbsp;&nbsp; S = lim sup T</div>
            `,
            question_html: `
                <p><strong>Worin besteht der Hauptunterschied dieser Version zur vorherigen?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q0" value="0"> Sie hat mehr Axiome.</label>
                    <label><input type="radio" name="q0" value="1"> Sie kommt mit nur zwei Axiomen aus und versteht U, T, S als Grenzwerte.</label>
                    <label><input type="radio" name="q0" value="2"> Sie beweist die Existenz Gottes.</label>
                    <label><input type="radio" name="q0" value="3"> Sie verwendet keine Modallogik.</label>
                    <label><input type="radio" name="q0" value="4"> Sie hat keine Axiome.</label>
                    <label><input type="radio" name="q0" value="5"> Sie ist länger als die vorherige Version.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 1 ----
        {
            id: 1,
            title: "Die zwei Axiome – A1: Monismus",
            explanation: `
                <p><strong>A1 – Monismus</strong> lautet:</p>
                <div class="formula-box">□¬∃x∃y FundamentalGetrennt(x,y)</div>
                <p>Das bedeutet: <strong>Es gibt keine fundamental getrennten Wirklichkeitsbereiche.</strong></p>
                <p>Warum ist das wichtig? Wenn es zwei fundamental getrennte Bereiche gäbe, könnten sie nicht aufeinander wirken. Dann gäbe es keine einheitliche Wirklichkeit.</p>
                <p>Dieses Axiom verbietet:</p>
                <ul>
                    <li>Cartesianischen Dualismus (Geist vs. Materie)</li>
                    <li>Jede Form von "Jenseits" als fundamental getrennten Bereich</li>
                    <li>Absolute Trennung zwischen Erkennendem und Erkanntem</li>
                </ul>
            `,
            question_html: `
                <p><strong>Was besagt Axiom 1 (Monismus)?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q1" value="0"> Es gibt viele fundamental getrennte Wirklichkeitsbereiche.</label>
                    <label><input type="radio" name="q1" value="1"> Es gibt keine fundamental getrennten Wirklichkeitsbereiche.</label>
                    <label><input type="radio" name="q1" value="2"> Die Wirklichkeit besteht aus drei Substanzen.</label>
                    <label><input type="radio" name="q1" value="3"> Es gibt eine Trennung zwischen Geist und Materie.</label>
                    <label><input type="radio" name="q1" value="4"> Die Wirklichkeit ist willkürlich.</label>
                    <label><input type="radio" name="q1" value="5"> Es gibt unendlich viele Welten.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 2 ----
        {
            id: 2,
            title: "Die zwei Axiome – A4: Existenz einer Welt",
            explanation: `
                <p><strong>A4 – Existenz einer Welt</strong> lautet:</p>
                <div class="formula-box">◇∃w Welt(w)</div>
                <p>Das bedeutet: <strong>Es ist möglich, dass eine Welt existiert.</strong></p>
                <p>Dieses Axiom ist bewusst <strong>schwach</strong> formuliert. Es sagt nicht, dass eine Welt tatsächlich existiert, sondern nur, dass sie <strong>möglich</strong> ist.</p>
                <p>Warum ist das wichtig? Dieses Axiom stellt sicher, dass das modale Universum nicht leer ist. Wenn es keine mögliche Welt gäbe, wäre die gesamte Ontologie leer.</p>
                <p>Aus diesem schwachen Axiom werden wir später die Existenz von Bewusstsein, Modalrealismus und schließlich die Trinität ableiten.</p>
            `,
            question_html: `
                <p><strong>Was besagt Axiom 4 (Existenz einer Welt)?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q2" value="0"> Es gibt tatsächlich eine Welt.</label>
                    <label><input type="radio" name="q2" value="1"> Es ist möglich, dass eine Welt existiert.</label>
                    <label><input type="radio" name="q2" value="2"> Es gibt keine Welt.</label>
                    <label><input type="radio" name="q2" value="3"> Es gibt unendlich viele Welten.</label>
                    <label><input type="radio" name="q2" value="4"> Die Welt ist eine Illusion.</label>
                    <label><input type="radio" name="q2" value="5"> Die Welt existiert notwendigerweise.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 3 ----
        {
            id: 3,
            title: "T als offenes Intervall – Die Totalität",
            explanation: `
                <p>Die <strong>Totalität T</strong> wird definiert als:</p>
                <div class="formula-box">T := (U, S)</div>
                <p>Das bedeutet: T ist ein <strong>offenes Intervall</strong> zwischen dem Ursprung U und der Selbsterkenntnis S.</p>
                <p><strong>Was bedeutet "offenes Intervall"?</strong></p>
                <ul>
                    <li>Es enthält alle Zustände <strong>zwischen</strong> U und S.</li>
                    <li>Es enthält <strong>weder U noch S</strong> selbst.</li>
                    <li>U und S sind die <strong>Grenzwerte</strong> (Limespunkte) des Intervalls.</li>
                </ul>
                <p><strong>Übertragen auf die Ontologie:</strong></p>
                <ul>
                    <li>Die Totalität ist die Menge aller <strong>tatsächlich realisierten</strong> Zustände.</li>
                    <li>Diese Zustände sind geordnet – von "minimaler Struktur" bis "maximaler Struktur".</li>
                    <li>Der Ursprung U ist der <strong>untere Grenzwert</strong> – das, was dem Nichts am nächsten kommt.</li>
                    <li>Die Selbsterkenntnis S ist der <strong>obere Grenzwert</strong> – die vollständige Transparenz der Totalität.</li>
                </ul>
            `,
            question_html: `
                <p><strong>Was bedeutet T := (U, S)?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q3" value="0"> T ist ein geschlossenes Intervall.</label>
                    <label><input type="radio" name="q3" value="1"> T ist ein offenes Intervall zwischen U und S.</label>
                    <label><input type="radio" name="q3" value="2"> T enthält U und S.</label>
                    <label><input type="radio" name="q3" value="3"> T ist die Menge aller unmöglichen Dinge.</label>
                    <label><input type="radio" name="q3" value="4"> T ist leer.</label>
                    <label><input type="radio" name="q3" value="5"> T ist dasselbe wie U.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 4 ----
        {
            id: 4,
            title: "U als unterer Grenzwert – Der Ursprung",
            explanation: `
                <p>Der <strong>Ursprung U</strong> wird definiert als:</p>
                <div class="formula-box">U := lim inf T</div>
                <p>Das bedeutet: U ist der <strong>untere Grenzwert</strong> der Totalität T.</p>
                <p>U ist das, was dem <strong>Nichts</strong> am nächsten kommt – aber <strong>kein Nichts</strong>.</p>
                <p>Warum ist U kein Nichts? Weil das Nichts eine <strong>fundamentale Trennung</strong> wäre – und A1 verbietet fundamentale Trennung.</p>
                <p>U ist also der <strong>minimalste existierende Zustand</strong> – der Zustand minimaler Struktur, der aber dennoch existiert.</p>
                <p><strong>Bild:</strong> Stellen Sie sich eine Zahlenlinie vor. Der Punkt 0 wäre das Nichts. Aber 0 ist nicht erlaubt (weil A1). Der <em>nächstgelegene</em> Punkt zu 0, der noch existiert, ist U – der untere Grenzwert.</p>
            `,
            question_html: `
                <p><strong>Was bedeutet U := lim inf T?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q4" value="0"> U ist der obere Grenzwert von T.</label>
                    <label><input type="radio" name="q4" value="1"> U ist der untere Grenzwert von T – das, was dem Nichts am nächsten kommt.</label>
                    <label><input type="radio" name="q4" value="2"> U ist dasselbe wie das Nichts.</label>
                    <label><input type="radio" name="q4" value="3"> U ist ein Teil von T.</label>
                    <label><input type="radio" name="q4" value="4"> U ist die Totalität selbst.</label>
                    <label><input type="radio" name="q4" value="5"> U ist die Selbsterkenntnis.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 5 ----
        {
            id: 5,
            title: "S als oberer Grenzwert – Die Selbsterkenntnis",
            explanation: `
                <p>Die <strong>Selbsterkenntnis S</strong> wird definiert als:</p>
                <div class="formula-box">S := lim sup T</div>
                <p>Das bedeutet: S ist der <strong>obere Grenzwert</strong> der Totalität T.</p>
                <p>S ist die <strong>vollständige Selbsttransparenz</strong> der Totalität – aber <strong>nicht selbst ein Teil</strong> von T.</p>
                <p>Warum gehört S nicht zu T? Wenn S zu T gehören würde, dann wäre T bereits vollständig transparent – aber dann wäre es nicht mehr offen. Die Offenheit von T ist aber die Voraussetzung für S.</p>
                <p><strong>Bild:</strong> Stellen Sie sich eine Zahlenlinie vor. Der Punkt 1 wäre die vollständige Transparenz. Aber 1 ist nicht erlaubt (weil T offen ist). Der <em>nächstgelegene</em> Punkt zu 1, der noch nicht erreicht ist, ist S – der obere Grenzwert.</p>
            `,
            question_html: `
                <p><strong>Was bedeutet S := lim sup T?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q5" value="0"> S ist der untere Grenzwert von T.</label>
                    <label><input type="radio" name="q5" value="1"> S ist der obere Grenzwert von T – die vollständige Selbsttransparenz.</label>
                    <label><input type="radio" name="q5" value="2"> S ist dasselbe wie das Nichts.</label>
                    <label><input type="radio" name="q5" value="3"> S ist ein Teil von T.</label>
                    <label><input type="radio" name="q5" value="4"> S ist die Totalität selbst.</label>
                    <label><input type="radio" name="q5" value="5"> S ist der Ursprung.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 6 ----
        {
            id: 6,
            title: "Die Trinität als Einheit der drei Grenzwerte",
            explanation: `
                <p>Die <strong>Trinität</strong> ist die Einheit der drei Grenzwerte:</p>
                <div class="formula-box">Tr := U ∧ T ∧ S</div>
                <p>Oder in der Sprache der Grenzwerte:</p>
                <div class="formula-box">Tr := lim inf T ∧ T ∧ lim sup T</div>
                <p>Das bedeutet: Die Trinität ist <strong>nicht drei Dinge</strong>, sondern <strong>drei Perspektiven auf dieselbe Wirklichkeit</strong>:</p>
                <ul>
                    <li><strong>U (Ursprung)</strong> – die Perspektive des "Woher?"</li>
                    <li><strong>T (Totalität)</strong> – die Perspektive des "Was ist?"</li>
                    <li><strong>S (Selbsterkenntnis)</strong> – die Perspektive des "Wer erkennt?"</li>
                </ul>
                <p>Die drei Grenzwerte sind <strong>eins</strong> – sie sind verschiedene Blickwinkel auf dieselbe eine Wirklichkeit.</p>
            `,
            question_html: `
                <p><strong>Was bedeutet Tr := U ∧ T ∧ S?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q6" value="0"> Tr ist wahr, wenn mindestens einer der drei Begriffe wahr ist.</label>
                    <label><input type="radio" name="q6" value="1"> Tr ist wahr, wenn alle drei Begriffe (U, T und S) gleichzeitig wahr sind.</label>
                    <label><input type="radio" name="q6" value="2"> Tr ist wahr, wenn keiner der drei Begriffe wahr ist.</label>
                    <label><input type="radio" name="q6" value="3"> Tr ist dasselbe wie U.</label>
                    <label><input type="radio" name="q6" value="4"> Tr ist dasselbe wie T.</label>
                    <label><input type="radio" name="q6" value="5"> Tr ist dasselbe wie S.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 7 ----
        {
            id: 7,
            title: "Theorem: Aus A1 folgt A3 – Kein absolutes Nichts",
            explanation: `
                <p><strong>Satz:</strong> Aus A1 (Monismus) folgt A3 (Kein absolutes Nichts).</p>
                <div class="formula-box">A1 → □(N → ¬◇Welt)</div>
                <p><strong>Beweis:</strong></p>
                <ol>
                    <li>Das absolute Nichts <strong>N</strong> wäre ein <strong>fundamental getrennter Bereich</strong> von der Wirklichkeit.</li>
                    <li><strong>A1 verbietet fundamentale Trennung.</strong></li>
                    <li>Also: Es gibt kein absolutes Nichts.</li>
                    <li>Also: <span class="symbol">□(N → ¬◇Welt)</span></li>
                </ol>
                <p><strong>Das ist wichtig, weil:</strong> Wenn es kein absolutes Nichts gibt, dann muss es <strong>etwas</strong> geben. Die Wirklichkeit ist nicht leer.</p>
            `,
            question_html: `
                <p><strong>Was folgt aus A1 (Monismus)?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q7" value="0"> Es gibt ein absolutes Nichts.</label>
                    <label><input type="radio" name="q7" value="1"> Es gibt kein absolutes Nichts.</label>
                    <label><input type="radio" name="q7" value="2"> Das Nichts kann Welten hervorbringen.</label>
                    <label><input type="radio" name="q7" value="3"> Das Nichts ist dasselbe wie die Totalität.</label>
                    <label><input type="radio" name="q7" value="4"> Das Nichts hat viele Eigenschaften.</label>
                    <label><input type="radio" name="q7" value="5"> Das Nichts ist der Ursprung.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 8 ----
        {
            id: 8,
            title: "Theorem: Aus A1 und A4 folgt A5 – Bewusstsein ist möglich",
            explanation: `
                <p><strong>Satz:</strong> Aus A1 (Monismus) und A4 (Existenz einer Welt) folgt A5 – Bewusstsein ist möglich.</p>
                <div class="formula-box">A1 ∧ A4 → ◇C</div>
                <p><strong>Beweis:</strong></p>
                <ol>
                    <li>Angenommen, es gäbe eine Welt: <span class="symbol">∃w Welt(w)</span>.</li>
                    <li>Angenommen, Bewusstsein sei unmöglich: <span class="symbol">¬◇C</span> → <span class="symbol">□¬C</span>.</li>
                    <li>Wenn es kein Bewusstsein gibt, dann ist die Welt <strong>unerkennbar</strong>.</li>
                    <li>Eine unerkennbare Welt wäre <strong>fundamental getrennt</strong> von jeder bewussten Perspektive.</li>
                    <li><strong>A1 verbietet fundamentale Trennung.</strong></li>
                    <li>Also: <span class="symbol">¬◇C</span> führt zu einem Widerspruch.</li>
                    <li>Also: <span class="symbol">◇C</span> – Bewusstsein ist möglich.</li>
                </ol>
                <p><strong>Das ist ein transzendentales Argument:</strong> Eine Welt ohne Bewusstsein wäre nicht von Nichtexistenz unterscheidbar.</p>
            `,
            question_html: `
                <p><strong>Was folgt aus A1 und A4?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q8" value="0"> Bewusstsein ist unmöglich.</label>
                    <label><input type="radio" name="q8" value="1"> Bewusstsein ist möglich.</label>
                    <label><input type="radio" name="q8" value="2"> Bewusstsein existiert notwendigerweise.</label>
                    <label><input type="radio" name="q8" value="3"> Bewusstsein ist eine Illusion.</label>
                    <label><input type="radio" name="q8" value="4"> Bewusstsein ist dasselbe wie die Totalität.</label>
                    <label><input type="radio" name="q8" value="5"> Bewusstsein ist unmöglich, weil es A1 widerspricht.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 9 ----
        {
            id: 9,
            title: "Theorem: Aus A1, A4 und A5 folgt A2 – Modalrealismus",
            explanation: `
                <p><strong>Satz:</strong> Aus A1, A4 und A5 folgt A2 – Modalrealismus.</p>
                <div class="formula-box">A1 ∧ A4 ∧ A5 → ∀p(◇p → ∃w Realisiert(w,p))</div>
                <p><strong>Beweis:</strong></p>
                <ol>
                    <li>Bewusstsein (C) ist die Fähigkeit, <strong>Unterschiede</strong> zu erfahren.</li>
                    <li>Wenn es eine <strong>unrealisierte Möglichkeit</strong> gäbe, wäre sie <strong>vom Bewusstsein nicht erfahrbar</strong>.</li>
                    <li>Eine nicht erfahrbare Möglichkeit wäre <strong>fundamental getrennt</strong> von der Welt des Bewusstseins.</li>
                    <li><strong>A1 verbietet fundamentale Trennung.</strong></li>
                    <li>Also: Es kann keine unrealisierte Möglichkeiten geben.</li>
                    <li>Also: <span class="symbol">∀p(◇p → ∃w Realisiert(w,p))</span></li>
                </ol>
                <p><strong>Das bedeutet:</strong> Jede Möglichkeit ist in irgendeiner Welt realisiert.</p>
            `,
            question_html: `
                <p><strong>Was folgt aus A1, A4 und A5?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q9" value="0"> Möglichkeiten müssen nicht realisiert werden.</label>
                    <label><input type="radio" name="q9" value="1"> Jede Möglichkeit ist in irgendeiner Welt realisiert.</label>
                    <label><input type="radio" name="q9" value="2"> Es gibt keine Möglichkeiten.</label>
                    <label><input type="radio" name="q9" value="3"> Möglichkeiten sind nur Gedanken.</label>
                    <label><input type="radio" name="q9" value="4"> Nur notwendige Möglichkeiten sind realisiert.</label>
                    <label><input type="radio" name="q9" value="5"> Möglichkeiten widersprechen dem Monismus.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 10 ----
        {
            id: 10,
            title: "Theorem: Aus A1, A4 und A5 folgt A7 – Erkenntnismöglichkeit",
            explanation: `
                <p><strong>Satz:</strong> Aus A1, A4 und A5 folgt A7 – vollständige Erkenntnis ist möglich.</p>
                <div class="formula-box">A1 ∧ A4 ∧ A5 → □(C → ◇V_T)</div>
                <p><strong>Beweis:</strong></p>
                <ol>
                    <li>Wenn Bewusstsein existiert (C), dann ist es <strong>Teil der einen Wirklichkeit</strong> (A1).</li>
                    <li>Die eine Wirklichkeit ist die <strong>Totalität T</strong>.</li>
                    <li>Wenn Bewusstsein Teil von T ist, dann <strong>kann</strong> es im Prinzip T erkennen – denn es gibt keine fundamentale Trennung (A1).</li>
                    <li>Also: <span class="symbol">C → ◇V_T</span></li>
                    <li>Mit Necessitation: <span class="symbol">□(C → ◇V_T)</span></li>
                </ol>
                <p><strong>Das bedeutet:</strong> Wenn es Bewusstsein gibt, dann ist vollständige Erkenntnis der Totalität möglich.</p>
            `,
            question_html: `
                <p><strong>Was folgt aus A1, A4 und A5 für die Erkenntnis?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q10" value="0"> Vollständige Erkenntnis ist unmöglich.</label>
                    <label><input type="radio" name="q10" value="1"> Wenn Bewusstsein existiert, dann ist vollständige Erkenntnis möglich.</label>
                    <label><input type="radio" name="q10" value="2"> Erkenntnis ist immer falsch.</label>
                    <label><input type="radio" name="q10" value="3"> Erkenntnis ist getrennt von der Wirklichkeit.</label>
                    <label><input type="radio" name="q10" value="4"> Nur Gott kann erkennen.</label>
                    <label><input type="radio" name="q10" value="5"> Erkenntnis ist unmöglich, weil sie A1 widerspricht.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 11 ----
        {
            id: 11,
            title: "Theorem: Aus A1 folgt A8 – Reflexivität des Wissens",
            explanation: `
                <p><strong>Satz:</strong> Aus A1 folgt A8 – Reflexivität vollständigen Wissens.</p>
                <div class="formula-box">A1 → □(V_T(x) → V_T(V_T(x)))</div>
                <p><strong>Beweis:</strong></p>
                <ol>
                    <li>Wenn es vollständiges Wissen über T gibt (<span class="symbol">V_T(x)</span>), dann ist dieses Wissen <strong>Teil von T</strong> (denn alles ist Teil von T, A1).</li>
                    <li>Wenn dieses Wissen Teil von T ist, dann muss es auch <strong>von sich selbst</strong> wissen – sonst wäre es nicht <strong>vollständig</strong>.</li>
                    <li>Also: <span class="symbol">V_T(x) → V_T(V_T(x))</span></li>
                    <li>Mit Necessitation: <span class="symbol">□(V_T(x) → V_T(V_T(x)))</span></li>
                </ol>
                <p><strong>Das bedeutet:</strong> Vollständiges Wissen weiß immer auch um sich selbst.</p>
            `,
            question_html: `
                <p><strong>Was besagt die Reflexivität des Wissens (A8)?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q11" value="0"> Vollständiges Wissen muss nicht wissen, dass es vollständig ist.</label>
                    <label><input type="radio" name="q11" value="1"> Vollständiges Wissen weiß auch um sich selbst.</label>
                    <label><input type="radio" name="q11" value="2"> Wissen ist immer falsch.</label>
                    <label><input type="radio" name="q11" value="3"> Wissen ist getrennt von der Wirklichkeit.</label>
                    <label><input type="radio" name="q11" value="4"> Nur Gott kann vollständiges Wissen haben.</label>
                    <label><input type="radio" name="q11" value="5"> Vollständiges Wissen ist unmöglich.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 12 ----
        {
            id: 12,
            title: "Die Annahme für die Reductio ad absurdum",
            explanation: `
                <p>Die Abhandlung verwendet eine <strong>Reductio ad absurdum</strong> – eine Beweistechnik, bei der man das Gegenteil annimmt und zeigt, dass es zu einem Widerspruch führt.</p>
                <p><strong>Die Annahme lautet:</strong></p>
                <div class="formula-box">¬Tr</div>
                <p>Das bedeutet: <strong>Die Trinität existiert nicht.</strong></p>
                <p>Da <span class="symbol">Tr := U ∧ T ∧ S</span> ist, bedeutet <span class="symbol">¬Tr</span>:</p>
                <div class="formula-box">¬U ∨ ¬T ∨ ¬S</div>
                <p>Es gibt also <strong>drei Fälle</strong>:</p>
                <ol>
                    <li><strong>Fall 1:</strong> T existiert, aber U nicht (<span class="symbol">T ∧ ¬U</span>)</li>
                    <li><strong>Fall 2:</strong> U existiert, aber S nicht (<span class="symbol">U ∧ ¬S</span>)</li>
                    <li><strong>Fall 3:</strong> S existiert, aber T nicht (<span class="symbol">S ∧ ¬T</span>)</li>
                </ol>
            `,
            question_html: `
                <p><strong>Was ist die Annahme für die Reductio ad absurdum?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q12" value="0"> Die Trinität existiert notwendigerweise.</label>
                    <label><input type="radio" name="q12" value="1"> Die Trinität existiert nicht.</label>
                    <label><input type="radio" name="q12" value="2"> Die Trinität existiert teilweise.</label>
                    <label><input type="radio" name="q12" value="3"> Die Trinität ist unmöglich.</label>
                    <label><input type="radio" name="q12" value="4"> Die Trinität ist dasselbe wie die Totalität.</label>
                    <label><input type="radio" name="q12" value="5"> Die Trinität ist eine Illusion.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 13 ----
        {
            id: 13,
            title: "Fall 1 – Totalität ohne Ursprung (T ∧ ¬U)",
            explanation: `
                <p><strong>Fall 1:</strong> <span class="symbol">T ∧ ¬U</span> – Totalität ohne Ursprung.</p>
                <p><strong>Der Widerspruch:</strong></p>
                <ol>
                    <li>T existiert. Also gibt es mindestens einen Zustand innerhalb des offenen Intervalls.</li>
                    <li>Da T ein <strong>offenes Intervall</strong> ist, hat es <strong>kein kleinstes Element</strong>.</li>
                    <li>Die Offenheit von T <strong>garantiert</strong> aber die Existenz des unteren Grenzwerts U (per Definition).</li>
                    <li>Wenn U nicht existiert (<span class="symbol">¬U</span>), dann gibt es keinen unteren Grenzwert.</li>
                    <li>Dann wäre T kein offenes Intervall mehr.</li>
                    <li><strong>Widerspruch zur Definition von T.</strong></li>
                </ol>
                <div class="formula-box">T ∧ ¬U → ⊥ &nbsp;&nbsp;→&nbsp;&nbsp; □(T → U)</div>
            `,
            question_html: `
                <p><strong>Was zeigt Fall 1 (Totalität ohne Ursprung)?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q13" value="0"> T kann ohne U existieren.</label>
                    <label><input type="radio" name="q13" value="1"> T ∧ ¬U führt zu einem Widerspruch.</label>
                    <label><input type="radio" name="q13" value="2"> U ist nicht notwendig für T.</label>
                    <label><input type="radio" name="q13" value="3"> Die Totalität kann aus dem Nichts entstehen.</label>
                    <label><input type="radio" name="q13" value="4"> T und U sind dasselbe.</label>
                    <label><input type="radio" name="q13" value="5"> T ist sein eigener Grund.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 14 ----
        {
            id: 14,
            title: "Fall 2 – Ursprung ohne Selbsterkenntnis (U ∧ ¬S)",
            explanation: `
                <p><strong>Fall 2:</strong> <span class="symbol">U ∧ ¬S</span> – Ursprung ohne Selbsterkenntnis.</p>
                <p><strong>Der Widerspruch:</strong></p>
                <ol>
                    <li>U existiert. Das bedeutet: Es gibt einen unteren Grenzwert der Totalität.</li>
                    <li>Aus den abgeleiteten Theoremen folgt: <span class="symbol">◇C</span> (Bewusstsein ist möglich).</li>
                    <li>Aus A2 (Modalrealismus) folgt: Es gibt eine Welt mit Bewusstsein.</li>
                    <li>Aus A7 folgt: In dieser Welt ist vollständige Erkenntnis möglich.</li>
                    <li>Aus A8 folgt: Vollständiges Wissen kennt sich selbst – das ist genau S.</li>
                    <li>Also: <span class="symbol">U → S</span>.</li>
                    <li><strong>Widerspruch zur Annahme</strong> <span class="symbol">¬S</span>.</li>
                </ol>
                <div class="formula-box">U ∧ ¬S → ⊥ &nbsp;&nbsp;→&nbsp;&nbsp; □(U → S)</div>
            `,
            question_html: `
                <p><strong>Was zeigt Fall 2 (Ursprung ohne Selbsterkenntnis)?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q14" value="0"> U kann ohne S existieren.</label>
                    <label><input type="radio" name="q14" value="1"> U ∧ ¬S führt zu einem Widerspruch.</label>
                    <label><input type="radio" name="q14" value="2"> S ist nicht notwendig für U.</label>
                    <label><input type="radio" name="q14" value="3"> Bewusstsein ist unmöglich.</label>
                    <label><input type="radio" name="q14" value="4"> Vollständige Erkenntnis ist unmöglich.</label>
                    <label><input type="radio" name="q14" value="5"> U und S sind dasselbe.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 15 ----
        {
            id: 15,
            title: "Fall 3 – Selbsterkenntnis ohne Totalität (S ∧ ¬T)",
            explanation: `
                <p><strong>Fall 3:</strong> <span class="symbol">S ∧ ¬T</span> – Selbsterkenntnis ohne Totalität.</p>
                <p><strong>Der Widerspruch:</strong></p>
                <ol>
                    <li>S existiert. S ist definiert als "vollständige Selbsterkenntnis der Totalität".</li>
                    <li>Wenn S existiert, gibt es einen <strong>Erkenntnisakt</strong>, der auf T gerichtet ist.</li>
                    <li>Wenn T nicht existiert (<span class="symbol">¬T</span>), dann ist S eine <strong>Erkenntnis ohne Objekt</strong>.</li>
                    <li>Aus A9 (abgeleitet) folgt: <span class="symbol">V_T(x) → T</span> – Wissen über T setzt T voraus.</li>
                    <li>Also: <span class="symbol">S → T</span>.</li>
                    <li><strong>Widerspruch zur Annahme</strong> <span class="symbol">¬T</span>.</li>
                </ol>
                <div class="formula-box">S ∧ ¬T → ⊥ &nbsp;&nbsp;→&nbsp;&nbsp; □(S → T)</div>
            `,
            question_html: `
                <p><strong>Was zeigt Fall 3 (Selbsterkenntnis ohne Totalität)?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q15" value="0"> S kann ohne T existieren.</label>
                    <label><input type="radio" name="q15" value="1"> S ∧ ¬T führt zu einem Widerspruch.</label>
                    <label><input type="radio" name="q15" value="2"> T ist nicht notwendig für S.</label>
                    <label><input type="radio" name="q15" value="3"> S ist eine leere Erkenntnis.</label>
                    <label><input type="radio" name="q15" value="4"> S und T sind dasselbe.</label>
                    <label><input type="radio" name="q15" value="5"> Axiom 1 ist falsch.</label>
                </div>
            `,
            answer: 1
        },
        // ---- Step 16 ----
        {
            id: 16,
            title: "Der synthetische Schluss – Die Trinität folgt notwendig",
            explanation: `
                <p>Die Abhandlung hat <strong>alle drei Fälle</strong> widerlegt:</p>
                <ul>
                    <li><strong>Fall 1:</strong> <span class="symbol">T ∧ ¬U → ⊥</span> → <span class="boxed">□(T → U)</span></li>
                    <li><strong>Fall 2:</strong> <span class="symbol">U ∧ ¬S → ⊥</span> → <span class="boxed">□(U → S)</span></li>
                    <li><strong>Fall 3:</strong> <span class="symbol">S ∧ ¬T → ⊥</span> → <span class="boxed">□(S → T)</span></li>
                </ul>
                <p>Das ergibt einen Kreis:</p>
                <div class="formula-box">T → U → S → T</div>
                <p>In S5 folgt daraus die Äquivalenz:</p>
                <div class="formula-box">□(U ↔ T) ∧ □(T ↔ S) ∧ □(S ↔ U)</div>
                <p>Mit A4 (Existenz einer Welt) und der Definition von T folgt:</p>
                <div class="formula-box">∃T → ∃U ∧ ∃S</div>
                <p>Also:</p>
                <div class="formula-box" style="font-size:1.2rem; background-color:#d4edda; border-color:#6b4f8a;">□(U ∧ T ∧ S)</div>
                <p style="font-weight:bold; color:#6b4f8a;">Die Trinität existiert notwendigerweise.</p>
            `,
            question_html: `
                <p><strong>Was folgt aus den drei Fällen zusammen mit A4?</strong></p>
                <div class="qoptions">
                    <label><input type="radio" name="q16" value="0"> Die Trinität ist unmöglich.</label>
                    <label><input type="radio" name="q16" value="1"> Die Trinität existiert notwendigerweise.</label>
                    <label><input type="radio" name="q16" value="2"> Die Trinität existiert nur in Gedanken.</label>
                    <label><input type="radio" name="q16" value="3"> Die Trinität existiert teilweise.</label>
                    <label><input type="radio" name="q16" value="4"> Die Trinität ist dasselbe wie die Totalität.</label>
                    <label><input type="radio" name="q16" value="5"> Die Trinität ist eine Illusion.</label>
                </div>
            `,
            answer: 1
        }
    ];

    // ================================================================
    //  LOGIC
    // ================================================================

    let currentStep = 0;
    const totalSteps = steps.length;
    const stepContainer = document.getElementById('stepContainer');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const stepIndicator = document.getElementById('stepIndicator');
    const progressFill = document.getElementById('progressFill');
    const progressText = document.getElementById('progressText');

    let stepCompleted = new Array(totalSteps).fill(false);

    // --------------------------------------------------------------
    //  Render step
    // --------------------------------------------------------------
    function renderStep(index) {
        const step = steps[index];
        if (!step) return;

        let html = `
            <div class="step-block">
                <div class="step-number">Schritt ${index} von ${totalSteps-1}</div>
                <div class="step-title">${step.title}</div>
                <div class="step-explanation">${step.explanation}</div>
                <div class="question-box" id="questionBox${index}">
                    ${step.question_html}
                    <button class="qsubmit" data-step="${index}">Antwort prüfen</button>
                    <div class="qfeedback" id="feedback${index}"></div>
                </div>
            </div>
        `;

        stepContainer.innerHTML = html;

        const submitBtn = document.querySelector(`.qsubmit[data-step="${index}"]`);
        if (submitBtn) {
            submitBtn.addEventListener('click', function(e) {
                checkAnswer(index);
            });
        }

        const questionBox = document.getElementById(`questionBox${index}`);
        if (questionBox) {
            const radioInputs = questionBox.querySelectorAll('input[type="radio"]');
            radioInputs.forEach(input => {
                input.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        checkAnswer(index);
                    }
                });
            });
        }

        updateNav(index);
        updateProgress(index);

        if (stepCompleted[index]) {
            const feedback = document.getElementById(`feedback${index}`);
            if (feedback) {
                feedback.className = 'qfeedback correct';
                feedback.textContent = '✅ Richtig! Sie haben diesen Schritt bereits abgeschlossen.';
                feedback.style.display = 'block';
            }
            const submitBtn2 = document.querySelector(`.qsubmit[data-step="${index}"]`);
            if (submitBtn2) submitBtn2.disabled = true;
        }

        document.querySelector('.step-block').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    // --------------------------------------------------------------
    //  Check answer
    // --------------------------------------------------------------
    function checkAnswer(index) {
        if (stepCompleted[index]) return;

        const step = steps[index];
        const questionBox = document.getElementById(`questionBox${index}`);
        const feedback = document.getElementById(`feedback${index}`);

        const selected = questionBox.querySelector('input[type="radio"]:checked');
        if (!selected) {
            feedback.className = 'qfeedback wrong';
            feedback.textContent = '❌ Bitte wählen Sie eine Antwort aus.';
            feedback.style.display = 'block';
            return;
        }

        const userAnswer = parseInt(selected.value);
        const isCorrect = (userAnswer === step.answer);

        if (isCorrect) {
            feedback.className = 'qfeedback correct';
            feedback.textContent = '✅ Richtig! Sie können zum nächsten Schritt gehen.';
            feedback.style.display = 'block';
            stepCompleted[index] = true;

            const submitBtn = questionBox.querySelector('.qsubmit');
            if (submitBtn) submitBtn.disabled = true;

            const radios = questionBox.querySelectorAll('input[type="radio"]');
            radios.forEach(r => r.disabled = true);

            updateNav(index);
            updateProgress(index);

            if (stepCompleted.every(v => v === true)) {
                setTimeout(() => {
                    alert('🎉 Herzlichen Glückwunsch! Sie haben das gesamte Tutorial erfolgreich abgeschlossen!');
                }, 400);
            }

        } else {
            feedback.className = 'qfeedback wrong';
            feedback.textContent = '❌ Falsch. Bitte lesen Sie den Schritt noch einmal und versuchen Sie es erneut.';
            feedback.style.display = 'block';
        }
    }

    // --------------------------------------------------------------
    //  Navigation
    // --------------------------------------------------------------
    function updateNav(index) {
        if (index > 0) {
            prevBtn.className = '';
            prevBtn.style.pointerEvents = 'auto';
            prevBtn.style.opacity = '1';
        } else {
            prevBtn.className = 'disabled';
            prevBtn.style.pointerEvents = 'none';
            prevBtn.style.opacity = '0.5';
        }

        if (index < totalSteps - 1 && stepCompleted[index]) {
            nextBtn.className = '';
            nextBtn.style.pointerEvents = 'auto';
            nextBtn.style.opacity = '1';
            nextBtn.textContent = 'Weiter →';
        } else if (index === totalSteps - 1 && stepCompleted[index]) {
            nextBtn.className = '';
            nextBtn.style.pointerEvents = 'auto';
            nextBtn.style.opacity = '1';
            nextBtn.textContent = '🎉 Fertig – zurück zur Einstiegsseite';
            nextBtn.href = 'index.html';
        } else {
            nextBtn.className = 'disabled';
            nextBtn.style.pointerEvents = 'none';
            nextBtn.style.opacity = '0.5';
            if (index === totalSteps - 1) {
                nextBtn.textContent = '🎉 Abschluss – alle Schritte abschließen';
            } else {
                nextBtn.textContent = 'Weiter → (bitte zuerst die Frage beantworten)';
            }
        }

        stepIndicator.textContent = `${index} / ${totalSteps-1}`;
    }

    // --------------------------------------------------------------
    //  Progress
    // --------------------------------------------------------------
    function updateProgress(index) {
        const completedCount = stepCompleted.filter(v => v === true).length;
        const percent = (completedCount / totalSteps) * 100;
        progressFill.style.width = `${percent}%`;
        progressText.textContent = `Schritt ${index} von ${totalSteps-1} – ${completedCount}/${totalSteps} abgeschlossen`;
    }

    // --------------------------------------------------------------
    //  Event listeners
    // --------------------------------------------------------------
    prevBtn.addEventListener('click', function(e) {
        e.preventDefault();
        if (currentStep > 0) {
            currentStep--;
            renderStep(currentStep);
        }
    });

    nextBtn.addEventListener('click', function(e) {
        e.preventDefault();
        if (currentStep < totalSteps - 1 && stepCompleted[currentStep]) {
            currentStep++;
            renderStep(currentStep);
        } else if (currentStep === totalSteps - 1 && stepCompleted[currentStep]) {
            window.location.href = 'index.html';
        }
    });

    // --------------------------------------------------------------
    //  Init
    // --------------------------------------------------------------
    renderStep(0);
</script>

</body>
</html>