# DESIGN.md — Trattoria da Nonna Rosa

**Richtung:** B — «Neun, mehr nicht» · Pol **QUARTIER**
**Grundlage:** `brand/logo.png` (angeschaut), `brand/brand-measurements.json` (Farb-Wahrheit),
`brand/design-decisions.md`, Dossier, Richtungs-Entscheid `brand/richtung-gewinner.md`.
**Regel dieser Datei:** Jeder Hex steht wörtlich in `brand/tokens.css` **und** in den Messwerten.
Kein Wert ist gemischt, geschätzt oder aus einer Tailwind-Palette. Was nicht gemessen ist, steht
als «berechnet» oder «nicht erhoben» da — nie als Behauptung.

---

## 1. Visual Theme & Atmosphere

### 1.1 Was das Logo sagt (Befund am Bild)

Ein **rundes Siegel, gezeichnet mit einer einzigen Linienstärke**. In der Mitte steht Nonna Rosa
frontal über einem bauchigen Topf, beide Hände am Kochlöffel, unter dem Topf ein offenes Feuer
mit drei Scheiten. Über ihr spannt sich ein Bogen aus fünf Feigenblättern, an dem links und
rechts je ein Bündel getrockneter Pasta hängt. Der Name läuft als Bogenschrift **um die untere
Hälfte** — hand­gezeichnete, leicht schmale Serifen-Versalien, ungleich gesperrt, ohne jede
Perfektion. Zwei Farbfamilien, mehr nicht: Terracotta für alles Gezeichnete, Grün ausschliesslich
in den Blättern und im Topf; die Schürze bleibt cremefarben leer.

Daraus folgt vier Mal hart:

1. **Das Logo ist Linie, nicht Fläche.** Kein Verlauf, kein Schatten, keine Füllung ausser dem
   Topf. → Die Website darf Tiefe nicht über Licht bauen. Kein `box-shadow` im Inhalt (§6).
2. **Es ist ein Stempel, kein Wappen.** Ehrlich, handgemacht, leicht schief — nicht luxuriös,
   nicht «fine dining». → Kein Gold, kein Serif-Kursiv-Schnörkel, keine Hochglanz-Anmutung.
3. **Grün ist Blattwerk, nie Sprache.** Im Logo trägt Grün kein einziges Zeichen. → `#9fa75f`
   ist auf der Website nie Text und nie Textfläche (die Messmatrix bestätigt das mit 2.41 / 2.57).
4. **Der Mensch steht in der Mitte.** Nicht der Teller, nicht das Haus — die Frau am Topf. → Die
   Bildregie ist auf Gesichter verpflichtet (§10), nicht auf Food-Stillleben.

### 1.2 Die Design-Welt

Man kommt an ein dunkles Haus an der Baselstrasse und sieht zuerst zwei Dinge: ein grosses,
warmes Foto aus der Küche und darüber vier Wörter in breiten Versalien, die über die halbe
Bildbreite laufen. Die Seite ist eine **Tafel am Haus**, kein Prospekt: Ofendunkel als Wand,
darin geschnitten die wenigen hellen Lesefenster, dazwischen genau **eine** satte
Terracotta-Bahn, auf der die neun Gerichte als nummerierte Zeilen stehen — keine Kachel, kein
Tellerfoto, nur Schrift und Preis. Sie ist kurz, laut und unhöflich direkt. Kein
Reservierungssystem, keine Ausklapp-Menüs, kein Karussell: die Telefonnummer steht so gross wie
der Name des Hauses und wandert auf dem Handy als Leiste mit.

Atmosphäre in fünf Wörtern: **dunkel, gebraucht, laut, warm, kurz.** Was ausdrücklich nicht
vorkommt: klinisch-sterile Flächen, kühles Raster-Weiss, Icon-Reihen, generische Freundlichkeit.

**MODUS: dunkel** · **STIL: zeitlos**
**DUNKELANTEIL_ZIEL: 70%**
**KUNDENWUNSCH_OFFEN:** Die drei Zweitfarben aus `dossier.brand.farben` — **das dunkle Weinrot,
das Creme, das Fast-Schwarz** — werden in dieser Form **nicht gebaut**, und zwar aus zwei Gründen:
(1) sie stammen laut `meta.quellen` aus der Recherche, sind also geschätzt und **nicht aus
`logo.png` gemessen**; (2) das Weinrot liegt zusätzlich unter der harten Farb-Sperre dieses
Projekts — es ist als Primär-/Akzentton vom Markt besetzt (das Konkurrenzfeld führt Rot und Orange
als Akzent bei 5 von 5 sezierten Sites) und würde uns genau dorthin stellen, wo wir uns absetzen
sollen. Wir lösen deshalb alle drei **in der Rolle ein, nicht im Wert**, und keine fällt
kommentarlos weg: die Weinrot-Absicht «satter, warmer Hausgrund» übernimmt die gemessene
Doppelrolle `--brand-primary-12` (Ofendunkel) + `--brand-primary` (Marken-Fläche) — dieselbe
Wärme, aber aus dem eigenen Logo statt aus dem Markt-Einheitsbrei; die Creme-Absicht «warmes
Papier» übernimmt `--brand-surface`; die Fast-Schwarz-Absicht «harter Nachtgrund» übernimmt
`--brand-ink` als Nachtfuss. Was der Kunde wollte — warm, dunkel, papierig — steht damit
vollständig auf der Seite; was sich ändert, sind die Zahlenwerte, die aus seinem eigenen Logo
kommen und nicht aus einer Schätzung.

### 1.3 DAS SIGNATURE-MOTIV — **«Die Heftzeile»**

**(a) Name:** Die Heftzeile.

**(b) Was es ist und warum es zu diesem Haus gehört:**
Rosas Rezeptheft liegt seit 1978 in der Küche — ein liniertes Heft, in dem jede Sache genau eine
Zeile bekommt: eine Nummer am Rand, der Name, rechts der Wert, darunter der gedruckte Strich.
Genau diese Zeile ist das Bauteil der ganzen Website. **Jede Tatsache dieses Hauses wird zu einer
Heftzeile:** `Nummer (tnum) · NAME IN VERSALIEN · Wert rechtsbündig (tnum) · 1px Heftlinie
darunter`. Neun Gerichte sind neun Zeilen. Sieben Wochentage sind sieben Zeilen. Drei Wege,
drei Zeilen. Das Motiv ist kein Ornament, sondern die Behauptung des Hauses in Bauform: *hier
gibt es eine feste Anzahl Dinge, sie stehen untereinander, sie ändern sich nicht.* Es ist
ownable, weil es die Sturheit der Karte selbst zeichnet — kein zweites Restaurant kann «neun
Gerichte seit 1978» als Struktur führen.

**(c) Anwendungs-Tabelle**

| Ort | Ausprägung | Grösse / Werte | Regel |
|---|---|---|---|
| **Bahn «Wege»** (dunkel) | 3 Heftzeilen: Mittagsmenü · Abendkarte · Familientisch | Name 68px VERSAL, Wert = Zeit bzw. «bis 20» 30px tnum rechts, Heftlinie 1px `#d5cccb` @ 40 % | Genau 3 Zeilen. Keine Icons, keine Bilder. |
| **Bahn «Die Neun»** (Terracotta) | 9 Heftzeilen, Nummern `01`–`09` | Name 40px VERSAL, Beschreibung 16px darunter, Preis 40px tnum rechts, Heftlinie 1px `#ffffff` @ 32 % | **Nie mehr und nie weniger als 9.** Nie ein Foto. |
| **Bahn «Küchenzeit»** (Nachtfuss) | 7 Heftzeilen, `01`–`07` = Mo–So | Tag 30px VERSAL, Zeiten 30px tnum rechts, heutige Zeile mit `#9fa75f`-Punkt 8px | Der Punkt erscheint auf **genau einer** der sieben Zeilen. |
| **Bahn «Gästestimmen»** (hell) | 3 Heftzeilen als Kopf jeder Zitatspalte | Name 30px VERSAL, Sterne als `4/5` 30px tnum rechts | Nur Bewertungen ≥ 4 Sterne, max. 3. Keine Sternchen-Grafik. |
| **Bahn «Kontakt»** (hell) | 3 Heftzeilen: Telefon · Adresse · Mail | Label 30px VERSAL, Wert 30px tnum/Karla rechts | Die Telefonzeile ist ein `tel:`-Link, die anderen zwei nicht. |
| **Print — Speisekarte A4** | Dieselben 9 Zeilen, 1:1 | Name 22pt VERSAL, Preis 22pt tnum rechts, Heftlinie 0.5pt | Karte und Website zeigen **identische** Zeilen. |
| **Print — Visitenkarte 85×55** | Eine einzige Heftzeile: `TISCH` … `041 …` | Name 11pt, Nummer 11pt tnum rechts | Nur eine Zeile, sonst leer. |
| **Social — Post 1:1** | Eine Heftzeile riesig auf `#b45946`, sonst leer | Name 96px VERSAL, Wert 96px tnum | Ein Post = eine Zeile. Nie neun auf einem Bild. |
| **Favicon / Signet** | Rundsiegel aus `logo.png`, **keine** Heftzeile | 40px im Kopf | — |

**Verbote (damit es keine Tapete wird):**
1. **Nie im Hero.** Über dem Bild steht ausschliesslich die zweizeilige Ansage. Eine Heftzeile
   über einem Foto ist verboten — das Motiv lebt von der leeren Fläche hinter sich.
2. **Maximal 5 Heftzeilen-Bahnen pro Seite** (Wege · Die Neun · Küchenzeit · Gästestimmen ·
   Kontakt). Die Beleg-Bahn (§ «Der Beleg», siehe §5.4) läuft bewusst als **Fliesstext ohne
   Heftzeile** — dieser eine Gegensatz ist der Grund, warum das Motiv woanders wirkt.
3. **Nie als Navigation.** Kein Menüpunkt, kein Footer-Link, kein Button bekommt Nummer +
   rechtsbündigen Wert. Die Heftzeile ist Inhalt, nie Bedienung.

`SIGNATURE_MOTIV: Die Heftzeile — jede Tatsache dieses Hauses steht als eine Zeile aus Rosas Rezeptheft: Nummer, Versalname, rechtsbündiger Wert, darunter die Heftlinie.`

---

## 2. Color Palette & Roles

Alle Werte wörtlich aus `brand-measurements.json` und `brand/tokens.css`. Nichts gemischt.

### 2.0-a Register der abgelehnten Farbabsichten

Fünf Farbabsichten aus Dossier und Richtungs-Notiz werden **nicht gebaut**. Sie werden hier
benannt und begründet, aber **bewusst ohne Hex-Notation** geführt: In diesem Dokument existiert
kein Hex-Wert, der nicht wörtlich in `brand/tokens.css` **und** in `brand-measurements.json`
steht — auch nicht als Zitat, auch nicht in einer Verbotszeile. Ein Wert, den niemand bauen soll,
bekommt in dieser Spec keine Zahl; er bekommt einen Namen.

| Abgelehnte Absicht | Herkunft | Warum abgelehnt | Was stattdessen gebaut wird |
|---|---|---|---|
| **Dunkles Weinrot** | Dossier `brand.farben` (Recherche-Schätzung) | nicht im Logo gemessen; zusätzlich unter der harten Farb-Sperre (Rot/Orange ist die Akzentwelt des gesamten Konkurrenzfelds) | `--brand-primary-12` als Grund + `--brand-primary` als Fläche |
| **Creme / Sandbeige** | Dossier `brand.farben` (Recherche-Schätzung) | nicht im Logo gemessen | `--brand-surface` |
| **Fast-Schwarz (grünstichig)** | Dossier `brand.farben` (Recherche-Schätzung) | nicht im Logo gemessen | `--brand-ink` |
| **Ofendunkel der Richtungs-Notiz** | Richtung B, `skalen.primary.dark`, Stufe 3 | gemessen, aber **nicht in `tokens.css`** | `--brand-primary-12` (siehe 2.0-b) |
| **Nachtfuss der Richtungs-Notiz** | Richtung B, `skalen.primary.dark`, Stufe 2 | gemessen, aber **nicht in `tokens.css`** | `--brand-ink` (siehe 2.0-b) |

**Die freie, differenzierende Farbwelt dieses Hauses** ist damit vollständig aus dem eigenen Logo
gemessen: gebranntes Terracotta (`#b45946`) auf Ofendunkel-Braun (`#4c2f28`), Papier-Rosé
(`#fdf6f4`) als Lesefenster, Nachtbraun (`#271d1c`) als Fuss, Blattoliv (`#9fa75f`) als einziger
Punkt. Der Markt führt Rot und Orange als **flächigen Akzent auf hellem Grund**; wir führen
dieselbe Farbfamilie als **dunkle Wand mit genau einer lauten Bahn** — die Differenzierung liegt
im Ton, in der Fläche und im Dunkelanteil, nicht in der Flucht aus der Farbfamilie.

### 2.0-b Eine dokumentierte Abweichung von der Richtungs-Notiz

Richtung B notierte als Ofendunkel die Stufe 3 und als Fuss die Stufe 2 der Dunkelskala
`skalen.primary.dark`. Diese beiden Werte stehen zwar in den Messwerten, aber **nicht in
`tokens.css`** — `tokens.css` führt von den Skalen ausschliesslich die Hellreihen. Die harte
Projektregel verlangt jedoch, dass jeder gebaute Hex in *beiden* Dateien steht. Wir setzen darum
die nächsten sanktionierten Werte derselben gemessenen Familie ein: **`#4c2f28`**
(`--brand-primary-12`, dunkles Terracotta-Braun) als Ofendunkel und **`#271d1c`**
(`--brand-ink` / `--brand-gray-12`) als Nachtfuss. Beide sind minimal heller und eine Spur weniger
rot als die Notiz — Charakter, Rolle und Dunkelanteil bleiben identisch, die Tokens-Wahrheit
bleibt unverletzt. Der Build-Agent zieht Dunkelflächen **ausschliesslich** aus diesen zwei Tokens;
eine Dunkelskala existiert in `tokens.css` nicht und darf nicht nachgetragen werden.

### 2.1 Rollen-Tabelle

| Rolle | Token | Hex | Einsatzregel | Kontrast (Quelle) |
|---|---|---|---|---|
| **Ofendunkel** (Wand, ~46 %) | `--brand-primary-12` | `#4c2f28` | Kopfleiste, Hero-Verlauf, Wege-Bahn, Grade aller Vollbilder. Der Standardgrund der Seite. | `#ffffff` darauf **12.04** (berechnet, nicht in der Matrix) |
| **Nachtfuss** (~12 %) | `--brand-ink` / `--brand-gray-12` | `#271d1c` | Küchenzeit-Tafel und Footer. Zweitdunkelste Fläche, nur unten. Auch: Tinte auf Hell. | `#271d1c` auf `#fdf6f4` **15.38** ✔ AAA (Matrix) |
| **Marken-Fläche Terracotta** (~12 %) | `--brand-primary` | `#b45946` | **Genau eine** vollflächige Bahn («Die Neun») + der eine CTA-Knopf. Sonst nirgends als Fläche. | `#ffffff` darauf **4.71** ✔ AA (Matrix) |
| **Gedrückt / Hover-Tiefe** | `--brand-accent` | `#a34d3b` | Nur Hover-Zustand des Terracotta-Knopfs. Nie als Fläche einer Bahn. | nicht in der Matrix — nur als Fläche unter `#ffffff`-Label ≥17px |
| **Gedrückt (active)** | `--brand-primary-11` | `#9c4735` | `:active` des Terracotta-Knopfs; Fehlertext auf Hell ≥16px. | `#9c4735` auf `#fdf6f4` **5.85** (berechnet) |
| **Lesefläche** (~28 %) | `--brand-surface` | `#fdf6f4` | Beleg-Bahn, Gästestimmen, Kontakt. Text auf Dunkel in Display-Grade. | Träger von 15.38 / 6.53 (Matrix) |
| **Lesefläche gedämpft** | `--brand-surface-alt` | `#f5f0ef` | Nur als eingesetztes Feld *innerhalb* einer hellen Bahn (Zitatblock). Nie als eigene Sektion. | `#271d1c` darauf **14.54** ✔ AAA (Matrix) |
| **Tinte** | `--brand-ink` | `#271d1c` | Fliesstext und Display auf Hell. | **15.38** ✔ AAA (Matrix) |
| **Tinte weich** | `--brand-ink-soft` | `#625755` | Zweitzeilen, Bildlegenden, Meta auf Hell. Nie unter 16px. | `#625755` auf `#fdf6f4` **6.53** ✔ AA (Matrix) |
| **Dämmung auf Dunkel** | `--brand-border` / `--brand-gray-6` | `#d5cccb` | Sekundärtext auf `#4c2f28`, Heftlinien, Ghost-Rahmen, «heute zu»-Punkt. | auf `#4c2f28` **7.64** (berechnet) |
| **Papierweiss auf Dunkel** | `--brand-on-primary` | `#ffffff` | Alle Display-Zeilen und Knopf-Labels auf Dunkel/Terracotta. Nie als Seitengrund. | auf `#b45946` **4.71** ✔ AA (Matrix) |
| **Blattgrün** (< 1 %) | `--brand-secondary` | `#9fa75f` | **Ausschliesslich** der 8px-Statuspunkt «heute offen» und der 8px-Punkt vor dem heutigen Wochentag. Nichts sonst. | `#9fa75f` auf `#fdf6f4` **2.41** ✘ — deshalb nie Text |
| **Deaktiviert** | `--brand-gray-10` | `#837471` | Label deaktivierter Formularknöpfe auf `#d5cccb`. | nicht in der Matrix — nur UI, nie Inhalt |

### 2.2 Die gemessene Kontrastmatrix — was erlaubt und was verboten ist

| Paar | Ratio (gemessen) | AA | Urteil für den Bau |
|---|---|---|---|
| `ink` / `surface` (`#271d1c` auf `#fdf6f4`) | **15.38** | ✔ AAA | Das Arbeitspferd auf Hell. Fliesstext, Display, Heftzeilen. |
| `ink` / `surface_alt` (`#271d1c` auf `#f5f0ef`) | **14.54** | ✔ AAA | Zitatfelder innerhalb heller Bahnen. |
| `ink_soft` / `surface` (`#625755` auf `#fdf6f4`) | **6.53** | ✔ AA | Zweitzeilen, Legenden. **Nie unter 16px.** |
| `on_primary` / `primary` (`#ffffff` auf `#b45946`) | **4.71** | ✔ AA | Die einzige zulässige Schriftfarbe auf der Terracotta-Bahn. |
| `primary` / `surface` (`#b45946` auf `#fdf6f4`) | **4.41** | ✘ AA / ✔ AA-large | Terracotta als Schrift auf Hell **nur ≥ 24px und ≥ 700** (aa_large). Nie im Fliesstext, nie in Links unter 24px. |
| `secondary` / `surface` (`#9fa75f` auf `#fdf6f4`) | **2.41** | ✘ | **Verboten für jede Schrift.** Olivgrün ist Punkt, nicht Zeichen. |
| `on_secondary` / `secondary` (`#ffffff` auf `#9fa75f`) | **2.57** | ✘ | **Verboten.** Es gibt auf dieser Seite keine olivgrüne Fläche mit Text. |
| `surface` / `secondary` | **2.41** | ✘ | Ebenfalls verboten — auch nicht als «dekoratives» Label. |

**Nicht in der Matrix, darum ehrlich als berechnet gekennzeichnet** (der Build verifiziert sie im
Kontrast-Check, sie werden hier nicht als gemessen ausgegeben): `#ffffff` auf `#4c2f28` ≈ 12.04 ·
`#ffffff` auf `#271d1c` ≈ 16.42 · `#d5cccb` auf `#4c2f28` ≈ 7.64 · `#9c4735` auf `#fdf6f4` ≈ 5.85.
Alle vier liegen über AA; keine wird für Text unter 16px benutzt.

### 2.3 Flächen-Budget (die Selbstbindung an den Dunkelanteil-Korridor)

| Fläche | Hex | Anteil | Wo |
|---|---|---|---|
| Ofendunkel | `#4c2f28` | **46 %** | Kopf, Hero (Foto + Verlauf), Wege-Bahn, Bildband |
| Nachtfuss | `#271d1c` | **12 %** | Küchenzeit-Tafel, Footer |
| Terracotta | `#b45946` | **12 %** | Die-Neun-Bahn, CTA-Pille, Handy-Anrufleiste |
| **Summe dunkel** | | **70 %** | = `DUNKELANTEIL_ZIEL` |
| Lesefläche | `#fdf6f4` (+ `#f5f0ef` inset) | **29 %** | Beleg, Gästestimmen, Kontakt |
| Blattgrün | `#9fa75f` | **< 1 %** | Statuspunkte |

**Harte Farbregeln:**
1. Keine Tailwind-Default-Farbe, kein `slate/zinc/stone/amber`, kein selbst gemischter Hex.
   Nur die 40 Werte aus `tokens.css`.
2. `#ffffff` ist **nur Schriftfarbe**, nie eine Fläche. Der hellste Grund ist `#fdf6f4`.
3. **Genau eine** Terracotta-Fläche pro Seite (die Neun-Bahn) plus der CTA. Wird Terracotta zur
   zweiten Sektionsfläche, kippt das Haus von «Trattoria» nach «Kette».
4. Nach jeder Terracotta-Bahn folgt **zwingend** eine `#fdf6f4`-Lesebahn. Nie zwei laute Bahnen
   hintereinander, auch nicht im gestapelten Mobilzustand.
5. Nie zwei Vollbild-Fotobänder hintereinander.
6. Text auf `#b45946` ist **immer** `#ffffff` und **nie** mit `opacity` gedämpft (0.8 ergäbe
   ≈ 3.6 und fiele durch). Gedämpft wird auf Terracotta über Grösse, nicht über Deckkraft.

---

## 3. Typography Rules

**Display: `Archivo` (Google Fonts, variable) auf `wdth 125` / `wght 700`, ausschliesslich VERSAL**
**Body: `Karla` (Google Fonts) 400 / 700**

Beide self-hosted via `next/font` (nDSG). Geprüft gegen die Verbotsliste (Fraunces, Playfair
Display, Inter-als-Display, Lora, Merriweather) und gegen die Historie-Sperre (schibsted grotesk,
young serif, besley, frank ruhl libre, spectral, manrope, source serif 4, domine, familjen
grotesk, noto serif display) — **beide frei**.

### 3.1 Begründung, inkl. Abweichung von der Warm-Shortlist

Die Shortlist «warm» (Gelasio · Bricolage Grotesque · Rozha One · Grenze · Bitter · Alegreya ·
Vollkorn) ist durchweg *Buchtypografie*. Sie passt zur Wärme des Hauses, aber nicht zu seiner
Aussage. Die Aussage lautet nicht «wir erzählen dir eine Geschichte», sondern **«neun Gerichte,
seit 1978, wer etwas anderes will, geht woanders hin»** — das ist ein Aushang, kein Kapitel.
Archivo auf der Weite-Achse `wdth 125` in Versalien ist Emailleschild und Wirtshaustafel: breite,
gleichhohe Buchstaben, die eine Fläche füllen und dabei nicht dekorieren. Das ist die Form, die
das Logo *nicht* hat — und genau deshalb funktioniert es: das handgezeichnete Rundsiegel liefert
die Wärme, die Tafelschrift liefert die Ansage. Zwei handgemachte Serifen nebeneinander wären
Doppelung, kein Paar. Die Wärme wird nicht der Schrift überlassen, sondern (a) Karla, (b) der
Farbwelt, (c) verbindlich den Menschen im Bild (§10).

**Warum Archivo Expanded und nicht Vollkorn:** Vollkorn ist rund, gemütlich und norddeutsch-warm;
in 132px Versalien wird daraus ein Weihnachtsmarkt-Schild. «Neun Gerichte» soll nicht gemütlich
klingen, sondern unhöflich klar.
**Warum Archivo Expanded und nicht Bebas Neue:** Bebas ist schmal und hoch — die Craft-Beer- und
Burger-Grammatik der letzten zehn Jahre und damit exakt der Markt-Einheitsbrei, von dem sich das
Haus absetzen soll. Archivo Expanded geht in die Gegenrichtung: breit statt hoch, Fläche statt
Turm.
**Warum Karla und nicht Source Sans 3:** Karla hat breitere Punzen und eine leicht unregelmässige
Achse — sie hält bei 19px Temperatur, wo Source Sans neutral-korrekt bleibt. Für ein Quartierlokal
ist Neutralität der falsche Ton. Karla trägt zusätzlich saubere Tabellenziffern (`tnum`), was das
Motiv «Heftzeile» überhaupt erst möglich macht.

### 3.2 Hierarchie (voll)

| Ebene | Font | Desktop | Mobile ≤767 | Weight | Zeilenhöhe | Letter-Spacing | Einsatz |
|---|---|---|---|---|---|---|---|
| **D1 — Die Ansage** | Archivo `wdth 125` VERSAL | **132px** | 46px | 700 | 0.94 | −0.02em | Hero, zweizeilig: «NEUN GERICHTE / SEIT 1978» |
| **D2 — Bahn-Titel** | Archivo `wdth 125` VERSAL | 88px | 38px | 700 | 1.00 | −0.015em | «DIE NEUN», «KÜCHENZEIT», «WAS GÄSTE SAGEN» |
| **Z1 — Heftzeile gross** | Archivo `wdth 125` VERSAL | 68px | 32px | 700 | 1.05 | −0.01em | Die 3 Wege-Zeilen |
| **Z2 — Heftzeile Karte** | Archivo `wdth 125` VERSAL | 40px | 24px | 700 | 1.10 | 0 | Die 9 Gerichtnamen |
| **Z2-Wert — Preis** | Karla `tnum` | 40px | 24px | 700 | 1.10 | 0 | Preis rechtsbündig, Grundlinie mit Z2 |
| **Z3 — Heftzeile klein** | Archivo `wdth 125` VERSAL | 30px | 22px | 700 | 1.15 | 0 | Wochentage, Kontakt-Labels, Gästenamen |
| **Z3-Wert** | Karla `tnum` | 30px | 22px | 400 | 1.15 | 0 | Zeiten, Sterne `5/5`, Telefonnummer |
| **H3 — Beleg-Zwischentitel** | Archivo `wdth 125` VERSAL | 30px | 22px | 700 | 1.20 | 0 | Nur in der Beleg-Bahn |
| **N — Zeilennummer** | Karla `tnum` | 19px | 14px | 700 | 1.0 | +0.06em | `01`–`09`, `01`–`07` |
| **B — Fliesstext** | Karla | **19px** | 16px | 400 | 1.60 | 0 | Beleg-Bahn, Zitate, Anfahrt |
| **B2 — Zweitzeile** | Karla | 16px | 14px | 400 | 1.55 | 0 | Gericht-Beschreibung, Bildlegende |
| **L — Versal-Label** | Karla VERSAL | 12px | 12px | 700 | 1.20 | **+0.12em** | Eyebrows, Status, Sprachwahl, Formularlabel |
| **C — Knopf-Label** | Karla | 17px | 16px | 700 | 1.00 | +0.02em | Alle Knöpfe |
| **Zitat** | Karla | 22px | 18px | 400 | 1.50 | 0 | Gästestimmen, italienisches Original kursiv |

**Satzregeln:**
- **Tracking 0 ab 24px aufwärts** ausser den Display-Stufen D1/D2/Z1, die negativ laufen
  (−0.01 bis −0.02em) — grosse Versalien werden sonst luftig statt fest.
- **Versal-Label unter 13px: +0.12em.** *Ehrlichkeitsvermerk:* die Richtung notierte «+3.4 unter
  13px» ohne Einheit; als px gelesen wären das 0.28em und würden die Spacing-Doktrin
  (+0.06–0.12em für Versal-Label) sprengen. Wir setzen den obersten zulässigen Wert der Doktrin:
  **+0.12em bei 11–12px, +0.10em bei 13px.**
- **`font-feature-settings: "tnum"` auf jeder Zelle, die eine Zahl trägt** — Preis, Uhrzeit,
  Telefonnummer, Jahreszahl, Sternwert, Zeilennummer. Ohne `tnum` verspringt die rechte Kante der
  Heftzeile und das Motiv fällt in sich zusammen.
- Alle Preise und Zeiten **rechtsbündig**, alle Namen **linksbündig**. Nie zentriert.
- Archivo erscheint **ausschliesslich in Versalien**. Ein Archivo-Satz in Gemischtschrift existiert
  in diesem System nicht.
- Karla erscheint **nie über 22px** ausser als `tnum`-Wert in der Heftzeile (40px / 30px).
- Zeilenlänge im Fliesstext: 62–74 Zeichen, Spalte ≤ 620px. Kein Blocksatz, linksbündig mit
  Flattersatz.

---

## 4. Component Stylings

Grundgesetz der Form: **Fläche mit harter Kante.** `border-radius: 0` auf allem — Bahnen, Bildern,
Feldern, Karten, Ghost-Knöpfen. Die einzige Ausnahme ist die **Telefon-Pille** (`9999px`). Werte
zwischen 1px und 32px Radius **existieren in diesem System nicht**. Standard-Transition überall:
`0.18s cubic-bezier(0.2, 0, 0, 1)`; `:active` läuft auf `0.08s ease-out`.

### 4.1 Knopf — Primär «Die Pille» (Telefon-CTA)

Nur dieser eine Knopftyp ist rund. Es gibt **genau einen gefüllten Knopf pro Bahn**.

| State | Hintergrund | Text | Rahmen | Weiteres |
|---|---|---|---|---|
| default | `#b45946` | `#ffffff` | keiner | Radius 9999px · Höhe **64px** (Desktop) / 56px (Mobil) · Padding `0 var(--space-4)` (40px) · Label C 17px/700 · kein Schatten |
| hover | `#a34d3b` | `#ffffff` | keiner | Zusätzlich wächst eine **2px Heftlinie in `#ffffff`** unter dem Label von links nach rechts auf 100 % Labelbreite, `0.18s`. Kein Lift, kein Glow, keine Skalierung. |
| active | `#9c4735` | `#ffffff` | keiner | `transform: translateY(1px)`, `0.08s ease-out`; Heftlinie bleibt auf 100 % |
| focus-visible | `#b45946` | `#ffffff` | `outline: 3px solid #ffffff; outline-offset: 3px` | Auf hellem Grund stattdessen `outline: 3px solid #271d1c`. Nie `outline: none`. |
| disabled | `#d5cccb` | `#837471` | keiner | `cursor: not-allowed`, kein Hover, keine Heftlinie. **Gilt nie für die Telefonnummer** (siehe 4.2). |

### 4.2 Der Reservationspfad als Zustand (nicht als Nummer)

Die Nummer ist immer wählbar — ein Telefonlink wird **nie** disabled. Was sich ändert, ist Label
und Zweitweg. Der Zustand wird aus `content.oeffnungszeiten` gegen `Europe/Zurich` berechnet.

| Zustand | Punkt | Statuszeile (L 12px VERSAL) | Label der Pille | Zweitweg daneben |
|---|---|---|---|---|
| **Küche offen** | 8px `#9fa75f` | `HEUTE OFFEN BIS 14:30` | `ANRUFEN · +39 051 615 3921` | keiner |
| **Heute noch offen (Pause)** | 8px `#9fa75f` | `HEUTE WIEDER AB 19:00` | `ANRUFEN · +39 051 615 3921` | Ghost `KÜCHENZEIT ANSEHEN` (Anker auf die Tafel) |
| **Heute zu** | 8px `#d5cccb` | `HEUTE ZU · MORGEN AB 12:00` | `ANRUFEN AB 12:00` | Ghost `KÜCHENZEIT ANSEHEN` |
| **Montag (Ruhetag)** | 8px `#d5cccb` | `MONTAG IST RUHETAG` | `ANRUFEN AB DI 19:00` | Ghost `KÜCHENZEIT ANSEHEN` |
| **JS aus / Zeit unbekannt** | kein Punkt | `KÜCHENZEIT SIEHE UNTEN` | `ANRUFEN · +39 051 615 3921` | Ghost `KÜCHENZEIT ANSEHEN` |

Der Punkt ist ein `<span>` mit `width/height: 8px`, `border-radius: 9999px` (zulässige Ausnahme,
weil es ein Punkt ist, kein Knopf) und `aria-hidden="true"`; der Zustand steht zusätzlich im Text.

### 4.3 Knopf — Sekundär «Ghost»

| State | Hintergrund | Text | Rahmen |
|---|---|---|---|
| default (auf Dunkel) | transparent | `#ffffff` | `1px solid #d5cccb`, Radius **0**, Höhe 56px, Padding `0 var(--space-3)` |
| hover | `#fdf6f4` | `#4c2f28` | `1px solid #fdf6f4` — vollständige Füllung, kein Lift |
| active | `#f5f0ef` | `#4c2f28` | `1px solid #f5f0ef`, `translateY(1px)` |
| focus-visible | wie default | `#ffffff` | `outline: 3px solid #ffffff; outline-offset: 3px` |
| disabled | transparent | `#837471` | `1px solid #837471`, `cursor: not-allowed` |
| default (auf Hell) | transparent | `#271d1c` | `1px solid #d5cccb` — Hover füllt `#271d1c` / Text `#fdf6f4` |

### 4.4 Textlink / Heftzeile als Link

| State | Wert |
|---|---|
| default | Farbe erbt (`#271d1c` hell, `#ffffff` dunkel), `text-decoration: underline`, `text-decoration-color: #d5cccb`, `text-underline-offset: 6px`, `text-decoration-thickness: 1px` |
| hover | `text-decoration-color: #b45946`, `thickness: 2px` — die Farbe wechselt, der Text nie |
| active | `thickness: 3px` |
| focus-visible | `outline: 3px solid` (hell `#271d1c`, dunkel `#ffffff`), `outline-offset: 2px` |
| besucht | keine eigene Farbe — `:visited` wird nicht gestaltet |

### 4.5 Die Heftzeile als Bauteil (Signature-Component)

```
grid-template-columns: 56px 1fr max-content;   /* Nummer | Name+Beschreibung | Wert */
column-gap: var(--space-3);                     /* 24px */
align-items: baseline;
min-height: var(--zeile-min);                   /* 96px Desktop */
padding-block: var(--space-3);                  /* 24px */
border-bottom: var(--heftlinie) solid;          /* 1px */
border-radius: 0;
```
Heftlinien-Farbe je Grund: auf `#b45946` → `rgb(255 255 255 / 0.32)` · auf `#4c2f28` / `#271d1c`
→ `rgb(213 204 203 / 0.40)` · auf `#fdf6f4` → `#d5cccb`.

| State (nur wenn die Zeile ein Link ist) | Wert |
|---|---|
| default | wie oben, kein Hintergrund |
| hover | Heftlinie auf **2px** und volle Deckkraft; die Nummer rückt `transform: translateX(4px)`, `0.18s` |
| active | Nummer `translateX(6px)`, `0.08s` |
| focus-visible | `outline: 3px solid` (Grundabhängig `#ffffff` / `#271d1c`), `outline-offset: -3px` (innen, damit die Zeilenkante gerade bleibt) |
| letzte Zeile einer Bahn | `border-bottom: none` — der Block schliesst offen |

### 4.6 Karte (Gästestimme)

Es gibt nur einen Kartentyp, und er ist rein typografisch.

| Eigenschaft | Wert |
|---|---|
| Grund | `#f5f0ef` auf der `#fdf6f4`-Bahn |
| Rahmen | keiner. Getrennt wird über `border-top: 1px solid #d5cccb` |
| Radius / Schatten | `0` / **keiner** |
| Innenabstand | `var(--space-4)` (40px) Desktop, `var(--space-3)` (24px) Mobil |
| Aufbau | Heftzeile-Kopf (Name Z3 VERSAL links, `5/5` Z3 `tnum` rechts) → Zitat 22px → italienisches Original 16px kursiv `#625755` |
| hover | keiner — die Karte ist nicht klickbar |

**Kuratierungsregel:** nur Bewertungen **≥ 4 Sterne**, **maximal 3**, jeweils mit Autor und Datum
aus dem Dossier. Original-Sprache stehen lassen, deutsche Übersetzung darüber. Keine
Sterne-Grafik, keine Google-Logos, keine Durchschnittsnote.

### 4.7 Bild-Container

`object-fit: cover` · `border-radius: 0` · kein Rahmen, kein Schatten, kein Hover-Zoom.
Vollbild-Bänder laufen `width: 100vw` randlos. Schrift auf dem Bild nur als D1/D2 VERSAL in
`#ffffff` über einem Verlauf `linear-gradient(to top, #4c2f28 0%, rgb(76 47 40 / 0.86) 34%, rgb(76 47 40 / 0) 78%)`.
Formate: **Makro 1:1** (Hände, Teig, Sugo) gegen **Weite 16:9** (Gastraum, Strasse) — genau eine
Gradation pro Seite, nie zwei Vollbilder hintereinander.

### 4.8 Navigation

**Kopf (sticky, `position: sticky; top: 0; z-index: 50`)**
- Höhe 72px Desktop / 64px Mobil, Grund `#4c2f28`, kein Schatten.
- Links: Rundsiegel (`logo-weiss.png`) **40px**. Kein Wortmarken-Text daneben — das Siegel trägt
  den Namen bereits.
- Rechts: Sprachwahl `DE / IT` als L-Label 12px VERSAL `#d5cccb` (aktiv `#ffffff`), dann die
  Telefon-Pille (4.1), Höhe 48px im Kopf.
- Ab Scroll-Position > 88vh: `border-bottom: 1px solid rgb(213 204 203 / 0.28)` blendet über
  `0.18s` ein. Sonst ändert sich am Kopf nichts — kein Schrumpfen, kein Farbwechsel.
- Es gibt **keine Menüpunkte**. Die Seite ist eine Seite; Anker gibt es nur aus dem Ghost-Knopf.

**Handy-Anrufleiste (`position: fixed; bottom: 0`)**
- Volle Breite, Höhe **64px** (Trefferfläche ≥ 44px erfüllt), Grund `#b45946`, Label C 16px/700
  `#ffffff`, Radius 0 (die Leiste ist Fläche, nicht Pille).
- Erscheint, sobald der Hero zu 100 % gescrollt ist; verschwindet, sobald der Footer sichtbar wird
  (`IntersectionObserver`), jeweils `transform: translateY(100%)` → `0`, `0.18s`.
- Einzige Stelle der Seite mit Schatten: `var(--brand-shadow)` (siehe §6).
- `padding-bottom: env(safe-area-inset-bottom)`.

### 4.9 Formularfeld (nur Kontakt-Fallback, kein Reservationsformular)

| State | Wert |
|---|---|
| default | Grund `#fdf6f4`, `1px solid #d5cccb`, Radius **0**, Höhe 56px, Padding `0 var(--space-2)`, Text B 19px `#271d1c`, Placeholder `#625755` |
| hover | `border-color: #837471` |
| focus | `border: 1px solid #271d1c` **und** `outline: 3px solid #271d1c; outline-offset: 2px` |
| error | `border: 2px solid #9c4735`, Hinweistext darunter 16px `#9c4735` (≈5.85, berechnet) |
| disabled | Grund `#f5f0ef`, Text `#837471`, `cursor: not-allowed` |
| Label | L 12px VERSAL `#625755`, **über** dem Feld, `margin-bottom: var(--space-1)` |

**Es wird bewusst kein Reservationsformular gebaut.** Der USP lautet «Kein Reservierungssystem —
man ruft an». Ein Formular würde die Aussage der Seite widerlegen.

### 4.10 Icons

Das Logo ist **handgezogene Linie mit gleichmässiger Stärke und runden Enden** — keine
technische Konstruktionszeichnung. Darum **Phosphor**, Weight `regular` (runde Terminals,
weichere Kurven), nicht Lucide (dessen Neutralität wäre neben dem Siegel kalt).

- Standardgrösse 24px, inline 20px, Farbe erbt immer vom Text.
- **Maximal vier Icons auf der ganzen Seite:** `Phone`, `Clock`, `MapPin`, `ArrowRight`.
- **Verbote:** kein Icon in der Heftzeile, kein Icon-Grid, keine Icons als Sektionsschmuck, kein
  gefülltes Weight (`fill`), keine Icons als Aufzählungspunkte.

`ICON_SET: phosphor`
`ICON_STYLE: weight="regular" (≈1.5px Kontur bei 24px), 24px Standard / 20px inline, currentColor, keine fill-Variante`

---

## 5. Layout Principles

### 5.1 Die Spacing-Doktrin (8er-Skala, projektkonkret)

| Token | px | Einsatz in diesem Projekt |
|---|---|---|
| `--space-1` | **8** | Nummer → Name, Punkt → Statuszeile, Label → Feld, Icon → Text |
| `--space-2` | **12** | D1-Zeile → Statuszeile, Gerichtname → Beschreibung |
| `--space-3` | **24** | Zwischen Gruppen: Spalten-Gap der Heftzeile, Text → Knopf, Karte → Karte, Innenabstand mobil |
| `--space-4` | **40** | Grosse Trennung innerhalb einer Bahn: Bahn-Titel → erste Heftzeile, Karten-Innenabstand, Pillen-Padding |
| `--space-5` | **72** | **Standard-Sektionsabstand** (`padding-block`) aller Bahnen |
| `--space-6` | **112** | Kapitel-Atempause — **maximal 2× pro Seite**: die Terracotta-Bahn «Die Neun» und die Beleg-Bahn |

**Verhältnis-Gesetz:** in-Gruppe : zwischen-Gruppen : Sektion = **8 : 24 : 72 = 1 : 3 : 9** —
erfüllt das geforderte 1 : 2-3 : 6+ mit Reserve. **Nähe = Zugehörigkeit:** Beschreibung klebt mit
12px am Gerichtnamen, der nächste Gerichtname steht 24px + Heftlinie weiter weg. Der Mittelwert-
Brei (alles ~32px) ist verboten; **Ad-hoc-Pixel-Padding (`p-[37px]`) ist ein Blocker** — nur
`var(--space-n)`.

Zeilenhöhen je Grössenstufe (Doktrin): Display ≥ 64px → 0.94–1.05 · 30–48px → 1.10–1.20 ·
Body → 1.55–1.60. Letter-Spacing: Display gross → −0.01 bis −0.02em · Versal-Label → +0.10 bis
+0.12em · Body → 0.

### 5.2 Container & Raster

- **Container 1240px**, Seitenrand 100px bei 1440px Viewport (`--brand-container: 1240px`).
- **Vollbild-Bänder und die Terracotta-Bahn brechen den Container** und laufen 100vw randlos; der
  *Inhalt* darin bleibt im 1240er Satzspiegel.
- **Fliesstext ≤ 620px** (50 % des Containers) — nie über die Containerbreite laufen lassen.
- **Asymmetrie-Prinzip:** **maximal EIN 3-Spalten-Grid auf der ganzen Seite** — die drei
  Gästestimmen. Alles andere ist entweder einspaltig über die volle Breite (jede Heftzeilen-Bahn)
  oder ein **ungleicher Zweispalter** in der Beleg-Bahn: Text `x = 100…720`, Detailbild
  `x = 820…1340` (bricht rechts über den Container hinaus). Nichts wird zentriert ausser dem
  Logo-Siegel im Footer.

### 5.3 Sektions-Rhythmus (Desktop, und zugleich der Beleg für die 70 %)

| # | Bahn | Grund | Höhe ca. | Padding | dunkel? |
|---|---|---|---|---|---|
| 0 | Kopf (sticky) | `#4c2f28` | 72 | — | ● |
| 1 | **Hero** — Vollbild Küche + Verlauf | Foto → `#4c2f28` | 88vh ≈ 860 | 0 | ● |
| 2 | **Wege** — 3 Heftzeilen | `#4c2f28` | 520 | `--space-5` | ● |
| 3 | **Die Neun** — 9 Heftzeilen | `#b45946` | 1180 | `--space-6` | ● |
| 4 | **Der Beleg** — Geschichte, Fliesstext + Heftdetail | `#fdf6f4` | 760 | `--space-6` | ○ |
| 5 | **Bildband** — Vollbild Gastraum 16:9 | Foto, Grade auf `#4c2f28` | 560 | 0 | ● |
| 6 | **Gästestimmen** — 3 Spalten | `#fdf6f4` | 520 | `--space-5` | ○ |
| 7 | **Küchenzeit** — 7 Heftzeilen | `#271d1c` | 620 | `--space-5` | ● |
| 8 | **Kontakt & Anfahrt** — 3 Heftzeilen + Karte | `#fdf6f4` | 480 | `--space-5` | ○ |
| 9 | **Footer** | `#271d1c` | 420 | `--space-5` | ● |

Summe ≈ 5992px · dunkel 4232px = **70,6 %** · hell 1760px = 29,4 %. Damit liegt die Seite im
Korridor 55–85 % und trifft `DUNKELANTEIL_ZIEL: 70%`.

**Muster:** Wand — Wand — **laut** — hell — Bild — hell — Wand — hell — Wand. Nach der
Terracotta-Bahn folgt sofort die Lesebahn (Regel 2.3/4); nach dem Bildband ebenfalls. Zwei
dunkle Bahnen dürfen aufeinander folgen (Kopf → Hero → Wege), weil Ofendunkel die **Wand** ist
und nicht als Farbfläche zählt — laut sind nur Terracotta und Vollbild.

### 5.4 «Der Beleg» — die eine redaktionelle Bahn

Die Ansage «40 Jahre dieselbe Karte» braucht einen Beweis, sonst ist sie laut und unbeglaubigt.
Die Beleg-Bahn (#4) ist die einzige Stelle mit erzählendem Fliesstext und die einzige ohne
Heftzeile:

- **Linke Spalte (620px):** drei Absätze Karla 19px — Rosa kommt 1962 aus Kalabrien, kocht für die
  Bauarbeiter; 1978 das Lokal an der Baselstrasse; das Rezeptheft liegt heute noch in der Küche.
- Ein hervorgehobenes Zitat von Salvatore, 22px, mit `border-left: 3px solid #b45946`,
  `padding-left: var(--space-3)` — Terracotta hier nur als **Linie**, nie als Fläche.
- **Drei Jahreszahlen** in D2-Grade VERSAL `tnum` (`1962` · `1978` · `2026`) als eine Zeile,
  darunter je eine Zeile B2 16px `#625755`. Die Zahlen dürfen `#b45946` sein — 88px ≥ 24px,
  damit greift `aa_large` (4.41).
- **Rechte Spalte:** ein Makro-Detailfoto der aufgeschlagenen Heftseite (Handschrift), 1:1,
  randlos über die rechte Containerkante hinaus. Bildlegende B2 16px `#625755` darunter.

---

## 6. Depth & Elevation

**Philosophie in einem Satz:** *Das Logo ist Linie, also baut diese Seite Tiefe aus Grundwechsel,
Kante und Bild — Licht kommt nur dort ins Spiel, wo etwas nicht zum Inhalt gehört.*
Konkret: **Fünf von sechs Ebenen sind schattenlos.** Der einzige Schatten der Seite gehört der
System-UI (der Handy-Anrufleiste) und ist ein **nach oben geworfener Saum**, kein Schlagschatten
— eine Fläche, die sich unter den Inhalt schiebt, wirft kein Licht nach unten.

| Stufe | Mittel | Radius | Schatten | Wo |
|---|---|---|---|---|
| **E0 — Wand** | Sektionsfläche `#4c2f28` / `#271d1c` / `#fdf6f4`, keine Kante | 0 | keiner | Alle Bahnen |
| **E1 — Heftlinie** | 1px Linie (`#d5cccb` bzw. `rgb(255 255 255 / 0.32)`) | 0 | keiner | Jede Heftzeile, Kopf-Unterkante, Karten-Trenner |
| **E2 — Feld** | 1px Rahmen ohne Füllung | 0 | keiner | Ghost-Knopf, Eingabefeld |
| **E3 — Fläche** | Grundwechsel Wand → Terracotta bzw. Wand → Foto | 0 | keiner | Die-Neun-Bahn, Vollbild-Bänder, `#f5f0ef`-Zitatfeld |
| **E4 — Auflage** | Element liegt *auf* E3, deckend | 9999px (nur die Pille) | keiner | Telefon-Pille im Kopf, Verlaufs-Scrim über dem Hero |
| **E5 — Systemauflage** | Fixierte Leiste über dem Inhalt | 0 | `var(--brand-shadow)` = `0 -2px 10px rgb(39 29 28 / 0.22)` | **Nur** die Handy-Anrufleiste (§4.8) |
| **E6 — Overlay** | Vollflächige Schublade (Sprachwahl mobil) | 0 | `var(--brand-shadow-lift)` = `0 -6px 28px rgb(39 29 28 / 0.34)` | Nur falls die Sprachwahl auf Mobil als Schublade gebaut wird |

**Regeln:** Beide Schattenwerte haben **negativen y-Offset** — es gibt auf dieser Seite keinen
nach unten fallenden Schatten. `box-shadow` auf Karten, Knöpfen, Bildern oder Bahnen ist ein
Blocker. Radien: es existieren **genau zwei** — `0` und `9999px`.

**Known Gaps (ehrlich):** Motion über die drei genannten Transitions hinaus (Scroll-Animationen,
Parallax, Reveal) ist **nicht spezifiziert** und soll nicht erfunden werden. `prefers-reduced-motion:
reduce` schaltet alle Transitions auf `0.01ms` und die Heftlinien-Animation ganz ab.

---

## 7. Do's and Don'ts

**Do**
1. **Setze die Telefonnummer strukturell so gross wie den Namen.** Pille im Kopf ab dem ersten
   Pixel, Anrufleiste auf Mobil, Telefonzeile als erste Heftzeile im Kontakt. Das Ziel heisst
   «reservieren», und reservieren heisst hier anrufen.
2. **Wende die Heftzeile in genau fünf Bahnen an** (Wege, Die Neun, Küchenzeit, Gästestimmen,
   Kontakt) — dieselbe Grammatik, fünf verschiedene Inhalte. Das macht sie zum System statt zum
   Einzelstück.
3. **Halte 70 / 29 / <1.** Ofendunkel + Nachtfuss + Terracotta 70 %, Lesefläche 29 %, Blattgrün
   unter 1 %.
4. **`tnum` auf jede Zahl.** Preis, Zeit, Jahr, Sternwert, Zeilennummer — die rechte Kante der
   Heftzeile muss stehen wie ein Lineal.
5. **Zeige Menschen.** Mindestens drei der fünf Bilder mit Personen, mindestens eines mit einem
   Gesicht auf ≥ 25 % Bildfläche (§10). Ohne Menschen kippt 70 % Dunkel plus Versalsatz ins
   Agenturkühle.
6. **Zwei Radien, mehr nicht:** `0` überall, `9999px` für die Pille und den 8px-Statuspunkt.
7. **Baue Asymmetrie:** Fliesstext auf 620px, Detailbild über die rechte Containerkante hinaus,
   Jahreszahlen als eigene Zeile — nie alles auf eine Mittelachse.
8. **Belege die Ansage.** Die Beleg-Bahn mit Jahreszahlen, Heft-Detailfoto und einem Zitat ist
   Pflicht, nicht Kür.

**Don't**
9. **Kein Foto in der Terracotta-Bahn.** Sobald dort ein Teller auftaucht, ist es eine Speisekarte
   wie jede andere und die Ansage verpufft.
10. **Kein `box-shadow`** ausser den zwei nach oben gerichteten Systemwerten (§6). Keine
    Radien zwischen 1px und 32px — die 4–12px-Rundung ist der teuerste Fehler dieser Branche.
11. **Kein zentrierter Gradient-Hero, kein Icon-Grid, kein «Unsere Werte»-Dreier, kein
    Feature-Karten-Stapel, kein Karussell, kein Reservationsformular.** Diese Baukasten-Bauteile
    sind einzeln verboten.
12. **Keine Fremdfarbe — die Regel lautet Allowlist, nicht Blocklist.** Erlaubt sind
    ausschliesslich die 40 Werte aus `tokens.css`; alles andere ist verboten, ohne dass es
    einzeln aufgezählt werden müsste. Explizit mitgemeint: kein Tailwind-`amber/stone/slate`,
    keine der drei geschätzten Dossier-Zweitfarben (§2.0-a), keine Dunkelstufe aus
    `skalen.*.dark`, kein `#ffffff` als Fläche. Und: **kein verbotener Wert wird irgendwo als
    Hex hingeschrieben** — auch nicht in einem Kommentar, einer Beispielzeile oder einer
    deaktivierten CSS-Regel.
13. **Olivgrün trägt nie ein Zeichen.** Kein Text in `#9fa75f` (2.41), keine Fläche in `#9fa75f`
    mit Schrift darauf (2.57), kein grüner Knopf, kein grüner Rahmen. Nur der 8px-Punkt.
14. **Terracotta nie als Fliesstextfarbe** auf Hell (4.41 reisst AA) — erlaubt ausschliesslich
    ≥ 24px / 700 oder als 3px-Linie.
15. **Archivo nie in Gemischtschrift, nie im Fliesstext, nie unter 24px.** Karla nie über 22px
    ausser als `tnum`-Wert.
16. **Keine Bewertung unter 4 Sternen und keine Durchschnittsnote** auf der Seite. Ausserdem: kein
    Stock-Foto, keine Flagge Italiens, keine Pizzaschaufel, keine karierte Tischdecke als Deko,
    kein Schriftzug im Bild.

---

## 8. Responsive Behavior

| Breakpoint | Breite | Was passiert |
|---|---|---|
| **Handy** | 320–767 | Einspaltig. Typo-Skala D1 46 / Z1 32 / Z2 24 / Z3 22 / B 16. Kopf 64px, Pille im Kopf **entfällt** (dafür die fixierte Anrufleiste unten). Seitenrand `var(--space-3)` (24px). |
| **Tablet** | 768–1023 | Weiter einspaltig; Gästestimmen 3 → **1 Spalte gestapelt**. D1 88px, Z1 48px, Z2 32px, B 17px. Seitenrand 40px. Pille kehrt in den Kopf zurück, Anrufleiste entfällt. |
| **Klein-Desktop** | 1024–1439 | Beleg-Bahn wird zweispaltig (Text 55 % / Bild 45 %), Gästestimmen 3 Spalten. D1 108px. Container `min(1240px, 100% - 80px)`. |
| **Desktop** | ≥ 1440 | Volle Skala (§3.2). Container 1240px, Seitenrand 100px. |

**Die Terracotta-Bahn auf 390px — exakt spezifiziert.** Die Heftzeile wird von 3 Spalten auf ein
**2-zeiliges Raster**:
```
grid-template-columns: 40px 1fr max-content;
Zeile 1:  [01]  MACCHERONI AL FERRETTO            26.50
Zeile 2:   —    Handgerollt am Stricknadel-Draht, Sugo di maiale, Pecorino
```
Name Z2 24px VERSAL (bricht auf max. 2 Zeilen, `hyphens: none`), Preis 24px `tnum` rechtsbündig
auf der **Grundlinie der ersten Namenszeile** (`align-self: baseline`), Beschreibung B2 14px
`#ffffff` über beide Inhaltsspalten, eingerückt auf 40px. `min-height` fällt von 96px auf 72px,
`padding-block` von `--space-3` auf `--space-2`. Heftlinie bleibt 1px.

**Weitere Mobil-Regeln:**
- **Hero bleibt Vollbild**, aber `min-height: 72vh; max-height: 640px` — 88vh wäre auf 390×844 ein
  leeres Loch. Der Verlauf startet höher (`52%` statt `78%`), damit D1 in 46px trägt.
- **«Nie zwei laute Bahnen hintereinander» gilt im gestapelten Zustand unverändert** — die
  Reihenfolge der Bahnen wird auf keinem Breakpoint umsortiert, nur ihre Innenlogik ändert sich.
- **Kein einziges Stilmittel wird geopfert:** Heftlinie, Nummerierung, `tnum`-Rechtskante,
  Versalsatz, Radius-0 und das Farbverhältnis überleben alle Breakpoints. Aufgegeben werden nur
  Spalten (3 → 1) und die Kopf-Pille.
- **Touch-Targets ≥ 44px**: Anrufleiste 64px, Pille 56px, Sprachwahl 44×44px,
  Heftzeilen-Links ≥ 72px Zeilenhöhe.
- **390px-Regel:** kein horizontales Scrollen. Konkret: `overflow-x: hidden` auf `body`, das
  überstehende Beleg-Detailbild wird ab < 1024px bündig eingezogen, D1 mit
  `overflow-wrap: break-word` abgesichert, alle `tnum`-Werte `white-space: nowrap`.
- `prefers-reduced-motion: reduce` → alle Transitions `0.01ms`, keine Heftlinien-Animation, die
  Anrufleiste erscheint ohne `translateY`.

---

## 9. Agent Prompt Guide

**Setze** den Kopf sticky auf `#4c2f28` mit dem 40px-Rundsiegel links und der Telefon-Pille rechts
— ab dem ersten gerenderten Pixel, ohne Menüpunkte.
**Setze** den Hero als randloses Küchenfoto über 88vh (mobil 72vh, max 640px) mit dem Verlauf nach
`#4c2f28` und darauf linksbündig, zweizeilig, Archivo `wdth 125` 700 VERSAL 132px in `#ffffff`:
«NEUN GERICHTE / SEIT 1978». Darunter **eine** Zeile: Statuspunkt + Ort + heutige Küchenzeit.
**Setze** danach die drei Wege als 68px-Heftzeilen auf `#4c2f28`.
**Setze** die neun Gerichte als reine Typo-Liste auf einer vollflächigen `#b45946`-Bahn, mit
Nummern `01`–`09`, Namen in VERSAL, Preisen rechtsbündig in `tnum`, `#ffffff` als einziger
Schriftfarbe.
**Setze** die Heftzeilen-Grammatik ausserdem auf Küchenzeit (7 Zeilen), Gästestimmen (3 Köpfe) und
Kontakt (3 Zeilen) — dieselbe Struktur, fünf Bahnen.
**Setze** `font-feature-settings: "tnum"` auf jede Zelle mit einer Zahl.
**Setze** den Reservationszustand aus den Öffnungszeiten (Zeitzone `Europe/Zurich`) und wechsle
Label und Zweitweg nach der Tabelle in §4.2. Der `tel:`-Link ist nie disabled.
**Setze** auf Mobil eine fixierte Anrufleiste, 64px hoch, `#b45946`, ab Ende des Heros.
**Setze** `border-radius: 0` global und `9999px` nur auf Pille und Statuspunkt.
**Setze** alle Abstände über `var(--space-1..6)`.

**Vermeide** jedes Tellerfoto in der Terracotta-Bahn.
**Vermeide** `box-shadow` ausser den zwei nach oben gerichteten Systemwerten.
**Vermeide** jeden Radius zwischen 1px und 32px.
**Vermeide** Olivgrün für Text oder Textflächen.
**Vermeide** zentrierte Gradient-Heroes, Icon-Grids, Karussells, Feature-Karten-Stapel und jedes
Reservationsformular.
**Vermeide** Farben, die nicht in `tokens.css` stehen.
**Vermeide** Bewertungen unter 4 Sternen auf der Seite.
**Vermeide** Text im generierten Bild.

**Bildstimmung für alle generierten Bilder:**
- **COLOR:** warme Terracotta- und Ofenbraun-Töne, cremeweisse Lichter, ein einziger gedämpft
  olivgrüner Akzent (Kräuter, Blattwerk); keine kühlen Blau- oder Cyan-Anteile.
- **LIGHT:** einzige weiche Quelle von der Seite (Fenster oder Küchenlampe), tiefe warme Schatten,
  1–2 Blenden unterbelichtet; kein Blitz, kein Studiolicht, kein Gegenlicht-Halo.
- **MOOD:** gebraucht, warm, ungestellt, ein bisschen laut — ein Abend, kein Katalog.

`IMAGE_STYLE: Warm, available-light documentary photography inside a small family-run Italian trattoria — deep terracotta and oven-brown shadows, cream highlights, one muted olive-green note, faces and hands caught mid-work or mid-laugh at close range, slight grain, no styling and no props, framed as if the room were photographed for a printed essay rather than a menu.`

`MOODBOARD_PROMPT: A single warm documentary photograph inside a small old Italian trattoria at night, one soft window-light source from the left, an older woman's hands rolling pasta dough on a worn wooden table in the foreground, a blurred crowded dining room with a laughing guest behind her, deep terracotta and oven-brown shadows, cream highlights, one muted olive-green herb note, fine film grain, underexposed by one stop, shallow depth of field, no text, no lettering, no logos, no props styling, no flags, no checkered tablecloth.`

---

## 10. Bildsprache-Rezept

Jedes generierte oder ausgewählte Bild folgt diesem Fundament — der Einzeiler oben ist nur die
Kurzfassung.

| Parameter | Vorgabe |
|---|---|
| **SUBJEKT — immer** | (1) Rosa/Salvatore bzw. eine ältere Köchin und ein Wirt bei der Arbeit, Gesicht sichtbar. (2) Hände am Teig, am Stricknadel-Draht, am Sugo-Topf. (3) Voller Gastraum am Abend: Gäste an Tischen, jemand lacht. (4) Die aufgeschlagene Heftseite mit Handschrift. (5) Die Hausfassade/Strasse in der Dämmerung. |
| **SUBJEKT — nie** | Einzelner gestylter Teller von oben (Flat-Lay), leerer Gastraum, Kellner in Pose mit verschränkten Armen, Weinglas-Nahaufnahme mit Bokeh-Lichterkette, Pizzaschaufel, Italien-Flagge, karierte Tischdecke, Basilikum-Deko auf weissem Marmor, Hochglanz-Foodstyling. |
| **VERPFLICHTUNG auf Menschen** | Von 5 Bildern zeigen **mindestens 3 Menschen**, **mindestens 1** ein Gesicht auf ≥ 25 % Bildfläche, **mindestens 1** einen vollen Gastraum. Ohne diese Quote ist die Bildstrecke abzulehnen. |
| **LICHT** | Abend/späte Dämmerung oder Mittagslicht durch ein Seitenfenster. **Eine** weiche Quelle von links oder rechts, 30–60° seitlich. Harte Schlagschatten nur unter Töpfen und Händen. 1–2 Blenden unterbelichtet — die Seite ist dunkel, die Bilder auch. Kein Blitz, kein Ringlicht, kein Studio-Setup, kein Gegenlicht-Flare. |
| **KOMPOSITION** | Nah. Makro-Bilder 1:1, Raum-/Weite-Bilder 16:9, Portraits 4:5. Augenhöhe oder leicht darunter — nie von oben. Anschnitt ist erwünscht: Arme, Töpfe, Tischkanten dürfen aus dem Bild laufen. Ein Motiv pro Bild, Hauptmotiv aussermittig (Drittel), Hintergrund unscharf (f/2.0–f/2.8). Kein Weitwinkel-Panorama, keine Drohne, keine Symmetrie-Mittelachse. |
| **COLOR-GRADE** | An die Marke gebunden: Schatten nach `#4c2f28` gezogen, Mitteltöne nach `#b45946`, Lichter auf `#fdf6f4` gesetzt (nie reinweiss ausbrennen). Genau **ein** gedämpft olivgrüner Akzent im Bild in Richtung `#9fa75f` (Kräuter, Blattwerk, Flaschenglas). Sättigung leicht zurück, Kontrast mittel-hoch, feines Filmkorn. Keine Blau-/Cyan-Schatten, kein Teal-and-Orange, kein HDR, keine Vignette. |
| **STIMMUNG** | gebraucht · warm · ungestellt |
| **NEGATIVE** | Text, Schrift, Logos, Wasserzeichen, Speisekarten im Bild · Stock-Anmutung, Model-Lächeln in die Kamera, gestellte Gruppenbilder · fremde Requisiten (Flaggen, Gondeln, Kolosseum, Chianti-Korbflasche, Pizzaofen mit Flammen) · Weissabgleich ins Kühle · glänzende Teller, Tropfen-Deko, Puderzucker-Sieb-Pose · KI-Artefakte an Händen und Gesichtern · Hochformat für Raumbilder. |

`BILDREZEPT: subjekt=Köchin/Wirt mit sichtbarem Gesicht, Hände am Teig und Sugo, voller Gastraum am Abend, Handschrift im Rezeptheft, Hausfassade in der Dämmerung — mind. 3 von 5 Bildern mit Menschen | licht=eine weiche Seitenquelle 30-60°, Abend oder Fenstermittag, 1-2 Blenden unterbelichtet, kein Blitz | komposition=nah und angeschnitten, Augenhöhe oder tiefer, Makro 1:1 gegen Weite 16:9, Hauptmotiv aussermittig, f/2.0-2.8 | grade=Schatten nach #4c2f28, Mitteltöne nach #b45946, Lichter auf #fdf6f4, genau ein olivgrüner Akzent Richtung #9fa75f, feines Korn | negative=Text/Logos, Stock-Lächeln, Flat-Lay-Teller, Italien-Klischees, karierte Tischdecke, kühler Weissabgleich, HDR, Vignette, KI-Handartefakte`

---

## 11. Sprache & Ton

**Anrede: `du`.** Das Dossier gibt `sprache.ansprache: "du"` vor, und es passt zur Sache: das
Publikum sind Stammgäste aus dem Quartier und Familien am Sonntag — Leute, die man beim Reinkommen
grüsst. «Sie» würde die Distanz aufbauen, die dieses Haus gerade nicht will. Sprachcode **de-CH**:
kein «ß», immer «ss» («Strasse», «grüssen»). Zweitsprache **it** als Kopf-Umschalter DE/IT;
italienische Gerichtnamen bleiben in **beiden** Fassungen unübersetzt.

**Ton-Adjektive:** herzlich · direkt · familiär · unaufgeregt · knapp.

Der Ton ist der eines Wirts, der gerade aus der Küche kommt und keine Zeit für Prosa hat, dich
aber kennt. Kurze Hauptsätze. Punkt statt Ausrufezeichen. Keine Adjektiv-Ketten — die Seite
behauptet nichts, sie sagt, was es gibt.

| Ort | Beispielsatz |
|---|---|
| **Hero** | «NEUN GERICHTE / SEIT 1978» · darunter: «Luzern, Baselstrasse. Heute offen bis 14:30.» |
| **CTA** | «Ruf an, wir halten dir einen Tisch. +39 051 615 3921» |
| **CTA ausserhalb der Küchenzeit** | «Heute ist zu. Ab morgen 12:00 nehmen wir wieder ab.» |
| **Hinweistext / leerer Zustand** | «Ein Reservierungssystem haben wir nicht. Du rufst an, wir schreiben deinen Namen auf.» |
| **Fehlertext (Formular-Fallback)** | «Da fehlt noch die Nummer — ohne die können wir nicht zurückrufen.» |
| **Beleg-Bahn** | «Rosa ist 1962 aus Kalabrien gekommen und hat für die Bauarbeiter gekocht. 1978 hat sie das Lokal aufgemacht. Ihr Heft liegt heute noch in der Küche.» |

**Wort-Verbote (kommen nie vor):**
1. «kulinarisch», «Genusserlebnis», «Gaumenfreude» — Prospektsprache.
2. «authentisch», «Dolce Vita», «La Mamma», «wie in Bella Italia» — Italien-Klischee; das Haus ist
   kalabrisch und in Luzern, nicht in einer Werbung.
3. «Wir freuen uns auf Ihren Besuch» und jede andere Sie-Floskel — bricht die Anrede.
4. «Highlights», «Specials», «Signature Dish», «Chef's Choice» — es gibt neun Gerichte, keine
   Auswahlarchitektur.
5. «Jetzt online reservieren», «Tisch buchen in 30 Sekunden» — widerspricht dem USP.

`SPRACHE: du`
`TON: herzlich, direkt, familiär, unaufgeregt, knapp`

---

## Known Gaps & Datenkonflikte (ehrlich benannt, nicht erfunden)

1. **Ort vs. Adresse vs. Telefon.** `identity.ort` sagt **Luzern** und die Geschichte nennt die
   **Baselstrasse**; `content.adresse` liefert aber «Via Piave 31/b, 40133 Bologna» und
   `content.kontakt.telefon` eine **italienische** Nummer (+39 051 615 3921). Der Build setzt
   Adresse und Nummer **wörtlich aus dem Dossier** und erfindet nichts — der Konflikt ist beim
   Kunden vor dem Livegang zu klären. Bis dahin: keine Landkarte mit Ortsmarke, nur die
   Adresszeile als Text, und die Telefonnummer exakt wie geliefert im `tel:`-Link.
2. **Gästestimmen sind italienisch/englisch und beziehen sich auf Bologna.** Deutsche
   Bewertungen liegen nicht vor. Regel: Original stehen lassen, deutsche Übersetzung darüber,
   Quelle «Google» nennen. Die vier 1–3-Stern-Bewertungen (u. a. zwei zum Service) werden nach
   der Kuratierungsregel (§4.6) nicht gezeigt — das ist eine Auswahl, keine Fälschung.
3. **Keine eigenen Fotos** (`content.bilder: []`). Alle Bilder werden nach §10 generiert und sind
   vor Livegang durch echte Aufnahmen aus dem Lokal zu ersetzen — insbesondere das Heft-Detail.
4. **Kein Team, keine Zertifikate, kein Impressum** im Dossier. Es wird keine Team-Sektion und
   kein Impressums-Inhalt erfunden; der Footer führt einen Impressums-Link auf eine noch zu
   befüllende Seite.
5. **Nur fünf Positionen im `angebot`**, die Ansage lautet aber «neun Gerichte». Die Bahn ist auf
   exakt neun Zeilen gebaut; die fehlenden vier Positionen sind vom Kunden zu liefern. Bis dahin
   zeigt die Bahn die fünf gelieferten Zeilen und **keine Platzhalter-Gerichte** — lieber eine
   kürzere Liste als erfundene Karte.
6. **Mobbin-Referenzen ohne `mobbin_url`** (Connector nicht autorisiert, siehe
   `design-decisions.md`) — die Quellenangaben werden nachgetragen.
7. **Nicht spezifiziert:** Scroll-Animationen, Seitenübergänge, Dark/Light-Umschalter (die Seite
   hat genau einen Modus), Icon-Animationen. Nichts davon erfinden.