SendSecret: Erstimport und Umstellung auf Tag-Deployment

Wrapper-Frontend vor cryptgeon: der Browser verschluesselt lokal, per Mail geht nur der Link raus. Fuer das Deployment nach den Konventionen aus DEPLOY.md hergerichtet: - docker-compose.yml mit festem Projekt- und Container-Namen, kein ports-Mapping, Healthcheck als Deploy-Gate. cryptgeon und redis liegen im internen Netz, nur app haengt im Web-Netz. - cryptgeon von latest auf 2.9.3 gepinnt. Das ist derselbe Stand, den latest bisher geliefert hat; 2.6.2 existiert nicht. - /healthz in server.js, vor dem Catch-all-Proxy registriert. - Dockerfile auf npm ci mit Lockfile und non-root umgestellt. - .gitea/workflows/deploy.yml: Build und Syntaxpruefung vor dem Deploy, .env aus dem Repo-Secret DOTENV. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-25 07:26:15 +02:00
commit 681fc1649a
19 changed files with 3096 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,7 @@
+SMTP_HOST=mail.example.de
+SMTP_PORT=587
+SMTP_USER=noreply@lucas-orth.de
+SMTP_PASS=geheimes-passwort
+SMTP_FROM="Lucas Orth <noreply@lucas-orth.de>"
+RECIPIENT_EMAIL=privat@lucas-orth.de
+APP_URL=https://secret.lucas-orth.de
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -0,0 +1,61 @@
+name: Build & Deploy
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      # Intern klonen statt ueber die oeffentliche Domain: Gitea laeuft auf
+      # demselben Host, der Weg ueber die oeffentliche IP findet nicht
+      # zurueck (NAT-Hairpin). Der Job-Container erreicht Gitea ueber das
+      # Netz gitea-ci unter seinem Containernamen.
+      - uses: actions/checkout@v4
+        with:
+          github-server-url: http://gitea:3000
+
+      # --- Build & Tests -----------------------------------------------
+      # Laeuft vor dem Deploy: ein roter Bundle-Build darf den Server nicht
+      # anfassen. Der Docker-Build wiederholt die Schritte spaeter im Image.
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Abhaengigkeiten installieren
+        working-directory: app
+        run: npm ci
+
+      - name: Frontend-Bundles bauen
+        working-directory: app
+        run: npm run build
+
+      - name: Server-Syntax pruefen
+        working-directory: app
+        run: node --check server.js
+      # ------------------------------------------------------------------
+
+      - name: Tag ermitteln
+        run: echo "IMAGE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
+
+      # Ein einziges Repo-Secret DOTENV mit dem kompletten .env-Inhalt
+      # (mehrzeilig). Ueber env: statt direkter Interpolation, damit
+      # Anfuehrungszeichen, Backticks und $ in den Werten unangetastet bleiben.
+      - name: .env aus Secret erzeugen
+        env:
+          DOTENV: ${{ secrets.DOTENV }}
+        run: |
+          if [ -z "$DOTENV" ]; then
+            echo "Secret DOTENV ist leer oder nicht gesetzt."
+            exit 1
+          fi
+          umask 077
+          echo "$DOTENV" > .env
+
+      - name: Deployen
+        run: docker compose up -d --build --remove-orphans --wait --wait-timeout 180
+
+      - name: Alte Layer aufraeumen
+        run: docker image prune -f
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,9 @@
+.env
+node_modules/
+
+# Generierte Frontend-Bundles (entstehen beim Build aus src/).
+app/public/customer.js
+app/public/link.js
+
+# Heruntergeladene Vorlage, gehoert nicht ins Projekt-Repo.
+deploy-kit-main*/
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,52 @@
+# Projekthinweise
+
+## Was das ist
+
+SendSecret ist ein eigenes Frontend vor [cryptgeon](https://github.com/cupcakearmy/cryptgeon).
+Kunden geben ein Passwort ein, der Browser verschluesselt es lokal
+(`occulto`), legt es als Notiz in cryptgeon ab und schickt nur den Link
+per Mail an `RECIPIENT_EMAIL`. Der Schluessel steht im URL-Fragment und
+erreicht den Server nie.
+
+Drei Container: `app` (Express-Wrapper, Mail, Proxy), `cryptgeon`, `redis`.
+Nur `app` haengt im Web-Netz, die anderen beiden im internen Netz.
+
+## Wo was liegt
+
+| Pfad | Inhalt |
+|---|---|
+| `app/server.js` | Express: statische Seiten, `/api/send` (Mail), `/healthz`, Catch-all-Proxy auf `http://cryptgeon:8000` |
+| `app/src/` | Frontend-Quellen, werden von `build.js` (esbuild) nach `app/public/` gebundelt |
+| `app/public/` | `index.html`, `link.html`, `style.css` (Quellen) + generierte Bundles (nicht im Git) |
+| `docker-compose.yml` | Stack, Konventionen aus DEPLOY.md |
+| `.gitea/workflows/deploy.yml` | Tag-Deploy |
+
+## Beim Aendern beachten
+
+- **`express.json()` nicht global setzen.** Es wuerde den Body-Stream
+  aufbrauchen, bevor der Proxy ihn an cryptgeon weiterreichen kann. Nur an
+  `/api/send` haengen.
+- **Neue Routen vor dem Catch-all-Proxy registrieren**, sonst gehen sie an
+  cryptgeon. Betrifft insbesondere `/healthz` - das ist das Deploy-Gate.
+- **cryptgeon-Version ist gepinnt** (`2.9.3`). Die Bundles verschluesseln mit
+  `occulto` 2.0.6 gegen dieses API-Format (`POST /api/notes/` mit
+  `contents` / `meta` / `views`). Vor einem Upgrade beide Seiten pruefen.
+- **Redis hat bewusst keine Persistenz** (`--save "" --appendonly no`) und
+  deshalb kein Volume. Notizen sollen einen Neustart nicht ueberleben.
+
+## Deployment
+
+Diese App wird per Tag-Push deployt, nicht manuell hochgeladen.
+Die verbindlichen Konventionen stehen in **DEPLOY.md**. Vor Aenderungen an
+`Dockerfile`, `docker-compose.yml` oder `.gitea/workflows/` dort nachsehen.
+
+Kurzfassung der Regeln, die man leicht bricht:
+
+- Kein `ports:` im Compose. Der Proxy erreicht den Container ueber das Netz
+  `nginx-proxy-manager_default` unter seinem `container_name` (`sendsecret`).
+- `name:` im Compose ist Pflicht (fester Projektname), sonst legt der
+  CI-Job einen zweiten Stack an.
+- Keine relativen Bind-Mounts. Compose laeuft im Job-Container, der Pfad
+  zeigt auf dem Host ins Leere.
+- Healthcheck ist Pflicht, der Deploy nutzt ihn als Gate.
+- Secrets kommen aus dem Repo-Secret `DOTENV`, nie in die Compose-Datei.
--- a/DEPLOY.md
+++ b/DEPLOY.md
@@ -0,0 +1,187 @@
+# Deployment-Konventionen
+
+Verbindlich fuer jede App, die auf dem VPS per Tag-Push deployt wird.
+Abweichungen brauchen einen Grund, der hier nicht steht.
+
+## Ablauf
+
+```
+git tag v1.2.3 && git push --tags
+  -> Gitea Actions (act_runner auf dem VPS)
+  -> npm ci / build / test          <- rot bricht ab, nichts wird deployt
+  -> .env aus Repo-Secret DOTENV
+  -> docker compose up -d --build --wait
+```
+
+Kein SCP, kein manuelles Neubauen. Der Code landet nie im Dateisystem des
+Hosts - der Job-Container klont, baut gegen den Docker-Daemon des Hosts und
+startet den Container.
+
+## Infrastruktur (existiert bereits, nicht neu anlegen)
+
+| Ding | Wert |
+|---|---|
+| Git | Gitea, `https://gitea.lucas-orth.de`, Container `gitea`, intern `:3000` |
+| Runner | `act_runner`, Container `gitea-runner`, Label `ubuntu-latest` |
+| Netz CI | `gitea-ci` - Gitea + Runner + Job-Container |
+| Netz Web | `nginx-proxy-manager_default` - Proxy + alle App-Container |
+| Job-Image | `catthehacker/ubuntu:act-latest` (node + docker-cli + compose) |
+
+Die beiden Netze sind bewusst getrennt: der Runner spricht mit Gitea, nicht
+mit dem Proxy. App-Container haengen im Web-Netz, nicht im CI-Netz.
+
+## docker-compose.yml
+
+```yaml
+# Fester Projektname. Ohne das leitet Compose ihn aus dem Verzeichnisnamen
+# ab - und der ist im CI-Job ein anderer als auf dem Host.
+name: <app>
+
+services:
+  app:
+    # Versionstag ermoeglicht Rollback ohne Rebuild.
+    image: <app>:${IMAGE_TAG:-latest}
+    build: .
+    # Fester Name: das ist die Adresse, auf die der Proxy zeigt.
+    container_name: <app>
+    restart: unless-stopped
+    # Wird im Workflow aus dem Secret DOTENV erzeugt.
+    env_file: .env
+    networks:
+      - nginx-proxy-manager_default
+    healthcheck:
+      test: ["CMD", "node", "-e", "fetch('http://127.0.0.1:<port>/healthz').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))"]
+      interval: 60s
+      timeout: 5s
+      retries: 3
+
+networks:
+  nginx-proxy-manager_default:
+    external: true
+
+volumes:
+  <app>-data:
+    # Fester Name, damit das Volume nicht am Projektnamen haengt.
+    name: <app>-data
+```
+
+**Kein `ports:`.** Der Proxy erreicht den Container ueber das gemeinsame Netz
+unter seinem Container-Namen. Ein Port-Mapping wuerde den Dienst zusaetzlich
+offen ans Internet haengen.
+
+**Healthcheck ist Pflicht.** Der Deploy-Schritt nutzt `--wait` und macht ihn
+zum Gate. Ohne Healthcheck wird der Lauf gruen, auch wenn der Container in
+einer Crash-Schleife haengt.
+
+**Keine relativen Bind-Mounts** (`./data:/data`). Compose laeuft im
+Job-Container, der Pfad wuerde auf dem Host ins Leere zeigen. Persistente
+Daten gehoeren in ein named volume mit festem `name:`.
+
+## .gitea/workflows/deploy.yml
+
+```yaml
+name: Build & Deploy
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      # Intern klonen. Die oeffentliche Domain ist aus Containern heraus
+      # NICHT erreichbar: Gitea laeuft auf demselben Host, das Paket geht
+      # an die oeffentliche IP und findet nicht zurueck (NAT-Hairpin).
+      - uses: actions/checkout@v4
+        with:
+          github-server-url: http://gitea:3000
+
+      # --- Build & Tests, projektspezifisch ---
+
+      - name: Tag ermitteln
+        run: echo "IMAGE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
+
+      - name: .env aus Secret erzeugen
+        env:
+          DOTENV: ${{ secrets.DOTENV }}
+        run: |
+          if [ -z "$DOTENV" ]; then
+            echo "Secret DOTENV ist leer oder nicht gesetzt."
+            exit 1
+          fi
+          umask 077
+          echo "$DOTENV" > .env
+
+      - name: Deployen
+        run: docker compose up -d --build --remove-orphans --wait --wait-timeout 180
+
+      - name: Alte Layer aufraeumen
+        run: docker image prune -f
+```
+
+Tests gehoeren **vor** den Deploy-Schritt. Ein roter Lauf darf den Server
+nicht anfassen.
+
+## Dockerfile
+
+- Multi-Stage: Build-Abhaengigkeiten landen nicht im finalen Image.
+- `USER node` bzw. non-root im finalen Stage.
+- `EXPOSE <port>` dokumentiert den internen Port (oeffnet nichts).
+- Ein Health-Endpoint (`/healthz`), auf den der Healthcheck zeigt.
+
+## Secrets
+
+Ein einziges Repo-Secret **`DOTENV`** mit dem kompletten `.env`-Inhalt,
+mehrzeilig. Anlegen unter Repo -> Einstellungen -> Actions -> Secrets.
+
+Gitea speichert Secrets write-only: nach dem Anlegen nicht mehr lesbar, nur
+ersetzbar. Die kanonische Fassung gehoert deshalb in den Passwortmanager,
+Gitea haelt nur die Arbeitskopie fuer die Pipeline.
+
+Der Wert wird ueber `env:` an die Shell gereicht, nie direkt interpoliert -
+sonst zerlegt der Shell-Parser Werte mit `$`, Backticks oder Quotes.
+
+## Nginx Proxy Manager
+
+Neuer Proxy Host:
+
+| Feld | Wert |
+|---|---|
+| Domain Names | `<app>.lucas-orth.de` |
+| Scheme | `http` |
+| Forward Hostname / IP | `<app>`  (= `container_name`) |
+| Forward Port | `<port>` |
+
+Danach Let's-Encrypt-Zertifikat ausstellen und "Force SSL" aktivieren.
+
+Weil der Container-Name die Adresse ist: aendert sich `container_name`,
+zeigt der Proxy-Host ins Leere.
+
+## Bestehende App umstellen
+
+Laeuft die App heute schon manuell auf dem Server, gilt statt des folgenden
+Abschnitts [MIGRATION.md](MIGRATION.md) - dort steht insbesondere, wie die
+Volumes den Wechsel des Projektnamens ueberleben.
+
+## Erstes Deployment einer App
+
+1. Repo in Gitea anlegen, pushen.
+2. Secret `DOTENV` setzen.
+3. Pruefen, ob schon ein Container mit dem Namen laeuft
+   (`docker ps -a --filter name=<app>`). Falls ja: im alten Verzeichnis
+   einmal `docker compose down`, sonst kollidiert der feste Container-Name.
+4. Proxy Host im NPM anlegen.
+5. `git tag v1.0.0 && git push origin v1.0.0`
+
+## Fallstricke
+
+| Symptom | Ursache |
+|---|---|
+| Job haengt beim Checkout | `github-server-url` fehlt, klont ueber die oeffentliche Domain |
+| `network not found` | App-Container im CI-Netz statt im Web-Netz (oder umgekehrt) |
+| Zweiter Container statt Update | `name:` im Compose fehlt, Projektname weicht ab |
+| Lauf gruen, App tot | `--wait` fehlt oder kein Healthcheck definiert |
+| Volume leer nach Umstellung | Projektname geaendert, altes Volume hiess anders |
+| Proxy liefert 502 | `container_name` geaendert oder Container nicht im Web-Netz |
--- a/README.md
+++ b/README.md
@@ -0,0 +1,95 @@
+# SendSecret
+
+Sichere Passwort-Uebergabe fuer Kunden. Eigenes Frontend vor
+[cryptgeon](https://github.com/cupcakearmy/cryptgeon): das Passwort wird im
+Browser verschluesselt, landet als einmalig abrufbare Notiz in cryptgeon,
+und per Mail geht nur der Link raus. Der Schluessel steht im
+URL-Fragment und erreicht den Server nie.
+
+Zwei Einstiege:
+
+- `/` - Kundenformular. Verschickt den Link automatisch an `RECIPIENT_EMAIL`.
+- `/link` - erzeugt nur den Link zum selbst Weitergeben.
+
+## Aufbau
+
+```
+Browser --https--> Nginx Proxy Manager --> sendsecret (app)
+                                             |  /            statische Seite
+                                             |  /api/send    Mailversand
+                                             |  /healthz     Deploy-Gate
+                                             +--> cryptgeon --> redis
+```
+
+`cryptgeon` und `redis` haengen nur im internen Netz `sendsecret-internal`
+und sind von aussen nicht erreichbar.
+
+## Lokal entwickeln
+
+```bash
+cd app && npm ci && npm run build && npm start
+```
+
+Braucht ein laufendes cryptgeon unter `http://cryptgeon:8000` sowie die
+Variablen aus `.env.example`. Einfacher ist der komplette Stack:
+
+```bash
+cp .env.example .env && docker compose up --build
+```
+
+## Konfiguration
+
+`.env` im Repo-Root, Vorlage in [.env.example](.env.example):
+
+| Variable | Bedeutung |
+|---|---|
+| `SMTP_HOST` / `SMTP_PORT` | Mailserver, Port 465 schaltet auf TLS |
+| `SMTP_USER` / `SMTP_PASS` | Zugangsdaten |
+| `SMTP_FROM` | Absender im Format `Name <adresse>` |
+| `RECIPIENT_EMAIL` | Empfaenger der Kundenmails |
+| `APP_URL` | Oeffentliche Basis-URL, prueft die eingereichten Links |
+
+Auf dem Server kommt der Inhalt nicht aus einer Datei, sondern aus dem
+Gitea-Repo-Secret `DOTENV`.
+
+## Deployment
+
+Per Tag-Push, Konventionen in [DEPLOY.md](DEPLOY.md).
+
+Einmalig einzurichten:
+
+1. Repo-Secret `DOTENV` anlegen (Repo -> Einstellungen -> Actions ->
+   Secrets) mit dem kompletten `.env`-Inhalt, mehrzeilig. Kanonische
+   Fassung in den Passwortmanager - Gitea gibt den Wert nicht mehr heraus.
+2. Pruefen, ob auf dem Server schon Container mit den festen Namen laufen:
+   `docker ps -a --filter name=sendsecret`. Falls ja, im alten Verzeichnis
+   einmal `docker compose down`, sonst kollidieren die Namen.
+3. Proxy Host im Nginx Proxy Manager:
+
+   | Feld | Wert |
+   |---|---|
+   | Domain Names | `secret.lucas-orth.de` |
+   | Scheme | `http` |
+   | Forward Hostname / IP | `sendsecret` |
+   | Forward Port | `3000` |
+
+   Danach Let's-Encrypt-Zertifikat ausstellen und "Force SSL" aktivieren.
+4. Deployen:
+
+   ```bash
+   git tag v1.0.0 && git push origin v1.0.0
+   ```
+
+Danach pruefen:
+
+```bash
+docker ps --filter name=sendsecret --format '{{.Names}}\t{{.Status}}'
+```
+
+`sendsecret` muss `healthy` zeigen, nicht `Restarting`.
+
+## Versionen
+
+`cupcakearmy/cryptgeon` ist auf **2.9.3** gepinnt - das ist derselbe Stand,
+den `latest` bisher geliefert hat. Die Frontend-Bundles verschluesseln mit
+`occulto` 2.0.6 gegen dieses API-Format; ein Upgrade betrifft beide Seiten.
--- a/app/.dockerignore
+++ b/app/.dockerignore
@@ -0,0 +1,6 @@
+node_modules
+.git
+*.log
+.env
+public/customer.js
+public/link.js
--- a/app/Dockerfile
+++ b/app/Dockerfile
@@ -0,0 +1,22 @@
+# Build stage - alle Abhaengigkeiten, Frontend-Bundles bauen.
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY build.js ./
+COPY src ./src
+COPY public ./public
+RUN npm run build
+
+# Production stage - nur Runtime-Abhaengigkeiten und fertige Assets.
+FROM node:22-alpine
+WORKDIR /app
+ENV NODE_ENV=production
+COPY package.json package-lock.json ./
+RUN npm ci --omit=dev && npm cache clean --force
+COPY server.js ./
+COPY --from=build /app/public ./public
+USER node
+# Dokumentiert den internen Port, oeffnet nichts.
+EXPOSE 3000
+CMD ["node", "server.js"]
--- a/app/build.js
+++ b/app/build.js
@@ -0,0 +1,33 @@
+'use strict'
+
+const { build } = require('esbuild')
+const { mkdirSync } = require('fs')
+
+mkdirSync('public', { recursive: true })
+
+// occulto uses require('crypto') internally; shim it to the browser Web Crypto API
+const cryptoBrowserShim = {
+  name: 'crypto-browser-shim',
+  setup(b) {
+    b.onResolve({ filter: /^crypto$/ }, () => ({
+      path: 'crypto',
+      namespace: 'crypto-browser-shim',
+    }))
+    b.onLoad({ filter: /.*/, namespace: 'crypto-browser-shim' }, () => ({
+      contents: 'module.exports = { webcrypto: globalThis.crypto }',
+    }))
+  },
+}
+
+build({
+  entryPoints: ['src/customer.js', 'src/link.js'],
+  bundle: true,
+  outdir: 'public',
+  format: 'iife',
+  target: ['es2020'],
+  minify: true,
+  platform: 'browser',
+  plugins: [cryptoBrowserShim],
+})
+  .then(() => console.log('✓ Bundles built: public/customer.js, public/link.js'))
+  .catch((err) => { console.error(err); process.exit(1) })
--- a/app/package-lock.json
+++ b/app/package-lock.json
--- a/app/package.json
+++ b/app/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "sendsecret",
+  "version": "1.0.0",
+  "description": "Custom frontend wrapper for cryptgeon with auto email",
+  "main": "server.js",
+  "scripts": {
+    "build": "node build.js",
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.21.0",
+    "http-proxy-middleware": "^2.0.7",
+    "nodemailer": "^6.9.0",
+    "occulto": "2.0.6"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0"
+  }
+}
--- a/app/public/index.html
+++ b/app/public/index.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Passwort sicher übermitteln – Lucas Orth</title>
+  <meta name="robots" content="noindex, nofollow">
+  <link rel="icon" href="https://lucas-orth.de/wp-content/uploads/2023/06/favicon-scaled.webp">
+  <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=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+<div class="page">
+
+  <!-- ── Header ─────────────────────────────────── -->
+  <header class="header">
+    <nav class="nav container">
+      <a href="https://lucas-orth.de" target="_blank" rel="noopener">
+        <img
+          src="https://lucas-orth.de/wp-content/uploads/2023/06/Lucas-Orth-black-high-res_ergebnis-scaled-e1687249204543.webp"
+          alt="Lucas Orth"
+          class="logo"
+        >
+      </a>
+      <a href="https://lucas-orth.de/kontakt" target="_blank" rel="noopener" class="btn btn--primary">
+        Kontakt
+      </a>
+    </nav>
+  </header>
+
+  <main style="display:contents">
+
+    <!-- ── Hero ───────────────────────────────────── -->
+    <section class="hero">
+      <div class="container">
+        <div class="hero__inner">
+
+          <!-- Form State -->
+          <div id="state-form">
+            <p class="eyebrow">Sicher &amp; verschlüsselt</p>
+            <h1 class="hero-title">
+              Passwort sicher<br>
+              <span class="accent">übermitteln.</span>
+            </h1>
+            <p class="lead">
+              Geben Sie Ihr Passwort oder Ihre Zugangsdaten ein.
+              Der Link wird Ende-zu-Ende-verschlüsselt direkt an
+              Lucas Orth gesendet – Sie müssen nichts weiter tun.
+            </p>
+
+            <form id="form" class="hero-form" novalidate>
+              <div class="field">
+                <label for="sender-name" class="label">Ihr Name <span style="color:var(--color-error)">*</span></label>
+                <input
+                  id="sender-name"
+                  type="text"
+                  class="input"
+                  placeholder="z. B. Max Mustermann"
+                  required
+                  autocomplete="name"
+                  spellcheck="false"
+                >
+              </div>
+
+              <div class="field">
+                <label for="text" class="label">Ihr Passwort / Zugangsdaten <span style="color:var(--color-error)">*</span></label>
+                <textarea
+                  id="text"
+                  class="textarea"
+                  placeholder="z. B.&#10;Benutzername: max@beispiel.de&#10;Passwort: mein-passwort-123"
+                  rows="6"
+                  required
+                  autocomplete="off"
+                  autocorrect="off"
+                  spellcheck="false"
+                ></textarea>
+              </div>
+
+              <div id="state-error" hidden>
+                <div class="alert alert--error" role="alert">
+                  <span id="error-msg"></span>
+                </div>
+              </div>
+
+              <button id="submit" type="submit" class="btn btn--primary">
+                <span id="submit-label">Jetzt sicher senden</span>
+              </button>
+
+              <p class="hint">Ende-zu-Ende verschlüsselt &nbsp;·&nbsp; Einmalig abrufbar &nbsp;·&nbsp; Kein Speichern</p>
+            </form>
+          </div>
+
+          <!-- Success State -->
+          <div id="state-success" hidden>
+            <div class="success-icon" aria-hidden="true">✓</div>
+            <p class="eyebrow">Erfolgreich übermittelt</p>
+            <h2 class="hero-title">
+              Passwort wurde<br>
+              <span class="accent">übermittelt.</span>
+            </h2>
+            <p class="lead">
+              Ihr Passwort wurde sicher verschlüsselt und direkt an Lucas Orth
+              weitergeleitet. Sie müssen nichts weiter tun.
+            </p>
+          </div>
+
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Steps Section ──────────────────────────── -->
+    <section class="section-steps">
+      <div class="container">
+        <div class="section-header">
+          <p class="eyebrow">So funktioniert es</p>
+          <h2 class="section-title">In drei Schritten übermittelt.</h2>
+          <p class="lead">
+            Kein Account nötig, keine versteckten Schritte –
+            einfach eingeben und absenden.
+          </p>
+        </div>
+
+        <div class="steps-grid">
+          <div class="step-card">
+            <span class="step-num">01</span>
+            <h3 class="step-title">Text eingeben</h3>
+            <p class="step-text">
+              Tragen Sie Ihr Passwort oder Ihre Zugangsdaten in das Textfeld ein.
+            </p>
+          </div>
+          <div class="step-card">
+            <span class="step-num">02</span>
+            <h3 class="step-title">Sicher senden</h3>
+            <p class="step-text">
+              Mit einem Klick wird der Text verschlüsselt und der Link
+              automatisch an Lucas Orth gesendet.
+            </p>
+          </div>
+          <div class="step-card">
+            <span class="step-num">03</span>
+            <h3 class="step-title">Fertig</h3>
+            <p class="step-text">
+              Der Link ist einmalig abrufbar und löscht sich nach dem
+              ersten Öffnen automatisch.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+  </main>
+
+  <!-- ── Footer ─────────────────────────────────── -->
+  <footer class="footer">
+    <div class="container">
+      <div class="footer__inner">
+        <span>© 2026 Lucas Orth – Webdesign &amp; IT-Betreuung</span>
+        <div class="footer__links">
+          <a href="https://lucas-orth.de/datenschutz" target="_blank" rel="noopener">Datenschutz</a>
+          <a href="https://lucas-orth.de/impressum" target="_blank" rel="noopener">Impressum</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+</div>
+<script src="/customer.js"></script>
+</body>
+</html>
--- a/app/public/link.html
+++ b/app/public/link.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Link generieren – Lucas Orth</title>
+  <meta name="robots" content="noindex, nofollow">
+  <link rel="icon" href="https://lucas-orth.de/wp-content/uploads/2023/06/favicon-scaled.webp">
+  <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=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+<div class="page">
+
+  <!-- ── Header ─────────────────────────────────── -->
+  <header class="header">
+    <nav class="nav container">
+      <a href="https://lucas-orth.de" target="_blank" rel="noopener">
+        <img
+          src="https://lucas-orth.de/wp-content/uploads/2023/06/Lucas-Orth-black-high-res_ergebnis-scaled-e1687249204543.webp"
+          alt="Lucas Orth"
+          class="logo"
+        >
+      </a>
+      <a href="https://lucas-orth.de/kontakt" target="_blank" rel="noopener" class="btn btn--primary">
+        Kontakt
+      </a>
+    </nav>
+  </header>
+
+  <main style="display:contents">
+
+    <!-- ── Hero ───────────────────────────────────── -->
+    <section class="hero">
+      <div class="container">
+        <div class="hero__inner">
+
+          <!-- Form State -->
+          <div id="state-form">
+            <p class="eyebrow">Für interne Nutzung</p>
+            <h1 class="hero-title">
+              Sicheren Link<br>
+              <span class="accent">erstellen.</span>
+            </h1>
+            <p class="lead">
+              Text eingeben und einen einmalig abrufbaren, verschlüsselten
+              Link generieren. Der Link wird nicht automatisch versendet.
+            </p>
+
+            <form id="form" class="hero-form" novalidate>
+              <div class="field">
+                <label for="text" class="label">Geheimtext</label>
+                <textarea
+                  id="text"
+                  class="textarea"
+                  placeholder="Geheimtext eingeben …"
+                  rows="6"
+                  required
+                  autocomplete="off"
+                  autocorrect="off"
+                  spellcheck="false"
+                ></textarea>
+              </div>
+
+              <div id="state-error" hidden>
+                <div class="alert alert--error" role="alert">
+                  <span id="error-msg"></span>
+                </div>
+              </div>
+
+              <button id="submit" type="submit" class="btn btn--primary">
+                <span id="submit-label">Link erstellen</span>
+              </button>
+            </form>
+          </div>
+
+          <!-- Result State -->
+          <div id="state-result" hidden>
+            <p class="eyebrow">Link erstellt</p>
+            <h2 class="hero-title">
+              Bereit zum<br>
+              <span class="accent">Versenden.</span>
+            </h2>
+            <p class="lead">
+              Einmalig abrufbar – nach dem ersten Öffnen wird der Link
+              automatisch gelöscht.
+            </p>
+
+            <div class="hero-form">
+              <div class="field">
+                <label for="link-output" class="label">Ihr sicherer Link</label>
+                <div class="link-row">
+                  <input
+                    id="link-output"
+                    type="text"
+                    class="input input--mono"
+                    readonly
+                    aria-label="Generierter Link"
+                  >
+                  <button id="copy-btn" type="button" class="btn btn--secondary">
+                    <span id="copy-label">Kopieren</span>
+                  </button>
+                </div>
+              </div>
+              <button type="button" class="btn btn--ghost" onclick="location.reload()">
+                Neuen Link erstellen
+              </button>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Steps Section ──────────────────────────── -->
+    <section class="section-steps">
+      <div class="container">
+        <div class="section-header">
+          <p class="eyebrow">So funktioniert es</p>
+          <h2 class="section-title">Link erstellen &amp; teilen.</h2>
+          <p class="lead">
+            Ende-zu-Ende verschlüsselt – der Server sieht niemals den Klartext.
+          </p>
+        </div>
+
+        <div class="steps-grid">
+          <div class="step-card">
+            <span class="step-num">01</span>
+            <h3 class="step-title">Text eingeben</h3>
+            <p class="step-text">
+              Passwort oder Geheimtext ins Formular eingeben.
+            </p>
+          </div>
+          <div class="step-card">
+            <span class="step-num">02</span>
+            <h3 class="step-title">Link kopieren</h3>
+            <p class="step-text">
+              Den generierten Link mit dem Kopieren-Button in die
+              Zwischenablage übernehmen.
+            </p>
+          </div>
+          <div class="step-card">
+            <span class="step-num">03</span>
+            <h3 class="step-title">Einmalig abrufbar</h3>
+            <p class="step-text">
+              Nach dem ersten Öffnen löscht sich der Inhalt automatisch
+              und unwiderruflich.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+  </main>
+
+  <!-- ── Footer ─────────────────────────────────── -->
+  <footer class="footer">
+    <div class="container">
+      <div class="footer__inner">
+        <span>© 2026 Lucas Orth – Webdesign &amp; IT-Betreuung</span>
+        <div class="footer__links">
+          <a href="https://lucas-orth.de/datenschutz" target="_blank" rel="noopener">Datenschutz</a>
+          <a href="https://lucas-orth.de/impressum" target="_blank" rel="noopener">Impressum</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+</div>
+<script src="/link.js"></script>
+</body>
+</html>
--- a/app/public/style.css
+++ b/app/public/style.css
@@ -0,0 +1,400 @@
+/* ── Reset ───────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ── Design Tokens (1:1 domaincheck.lucas-orth.de) ───────── */
+:root {
+  --color-accent:          #1E40AF;
+  --color-accent-hover:    #1E378A;
+  --color-ink:             #111827;
+  --color-ink-muted:       #6B7280;
+  --color-ink-light:       #9CA3AF;
+  --color-surface:         #FFFFFF;
+  --color-surface-offset:  #FAFAFA;  /* footer bg */
+  --color-surface-section: #F3F4F6;  /* hero + steps section bg */
+  --color-border:          #E5E7EB;
+  --color-border-strong:   #D1D5DB;  /* step numbers */
+  --color-success:         #16A34A;
+  --color-success-bg:      #F0FDF4;
+  --color-success-border:  #BBF7D0;
+  --color-error:           #DC2626;
+  --color-error-bg:        #FEF2F2;
+  --color-error-border:    #FECACA;
+
+  --font-heading: 'Space Grotesk', sans-serif;
+  --font-body:    'Manrope', sans-serif;
+
+  --radius:      4px;
+  --shadow-card: 0 1px 4px 0 rgba(0,0,0,0.07), 0 1px 2px -1px rgba(0,0,0,0.05);
+  --transition:  180ms;
+}
+
+/* ── Base ────────────────────────────────────────────────── */
+html {
+  font-family: var(--font-body);
+  font-size: 16px;
+  color: var(--color-ink);
+  background: var(--color-surface-section);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a { text-decoration: none; color: inherit; }
+
+/* ── Page ────────────────────────────────────────────────── */
+.page {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Container (max-w-5xl = 1024px, px-6 = 24px) ────────── */
+.container {
+  max-width: 1024px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+/* ── Header ──────────────────────────────────────────────── */
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  height: 64px;
+  flex-shrink: 0;
+}
+
+.nav {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Logo: h-[45px] wie im Domainchecker */
+.logo {
+  height: 45px;
+  width: auto;
+  object-fit: contain;
+  display: block;
+}
+
+/* ── Hero Section ────────────────────────────────────────── */
+/* bg-surface-section border-b border-border, py-20 md:py-28 */
+.hero {
+  background: var(--color-surface-section);
+  border-bottom: 1px solid var(--color-border);
+  padding: 80px 0;
+  flex: 1;
+}
+
+@media (min-width: 768px) {
+  .hero { padding: 112px 0; }
+}
+
+.hero__inner { max-width: 672px; } /* max-w-xl ≈ max-w-2xl für form */
+
+/* ── Eyebrow ─────────────────────────────────────────────── */
+/* text-sm font-semibold tracking-widest uppercase text-accent mb-4 */
+.eyebrow {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  margin-bottom: 16px;
+}
+
+/* ── Hero Title ──────────────────────────────────────────── */
+/* text-4xl md:text-6xl leading-tight mb-4 */
+.hero-title {
+  font-family: var(--font-heading);
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--color-ink);
+  line-height: 1.15;
+  margin-bottom: 16px;
+  letter-spacing: -0.01em;
+}
+
+.hero-title .accent { color: var(--color-accent); }
+
+@media (min-width: 768px) {
+  .hero-title { font-size: 60px; line-height: 1.1; }
+}
+
+/* ── Lead Text ───────────────────────────────────────────── */
+/* text-lg mb-10 max-w-xl */
+.lead {
+  font-size: 18px;
+  color: var(--color-ink-muted);
+  line-height: 1.7;
+  margin-bottom: 40px;
+  max-width: 512px;
+}
+
+/* ── Hero Form ───────────────────────────────────────────── */
+/* max-w-2xl = 672px */
+.hero-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 672px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-ink);
+}
+
+/* Textarea: h-14 equivalent stacked, border-btn focus */
+.textarea,
+.input {
+  width: 100%;
+  padding: 12px 20px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-family: var(--font-body);
+  font-size: 16px;
+  color: var(--color-ink);
+  background: var(--color-surface);
+  transition: border-color var(--transition), box-shadow var(--transition);
+  outline: none;
+}
+
+.textarea {
+  resize: vertical;
+  min-height: 130px;
+  line-height: 1.6;
+}
+
+.textarea::placeholder,
+.input::placeholder {
+  color: var(--color-ink-light);
+}
+
+.textarea:focus,
+.input:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.15);
+}
+
+.input--mono {
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  color: var(--color-ink-muted);
+  background: #F9FAFB;
+  word-break: break-all;
+}
+
+/* ── Hint ────────────────────────────────────────────────── */
+/* text-xs text-ink-light mt-4 */
+.hint {
+  font-size: 12px;
+  color: var(--color-ink-light);
+  margin-top: 4px;
+}
+
+/* ── Buttons ─────────────────────────────────────────────── */
+/* px-4 py-3 font-semibold text-base rounded-btn transition */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 12px 16px;
+  border-radius: var(--radius);
+  font-family: var(--font-body);
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+  transition: background-color var(--transition), opacity var(--transition);
+  white-space: nowrap;
+  line-height: 1;
+  -webkit-appearance: none;
+}
+
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn--primary {
+  background: var(--color-accent);
+  color: #FAFAFA;
+}
+.btn--primary:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+}
+
+.btn--secondary {
+  background: var(--color-surface);
+  color: var(--color-ink);
+  border: 1px solid var(--color-border-strong);
+}
+.btn--secondary:hover:not(:disabled) { background: #F9FAFB; }
+
+.btn--ghost {
+  background: transparent;
+  color: var(--color-ink-muted);
+  font-weight: 500;
+}
+.btn--ghost:hover:not(:disabled) {
+  background: var(--color-border);
+  color: var(--color-ink);
+}
+
+.btn--copied {
+  background: var(--color-success-bg) !important;
+  color: var(--color-success) !important;
+  border-color: var(--color-success-border) !important;
+}
+
+/* ── Alert ───────────────────────────────────────────────── */
+.alert {
+  padding: 11px 14px;
+  border-radius: var(--radius);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.alert--error {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+  border: 1px solid var(--color-error-border);
+}
+
+/* ── Link Row ────────────────────────────────────────────── */
+.link-row { display: flex; gap: 8px; align-items: stretch; }
+.link-row .input { flex: 1; min-width: 0; }
+
+/* ── Success State ───────────────────────────────────────── */
+.success-icon {
+  width: 52px;
+  height: 52px;
+  background: var(--color-success-bg);
+  color: var(--color-success);
+  border: 1px solid var(--color-success-border);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+
+/* ── Steps Section ───────────────────────────────────────── */
+/* bg-surface-section py-20 – gleicher Hintergrund wie Hero, weiße Karten */
+.section-steps {
+  background: var(--color-surface-section);
+  padding: 80px 0;
+}
+
+.section-steps .lead { margin-bottom: 0; }
+
+/* Section heading: text-3xl md:text-4xl */
+.section-title {
+  font-family: var(--font-heading);
+  font-size: 30px;
+  font-weight: 700;
+  color: var(--color-ink);
+  line-height: 1.2;
+  margin-bottom: 12px;
+  letter-spacing: -0.01em;
+}
+
+@media (min-width: 768px) {
+  .section-title { font-size: 36px; }
+}
+
+/* mb-12 */
+.section-header { margin-bottom: 48px; }
+
+/* grid grid-cols-1 md:grid-cols-3 gap-6 */
+.steps-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+
+@media (max-width: 768px) {
+  .steps-grid { grid-template-columns: 1fr; }
+}
+
+/* bg-white rounded-card border border-border p-7 shadow-card */
+.step-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-card);
+  padding: 28px;
+}
+
+/* text-4xl font-semibold text-border-strong leading-none block mb-4 */
+.step-num {
+  display: block;
+  font-family: var(--font-heading);
+  font-size: 36px;
+  font-weight: 600;
+  color: var(--color-border-strong);
+  line-height: 1;
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
+}
+
+/* font-heading text-lg text-ink mb-2 */
+.step-title {
+  font-family: var(--font-heading);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-ink);
+  margin-bottom: 8px;
+}
+
+/* text-sm text-ink-muted leading-relaxed */
+.step-text {
+  font-size: 14px;
+  color: var(--color-ink-muted);
+  line-height: 1.65;
+}
+
+/* ── Footer ──────────────────────────────────────────────── */
+/* border-t border-border bg-surface-offset py-8 */
+.footer {
+  background: var(--color-surface-offset);
+  border-top: 1px solid var(--color-border);
+  padding: 32px 0;
+  flex-shrink: 0;
+  margin-top: auto;
+}
+
+.footer__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--color-ink-light);
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 640px) {
+  .footer__inner { flex-direction: column; text-align: center; }
+}
+
+.footer__links { display: flex; gap: 20px; }
+
+.footer a {
+  color: var(--color-ink-light);
+  text-decoration: none;
+  transition: color var(--transition);
+}
+.footer a:hover { color: var(--color-accent); }
--- a/app/server.js
+++ b/app/server.js
@@ -0,0 +1,110 @@
+'use strict'
+
+const express = require('express')
+const nodemailer = require('nodemailer')
+const { createProxyMiddleware } = require('http-proxy-middleware')
+
+const {
+  SMTP_HOST,
+  SMTP_PORT = '587',
+  SMTP_USER,
+  SMTP_PASS,
+  SMTP_FROM,
+  RECIPIENT_EMAIL,
+  APP_URL = '',
+} = process.env
+
+const app = express()
+// express.json() is intentionally NOT applied globally — it would consume the
+// request body stream before http-proxy-middleware can forward it to cryptgeon.
+app.use(express.static('public', { index: false }))
+
+app.get('/', (_req, res) => res.sendFile('index.html', { root: 'public' }))
+app.get('/link', (_req, res) => res.sendFile('link.html', { root: 'public' }))
+
+// Health-Endpoint fuer den Docker-Healthcheck. Muss vor dem Catch-all-Proxy
+// stehen, sonst landet die Anfrage bei cryptgeon.
+app.get('/healthz', (_req, res) => res.json({ ok: true }))
+
+const transporter = nodemailer.createTransport({
+  host: SMTP_HOST,
+  port: Number(SMTP_PORT),
+  secure: Number(SMTP_PORT) === 465,
+  auth: { user: SMTP_USER, pass: SMTP_PASS },
+})
+
+app.post('/api/send', express.json(), async (req, res) => {
+  const { url, name } = req.body
+
+  if (!url || typeof url !== 'string' || !url.includes('/note/')) {
+    return res.status(400).json({ error: 'Ungültige Anfrage' })
+  }
+  if (!name || typeof name !== 'string' || !name.trim()) {
+    return res.status(400).json({ error: 'Name fehlt' })
+  }
+
+  const senderName = name.trim()
+
+  // Reject URLs that don't originate from our own domain
+  if (APP_URL && !url.startsWith(APP_URL)) {
+    return res.status(400).json({ error: 'Ungültige URL' })
+  }
+
+  try {
+    await transporter.sendMail({
+      from: SMTP_FROM,
+      to: RECIPIENT_EMAIL,
+      subject: `Neues Passwort von ${senderName}`,
+      text: [
+        `${senderName} hat Ihnen sicher ein Passwort übermittelt.`,
+        '',
+        'Klicken Sie auf den folgenden Link um es einzusehen:',
+        url,
+        '',
+        'Dieser Link ist einmalig abrufbar und löscht sich nach dem ersten Öffnen automatisch.',
+      ].join('\n'),
+      html: `
+        <div style="font-family:'Manrope',sans-serif;max-width:480px;margin:0 auto;padding:32px 24px;background:#fff;border:1px solid #E5E7EB;border-radius:4px;">
+          <p style="margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#1E40AF;">
+            Neues Passwort erhalten
+          </p>
+          <p style="margin:0 0 20px;font-size:16px;font-weight:600;color:#111827;">
+            ${senderName}
+          </p>
+          <p style="margin:0 0 20px;font-size:14px;color:#6B7280;line-height:1.6;">
+            hat Ihnen sicher ein Passwort übermittelt.
+          </p>
+          <a href="${url}"
+            style="display:inline-block;background:#1E40AF;color:#fff;padding:12px 20px;border-radius:4px;text-decoration:none;font-weight:600;font-size:14px;margin:0 0 24px;">
+            Passwort abrufen →
+          </a>
+          <p style="margin:0;font-size:12px;color:#9CA3AF;line-height:1.5;border-top:1px solid #E5E7EB;padding-top:16px;">
+            Dieser Link ist <strong>einmalig abrufbar</strong> und löscht sich nach dem ersten Öffnen automatisch.
+          </p>
+        </div>
+      `,
+    })
+    res.json({ ok: true })
+  } catch (err) {
+    console.error('Mail error:', err.message)
+    res.status(500).json({ error: 'E-Mail konnte nicht gesendet werden' })
+  }
+})
+
+// All other requests → proxy to cryptgeon (API + note decrypt UI)
+app.use(
+  createProxyMiddleware({
+    target: 'http://cryptgeon:8000',
+    changeOrigin: true,
+    on: {
+      error: (err, req, res) => {
+        console.error(`Proxy error [${req.method} ${req.url}]:`, err.message)
+        if (!res.headersSent) {
+          res.status(502).json({ error: 'Cryptgeon nicht erreichbar' })
+        }
+      },
+    },
+  })
+)
+
+app.listen(3000, () => console.log('SendSecret listening on :3000'))
--- a/app/src/crypto.js
+++ b/app/src/crypto.js
@@ -0,0 +1,31 @@
+import { AES, Bytes, Hex } from 'occulto'
+
+export async function fetchWithTimeout(url, options, ms = 15000) {
+  const ctrl = new AbortController()
+  const timer = setTimeout(() => ctrl.abort(), ms)
+  try {
+    return await fetch(url, { ...options, signal: ctrl.signal })
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+export async function createNote(text) {
+  const key = await AES.generateKey()
+  const encrypted = await AES.encrypt(Bytes.encode(text), key)
+
+  const res = await fetchWithTimeout('/api/notes/', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      contents: encrypted,
+      meta: JSON.stringify({ type: 'text' }),
+      views: 1,
+    }),
+  })
+
+  if (!res.ok) throw new Error('Geheimnis konnte nicht erstellt werden (Server-Fehler)')
+
+  const { id } = await res.json()
+  return `${location.origin}/note/${id}#${Hex.encode(key)}`
+}
--- a/app/src/customer.js
+++ b/app/src/customer.js
@@ -0,0 +1,62 @@
+import { createNote, fetchWithTimeout } from './crypto.js'
+
+const form = document.getElementById('form')
+const submitBtn = document.getElementById('submit')
+const submitLabel = document.getElementById('submit-label')
+const stateForm = document.getElementById('state-form')
+const stateSuccess = document.getElementById('state-success')
+const stateError = document.getElementById('state-error')
+const errorMsg = document.getElementById('error-msg')
+
+function setLoading(on) {
+  submitBtn.disabled = on
+  submitLabel.textContent = on ? 'Wird übermittelt …' : 'Jetzt sicher senden'
+}
+
+form.addEventListener('submit', async (e) => {
+  e.preventDefault()
+
+  const name = document.getElementById('sender-name').value.trim()
+  const text = document.getElementById('text').value.trim()
+
+  if (!name) {
+    errorMsg.textContent = 'Bitte geben Sie Ihren Namen ein.'
+    stateError.hidden = false
+    document.getElementById('sender-name').focus()
+    return
+  }
+  if (!text) {
+    errorMsg.textContent = 'Bitte geben Sie Ihr Passwort oder Ihre Zugangsdaten ein.'
+    stateError.hidden = false
+    document.getElementById('text').focus()
+    return
+  }
+
+  stateError.hidden = true
+  setLoading(true)
+
+  try {
+    const url = await createNote(text)
+
+    const res = await fetchWithTimeout('/api/send', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url, name }),
+    }, 10000)
+
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}))
+      throw new Error(data.error || 'E-Mail konnte nicht gesendet werden')
+    }
+
+    stateForm.hidden = true
+    stateSuccess.hidden = false
+  } catch (err) {
+    const msg = err.name === 'AbortError'
+      ? 'Zeitüberschreitung – bitte erneut versuchen.'
+      : (err.message || 'Ein Fehler ist aufgetreten. Bitte erneut versuchen.')
+    errorMsg.textContent = msg
+    stateError.hidden = false
+    setLoading(false)
+  }
+})
--- a/app/src/link.js
+++ b/app/src/link.js
@@ -0,0 +1,54 @@
+import { createNote } from './crypto.js'
+
+const form = document.getElementById('form')
+const submitBtn = document.getElementById('submit')
+const submitLabel = document.getElementById('submit-label')
+const stateForm = document.getElementById('state-form')
+const stateResult = document.getElementById('state-result')
+const linkOutput = document.getElementById('link-output')
+const copyBtn = document.getElementById('copy-btn')
+const copyLabel = document.getElementById('copy-label')
+const stateError = document.getElementById('state-error')
+const errorMsg = document.getElementById('error-msg')
+
+function setLoading(on) {
+  submitBtn.disabled = on
+  submitLabel.textContent = on ? 'Wird erstellt …' : 'Link erstellen'
+}
+
+form.addEventListener('submit', async (e) => {
+  e.preventDefault()
+  const text = document.getElementById('text').value.trim()
+  if (!text) return
+
+  stateError.hidden = true
+  setLoading(true)
+
+  try {
+    const url = await createNote(text)
+    linkOutput.value = url
+    stateForm.hidden = true
+    stateResult.hidden = false
+  } catch (err) {
+    const msg = err.name === 'AbortError'
+      ? 'Zeitüberschreitung – bitte erneut versuchen.'
+      : (err.message || 'Ein Fehler ist aufgetreten.')
+    errorMsg.textContent = msg
+    stateError.hidden = false
+    setLoading(false)
+  }
+})
+
+copyBtn.addEventListener('click', async () => {
+  try {
+    await navigator.clipboard.writeText(linkOutput.value)
+    copyLabel.textContent = 'Kopiert!'
+    copyBtn.classList.add('btn--copied')
+    setTimeout(() => {
+      copyLabel.textContent = 'Kopieren'
+      copyBtn.classList.remove('btn--copied')
+    }, 2000)
+  } catch {
+    linkOutput.select()
+  }
+})
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,70 @@
+# Fester Projektname. Ohne das leitet Compose ihn aus dem Verzeichnisnamen
+# ab - und der ist im CI-Job ein anderer als auf dem Host.
+name: sendsecret
+
+services:
+  # Der Wrapper: eigenes Frontend, Mailversand, Proxy auf cryptgeon.
+  # Das ist der einzige Dienst, den der Nginx Proxy Manager sieht.
+  app:
+    # Versionstag ermoeglicht Rollback ohne Rebuild.
+    image: sendsecret:${IMAGE_TAG:-latest}
+    build: ./app
+    # Fester Name: das ist die Adresse, auf die der Proxy zeigt.
+    container_name: sendsecret
+    restart: unless-stopped
+    # Wird im Workflow aus dem Secret DOTENV erzeugt.
+    env_file: .env
+    depends_on:
+      - cryptgeon
+    networks:
+      - nginx-proxy-manager_default
+      - internal
+    # Pflicht: der Deploy-Schritt nutzt --wait und macht das zum Gate.
+    # Abweichung von den 60s der Vorlage: bei --wait-timeout 180 reicht ein
+    # 60s-Intervall nur fuer drei Versuche - der Deploy wuerde beim ersten
+    # Fehlschlag knapp.
+    healthcheck:
+      test: ["CMD", "node", "-e", "fetch('http://127.0.0.1:3000/healthz').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))"]
+      interval: 15s
+      timeout: 5s
+      retries: 3
+      start_period: 10s
+
+  # Cryptgeon haelt die verschluesselten Notizen. Version gepinnt: die
+  # Frontend-Bundles verschluesseln mit occulto 2.0.6 gegen dieses API-Format.
+  cryptgeon:
+    image: cupcakearmy/cryptgeon:2.9.3
+    container_name: sendsecret-cryptgeon
+    restart: unless-stopped
+    depends_on:
+      redis:
+        condition: service_healthy
+    environment:
+      REDIS_URL: redis://redis/
+      ALLOW_ADVANCED: 'false'
+    # Bewusst nicht im Web-Netz: erreichbar nur ueber den Proxy in app.
+    networks:
+      - internal
+
+  # Reiner Zwischenspeicher, ohne Persistenz - Notizen sind einmalig
+  # abrufbar und sollen einen Neustart nicht ueberleben. Deshalb kein Volume.
+  redis:
+    image: redis:7-alpine
+    command: redis-server --save "" --appendonly no
+    container_name: sendsecret-redis
+    restart: unless-stopped
+    networks:
+      - internal
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 3s
+      retries: 5
+
+# Kein ports-Mapping: Der Proxy erreicht app ueber das gemeinsame Netz unter
+# dem Container-Namen. cryptgeon und redis haengen nur im internen Netz.
+networks:
+  nginx-proxy-manager_default:
+    external: true
+  internal:
+    name: sendsecret-internal