feat(tops): Taler Operations design previews (ng1–ng3)

Static previews on ports 9090–9092: DD 90 branding (Montserrat, #0042B3, logo), FINMA sticky, no taler-ops-www build. ng1 landing, ng2 step/amount sliders + tabs, ng3 classic mirror. Podman nginx, bin/up.sh, Caddy snippet, /CHANGES notes for current site only.
2026-07-10 17:36:51 +02:00 · 2026-07-10 17:36:51 +02:00 · f821dc0eb4
commit f821dc0eb4
parent 497bc1243d
16 changed files with 1593 additions and 0 deletions
--- a/configs/taler-ops-ng/README.md
+++ b/configs/taler-ops-ng/README.md
@ -0,0 +1,121 @@
+# Taler Operations WWW — design previews (koopa)
+
+Experimental **static** previews for a redesign of [taler-ops.ch](https://taler-ops.ch/).  
+Content is inspired by **`taler-ops-www`** (`git.taler.net/taler-ops-www`).
+
+## Source branches (`taler-ops-www`)
+
+| Branch | Meaning |
+|--------|---------|
+| **`stable`** | **Stable website** (classic production-oriented tree) |
+| **`master`** | Ongoing development |
+
+This preview stack **does not build** `taler-ops-www` (Jinja/Parcel).  
+If the upstream tree is old, incomplete, or fails to build — **we do not build it**.  
+- **ng1 / ng2**: hand-crafted static HTML in this repo  
+- **ng3**: optional **HTTP mirror** of live classic site (or a tiny fallback page)
+
+## Ports (9090+)
+
+| Host | Variant | Port | Container |
+|------|---------|------|-----------|
+| `tops.ng1.hacktivism.ch` | Taler DD 90 branding (Montserrat, `#0042B3`) | **9090** | `koopa-tops-ng1` |
+| `tops.ng2.hacktivism.ch` | DD 90 + step/amount sliders | **9091** | `koopa-tops-ng2` |
+| `tops.ng3.hacktivism.ch` | Classic / stable-era look | **9092** | `koopa-tops-ng3` |
+
+## FINMA
+
+ng1 and ng2 keep a **sticky, always-visible** FINMA disclaimer (not supervised by FINMA; escrow not deposit-insured; segregated account).  
+ng3 uses the classic site wording when mirrored, or the same disclaimer on the fallback page.
+
+## Deploy on koopa
+
+Copy this tree to the host, then run the script (rootless podman as `hernani`):
+
+```bash
+# from your laptop (example)
+scp -r configs/taler-ops-ng hernani@koopa:~/koopa-tops
+
+# on koopa
+cd ~/koopa-tops
+chmod +x bin/up.sh
+./bin/up.sh                 # start :9090 :9091 :9092
+./bin/up.sh status
+./bin/up.sh --refresh-classic   # re-mirror live taler-ops.ch → ng3 (no build)
+./bin/up.sh down
+```
+
+Smoke without Caddy:
+
+```bash
+curl -sS -o /dev/null -w "%{http_code}\n" http://127.0.0.1:9090/
+curl -sS -o /dev/null -w "%{http_code}\n" http://127.0.0.1:9091/
+curl -sS -o /dev/null -w "%{http_code}\n" http://127.0.0.1:9092/
+```
+
+## Caddy (host)
+
+Snippet: `deploy/Caddyfile.snippet`
+
+```caddy
+# 9090 tops ng1 | 9091 tops ng2 | 9092 tops ng3
+
+tops.ng1.hacktivism.ch {
+	header Alt-Svc "clear"
+	reverse_proxy 127.0.0.1:9090 {
+		header_up Host {host}
+		header_up X-Forwarded-For {remote_host}
+		header_up X-Forwarded-Proto {scheme}
+	}
+}
+
+tops.ng2.hacktivism.ch {
+	header Alt-Svc "clear"
+	reverse_proxy 127.0.0.1:9091 {
+		header_up Host {host}
+		header_up X-Forwarded-For {remote_host}
+		header_up X-Forwarded-Proto {scheme}
+	}
+}
+
+tops.ng3.hacktivism.ch {
+	header Alt-Svc "clear"
+	reverse_proxy 127.0.0.1:9092 {
+		header_up Host {host}
+		header_up X-Forwarded-For {remote_host}
+		header_up X-Forwarded-Proto {scheme}
+	}
+}
+```
+
+Also add the three hostnames to the existing HTTP→HTTPS redirect site list, then:
+
+```bash
+sudo caddy validate --config /etc/caddy/Caddyfile
+sudo systemctl reload caddy
+```
+
+DNS: `tops.ng1`, `tops.ng2`, `tops.ng3` under `hacktivism.ch` → koopa (same as other public vhosts).
+
+## Layout
+
+```
+configs/taler-ops-ng/
+  README.md                 ← this file
+  bin/up.sh                 ← run on koopa
+  deploy/compose.yml        ← podman compose
+  deploy/Caddyfile.snippet
+  ng1/index.html            ← design preview
+  ng1/CHANGES/index.html    ← /CHANGES
+  ng2/… · ng3/…             ← same; ng3 also mirror/fallback
+```
+
+## /CHANGES
+
+Each preview serves a short change log at **`/CHANGES/`** (ng1, ng2, ng3).
+
+## Design notes
+
+- **ng1**: GNU Taler branding per [DD 90](https://docs.taler.net/design-documents/090-branding.html) / [DD 66](https://docs.taler.net/design-documents/066-wallet-color-scheme.html) (Montserrat, primary `#0042B3`, official logo).  
+- **ng2**: same DD 90 tokens as ng1; step carousel + amount range slider + topic tabs.  
+- **ng3**: classic production look via mirror; no Parcel/Jinja build pipeline.
--- a/configs/taler-ops-ng/bin/up.sh
+++ b/configs/taler-ops-ng/bin/up.sh
@ -0,0 +1,190 @@
+#!/usr/bin/env bash
+# Install / refresh Taler Operations design previews on koopa.
+# Ports: 9090 (ng1), 9091 (ng2), 9092 (ng3 classic).
+#
+# Run ON koopa as hernani (rootless podman):
+#   ~/koopa-tops/bin/up.sh
+#   ~/koopa-tops/bin/up.sh --refresh-classic   # re-mirror taler-ops.ch into ng3
+#   ~/koopa-tops/bin/up.sh --down
+#
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+cd "$ROOT"
+
+COMPOSE=(podman compose -f deploy/compose.yml)
+# older podman-compose fallback
+if ! podman compose version >/dev/null 2>&1; then
+  if command -v podman-compose >/dev/null 2>&1; then
+    COMPOSE=(podman-compose -f deploy/compose.yml)
+  fi
+fi
+
+log() { printf '[tops] %s\n' "$*"; }
+
+ensure_dirs() {
+  mkdir -p ng1 ng2 ng3
+  if [ ! -f ng1/index.html ]; then
+    log "ERROR: ng1/index.html missing — copy configs/taler-ops-ng from koopa-admin-log first"
+    exit 1
+  fi
+  if [ ! -f ng2/index.html ]; then
+    log "ERROR: ng2/index.html missing"
+    exit 1
+  fi
+  # nginx container user must read bind mounts
+  chmod -R a+rX ng1 ng2 ng3 2>/dev/null || true
+}
+
+# Classic / stable-era site: HTTP mirror of production only.
+# Do NOT build taler-ops-www (Jinja/Parcel) — if upstream is old/broken, we skip builds.
+# Branch note: git.taler.net/taler-ops-www **stable** = stable website source; master = dev.
+mirror_classic() {
+  log "mirroring classic site → ng3/ (from https://taler-ops.ch/) — no source build"
+  log "taler-ops-www: branch 'stable' = stable site; we never run make/parcel here"
+  local tmp
+  tmp=$(mktemp -d)
+  # shellcheck disable=SC2064
+  trap "rm -rf '$tmp'" RETURN
+
+  if command -v wget >/dev/null 2>&1; then
+    wget -q -r -np -nH --cut-dirs=0 -E -p -k \
+      --directory-prefix="$tmp" \
+      --domains=taler-ops.ch \
+      --timeout=20 --tries=2 \
+      https://taler-ops.ch/en/index.html \
+      https://taler-ops.ch/de/index.html \
+      https://taler-ops.ch/fr/index.html \
+      2>/dev/null || true
+    # flatten: prefer mirrored en as index if present
+    if [ -d "$tmp" ]; then
+      rm -rf ng3/*
+      # wget often creates host dir
+      if [ -d "$tmp/taler-ops.ch" ]; then
+        cp -a "$tmp/taler-ops.ch/." ng3/ 2>/dev/null || true
+      else
+        cp -a "$tmp/." ng3/ 2>/dev/null || true
+      fi
+    fi
+  fi
+
+  # Fallback / ensure something serves if mirror thin
+  if [ ! -f ng3/index.html ] && [ ! -f ng3/en/index.html ]; then
+    log "mirror incomplete — writing ng3 fallback index (points at live + FINMA text)"
+    cat >ng3/index.html <<'HTML'
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Taler Operations · classic (ng3)</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; }
+    .finma { position: sticky; top: 0; background: #1a0508; color: #ffe8ec; border-bottom: 3px solid #ff4d6a;
+      padding: 0.6rem 0.75rem; font-size: 0.85rem; font-weight: 600; margin: -2rem -1rem 1.5rem; }
+    a { color: #04c; }
+  </style>
+</head>
+<body>
+  <aside class="finma" role="note">
+    <strong>FINMA legal notice:</strong>
+    Taler Operations AG operates the Taler payment system in Switzerland.
+    Taler Operations is <strong>not supervised by FINMA</strong>.
+    Escrowed customer assets are not subject to deposit insurance but held in a segregated bank account.
+  </aside>
+  <h1>Classic site (ng3)</h1>
+  <p>
+    This preview is meant to serve the <strong>stable / classic</strong> Taler Operations website.
+    Source: <code>taler-ops-www</code> branch <code>stable</code>; production:
+    <a href="https://taler-ops.ch/">https://taler-ops.ch/</a>
+  </p>
+  <p>Mirror failed on this host — open production for the full classic UI, or re-run
+    <code>./bin/up.sh --refresh-classic</code> with network + wget.</p>
+  <p><a href="https://taler-ops.ch/en/">→ Open live classic EN</a></p>
+</body>
+</html>
+HTML
+  elif [ -f ng3/en/index.html ] && [ ! -f ng3/index.html ]; then
+    # convenience root redirect
+    cat >ng3/index.html <<'HTML'
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta charset="utf-8" /><meta http-equiv="refresh" content="0;url=en/index.html" />
+<title>Redirect</title></head>
+<body><p><a href="en/index.html">English</a></p></body></html>
+HTML
+  fi
+  # keep /CHANGES even after mirror wipe
+  if [ -f deploy/CHANGES-ng3.html ]; then
+    mkdir -p ng3/CHANGES
+    cp -f deploy/CHANGES-ng3.html ng3/CHANGES/index.html
+  elif [ -f ng3/CHANGES/index.html ]; then
+    :
+  else
+    mkdir -p ng3/CHANGES
+    # minimal fallback if repo copy missing
+    printf '%s\n' '<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"/><title>CHANGES ng3</title></head><body><h1>CHANGES ng3</h1><p>Classic mirror. FINMA disclaimer on main site. Branch stable = stable website. Port 9092.</p><p><a href="/">Home</a></p></body></html>' >ng3/CHANGES/index.html
+  fi
+  chmod -R a+rX ng3 2>/dev/null || true
+  log "ng3 ready ($(du -sh ng3 | awk '{print $1}'))"
+}
+
+cmd_up() {
+  ensure_dirs
+  if [ ! -f ng3/index.html ] && [ ! -f ng3/en/index.html ]; then
+    mirror_classic
+  fi
+  log "pulling nginx image…"
+  podman pull docker.io/library/nginx:1.27-alpine
+  log "starting containers on :9090 :9091 :9092 …"
+  "${COMPOSE[@]}" up -d --force-recreate
+  sleep 1
+  cmd_status
+  cat <<'EOF'
+
+=== Caddy (on host) ===
+Add vhosts from deploy/Caddyfile.snippet then:
+  sudo caddy validate --config /etc/caddy/Caddyfile
+  sudo systemctl reload caddy   # or however you reload
+
+DNS: tops.ng1/ng2/ng3.hacktivism.ch → this host
+
+Local smoke (no Caddy):
+  curl -sS -o /dev/null -w "%{http_code}\n" http://127.0.0.1:9090/
+  curl -sS -o /dev/null -w "%{http_code}\n" http://127.0.0.1:9091/
+  curl -sS -o /dev/null -w "%{http_code}\n" http://127.0.0.1:9092/
+EOF
+}
+
+cmd_down() {
+  log "stopping…"
+  "${COMPOSE[@]}" down || true
+}
+
+cmd_status() {
+  podman ps --filter name=koopa-tops --format 'table {{.Names}}\t{{.Status}}\t{{.Ports}}' || true
+  for p in 9090 9091 9092; do
+    code=$(curl -sS -m 3 -o /dev/null -w '%{http_code}' "http://127.0.0.1:${p}/" 2>/dev/null || echo fail)
+    log "port $p → HTTP $code"
+  done
+}
+
+cmd_refresh_classic() {
+  mirror_classic
+  "${COMPOSE[@]}" up -d --force-recreate tops-ng3
+  cmd_status
+}
+
+case "${1:-up}" in
+  up|start) cmd_up ;;
+  down|stop) cmd_down ;;
+  status|ps) cmd_status ;;
+  --refresh-classic|refresh-classic) cmd_refresh_classic ;;
+  -h|--help)
+    sed -n '2,12p' "$0" | sed 's/^# \?//'
+    ;;
+  *)
+    log "unknown arg: $1 (try up|down|status|--refresh-classic)"
+    exit 2
+    ;;
+esac
--- a/configs/taler-ops-ng/deploy/CHANGES-ng3.html
+++ b/configs/taler-ops-ng/deploy/CHANGES-ng3.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Notiz · tops.ng3</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 36rem; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; color: #111; }
+    h1 { font-size: 1.25rem; margin: 0 0 0.75rem; }
+    h2 { font-size: 0.95rem; margin: 1.25rem 0 0.4rem; }
+    ul { padding-left: 1.2rem; margin: 0.3rem 0; }
+    li { margin: 0.25rem 0; }
+    code { background: #f3f3f3; padding: 0.05em 0.3em; border-radius: 3px; font-size: 0.9em; }
+    a { color: #04c; }
+    .meta { color: #666; font-size: 0.85rem; margin-bottom: 1.25rem; }
+    .finma { background: #1a0508; color: #ffe8ec; border-bottom: 3px solid #ff4d6a; padding: 0.55rem 0.75rem; font-size: 0.8rem; font-weight: 600; margin: -2rem -1rem 1.25rem; }
+  </style>
+</head>
+<body>
+  <aside class="finma" role="note">
+    <strong>FINMA:</strong> Taler Operations is not supervised by FINMA.
+    Escrow not deposit-insured; segregated bank account.
+  </aside>
+  <p class="meta"><a href="/">← Start</a> · tops.ng3 · Port 9092</p>
+  <h1>Diese Seite</h1>
+
+  <h2>Inhalt</h2>
+  <ul>
+    <li>Klassische Taler-Operations-Website (Spiegel von <a href="https://taler-ops.ch/">taler-ops.ch</a> oder Fallback-HTML)</li>
+    <li>Kein Build von <code>taler-ops-www</code> — nur HTTP-Mirror / Fallback</li>
+  </ul>
+
+  <h2>Auslieferung (aktuell)</h2>
+  <ul>
+    <li><code>nginx:1.27-alpine</code>, rootless Podman · <code>bin/up.sh</code> (+ optional <code>--refresh-classic</code>)</li>
+    <li>Caddy: <code>reverse_proxy</code> → <code>127.0.0.1:9092</code></li>
+  </ul>
+</body>
+</html>
--- a/configs/taler-ops-ng/deploy/Caddyfile.snippet
+++ b/configs/taler-ops-ng/deploy/Caddyfile.snippet
@ -0,0 +1,36 @@
+# Paste into host Caddyfile (/etc/caddy/Caddyfile) and reload Caddy.
+# Ports: 9090 ng1 | 9091 ng2 | 9092 ng3
+# DNS: tops.ng{1,2,3}.hacktivism.ch → koopa (same as other *.hacktivism.ch)
+
+# --- comment at top of Caddyfile port map ---
+# 9090 tops ng1 | 9091 tops ng2 | 9092 tops ng3
+
+tops.ng1.hacktivism.ch {
+	header Alt-Svc "clear"
+	reverse_proxy 127.0.0.1:9090 {
+		header_up Host {host}
+		header_up X-Forwarded-For {remote_host}
+		header_up X-Forwarded-Proto {scheme}
+	}
+}
+
+tops.ng2.hacktivism.ch {
+	header Alt-Svc "clear"
+	reverse_proxy 127.0.0.1:9091 {
+		header_up Host {host}
+		header_up X-Forwarded-For {remote_host}
+		header_up X-Forwarded-Proto {scheme}
+	}
+}
+
+tops.ng3.hacktivism.ch {
+	header Alt-Svc "clear"
+	reverse_proxy 127.0.0.1:9092 {
+		header_up Host {host}
+		header_up X-Forwarded-For {remote_host}
+		header_up X-Forwarded-Proto {scheme}
+	}
+}
+
+# Also add these hosts to the existing HTTP→HTTPS redirect block, e.g.:
+# http://..., http://tops.ng1.hacktivism.ch, http://tops.ng2.hacktivism.ch, http://tops.ng3.hacktivism.ch {
--- a/configs/taler-ops-ng/deploy/compose.yml
+++ b/configs/taler-ops-ng/deploy/compose.yml
@ -0,0 +1,63 @@
+# Taler Operations design previews — host ports 9090+
+# tops.ng1 → 9090 | tops.ng2 → 9091 | tops.ng3 → 9092
+#
+# Usage (on koopa):
+#   cd ~/koopa-tops && ./bin/up.sh
+
+services:
+  tops-ng1:
+    image: docker.io/library/nginx:1.27-alpine
+    container_name: koopa-tops-ng1
+    restart: unless-stopped
+    ports:
+      - "9090:80"
+    volumes:
+      - ../ng1:/usr/share/nginx/html:ro
+    labels:
+      org.hacktivism.service: tops-ng1
+      org.hacktivism.host_port: "9090"
+      org.hacktivism.site: tops.ng1.hacktivism.ch
+      org.hacktivism.managed_by: koopa-admin
+    healthcheck:
+      test: ["CMD", "wget", "-q", "-O", "/dev/null", "http://127.0.0.1/"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+
+  tops-ng2:
+    image: docker.io/library/nginx:1.27-alpine
+    container_name: koopa-tops-ng2
+    restart: unless-stopped
+    ports:
+      - "9091:80"
+    volumes:
+      - ../ng2:/usr/share/nginx/html:ro
+    labels:
+      org.hacktivism.service: tops-ng2
+      org.hacktivism.host_port: "9091"
+      org.hacktivism.site: tops.ng2.hacktivism.ch
+      org.hacktivism.managed_by: koopa-admin
+    healthcheck:
+      test: ["CMD", "wget", "-q", "-O", "/dev/null", "http://127.0.0.1/"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+
+  tops-ng3:
+    image: docker.io/library/nginx:1.27-alpine
+    container_name: koopa-tops-ng3
+    restart: unless-stopped
+    ports:
+      - "9092:80"
+    volumes:
+      - ../ng3:/usr/share/nginx/html:ro
+    labels:
+      org.hacktivism.service: tops-ng3
+      org.hacktivism.host_port: "9092"
+      org.hacktivism.site: tops.ng3.hacktivism.ch
+      org.hacktivism.managed_by: koopa-admin
+    healthcheck:
+      test: ["CMD", "wget", "-q", "-O", "/dev/null", "http://127.0.0.1/"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
--- a/configs/taler-ops-ng/ng1/CHANGES/index.html
+++ b/configs/taler-ops-ng/ng1/CHANGES/index.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Notiz · tops.ng1</title>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet" />
+  <style>
+    body { font-family: Montserrat, system-ui, sans-serif; max-width: 36rem; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; color: #111; }
+    h1 { font-size: 1.25rem; margin: 0 0 0.75rem; color: #0042b3; }
+    h2 { font-size: 0.95rem; margin: 1.25rem 0 0.4rem; color: #0042b3; }
+    ul { padding-left: 1.2rem; margin: 0.3rem 0; }
+    li { margin: 0.25rem 0; }
+    code { background: #f1f1f4; padding: 0.05em 0.3em; border-radius: 3px; font-size: 0.9em; }
+    a { color: #4160ff; }
+    .meta { color: #586a88; font-size: 0.85rem; margin-bottom: 1.25rem; }
+  </style>
+</head>
+<body>
+  <p class="meta"><a href="/">← Start</a> · tops.ng1 · Port 9090</p>
+  <h1>Diese Seite</h1>
+
+  <h2>Inhalt &amp; Branding</h2>
+  <ul>
+    <li>Landing für Taler Operations (eCHF / Schweiz): Wallet, 3 Schritte, Händler, FAQ</li>
+    <li>Logo: <code>taler-full.svg</code> (GNU Taler)</li>
+    <li>Schrift: <strong>Montserrat</strong></li>
+    <li>Farben nach
+      <a href="https://docs.taler.net/design-documents/090-branding.html">DD&nbsp;90</a>
+      / <a href="https://docs.taler.net/design-documents/066-wallet-color-scheme.html">DD&nbsp;66</a>
+      — Primary <code>#0042B3</code>, Secondary <code>#A4C9FF</code> / <code>#586A88</code>, Frame <code>#F1F1F4</code></li>
+    <li>FINMA-Hinweis sticky und dauerhaft sichtbar</li>
+  </ul>
+
+  <h2>Auslieferung (aktuell)</h2>
+  <ul>
+    <li>Static-HTML (kein Build von <code>taler-ops-www</code>)</li>
+    <li><code>nginx:1.27-alpine</code>, rootless Podman · <code>bin/up.sh</code> + <code>deploy/compose.yml</code></li>
+    <li>Caddy: <code>reverse_proxy</code> → <code>127.0.0.1:9090</code></li>
+  </ul>
+</body>
+</html>
--- a/configs/taler-ops-ng/ng1/assets/montserrat-latin.woff2
+++ b/configs/taler-ops-ng/ng1/assets/montserrat-latin.woff2
--- a/configs/taler-ops-ng/ng1/assets/taler-full-white-text.svg
+++ b/configs/taler-ops-ng/ng1/assets/taler-full-white-text.svg
@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="670"
+   height="300"
+   viewBox="0 0 201 90"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="taler-logo-2021-inkscape.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="2.3522388"
+     inkscape:cx="95.803701"
+     inkscape:cy="148.33935"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="logo"
+     inkscape:document-rotation="0"
+     viewbox-width="201"
+     scale-x="0.3" />
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs18" />
+  <g
+     id="logo">
+    <g
+       id="circles"
+       style="fill:#0042b3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.327943">
+      <path
+         d="m 86.662153,1.1211936 c 15.589697,0 29.129227,9.4011664 35.961027,23.2018054 h -5.81736 C 110.4866,13.623304 99.349002,6.5180852 86.662153,6.5180852 c -19.690571,0 -35.652876,17.1120008 -35.652876,38.2205688 0,10.331797 3.825597,19.704678 10.03957,26.582945 -1.342357,1.120912 -2.771532,2.127905 -4.275488,3.006754 C 50.071485,66.553412 45.974857,56.15992 45.974857,44.738654 c 0,-24.089211 18.216325,-43.6174604 40.687296,-43.6174604 z M 122.51416,65.375898 c -6.86645,13.680134 -20.34561,22.980218 -35.852007,22.980218 -1.052702,0 -2.096093,-0.04291 -3.128683,-0.127026 3.052192,-1.561167 5.913582,-3.480387 8.538307,-5.707305 10.320963,-1.684389 19.185983,-8.113638 24.601813,-17.145887 z"
+         id="path2350" />
+      <path
+         d="m 64.212372,1.1211936 c 1.052607,0 2.095998,0.042919 3.128684,0.1270583 C 64.288864,2.8094199 61.427378,4.728606 58.802653,6.9555572 41.679542,9.7498571 28.559494,25.601563 28.559494,44.738654 c 0,14.264563 7.29059,26.702023 18.093843,33.268925 -1.593656,0.26719 -3.226966,0.406948 -4.890748,0.406948 -1.239545,0 -2.46151,-0.07952 -3.663522,-0.229364 C 29.191129,70.184015 23.525076,58.171633 23.525076,44.738654 23.525076,20.649443 41.7414,1.1211936 64.212372,1.1211936 Z M 69.62209,82.521785 C 79.943207,80.837396 88.808164,74.407841 94.224059,65.375422 h 5.840511 c -6.866354,13.680305 -20.345548,22.980694 -35.852198,22.980694 -1.052703,0 -2.095999,-0.04291 -3.128684,-0.127026 3.052002,-1.561371 5.913836,-3.480218 8.538402,-5.707305 z M 94.355885,24.322999 c -3.13939,-5.314721 -7.467551,-9.74275 -12.584511,-12.853269 1.593656,-0.26719 3.226904,-0.406948 4.890779,-0.406948 1.239451,0 2.461512,0.07952 3.663524,0.229364 4.016018,3.607242 7.373195,8.030111 9.849053,13.030853 z"
+         id="path2352" />
+      <path
+         d="m 41.762589,1.1211936 c 1.064296,0 2.118804,0.044379 3.162607,0.1302161 -3.046523,1.558961 -5.903162,3.4745139 -8.52358,5.6968133 C 19.254624,9.7205882 6.1097128,25.583465 6.1097128,44.738654 c 0,21.108568 15.9624012,38.22057 35.6528762,38.22057 12.599746,0 23.672446,-7.007056 30.013748,-17.583802 h 5.838515 C 70.748498,79.055727 57.26924,88.356116 41.762589,88.356116 c -22.470907,0 -40.6871998,-19.52825 -40.6871998,-43.617462 0,-24.089211 18.2162928,-43.6174604 40.6871998,-43.6174604 z M 71.905375,24.322999 c -1.31192,-2.220567 -2.830984,-4.287049 -4.528877,-6.166508 1.342452,-1.120945 2.771374,-2.128381 4.275139,-3.00723 2.372984,2.753011 4.418875,5.834636 6.072489,9.173738 z"
+         id="path2354" />
+    </g>
+    <g
+       id="letters" fill="#fff">
+      <path
+         d="m 76.135411,34.409066 h 9.161042 V 29.36588 H 61.857537 v 5.043186 h 9.161137 v 25.92317 h 5.116737 z"
+         id="path2346" />
+      <path
+         d="m 92.647571,52.856334 h 13.659009 l 2.93009,7.476072 h 5.36461 L 101.89122,29.144903 H 97.187186 L 84.477089,60.332406 h 5.199533 z m 11.802109,-4.822276 h -9.944771 l 4.951718,-12.386462 z"
+         id="path2362" />
+      <path
+         d="m 123.80641,29.366084 h -4.58038 v 30.966322 h 20.54728 v -4.910253 c -5.32227,0 -10.64463,0 -15.9669,0 z"
+         id="path2356" />
+      <path
+         d="m 166.4722,29.366084 h -21.37564 v 30.966322 h 21.58203 v -4.910253 h -16.54771 v -8.27275 h 14.48439 V 42.23925 h -14.48439 v -7.962811 h 16.34132 z"
+         id="path2360" />
+      <path
+         d="m 191.19035,39.474593 c 0,1.59947 -0.53646,2.87535 -1.61628,3.818883 -1.07281,0.95124 -2.52409,1.422837 -4.34678,1.422837 h -7.44851 V 34.276439 h 7.4073 c 1.9051,0 3.38376,0.435027 4.42939,1.312178 1.05226,0.870258 1.57488,2.167734 1.57488,3.885976 z m 6.06602,20.857813 -7.79911,-11.723191 c 1.01771,-0.294794 1.94631,-0.714813 2.78553,-1.260566 0.83885,-0.545619 1.56122,-1.209263 2.16629,-1.990627 0.60541,-0.781738 1.07981,-1.681096 1.42369,-2.698345 0.34378,-1.017553 0.51561,-2.175238 0.51561,-3.472883 0,-1.50409 -0.24743,-2.867948 -0.74267,-4.092048 -0.49515,-1.223794 -1.20344,-2.256186 -2.12499,-3.096734 -0.92173,-0.840446 -2.04957,-1.489252 -3.38375,-1.946452 -1.33447,-0.457267 -2.82692,-0.685476 -4.4774,-0.685476 h -12.87512 v 30.966322 h 5.03433 V 49.538522 h 6.37569 l 7.11829,10.793884 z"
+         id="path2358" />
+    </g>
+  </g>
+</svg>
--- a/configs/taler-ops-ng/ng1/assets/taler-full.svg
+++ b/configs/taler-ops-ng/ng1/assets/taler-full.svg
@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="670"
+   height="300"
+   viewBox="0 0 201 90"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="taler-logo-2021-inkscape.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="2.3522388"
+     inkscape:cx="95.803701"
+     inkscape:cy="148.33935"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="logo"
+     inkscape:document-rotation="0"
+     viewbox-width="201"
+     scale-x="0.3" />
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs18" />
+  <g
+     id="logo">
+    <g
+       id="circles"
+       style="fill:#0042b3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.327943">
+      <path
+         d="m 86.662153,1.1211936 c 15.589697,0 29.129227,9.4011664 35.961027,23.2018054 h -5.81736 C 110.4866,13.623304 99.349002,6.5180852 86.662153,6.5180852 c -19.690571,0 -35.652876,17.1120008 -35.652876,38.2205688 0,10.331797 3.825597,19.704678 10.03957,26.582945 -1.342357,1.120912 -2.771532,2.127905 -4.275488,3.006754 C 50.071485,66.553412 45.974857,56.15992 45.974857,44.738654 c 0,-24.089211 18.216325,-43.6174604 40.687296,-43.6174604 z M 122.51416,65.375898 c -6.86645,13.680134 -20.34561,22.980218 -35.852007,22.980218 -1.052702,0 -2.096093,-0.04291 -3.128683,-0.127026 3.052192,-1.561167 5.913582,-3.480387 8.538307,-5.707305 10.320963,-1.684389 19.185983,-8.113638 24.601813,-17.145887 z"
+         id="path2350" />
+      <path
+         d="m 64.212372,1.1211936 c 1.052607,0 2.095998,0.042919 3.128684,0.1270583 C 64.288864,2.8094199 61.427378,4.728606 58.802653,6.9555572 41.679542,9.7498571 28.559494,25.601563 28.559494,44.738654 c 0,14.264563 7.29059,26.702023 18.093843,33.268925 -1.593656,0.26719 -3.226966,0.406948 -4.890748,0.406948 -1.239545,0 -2.46151,-0.07952 -3.663522,-0.229364 C 29.191129,70.184015 23.525076,58.171633 23.525076,44.738654 23.525076,20.649443 41.7414,1.1211936 64.212372,1.1211936 Z M 69.62209,82.521785 C 79.943207,80.837396 88.808164,74.407841 94.224059,65.375422 h 5.840511 c -6.866354,13.680305 -20.345548,22.980694 -35.852198,22.980694 -1.052703,0 -2.095999,-0.04291 -3.128684,-0.127026 3.052002,-1.561371 5.913836,-3.480218 8.538402,-5.707305 z M 94.355885,24.322999 c -3.13939,-5.314721 -7.467551,-9.74275 -12.584511,-12.853269 1.593656,-0.26719 3.226904,-0.406948 4.890779,-0.406948 1.239451,0 2.461512,0.07952 3.663524,0.229364 4.016018,3.607242 7.373195,8.030111 9.849053,13.030853 z"
+         id="path2352" />
+      <path
+         d="m 41.762589,1.1211936 c 1.064296,0 2.118804,0.044379 3.162607,0.1302161 -3.046523,1.558961 -5.903162,3.4745139 -8.52358,5.6968133 C 19.254624,9.7205882 6.1097128,25.583465 6.1097128,44.738654 c 0,21.108568 15.9624012,38.22057 35.6528762,38.22057 12.599746,0 23.672446,-7.007056 30.013748,-17.583802 h 5.838515 C 70.748498,79.055727 57.26924,88.356116 41.762589,88.356116 c -22.470907,0 -40.6871998,-19.52825 -40.6871998,-43.617462 0,-24.089211 18.2162928,-43.6174604 40.6871998,-43.6174604 z M 71.905375,24.322999 c -1.31192,-2.220567 -2.830984,-4.287049 -4.528877,-6.166508 1.342452,-1.120945 2.771374,-2.128381 4.275139,-3.00723 2.372984,2.753011 4.418875,5.834636 6.072489,9.173738 z"
+         id="path2354" />
+    </g>
+    <g
+       id="letters">
+      <path
+         d="m 76.135411,34.409066 h 9.161042 V 29.36588 H 61.857537 v 5.043186 h 9.161137 v 25.92317 h 5.116737 z"
+         id="path2346" />
+      <path
+         d="m 92.647571,52.856334 h 13.659009 l 2.93009,7.476072 h 5.36461 L 101.89122,29.144903 H 97.187186 L 84.477089,60.332406 h 5.199533 z m 11.802109,-4.822276 h -9.944771 l 4.951718,-12.386462 z"
+         id="path2362" />
+      <path
+         d="m 123.80641,29.366084 h -4.58038 v 30.966322 h 20.54728 v -4.910253 c -5.32227,0 -10.64463,0 -15.9669,0 z"
+         id="path2356" />
+      <path
+         d="m 166.4722,29.366084 h -21.37564 v 30.966322 h 21.58203 v -4.910253 h -16.54771 v -8.27275 h 14.48439 V 42.23925 h -14.48439 v -7.962811 h 16.34132 z"
+         id="path2360" />
+      <path
+         d="m 191.19035,39.474593 c 0,1.59947 -0.53646,2.87535 -1.61628,3.818883 -1.07281,0.95124 -2.52409,1.422837 -4.34678,1.422837 h -7.44851 V 34.276439 h 7.4073 c 1.9051,0 3.38376,0.435027 4.42939,1.312178 1.05226,0.870258 1.57488,2.167734 1.57488,3.885976 z m 6.06602,20.857813 -7.79911,-11.723191 c 1.01771,-0.294794 1.94631,-0.714813 2.78553,-1.260566 0.83885,-0.545619 1.56122,-1.209263 2.16629,-1.990627 0.60541,-0.781738 1.07981,-1.681096 1.42369,-2.698345 0.34378,-1.017553 0.51561,-2.175238 0.51561,-3.472883 0,-1.50409 -0.24743,-2.867948 -0.74267,-4.092048 -0.49515,-1.223794 -1.20344,-2.256186 -2.12499,-3.096734 -0.92173,-0.840446 -2.04957,-1.489252 -3.38375,-1.946452 -1.33447,-0.457267 -2.82692,-0.685476 -4.4774,-0.685476 h -12.87512 v 30.966322 h 5.03433 V 49.538522 h 6.37569 l 7.11829,10.793884 z"
+         id="path2358" />
+    </g>
+  </g>
+</svg>
--- a/configs/taler-ops-ng/ng1/index.html
+++ b/configs/taler-ops-ng/ng1/index.html
@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Taler Operations AG · digital cash for Switzerland</title>
+  <meta name="description" content="Taler Operations runs the Taler payment system in Switzerland. Digital cash as private as cash." />
+  <!-- GNU Taler DD 90 / DD 66: Montserrat, #0042b3 -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
+  <style>
+    @font-face {
+      font-family: "Montserrat Local";
+      font-style: normal;
+      font-weight: 400 800;
+      font-display: swap;
+      src: url("assets/montserrat-latin.woff2") format("woff2");
+    }
+    :root {
+      /* DD 90 Branding Guidelines + taler-ops-www tailwind accent.pure */
+      --taler-primary: #0042b3;
+      --taler-primary-dark: #00318a;
+      --taler-secondary: #a4c9ff;
+      --taler-secondary-deep: #586a88;
+      --taler-soft: #b4c5ff;
+      --taler-frame: #f1f1f4;
+      --taler-link: #4160ff;
+      --white: #ffffff;
+      --ink: #0c0c0e;
+      --muted-bg: #f1f1f4;
+      --finma-bg: #0a1628;
+      --finma-fg: #e8f0ff;
+      --finma-line: #0042b3;
+      --font: "Montserrat", "Montserrat Local", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    }
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
+    body {
+      margin: 0; font-family: var(--font); color: var(--ink);
+      background: var(--white); line-height: 1.55;
+    }
+    /* FINMA — always visible */
+    .finma {
+      position: sticky; top: 0; z-index: 2000;
+      background: var(--finma-bg); color: var(--finma-fg);
+      border-bottom: 4px solid var(--finma-line);
+      padding: 0.65rem 1rem 0.75rem;
+      font-size: clamp(0.74rem, 2.2vw, 0.86rem);
+      font-weight: 600; text-align: center;
+    }
+    .finma .mark {
+      display: inline-block; margin-right: 0.4rem;
+      padding: 0.12rem 0.45rem; background: var(--taler-primary); color: #fff;
+      font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em;
+      text-transform: uppercase; border-radius: 3px; vertical-align: middle;
+    }
+    .finma strong { color: var(--taler-secondary); }
+
+    .bar {
+      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
+      gap: 0.75rem; padding: 0.75rem 1.25rem;
+      background: var(--white); border-bottom: 1px solid #e6e8ef;
+    }
+    .bar .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); }
+    .bar .brand img { height: 40px; width: auto; display: block; }
+    .bar nav { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.8rem; font-weight: 700; }
+    .bar nav a { color: var(--taler-secondary-deep); text-decoration: none; letter-spacing: 0.02em; }
+    .bar nav a:hover { color: var(--taler-primary); }
+
+    .hero {
+      position: relative; overflow: hidden; color: var(--white);
+      background: linear-gradient(155deg, var(--taler-primary) 0%, var(--taler-primary-dark) 52%, #001a4a 100%);
+      padding: 3.25rem 1.25rem 4rem;
+    }
+    .hero::before {
+      content: ""; position: absolute; inset: 0; pointer-events: none;
+      background:
+        repeating-linear-gradient(-32deg, transparent 0 36px, rgba(255,255,255,0.06) 36px 72px);
+    }
+    .hero-inner { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; text-align: center; }
+    .pill {
+      display: inline-block; background: var(--white); color: var(--taler-primary);
+      font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em;
+      text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 999px; margin-bottom: 1rem;
+    }
+    .hero h1 {
+      margin: 0 0 0.85rem; font-weight: 800; line-height: 1.05;
+      font-size: clamp(2rem, 5.5vw, 3.1rem); letter-spacing: -0.02em;
+    }
+    .hero h1 em { font-style: normal; color: var(--taler-secondary); }
+    .hero .lead { font-size: 1.08rem; font-weight: 500; margin: 0 auto 1.5rem; max-width: 34rem; opacity: 0.96; }
+    .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
+    .cta {
+      display: inline-block; text-decoration: none; font-weight: 800;
+      letter-spacing: 0.03em; font-size: 0.9rem;
+      padding: 0.85rem 1.35rem; border-radius: 8px;
+    }
+    .cta.solid { background: var(--white); color: var(--taler-primary); box-shadow: 0 6px 0 #002a75; }
+    .cta.solid:active { transform: translateY(2px); box-shadow: 0 4px 0 #002a75; }
+    .cta.line { border: 2px solid #fff; color: #fff; }
+
+    .banner-mid {
+      background: var(--taler-frame); color: var(--taler-primary);
+      text-align: center; padding: 0.95rem 1rem;
+      font-weight: 800; font-size: 0.88rem; letter-spacing: 0.04em;
+      border-bottom: 1px solid #e0e2ea;
+    }
+
+    main { max-width: 48rem; margin: 0 auto; padding: 2.25rem 1.25rem 3rem; }
+    h2 {
+      font-size: 1.2rem; font-weight: 800; letter-spacing: 0.02em;
+      color: var(--taler-primary); margin: 2rem 0 0.75rem;
+    }
+    .stripe {
+      background: var(--muted-bg); border-left: 6px solid var(--taler-primary);
+      padding: 1.1rem 1.2rem; border-radius: 0 12px 12px 0; margin: 1rem 0;
+    }
+    .steps { display: grid; gap: 0.75rem; }
+    .step {
+      display: grid; grid-template-columns: 3rem 1fr; gap: 0.9rem; align-items: start;
+      padding: 1.05rem 1.1rem; border: 1px solid #e6e8ef; border-radius: 12px; background: #fff;
+    }
+    .step .n {
+      width: 3rem; height: 3rem; border-radius: 50%; background: var(--taler-primary); color: #fff;
+      font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center;
+    }
+    .step h3 { margin: 0 0 0.25rem; font-size: 1.02rem; font-weight: 700; }
+    .step p { margin: 0; color: #333; font-size: 0.95rem; }
+    .apps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; }
+    .apps a {
+      font-size: 0.8rem; font-weight: 700; text-decoration: none;
+      padding: 0.4rem 0.75rem; border-radius: 8px; background: var(--taler-primary); color: #fff;
+    }
+    .apps a.sec { background: var(--taler-secondary-deep); }
+    a { color: var(--taler-link); }
+    .faq details {
+      border: 1px solid #e6e8ef; border-radius: 10px; padding: 0.75rem 1rem; margin: 0.5rem 0;
+      background: #fafbfe;
+    }
+    .faq summary { font-weight: 700; cursor: pointer; color: var(--taler-primary); }
+    footer {
+      background: #0a1628; color: #a8b8d0; text-align: center;
+      padding: 1.75rem 1rem 2.5rem; font-size: 0.85rem;
+    }
+    footer a { color: var(--taler-secondary); }
+  </style>
+</head>
+<body>
+  <aside class="finma" role="note" aria-label="Legal notice FINMA">
+    <span class="mark">FINMA</span>
+    Taler Operations AG operates the Taler payment system in Switzerland.
+    <strong>Taler Operations is not supervised by the Swiss Financial Market Supervisory Authority (FINMA).</strong>
+    Escrowed customer assets are not subject to deposit insurance but held in a segregated bank account.
+  </aside>
+
+  <div class="bar">
+    <a class="brand" href="/" aria-label="Taler Operations home">
+      <img src="assets/taler-full.svg" width="136" height="61" alt="GNU Taler" />
+    </a>
+    <nav>
+      <a href="#start">Start</a>
+      <a href="#need">Need</a>
+      <a href="#faq">FAQ</a>
+      <a href="https://taler-ops.ch/en/users.html">Users</a>
+      <a href="https://taler-ops.ch/en/merchants.html">Merchants</a>
+      <a href="/CHANGES/">Hinweise</a>
+    </nav>
+  </div>
+
+  <header class="hero">
+    <div class="hero-inner">
+      <span class="pill">Switzerland · eCHF · privacy</span>
+      <h1>Taler — a digital payment system <em>as private as cash</em></h1>
+      <p class="lead">
+        The Taler Wallet is your digital purse. Withdraw electronic cash from your Swiss bank account,
+        then pay with QR code or NFC — standard bank transfer times apply.
+      </p>
+      <div class="cta-row">
+        <a class="cta solid" href="https://wallet.taler.net/">Get the wallet</a>
+        <a class="cta line" href="#start">3 steps →</a>
+      </div>
+    </div>
+  </header>
+
+  <div class="banner-mid">Pay as usual · stay private as cash</div>
+
+  <main>
+    <section id="need">
+      <h2>Prerequisites</h2>
+      <div class="stripe">
+        <ul style="margin:0;padding-left:1.15rem">
+          <li><strong>Swiss bank account</strong> with an IBAN starting with <code>CH</code></li>
+          <li><strong>Mobile phone number</strong> with <code>+41</code> to receive P2P payments</li>
+        </ul>
+      </div>
+    </section>
+
+    <section id="start">
+      <h2>3 steps to get started</h2>
+      <div class="steps">
+        <article class="step">
+          <span class="n">1</span>
+          <div>
+            <h3>Install the wallet</h3>
+            <p>Android, iOS, or browser extension from the official wallet portal.</p>
+            <div class="apps">
+              <a href="https://play.google.com/store/apps/details?id=net.taler.wallet" rel="noopener">Android</a>
+              <a class="sec" href="https://apps.apple.com/app/taler-wallet/id6463440117" rel="noopener">iOS</a>
+              <a class="sec" href="https://wallet.taler.net/" rel="noopener">All platforms</a>
+            </div>
+          </div>
+        </article>
+        <article class="step">
+          <span class="n">2</span>
+          <div>
+            <h3>Withdraw digital cash</h3>
+            <p>Tap “Withdraw CHF”, enter an amount, confirm the bank transfer. Processing follows Swiss bank transfer times.</p>
+          </div>
+        </article>
+        <article class="step">
+          <span class="n">3</span>
+          <div>
+            <h3>Pay</h3>
+            <p>Scan a merchant QR code or use NFC — confirm once. Only spend what you withdrew.</p>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <section>
+      <h2>Merchants &amp; map</h2>
+      <p>
+        Pay in person where eCHF with Taler is accepted.
+        Full merchant map and onboarding:
+        <a href="https://taler-ops.ch/en/index.html#target-map">taler-ops.ch map</a> ·
+        <a href="https://taler-ops.ch/en/merchants.html">become a merchant</a>.
+      </p>
+    </section>
+
+    <section id="faq" class="faq">
+      <h2>FAQ</h2>
+      <details>
+        <summary>Is this supervised by FINMA?</summary>
+        <p>No. Taler Operations AG is <strong>not supervised by FINMA</strong>. Escrow is in a segregated bank account and is <strong>not</strong> covered by deposit insurance. See the sticky notice above.</p>
+      </details>
+      <details>
+        <summary>How is this like a regular wallet?</summary>
+        <p>You can only spend money you previously withdrew. No credit; the exchange does not learn what you bought.</p>
+      </details>
+      <details>
+        <summary>Where is production?</summary>
+        <p>Live service: <a href="https://taler-ops.ch/">taler-ops.ch</a>.</p>
+      </details>
+    </section>
+  </main>
+
+  <footer>
+    Taler Operations AG · Biel/Bienne ·
+    <a href="https://taler-ops.ch/">taler-ops.ch</a> ·
+    <a href="/CHANGES/">Hinweise</a>
+  </footer>
+</body>
+</html>
--- a/configs/taler-ops-ng/ng2/CHANGES/index.html
+++ b/configs/taler-ops-ng/ng2/CHANGES/index.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Notiz · tops.ng2</title>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet" />
+  <style>
+    body { font-family: Montserrat, system-ui, sans-serif; max-width: 36rem; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; color: #111; }
+    h1 { font-size: 1.25rem; margin: 0 0 0.75rem; color: #0042b3; }
+    h2 { font-size: 0.95rem; margin: 1.25rem 0 0.4rem; color: #0042b3; }
+    ul { padding-left: 1.2rem; margin: 0.3rem 0; }
+    li { margin: 0.25rem 0; }
+    code { background: #f1f1f4; padding: 0.05em 0.3em; border-radius: 3px; font-size: 0.9em; }
+    a { color: #4160ff; }
+    .meta { color: #586a88; font-size: 0.85rem; margin-bottom: 1.25rem; }
+  </style>
+</head>
+<body>
+  <p class="meta"><a href="/">← Start</a> · tops.ng2 · Port 9091</p>
+  <h1>Diese Seite</h1>
+
+  <h2>Inhalt &amp; UI</h2>
+  <ul>
+    <li>Landing Taler Operations: 3-Schritte-Slider, Betrags-Slider, Themen-Tabs, FAQ</li>
+    <li>Branding wie ng1 nach
+      <a href="https://docs.taler.net/design-documents/090-branding.html">DD&nbsp;90</a>
+      / <a href="https://docs.taler.net/design-documents/066-wallet-color-scheme.html">DD&nbsp;66</a>
+      — Montserrat, Primary <code>#0042B3</code>, Logo, Frame <code>#F1F1F4</code></li>
+    <li>FINMA-Hinweis sticky und dauerhaft sichtbar</li>
+  </ul>
+
+  <h2>Auslieferung (aktuell)</h2>
+  <ul>
+    <li>Static-HTML (kein Build von <code>taler-ops-www</code>)</li>
+    <li><code>nginx:1.27-alpine</code>, rootless Podman · <code>bin/up.sh</code> + <code>deploy/compose.yml</code></li>
+    <li>Caddy: <code>reverse_proxy</code> → <code>127.0.0.1:9091</code></li>
+  </ul>
+</body>
+</html>
--- a/configs/taler-ops-ng/ng2/assets/montserrat-latin.woff2
+++ b/configs/taler-ops-ng/ng2/assets/montserrat-latin.woff2
--- a/configs/taler-ops-ng/ng2/assets/taler-full.svg
+++ b/configs/taler-ops-ng/ng2/assets/taler-full.svg
@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="670"
+   height="300"
+   viewBox="0 0 201 90"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="taler-logo-2021-inkscape.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="2.3522388"
+     inkscape:cx="95.803701"
+     inkscape:cy="148.33935"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="logo"
+     inkscape:document-rotation="0"
+     viewbox-width="201"
+     scale-x="0.3" />
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs18" />
+  <g
+     id="logo">
+    <g
+       id="circles"
+       style="fill:#0042b3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.327943">
+      <path
+         d="m 86.662153,1.1211936 c 15.589697,0 29.129227,9.4011664 35.961027,23.2018054 h -5.81736 C 110.4866,13.623304 99.349002,6.5180852 86.662153,6.5180852 c -19.690571,0 -35.652876,17.1120008 -35.652876,38.2205688 0,10.331797 3.825597,19.704678 10.03957,26.582945 -1.342357,1.120912 -2.771532,2.127905 -4.275488,3.006754 C 50.071485,66.553412 45.974857,56.15992 45.974857,44.738654 c 0,-24.089211 18.216325,-43.6174604 40.687296,-43.6174604 z M 122.51416,65.375898 c -6.86645,13.680134 -20.34561,22.980218 -35.852007,22.980218 -1.052702,0 -2.096093,-0.04291 -3.128683,-0.127026 3.052192,-1.561167 5.913582,-3.480387 8.538307,-5.707305 10.320963,-1.684389 19.185983,-8.113638 24.601813,-17.145887 z"
+         id="path2350" />
+      <path
+         d="m 64.212372,1.1211936 c 1.052607,0 2.095998,0.042919 3.128684,0.1270583 C 64.288864,2.8094199 61.427378,4.728606 58.802653,6.9555572 41.679542,9.7498571 28.559494,25.601563 28.559494,44.738654 c 0,14.264563 7.29059,26.702023 18.093843,33.268925 -1.593656,0.26719 -3.226966,0.406948 -4.890748,0.406948 -1.239545,0 -2.46151,-0.07952 -3.663522,-0.229364 C 29.191129,70.184015 23.525076,58.171633 23.525076,44.738654 23.525076,20.649443 41.7414,1.1211936 64.212372,1.1211936 Z M 69.62209,82.521785 C 79.943207,80.837396 88.808164,74.407841 94.224059,65.375422 h 5.840511 c -6.866354,13.680305 -20.345548,22.980694 -35.852198,22.980694 -1.052703,0 -2.095999,-0.04291 -3.128684,-0.127026 3.052002,-1.561371 5.913836,-3.480218 8.538402,-5.707305 z M 94.355885,24.322999 c -3.13939,-5.314721 -7.467551,-9.74275 -12.584511,-12.853269 1.593656,-0.26719 3.226904,-0.406948 4.890779,-0.406948 1.239451,0 2.461512,0.07952 3.663524,0.229364 4.016018,3.607242 7.373195,8.030111 9.849053,13.030853 z"
+         id="path2352" />
+      <path
+         d="m 41.762589,1.1211936 c 1.064296,0 2.118804,0.044379 3.162607,0.1302161 -3.046523,1.558961 -5.903162,3.4745139 -8.52358,5.6968133 C 19.254624,9.7205882 6.1097128,25.583465 6.1097128,44.738654 c 0,21.108568 15.9624012,38.22057 35.6528762,38.22057 12.599746,0 23.672446,-7.007056 30.013748,-17.583802 h 5.838515 C 70.748498,79.055727 57.26924,88.356116 41.762589,88.356116 c -22.470907,0 -40.6871998,-19.52825 -40.6871998,-43.617462 0,-24.089211 18.2162928,-43.6174604 40.6871998,-43.6174604 z M 71.905375,24.322999 c -1.31192,-2.220567 -2.830984,-4.287049 -4.528877,-6.166508 1.342452,-1.120945 2.771374,-2.128381 4.275139,-3.00723 2.372984,2.753011 4.418875,5.834636 6.072489,9.173738 z"
+         id="path2354" />
+    </g>
+    <g
+       id="letters">
+      <path
+         d="m 76.135411,34.409066 h 9.161042 V 29.36588 H 61.857537 v 5.043186 h 9.161137 v 25.92317 h 5.116737 z"
+         id="path2346" />
+      <path
+         d="m 92.647571,52.856334 h 13.659009 l 2.93009,7.476072 h 5.36461 L 101.89122,29.144903 H 97.187186 L 84.477089,60.332406 h 5.199533 z m 11.802109,-4.822276 h -9.944771 l 4.951718,-12.386462 z"
+         id="path2362" />
+      <path
+         d="m 123.80641,29.366084 h -4.58038 v 30.966322 h 20.54728 v -4.910253 c -5.32227,0 -10.64463,0 -15.9669,0 z"
+         id="path2356" />
+      <path
+         d="m 166.4722,29.366084 h -21.37564 v 30.966322 h 21.58203 v -4.910253 h -16.54771 v -8.27275 h 14.48439 V 42.23925 h -14.48439 v -7.962811 h 16.34132 z"
+         id="path2360" />
+      <path
+         d="m 191.19035,39.474593 c 0,1.59947 -0.53646,2.87535 -1.61628,3.818883 -1.07281,0.95124 -2.52409,1.422837 -4.34678,1.422837 h -7.44851 V 34.276439 h 7.4073 c 1.9051,0 3.38376,0.435027 4.42939,1.312178 1.05226,0.870258 1.57488,2.167734 1.57488,3.885976 z m 6.06602,20.857813 -7.79911,-11.723191 c 1.01771,-0.294794 1.94631,-0.714813 2.78553,-1.260566 0.83885,-0.545619 1.56122,-1.209263 2.16629,-1.990627 0.60541,-0.781738 1.07981,-1.681096 1.42369,-2.698345 0.34378,-1.017553 0.51561,-2.175238 0.51561,-3.472883 0,-1.50409 -0.24743,-2.867948 -0.74267,-4.092048 -0.49515,-1.223794 -1.20344,-2.256186 -2.12499,-3.096734 -0.92173,-0.840446 -2.04957,-1.489252 -3.38375,-1.946452 -1.33447,-0.457267 -2.82692,-0.685476 -4.4774,-0.685476 h -12.87512 v 30.966322 h 5.03433 V 49.538522 h 6.37569 l 7.11829,10.793884 z"
+         id="path2358" />
+    </g>
+  </g>
+</svg>
--- a/configs/taler-ops-ng/ng2/index.html
+++ b/configs/taler-ops-ng/ng2/index.html
@ -0,0 +1,485 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Taler Operations AG · digital cash for Switzerland</title>
+  <meta name="description" content="Taler Operations runs the Taler payment system in Switzerland. Digital cash as private as cash." />
+  <!-- GNU Taler DD 90 / DD 66: Montserrat, #0042b3 -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  <style>
+    @font-face {
+      font-family: "Montserrat Local";
+      font-style: normal;
+      font-weight: 400 800;
+      font-display: swap;
+      src: url("assets/montserrat-latin.woff2") format("woff2");
+    }
+    :root {
+      --taler-primary: #0042b3;
+      --taler-primary-dark: #00318a;
+      --taler-secondary: #a4c9ff;
+      --taler-secondary-deep: #586a88;
+      --taler-soft: #b4c5ff;
+      --taler-frame: #f1f1f4;
+      --taler-link: #4160ff;
+      --primary-container: #d3deff;
+      --on-primary-container: #00134a;
+      --bg: #fdfdff;
+      --on-bg: #1a1c1f;
+      --white: #ffffff;
+      --finma-bg: #0a1628;
+      --finma-fg: #e8f0ff;
+      --finma-line: #0042b3;
+      --font: "Montserrat", "Montserrat Local", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      --radius: 8px;
+    }
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
+    body {
+      margin: 0; font-family: var(--font); color: var(--on-bg);
+      background: var(--bg); line-height: 1.55;
+    }
+
+    .finma {
+      position: sticky; top: 0; z-index: 2000;
+      background: var(--finma-bg); color: var(--finma-fg);
+      border-bottom: 4px solid var(--finma-line);
+      padding: 0.65rem 1rem 0.75rem;
+      font-size: clamp(0.74rem, 2.2vw, 0.86rem);
+      font-weight: 600; text-align: center;
+    }
+    .finma .mark {
+      display: inline-block; margin-right: 0.4rem;
+      padding: 0.12rem 0.45rem; background: var(--taler-primary); color: #fff;
+      font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em;
+      text-transform: uppercase; border-radius: 3px; vertical-align: middle;
+    }
+    .finma strong { color: var(--taler-secondary); }
+
+    .bar {
+      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
+      gap: 0.75rem; padding: 0.75rem 1.25rem;
+      background: var(--white); border-bottom: 1px solid #e6e8ef;
+    }
+    .bar .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--on-bg); }
+    .bar .brand img { height: 40px; width: auto; display: block; }
+    .bar nav { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.8rem; font-weight: 700; }
+    .bar nav a { color: var(--taler-secondary-deep); text-decoration: none; }
+    .bar nav a:hover { color: var(--taler-primary); }
+
+    .hero {
+      background: var(--taler-primary); color: var(--white);
+      padding: 2.5rem 1.25rem 2.75rem;
+    }
+    .hero-inner { max-width: 44rem; margin: 0 auto; }
+    .hero h1 {
+      margin: 0 0 0.75rem; font-weight: 800; line-height: 1.1;
+      font-size: clamp(1.75rem, 4.5vw, 2.5rem); letter-spacing: -0.02em;
+    }
+    .hero h1 em { font-style: normal; color: var(--taler-secondary); }
+    .hero .lead { margin: 0 0 1.25rem; max-width: 34rem; font-weight: 500; opacity: 0.96; }
+    .cta {
+      display: inline-block; text-decoration: none; font-weight: 800; font-size: 0.9rem;
+      padding: 0.8rem 1.25rem; border-radius: var(--radius);
+      background: var(--white); color: var(--taler-primary);
+    }
+    .cta:hover { background: var(--primary-container); }
+    .cta.line {
+      background: transparent; color: #fff; border: 2px solid #fff; margin-left: 0.5rem;
+    }
+    .cta.line:hover { background: rgba(255,255,255,0.12); }
+
+    main { max-width: 44rem; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
+    h2 {
+      font-size: 1.1rem; font-weight: 800; color: var(--taler-primary);
+      margin: 2rem 0 0.85rem; letter-spacing: 0.01em;
+    }
+    h2:first-child { margin-top: 0.5rem; }
+    p { margin: 0 0 0.75rem; }
+    a { color: var(--taler-link); }
+
+    /* ——— slider shell ——— */
+    .slider-block {
+      background: var(--white);
+      border: 1px solid #e6e8ef;
+      border-radius: 12px;
+      overflow: hidden;
+      margin: 0 0 1rem;
+    }
+    .slider-head {
+      display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
+      padding: 0.75rem 1rem;
+      background: var(--taler-frame);
+      border-bottom: 1px solid #e0e2ea;
+    }
+    .slider-head .label {
+      font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em;
+      text-transform: uppercase; color: var(--taler-primary);
+    }
+    .slider-head .counter {
+      font-size: 0.8rem; font-weight: 700; color: var(--taler-secondary-deep);
+      font-variant-numeric: tabular-nums;
+    }
+    .slider-viewport { overflow: hidden; position: relative; }
+    .slider-track {
+      display: flex;
+      transition: transform 0.35s ease;
+      will-change: transform;
+    }
+    .slide {
+      flex: 0 0 100%;
+      padding: 1.25rem 1.15rem 1.35rem;
+      min-height: 10.5rem;
+    }
+    .slide .n {
+      display: inline-flex; width: 2rem; height: 2rem; border-radius: 50%;
+      align-items: center; justify-content: center;
+      background: var(--taler-primary); color: #fff;
+      font-weight: 800; font-size: 0.95rem; margin-bottom: 0.65rem;
+    }
+    .slide h3 { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 700; color: var(--on-bg); }
+    .slide p { margin: 0; color: #333; font-size: 0.95rem; }
+    .slide .apps { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.85rem; }
+    .slide .apps a {
+      font-size: 0.78rem; font-weight: 700; text-decoration: none;
+      padding: 0.4rem 0.7rem; border-radius: var(--radius);
+      background: var(--taler-primary); color: #fff;
+    }
+    .slide .apps a.sec { background: var(--taler-secondary-deep); }
+
+    .slider-controls {
+      display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
+      padding: 0.65rem 1rem 0.85rem;
+      border-top: 1px solid #e6e8ef;
+      background: var(--bg);
+    }
+    .slider-controls button {
+      font-family: var(--font); font-weight: 700; font-size: 0.82rem;
+      padding: 0.45rem 0.85rem; border-radius: var(--radius); cursor: pointer;
+      border: 1px solid var(--taler-primary); background: var(--white); color: var(--taler-primary);
+    }
+    .slider-controls button:hover { background: var(--primary-container); }
+    .slider-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
+    .dots { display: flex; gap: 0.4rem; align-items: center; }
+    .dots button {
+      width: 0.55rem; height: 0.55rem; padding: 0; border: 0; border-radius: 50%;
+      background: #c4c6d0; cursor: pointer;
+    }
+    .dots button[aria-current="true"] { background: var(--taler-primary); width: 1.1rem; border-radius: 4px; }
+
+    /* range slider demo */
+    .range-card {
+      background: var(--white);
+      border: 1px solid #e6e8ef;
+      border-radius: 12px;
+      padding: 1.15rem 1.2rem 1.35rem;
+      margin: 0 0 1rem;
+    }
+    .range-card .top {
+      display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
+      margin-bottom: 0.65rem;
+    }
+    .range-card .top span { font-size: 0.8rem; font-weight: 700; color: var(--taler-secondary-deep); }
+    .range-card .amount {
+      font-size: 1.65rem; font-weight: 800; color: var(--taler-primary);
+      font-variant-numeric: tabular-nums;
+    }
+    .range-card input[type="range"] {
+      -webkit-appearance: none; appearance: none;
+      width: 100%; height: 0.45rem; border-radius: 999px;
+      background: var(--taler-frame); outline: none; margin: 0.5rem 0 0.85rem;
+    }
+    .range-card input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none; appearance: none;
+      width: 1.35rem; height: 1.35rem; border-radius: 50%;
+      background: var(--taler-primary); border: 3px solid var(--white);
+      box-shadow: 0 0 0 1px var(--taler-primary); cursor: pointer;
+    }
+    .range-card input[type="range"]::-moz-range-thumb {
+      width: 1.35rem; height: 1.35rem; border-radius: 50%;
+      background: var(--taler-primary); border: 3px solid var(--white);
+      box-shadow: 0 0 0 1px var(--taler-primary); cursor: pointer;
+    }
+    .range-card .hint {
+      font-size: 0.88rem; color: #444; background: var(--primary-container);
+      color: var(--on-primary-container);
+      padding: 0.75rem 0.9rem; border-radius: var(--radius);
+    }
+
+    .need-list {
+      background: var(--taler-frame); border-left: 6px solid var(--taler-primary);
+      padding: 1rem 1.15rem; border-radius: 0 12px 12px 0; margin: 0 0 1rem;
+    }
+    .need-list ul { margin: 0; padding-left: 1.15rem; }
+    .need-list li { margin: 0.3rem 0; }
+
+    /* topic slider (horizontal chips + panel) */
+    .topics {
+      display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem;
+    }
+    .topics button {
+      font-family: var(--font); font-weight: 700; font-size: 0.8rem;
+      padding: 0.45rem 0.85rem; border-radius: 999px; cursor: pointer;
+      border: 1px solid #c4c6d0; background: var(--white); color: var(--taler-secondary-deep);
+    }
+    .topics button[aria-selected="true"] {
+      background: var(--taler-primary); color: #fff; border-color: var(--taler-primary);
+    }
+    .topic-panel {
+      border: 1px solid #e6e8ef; border-radius: 12px; padding: 1.1rem 1.15rem;
+      background: var(--white); min-height: 6.5rem;
+    }
+    .topic-panel[hidden] { display: none; }
+    .topic-panel h3 { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 700; color: var(--taler-primary); }
+    .topic-panel p { margin: 0; font-size: 0.95rem; color: #333; }
+    .topic-panel a.btn-sm {
+      display: inline-block; margin-top: 0.75rem; text-decoration: none;
+      font-weight: 700; font-size: 0.82rem; padding: 0.45rem 0.8rem;
+      border-radius: var(--radius); background: var(--taler-primary); color: #fff;
+    }
+
+    details.faq {
+      border: 1px solid #e6e8ef; border-radius: 10px; padding: 0.75rem 1rem;
+      margin: 0.5rem 0; background: #fafbfe;
+    }
+    details.faq summary { font-weight: 700; cursor: pointer; color: var(--taler-primary); }
+    details.faq p { margin: 0.5rem 0 0; font-size: 0.93rem; }
+
+    footer {
+      background: #0a1628; color: #a8b8d0; text-align: center;
+      padding: 1.75rem 1rem 2.5rem; font-size: 0.85rem;
+    }
+    footer a { color: var(--taler-secondary); }
+  </style>
+</head>
+<body>
+  <aside class="finma" role="note" aria-label="Legal notice FINMA">
+    <span class="mark">FINMA</span>
+    Taler Operations AG operates the Taler payment system in Switzerland.
+    <strong>Taler Operations is not supervised by the Swiss Financial Market Supervisory Authority (FINMA).</strong>
+    Escrowed customer assets are not subject to deposit insurance but held in a segregated bank account.
+  </aside>
+
+  <div class="bar">
+    <a class="brand" href="/" aria-label="Taler Operations home">
+      <img src="assets/taler-full.svg" width="136" height="61" alt="GNU Taler" />
+    </a>
+    <nav>
+      <a href="#start">Start</a>
+      <a href="#amount">Amount</a>
+      <a href="#topics">More</a>
+      <a href="#faq">FAQ</a>
+      <a href="https://taler-ops.ch/en/users.html">Users</a>
+      <a href="https://taler-ops.ch/en/merchants.html">Merchants</a>
+      <a href="/CHANGES/">Hinweise</a>
+    </nav>
+  </div>
+
+  <header class="hero">
+    <div class="hero-inner">
+      <h1>Digital cash <em>as private as cash</em></h1>
+      <p class="lead">
+        Withdraw eCHF into the Taler wallet from your Swiss bank account, then pay with QR or NFC.
+      </p>
+      <a class="cta" href="https://wallet.taler.net/">Get the wallet</a>
+      <a class="cta line" href="#start">Slide through steps</a>
+    </div>
+  </header>
+
+  <main>
+    <section id="start">
+      <h2>3 steps</h2>
+      <div class="slider-block" data-slider data-index="0">
+        <div class="slider-head">
+          <span class="label">How it works</span>
+          <span class="counter" data-counter>1 / 3</span>
+        </div>
+        <div class="slider-viewport">
+          <div class="slider-track" data-track>
+            <article class="slide">
+              <span class="n">1</span>
+              <h3>Install the wallet</h3>
+              <p>Android, iOS, or browser extension from the official wallet portal.</p>
+              <div class="apps">
+                <a href="https://play.google.com/store/apps/details?id=net.taler.wallet" rel="noopener">Android</a>
+                <a class="sec" href="https://apps.apple.com/app/taler-wallet/id6463440117" rel="noopener">iOS</a>
+                <a class="sec" href="https://wallet.taler.net/" rel="noopener">All platforms</a>
+              </div>
+            </article>
+            <article class="slide">
+              <span class="n">2</span>
+              <h3>Withdraw digital cash</h3>
+              <p>Tap “Withdraw CHF”, enter an amount, confirm the bank transfer. Processing follows Swiss bank transfer times.</p>
+            </article>
+            <article class="slide">
+              <span class="n">3</span>
+              <h3>Pay</h3>
+              <p>Scan a merchant QR code or use NFC — confirm once. Only spend what you withdrew.</p>
+            </article>
+          </div>
+        </div>
+        <div class="slider-controls">
+          <button type="button" data-prev>← Prev</button>
+          <div class="dots" data-dots role="tablist" aria-label="Step slides"></div>
+          <button type="button" data-next>Next →</button>
+        </div>
+      </div>
+    </section>
+
+    <section id="amount">
+      <h2>Withdraw amount</h2>
+      <div class="range-card">
+        <div class="top">
+          <span>Example only — not a live withdrawal</span>
+          <div class="amount"><span data-chf>50</span>&nbsp;CHF</div>
+        </div>
+        <label class="visually-hidden" for="chf-range" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Amount in CHF</label>
+        <input id="chf-range" type="range" min="5" max="500" step="5" value="50" data-range />
+        <div class="hint" data-range-hint>
+          Slide to pick a sample amount. In the real wallet you confirm a bank transfer for that sum; processing follows normal Swiss transfer times.
+        </div>
+      </div>
+
+      <div class="need-list" id="need">
+        <ul>
+          <li><strong>Swiss bank account</strong> with an IBAN starting with <code>CH</code></li>
+          <li><strong>Mobile phone number</strong> with <code>+41</code> to receive P2P payments</li>
+        </ul>
+      </div>
+    </section>
+
+    <section id="topics">
+      <h2>More</h2>
+      <div class="topics" role="tablist" aria-label="Topics">
+        <button type="button" role="tab" aria-selected="true" aria-controls="panel-users" id="tab-users" data-topic="users">Users</button>
+        <button type="button" role="tab" aria-selected="false" aria-controls="panel-merchants" id="tab-merchants" data-topic="merchants">Merchants</button>
+        <button type="button" role="tab" aria-selected="false" aria-controls="panel-map" id="tab-map" data-topic="map">Map &amp; fees</button>
+      </div>
+      <div class="topic-panel" role="tabpanel" id="panel-users" aria-labelledby="tab-users">
+        <h3>For users</h3>
+        <p>Withdraw eCHF, keep private purchases, pay in person where Taler is accepted.</p>
+        <a class="btn-sm" href="https://taler-ops.ch/en/users.html">User guide</a>
+      </div>
+      <div class="topic-panel" role="tabpanel" id="panel-merchants" aria-labelledby="tab-merchants" hidden>
+        <h3>For merchants</h3>
+        <p>Accept eCHF with the Taler merchant backend. Onboarding and fees are documented on production.</p>
+        <a class="btn-sm" href="https://taler-ops.ch/en/merchants.html">Merchant guide</a>
+      </div>
+      <div class="topic-panel" role="tabpanel" id="panel-map" aria-labelledby="tab-map" hidden>
+        <h3>Map &amp; fees</h3>
+        <p>Find places that accept eCHF, and review current fee schedules.</p>
+        <a class="btn-sm" href="https://taler-ops.ch/en/index.html#target-map">Open map</a>
+        <a class="btn-sm" href="https://taler-ops.ch/en/fees.html" style="margin-left:0.35rem;background:var(--taler-secondary-deep)">Fees</a>
+      </div>
+    </section>
+
+    <section id="faq">
+      <h2>FAQ</h2>
+      <details class="faq">
+        <summary>Is this supervised by FINMA?</summary>
+        <p>No. Taler Operations AG is <strong>not supervised by FINMA</strong>. Escrow is in a segregated bank account and is <strong>not</strong> covered by deposit insurance. See the sticky notice above.</p>
+      </details>
+      <details class="faq">
+        <summary>How is this like a regular wallet?</summary>
+        <p>You can only spend money you previously withdrew. No credit; the exchange does not learn what you bought.</p>
+      </details>
+      <details class="faq">
+        <summary>Where is production?</summary>
+        <p>Live service: <a href="https://taler-ops.ch/">taler-ops.ch</a>.</p>
+      </details>
+    </section>
+  </main>
+
+  <footer>
+    Taler Operations AG · Biel/Bienne ·
+    <a href="https://taler-ops.ch/">taler-ops.ch</a> ·
+    <a href="/CHANGES/">Hinweise</a> ·
+    <a href="https://docs.taler.net/design-documents/090-branding.html">DD 90</a>
+  </footer>
+
+  <script>
+    (function () {
+      /* step carousel */
+      document.querySelectorAll("[data-slider]").forEach(function (root) {
+        var track = root.querySelector("[data-track]");
+        var slides = track ? track.children : [];
+        var n = slides.length;
+        if (!n) return;
+        var i = 0;
+        var counter = root.querySelector("[data-counter]");
+        var dots = root.querySelector("[data-dots]");
+        var prev = root.querySelector("[data-prev]");
+        var next = root.querySelector("[data-next]");
+
+        for (var d = 0; d < n; d++) {
+          (function (idx) {
+            var b = document.createElement("button");
+            b.type = "button";
+            b.setAttribute("aria-label", "Go to step " + (idx + 1));
+            b.addEventListener("click", function () { go(idx); });
+            dots.appendChild(b);
+          })(d);
+        }
+
+        function go(idx) {
+          i = Math.max(0, Math.min(n - 1, idx));
+          track.style.transform = "translateX(-" + i * 100 + "%)";
+          if (counter) counter.textContent = i + 1 + " / " + n;
+          if (prev) prev.disabled = i === 0;
+          if (next) next.disabled = i === n - 1;
+          Array.prototype.forEach.call(dots.children, function (dot, di) {
+            dot.setAttribute("aria-current", di === i ? "true" : "false");
+          });
+        }
+        if (prev) prev.addEventListener("click", function () { go(i - 1); });
+        if (next) next.addEventListener("click", function () { go(i + 1); });
+        go(0);
+      });
+
+      /* amount range */
+      var range = document.querySelector("[data-range]");
+      var chf = document.querySelector("[data-chf]");
+      var hint = document.querySelector("[data-range-hint]");
+      if (range && chf) {
+        function syncRange() {
+          var v = Number(range.value);
+          chf.textContent = String(v);
+          if (hint) {
+            if (v <= 20) {
+              hint.textContent = "Small everyday amounts work well for trying the wallet first.";
+            } else if (v <= 100) {
+              hint.textContent = "Typical sample for coffee-to-groceries use. Confirm the bank transfer in the real wallet.";
+            } else {
+              hint.textContent = "Larger withdrawals still only spend what you put in — no credit. Processing follows Swiss bank times.";
+            }
+          }
+        }
+        range.addEventListener("input", syncRange);
+        syncRange();
+      }
+
+      /* topic tabs */
+      var tabs = document.querySelectorAll("[data-topic]");
+      var panels = {
+        users: document.getElementById("panel-users"),
+        merchants: document.getElementById("panel-merchants"),
+        map: document.getElementById("panel-map")
+      };
+      tabs.forEach(function (tab) {
+        tab.addEventListener("click", function () {
+          var key = tab.getAttribute("data-topic");
+          tabs.forEach(function (t) { t.setAttribute("aria-selected", t === tab ? "true" : "false"); });
+          Object.keys(panels).forEach(function (k) {
+            if (!panels[k]) return;
+            if (k === key) panels[k].removeAttribute("hidden");
+            else panels[k].setAttribute("hidden", "");
+          });
+        });
+      });
+    })();
+  </script>
+</body>
+</html>
--- a/configs/taler-ops-ng/ng3/CHANGES/index.html
+++ b/configs/taler-ops-ng/ng3/CHANGES/index.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Notiz · tops.ng3</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 36rem; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; color: #111; }
+    h1 { font-size: 1.25rem; margin: 0 0 0.75rem; }
+    h2 { font-size: 0.95rem; margin: 1.25rem 0 0.4rem; }
+    ul { padding-left: 1.2rem; margin: 0.3rem 0; }
+    li { margin: 0.25rem 0; }
+    code { background: #f3f3f3; padding: 0.05em 0.3em; border-radius: 3px; font-size: 0.9em; }
+    a { color: #04c; }
+    .meta { color: #666; font-size: 0.85rem; margin-bottom: 1.25rem; }
+    .finma { background: #1a0508; color: #ffe8ec; border-bottom: 3px solid #ff4d6a; padding: 0.55rem 0.75rem; font-size: 0.8rem; font-weight: 600; margin: -2rem -1rem 1.25rem; }
+  </style>
+</head>
+<body>
+  <aside class="finma" role="note">
+    <strong>FINMA:</strong> Taler Operations is not supervised by FINMA.
+    Escrow not deposit-insured; segregated bank account.
+  </aside>
+  <p class="meta"><a href="/">← Start</a> · tops.ng3 · Port 9092</p>
+  <h1>Diese Seite</h1>
+
+  <h2>Inhalt</h2>
+  <ul>
+    <li>Klassische Taler-Operations-Website (Spiegel von <a href="https://taler-ops.ch/">taler-ops.ch</a> oder Fallback-HTML)</li>
+    <li>Kein Build von <code>taler-ops-www</code> — nur HTTP-Mirror / Fallback</li>
+  </ul>
+
+  <h2>Auslieferung (aktuell)</h2>
+  <ul>
+    <li><code>nginx:1.27-alpine</code>, rootless Podman · <code>bin/up.sh</code> (+ optional <code>--refresh-classic</code>)</li>
+    <li>Caddy: <code>reverse_proxy</code> → <code>127.0.0.1:9092</code></li>
+  </ul>
+</body>
+</html>
--- a/configs/taler-ops-ng/ng3/README.md
+++ b/configs/taler-ops-ng/ng3/README.md
@ -0,0 +1,10 @@
+# ng3 — classic / stable-era site
+
+- **Intent:** serve the **old/classic** Taler Operations website.
+- **Source of truth:** `taler-ops-www` branch **`stable`** (stable website).  
+  `master` is development — not used for this preview.
+- **On koopa:** `bin/up.sh` fills this directory via **wget mirror** of  
+  `https://taler-ops.ch/` (no Jinja/Parcel build).
+- If the mirror fails, `up.sh` writes a small fallback page with FINMA text.
+
+Do not commit large mirror dumps into git unless intentional.