better page styling

views/routes/ausgabe/components/_fullwidth_layout.gohtml

@@ -132,10 +132,29 @@ function markCurrentPageInInhaltsverzeichnis(pageNumber) {
 }
 
 function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
+	// Reset all page container borders to default
+	document.querySelectorAll('[data-page-container]').forEach(container => {
+		if (container.hasAttribute('data-beilage')) {
+			container.classList.remove('border-red-500');
+			container.classList.add('border-amber-400');
+		} else {
+			container.classList.remove('border-red-500');
+			container.classList.add('border-slate-300');
+		}
+	});
+	
 	// Reset all page numbers in Inhaltsverzeichnis
 	document.querySelectorAll('.page-number-inhalts').forEach(pageNum => {
 		pageNum.classList.remove('bg-red-500', 'text-white');
 		pageNum.classList.add('text-slate-700');
+		pageNum.style.textDecoration = '';
+		pageNum.style.pointerEvents = '';
+		// Restore hover effects
+		if (pageNum.classList.contains('bg-blue-50')) {
+			pageNum.classList.add('hover:bg-blue-100');
+		} else if (pageNum.classList.contains('bg-amber-50')) {
+			pageNum.classList.add('hover:bg-amber-100');
+		}
 		// Restore original background colors
 		if (pageNum.classList.contains('bg-amber-50')) {
 			// Keep amber background for Beilage pages
@@ -145,11 +164,34 @@ function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
 		}
 	});
 
+	// Reset all containers and links in Inhaltsverzeichnis
+	document.querySelectorAll('.inhalts-entry').forEach(container => {
+		container.classList.add('hover:bg-slate-100');
+		container.style.cursor = '';
+	});
+	
+	document.querySelectorAll('.inhalts-entry .author-link').forEach(link => {
+		link.style.textDecoration = '';
+		link.style.pointerEvents = '';
+		link.classList.remove('no-underline');
+	});
+	
+	document.querySelectorAll('.inhalts-entry a[href*="/"]').forEach(link => {
+		link.style.textDecoration = '';
+		link.style.pointerEvents = '';
+		link.classList.remove('no-underline');
+		if (link.classList.contains('bg-blue-50')) {
+			link.classList.add('hover:bg-blue-100');
+		}
+	});
+
 	// Find and highlight the current page numbers
 	const highlightedElements = [];
 	const highlightedRanges = new Set(); // Track which ranges we've already highlighted
 
 	pageNumbers.forEach(pageNumber => {
+		// Convert pageNumber to integer for comparison
+		const currentPageNum = parseInt(pageNumber);
 		// Look for all entries that should be highlighted for this page
 		const allPageNumbers = document.querySelectorAll('.page-number-inhalts');
 
@@ -159,13 +201,50 @@ function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
 			const rangeKey = `${startPage}-${endPage}`;
 
 			// Check if this page falls within this range
-			if (pageNumber >= startPage && pageNumber <= endPage) {
+			if (currentPageNum >= startPage && currentPageNum <= endPage) {
 				// Only highlight this range once, even if multiple visible pages fall within it
 				if (!highlightedRanges.has(rangeKey)) {
-					pageNumElement.classList.remove('bg-blue-50', 'bg-amber-50', 'text-slate-700');
+					pageNumElement.classList.remove('bg-blue-50', 'bg-amber-50', 'text-slate-700', 'hover:bg-blue-100', 'hover:bg-amber-100');
 					pageNumElement.classList.add('bg-red-500', 'text-white');
+					pageNumElement.style.textDecoration = 'none';
+					pageNumElement.style.pointerEvents = 'none';
 					highlightedElements.push(pageNumElement);
 					highlightedRanges.add(rangeKey);
+
+					// Highlight the page container's left border
+					const pageContainer = document.querySelector(`[data-page-container="${startPage}"]`);
+					if (pageContainer) {
+						pageContainer.classList.remove('border-slate-300', 'border-amber-400');
+						pageContainer.classList.add('border-red-500');
+					}
+
+					// Also make links in the current article non-clickable and remove hover effects
+					const parentEntry = pageNumElement.closest('.mb-4');
+					if (parentEntry) {
+						// Remove hover effects from the container
+						const entryContainers = parentEntry.querySelectorAll('.inhalts-entry');
+						entryContainers.forEach(container => {
+							container.classList.remove('hover:bg-slate-100');
+							container.style.cursor = 'default';
+						});
+						
+						// Make all links non-clickable and remove underlines
+						parentEntry.querySelectorAll('.author-link').forEach(link => {
+							link.style.textDecoration = 'none';
+							link.style.pointerEvents = 'none';
+							link.classList.add('no-underline');
+						});
+						
+						// Also handle issue reference links
+						parentEntry.querySelectorAll('a[href*="/"]').forEach(link => {
+							if (link.getAttribute('aria-current') === 'page') {
+								link.style.textDecoration = 'none';
+								link.style.pointerEvents = 'none';
+								link.classList.add('no-underline');
+								link.classList.remove('hover:bg-blue-100');
+							}
+						});
+					}
 				}
 			}
 		}
@@ -266,14 +345,13 @@ function shareCurrentPage() {
 	}
 }
 
+
 function copyToClipboard(text, button) {
 	if (navigator.clipboard) {
 		navigator.clipboard.writeText(text).then(() => {
-			// Show temporary notification
-			showNotification('Link kopiert!', 'success', button);
+			showSimplePopup(button, 'Link kopiert!');
 		}).catch(err => {
-			console.error('Failed to copy:', err);
-			showNotification('Kopieren fehlgeschlagen', 'error', button);
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
 		});
 	} else {
 		// Fallback for older browsers
@@ -282,13 +360,13 @@ function copyToClipboard(text, button) {
 		document.body.appendChild(textarea);
 		textarea.select();
 		try {
-			document.execCommand('copy');
-			showNotification('Link kopiert!', 'success', button);
+			const successful = document.execCommand('copy');
+			showSimplePopup(button, successful ? 'Link kopiert!' : 'Kopieren fehlgeschlagen');
 		} catch (err) {
-			console.error('Fallback copy failed:', err);
-			showNotification('Kopieren fehlgeschlagen', 'error', button);
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
+		} finally {
+			document.body.removeChild(textarea);
 		}
-		document.body.removeChild(textarea);
 	}
 }
 
@@ -303,44 +381,188 @@ function generateCitation() {
 	const currentDate = new Date().toLocaleDateString('de-DE');
 	const citation = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${issueInfo}. Digital verfügbar unter: ${currentUrl} (Zugriff: ${currentDate}).`;
 
-	// Copy citation to clipboard
-	copyToClipboard(citation, button);
+	// Copy to clipboard
+	if (navigator.clipboard) {
+		navigator.clipboard.writeText(citation).then(() => {
+			showSimplePopup(button, 'Zitation kopiert!');
+		}).catch(err => {
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
+		});
+	} else {
+		// Fallback for older browsers
+		const textarea = document.createElement('textarea');
+		textarea.value = citation;
+		document.body.appendChild(textarea);
+		textarea.select();
+		try {
+			const successful = document.execCommand('copy');
+			showSimplePopup(button, successful ? 'Zitation kopiert!' : 'Kopieren fehlgeschlagen');
+		} catch (err) {
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
+		} finally {
+			document.body.removeChild(textarea);
+		}
+	}
 }
 
-function showNotification(message, type = 'success', button) {
-	// Remove any existing notifications
-	const existingNotification = document.getElementById('notification');
-	if (existingNotification) {
-		existingNotification.remove();
+function showSimplePopup(button, message) {
+	// Remove any existing popup
+	const existingPopup = document.querySelector('.simple-popup');
+	if (existingPopup) {
+		existingPopup.remove();
 	}
 
-	// Create notification element
-	const notification = document.createElement('div');
-	notification.id = 'notification';
-	notification.className = `fixed px-3 py-2 rounded-md text-white text-sm font-medium z-50 transition-opacity duration-300 ${
-		type === 'success' ? 'bg-green-500' : 'bg-red-500'
-	}`;
-	notification.textContent = message;
+	// Create popup element
+	const popup = document.createElement('div');
+	popup.className = 'simple-popup';
+	popup.textContent = message;
+	
+	// Style the popup
+	popup.style.cssText = `
+		position: fixed;
+		background: #374151;
+		color: white;
+		padding: 6px 12px;
+		border-radius: 6px;
+		font-size: 13px;
+		font-weight: 500;
+		z-index: 1000;
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity 0.2s ease;
+		white-space: nowrap;
+	`;
 
-	// Position notification next to button if button is provided
-	if (button) {
-		const buttonRect = button.getBoundingClientRect();
-		notification.style.left = `${buttonRect.left - 80}px`; // Position to the left of button
-		notification.style.top = `${buttonRect.top + buttonRect.height / 2 - 20}px`; // Center vertically with button
-	} else {
-		// Fallback to top-right corner
-		notification.className += ' top-4 right-4';
-	}
+	// Position popup next to button
+	const buttonRect = button.getBoundingClientRect();
+	const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+	const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+	
+	popup.style.left = (buttonRect.left + scrollLeft - 10) + 'px';
+	popup.style.top = (buttonRect.bottom + scrollTop + 8) + 'px';
 
 	// Add to page
-	document.body.appendChild(notification);
+	document.body.appendChild(popup);
 
-	// Auto-remove after 3 seconds
+	// Fade in
 	setTimeout(() => {
-		notification.style.opacity = '0';
+		popup.style.opacity = '1';
+	}, 10);
+
+	// Auto-remove after 2 seconds
+	setTimeout(() => {
+		popup.style.opacity = '0';
 		setTimeout(() => {
-			notification.remove();
-		}, 300);
-	}, 3000);
+			if (popup.parentNode) {
+				popup.remove();
+			}
+		}, 200);
+	}, 2000);
 }
+
+// Function to copy page permalink
+function copyPagePermalink(pageNumber, button, isBeilage = false) {
+	let pageFragment = '';
+	if (isBeilage) {
+		pageFragment = `#beilage-1-page-${pageNumber}`;
+	} else {
+		pageFragment = `#page-${pageNumber}`;
+	}
+	
+	const currentUrl = window.location.origin + window.location.pathname + pageFragment;
+	
+	// Copy to clipboard
+	if (navigator.clipboard) {
+		navigator.clipboard.writeText(currentUrl).then(() => {
+			showSimplePopup(button, 'Link kopiert!');
+		}).catch(err => {
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
+		});
+	} else {
+		// Fallback for older browsers
+		const textarea = document.createElement('textarea');
+		textarea.value = currentUrl;
+		document.body.appendChild(textarea);
+		textarea.select();
+		try {
+			const successful = document.execCommand('copy');
+			showSimplePopup(button, successful ? 'Link kopiert!' : 'Kopieren fehlgeschlagen');
+		} catch (err) {
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
+		} finally {
+			document.body.removeChild(textarea);
+		}
+	}
+}
+
+// Handle hash navigation to scroll to specific pages
+function scrollToPageFromHash() {
+	const hash = window.location.hash;
+	let pageNumber = '';
+	let targetContainer = null;
+	
+	if (hash.startsWith('#page-')) {
+		pageNumber = hash.replace('#page-', '');
+		
+		// Try to find exact page container first
+		targetContainer = document.getElementById(`page-${pageNumber}`);
+		
+		// If not found, try to find container that contains this page
+		if (!targetContainer) {
+			// Look for double-spread containers that contain this page
+			const containers = document.querySelectorAll('.newspaper-page-container[data-pages]');
+			for (const container of containers) {
+				const pages = container.getAttribute('data-pages');
+				if (pages && pages.split(',').includes(pageNumber)) {
+					targetContainer = container;
+					break;
+				}
+			}
+		}
+		
+		// If still not found, try beilage containers
+		if (!targetContainer) {
+			targetContainer = document.getElementById(`beilage-1-page-${pageNumber}`) || 
+							 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) {
+		setTimeout(() => {
+			targetContainer.scrollIntoView({
+				behavior: 'smooth',
+				block: 'start'
+			});
+			
+			// Highlight the specific page in the table of contents
+			markCurrentPageInInhaltsverzeichnis(pageNumber);
+		}, 300);
+	}
+}
+
+// Function to copy page permalink
+function copyPagePermalink(pageNumber, button, isBeilage = false) {
+	let pageFragment = '';
+	if (isBeilage) {
+		pageFragment = `#beilage-1-page-${pageNumber}`;
+	} else {
+		pageFragment = `#page-${pageNumber}`;
+	}
+	
+	const currentUrl = window.location.origin + window.location.pathname + pageFragment;
+	copyToClipboardWithMessage(currentUrl, button, 'Link kopiert!');
+}
+
+// Initialize hash handling
+document.addEventListener('DOMContentLoaded', scrollToPageFromHash);
+window.addEventListener('hashchange', scrollToPageFromHash);
 </script>

views/routes/ausgabe/components/_inhaltsverzeichnis.gohtml

@@ -1,7 +1,7 @@
 {{ $model := .model }}
 
 
-<div class="w-full bg-white border border-slate-200 px-4 py-4 hyphens-auto rounded-lg">
+<div class="w-full hyphens-auto">
 	{{- if $model.Pieces.Pages -}}
 		<div class="space-y-4">
 			<div class="flex items-center gap-2 mb-4">
@@ -9,28 +9,33 @@
 				<h3 class="text-base font-semibold text-slate-800">Inhalt</h3>
 			</div>
 			{{ range  $page := $model.Pieces.Pages }}
-				<div class="mb-4 first:mb-0">
-					<div class="flex items-center gap-2 mb-3 pb-2 border-b border-slate-200">
-						<i class="ri-file-text-line text-blue-600 text-sm"></i>
-						{{ $pageItems := (index $model.Pieces.Items $page) }}
-						{{ $maxEndPage := $page }}
-						{{ range $groupedPiece := $pageItems }}{{ if gt $groupedPiece.EndPage $maxEndPage }}{{ $maxEndPage = $groupedPiece.EndPage }}{{ end }}{{ end }}
-						<span class="page-number-inhalts font-bold text-slate-700 bg-blue-50 px-2 py-1 rounded text-xs transition-colors duration-200" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</span>
+				<div class="mb-6 first:mb-0 pl-4 border-l-4 border-slate-300" data-page-container="{{ $page }}">
+					<div class="flex items-center justify-between gap-2 mb-2">
+						<div class="flex items-center gap-2">
+							<i class="ri-file-text-line text-blue-600 text-sm"></i>
+							{{ $pageItems := (index $model.Pieces.Items $page) }}
+							{{ $maxEndPage := $page }}
+							{{ range $groupedPiece := $pageItems }}{{ if gt $groupedPiece.EndPage $maxEndPage }}{{ $maxEndPage = $groupedPiece.EndPage }}{{ end }}{{ end }}
+							<a href="#page-{{ $page }}" class="page-number-inhalts font-bold text-slate-700 bg-blue-50 px-2 py-1 rounded text-xs transition-colors duration-200 hover:bg-blue-100 no-underline" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</a>
+						</div>
+						<button class="page-permalink-btn text-slate-400 hover:text-blue-600 text-xs p-1 rounded hover:bg-blue-50 transition-colors duration-200" 
+								title="Link zu dieser Seite kopieren" 
+								onclick="copyPagePermalink('{{ $page }}', this)"
+								data-page="{{ $page }}">
+							<i class="ri-link text-sm"></i>
+						</button>
 					</div>
-					<div class="space-y-1">
+					<div class="space-y-0">
 						{{ range $groupedPiece := (index $model.Pieces.Items $page) }}
-						<div class="inhalts-entry py-1 px-3 bg-slate-50 rounded hover:bg-slate-100 transition-colors duration-200" data-page="{{ $page }}">
+						<div class="inhalts-entry py-1 px-0 bg-slate-50 rounded hover:bg-slate-100 transition-colors duration-200" data-page="{{ $page }}">
 							{{ template "_inhaltsverzeichnis_eintrag" $groupedPiece.PieceByIssue }}
 
 
 								<!-- Links zu anderen Teilen: -->
 								{{ if and (not $groupedPiece.PieceByIssue.IsContinuation) (gt (len $groupedPiece.IssueRefs) 1) }}
 									<div class="mt-1 pt-1 border-t border-slate-100">
-										<div class="flex items-center gap-2 mb-0.5">
-											<i class="ri-links-line text-blue-500 text-sm"></i>
-											<span class="text-sm font-medium text-slate-600">{{ len $groupedPiece.IssueRefs }} Teile:</span>
-										</div>
-										<div class="flex flex-wrap gap-1">
+										<div class="flex items-center flex-wrap gap-1">
+											<i class="ri-links-line text-blue-500 text-sm mr-1"></i>
 											{{ range $issue := $groupedPiece.IssueRefs }}
 												<a
 													href="/{{- $issue.When -}}/{{- $issue.Nr -}}{{- if $issue.Von -}}{{- if $issue.Beilage -}}#beilage-{{ $issue.Beilage }}-page-{{ $issue.Von }}{{- else -}}#page-{{ $issue.Von }}{{- end -}}{{- end -}}"
@@ -67,28 +72,33 @@
 				<h3 class="text-base font-semibold text-slate-800">Beilage</h3>
 			</div>
 			{{ range  $page := $model.AdditionalPieces.Pages }}
-				<div class="mb-4 first:mb-0">
-					<div class="flex items-center gap-2 mb-3 pb-2 border-b border-slate-200">
-						<i class="ri-file-text-line text-amber-600 text-sm"></i>
-						{{ $pageItems := (index $model.AdditionalPieces.Items $page) }}
-						{{ $maxEndPage := $page }}
-						{{ range $groupedPiece := $pageItems }}{{ if gt $groupedPiece.EndPage $maxEndPage }}{{ $maxEndPage = $groupedPiece.EndPage }}{{ end }}{{ end }}
-						<span class="page-number-inhalts font-bold text-slate-700 bg-amber-50 px-2 py-1 rounded text-xs transition-colors duration-200" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</span>
+				<div class="mb-6 first:mb-0 pl-4 border-l-4 border-amber-400" data-page-container="{{ $page }}" data-beilage="true">
+					<div class="flex items-center justify-between gap-2 mb-2">
+						<div class="flex items-center gap-2">
+							<i class="ri-file-text-line text-amber-600 text-sm"></i>
+							{{ $pageItems := (index $model.AdditionalPieces.Items $page) }}
+							{{ $maxEndPage := $page }}
+							{{ range $groupedPiece := $pageItems }}{{ if gt $groupedPiece.EndPage $maxEndPage }}{{ $maxEndPage = $groupedPiece.EndPage }}{{ end }}{{ end }}
+							<a href="#beilage-1-page-{{ $page }}" class="page-number-inhalts font-bold text-slate-700 bg-amber-50 px-2 py-1 rounded text-xs transition-colors duration-200 hover:bg-amber-100 no-underline" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</a>
+						</div>
+						<button class="page-permalink-btn text-slate-400 hover:text-amber-600 text-xs p-1 rounded hover:bg-amber-50 transition-colors duration-200" 
+								title="Link zu dieser Seite kopieren" 
+								onclick="copyPagePermalink('{{ $page }}', this, true)"
+								data-page="{{ $page }}" data-beilage="true">
+							<i class="ri-link text-sm"></i>
+						</button>
 					</div>
-					<div class="space-y-3">
+					<div class="space-y-1">
 						{{ range $groupedPiece := (index $model.AdditionalPieces.Items $page) }}
-						<div class="inhalts-entry py-2 px-3 bg-slate-50 rounded hover:bg-slate-100 transition-colors duration-200" data-page="{{ $page }}">
+						<div class="inhalts-entry py-2 px-0 bg-slate-50 rounded hover:bg-slate-100 transition-colors duration-200" data-page="{{ $page }}">
 							{{ template "_inhaltsverzeichnis_eintrag" $groupedPiece.PieceByIssue }}
 
 
 								<!-- Links zu anderen Teilen: -->
 								{{ if and (not $groupedPiece.PieceByIssue.IsContinuation) (gt (len $groupedPiece.IssueRefs) 1) }}
 									<div class="mt-1 pt-1 border-t border-slate-100">
-										<div class="flex items-center gap-2 mb-0.5">
-											<i class="ri-links-line text-blue-500 text-sm"></i>
-											<span class="text-sm font-medium text-slate-600">{{ len $groupedPiece.IssueRefs }} Teile:</span>
-										</div>
-										<div class="flex flex-wrap gap-1">
+										<div class="flex items-center flex-wrap gap-1">
+											<i class="ri-links-line text-blue-500 text-sm mr-1"></i>
 											{{ range $issue := $groupedPiece.IssueRefs }}
 												<a
 													href="/{{- $issue.When -}}/{{- $issue.Nr -}}{{- if $issue.Von -}}{{- if $issue.Beilage -}}#beilage-{{ $issue.Beilage }}-page-{{ $issue.Von }}{{- else -}}#page-{{ $issue.Von }}{{- end -}}{{- end -}}"

views/routes/ausgabe/components/_inhaltsverzeichnis_eintrag.gohtml

@@ -132,15 +132,15 @@
 	{{- range $agentref := $piece.AgentRefs -}}
 		{{- if (or (eq $agentref.Category "") (eq $agentref.Category "autor")) -}}
 			{{- $agent := GetAgent $agentref.Ref -}}
-			{{- if gt (len $agent.Names) 0 -}}
-				{{ Safe $fortsPrefix }}<a href="/akteure/{{ $agentref.Ref }}" class="author-link">{{ index $agent.Names 0 }}</a>{{ if $workTitle }}, Rezension: <em>{{ $workTitle }}</em>{{ if $workAuthorName }} von <a href="/akteure/{{ $workAuthorID }}" class="author-link">{{ $workAuthorName }}</a>{{ end }}{{ else if $title }}, Rezension: <em>{{ $title }}</em>{{ else }}, Rezension{{ end }}{{ if $place }} ({{ $place }}){{ end }}
+			{{- if and $agent (gt (len $agent.Names) 0) -}}
+				{{ Safe $fortsPrefix }}<a href="/akteure/{{ $agentref.Ref }}" class="author-link">{{ index $agent.Names 0 }}</a>{{ if $workTitle }}, Rezension: <em>{{ $workTitle }}</em>{{ if $workAuthorName }}{{ if $workAuthorID }} von <a href="/akteure/{{ $workAuthorID }}" class="author-link">{{ $workAuthorName }}</a>{{ else }} von {{ $workAuthorName }}{{ end }}{{ end }}{{ else if $title }}, Rezension: <em>{{ $title }}</em>{{ else }}, Rezension{{ end }}{{ if $place }} ({{ $place }}){{ end }}
 				{{- $authorFound = true -}}
 				{{- break -}}
 			{{- end -}}
 		{{- end -}}
 	{{- end -}}
 	{{- if not $authorFound -}}
-		{{ Safe $fortsPrefix }}Rezension{{ if $workTitle }}: <em>{{ $workTitle }}</em>{{ if $workAuthorName }} von <a href="/akteure/{{ $workAuthorID }}" class="author-link">{{ $workAuthorName }}</a>{{ end }}{{ else if $title }}: <em>{{ $title }}</em>{{ end }}{{ if $place }} ({{ $place }}){{ end }}
+		{{ Safe $fortsPrefix }}Rezension{{ if $workTitle }}: <em>{{ $workTitle }}</em>{{ if $workAuthorName }}{{ if $workAuthorID }} von <a href="/akteure/{{ $workAuthorID }}" class="author-link">{{ $workAuthorName }}</a>{{ else }} von {{ $workAuthorName }}{{ end }}{{ end }}{{ else if $title }}: <em>{{ $title }}</em>{{ end }}{{ if $place }} ({{ $place }}){{ end }}
 	{{- end -}}
 
 {{- else if $hasWeltnachrichten -}}
@@ -166,7 +166,7 @@
 	{{- range $agentref := $piece.AgentRefs -}}
 		{{- if (or (eq $agentref.Category "") (eq $agentref.Category "autor")) -}}
 			{{- $agent := GetAgent $agentref.Ref -}}
-			{{- if gt (len $agent.Names) 0 -}}
+			{{- if and $agent (gt (len $agent.Names) 0) -}}
 				<a href="/akteure/{{ $agentref.Ref }}" class="author-link">{{ index $agent.Names 0 }}</a>, {{ if $hasKommentar }}Gedicht mit Kommentar{{ else if $hasUebersetzung }}Gedichtübersetzung{{ else if $hasGelehrteNachrichten }}Gedicht zu gelehrten Angelegenheiten{{ else }}Gedicht{{ end }}{{ if $title }}: <em>„{{ $title }}"</em>{{ end }}
 				{{- $authorFound = true -}}
 				{{- break -}}
@@ -185,7 +185,7 @@
 	{{- range $agentref := $piece.AgentRefs -}}
 		{{- if (or (eq $agentref.Category "") (eq $agentref.Category "autor")) -}}
 			{{- $agent := GetAgent $agentref.Ref -}}
-			{{- if gt (len $agent.Names) 0 -}}
+			{{- if and $agent (gt (len $agent.Names) 0) -}}
 				{{ Safe $fortsPrefix }}<a href="/akteure/{{ $agentref.Ref }}" class="author-link">{{ index $agent.Names 0 }}</a>, {{ if $hasReplik }}Erwiderung{{ else if $hasUebersetzung }}Übersetzung{{ else if $hasNachruf }}Nachruf{{ else if $hasKommentar }}Kommentar{{ else if $hasRezepte }}Rezepte und Anleitungen{{ else }}Aufsatz{{ end }}{{ if $title }}: <em>„{{ $title }}"</em>{{ end }}
 				{{- $authorFound = true -}}
 				{{- break -}}
@@ -204,7 +204,7 @@
 	{{- range $agentref := $piece.AgentRefs -}}
 		{{- if (or (eq $agentref.Category "") (eq $agentref.Category "autor")) -}}
 			{{- $agent := GetAgent $agentref.Ref -}}
-			{{- if gt (len $agent.Names) 0 -}}
+			{{- if and $agent (gt (len $agent.Names) 0) -}}
 				{{ Safe $fortsPrefix }}<a href="/akteure/{{ $agentref.Ref }}" class="author-link">{{ index $agent.Names 0 }}</a>, Theaterkritik{{ if $workTitle }} zu <em>{{ $workTitle }}</em>{{ if $workAuthorName }} von <a href="/akteure/{{ $workAuthorID }}" class="author-link">{{ $workAuthorName }}</a>{{ end }}{{ else if $title }} zu <em>{{ $title }}</em>{{ end }}{{ if $place }} ({{ $place }}){{ end }}
 				{{- $authorFound = true -}}
 				{{- break -}}
@@ -222,7 +222,7 @@
 	{{ Safe $fortsPrefix }}{{ if $hasKommentar }}{{ if $hasNachtrag }}Ergänzender Kommentar{{ else }}Redaktioneller Kommentar{{ end }}{{ else if $hasReplik }}Redaktionelle Stellungnahme{{ else }}Anmerkung der Redaktion{{ end }}{{ if $title }}: <em>{{ $title }}</em>{{ end }}
 
 {{- else if $hasBrief -}}
-	{{ Safe $fortsPrefix }}{{ if $hasNachruf }}Kondolenzbrief{{ else }}Leserbrief{{ end }}{{- $authorFound := false -}}{{- range $agentref := $piece.AgentRefs -}}{{- if (or (eq $agentref.Category "") (eq $agentref.Category "autor")) -}}{{- $agent := GetAgent $agentref.Ref -}}{{- if gt (len $agent.Names) 0 -}} von <a href="/akteure/{{ $agentref.Ref }}" class="author-link">{{ index $agent.Names 0 }}</a>{{- $authorFound = true -}}{{- break -}}{{- end -}}{{- end -}}{{- end -}}{{ if $place }} aus {{ $place }}{{ end }}
+	{{ Safe $fortsPrefix }}{{ if $hasNachruf }}Kondolenzbrief{{ else }}Leserbrief{{ end }}{{- $authorFound := false -}}{{- range $agentref := $piece.AgentRefs -}}{{- if (or (eq $agentref.Category "") (eq $agentref.Category "autor")) -}}{{- $agent := GetAgent $agentref.Ref -}}{{- if and $agent (gt (len $agent.Names) 0) -}} von <a href="/akteure/{{ $agentref.Ref }}" class="author-link">{{ index $agent.Names 0 }}</a>{{- $authorFound = true -}}{{- break -}}{{- end -}}{{- end -}}{{- end -}}{{ if $place }} aus {{ $place }}{{ end }}
 
 {{- else if $hasDesertionsliste -}}
 	{{ Safe $fortsPrefix }}Desertionsliste{{ if $place }} für {{ $place }}{{ end }}
@@ -238,7 +238,7 @@
 	{{- range $agentref := $piece.AgentRefs -}}
 		{{- if (or (eq $agentref.Category "") (eq $agentref.Category "autor")) -}}
 			{{- $agent := GetAgent $agentref.Ref -}}
-			{{- if gt (len $agent.Names) 0 -}}
+			{{- if and $agent (gt (len $agent.Names) 0) -}}
 				{{ Safe $fortsPrefix }}<a href="/akteure/{{ $agentref.Ref }}" class="author-link">{{ index $agent.Names 0 }}</a>, {{ if $hasUebersetzung }}Übersetzung einer Erzählung{{ else }}Erzählung{{ end }}{{ if $title }}: <em>„{{ $title }}"</em>{{ end }}
 				{{- $authorFound = true -}}
 				{{- break -}}
@@ -269,7 +269,7 @@
 	{{- range $agentref := $piece.AgentRefs -}}
 		{{- if (or (eq $agentref.Category "") (eq $agentref.Category "autor")) -}}
 			{{- $agent := GetAgent $agentref.Ref -}}
-			{{- if gt (len $agent.Names) 0 -}}
+			{{- if and $agent (gt (len $agent.Names) 0) -}}
 				{{ Safe $fortsPrefix }}<a href="/akteure/{{ $agentref.Ref }}" class="author-link">{{ index $agent.Names 0 }}</a>{{ if $title }}: <em>{{ $title }}</em>{{ end }}{{ if $workTitle }}{{ if $title }} aus {{ end }}<em>{{ $workTitle }}</em>{{ if $workAuthorName }} von <a href="/akteure/{{ $workAuthorID }}" class="author-link">{{ $workAuthorName }}</a>{{ end }}{{ end }}
 				{{- $authorFound = true -}}
 				{{- break -}}

views/routes/ausgabe/components/_newspaper_layout.gohtml

@@ -37,7 +37,7 @@
 				{{ $middlePage1 := index $pages 1 }}
 				{{ $middlePage2 := index $pages 2 }}
 				{{ if and $middlePage1.Available $middlePage2.Available }}
-				<div class="newspaper-page-container" id="page-{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}">
+				<div class="newspaper-page-container" id="page-{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}" data-pages="{{ $middlePage1.PageNumber }},{{ $middlePage2.PageNumber }}">
 					<div class="mb-3">
 						<div class="flex items-center gap-2 mb-2">
 							<i class="ri-file-copy-2-line text-blue-600"></i>
@@ -106,7 +106,7 @@
 					<div class="mb-3">
 						<div class="flex items-center gap-2 mb-2">
 							<i class="ri-file-image-line text-amber-600"></i>
-<span class="page-indicator page-number-inhalts text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $firstPage.PageNumber }}" data-page-number="{{ $firstPage.PageNumber }}">{{ $firstPage.PageNumber }}</span>
+<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $firstPage.PageNumber }}">{{ $firstPage.PageNumber }}</span>
 						</div>
 					</div>
 <div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
@@ -126,7 +126,7 @@
 				{{ $middlePage1 := index $beilagePages 1 }}
 				{{ $middlePage2 := index $beilagePages 2 }}
 				{{ if and $middlePage1.Available $middlePage2.Available }}
-				<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}">
+				<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}" data-pages="{{ $middlePage1.PageNumber }},{{ $middlePage2.PageNumber }}">
 					<div class="mb-3">
 						<div class="flex items-center gap-2 mb-2">
 							<i class="ri-file-copy-2-line text-amber-600 text-sm"></i>
@@ -379,21 +379,65 @@ function markCurrentPageInInhaltsverzeichnis(pageNumber) {
 }
 
 function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
+	console.log('markCurrentPagesInInhaltsverzeichnis called with:', pageNumbers);
+	
+	// Reset all page container borders to default
+	document.querySelectorAll('[data-page-container]').forEach(container => {
+		if (container.hasAttribute('data-beilage')) {
+			container.classList.remove('border-red-500');
+			container.classList.add('border-amber-400');
+		} else {
+			container.classList.remove('border-red-500');
+			container.classList.add('border-slate-300');
+		}
+	});
+	
 	// Reset all page numbers in Inhaltsverzeichnis
 	document.querySelectorAll('.page-number-inhalts').forEach(pageNum => {
 		pageNum.classList.remove('text-red-600', 'font-bold');
 		pageNum.classList.add('text-slate-700', 'font-semibold');
+		pageNum.style.textDecoration = '';
+		pageNum.style.pointerEvents = '';
+		// Restore hover effects
+		if (pageNum.classList.contains('bg-blue-50')) {
+			pageNum.classList.add('hover:bg-blue-100');
+		} else if (pageNum.classList.contains('bg-amber-50')) {
+			pageNum.classList.add('hover:bg-amber-100');
+		}
 		// Keep original background colors
 		if (!pageNum.classList.contains('bg-amber-50') && !pageNum.classList.contains('bg-blue-50')) {
 			pageNum.classList.add('bg-blue-50');
 		}
 	});
 
+	// Reset all containers and links in Inhaltsverzeichnis
+	document.querySelectorAll('.inhalts-entry').forEach(container => {
+		container.classList.add('hover:bg-slate-100');
+		container.style.cursor = '';
+	});
+	
+	document.querySelectorAll('.inhalts-entry .author-link').forEach(link => {
+		link.style.textDecoration = '';
+		link.style.pointerEvents = '';
+		link.classList.remove('no-underline');
+	});
+	
+	document.querySelectorAll('.inhalts-entry a[href*="/"]').forEach(link => {
+		link.style.textDecoration = '';
+		link.style.pointerEvents = '';
+		link.classList.remove('no-underline');
+		if (link.classList.contains('bg-blue-50')) {
+			link.classList.add('hover:bg-blue-100');
+		}
+	});
+
 	// Find and highlight the current page numbers
 	const highlightedElements = [];
 	const highlightedRanges = new Set(); // Track which ranges we've already highlighted
 
 	pageNumbers.forEach(pageNumber => {
+		// Convert pageNumber to integer for comparison
+		const currentPageNum = parseInt(pageNumber);
 		// Look for all entries that should be highlighted for this page
 		const allPageNumbers = document.querySelectorAll('.page-number-inhalts');
 
@@ -403,13 +447,50 @@ function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
 			const rangeKey = `${startPage}-${endPage}`;
 
 			// Check if this page falls within this range
-			if (pageNumber >= startPage && pageNumber <= endPage) {
+			if (currentPageNum >= startPage && currentPageNum <= endPage) {
 				// Only highlight this range once, even if multiple visible pages fall within it
 				if (!highlightedRanges.has(rangeKey)) {
-					pageNumElement.classList.remove('text-slate-700');
+					pageNumElement.classList.remove('text-slate-700', 'hover:bg-blue-100', 'hover:bg-amber-100');
 					pageNumElement.classList.add('text-red-600', 'font-bold');
+					pageNumElement.style.textDecoration = 'none';
+					pageNumElement.style.pointerEvents = 'none';
 					highlightedElements.push(pageNumElement);
 					highlightedRanges.add(rangeKey);
+
+					// Highlight the page container's left border
+					const pageContainer = document.querySelector(`[data-page-container="${startPage}"]`);
+					if (pageContainer) {
+						pageContainer.classList.remove('border-slate-300', 'border-amber-400');
+						pageContainer.classList.add('border-red-500');
+					}
+
+					// Also make links in the current article non-clickable and remove hover effects
+					const parentEntry = pageNumElement.closest('.mb-4');
+					if (parentEntry) {
+						// Remove hover effects from the container
+						const entryContainers = parentEntry.querySelectorAll('.inhalts-entry');
+						entryContainers.forEach(container => {
+							container.classList.remove('hover:bg-slate-100');
+							container.style.cursor = 'default';
+						});
+						
+						// Make all links non-clickable and remove underlines
+						parentEntry.querySelectorAll('.author-link').forEach(link => {
+							link.style.textDecoration = 'none';
+							link.style.pointerEvents = 'none';
+							link.classList.add('no-underline');
+						});
+						
+						// Also handle issue reference links
+						parentEntry.querySelectorAll('a[href*="/"]').forEach(link => {
+							if (link.getAttribute('aria-current') === 'page') {
+								link.style.textDecoration = 'none';
+								link.style.pointerEvents = 'none';
+								link.classList.add('no-underline');
+								link.classList.remove('hover:bg-blue-100');
+							}
+						});
+					}
 				}
 			}
 		}
@@ -662,7 +743,6 @@ function shareCurrentPage() {
 			title: document.title,
 			url: currentUrl
 		}).catch(err => {
-			console.log('Error sharing:', err);
 			// Fallback to clipboard
 			copyToClipboard(currentUrl, button);
 		});
@@ -675,11 +755,9 @@ function shareCurrentPage() {
 function copyToClipboard(text, button) {
 	if (navigator.clipboard) {
 		navigator.clipboard.writeText(text).then(() => {
-			// Show temporary notification
-			showNotification('Link kopiert!', 'success', button);
+			showSimplePopup(button, 'Link kopiert!');
 		}).catch(err => {
-			console.error('Failed to copy:', err);
-			showNotification('Kopieren fehlgeschlagen', 'error', button);
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
 		});
 	} else {
 		// Fallback for older browsers
@@ -688,16 +766,17 @@ function copyToClipboard(text, button) {
 		document.body.appendChild(textarea);
 		textarea.select();
 		try {
-			document.execCommand('copy');
-			showNotification('Link kopiert!', 'success', button);
+			const successful = document.execCommand('copy');
+			showSimplePopup(button, successful ? 'Link kopiert!' : 'Kopieren fehlgeschlagen');
 		} catch (err) {
-			console.error('Fallback copy failed:', err);
-			showNotification('Kopieren fehlgeschlagen', 'error', button);
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
+		} finally {
+			document.body.removeChild(textarea);
 		}
-		document.body.removeChild(textarea);
 	}
 }
 
+
 function generateCitation() {
 	const button = document.getElementById('citationBtn');
 
@@ -709,44 +788,175 @@ function generateCitation() {
 	const currentDate = new Date().toLocaleDateString('de-DE');
 	const citation = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${issueInfo}. Digital verfügbar unter: ${currentUrl} (Zugriff: ${currentDate}).`;
 
-	// Copy citation to clipboard
-	copyToClipboard(citation, button);
+	// Copy to clipboard
+	if (navigator.clipboard) {
+		navigator.clipboard.writeText(citation).then(() => {
+			showSimplePopup(button, 'Zitation kopiert!');
+		}).catch(err => {
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
+		});
+	} else {
+		// Fallback for older browsers
+		const textarea = document.createElement('textarea');
+		textarea.value = citation;
+		document.body.appendChild(textarea);
+		textarea.select();
+		try {
+			const successful = document.execCommand('copy');
+			showSimplePopup(button, successful ? 'Zitation kopiert!' : 'Kopieren fehlgeschlagen');
+		} catch (err) {
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
+		} finally {
+			document.body.removeChild(textarea);
+		}
+	}
 }
 
-function showNotification(message, type = 'success', button) {
-	// Remove any existing notifications
-	const existingNotification = document.getElementById('notification');
-	if (existingNotification) {
-		existingNotification.remove();
+function showSimplePopup(button, message) {
+	// Remove any existing popup
+	const existingPopup = document.querySelector('.simple-popup');
+	if (existingPopup) {
+		existingPopup.remove();
 	}
 
-	// Create notification element
-	const notification = document.createElement('div');
-	notification.id = 'notification';
-	notification.className = `fixed px-3 py-2 rounded-md text-white text-sm font-medium z-50 transition-opacity duration-300 ${
-		type === 'success' ? 'bg-green-500' : 'bg-red-500'
-	}`;
-	notification.textContent = message;
+	// Create popup element
+	const popup = document.createElement('div');
+	popup.className = 'simple-popup';
+	popup.textContent = message;
+	
+	// Style the popup
+	popup.style.cssText = `
+		position: fixed;
+		background: #374151;
+		color: white;
+		padding: 6px 12px;
+		border-radius: 6px;
+		font-size: 13px;
+		font-weight: 500;
+		z-index: 1000;
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity 0.2s ease;
+		white-space: nowrap;
+	`;
 
-	// Position notification next to button if button is provided
-	if (button) {
-		const buttonRect = button.getBoundingClientRect();
-		notification.style.left = `${buttonRect.left - 80}px`; // Position to the left of button
-		notification.style.top = `${buttonRect.top + buttonRect.height / 2 - 20}px`; // Center vertically with button
-	} else {
-		// Fallback to top-right corner
-		notification.className += ' top-4 right-4';
-	}
+	// Position popup next to button
+	const buttonRect = button.getBoundingClientRect();
+	const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+	const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+	
+	popup.style.left = (buttonRect.left + scrollLeft - 10) + 'px';
+	popup.style.top = (buttonRect.bottom + scrollTop + 8) + 'px';
 
 	// Add to page
-	document.body.appendChild(notification);
+	document.body.appendChild(popup);
 
-	// Auto-remove after 3 seconds
+	// Fade in
 	setTimeout(() => {
-		notification.style.opacity = '0';
+		popup.style.opacity = '1';
+	}, 10);
+
+	// Auto-remove after 2 seconds
+	setTimeout(() => {
+		popup.style.opacity = '0';
 		setTimeout(() => {
-			notification.remove();
-		}, 300);
-	}, 3000);
+			if (popup.parentNode) {
+				popup.remove();
+			}
+		}, 200);
+	}, 2000);
 }
+
+// Handle hash navigation to scroll to specific pages
+function scrollToPageFromHash() {
+	const hash = window.location.hash;
+	let pageNumber = '';
+	let targetContainer = null;
+	
+	if (hash.startsWith('#page-')) {
+		pageNumber = hash.replace('#page-', '');
+		
+		// Try to find exact page container first
+		targetContainer = document.getElementById(`page-${pageNumber}`);
+		
+		// If not found, try to find container that contains this page
+		if (!targetContainer) {
+			// Look for double-spread containers that contain this page
+			const containers = document.querySelectorAll('.newspaper-page-container[data-pages]');
+			for (const container of containers) {
+				const pages = container.getAttribute('data-pages');
+				if (pages && pages.split(',').includes(pageNumber)) {
+					targetContainer = container;
+					break;
+				}
+			}
+		}
+		
+		// If still not found, try beilage containers
+		if (!targetContainer) {
+			targetContainer = document.getElementById(`beilage-1-page-${pageNumber}`) || 
+							 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) {
+		setTimeout(() => {
+			targetContainer.scrollIntoView({
+				behavior: 'smooth',
+				block: 'start'
+			});
+			
+			// Highlight the specific page in the table of contents
+			markCurrentPageInInhaltsverzeichnis(pageNumber);
+		}, 300);
+	}
+}
+
+// Function to copy page permalink
+function copyPagePermalink(pageNumber, button, isBeilage = false) {
+	let pageFragment = '';
+	if (isBeilage) {
+		pageFragment = `#beilage-1-page-${pageNumber}`;
+	} else {
+		pageFragment = `#page-${pageNumber}`;
+	}
+	
+	const currentUrl = window.location.origin + window.location.pathname + pageFragment;
+	
+	// Copy to clipboard
+	if (navigator.clipboard) {
+		navigator.clipboard.writeText(currentUrl).then(() => {
+			showSimplePopup(button, 'Link kopiert!');
+		}).catch(err => {
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
+		});
+	} else {
+		// Fallback for older browsers
+		const textarea = document.createElement('textarea');
+		textarea.value = currentUrl;
+		document.body.appendChild(textarea);
+		textarea.select();
+		try {
+			const successful = document.execCommand('copy');
+			showSimplePopup(button, successful ? 'Link kopiert!' : 'Kopieren fehlgeschlagen');
+		} catch (err) {
+			showSimplePopup(button, 'Kopieren fehlgeschlagen');
+		} finally {
+			document.body.removeChild(textarea);
+		}
+	}
+}
+
+// Initialize hash handling
+document.addEventListener('DOMContentLoaded', scrollToPageFromHash);
+window.addEventListener('hashchange', scrollToPageFromHash);
 </script>

views/routes/ausgabe/components/_title_nav.gohtml

@@ -1,6 +1,6 @@
 {{ $model := .model }}
 {{ $date := .model.Datum.When }}
-<div class="sticky top-4 bg-white border border-slate-200 rounded-lg p-4 mb-6 z-10">
+<div class="sticky top-4 mb-12 z-10">
 	<!-- Header with year link left, nav buttons right -->
 	<div class="flex items-center justify-between mb-3">
 		<a href="/jahrgang/{{- $date.Year -}}"