From c6f5beaa7b5f55f2539f40f30a83a38b0f46c940 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Tue, 2 Jun 2026 01:22:55 +0200
Subject: [PATCH] =?UTF-8?q?ui:=20Zitieren=20zeigt=20Quellenangabe=20sichtb?=
 =?UTF-8?q?ar=20+=20Copy-Fallback=20f=C3=BCr=20HTTP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vorher: stiller clipboard.writeText → tut auf HTTP/LAN nichts (Clipboard-API
nur in sicherem Kontext). Jetzt: Klick klappt ein Panel mit der lesbaren
Quellenangabe auf (user-select:all), „Kopieren" nutzt clipboard-API mit
execCommand-Fallback; schlägt das fehl, wird der Text markiert (manuelles
Strg/⌘+C).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 assets/css/custom.css             | 33 ++++++++++++++++
 layouts/_partials/provenance.html | 63 +++++++++++++++++++++++++------
 2 files changed, 85 insertions(+), 11 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 9f3099c..c0615bb 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1496,3 +1496,36 @@ img:hover { filter: grayscale(0%); }
   cursor: pointer;
 }
 .prov-cite:hover { color: var(--accent); }
+
+/* Aufklappendes Zitat-Panel: zeigt die Quellenangabe lesbar + Kopieren. */
+.prov-citation {
+  margin-top: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-bg-secondary);
+}
+.prov-citation-text {
+  margin: 0 0 0.6em;
+  font-family: var(--font-family-serif);
+  font-size: var(--font-size-small);
+  line-height: 1.5;
+  user-select: all;   /* ein Klick markiert die ganze Angabe */
+}
+.prov-citation-actions { display: flex; align-items: center; gap: 0.8em; }
+.prov-citation-copy {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-small);
+  color: var(--color-text-primary);
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 0.2em 0.7em;
+  cursor: pointer;
+}
+.prov-citation-copy:hover { border-color: var(--accent); color: var(--accent); }
+.prov-citation-status {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-small);
+  color: var(--color-text-muted);
+}
diff --git a/layouts/_partials/provenance.html b/layouts/_partials/provenance.html
index 5a68324..14f6c0e 100644
--- a/layouts/_partials/provenance.html
+++ b/layouts/_partials/provenance.html
@@ -12,26 +12,67 @@
       <span class="prov-sep">·</span>
     {{ end }}
   {{ end }}
-  <button type="button" class="prov-cite"
+  <button type="button" class="prov-cite" aria-expanded="false"
     data-title="{{ .Title }}"
     data-author="{{ $author }}"
     data-url="{{ .Permalink }}"
     {{ with .GitInfo }}data-version="{{ .AbbreviatedHash }}"{{ end }}>Zitieren</button>
 </div>
+<div class="prov-citation" hidden>
+  <p class="prov-citation-text"></p>
+  <div class="prov-citation-actions">
+    <button type="button" class="prov-citation-copy">Kopieren</button>
+    <span class="prov-citation-status" role="status"></span>
+  </div>
+</div>
 <script>
   (function () {
     if (window.__provCite) return; window.__provCite = 1;
-    document.querySelectorAll('.prov-cite').forEach(function (btn) {
-      btn.addEventListener('click', function () {
-        var d = btn.dataset;
-        var today = new Date().toLocaleDateString('de-CH');
-        var v = d.version ? ', Version ' + d.version : '';
-        var cite = d.author + ': ' + d.title + '. OPENBUREAU' + v + '. Abgerufen am ' + today + ', ' + d.url;
-        navigator.clipboard.writeText(cite).then(function () {
-          var t = btn.textContent; btn.textContent = 'Kopiert ✓';
-          setTimeout(function () { btn.textContent = t; }, 1500);
-        }).catch(function () {});
+    var btn = document.querySelector('.prov-cite');
+    var panel = document.querySelector('.prov-citation');
+    if (!btn || !panel) return;
+    var textEl = panel.querySelector('.prov-citation-text');
+    var copyBtn = panel.querySelector('.prov-citation-copy');
+    var statusEl = panel.querySelector('.prov-citation-status');
+
+    var d = btn.dataset;
+    var today = new Date().toLocaleDateString('de-CH');
+    var v = d.version ? ', Version ' + d.version : '';
+    // Format: Autor: Titel. OPENBUREAU, Version xxx. Abgerufen am TT.MM.JJJJ, URL
+    var cite = d.author + ': ' + d.title + '. OPENBUREAU' + v + '. Abgerufen am ' + today + ', ' + d.url;
+    textEl.textContent = cite;
+
+    function selectText() {
+      var r = document.createRange(); r.selectNodeContents(textEl);
+      var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(r);
+    }
+    function copy() {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        return navigator.clipboard.writeText(cite);
+      }
+      // Fallback für unsichere Kontexte (HTTP/LAN): execCommand auf Auswahl.
+      return new Promise(function (resolve, reject) {
+        try {
+          var ta = document.createElement('textarea');
+          ta.value = cite; ta.style.position = 'fixed'; ta.style.opacity = '0';
+          document.body.appendChild(ta); ta.focus(); ta.select();
+          var ok = document.execCommand('copy');
+          document.body.removeChild(ta);
+          ok ? resolve() : reject();
+        } catch (e) { reject(e); }
       });
+    }
+
+    btn.addEventListener('click', function () {
+      var open = panel.hasAttribute('hidden');
+      if (open) { panel.removeAttribute('hidden'); selectText(); }
+      else { panel.setAttribute('hidden', ''); }
+      btn.setAttribute('aria-expanded', String(open));
+    });
+    copyBtn.addEventListener('click', function () {
+      copy().then(function () { statusEl.textContent = 'Kopiert ✓'; })
+            .catch(function () { statusEl.textContent = 'Markiert — bitte mit Strg/⌘+C kopieren.'; selectText(); });
+      setTimeout(function () { statusEl.textContent = ''; }, 3000);
     });
   })();
 </script>