Knopf nach oben, Bildbetrachter, Rechtszeile als Baustein (Schema v19)

Der Knopf "nach oben" ist ein Anker, kein Skript: er springt an den
Seitenanfang, eingeblendet ueber eine Scroll-Zeitachse. Abschaltbar und
vollstaendig einstellbar - Seite, Form, Groesse, Farben, Schwelle,
Beschriftung.

Bilder lassen sich vergroessern, je Bild waehlbar (nichts / vergroessern
/ Adresse), Galerien mit einem Schalter. Grundlage ist ein gewoehnlicher
Verweis auf die grosse Fassung: ohne JavaScript oeffnet er das Bild, mit
JavaScript einen dialog-Betrachter mit Blaettern, Escape und Pfeiltasten.
Das Skript laedt nur, wo es etwas zu tun hat.

Die Rechtszeile wird ein Baustein und steht damit im Fussbereich statt
als heller Streifen darunter. Die eingebaute Leiste erscheint nur noch,
wenn die Seite den Baustein nicht enthaelt.

Dabei gefunden: zwei Stylesheet-Regeln griffen seit drei
Veroeffentlichungen nicht mehr. Beim Entfernen alter Regeln waren
Selektorreste stehen geblieben, und CSS nimmt dann die naechste Regel
mit - betroffen waren der Einwilligungsdialog und die Rechtszeile. Ein
Test prueft jetzt jede CSS-Datei auf abgebrochene Selektoren.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

public/assets/site.css

@@ -113,8 +113,7 @@ p{hyphens:auto}
    for light backgrounds. Inside a dark tone they won on specificity, so text in a dark column was
    unreadable - 1.87:1 in the seeded footer. These two selectors match that specificity and come
    later, so the dark tone wins where it has to. */
-.tone-ink .block-column .block-text,
-.tone-ink 
+.tone-ink .block-column .block-text{color:#dae3da}
 
 /* The consent question. Fixed to the bottom, but it never covers the whole page: the content
    stays readable while the decision is open, because a wall would make "accept" the only way
@@ -163,10 +162,6 @@ body.consent-open{padding-bottom:260px}
 .site-footer .block-column{border:0;border-radius:0;padding:0}
 .site-header .block-text,
 .site-footer .block-text{margin:0}
-/* Size and weight only, never colour: the tone of the area decides that, and a colour here won
-   against .tone-ink and put 2.24:1 grey text on the dark footer. The browser check caught it. */
-.site-header 
-.site-footer 
 /* One landmark for the three links that must be on every page. Loose text outside a landmark is
    also what axe objects to, and rightly: a screen reader then has no way to skip to it. */
 .legal-bar{padding:16px 20px;text-align:center;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
@@ -338,3 +333,44 @@ body.consent-open{padding-bottom:260px}
 .menu-burger[open]>summary{border-radius:8px 8px 0 0}
 .menu-burger-body{padding:14px 0 4px}
 .menu-burger-body .menu-list{flex-direction:column;align-items:flex-start;gap:8px}
+/* Der Knopf „nach oben". Ein Anker, kein Skript: er springt an den Anfang der Seite, und das
+   kann ein Browser seit jeher allein. Eingeblendet wird er beim Scrollen über eine Scroll-
+   Zeitachse - dieselbe Technik wie bei den Einblendungen. Wo es die nicht gibt (heute noch
+   Safari), steht er von Anfang an da: sichtbar und nutzbar ist besser als unsichtbar.
+   Aussehen, Größe, Form, Seite und Schwelle kommen aus den Einstellungen. */
+.scroll-top{position:fixed;bottom:22px;right:22px;z-index:40;display:grid;place-items:center;width:var(--kant-top-size,48px);height:var(--kant-top-size,48px);border-radius:var(--kant-top-radius,999px);background:var(--kant-top-bg,var(--accent));color:var(--kant-top-ink,#fff);text-decoration:none;box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 28%,transparent);font-size:calc(var(--kant-top-size,48px) / 2.4);line-height:1}
+.scroll-top-links{right:auto;left:22px}
+.scroll-top:hover{filter:brightness(1.08)}
+.scroll-top:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
+@media (max-width:767px){.scroll-top{bottom:16px;right:16px}.scroll-top-links{left:16px;right:auto}}
+/* Solange der Einwilligungsdialog unten steht, würde der Knopf darauf liegen. */
+body.consent-open .scroll-top{display:none}
+@supports (animation-timeline: scroll()){
+    @media (prefers-reduced-motion: no-preference){
+        .scroll-top{animation:kant-scroll-top linear both;animation-timeline:scroll(root);animation-range:var(--kant-top-after,400px) calc(var(--kant-top-after,400px) + 160px)}
+        @keyframes kant-scroll-top{from{opacity:0;visibility:hidden;transform:translateY(10px)}to{opacity:1;visibility:visible;transform:none}}
+    }
+}
+/* Der Bildbetrachter. Die Fläche daneben schließt, das Bild bleibt in seinen Grenzen, und die
+   Bedienknöpfe sind groß genug für einen Daumen. Ohne Skript wird nichts davon gebraucht - dann
+   öffnet der Verweis einfach das große Bild. */
+.block-legal{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
+.block-legal a{color:inherit;text-decoration:none}
+.block-legal a:hover{text-decoration:underline}
+.image-zoom{cursor:zoom-in}
+.zoom-dialog{border:0;padding:0;max-width:min(96vw,1400px);max-height:94vh;background:transparent;color:#fff;overflow:visible}
+.zoom-dialog::backdrop{background:rgba(8,12,20,.88)}
+.zoom-figure{margin:0;display:grid;gap:12px;justify-items:center}
+.zoom-image{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:10px;background:#0c1220}
+.zoom-caption{margin:0;font-size:14px;text-align:center;max-width:70ch;color:#e7ecf3}
+.zoom-close,.zoom-prev,.zoom-next{position:fixed;display:grid;place-items:center;width:52px;height:52px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
+.zoom-close:hover,.zoom-prev:hover,.zoom-next:hover{background:rgba(255,255,255,.26)}
+.zoom-close:focus-visible,.zoom-prev:focus-visible,.zoom-next:focus-visible{outline:3px solid #fff;outline-offset:3px}
+.zoom-close{top:18px;right:18px}
+.zoom-prev{left:18px;top:50%;transform:translateY(-50%)}
+.zoom-next{right:18px;top:50%;transform:translateY(-50%)}
+.zoom-counter{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);margin:0;font-size:13px;color:#e7ecf3}
+@media (max-width:767px){
+    .zoom-close,.zoom-prev,.zoom-next{width:46px;height:46px}
+    .zoom-prev{left:8px}.zoom-next{right:8px}
+}