# DESIGN.md — markemacht.de

**Status:** Lebendes Dokument · bildet den **tatsächlichen Implementierungsstand** der Live-Seiten in `_markemacht.de/` ab (`index.html`, `manifest.html`, `methode.html`, `denken.html`, `denken-*.html`) sowie `assets/css/app.css`, `assets/js/app.js` und den Komponenten unter `assets/components/`.
**Zweck:** Aktuelle, code-treue Design-Referenz. Ersetzt das veraltete Entwurfs-Briefing unter `dev/based_web_design/markemacht.de_design_system/DESIGN.md` (Entwicklungsstand, nicht final).
**Naming-Hygiene (Dok. 000 §7):** `Marke macht.` · `Brand Rules` (Tool) · `brand-rules.com` (Domain) · `markemacht.de` · `adametz.media`. Die Altschreibweise `brandwork.io` ist **unzulässig**.

> Hinweis: Das Design ist **noch nicht final**. Dieses Dokument beschreibt den Ist-Zustand; einzelne Festlegungen werden mit den nachgereichten Design-Informationen finalisiert (siehe §12 Offene Punkte).

---

## 1. Haltung (führt jede Design-Entscheidung)

- Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären.
- Klarheit schlägt Kreativität. Struktur schlägt Maßnahmen.
- Die Seite **gefällt nicht — sie führt.** Ruhig, schwer, präzise.

Die Seite ist ein **Denkraum**, kein Leistungskatalog. Erfolg = Besucher stellen weniger, aber konkretere Fragen.

---

## 2. Dual-Mode-System: „Wirkung“

Die Seite besitzt zwei umschaltbare visuelle Modi (Attribut `data-theme` auf `<html>`):

| Modus | `data-theme` | Charakter |
|---|---|---|
| **Monolithisch** (Default, Referenz) | `monolith` | Dunkel, hart, eckig (Radius 0), versetzte/gestaffelte Anordnung, Industrie-Anmutung |
| **Editorial** | `editorial` | Warm, hell, leicht gerundet (Radius 4px), geordnete Anordnung, redaktionelle Wärme |

> **R6 — Invariant ist der Inhalt, nicht das Layout (Dok. 010: Kern fix, Form beweglich):** Über beide Wirkungen bleiben **Inhalt, Reihenfolge und Hierarchie** identisch. **Anordnung, Radius und Raum** sind Ausdruck und dürfen je Wirkung abweichen. Bedingung: variierende Anordnung muss **rasterbasiert/regelhaft** sein (fester Raster-Schritt), nicht freihändig.

- Umschaltung über den `.wirkung-switch` (Desktop ≥ 760 px) bzw. im Mobile-Drawer.
- Persistenz in `localStorage` unter Schlüssel `mm-wirkung` (`app.js`), mit Cookie-Fallback für robustere seitenübergreifende Zustandsübernahme.
- Inline-Script im `<head>` jeder Seite setzt das Theme **vor dem ersten Paint** (kein Flash). Fallback/Default: `monolith`.
- Alle Tokens sind pro Modus als CSS-Custom-Properties definiert; Komponenten lesen nur Tokens, nie Hex direkt.

---

## 3. Farbsystem (CSS-Tokens, RGB-Triplets)

Farben liegen als RGB-Triplets vor, damit `rgb(var(--token) / <alpha>)` möglich ist.

### 3.1 Monolithisch (`:root`, `[data-theme="monolith"]`)

| Token | Hex | Einsatz |
|---|---|---|
| `--color-bg-base` | `#0B0B0C` | Grundfläche (`--bg`) |
| `--color-bg-surface` | `#121214` | Karten/Container + Platzhalter-Slots (`--surface`) |
| `--color-bg-elevated` | `#121214` | Karten (= surface) |
| `--color-bg-accent-soft` | `#26262B` | Hover-Ton (= `--line`) |
| `--color-border` | `#26262B` | Trennlinien, Rahmen (`--line`) |
| `--color-text-primary` | `#F4F2EE` | Headlines, Primärtext (`--ink`) |
| `--color-text-body` | `#E6E4E0` | Fließtext |
| `--color-text-dim` | `#8C8C92` | Sekundärtext, Meta (`--muted`) |
| `--color-text-mute` | `#6C6C72` | Nav-Links inaktiv, Footer |
| `--color-accent` | `#E8175D` | Signal-Magenta (`--signal`, **Wert fix**) |
| `--color-accent-soft` | `#CC527A` | Abgestufter Akzent |

### 3.2 Editorial (`[data-theme="editorial"]`)

| Token | Hex | Einsatz |
|---|---|---|
| `--color-bg-base` | `#FBFAF2` | Haupt-Hintergrund (warmweiß) |
| `--color-bg-surface` | `#F5F4EC` | Sektionsflächen |
| `--color-bg-elevated` | `#FFFFFF` | Karten |
| `--color-bg-accent-soft` | `#E9E8E1` | abgesetzte Flächen |
| `--color-border` | `#E7E4DD` | Trennlinien (`--line`) |
| `--color-text-primary` | `#191919` | Headlines |
| `--color-text-body` | `#1B1C17` | Fließtext |
| `--color-text-dim` | `#444748` | Sekundärtext |
| `--color-text-mute` | `#747878` | Meta, Footer |
| `--color-accent` | `#E8175D` | Signal-Magenta |
| `--color-accent-soft` | `#B80046` | dunklerer Akzent (Hover) |

### 3.3 Regeln (Magenta-Budget, verbindlich)

- **Magenta = Signal, nicht Fläche.** Der Wert (`#E8175D`) wird nicht geändert — nur **wo und wie viel** Magenta erscheint.
- **R1 — Budget (Startseite):** Magenta ausschließlich an: aktiver Nav-Zustand · das eine Hero-Wort „Marketingproblem“ · Mono-Signal-Labels (`SYMPTOM 0X`) · 2px-Oberkante an genau **einer** Diagnose-Karte (03) · primärer Action-Link („Audit anfragen“ = `.nav-cta`). Sonst nirgends.
- **R2 — nie als Fläche:** keine gefüllten Magenta-Pills/-Badges, keine Magenta-Hintergründe, keine Glows. Max. Magenta-Fläche = Linie/Kante ≤ 2px oder reiner Text. Hover erzeugt **kein** Magenta-Fill mehr.
- **R3 — keine Farbverläufe:** alle Gradienten entfernt. Bild-/Keyvisual-Platzhalter sind flache `--surface`-Töne mit 1px-Rahmen.
- **R5 — Trennung über Linien, nicht Schatten:** Sektionen und Karten via 1px `--line`; keine `box-shadow`-Tiefen.
- `::selection` und `:focus-visible` nutzen Akzent (UA-/A11y-Funktion, nicht Dekoration).

---

## 4. Typografie

### 4.1 Schriftfamilien (aktuell geladen via Google Fonts)

| Rolle | Monolith | Editorial |
|---|---|---|
| Display / Headlines (`--ff-display`) | **Outfit** | **Plus Jakarta Sans** |
| Editorial / Zitate (`--ff-editorial`) | **Newsreader** | **Noto Serif** |
| Fließtext (`--ff-body`) | **Work Sans** | **Plus Jakarta Sans** |
| Meta / Mono (`--ff-mono`) | **Space Grotesk** | **Space Grotesk** |

**Schrift-Regel (verbindlich, CHG-05):** Jede Familie hat genau einen Job. Wenn eine Stelle keinen Job erfüllt → falsche Familie.

- **Serife (`--ff-editorial`) = die denkende Stimme.** Nur für **erhobene Aussagen** (Thesen/zugespitzte Statements) **+ Zitate** — auf **Start** und **Manifest**. Auf **Denken** zusätzlich der **Essay-Body** selbst. Sonst nirgends.
- **Grotesk (`--ff-display` / `--ff-body`) = das Gebaute / die Struktur.** Headlines, Karten-/Struktur-Titel, kurze Erklär-/Lead-Texte (`.lead`), Fließtext (`.body-text`), UI.
- **Mono (`--ff-mono`) = System/Meta.** Meta-Labels (`[0X]`, `SYMPTOM 0X`), System-Marker, **Button-Text** (beide Wirkungen), Datum.

> **Methode** ist eine Struktur-Seite → **grotesk-dominant**. Erklär-/Lead-Absätze nutzen `.lead` (Grotesk), **nicht** Serife. Serife nur, wenn eine echte These oder ein Zitat auftritt.

> Divergenz zum alten Entwurfs-Briefing (dort: Source Serif 4 / Source Sans 3 / JetBrains Mono). Aktuell implementiert sind die obigen Familien. Endgültige Schriftwahl + Self-Hosting offen (§12).

### 4.2 Typo-Skala (Tokens, `clamp()` = responsiv)

| Klasse | Token | Monolith | Editorial |
|---|---|---|---|
| `.hero-headline` | `--fs-hero` | `clamp(52px, 8vw, 96px)` | `clamp(40px, 5.6vw, 72px)` |
| `.section-headline` | `--fs-section` | `clamp(36px, 5vw, 56px)` | `clamp(28px, 3.6vw, 44px)` |
| `.sub-headline` | — | `clamp(22px, 2.4vw, 32px)` | (gleich) |
| `.editorial` | `--fs-editorial` | `clamp(22px, 2.6vw, 36px)` | `clamp(20px, 1.8vw, 24px)` |
| `.body-text` | `--fs-body` | `18px` | `16px` |
| `.meta` | `--fs-meta` | `13px` uppercase | `13px` |

- Display-Gewicht: Monolith 500, Editorial 600. Letter-Spacing Hero −0.02em.
- `.meta`: Monospace, Uppercase, Letterspacing 0.08em (Monolith) / 0.05em (Editorial) — die `[01]`-Sektionsnummern.
- Hervorhebung im Text nur über `.accent` (Magenta), nicht über Bold/Kursiv.
- Fließtext-Breite begrenzt über `.max-prose` (680px) / `.max-wide` (900px).

---

## 5. Layout & Raster

- Container: `--container-max` 1440px (Monolith) / 1280px (Editorial), zentriert via `.shell`.
- Seitenränder: `--px-horizontal` `clamp(24px, 8vw, 128px)` (Monolith) / `clamp(24px, 5vw, 64px)` (Editorial).
- Vertikale Abstände: `--section-gap` `clamp(64px, 8vw, 96px)` (beide Wirkungen); `--block-gap` für `.section-tight`. Sektionen werden zusätzlich durch eine volle 1px-`--line` (`.section`/`.quote-block` `border-top`) getrennt — keine Schatten als Trenner.
- Raster: `.grid-12` = 12 Spalten, Gap 24px. Utilities `.col-1…12`, `.md:col-1…12`, `.md:col-start-1…9`.
- **Breakpoint-Logik:** Spalten-Utilities greifen ab **900px** (`md:`). Weitere relevante Grenzen: 720/760 (Switch, Bento), 1080/1100 (Nav-Links/CTA).
- Negativraum ist Inhalt: Wirkt eine Sektion „voll“, ist sie falsch.

---

## 6. Komponenten (in `app.css`)

- **Header-Komponente** `assets/components/header.html`: `.nav` (sticky), Desktop-Links ab 1100px (`.nav-links`), darunter `.menu-btn` + `.mobile-drawer` (Fullscreen-Overlay, ESC schließt). `.nav-cta` ab 1100px. `.wirkung-switch` ab 760px. Active-State und Wirkung-State werden zentral durch `app.js` synchronisiert.
- **Buttons:** `.btn` (gefüllt, **Mono-Label in beiden Wirkungen**, Hover → neutraler Ton, **kein** Magenta), `.btn-ghost` (Outline, Hover neutral), `.btn-row`. Der gefüllte Button ist **invertiert zur Grundfläche** und kippt über Tokens je Wirkung (`bg = --ink`, `text = --bg`): monolithisch = heller Button auf Dunkel, editorial = dunkler Button auf Hell. Solid + Ghost tragen denselben 1px-Rahmen → identische Box-Höhe in einer `.btn-row`. **Icon-Glyphen** einheitlich `arrow_forward` / `arrow_downward` (nicht `east`/`south`), sonst entsteht ein Pfeil-Versatz durch abweichende Glyph-Metriken.
- **Textlink:** `.link-arrow` (Unterstrich + Pfeil-Icon, Mono, Hover → `--ink`, **kein** Magenta).
- **CTA-Parität (verbindlich):** Der **Haupt-CTA einer Conversion-Sektion** ist immer ein gefüllter `.btn` — nie ein stiller `.link-arrow`. Derselbe Conversion-Schritt trägt seitenübergreifend dasselbe Gewicht (Start „Bereit für Klarheit?" = Methode `[06]` Audit). `.link-arrow` bleibt sekundären Verweisen/Überleitungen vorbehalten.
- **Karten:** `.card` (1px-Rahmen, Radius 0, **keine Schatten/Lift**), `.card-accent-border` (2px-Magenta-**Oberkante**, nur Karte 03), `.dna-item` (Methode), `.post-row` (Denken monolith) / `.post-card` + `.post-card--row` (Denken editorial).
- **Zitat:** `.quote-block` + `.quote` / `.quote-dim` (großes editoriales Statement).
- **Sektionsnummer:** `.meta` / `.section-num` im Stil `[01]`, `[02]` …
- **Denken-Beiträge:** `.blog-list-mono` (monolith = Langform-Zeilen `.post-row`) vs. `.blog-list-editorial` (editorial = volle-Breite-Karten `.post-card--row`). **Kein Bildmaterial** → keine Featured-/Raster-/Filter-Logik, kein „Mehr laden". Beide Wirkungen zeigen denselben Zeilen-Aufbau (Meta links, Titel + Text rechts); editorial bleibt in Karten. Ganze Zeile/Karte klickbar via **Stretched-Link** (`.post-title-link::after`), Linktext = Titel (barrierearm).
- **Essay-Detail (`denken-*.html`):** `.article-head` (Artikelkopf) + `.prose` (Lesefluss-Container, max. 680px). Im `.prose`: Absätze = **Serife** (`--ff-editorial`, Essay-Body = denkende Stimme), `.prose-lead` (größerer Einstieg), `h2` = Grotesk, `blockquote` = erhobene Aussage mit 2px-Magenta-Signal-Linie. Haupt-CTA als gefüllter `.btn` (CTA-Parität).
- **Footer-Komponente** `assets/components/footer.html`: Copyright, Tracking-Hinweis und die Platzhalter-Links Impressum/Datenschutz/Kontakt.
- **Tag/Label:** `.tag` — reiner Mono-Signal-Text (Versalien, Letter-Spacing ≈2px, `--signal`), **keine** gefüllte Pille.
- **Symptome:** `.symptoms` — **gleiches DOM, wirkungsabhängige Anordnung** (CHG-03). Invariant: Reihenfolge 01 → 02 → 03, gleiche Kartenbreite/Gewichtung, 2px-Magenta-Oberkante auf Karte 03. Editorial = geordnete 3er-Reihe (je 4 Spalten). Monolithisch = rasterbasierter Versatz (je 8 Spalten, fester Schritt +2 Spalten, links verankert → konstruiert, nicht zufällig). Ab < 720px gestapelt.
- **Manifest-Konsequenzen:** `.manifest-cards` — dieselbe Logik wie `.symptoms`, auf 4 Karten übertragen. Invariant: Reihenfolge 01 → 04, gleiche Gewichtung, 2px-Magenta-Oberkante (`.card-accent-border`) auf der **letzten** Karte. Editorial = geordnetes 2×2-Raster (je 6 Spalten). Monolithisch = Treppe mit gleichem Schritt +2 Spalten (je 6 Spalten, letzte Karte an der rechten Kante). Ab < 720px gestapelt.
- **Serif-Kommentar:** `.comment` — markiert einen Serif-Absatz (Denk-Stimme) als Annotation: eingerückt mit 2px-Magenta-Strich links (`border-left`, Magenta = Linie ≤2px, kein Fläche).
- **Editorial-Split:** `.split` + `.split-visual` (Methode: Theorie → Praxis), flacher Slot.
- **Icons:** Material Symbols Outlined (nur funktional: Pfeile, Menü, Schließen).

Theme-spezifische Sichtbarkeit: `.only-mono` / `.only-editorial`, `.blog-list-mono` / `.blog-list-editorial` schalten einzelne Layout-Varianten pro Wirkung. Das Symptom-Layout ist **vereinheitlicht** (kein `.symptoms-mono` / `.symptoms-editorial` mehr).

---

## 7. Radius & Form

**Radius ist ein Wirkungs-Token (R4/CHG-06), nicht global.** Ein einziger Wert `--radius` pro Wirkung, der auf **alle** Elemente angewandt wird (Karten, Buttons, Bild-Slots, Wirkung-Toggle). Die Legacy-Tokens zeigen auf `--radius`.

| Token | Monolith | Editorial |
|---|---|---|
| `--radius` (Quelle) | `0px` | `4px` (Startwert) |
| `--radius-card` | `var(--radius)` | `var(--radius)` |
| `--radius-btn` | `var(--radius)` | `var(--radius)` |
| `--radius-pill` | `var(--radius)` | `var(--radius)` |

Der Unterschied ist **gewollt** und trägt die Wirkung: monolithisch durchgehend eckig, editorial durchgehend gleich leicht gerundet — **kein gemischter Radius** innerhalb einer Wirkung. (`:focus-visible` nutzt unabhängig davon einen 2px-Ring.)

---

## 8. Keyvisual — Der Monolith

- **Bedeutung:** Marken-DNA, Regelwerk, Unverrückbarkeit. **Nicht:** Macht, KI, Technologie, Erlösung.
- **Aktueller Stand:** **flacher** Platzhalter-Slot (`.monolith`, `.monolith--edge`, `.monolith--texture`) — `--surface`-Ton + 1px-`--line`, **keine Gradienten/Glows**, Radius 0. Positionierung rechts, angeschnitten/randständig, nie mittig, viel Negativraum (CHG-08). Slot-Format/Position bleiben reserviert bis zum echten Asset.
- **Zielbild (Dok. 19):** Beton / Basalt / mattes Metall, hartes gerichtetes Licht, frontal/Augenhöhe, fragmentiert. Umsetzung als 3D-Render, Foto realer Betonobjekte oder kuratierte KI-Generierung. **Realer Asset noch offen** (§12).
- Verboten: Menschen, Gesichter, Stockfotos, Symbolik, Nebel-Drama, Glow, Farbverläufe als Emotion.

---

## 9. Motion & Interaktion (`app.js`)

- **Scroll-Reveal:** `[data-reveal]` via IntersectionObserver, max **400 ms ease-out** (`--transition-reveal`), optional `data-reveal-delay`.
- **Transitions:** `--transition-fast` 150ms · `--transition-medium` 300ms (Theme-Wechsel) · Reveal 400ms.
- **`prefers-reduced-motion`** wird respektiert (Reveals sofort sichtbar, keine Transitions).
- Erlaubt: dezente Hover-States (Farbwechsel zu neutralem Ton/`--ink`, **nicht** zu Magenta), Theme-Crossfade. **Nicht erlaubt:** Scroll-Hijacking, Mouse-Trails, Auto-Play, animierte Gradients, Zahlen-Counter.

---

## 10. Accessibility

- `:focus-visible` mit Magenta-Outline + Offset; Skip-Link „Zum Inhalt springen“.
- Semantik: `<nav>`, `<header>`, `<main id="main">`, `<section>`, `<article>`, korrekte Heading-Hierarchie.
- ARIA: Drawer (`aria-hidden`, `aria-controls`, `aria-expanded`), Wirkung-Switch (`role="group"`, `aria-pressed`).
- Magenta nie als einziges Unterscheidungsmerkmal (zusätzlich Unterstrich/Kontext).
- Eigene `@media print`-Regeln (Serif, Schwarz/Weiß, Nav/Footer/Keyvisual ausgeblendet).
- Ziel: WCAG 2.1 AA.

---

## 11. Seitenstruktur (Ist-Stand)

| Seite | Datei | Inhalt (Kurz) |
|---|---|---|
| Start | `index.html` | Hero (Diagnose-These) · Symptome [01] · Zitat · Kernthese · Audit-CTA |
| Manifest | `manifest.html` | Hero · Einleitung · Zentralthese · Vier Konsequenzen · Überleitung |
| Methode | `methode.html` | Hero „Brand Engineering“ · Haltung · Theorie→Praxis · Fünf DNA-Bausteine · Der Architekt · Audit-Überleitung |
| Denken | `denken.html` | Blog-Übersicht (monolith Langform-Zeilen / editorial volle-Breite-Karten, ohne Bilder) — jeder Beitrag verlinkt auf seine Detailseite |
| Beitrag (Detail) | `denken-*.html` | Essay-Detailseite: Artikelkopf (Meta · Titel · Dek) · Essay-Body (Serife) · Weiterlesen · Audit-CTA. Vorlagen: `denken-agilitaet`, `denken-architektursanierung`, `denken-fuehrung-durch-reduktion` |
| Audit | `audit.html` | Eigene Anfrage-Seite: Diagnose-These · typische Auslöser · Ablauf · Mailto-Anfrage |

- **Navigation (kanonisch):** Start · Manifest · Methode · Denken · CTA „Audit anfragen“ (→ `audit.html`).
- **Marken-DNA** in `methode.html` = exakt die fünf Bausteine aus Wissensdokument 002 (Identitätskern, Positionierungslogik, Sprach-/Tonalitätsregeln, Themen-/Relevanzrahmen, Entscheidungs-/Grenzregeln).
- **Footer:** Copyright + „Keine Cookies, kein Tracking.“ + Links Impressum/Datenschutz/Kontakt (aktuell `#`-Platzhalter).

---

## 12. Offene Punkte (vor „Design final“ zu entscheiden)

1. **Dual-Mode behalten?** Bleiben beide Wirkungen (monolith + editorial) dauerhaft, oder wird auf eine finalisiert?
2. **Schriftwahl + Self-Hosting:** aktuelle Familien bestätigen oder auf Briefing-Familien angleichen; Google-Fonts → self-hosted (Performance/Privacy).
3. **Echter Monolith-Asset** statt CSS-Platzhalter (3D/Foto/KI gemäß Dok. 19).
4. **Footer-Links** mit echten Zielen belegen (Impressum, Datenschutz, Kontakt `info@markemacht.de`).
5. **Audit:** Anfrageprozess/Formular finalisieren; aktuell eigene Seite `audit.html` mit Mailto-Anfrage.
6. **Dok. 19 (Keyvisual-Briefing)** ist als veraltet markiert und sollte mit diesem Stand harmonisiert werden (u. a. Akzent = Magenta, nicht „Blau“).
7. **Doppelter Projektordner `Marke Macht 2/`** entfernen/ignorieren — kanonisch ist `_markemacht.de/`.

---

### Ende — DESIGN.md (Ist-Stand der Live-Implementierung; wird mit den nachgereichten Design-Informationen finalisiert)
