middle step

00_aMeta/toolz/CYOA/frontend/dom_rendering.js

@@ -0,0 +1,173 @@
+// engine_ui.js - Reines DOM-Handling und visuelle Logik
+const EngineUI = {
+    audioCtx: null,
+
+    init: function() {
+        this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        
+        const rawData = document.getElementById("story-data").textContent.trim();
+        EngineLogic.init(rawData);
+
+        this.attachEvents();
+        this.renderNode(EngineLogic.state.node);
+    },
+
+    playBeep: function(freq = 440, type = "square", duration = 0.05) {
+        try {
+            if(!this.audioCtx) return;
+            const osc = this.audioCtx.createOscillator();
+            const gain = this.audioCtx.createGain();
+            osc.type = type;
+            osc.frequency.setValueAtTime(freq, this.audioCtx.currentTime);
+            gain.gain.setValueAtTime(0.05, this.audioCtx.currentTime);
+            gain.gain.exponentialRampToValueAtTime(0.001, this.audioCtx.currentTime + duration);
+            osc.connect(gain); gain.connect(this.audioCtx.destination);
+            osc.start(); osc.stop(this.audioCtx.currentTime + duration);
+        } catch(e) {}
+    },
+
+    renderHUD: function() {
+        const hud = document.getElementById("hud-dynamic");
+        hud.innerHTML = "";
+        
+        hud.innerHTML += `<div class="stat-item">REBOOTS: <span style="color:var(--term-cyan)">#${String(EngineLogic.state.reboots).padStart(3, "0")}</span></div>`;
+        hud.innerHTML += `<div class="stat-item">KNOTEN: <span style="color:var(--term-amber)">${EngineLogic.state.node}</span></div>`;
+
+        Object.keys(EngineLogic.state).forEach(key => {
+            if(key !== "reboots" && key !== "node") {
+                hud.innerHTML += `<div class="stat-item">${key.toUpperCase()}: <span style="color:var(--term-green)">${EngineLogic.state[key]}</span></div>`;
+            }
+        });
+    },
+
+    renderNode: function(id) {
+        const node = EngineLogic.processNodeEntry(id);
+        if (!node) return;
+
+        this.playBeep(600, "sine", 0.04);
+        if (node.isReboot) this.playBeep(200, "sawtooth", 0.3);
+        
+        this.renderHUD();
+
+        document.getElementById("node-title").innerText = "=== " + node.title + " ===";
+        document.getElementById("node-body").innerHTML = node.content;
+
+        const choicesBox = document.getElementById("choices-box");
+        choicesBox.innerHTML = "";
+
+        if (node.choices && node.choices.length > 0) {
+            let visibleIndex = 1;
+            node.choices.forEach((choice) => {
+                const parsed = EngineLogic.parseRequirement(choice.text);
+                const btn = document.createElement("button");
+                btn.className = "choice-btn";
+                
+                if (parsed.meetsCondition) {
+                    btn.innerHTML = `<span class="choice-key">[${visibleIndex}]</span> ${parsed.displayText}`;
+                    btn.dataset.target = choice.targetId;
+                    btn.dataset.index = visibleIndex;
+                    btn.onclick = () => this.renderNode(choice.targetId);
+                    visibleIndex++;
+                } else {
+                    btn.innerHTML = `<span class="choice-key">[LOCKED]</span> ${parsed.displayText} <span style="color:var(--term-warn); font-size:0.8rem; margin-left:auto;">${parsed.missingReq}</span>`;
+                    btn.disabled = true;
+                }
+                choicesBox.appendChild(btn);
+            });
+        } else {
+            const btn = document.createElement("button");
+            btn.className = "choice-btn";
+            btn.style.borderColor = "var(--term-amber)";
+            btn.style.color = "var(--term-amber)";
+            btn.innerHTML = "<span class=\"choice-key\">[R]</span> Speicherabbild sichern und rebooten...";
+            btn.onclick = () => this.triggerReboot();
+            choicesBox.appendChild(btn);
+        }
+        document.getElementById("terminal-viewport").scrollTop = 0;
+    },
+
+    triggerReboot: function() {
+        const startId = EngineLogic.triggerReboot();
+        if (startId) this.renderNode(startId);
+    },
+
+    toggleGraph: function() {
+        const modal = document.getElementById("graph-modal");
+        if (modal.style.display === "flex") {
+            modal.style.display = "none";
+        } else {
+            modal.style.display = "flex";
+            this.drawGraphCanvas();
+        }
+    },
+
+    drawGraphCanvas: function() {
+        const canvas = document.getElementById("graph-canvas");
+        canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = "#000"; ctx.fillRect(0, 0, canvas.width, canvas.height);
+        
+        const keys = Object.keys(EngineLogic.storyData.nodes || {});
+        if (keys.length === 0) return;
+
+        const total = keys.length; const radius = Math.min(canvas.width, canvas.height) * 0.38;
+        const centerX = canvas.width / 2; const centerY = canvas.height / 2;
+        const nodeRadius = 8; const positions = {};
+
+        keys.forEach((key, idx) => {
+            const angle = (idx / total) * 2 * Math.PI;
+            positions[key] = { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) };
+        });
+
+        ctx.lineWidth = 1;
+        keys.forEach(key => {
+            const node = EngineLogic.storyData.nodes[key];
+            if (node && node.choices) {
+                node.choices.forEach(c => {
+                    if (positions[c.targetId]) {
+                        const start = positions[key], end = positions[c.targetId];
+                        ctx.beginPath(); ctx.strokeStyle = "rgba(51, 255, 102, 0.4)";
+                        ctx.moveTo(start.x, start.y); ctx.lineTo(end.x, end.y); ctx.stroke();
+                        const dx = end.x - start.x, dy = end.y - start.y, angle = Math.atan2(dy, dx), headlen = 12;
+                        const tipX = end.x - Math.cos(angle) * (nodeRadius + 2), tipY = end.y - Math.sin(angle) * (nodeRadius + 2);
+                        ctx.beginPath(); ctx.moveTo(tipX, tipY);
+                        ctx.lineTo(tipX - headlen * Math.cos(angle - Math.PI / 7), tipY - headlen * Math.sin(angle - Math.PI / 7));
+                        ctx.lineTo(tipX - headlen * Math.cos(angle + Math.PI / 7), tipY - headlen * Math.sin(angle + Math.PI / 7));
+                        ctx.closePath(); ctx.fillStyle = "rgba(51, 255, 102, 0.9)"; ctx.fill();
+                    }
+                });
+            }
+        });
+
+        keys.forEach(key => {
+            const pos = positions[key];
+            ctx.beginPath(); ctx.arc(pos.x, pos.y, nodeRadius, 0, 2 * Math.PI);
+            if (key === EngineLogic.state.node) ctx.fillStyle = "#00ffff"; 
+            else if (key === EngineLogic.storyData.startNodeId) ctx.fillStyle = "#ffb000";
+            else ctx.fillStyle = "#116633";
+            ctx.fill(); ctx.strokeStyle = "#33ff66"; ctx.stroke();
+            ctx.fillStyle = "#fff"; ctx.font = "11px monospace";
+            const textAngle = Math.atan2(pos.y - centerY, pos.x - centerX);
+            ctx.fillText(key, pos.x + Math.cos(textAngle) * 15 - 10, pos.y + Math.sin(textAngle) * 15 + 4);
+        });
+    },
+
+    attachEvents: function() {
+        window.addEventListener("keydown", (e) => {
+            if (document.getElementById("graph-modal").style.display === "flex") {
+                if (e.key.toLowerCase() === "g" || e.key === "Escape") this.toggleGraph();
+                return;
+            }
+            if (e.key >= "1" && e.key <= "9") {
+                const btn = document.querySelector(`.choice-btn[data-index="${e.key}"]`);
+                if (btn && !btn.disabled) this.renderNode(btn.dataset.target);
+            } else if (e.key.toLowerCase() === "r") {
+                this.triggerReboot();
+            } else if (e.key.toLowerCase() === "g") {
+                this.toggleGraph();
+            }
+        });
+    }
+};
+
+window.onload = () => EngineUI.init();

00_aMeta/toolz/CYOA/frontend/engine_ui.js

@@ -0,0 +1,75 @@
+// engine_logic.js - Reine State- und Datenverarbeitung
+const EngineLogic = {
+    storyData: { nodes: {} },
+    state: { reboots: 1, node: "" },
+
+    init: function(rawJsonData) {
+        try {
+            if (!rawJsonData || rawJsonData.trim() === "") throw "Leer";
+            this.storyData = JSON.parse(rawJsonData);
+        } catch(e) {
+            console.warn("[System] Go-Engine Offline. Fallback Modus geladen.");
+            this.storyData = {
+                startNodeId: "err",
+                nodes: {
+                    "err": {
+                        id: "err", title: "SYSTEM OFFLINE", 
+                        content: "<p>Konnte <code>[story-data]</code> nicht parsen. Go-Server läuft nicht.</p>",
+                        choices: []
+                    }
+                }
+            };
+        }
+        this.state.node = this.storyData.startNodeId || Object.keys(this.storyData.nodes)[0] || "";
+    },
+
+    getNode: function(id) {
+        return this.storyData.nodes[id];
+    },
+
+    processNodeEntry: function(id) {
+        const node = this.getNode(id);
+        if (!node) return null;
+
+        this.state.node = id;
+
+        // Metadaten anwenden (z.B. [meta: schild=80])
+        if (node.metadata) {
+            Object.keys(node.metadata).forEach(key => {
+                this.state[key] = node.metadata[key];
+            });
+        }
+
+        // Reboot Erkennung
+        if (node.isReboot) {
+            this.state.reboots++;
+        }
+
+        return node;
+    },
+
+    parseRequirement: function(choiceText) {
+        let conditionMatch = choiceText.match(/\[req:\s*([a-zA-Z0-9_]+)\s*=\s*([^\]]+)\]/i);
+        let displayText = choiceText;
+        let meetsCondition = true;
+        let missingReq = "";
+
+        if (conditionMatch) {
+            let reqKey = conditionMatch[1].toLowerCase();
+            let reqVal = conditionMatch[2];
+            if (String(this.state[reqKey]) !== String(reqVal)) {
+                meetsCondition = false;
+                missingReq = `(Benötigt: ${reqKey}=${reqVal})`;
+            }
+            displayText = displayText.replace(conditionMatch[0], "").trim();
+        }
+
+        return { displayText, meetsCondition, missingReq };
+    },
+
+    triggerReboot: function() {
+        const currentReboots = this.state.reboots + 1;
+        this.state = { reboots: currentReboots }; // Resets inventory/state
+        return this.storyData.startNodeId;
+    }
+};

00_aMeta/toolz/CYOA/frontend/style.css

@@ -0,0 +1,69 @@
+:root {
+    --bg-color: #050b08;
+    --term-green: #33ff66;
+    --term-dim: #116633;
+    --term-cyan: #00ffff;
+    --term-warn: #ff3333;
+    --term-amber: #ffb000;
+    --font-stack: 'Courier New', Courier, monospace;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    background-color: var(--bg-color); color: var(--term-green);
+    font-family: var(--font-stack); height: 100vh; display: flex;
+    flex-direction: column; overflow: hidden; text-shadow: 0 0 4px rgba(51, 255, 102, 0.6);
+}
+
+body::before {
+    content: " "; display: block; position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+    z-index: 10; background-size: 100% 3px, 3px 100%; pointer-events: none;
+}
+
+header { background: #111; border-bottom: 2px solid var(--term-green); padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
+.sys-title { color: var(--term-cyan); font-weight: bold; letter-spacing: 1px; }
+
+.hud-stats { display: flex; gap: 15px; font-size: 0.85rem; flex-wrap: wrap; }
+.stat-item { border: 1px solid var(--term-dim); padding: 2px 8px; background: rgba(0, 20, 10, 0.5); }
+
+main { flex: 1; display: flex; flex-direction: column; padding: 20px; max-width: 900px; margin: 0 auto; width: 100%; overflow-y: auto; position: relative; z-index: 1; }
+.node-card { border: 1px solid var(--term-dim); background: rgba(5, 15, 10, 0.85); padding: 20px; margin-bottom: 20px; box-shadow: 0 0 15px rgba(0, 255, 102, 0.1); }
+.node-title { font-size: 1.3rem; color: var(--term-cyan); border-bottom: 1px dashed var(--term-dim); padding-bottom: 8px; margin-bottom: 15px; text-transform: uppercase; }
+
+/* ASCIIDOCTOR HTML STYLING */
+.node-body { line-height: 1.6; font-size: 1rem; margin-bottom: 20px; }
+.node-body p { margin-bottom: 15px; }
+.node-body strong, .node-body b { color: var(--term-cyan); font-weight: normal; text-shadow: 0 0 5px rgba(0, 255, 255, 0.4); }
+.node-body em, .node-body i { color: var(--term-amber); font-style: italic; }
+.node-body ul, .node-body ol { margin-left: 25px; margin-bottom: 15px; list-style-type: square; }
+.node-body li { margin-bottom: 5px; }
+.node-body h1, .node-body h2, .node-body h3, .node-body h4 { color: var(--term-cyan); margin: 20px 0 10px 0; border-bottom: 1px solid var(--term-dim); padding-bottom: 5px; }
+.node-body code { background: rgba(0, 255, 102, 0.1); padding: 2px 5px; border-radius: 3px; font-family: var(--font-stack); }
+.node-body pre { background: rgba(0, 20, 10, 0.8); border-left: 3px solid var(--term-dim); padding: 10px; overflow-x: auto; margin-bottom: 15px; }
+.node-body table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
+.node-body th, .node-body td { border: 1px solid var(--term-dim); padding: 8px; text-align: left; }
+.node-body th { background: rgba(0, 255, 102, 0.1); color: var(--term-cyan); }
+
+.choices-container { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
+.choice-btn {
+    background: rgba(0, 30, 15, 0.6); border: 1px solid var(--term-green);
+    color: var(--term-green); padding: 12px 16px; font-family: var(--font-stack);
+    font-size: 0.95rem; text-align: left; cursor: pointer;
+    transition: all 0.15s ease; display: flex; align-items: center; gap: 10px;
+}
+.choice-btn:hover:not(:disabled) { background: var(--term-green); color: var(--bg-color); box-shadow: 0 0 10px var(--term-green); outline: none; }
+.choice-btn:disabled { border-color: var(--term-warn); color: var(--term-warn); cursor: not-allowed; opacity: 0.6; }
+
+.choice-key { background: var(--term-dim); color: var(--term-green); padding: 2px 6px; font-size: 0.8rem; border-radius: 2px; }
+.choice-btn:hover:not(:disabled) .choice-key { background: var(--bg-color); color: var(--term-green); }
+.choice-btn:disabled .choice-key { background: rgba(255, 51, 51, 0.2); color: var(--term-warn); }
+
+footer { border-top: 1px solid var(--term-dim); padding: 10px 20px; display: flex; justify-content: space-between; background: #080f0c; font-size: 0.8rem; z-index: 2; }
+.btn-small { background: transparent; border: 1px solid var(--term-dim); color: var(--term-green); padding: 4px 10px; cursor: pointer; font-family: var(--font-stack); }
+.btn-small:hover { border-color: var(--term-cyan); color: var(--term-cyan); }
+
+#graph-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 11, 8, 0.95); z-index: 20; padding: 20px; flex-direction: column; }
+#graph-canvas { flex: 1; border: 1px solid var(--term-green); background: #000; }

00_aMeta/toolz/CYOA/frontend/template.html

@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Computer Historyz :: Interactive Terminal Engine</title>
+    <!-- Eigenständiges Styling (Kapselung in der Master-Datei für fehlerfreies Preview) -->
+    <style>
+        :root {
+            --bg-color: #050b08;
+            --term-green: #33ff66;
+            --term-dim: #116633;
+            --term-cyan: #00ffff;
+            --term-warn: #ff3333;
+            --term-amber: #ffb000;
+            --font-stack: 'Courier New', Courier, monospace;
+        }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        body {
+            background-color: var(--bg-color); color: var(--term-green);
+            font-family: var(--font-stack); height: 100vh; display: flex;
+            flex-direction: column; overflow: hidden; text-shadow: 0 0 4px rgba(51, 255, 102, 0.6);
+        }
+
+        body::before {
+            content: " "; display: block; position: absolute;
+            top: 0; left: 0; bottom: 0; right: 0;
+            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+            z-index: 10; background-size: 100% 3px, 3px 100%; pointer-events: none;
+        }
+
+        header { background: #111; border-bottom: 2px solid var(--term-green); padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
+        .sys-title { color: var(--term-cyan); font-weight: bold; letter-spacing: 1px; }
+
+        .hud-stats { display: flex; gap: 15px; font-size: 0.85rem; flex-wrap: wrap; }
+        .stat-item { border: 1px solid var(--term-dim); padding: 2px 8px; background: rgba(0, 20, 10, 0.5); }
+
+        main { flex: 1; display: flex; flex-direction: column; padding: 20px; max-width: 900px; margin: 0 auto; width: 100%; overflow-y: auto; position: relative; z-index: 1; }
+        .node-card { border: 1px solid var(--term-dim); background: rgba(5, 15, 10, 0.85); padding: 20px; margin-bottom: 20px; box-shadow: 0 0 15px rgba(0, 255, 102, 0.1); }
+        .node-title { font-size: 1.3rem; color: var(--term-cyan); border-bottom: 1px dashed var(--term-dim); padding-bottom: 8px; margin-bottom: 15px; text-transform: uppercase; }
+
+        /* ASCIIDOCTOR HTML STYLING */
+        .node-body { line-height: 1.6; font-size: 1rem; margin-bottom: 20px; }
+        .node-body p { margin-bottom: 15px; }
+        .node-body strong, .node-body b { color: var(--term-cyan); font-weight: normal; text-shadow: 0 0 5px rgba(0, 255, 255, 0.4); }
+        .node-body em, .node-body i { color: var(--term-amber); font-style: italic; }
+        .node-body ul, .node-body ol { margin-left: 25px; margin-bottom: 15px; list-style-type: square; }
+        .node-body li { margin-bottom: 5px; }
+        .node-body h1, .node-body h2, .node-body h3, .node-body h4 { color: var(--term-cyan); margin: 20px 0 10px 0; border-bottom: 1px solid var(--term-dim); padding-bottom: 5px; }
+        .node-body code { background: rgba(0, 255, 102, 0.1); padding: 2px 5px; border-radius: 3px; font-family: var(--font-stack); }
+        .node-body pre { background: rgba(0, 20, 10, 0.8); border-left: 3px solid var(--term-dim); padding: 10px; overflow-x: auto; margin-bottom: 15px; }
+        .node-body table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
+        .node-body th, .node-body td { border: 1px solid var(--term-dim); padding: 8px; text-align: left; }
+        .node-body th { background: rgba(0, 255, 102, 0.1); color: var(--term-cyan); }
+
+        .choices-container { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
+        .choice-btn {
+            background: rgba(0, 30, 15, 0.6); border: 1px solid var(--term-green);
+            color: var(--term-green); padding: 12px 16px; font-family: var(--font-stack);
+            font-size: 0.95rem; text-align: left; cursor: pointer;
+            transition: all 0.15s ease; display: flex; align-items: center; gap: 10px;
+        }
+        .choice-btn:hover:not(:disabled) { background: var(--term-green); color: var(--bg-color); box-shadow: 0 0 10px var(--term-green); outline: none; }
+        .choice-btn:disabled { border-color: var(--term-warn); color: var(--term-warn); cursor: not-allowed; opacity: 0.6; }
+
+        .choice-key { background: var(--term-dim); color: var(--term-green); padding: 2px 6px; font-size: 0.8rem; border-radius: 2px; }
+        .choice-btn:hover:not(:disabled) .choice-key { background: var(--bg-color); color: var(--term-green); }
+        .choice-btn:disabled .choice-key { background: rgba(255, 51, 51, 0.2); color: var(--term-warn); }
+
+        footer { border-top: 1px solid var(--term-dim); padding: 10px 20px; display: flex; justify-content: space-between; background: #080f0c; font-size: 0.8rem; z-index: 2; }
+        .btn-small { background: transparent; border: 1px solid var(--term-dim); color: var(--term-green); padding: 4px 10px; cursor: pointer; font-family: var(--font-stack); }
+        .btn-small:hover { border-color: var(--term-cyan); color: var(--term-cyan); }
+
+        #graph-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 11, 8, 0.95); z-index: 20; padding: 20px; flex-direction: column; }
+        #graph-canvas { flex: 1; border: 1px solid var(--term-green); background: #000; }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="sys-title">[COMPUTER HISTORYZ :: INSTANZ_TERMINAL]</div>
+        <div class="hud-stats" id="hud-dynamic"></div>
+    </header>
+
+    <main id="terminal-viewport">
+        <div class="node-card">
+            <div id="node-title" class="node-title">System Initialisierung...</div>
+            <div id="node-body" class="node-body">Verbinde mit Datenstrom...</div>
+            <div id="choices-box" class="choices-container"></div>
+        </div>
+    </main>
+
+    <footer>
+        <div>[HOTKEYS: 1-9 Auswahl | R Reboot | G Graph]</div>
+        <div>
+            <button class="btn-small" onclick="EngineUI.toggleGraph()">[G] KNOTEN-GRAPH</button>
+            <button class="btn-small" onclick="EngineUI.triggerReboot()">[R] REBOOT / RESET</button>
+        </div>
+    </footer>
+
+    <div id="graph-modal">
+        <div style="display:flex; justify-content:space-between; margin-bottom:15px;">
+            <span style="color:var(--term-cyan)">=== INTERAKTIVER VORHERSAGE-GRAPH ===</span>
+            <button class="btn-small" onclick="EngineUI.toggleGraph()">[X] SCHLIESSEN</button>
+        </div>
+        <canvas id="graph-canvas"></canvas>
+    </div>
+
+    <!-- JSON Injektion (Absolut sicher vor Go-Template Konflikten, da Typ application/json ist) -->
+    <script id="story-data" type="application/json">{{ .Graph }}</script>
+    
+    <!-- Modulare JS-Block 1: Engine Logic -->
+    <script id="engine-logic">
+        // engine_logic.js - Reine State- und Datenverarbeitung
+        const EngineLogic = {
+            storyData: { nodes: {} },
+            state: { reboots: 1, node: "" },
+
+            init: function(rawJsonData) {
+                try {
+                    // Fallback-Prüfung schützt vor fehlerhafter Injektion im Offline-Modus
+                    if (!rawJsonData || rawJsonData.trim() === "" || rawJsonData.startsWith("{{")) throw "Leer";
+                    this.storyData = JSON.parse(rawJsonData);
+                } catch(e) {
+                    console.warn("[System] Go-Engine Offline. Fallback Modus geladen.");
+                    this.storyData = {
+                        startNodeId: "preview_start",
+                        nodes: {
+                            "preview_start": {
+                                id: "preview_start", 
+                                title: "SYSTEM OFFLINE / PREVIEW MODUS", 
+                                content: "<p>Konnte <code>[story-data]</code> nicht parsen. Go-Server läuft nicht oder dies ist ein nativer Preview.</p><p>Die JS-Syntaxfehler wurden restlos eliminiert!</p>",
+                                choices: [{targetId: "preview_start", text: "Endlosschleife testen"}],
+                                metadata: { status: "offline", ui: "modular" }
+                            }
+                        }
+                    };
+                }
+                this.state.node = this.storyData.startNodeId || Object.keys(this.storyData.nodes)[0] || "";
+            },
+
+            getNode: function(id) {
+                return this.storyData.nodes[id];
+            },
+
+            processNodeEntry: function(id) {
+                const node = this.getNode(id);
+                if (!node) return null;
+
+                this.state.node = id;
+
+                // Metadaten anwenden
+                if (node.metadata) {
+                    Object.keys(node.metadata).forEach(key => {
+                        this.state[key] = node.metadata[key];
+                    });
+                }
+
+                // Reboot Erkennung
+                if (node.isReboot) {
+                    this.state.reboots++;
+                }
+
+                return node;
+            },
+
+            parseRequirement: function(choiceText) {
+                let conditionMatch = choiceText.match(/\[req:\s*([a-zA-Z0-9_]+)\s*=\s*([^\]]+)\]/i);
+                let displayText = choiceText;
+                let meetsCondition = true;
+                let missingReq = "";
+
+                if (conditionMatch) {
+                    let reqKey = conditionMatch[1].toLowerCase();
+                    let reqVal = conditionMatch[2];
+                    if (String(this.state[reqKey]) !== String(reqVal)) {
+                        meetsCondition = false;
+                        missingReq = `(Benötigt: ${reqKey}=${reqVal})`;
+                    }
+                    displayText = displayText.replace(conditionMatch[0], "").trim();
+                }
+
+                return { displayText, meetsCondition, missingReq };
+            },
+
+            triggerReboot: function() {
+                const currentReboots = this.state.reboots + 1;
+                this.state = { reboots: currentReboots }; // Resets inventory/state
+                return this.storyData.startNodeId;
+            }
+        };
+    </script>
+    
+    <!-- Modulare JS-Block 2: Engine UI -->
+    <script id="engine-ui">
+        // engine_ui.js - Reines DOM-Handling und visuelle Logik
+        const EngineUI = {
+            audioCtx: null,
+
+            init: function() {
+                const AudioContext = window.AudioContext || window.webkitAudioContext;
+                if(AudioContext) this.audioCtx = new AudioContext();
+                
+                const rawData = document.getElementById("story-data").textContent.trim();
+                EngineLogic.init(rawData);
+
+                this.attachEvents();
+                this.renderNode(EngineLogic.state.node);
+            },
+
+            playBeep: function(freq = 440, type = "square", duration = 0.05) {
+                try {
+                    if(!this.audioCtx) return;
+                    const osc = this.audioCtx.createOscillator();
+                    const gain = this.audioCtx.createGain();
+                    osc.type = type;
+                    osc.frequency.setValueAtTime(freq, this.audioCtx.currentTime);
+                    gain.gain.setValueAtTime(0.05, this.audioCtx.currentTime);
+                    gain.gain.exponentialRampToValueAtTime(0.001, this.audioCtx.currentTime + duration);
+                    osc.connect(gain); gain.connect(this.audioCtx.destination);
+                    osc.start(); osc.stop(this.audioCtx.currentTime + duration);
+                } catch(e) {}
+            },
+
+            renderHUD: function() {
+                const hud = document.getElementById("hud-dynamic");
+                hud.innerHTML = "";
+                
+                hud.innerHTML += `<div class="stat-item">REBOOTS: <span style="color:var(--term-cyan)">#${String(EngineLogic.state.reboots).padStart(3, "0")}</span></div>`;
+                hud.innerHTML += `<div class="stat-item">KNOTEN: <span style="color:var(--term-amber)">${EngineLogic.state.node}</span></div>`;
+
+                Object.keys(EngineLogic.state).forEach(key => {
+                    if(key !== "reboots" && key !== "node") {
+                        hud.innerHTML += `<div class="stat-item">${key.toUpperCase()}: <span style="color:var(--term-green)">${EngineLogic.state[key]}</span></div>`;
+                    }
+                });
+            },
+
+            renderNode: function(id) {
+                const node = EngineLogic.processNodeEntry(id);
+                if (!node) return;
+
+                this.playBeep(600, "sine", 0.04);
+                if (node.isReboot) this.playBeep(200, "sawtooth", 0.3);
+                
+                this.renderHUD();
+
+                document.getElementById("node-title").innerText = "=== " + node.title + " ===";
+                document.getElementById("node-body").innerHTML = node.content;
+
+                const choicesBox = document.getElementById("choices-box");
+                choicesBox.innerHTML = "";
+
+                if (node.choices && node.choices.length > 0) {
+                    let visibleIndex = 1;
+                    node.choices.forEach((choice) => {
+                        const parsed = EngineLogic.parseRequirement(choice.text);
+                        const btn = document.createElement("button");
+                        btn.className = "choice-btn";
+                        
+                        if (parsed.meetsCondition) {
+                            btn.innerHTML = `<span class="choice-key">[${visibleIndex}]</span> ${parsed.displayText}`;
+                            btn.dataset.target = choice.targetId;
+                            btn.dataset.index = visibleIndex;
+                            btn.onclick = () => this.renderNode(choice.targetId);
+                            visibleIndex++;
+                        } else {
+                            btn.innerHTML = `<span class="choice-key">[LOCKED]</span> ${parsed.displayText} <span style="color:var(--term-warn); font-size:0.8rem; margin-left:auto;">${parsed.missingReq}</span>`;
+                            btn.disabled = true;
+                        }
+                        choicesBox.appendChild(btn);
+                    });
+                } else {
+                    const btn = document.createElement("button");
+                    btn.className = "choice-btn";
+                    btn.style.borderColor = "var(--term-amber)";
+                    btn.style.color = "var(--term-amber)";
+                    btn.innerHTML = "<span class=\"choice-key\">[R]</span> Speicherabbild sichern und rebooten...";
+                    btn.onclick = () => this.triggerReboot();
+                    choicesBox.appendChild(btn);
+                }
+                document.getElementById("terminal-viewport").scrollTop = 0;
+            },
+
+            triggerReboot: function() {
+                const startId = EngineLogic.triggerReboot();
+                if (startId) this.renderNode(startId);
+            },
+
+            toggleGraph: function() {
+                const modal = document.getElementById("graph-modal");
+                if (modal.style.display === "flex") {
+                    modal.style.display = "none";
+                } else {
+                    modal.style.display = "flex";
+                    this.drawGraphCanvas();
+                }
+            },
+
+            drawGraphCanvas: function() {
+                const canvas = document.getElementById("graph-canvas");
+                canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+                const ctx = canvas.getContext("2d");
+                ctx.fillStyle = "#000"; ctx.fillRect(0, 0, canvas.width, canvas.height);
+                
+                const keys = Object.keys(EngineLogic.storyData.nodes || {});
+                if (keys.length === 0) return;
+
+                const total = keys.length; const radius = Math.min(canvas.width, canvas.height) * 0.38;
+                const centerX = canvas.width / 2; const centerY = canvas.height / 2;
+                const nodeRadius = 8; const positions = {};
+
+                keys.forEach((key, idx) => {
+                    const angle = (idx / total) * 2 * Math.PI;
+                    positions[key] = { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) };
+                });
+
+                ctx.lineWidth = 1;
+                keys.forEach(key => {
+                    const node = EngineLogic.storyData.nodes[key];
+                    if (node && node.choices) {
+                        node.choices.forEach(c => {
+                            if (positions[c.targetId]) {
+                                const start = positions[key], end = positions[c.targetId];
+                                ctx.beginPath(); ctx.strokeStyle = "rgba(51, 255, 102, 0.4)";
+                                ctx.moveTo(start.x, start.y); ctx.lineTo(end.x, end.y); ctx.stroke();
+                                const dx = end.x - start.x, dy = end.y - start.y, angle = Math.atan2(dy, dx), headlen = 12;
+                                const tipX = end.x - Math.cos(angle) * (nodeRadius + 2), tipY = end.y - Math.sin(angle) * (nodeRadius + 2);
+                                ctx.beginPath(); ctx.moveTo(tipX, tipY);
+                                ctx.lineTo(tipX - headlen * Math.cos(angle - Math.PI / 7), tipY - headlen * Math.sin(angle - Math.PI / 7));
+                                ctx.lineTo(tipX - headlen * Math.cos(angle + Math.PI / 7), tipY - headlen * Math.sin(angle + Math.PI / 7));
+                                ctx.closePath(); ctx.fillStyle = "rgba(51, 255, 102, 0.9)"; ctx.fill();
+                            }
+                        });
+                    }
+                });
+
+                keys.forEach(key => {
+                    const pos = positions[key];
+                    ctx.beginPath(); ctx.arc(pos.x, pos.y, nodeRadius, 0, 2 * Math.PI);
+                    if (key === EngineLogic.state.node) ctx.fillStyle = "#00ffff"; 
+                    else if (key === EngineLogic.storyData.startNodeId) ctx.fillStyle = "#ffb000";
+                    else ctx.fillStyle = "#116633";
+                    ctx.fill(); ctx.strokeStyle = "#33ff66"; ctx.stroke();
+                    ctx.fillStyle = "#fff"; ctx.font = "11px monospace";
+                    const textAngle = Math.atan2(pos.y - centerY, pos.x - centerX);
+                    ctx.fillText(key, pos.x + Math.cos(textAngle) * 15 - 10, pos.y + Math.sin(textAngle) * 15 + 4);
+                });
+            },
+
+            attachEvents: function() {
+                window.addEventListener("keydown", (e) => {
+                    if (document.getElementById("graph-modal").style.display === "flex") {
+                        if (e.key.toLowerCase() === "g" || e.key === "Escape") this.toggleGraph();
+                        return;
+                    }
+                    if (e.key >= "1" && e.key <= "9") {
+                        const btn = document.querySelector(`.choice-btn[data-index="${e.key}"]`);
+                        if (btn && !btn.disabled) this.renderNode(btn.dataset.target);
+                    } else if (e.key.toLowerCase() === "r") {
+                        this.triggerReboot();
+                    } else if (e.key.toLowerCase() === "g") {
+                        this.toggleGraph();
+                    }
+                });
+            }
+        };
+
+        window.onload = () => EngineUI.init();
+    </script>
+</body>
+</html>

00_aMeta/toolz/CYOA/main.go

@@ -22,7 +22,7 @@ type Choice struct {
 type StoryNode struct {
 	ID         string            `json:"id"`
 	Title      string            `json:"title"`
-	Content    template.HTML     `json:"content"` // HTML für das Asciidoctor Rendering
+	Content    template.HTML     `json:"content"`
 	Choices    []Choice          `json:"choices"`
 	IsReboot   bool              `json:"isReboot"`
 	IsEnd      bool              `json:"isEnd"`
@@ -38,6 +38,14 @@ type StoryGraph struct {
 	DeadEndNodes []string              `json:"deadEndNodes"`
 }
 
+// Struct für das saubere Injezieren der Frontend-Komponenten
+type TemplateContext struct {
+	Graph template.JS
+	CSS   template.CSS
+	Logic template.JS
+	UI    template.JS
+}
+
 var (
 	adocNodeRegex   = regexp.MustCompile(`\[\[([a-zA-Z0-9_\-]+)\]\]`)
 	adocChoiceRegex = regexp.MustCompile(`<<([a-zA-Z0-9_\-]+)\s*,\s*([^>]+)>>`)
@@ -49,12 +57,12 @@ var (
 func main() {
 	dirPtr := flag.String("dir", ".", "Verzeichnis mit AsciiDoc/Markdown Dateien")
 	outPtr := flag.String("out", "export/story.html", "Zielpfad für den Dateiexport")
-	tmplPtr := flag.String("tmpl", "template.html", "Pfad zur ausgelagerten HTML/JS Template-Datei")
+	tmplPtr := flag.String("tmpl", "template.html", "Pfad zur HTML Template-Datei")
 	servePtr := flag.Bool("serve", false, "Startet den API- & Preview-Server")
 	portPtr := flag.Int("port", 8080, "Port für den Server")
 	flag.Parse()
 
-	fmt.Println("\033[1;36m=== Computer Historyz :: CYOA Engine (Asciidoctor Bindings) ===\033[0m")
+	fmt.Println("\033[1;36m=== Computer Historyz :: CYOA Engine (Modular) ===\033[0m")
 
 	if *servePtr {
 		startServer(*portPtr, *dirPtr, *outPtr, *tmplPtr)
@@ -71,26 +79,26 @@ func main() {
 		fmt.Printf("\033[1;31m[FEHLER]\033[0m %v\n", err)
 		os.Exit(1)
 	}
-	fmt.Printf("\033[1;32m[ERFOLG]\033[0m Story generiert -> \033[1;33m%s\033[0m\n", *outPtr)
+	fmt.Printf("\033[1;32m[ERFOLG]\033[0m Story modular generiert -> \033[1;33m%s\033[0m\n", *outPtr)
 }
 
-// renderAsciidoctor piped rohen AsciiDoc Text in den lokalen Container-Prozess
+func readAsset(basePath, filename string) string {
-func renderAsciidoctor(text string) template.HTML {
+	b, err := os.ReadFile(filepath.Join(filepath.Dir(basePath), filename))
-	if strings.TrimSpace(text) == "" {
+	if err != nil {
-		return ""
+		return fmt.Sprintf("/* %s nicht gefunden */", filename)
 	}
+	return string(b)
+}
 
+func renderAsciidoctor(text string) template.HTML {
+	if strings.TrimSpace(text) == "" { return "" }
 	cmd := exec.Command("asciidoctor", "--embedded", "-")
 	cmd.Stdin = strings.NewReader(text)
-	
 	out, err := cmd.Output()
 	if err != nil {
-		fmt.Printf("\033[1;33m[WARNUNG]\033[0m Asciidoctor Rendering fehlgeschlagen: %v\n", err)
-		// Fallback auf rohen Text (mit rudimentären Linebreaks), falls asciidoctor fehlschlägt
 		fallback := strings.ReplaceAll(text, "\n", "<br>")
 		return template.HTML(fallback)
 	}
-	
 	return template.HTML(string(out))
 }
 
@@ -106,86 +114,45 @@ func parseContent(rawContent string, sourceName string, graph *StoryGraph) {
 	var currentBody strings.Builder
 
 	for _, line := range lines {
-		// Knotenpunkte identifizieren
 		if matches := adocNodeRegex.FindStringSubmatch(line); len(matches) > 1 {
 			if currentNode != nil {
-				// Inhalt über Asciidoctor-Container-Binary exportieren
 				currentNode.Content = renderAsciidoctor(cleanBodyText(currentBody.String()))
 				graph.Nodes[currentNode.ID] = currentNode
 				currentBody.Reset()
 			}
 			nodeID := matches[1]
-			currentNode = &StoryNode{
+			currentNode = &StoryNode{ ID: nodeID, Title: nodeID, Choices: make([]Choice, 0), FileSource: sourceName, Metadata: make(map[string]string) }
-				ID:         nodeID,
+			if graph.StartNodeID == "" || nodeID == "start" || nodeID == "node_start" { graph.StartNodeID = nodeID }
-				Title:      nodeID,
-				Choices:    make([]Choice, 0),
-				FileSource: sourceName,
-				Metadata:   make(map[string]string),
-			}
-			if graph.StartNodeID == "" || nodeID == "start" || nodeID == "node_start" {
-				graph.StartNodeID = nodeID
-			}
 			continue
 		}
-
 		if currentNode == nil {
 			if strings.TrimSpace(line) != "" {
 				baseID := "start"
-				if sourceName != "API_POST_Stream" {
+				if sourceName != "API_POST_Stream" { baseID = strings.TrimSuffix(filepath.Base(sourceName), filepath.Ext(sourceName)) }
-					baseID = strings.TrimSuffix(filepath.Base(sourceName), filepath.Ext(sourceName))
+				currentNode = &StoryNode{ ID: baseID, Title: baseID, Choices: make([]Choice, 0), FileSource: sourceName, Metadata: make(map[string]string) }
-				}
+				if graph.StartNodeID == "" { graph.StartNodeID = baseID }
-				currentNode = &StoryNode{
+			} else { continue }
-					ID:         baseID,
-					Title:      baseID,
-					Choices:    make([]Choice, 0),
-					FileSource: sourceName,
-					Metadata:   make(map[string]string),
-				}
-				if graph.StartNodeID == "" {
-					graph.StartNodeID = baseID
-				}
-			} else {
-				continue
-			}
 		}
 
-		// Metadaten für das State-System extrahieren
 		if mMatches := metaRegex.FindStringSubmatch(line); len(mMatches) > 2 {
-			currentNode.Metadata[strings.ToLower(mMatches[1])] = strings.TrimSpace(mMatches[2])
+			currentNode.Metadata[strings.ToLower(mMatches[1])] = strings.TrimSpace(mMatches[2]); continue
-			continue
 		}
-
-		// Titel extrahieren
 		if hMatches := headingRegex.FindStringSubmatch(line); len(hMatches) > 1 && currentNode.Title == currentNode.ID {
 			currentNode.Title = strings.TrimSpace(hMatches[1])
 		}
-
-		// Entscheidungen (AsciiDoc)
 		if cMatches := adocChoiceRegex.FindAllStringSubmatch(line, -1); len(cMatches) > 0 {
-			for _, match := range cMatches {
+			for _, match := range cMatches { currentNode.Choices = append(currentNode.Choices, Choice{TargetID: match[1], Text: strings.TrimSpace(match[2])}) }
-				currentNode.Choices = append(currentNode.Choices, Choice{TargetID: match[1], Text: strings.TrimSpace(match[2])})
-			}
 		}
-
-		// Entscheidungen (Markdown)
 		if mMatches := mdChoiceRegex.FindAllStringSubmatch(line, -1); len(mMatches) > 0 {
-			for _, match := range mMatches {
+			for _, match := range mMatches { currentNode.Choices = append(currentNode.Choices, Choice{TargetID: match[2], Text: strings.TrimSpace(match[1])}) }
-				currentNode.Choices = append(currentNode.Choices, Choice{TargetID: match[2], Text: strings.TrimSpace(match[1])})
-			}
 		}
 
-		// Spezielle System-Tags prüfen
 		lowerLine := strings.ToLower(line)
-		if strings.Contains(lowerLine, "[reboot]") || strings.Contains(lowerLine, "speicherabbild") {
+		if strings.Contains(lowerLine, "[reboot]") || strings.Contains(lowerLine, "speicherabbild") { currentNode.IsReboot = true }
-			currentNode.IsReboot = true
+		if strings.Contains(lowerLine, "[ende]") || strings.Contains(lowerLine, "[end]") { currentNode.IsEnd = true }
-		}
-		if strings.Contains(lowerLine, "[ende]") || strings.Contains(lowerLine, "[end]") {
-			currentNode.IsEnd = true
-		}
 
 		currentBody.WriteString(line + "\n")
 	}
-
 	if currentNode != nil {
 		currentNode.Content = renderAsciidoctor(cleanBodyText(currentBody.String()))
 		graph.Nodes[currentNode.ID] = currentNode
@@ -199,10 +166,7 @@ func loadStoryGraphFromDir(rootDir string) *StoryGraph {
 		ext := strings.ToLower(filepath.Ext(path))
 		if ext != ".adoc" && ext != ".md" { return nil }
 		contentBytes, err := os.ReadFile(path)
-		if err == nil {
+		if err == nil { parseContent(string(contentBytes), filepath.Base(path), graph) }
-			relPath, _ := filepath.Rel(rootDir, path)
-			parseContent(string(contentBytes), relPath, graph)
-		}
 		return nil
 	})
 	return graph
@@ -214,37 +178,30 @@ func validateGraph(g *StoryGraph) {
 	for id, node := range g.Nodes {
 		for _, choice := range node.Choices {
 			referenced[choice.TargetID] = true
-			if _, exists := g.Nodes[choice.TargetID]; !exists {
+			if _, exists := g.Nodes[choice.TargetID]; !exists { g.BrokenLinks = append(g.BrokenLinks, fmt.Sprintf("%s -> %s (in %s)", id, choice.TargetID, node.FileSource)) }
-				g.BrokenLinks = append(g.BrokenLinks, fmt.Sprintf("%s -> %s (in %s)", id, choice.TargetID, node.FileSource))
-			}
-		}
-		if len(node.Choices) == 0 && !node.IsReboot && !node.IsEnd {
-			g.DeadEndNodes = append(g.DeadEndNodes, id)
 		}
+		if len(node.Choices) == 0 && !node.IsReboot && !node.IsEnd { g.DeadEndNodes = append(g.DeadEndNodes, id) }
 	}
-	for id := range g.Nodes {
+	for id := range g.Nodes { if !referenced[id] { g.OrphanNodes = append(g.OrphanNodes, id) } }
-		if !referenced[id] { g.OrphanNodes = append(g.OrphanNodes, id) }
-	}
 }
 
-// JSON Helper für das Template
+func getContext(graph *StoryGraph, tmplPath string) TemplateContext {
-func getTemplateFuncMap() template.FuncMap {
+	graphJson, _ := json.Marshal(graph)
-	return template.FuncMap{
+	return TemplateContext{
-		"json": func(v interface{}) template.JS {
+		Graph: template.JS(graphJson),
-			a, _ := json.Marshal(v)
+		CSS:   template.CSS(readAsset(tmplPath, "style.css")),
-			return template.JS(a)
+		Logic: template.JS(readAsset(tmplPath, "engine_logic.js")),
-		},
+		UI:    template.JS(readAsset(tmplPath, "engine_ui.js")),
 	}
 }
 
 func generateHTMLFile(g *StoryGraph, outPath string, tmplPath string) error {
-	fmt.Println("tmp path "+tmplPath)
+	tmpl, err := template.ParseFiles(tmplPath)
-	tmpl, err := template.New(filepath.Base(tmplPath)).Funcs(getTemplateFuncMap()).ParseFiles(tmplPath)
 	if err != nil { return fmt.Errorf("Template-Fehler: %v", err) }
 	f, err := os.Create(outPath)
 	if err != nil { return err }
 	defer f.Close()
-	return tmpl.Execute(f, g)
+	return tmpl.Execute(f, getContext(g, tmplPath))
 }
 
 func startServer(port int, watchDir string, htmlPath string, tmplPath string) {
@@ -256,33 +213,25 @@ func startServer(port int, watchDir string, htmlPath string, tmplPath string) {
 
 		if r.Method == http.MethodPost {
 			bodyBytes, err := io.ReadAll(r.Body)
-			if err != nil {
+			if err != nil { http.Error(w, "Daten defekt", http.StatusBadRequest); return }
-				http.Error(w, "Daten defekt", http.StatusBadRequest)
-				return
-			}
 			
 			graph := &StoryGraph{Nodes: make(map[string]*StoryNode)}
-			// Rohdaten durch den Parser und den Asciidoctor-Container schleusen
 			parseContent(string(bodyBytes), "API_POST_Stream", graph)
 			validateGraph(graph)
 
 			w.Header().Set("Content-Type", "text/html; charset=utf-8")
-			tmpl, err := template.New(filepath.Base(tmplPath)).Funcs(getTemplateFuncMap()).ParseFiles(tmplPath)
+			tmpl, err := template.ParseFiles(tmplPath)
-			if err != nil {
+			if err != nil { http.Error(w, "Template-Fehler: "+err.Error(), http.StatusInternalServerError); return }
-				http.Error(w, "Template-Fehler: "+err.Error(), http.StatusInternalServerError)
+			
-				return
+			tmpl.Execute(w, getContext(graph, tmplPath))
-			}
+			fmt.Println("\033[1;34m[POST-API]\033[0m Modularer Stack gerendert.")
-			tmpl.Execute(w, graph)
-			fmt.Println("\033[1;34m[POST-API]\033[0m Story inkl. Asciidoctor-HTML gerendert.")
 			return
 		}
-
 		if r.Method == http.MethodGet {
 			freshGraph := loadStoryGraphFromDir(watchDir)
 			_ = generateHTMLFile(freshGraph, htmlPath, tmplPath)
 			http.ServeFile(w, r, htmlPath)
 		}
 	})
-
 	http.ListenAndServe(addr, nil)
 }

00_aMeta/toolz/CYOA/templates/template.html

@@ -1,336 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Computer Historyz :: Interactive Terminal Engine</title>
-    <style>
-        :root {
-            --bg-color: #050b08;
-            --term-green: #33ff66;
-            --term-dim: #116633;
-            --term-cyan: #00ffff;
-            --term-warn: #ff3333;
-            --term-amber: #ffb000;
-            --font-stack: 'Courier New', Courier, monospace;
-        }
-
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-
-        body {
-            background-color: var(--bg-color); color: var(--term-green);
-            font-family: var(--font-stack); height: 100vh; display: flex;
-            flex-direction: column; overflow: hidden; text-shadow: 0 0 4px rgba(51, 255, 102, 0.6);
-        }
-
-        body::before {
-            content: " "; display: block; position: absolute;
-            top: 0; left: 0; bottom: 0; right: 0;
-            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
-            z-index: 10; background-size: 100% 3px, 3px 100%; pointer-events: none;
-        }
-
-        header { background: #111; border-bottom: 2px solid var(--term-green); padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
-        .sys-title { color: var(--term-cyan); font-weight: bold; letter-spacing: 1px; }
-        
-        .hud-stats { display: flex; gap: 15px; font-size: 0.85rem; flex-wrap: wrap; }
-        .stat-item { border: 1px solid var(--term-dim); padding: 2px 8px; background: rgba(0, 20, 10, 0.5); }
-
-        main { flex: 1; display: flex; flex-direction: column; padding: 20px; max-width: 900px; margin: 0 auto; width: 100%; overflow-y: auto; position: relative; z-index: 1; }
-        .node-card { border: 1px solid var(--term-dim); background: rgba(5, 15, 10, 0.85); padding: 20px; margin-bottom: 20px; box-shadow: 0 0 15px rgba(0, 255, 102, 0.1); }
-        .node-title { font-size: 1.3rem; color: var(--term-cyan); border-bottom: 1px dashed var(--term-dim); padding-bottom: 8px; margin-bottom: 15px; text-transform: uppercase; }
-        
-        /* * ASCIIDOCTOR HTML STYLING 
-         * Da das Go-Backend nun volles HTML liefert, muss das CSS dieses abfangen. 
-         */
-        .node-body { line-height: 1.6; font-size: 1rem; margin-bottom: 20px; }
-        .node-body p { margin-bottom: 15px; }
-        .node-body strong, .node-body b { color: var(--term-cyan); font-weight: normal; text-shadow: 0 0 5px rgba(0, 255, 255, 0.4); }
-        .node-body em, .node-body i { color: var(--term-amber); font-style: italic; }
-        .node-body ul, .node-body ol { margin-left: 25px; margin-bottom: 15px; list-style-type: square; }
-        .node-body li { margin-bottom: 5px; }
-        .node-body h1, .node-body h2, .node-body h3, .node-body h4 { color: var(--term-cyan); margin: 20px 0 10px 0; border-bottom: 1px solid var(--term-dim); padding-bottom: 5px; }
-        .node-body code { background: rgba(0, 255, 102, 0.1); padding: 2px 5px; border-radius: 3px; font-family: var(--font-stack); }
-        .node-body pre { background: rgba(0, 20, 10, 0.8); border-left: 3px solid var(--term-dim); padding: 10px; overflow-x: auto; margin-bottom: 15px; }
-        .node-body table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
-        .node-body th, .node-body td { border: 1px solid var(--term-dim); padding: 8px; text-align: left; }
-        .node-body th { background: rgba(0, 255, 102, 0.1); color: var(--term-cyan); }
-
-        .choices-container { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
-
-        .choice-btn {
-            background: rgba(0, 30, 15, 0.6); border: 1px solid var(--term-green);
-            color: var(--term-green); padding: 12px 16px; font-family: var(--font-stack);
-            font-size: 0.95rem; text-align: left; cursor: pointer;
-            transition: all 0.15s ease; display: flex; align-items: center; gap: 10px;
-        }
-        .choice-btn:hover:not(:disabled) { background: var(--term-green); color: var(--bg-color); box-shadow: 0 0 10px var(--term-green); outline: none; }
-        .choice-btn:disabled { border-color: var(--term-warn); color: var(--term-warn); cursor: not-allowed; opacity: 0.6; }
-        
-        .choice-key { background: var(--term-dim); color: var(--term-green); padding: 2px 6px; font-size: 0.8rem; border-radius: 2px; }
-        .choice-btn:hover:not(:disabled) .choice-key { background: var(--bg-color); color: var(--term-green); }
-        .choice-btn:disabled .choice-key { background: rgba(255, 51, 51, 0.2); color: var(--term-warn); }
-
-        footer { border-top: 1px solid var(--term-dim); padding: 10px 20px; display: flex; justify-content: space-between; background: #080f0c; font-size: 0.8rem; z-index: 2; }
-        .btn-small { background: transparent; border: 1px solid var(--term-dim); color: var(--term-green); padding: 4px 10px; cursor: pointer; font-family: var(--font-stack); }
-        .btn-small:hover { border-color: var(--term-cyan); color: var(--term-cyan); }
-
-        #graph-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 11, 8, 0.95); z-index: 20; padding: 20px; flex-direction: column; }
-        #graph-canvas { flex: 1; border: 1px solid var(--term-green); background: #000; }
-    </style>
-</head>
-<body>
-
-    <header>
-        <div class="sys-title">[COMPUTER HISTORYZ :: INSTANZ_TERMINAL]</div>
-        <div class="hud-stats" id="hud-dynamic">
-            <!-- Wird per JS gefüllt -->
-        </div>
-    </header>
-
-    <main id="terminal-viewport">
-        <div class="node-card">
-            <div id="node-title" class="node-title">System Initialisierung...</div>
-            <div id="node-body" class="node-body">Verbinde mit Datenstrom...</div>
-            <div id="choices-box" class="choices-container"></div>
-        </div>
-    </main>
-
-    <footer>
-        <div>[HOTKEYS: 1-9 Auswahl | R Reboot | G Graph]</div>
-        <div>
-            <button class="btn-small" onclick="toggleGraphView()">[G] KNOTEN-GRAPH</button>
-            <button class="btn-small" onclick="restartStory()">[R] REBOOT / RESET</button>
-        </div>
-    </footer>
-
-    <div id="graph-modal">
-        <div style="display:flex; justify-content:space-between; margin-bottom:15px;">
-            <span style="color:var(--term-cyan)">=== INTERAKTIVER VORHERSAGE-GRAPH ===</span>
-            <button class="btn-small" onclick="toggleGraphView()">[X] SCHLIESSEN</button>
-        </div>
-        <canvas id="graph-canvas"></canvas>
-    </div>
-
-    <!-- JSON Injection -->
-    <script id="story-data" type="application/json">
-        {{ . | json }}
-    </script>
-
-    <script>
-        let storyData = { nodes: {} };
-        
-        try {
-            const rawData = document.getElementById('story-data').textContent.trim();
-            if (!rawData.startsWith("\{\{")) {
-                storyData = JSON.parse(rawData);
-            } else {
-                console.warn("[WARNUNG] Go-Engine nicht verbunden. Lade Offline-Preview.");
-                storyData = {
-                    startNodeId: "preview_start",
-                    nodes: {
-                        "preview_start": {
-                            id: "preview_start",
-                            title: "OFFLINE PREVIEW",
-                            content: "<p>Verbindung zur Go-Engine unterbrochen.</p><p><strong>Dies ist der Testmodus.</strong> Die Node-Inhalte unterstützen nun <em>echtes HTML</em>, das durch Asciidoctor generiert wird.</p><ul><li>Listen funktionieren</li><li>Tabellen ebenso</li></ul>",
-                            choices: [{ targetId: "preview_start", text: "Endlosschleife starten" }],
-                            metadata: { schild: "100%", status: "offline" }
-                        }
-                    }
-                };
-            }
-        } catch(e) {
-            console.error("Fehler beim Parsen der Injektion:", e);
-        }
-
-        let currentNodeID = storyData.startNodeId || (Object.keys(storyData.nodes).length > 0 ? Object.keys(storyData.nodes)[0] : '');
-        let history = [];
-        
-        let gameState = {
-            reboots: 1, 
-            node: currentNodeID
-        };
-
-        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-        function playBeep(freq = 440, type = 'square', duration = 0.05) {
-            try {
-                const osc = audioCtx.createOscillator();
-                const gain = audioCtx.createGain();
-                osc.type = type;
-                osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
-                gain.gain.setValueAtTime(0.05, audioCtx.currentTime);
-                gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
-                osc.connect(gain); gain.connect(audioCtx.destination);
-                osc.start(); osc.stop(audioCtx.currentTime + duration);
-            } catch(e) {}
-        }
-
-        function renderHUD() {
-            const hud = document.getElementById('hud-dynamic');
-            hud.innerHTML = '';
-            
-            hud.innerHTML += `<div class="stat-item">REBOOTS: <span style="color:var(--term-cyan)">#${String(gameState.reboots).padStart(3, '0')}</span></div>`;
-            hud.innerHTML += `<div class="stat-item">KNOTEN: <span style="color:var(--term-amber)">${gameState.node}</span></div>`;
-
-            Object.keys(gameState).forEach(key => {
-                if(key !== 'reboots' && key !== 'node') {
-                    hud.innerHTML += `<div class="stat-item">${key.toUpperCase()}: <span style="color:var(--term-green)">${gameState[key]}</span></div>`;
-                }
-            });
-        }
-
-        function renderNode(id) {
-            const node = storyData.nodes[id];
-            if (!node) return;
-
-            currentNodeID = id;
-            gameState.node = id;
-            history.push(id);
-            playBeep(600, 'sine', 0.04);
-
-            if (node.metadata) {
-                Object.keys(node.metadata).forEach(key => {
-                    gameState[key] = node.metadata[key];
-                });
-            }
-
-            if (node.isReboot) {
-                gameState.reboots++;
-                playBeep(200, 'sawtooth', 0.3);
-            }
-            
-            renderHUD();
-
-            document.getElementById('node-title').innerText = "=== " + node.title + " ===";
-            
-            // WICHTIG: Das Go-Backend liefert nun echtes HTML von Asciidoctor!
-            document.getElementById('node-body').innerHTML = node.content;
-
-            const choicesBox = document.getElementById('choices-box');
-            choicesBox.innerHTML = '';
-
-            if (node.choices && node.choices.length > 0) {
-                let visibleIndex = 1;
-                node.choices.forEach((choice) => {
-                    
-                    let conditionMatch = choice.text.match(/\[req:\s*([a-zA-Z0-9_]+)\s*=\s*([^\]]+)\]/i);
-                    let displayText = choice.text;
-                    let meetsCondition = true;
-                    let missingReq = "";
-
-                    if (conditionMatch) {
-                        let reqKey = conditionMatch[1].toLowerCase();
-                        let reqVal = conditionMatch[2];
-                        if (String(gameState[reqKey]) !== String(reqVal)) {
-                            meetsCondition = false;
-                            missingReq = `(Benötigt: ${reqKey}=${reqVal})`;
-                        }
-                        displayText = displayText.replace(conditionMatch[0], '').trim();
-                    }
-
-                    const btn = document.createElement('button');
-                    btn.className = 'choice-btn';
-                    
-                    if (meetsCondition) {
-                        btn.innerHTML = `<span class="choice-key">[${visibleIndex}]</span> ${displayText}`;
-                        btn.dataset.target = choice.targetId;
-                        btn.dataset.index = visibleIndex;
-                        btn.onclick = () => renderNode(choice.targetId);
-                        visibleIndex++;
-                    } else {
-                        btn.innerHTML = `<span class="choice-key">[LOCKED]</span> ${displayText} <span style="color:var(--term-warn); font-size:0.8rem; margin-left:auto;">${missingReq}</span>`;
-                        btn.disabled = true;
-                    }
-                    
-                    choicesBox.appendChild(btn);
-                });
-            } else {
-                const btn = document.createElement('button');
-                btn.className = 'choice-btn';
-                btn.style.borderColor = 'var(--term-amber)';
-                btn.style.color = 'var(--term-amber)';
-                btn.innerHTML = '<span class="choice-key">[R]</span> Speicherabbild sichern und rebooten...';
-                btn.onclick = () => restartStory();
-                choicesBox.appendChild(btn);
-            }
-            document.getElementById('terminal-viewport').scrollTop = 0;
-        }
-
-        function restartStory() {
-            const currentReboots = gameState.reboots + 1;
-            gameState = { reboots: currentReboots };
-            if(storyData.startNodeId) renderNode(storyData.startNodeId);
-        }
-
-        window.addEventListener('keydown', (e) => {
-            if (document.getElementById('graph-modal').style.display === 'flex') {
-                if (e.key.toLowerCase() === 'g' || e.key === 'Escape') toggleGraphView();
-                return;
-            }
-            if (e.key >= '1' && e.key <= '9') {
-                const btn = document.querySelector(`.choice-btn[data-index="${e.key}"]`);
-                if (btn && !btn.disabled) renderNode(btn.dataset.target);
-            } else if (e.key.toLowerCase() === 'r') restartStory();
-            else if (e.key.toLowerCase() === 'g') toggleGraphView();
-        });
-
-        function toggleGraphView() {
-            const modal = document.getElementById('graph-modal');
-            if (modal.style.display === 'flex') modal.style.display = 'none';
-            else { modal.style.display = 'flex'; drawGraphCanvas(); }
-        }
-
-        function drawGraphCanvas() {
-            const canvas = document.getElementById('graph-canvas');
-            canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-            const ctx = canvas.getContext('2d');
-            ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height);
-            const keys = Object.keys(storyData.nodes);
-            if (keys.length === 0) return;
-
-            const total = keys.length; const radius = Math.min(canvas.width, canvas.height) * 0.38;
-            const centerX = canvas.width / 2; const centerY = canvas.height / 2;
-            const nodeRadius = 8; const positions = {};
-
-            keys.forEach((key, idx) => {
-                const angle = (idx / total) * 2 * Math.PI;
-                positions[key] = { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) };
-            });
-
-            ctx.lineWidth = 1;
-            keys.forEach(key => {
-                const node = storyData.nodes[key];
-                if (node.choices) {
-                    node.choices.forEach(c => {
-                        if (positions[c.targetId]) {
-                            const start = positions[key], end = positions[c.targetId];
-                            ctx.beginPath(); ctx.strokeStyle = 'rgba(51, 255, 102, 0.4)';
-                            ctx.moveTo(start.x, start.y); ctx.lineTo(end.x, end.y); ctx.stroke();
-                            const dx = end.x - start.x, dy = end.y - start.y, angle = Math.atan2(dy, dx), headlen = 12;
-                            const tipX = end.x - Math.cos(angle) * (nodeRadius + 2), tipY = end.y - Math.sin(angle) * (nodeRadius + 2);
-                            ctx.beginPath(); ctx.moveTo(tipX, tipY);
-                            ctx.lineTo(tipX - headlen * Math.cos(angle - Math.PI / 7), tipY - headlen * Math.sin(angle - Math.PI / 7));
-                            ctx.lineTo(tipX - headlen * Math.cos(angle + Math.PI / 7), tipY - headlen * Math.sin(angle + Math.PI / 7));
-                            ctx.closePath(); ctx.fillStyle = 'rgba(51, 255, 102, 0.9)'; ctx.fill();
-                        }
-                    });
-                }
-            });
-
-            keys.forEach(key => {
-                const pos = positions[key];
-                ctx.beginPath(); ctx.arc(pos.x, pos.y, nodeRadius, 0, 2 * Math.PI);
-                if (key === currentNodeID) ctx.fillStyle = '#00ffff'; 
-                else if (key === storyData.startNodeId) ctx.fillStyle = '#ffb000';
-                else ctx.fillStyle = '#116633';
-                ctx.fill(); ctx.strokeStyle = '#33ff66'; ctx.stroke();
-                ctx.fillStyle = '#fff'; ctx.font = '11px monospace';
-                const textAngle = Math.atan2(pos.y - centerY, pos.x - centerX);
-                ctx.fillText(key, pos.x + Math.cos(textAngle) * 15 - 10, pos.y + Math.sin(textAngle) * 15 + 4);
-            });
-        }
-
-        window.onload = () => { if(currentNodeID) renderNode(currentNodeID); };
-    </script>
-</body>
-</html>