Page target navigation

2025-10-29 09:05:30 +00:00 · 2025-09-19 16:41:00 +02:00
parent 04d62d9e67
commit 2574124588
22 changed files with 1582 additions and 203 deletions
--- a/views/assets/scripts.js
+++ b/views/assets/scripts.js
@@ -1,25 +1,25 @@
-const L = "script[xslt-onload]", w = "xslt-template", E = "xslt-transformed", y = /* @__PURE__ */ new Map();
+const A = "script[xslt-onload]", w = "xslt-template", L = "xslt-transformed", y = /* @__PURE__ */ new Map();
 function v() {
-  let o = htmx.findAll(L);
+  let o = htmx.findAll(A);
  for (let t of o)
-    q(t);
+    E(t);
 }
-function q(o) {
-  if (o.getAttribute(E) === "true" || !o.hasAttribute(w))
+function E(o) {
+  if (o.getAttribute(L) === "true" || !o.hasAttribute(w))
    return;
  let t = "#" + o.getAttribute(w), e = y.get(t);
  if (!e) {
-    let a = htmx.find(t);
-    if (a) {
-      let s = a.innerHTML ? new DOMParser().parseFromString(a.innerHTML, "application/xml") : a.contentDocument;
-      e = new XSLTProcessor(), e.importStylesheet(s), y.set(t, e);
+    let s = htmx.find(t);
+    if (s) {
+      let a = s.innerHTML ? new DOMParser().parseFromString(s.innerHTML, "application/xml") : s.contentDocument;
+      e = new XSLTProcessor(), e.importStylesheet(a), y.set(t, e);
    } else
      throw new Error("Unknown XSLT template: " + t);
  }
  let n = new DOMParser().parseFromString(o.innerHTML, "application/xml"), i = e.transformToFragment(n, document), r = new XMLSerializer().serializeToString(i);
  o.outerHTML = r;
 }
-function k() {
+function q() {
  document.querySelectorAll("template[simple]").forEach((t) => {
    let e = t.getAttribute("id"), n = t.content;
    customElements.define(
@@ -31,8 +31,8 @@ function k() {
        connectedCallback() {
          let i = [];
          this.slots.forEach((r) => {
-            let a = r.getAttribute("name"), s = this.querySelector(`[slot="${a}"]`);
-            s && (r.replaceWith(s.cloneNode(!0)), i.push(s));
+            let s = r.getAttribute("name"), a = this.querySelector(`[slot="${s}"]`);
+            a && (r.replaceWith(a.cloneNode(!0)), i.push(a));
          }), i.forEach((r) => {
            r.remove();
          });
@@ -46,12 +46,12 @@ window.currentPageContainers = window.currentPageContainers || [];
 window.currentActiveIndex = window.currentActiveIndex || 0;
 window.pageObserver = window.pageObserver || null;
 window.scrollTimeout = window.scrollTimeout || null;
-function B() {
+function k() {
  window.highlightObserver && (window.highlightObserver.disconnect(), window.highlightObserver = null);
  const o = document.querySelectorAll(".newspaper-page-container");
  window.highlightObserver = new IntersectionObserver(
    (t) => {
-      C();
+      P();
    },
    {
      rootMargin: "-20% 0px -70% 0px"
@@ -60,14 +60,14 @@ function B() {
    window.highlightObserver.observe(t);
  });
 }
-function C() {
+function P() {
  const o = [];
  document.querySelectorAll(".newspaper-page-container").forEach((e) => {
-    const n = e.getBoundingClientRect(), i = window.innerHeight, r = Math.max(n.top, 0), a = Math.min(n.bottom, i), s = Math.max(0, a - r), l = n.height, g = s / l >= 0.5, u = e.querySelector("img[data-page]"), f = u ? u.getAttribute("data-page") : "unknown";
-    g && u && f && !o.includes(f) && o.push(f);
-  }), M(o), o.length > 0 && I(o);
+    const n = e.getBoundingClientRect(), i = window.innerHeight, r = Math.max(n.top, 0), s = Math.min(n.bottom, i), a = Math.max(0, s - r), l = n.height, u = a / l >= 0.5, g = e.querySelector("img[data-page]"), p = g ? g.getAttribute("data-page") : "unknown";
+    u && g && p && !o.includes(p) && o.push(p);
+  }), $(o), o.length > 0 && S(o);
 }
-function M(o) {
+function $(o) {
  document.querySelectorAll(".continuation-entry").forEach((t) => {
    t.style.display = "none";
  }), o.forEach((t) => {
@@ -75,9 +75,9 @@ function M(o) {
    e && e.querySelectorAll(".continuation-entry").forEach((i) => {
      i.style.display = "";
    });
-  }), H(o), N();
+  }), B(o), M();
 }
-function H(o) {
+function B(o) {
  document.querySelectorAll(".work-title").forEach((t) => {
    const e = t.getAttribute("data-short-title");
    e && (t.textContent = e);
@@ -89,7 +89,7 @@ function H(o) {
    });
  });
 }
-function N() {
+function M() {
  document.querySelectorAll(".page-entry").forEach((o) => {
    const t = o.querySelectorAll(".inhalts-entry");
    let e = !1;
@@ -98,10 +98,10 @@ function N() {
    }), e ? o.style.display = "" : o.style.display = "none";
  });
 }
-function S(o) {
-  I([o]);
+function C(o) {
+  S([o]);
 }
-function I(o) {
+function S(o) {
  console.log("markCurrentPagesInInhaltsverzeichnis called with:", o), document.querySelectorAll("[data-page-container]").forEach((e) => {
    e.hasAttribute("data-beilage") ? (e.classList.remove("border-red-500"), e.classList.add("border-amber-400")) : (e.classList.remove("border-red-500"), e.classList.add("border-slate-300"));
  }), document.querySelectorAll(".page-number-inhalts").forEach((e) => {
@@ -125,20 +125,20 @@ function I(o) {
      const i = document.querySelector(`[data-page-container="${e}"]`);
      i && (i.classList.remove("border-slate-300", "border-amber-400"), i.classList.add("border-red-500"));
      const r = n.closest(".page-entry");
-      r && (r.querySelectorAll(".inhalts-entry").forEach((s) => {
-        s.classList.remove("hover:bg-slate-100"), s.style.cursor = "default";
-      }), r.querySelectorAll('a[href*="/"]').forEach((s) => {
-        s.getAttribute("aria-current") === "page" && (s.style.textDecoration = "none", s.style.pointerEvents = "none", s.classList.add("no-underline"), s.classList.remove("hover:bg-blue-100"));
+      r && (r.querySelectorAll(".inhalts-entry").forEach((a) => {
+        a.classList.remove("hover:bg-slate-100"), a.style.cursor = "default";
+      }), r.querySelectorAll('a[href*="/"]').forEach((a) => {
+        a.getAttribute("aria-current") === "page" && (a.style.textDecoration = "none", a.style.pointerEvents = "none", a.classList.add("no-underline"), a.classList.remove("hover:bg-blue-100"));
      }));
    }
-  }), t.length > 0 && $(t[0]), document.querySelectorAll(".page-indicator").forEach((e) => {
+  }), t.length > 0 && N(t[0]), document.querySelectorAll(".page-indicator").forEach((e) => {
    e.classList.remove("text-red-600", "font-bold"), e.classList.add("text-slate-600", "font-semibold"), e.classList.contains("bg-amber-50") || e.classList.add("bg-blue-50");
  }), o.forEach((e) => {
    const n = document.querySelector(`.page-indicator[data-page="${e}"]`);
    n && (n.classList.remove("text-slate-600"), n.classList.add("text-red-600", "font-bold"));
  });
 }
-function $(o) {
+function N(o) {
  const t = o.closest(".lg\\:overflow-y-auto");
  if (t) {
    const e = t.getBoundingClientRect(), n = o.getBoundingClientRect(), i = n.top < e.top, r = n.bottom > e.bottom;
@@ -148,19 +148,19 @@ function $(o) {
    });
  }
 }
-function R(o, t, e) {
+function H(o, t, e) {
  let n = document.querySelector("single-page-viewer");
  n || (n = document.createElement("single-page-viewer"), document.body.appendChild(n));
-  const i = o.closest('[data-beilage="true"]') !== null;
-  n.show(o.src, o.alt, t, i);
+  const i = o.closest('[data-beilage="true"]') !== null, r = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
+  n.show(o.src, o.alt, t, i, r);
 }
-function T() {
+function I() {
  document.getElementById("pageModal").classList.add("hidden");
 }
-function O() {
+function R() {
  if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from(
    document.querySelectorAll(".newspaper-page-container")
-  ), window.currentActiveIndex = 0, p(), document.querySelector(".newspaper-page-container")) {
+  ), window.currentActiveIndex = 0, h(), document.querySelector(".newspaper-page-container")) {
    let t = /* @__PURE__ */ new Set();
    window.pageObserver = new IntersectionObserver(
      (e) => {
@@ -168,8 +168,8 @@ function O() {
          const i = window.currentPageContainers.indexOf(n.target);
          i !== -1 && (n.isIntersecting ? t.add(i) : t.delete(i));
        }), t.size > 0) {
-          const i = Array.from(t).sort((r, a) => r - a)[0];
-          i !== window.currentActiveIndex && (window.currentActiveIndex = i, p());
+          const i = Array.from(t).sort((r, s) => r - s)[0];
+          i !== window.currentActiveIndex && (window.currentActiveIndex = i, h());
        }
      },
      {
@@ -180,13 +180,13 @@ function O() {
    });
  }
 }
-function K() {
+function O() {
  if (window.currentActiveIndex > 0) {
    let o = -1;
    const t = [];
    window.currentPageContainers.forEach((n, i) => {
-      const r = n.getBoundingClientRect(), a = window.innerHeight, s = Math.max(r.top, 0), l = Math.min(r.bottom, a), c = Math.max(0, l - s), g = r.height;
-      c / g >= 0.3 && t.push(i);
+      const r = n.getBoundingClientRect(), s = window.innerHeight, a = Math.max(r.top, 0), l = Math.min(r.bottom, s), c = Math.max(0, l - a), u = r.height;
+      c / u >= 0.3 && t.push(i);
    });
    const e = Math.min(...t);
    for (let n = e - 1; n >= 0; n--)
@@ -198,17 +198,17 @@ function K() {
      behavior: "smooth",
      block: "start"
    }), setTimeout(() => {
-      p();
+      h();
    }, 100));
  }
 }
-function V() {
+function D() {
  if (window.currentActiveIndex < window.currentPageContainers.length - 1) {
    let o = -1;
    const t = [];
    window.currentPageContainers.forEach((n, i) => {
-      const r = n.getBoundingClientRect(), a = window.innerHeight, s = Math.max(r.top, 0), l = Math.min(r.bottom, a), c = Math.max(0, l - s), g = r.height;
-      c / g >= 0.3 && t.push(i);
+      const r = n.getBoundingClientRect(), s = window.innerHeight, a = Math.max(r.top, 0), l = Math.min(r.bottom, s), c = Math.max(0, l - a), u = r.height;
+      c / u >= 0.3 && t.push(i);
    });
    const e = Math.max(...t);
    for (let n = e + 1; n < window.currentPageContainers.length; n++)
@@ -220,12 +220,12 @@ function V() {
      behavior: "smooth",
      block: "start"
    }), setTimeout(() => {
-      p();
+      h();
    }, 100));
  }
 }
-function z() {
-  if (A()) {
+function K() {
+  if (T()) {
    const t = document.querySelector("#newspaper-content .newspaper-page-container");
    t && t.scrollIntoView({
      behavior: "smooth",
@@ -239,11 +239,11 @@ function z() {
    });
  }
 }
-function A() {
+function T() {
  const o = [];
  window.currentPageContainers.forEach((t, e) => {
-    const n = t.getBoundingClientRect(), i = window.innerHeight, r = Math.max(n.top, 0), a = Math.min(n.bottom, i), s = Math.max(0, a - r), l = n.height;
-    s / l >= 0.3 && o.push(e);
+    const n = t.getBoundingClientRect(), i = window.innerHeight, r = Math.max(n.top, 0), s = Math.min(n.bottom, i), a = Math.max(0, s - r), l = n.height;
+    a / l >= 0.3 && o.push(e);
  });
  for (const t of o) {
    const e = window.currentPageContainers[t];
@@ -252,19 +252,19 @@ function A() {
  }
  return !1;
 }
-function p() {
+function h() {
  const o = document.getElementById("prevPageBtn"), t = document.getElementById("nextPageBtn"), e = document.getElementById("beilageBtn");
  if (o && (window.currentActiveIndex <= 0 ? o.style.display = "none" : o.style.display = "flex"), t && (window.currentActiveIndex >= window.currentPageContainers.length - 1 ? t.style.display = "none" : t.style.display = "flex"), e) {
-    const n = A(), i = e.querySelector("i");
+    const n = T(), i = e.querySelector("i");
    n ? (e.title = "Zur Hauptausgabe", e.className = "w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 hover:text-gray-800 border border-gray-300 transition-colors duration-200 flex items-center justify-center cursor-pointer", i && (i.className = "ri-file-text-line text-lg lg:text-xl")) : (e.title = "Zu Beilage", e.className = "w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-amber-100 hover:bg-amber-200 text-amber-700 hover:text-amber-800 border border-amber-300 transition-colors duration-200 flex items-center justify-center cursor-pointer", i && (i.className = "ri-attachment-line text-lg lg:text-xl"));
  }
 }
-function j() {
+function V() {
  const o = document.getElementById("shareLinkBtn");
  let t = "";
  if (window.currentActiveIndex !== void 0 && window.currentPageContainers && window.currentPageContainers[window.currentActiveIndex]) {
    const i = window.currentPageContainers[window.currentActiveIndex].querySelector("[data-page]");
-    i && (t = `#page-${i.getAttribute("data-page")}`);
+    i && (t = `/${i.getAttribute("data-page")}`);
  }
  const e = window.location.origin + window.location.pathname + t;
  navigator.share ? navigator.share({
@@ -294,8 +294,11 @@ function x(o, t) {
    }
  }
 }
-function D() {
-  const o = document.getElementById("citationBtn"), t = document.title || "KGPZ", e = window.location.href, n = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), i = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${t}. Digital verfügbar unter: ${e} (Zugriff: ${n}).`;
+function z() {
+  const o = document.getElementById("citationBtn"), t = document.title || "KGPZ";
+  let e = window.location.origin + window.location.pathname;
+  e.includes("#") && (e = e.split("#")[0]);
+  const n = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), i = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${t}. Digital verfügbar unter: ${e} (Zugriff: ${n}).`;
  if (navigator.clipboard)
    navigator.clipboard.writeText(i).then(() => {
      d(o, "Zitation kopiert!");
@@ -306,8 +309,8 @@ function D() {
    const r = document.createElement("textarea");
    r.value = i, document.body.appendChild(r), r.select();
    try {
-      const a = document.execCommand("copy");
-      d(o, a ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
+      const s = document.execCommand("copy");
+      d(o, s ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
    } catch {
      d(o, "Kopieren fehlgeschlagen");
    } finally {
@@ -333,10 +336,10 @@ function d(o, t) {
 		transition: opacity 0.2s ease;
 		white-space: nowrap;
 	`;
-  const i = o.getBoundingClientRect(), r = window.innerHeight, a = window.innerWidth;
-  let s = i.left - 10, l = i.bottom + 8;
-  const c = 120, g = 32;
-  s + c > a && (s = i.right - c + 10), l + g > r && (l = i.top - g - 8), n.style.left = Math.max(5, s) + "px", n.style.top = Math.max(5, l) + "px", document.body.appendChild(n), setTimeout(() => {
+  const i = o.getBoundingClientRect(), r = window.innerHeight, s = window.innerWidth;
+  let a = i.left - 10, l = i.bottom + 8;
+  const c = 120, u = 32;
+  a + c > s && (a = i.right - c + 10), l + u > r && (l = i.top - u - 8), n.style.left = Math.max(5, a) + "px", n.style.top = Math.max(5, l) + "px", document.body.appendChild(n), setTimeout(() => {
    n.style.opacity = "1";
  }, 10), setTimeout(() => {
    n.style.opacity = "0", setTimeout(() => {
@@ -344,39 +347,42 @@ function d(o, t) {
    }, 200);
  }, 2e3);
 }
-function P() {
-  const o = window.location.hash;
-  let t = "", e = null;
-  if (o.startsWith("#page-")) {
-    if (t = o.replace("#page-", ""), e = document.getElementById(`page-${t}`), !e) {
+function j() {
+  let o = "", t = null;
+  const e = window.location.pathname.split("/");
+  if (e.length >= 4 && !isNaN(e[e.length - 1])) {
+    if (o = e[e.length - 1], t = document.getElementById(`page-${o}`), !t) {
      const n = document.querySelectorAll(".newspaper-page-container[data-pages]");
      for (const i of n) {
        const r = i.getAttribute("data-pages");
-        if (r && r.split(",").includes(t)) {
-          e = i;
+        if (r && r.split(",").includes(o)) {
+          t = i;
          break;
        }
      }
    }
-    e || (e = document.getElementById(`beilage-1-page-${t}`) || document.getElementById(`beilage-2-page-${t}`) || document.querySelector(`[id*="beilage"][id*="page-${t}"]`));
-  } else if (o.startsWith("#beilage-")) {
-    const n = o.match(/#beilage-(\d+)-page-(\d+)/);
-    if (n) {
-      const i = n[1];
-      t = n[2], e = document.getElementById(`beilage-${i}-page-${t}`);
-    }
+    t || (t = document.getElementById(`beilage-1-page-${o}`) || document.getElementById(`beilage-2-page-${o}`) || document.querySelector(`[id*="beilage"][id*="page-${o}"]`));
  }
-  e && t && setTimeout(() => {
-    e.scrollIntoView({
+  t && o && setTimeout(() => {
+    t.scrollIntoView({
      behavior: "smooth",
      block: "start"
-    }), S(t);
+    }), C(o);
  }, 300);
 }
 function b(o, t, e = !1) {
  let n = "";
-  e ? n = `#beilage-1-page-${o}` : n = `#page-${o}`;
-  const i = window.location.origin + window.location.pathname + n;
+  if (e)
+    n = window.location.origin + window.location.pathname + `#beilage-1-page-${o}`;
+  else {
+    const r = window.location.pathname.split("/");
+    if (r.length >= 3) {
+      const s = r[1], a = r[2];
+      n = `${window.location.origin}/${s}/${a}/${o}`;
+    } else
+      n = window.location.origin + window.location.pathname + `/${o}`;
+  }
+  const i = n;
  if (navigator.clipboard)
    navigator.clipboard.writeText(i).then(() => {
      d(t, "Link kopiert!");
@@ -387,8 +393,8 @@ function b(o, t, e = !1) {
    const r = document.createElement("textarea");
    r.value = i, document.body.appendChild(r), r.select();
    try {
-      const a = document.execCommand("copy");
-      d(t, a ? "Link kopiert!" : "Kopieren fehlgeschlagen");
+      const s = document.execCommand("copy");
+      d(t, s ? "Link kopiert!" : "Kopieren fehlgeschlagen");
    } catch {
      d(t, "Kopieren fehlgeschlagen");
    } finally {
@@ -397,58 +403,65 @@ function b(o, t, e = !1) {
  }
 }
 function m(o, t) {
-  const e = document.title || "KGPZ", n = `${window.location.origin}${window.location.pathname}#page-${o}`, i = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), r = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${e}, Seite ${o}. Digital verfügbar unter: ${n} (Zugriff: ${i}).`;
+  const e = document.title || "KGPZ", n = window.location.pathname.split("/");
+  let i;
+  if (n.length >= 3) {
+    const l = n[1], c = n[2];
+    i = `${window.location.origin}/${l}/${c}/${o}`;
+  } else
+    i = `${window.location.origin}${window.location.pathname}/${o}`;
+  const r = i, s = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), a = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${e}, Seite ${o}. Digital verfügbar unter: ${r} (Zugriff: ${s}).`;
  if (navigator.clipboard)
-    navigator.clipboard.writeText(r).then(() => {
+    navigator.clipboard.writeText(a).then(() => {
      d(t, "Zitation kopiert!");
-    }).catch((a) => {
+    }).catch((l) => {
      d(t, "Kopieren fehlgeschlagen");
    });
  else {
-    const a = document.createElement("textarea");
-    a.value = r, document.body.appendChild(a), a.select();
+    const l = document.createElement("textarea");
+    l.value = a, document.body.appendChild(l), l.select();
    try {
-      const s = document.execCommand("copy");
-      d(t, s ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
+      const c = document.execCommand("copy");
+      d(t, c ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
    } catch {
      d(t, "Kopieren fehlgeschlagen");
    } finally {
-      document.body.removeChild(a);
+      document.body.removeChild(l);
    }
  }
 }
-function h() {
-  B(), O(), window.addEventListener("scroll", function() {
+function f() {
+  k(), R(), window.addEventListener("scroll", function() {
    clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => {
-      C(), p();
+      P(), h();
    }, 50);
-  }), P(), window.addEventListener("hashchange", P), document.addEventListener("keydown", function(o) {
-    o.key === "Escape" && T();
+  }), j(), document.addEventListener("keydown", function(o) {
+    o.key === "Escape" && I();
  });
 }
-window.enlargePage = R;
-window.closeModal = T;
-window.scrollToPreviousPage = K;
-window.scrollToNextPage = V;
-window.scrollToBeilage = z;
-window.shareCurrentPage = j;
-window.generateCitation = D;
+window.enlargePage = H;
+window.closeModal = I;
+window.scrollToPreviousPage = O;
+window.scrollToNextPage = D;
+window.scrollToBeilage = K;
+window.shareCurrentPage = V;
+window.generateCitation = z;
 window.copyPagePermalink = b;
 window.generatePageCitation = m;
 function _() {
-  v(), k(), document.querySelector(".newspaper-page-container") && h(), htmx.on("htmx:load", function(o) {
+  v(), q(), document.querySelector(".newspaper-page-container") && f(), htmx.on("htmx:load", function(o) {
    v();
  }), document.body.addEventListener("htmx:afterSwap", function(o) {
    setTimeout(() => {
-      document.querySelector(".newspaper-page-container") && h();
+      document.querySelector(".newspaper-page-container") && f();
    }, 100);
  }), document.body.addEventListener("htmx:afterSettle", function(o) {
    setTimeout(() => {
-      document.querySelector(".newspaper-page-container") && h();
+      document.querySelector(".newspaper-page-container") && f();
    }, 200);
  }), document.body.addEventListener("htmx:load", function(o) {
    setTimeout(() => {
-      document.querySelector(".newspaper-page-container") && h();
+      document.querySelector(".newspaper-page-container") && f();
    }, 100);
  });
 }
@@ -481,7 +494,7 @@ class Z extends HTMLElement {
 								<!-- Page indicator with icon -->
 								<div id="page-indicator" class="text-slate-800 flex items-center gap-3">
 									<span id="page-icon" class="text-lg"></span>
-									<span id="page-number" class="text-2xl font-serif font-bold"></span>
+									<span id="page-number" class="text-lg font-bold bg-blue-50 px-2 py-1 rounded flex items-center gap-1"></span>
 								</div>
 							</div>

@@ -552,11 +565,19 @@ class Z extends HTMLElement {
 			</div>
 		`;
  }
-  show(t, e, n, i = !1) {
-    const r = this.querySelector("#single-page-image"), a = this.querySelector("#page-number"), s = this.querySelector("#page-icon");
-    this.querySelector("#page-indicator"), r.src = t, r.alt = e, this.currentPageNumber = n, this.currentIsBeilage = i, a.textContent = n;
-    const l = this.determinePageIconType(n, i);
-    s.innerHTML = this.getPageIconHTML(l), this.updateNavigationButtons(), this.style.display = "block", document.body.style.overflow = "hidden", S(n);
+  show(t, e, n, i = !1, r = 0) {
+    const s = this.querySelector("#single-page-image"), a = this.querySelector("#page-number"), l = this.querySelector("#page-icon");
+    this.querySelector("#page-indicator"), s.src = t, s.alt = e, this.currentPageNumber = n, this.currentIsBeilage = i;
+    const c = this.getIssueContext(n);
+    if (a.innerHTML = c ? `${c}, ${n}` : `${n}`, r && n === r) {
+      a.style.position = "relative";
+      const g = a.querySelector(".target-page-dot");
+      g && g.remove();
+      const p = document.createElement("span");
+      p.className = "target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10", p.title = "verlinkte Seite", a.appendChild(p);
+    }
+    const u = this.determinePageIconType(n, i);
+    l.innerHTML = this.getPageIconHTML(u), this.updateNavigationButtons(), this.style.display = "block", document.body.style.overflow = "hidden", C(n);
  }
  close() {
    this.style.display = "none", document.body.style.overflow = "";
@@ -573,8 +594,8 @@ class Z extends HTMLElement {
    }).filter((l) => l !== null).sort((l, c) => l - c);
    if (r.length === 0)
      return "first";
-    const a = r[0], s = r[r.length - 1];
-    return t === a ? "first" : t === s ? "last" : t === a + 1 ? "even" : t === s - 1 ? "odd" : t % 2 === 0 ? "even" : "odd";
+    const s = r[0], a = r[r.length - 1];
+    return t === s ? "first" : t === a ? "last" : t === s + 1 ? "even" : t === a - 1 ? "odd" : t % 2 === 0 ? "even" : "odd";
  }
  // Generate page icon HTML based on type (same as Go PageIcon function)
  getPageIconHTML(t) {
@@ -617,15 +638,15 @@ class Z extends HTMLElement {
    this.currentIsBeilage ? t = '.newspaper-page-container[data-beilage="true"]' : t = ".newspaper-page-container:not([data-beilage])";
    const e = Array.from(document.querySelectorAll(t));
    console.log("Found containers:", e.length, "for", this.currentIsBeilage ? "beilage" : "main");
-    const n = e.map((s) => {
-      const l = s.getAttribute("data-page-container"), c = l ? parseInt(l) : null;
+    const n = e.map((a) => {
+      const l = a.getAttribute("data-page-container"), c = l ? parseInt(l) : null;
      return console.log("Container page:", l, "parsed:", c), c;
-    }).filter((s) => s !== null).sort((s, l) => s - l);
+    }).filter((a) => a !== null).sort((a, l) => a - l);
    console.log("All pages found:", n), console.log("Current page:", this.currentPageNumber);
    const i = n.indexOf(this.currentPageNumber);
    console.log("Current index:", i);
-    let r = null, a = null;
-    return i > 0 && (r = n[i - 1]), i < n.length - 1 && (a = n[i + 1]), console.log("Adjacent pages - prev:", r, "next:", a), { prevPage: r, nextPage: a };
+    let r = null, s = null;
+    return i > 0 && (r = n[i - 1]), i < n.length - 1 && (s = n[i + 1]), console.log("Adjacent pages - prev:", r, "next:", s), { prevPage: r, nextPage: s };
  }
  // Navigate to previous page
  goToPreviousPage() {
@@ -650,6 +671,35 @@ class Z extends HTMLElement {
    const t = this.querySelector("#sidebar-spacer"), e = this.querySelector("#sidebar-toggle-btn"), n = e.querySelector("i"), i = t.classList.contains("w-0");
    console.log("Current state - isCollapsed:", i), console.log("Current classes:", t.className), i ? (t.classList.remove("w-0"), t.classList.add("lg:w-1/4", "xl:w-1/5"), e.className = "w-10 h-10 bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer", n.className = "ri-sidebar-unfold-line text-lg font-bold", e.title = "Inhaltsverzeichnis ausblenden", console.log("Expanding sidebar")) : (t.classList.remove("lg:w-1/4", "xl:w-1/5"), t.classList.add("w-0"), e.className = "w-10 h-10 bg-orange-100 hover:bg-orange-200 text-orange-700 border border-orange-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer", n.className = "ri-sidebar-fold-line text-lg font-bold", e.title = "Inhaltsverzeichnis einblenden", console.log("Collapsing sidebar")), console.log("New classes:", t.className);
  }
+  // Extract issue context from document title, URL, or page container
+  getIssueContext(t) {
+    const e = window.location.pathname, n = e.includes("/beitrag/");
+    if (n) {
+      const s = document.querySelector(`[data-page-container="${t}"]`);
+      if (s) {
+        const c = s.querySelector(".page-indicator");
+        if (c) {
+          const g = c.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
+          if (g)
+            return `${g[1]} Nr. ${g[2]}`;
+        }
+      }
+      const l = document.title.match(/(\d{4}).*Nr\.\s*(\d+)/);
+      if (l)
+        return `${l[1]} Nr. ${l[2]}`;
+    } else
+      return "";
+    const i = e.match(/\/(\d{4})\/(\d+)/);
+    if (i)
+      return n ? `${i[1]} Nr. ${i[2]}` : "";
+    const r = document.querySelector(".page-indicator");
+    if (r) {
+      const a = r.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
+      if (a)
+        return `${a[1]} Nr. ${a[2]}`;
+    }
+    return "KGPZ";
+  }
 }
 customElements.define("single-page-viewer", Z);
 document.body.addEventListener("htmx:beforeRequest", function(o) {
--- a/views/assets/style.css
+++ b/views/assets/style.css
--- a/views/routes/ausgabe/components/_inhaltsverzeichnis.gohtml
+++ b/views/routes/ausgabe/components/_inhaltsverzeichnis.gohtml
@@ -28,10 +28,11 @@
 								{{ end }}</span
 							>
 							<a
-								href="#page-{{ $page }}"
-								class="page-number-inhalts font-bold text-slate-700 bg-slate-100 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-slate-200 no-underline"
+								href="/{{ $model.Year }}/{{ $model.Number.No }}/{{ $page }}"
+								class="page-number-inhalts font-bold text-slate-700 bg-slate-100 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-slate-200 no-underline relative"
 								data-page-number="{{ $page }}">
 								<span class="page-label">{{ $page }}</span>
+								{{ template "_page_link_indicator" (dict "pageNumber" $page "targetPage" $.targetPage) }}
 							</a>
 						</div>
 						<button
@@ -73,21 +74,38 @@
 														{{ end }}">
 														<span class="text-black text-xs font-bold">{{ add $index 1 }}</span>
 														<span class="w-px h-3 bg-slate-300 mx-1"></span>
-														<span class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
-															text-red-700 pointer-events-none
-														{{ end }}"
-														{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
-															$model.Datum.When.Year)
-														-}}
-															aria-current="page"
-														{{ end }}>
+														<span
+															class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
+																text-red-700 pointer-events-none
+															{{ end }}"
+															{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
+																$model.Datum.When.Year)
+															-}}
+																aria-current="page"
+															{{ end }}>
 															{{ template "_citation" $issue }}
 														</span>
 													</div>
 												{{ end }}
+												<!-- Link zum gesamten Beitrag anzeigen -->
+												{{ if and (not $individualPiece.PieceByIssue.IsContinuation) (gt (len $individualPiece.IssueRefs) 1) }}
+													<div
+														class="inline-flex items-center gap-1 px-2 py-1 bg-blue-50
+												hover:bg-blue-100 text-blue-700 hover:text-blue-800 border border-blue-200
+												hover:border-blue-300 rounded text-xs font-medium transition-colors
+												duration-200">
+														<i class="ri-file-copy-2-line text-xs"></i>
+														<a
+															href="{{ GetPieceURL $individualPiece.PieceByIssue.Reference.When.Year $individualPiece.PieceByIssue.Reference.Nr $individualPiece.PieceByIssue.Reference.Von }}"
+															class="">
+															Alle
+														</a>
+													</div>
+												{{ end }}
 											</div>
 										</div>
 									{{ end }}
+
 								</div>
 							{{ end }}
 						{{ else }}
@@ -191,21 +209,38 @@
 														{{ end }}">
 														<span class="text-black text-xs font-bold">{{ add $index 1 }}</span>
 														<span class="w-px h-3 bg-slate-300 mx-1"></span>
-														<span class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
-															text-red-700 pointer-events-none
-														{{ end }}"
-														{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
-															$model.Datum.When.Year)
-														-}}
-															aria-current="page"
-														{{ end }}>
+														<span
+															class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
+																text-red-700 pointer-events-none
+															{{ end }}"
+															{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
+																$model.Datum.When.Year)
+															-}}
+																aria-current="page"
+															{{ end }}>
 															{{ template "_citation" $issue }}
 														</span>
 													</div>
 												{{ end }}
+												<!-- Link zum gesamten Beitrag anzeigen -->
+												{{ if and (not $individualPiece.PieceByIssue.IsContinuation) (gt (len $individualPiece.IssueRefs) 1) }}
+													<div
+														class="inline-flex items-center gap-1 px-2 py-1 bg-blue-50
+												hover:bg-blue-100 text-blue-700 hover:text-blue-800 border border-blue-200
+												hover:border-blue-300 rounded text-xs font-medium transition-colors
+												duration-200">
+														<i class="ri-file-copy-2-line text-xs"></i>
+														<a
+															href="{{ GetPieceURL $individualPiece.PieceByIssue.Reference.When.Year $individualPiece.PieceByIssue.Reference.Nr $individualPiece.PieceByIssue.Reference.Von }}"
+															class="">
+															Alle
+														</a>
+													</div>
+												{{ end }}
 											</div>
 										</div>
 									{{ end }}
+
 								</div>
 							{{ end }}
 						{{ else }}
--- a/views/routes/ausgabe/components/_newspaper_layout.gohtml
+++ b/views/routes/ausgabe/components/_newspaper_layout.gohtml
@@ -9,7 +9,7 @@

 		<!-- Historical printing layout grid -->
 		<div class="grid grid-cols-2 gap-4">
-			{{ template "_historical_layout" (dict "pages" $pages "pageCount" $pageCount "isBeilage" false) }}
+			{{ template "_historical_layout" (dict "pages" $pages "pageCount" $pageCount "isBeilage" false "targetPage" $.targetPage) }}
 		</div>
 	{{ end }}

@@ -27,7 +27,7 @@

 				<!-- Historical printing layout grid for Beilage -->
 				<div class="grid grid-cols-2 gap-4">
-					{{ template "_historical_layout" (dict "pages" $beilagePages "pageCount" $pageCount "isBeilage" true) }}
+					{{ template "_historical_layout" (dict "pages" $beilagePages "pageCount" $pageCount "isBeilage" true "targetPage" $.targetPage) }}
 				</div>
 			</div>
 		{{ end }}
@@ -56,50 +56,51 @@
 	{{ $pages := .pages }}
 	{{ $pageCount := .pageCount }}
 	{{ $isBeilage := .isBeilage }}
+	{{ $targetPage := .targetPage }}

 	{{ if eq $pageCount 2 }}
 		<!-- 2 pages: [1] [2] -->
-		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
-		{{ template "_render_page" (dict "page" (index $pages 1) "position" "right" "isBeilage" $isBeilage) }}
+		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
+		{{ template "_render_page" (dict "page" (index $pages 1) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 	{{ else if eq $pageCount 4 }}
 		<!-- 4 pages: [1] [_] \n [2] [3] \n [_] [4] -->
-		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
+		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 		{{ template "_render_empty" "" }}
-		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage) }}
-		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage) }}
+		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
+		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 		{{ template "_render_empty" "" }}
-		{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage) }}
+		{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 	{{ else if eq $pageCount 6 }}
 		<!-- 6 pages: [1] [_] \n [2] [3] \n [_] [4] \n [5] [6] -->
-		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
+		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 		{{ template "_render_empty" "" }}
-		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage) }}
-		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage) }}
+		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
+		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 		{{ template "_render_empty" "" }}
-		{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage) }}
-		{{ template "_render_page" (dict "page" (index $pages 4) "position" "left" "isBeilage" $isBeilage) }}
-		{{ template "_render_page" (dict "page" (index $pages 5) "position" "right" "isBeilage" $isBeilage) }}
+		{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
+		{{ template "_render_page" (dict "page" (index $pages 4) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
+		{{ template "_render_page" (dict "page" (index $pages 5) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 	{{ else if eq $pageCount 8 }}
 		<!-- 8 pages: [1] [_] \n [2] [3] \n [4] [5] \n [6] [_] \n [_] [7] \n [8] [_] -->
-		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
+		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 		{{ template "_render_empty" "" }}
-		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage) }}
-		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage) }}
-		{{ template "_render_page" (dict "page" (index $pages 3) "position" "left" "isBeilage" $isBeilage) }}
-		{{ template "_render_page" (dict "page" (index $pages 4) "position" "right" "isBeilage" $isBeilage) }}
-		{{ template "_render_page" (dict "page" (index $pages 5) "position" "left" "isBeilage" $isBeilage) }}
+		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
+		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
+		{{ template "_render_page" (dict "page" (index $pages 3) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
+		{{ template "_render_page" (dict "page" (index $pages 4) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
+		{{ template "_render_page" (dict "page" (index $pages 5) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 		{{ template "_render_empty" "" }}
 		{{ template "_render_empty" "" }}
-		{{ template "_render_page" (dict "page" (index $pages 6) "position" "right" "isBeilage" $isBeilage) }}
-		{{ template "_render_page" (dict "page" (index $pages 7) "position" "left" "isBeilage" $isBeilage) }}
+		{{ template "_render_page" (dict "page" (index $pages 6) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
+		{{ template "_render_page" (dict "page" (index $pages 7) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 		{{ template "_render_empty" "" }}
 	{{ else }}
 		<!-- Fallback: side by side layout for other page counts -->
 		{{ range $index, $page := $pages }}
 			{{ if eq (mod $index 2) 0 }}
-				{{ template "_render_page" (dict "page" $page "position" "left" "isBeilage" $isBeilage) }}
+				{{ template "_render_page" (dict "page" $page "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 			{{ else }}
-				{{ template "_render_page" (dict "page" $page "position" "right" "isBeilage" $isBeilage) }}
+				{{ template "_render_page" (dict "page" $page "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
 			{{ end }}
 		{{ end }}
 	{{ end }}
@@ -110,21 +111,18 @@
 	{{ $page := .page }}
 	{{ $position := .position }}
 	{{ $isBeilage := .isBeilage }}
+	{{ $targetPage := .targetPage }}
 	{{ $isLeft := eq $position "left" }}
 	{{ $borderColor := "border-slate-200" }}
 	{{ $hoverColor := "hover:border-slate-300" }}
 	{{ $bgColor := "bg-blue-50" }}
 	{{ $idPrefix := "page" }}
-	{{ $linkPrefix := "" }}

 	{{ if $isBeilage }}
 		{{ $borderColor = "border-amber-200" }}
 		{{ $hoverColor = "hover:border-amber-300" }}
 		{{ $bgColor = "bg-amber-50" }}
 		{{ $idPrefix = "beilage-1-page" }}
-		{{ $linkPrefix = "#beilage-1-page-" }}
-	{{ else }}
-		{{ $linkPrefix = "#page-" }}
 	{{ end }}

 	<div class="newspaper-page-container" id="{{ $idPrefix }}-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}"{{ if $isBeilage }} data-beilage="true"{{ end }}>
@@ -141,15 +139,17 @@
 				<button onclick="enlargePage(document.querySelector('#{{ $idPrefix }}-{{ $page.PageNumber }} .newspaper-page-image'), {{ $page.PageNumber }}, false)" class="w-6 h-6 bg-purple-100 hover:bg-purple-200 text-purple-700 border border-purple-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Seite {{ $page.PageNumber }} vergrößern">
 					<i class="ri-zoom-in-line text-xs"></i>
 				</button>
-				<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
+				<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
 					{{ $page.PageNumber }}
 					<i class="ri-file-text-line {{ if $isBeilage }}text-amber-600{{ else }}text-black{{ end }} text-sm scale-x-[-1]"></i>
+					{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage) }}
 				</span>
 			{{ else }}
 				<!-- Right page: page number then buttons -->
-				<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
+				<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
 					<i class="ri-file-text-line {{ if $isBeilage }}text-amber-600{{ else }}text-black{{ end }} text-sm"></i>
 					{{ $page.PageNumber }}
+					{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage) }}
 				</span>
 				<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this{{ if $isBeilage }}, true{{ end }})" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
 					<i class="ri-share-line text-xs"></i>
--- a/views/routes/ausgabe/head.gohtml
+++ b/views/routes/ausgabe/head.gohtml
@@ -1 +1,32 @@
 <title>KGPZ &ndash; Ausgabe {{ .model.Number.No }}&hairsp;/&hairsp;{{ .model.Year }}</title>
+
+<script>
+// Make template data available to JavaScript
+window.templateData = {
+	targetPage: {{ if .targetPage }}{{ .targetPage }}{{ else }}0{{ end }}
+};
+</script>
+
+{{ if .targetPage }}
+<script>
+// Auto-scroll to target page when page loads
+document.addEventListener('DOMContentLoaded', function() {
+	// Wait for newspaper layout to be initialized
+	setTimeout(function() {
+		const targetPage = {{ .targetPage }};
+		const pageContainer = document.querySelector('[data-page-container="' + targetPage + '"]');
+		if (pageContainer) {
+			pageContainer.scrollIntoView({
+				behavior: 'smooth',
+				block: 'start'
+			});
+
+			// Highlight the page in the Inhaltsverzeichnis
+			if (typeof markCurrentPageInInhaltsverzeichnis === 'function') {
+				markCurrentPageInInhaltsverzeichnis(targetPage);
+			}
+		}
+	}, 500); // Give time for layout initialization
+});
+</script>
+{{ end }}
--- a/views/routes/body.gohtml
+++ b/views/routes/body.gohtml
@@ -14,6 +14,48 @@
 	</div>
 </div>

+<!-- Page Jump Form -->
+<div class="mt-8 w-full">
+	<div class="mx-auto max-w-md bg-slate-50 p-6 rounded-lg border border-slate-200">
+		<h3 class="text-lg font-semibold text-slate-800 mb-4 text-center">Direkt zu Seite springen</h3>
+
+		<form hx-post="/jump" hx-swap="outerHTML" class="space-y-4">
+			<div class="grid grid-cols-2 gap-4">
+				<!-- Year Selection -->
+				<div>
+					<label for="jump-year" class="block text-sm font-medium text-slate-700 mb-1">Jahr</label>
+					<select id="jump-year" name="year" value="{{ $y }}" class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+						{{ range $year := .model.AvailableYears }}
+							<option value="{{ $year }}" {{ if eq $year $y }}selected{{ end }}>{{ $year }}</option>
+						{{ end }}
+					</select>
+					<div id="year-error"></div>
+				</div>
+
+				<!-- Page Input -->
+				<div>
+					<label for="jump-page" class="block text-sm font-medium text-slate-700 mb-1">Seite</label>
+					<input type="number" id="jump-page" name="page" min="1" placeholder="z.B. 42" class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+					<div id="page-error"></div>
+				</div>
+			</div>
+
+			<!-- Submit Button -->
+			<div class="text-center">
+				<button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+					<i class="ri-arrow-right-line mr-2"></i>
+					Zur Seite springen
+				</button>
+			</div>
+		</form>
+
+		<!-- Instructions -->
+		<div class="mt-4 text-sm text-slate-600 text-center">
+			<p>Geben Sie Jahr und Seitenzahl ein, um direkt zur entsprechenden Ausgabe zu springen.</p>
+		</div>
+	</div>
+</div>
+
 <div class="grid grid-cols-11 gap-x-2 gap-y-4 pt-8">
 	{{ range $index, $month := .model.Issues }}

--- a/views/routes/components/_citation.gohtml
+++ b/views/routes/components/_citation.gohtml
@@ -21,7 +21,7 @@
 {{- if $issue.Beilage -}}
 #beilage-{{ $issue.Beilage }}-page-{{ $issue.Von }}
 {{- else -}}
-#page-{{ $issue.Von }}
+/{{ $issue.Von }}
 {{- end -}}
 {{- end -}}"
   class="citation-link text-slate-700 no-underline hover:text-slate-900"
@@ -45,7 +45,28 @@ function updateCitationLinks() {

    citationLinks.forEach(link => {
        const citationUrl = link.getAttribute('data-citation-url');
+        let isCurrentPage = false;
+
+        // Check for exact match
        if (citationUrl === currentPath) {
+            isCurrentPage = true;
+        } else {
+            // Check if current path is an issue with page number that matches this citation
+            const currentPathMatch = currentPath.match(/^\/(\d{4})\/(\d+)(?:\/(\d+))?$/);
+            const citationUrlMatch = citationUrl.match(/^\/(\d{4})\/(\d+)$/);
+
+            if (currentPathMatch && citationUrlMatch) {
+                const [, currentYear, currentIssue, currentPage] = currentPathMatch;
+                const [, citationYear, citationIssue] = citationUrlMatch;
+
+                // If year and issue match, this citation refers to the current issue
+                if (currentYear === citationYear && currentIssue === citationIssue) {
+                    isCurrentPage = true;
+                }
+            }
+        }
+
+        if (isCurrentPage) {
            // Style as current page: red text, no underline, not clickable
            link.classList.remove('text-slate-700', 'hover:text-slate-900');
            link.classList.add('text-red-700', 'pointer-events-none');
--- a/views/routes/ausgabe/components/_inhaltsverzeichnis_eintrag.gohtml
+++ b/views/routes/ausgabe/components/_inhaltsverzeichnis_eintrag.gohtml
--- a/views/routes/components/_page_jump_form_error.gohtml
+++ b/views/routes/components/_page_jump_form_error.gohtml
@@ -0,0 +1,33 @@
+<form hx-post="/jump" hx-swap="outerHTML" class="space-y-4">
+	<div class="grid grid-cols-2 gap-4">
+		<!-- Year Selection -->
+		<div>
+			<label for="jump-year" class="block text-sm font-medium text-slate-700 mb-1">Jahr</label>
+			<select id="jump-year" name="year" class="w-full px-3 py-2 border {{ if .YearError }}border-red-300{{ else }}border-slate-300{{ end }} rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+				{{ range $year := .AvailableYears }}
+					<option value="{{ $year }}" {{ if eq $year $.CurrentYear }}selected{{ end }}>{{ $year }}</option>
+				{{ end }}
+			</select>
+			{{ if .YearError }}
+				<div class="text-red-600 text-sm mt-1">{{ .YearError }}</div>
+			{{ end }}
+		</div>
+
+		<!-- Page Input -->
+		<div>
+			<label for="jump-page" class="block text-sm font-medium text-slate-700 mb-1">Seite</label>
+			<input type="number" id="jump-page" name="page" min="1" placeholder="z.B. 42" value="{{ .PageValue }}" class="w-full px-3 py-2 border {{ if .PageError }}border-red-300{{ else }}border-slate-300{{ end }} rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+			{{ if .PageError }}
+				<div class="text-red-600 text-sm mt-1">{{ .PageError }}</div>
+			{{ end }}
+		</div>
+	</div>
+
+	<!-- Submit Button -->
+	<div class="text-center">
+		<button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+			<i class="ri-arrow-right-line mr-2"></i>
+			Zur Seite springen
+		</button>
+	</div>
+</form>
--- a/views/routes/components/_page_link_indicator.gohtml
+++ b/views/routes/components/_page_link_indicator.gohtml
@@ -0,0 +1,17 @@
+{{- /*
+    Red dot indicator for directly linked pages
+    Usage: {{ template "_page_link_indicator" (dict "pageNumber" $page "targetPage" $targetPage) }}
+
+    Parameters:
+    - pageNumber (int): The page number being displayed
+    - targetPage (int): The target page from URL (0 if none)
+
+    Shows a red dot with tooltip when pageNumber matches targetPage
+*/ -}}
+
+{{ $pageNumber := .pageNumber }}
+{{ $targetPage := .targetPage }}
+
+{{ if and $targetPage (eq $pageNumber $targetPage) }}
+<span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10" title="verlinkte Seite"></span>
+{{ end }}
--- a/views/routes/piece/body.gohtml
+++ b/views/routes/piece/body.gohtml
@@ -0,0 +1,31 @@
+{{ $model := .model }}
+
+{{ if $model.Images.HasImages }}
+	<!-- Container with proper padding -->
+	<div class="">
+		<!-- Two-column layout for piece view -->
+		<div class="flex flex-col lg:flex-row gap-6 w-full min-h-screen">
+			<!-- Column 1: Table of Contents ONLY -->
+			<div class="lg:w-1/3 xl:w-1/4 flex-shrink-0 bg-slate-50 px-8 py-4">
+				<div class="lg:sticky lg:top-8 lg:overflow-y-auto">
+					{{ template "_piece_inhaltsverzeichnis" . }}
+				</div>
+			</div>
+
+			<!-- Column 2: Sequential Page Layout -->
+			<div class="lg:w-2/3 xl:w-3/4 flex-1 py-4">
+				{{ template "_piece_sequential_layout" . }}
+			</div>
+		</div>
+	</div>
+{{ else }}
+	<!-- No images fallback -->
+	<div class="container mx-auto px-4 py-8">
+		<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
+			<h2 class="text-xl font-semibold text-yellow-800 mb-2">Keine Bilder verfügbar</h2>
+			<p class="text-yellow-700">
+				Für diesen Beitrag sind derzeit keine Seitenbilder verfügbar.
+			</p>
+		</div>
+	</div>
+{{ end }}
--- a/views/routes/piece/components/_piece_inhaltsverzeichnis.gohtml
+++ b/views/routes/piece/components/_piece_inhaltsverzeichnis.gohtml
@@ -0,0 +1,61 @@
+{{ $model := .model }}
+
+<div class="w-full hyphens-auto">
+	<div class="space-y-4">
+		<!-- Header with icon and type (small) -->
+		<div class="flex items-center gap-2 mb-2">
+			<i class="ri-file-text-line text-slate-600"></i>
+			<h3 class="text-sm font-medium text-slate-600">Einzelbeitrag</h3>
+		</div>
+
+		<!-- Main piece entry -->
+		<div class="mb-6">
+			<!-- Get the first page to generate the actual content description -->
+			{{ if $model.ContinuousPages.Pages }}
+				{{ $firstPageNum := index $model.ContinuousPages.Pages 0 }}
+				{{ $firstPageEntries := index $model.ContinuousPages.Items $firstPageNum }}
+				{{ if $firstPageEntries }}
+					{{ $firstPiece := index $firstPageEntries 0 }}
+					<!-- Actual piece content description (larger) -->
+					<div class="mb-3">
+						<div class="text-base font-semibold text-slate-800 leading-snug">
+							{{ template "_inhaltsverzeichnis_eintrag" $firstPiece.PieceByIssue }}
+						</div>
+					</div>
+				{{ end }}
+			{{ end }}
+
+			<!-- Summary with boxed numbers -->
+			<div class="mb-4">
+				<p class="text-sm text-slate-600">
+					<span class="inline-flex items-center gap-1">
+						<span class="bg-slate-800 text-white px-1.5 py-0.5 rounded text-xs font-bold">{{ $model.TotalPageCount }}</span>
+						Seiten in
+						<span class="bg-slate-800 text-white px-1.5 py-0.5 rounded text-xs font-bold">{{ len $model.IssueContexts }}</span>
+						Ausgaben gefunden:
+					</span>
+				</p>
+			</div>
+
+			<!-- Issue and page links with highlighting data attributes -->
+			<div class="space-y-1">
+				{{ range $pageEntry := $model.AllPages }}
+					<!-- Find the issue ref for this page to get date -->
+					{{ range $issueRef := $model.AllIssueRefs }}
+						{{ if and (eq $issueRef.When.Year $pageEntry.IssueYear) (eq $issueRef.Nr $pageEntry.IssueNumber) (le $issueRef.Von $pageEntry.PageNumber) (ge $issueRef.Bis $pageEntry.PageNumber) }}
+							<div class="inhalts-entry issue-link-entry pl-4 border-l-4 border-slate-300 hover:bg-slate-100">
+								<a href="/{{ $pageEntry.IssueYear }}/{{ $pageEntry.IssueNumber }}/{{ $pageEntry.PageNumber }}"
+								   class="page-number-inhalts text-slate-700 hover:text-red-700 text-sm hover:underline transition-colors duration-200 bg-blue-50 hover:bg-blue-100 relative"
+								   data-page-number="{{ $pageEntry.PageNumber }}">
+									{{ if $issueRef.When.Day }}{{ $issueRef.When.Day }}.{{ end }}{{ if $issueRef.When.Month }}{{ $issueRef.When.Month }}.{{ end }}{{ $issueRef.When.Year }} [Nr. {{ $pageEntry.IssueNumber }}], {{ $pageEntry.PageNumber }}
+									{{ template "_page_link_indicator" (dict "pageNumber" $pageEntry.PageNumber "targetPage" $.targetPage) }}
+								</a>
+							</div>
+							{{ break }}
+						{{ end }}
+					{{ end }}
+				{{ end }}
+			</div>
+		</div>
+	</div>
+</div>
--- a/views/routes/piece/components/_piece_sequential_layout.gohtml
+++ b/views/routes/piece/components/_piece_sequential_layout.gohtml
@@ -0,0 +1,85 @@
+{{ $model := .model }}
+
+<!-- Sequential page layout for piece view -->
+
+	<div class="space-y-8 h-full relative" id="piece-content">
+		{{ if $model.Images.AllPages }}
+			<!-- Two-column newspaper layout -->
+			<div class="grid grid-cols-2 gap-4">
+				{{ range $pageIndex, $page := $model.Images.AllPages }}
+					{{ $pageEntry := index $model.AllPages $pageIndex }}
+					{{ $issueContext := printf "%d Nr. %d" $pageEntry.IssueYear $pageEntry.IssueNumber }}
+
+					<!-- Page container -->
+					<div class="piece-page-container newspaper-page-container" id="piece-page-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}">
+						<!-- Page indicator row -->
+						<div class="flex justify-start items-center gap-2 mb-3">
+							<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300 flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
+								{{ PageIcon "single" }}
+								{{ $issueContext }}, {{ $page.PageNumber }}
+								{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $.targetPage) }}
+							</span>
+
+							<!-- Action buttons -->
+							<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this)"
+									class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
+									title="Link zu Seite {{ $page.PageNumber }} kopieren">
+								<i class="ri-share-line text-xs"></i>
+							</button>
+
+							<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)"
+									class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
+									title="Zitation für Seite {{ $page.PageNumber }} generieren">
+								<i class="ri-file-text-line text-xs"></i>
+							</button>
+
+							<button onclick="enlargePage(document.querySelector('#piece-page-{{ $page.PageNumber }} .piece-page-image'), {{ $page.PageNumber }}, false)"
+									class="w-6 h-6 bg-purple-100 hover:bg-purple-200 text-purple-700 border border-purple-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
+									title="Seite {{ $page.PageNumber }} vergrößern">
+								<i class="ri-zoom-in-line text-xs"></i>
+							</button>
+						</div>
+
+						<!-- Page image -->
+						<div class="single-page bg-white p-4 rounded border border-slate-200 hover:border-slate-300 transition-colors duration-200">
+							{{ if $page.Available }}
+								<img src="{{ $page.ImagePath }}"
+									 alt="Seite {{ $page.PageNumber }} ({{ $issueContext }})"
+									 class="piece-page-image newspaper-page-image cursor-zoom-in rounded-sm hover:scale-[1.02] transition-transform duration-200 w-full"
+									 onclick="enlargePage(this, {{ $page.PageNumber }}, false)"
+									 data-page="{{ $page.PageNumber }}"
+									 loading="lazy" />
+							{{ else }}
+								<div class="bg-slate-100 border border-slate-200 rounded p-8 text-center">
+									<i class="ri-image-line text-4xl text-slate-400 mb-2 block"></i>
+									<p class="text-slate-500">Bild nicht verfügbar</p>
+								</div>
+							{{ end }}
+						</div>
+					</div>
+				{{ end }}
+			</div>
+		{{ else }}
+			<!-- No pages available -->
+			<div class="text-center text-slate-500 py-16">
+				<i class="ri-file-list-line text-6xl mb-4 block"></i>
+				<h3 class="text-xl font-semibold mb-2">Keine Seiten verfügbar</h3>
+				<p>Für diesen Beitrag sind derzeit keine Seitenbilder verfügbar.</p>
+			</div>
+		{{ end }}
+	</div>
+
+	<!-- Modal for enlarged view - reuse existing modal -->
+	<div
+		id="pageModal"
+		class="absolute inset-0 bg-black bg-opacity-75 hidden z-50 flex items-center justify-center backdrop-blur-sm"
+		onclick="closeModal()">
+		<div class="relative max-w-full max-h-full p-4">
+			<img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain rounded-lg" />
+			<button
+				onclick="closeModal()"
+				class="absolute top-2 right-2 text-white bg-slate-800 bg-opacity-80 rounded-full w-10 h-10 flex items-center justify-center hover:bg-opacity-100 transition-all duration-200">
+				<i class="ri-close-line text-xl"></i>
+			</button>
+		</div>
+	</div>
--- a/views/routes/piece/head.gohtml
+++ b/views/routes/piece/head.gohtml
@@ -0,0 +1,32 @@
+<title>KGPZ &ndash; {{ if .model.Title }}{{ .model.Title }}{{ else }}Beitrag{{ end }} ({{ len .model.IssueContexts }} Teil{{ if gt (len .model.IssueContexts) 1 }}e{{ end }})</title>
+
+<script>
+// Make template data available to JavaScript
+window.templateData = {
+	targetPage: {{ if .targetPage }}{{ .targetPage }}{{ else }}0{{ end }}
+};
+</script>
+
+{{ if .targetPage }}
+<script>
+// Auto-scroll to target page when page loads
+document.addEventListener('DOMContentLoaded', function() {
+	// Wait for newspaper layout to be initialized
+	setTimeout(function() {
+		const targetPage = {{ .targetPage }};
+		const pageContainer = document.querySelector('[data-page-container="' + targetPage + '"]');
+		if (pageContainer) {
+			pageContainer.scrollIntoView({
+				behavior: 'smooth',
+				block: 'start'
+			});
+
+			// Highlight the page in the Inhaltsverzeichnis if function exists
+			if (typeof markCurrentPageInInhaltsverzeichnis === 'function') {
+				markCurrentPageInInhaltsverzeichnis(targetPage);
+			}
+		}
+	}, 500); // Give time for layout initialization
+});
+</script>
+{{ end }}
--- a/views/transform/main.js
+++ b/views/transform/main.js
@@ -379,8 +379,11 @@ function enlargePage(imgElement, pageNumber, isFromSpread) {
 	// Determine if this is a beilage page
 	const isBeilage = imgElement.closest('[data-beilage="true"]') !== null;

+	// Get target page from template data if available
+	const targetPage = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
+
 	// Show the page in the viewer
-	viewer.show(imgElement.src, imgElement.alt, pageNumber, isBeilage);
+	viewer.show(imgElement.src, imgElement.alt, pageNumber, isBeilage, targetPage);
 }

 function closeModal() {
@@ -659,7 +662,7 @@ function shareCurrentPage() {
 		const pageElement = activeContainer.querySelector("[data-page]");
 		if (pageElement) {
 			const pageNumber = pageElement.getAttribute("data-page");
-			pageInfo = `#page-${pageNumber}`;
+			pageInfo = `/${pageNumber}`;
 		}
 	}

@@ -715,11 +718,18 @@ function generateCitation() {

 	// Get current page and issue information
 	const issueInfo = document.title || "KGPZ";
-	const currentUrl = window.location.href;
+
+	// Use clean URL without hash fragments
+	let cleanUrl = window.location.origin + window.location.pathname;
+
+	// Remove any hash fragments that might still exist
+	if (cleanUrl.includes('#')) {
+		cleanUrl = cleanUrl.split('#')[0];
+	}

 	// Basic citation format (can be expanded later)
 	const currentDate = new Date().toLocaleDateString("de-DE");
-	const citation = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${issueInfo}. Digital verfügbar unter: ${currentUrl} (Zugriff: ${currentDate}).`;
+	const citation = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${issueInfo}. Digital verfügbar unter: ${cleanUrl} (Zugriff: ${currentDate}).`;

 	// Copy to clipboard
 	if (navigator.clipboard) {
@@ -821,14 +831,15 @@ function showSimplePopup(button, message) {
 	}, 2000);
 }

-// Hash navigation functions
-function scrollToPageFromHash() {
-	const hash = window.location.hash;
+// URL navigation functions
+function scrollToPageFromURL() {
 	let pageNumber = "";
 	let targetContainer = null;

-	if (hash.startsWith("#page-")) {
-		pageNumber = hash.replace("#page-", "");
+	// Check if URL ends with a page number (e.g., /1768/42/166)
+	const pathParts = window.location.pathname.split('/');
+	if (pathParts.length >= 4 && !isNaN(pathParts[pathParts.length - 1])) {
+		pageNumber = pathParts[pathParts.length - 1];

 		// Try to find exact page container first
 		targetContainer = document.getElementById(`page-${pageNumber}`);
@@ -853,14 +864,6 @@ function scrollToPageFromHash() {
 				document.getElementById(`beilage-2-page-${pageNumber}`) ||
 				document.querySelector(`[id*="beilage"][id*="page-${pageNumber}"]`);
 		}
-	} else if (hash.startsWith("#beilage-")) {
-		// Handle beilage-specific hashes like #beilage-1-page-101
-		const match = hash.match(/#beilage-(\d+)-page-(\d+)/);
-		if (match) {
-			const beilageNum = match[1];
-			pageNumber = match[2];
-			targetContainer = document.getElementById(`beilage-${beilageNum}-page-${pageNumber}`);
-		}
 	}

 	if (targetContainer && pageNumber) {
@@ -878,14 +881,26 @@ function scrollToPageFromHash() {

 // Page-specific utilities
 function copyPagePermalink(pageNumber, button, isBeilage = false) {
-	let pageFragment = "";
+	let pageUrl = "";
 	if (isBeilage) {
-		pageFragment = `#beilage-1-page-${pageNumber}`;
+		// For beilage pages, still use hash for now until beilage URLs are updated
+		pageUrl = window.location.origin + window.location.pathname + `#beilage-1-page-${pageNumber}`;
 	} else {
-		pageFragment = `#page-${pageNumber}`;
+		// For regular pages, use the new URL format
+		const pathParts = window.location.pathname.split('/');
+		if (pathParts.length >= 3) {
+			// Current URL format: /year/issue or /year/issue/page
+			// New format: /year/issue/page
+			const year = pathParts[1];
+			const issue = pathParts[2];
+			pageUrl = `${window.location.origin}/${year}/${issue}/${pageNumber}`;
+		} else {
+			// Fallback to current URL with page appended
+			pageUrl = window.location.origin + window.location.pathname + `/${pageNumber}`;
+		}
 	}

-	const currentUrl = window.location.origin + window.location.pathname + pageFragment;
+	const currentUrl = pageUrl;

 	// Copy to clipboard
 	if (navigator.clipboard) {
@@ -917,7 +932,19 @@ function copyPagePermalink(pageNumber, button, isBeilage = false) {
 function generatePageCitation(pageNumber, button) {
 	// Get current issue information
 	const issueInfo = document.title || "KGPZ";
-	const currentUrl = `${window.location.origin}${window.location.pathname}#page-${pageNumber}`;
+
+	// Generate page URL in new format
+	const pathParts = window.location.pathname.split('/');
+	let pageUrl;
+	if (pathParts.length >= 3) {
+		const year = pathParts[1];
+		const issue = pathParts[2];
+		pageUrl = `${window.location.origin}/${year}/${issue}/${pageNumber}`;
+	} else {
+		pageUrl = `${window.location.origin}${window.location.pathname}/${pageNumber}`;
+	}
+
+	const currentUrl = pageUrl;

 	// Basic citation format for specific page
 	const currentDate = new Date().toLocaleDateString("de-DE");
@@ -967,9 +994,8 @@ function initializeNewspaperLayout() {
 		}, 50);
 	});

-	// Initialize hash handling
-	scrollToPageFromHash();
-	window.addEventListener("hashchange", scrollToPageFromHash);
+	// Initialize URL-based page navigation
+	scrollToPageFromURL();

 	// Set up keyboard shortcuts
 	document.addEventListener("keydown", function (e) {
@@ -1065,7 +1091,7 @@ class SinglePageViewer extends HTMLElement {
 								<!-- Page indicator with icon -->
 								<div id="page-indicator" class="text-slate-800 flex items-center gap-3">
 									<span id="page-icon" class="text-lg"></span>
-									<span id="page-number" class="text-2xl font-serif font-bold"></span>
+									<span id="page-number" class="text-lg font-bold bg-blue-50 px-2 py-1 rounded flex items-center gap-1"></span>
 								</div>
 							</div>

@@ -1137,7 +1163,7 @@ class SinglePageViewer extends HTMLElement {
 		`;
 	}

-	show(imgSrc, imgAlt, pageNumber, isBeilage = false) {
+	show(imgSrc, imgAlt, pageNumber, isBeilage = false, targetPage = 0) {
 		const img = this.querySelector('#single-page-image');
 		const pageNumberSpan = this.querySelector('#page-number');
 		const pageIconSpan = this.querySelector('#page-icon');
@@ -1150,8 +1176,26 @@ class SinglePageViewer extends HTMLElement {
 		this.currentPageNumber = pageNumber;
 		this.currentIsBeilage = isBeilage;

-		// Set page number
-		pageNumberSpan.textContent = pageNumber;
+		// Get issue context from document title or URL
+		const issueContext = this.getIssueContext(pageNumber);
+
+		// Set page number with issue context in the box
+		pageNumberSpan.innerHTML = issueContext ? `${issueContext}, ${pageNumber}` : `${pageNumber}`;
+
+		// Add red dot if this is the target page
+		if (targetPage && pageNumber === targetPage) {
+			pageNumberSpan.style.position = 'relative';
+			// Remove any existing red dot
+			const existingDot = pageNumberSpan.querySelector('.target-page-dot');
+			if (existingDot) {
+				existingDot.remove();
+			}
+			// Add new red dot
+			const redDot = document.createElement('span');
+			redDot.className = 'target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10';
+			redDot.title = 'verlinkte Seite';
+			pageNumberSpan.appendChild(redDot);
+		}

 		// Set page icon based on position and type
 		const iconType = this.determinePageIconType(pageNumber, isBeilage);
@@ -1415,6 +1459,60 @@ class SinglePageViewer extends HTMLElement {

 		console.log('New classes:', sidebarSpacer.className);
 	}
+
+	// Extract issue context from document title, URL, or page container
+	getIssueContext(pageNumber) {
+		// Determine if we're in a piece view (beitrag) or issue view (ausgabe)
+		const path = window.location.pathname;
+		const isPieceView = path.includes('/beitrag/');
+
+		if (isPieceView) {
+			// For piece view: Return full format "1765 Nr. 2"
+			// Try to get context from page container first (for piece view)
+			const pageContainer = document.querySelector(`[data-page-container="${pageNumber}"]`);
+			if (pageContainer) {
+				// Look for existing page indicator with context
+				const pageIndicator = pageContainer.querySelector('.page-indicator');
+				if (pageIndicator) {
+					const text = pageIndicator.textContent.trim();
+					// Extract year and issue from text like "1768 Nr. 20, 79"
+					const match = text.match(/(\d{4})\s+Nr\.\s+(\d+)/);
+					if (match) {
+						return `${match[1]} Nr. ${match[2]}`;
+					}
+				}
+			}
+
+			// Fallback: Try to extract from document title
+			const title = document.title;
+			const titleMatch = title.match(/(\d{4}).*Nr\.\s*(\d+)/);
+			if (titleMatch) {
+				return `${titleMatch[1]} Nr. ${titleMatch[2]}`;
+			}
+		} else {
+			// For issue view: Return just empty string (page number only)
+			return '';
+		}
+
+		// Final fallback: Try to extract from URL path
+		const urlMatch = path.match(/\/(\d{4})\/(\d+)/);
+		if (urlMatch) {
+			return isPieceView ? `${urlMatch[1]} Nr. ${urlMatch[2]}` : '';
+		}
+
+		// Fallback - try to get from any visible page context
+		const anyPageIndicator = document.querySelector('.page-indicator');
+		if (anyPageIndicator) {
+			const text = anyPageIndicator.textContent.trim();
+			const match = text.match(/(\d{4})\s+Nr\.\s+(\d+)/);
+			if (match) {
+				return `${match[1]} Nr. ${match[2]}`;
+			}
+		}
+
+		// Ultimate fallback
+		return "KGPZ";
+	}
 }

 // Register the web component