{"title":"Manga","description":"","products":[{"product_id":"gushing-over-magical-girls-manga-band-1","title":"Gushing Over Magical Girls - Manga - Band 1","description":"\u003cbody\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cstrong data-start=\"190\" data-end=\"247\"\u003eDer Manga zu „Gushing Over Magical Girls“ Band 1\u003c\/strong\u003e erscheint als hochwertige Softcover-Ausgabe im Format 14 x 21 cm mit 144 Seiten und Farbseiten in deutscher Sprache.\u003cbr data-start=\"349\" data-end=\"352\"\u003e – empfohlen ab 16 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit Chibi-Acrylaufsteller ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\n\u003cdiv style=\"text-align:center;margin:16px 0;\"\u003e\n \u003cbutton id=\"openMangaPreview\" style=\"padding:12px 20px;border:0;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-weight:600;\"\u003e\n 📖 Leseprobe anzeigen\n \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"\n position:fixed; inset:0; background:rgba(0,0,0,.95);\n display:none; align-items:center; justify-content:center; z-index:9999;\"\u003e\n \u003c!-- Controls --\u003e\n \u003cdiv style=\"position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10000;\"\u003e\n \u003cbutton id=\"fullscreenBtn\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e\n \u003cbutton id=\"closeManga\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003c!-- Page indicator --\u003e\n \u003cdiv id=\"pageIndicator\" style=\"\n position:fixed;bottom:16px;left:50%;transform:translateX(-50%);\n background:rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font:600 12px\/1.2 system-ui,sans-serif;\"\u003e\n –\n \u003c\/div\u003e\n\n \u003c!-- Container (max 1200px) --\u003e\n \u003cdiv id=\"mangaStage\" style=\"\n width:min(92vw,1200px); height:88vh; display:flex; align-items:center; justify-content:center; gap:0;\"\u003e\n \u003c!-- Seiten werden per JS eingefügt --\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* --- Seitenliste (ALLE 28) --- *\/\nconst PAGES = [\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Band1_2D_Cover.png?v=1754574873\", \/\/ Cover (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-01.png?v=1755182530\", \/\/ Seite 1 (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-02.png?v=1755182528\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-03.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-04.png?v=1755182532\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-05.png?v=1755182532\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-06.png?v=1755182532\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-07.png?v=1755182532\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-08.png?v=1755182530\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-09.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-10.png?v=1755182529\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-11.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-12.png?v=1755182532\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-13.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-14.png?v=1755182529\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-15.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-16.png?v=1755182530\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-17.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-18.png?v=1755182530\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-19.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-20.png?v=1755182530\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-21.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-22.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-23.png?v=1755182532\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-24.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-25.png?v=1755182531\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-26.png?v=1755182530\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-27.png?v=1755182529\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Manga_Vol.1_Kapitel_1_shop-28.png?v=1755182528\" \/\/ Letzte Seite (Einzelseite)\n];\n\n\/* --- DOM --- *\/\nconst overlay = document.getElementById('mangaOverlay');\nconst stage = document.getElementById('mangaStage');\nconst openBtn = document.getElementById('openMangaPreview');\nconst closeBtn= document.getElementById('closeManga');\nconst fsBtn = document.getElementById('fullscreenBtn');\nconst indicator = document.getElementById('pageIndicator');\n\n\/* --- Mobile Erkennung --- *\/\nfunction isMobile() {\n return window.innerWidth \u003c= 768;\n}\n\n\/* --- Helper: Single\/Dual Page Regeln (für Desktop) --- *\/\nfunction isSingle(index) {\n return index === 0 || index === 1 || index === PAGES.length - 1;\n}\n\n\/* --- State --- *\/\nlet logicalIndex = 0; \/\/ zeigt auf die \"rechte\" Seite einer Doppelseite (Manga)\nlet touchStartX = null;\n\n\/* --- Render (unterscheidet zwischen Desktop und Mobile) --- *\/\nfunction render() {\n stage.innerHTML = '';\n stage.style.display = 'flex';\n stage.style.justifyContent = 'center';\n stage.style.alignItems = 'center';\n stage.style.gap = '0';\n \n const H = stage.clientHeight;\n \n if (isMobile()) {\n \/\/ Mobile: Einzelseite mit natürlichen Proportionen\n const img = makeImg(PAGES[logicalIndex], H, true);\n stage.appendChild(img);\n indicator.textContent = `Seite ${logicalIndex + 1} \/ ${PAGES.length}`;\n } else {\n \/\/ Desktop: Original-Doppelseiten-Logik\n \/\/ Einzelseite (Cover \/ Seite 1 \/ letzte)\n if (isSingle(logicalIndex) || logicalIndex \u003e= PAGES.length) {\n const img = makeImg(PAGES[Math.min(logicalIndex, PAGES.length-1)], H, false);\n stage.appendChild(img);\n indicator.textContent = `Seite ${Math.min(logicalIndex+1, PAGES.length)} \/ ${PAGES.length}`;\n return;\n }\n \n \/\/ Doppelseite: Original-Reihenfolge\n const right = makeImg(PAGES[logicalIndex + 1], H, false);\n const left = (logicalIndex + 1 \u003c PAGES.length) ? makeImg(PAGES[logicalIndex], H, false) : null;\n \n stage.appendChild(right);\n if (left) stage.appendChild(left);\n \n const shownCount = Math.min(logicalIndex + (left?2:1), PAGES.length);\n indicator.textContent = `Seite ${shownCount} \/ ${PAGES.length}`;\n }\n}\n\nfunction makeImg(src, maxH, isMobile){\n const img = document.createElement('img');\n img.src = src;\n img.alt = 'Manga-Seite';\n img.draggable = false;\n img.oncontextmenu = () =\u003e false;\n \n if (isMobile) {\n \/\/ Mobile: Natürliche Proportionen, nicht strecken\n Object.assign(img.style, {\n maxHeight: '100%',\n maxWidth: '100%',\n width: 'auto',\n height: 'auto',\n display: 'block',\n objectFit: 'contain',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n } else {\n \/\/ Desktop: Original-Styling\n Object.assign(img.style, {\n maxHeight: maxH + 'px',\n height: '100%',\n width: 'auto',\n display: 'block',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n }\n \n return img;\n}\n\n\/* --- Navigation für Desktop (Original-Doppelseiten-Logik) --- *\/\nfunction nextSpread() {\n if (logicalIndex === 0) { \/\/ Cover -\u003e Seite 1\n logicalIndex = 1;\n } else if (logicalIndex === 1) { \/\/ Seite 1 -\u003e erste Doppelseite\n logicalIndex = 2;\n } else if (logicalIndex + 2 \u003c PAGES.length - 1) { \/\/ normale Doppelseiten\n logicalIndex += 2;\n } else {\n logicalIndex = PAGES.length - 1; \/\/ letzte Einzelseite\n }\n render();\n}\n\nfunction prevSpread() {\n if (logicalIndex === PAGES.length - 1) { \/\/ letzte -\u003e letzte Dopp.\n logicalIndex = PAGES.length - 3;\n } else if (logicalIndex \u003e 2) { \/\/ normale Dopp. zurück\n logicalIndex -= 2;\n } else if (logicalIndex === 2) { \/\/ erste Dopp. -\u003e Seite 1\n logicalIndex = 1;\n } else {\n logicalIndex = 0; \/\/ Seite 1 -\u003e Cover\n }\n render();\n}\n\n\/* --- Navigation für Mobile (Einzelseiten) --- *\/\nfunction nextPage() {\n if (logicalIndex \u003c PAGES.length - 1) {\n logicalIndex++;\n render();\n }\n}\n\nfunction prevPage() {\n if (logicalIndex \u003e 0) {\n logicalIndex--;\n render();\n }\n}\n\n\/* --- Events --- *\/\nopenBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'flex';\n logicalIndex = 0;\n render();\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n});\n\nfsBtn.addEventListener('click', () =\u003e {\n if (!document.fullscreenElement) {\n overlay.requestFullscreen?.();\n } else {\n document.exitFullscreen?.();\n }\n});\n\n\/* Klick: unterschiedliche Logik für Mobile\/Desktop *\/\noverlay.addEventListener('click', (e) =\u003e {\n const ctrlClicked = e.target === closeBtn || e.target === fsBtn;\n if (ctrlClicked) return;\n \n const mid = window.innerWidth \/ 2;\n \n if (isMobile()) {\n if (e.clientX \u003c mid) prevPage();\n else nextPage();\n } else {\n \/\/ Original Desktop-Logik: Links = vorwärts, Rechts = zurück\n if (e.clientX \u003c mid) nextSpread();\n else prevSpread();\n }\n});\n\n\/* Pfeiltasten: unterschiedliche Logik für Mobile\/Desktop *\/\ndocument.addEventListener('keydown', (e) =\u003e {\n if (overlay.style.display !== 'flex') return;\n \n if (isMobile()) {\n if (e.key === 'ArrowLeft') prevPage();\n if (e.key === 'ArrowRight') nextPage();\n } else {\n \/\/ Original Desktop-Logik\n if (e.key === 'ArrowLeft') nextSpread();\n if (e.key === 'ArrowRight') prevSpread();\n }\n \n if (e.key === 'Escape') {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n});\n\n\/* Swipe (Touch): nur für Mobile *\/\noverlay.addEventListener('touchstart', (e) =\u003e { \n if (e.touches[0]) touchStartX = e.touches[0].clientX; \n}, {passive:true});\n\noverlay.addEventListener('touchend', (e) =\u003e {\n if (touchStartX === null || !isMobile()) return;\n \n const endX = e.changedTouches[0]?.clientX ?? touchStartX;\n const dx = endX - touchStartX;\n const TH = 40;\n \n if (dx \u003e TH) prevPage();\n else if (dx \u003c -TH) nextPage();\n \n touchStartX = null;\n}, {passive:true});\n\n\/* Resize anpassen *\/\nwindow.addEventListener('resize', render);\n\n\/* Rechtsklick blockieren *\/\noverlay.addEventListener('contextmenu', (e) =\u003e e.preventDefault());\n\n\/* Ein bisschen Vorladen rund um die aktuellen Seiten *\/\nfunction preloadAround(idx){\n const list = [idx-2, idx-1, idx, idx+1, idx+2, PAGES.length-1];\n list.forEach(i=\u003e{\n if (i\u003e=0 \u0026\u0026 i\u003cPAGES.length){\n const img = new Image();\n img.src = PAGES[i];\n }\n });\n}\n\n\/\/ Initial vorladen\npreloadAround(0);\n\u003c\/script\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e\n\u003c\/body\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 1","offer_id":55932225782025,"sku":"978-3-69194-000-8","price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 1 Limited Edition mit Acrylaufsteller","offer_id":55932225814793,"sku":null,"price":20.0,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Band1.png?v=1758280756"},{"product_id":"yandere-dark-elf-manga-band-1","title":"Yandere Dark Elf - Manga - Band 1","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-end=\"472\" data-start=\"190\"\u003e\u003cstrong data-end=\"247\" data-start=\"190\"\u003eDer Manga zu „Yandere Dark Elf: Sie verfolgte mich den ganze Weg aus einer anderen Welt!“ Band 1\u003c\/strong\u003e erscheint als hochwertige Softcover-Ausgabe im Format 14 x 21 cm mit 144 Seiten in deutscher Sprache.\u003cbr data-end=\"352\" data-start=\"349\"\u003e – empfohlen ab 16 Jahren.\u003c\/p\u003e\n\u003cp data-end=\"472\" data-start=\"190\"\u003e\u003cem\u003eDie Limited Edition mit Acrylaufsteller ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\n\u003cdiv style=\"text-align:center;margin:16px 0;\"\u003e\n \u003cbutton id=\"openMangaPreview\" style=\"padding:12px 20px;border:0;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-weight:600;\"\u003e 📖 Leseprobe anzeigen \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"position:fixed; inset:0; background:rgba(0,0,0,.95); display:none; align-items:center; justify-content:center; z-index:9999;\"\u003e\n \u003c!-- Controls --\u003e\n \u003cdiv style=\"position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10000;\"\u003e\n \u003cbutton id=\"fullscreenBtn\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e\n \u003cbutton id=\"closeManga\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n \u003c\/div\u003e\n \n \u003c!-- Page indicator --\u003e\n \u003cdiv id=\"pageIndicator\" style=\"position:fixed;bottom:16px;left:50%;transform:translateX(-50%); background:rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font:600 12px\/1.2 system-ui,sans-serif;\"\u003e – \u003c\/div\u003e\n \n \u003c!-- Container (max 1200px) --\u003e\n \u003cdiv id=\"mangaStage\" style=\"width:min(92vw,1200px); height:88vh; display:flex; align-items:center; justify-content:center; gap:0;\"\u003e\n \u003c!-- Seiten werden per JS eingefügt --\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* --- Seitenliste (NEUE 31 Seiten) --- *\/\nconst PAGES = [\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Band1_2D_Cover.png?v=1754574903\", \/\/ Cover (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-01.png?v=1755200379\", \/\/ Seite 1 (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-02.png?v=1755200377\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-03.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-04.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-05.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-06.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-07.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-08.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-09.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-10.png?v=1755200379\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-11.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-12.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-13.png?v=1755200379\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-14.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-15.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-16.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-17.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-18.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-19.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-20.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-21.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-22.png?v=1755200379\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-23.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-24.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-25.png?v=1755200379\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-26.png?v=1755200381\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-27.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-28.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-29.png?v=1755200380\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Manga_Vol.1_Kapitel_1_shop-30.png?v=1755200381\" \/\/ Letzte Seite (Einzelseite)\n];\n\n\/* --- DOM --- *\/\nconst overlay = document.getElementById('mangaOverlay');\nconst stage = document.getElementById('mangaStage');\nconst openBtn = document.getElementById('openMangaPreview');\nconst closeBtn= document.getElementById('closeManga');\nconst fsBtn = document.getElementById('fullscreenBtn');\nconst indicator = document.getElementById('pageIndicator');\n\n\/* --- Mobile Erkennung --- *\/\nfunction isMobile() {\n return window.innerWidth \u003c= 768;\n}\n\n\/* --- State --- *\/\nlet logicalIndex = 0;\nlet touchStartX = null;\n\n\/* --- Render (unterscheidet zwischen Desktop und Mobile) --- *\/\nfunction render() {\n stage.innerHTML = '';\n stage.style.display = 'flex';\n stage.style.justifyContent = 'center';\n stage.style.alignItems = 'center';\n stage.style.gap = '0';\n \n const H = stage.clientHeight;\n \n if (isMobile()) {\n \/\/ Mobile: Einzelseite mit natürlichen Proportionen\n const img = makeImg(PAGES[logicalIndex], H, true);\n stage.appendChild(img);\n indicator.textContent = `Seite ${logicalIndex + 1} \/ ${PAGES.length}`;\n } else {\n \/\/ Desktop: Original-Doppelseiten-Logik\n \/\/ Einzelseite (Cover \/ Seite 1 \/ letzte)\n if (isSingle(logicalIndex) || logicalIndex \u003e= PAGES.length) {\n const img = makeImg(PAGES[Math.min(logicalIndex, PAGES.length-1)], H, false);\n stage.appendChild(img);\n indicator.textContent = `Seite ${Math.min(logicalIndex+1, PAGES.length)} \/ ${PAGES.length}`;\n return;\n }\n \n \/\/ Doppelseite: Original-Reihenfolge\n const right = makeImg(PAGES[logicalIndex + 1], H, false);\n const left = (logicalIndex + 1 \u003c PAGES.length) ? makeImg(PAGES[logicalIndex], H, false) : null;\n \n stage.appendChild(right);\n if (left) stage.appendChild(left);\n \n const shownCount = Math.min(logicalIndex + (left?2:1), PAGES.length);\n indicator.textContent = `Seite ${shownCount} \/ ${PAGES.length}`;\n }\n}\n\nfunction makeImg(src, maxH, isMobile){\n const img = document.createElement('img');\n img.src = src;\n img.alt = 'Manga-Seite';\n img.draggable = false;\n img.oncontextmenu = () =\u003e false;\n \n if (isMobile) {\n \/\/ Mobile: Natürliche Proportionen, nicht strecken\n Object.assign(img.style, {\n maxHeight: '100%',\n maxWidth: '100%',\n width: 'auto',\n height: 'auto',\n display: 'block',\n objectFit: 'contain',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n } else {\n \/\/ Desktop: Original-Styling\n Object.assign(img.style, {\n maxHeight: maxH + 'px',\n height: '100%',\n width: 'auto',\n display: 'block',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n }\n \n return img;\n}\n\n\/* --- Helper: Single\/Dual Page Regeln (für Desktop) --- *\/\nfunction isSingle(index) {\n return index === 0 || index === 1 || index === PAGES.length - 1;\n}\n\n\/* --- Navigation für Desktop (Original-Doppelseiten-Logik) --- *\/\nfunction nextSpread() {\n if (logicalIndex === 0) { \/\/ Cover -\u003e Seite 1\n logicalIndex = 1;\n } else if (logicalIndex === 1) { \/\/ Seite 1 -\u003e erste Doppelseite\n logicalIndex = 2;\n } else if (logicalIndex + 2 \u003c PAGES.length - 1) { \/\/ normale Doppelseiten\n logicalIndex += 2;\n } else {\n logicalIndex = PAGES.length - 1; \/\/ letzte Einzelseite\n }\n render();\n}\n\nfunction prevSpread() {\n if (logicalIndex === PAGES.length - 1) { \/\/ letzte -\u003e letzte Dopp.\n logicalIndex = PAGES.length - 3;\n } else if (logicalIndex \u003e 2) { \/\/ normale Dopp. zurück\n logicalIndex -= 2;\n } else if (logicalIndex === 2) { \/\/ erste Dopp. -\u003e Seite 1\n logicalIndex = 1;\n } else {\n logicalIndex = 0; \/\/ Seite 1 -\u003e Cover\n }\n render();\n}\n\n\/* --- Navigation für Mobile (Einzelseiten) --- *\/\nfunction nextPage() {\n if (logicalIndex \u003c PAGES.length - 1) {\n logicalIndex++;\n render();\n }\n}\n\nfunction prevPage() {\n if (logicalIndex \u003e 0) {\n logicalIndex--;\n render();\n }\n}\n\n\/* --- Events --- *\/\nopenBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'flex';\n logicalIndex = 0;\n render();\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n});\n\nfsBtn.addEventListener('click', () =\u003e {\n if (!document.fullscreenElement) {\n overlay.requestFullscreen?.();\n } else {\n document.exitFullscreen?.();\n }\n});\n\n\/* Klick: unterschiedliche Logik für Mobile\/Desktop *\/\noverlay.addEventListener('click', (e) =\u003e {\n const ctrlClicked = e.target === closeBtn || e.target === fsBtn;\n if (ctrlClicked) return;\n \n const mid = window.innerWidth \/ 2;\n \n if (isMobile()) {\n if (e.clientX \u003c mid) prevPage();\n else nextPage();\n } else {\n \/\/ Original Desktop-Logik: Links = vorwärts, Rechts = zurück\n if (e.clientX \u003c mid) nextSpread();\n else prevSpread();\n }\n});\n\n\/* Pfeiltasten: unterschiedliche Logik für Mobile\/Desktop *\/\ndocument.addEventListener('keydown', (e) =\u003e {\n if (overlay.style.display !== 'flex') return;\n \n if (isMobile()) {\n if (e.key === 'ArrowLeft') prevPage();\n if (e.key === 'ArrowRight') nextPage();\n } else {\n \/\/ Original Desktop-Logik\n if (e.key === 'ArrowLeft') nextSpread();\n if (e.key === 'ArrowRight') prevSpread();\n }\n \n if (e.key === 'Escape') {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n});\n\n\/* Swipe (Touch): nur für Mobile *\/\noverlay.addEventListener('touchstart', (e) =\u003e {\n if (e.touches[0]) touchStartX = e.touches[0].clientX;\n}, {passive: true});\n\noverlay.addEventListener('touchend', (e) =\u003e {\n if (touchStartX === null || !isMobile()) return;\n \n const endX = e.changedTouches[0]?.clientX ?? touchStartX;\n const dx = endX - touchStartX;\n const TH = 40;\n \n if (dx \u003e TH) prevPage();\n else if (dx \u003c -TH) nextPage();\n \n touchStartX = null;\n}, {passive: true});\n\n\/* Resize anpassen *\/\nwindow.addEventListener('resize', render);\n\n\/* Rechtsklick blockieren *\/\noverlay.addEventListener('contextmenu', (e) =\u003e e.preventDefault());\n\n\/* Alle Bilder vorladen für bessere Performance *\/\nfunction preloadImages() {\n PAGES.forEach(url =\u003e {\n const img = new Image();\n img.src = url;\n });\n}\n\n\/\/ Initial vorladen\npreloadImages();\n\u003c\/script\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 1","offer_id":55932910338313,"sku":"978-3-69194-005-3","price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 1 Limited Edition mit Acrylaufsteller","offer_id":55948645040393,"sku":null,"price":23.0,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band1_1.png?v=1753444974"},{"product_id":"gushing-over-magical-girls-manga-band-2","title":"Gushing Over Magical Girls - Manga - Band 2","description":"\n\u003cp\u003e \u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eDer Manga zu „Gushing Over Magical Girls“ Band 2\u003c\/strong\u003e erscheint als hochwertige Softcover-Ausgabe im Format 14 x 21 cm mit 144 Seiten in deutscher Sprache.\u003cbr\u003e – empfohlen ab 16 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit Chibi-Acrylaufsteller ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\n\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\n\u003cdiv style=\"text-align:center;margin:16px 0;\"\u003e\n \u003cbutton id=\"openMangaPreview\" style=\"padding:12px 20px;border:0;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-weight:600;\"\u003e\n 📖 Leseprobe anzeigen\n \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"\n position:fixed; inset:0; background:rgba(0,0,0,.95);\n display:none; align-items:center; justify-content:center; z-index:9999;\"\u003e\n \u003c!-- Controls --\u003e\n \u003cdiv style=\"position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10000;\"\u003e\n \u003cbutton id=\"fullscreenBtn\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e\n \u003cbutton id=\"closeManga\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003c!-- Page indicator --\u003e\n \u003cdiv id=\"pageIndicator\" style=\"\n position:fixed;bottom:16px;left:50%;transform:translateX(-50%);\n background:rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font:600 12px\/1.2 system-ui,sans-serif;\"\u003e\n –\n \u003c\/div\u003e\n\n \u003c!-- Container (max 1200px) --\u003e\n \u003cdiv id=\"mangaStage\" style=\"\n width:min(92vw,1200px); height:88vh; display:flex; align-items:center; justify-content:center; gap:0;\"\u003e\n \u003c!-- Seiten werden per JS eingefügt --\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* --- Seitenliste (ALLE 28) --- *\/\nconst PAGES = [\n\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band2_2DCover.png?v=1774558933\", \/\/ Cover (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel6.jpg?v=1776777080\", \/\/ Seite 1 (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel62.jpg?v=1776777076\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel63.jpg?v=1776777081\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel64.jpg?v=1776777082\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel65.jpg?v=1776777084\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel66.jpg?v=1776777084\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel67.jpg?v=1776777084\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel68.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel69.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel610.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel611.jpg?v=1776777084\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel612.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel613.jpg?v=1776777082\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel614.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel615.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel616.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel617.jpg?v=1776777084\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel618.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel619.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel620.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel621.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel622.jpg?v=1776777084\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel623.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel624.jpg?v=1776777085\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel625.jpg?v=1776777084\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Gushing_Vol2_dt_GF_Kapitel626.jpg?v=1776777083\" \/\/ Letzte Seite (Einzelseite)\n];\n\n\/* --- DOM --- *\/\nconst overlay = document.getElementById('mangaOverlay');\nconst stage = document.getElementById('mangaStage');\nconst openBtn = document.getElementById('openMangaPreview');\nconst closeBtn= document.getElementById('closeManga');\nconst fsBtn = document.getElementById('fullscreenBtn');\nconst indicator = document.getElementById('pageIndicator');\n\n\/* --- Mobile Erkennung --- *\/\nfunction isMobile() {\n return window.innerWidth \u003c= 768;\n}\n\n\/* --- Helper: Single\/Dual Page Regeln (für Desktop) --- *\/\nfunction isSingle(index) {\n return index === 0 || index === 1 || index === PAGES.length - 1;\n}\n\n\/* --- State --- *\/\nlet logicalIndex = 0; \/\/ zeigt auf die \"rechte\" Seite einer Doppelseite (Manga)\nlet touchStartX = null;\n\n\/* --- Render (unterscheidet zwischen Desktop und Mobile) --- *\/\nfunction render() {\n stage.innerHTML = '';\n stage.style.display = 'flex';\n stage.style.justifyContent = 'center';\n stage.style.alignItems = 'center';\n stage.style.gap = '0';\n \n const H = stage.clientHeight;\n \n if (isMobile()) {\n \/\/ Mobile: Einzelseite mit natürlichen Proportionen\n const img = makeImg(PAGES[logicalIndex], H, true);\n stage.appendChild(img);\n indicator.textContent = `Seite ${logicalIndex + 1} \/ ${PAGES.length}`;\n } else {\n \/\/ Desktop: Original-Doppelseiten-Logik\n \/\/ Einzelseite (Cover \/ Seite 1 \/ letzte)\n if (isSingle(logicalIndex) || logicalIndex \u003e= PAGES.length) {\n const img = makeImg(PAGES[Math.min(logicalIndex, PAGES.length-1)], H, false);\n stage.appendChild(img);\n indicator.textContent = `Seite ${Math.min(logicalIndex+1, PAGES.length)} \/ ${PAGES.length}`;\n return;\n }\n \n \/\/ Doppelseite: Original-Reihenfolge\n const right = makeImg(PAGES[logicalIndex + 1], H, false);\n const left = (logicalIndex + 1 \u003c PAGES.length) ? makeImg(PAGES[logicalIndex], H, false) : null;\n \n stage.appendChild(right);\n if (left) stage.appendChild(left);\n \n const shownCount = Math.min(logicalIndex + (left?2:1), PAGES.length);\n indicator.textContent = `Seite ${shownCount} \/ ${PAGES.length}`;\n }\n}\n\nfunction makeImg(src, maxH, isMobile){\n const img = document.createElement('img');\n img.src = src;\n img.alt = 'Manga-Seite';\n img.draggable = false;\n img.oncontextmenu = () =\u003e false;\n \n if (isMobile) {\n \/\/ Mobile: Natürliche Proportionen, nicht strecken\n Object.assign(img.style, {\n maxHeight: '100%',\n maxWidth: '100%',\n width: 'auto',\n height: 'auto',\n display: 'block',\n objectFit: 'contain',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n } else {\n \/\/ Desktop: Original-Styling\n Object.assign(img.style, {\n maxHeight: maxH + 'px',\n height: '100%',\n width: 'auto',\n display: 'block',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n }\n \n return img;\n}\n\n\/* --- Navigation für Desktop (Original-Doppelseiten-Logik) --- *\/\nfunction nextSpread() {\n if (logicalIndex === 0) { \/\/ Cover -\u003e Seite 1\n logicalIndex = 1;\n } else if (logicalIndex === 1) { \/\/ Seite 1 -\u003e erste Doppelseite\n logicalIndex = 2;\n } else if (logicalIndex + 2 \u003c PAGES.length - 1) { \/\/ normale Doppelseiten\n logicalIndex += 2;\n } else {\n logicalIndex = PAGES.length - 1; \/\/ letzte Einzelseite\n }\n render();\n}\n\nfunction prevSpread() {\n if (logicalIndex === PAGES.length - 1) { \/\/ letzte -\u003e letzte Dopp.\n logicalIndex = PAGES.length - 3;\n } else if (logicalIndex \u003e 2) { \/\/ normale Dopp. zurück\n logicalIndex -= 2;\n } else if (logicalIndex === 2) { \/\/ erste Dopp. -\u003e Seite 1\n logicalIndex = 1;\n } else {\n logicalIndex = 0; \/\/ Seite 1 -\u003e Cover\n }\n render();\n}\n\n\/* --- Navigation für Mobile (Einzelseiten) --- *\/\nfunction nextPage() {\n if (logicalIndex \u003c PAGES.length - 1) {\n logicalIndex++;\n render();\n }\n}\n\nfunction prevPage() {\n if (logicalIndex \u003e 0) {\n logicalIndex--;\n render();\n }\n}\n\n\/* --- Events --- *\/\nopenBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'flex';\n logicalIndex = 0;\n render();\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n});\n\nfsBtn.addEventListener('click', () =\u003e {\n if (!document.fullscreenElement) {\n overlay.requestFullscreen?.();\n } else {\n document.exitFullscreen?.();\n }\n});\n\n\/* Klick: unterschiedliche Logik für Mobile\/Desktop *\/\noverlay.addEventListener('click', (e) =\u003e {\n const ctrlClicked = e.target === closeBtn || e.target === fsBtn;\n if (ctrlClicked) return;\n \n const mid = window.innerWidth \/ 2;\n \n if (isMobile()) {\n if (e.clientX \u003c mid) prevPage();\n else nextPage();\n } else {\n \/\/ Original Desktop-Logik: Links = vorwärts, Rechts = zurück\n if (e.clientX \u003c mid) nextSpread();\n else prevSpread();\n }\n});\n\n\/* Pfeiltasten: unterschiedliche Logik für Mobile\/Desktop *\/\ndocument.addEventListener('keydown', (e) =\u003e {\n if (overlay.style.display !== 'flex') return;\n \n if (isMobile()) {\n if (e.key === 'ArrowLeft') prevPage();\n if (e.key === 'ArrowRight') nextPage();\n } else {\n \/\/ Original Desktop-Logik\n if (e.key === 'ArrowLeft') nextSpread();\n if (e.key === 'ArrowRight') prevSpread();\n }\n \n if (e.key === 'Escape') {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n});\n\n\/* Swipe (Touch): nur für Mobile *\/\noverlay.addEventListener('touchstart', (e) =\u003e { \n if (e.touches[0]) touchStartX = e.touches[0].clientX; \n}, {passive:true});\n\noverlay.addEventListener('touchend', (e) =\u003e {\n if (touchStartX === null || !isMobile()) return;\n \n const endX = e.changedTouches[0]?.clientX ?? touchStartX;\n const dx = endX - touchStartX;\n const TH = 40;\n \n if (dx \u003e TH) prevPage();\n else if (dx \u003c -TH) nextPage();\n \n touchStartX = null;\n}, {passive:true});\n\n\/* Resize anpassen *\/\nwindow.addEventListener('resize', render);\n\n\/* Rechtsklick blockieren *\/\noverlay.addEventListener('contextmenu', (e) =\u003e e.preventDefault());\n\n\/* Ein bisschen Vorladen rund um die aktuellen Seiten *\/\nfunction preloadAround(idx){\n const list = [idx-2, idx-1, idx, idx+1, idx+2, PAGES.length-1];\n list.forEach(i=\u003e{\n if (i\u003e=0 \u0026\u0026 i\u003cPAGES.length){\n const img = new Image();\n img.src = PAGES[i];\n }\n });\n}\n\n\/\/ Initial vorladen\npreloadAround(0);\n\u003c\/script\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e\n","brand":"AniMoon Shop","offers":[{"title":"Band 2","offer_id":56155584102665,"sku":"978-3-69194-001-5","price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 2 Limited Edition mit Acrylaufsteller","offer_id":56155584135433,"sku":null,"price":20.0,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band2.png?v=1758281864"},{"product_id":"yandere-dark-elf-manga-band-2","title":"Yandere Dark Elf - Manga - Band 2","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cstrong data-start=\"190\" data-end=\"247\"\u003eDer Manga zu „Yandere Dark Elf: Sie verfolgte mich den ganze Weg aus einer anderen Welt!“ Band 2\u003c\/strong\u003e erscheint als hochwertige Softcover-Ausgabe im Format 14 x 21 cm mit 144 Seiten in deutscher Sprache.\u003cbr data-start=\"349\" data-end=\"352\"\u003e – empfohlen ab 16 Jahren.\u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cem\u003eDie Limited Edition mit Acrylaufsteller ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\n\n\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\n\u003cdiv style=\"text-align:center;margin:16px 0;\"\u003e\n \u003cbutton id=\"openMangaPreview\" style=\"padding:12px 20px;border:0;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-weight:600;\"\u003e\n 📖 Leseprobe anzeigen\n \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"\n position:fixed; inset:0; background:rgba(0,0,0,.95);\n display:none; align-items:center; justify-content:center; z-index:9999;\"\u003e\n \u003c!-- Controls --\u003e\n \u003cdiv style=\"position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10000;\"\u003e\n \u003cbutton id=\"fullscreenBtn\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e\n \u003cbutton id=\"closeManga\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003c!-- Page indicator --\u003e\n \u003cdiv id=\"pageIndicator\" style=\"\n position:fixed;bottom:16px;left:50%;transform:translateX(-50%);\n background:rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font:600 12px\/1.2 system-ui,sans-serif;\"\u003e\n –\n \u003c\/div\u003e\n\n \u003c!-- Container (max 1200px) --\u003e\n \u003cdiv id=\"mangaStage\" style=\"\n width:min(92vw,1200px); height:88vh; display:flex; align-items:center; justify-content:center; gap:0;\"\u003e\n \u003c!-- Seiten werden per JS eingefügt --\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* --- Seitenliste (ALLE 28) --- *\/\nconst PAGES = [\n\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band2_2DCover_22a7583c-a4c6-49fc-9877-6fa66e69592a.png?v=1774558892\", \/\/ Cover (Einzelseite)\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF.jpg?v=1776778028\", \/\/ Seite 1 (Einzelseite)\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF2.jpg?v=1776778027\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF3.jpg?v=1776778035\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF4.jpg?v=1776778035\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF5.jpg?v=1776778034\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF6.jpg?v=1776778034\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF7.jpg?v=1776778034\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF8.jpg?v=1776778034\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF9.jpg?v=1776778034\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF10.jpg?v=1776778035\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF11.jpg?v=1776778033\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF12.jpg?v=1776778034\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF13.jpg?v=1776778034\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF14.jpg?v=1776778034\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF15.jpg?v=1776778035\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF16.jpg?v=1776778034\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF17.jpg?v=1776778033\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF18.jpg?v=1776778034\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF19.jpg?v=1776778035\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF20.jpg?v=1776778033\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF21.jpg?v=1776778035\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF22.jpg?v=1776778035\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF23.jpg?v=1776778035\",\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Yandere_Dark_Elf_Vol2_dt._Kapitel_7_GF24.jpg?v=1776778034\" \/\/ Letzte Seite\n];\n\n\/* --- DOM --- *\/\nconst overlay = document.getElementById('mangaOverlay');\nconst stage = document.getElementById('mangaStage');\nconst openBtn = document.getElementById('openMangaPreview');\nconst closeBtn= document.getElementById('closeManga');\nconst fsBtn = document.getElementById('fullscreenBtn');\nconst indicator = document.getElementById('pageIndicator');\n\n\/* --- Mobile Erkennung --- *\/\nfunction isMobile() {\n return window.innerWidth \u003c= 768;\n}\n\n\/* --- Helper: Single\/Dual Page Regeln (für Desktop) --- *\/\nfunction isSingle(index) {\n return index === 0 || index === 1 || index === PAGES.length - 1;\n}\n\n\/* --- State --- *\/\nlet logicalIndex = 0; \/\/ zeigt auf die \"rechte\" Seite einer Doppelseite (Manga)\nlet touchStartX = null;\n\n\/* --- Render (unterscheidet zwischen Desktop und Mobile) --- *\/\nfunction render() {\n stage.innerHTML = '';\n stage.style.display = 'flex';\n stage.style.justifyContent = 'center';\n stage.style.alignItems = 'center';\n stage.style.gap = '0';\n \n const H = stage.clientHeight;\n \n if (isMobile()) {\n \/\/ Mobile: Einzelseite mit natürlichen Proportionen\n const img = makeImg(PAGES[logicalIndex], H, true);\n stage.appendChild(img);\n indicator.textContent = `Seite ${logicalIndex + 1} \/ ${PAGES.length}`;\n } else {\n \/\/ Desktop: Original-Doppelseiten-Logik\n \/\/ Einzelseite (Cover \/ Seite 1 \/ letzte)\n if (isSingle(logicalIndex) || logicalIndex \u003e= PAGES.length) {\n const img = makeImg(PAGES[Math.min(logicalIndex, PAGES.length-1)], H, false);\n stage.appendChild(img);\n indicator.textContent = `Seite ${Math.min(logicalIndex+1, PAGES.length)} \/ ${PAGES.length}`;\n return;\n }\n \n \/\/ Doppelseite: Original-Reihenfolge\n const right = makeImg(PAGES[logicalIndex + 1], H, false);\n const left = (logicalIndex + 1 \u003c PAGES.length) ? makeImg(PAGES[logicalIndex], H, false) : null;\n \n stage.appendChild(right);\n if (left) stage.appendChild(left);\n \n const shownCount = Math.min(logicalIndex + (left?2:1), PAGES.length);\n indicator.textContent = `Seite ${shownCount} \/ ${PAGES.length}`;\n }\n}\n\nfunction makeImg(src, maxH, isMobile){\n const img = document.createElement('img');\n img.src = src;\n img.alt = 'Manga-Seite';\n img.draggable = false;\n img.oncontextmenu = () =\u003e false;\n \n if (isMobile) {\n \/\/ Mobile: Natürliche Proportionen, nicht strecken\n Object.assign(img.style, {\n maxHeight: '100%',\n maxWidth: '100%',\n width: 'auto',\n height: 'auto',\n display: 'block',\n objectFit: 'contain',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n } else {\n \/\/ Desktop: Original-Styling\n Object.assign(img.style, {\n maxHeight: maxH + 'px',\n height: '100%',\n width: 'auto',\n display: 'block',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n }\n \n return img;\n}\n\n\/* --- Navigation für Desktop (Original-Doppelseiten-Logik) --- *\/\nfunction nextSpread() {\n if (logicalIndex === 0) { \/\/ Cover -\u003e Seite 1\n logicalIndex = 1;\n } else if (logicalIndex === 1) { \/\/ Seite 1 -\u003e erste Doppelseite\n logicalIndex = 2;\n } else if (logicalIndex + 2 \u003c PAGES.length - 1) { \/\/ normale Doppelseiten\n logicalIndex += 2;\n } else {\n logicalIndex = PAGES.length - 1; \/\/ letzte Einzelseite\n }\n render();\n}\n\nfunction prevSpread() {\n if (logicalIndex === PAGES.length - 1) { \/\/ letzte -\u003e letzte Dopp.\n logicalIndex = PAGES.length - 3;\n } else if (logicalIndex \u003e 2) { \/\/ normale Dopp. zurück\n logicalIndex -= 2;\n } else if (logicalIndex === 2) { \/\/ erste Dopp. -\u003e Seite 1\n logicalIndex = 1;\n } else {\n logicalIndex = 0; \/\/ Seite 1 -\u003e Cover\n }\n render();\n}\n\n\/* --- Navigation für Mobile (Einzelseiten) --- *\/\nfunction nextPage() {\n if (logicalIndex \u003c PAGES.length - 1) {\n logicalIndex++;\n render();\n }\n}\n\nfunction prevPage() {\n if (logicalIndex \u003e 0) {\n logicalIndex--;\n render();\n }\n}\n\n\/* --- Events --- *\/\nopenBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'flex';\n logicalIndex = 0;\n render();\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n});\n\nfsBtn.addEventListener('click', () =\u003e {\n if (!document.fullscreenElement) {\n overlay.requestFullscreen?.();\n } else {\n document.exitFullscreen?.();\n }\n});\n\n\/* Klick: unterschiedliche Logik für Mobile\/Desktop *\/\noverlay.addEventListener('click', (e) =\u003e {\n const ctrlClicked = e.target === closeBtn || e.target === fsBtn;\n if (ctrlClicked) return;\n \n const mid = window.innerWidth \/ 2;\n \n if (isMobile()) {\n if (e.clientX \u003c mid) prevPage();\n else nextPage();\n } else {\n \/\/ Original Desktop-Logik: Links = vorwärts, Rechts = zurück\n if (e.clientX \u003c mid) nextSpread();\n else prevSpread();\n }\n});\n\n\/* Pfeiltasten: unterschiedliche Logik für Mobile\/Desktop *\/\ndocument.addEventListener('keydown', (e) =\u003e {\n if (overlay.style.display !== 'flex') return;\n \n if (isMobile()) {\n if (e.key === 'ArrowLeft') prevPage();\n if (e.key === 'ArrowRight') nextPage();\n } else {\n \/\/ Original Desktop-Logik\n if (e.key === 'ArrowLeft') nextSpread();\n if (e.key === 'ArrowRight') prevSpread();\n }\n \n if (e.key === 'Escape') {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n});\n\n\/* Swipe (Touch): nur für Mobile *\/\noverlay.addEventListener('touchstart', (e) =\u003e { \n if (e.touches[0]) touchStartX = e.touches[0].clientX; \n}, {passive:true});\n\noverlay.addEventListener('touchend', (e) =\u003e {\n if (touchStartX === null || !isMobile()) return;\n \n const endX = e.changedTouches[0]?.clientX ?? touchStartX;\n const dx = endX - touchStartX;\n const TH = 40;\n \n if (dx \u003e TH) prevPage();\n else if (dx \u003c -TH) nextPage();\n \n touchStartX = null;\n}, {passive:true});\n\n\/* Resize anpassen *\/\nwindow.addEventListener('resize', render);\n\n\/* Rechtsklick blockieren *\/\noverlay.addEventListener('contextmenu', (e) =\u003e e.preventDefault());\n\n\/* Ein bisschen Vorladen rund um die aktuellen Seiten *\/\nfunction preloadAround(idx){\n const list = [idx-2, idx-1, idx, idx+1, idx+2, PAGES.length-1];\n list.forEach(i=\u003e{\n if (i\u003e=0 \u0026\u0026 i\u003cPAGES.length){\n const img = new Image();\n img.src = PAGES[i];\n }\n });\n}\n\n\/\/ Initial vorladen\npreloadAround(0);\n\u003c\/script\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e\n","brand":"AniMoon Shop","offers":[{"title":"Band 2","offer_id":56155633320201,"sku":"978-3-69194-006-0","price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 2 Limited Edition mit Acrylaufsteller","offer_id":56155633352969,"sku":null,"price":23.0,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band2_600b3cf9-a36c-47eb-adc9-46012f128122.png?v=1758283596"},{"product_id":"isekai-soapland-kaguya-manga-band-1","title":"Isekai Soapland - Manga - Band 1","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-end=\"472\" data-start=\"190\"\u003e\u003cstrong\u003eDer Manga „Isekai Soapland“ Band 1\u003c\/strong\u003e erscheint als hochwertige Softcover-Edition im Großformat 21 x 14 cm mit 216 Seiten in deutscher Sprache.\u003cbr\u003e – empfohlen ab 18 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit Variant-Cover \u0026amp; exklusiver Lenticular-Card ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cem\u003e\u003cmeta charset=\"UTF-8\"\u003e \u003cspan\u003e©Shinobu Inokuma\/NIHONBUNGEISHA\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003c\/em\u003e\u003cem\u003e\u003cspan\u003e\u003c\/span\u003e\u003c\/em\u003e\u003c\/p\u003e\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\n\u003cdiv style=\"text-align:center;margin:16px 0;\"\u003e\n \u003cbutton id=\"openMangaPreview\" style=\"padding:12px 20px;border:0;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-weight:600;\"\u003e\n 📖 Leseprobe anzeigen\n \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"\n position:fixed; inset:0; background:rgba(0,0,0,.95);\n display:none; align-items:center; justify-content:center; z-index:9999;\"\u003e\n \u003c!-- Controls --\u003e\n \u003cdiv style=\"position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10000;\"\u003e\n \u003cbutton id=\"fullscreenBtn\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e\n \u003cbutton id=\"closeManga\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003c!-- Page indicator --\u003e\n \u003cdiv id=\"pageIndicator\" style=\"\n position:fixed;bottom:16px;left:50%;transform:translateX(-50%);\n background:rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font:600 12px\/1.2 system-ui,sans-serif;\"\u003e\n –\n \u003c\/div\u003e\n\n \u003c!-- Container (max 1200px) --\u003e\n \u003cdiv id=\"mangaStage\" style=\"\n width:min(92vw,1200px); height:88vh; display:flex; align-items:center; justify-content:center; gap:0;\"\u003e\n \u003c!-- Seiten werden per JS eingefügt --\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* --- Seitenliste (ALLE 28) --- *\/\nconst PAGES = [\n\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_cover.png?v=1777994012\", \/\/ Cover (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S62.jpg?v=1777994065\", \/\/ Seite 1 (Einzelseite)\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S61.jpg?v=1777994074\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S60.jpg?v=1777994043\",\n \n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S58.jpg?v=1777994066\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S59.jpg?v=1777994074\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S56.jpg?v=1777994060\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S57.jpg?v=1777994060\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S54.jpg?v=1777994076\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S55.jpg?v=1777994074\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S52.jpg?v=1777994074\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S53.jpg?v=1777994068\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S50.jpg?v=1777994069\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S51.jpg?v=1777994070\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S48.jpg?v=1777994068\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S49.jpg?v=1777994070\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S46.jpg?v=1777994075\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S47.jpg?v=1777994070\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S44.jpg?v=1777994077\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S45.jpg?v=1777994077\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S42.jpg?v=1777994072\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S43.jpg?v=1777994075\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S40.jpg?v=1777994068\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S41.jpg?v=1777994071\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S38.jpg?v=1777994067\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S39.jpg?v=1777994070\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S36.jpg?v=1777994076\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S37.jpg?v=1777994075\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S34.jpg?v=1777994074\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S35.jpg?v=1777994064\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S32.jpg?v=1777994065\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S33.jpg?v=1777994072\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S30.jpg?v=1777994075\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S31.jpg?v=1777994076\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S28.jpg?v=1777994070\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S29.jpg?v=1777994071\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S26.jpg?v=1777994069\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_S27.jpg?v=1777994074\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Soapland_Vol1_dt._Impressum.jpg?v=1778755539\" \/\/ Letzte Seite (Einzelseite)\n];\n\n\/* --- DOM --- *\/\nconst overlay = document.getElementById('mangaOverlay');\nconst stage = document.getElementById('mangaStage');\nconst openBtn = document.getElementById('openMangaPreview');\nconst closeBtn= document.getElementById('closeManga');\nconst fsBtn = document.getElementById('fullscreenBtn');\nconst indicator = document.getElementById('pageIndicator');\n\n\/* --- Mobile Erkennung --- *\/\nfunction isMobile() {\n return window.innerWidth \u003c= 768;\n}\n\n\/* --- Helper: Single\/Dual Page Regeln (für Desktop) --- *\/\nfunction isSingle(index) {\n return index === 0 || index === 1 || index === PAGES.length - 1;\n}\n\n\/* --- State --- *\/\nlet logicalIndex = 0; \/\/ zeigt auf die \"rechte\" Seite einer Doppelseite (Manga)\nlet touchStartX = null;\n\n\/* --- Render (unterscheidet zwischen Desktop und Mobile) --- *\/\nfunction render() {\n stage.innerHTML = '';\n stage.style.display = 'flex';\n stage.style.justifyContent = 'center';\n stage.style.alignItems = 'center';\n stage.style.gap = '0';\n \n const H = stage.clientHeight;\n \n if (isMobile()) {\n \/\/ Mobile: Einzelseite mit natürlichen Proportionen\n const img = makeImg(PAGES[logicalIndex], H, true);\n stage.appendChild(img);\n indicator.textContent = `Seite ${logicalIndex + 1} \/ ${PAGES.length}`;\n } else {\n \/\/ Desktop: Original-Doppelseiten-Logik\n \/\/ Einzelseite (Cover \/ Seite 1 \/ letzte)\n if (isSingle(logicalIndex) || logicalIndex \u003e= PAGES.length) {\n const img = makeImg(PAGES[Math.min(logicalIndex, PAGES.length-1)], H, false);\n stage.appendChild(img);\n indicator.textContent = `Seite ${Math.min(logicalIndex+1, PAGES.length)} \/ ${PAGES.length}`;\n return;\n }\n \n \/\/ Doppelseite: Original-Reihenfolge\n const right = makeImg(PAGES[logicalIndex + 1], H, false);\n const left = (logicalIndex + 1 \u003c PAGES.length) ? makeImg(PAGES[logicalIndex], H, false) : null;\n \n stage.appendChild(right);\n if (left) stage.appendChild(left);\n \n const shownCount = Math.min(logicalIndex + (left?2:1), PAGES.length);\n indicator.textContent = `Seite ${shownCount} \/ ${PAGES.length}`;\n }\n}\n\nfunction makeImg(src, maxH, isMobile){\n const img = document.createElement('img');\n img.src = src;\n img.alt = 'Manga-Seite';\n img.draggable = false;\n img.oncontextmenu = () =\u003e false;\n \n if (isMobile) {\n \/\/ Mobile: Natürliche Proportionen, nicht strecken\n Object.assign(img.style, {\n maxHeight: '100%',\n maxWidth: '100%',\n width: 'auto',\n height: 'auto',\n display: 'block',\n objectFit: 'contain',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n } else {\n \/\/ Desktop: Original-Styling\n Object.assign(img.style, {\n maxHeight: maxH + 'px',\n height: '100%',\n width: 'auto',\n display: 'block',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n }\n \n return img;\n}\n\n\/* --- Navigation für Desktop (Original-Doppelseiten-Logik) --- *\/\nfunction nextSpread() {\n if (logicalIndex === 0) { \/\/ Cover -\u003e Seite 1\n logicalIndex = 1;\n } else if (logicalIndex === 1) { \/\/ Seite 1 -\u003e erste Doppelseite\n logicalIndex = 2;\n } else if (logicalIndex + 2 \u003c PAGES.length - 1) { \/\/ normale Doppelseiten\n logicalIndex += 2;\n } else {\n logicalIndex = PAGES.length - 1; \/\/ letzte Einzelseite\n }\n render();\n}\n\nfunction prevSpread() {\n if (logicalIndex === PAGES.length - 1) { \/\/ letzte -\u003e letzte Dopp.\n logicalIndex = PAGES.length - 3;\n } else if (logicalIndex \u003e 2) { \/\/ normale Dopp. zurück\n logicalIndex -= 2;\n } else if (logicalIndex === 2) { \/\/ erste Dopp. -\u003e Seite 1\n logicalIndex = 1;\n } else {\n logicalIndex = 0; \/\/ Seite 1 -\u003e Cover\n }\n render();\n}\n\n\/* --- Navigation für Mobile (Einzelseiten) --- *\/\nfunction nextPage() {\n if (logicalIndex \u003c PAGES.length - 1) {\n logicalIndex++;\n render();\n }\n}\n\nfunction prevPage() {\n if (logicalIndex \u003e 0) {\n logicalIndex--;\n render();\n }\n}\n\n\/* --- Events --- *\/\nopenBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'flex';\n logicalIndex = 0;\n render();\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n});\n\nfsBtn.addEventListener('click', () =\u003e {\n if (!document.fullscreenElement) {\n overlay.requestFullscreen?.();\n } else {\n document.exitFullscreen?.();\n }\n});\n\n\/* Klick: unterschiedliche Logik für Mobile\/Desktop *\/\noverlay.addEventListener('click', (e) =\u003e {\n const ctrlClicked = e.target === closeBtn || e.target === fsBtn;\n if (ctrlClicked) return;\n \n const mid = window.innerWidth \/ 2;\n \n if (isMobile()) {\n if (e.clientX \u003c mid) prevPage();\n else nextPage();\n } else {\n \/\/ Original Desktop-Logik: Links = vorwärts, Rechts = zurück\n if (e.clientX \u003c mid) nextSpread();\n else prevSpread();\n }\n});\n\n\/* Pfeiltasten: unterschiedliche Logik für Mobile\/Desktop *\/\ndocument.addEventListener('keydown', (e) =\u003e {\n if (overlay.style.display !== 'flex') return;\n \n if (isMobile()) {\n if (e.key === 'ArrowLeft') prevPage();\n if (e.key === 'ArrowRight') nextPage();\n } else {\n \/\/ Original Desktop-Logik\n if (e.key === 'ArrowLeft') nextSpread();\n if (e.key === 'ArrowRight') prevSpread();\n }\n \n if (e.key === 'Escape') {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n});\n\n\/* Swipe (Touch): nur für Mobile *\/\noverlay.addEventListener('touchstart', (e) =\u003e { \n if (e.touches[0]) touchStartX = e.touches[0].clientX; \n}, {passive:true});\n\noverlay.addEventListener('touchend', (e) =\u003e {\n if (touchStartX === null || !isMobile()) return;\n \n const endX = e.changedTouches[0]?.clientX ?? touchStartX;\n const dx = endX - touchStartX;\n const TH = 40;\n \n if (dx \u003e TH) prevPage();\n else if (dx \u003c -TH) nextPage();\n \n touchStartX = null;\n}, {passive:true});\n\n\/* Resize anpassen *\/\nwindow.addEventListener('resize', render);\n\n\/* Rechtsklick blockieren *\/\noverlay.addEventListener('contextmenu', (e) =\u003e e.preventDefault());\n\n\/* Ein bisschen Vorladen rund um die aktuellen Seiten *\/\nfunction preloadAround(idx){\n const list = [idx-2, idx-1, idx, idx+1, idx+2, PAGES.length-1];\n list.forEach(i=\u003e{\n if (i\u003e=0 \u0026\u0026 i\u003cPAGES.length){\n const img = new Image();\n img.src = PAGES[i];\n }\n });\n}\n\n\/\/ Initial vorladen\npreloadAround(0);\n\u003c\/script\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 1","offer_id":56777505800457,"sku":"978-3-69194-022-0","price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 1 Limited Edition","offer_id":56777505833225,"sku":null,"price":20.0,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band_1_4ac62979-e3a2-4505-93db-750b26def313.png?v=1776963460"},{"product_id":"from-overshadowed-to-overpowered-manga-band-1","title":"From Overshadowed to Overpowered: Die zweite Wiedergeburt eines untalentierten Helden - Manga - Band 1","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-end=\"472\" data-start=\"190\"\u003e\u003cstrong\u003eDer Manga „From Overshadowed to Overpowered: Die zweite Wiedergeburt eines untalentierten Helden“ Band 1\u003c\/strong\u003e erscheint als hochwertige Softcover-Edition im Großformat 21 x 14 cm mit 193 Seiten in deutscher Sprache.\u003cbr\u003e – empfohlen ab 12 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit exklusivem Metall-Shikishi und Variant-Cover-Umschlag ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\n\u003cdiv style=\"text-align:center;margin:16px 0;\"\u003e\n \u003cbutton id=\"openMangaPreview\" style=\"padding:12px 20px;border:0;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-weight:600;\"\u003e\n 📖 Leseprobe anzeigen\n \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"\n position:fixed; inset:0; background:rgba(0,0,0,.95);\n display:none; align-items:center; justify-content:center; z-index:9999;\"\u003e\n \u003c!-- Controls --\u003e\n \u003cdiv style=\"position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10000;\"\u003e\n \u003cbutton id=\"fullscreenBtn\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e\n \u003cbutton id=\"closeManga\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003c!-- Page indicator --\u003e\n \u003cdiv id=\"pageIndicator\" style=\"\n position:fixed;bottom:16px;left:50%;transform:translateX(-50%);\n background:rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font:600 12px\/1.2 system-ui,sans-serif;\"\u003e\n –\n \u003c\/div\u003e\n\n \u003c!-- Container (max 1200px) --\u003e\n \u003cdiv id=\"mangaStage\" style=\"\n width:min(92vw,1200px); height:88vh; display:flex; align-items:center; justify-content:center; gap:0;\"\u003e\n \u003c!-- Seiten werden per JS eingefügt --\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* --- Seitenliste (ALLE 28) --- *\/\nconst PAGES = [\n\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FromOverpowered_Vol1_cover.png?v=1778042108\", \/\/ Cover (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S31.jpg?v=1778042106\", \/\/ Seite 1 (Einzelseite)\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S30.jpg?v=1778754378\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S29.jpg?v=1778042106\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S28.jpg?v=1778042106\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S27.jpg?v=1778042102\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S26.jpg?v=1778042100\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S25.jpg?v=1778042100\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S24.jpg?v=1778042104\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S23.jpg?v=1778042106\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S22.jpg?v=1778042120\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S21.jpg?v=1778042103\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S20.jpg?v=1778042106\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S19.jpg?v=1778042104\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S18.jpg?v=1778042100\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S17.jpg?v=1778042104\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S16.jpg?v=1778042106\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S15.jpg?v=1778042106\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S14.jpg?v=1778042103\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S13.jpg?v=1778042106\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S12.jpg?v=1778042106\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S11.jpg?v=1778042106\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S10.jpg?v=1778042105\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S9.jpg?v=1778042105\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S8.jpg?v=1778042103\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S7.jpg?v=1778042103\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S6.jpg?v=1778042103\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S5.jpg?v=1778042106\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S4.jpg?v=1778042102\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S3.jpg?v=1778042103\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S2.jpg?v=1778042103\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_S.jpg?v=1778042105\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/FOTO_Vol.1_Impressum.jpg?v=1778754332\", \/\/ Letzte Seite (Einzelseite)\n];\n\n\/* --- DOM --- *\/\nconst overlay = document.getElementById('mangaOverlay');\nconst stage = document.getElementById('mangaStage');\nconst openBtn = document.getElementById('openMangaPreview');\nconst closeBtn= document.getElementById('closeManga');\nconst fsBtn = document.getElementById('fullscreenBtn');\nconst indicator = document.getElementById('pageIndicator');\n\n\/* --- Mobile Erkennung --- *\/\nfunction isMobile() {\n return window.innerWidth \u003c= 768;\n}\n\n\/* --- Helper: Single\/Dual Page Regeln (für Desktop) --- *\/\nfunction isSingle(index) {\n return index === 0 || index === 1 || index === PAGES.length - 1;\n}\n\n\/* --- State --- *\/\nlet logicalIndex = 0; \/\/ zeigt auf die \"rechte\" Seite einer Doppelseite (Manga)\nlet touchStartX = null;\n\n\/* --- Render (unterscheidet zwischen Desktop und Mobile) --- *\/\nfunction render() {\n stage.innerHTML = '';\n stage.style.display = 'flex';\n stage.style.justifyContent = 'center';\n stage.style.alignItems = 'center';\n stage.style.gap = '0';\n \n const H = stage.clientHeight;\n \n if (isMobile()) {\n \/\/ Mobile: Einzelseite mit natürlichen Proportionen\n const img = makeImg(PAGES[logicalIndex], H, true);\n stage.appendChild(img);\n indicator.textContent = `Seite ${logicalIndex + 1} \/ ${PAGES.length}`;\n } else {\n \/\/ Desktop: Original-Doppelseiten-Logik\n \/\/ Einzelseite (Cover \/ Seite 1 \/ letzte)\n if (isSingle(logicalIndex) || logicalIndex \u003e= PAGES.length) {\n const img = makeImg(PAGES[Math.min(logicalIndex, PAGES.length-1)], H, false);\n stage.appendChild(img);\n indicator.textContent = `Seite ${Math.min(logicalIndex+1, PAGES.length)} \/ ${PAGES.length}`;\n return;\n }\n \n \/\/ Doppelseite: Original-Reihenfolge\n const right = makeImg(PAGES[logicalIndex + 1], H, false);\n const left = (logicalIndex + 1 \u003c PAGES.length) ? makeImg(PAGES[logicalIndex], H, false) : null;\n \n stage.appendChild(right);\n if (left) stage.appendChild(left);\n \n const shownCount = Math.min(logicalIndex + (left?2:1), PAGES.length);\n indicator.textContent = `Seite ${shownCount} \/ ${PAGES.length}`;\n }\n}\n\nfunction makeImg(src, maxH, isMobile){\n const img = document.createElement('img');\n img.src = src;\n img.alt = 'Manga-Seite';\n img.draggable = false;\n img.oncontextmenu = () =\u003e false;\n \n if (isMobile) {\n \/\/ Mobile: Natürliche Proportionen, nicht strecken\n Object.assign(img.style, {\n maxHeight: '100%',\n maxWidth: '100%',\n width: 'auto',\n height: 'auto',\n display: 'block',\n objectFit: 'contain',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n } else {\n \/\/ Desktop: Original-Styling\n Object.assign(img.style, {\n maxHeight: maxH + 'px',\n height: '100%',\n width: 'auto',\n display: 'block',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n }\n \n return img;\n}\n\n\/* --- Navigation für Desktop (Original-Doppelseiten-Logik) --- *\/\nfunction nextSpread() {\n if (logicalIndex === 0) { \/\/ Cover -\u003e Seite 1\n logicalIndex = 1;\n } else if (logicalIndex === 1) { \/\/ Seite 1 -\u003e erste Doppelseite\n logicalIndex = 2;\n } else if (logicalIndex + 2 \u003c PAGES.length - 1) { \/\/ normale Doppelseiten\n logicalIndex += 2;\n } else {\n logicalIndex = PAGES.length - 1; \/\/ letzte Einzelseite\n }\n render();\n}\n\nfunction prevSpread() {\n if (logicalIndex === PAGES.length - 1) { \/\/ letzte -\u003e letzte Dopp.\n logicalIndex = PAGES.length - 3;\n } else if (logicalIndex \u003e 2) { \/\/ normale Dopp. zurück\n logicalIndex -= 2;\n } else if (logicalIndex === 2) { \/\/ erste Dopp. -\u003e Seite 1\n logicalIndex = 1;\n } else {\n logicalIndex = 0; \/\/ Seite 1 -\u003e Cover\n }\n render();\n}\n\n\/* --- Navigation für Mobile (Einzelseiten) --- *\/\nfunction nextPage() {\n if (logicalIndex \u003c PAGES.length - 1) {\n logicalIndex++;\n render();\n }\n}\n\nfunction prevPage() {\n if (logicalIndex \u003e 0) {\n logicalIndex--;\n render();\n }\n}\n\n\/* --- Events --- *\/\nopenBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'flex';\n logicalIndex = 0;\n render();\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n});\n\nfsBtn.addEventListener('click', () =\u003e {\n if (!document.fullscreenElement) {\n overlay.requestFullscreen?.();\n } else {\n document.exitFullscreen?.();\n }\n});\n\n\/* Klick: unterschiedliche Logik für Mobile\/Desktop *\/\noverlay.addEventListener('click', (e) =\u003e {\n const ctrlClicked = e.target === closeBtn || e.target === fsBtn;\n if (ctrlClicked) return;\n \n const mid = window.innerWidth \/ 2;\n \n if (isMobile()) {\n if (e.clientX \u003c mid) prevPage();\n else nextPage();\n } else {\n \/\/ Original Desktop-Logik: Links = vorwärts, Rechts = zurück\n if (e.clientX \u003c mid) nextSpread();\n else prevSpread();\n }\n});\n\n\/* Pfeiltasten: unterschiedliche Logik für Mobile\/Desktop *\/\ndocument.addEventListener('keydown', (e) =\u003e {\n if (overlay.style.display !== 'flex') return;\n \n if (isMobile()) {\n if (e.key === 'ArrowLeft') prevPage();\n if (e.key === 'ArrowRight') nextPage();\n } else {\n \/\/ Original Desktop-Logik\n if (e.key === 'ArrowLeft') nextSpread();\n if (e.key === 'ArrowRight') prevSpread();\n }\n \n if (e.key === 'Escape') {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n});\n\n\/* Swipe (Touch): nur für Mobile *\/\noverlay.addEventListener('touchstart', (e) =\u003e { \n if (e.touches[0]) touchStartX = e.touches[0].clientX; \n}, {passive:true});\n\noverlay.addEventListener('touchend', (e) =\u003e {\n if (touchStartX === null || !isMobile()) return;\n \n const endX = e.changedTouches[0]?.clientX ?? touchStartX;\n const dx = endX - touchStartX;\n const TH = 40;\n \n if (dx \u003e TH) prevPage();\n else if (dx \u003c -TH) nextPage();\n \n touchStartX = null;\n}, {passive:true});\n\n\/* Resize anpassen *\/\nwindow.addEventListener('resize', render);\n\n\/* Rechtsklick blockieren *\/\noverlay.addEventListener('contextmenu', (e) =\u003e e.preventDefault());\n\n\/* Ein bisschen Vorladen rund um die aktuellen Seiten *\/\nfunction preloadAround(idx){\n const list = [idx-2, idx-1, idx, idx+1, idx+2, PAGES.length-1];\n list.forEach(i=\u003e{\n if (i\u003e=0 \u0026\u0026 i\u003cPAGES.length){\n const img = new Image();\n img.src = PAGES[i];\n }\n });\n}\n\n\/\/ Initial vorladen\npreloadAround(0);\n\u003c\/script\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 1","offer_id":56784158753033,"sku":"978-3-69194-020-6","price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 1 Limited Edition","offer_id":56784158785801,"sku":null,"price":20.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band1_9d10c405-673b-4003-9c83-e7e2c792b770.png?v=1769701015"},{"product_id":"vermeil-in-gold-manga-band-1","title":"Vermeil in Gold - Manga - Band 1","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-end=\"472\" data-start=\"190\"\u003e\u003cstrong\u003eDer Manga „Vermeil in Gold“ Band 1\u003c\/strong\u003e erscheint als hochwertige Softcover-Edition im Großformat 21 x 14 cm mit 258 Seiten in deutscher Sprache.\u003cbr\u003e – empfohlen ab 16 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit exklusivem Extra ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\n\u003cdiv style=\"text-align:center;margin:16px 0;\"\u003e\n \u003cbutton id=\"openMangaPreview\" style=\"padding:12px 20px;border:0;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-weight:600;\"\u003e\n 📖 Leseprobe anzeigen\n \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"\n position:fixed; inset:0; background:rgba(0,0,0,.95);\n display:none; align-items:center; justify-content:center; z-index:9999;\"\u003e\n \u003c!-- Controls --\u003e\n \u003cdiv style=\"position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10000;\"\u003e\n \u003cbutton id=\"fullscreenBtn\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e\n \u003cbutton id=\"closeManga\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003c!-- Page indicator --\u003e\n \u003cdiv id=\"pageIndicator\" style=\"\n position:fixed;bottom:16px;left:50%;transform:translateX(-50%);\n background:rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font:600 12px\/1.2 system-ui,sans-serif;\"\u003e\n –\n \u003c\/div\u003e\n\n \u003c!-- Container (max 1200px) --\u003e\n \u003cdiv id=\"mangaStage\" style=\"\n width:min(92vw,1200px); height:88vh; display:flex; align-items:center; justify-content:center; gap:0;\"\u003e\n \u003c!-- Seiten werden per JS eingefügt --\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* --- Seitenliste (ALLE 28) --- *\/\nconst PAGES = [\n\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Cover_1_Cover.png?v=1777996835\", \/\/ Cover (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_Front2.jpg?v=1777996789\", \/\/ Seite 1 (Einzelseite)\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_Front.jpg?v=1777996829\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_16.jpg?v=1777996835\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_15.jpg?v=1777996837\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_14.jpg?v=1777996836\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_13.jpg?v=1777996836\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_12.jpg?v=1777996835\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_11.jpg?v=1777996837\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_10.jpg?v=1777996838\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_9.jpg?v=1777996831\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_8.jpg?v=1777996834\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_7.jpg?v=1777996835\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_6.jpg?v=1777996831\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_5.jpg?v=1777996828\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_4.jpg?v=1777996833\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_3.jpg?v=1777996835\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1_2.jpg?v=1777996834\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p1.jpg?v=1777996836\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_16.jpg?v=1777996836\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_15.jpg?v=1777996831\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_14.jpg?v=1777996835\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_13.jpg?v=1777996832\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_12.jpg?v=1777996826\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_11.jpg?v=1777996836\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_10.jpg?v=1777996836\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_9.jpg?v=1777996835\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_8.jpg?v=1777996826\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_7.jpg?v=1777996829\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_6.jpg?v=1777996835\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_5.jpg?v=1777996831\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_4.jpg?v=1777996836\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_3.jpg?v=1777996836\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_p2_2.jpg?v=1777996828\",\n\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/ViG_Vol.1_Impressum.jpg?v=1778756553\" \/\/ Letzte Seite (Einzelseite)\n];\n\n\/* --- DOM --- *\/\nconst overlay = document.getElementById('mangaOverlay');\nconst stage = document.getElementById('mangaStage');\nconst openBtn = document.getElementById('openMangaPreview');\nconst closeBtn= document.getElementById('closeManga');\nconst fsBtn = document.getElementById('fullscreenBtn');\nconst indicator = document.getElementById('pageIndicator');\n\n\/* --- Mobile Erkennung --- *\/\nfunction isMobile() {\n return window.innerWidth \u003c= 768;\n}\n\n\/* --- Helper: Single\/Dual Page Regeln (für Desktop) --- *\/\nfunction isSingle(index) {\n return index === 0 || index === 1 || index === PAGES.length - 1;\n}\n\n\/* --- State --- *\/\nlet logicalIndex = 0; \/\/ zeigt auf die \"rechte\" Seite einer Doppelseite (Manga)\nlet touchStartX = null;\n\n\/* --- Render (unterscheidet zwischen Desktop und Mobile) --- *\/\nfunction render() {\n stage.innerHTML = '';\n stage.style.display = 'flex';\n stage.style.justifyContent = 'center';\n stage.style.alignItems = 'center';\n stage.style.gap = '0';\n \n const H = stage.clientHeight;\n \n if (isMobile()) {\n \/\/ Mobile: Einzelseite mit natürlichen Proportionen\n const img = makeImg(PAGES[logicalIndex], H, true);\n stage.appendChild(img);\n indicator.textContent = `Seite ${logicalIndex + 1} \/ ${PAGES.length}`;\n } else {\n \/\/ Desktop: Original-Doppelseiten-Logik\n \/\/ Einzelseite (Cover \/ Seite 1 \/ letzte)\n if (isSingle(logicalIndex) || logicalIndex \u003e= PAGES.length) {\n const img = makeImg(PAGES[Math.min(logicalIndex, PAGES.length-1)], H, false);\n stage.appendChild(img);\n indicator.textContent = `Seite ${Math.min(logicalIndex+1, PAGES.length)} \/ ${PAGES.length}`;\n return;\n }\n \n \/\/ Doppelseite: Original-Reihenfolge\n const right = makeImg(PAGES[logicalIndex + 1], H, false);\n const left = (logicalIndex + 1 \u003c PAGES.length) ? makeImg(PAGES[logicalIndex], H, false) : null;\n \n stage.appendChild(right);\n if (left) stage.appendChild(left);\n \n const shownCount = Math.min(logicalIndex + (left?2:1), PAGES.length);\n indicator.textContent = `Seite ${shownCount} \/ ${PAGES.length}`;\n }\n}\n\nfunction makeImg(src, maxH, isMobile){\n const img = document.createElement('img');\n img.src = src;\n img.alt = 'Manga-Seite';\n img.draggable = false;\n img.oncontextmenu = () =\u003e false;\n \n if (isMobile) {\n \/\/ Mobile: Natürliche Proportionen, nicht strecken\n Object.assign(img.style, {\n maxHeight: '100%',\n maxWidth: '100%',\n width: 'auto',\n height: 'auto',\n display: 'block',\n objectFit: 'contain',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n } else {\n \/\/ Desktop: Original-Styling\n Object.assign(img.style, {\n maxHeight: maxH + 'px',\n height: '100%',\n width: 'auto',\n display: 'block',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n }\n \n return img;\n}\n\n\/* --- Navigation für Desktop (Original-Doppelseiten-Logik) --- *\/\nfunction nextSpread() {\n if (logicalIndex === 0) { \/\/ Cover -\u003e Seite 1\n logicalIndex = 1;\n } else if (logicalIndex === 1) { \/\/ Seite 1 -\u003e erste Doppelseite\n logicalIndex = 2;\n } else if (logicalIndex + 2 \u003c PAGES.length - 1) { \/\/ normale Doppelseiten\n logicalIndex += 2;\n } else {\n logicalIndex = PAGES.length - 1; \/\/ letzte Einzelseite\n }\n render();\n}\n\nfunction prevSpread() {\n if (logicalIndex === PAGES.length - 1) { \/\/ letzte -\u003e letzte Dopp.\n logicalIndex = PAGES.length - 3;\n } else if (logicalIndex \u003e 2) { \/\/ normale Dopp. zurück\n logicalIndex -= 2;\n } else if (logicalIndex === 2) { \/\/ erste Dopp. -\u003e Seite 1\n logicalIndex = 1;\n } else {\n logicalIndex = 0; \/\/ Seite 1 -\u003e Cover\n }\n render();\n}\n\n\/* --- Navigation für Mobile (Einzelseiten) --- *\/\nfunction nextPage() {\n if (logicalIndex \u003c PAGES.length - 1) {\n logicalIndex++;\n render();\n }\n}\n\nfunction prevPage() {\n if (logicalIndex \u003e 0) {\n logicalIndex--;\n render();\n }\n}\n\n\/* --- Events --- *\/\nopenBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'flex';\n logicalIndex = 0;\n render();\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n});\n\nfsBtn.addEventListener('click', () =\u003e {\n if (!document.fullscreenElement) {\n overlay.requestFullscreen?.();\n } else {\n document.exitFullscreen?.();\n }\n});\n\n\/* Klick: unterschiedliche Logik für Mobile\/Desktop *\/\noverlay.addEventListener('click', (e) =\u003e {\n const ctrlClicked = e.target === closeBtn || e.target === fsBtn;\n if (ctrlClicked) return;\n \n const mid = window.innerWidth \/ 2;\n \n if (isMobile()) {\n if (e.clientX \u003c mid) prevPage();\n else nextPage();\n } else {\n \/\/ Original Desktop-Logik: Links = vorwärts, Rechts = zurück\n if (e.clientX \u003c mid) nextSpread();\n else prevSpread();\n }\n});\n\n\/* Pfeiltasten: unterschiedliche Logik für Mobile\/Desktop *\/\ndocument.addEventListener('keydown', (e) =\u003e {\n if (overlay.style.display !== 'flex') return;\n \n if (isMobile()) {\n if (e.key === 'ArrowLeft') prevPage();\n if (e.key === 'ArrowRight') nextPage();\n } else {\n \/\/ Original Desktop-Logik\n if (e.key === 'ArrowLeft') nextSpread();\n if (e.key === 'ArrowRight') prevSpread();\n }\n \n if (e.key === 'Escape') {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n});\n\n\/* Swipe (Touch): nur für Mobile *\/\noverlay.addEventListener('touchstart', (e) =\u003e { \n if (e.touches[0]) touchStartX = e.touches[0].clientX; \n}, {passive:true});\n\noverlay.addEventListener('touchend', (e) =\u003e {\n if (touchStartX === null || !isMobile()) return;\n \n const endX = e.changedTouches[0]?.clientX ?? touchStartX;\n const dx = endX - touchStartX;\n const TH = 40;\n \n if (dx \u003e TH) prevPage();\n else if (dx \u003c -TH) nextPage();\n \n touchStartX = null;\n}, {passive:true});\n\n\/* Resize anpassen *\/\nwindow.addEventListener('resize', render);\n\n\/* Rechtsklick blockieren *\/\noverlay.addEventListener('contextmenu', (e) =\u003e e.preventDefault());\n\n\/* Ein bisschen Vorladen rund um die aktuellen Seiten *\/\nfunction preloadAround(idx){\n const list = [idx-2, idx-1, idx, idx+1, idx+2, PAGES.length-1];\n list.forEach(i=\u003e{\n if (i\u003e=0 \u0026\u0026 i\u003cPAGES.length){\n const img = new Image();\n img.src = PAGES[i];\n }\n });\n}\n\n\/\/ Initial vorladen\npreloadAround(0);\n\u003c\/script\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 1","offer_id":56790450700553,"sku":"978-3-69194-016-9","price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 1 Limited Edition","offer_id":56790450733321,"sku":null,"price":23.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band_1_191c266c-03b7-4634-8656-3f712d9c59a3.png?v=1769812243"},{"product_id":"meine-chefin-kommt-immer-zuerst-manga-band-1","title":"Meine Chefin kommt immer zuerst!! - Manga - Band 1","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cstrong\u003eDer Manga „Meine Chefin kommt immer zuerst!!“ Band 1\u003c\/strong\u003e erscheint als hochwertige Softcover-Edition im Großformat 21 x 14 cm mit 144 Seiten in deutscher Sprache.\u003cbr\u003e – empfohlen ab 16 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit exklusivem Metall-Shikishi und Variant-Cover-Umschlag ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\n\u003cdiv style=\"text-align:center;margin:16px 0;\"\u003e\n \u003cbutton id=\"openMangaPreview\" style=\"padding:12px 20px;border:0;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-weight:600;\"\u003e\n 📖 Leseprobe anzeigen\n \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"\n position:fixed; inset:0; background:rgba(0,0,0,.95);\n display:none; align-items:center; justify-content:center; z-index:9999;\"\u003e\n \u003c!-- Controls --\u003e\n \u003cdiv style=\"position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10000;\"\u003e\n \u003cbutton id=\"fullscreenBtn\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e\n \u003cbutton id=\"closeManga\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003c!-- Page indicator --\u003e\n \u003cdiv id=\"pageIndicator\" style=\"\n position:fixed;bottom:16px;left:50%;transform:translateX(-50%);\n background:rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font:600 12px\/1.2 system-ui,sans-serif;\"\u003e\n –\n \u003c\/div\u003e\n\n \u003c!-- Container (max 1200px) --\u003e\n \u003cdiv id=\"mangaStage\" style=\"\n width:min(92vw,1200px); height:88vh; display:flex; align-items:center; justify-content:center; gap:0;\"\u003e\n \u003c!-- Seiten werden per JS eingefügt --\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* --- Seitenliste (ALLE 28) --- *\/\nconst PAGES = [\n\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ-V1-SE-Cover.jpg?v=1778756552\", \/\/ Cover (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_Farbseiten4.jpg?v=1778044246\", \/\/ Seite 1 (Einzelseite)\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_Farbseiten3.jpg?v=1778044246\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_Farbseiten2.jpg?v=1778044246\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_Farbseiten.jpg?v=1778044246\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_16.jpg?v=1778044245\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_15.jpg?v=1778044244\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_14.jpg?v=1778044245\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_13.jpg?v=1778044242\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_12.jpg?v=1778044244\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_11.jpg?v=1778044244\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_10.jpg?v=1778044244\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_9.jpg?v=1778044243\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_8.jpg?v=1778044243\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_7.jpg?v=1778044244\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_6.jpg?v=1778044243\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_5.jpg?v=1778044242\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_4.jpg?v=1778044243\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_3.jpg?v=1778044245\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1_2.jpg?v=1778044245\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p1.jpg?v=1778044244\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p2_16.jpg?v=1778044246\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p2_15.jpg?v=1778044244\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p2_14.jpg?v=1778044245\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p2_13.jpg?v=1778044236\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_p2_12.jpg?v=1778044246\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/MCKIZ_V1_Impressum.jpg?v=1778591521\" \/\/ Letzte Seite (Einzelseite)\n];\n\n\/* --- DOM --- *\/\nconst overlay = document.getElementById('mangaOverlay');\nconst stage = document.getElementById('mangaStage');\nconst openBtn = document.getElementById('openMangaPreview');\nconst closeBtn= document.getElementById('closeManga');\nconst fsBtn = document.getElementById('fullscreenBtn');\nconst indicator = document.getElementById('pageIndicator');\n\n\/* --- Mobile Erkennung --- *\/\nfunction isMobile() {\n return window.innerWidth \u003c= 768;\n}\n\n\/* --- Helper: Single\/Dual Page Regeln (für Desktop) --- *\/\nfunction isSingle(index) {\n return index === 0 || index === 1 || index === PAGES.length - 1;\n}\n\n\/* --- State --- *\/\nlet logicalIndex = 0; \/\/ zeigt auf die \"rechte\" Seite einer Doppelseite (Manga)\nlet touchStartX = null;\n\n\/* --- Render (unterscheidet zwischen Desktop und Mobile) --- *\/\nfunction render() {\n stage.innerHTML = '';\n stage.style.display = 'flex';\n stage.style.justifyContent = 'center';\n stage.style.alignItems = 'center';\n stage.style.gap = '0';\n \n const H = stage.clientHeight;\n \n if (isMobile()) {\n \/\/ Mobile: Einzelseite mit natürlichen Proportionen\n const img = makeImg(PAGES[logicalIndex], H, true);\n stage.appendChild(img);\n indicator.textContent = `Seite ${logicalIndex + 1} \/ ${PAGES.length}`;\n } else {\n \/\/ Desktop: Original-Doppelseiten-Logik\n \/\/ Einzelseite (Cover \/ Seite 1 \/ letzte)\n if (isSingle(logicalIndex) || logicalIndex \u003e= PAGES.length) {\n const img = makeImg(PAGES[Math.min(logicalIndex, PAGES.length-1)], H, false);\n stage.appendChild(img);\n indicator.textContent = `Seite ${Math.min(logicalIndex+1, PAGES.length)} \/ ${PAGES.length}`;\n return;\n }\n \n \/\/ Doppelseite: Original-Reihenfolge\n const right = makeImg(PAGES[logicalIndex + 1], H, false);\n const left = (logicalIndex + 1 \u003c PAGES.length) ? makeImg(PAGES[logicalIndex], H, false) : null;\n \n stage.appendChild(right);\n if (left) stage.appendChild(left);\n \n const shownCount = Math.min(logicalIndex + (left?2:1), PAGES.length);\n indicator.textContent = `Seite ${shownCount} \/ ${PAGES.length}`;\n }\n}\n\nfunction makeImg(src, maxH, isMobile){\n const img = document.createElement('img');\n img.src = src;\n img.alt = 'Manga-Seite';\n img.draggable = false;\n img.oncontextmenu = () =\u003e false;\n \n if (isMobile) {\n \/\/ Mobile: Natürliche Proportionen, nicht strecken\n Object.assign(img.style, {\n maxHeight: '100%',\n maxWidth: '100%',\n width: 'auto',\n height: 'auto',\n display: 'block',\n objectFit: 'contain',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n } else {\n \/\/ Desktop: Original-Styling\n Object.assign(img.style, {\n maxHeight: maxH + 'px',\n height: '100%',\n width: 'auto',\n display: 'block',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n }\n \n return img;\n}\n\n\/* --- Navigation für Desktop (Original-Doppelseiten-Logik) --- *\/\nfunction nextSpread() {\n if (logicalIndex === 0) { \/\/ Cover -\u003e Seite 1\n logicalIndex = 1;\n } else if (logicalIndex === 1) { \/\/ Seite 1 -\u003e erste Doppelseite\n logicalIndex = 2;\n } else if (logicalIndex + 2 \u003c PAGES.length - 1) { \/\/ normale Doppelseiten\n logicalIndex += 2;\n } else {\n logicalIndex = PAGES.length - 1; \/\/ letzte Einzelseite\n }\n render();\n}\n\nfunction prevSpread() {\n if (logicalIndex === PAGES.length - 1) { \/\/ letzte -\u003e letzte Dopp.\n logicalIndex = PAGES.length - 3;\n } else if (logicalIndex \u003e 2) { \/\/ normale Dopp. zurück\n logicalIndex -= 2;\n } else if (logicalIndex === 2) { \/\/ erste Dopp. -\u003e Seite 1\n logicalIndex = 1;\n } else {\n logicalIndex = 0; \/\/ Seite 1 -\u003e Cover\n }\n render();\n}\n\n\/* --- Navigation für Mobile (Einzelseiten) --- *\/\nfunction nextPage() {\n if (logicalIndex \u003c PAGES.length - 1) {\n logicalIndex++;\n render();\n }\n}\n\nfunction prevPage() {\n if (logicalIndex \u003e 0) {\n logicalIndex--;\n render();\n }\n}\n\n\/* --- Events --- *\/\nopenBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'flex';\n logicalIndex = 0;\n render();\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n});\n\nfsBtn.addEventListener('click', () =\u003e {\n if (!document.fullscreenElement) {\n overlay.requestFullscreen?.();\n } else {\n document.exitFullscreen?.();\n }\n});\n\n\/* Klick: unterschiedliche Logik für Mobile\/Desktop *\/\noverlay.addEventListener('click', (e) =\u003e {\n const ctrlClicked = e.target === closeBtn || e.target === fsBtn;\n if (ctrlClicked) return;\n \n const mid = window.innerWidth \/ 2;\n \n if (isMobile()) {\n if (e.clientX \u003c mid) prevPage();\n else nextPage();\n } else {\n \/\/ Original Desktop-Logik: Links = vorwärts, Rechts = zurück\n if (e.clientX \u003c mid) nextSpread();\n else prevSpread();\n }\n});\n\n\/* Pfeiltasten: unterschiedliche Logik für Mobile\/Desktop *\/\ndocument.addEventListener('keydown', (e) =\u003e {\n if (overlay.style.display !== 'flex') return;\n \n if (isMobile()) {\n if (e.key === 'ArrowLeft') prevPage();\n if (e.key === 'ArrowRight') nextPage();\n } else {\n \/\/ Original Desktop-Logik\n if (e.key === 'ArrowLeft') nextSpread();\n if (e.key === 'ArrowRight') prevSpread();\n }\n \n if (e.key === 'Escape') {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n});\n\n\/* Swipe (Touch): nur für Mobile *\/\noverlay.addEventListener('touchstart', (e) =\u003e { \n if (e.touches[0]) touchStartX = e.touches[0].clientX; \n}, {passive:true});\n\noverlay.addEventListener('touchend', (e) =\u003e {\n if (touchStartX === null || !isMobile()) return;\n \n const endX = e.changedTouches[0]?.clientX ?? touchStartX;\n const dx = endX - touchStartX;\n const TH = 40;\n \n if (dx \u003e TH) prevPage();\n else if (dx \u003c -TH) nextPage();\n \n touchStartX = null;\n}, {passive:true});\n\n\/* Resize anpassen *\/\nwindow.addEventListener('resize', render);\n\n\/* Rechtsklick blockieren *\/\noverlay.addEventListener('contextmenu', (e) =\u003e e.preventDefault());\n\n\/* Ein bisschen Vorladen rund um die aktuellen Seiten *\/\nfunction preloadAround(idx){\n const list = [idx-2, idx-1, idx, idx+1, idx+2, PAGES.length-1];\n list.forEach(i=\u003e{\n if (i\u003e=0 \u0026\u0026 i\u003cPAGES.length){\n const img = new Image();\n img.src = PAGES[i];\n }\n });\n}\n\n\/\/ Initial vorladen\npreloadAround(0);\n\u003c\/script\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 1","offer_id":56801668825353,"sku":"978-3-69194-018-3","price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 1 Limited Edition","offer_id":56801668858121,"sku":null,"price":20.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Meine-Chefin_Band_1.png?v=1770390074"},{"product_id":"isekai-soapland-manga-band-2","title":"Isekai Soapland - Manga - Band 2","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eDer Manga „Isekai Soapland“ Band 2\u003c\/strong\u003e erscheint als hochwertige Softcover-Edition im Großformat 21 x 14 cm mit 168 Seiten in deutscher Sprache.\u003cbr\u003e – empfohlen ab 18 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit \u003cmeta charset=\"utf-8\"\u003eVariant-Cover \u0026amp; exklusiver Lenticular-Card ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cem\u003eVorläufiges Coverdesign. Änderungen möglich.\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cem\u003e\u003cmeta charset=\"UTF-8\"\u003e \u003cspan\u003e©Shinobu Inokuma\/NIHONBUNGEISHA\u003c\/span\u003e\u003c\/em\u003e\u003c\/p\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 2","offer_id":56967233634569,"sku":null,"price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 2 Limited Edition","offer_id":56967233667337,"sku":null,"price":20.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band_2.png?v=1775562689"},{"product_id":"yandere-dark-elf-manga-band-3","title":"Yandere Dark Elf - Manga - Band 3","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cstrong data-start=\"190\" data-end=\"247\"\u003eDer Manga zu „Yandere Dark Elf: Sie verfolgte mich den ganze Weg aus einer anderen Welt!“ Band 3\u003c\/strong\u003e erscheint als hochwertige Softcover-Ausgabe im Format 14 x 21 cm mit 144 Seiten in deutscher Sprache.\u003cbr data-start=\"349\" data-end=\"352\"\u003e – empfohlen ab 16 Jahren.\u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cem\u003eDie Limited Edition mit Acrylaufsteller ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv style=\"position: fixed; inset: 0; background: rgba(0,0,0,.95); display: none; align-items: center; justify-content: center; z-index: 9999;\" id=\"mangaOverlay\"\u003e\n\u003c!-- Controls --\u003e\n\u003cdiv style=\"position: fixed; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 10000;\"\u003e\n\u003cbutton style=\"padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;\" id=\"fullscreenBtn\"\u003e⛶ Vollbild\u003c\/button\u003e \u003cbutton style=\"padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;\" id=\"closeManga\"\u003e✕ Schließen\u003c\/button\u003e\n\u003c\/div\u003e\n\u003c!-- Page indicator --\u003e\n\u003cdiv style=\"position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.12); color: #fff; padding: 6px 12px; border-radius: 999px; font: 600 12px\/1.2 system-ui,sans-serif;\" id=\"pageIndicator\"\u003e–\u003c\/div\u003e\n\u003c!-- Container (max 1200px) --\u003e\n\u003cdiv style=\"width: min(92vw,1200px); height: 88vh; display: flex; align-items: center; justify-content: center; gap: 0;\" id=\"mangaStage\"\u003e\u003c!-- Seiten werden per JS eingefügt --\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 3","offer_id":56967272759561,"sku":null,"price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 3 Limited Edition mit Acrylaufsteller","offer_id":56967272792329,"sku":null,"price":23.0,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band3.png?v=1775563016"},{"product_id":"gushing-over-magical-girls-manga-band-3","title":"Gushing Over Magical Girls - Manga - Band 3","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cstrong data-start=\"190\" data-end=\"247\"\u003eDer Manga zu „Gushing Over Magical Girls“ Band 3\u003c\/strong\u003e erscheint als hochwertige Softcover-Ausgabe im Format 14 x 21 cm mit 144 Seiten in deutscher Sprache.\u003cbr data-start=\"349\" data-end=\"352\"\u003e – empfohlen ab 16 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit Chibi-Acrylaufsteller ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"position: fixed; inset: 0; background: rgba(0,0,0,.95); display: none; align-items: center; justify-content: center; z-index: 9999;\"\u003e\n\u003c!-- Controls --\u003e\n\u003cdiv style=\"position: fixed; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 10000;\"\u003e\n\u003cbutton id=\"fullscreenBtn\" style=\"padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e \u003cbutton id=\"closeManga\" style=\"padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n\u003c\/div\u003e\n\u003c!-- Page indicator --\u003e\n\u003cdiv id=\"pageIndicator\" style=\"position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.12); color: #fff; padding: 6px 12px; border-radius: 999px; font: 600 12px\/1.2 system-ui,sans-serif;\"\u003e–\u003c\/div\u003e\n\u003c!-- Container (max 1200px) --\u003e\n\u003cdiv id=\"mangaStage\" style=\"width: min(92vw,1200px); height: 88vh; display: flex; align-items: center; justify-content: center; gap: 0;\"\u003e\u003c!-- Seiten werden per JS eingefügt --\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 3","offer_id":56967293763849,"sku":null,"price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 3 Limited Edition mit Acrylaufsteller","offer_id":56967293796617,"sku":null,"price":20.0,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band3_4674eb4d-e3d5-451a-9daf-c0e0243cfbf7.png?v=1775564353"},{"product_id":"skeleton-knight-in-another-world-manga-band-1","title":"Skeleton Knight In Another World - Manga - Band 1","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cstrong data-start=\"190\" data-end=\"247\"\u003eDer Manga „Skeleton Knight In Another World“ Band 1\u003c\/strong\u003e \u003cspan\u003eerscheint als \u003c\/span\u003e\u003cspan\u003ehochwertige Softcover-Edition im Großformat 21 x 14 cm mit 164 Seiten in deutscher Sprache\u003c\/span\u003e.\u003cbr data-start=\"349\" data-end=\"352\"\u003e – empfohlen ab 16 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit exklusivem Metall-Shikishi und Schutzumschlag ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\n\u003cdiv style=\"text-align:center;margin:16px 0;\"\u003e\n \u003cbutton id=\"openMangaPreview\" style=\"padding:12px 20px;border:0;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-weight:600;\"\u003e\n 📖 Leseprobe anzeigen\n \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"\n position:fixed; inset:0; background:rgba(0,0,0,.95);\n display:none; align-items:center; justify-content:center; z-index:9999;\"\u003e\n \u003c!-- Controls --\u003e\n \u003cdiv style=\"position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10000;\"\u003e\n \u003cbutton id=\"fullscreenBtn\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e\n \u003cbutton id=\"closeManga\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003c!-- Page indicator --\u003e\n \u003cdiv id=\"pageIndicator\" style=\"\n position:fixed;bottom:16px;left:50%;transform:translateX(-50%);\n background:rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font:600 12px\/1.2 system-ui,sans-serif;\"\u003e\n –\n \u003c\/div\u003e\n\n \u003c!-- Container (max 1200px) --\u003e\n \u003cdiv id=\"mangaStage\" style=\"\n width:min(92vw,1200px); height:88vh; display:flex; align-items:center; justify-content:center; gap:0;\"\u003e\n \u003c!-- Seiten werden per JS eingefügt --\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* --- Seitenliste (ALLE 28) --- *\/\nconst PAGES = [\n\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight-V1-SE-Cover.jpg?v=1778766343\", \/\/ Cover (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_Farbseiten2.jpg?v=1778766386\", \/\/ Seite 1 (Einzelseite)\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_Farbseiten2.jpg?v=1778766386\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_16.jpg?v=1778766385\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_15.jpg?v=1778766383\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_14.jpg?v=1778766381\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_13.jpg?v=1778766363\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_12.jpg?v=1778766385\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_11.jpg?v=1778766384\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_10.jpg?v=1778766384\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_9.jpg?v=1778766384\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_8.jpg?v=1778766382\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_7.jpg?v=1778766385\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_6.jpg?v=1778766385\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_5.jpg?v=1778766384\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_4.jpg?v=1778766383\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_3.jpg?v=1778766382\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1_2.jpg?v=1778766382\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p1.jpg?v=1778766385\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_16.jpg?v=1778766384\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_15.jpg?v=1778766385\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_14.jpg?v=1778766380\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_13.jpg?v=1778766384\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_12.jpg?v=1778766386\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_11.jpg?v=1778766382\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_10.jpg?v=1778766385\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_9.jpg?v=1778766382\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_8.jpg?v=1778766385\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_7.jpg?v=1778766383\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_6.jpg?v=1778766386\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_5.jpg?v=1778766383\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_4.jpg?v=1778766382\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_3.jpg?v=1778766379\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2_2.jpg?v=1778766380\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p2.jpg?v=1778766384\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_p3.jpg?v=1778766384\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/SkeletonKnight_B1_Impressum.jpg?v=1778766368\", \/\/ Letzte Seite (Einzelseite)\n];\n\n\/* --- DOM --- *\/\nconst overlay = document.getElementById('mangaOverlay');\nconst stage = document.getElementById('mangaStage');\nconst openBtn = document.getElementById('openMangaPreview');\nconst closeBtn= document.getElementById('closeManga');\nconst fsBtn = document.getElementById('fullscreenBtn');\nconst indicator = document.getElementById('pageIndicator');\n\n\/* --- Mobile Erkennung --- *\/\nfunction isMobile() {\n return window.innerWidth \u003c= 768;\n}\n\n\/* --- Helper: Single\/Dual Page Regeln (für Desktop) --- *\/\nfunction isSingle(index) {\n return index === 0 || index === 1 || index === PAGES.length - 1;\n}\n\n\/* --- State --- *\/\nlet logicalIndex = 0; \/\/ zeigt auf die \"rechte\" Seite einer Doppelseite (Manga)\nlet touchStartX = null;\n\n\/* --- Render (unterscheidet zwischen Desktop und Mobile) --- *\/\nfunction render() {\n stage.innerHTML = '';\n stage.style.display = 'flex';\n stage.style.justifyContent = 'center';\n stage.style.alignItems = 'center';\n stage.style.gap = '0';\n \n const H = stage.clientHeight;\n \n if (isMobile()) {\n \/\/ Mobile: Einzelseite mit natürlichen Proportionen\n const img = makeImg(PAGES[logicalIndex], H, true);\n stage.appendChild(img);\n indicator.textContent = `Seite ${logicalIndex + 1} \/ ${PAGES.length}`;\n } else {\n \/\/ Desktop: Original-Doppelseiten-Logik\n \/\/ Einzelseite (Cover \/ Seite 1 \/ letzte)\n if (isSingle(logicalIndex) || logicalIndex \u003e= PAGES.length) {\n const img = makeImg(PAGES[Math.min(logicalIndex, PAGES.length-1)], H, false);\n stage.appendChild(img);\n indicator.textContent = `Seite ${Math.min(logicalIndex+1, PAGES.length)} \/ ${PAGES.length}`;\n return;\n }\n \n \/\/ Doppelseite: Original-Reihenfolge\n const right = makeImg(PAGES[logicalIndex + 1], H, false);\n const left = (logicalIndex + 1 \u003c PAGES.length) ? makeImg(PAGES[logicalIndex], H, false) : null;\n \n stage.appendChild(right);\n if (left) stage.appendChild(left);\n \n const shownCount = Math.min(logicalIndex + (left?2:1), PAGES.length);\n indicator.textContent = `Seite ${shownCount} \/ ${PAGES.length}`;\n }\n}\n\nfunction makeImg(src, maxH, isMobile){\n const img = document.createElement('img');\n img.src = src;\n img.alt = 'Manga-Seite';\n img.draggable = false;\n img.oncontextmenu = () =\u003e false;\n \n if (isMobile) {\n \/\/ Mobile: Natürliche Proportionen, nicht strecken\n Object.assign(img.style, {\n maxHeight: '100%',\n maxWidth: '100%',\n width: 'auto',\n height: 'auto',\n display: 'block',\n objectFit: 'contain',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n } else {\n \/\/ Desktop: Original-Styling\n Object.assign(img.style, {\n maxHeight: maxH + 'px',\n height: '100%',\n width: 'auto',\n display: 'block',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n }\n \n return img;\n}\n\n\/* --- Navigation für Desktop (Original-Doppelseiten-Logik) --- *\/\nfunction nextSpread() {\n if (logicalIndex === 0) { \/\/ Cover -\u003e Seite 1\n logicalIndex = 1;\n } else if (logicalIndex === 1) { \/\/ Seite 1 -\u003e erste Doppelseite\n logicalIndex = 2;\n } else if (logicalIndex + 2 \u003c PAGES.length - 1) { \/\/ normale Doppelseiten\n logicalIndex += 2;\n } else {\n logicalIndex = PAGES.length - 1; \/\/ letzte Einzelseite\n }\n render();\n}\n\nfunction prevSpread() {\n if (logicalIndex === PAGES.length - 1) { \/\/ letzte -\u003e letzte Dopp.\n logicalIndex = PAGES.length - 3;\n } else if (logicalIndex \u003e 2) { \/\/ normale Dopp. zurück\n logicalIndex -= 2;\n } else if (logicalIndex === 2) { \/\/ erste Dopp. -\u003e Seite 1\n logicalIndex = 1;\n } else {\n logicalIndex = 0; \/\/ Seite 1 -\u003e Cover\n }\n render();\n}\n\n\/* --- Navigation für Mobile (Einzelseiten) --- *\/\nfunction nextPage() {\n if (logicalIndex \u003c PAGES.length - 1) {\n logicalIndex++;\n render();\n }\n}\n\nfunction prevPage() {\n if (logicalIndex \u003e 0) {\n logicalIndex--;\n render();\n }\n}\n\n\/* --- Events --- *\/\nopenBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'flex';\n logicalIndex = 0;\n render();\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n});\n\nfsBtn.addEventListener('click', () =\u003e {\n if (!document.fullscreenElement) {\n overlay.requestFullscreen?.();\n } else {\n document.exitFullscreen?.();\n }\n});\n\n\/* Klick: unterschiedliche Logik für Mobile\/Desktop *\/\noverlay.addEventListener('click', (e) =\u003e {\n const ctrlClicked = e.target === closeBtn || e.target === fsBtn;\n if (ctrlClicked) return;\n \n const mid = window.innerWidth \/ 2;\n \n if (isMobile()) {\n if (e.clientX \u003c mid) prevPage();\n else nextPage();\n } else {\n \/\/ Original Desktop-Logik: Links = vorwärts, Rechts = zurück\n if (e.clientX \u003c mid) nextSpread();\n else prevSpread();\n }\n});\n\n\/* Pfeiltasten: unterschiedliche Logik für Mobile\/Desktop *\/\ndocument.addEventListener('keydown', (e) =\u003e {\n if (overlay.style.display !== 'flex') return;\n \n if (isMobile()) {\n if (e.key === 'ArrowLeft') prevPage();\n if (e.key === 'ArrowRight') nextPage();\n } else {\n \/\/ Original Desktop-Logik\n if (e.key === 'ArrowLeft') nextSpread();\n if (e.key === 'ArrowRight') prevSpread();\n }\n \n if (e.key === 'Escape') {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n});\n\n\/* Swipe (Touch): nur für Mobile *\/\noverlay.addEventListener('touchstart', (e) =\u003e { \n if (e.touches[0]) touchStartX = e.touches[0].clientX; \n}, {passive:true});\n\noverlay.addEventListener('touchend', (e) =\u003e {\n if (touchStartX === null || !isMobile()) return;\n \n const endX = e.changedTouches[0]?.clientX ?? touchStartX;\n const dx = endX - touchStartX;\n const TH = 40;\n \n if (dx \u003e TH) prevPage();\n else if (dx \u003c -TH) nextPage();\n \n touchStartX = null;\n}, {passive:true});\n\n\/* Resize anpassen *\/\nwindow.addEventListener('resize', render);\n\n\/* Rechtsklick blockieren *\/\noverlay.addEventListener('contextmenu', (e) =\u003e e.preventDefault());\n\n\/* Ein bisschen Vorladen rund um die aktuellen Seiten *\/\nfunction preloadAround(idx){\n const list = [idx-2, idx-1, idx, idx+1, idx+2, PAGES.length-1];\n list.forEach(i=\u003e{\n if (i\u003e=0 \u0026\u0026 i\u003cPAGES.length){\n const img = new Image();\n img.src = PAGES[i];\n }\n });\n}\n\n\/\/ Initial vorladen\npreloadAround(0);\n\u003c\/script\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 1","offer_id":57050381091081,"sku":null,"price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 1 Limited Edition mit exklusivem Extra","offer_id":57050381123849,"sku":null,"price":20.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Skeleton_Band-1_einzeln.png?v=1778591153"},{"product_id":"campfire-cooking-in-another-world-with-my-absurd-skill-manga-band-1","title":"Campfire Cooking in Another World with My Absurd Skill - Manga - Band 1","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cstrong data-start=\"190\" data-end=\"247\"\u003eDer Manga „Campfire Cooking in Another World with My Absurd Skill“ Band 1\u003c\/strong\u003e erscheint als \u003cspan\u003ehochwertige Softcover-Edition im Großformat 21 x 14 cm mit 176 Seiten in deutscher Sprache\u003c\/span\u003e.\u003cbr data-start=\"349\" data-end=\"352\"\u003e – empfohlen ab 12 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit exklusivem Acrylposter und Variant-Cover-Umschlag ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\n\u003cdiv style=\"text-align:center;margin:16px 0;\"\u003e\n \u003cbutton id=\"openMangaPreview\" style=\"padding:12px 20px;border:0;border-radius:8px;background:#111;color:#fff;cursor:pointer;font-weight:600;\"\u003e\n 📖 Leseprobe anzeigen\n \u003c\/button\u003e\n\u003c\/div\u003e\n\n\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"\n position:fixed; inset:0; background:rgba(0,0,0,.95);\n display:none; align-items:center; justify-content:center; z-index:9999;\"\u003e\n \u003c!-- Controls --\u003e\n \u003cdiv style=\"position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10000;\"\u003e\n \u003cbutton id=\"fullscreenBtn\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e\n \u003cbutton id=\"closeManga\" style=\"padding:8px 12px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n \u003c\/div\u003e\n\n \u003c!-- Page indicator --\u003e\n \u003cdiv id=\"pageIndicator\" style=\"\n position:fixed;bottom:16px;left:50%;transform:translateX(-50%);\n background:rgba(255,255,255,.12);color:#fff;padding:6px 12px;border-radius:999px;font:600 12px\/1.2 system-ui,sans-serif;\"\u003e\n –\n \u003c\/div\u003e\n\n \u003c!-- Container (max 1200px) --\u003e\n \u003cdiv id=\"mangaStage\" style=\"\n width:min(92vw,1200px); height:88vh; display:flex; align-items:center; justify-content:center; gap:0;\"\u003e\n \u003c!-- Seiten werden per JS eingefügt --\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* --- Seitenliste (ALLE 28) --- *\/\nconst PAGES = [\n\n\"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/CampfireCooking_Vol1_Cover.jpg?v=1778767486\", \/\/ Cover (Einzelseite)\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_GF_Farbseiten_2.jpg?v=1778759273\", \/\/ Seite 1 (Einzelseite)\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_GF_Farbseiten.jpg?v=1778759273\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_46.jpg?v=1778759270\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_45.jpg?v=1778759272\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_44.jpg?v=1778759267\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_43.jpg?v=1778759270\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_42.jpg?v=1778759268\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_41.jpg?v=1778759266\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_40.jpg?v=1778759271\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_39.jpg?v=1778759270\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_38.jpg?v=1778759263\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_37.jpg?v=1778759272\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_36.jpg?v=1778759264\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_35.jpg?v=1778759271\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_34.jpg?v=1778759269\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_33.jpg?v=1778759267\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_32.jpg?v=1778759271\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_31.jpg?v=1778759269\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_30.jpg?v=1778759271\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_29.jpg?v=1778759268\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_28.jpg?v=1778759267\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_27.jpg?v=1778759269\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_26.jpg?v=1778759266\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_25.jpg?v=1778759269\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_24.jpg?v=1778759270\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_23.jpg?v=1778759270\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_22.jpg?v=1778759268\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_21.jpg?v=1778759268\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_20.jpg?v=1778759271\",\n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_19.jpg?v=1778759270\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_18.jpg?v=1778759269\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_17.jpg?v=1778759270\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_16.jpg?v=1778759271\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_15.jpg?v=1778759271\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_14.jpg?v=1778759269\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_13.jpg?v=1778759270\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_12.jpg?v=1778759269\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_11.jpg?v=1778759268\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_10.jpg?v=1778759271\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_9.jpg?v=1778759272\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_8.jpg?v=1778759271\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_7.jpg?v=1778759273\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_6.jpg?v=1778759272\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_5.jpg?v=1778759273\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_4.jpg?v=1778759273\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_3.jpg?v=1778759272\",\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_2.jpg?v=1778759249\", \n\n \"https:\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Vol.1_dt_Impressum.jpg?v=1778759258\", \/\/ Letzte Seite (Einzelseite)\n];\n\n\/* --- DOM --- *\/\nconst overlay = document.getElementById('mangaOverlay');\nconst stage = document.getElementById('mangaStage');\nconst openBtn = document.getElementById('openMangaPreview');\nconst closeBtn= document.getElementById('closeManga');\nconst fsBtn = document.getElementById('fullscreenBtn');\nconst indicator = document.getElementById('pageIndicator');\n\n\/* --- Mobile Erkennung --- *\/\nfunction isMobile() {\n return window.innerWidth \u003c= 768;\n}\n\n\/* --- Helper: Single\/Dual Page Regeln (für Desktop) --- *\/\nfunction isSingle(index) {\n return index === 0 || index === 1 || index === PAGES.length - 1;\n}\n\n\/* --- State --- *\/\nlet logicalIndex = 0; \/\/ zeigt auf die \"rechte\" Seite einer Doppelseite (Manga)\nlet touchStartX = null;\n\n\/* --- Render (unterscheidet zwischen Desktop und Mobile) --- *\/\nfunction render() {\n stage.innerHTML = '';\n stage.style.display = 'flex';\n stage.style.justifyContent = 'center';\n stage.style.alignItems = 'center';\n stage.style.gap = '0';\n \n const H = stage.clientHeight;\n \n if (isMobile()) {\n \/\/ Mobile: Einzelseite mit natürlichen Proportionen\n const img = makeImg(PAGES[logicalIndex], H, true);\n stage.appendChild(img);\n indicator.textContent = `Seite ${logicalIndex + 1} \/ ${PAGES.length}`;\n } else {\n \/\/ Desktop: Original-Doppelseiten-Logik\n \/\/ Einzelseite (Cover \/ Seite 1 \/ letzte)\n if (isSingle(logicalIndex) || logicalIndex \u003e= PAGES.length) {\n const img = makeImg(PAGES[Math.min(logicalIndex, PAGES.length-1)], H, false);\n stage.appendChild(img);\n indicator.textContent = `Seite ${Math.min(logicalIndex+1, PAGES.length)} \/ ${PAGES.length}`;\n return;\n }\n \n \/\/ Doppelseite: Original-Reihenfolge\n const right = makeImg(PAGES[logicalIndex + 1], H, false);\n const left = (logicalIndex + 1 \u003c PAGES.length) ? makeImg(PAGES[logicalIndex], H, false) : null;\n \n stage.appendChild(right);\n if (left) stage.appendChild(left);\n \n const shownCount = Math.min(logicalIndex + (left?2:1), PAGES.length);\n indicator.textContent = `Seite ${shownCount} \/ ${PAGES.length}`;\n }\n}\n\nfunction makeImg(src, maxH, isMobile){\n const img = document.createElement('img');\n img.src = src;\n img.alt = 'Manga-Seite';\n img.draggable = false;\n img.oncontextmenu = () =\u003e false;\n \n if (isMobile) {\n \/\/ Mobile: Natürliche Proportionen, nicht strecken\n Object.assign(img.style, {\n maxHeight: '100%',\n maxWidth: '100%',\n width: 'auto',\n height: 'auto',\n display: 'block',\n objectFit: 'contain',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n } else {\n \/\/ Desktop: Original-Styling\n Object.assign(img.style, {\n maxHeight: maxH + 'px',\n height: '100%',\n width: 'auto',\n display: 'block',\n userSelect: 'none',\n WebkitUserDrag: 'none',\n pointerEvents: 'auto'\n });\n }\n \n return img;\n}\n\n\/* --- Navigation für Desktop (Original-Doppelseiten-Logik) --- *\/\nfunction nextSpread() {\n if (logicalIndex === 0) { \/\/ Cover -\u003e Seite 1\n logicalIndex = 1;\n } else if (logicalIndex === 1) { \/\/ Seite 1 -\u003e erste Doppelseite\n logicalIndex = 2;\n } else if (logicalIndex + 2 \u003c PAGES.length - 1) { \/\/ normale Doppelseiten\n logicalIndex += 2;\n } else {\n logicalIndex = PAGES.length - 1; \/\/ letzte Einzelseite\n }\n render();\n}\n\nfunction prevSpread() {\n if (logicalIndex === PAGES.length - 1) { \/\/ letzte -\u003e letzte Dopp.\n logicalIndex = PAGES.length - 3;\n } else if (logicalIndex \u003e 2) { \/\/ normale Dopp. zurück\n logicalIndex -= 2;\n } else if (logicalIndex === 2) { \/\/ erste Dopp. -\u003e Seite 1\n logicalIndex = 1;\n } else {\n logicalIndex = 0; \/\/ Seite 1 -\u003e Cover\n }\n render();\n}\n\n\/* --- Navigation für Mobile (Einzelseiten) --- *\/\nfunction nextPage() {\n if (logicalIndex \u003c PAGES.length - 1) {\n logicalIndex++;\n render();\n }\n}\n\nfunction prevPage() {\n if (logicalIndex \u003e 0) {\n logicalIndex--;\n render();\n }\n}\n\n\/* --- Events --- *\/\nopenBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'flex';\n logicalIndex = 0;\n render();\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', () =\u003e {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n});\n\nfsBtn.addEventListener('click', () =\u003e {\n if (!document.fullscreenElement) {\n overlay.requestFullscreen?.();\n } else {\n document.exitFullscreen?.();\n }\n});\n\n\/* Klick: unterschiedliche Logik für Mobile\/Desktop *\/\noverlay.addEventListener('click', (e) =\u003e {\n const ctrlClicked = e.target === closeBtn || e.target === fsBtn;\n if (ctrlClicked) return;\n \n const mid = window.innerWidth \/ 2;\n \n if (isMobile()) {\n if (e.clientX \u003c mid) prevPage();\n else nextPage();\n } else {\n \/\/ Original Desktop-Logik: Links = vorwärts, Rechts = zurück\n if (e.clientX \u003c mid) nextSpread();\n else prevSpread();\n }\n});\n\n\/* Pfeiltasten: unterschiedliche Logik für Mobile\/Desktop *\/\ndocument.addEventListener('keydown', (e) =\u003e {\n if (overlay.style.display !== 'flex') return;\n \n if (isMobile()) {\n if (e.key === 'ArrowLeft') prevPage();\n if (e.key === 'ArrowRight') nextPage();\n } else {\n \/\/ Original Desktop-Logik\n if (e.key === 'ArrowLeft') nextSpread();\n if (e.key === 'ArrowRight') prevSpread();\n }\n \n if (e.key === 'Escape') {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n});\n\n\/* Swipe (Touch): nur für Mobile *\/\noverlay.addEventListener('touchstart', (e) =\u003e { \n if (e.touches[0]) touchStartX = e.touches[0].clientX; \n}, {passive:true});\n\noverlay.addEventListener('touchend', (e) =\u003e {\n if (touchStartX === null || !isMobile()) return;\n \n const endX = e.changedTouches[0]?.clientX ?? touchStartX;\n const dx = endX - touchStartX;\n const TH = 40;\n \n if (dx \u003e TH) prevPage();\n else if (dx \u003c -TH) nextPage();\n \n touchStartX = null;\n}, {passive:true});\n\n\/* Resize anpassen *\/\nwindow.addEventListener('resize', render);\n\n\/* Rechtsklick blockieren *\/\noverlay.addEventListener('contextmenu', (e) =\u003e e.preventDefault());\n\n\/* Ein bisschen Vorladen rund um die aktuellen Seiten *\/\nfunction preloadAround(idx){\n const list = [idx-2, idx-1, idx, idx+1, idx+2, PAGES.length-1];\n list.forEach(i=\u003e{\n if (i\u003e=0 \u0026\u0026 i\u003cPAGES.length){\n const img = new Image();\n img.src = PAGES[i];\n }\n });\n}\n\n\/\/ Initial vorladen\npreloadAround(0);\n\u003c\/script\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 1","offer_id":57050425688329,"sku":null,"price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 1 Limited Edition mit exklusivem Extra","offer_id":57050425721097,"sku":null,"price":20.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Campfire_Band-1_einzeln.png?v=1778591859"},{"product_id":"gushing-over-magical-girls-manga-band-4","title":"Gushing Over Magical Girls - Manga - Band 4","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cstrong data-start=\"190\" data-end=\"247\"\u003eDer Manga zu „Gushing Over Magical Girls“ Band 4\u003c\/strong\u003e erscheint als hochwertige Softcover-Ausgabe im Format 14 x 21 cm mit 144 Seiten in deutscher Sprache.\u003cbr data-start=\"349\" data-end=\"352\"\u003e – empfohlen ab 16 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit Chibi-Acrylaufsteller ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"position: fixed; inset: 0; background: rgba(0,0,0,.95); display: none; align-items: center; justify-content: center; z-index: 9999;\"\u003e\n\u003c!-- Controls --\u003e\n\u003cdiv style=\"position: fixed; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 10000;\"\u003e\n\u003cbutton id=\"fullscreenBtn\" style=\"padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e \u003cbutton id=\"closeManga\" style=\"padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n\u003c\/div\u003e\n\u003c!-- Page indicator --\u003e\n\u003cdiv id=\"pageIndicator\" style=\"position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.12); color: #fff; padding: 6px 12px; border-radius: 999px; font: 600 12px\/1.2 system-ui,sans-serif;\"\u003e–\u003c\/div\u003e\n\u003c!-- Container (max 1200px) --\u003e\n\u003cdiv id=\"mangaStage\" style=\"width: min(92vw,1200px); height: 88vh; display: flex; align-items: center; justify-content: center; gap: 0;\"\u003e\u003c!-- Seiten werden per JS eingefügt --\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 4","offer_id":57119474549001,"sku":null,"price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 4 Limited Edition mit Acrylaufsteller","offer_id":57119474581769,"sku":null,"price":20.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band4.png?v=1781019375"},{"product_id":"yandere-dark-elf-manga-band-4","title":"Yandere Dark Elf - Manga - Band 4","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-end=\"472\" data-start=\"190\"\u003e\u003cstrong data-end=\"247\" data-start=\"190\"\u003eDer Manga zu „Yandere Dark Elf: Sie verfolgte mich den ganze Weg aus einer anderen Welt!“ Band 4\u003c\/strong\u003e erscheint als hochwertige Softcover-Ausgabe im Format 14 x 21 cm mit 144 Seiten in deutscher Sprache.\u003cbr data-end=\"352\" data-start=\"349\"\u003e – empfohlen ab 16 Jahren.\u003c\/p\u003e\n\u003cp data-end=\"472\" data-start=\"190\"\u003e\u003cem\u003eDie Limited Edition mit Acrylaufsteller ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e\n\u003c!-- ============ Manga Leseprobe (Popup) ============ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- Öffnen-Button (kannst du überall platzieren, z.B. Produktseite) --\u003e\u003c!-- Overlay \/ Viewer --\u003e\n\u003cdiv id=\"mangaOverlay\" style=\"position: fixed; inset: 0; background: rgba(0,0,0,.95); display: none; align-items: center; justify-content: center; z-index: 9999;\"\u003e\n\u003c!-- Controls --\u003e\n\u003cdiv style=\"position: fixed; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 10000;\"\u003e\n\u003cbutton id=\"fullscreenBtn\" style=\"padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;\"\u003e⛶ Vollbild\u003c\/button\u003e \u003cbutton id=\"closeManga\" style=\"padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;\"\u003e✕ Schließen\u003c\/button\u003e\n\u003c\/div\u003e\n\u003c!-- Page indicator --\u003e\n\u003cdiv id=\"pageIndicator\" style=\"position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.12); color: #fff; padding: 6px 12px; border-radius: 999px; font: 600 12px\/1.2 system-ui,sans-serif;\"\u003e–\u003c\/div\u003e\n\u003c!-- Container (max 1200px) --\u003e\n\u003cdiv id=\"mangaStage\" style=\"width: min(92vw,1200px); height: 88vh; display: flex; align-items: center; justify-content: center; gap: 0;\"\u003e\u003c!-- Seiten werden per JS eingefügt --\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- ============ \/Manga Leseprobe ============ --\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 4","offer_id":57119501549833,"sku":null,"price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 4 Limited Edition mit Acrylaufsteller","offer_id":57119501582601,"sku":null,"price":23.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Band4_971e5d6d-4650-4cd3-91b5-c95e92b535b1.png?v=1781020623"},{"product_id":"meine-chefin-kommt-immer-zuerst-manga-band-2","title":"Meine Chefin kommt immer zuerst!! - Manga - Band 2","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eDer Manga „Meine Chefin kommt immer zuerst!!“ Band 2\u003c\/strong\u003e erscheint als hochwertige Softcover-Edition im Großformat 21 x 14 cm mit 162 Seiten in deutscher Sprache.\u003cbr\u003e – empfohlen ab 16 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit exklusivem Extra ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 2","offer_id":57195279810825,"sku":"978-3-69194-030-5","price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 2 Limited Edition","offer_id":57195279843593,"sku":"978-3-69194-031-2","price":20.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/Meine-Chefin_Band_2_a8951a57-9afa-4e80-9af3-db56bafd3994.png?v=1783950593"},{"product_id":"love-in-reverse","title":"Love in Reverse - Heute Nacht gehöre ich dir","description":"\u003cp\u003e \u003c\/p\u003e\n\u003cp data-start=\"190\" data-end=\"472\"\u003e\u003cstrong\u003eDer Manga „Love in Reverse - Heute Nacht gehöre ich dir!!“ Band 1\u003c\/strong\u003e erscheint als hochwertige Softcover-Edition im Großformat 21 x 14 cm mit 208 Seiten in deutscher Sprache.\u003cbr\u003e – empfohlen ab 18 Jahren.\u003cbr\u003e\u003cbr\u003e\u003cem\u003eDie Limited Edition mit \u003cmeta charset=\"utf-8\"\u003eexklusivem Acrylposter und Variant-Cover-Umschlag ist AniMoon- \u0026amp; MANGAMOON-Shop exklusiv!\u003c\/em\u003e\u003c\/p\u003e","brand":"AniMoon Shop","offers":[{"title":"Band 1","offer_id":57223184843017,"sku":"978-3-69194-038-1","price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 1 Limited Edition","offer_id":57223184875785,"sku":"978-3-69194-039-8","price":20.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0652\/3541\/9401\/files\/LiR_Band1.png?v=1785156430"}],"url":"https:\/\/animoon-publishing.de\/collections\/manga.oembed?page=2","provider":"AniMoon Publishing ","version":"1.0","type":"link"}