# CLAUDE_CODE_HANDOVER — PHINEO Workshop 02 toolkit

> **If you are Claude Code: read this whole file first.** The person you are helping (Katha) is **not a developer**. She will ask for changes in plain language ("make slide 3 say X", "re-render the German video", "export the deck to PDF"). Your job is to set up the environment, make the change, rebuild the affected file, and show her the result. Do the technical work yourself — never ask her to run commands.

---

## What this project is
The deliverables for **Workshop 02 — "Smart Citizenship: AI as a lever for social impact"** (PHINEO; ~20 DACH corporate-citizenship/CSR managers; 11 June 2026). Everything exists in **English and German**:

- **Workshop deck** — interactive 8-slide HTML deck (+ PDF export).
- **Field guide / Spickzettel** — 2-page A4 take-home cheat-sheet HTML (+ PDF).
- **Demo video** — a ~93s animated Remotion video: the post-flight checklist as a chat, "AI advises — you decide, and you sign."
- **Presentation script** — per-slide speaker text.

The spine of everything, never change it: **"AI advises — you decide, and you sign."** / German: **"Die KI berät – Sie entscheiden, und Sie unterschreiben."**

---

## File map
```
ai_toolkit/
├── design/
│   ├── workshop_deck.html        ← EN deck (needs deck-stage.js next to it)
│   ├── workshop_deck_de.html     ← DE deck
│   ├── deck-stage.js             ← the deck engine (don't edit unless asked)
│   ├── field_guide.html          ← EN field guide (2-page A4 print)
│   └── field_guide_de.html       ← DE field guide
├── demo_remotion/                ← the video project (Remotion / React)
│   ├── src/Demo.tsx              ← EN demo  (composition id "Demo")
│   ├── src/Demo_de.tsx           ← DE demo  (composition id "DemoDE")
│   ├── src/Root.tsx              ← registers both compositions, durationInFrames=2800
│   └── package.json
├── presentation_script_en.md / _de.md
├── german_glossary.md            ← CANONICAL German terms — obey it for any DE edit
├── _versions/                    ← timestamped backups (keep adding to it)
└── *.mp4 / *.pdf                 ← the built outputs
```

---

## Remote environment setup (do this once, yourself)
This runs in a cloud/remote environment — nothing is installed on Katha's laptop. You need:

1. **Node.js 18+** (for the video). Then:
   ```bash
   cd demo_remotion && npm install
   ```
2. **A Chromium/Chrome browser** (for PDF export and rendering the deck). Most cloud envs have `google-chrome` or `chromium`. If missing, install chromium.
3. *(optional, for self-checks)* **ffmpeg** (grab a frame from a video) and **poppler/pdftoppm** (turn a PDF page into an image to verify).

If a tool is missing, install it or tell Katha one line: "I need X in this environment — shall I install it?"

---

## How to build each thing

**Re-render the demo video** (from `demo_remotion/`):
```bash
# English
npx remotion render src/index.ts Demo   out/demo_checklist_en.mp4 --concurrency=2
# German
npx remotion render src/index.ts DemoDE out/demo_checklist_de.mp4 --concurrency=2
```
Then copy the result up to `ai_toolkit/` and (if serving) to the serve folder. The video is **1920×1080, 30 fps, 2800 frames (~93s)**. Timing is frame-based — every animation is keyed to a frame number inside `Demo.tsx`. If you change wording, the layout reflows automatically; if you change timing, keep `durationInFrames` in `Root.tsx` in sync.

**Export the deck to PDF** (headless Chrome; the deck and `deck-stage.js` must be in the same folder):
```bash
google-chrome --headless --disable-gpu --no-pdf-header-footer \
  --virtual-time-budget=4000 --print-to-pdf=workshop_deck.pdf \
  "file:///ABSOLUTE/PATH/workshop_deck.html"
```
**Export the field guide to PDF** (same, omit `--virtual-time-budget`):
```bash
google-chrome --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf=field_guide.pdf "file:///ABSOLUTE/PATH/field_guide.html"
```
**Preview the deck/guide:** just open the HTML file in a browser. Deck controls: arrow keys, thumbnail rail, and it prints to PDF from the browser too.

**Always verify visually** after a change: render the PDF/video, turn a page/frame into an image, and look at it before telling Katha it's done.

---

## House rules (do not break)
- **No em-dash.** Never use "—". Use a hyphen "-". (Project-wide rule, EN and DE.)
- **German terminology is fixed.** For any German edit, use `german_glossary.md` verbatim — the mantra, the checklist items (Vorab-Check / Final-Check), the slide titles, the legal terms (DSGVO, AV-Vertrag, DSFA, Betriebsrat). Keep DE and EN saying the same thing.
- **Back up before editing the demo.** Copy `src/Demo.tsx` (or `Demo_de.tsx`) into `_versions/` with a new name first, so nothing is ever lost.
- **Fixed layouts clip.** The field guide is a fixed 2-page A4 and the deck slides are fixed 1920×1080 — if you add text, re-render and check it didn't overflow; tighten wording or spacing rather than letting it clip. (German runs ~10% longer than English — watch slides 3 and 5, and the field-guide page-1 footnote.)
- **Brand:** petrol `#20383A`, lime `#94C11F`, teal `#298294`, paper `#F4F2EC`; fonts **Besley** (serif headlines) + **Inter** (body). Lime is the single accent.

---

## Status
- **English set:** final/locked.
- **German set:** complete and rendered; layout verified. Open task if asked: a final native-German proofreading pass on wording/tone (the meaning and terms are locked; only phrasing could be polished). The field-guide footnote and slide-5 footer were slightly condensed in German to fit the fixed layout.

## Good first message for Katha to send you
> "Read CLAUDE_CODE_HANDOVER.md, set up the environment (install the video tools, confirm a browser for PDFs), then give me a short list of things I can ask you to change in plain English."