# Vorlage: Kurs-Zusammenfassung -> `index.html` (Hausstil „Klausur-Guide")
**Zweck:** Aus einer fertigen Zusammenfassung eine Kurs-Seite bauen, die optisch
**identisch** zu den bestehenden Guides im Archiv aussieht (heller Pergament-Stil,
Indigo-Leitfarbe, Space Grotesk / Inter / JetBrains Mono) und sauber als **PDF**
gedruckt werden kann.
**So benutzt du diese Datei:** Kopiere alles ab der Linie **„PROMPT START"** bis zum
Ende in einen beliebigen KI-Chat, haenge deine fertige Zusammenfassung darunter an,
schick es ab. Die KI gibt dir eine fertige `index.html` zurueck.
Die Datei legst du in den Kursordner: `/Studienrichtung/Semester/Kurs/index.html`
-> der Kurs erscheint dann automatisch im Archiv.
---
## ============== PROMPT START ==============
Du bekommst weiter unten eine **Klausur-Zusammenfassung**. Baue daraus **eine einzige,
vollstaendige `index.html`** im unten definierten **Hausstil**. Gib **nur den HTML-Code**
aus, ohne Erklaerung, ohne Markdown-Backticks.
### Harte Regeln
1. **Eine einzige Datei**, alles inline. Keine lokalen Assets. Muss in jedem Unterordner
funktionieren.
2. **Stil-Geruest unten 1:1 uebernehmen** — Schriften, Farben (`:root`), alle CSS-Klassen,
das MathJax-Setup **und** das Auto-Fit-Skript fuer Formeln. Nichts davon weglassen oder
umbenennen; nur den Inhalt einsetzen.
3. **Inhalt vollstaendig** uebernehmen — nichts erfinden, nichts streichen. Nur in die
vorhandenen Bausteine einordnen.
4. **Mathe** mit MathJax: inline `$ ... $`, abgesetzt `$$ ... $$`.
5. Saubere Ueberschriften-Hierarchie (`h1` -> `h2` -> `h3` -> `h4`), sichtbarer Fokus,
responsive (Breakpoint 720px ist im CSS schon angelegt).
### Bausteine (welche Box wofuer)
- **`.erklaer`** (amber, mit Emoji-`.ico`): lockere Einleitung „Was mache ich hier und warum?".
- **`.ref`** (weisse Karte, gestrichelte Trenner): Formel-/Regelsammlung. Pro Regel ein
`.rule` mit `.rname` (Kurzname in Mono) + Formel.
- **`.grid`** mit **`.weg`** (Rechenweg, breitere Spalte) **+ `.safe`** (Indigo-Kasten
„Klausur-Safe": exakt das, was aufs Klausurblatt muss). Im Druck stapeln sich beide
automatisch untereinander.
- **`.beispiel`** (gruen): komplett durchgerechnete Aufgabe. Einzelschritte als `.schritt`
mit `.stitle`; Endergebnis in `.result`.
- **`.achtung`** (rot): kurze Warnung / typische Fehler.
- Jede Aufgabe ist eine `.aufgabe`-`` mit Kopf `.a-head` (`.a-num` = Nummernkreis,
`.a-titles` = Eyebrow + `h2`). Die Indigo-Linie am linken Rand ist die „Leitlinie" durch
die Klausur.
### Pflicht-Struktur (Body-Skelett — fuell die Platzhalter)
```html
```
---
## *** REGELN ZUR PDF-ERSTELLUNG (sehr wichtig) ***
Das PDF entsteht ueber **Browser -> Drucken -> „Als PDF speichern"**, kein PDF-Generator.
Die folgenden Regeln **stecken bereits im `@media print`-Block des Stil-Geruests** und
**muessen erhalten bleiben**:
- `@page { size:A4; margin:14mm 14mm 16mm; }`, im Druck **weisser Hintergrund**.
- **Toolbar** (inkl. „Archiv"-Link & PDF-Button) wird ausgeblendet — landet nie im PDF.
- **Zweispaltiges `.grid` wird im Druck einspaltig** -> Rechenweg und Klausur-Safe nutzen
die volle Breite, nichts wird abgeschnitten.
- **Jede `.aufgabe` beginnt auf einer neuen Seite** (`break-before:page`), die erste nicht.
- **Boxen werden nie mitten durchgeschnitten** (`break-inside:avoid` fuer
`.erklaer .ref .achtung .chip .schritt .beispiel .safe`); passt eine Box nicht mehr aufs
Seitenende, rutscht sie komplett auf die naechste Seite.
- **Farbige Kopfzeilen** (`.b-head .safe-head`) bleiben mit ihrem Inhalt zusammen
(`break-after:avoid`) — keine verwaisten Koepfe am Seitenende.
- **Keine Waisen-/Hurenkinder**: `p, li { orphans:3; widows:3; }`.
- **Formeln** werden per Auto-Fit-Skript an die A4-Breite skaliert, statt abgeschnitten zu
werden — das Skript `__fitMath` daher unbedingt mit uebernehmen.
**Selbsttest vor der Ausgabe:** weisser Grund, keine abgeschnittenen Formeln/Kaesten, jede
Aufgabe auf eigener Seite, keine einsame Kopfzeile am Seitenende, kein Button im PDF.
---
## HIER DAS STIL-GERUEST — 1:1 in den `` uebernehmen
(Fonts + MathJax-Setup + Auto-Fit-Skript + komplettes `
```
### Optional: `meta.json` neben die `index.html` (schoenerer Titel im Archiv)
```json
{ "titel": "Analysis", "beschreibung": "Kurz, worum es geht" }
```
## ============== PROMPT ENDE ==============
**Hier folgt meine Zusammenfassung:**
> *(Hier deine fertige Zusammenfassung einfuegen.)*