# Brand-DNA — weinor Partnershop v2

**Single Source of Truth** für Content-Forge, Visual-Studio, Frontend-Builder, Hyperlanding, Kimi-Frontend.
Stand: 2026-08-19 · Autor: Brand-Keeper · Slug `weinor-partnershop-v2`

## 0 Herkunft & Beweislage

Alles hier ist **gemessen**, nicht geschätzt. Quellen:

| Was | Woher | Nachweis |
|---|---|---|
| Farb-Tokens, Hover, Overlays, Typo-Skala | `src/index.css` des Prototyps, live aus dem Vite-Dev-Server gezogen und aus dem JS-Modul dekodiert (202.619 Byte CSS) | `:root` ab CSS-Zeile 4096 |
| Copy / O-Ton | `src/pages/Home.tsx` (364 KB), String-Extraktion | 241 deutsche Textstrings |
| Logo-Rot | `refs/logo-weinor.svg` `<rect fill="#e30613">` + Pixel-Zählung `logo-weinor.png` (768.512 px `#e30613`) | beide identisch |
| Produkt-/Foto-Töne | Quantisierung der `refs/`-Dateien (12 Farben, 160×160) | Werte in §5 |
| Kontrastwerte | WCAG-2.1-Formel über die Token-Paare | Tabelle §3 |

Prototyp-URL: `https://3000-iqy4ens1hzd0zze3qbzya-c2e27cdd.us2.manus.computer/` (HTTP 200 am 19.08.2026, Preview kann ablaufen — die Extrakte oben sind der haltbare Stand).

---

## 1 Farben

### Kern-Tokens (1:1 aus dem Prototyp)

| Token | Hex | Rolle |
|---|---|---|
| `--ink` | `#06233c` | Navy. Hero-Grund, dunkle Sektionen, Fließtext auf Hell |
| `--ink-2` | `#0d3656` | Navy-Stufe 2, Karten/Panels **auf** `--ink` |
| `--paper` | `#fbfaf7` | Standard-Hintergrund, warmes Off-White |
| `--sand` | `#eee9df` | Zweitfläche: Kacheln, Abschluss-CTA |
| `--red` | `#d71920` | **UI-Signalrot** — Buttons, Akzentwort, Unterstriche, Fokus |
| `--line` | `#d9ddd7` | Trennlinien auf Hell |
| `--sage` | `#d8e1d7` | Ruhige Grünfläche, sparsam |
| `--muted` | `#5d6a73` | Sekundärtext auf `--paper` |

### Ergänzungen (im Prototyp als feste Werte verbaut, hier benannt)

| Token | Hex | Woher / Rolle |
|---|---|---|
| `--red-hover` | `#bd1218` | `.button-red:hover` |
| `--navy-hover` | `#143e60` | `.button-navy:hover` |
| `--light-hover` | `#e8edf0` | `.button-light:hover` |
| `--logo-red` | `#e30613` | **Corporate-Rot der Wortmarke** — siehe §4, nicht mit `--red` verwechseln |
| `--stage` | `#0e3350` | Produktbühne auf Navy |
| `--panel-navy` | `#0d3552` | Template-Library-Panel |
| `--tile-blue` | `#dce7e8` | Kachel-Variante „blue" |
| `--tile-cream` | `#f5f0e8` | Kachel-Variante „cream" |
| `--footer-bg` | `#f7f5f0` | Footer |
| `--field-border` | `#c9d1d0` | Formularfeld-Rahmen (→ §3, zu schwach) |

### Overlays & Alphas (exakt aus dem Prototyp)

```css
/* Hero-Scrim — links dicht, rechts offen: Text steht immer links */
background: linear-gradient(90deg,
  rgba(4,27,47,.92) 0%, rgba(4,27,47,.78) 31%,
  rgba(4,27,47,.21) 64%, rgba(4,27,47,.08) 100%);

/* Foto-Kachel mit Text unten */
background: linear-gradient(180deg, rgba(1,21,39,0) 32%, rgba(1,21,39,.72) 100%);

/* Kachel OHNE Foto (Farbfläche) */
background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,0));

topbar:        rgba(251,250,247,.94) + backdrop-filter: blur(16px)
topbar-border: 1px solid rgba(6,35,60,.08)
Fokus-Ring:    0 0 0 2px rgba(215,25,32,.08)   /* = --red @ 8 % */
Bild-Schatten: 0 25px 52px rgba(5,30,46,.22)
```

---

## 2 Typografie

```css
--serif: "DM Serif Display", Georgia, serif;   /* Roman + Italic */
--sans:  "Manrope", Arial, sans-serif;         /* 400 500 600 700 800 */
```

Body: `15px / 1.55`, Farbe `--ink`, auf `--paper`.
Headlines: `letter-spacing: -.05em`, `line-height: .98`.

| Rolle | Font | Größe | Weight | Tracking |
|---|---|---|---|---|
| Hero H1 | serif | `clamp(50px, 6vw, 88px)` | 400 | −.05em |
| Sektions-H2 (erzählend) | serif | `clamp(42px, 5.1vw, 72px)` | 400 | −.05em |
| Sektions-H2 (funktional)¹ | **sans** | dito | **800** | −.07em |
| Kachel-H3 | serif | 36px | 400 | −.05em |
| Bühnen-H3 | serif | 58px | 400 | −.05em |
| Panel-H3 | sans | 31px | — | −.07em |
| Prozess-H3 | sans | 18px | 800 | −.05em |
| Eyebrow / Kicker | sans | 9–10px | 800 | +.12…+.15em, UPPERCASE |
| Button | sans | 12px | 800 | +.01em |
| Body sekundär | sans | 16px | 400 | — |
| Kachel-Copy | sans | 12px / 1.5 | 400 | — |

¹ Bewusster Bruch im Prototyp: `.fashion-copy h2`, `.social-heading h2`, `.registration-intro h2` sind Manrope-800. Faustregel: **Serif erzählt (Marke, Emotion), Sans erklärt (Prozess, Shop, Formular).** In Sans-Headlines ist das `<em>` **nicht** rot, sondern `--ink` und aufrecht.

**Signatur-Element — kursives rotes Akzentwort:** In Serif-Headlines steht genau *ein* Wort als `<em>` in `--red` kursiv (auf Hell) bzw. `--red-on-dark` (auf Navy). Ein Wort, nicht zwei.

**Eyebrow-Konstruktion:** 31×3px rote Linie + 10px/800 Uppercase, Gap 10px.

**Produktion:** Der Prototyp lädt beide Fonts per `@import` von Google. Für ausgelieferte Deliverables **self-hosten** (woff2 lokal) — Ziel ist 0 externe Requests.

---

## 3 Kontrast-Guardrails (gemessen, WCAG 2.1)

**Was hält (≥4.5:1) — unverändert übernehmen:**
`--muted` auf `--paper` 5.33 · `--red` auf `--paper` 4.97 · Weiß auf `--red` 5.19 · Weiß auf `--red-hover` 6.43 · Weiß auf `--ink` 15.99 · Hero-Absatz `#e5ebed` auf `--ink` 13.28 · `#b9c9ce` 10px auf `--ink` 9.37 · `--ink` auf `--sand` 13.21.

**Was NICHT hält — im Prototyp so drin, in jedem Deliverable ersetzen:**

| Stelle | Ist | Kontrast | Ersatz | dann |
|---|---|---|---|---|
| Eyebrow 10px/800 auf Papier | `#687780` | **4.43** | `#4d5b64` | 6.72 |
| Rotes Akzentwort auf Navy | `--red` auf `--ink` | **3.08** | `#ff5a60` | 5.24 |
| Logo-Rot als Textfarbe auf Navy | `#e30613` auf `--ink` | **3.28** | nie als Text — nur als Fläche | — |
| Footer 10px | `#73808a` auf `#f7f5f0` | **3.72** | `#4d5b64` | 6.43 |
| Formular-Hinweis | `#7d8c92` auf Weiß | **3.48** | `#5d6a73` | 5.56 |
| Feld-Rahmen | `#c9d1d0` auf Weiß | **1.55** | `#7d8c92` | 3.33 (UI-Mindestwert) |

Zwei neue Tokens tragen das:
```css
--muted-strong: #4d5b64;  /* jeder Text ≤12px auf Hell */
--red-on-dark:  #ff5a60;  /* jedes rote Wort/Icon auf --ink / --ink-2 */
```

**Harte Regeln für alle Personas:**
1. `--red` auf getönten Kacheln (`--sand` 4.29, `--tile-blue` 4.11) nur ab 18px/bold oder als **Fläche** — nie als 10–12px-Label.
2. Text auf Foto braucht **immer** Scrim (§1) **und** volle Deckkraft. Kein `opacity`, kein `rgba(…,<1)` auf Text.
3. Nie stapeln: `font-weight ≤300` + `<1rem` + gedämpfte Farbe. Maximal eine dieser Schwächungen.
4. **E-Mail-Deliverables:** keine `var(--…)`. Gmail entfernt Custom Properties ersatzlos — alle Werte hart als Hex.

---

## 4 Logo & Header

**Zwei Rot-Töne, beide echt — nicht angleichen:**
- `#e30613` = Corporate-Rot **im Logo** (SVG-Rechteck + PNG). Nur dort.
- `#d71920` = UI-Signalrot der Oberfläche (Buttons, Linien, Akzentwort).

Der Prototyp setzt die Logo-Box im Header selbst auf `--red` (`#d71920`) und legt die Logo-Grafik hineingecroppt darüber — das ist die Referenz-Umsetzung, nicht ein Fehler. Für Print/Werbemittel gilt `#e30613`.

**Header-Konstruktion (`.topbar`, Höhe 82px, sticky, `padding: 0 4vw`):**
```
[ rote Box 94×33, weiße Wortmarke ]  │  PARTNERSHOP     Nav …     ( ○ )
   .brand-original                  divider  .brand-sub
```
- `.brand-original`: 94×33px, `background: var(--red)`, `overflow:hidden`, Logo-Bild 106×106 bei `left:-6px / top:-37px` → randlos gefüllte Box.
- `.brand-divider`: 1px × 18px, `#c8d0d4`.
- `.brand-sub` „PARTNERSHOP": 9px, `letter-spacing:.14em`, Weight 800, `--ink`.
- Nav-Links: 12px/700, Hover = 2px roter Unterstrich, `width 0 → 100%` in `.2s`.
- Rechts: 38px-Kreisbutton, 1px `--ink`-Rand, Hover = `--ink`-Füllung + Weiß.
- Mobile <950px: Nav aus, `.mobile-menu` als Panel unter dem 81px-Header.

**Kontrastregeln fürs Logo:**
| Untergrund | Logo-Ausführung |
|---|---|
| `--paper` / `--sand` | rote Box + weiße Wortmarke, unverändert |
| `--ink` / `--ink-2` | rote Box bleibt — **nie** rote Wortmarke ohne Box (3.28:1) |
| Foto | rote Box **immer** vollflächig deckend; nie freigestellte Wortmarke direkt aufs Bild |
| MASCOT-Logo daneben | MASCOT ist `#ce003f` (Magenta-Rot). Kollidiert mit `#e30613`. Mindestens **1× Logobreite Weißraum** dazwischen, nie auf gemeinsamer roter Fläche |

**Architektur-Ecke (Signatur-Ornament):** 74×74px, nur `border-top` + `border-right` 2px `--red`, dazu innen 31×31px 1px `rgba(6,35,60,.35)`. Wiederverwendbares Marken-Device für Werbemittel und LP-Sektionen.

---

## 5 Bildsprache (aus `refs/` gemessen)

**Grundcharakter:** echte Reportage-Fotografie, kein Stock-Look, kein Studio-Glanz in den Szenen. Weiches, warmes Tageslicht, oft leicht bedeckt. Ruhige, waagerechte Kompositionen mit viel Umgebungsraum. Menschen arbeiten oder beraten — sie posieren nicht.

**Wiederkehrende Signatur: das rote Logo-Patch.** In jedem Personen-Motiv sitzt ein kleines rotes weinor-Rechteck auf dunkler Kleidung — links auf der Brust. Das ist der visuelle Anker der ganzen Marke: **ein** roter Punkt in einem sonst gedeckten Bild.

**Kleidungs-Palette (gemessen):**
- Jacke 22503: Anthrazit `#3b3a42`, Schatten `#2f2e35` — nie „schwarz" briefen.
- Beanie: Schwarz-Navy `#262a35`.
- Montage-Shirts: Kobaltblau, Arbeitshose Anthrazit.
- Tasse: **warmes Signalrot `#d7433a`** mit Orange-Stich (Kern `#c9382f`) — messbar **nicht** `#e30613`. Freisteller nie auf reines Markenrot legen, sonst schlägt der Ton um.

**Umgebungs-Palette:** Holz/Naturton `#a08d67`, Grün `#5c735b`, Beton/Grau `#7c7374`, Himmel- und Fassadengrau. Navy und Creme kommen aus dem Layout, nicht aus dem Foto.

**Verboten:** Endkunden-Werbebildsprache (glückliche Familie auf der Terrasse als Hauptmotiv), Lens-Flares, HDR, Neon, künstliche Sonnenuntergänge, gestellte Daumen-hoch-Posen.

---

## 6 Tone of Voice

**Drei Adjektive: sachlich · handwerklich-stolz · knapp.**

Bauweise im O-Ton: **kurzer Aussagesatz + kurzer Aussagesatz.** Zwei Punkte, kein Komma, kein Ausrufezeichen.

> „Starker Auftritt. Einfach bestellt."
> „Passt zum Team. Bleibt im Kopf."
> „Ein Team. Ein Auftritt."
> „Keine Lagerhaltung. Keine Excel-Listen. Keine unnötigen Fehleinkäufe."

Beispielsatz für neue Copy (im O-Ton, nicht aus dem Prototyp):
> **„Ein Auftritt aus einem Guss. Bestellbar ab einem Stück."**

**Sagen:** Fachbetrieb · Fachpartner · Auftritt · sichtbar · hochwertig · freigeschaltet · ab einem Stück · in der Regel innerhalb von 24 Stunden.
**Nicht sagen:** Kunde/Endkunde als Angesprochener · „jetzt zuschlagen" · „nur noch heute" · Rabatt-Sprache · Ausrufezeichen · Emojis · „Sie sparen".
**Anrede:** immer Sie. Zielgruppe ist **ausschließlich** der weinor Fachpartner.

---

## 7 Drei Stil-Anker für Werbemittel

Alle drei nutzen das **Dual-Referenz-System**: Referenz 1 = Motiv-/Figur-Anker, Referenz 2 = Stil-/Licht-Anker. Beide Bilder gehören in jeden Genspark-Lauf.

### Stil A — Lifestyle-Hero „Fachpartner im Einsatz"

**Refs:** ① `refs/hero-beratung.jpg` (Motiv) · ② `refs/hero-workfashion-kollegin.jpg` (Licht/Stil) · Alternativen: `hero-workfashion-monteur.webp`, `themenwelt-beratungsteam.jpg`

**Prompt-Skeleton:**
```
Setting: Zwei bis drei Fachbetriebs-Mitarbeitende in dunkelgrauer Softshell-/
  Strickfleece-Workwear mit kleinem roten Logo-Patch auf der linken Brust,
  vor einer modernen Terrassenüberdachung / Markise an einem Wohnhaus.
  Deutsche Vorstadt, gepflegter Garten, Holz und Sichtbeton.
Lighting: weiches warmes Tageslicht, leicht bedeckt, keine harten Schatten,
  keine Lens-Flares. Farbtemperatur neutral bis leicht warm.
Composition: waagerechte Reportage-Perspektive auf Augenhöhe, Personen im
  linken Bilddrittel, rechts offene Fläche für Headline. Mittlere Brennweite,
  ruhiger Hintergrund-Bokeh. Format 16:9.
Mood: konzentriert, kollegial, im Arbeitsmoment — nicht in die Kamera posiert.
```
**Konsistenz-Anker (wörtlich anhängen):**
> „Reportage-Fotografie, warmes bedecktes Tageslicht, Personen in anthrazitfarbener Workwear (#3b3a42) mit genau einem kleinen roten Rechteck-Patch auf der linken Brust, gedeckte Umgebungstöne aus Holz, Grün und Betongrau, exakt ein roter Akzent im Bild, keine weiteren Signalfarben."

### Stil B — Studio-Produkt „Freisteller mit Haltung"

**Refs:** ① `refs/produkt-workfashion-jacke-22503.jpg` (Motiv) · ② `refs/produkt-werbemittel-tasse.jpg` (Licht/Freisteller-Stil) · weiter: `produkt-werbemittel-beanie.jpg`

**Prompt-Skeleton:**
```
Setting: Einzelnes Produkt freigestellt auf reinweißem, nahtlosem Grund
  (#ffffff), leichter weicher Bodenschatten, kein Requisit, kein Prop.
Lighting: großes weiches Softbox-Hauptlicht von schräg oben links,
  Aufheller rechts, Materialstruktur bleibt lesbar (Strickfleece-Rippung,
  Keramikglanz, Strickbund). Keine Spitzlichter-Cluster.
Composition: Produkt mittig, Freistellung mit gleichmäßigem Rand, gleiche
  Perspektive und gleiche Lichtsetzung für JEDEN Kernartikel — Serie muss
  nebeneinander stehen können. Format 1:1.
Mood: nüchtern, hochwertig, katalogtauglich.
```
**Konsistenz-Anker:**
> „Produkt-Freisteller auf reinweißem Grund, identische Kamerahöhe und identische Softbox-Position wie im Referenzbild, weicher Bodenschatten, Materialstruktur sichtbar, rotes weinor-Patch als einziger Farbakzent, quadratisch, keine Props, keine Farbfläche im Hintergrund."

⚠️ **Fallstrick:** Die Tasse ist `#d7433a`, nicht `#e30613`. Freisteller nie vor eine Fläche in Markenrot setzen.

### Stil C — Emotions-Szene „Auftritt und Übergabe"

**Refs:** ① `refs/themenwelt-montageteam.jpg` (Motiv/Energie) · ② `refs/themenwelt-event.jpg` (Licht/Auftritt) · weiter: `themenwelt-showroom.jpg`, `themenwelt-aussenauftritt.jpg`, `film-szene-01…09.jpg`

**Prompt-Skeleton:**
```
Setting: Der sichtbare Auftritt des Fachbetriebs — Team beim Aufbau eines
  Terrassendachs von unten gegen den Himmel, ODER Übergabemoment vor der
  fertigen Markise, ODER Messestand/Showroom mit rot gefassten Markenflächen
  und Terrassendach-Exponat.
Lighting: natürliches Tageslicht bei Außenszenen; bei Showroom/Messe warmes
  Kunstlicht mit sichtbaren roten Lichtlinien an der Deckenkante.
Composition: dynamischere Perspektive als Stil A — Untersicht, Diagonale oder
  Über-die-Schulter. Menschen klein im Raum, Architektur trägt das Bild.
  Formate 16:9 und 4:5.
Mood: Stolz auf gemachte Arbeit, ruhige Kompetenz. Kein Jubel, kein High-Five.
```
**Konsistenz-Anker:**
> „Dokumentarische Szene aus einem deutschen Sonnenschutz-Fachbetrieb, Team in anthrazitfarbener Workwear mit rotem Logo-Patch, Architektur und Tageslicht tragen die Komposition, rote Markenflächen ausschließlich als bauliches Element (Stele, Kante, Beschilderung), kein Endkunden-Werbelook, keine gestellten Posen."

**Genspark-Einstellungen:** Kreativ-Modus · Nano Banana Pro · Format je Stil (A 16:9, B 1:1, C 16:9 + 4:5) · deutscher Prompt nur dann, wenn deutscher Text im Bild stehen soll — sonst englischer Prompt, weil sonst Fantasie-Beschriftungen auftauchen.

---

## 8 Cross-Persona-Hinweise

### Content-Forge — Pain-Points, an denen die Copy andockt

Alle vier stehen so oder sinngemäß im Prototyp:
1. **Lager & Fehleinkauf** — „Keine Lagerhaltung. Keine Excel-Listen. Keine unnötigen Fehleinkäufe." Der Betrieb kauft heute auf Verdacht eine Palette Werbemittel und sitzt darauf.
2. **Uneinheitliches Team** — jeder Monteur in einer anderen Jacke; der Auftritt beim Endkunden zerfällt zwischen Aufmaß und Übergabe.
3. **Größen-/Nachbestell-Reibung** — bisher sammelt das Büro Größen ein. Neu: **ab 1 Stück, jeder bestellt selbst.**
4. **Neueinstellung & Saison** — neuer Mitarbeiter im März, Hausmesse im April; es fehlt der schnelle Weg zu einem einheitlichen Auftritt.

Saison-Hooks: Frühjahr = Markisensaison, Showroom-Aktionen, Hausmessen · Herbst/Winter = Team-Einkleidung · dazu Messetermine.
Satzbau: zwei kurze Aussagesätze. Kein Ausrufezeichen. Nie Endkunden ansprechen.
CTA-Wording **immer**: „Zugang anfordern" bzw. „Partnershop-Zugang anfordern". Nicht „Jetzt kaufen", nicht „Angebot sichern".

### Visual-Studio — welche `refs/` wofür

| Zweck | Datei(en) |
|---|---|
| Lifestyle-Hero, Dual-Ref | `hero-beratung.jpg` + `hero-workfashion-kollegin.jpg` |
| Monteur solo / Fahrzeug | `hero-workfashion-monteur.webp` |
| Studio-Produkt, Dual-Ref | `produkt-workfashion-jacke-22503.jpg` + `produkt-werbemittel-tasse.jpg` |
| Werbemittel-Serie | `produkt-werbemittel-beanie.jpg` |
| Emotions-/Auftritts-Szene | `themenwelt-montageteam.jpg` + `themenwelt-event.jpg` |
| Showroom / Ausstellung | `themenwelt-showroom.jpg` (roter Stoffmuster-Ständer), `themenwelt-beratungsteam.jpg` (Terrassendach-Exponat) |
| Gebäude / Außenauftritt | `themenwelt-aussenauftritt.jpg` |
| Film-Stills, Storyboard | `film-szene-01…09.jpg` (je 640×360 — nur als Motiv-Referenz, zu klein zum Ausspielen) |
| Marken-Logos | `logo-weinor.svg` (Vektor, bevorzugt), `logo-weinor.png` 1200×1200, `logo-partner-mascot.webp` |

Auflösungen: `hero-workfashion-kollegin` 2752×1536, `hero-beratung` 2880×1620, `themenwelt-montageteam` 1600×1067 — alle heldentauglich. `themenwelt-aussenauftritt` ist nur 425×305 → **nicht** als Hero verwenden.
**Dateinamen:** nie `ad-*`, `ads/`, `banner-*`, `sponsor-*` — Ad-Blocker löschen die Bilder im Browser des Empfängers. Erlaubt: `oneshot-*`, `creative-*`, `spot-*`, `visual-*`, `hero-*`.
Kein neues Video — die Imagefilm-Schnitte liegen in `output/video/`.

### Frontend-Builder — was 1:1 übernommen wird

- **Header** exakt wie §4: rote 94×33-Box mit weißer Wortmarke links, 1px-Divider, „PARTNERSHOP" als 9px/800/+.14em-Kicker. Sticky, 82px, `rgba(251,250,247,.94)` + `blur(16px)`.
- **Headline-Formel:** Serif, Weight 400, `line-height:.98`, `letter-spacing:-.05em`, genau **ein** kursives Akzentwort in Rot (`--red` auf Hell, `--red-on-dark` auf Navy).
- **CTA:** `.button-red` — `min-height:47px`, `padding: 0 20px`, 12px/800, **kein** `border-radius` (eckig ist Absicht), Hover `#bd1218`, Active `scale(.97)`. Label „Zugang anfordern".
- **Eyebrow:** 31×3px rote Linie + 10px/800 Uppercase, Gap 10px.
- **Hero:** `min-height: calc(100svh - 82px)`, `max-height: 830px`, Bild `background-size:cover` mit langsamem `scale(1.04) → scale(1)` über 4.8s, Scrim aus §1, Content max 760px im linken Drittel.
  ⚠️ Der Prototyp startet Hero-Bilder mit `opacity:0` und schaltet per JS-Klasse `.active`. Für ausgelieferte LPs als selbstlaufende CSS-Animation mit `both` bauen — sonst friert der Hero in Renderern und bei Googlebot ein.
- **Formular (Conversion-Ziel):** 2-spaltiges Grid, Gap 15px; Label 10px/800 über dem Feld; Input `padding:11px`, 1px Rahmen, **eckig**; Fokus = roter Rahmen + `0 0 0 2px rgba(215,25,32,.08)`. Feld-Rahmen auf `#7d8c92` anheben (§3). Felder: Firma · Name · E-Mail (Telefon/Hinweis optional). Fußzeile: „Wir prüfen Ihre Angaben und schalten Preise, Bestellfunktion sowie Originalassets in der Regel innerhalb von 24 Stunden frei."
- **Radien:** durchgehend 0 — außer Kreis-Elementen (`999px`: Kreisbutton, Kachel-Pfeil, Pill-Filter).
- **Motion:** `cubic-bezier(.23,1,.32,1)`, Buttons `.16s`, Farbwechsel `.18–.2s`, Kachel-Bild-Zoom `scale(1.035)` in `.5s`.
- Fonts self-hosten (§2). E-Mail-Vorlagen ohne `var(--…)` (§3.4).

---

## 9 Do / Don't (Kurzfassung)

| Do | Don't |
|---|---|
| Ein roter Akzent pro Fläche | Rot als Flächenfarbe über halbe Seiten |
| Serif erzählt, Sans erklärt | Serif für Prozess-/Formular-Überschriften |
| Genau ein kursives Akzentwort | Zwei oder drei rote Wörter in einer Zeile |
| Eckige Buttons und Felder | Abgerundete Buttons, Schlagschatten an Buttons |
| Reportage-Fotos aus `refs/` | Stock-Familie auf der Terrasse, HDR, Flares |
| „Zugang anfordern" | „Jetzt kaufen", „nur heute", Rabatt-Sprache |
| Sie-Anrede an Fachpartner | Endkunden-Ansprache |
| `#e30613` im Logo, `#d71920` in der UI | die beiden Rot-Töne angleichen |
| MASCOT-Logo mit Weißraum | MASCOT-Magenta neben weinor-Rot ohne Abstand |

---

## 10 Annahmen (offen gelegt)

1. **Zwei Rot-Töne sind Absicht, nicht Schlamperei** — belegt ist nur, dass beide existieren (`#e30613` in Logo-SVG und -PNG, `#d71920` als `--red` in der UI). Dass die Trennung Logo/UI gewollt ist, ist meine Lesart. Wenn weinors offizielles CD nur `#e30613` kennt, ist `--red` global auf `#e30613` zu ziehen — dann sinkt „Weiß auf Rot" von 5.19 auf 4.80, hält also weiterhin.
2. **`--muted-strong` und `--red-on-dark` sind neu von mir**, nicht aus dem Prototyp. Sie beheben gemessene Kontrast-Unterschreitungen und sind der einzige Punkt, an dem dieses Dokument vom Prototyp abweicht.
3. **Tone-of-Voice-Adjektive** sind aus 241 extrahierten Copy-Strings abgeleitet, nicht aus einem weinor-Sprachleitfaden — ein solcher lag nicht vor.
4. **Motiv-Zuordnung der Themenwelt-Dateien** folgt dem Bildinhalt, nicht dem Dateinamen: `themenwelt-beratungsteam.jpg` zeigt ein Terrassendach-Exponat im Ausstellungsraum, `themenwelt-showroom.jpg` einen roten Stoffmuster-Ständer. Wer nach Namen greift, bekommt etwas anderes als erwartet.
5. Die Preview-URL des Prototyps kann ablaufen. Alle Werte hier sind aus dem Lauf vom 19.08.2026 und stehen unabhängig davon.