better piece eq

viewmodels/piece_view.go

@@ -255,6 +255,12 @@ func (pvm *PieceVM) populateOtherPieces(lib *xmlmodels.Library) error {
 			otherPieces := []IndividualPieceByIssue{}
 
 			for _, individualPiece := range individualPiecesOnPage {
+				// Skip the current piece itself using comprehensive comparison
+				if IsSamePiece(individualPiece.PieceByIssue.Piece, pvm.Piece) {
+					fmt.Printf("DEBUG: Skipping current piece (comprehensive field match)\n")
+					continue
+				}
+
 				// Debug piece information
 				pieceTitle := "no title"
 				if len(individualPiece.PieceByIssue.Piece.Title) > 0 {
@@ -263,38 +269,6 @@ func (pvm *PieceVM) populateOtherPieces(lib *xmlmodels.Library) error {
 					pieceTitle = individualPiece.PieceByIssue.Piece.Incipit[0]
 				}
 
-				currentTitle := "no title"
-				if len(pvm.Piece.Title) > 0 {
-					currentTitle = pvm.Piece.Title[0]
-				} else if len(pvm.Piece.Incipit) > 0 {
-					currentTitle = pvm.Piece.Incipit[0]
-				}
-
-				fmt.Printf("DEBUG: Checking piece title='%s' (current title='%s')\n", pieceTitle, currentTitle)
-
-				// Skip the current piece itself - use content-based comparison
-				// Compare by title/incipit and issue references
-				if pieceTitle == currentTitle && pieceTitle != "no title" {
-					// Same title, now check if they have the same issue references
-					foundPieceRef := individualPiece.PieceByIssue.Reference
-					isSamePiece := false
-
-					for _, currentRef := range pvm.Piece.IssueRefs {
-						if currentRef.When.Year == foundPieceRef.When.Year &&
-							currentRef.Nr == foundPieceRef.Nr &&
-							currentRef.Von == foundPieceRef.Von &&
-							currentRef.Bis == foundPieceRef.Bis {
-							isSamePiece = true
-							break
-						}
-					}
-
-					if isSamePiece {
-						fmt.Printf("DEBUG: Skipping current piece (title and issue reference match)\n")
-						continue
-					}
-				}
-
 				fmt.Printf("DEBUG: Adding other piece title='%s'\n", pieceTitle)
 				otherPieces = append(otherPieces, individualPiece)
 			}
@@ -309,3 +283,121 @@ func (pvm *PieceVM) populateOtherPieces(lib *xmlmodels.Library) error {
 	return nil
 }
 
+// IsSamePiece compares two pieces using comprehensive field-by-field heuristics
+// This is a universal method that can be used anywhere in the codebase
+func IsSamePiece(piece1, piece2 xmlmodels.Piece) bool {
+	// 1. Compare titles (all variants)
+	if !equalStringSlices(piece1.Title, piece2.Title) {
+		return false
+	}
+
+	// 2. Compare incipits (all variants)
+	if !equalStringSlices(piece1.Incipit, piece2.Incipit) {
+		return false
+	}
+
+	// 3. Compare issue references (must have identical coverage)
+	if !equalIssueRefs(piece1.IssueRefs, piece2.IssueRefs) {
+		return false
+	}
+
+	// 4. Compare category references
+	if !equalCategoryRefs(piece1.CategoryRefs, piece2.CategoryRefs) {
+		return false
+	}
+
+	// 5. Compare agent references (authors, etc.)
+	if !equalAgentRefs(piece1.AgentRefs, piece2.AgentRefs) {
+		return false
+	}
+
+	// 6. Compare work references
+	if !equalWorkRefs(piece1.WorkRefs, piece2.WorkRefs) {
+		return false
+	}
+
+	// 7. Compare place references
+	if !equalPlaceRefs(piece1.PlaceRefs, piece2.PlaceRefs) {
+		return false
+	}
+
+	return true
+}
+
+// Helper functions for comparing slices and references
+
+func equalStringSlices(a, b []string) bool {
+	if len(a) != len(b) {
+		return false
+	}
+	for i := range a {
+		if a[i] != b[i] {
+			return false
+		}
+	}
+	return true
+}
+
+func equalIssueRefs(a, b []xmlmodels.IssueRef) bool {
+	if len(a) != len(b) {
+		return false
+	}
+	for i := range a {
+		if a[i].When.Year != b[i].When.Year ||
+			a[i].Nr != b[i].Nr ||
+			a[i].Von != b[i].Von ||
+			a[i].Bis != b[i].Bis {
+			return false
+		}
+	}
+	return true
+}
+
+func equalCategoryRefs(a, b []xmlmodels.CategoryRef) bool {
+	if len(a) != len(b) {
+		return false
+	}
+	for i := range a {
+		if a[i].Ref != b[i].Ref {
+			return false
+		}
+	}
+	return true
+}
+
+func equalAgentRefs(a, b []xmlmodels.AgentRef) bool {
+	if len(a) != len(b) {
+		return false
+	}
+	for i := range a {
+		if a[i].Ref != b[i].Ref || a[i].Category != b[i].Category {
+			return false
+		}
+	}
+	return true
+}
+
+func equalWorkRefs(a, b []xmlmodels.WorkRef) bool {
+	if len(a) != len(b) {
+		return false
+	}
+	for i := range a {
+		if a[i].Ref != b[i].Ref {
+			return false
+		}
+	}
+	return true
+}
+
+func equalPlaceRefs(a, b []xmlmodels.PlaceRef) bool {
+	if len(a) != len(b) {
+		return false
+	}
+	for i := range a {
+		if a[i].Ref != b[i].Ref {
+			return false
+		}
+	}
+	return true
+}
+

views/assets/scripts.js

@@ -1,23 +1,23 @@
-const A = "script[xslt-onload]", w = "xslt-template", L = "xslt-transformed", y = /* @__PURE__ */ new Map();
+const A = "script[xslt-onload]", m = "xslt-template", E = "xslt-transformed", y = /* @__PURE__ */ new Map();
 function v() {
-  let o = htmx.findAll(A);
-  for (let t of o)
-    E(t);
+  let i = htmx.findAll(A);
+  for (let t of i)
+    L(t);
 }
-function E(o) {
-  if (o.getAttribute(L) === "true" || !o.hasAttribute(w))
+function L(i) {
+  if (i.getAttribute(E) === "true" || !i.hasAttribute(m))
     return;
-  let t = "#" + o.getAttribute(w), e = y.get(t);
+  let t = "#" + i.getAttribute(m), e = y.get(t);
   if (!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);
+    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);
     } 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;
+  let n = new DOMParser().parseFromString(i.innerHTML, "application/xml"), o = e.transformToFragment(n, document), r = new XMLSerializer().serializeToString(o);
+  i.outerHTML = r;
 }
 function q() {
   document.querySelectorAll("template[simple]").forEach((t) => {
@@ -29,11 +29,11 @@ function q() {
           super(), this.appendChild(n.cloneNode(!0)), this.slots = this.querySelectorAll("slot");
         }
         connectedCallback() {
-          let i = [];
+          let o = [];
           this.slots.forEach((r) => {
-            let s = r.getAttribute("name"), a = this.querySelector(`[slot="${s}"]`);
-            a && (r.replaceWith(a.cloneNode(!0)), i.push(a));
-          }), i.forEach((r) => {
+            let a = r.getAttribute("name"), s = this.querySelector(`[slot="${a}"]`);
+            s && (r.replaceWith(s.cloneNode(!0)), o.push(s));
+          }), o.forEach((r) => {
             r.remove();
           });
         }
@@ -48,61 +48,61 @@ window.pageObserver = window.pageObserver || null;
 window.scrollTimeout = window.scrollTimeout || null;
 function k() {
   window.highlightObserver && (window.highlightObserver.disconnect(), window.highlightObserver = null);
-  const o = document.querySelectorAll(".newspaper-page-container");
+  const i = document.querySelectorAll(".newspaper-page-container");
   window.highlightObserver = new IntersectionObserver(
     (t) => {
-      P();
+      S();
     },
     {
       rootMargin: "-20% 0px -70% 0px"
     }
-  ), o.forEach((t) => {
+  ), i.forEach((t) => {
     window.highlightObserver.observe(t);
   });
 }
-function P() {
-  const o = [];
+function S() {
+  const i = [];
   document.querySelectorAll(".newspaper-page-container").forEach((e) => {
-    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);
+    const n = e.getBoundingClientRect(), o = window.innerHeight, r = Math.max(n.top, 0), a = Math.min(n.bottom, o), s = Math.max(0, a - r), l = n.height, u = s / l >= 0.5, g = e.querySelector("img[data-page]"), p = g ? g.getAttribute("data-page") : "unknown";
+    u && g && p && !i.includes(p) && i.push(p);
+  }), $(i), i.length > 0 && C(i);
 }
-function $(o) {
+function $(i) {
   document.querySelectorAll(".continuation-entry").forEach((t) => {
     t.style.display = "none";
-  }), o.forEach((t) => {
+  }), i.forEach((t) => {
     const e = document.querySelector(`[data-page-container="${t}"]`);
-    e && e.querySelectorAll(".continuation-entry").forEach((i) => {
-      i.style.display = "";
+    e && e.querySelectorAll(".continuation-entry").forEach((o) => {
+      o.style.display = "";
     });
-  }), B(o), M();
+  }), B(i), M();
 }
-function B(o) {
+function B(i) {
   document.querySelectorAll(".work-title").forEach((t) => {
     const e = t.getAttribute("data-short-title");
     e && (t.textContent = e);
-  }), o.forEach((t) => {
+  }), i.forEach((t) => {
     const e = document.querySelector(`[data-page-container="${t}"]`);
-    e && e.querySelectorAll(".work-title").forEach((i) => {
-      const r = i.getAttribute("data-full-title");
-      r && r !== i.getAttribute("data-short-title") && (i.textContent = r);
+    e && e.querySelectorAll(".work-title").forEach((o) => {
+      const r = o.getAttribute("data-full-title");
+      r && r !== o.getAttribute("data-short-title") && (o.textContent = r);
     });
   });
 }
 function M() {
-  document.querySelectorAll(".page-entry").forEach((o) => {
-    const t = o.querySelectorAll(".inhalts-entry");
+  document.querySelectorAll(".page-entry").forEach((i) => {
+    const t = i.querySelectorAll(".inhalts-entry");
     let e = !1;
     t.forEach((n) => {
       window.getComputedStyle(n).display !== "none" && (e = !0);
-    }), e ? o.style.display = "" : o.style.display = "none";
+    }), e ? i.style.display = "" : i.style.display = "none";
   });
 }
-function C(o) {
-  S([o]);
+function P(i) {
+  C([i]);
 }
-function S(o) {
-  console.log("markCurrentPagesInInhaltsverzeichnis called with:", o), document.querySelectorAll("[data-page-container]").forEach((e) => {
+function C(i) {
+  console.log("markCurrentPagesInInhaltsverzeichnis called with:", i), 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) => {
     e.classList.remove("text-red-600", "font-bold"), e.classList.add("text-slate-700", "font-semibold"), e.style.textDecoration = "", e.style.pointerEvents = "", e.classList.contains("bg-blue-50") ? e.classList.add("hover:bg-blue-100") : e.classList.contains("bg-amber-50") && e.classList.add("hover:bg-amber-100"), !e.classList.contains("bg-amber-50") && !e.classList.contains("bg-blue-50") && e.classList.add("bg-blue-50");
@@ -112,7 +112,7 @@ function S(o) {
     e.classList.remove("no-underline"), e.classList.contains("bg-blue-50") && e.classList.add("hover:bg-blue-100");
   });
   const t = [];
-  o.forEach((e) => {
+  i.forEach((e) => {
     const n = document.querySelector(
       `.page-number-inhalts[data-page-number="${e}"]`
     );
@@ -122,42 +122,42 @@ function S(o) {
         "hover:bg-blue-100",
         "hover:bg-amber-100"
       ), n.classList.add("text-red-600", "font-bold"), n.style.textDecoration = "none", n.style.pointerEvents = "none", t.push(n);
-      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 o = document.querySelector(`[data-page-container="${e}"]`);
+      o && (o.classList.remove("border-slate-300", "border-amber-400"), o.classList.add("border-red-500"));
       const r = n.closest(".page-entry");
-      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"));
+      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"));
       }));
     }
-  }), t.length > 0 && N(t[0]), document.querySelectorAll(".page-indicator").forEach((e) => {
+  }), t.length > 0 && H(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) => {
+  }), i.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 N(o) {
-  const t = o.closest(".lg\\:overflow-y-auto");
+function H(i) {
+  const t = i.closest(".lg\\:overflow-y-auto");
   if (t) {
-    const e = t.getBoundingClientRect(), n = o.getBoundingClientRect(), i = n.top < e.top, r = n.bottom > e.bottom;
-    (i || r) && o.scrollIntoView({
+    const e = t.getBoundingClientRect(), n = i.getBoundingClientRect(), o = n.top < e.top, r = n.bottom > e.bottom;
+    (o || r) && i.scrollIntoView({
       behavior: "smooth",
       block: "center"
     });
   }
 }
-function H(o, t, e) {
+function N(i, 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, r = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
-  n.show(o.src, o.alt, t, i, r);
+  const o = i.closest('[data-beilage="true"]') !== null, r = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
+  n.show(i.src, i.alt, t, o, r);
 }
 function I() {
   document.getElementById("pageModal").classList.add("hidden");
 }
-function R() {
+function O() {
   if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from(
     document.querySelectorAll(".newspaper-page-container")
   ), window.currentActiveIndex = 0, h(), document.querySelector(".newspaper-page-container")) {
@@ -165,11 +165,11 @@ function R() {
     window.pageObserver = new IntersectionObserver(
       (e) => {
         if (e.forEach((n) => {
-          const i = window.currentPageContainers.indexOf(n.target);
-          i !== -1 && (n.isIntersecting ? t.add(i) : t.delete(i));
+          const o = window.currentPageContainers.indexOf(n.target);
+          o !== -1 && (n.isIntersecting ? t.add(o) : t.delete(o));
         }), t.size > 0) {
-          const i = Array.from(t).sort((r, s) => r - s)[0];
-          i !== window.currentActiveIndex && (window.currentActiveIndex = i, h());
+          const o = Array.from(t).sort((r, a) => r - a)[0];
+          o !== window.currentActiveIndex && (window.currentActiveIndex = o, h());
         }
       },
       {
@@ -180,21 +180,43 @@ function R() {
     });
   }
 }
-function O() {
+function R() {
   if (window.currentActiveIndex > 0) {
-    let o = -1;
+    let i = -1;
     const t = [];
-    window.currentPageContainers.forEach((n, 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);
+    window.currentPageContainers.forEach((n, o) => {
+      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), u = r.height;
+      c / u >= 0.3 && t.push(o);
     });
     const e = Math.min(...t);
     for (let n = e - 1; n >= 0; n--)
       if (!t.includes(n)) {
-        o = n;
+        i = n;
         break;
       }
-    o === -1 && e > 0 && (o = e - 1), o >= 0 && (window.currentActiveIndex = o, window.currentPageContainers[window.currentActiveIndex].scrollIntoView({
+    i === -1 && e > 0 && (i = e - 1), i >= 0 && (window.currentActiveIndex = i, window.currentPageContainers[window.currentActiveIndex].scrollIntoView({
+      behavior: "smooth",
+      block: "start"
+    }), setTimeout(() => {
+      h();
+    }, 100));
+  }
+}
+function z() {
+  if (window.currentActiveIndex < window.currentPageContainers.length - 1) {
+    let i = -1;
+    const t = [];
+    window.currentPageContainers.forEach((n, o) => {
+      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), u = r.height;
+      c / u >= 0.3 && t.push(o);
+    });
+    const e = Math.max(...t);
+    for (let n = e + 1; n < window.currentPageContainers.length; n++)
+      if (!t.includes(n)) {
+        i = n;
+        break;
+      }
+    i === -1 && e < window.currentPageContainers.length - 1 && (i = e + 1), i >= 0 && i < window.currentPageContainers.length && (window.currentActiveIndex = i, window.currentPageContainers[window.currentActiveIndex].scrollIntoView({
       behavior: "smooth",
       block: "start"
     }), setTimeout(() => {
@@ -203,28 +225,6 @@ function O() {
   }
 }
 function D() {
-  if (window.currentActiveIndex < window.currentPageContainers.length - 1) {
-    let o = -1;
-    const t = [];
-    window.currentPageContainers.forEach((n, 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++)
-      if (!t.includes(n)) {
-        o = n;
-        break;
-      }
-    o === -1 && e < window.currentPageContainers.length - 1 && (o = e + 1), o >= 0 && o < window.currentPageContainers.length && (window.currentActiveIndex = o, window.currentPageContainers[window.currentActiveIndex].scrollIntoView({
-      behavior: "smooth",
-      block: "start"
-    }), setTimeout(() => {
-      h();
-    }, 100));
-  }
-}
-function K() {
   if (T()) {
     const t = document.querySelector("#newspaper-content .newspaper-page-container");
     t && t.scrollIntoView({
@@ -240,12 +240,12 @@ function K() {
   }
 }
 function T() {
-  const o = [];
+  const i = [];
   window.currentPageContainers.forEach((t, 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);
+    const n = t.getBoundingClientRect(), o = window.innerHeight, r = Math.max(n.top, 0), a = Math.min(n.bottom, o), s = Math.max(0, a - r), l = n.height;
+    s / l >= 0.3 && i.push(e);
   });
-  for (const t of o) {
+  for (const t of i) {
     const e = window.currentPageContainers[t];
     if (e && e.id && e.id.includes("beilage-"))
       return !0;
@@ -253,37 +253,37 @@ function T() {
   return !1;
 }
 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 = 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"));
+  const i = document.getElementById("prevPageBtn"), t = document.getElementById("nextPageBtn"), e = document.getElementById("beilageBtn");
+  if (i && (window.currentActiveIndex <= 0 ? i.style.display = "none" : i.style.display = "flex"), t && (window.currentActiveIndex >= window.currentPageContainers.length - 1 ? t.style.display = "none" : t.style.display = "flex"), e) {
+    const n = T(), o = 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", o && (o.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", o && (o.className = "ri-attachment-line text-lg lg:text-xl"));
   }
 }
-function V() {
-  const o = document.getElementById("shareLinkBtn");
+function K() {
+  const i = 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 = `/${i.getAttribute("data-page")}`);
+    const o = window.currentPageContainers[window.currentActiveIndex].querySelector("[data-page]");
+    o && (t = `/${o.getAttribute("data-page")}`);
   }
   const e = window.location.origin + window.location.pathname + t;
   navigator.share ? navigator.share({
     title: document.title,
     url: e
   }).catch((n) => {
-    x(e, o);
-  }) : x(e, o);
+    x(e, i);
+  }) : x(e, i);
 }
-function x(o, t) {
+function x(i, t) {
   if (navigator.clipboard)
-    navigator.clipboard.writeText(o).then(() => {
+    navigator.clipboard.writeText(i).then(() => {
       d(t, "Link kopiert!");
     }).catch((e) => {
       d(t, "Kopieren fehlgeschlagen");
     });
   else {
     const e = document.createElement("textarea");
-    e.value = o, document.body.appendChild(e), e.select();
+    e.value = i, document.body.appendChild(e), e.select();
     try {
       const n = document.execCommand("copy");
       d(t, n ? "Link kopiert!" : "Kopieren fehlgeschlagen");
@@ -294,31 +294,31 @@ function x(o, t) {
     }
   }
 }
-function z() {
-  const o = document.getElementById("citationBtn"), t = document.title || "KGPZ";
+function V() {
+  const i = 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}).`;
+  const n = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), o = `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!");
+    navigator.clipboard.writeText(o).then(() => {
+      d(i, "Zitation kopiert!");
     }).catch((r) => {
-      d(o, "Kopieren fehlgeschlagen");
+      d(i, "Kopieren fehlgeschlagen");
     });
   else {
     const r = document.createElement("textarea");
-    r.value = i, document.body.appendChild(r), r.select();
+    r.value = o, document.body.appendChild(r), r.select();
     try {
-      const s = document.execCommand("copy");
-      d(o, s ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
+      const a = document.execCommand("copy");
+      d(i, a ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
     } catch {
-      d(o, "Kopieren fehlgeschlagen");
+      d(i, "Kopieren fehlgeschlagen");
     } finally {
       document.body.removeChild(r);
     }
   }
 }
-function d(o, t) {
+function d(i, t) {
   const e = document.querySelector(".simple-popup");
   e && e.remove();
   const n = document.createElement("div");
@@ -336,10 +336,10 @@ function d(o, t) {
 		transition: opacity 0.2s ease;
 		white-space: nowrap;
 	`;
-  const i = o.getBoundingClientRect(), r = window.innerHeight, s = window.innerWidth;
-  let a = i.left - 10, l = i.bottom + 8;
+  const o = i.getBoundingClientRect(), r = window.innerHeight, a = window.innerWidth;
+  let s = o.left - 10, l = o.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(() => {
+  s + c > a && (s = o.right - c + 10), l + u > r && (l = o.top - u - 8), n.style.left = Math.max(5, s) + "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(() => {
@@ -347,54 +347,54 @@ function d(o, t) {
     }, 200);
   }, 2e3);
 }
-function j() {
-  let o = "", t = null;
+function W() {
+  let i = "", 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) {
+    if (i = e[e.length - 1], t = document.getElementById(`page-${i}`), !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(o)) {
-          t = i;
+      for (const o of n) {
+        const r = o.getAttribute("data-pages");
+        if (r && r.split(",").includes(i)) {
+          t = o;
           break;
         }
       }
     }
-    t || (t = document.getElementById(`beilage-1-page-${o}`) || document.getElementById(`beilage-2-page-${o}`) || document.querySelector(`[id*="beilage"][id*="page-${o}"]`));
+    t || (t = document.getElementById(`beilage-1-page-${i}`) || document.getElementById(`beilage-2-page-${i}`) || document.querySelector(`[id*="beilage"][id*="page-${i}"]`));
   }
-  t && o && setTimeout(() => {
+  t && i && setTimeout(() => {
     t.scrollIntoView({
       behavior: "smooth",
       block: "start"
-    }), C(o);
+    }), P(i);
   }, 300);
 }
-function b(o, t, e = !1) {
+function f(i, t, e = !1) {
   let n = "";
   if (e)
-    n = window.location.origin + window.location.pathname + `#beilage-1-page-${o}`;
+    n = window.location.origin + window.location.pathname + `#beilage-1-page-${i}`;
   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}`;
+      const a = r[1], s = r[2];
+      n = `${window.location.origin}/${a}/${s}/${i}`;
     } else
-      n = window.location.origin + window.location.pathname + `/${o}`;
+      n = window.location.origin + window.location.pathname + `/${i}`;
   }
-  const i = n;
+  const o = n;
   if (navigator.clipboard)
-    navigator.clipboard.writeText(i).then(() => {
+    navigator.clipboard.writeText(o).then(() => {
       d(t, "Link kopiert!");
     }).catch((r) => {
       d(t, "Kopieren fehlgeschlagen");
     });
   else {
     const r = document.createElement("textarea");
-    r.value = i, document.body.appendChild(r), r.select();
+    r.value = o, document.body.appendChild(r), r.select();
     try {
-      const s = document.execCommand("copy");
-      d(t, s ? "Link kopiert!" : "Kopieren fehlgeschlagen");
+      const a = document.execCommand("copy");
+      d(t, a ? "Link kopiert!" : "Kopieren fehlgeschlagen");
     } catch {
       d(t, "Kopieren fehlgeschlagen");
     } finally {
@@ -402,24 +402,24 @@ function b(o, t, e = !1) {
     }
   }
 }
-function m(o, t) {
+function w(i, t) {
   const e = document.title || "KGPZ", n = window.location.pathname.split("/");
-  let i;
+  let o;
   if (n.length >= 3) {
     const l = n[1], c = n[2];
-    i = `${window.location.origin}/${l}/${c}/${o}`;
+    o = `${window.location.origin}/${l}/${c}/${i}`;
   } 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}).`;
+    o = `${window.location.origin}${window.location.pathname}/${i}`;
+  const r = o, a = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), s = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${e}, Seite ${i}. Digital verfügbar unter: ${r} (Zugriff: ${a}).`;
   if (navigator.clipboard)
-    navigator.clipboard.writeText(a).then(() => {
+    navigator.clipboard.writeText(s).then(() => {
       d(t, "Zitation kopiert!");
     }).catch((l) => {
       d(t, "Kopieren fehlgeschlagen");
     });
   else {
     const l = document.createElement("textarea");
-    l.value = a, document.body.appendChild(l), l.select();
+    l.value = s, document.body.appendChild(l), l.select();
     try {
       const c = document.execCommand("copy");
       d(t, c ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
@@ -430,50 +430,61 @@ function m(o, t) {
     }
   }
 }
-function f() {
-  k(), R(), window.addEventListener("scroll", function() {
+function b() {
+  k(), O(), window.addEventListener("scroll", function() {
     clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => {
-      P(), h();
+      S(), h();
     }, 50);
-  }), j(), document.addEventListener("keydown", function(o) {
-    o.key === "Escape" && I();
+  }), W(), document.addEventListener("keydown", function(i) {
+    i.key === "Escape" && I();
   });
 }
-window.enlargePage = H;
+window.enlargePage = N;
 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(), q(), document.querySelector(".newspaper-page-container") && f(), htmx.on("htmx:load", function(o) {
+window.scrollToPreviousPage = R;
+window.scrollToNextPage = z;
+window.scrollToBeilage = D;
+window.shareCurrentPage = K;
+window.generateCitation = V;
+window.copyPagePermalink = f;
+window.generatePageCitation = w;
+function Z() {
+  v(), q(), document.querySelector(".newspaper-page-container") && b(), htmx.on("htmx:load", function(i) {
     v();
-  }), document.body.addEventListener("htmx:afterSwap", function(o) {
+  }), document.body.addEventListener("htmx:afterSwap", function(i) {
     setTimeout(() => {
-      document.querySelector(".newspaper-page-container") && f();
+      document.querySelector(".newspaper-page-container") && b();
     }, 100);
-  }), document.body.addEventListener("htmx:afterSettle", function(o) {
+  }), document.body.addEventListener("htmx:afterSettle", function(i) {
     setTimeout(() => {
-      document.querySelector(".newspaper-page-container") && f();
+      document.querySelector(".newspaper-page-container") && b();
     }, 200);
-  }), document.body.addEventListener("htmx:load", function(o) {
+  }), document.body.addEventListener("htmx:load", function(i) {
     setTimeout(() => {
-      document.querySelector(".newspaper-page-container") && f();
+      document.querySelector(".newspaper-page-container") && b();
     }, 100);
   });
 }
-class Z extends HTMLElement {
+class j extends HTMLElement {
   constructor() {
-    super();
+    super(), this.resizeObserver = null;
+  }
+  // Dynamically detect sidebar width in pixels
+  detectSidebarWidth() {
+    const t = document.querySelector('.lg\\:w-1\\/4, .lg\\:w-1\\/3, [class*="lg:w-1/"]');
+    if (t) {
+      const o = t.getBoundingClientRect().width;
+      return console.log("Detected sidebar width:", o, "px"), `${o}px`;
+    }
+    const e = window.innerWidth;
+    return e < 1024 ? "0px" : e < 1280 ? `${Math.floor(e * 0.25)}px` : `${Math.floor(e * 0.2)}px`;
   }
   connectedCallback() {
+    const t = this.detectSidebarWidth();
     this.innerHTML = `
 			<div class="fixed inset-0 z-50 flex pointer-events-none">
 				<!-- Keep Inhaltsverzeichnis area empty/transparent (collapsible) -->
-				<div id="sidebar-spacer" class="lg:w-1/4 xl:w-1/5 flex-shrink-0 transition-all duration-300"></div>
+				<div id="sidebar-spacer" style="width: ${t};" class="flex-shrink-0 transition-all duration-300"></div>
 
 				<!-- Cover the right columns with the zoomed view -->
 				<div class="flex-1 bg-slate-50 overflow-auto pointer-events-auto">
@@ -563,28 +574,42 @@ class Z extends HTMLElement {
 					</div>
 				</div>
 			</div>
-		`;
+		`, this.setupResizeObserver();
   }
-  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;
+  // Set up resize observer to dynamically update sidebar width
+  setupResizeObserver() {
+    this.resizeObserver && this.resizeObserver.disconnect(), this.resizeObserver = new ResizeObserver(() => {
+      this.updateSidebarWidth();
+    }), this.resizeObserver.observe(document.body);
+  }
+  // Update sidebar width when window is resized
+  updateSidebarWidth() {
+    const t = this.querySelector("#sidebar-spacer");
+    if (t && !t.style.width.includes("0px")) {
+      const e = this.detectSidebarWidth();
+      t.style.width = e, console.log("Updated sidebar width to:", e);
+    }
+  }
+  show(t, e, n, o = !1, r = 0) {
+    const a = this.querySelector("#single-page-image"), s = this.querySelector("#page-number"), l = this.querySelector("#page-icon");
+    this.querySelector("#page-indicator"), a.src = t, a.alt = e, this.currentPageNumber = n, this.currentIsBeilage = o;
     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");
+    if (s.innerHTML = c ? `${c}, ${n}` : `${n}`, r && n === r) {
+      s.style.position = "relative";
+      const g = s.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);
+      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", s.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);
+    const u = this.determinePageIconType(n, o);
+    l.innerHTML = this.getPageIconHTML(u), this.updateNavigationButtons(), this.style.display = "block", document.body.style.overflow = "hidden", P(n);
   }
   close() {
     this.style.display = "none", document.body.style.overflow = "";
   }
   // Clean up component completely
   destroy() {
-    document.body.style.overflow = "", this.parentNode && this.parentNode.removeChild(this);
+    this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), document.body.style.overflow = "", this.parentNode && this.parentNode.removeChild(this);
   }
   // Determine page icon type based on page position and whether it's beilage
   determinePageIconType(t, e) {
@@ -594,8 +619,8 @@ class Z extends HTMLElement {
     }).filter((l) => l !== null).sort((l, c) => l - c);
     if (r.length === 0)
       return "first";
-    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";
+    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";
   }
   // Generate page icon HTML based on type (same as Go PageIcon function)
   getPageIconHTML(t) {
@@ -615,22 +640,22 @@ class Z extends HTMLElement {
   }
   // Share current page
   shareCurrentPage() {
-    if (typeof b == "function") {
+    if (typeof f == "function") {
       const t = this.querySelector("#share-btn");
-      b(this.currentPageNumber, t, this.currentIsBeilage);
+      f(this.currentPageNumber, t, this.currentIsBeilage);
     }
   }
   // Generate citation for current page
   generatePageCitation() {
-    if (typeof m == "function") {
+    if (typeof w == "function") {
       const t = this.querySelector("#cite-btn");
-      m(this.currentPageNumber, t);
+      w(this.currentPageNumber, t);
     }
   }
   // Update navigation button visibility based on available pages
   updateNavigationButtons() {
-    const t = this.querySelector("#prev-page-btn"), e = this.querySelector("#next-page-btn"), { prevPage: n, nextPage: i } = this.getAdjacentPages();
-    n !== null ? (t.disabled = !1, t.className = t.className.replace("opacity-50 cursor-not-allowed", ""), t.className = t.className.replace("bg-gray-50 text-gray-400", "bg-gray-100 text-gray-700")) : (t.disabled = !0, t.className.includes("opacity-50") || (t.className += " opacity-50 cursor-not-allowed"), t.className = t.className.replace("bg-gray-100 text-gray-700", "bg-gray-50 text-gray-400")), i !== null ? (e.disabled = !1, e.className = e.className.replace("opacity-50 cursor-not-allowed", ""), e.className = e.className.replace("bg-gray-50 text-gray-400", "bg-gray-100 text-gray-700")) : (e.disabled = !0, e.className.includes("opacity-50") || (e.className += " opacity-50 cursor-not-allowed"), e.className = e.className.replace("bg-gray-100 text-gray-700", "bg-gray-50 text-gray-400"));
+    const t = this.querySelector("#prev-page-btn"), e = this.querySelector("#next-page-btn"), { prevPage: n, nextPage: o } = this.getAdjacentPages();
+    n !== null ? (t.disabled = !1, t.className = t.className.replace("opacity-50 cursor-not-allowed", ""), t.className = t.className.replace("bg-gray-50 text-gray-400", "bg-gray-100 text-gray-700")) : (t.disabled = !0, t.className.includes("opacity-50") || (t.className += " opacity-50 cursor-not-allowed"), t.className = t.className.replace("bg-gray-100 text-gray-700", "bg-gray-50 text-gray-400")), o !== null ? (e.disabled = !1, e.className = e.className.replace("opacity-50 cursor-not-allowed", ""), e.className = e.className.replace("bg-gray-50 text-gray-400", "bg-gray-100 text-gray-700")) : (e.disabled = !0, e.className.includes("opacity-50") || (e.className += " opacity-50 cursor-not-allowed"), e.className = e.className.replace("bg-gray-100 text-gray-700", "bg-gray-50 text-gray-400"));
   }
   // Get previous and next page numbers
   getAdjacentPages() {
@@ -638,15 +663,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((a) => {
-      const l = a.getAttribute("data-page-container"), c = l ? parseInt(l) : null;
+    const n = e.map((s) => {
+      const l = s.getAttribute("data-page-container"), c = l ? parseInt(l) : null;
       return console.log("Container page:", l, "parsed:", c), c;
-    }).filter((a) => a !== null).sort((a, l) => a - l);
+    }).filter((s) => s !== null).sort((s, l) => s - 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, 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 };
+    const o = n.indexOf(this.currentPageNumber);
+    console.log("Current index:", o);
+    let r = null, a = null;
+    return o > 0 && (r = n[o - 1]), o < n.length - 1 && (a = n[o + 1]), console.log("Adjacent pages - prev:", r, "next:", a), { prevPage: r, nextPage: a };
   }
   // Navigate to previous page
   goToPreviousPage() {
@@ -662,22 +687,27 @@ class Z extends HTMLElement {
   navigateToPage(t) {
     const e = this.currentIsBeilage ? '.newspaper-page-container[data-beilage="true"]' : ".newspaper-page-container:not([data-beilage])", n = document.querySelector(`${e}[data-page-container="${t}"]`);
     if (n) {
-      const i = n.querySelector(".newspaper-page-image");
-      i && this.show(i.src, i.alt, t, this.currentIsBeilage);
+      const o = n.querySelector(".newspaper-page-image");
+      o && this.show(o.src, o.alt, t, this.currentIsBeilage);
     }
   }
   // Toggle sidebar visibility
   toggleSidebar() {
-    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);
+    const t = this.querySelector("#sidebar-spacer"), e = this.querySelector("#sidebar-toggle-btn"), n = e.querySelector("i"), o = t.style.width, r = o === "0px" || o === "0";
+    if (console.log("Current state - isCollapsed:", r), console.log("Current width:", o), r) {
+      const a = this.detectSidebarWidth();
+      t.style.width = a, 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 to:", a);
+    } else
+      t.style.width = "0px", 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 width:", t.style.width);
   }
   // 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");
+      const a = document.querySelector(`[data-page-container="${t}"]`);
+      if (a) {
+        const c = a.querySelector(".page-indicator");
         if (c) {
           const g = c.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
           if (g)
@@ -689,27 +719,27 @@ class Z extends HTMLElement {
         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 o = e.match(/\/(\d{4})\/(\d+)/);
+    if (o)
+      return n ? `${o[1]} Nr. ${o[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]}`;
+      const s = r.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
+      if (s)
+        return `${s[1]} Nr. ${s[2]}`;
     }
     return "KGPZ";
   }
 }
-customElements.define("single-page-viewer", Z);
-document.body.addEventListener("htmx:beforeRequest", function(o) {
+customElements.define("single-page-viewer", j);
+document.body.addEventListener("htmx:beforeRequest", function(i) {
   const t = document.querySelector("single-page-viewer");
   t && t.style.display !== "none" && (console.log("Cleaning up single page viewer before HTMX navigation"), t.destroy());
 });
 window.addEventListener("beforeunload", function() {
-  const o = document.querySelector("single-page-viewer");
-  o && o.destroy();
+  const i = document.querySelector("single-page-viewer");
+  i && i.destroy();
 });
 export {
-  _ as setup
+  Z as setup
 };

views/routes/piece/body.gohtml

@@ -6,14 +6,14 @@
 		<!-- 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:w-1/4 xl:w-1/5 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">
+			<div class="lg:w-3/4 xl:w-4/5 flex-1 py-4">
 				{{ template "_piece_sequential_layout" . }}
 			</div>
 		</div>

views/routes/piece/components/_piece_inhaltsverzeichnis.gohtml

@@ -82,10 +82,10 @@
 								<!-- Content area -->
 								<div class="space-y-0">
 									{{ if $pageEntry.OtherPieces }}
+										<div class="italic text-slate-600 text-xs pt-1 pb-1">Außerdem:</div>
 										{{ range $otherPiece := $pageEntry.OtherPieces }}
 											<div class="inhalts-entry py-1 px-0 bg-slate-50 rounded hover:bg-slate-100 transition-colors duration-200"
 												 data-page="{{ $pageEntry.PageNumber }}">
-												<div class="italic text-slate-600 text-xs mb-1">Außerdem:</div>
 												{{ template "_inhaltsverzeichnis_eintrag" $otherPiece.PieceByIssue }}
 											</div>
 										{{ end }}

views/routes/piece/components/_piece_sequential_layout.gohtml

@@ -82,7 +82,7 @@
 	<!-- 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"
+		class="fixed 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" />

views/transform/main.js

@@ -1064,13 +1064,44 @@ class SinglePageViewer extends HTMLElement {
 	constructor() {
 		super();
 		// No shadow DOM - use regular DOM to allow Tailwind CSS
+		this.resizeObserver = null;
+	}
+
+	// Dynamically detect sidebar width in pixels
+	detectSidebarWidth() {
+		// Find the actual sidebar element in the current layout
+		const sidebar = document.querySelector('.lg\\:w-1\\/4, .lg\\:w-1\\/3, [class*="lg:w-1/"]');
+
+		if (sidebar) {
+			const sidebarRect = sidebar.getBoundingClientRect();
+			const sidebarWidth = sidebarRect.width;
+			console.log('Detected sidebar width:', sidebarWidth, 'px');
+			return `${sidebarWidth}px`;
+		}
+
+		// Fallback: calculate based on viewport width and responsive breakpoints
+		const viewportWidth = window.innerWidth;
+
+		if (viewportWidth < 1024) {
+			// Below lg breakpoint - no sidebar space needed
+			return '0px';
+		} else if (viewportWidth < 1280) {
+			// lg breakpoint: assume 1/4 of viewport (similar to both layouts)
+			return `${Math.floor(viewportWidth * 0.25)}px`;
+		} else {
+			// xl breakpoint: assume 1/5 of viewport (narrower on larger screens)
+			return `${Math.floor(viewportWidth * 0.2)}px`;
+		}
 	}
 
 	connectedCallback() {
+		// Detect sidebar width dynamically
+		const sidebarWidth = this.detectSidebarWidth();
+
 		this.innerHTML = `
 			<div class="fixed inset-0 z-50 flex pointer-events-none">
 				<!-- Keep Inhaltsverzeichnis area empty/transparent (collapsible) -->
-				<div id="sidebar-spacer" class="lg:w-1/4 xl:w-1/5 flex-shrink-0 transition-all duration-300"></div>
+				<div id="sidebar-spacer" style="width: ${sidebarWidth};" class="flex-shrink-0 transition-all duration-300"></div>
 
 				<!-- Cover the right columns with the zoomed view -->
 				<div class="flex-1 bg-slate-50 overflow-auto pointer-events-auto">
@@ -1161,6 +1192,36 @@ class SinglePageViewer extends HTMLElement {
 				</div>
 			</div>
 		`;
+
+		// Set up resize observer to handle window resizing
+		this.setupResizeObserver();
+	}
+
+	// Set up resize observer to dynamically update sidebar width
+	setupResizeObserver() {
+		// Clean up existing observer
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+		}
+
+		// Create new resize observer
+		this.resizeObserver = new ResizeObserver(() => {
+			this.updateSidebarWidth();
+		});
+
+		// Observe window resizing by watching the document body
+		this.resizeObserver.observe(document.body);
+	}
+
+	// Update sidebar width when window is resized
+	updateSidebarWidth() {
+		const sidebarSpacer = this.querySelector('#sidebar-spacer');
+		if (sidebarSpacer && !sidebarSpacer.style.width.includes('0px')) {
+			// Only update if sidebar is not collapsed (not 0px width)
+			const newWidth = this.detectSidebarWidth();
+			sidebarSpacer.style.width = newWidth;
+			console.log('Updated sidebar width to:', newWidth);
+		}
 	}
 
 	show(imgSrc, imgAlt, pageNumber, isBeilage = false, targetPage = 0) {
@@ -1224,6 +1285,12 @@ class SinglePageViewer extends HTMLElement {
 
 	// Clean up component completely
 	destroy() {
+		// Clean up resize observer
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = null;
+		}
+
 		// Restore background scrolling
 		document.body.style.overflow = '';
 
@@ -1429,26 +1496,26 @@ class SinglePageViewer extends HTMLElement {
 		const toggleBtn = this.querySelector('#sidebar-toggle-btn');
 		const toggleIcon = toggleBtn.querySelector('i');
 
-		// Check if sidebar is currently collapsed by looking at classes
-		const isCollapsed = sidebarSpacer.classList.contains('w-0');
+		// Check if sidebar is currently collapsed by looking at width
+		const currentWidth = sidebarSpacer.style.width;
+		const isCollapsed = currentWidth === '0px' || currentWidth === '0';
 
 		console.log('Current state - isCollapsed:', isCollapsed);
-		console.log('Current classes:', sidebarSpacer.className);
+		console.log('Current width:', currentWidth);
 
 		if (isCollapsed) {
 			// Sidebar is collapsed, expand it
-			sidebarSpacer.classList.remove('w-0');
-			sidebarSpacer.classList.add('lg:w-1/4', 'xl:w-1/5');
+			const fullWidth = this.detectSidebarWidth();
+			sidebarSpacer.style.width = fullWidth;
 
 			// Update button to normal state (sidebar visible)
 			toggleBtn.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';
 			toggleIcon.className = 'ri-sidebar-unfold-line text-lg font-bold';
 			toggleBtn.title = 'Inhaltsverzeichnis ausblenden';
-			console.log('Expanding sidebar');
+			console.log('Expanding sidebar to:', fullWidth);
 		} else {
 			// Sidebar is expanded, collapse it
-			sidebarSpacer.classList.remove('lg:w-1/4', 'xl:w-1/5');
-			sidebarSpacer.classList.add('w-0');
+			sidebarSpacer.style.width = '0px';
 
 			// Update button to active state (sidebar hidden - orange highlight)
 			toggleBtn.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';
@@ -1457,7 +1524,7 @@ class SinglePageViewer extends HTMLElement {
 			console.log('Collapsing sidebar');
 		}
 
-		console.log('New classes:', sidebarSpacer.className);
+		console.log('New width:', sidebarSpacer.style.width);
 	}
 
 	// Extract issue context from document title, URL, or page container