Markenwissen-Wissensbasis: Konsistenz-Korrekturen + Copyright-Hygiene

Konsolidierter, bereinigter Stand der Wissensbasis (docs/). Frischer
Wurzel-Commit, um urheberrechtlich problematische Volltexte aus der
Historie zu entfernen (die bisherige Historie bestand aus einem einzigen
Initial-Commit).

Enthaltene Änderungen (vgl. docs/_Steuerung/CHANGELOG.md, 2026-05-29):
- Copyright-Hygiene: 25 Volltext-/Übersetzungsdateien (Sharp 14 Kap.,
  Wala 11 Kap.) entfernt; je Quelle _Fundstellen-Index.md als
  Provenienzbeleg; Quellnachweise + Steuerungsdateien angepasst.
- Konsistenz-Korrekturen: Reichweite 000-013 (Scorecard-Regeln),
  Rule-ID MW-WK-DIFF-101, Quellnachweis-Dateiverweis, Dok.000 v2.0.2.
- Dateinamen-Normalisierung: Startdatei ohne Leerzeichen.

Originale (Wala/Sharp E-Books) privat außerhalb des Repos archiviert.

Co-authored-by: Cursor <cursoragent@cursor.com>

_markemacht.de/dev/first design/design.md

@@ -0,0 +1,406 @@
+# Design-Briefing markemacht.de
+
+### Übergabedokument für Entwickler & Designer
+
+**Projekt:** markemacht.de
+**Auftraggeber:** ADAMETZ.MEDIA / Kevin Adametz
+**Status:** Verbindlich
+**Version:** 1.0
+**Zweck:** Vollständige Arbeitsgrundlage für Konzept, Design und Implementierung
+
+---
+
+## 1. Projektrahmen
+
+markemacht.de ist keine Agentur-Website, kein SaaS-Auftritt, kein Leistungskatalog.
+
+Die Seite ist ein **Denkraum** für Unternehmer und Geschäftsführer im Mittelstand. Sie verkauft keine Services, sondern erzeugt **Einsicht**: Besucher sollen erkennen, dass ihr Kommunikationsproblem in Wahrheit ein Markenproblem ist — und dass Klarheit baubar ist.
+
+Die Seite ist Teil eines Drei-Säulen-Systems:
+
+- **markemacht.de** — Denkraum und Diagnose (dieses Projekt)
+- **brandwork.io** — Marken-Infrastruktur (eigenständige Anwendung)
+- **adametz.media** — persönliche Autorität (eigenständige Seite)
+
+Dieses Briefing betrifft ausschließlich **markemacht.de**.
+
+---
+
+## 2. Markenhaltung (kompakt)
+
+Drei Kernsätze, die jede Design- und Inhaltsentscheidung bestehen müssen:
+
+> Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären.
+
+> Klarheit schlägt Kreativität. Struktur schlägt Maßnahmen.
+
+> Wir erklären nicht, warum wir gut sind. Wir erklären, warum das Problem existiert.
+
+Die Seite wirkt **ruhig, schwer, präzise**. Sie gefällt nicht — sie führt.
+
+---
+
+## 3. Referenzkorridor
+
+Zwei bestätigte Referenzseiten definieren den Zielkorridor. Beide **zusammen** ergeben das Zielbild. Keine einzeln.
+
+### 3.1 pellonium.com — liefert Gewicht und Ruhe
+
+
+### 3.2 anthropic.com — liefert typografische Haltung und Wärme
+
+
+
+
+
+## 4. Farbsystem
+
+Verbindlich. Keine Abweichung ohne Rücksprache.
+
+| Rolle | Hex | Einsatz |
+|---|---|---|
+| Primär (Basis) | `#0A0A0A` | Haupt-Hintergrund, dominante Flächen |
+| Flächen 1 | `#363636` | Sektionsflächen, Karten-Hintergrund |
+| Flächen 2 | `#474747` | Abgesetzte Blöcke, Trennelemente |
+| Signal-Primär | `#E8175D` | Akzent, Hervorhebung, Interaktion |
+| Signal-Sekundär | `#CC527A` | Hover, abgestufte Hervorhebung |
+| Neutral-Grau | `#A8A7A7` | Fließtext-Sekundär, Meta-Informationen |
+| Reinweiß | `#FFFFFF` | Primäre Typografie auf dunklem Grund |
+
+### Regeln
+
+- Signal-Primär (`#E8175D`) — nur für: Akzentlinien, aktive Zustände, Marken-Signatur, singuläre Hervorhebungen in der Typografie
+- Das Magenta ist kein Schmuck. Es ist ein **Schnitt**. Es markiert, wo Klarheit entsteht.
+
+---
+
+## 5. Typografie-System
+
+Die Typografie ist das zentrale Führungselement der Seite. Nicht das Bild.
+
+### 5.1 Schriftfamilien
+
+| Funktion | Schrift | Fallback |
+|---|---|---|
+| Display / Headlines | **Outfit** (geometrische Grotesk) | system-ui, sans-serif |
+| Editorial / Zitate / Manifest | **Source Serif 4** oder **Instrument Serif** | Georgia, serif |
+| Fließtext | **Source Sans 3** | system-ui, sans-serif |
+| Meta / Code / Nummerierung | **JetBrains Mono** | ui-monospace, monospace |
+
+Die Serif ist **neu** im System und kommt aus der anthropic-Referenz. Sie wird sparsam eingesetzt: für Manifest-Passagen, Schlüsselzitate, Section-Intros. Sie trägt die Wärme ins System.
+
+### 5.2 Typografische Hierarchie (Empfehlung)
+
+- **Hero-Headline:** Outfit, 72–96 px, font-weight 500, line-height 1.05, letter-spacing -0.02em
+- **Section-Headline:** Outfit, 48–56 px, font-weight 500, line-height 1.1
+- **Sub-Headline:** Outfit, 24–28 px, font-weight 400
+- **Manifest / Zitat:** Source Serif, 32–40 px, font-weight 400, line-height 1.3, kursiv erlaubt
+- **Fließtext:** Source Sans, 18 px, line-height 1.6
+- **Meta / Section-Nummer:** JetBrains Mono, 13 px, uppercase, letter-spacing 0.08em
+
+### 5.3 Typografische Regeln
+
+- Keine Verspieltheit, keine dekorativen Schnitte, keine Ligaturen als Effekt
+- Kein Wechsel zwischen mehr als drei Schriftgrößen in einer Sektion
+- Maximale Textbreite im Fließtext: 65 Zeichen pro Zeile
+- Überschriften dürfen den Bildrand schneiden, aber nie mittig zentriert stehen
+- Hervorhebungen innerhalb von Text: ausschließlich durch Magenta-Signalfarbe auf einzelnen Worten oder kurzen Phrasen — niemals durch Bold oder Kursiv
+
+---
+
+## 6. Layout-Prinzipien
+
+### 6.1 Rasterlogik
+
+- 12-Spalten-Grid, aber **editorial interpretiert**: Inhalte dürfen 6–8 Spalten nutzen, niemals volle Breite bei Fließtext
+- Asymmetrische Anordnung bevorzugt: Überschriften links, Text rechts — oder umgekehrt
+- Großzügige vertikale Abstände zwischen Sektionen: mindestens 160 px Desktop, 96 px Mobile
+- Horizontale Seitenränder: 5–8 % der Viewport-Breite
+
+### 6.2 Nummerierung
+
+Jede Hauptsektion trägt eine Nummerierung im Stil von pellonium: `[01]`, `[02]`, `[03]`.
+
+- Platzierung: links oben in der Sektion, Monospace-Schrift
+- Farbe: Neutral-Grau `#A8A7A7`
+- Wirkung: Ordnung sichtbar machen, Lesefluss strukturieren
+
+### 6.3 Negativraum
+
+Negativraum ist Inhalt, nicht Leere. Mindestens 40 % jeder Sektion bleibt unbedruckt.
+
+Faustregel: Wenn eine Sektion „voll" wirkt, ist sie falsch.
+
+### 6.4 Responsive
+
+- Mobile-First-Denken, aber Desktop-First-Inszenierung
+- Breakpoints: 640 / 768 / 1024 / 1280 / 1536
+- Auf Mobile: Typografie-Hierarchie bleibt intakt, nur Skalierung angepasst
+- Nummerierungen bleiben auch auf Mobile sichtbar
+
+---
+
+## 7. Seitenarchitektur
+
+Die Seite folgt einer fünfteiligen Argumentationskette. Keine Funnel-Logik. Keine „Features / Pricing / About"-Struktur.
+
+### 7.1 Startseite — Die Irritation
+
+**Funktion:** Konfrontation mit der Diagnose
+
+**Inhaltselemente:**
+- Hero mit einer einzigen Kernaussage (Beispiel): *„Wenn Sie Ihr Unternehmen nicht erklären können, haben Sie kein Marketingproblem — sondern ein Markenproblem."*
+- Kein Sub-Headline-Erklärungstext darunter. Die Aussage steht allein.
+- **Ein** nächster Schritt: Textlink zu „Warum Marke kein Marketingthema ist" (führt zu Sektion 7.2)
+- Keine CTAs, keine Formulare, keine Logo-Leiste
+
+**Keyvisual:** Monolith-Fragment, angeschnitten, nicht mittig
+
+### 7.2 Das Manifest — Die Diagnose
+
+**Funktion:** Problem sprachlich präzise benennen
+
+**Inhaltselemente:**
+- Längerer Editorial-Text (Serif), strukturiert in 4–6 nummerierten Abschnitten:
+  - Warum Produkte nicht mehr gewinnen
+  - Warum Vergleichbarkeit entsteht
+  - Warum Marketing scheitert
+  - Warum KI das Problem verschärft
+- Ton: ruhig, sachlich, nicht missionarisch
+- Jeder Abschnitt mit Nummerierung und kurzer Section-Headline
+
+**Keyvisual:** Monolith-Detail oder Textur-Ausschnitt
+
+### 7.3 Die Methode — Die Einordnung
+
+**Funktion:** Warum Brand Engineering notwendig ist
+
+**Inhaltselemente:**
+- Denklogik der Methode in 3–5 Kernsätzen
+- Keine Prozessgrafiken, keine Infografiken, keine Flowcharts
+- Einfache typografische Gliederung reicht aus
+
+### 7.4 Das System — Die Lösung
+
+**Funktion:** Zeigen, dass die Lösung existiert
+
+**Inhaltselemente:**
+- Kurze Vorstellung der drei Säulen:
+  - Denkrahmen (markemacht.de)
+  - Infrastruktur (brandwork.io)
+  - Autorität (adametz.media)
+- Pro Säule: 2–3 Sätze, kein Icon, keine Feature-Liste
+- Kernbotschaft prominent platziert: *„Klarheit lässt sich bauen — wenn man sie ernst nimmt."*
+
+### 7.5 Der nächste Schritt — Die Entscheidung
+
+**Funktion:** Einen einzigen logischen Einstieg anbieten
+
+**Inhaltselemente:**
+- Vorstellung des Marken-Klarheits-Audits
+- Umfang, Dauer, Preisrahmen in klarer Form
+- **Ein** Kontaktweg (z. B. direkter Link zu Terminvereinbarung oder Formular)
+- Keine alternativen CTAs, keine Newsletter-Abfrage, keine Whitepaper-Downloads
+
+---
+
+## 8. Keyvisual — Der Monolith
+
+### 8.1 Semantische Bedeutung
+
+Der Monolith ist das zentrale Bildmotiv der Seite. Er steht für: Marken-DNA, Regelwerk, Unverrückbarkeit.
+
+Er steht **nicht** für: Technologie, KI, Macht, Überlegenheit, Erlösung.
+
+### 8.2 Bildregeln
+
+- **Materialität:** Beton, Basalt, mattes Metall, dunkler Stein — nie glänzend, nie futuristisch
+- **Licht:** hartes, gerichtetes Licht, klare Kanten, keine weichen Verläufe
+- **Perspektive:** frontal oder leicht orthogonal, Augenhöhe — keine Heldenperspektive
+- **Sichtbarkeit:** niemals vollständig, immer angeschnitten oder fragmentiert
+- **Platzierung:** nie mittig, bevorzugt links oder rechts im Raster, viel Negativraum
+- **Farbe:** dominant Schwarz/Dunkelgrau, Magenta nur als Kantenreflex oder Lichtlinie
+
+### 8.3 Einsatz auf der Seite
+
+- Hero-Sektion: reduzierte Hero-Version mit maximalem Negativraum
+- Manifest-Sektion: Detail-Version (Textur, Kante, Ausschnitt)
+- Übrige Sektionen: typografisch geführt, kein Bildzwang
+
+Umsetzung möglich als: 3D-Rendering (Blender, Cinema4D), Fotografie realer Betonobjekte, oder kuratierte KI-Generierung. Alle drei Wege zulässig, solange die Bildregeln eingehalten werden.
+
+---
+
+## 9. Motion & Interaktion
+
+Bewegung dient der Orientierung, nicht der Unterhaltung.
+
+### Erlaubt
+
+- Sanfte Scroll-Reveals bei Section-Übergängen (max. 400 ms, ease-out)
+- Zurückhaltende Hover-States auf Links (Farbwechsel zu Magenta, keine Transformationen)
+- Cursor-Responsivität bei interaktiven Elementen (subtiler Richtungsbezug)
+- Dezente Parallax-Tiefe beim Keyvisual (max. 5 % Versatz)
+
+### Nicht erlaubt
+
+- Scroll-Hijacking
+- Mouse-Trail-Effekte
+- Animierte Gradient-Hintergründe
+- Auto-Play-Videos
+- „Magic Cursor"-Spielereien
+- Zoom-Effekte auf Sektionswechsel
+- Animierte Zahlen-Counter
+
+> Wenn Bewegung erklären muss, warum sie da ist — entfernen.
+
+---
+
+## 10. Visuelle No-Gos
+
+Absolut. Keine Ausnahme.
+
+- Stockfotos jeglicher Art
+- Menschen, Gesichter, Teams-in-Interaktion-Bilder
+- Icon-Gitter als Feature-Darstellung
+- Farbverläufe
+- Emojis
+- „Nebel-Drama" oder filmische Inszenierungen
+- Neon-Effekte oder Glow
+- Pastellfarben
+- Kreisdiagramme, Balkendiagramme, Infografiken
+- Abgerundete Container mit Schlagschatten
+- Glassmorphism
+- Testimonials mit Sprechblasen-Design
+
+---
+
+## 11. Sprachliche Leitplanken (für alle Textplatzhalter)
+
+Falls das Design mit Platzhaltertexten oder Lorem-Ipsum gefüllt wird, gelten folgende Regeln:
+
+- Kurze Sätze. Direkt. Feststellend.
+- Keine Fragen als Headlines („Suchen Sie nach …?")
+- Keine Buzzwords: *innovativ, ganzheitlich, maßgeschneidert, zukunftssicher, revolutionär*
+- Keine Motivationssprache: *„Gemeinsam zum Erfolg"*
+- Keine Wir-helfen-Ihnen-Sprache
+- Keine Superlative ohne Substanz
+
+Wenn echter Platzhalter nötig ist, lieber Struktur-Dummy verwenden:
+```
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit.
+```
+statt Marketing-Blabla.
+
+---
+
+## 12. Technische Anforderungen
+
+### 12.1 Framework & Stack
+
+Offen — Empfehlung basierend auf Anforderungen:
+
+- **Next.js** (React) oder **Astro** für statische Performance
+- **Tailwind CSS** für konsistente Utility-Klassen
+- **Vercel** oder ähnlich für Hosting mit Edge-Performance
+- Headless-CMS optional (Sanity, Contentful, Payload) — wenn Redaktionspflege gewünscht ist
+
+### 12.2 Performance-Ziele
+
+- Lighthouse Performance: ≥ 95
+- Largest Contentful Paint: < 1.5 s
+- Cumulative Layout Shift: < 0.05
+- Keine externen Fonts außerhalb self-hosted oder via next/font
+- Bilder als WebP/AVIF mit Lazy Loading
+
+### 12.3 Accessibility
+
+- WCAG 2.1 Level AA als Mindestanforderung
+- Kontraste: Text auf Dunkelgrund mindestens 7:1 für Fließtext, 4.5:1 für größere Headlines
+- Magenta als Akzentfarbe nie als einziges Unterscheidungsmerkmal einsetzen (zusätzlich Unterstreichung oder Kontext)
+- Tastatur-Navigation vollständig nutzbar
+- `prefers-reduced-motion` respektieren
+
+### 12.4 SEO-Grundlagen
+
+- Semantisches HTML (korrekte Heading-Hierarchie, `<article>`, `<section>`)
+- Meta-Descriptions handgeschrieben, keine Generierung
+- OpenGraph-Bild: Keyvisual-Hero, statisch
+- `sitemap.xml`, `robots.txt` vorhanden
+- Strukturierte Daten (schema.org) für Organisation
+
+### 12.5 Tracking & Privacy
+
+- **Kein** Google Analytics
+- **Kein** Facebook Pixel
+- **Keine** Cookie-Banner mit Opt-in-Zwang, die den ersten Eindruck dominieren
+- Alternativ: Plausible, Fathom oder serverseitiges Analytics ohne Cookies
+- Datenschutz-konform ohne Einwilligungsbarriere beim Seitenaufruf
+
+---
+
+## 13. Domainstruktur & interne Links
+
+- Primärdomain: `markemacht.de`
+- Einzelne Content-Sektionen als separate URLs mit stabilen Pfaden:
+  - `/manifest`
+  - `/methode`
+  - `/system`
+  - `/audit`
+- Keine interne Verlinkung zu `brandwork.io` oder `adametz.media` ohne klaren Grund — diese Plattformen werden nur kontextgebunden genannt
+- Externer Link auf adametz.media in Footer erlaubt
+
+---
+
+## 14. Erfolgskriterium
+
+Die Seite ist erfolgreich, wenn:
+
+- Besucher **weniger** Fragen stellen (weil die Seite diese bereits beantwortet hat)
+- Anfragen **konkreter** werden (weil das Problem bereits benannt ist)
+- Geschäftsführer die Seite **weiterleiten**
+- Menschen die Begriffe der Seite in eigenen Diskussionen verwenden
+
+Die Seite ist **nicht** erfolgreich an:
+
+- Verweildauer
+- Seitenaufrufen
+- Scrolltiefe
+- Newsletter-Anmeldungen
+
+Diese Metriken werden nicht gemessen.
+
+---
+
+## 15. Abgabe & Iteration
+
+### Erwarteter Ablauf
+
+1. Erstentwurf als Figma-Datei mit Desktop- und Mobile-Ansicht für alle fünf Sektionen
+2. Review mit dem Auftraggeber — ausschließlich gegen dieses Briefing
+3. Überarbeitung auf Basis dokumentierter Feedbackpunkte
+4. Technische Umsetzung
+5. QA gegen Performance- und Accessibility-Ziele
+
+### Entscheidungslogik bei Konflikten
+
+Wenn eine Design- oder Implementierungsentscheidung zwischen diesem Briefing und einer kreativen Idee abweicht:
+
+**Das Briefing gewinnt.**
+
+Wenn eine kreative Idee das Briefing übertreffen würde: dokumentiert vorlegen, Begründung angeben, Entscheidung beim Auftraggeber.
+
+---
+
+## 16. Ansprechpartner
+
+**Auftraggeber:** Kevin Adametz
+**Unternehmen:** ADAMETZ.MEDIA
+**Rolle:** Methodischer Urheber, inhaltliche Letztinstanz
+
+Alle inhaltlichen und strategischen Rückfragen gehen direkt an den Auftraggeber. Keine Delegation.
+
+---
+
+### Ende — Design-Briefing markemacht.de v1.0