# Anleitung für KI-Agenten: Inhalte für dieses Vortragssystem erzeugen

Dieses Repository trennt **Motor** (`engine/`) und **Inhalt** (`talks/<name>/`).
Ändere für einen neuen Vortrag **niemals** `engine/deck.js` oder `engine/deck.css` —
lege einen Ordner unter `talks/` an. Der Motor bringt Navigation, Referentenansicht,
Notizen, Timer, Laserpointer und Vollbild schon mit.

## Neuen Vortrag anlegen

```
talks/<kurzname>/index.html     Pflicht — enthält nur Folien und die Konfiguration
talks/<kurzname>/viz.js         optional — eigene Live-Grafiken
talks/<kurzname>/slides/*.jpg   optional — Bildfolien
```

Kopiere als Gerüst `talks/adfmr/index.html` (HTML-Folien) oder `talks/_template_image.html`
(Bildfolien). Konfiguration steht ganz oben im `<head>`:

```html
<script>
  window.DECK = { footer: 'D. Süß — Titel des Vortrags — Anlass', datum: '12. September 2026' };
</script>
```

`footer` erscheint zentriert in der Fußzeile jeder Folie, `datum` links; rechts zählt der
Motor „Folie N“. Pflicht-Einbindungen am Ende des `<body>`:

```html
<script src="../../engine/deck.js"></script>
<script src="viz.js"></script>   <!-- nur wenn es eigene Grafiken gibt -->
```

Kopiere die Blöcke `#black`, `#laser`, `#grid`, `#help`, `#fsbtn` und `#pres` unverändert aus
einer bestehenden Vortragsdatei — der Motor erwartet diese Bedienelemente.

## Folienarten

**Titelfolie** (einmal, ganz am Anfang):

```html
<section class="slide title" data-notes="Was du zur Begrüßung sagst.">
  <img class="logo" src="../../engine/logo-uniwien.jpg" alt="Universität Wien">
  <div class="band bandtop">
    <h1>Titel des Vortrags</h1>
    <p class="lede">Untertitel in einer Zeile</p>
  </div>
  <div class="pic"><img src="../../engine/title-uniwien.jpg" alt=""></div>
  <div class="band bandbot"><span><strong>D. Süß</strong> · Universität Wien</span>
    <span style="margin-left:auto">September 2026</span></div>
</section>
```

**Inhaltsfolie:**

```html
<section class="slide" data-notes="Sprechnotiz: was gesagt wird, nicht was dasteht.">
  <img class="logo" src="../../engine/logo-uniwien.jpg" alt=""><div class="ftitle">Folientitel</div>
  <div class="body">
    <p>Fließtext.</p>
    <p class="frag">Erscheint erst beim nächsten Tastendruck.</p>
  </div>
</section>
```

**Bildfolie** (eine Seite eines LaTeX-PDF):

```html
<section class="slide" data-src="slides/p07.jpg" data-title="Titel für die Übersicht"
         data-notes="Sprechnotiz"></section>
```

## Bausteine im `.body`

| Klasse | Zweck |
|---|---|
| `.frag` | Aufbauschritt — wird einzeln eingeblendet, beliebig viele pro Folie |
| `.two` / `.two.wide` | zwei Spalten (gleich breit / 60:40) |
| `.statrow` + `.big` + `.lbl` | drei große Kennzahlen mit Bildunterschrift |
| `ol.steps` mit `li > h3 + p` | nummerierte Kette, blaue Kreise |
| `.cards` mit `div > h3 + p` | vier Kacheln mit blauer Oberlinie |
| `.block` | hervorgehobener Kasten, hellblau mit blauem Balken |
| `table > thead/tbody`, `td.n` | Tabelle im CD; `td.n` = Zahlenspalte, blau, dicktengleich |
| `.num` | Zahl oder Formelstück im Fließtext |
| `.dim` | Nebensatz in Grau |

## Corporate Design — verbindlich

Farben stehen als CSS-Variablen bereit, benutze **keine** eigenen Hexwerte:
`--blau #0063A6` (Universitätsblau), `--grau #666666`, `--schrift #032138` (Blauschwarz,
Standard-Textfarbe), Sekundärfarben `--orangerot #E65640`, `--mint #2BA4A6`, `--gelb #FFDC4C`.
Das Manual erlaubt **höchstens drei** vollflächige Sekundärfarben pro Dokument.
Schrift ist **Source Sans 3**, Zahlen und Code in **Source Code Pro**.
Das Logo behält seine Schutzzone von einem Drittel der Logohöhe — Position und Größe
sind im CSS festgelegt, nicht überschreiben.

## Sprechnotizen

Jede Folie bekommt `data-notes`. Schreibe **was gesagt wird**, nicht was auf der Folie steht:
Kernaussage, die Zahl, die man nennt, der Übergang zur nächsten Folie. Zwei bis vier Sätze.
Die Notizen sieht nur der Vortragende.

## Eigene Live-Grafiken (`viz.js`)

```js
Deck.registerViz('meinbild', (cv, t) => {      // t = Zeit in ms für Animationen
  const {c, w, h} = Deck.setup(cv);            // Canvas-Cache des Motors, weißer Grund
  c.strokeStyle = '#0063A6';
  // ... zeichnen ...
});
Deck.onSync(state => { /* data-out-Felder nachführen */ });
```

Auf der Folie:

```html
<div class="viz">
  <canvas data-viz="meinbild" width="1120" height="420"></canvas>
  <div class="rangerow">
    <label for="r1">Feldstärke</label><b data-out="B">10,0 mT</b>
    <input id="r1" type="range" min="0" max="30" step="0.1" value="10" data-bind="B">
  </div>
</div>
```

`width`/`height` am `<canvas>` legen nur das Seitenverhältnis fest; der Motor skaliert
auf die Anzeige, legt den Pixelpuffer nur bei Größenänderung neu an und animiert
ausschließlich die sichtbare Folie. Regler mit `data-bind="X"` schreiben nach
`Deck.state.X` und werden zwischen Steuer- und Beamerfenster synchronisiert.

**Regeln für Grafiken:** in jedem Bild neu zeichnen ist erlaubt, aber niemals
`canvas.width` selbst setzen (das macht `Deck.setup`). Keine externen Bibliotheken laden —
das Deck muss offline im Hörsaal laufen. Schriftgrößen nicht unter 13 px.

## Häufige Fehler

* Eigene `<style>`-Blöcke mit neuen Farben → CD-Bruch, stattdessen die Variablen nutzen.
* Mehr als etwa 40 Wörter pro Folie → unlesbar ab der dritten Reihe.
* `position:absolute` im `.body` → bricht die Skalierung auf andere Bildschirme.
* Bilder als `<img>` ohne feste Höhe in einer `.two`-Spalte → Folie wird zu hoch.
* Dateien in `engine/` ändern, um eine einzelne Folie hinzubiegen.

## Prüfen vor der Abgabe

1. `node --check talks/<name>/viz.js` (falls vorhanden).
2. Vortrag im Browser öffnen: startet in der Referentenansicht, `O` zeigt alle Folien.
3. Jede Folie: passt der Inhalt ohne Scrollbalken in die 1280×720-Bühne?
4. Sprechnotizen auf jeder Folie vorhanden?

## Frageleiste unter jeder Folie

Der Motor kann unter jede Folie eine Zeile setzen, in die ein Leser eine Frage
zu **dieser** Folie tippt. Die Foliennummer geht mit; im Vollbild (Projektion)
ist die Leiste unsichtbar.

Einschalten in `window.DECK`:

```js
frage: { wissen: 'kb.md' }      // Datei neben index.html
```

`kb.md` ist alles, was der Assistent wissen darf: Folientexte, der relevante
Teil des Manuskripts, die Zahlen — und ausdrücklich das, was er **nicht** sagen
soll ("Die Wechselwirkungsdaten sind unveröffentlicht, keine Zahlen nennen").

Beim Erstellen eines Vortrags: `kb.md` mitschreiben, sobald es ein Manuskript
gibt. Die Folientexte hineinkopieren, jede Folie mit `----- SLIDE n -----`
überschrieben, damit der Assistent auf Foliennummern verweisen kann.

**Schlüssel:** Der Leser hinterlegt beim ersten Mal seinen eigenen
Anthropic-Schlüssel; er bleibt in dessen Browser. Alternativ ein eigener
Server: `frage: { talk: '<id>', endpoint: 'https://.../api/frage' }`.

**Vorsicht:** Was in `kb.md` steht, kann jeder auslesen, der den Vortrag
öffnet. Unveröffentlichtes gehört nicht hinein — oder der Vortrag hinter ein
Passwort.

**Navigation:** Im Vortrag und in der Referentenansicht springt eine getippte Foliennummer mit Enter (oder nach 1,2 s Pause) direkt auf diese Folie; Esc bricht ab.