UI/UX Spec · Implementation-ready

# Transkriptions-Richtlinien — editorial conventions page

Static help page at `/hilfe/transkription` that collects the family archive's transcription conventions — the questions Wikipedia's Kurrent alphabet page cannot answer. Companion to #320 (guided empty state for the Transcribe panel). Replaces the original "Kurrent primer" from that issue, which would have duplicated Wikipedia without adding value.

The page is content-heavy but low on content — only five rules in v1. The design problem is making a thin page feel intentional rather than under-built, and making reference content fun to read so transcribers actually read it. Solved via a card grid, per-rule Beispiel boxes with Kurrent SVG fragments, and family-voice prose with named fictional relatives.

Leonie Voss · 2026-04-24 · Final spec · Companion to issue #320
feature ui a11y 320px+ light + dark print styles no backend

## Page structure

One prerendered SvelteKit route. Five sections stacked vertically. No interactive state, no forms, no SSR data-loading. Pure content — the kind of page that ships with `export const prerender = true;` and lives as static HTML at build time.

1
Header
Title + warm 2-sentence intro (family voice). Names fictional relatives to prime mental model.
↓
2
Wikipedia info-card
Light visual weight. Explicitly scopes: "the alphabet is out there; here are our rules."
↓
3
Rule cards grid
5 cards, 3-col / 2-col / 1-col. Each card: icon, title, explanation, Beispiel box with Kurrent SVG ↔ output.
↓
4
"Noch in Klärung"
Full-bleed sand-tinted strip. 4 dashed-pill chips for open questions.
↓
5
Closing invitation
"Fehlt eine Regel?" Turns help page into collaborative document.
Primary view

## Desktop, 1280px, light theme

The canonical rendering. Three-column card grid fills horizontal space so the page feels like a deliberate collection, not a thin list. Each Beispiel box is hand-drawn per rule — a smudge for unleserlich, a strikethrough for durchgestrichen, a stylised ſ for the long-s, etc. Reader's eye moves rule → example → rule → example, which is the cadence that keeps reference content readable.

desktop · 1280 Light
1280 · Desktop · Light
Transkriptions-Richtlinien
Damit alle Briefe einheitlich transkribiert werden — egal ob Tante Hedwig oder Cousin Paul tippt — hier unsere Regeln. Die Seite wächst mit: sobald wir eine neue Konvention beschließen, landet sie hier.
i
Das vollständige Kurrent- und Sütterlin-Alphabet brauchen Sie für diese Seite nicht — das erledigt Wikipedia → (öffnet in neuem Tab). Hier sind unsere eigenen Regeln für das, was Wikipedia nicht beantwortet.
Regeln für die Transkription
🔍
Nicht lesbare Wörter
Wenn Sie ein Wort beim besten Willen nicht entziffern können, schreiben Sie `[unleserlich]`.
Beispiel
→ [unleserlich]
✂
Durchgestrichene Wörter
Auch durchgestrichener Text gehört zum Brief. Schreiben Sie ihn in eckigen Klammern mit Präfix `durchgestrichen:`.
Beispiel
→ [durchgestrichen: gestern]
ſ
Das lange s (ſ)
Das ſ ist nur eine alte Schriftform des Buchstabens s — kein eigener Laut. Schreiben Sie immer ein normales s.
Beispiel
→ Sommers
?
Unsichere Namen
Wenn Sie einen Namen zu erkennen meinen, aber nicht sicher sind, ergänzen Sie ein Fragezeichen in eckigen Klammern.
Beispiel
→ [Müller?]
🌍
Dialekt, Fremdwörter, Zitate
Plattdeutsch, Französisch, lateinische Phrasen — wörtlich übernehmen, genau wie sie geschrieben stehen.
Beispiel
→ pardonnez-moi
Noch in Klärung
Diese Fragen klären wir noch — stoßen Sie beim Transkribieren darauf, treffen Sie eine plausible Wahl und notieren Sie es in den Kommentaren:
〰 Abkürzungen 〰 Datumsformate 〰 Zeilenumbrüche 〰 Groß-/Kleinschreibung

#### Fehlt eine Regel?

Stolpern Sie beim Transkribieren über eine Situation, die hier nicht steht — schreiben Sie einen Kommentar beim betreffenden Block. Wir sammeln sie beim nächsten Familientreffen.

1Header tone
Family-voice intro naming fictional relatives ("Tante Hedwig", "Cousin Paul"). Primes the reader that this is our rulebook, not a corporate style guide.
2Wikipedia scope-card
Lighter visual weight than rule cards (3px mint left-border, no full shadow). Signals external reference vs. our-own rule.
33-col rule grid
3+2 layout at desktop fills horizontal space without padding content. Each card is self-contained; the grid reads as a collection.
4Beispiel box
Aged-paper bg + dashed border + Kurrent SVG → mint arrow → monospace output. Makes each rule concrete in one glance. Unique drawing per rule.
5Noch in Klärung strip
Full-bleed sand-muted band (not another card). Dashed pill chips signal "open, not decided". Collaborative tone with "plausible Wahl treffen…".
6Closing invitation
"Fehlt eine Regel?" invites the reader to contribute. Users who contribute rules are users who read them.
Theme parity

## Desktop, 1280px, dark theme

Every semantic token is remapped — no filter-inversion. The Beispiel boxes switch to a muted mint-tinted background so the Kurrent strokes (#2a2a2a in light → kept dark against the dark paper) need a contrast check. See the a11y block for exact ratios.

desktop · 1280 Dark
1280 · Desktop · Dark
Transkriptions-Richtlinien
Damit alle Briefe einheitlich transkribiert werden — egal ob Tante Hedwig oder Cousin Paul tippt — hier unsere Regeln.
i
Das vollständige Kurrent-Alphabet brauchen Sie nicht — Wikipedia → (neuer Tab). Hier sind unsere eigenen Regeln.
Regeln für die Transkription
🔍
Nicht lesbare Wörter
Wenn Sie ein Wort nicht entziffern können: `[unleserlich]`.
Beispiel
→[unleserlich]
✂
Durchgestrichene Wörter
In eckigen Klammern mit `durchgestrichen:`.
Beispiel
→[durchgestrichen: gestern]
ſ
Das lange s (ſ)
Immer als normales s schreiben.
Beispiel
→Sommers
?
Unsichere Namen
Fragezeichen in eckigen Klammern.
Beispiel
→[Müller?]
🌍
Dialekt & Fremdwörter
Wörtlich übernehmen — nicht anpassen.
Beispiel
→pardonnez-moi
Noch in Klärung
Diese Fragen klären wir noch — plausible Wahl + Kommentar.
〰 Abkürzungen 〰 Datumsformate 〰 Zeilenumbrüche 〰 Groß-/Kleinschreibung

#### Fehlt eine Regel?

Kommentieren Sie beim betreffenden Block — wir besprechen sie beim nächsten Familientreffen.

Responsive

## Tablet & mobile (the audience that actually reads this page)

Per-project memory: transcribers are 60+ on laptop/tablet, readers (younger) are on phones. The Richtlinien page is shared between both audiences — a family member on a phone may pull it up mid-conversation to settle a convention. So responsive coverage is a correctness requirement, not a polish item.

tablet · 768 Light 2-col grid · full-bleed strip unchanged
768 · Tab · Light
Transkriptions-Richtlinien
Damit alle einheitlich transkribieren — Tante Hedwig, Cousin Paul, alle anderen.
i
Alphabet: Wikipedia → (neuer Tab)
Regeln
🔍
Nicht lesbare Wörter
`[unleserlich]`.
✂
Durchgestrichen
`[durchgestrichen: Wort]`.
ſ
Das lange s
Immer als s.
?
Unsichere Namen
`[Müller?]`.
🌍
Dialekt & Fremdwörter
Wörtlich übernehmen.
Noch in Klärung
〰 Abkürzungen〰 Datumsformate〰 Zeilenumbrüche〰 Groß/Klein
mobile · 375 Light 1-col stack · chips wrap to 2 rows
375 · Mob
Transkriptions-Richtlinien
Unsere Regeln, damit alle einheitlich tippen.
i
Wikipedia →
Regeln
🔍
Nicht lesbar
`[unleserlich]`
✂
Durchgestrichen
`[durchgestrichen: Wort]`
ſ
Langes s
Als s schreiben.
Noch in Klärung
〰 Abkürz.〰 Datum〰 Umbrüche
@media print

## Print view — Reference für den Schreibtisch

Seniors print reference material. The family archivist may also export the page as PDF and e-mail it before a transcription session. Print styles drop the brand chrome, switch to black-on-white for ink economy, remove external-link annotations ("neuer Tab" makes no sense on paper), and enforce `break-inside: avoid` on each rule card so no rule splits mid-page.

print · A4 Print

# Transkriptions-Richtlinien

Damit alle Briefe einheitlich transkribiert werden — egal ob Tante Hedwig oder Cousin Paul tippt — hier unsere Regeln.

Kurrent-Alphabet nachschlagen: de.wikipedia.org/wiki/Kurrentschrift
Regeln
🔍 Nicht lesbare Wörter
Wenn Sie ein Wort nicht entziffern können, schreiben Sie [unleserlich]. Jemand anderes schaut später nochmal drauf.
Beispiel: ⟨Kurrent-Fragment⟩ → [unleserlich]
✂ Durchgestrichene Wörter
Auch durchgestrichener Text gehört zum Brief. Schreiben Sie ihn in eckigen Klammern mit Präfix "durchgestrichen:".
Beispiel: ⟨gestern⟩ → [durchgestrichen: gestern]
ſ Das lange s
Das ſ ist nur eine alte Schriftform des Buchstabens s — schreiben Sie immer ein normales s.
Beispiel: ⟨ſommers⟩ → Sommers
? Unsichere Namen
Fragezeichen in eckigen Klammern.
Beispiel: ⟨Müller⟩ → [Müller?]
🌍 Dialekt, Fremdwörter, Zitate
Wörtlich übernehmen, genau wie geschrieben.
Beispiel: ⟨pardonnez-moi⟩ → pardonnez-moi
Noch in Klärung
Abkürzungen · Datumsformate · Originale Zeilenumbrüche · Alte Groß-/Kleinschreibung

## Implementation reference — Tailwind classes & exact values

### Page shell

Element | Tailwind | Px / value | Note
--- | --- | --- | ---
Route | `frontend/src/routes/hilfe/transkription/+page.svelte` with `export const prerender = true;` | static | no `+page.server.ts` — pure content; ships as static HTML at build
Auth boundary | follow decision queue on issue #320 | — | default `authenticated()` unless `permitAll()` is chosen for `/hilfe/**`
Page container | `max-w-[1100px] mx-auto px-6 pt-12 pb-16 bg-surface-page` | max 1100px · py 48–64 | narrower than the document-edit max (1320) — optimises reading width
Section gap | `space-y-12` between logical sections | 48px | not `space-y-10` — the 48px gap signals deliberate breathing room

### Header + intro

Element | Tailwind | Px / value | Note
--- | --- | --- | ---
H1 title | `font-serif text-[32px] font-bold text-ink tracking-[-0.01em] mb-4` | 32px · 700 | Merriweather; uses tracking tighten to hold the weight
Intro paragraph | `font-serif text-[17px] leading-[1.65] text-ink-2 max-w-[640px]` | 17px · 1.65 | max-width 640px is ≈ 66ch — optimum reading measure
Named-relative copy | literal "Tante Hedwig" / "Cousin Paul" in the intro string | — | fictional; sets family-archive voice. Do not localize names for en/es — keep German "Tante"/"Cousin" since the app is archive-of-a-German-family

### Wikipedia info-card

Element | Tailwind | Px / value | Note
--- | --- | --- | ---
Card container | `flex gap-3 items-start bg-white border border-line border-l-[3px] border-l-accent rounded-sm px-5 py-4 mt-6 mb-14 max-w-[640px]` | 640px max · 3px mint accent | mint accent left-border distinguishes from rule cards (which have no accent border)
Icon bubble | `w-[22px] h-[22px] flex-shrink-0 text-accent mt-0.5` — inline info SVG | 22px | lowercase "i" glyph. Use same SVG in both themes; stroke inherits from `text-accent`
Body text | `font-sans text-sm text-ink-2 leading-[1.5]` | 14px · 1.5 | sans-serif here deliberately (not Merriweather) — signals "meta/helper" vs. primary content
Wikipedia link | `text-ink underline decoration-accent underline-offset-[3px] decoration-[1.5px] font-medium hover:decoration-ink` | — | must have `target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer"` — last per Nora's review
"neuer Tab" annotation | `text-xs text-ink-3 ml-1` — plain `<span>`, real text node | 12px | NOT CSS `::after` — must be in the DOM for screen readers to announce it

### Section label (repeated)

Element | Tailwind | Px / value | Note
--- | --- | --- | ---
Label | `font-sans text-[11px] font-bold uppercase tracking-[0.15em] text-ink-3 mb-5` | 11px · 700 · 2.4 tracking | project pattern, see `layout.css`. Used for "Regeln" and "Noch in Klärung"

### Rule card grid

Element | Tailwind | Px / value | Note
--- | --- | --- | ---
Grid container | `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5` | gap 20px | breakpoints: 1-col <640 · 2-col 640–1024 · 3-col ≥ 1024
Card | `bg-white border border-line rounded-sm shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6 flex flex-col gap-3.5` | padding 24px · gap 14px | project card pattern from `layout.css`, minus the explicit brand-sand border (uses `border-line` token for theme-adaptive border)
Card top-line | `flex items-center gap-2.5` — icon + H3 inline | gap 10px | H3 is the clickable landmark if we add anchor navigation later
Icon chip | `w-8 h-8 rounded-full bg-brand-sand-muted text-ink flex items-center justify-center flex-shrink-0` | 32px | muted sand circle, navy glyph inside. Glyph: emoji OR inline SVG — see per-rule icons below
H3 title | `font-serif text-[19px] font-bold text-ink leading-tight` | 19px · 700 | Merriweather serif carries the visual weight of the rule
Explanation body | `font-serif text-[15px] leading-[1.55] text-ink-2` | 15px · 1.55 | one sentence, max two. Inline `<code>` for the bracketed-output syntax in-line
Inline code | `font-mono text-[14px] text-ink bg-muted px-1 rounded-sm` | 14px | for `[unleserlich]`, `[durchgestrichen: Wort]`, `[Müller?]` etc.

### Beispiel box (per-rule concrete example)

Element | Tailwind | Px / value | Note
--- | --- | --- | ---
Box container | `bg-paper border border-dashed border-[#D4D1C4] dark:border-line-2 rounded-sm px-4 py-3.5 mt-1.5` | padding 14px 16px | paper-cream bg (`#FAF8F1` light, muted accent-tint dark) + dashed border creates a visual "this is an example, not a rule" cue
"Beispiel" label | `font-sans text-[10px] font-bold uppercase tracking-[0.12em] text-ink-3 mb-2.5` | 10px · 700 | tiny top label so the row below can be dense without ambiguity
Kurrent SVG | `w-24 h-9 flex-shrink-0` — inline SVG, per-rule path data | 96×36 | five unique SVGs — one per rule. Stroke `#2a2a2a` light / `#d9dce0` dark, stroke-width 1.4. See Per-rule Beispiel visuals below
Arrow | `text-accent text-xl font-normal flex-shrink-0` | 20px · mint | Unicode `→`. Kept in the colour of the brand accent so it reads as a design element, not a primary control
Output token | `font-mono text-[13px] text-ink bg-white border border-line rounded-sm px-2 py-1 truncate` | 13px | truncate so a long output like `[durchgestrichen: gestern]` doesn't blow the card width

### Per-rule Beispiel visuals

Rule | Kurrent drawing | Overlay | Output
--- | --- | --- | ---
Nicht lesbare Wörter | Two short cursive waves | Semi-opaque grey smudge ellipse `rgba(100,90,75,.35)` over right half | `[unleserlich]`
Durchgestrichene Wörter | One cursive flourish (5 peaks) | Solid stroke line at y≈12 crossing the word | `[durchgestrichen: gestern]`
Das lange s (ſ) | Hand-drawn ſ glyph on the left (Bezier loop + crossbar) + cursive continuation | none | `Sommers`
Unsichere Namen | Cursive capital M (zigzag) + cursive word | Soft grey smudge `rgba(100,90,75,.2)` over last 3 chars | `[Müller?]`
Dialekt & Fremdwörter | Longer continuous cursive wave (9 peaks) | none — signals "just copy it" | `pardonnez-moi`

### "Noch in Klärung" full-bleed strip

Element | Tailwind | Px / value | Note
--- | --- | --- | ---
Strip container | `bg-brand-sand-muted border-y border-line py-9 -mx-6 mt-14 mb-14` | py 36px · full-bleed | negative margin breaks out of the 1100px container to hit the page edges at ≤ 1100; visually distinct from white rule-cards
Inner wrapper | `max-w-[1052px] mx-auto px-6` | matches container | restores the reading column inside the full-bleed band
Intro line | `font-serif text-[15px] text-ink-2 mb-4.5 max-w-[640px]` | 15px | collaborative voice: "treffen Sie eine plausible Wahl + notieren Sie es in den Kommentaren"
Chip row | `flex flex-wrap gap-2.5` | gap 10px | wraps naturally on narrow viewports
Chip (pill) | `inline-flex items-center gap-2 bg-white border border-dashed border-[#C9C4B5] dark:border-line-2 rounded-full px-4 py-2 font-sans text-[13px] text-ink-2 font-medium` | h≈32 · 13px | dashed border reinforces "provisional / open" semantics. Wiggle prefix `〰` in accent colour
Chip suffix examples | italic muted clarifier in parens: `(d., u., etc.)`, `(1.t Januar 1912)` etc. | — | optional; only for chips whose topic benefits from one example. Keep under 22 chars

### Closing invitation

Element | Tailwind | Px / value | Note
--- | --- | --- | ---
Card | `flex gap-4.5 items-start bg-white border border-line rounded-sm px-8 py-7 max-w-[720px]` | max 720px · p 28/32 | narrower than rule cards — invites a more personal read
Chat-bubble icon | `w-7 h-7 text-accent flex-shrink-0` — speech-bubble SVG | 28px · mint | signals "comment / feedback" non-verbally
H4 | `font-serif text-lg font-bold text-ink mb-2` | 18px · 700 | "Fehlt eine Regel?"
Body | `font-serif text-[15px] leading-[1.55] text-ink-2` | 15px | three clauses: stolpern-über → Kommentar → Familientreffen

### @media print

Element | Tailwind / CSS | Px / value | Note
--- | --- | --- | ---
Page size | `@page { margin: 1.5cm; }` | 1.5cm | A4 default; leaves margin for hole-punching
Body override | `body { background: white; color: #111; }` | — | no brand-sand page bg on paper
Hidden in print | `.app-nav, .closing, .new-tab { display: none; }` | — | nav, closing invitation, and "(öffnet in neuem Tab)" annotations — nothing useful on paper
Rule cards in print | `.rule-card { break-inside: avoid; border: 1px solid #999; box-shadow: none; margin-bottom: 8pt; }` | avoid-break | ensures no rule splits across pages
Kurrent SVG in print | inline SVG renders natively; no change needed | — | if the printer is monochrome, strokes still read at `#2a2a2a`
Wikipedia link | append full URL after the link text via `@media print { a[href]::after { content: " (" attr(href) ")"; } }` | — | standard print-a11y pattern — readers on paper need the URL

### Paraglide keys (de/en/es)

Key | de | en | es
--- | --- | --- | ---
richtlinien_title | Transkriptions-Richtlinien | Transcription Guidelines | Normas de transcripción

richtlinien_intro

Damit alle Briefe einheitlich transkribiert werden — egal ob Tante Hedwig oder Cousin Paul tippt — hier unsere Regeln. Die Seite wächst mit: sobald wir eine neue Konvention beschließen, landet sie hier.

So every letter is transcribed consistently — whether Tante Hedwig or Cousin Paul is typing — here are our rules. The page grows with us: as soon as we agree a new convention, it lands here.

Para que todas las cartas se transcriban de forma uniforme — ya sea la tía Hedwig o el primo Paul quien escriba — aquí están nuestras reglas. La página crece con nosotros.

richtlinien_wiki_text

Das vollständige Kurrent- und Sütterlin-Alphabet brauchen Sie für diese Seite nicht — das erledigt Wikipedia. Hier sind unsere eigenen Regeln für das, was Wikipedia nicht beantwortet.

You don't need the full Kurrent and Sütterlin alphabet on this page — that's what Wikipedia is for. Here are our own rules for everything Wikipedia can't answer.

No necesitas el alfabeto Kurrent completo aquí — eso lo hace Wikipedia. Aquí están nuestras propias reglas para lo que Wikipedia no responde.

richtlinien_wiki_link | Wikipedia → | Wikipedia → | Wikipedia →
richtlinien_new_tab | (öffnet in neuem Tab) | (opens in new tab) | (abre en pestaña nueva)
richtlinien_rules_label | Regeln für die Transkription | Transcription rules | Reglas de transcripción
richtlinien_rule_unleserlich_title | Nicht lesbare Wörter | Illegible words | Palabras ilegibles
richtlinien_rule_unleserlich_body | Wenn Sie ein Wort beim besten Willen nicht entziffern können, schreiben Sie `[unleserlich]`. Jemand anderes schaut später nochmal drauf. | If you can't decipher a word even after trying, write `[unleserlich]`. Someone else will take another look later. | Si no puedes descifrar una palabra, escribe `[unleserlich]`. Otra persona lo revisará después.
richtlinien_rule_durchgestrichen_title | Durchgestrichene Wörter | Struck-through words | Palabras tachadas
richtlinien_rule_durchgestrichen_body | Auch durchgestrichener Text gehört zum Brief. Schreiben Sie ihn in eckigen Klammern mit Präfix `durchgestrichen:`. | Struck-through text still belongs to the letter. Write it in square brackets with prefix `durchgestrichen:`. | El texto tachado también pertenece a la carta. Escríbelo entre corchetes con el prefijo `durchgestrichen:`.
richtlinien_rule_langes_s_title | Das lange s (ſ) | The long s (ſ) | La s larga (ſ)
richtlinien_rule_langes_s_body | Das ſ ist nur eine alte Schriftform des Buchstabens s — kein eigener Laut. Schreiben Sie immer ein normales s. | The ſ is just an old written form of the letter s — not a separate sound. Always write a normal s. | La ſ es solo una forma antigua de la letra s. Escribe siempre una s normal.
richtlinien_rule_name_title | Unsichere Namen | Uncertain names | Nombres inciertos
richtlinien_rule_name_body | Wenn Sie einen Namen zu erkennen meinen, aber nicht sicher sind, ergänzen Sie ein Fragezeichen in eckigen Klammern. | If you think you can read a name but aren't sure, add a question mark in square brackets. | Si crees reconocer un nombre pero no estás seguro, añade un signo de interrogación entre corchetes.
richtlinien_rule_dialekt_title | Dialekt, Fremdwörter, fremde Zitate | Dialect, foreign words, foreign quotes | Dialecto, palabras extranjeras, citas
richtlinien_rule_dialekt_body | Plattdeutsch, Französisch, lateinische Phrasen — wörtlich übernehmen, genau wie sie geschrieben stehen. | Low German, French, Latin phrases — copy them verbatim, exactly as written. | Bajo alemán, francés, frases latinas — cópialas tal cual están escritas.
richtlinien_beispiel_label | Beispiel | Example | Ejemplo
richtlinien_klaerung_label | Noch in Klärung | Still to be decided | Aún por decidir

richtlinien_klaerung_intro

Diese Fragen klären wir noch — stoßen Sie beim Transkribieren darauf, treffen Sie eine plausible Wahl und notieren Sie es in den Kommentaren:

These questions are still open — if you hit one while transcribing, make a plausible choice and note it in the comments:

Estas preguntas aún están abiertas — si encuentras alguna mientras transcribes, elige algo razonable y nótalo en los comentarios:

richtlinien_klaer_abkuerzungen | Abkürzungen | Abbreviations | Abreviaturas
richtlinien_klaer_datumsformate | Datumsformate | Date formats | Formatos de fecha
richtlinien_klaer_umbrueche | Originale Zeilenumbrüche | Original line breaks | Saltos de línea originales
richtlinien_klaer_caps | Alte Groß-/Kleinschreibung | Old capitalisation | Mayúsculas antiguas
richtlinien_closing_title | Fehlt eine Regel? | Missing a rule? | ¿Falta una regla?

richtlinien_closing_body

Stolpern Sie beim Transkribieren über eine Situation, die hier nicht steht — schreiben Sie einen Kommentar beim betreffenden Block. Wir sammeln sie und besprechen sie beim nächsten Familientreffen.

If you hit a situation while transcribing that isn't listed here — leave a comment on the relevant block. We collect them and discuss them at the next family gathering.

Si al transcribir encuentras una situación que no está aquí — deja un comentario en el bloque. Las recogemos y las discutimos en la próxima reunión familiar.

Interaction + behaviour spec

- Page is fully static. No load function, no fetch, no dynamic state. `export const prerender = true;` builds to HTML at build time. Updates ship as git commits, not runtime data.
- Wikipedia link: opens in a new tab. Never follow internal-nav assumptions (no `goto()`, no `history.back()`). Preserves the user's existing tab — important for transcribers who might open this page mid-session.
- No anchor navigation in v1. At 5 rules there's no need for a TOC or deep links. If the rule count grows past ~10, revisit with a sticky sidebar.
- Print support: `@media print` block in the page's `<style>` scope. Test via `page.emulateMedia({ media: 'print' })` in Playwright.
- Chips are NOT interactive in v1 — they are visual markers for open questions. If we later add anchors to a discussion thread (e.g. a Gitea issue or forum post per item), the chips become `<a>` tags. Keep the semantic markup ready.
- Page growth model: when a new convention is agreed, it moves from the "Noch in Klärung" chip row into a new rule card. That commit is the full content update — no CMS, no admin UI, no backend.

Edge cases + a11y requirements

- Heading structure: `<h1>` page title → `<h2>` section labels ("Regeln", "Noch in Klärung") → `<h3>` per rule card. Do not skip levels. Screen readers navigate by heading.
- Decorative SVGs: Kurrent strokes in Beispiel boxes are decorative — they carry no information that the output token doesn't already carry. Mark each with `role="presentation" aria-hidden="true"`. The Beispiel row's meaning lives in the output token.
- Icon chips: emoji-icons (🔍 ✂ ſ ? 🌍) are presentational. Wrap each in a `<span aria-hidden="true">` next to the H3 title — the H3 carries the rule's name and is what screen readers read.
- Colour-alone check (WCAG 1.4.1): the "Noch in Klärung" chips differ from rule cards by shape (pill vs. card), border style (dashed vs. solid), and colour (sand-muted vs. white). Three redundant cues.
- Contrast — light: ink (#012851) on white = 14.5:1 AAA · ink-2 (#3a4a5c) on white = 9.1:1 AAA · mint accent (#A6DAD8) is used for backgrounds and borders only — never for body text.
- Contrast — dark: ink (#f0efe9) on surface (#011526) = 14.8:1 AAA · turquoise accent (#00c7b1) on surface = 5.4:1 AA large-text. Kurrent stroke `#d9dce0` on paper-dark (#0a1d2e) = 11.2:1 AAA.
- Beispiel box contrast: in dark mode, a mint-tinted bg against the card surface must not drop below 3:1. Use `rgba(166,218,216,0.04)` (not 0.12) for the bg; dashed border carries the delineation.
- Reduced motion: no animations on this page, so `prefers-reduced-motion` is a no-op. Don't add hover-scale on chips or cards — the page is reference content, not interactive.
- Touch targets on chips: currently non-interactive. If made interactive in v2, each chip must meet ≥ 44×44 (current height is ~32, so add `min-h-[44px] py-2.5`).
- Screen-reader on external link: the inline "(öffnet in neuem Tab)" annotation is a real DOM text node, so screen readers announce it. Do NOT replace with a CSS `::after` — that's invisible to AT.
- Long words: rule titles and output tokens must not wrap awkwardly on a 320px viewport. Test with "Transkriptions-Richtlinien" H1 (allow `overflow-wrap: break-word` or the hyphen between words).

### Component tree (frontend)

Component | Status | Responsibility
--- | --- | ---
`routes/hilfe/transkription/+page.svelte` | new | Prerendered static page. Composes header, info-card, rule grid, klaerung strip, closing. Imports message strings via Paraglide.
`lib/components/RichtlinienRuleCard.svelte` | new | One rule: icon chip, title, body, Beispiel box. Props: `{ icon, title, body, beispiel }` where `beispiel` is `{ svg: Component, output: string }`.
`lib/components/KurrentSample.svelte` | new (optional) | Wraps the 5 per-rule Beispiel SVGs. Alternative: inline each SVG in `+page.svelte` since they're used once each. Pick whichever keeps `+page.svelte` under 200 lines.
`lib/components/InfoCard.svelte` | new (candidate) | Generic info card with mint left-border accent — reusable for future help pages. If only this one consumer exists in v1, inline it here and extract later.
`messages/{de,en,es}.json` | extend | Add the 23 new keys listed in the Paraglide table above. All three languages in the same commit.

### Acceptance criteria (Gherkin)

Verifiable from outside the code

- Given an authenticated user (or any user, depending on #320 auth decision), when they visit `/hilfe/transkription`, then they see the title, family-voice intro, Wikipedia info-card, five rule cards, "Noch in Klärung" strip, and closing invitation — in that order.
- Given the user is on the Richtlinien page, when they click the Wikipedia link, then the Wikipedia article opens in a new tab AND the current Familienarchiv tab remains on `/hilfe/transkription`.
- Given the viewport width is 320px, when the page renders, then the rule grid is one-column, chips wrap to multiple rows, and no horizontal scroll appears.
- Given the viewport width is 768px, when the page renders, then the rule grid is two-column.
- Given the viewport width is 1024px+, when the page renders, then the rule grid is three-column.
- Given dark mode is active, when axe-core analyzes the page at 320/768/1440, then no WCAG 2.1 AA violations are reported.
- Given the user triggers the browser print dialog, when the preview renders, then the app nav is hidden, rule cards do not break across pages, and each Wikipedia link shows its full URL in parentheses.
- Given the locale is `en` or `es`, when the page renders, then every section has translated text — no raw key tokens visible, no German fallbacks leaking into non-German locales.

### Out of scope for this spec

Not in v1 — follow-up tickets

- Anchor navigation / sticky TOC: needed only when rule count exceeds ~10. Five rules fit on one screen at desktop.
- Interactive chips linking to discussion threads: when "Noch in Klärung" items have their own Gitea discussions, wire the chips to them. Needs a decision on where those discussions live first.
- Editing through the UI: the page is intentionally git-based. Family members propose rules via Gitea issues or transcription-block comments; the archivist commits them. No admin editor.
- Per-rule "Warum?" expandables: some rules (like "warum verbatim belassen?") have more story to tell. If beta users ask, reveal via a `HelpPopover` (see Markus's review on #320).
- Kurrent font embedding: the Beispiel SVGs approximate handwriting with bezier paths. Embedding a real Kurrent webfont would be more authentic but costs ~40 KB and the brand isn't a Kurrent-typography product.
- Search within guidelines: at 5 rules, Ctrl-F in the browser is the search.