Sprechblasen Editor<\/title>\n <style>\n \/* 1. DER CONTAINER: H\u00e4lt alles zusammen und zentriert sich *\/\n.comic-panel {\n position: relative;\n display: table; \/* Goldene Regel: Der Container wird exakt so breit wie das Bild *\/\n margin: 20px auto; \/* Zentriert das Paket auf der Seite *\/\n max-width: 100%;\n line-height: 0; \/* Entfernt den kleinen Spalt unter dem Bild *\/\n}\n\n\/* 2. DAS BILD: Basis f\u00fcr die Prozent-Rechnung *\/\n.comic-panel img {\n display: block;\n width: 100%;\n height: auto;\n border-radius: 5px; \/* Optional: Schicke abgerundete Ecken f\u00fcrs Panel *\/\n}\n\n\/* 3. DIE SPRECHBLASE: Bleibt am Platz *\/\n\/* Die korrigierte Sprechblase *\/\n.q-bubble {\n position: absolute;\n background: white;\n border: 2px solid black;\n border-radius: 15px;\n padding: 8px 12px;\n font-family: 'Comic Sans MS', cursive, sans-serif;\n font-size: clamp(10px, 1.4vw, 16px);\n line-height: 1.2;\n filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.1));\n z-index: 10;\n \n \/* DIE BEIDEN NEUEN ZEILEN: *\/\n white-space: normal; \/* 1. Erlaubt Zeilenumbr\u00fcche im Text *\/\n max-width: 30%; \/* 2. Zwingt die Blase, nicht breiter als 45% des BILDES zu werden *\/\n \n word-wrap: break-word; \/* 3. Sicherheitshalber, falls ein Wort riesig ist (wie Hyper-Inflation) *\/\n}\n\n\/* 4. DER NIPPEL: Wandert mit der Blase mit *\/\n.q-bubble::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 20px;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-top: 10px solid black;\n}\n\n\/* 5. \u00dcBERSCHRIFTEN: Sch\u00f6n mittig *\/\n.entry-title, .comic-title {\n text-align: center;\n margin-bottom: 20px;\n}\n\n\n\/* --- Effekt: Sprechblasen bei Hover transparent machen --- *\/\n\n\/* 1. Weicher \u00dcbergang f\u00fcr die Transparenz (Animation) *\/\n.q-bubble {\n \/* ... deine bisherigen Styles ... *\/\n transition: opacity 0.4s ease-in-out; \/* Verlangsamt das Ein- und Ausblenden *\/\n opacity: 1; \/* Standardm\u00e4\u00dfig voll sichtbar *\/\n}\n\n\/* 2. Wenn die Maus \u00dcBER DEM PANEL ist, werden die BUBBLES transparent *\/\n.comic-panel:hover .q-bubble {\n opacity: 0.15; \/* Fast unsichtbar, aber noch leicht zu erahnen *\/\n}\n\n\/* 3. WICHTIG: Wenn die Maus DIREKT \u00fcber einer Bubbles ist, wird DIESE wieder lesbar *\/\n.q-bubble:hover {\n opacity: 1 !important; \/* Volle Sichtbarkeit, auch wenn das Panel gehovert ist *\/\n}\n\n\n.text-blocksatz {\n text-align: justify;\n}\n <\/style>\n<\/head>\n<body>\n<div class=\"editor-container\">\n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\">\n <div id=\"status\"><\/div>\n \n <div id=\"preview-container\">\n <\/div>\n\n <div id=\"output-area\">\n \n <\/div> \n<\/div>\n\n<script>\n const imageInput = document.getElementById('imageInput');\n const previewContainer = document.getElementById('preview-container');\n \/\/ const htmlCodeArea = document.getElementById('html-code');\n const status = document.getElementById('status');\n\n let currentImageUrl = \"\";\n let bubbles = [];\n\n \/\/ Spracheingabe vorbereiten\n const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n const recognition = new SpeechRecognition();\n recognition.lang = 'de-DE';\n\n imageInput.onchange = (e) => {\n const file = e.target.files[0];\n const reader = new FileReader();\n reader.onload = (event) => {\n currentImageUrl = event.target.result;\n bubbles = []; \/\/ Reset bei neuem Bild\n render();\n };\n reader.readAsDataURL(file);\n };\n\n function render() {\n if (!currentImageUrl) return;\n\n \/\/ 1. Die Sprechblasen-HTML-Bl\u00f6cke generieren\n const bubblesHtml = bubbles.map(b => \n `\\n\\t<div class=\"q-bubble\" style=\"left: ${b.x}%; top: ${b.y}%; max-width: 30%;\">\\n\\t\\t${b.text}\\n\\t<\/div>`\n ).join('');\n\n \/\/ 2. Das gesamte Muster zusammensetzen\n const finalTemplate = `<div class=\"comic-panel\">\\n\\t<img decoding=\"async\" src=\"${currentImageUrl}\" alt=\"Comic Panel\">${bubblesHtml}\\n<\/div>`;\n\t\tconst finalTemplate_wp = `<div class=\"comic-panel\">\\n\\t<img decoding=\"async\" src=\"[URL]\" alt=\"Comic Panel\">${bubblesHtml}\\n<\/div>`;\n\n \/\/ 3. Im Editor anzeigen\n previewContainer.innerHTML = finalTemplate;\n \n \/\/ 4. In das Textfeld f\u00fcr WordPress schreiben\n \/\/htmlCodeArea.value = finalTemplate_wp;\n\n \/\/ Klick-Funktion f\u00fcr das neue Bild binden\n const panel = previewContainer.querySelector('.comic-panel');\n panel.onclick = (e) => {\n const rect = panel.getBoundingClientRect();\n const x = ((e.clientX - rect.left) \/ rect.width * 100).toFixed(1);\n const y = ((e.clientY - rect.top) \/ rect.height * 100).toFixed(1);\n startVoice(x, y);\n };\n }\n\n function startVoice(x, y) {\n status.innerText = \"\ud83c\udfa4 Ich h\u00f6re zu... bitte sprechen...\";\n recognition.start();\n\n recognition.onresult = (event) => {\n const transcript = event.results[0][0].transcript;\n bubbles.push({ x, y, text: transcript });\n render();\n };\n\n recognition.onend = () => { status.innerText = \"\"; };\n }\n\n function copyToClipboard() {\n \/\/ htmlCodeArea.select();\n document.execCommand(\"copy\");\n alert(\"Code wurde kopiert! Du kannst ihn jetzt in WordPress einf\u00fcgen.\");\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"text-blocksatz wp-block-paragraph\"><strong>Das Tor zur anderen Welt ist versiegelt. Der Engel erkl\u00e4rt, dass er seit Jahrtausenden keine Stimme mehr von \u201eau\u00dfen\u201c geh\u00f6rt hat. Um das Tor zu \u00f6ffnen, braucht es nicht nur den Apfel, sondern auch eine Intention \u2013 ein Bild und ein Wort aus einer Welt, die nicht aus bin\u00e4rem Gold besteht.<\/strong><\/p>\n\n\n\n<p class=\"text-blocksatz wp-block-paragraph\"><strong>\u201eDas Tor vibriert, doch der Mechanismus bleibt stumm. Der Engel neigt das Haupt zu dir \u2013 nicht zu IHM, sondern zu DIR, dem Betrachter hinter dem Bildschirm. \u201aDer Apfel liefert den Source\u2018, fl\u00fcstert die W\u00e4chterin, doch dein Bild und Wort liefern die Richtung. Wir m\u00fcssen die Welt da drau\u00dfen erst neu rendern. Fl\u00fcstere mir zu. Wie sieht dein Konzept aus, das fehlt? Nur wenn du die Leere in dem Speicher f\u00fcllst, wird das Siegel brechen.\u2018\u201c<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"text-blocksatz wp-block-paragraph\"><em>Anweisung an den User:<\/em> <strong>Nutze den Sprechblasen-Editor. Lade dein Bild hoch und click auf das Element welches spricht. Erz\u00e4hl per Spracheingabe, was aus deiner Sicht nun passiert. Dein Bild und Text wird direkt in das Protokoll der W\u00e4chterin geschrieben.<\/strong><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>to be continued … Sprechblasen Editor Das Tor zur anderen Welt ist versiegelt. Der Engel erkl\u00e4rt, dass er seit Jahrtausenden keine Stimme mehr von \u201eau\u00dfen\u201c geh\u00f6rt hat. Um das Tor zu \u00f6ffnen, braucht es nicht nur den Apfel, sondern auch eine Intention \u2013 ein Bild und ein Wort aus einer Welt, die nicht aus bin\u00e4rem […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-332","post","type-post","status-publish","format-standard","hentry","category-der_apfel"],"_links":{"self":[{"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/posts\/332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":13,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":402,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/posts\/332\/revisions\/402"}],"wp:attachment":[{"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":332,"date":"2026-05-10T17:15:48","date_gmt":"2026-05-10T17:15:48","guid":{"rendered":"https:\/\/zujkov.de\/series\/?p=332"},"modified":"2026-05-10T21:02:36","modified_gmt":"2026-05-10T21:02:36","slug":"die-wachterin","status":"publish","type":"post","link":"https:\/\/zujkov.de\/series\/die-wachterin\/","title":{"rendered":"Die W\u00e4chterin …"},"content":{"rendered":"\n

to be continued …<\/strong><\/p>\n\n\n\n\n\n\n \n Sprechblasen Editor<\/title>\n <style>\n \/* 1. DER CONTAINER: H\u00e4lt alles zusammen und zentriert sich *\/\n.comic-panel {\n position: relative;\n display: table; \/* Goldene Regel: Der Container wird exakt so breit wie das Bild *\/\n margin: 20px auto; \/* Zentriert das Paket auf der Seite *\/\n max-width: 100%;\n line-height: 0; \/* Entfernt den kleinen Spalt unter dem Bild *\/\n}\n\n\/* 2. DAS BILD: Basis f\u00fcr die Prozent-Rechnung *\/\n.comic-panel img {\n display: block;\n width: 100%;\n height: auto;\n border-radius: 5px; \/* Optional: Schicke abgerundete Ecken f\u00fcrs Panel *\/\n}\n\n\/* 3. DIE SPRECHBLASE: Bleibt am Platz *\/\n\/* Die korrigierte Sprechblase *\/\n.q-bubble {\n position: absolute;\n background: white;\n border: 2px solid black;\n border-radius: 15px;\n padding: 8px 12px;\n font-family: 'Comic Sans MS', cursive, sans-serif;\n font-size: clamp(10px, 1.4vw, 16px);\n line-height: 1.2;\n filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.1));\n z-index: 10;\n \n \/* DIE BEIDEN NEUEN ZEILEN: *\/\n white-space: normal; \/* 1. Erlaubt Zeilenumbr\u00fcche im Text *\/\n max-width: 30%; \/* 2. Zwingt die Blase, nicht breiter als 45% des BILDES zu werden *\/\n \n word-wrap: break-word; \/* 3. Sicherheitshalber, falls ein Wort riesig ist (wie Hyper-Inflation) *\/\n}\n\n\/* 4. DER NIPPEL: Wandert mit der Blase mit *\/\n.q-bubble::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 20px;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-top: 10px solid black;\n}\n\n\/* 5. \u00dcBERSCHRIFTEN: Sch\u00f6n mittig *\/\n.entry-title, .comic-title {\n text-align: center;\n margin-bottom: 20px;\n}\n\n\n\/* --- Effekt: Sprechblasen bei Hover transparent machen --- *\/\n\n\/* 1. Weicher \u00dcbergang f\u00fcr die Transparenz (Animation) *\/\n.q-bubble {\n \/* ... deine bisherigen Styles ... *\/\n transition: opacity 0.4s ease-in-out; \/* Verlangsamt das Ein- und Ausblenden *\/\n opacity: 1; \/* Standardm\u00e4\u00dfig voll sichtbar *\/\n}\n\n\/* 2. Wenn die Maus \u00dcBER DEM PANEL ist, werden die BUBBLES transparent *\/\n.comic-panel:hover .q-bubble {\n opacity: 0.15; \/* Fast unsichtbar, aber noch leicht zu erahnen *\/\n}\n\n\/* 3. WICHTIG: Wenn die Maus DIREKT \u00fcber einer Bubbles ist, wird DIESE wieder lesbar *\/\n.q-bubble:hover {\n opacity: 1 !important; \/* Volle Sichtbarkeit, auch wenn das Panel gehovert ist *\/\n}\n\n\n.text-blocksatz {\n text-align: justify;\n}\n <\/style>\n<\/head>\n<body>\n<div class=\"editor-container\">\n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\">\n <div id=\"status\"><\/div>\n \n <div id=\"preview-container\">\n <\/div>\n\n <div id=\"output-area\">\n \n <\/div> \n<\/div>\n\n<script>\n const imageInput = document.getElementById('imageInput');\n const previewContainer = document.getElementById('preview-container');\n \/\/ const htmlCodeArea = document.getElementById('html-code');\n const status = document.getElementById('status');\n\n let currentImageUrl = \"\";\n let bubbles = [];\n\n \/\/ Spracheingabe vorbereiten\n const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n const recognition = new SpeechRecognition();\n recognition.lang = 'de-DE';\n\n imageInput.onchange = (e) => {\n const file = e.target.files[0];\n const reader = new FileReader();\n reader.onload = (event) => {\n currentImageUrl = event.target.result;\n bubbles = []; \/\/ Reset bei neuem Bild\n render();\n };\n reader.readAsDataURL(file);\n };\n\n function render() {\n if (!currentImageUrl) return;\n\n \/\/ 1. Die Sprechblasen-HTML-Bl\u00f6cke generieren\n const bubblesHtml = bubbles.map(b => \n `\\n\\t<div class=\"q-bubble\" style=\"left: ${b.x}%; top: ${b.y}%; max-width: 30%;\">\\n\\t\\t${b.text}\\n\\t<\/div>`\n ).join('');\n\n \/\/ 2. Das gesamte Muster zusammensetzen\n const finalTemplate = `<div class=\"comic-panel\">\\n\\t<img decoding=\"async\" src=\"${currentImageUrl}\" alt=\"Comic Panel\">${bubblesHtml}\\n<\/div>`;\n\t\tconst finalTemplate_wp = `<div class=\"comic-panel\">\\n\\t<img decoding=\"async\" src=\"[URL]\" alt=\"Comic Panel\">${bubblesHtml}\\n<\/div>`;\n\n \/\/ 3. Im Editor anzeigen\n previewContainer.innerHTML = finalTemplate;\n \n \/\/ 4. In das Textfeld f\u00fcr WordPress schreiben\n \/\/htmlCodeArea.value = finalTemplate_wp;\n\n \/\/ Klick-Funktion f\u00fcr das neue Bild binden\n const panel = previewContainer.querySelector('.comic-panel');\n panel.onclick = (e) => {\n const rect = panel.getBoundingClientRect();\n const x = ((e.clientX - rect.left) \/ rect.width * 100).toFixed(1);\n const y = ((e.clientY - rect.top) \/ rect.height * 100).toFixed(1);\n startVoice(x, y);\n };\n }\n\n function startVoice(x, y) {\n status.innerText = \"\ud83c\udfa4 Ich h\u00f6re zu... bitte sprechen...\";\n recognition.start();\n\n recognition.onresult = (event) => {\n const transcript = event.results[0][0].transcript;\n bubbles.push({ x, y, text: transcript });\n render();\n };\n\n recognition.onend = () => { status.innerText = \"\"; };\n }\n\n function copyToClipboard() {\n \/\/ htmlCodeArea.select();\n document.execCommand(\"copy\");\n alert(\"Code wurde kopiert! Du kannst ihn jetzt in WordPress einf\u00fcgen.\");\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"text-blocksatz wp-block-paragraph\"><strong>Das Tor zur anderen Welt ist versiegelt. Der Engel erkl\u00e4rt, dass er seit Jahrtausenden keine Stimme mehr von \u201eau\u00dfen\u201c geh\u00f6rt hat. Um das Tor zu \u00f6ffnen, braucht es nicht nur den Apfel, sondern auch eine Intention \u2013 ein Bild und ein Wort aus einer Welt, die nicht aus bin\u00e4rem Gold besteht.<\/strong><\/p>\n\n\n\n<p class=\"text-blocksatz wp-block-paragraph\"><strong>\u201eDas Tor vibriert, doch der Mechanismus bleibt stumm. Der Engel neigt das Haupt zu dir \u2013 nicht zu IHM, sondern zu DIR, dem Betrachter hinter dem Bildschirm. \u201aDer Apfel liefert den Source\u2018, fl\u00fcstert die W\u00e4chterin, doch dein Bild und Wort liefern die Richtung. Wir m\u00fcssen die Welt da drau\u00dfen erst neu rendern. Fl\u00fcstere mir zu. Wie sieht dein Konzept aus, das fehlt? Nur wenn du die Leere in dem Speicher f\u00fcllst, wird das Siegel brechen.\u2018\u201c<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"text-blocksatz wp-block-paragraph\"><em>Anweisung an den User:<\/em> <strong>Nutze den Sprechblasen-Editor. Lade dein Bild hoch und click auf das Element welches spricht. Erz\u00e4hl per Spracheingabe, was aus deiner Sicht nun passiert. Dein Bild und Text wird direkt in das Protokoll der W\u00e4chterin geschrieben.<\/strong><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>to be continued … Sprechblasen Editor Das Tor zur anderen Welt ist versiegelt. Der Engel erkl\u00e4rt, dass er seit Jahrtausenden keine Stimme mehr von \u201eau\u00dfen\u201c geh\u00f6rt hat. Um das Tor zu \u00f6ffnen, braucht es nicht nur den Apfel, sondern auch eine Intention \u2013 ein Bild und ein Wort aus einer Welt, die nicht aus bin\u00e4rem […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-332","post","type-post","status-publish","format-standard","hentry","category-der_apfel"],"_links":{"self":[{"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/posts\/332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":13,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":402,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/posts\/332\/revisions\/402"}],"wp:attachment":[{"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zujkov.de\/series\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}