{"title":"Skeleton Knight In Another World","description":"","products":[{"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-end=\"472\" data-start=\"190\"\u003e\u003cstrong data-end=\"247\" data-start=\"190\"\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-end=\"352\" data-start=\"349\"\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\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 (Vorbestellung)","offer_id":57050381091081,"sku":null,"price":13.0,"currency_code":"EUR","in_stock":true},{"title":"Band 1 Limited Edition mit exklusivem Extra (Vorbestellung)","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"}],"url":"https:\/\/animoon-publishing.de\/collections\/skeleton-knight-in-another-world.oembed","provider":"AniMoon Publishing ","version":"1.0","type":"link"}