05-06-2026 marke macht Webseite Design Inhalte

2026-06-05 17:43:31 +02:00 · 2026-06-05 17:43:31 +02:00 · 18216e301c
commit 18216e301c
parent 00796a35d5
181 changed files with 12025 additions and 7941 deletions
--- a/_markemacht.de/DESIGN.md
+++ b/_markemacht.de/DESIGN.md
@ -0,0 +1,232 @@
+# 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)
--- a/_markemacht.de/Deignkorrekturen.md
+++ b/_markemacht.de/Deignkorrekturen.md
@ -0,0 +1,166 @@
+# Marke macht. — Designkorrekturen (Schritt 1: Design)
+
+**Scope:** Nur Erscheinungsbild, Struktur, Token — **seitenübergreifend** (Start, Manifest, Denken). **Keine Copy-Änderungen** (das ist Schritt 2). Bilder kommen als letzter Schritt — hier nur Platzhalter-Regeln.
+**Referenz-Variante:** „monolithisch" (dunkel). Regeln gelten für beide Wirkungen, außer wo explizit eine Variante genannt ist.
+**Grundsatz für alle Änderungen:** Magenta = Signal, nicht Fläche. Jede Schrift hat einen Job. Kanten sind hart (monolithisch) bzw. leicht weich (editorial). Invariant ist der Inhalt, nicht das Layout.
+
+---
+
+## 1. Design-Token (Source of Truth)
+
+Bestehende Werte beibehalten, wo vorhanden. Hex-Werte sind Startwerte zum Kalibrieren.
+
+### Farbe
+
+| Token | monolithisch (dunkel) | editorial (hell) | Zweck |
+|---|---|---|---|
+| `--bg` | `#0B0B0C` | bestehender Creme-Ton | Grundfläche |
+| `--surface` (Karten) | `#121214` | `#FFFFFF` | Karten/Container |
+| `--ink` | `#F4F2EE` | near-black | Haupttext |
+| `--muted` | `#8C8C92` | gedämpftes Grau | Sekundärtext |
+| `--line` | `#26262B` | `#E7E4DD` | Trennlinien, Rahmen |
+| `--signal` (Magenta) | bestehender Magenta-Token (≈ `#F31E6B`) | identisch | **nur Signal** |
+
+> Magenta-Wert **nicht** ändern. Geändert wird ausschließlich, **wo** und **wie viel** Magenta erscheint (siehe §2 und CHG-01).
+
+### Schrift-Rollen
+
+| Token | Familie (bestehend) | Job |
+|---|---|---|
+| `--font-grotesk` | eure Grotesk, eng/schwer | Headlines, Sektions-Titel, Karten-Titel — die „gebaute" Stimme |
+| `--font-serif` | eure Serife | **Denk-Stimme**: Zitate + Manifest + Denken-Essays |
+| `--font-mono` | eure Monospace | System/Meta: Sektions-Labels, Symptom-Labels, Button-Text, Datum |
+
+### Form / Radius (Wirkungs-Token — bewusst unterschiedlich)
+
+| Token | monolithisch | editorial | Zweck |
+|---|---|---|---|
+| `--radius` | `0` | `8px` (umgesetzt) | Härte-vs-Weichheit als Träger des Wirkungsunterschieds |
+
+> Der Radius ist **gewollt** ungleich: monolithisch eckig/Beton, editorial etwas weicher. Im editorial **ein** Radius-Wert konsequent auf alle Elemente (Karten, Buttons, Slots, Toggle, Filter), damit „weicher" nicht in „verspielt" kippt.
+
+---
+
+## 2. Globale Regeln (gelten für die ganze Seite)
+
+- **R1 — Magenta-Budget:** Magenta erscheint ausschließlich an diesen Stellen: aktiver Nav-Zustand · das eine Hero-Wort „Marketingproblem" · Mono-Signal-Labels (`SYMPTOM 0X`) · 2px-Oberkante an genau **einer** Diagnose-Karte · primärer Action-Link („Audit anfragen"). Sonst nirgends.
+- **R2 — Magenta nie als Fläche:** keine gefüllten Magenta-Pills/-Badges, keine Magenta-Hintergründe, keine Glows. Max. Magenta-Fläche pro Element = Linie/Kante bis 2px oder reiner Text.
+- **R3 — Keine Farbverläufe:** alle Gradienten raus (Hero-Bildfläche, Karten-Bildflächen, weiche Glows). Platzhalter = flacher Flächenton in `--surface`/`--line`, kein Verlauf.
+- **R4 — Radius ist Wirkungs-Token, nicht global:** `--radius` = `0` (monolithisch), kleiner einheitlicher Wert ≈ `4px` (editorial). Der Unterschied ist gewollt und trägt die Wirkung; **nicht** global vereinheitlichen.
+- **R5 — Trennung über Linien, nicht Schatten:** Sektionen und Karten durch 1px `--line` trennen. Keine `box-shadow`-Tiefen.
+- **R6 — Invariant ist der Inhalt, nicht das Layout:** Über beide Wirkungen bleiben *Inhalt, Reihenfolge und Hierarchie* identisch (Kern). *Anordnung, Radius, Raum* sind Ausdruck und dürfen je Wirkung abweichen (Dok. 010: Kern fix, Form beweglich). Bedingung: variierende Anordnung muss **rasterbasiert/regelhaft** sein, nicht freihändig.
+- **R7 — Schrift-Job-Test:** für jede Magenta-Stelle und jede Serif-Stelle muss in einem Satz begründbar sein, warum sie dort steht. Wenn nicht → Dekoration → entfernen.
+- **R8 — Stimmen-Regel (seitenübergreifend):** Die *Rolle* der Serife ist konstant = „die denkende/erhobene Stimme". Ihr *Umfang* richtet sich nach Inhaltstyp:
+  - Serife → erhobene Aussagen, Zitate, reflektierende Schlusssätze (Start, Manifest) **und** der laufende Essay-Body auf Artikel-Seiten (Denken).
+  - Grotesk → Headlines, Karten-/Strukturinhalte, kurze diagnostische Erklär-/Teaser-Texte, UI.
+  - Mono → Meta-Labels, System-Marker, Button-Text, Datum.
+  Kein Schriftwechsel *innerhalb* eines zusammenhängenden Gedankens; wo Stimme und Struktur aufeinandertreffen, entscheidet Hierarchie (siehe CHG-09), nicht ein Mix.
+
+---
+
+## 3. Konkrete Änderungen
+
+### CHG-01 — Magenta-Pills durch Magenta-Text ersetzen
+**Wo:** alle Label-Pills (z. B. `SYMPTOM 01/02/03`; im hellen Layout zusätzlich Kategorie-Tags, sofern vorhanden).
+**Statt:** Text in gefüllter Magenta-Pille.
+**Soll:** Label in `--font-mono`, Versalien, Letter-Spacing ≈ 2px, Farbe `--signal`, **kein** Hintergrund, kein Border.
+**Prüfkriterium:** keine gefüllte Magenta-Fläche mehr im DOM; Labels lesen als reiner farbiger Mono-Text.
+
+### CHG-02 — Verläufe entfernen (Platzhalter)
+**Wo:** Hero-Bild-Slot (rechts oben), alle Karten-Bildflächen, dekorative Glows.
+**Soll:** flacher Flächenton (`--surface` bzw. 1 Stufe neben `--bg`), kein `linear-/radial-gradient`. Slot-Format und Position bleiben.
+**Prüfkriterium:** kein `gradient()` in den betroffenen Flächen; Platzhalter ist einfarbig matt.
+
+### CHG-03 — Symptom-Karten: Anordnung je Wirkung gewollt unterschiedlich
+**Wo:** Sektion `[01] DIAGNOSE`.
+**Soll:** Anordnung bleibt bewusst verschieden — monolithisch **versetzt/gestaffelt**, editorial **geordnet**. Invariant über beide Wirkungen: Reihenfolge 01 → 02 → 03, gleiche Gewichtung der drei Karten, Magenta-Kante auf Karte 03 (siehe CHG-04).
+**Bedingung:** Der Versatz im monolithischen Bereich ist **rasterbasiert** — ein konsequenter, gleicher Versatz-Schritt, an der Baseline verankert (liest sich als konstruiert/engineered, nicht als zufälliger Scatter).
+**Prüfkriterium:** Reihenfolge und Hierarchie in beiden Varianten gleich; der Versatz folgt einem festen Raster-Schritt, nicht freien Pixelwerten.
+
+### CHG-04 — Diagnostische Kante nur an Karte 03
+**Wo:** Symptom-Karten.
+**Soll:** Karte 01 und 02 = Oberkante 1px `--line`. Karte 03 (zugespitzt) = Oberkante **2px `--signal`**. Sonst keine farbigen Kanten.
+**Prüfkriterium:** genau eine Karte trägt eine Magenta-Kante.
+
+### CHG-05 — Schrift-Rollen sauber zuordnen
+**Wo:** ganze Seite.
+**Soll:**
+- `--font-grotesk`: Hero-H1, „Drei Anzeichen…", „Textklarheit erzwingt Denkklarheit", Karten-Titel.
+- `--font-serif`: **nur** das Zitat „Marke ist kein Gefühl. Marke ist ein Regelwerk." — zweite Zeile in `--muted`.
+- `--font-mono`: `[00]/[01]/[02]`, `SYMPTOM 0X`, Button-Text, Datum.
+- Diagnose-Fließtext (Symptom-Beschreibungen) bleibt **Grotesk/Sans**, gedämpft — **keine** Serife.
+**Prüfkriterium:** Serife taucht auf Start ausschließlich im Zitat auf.
+
+### CHG-06 — Radius als Wirkungs-Token umsetzen
+**Wo:** Karten, Buttons, Bild-Slots, Wirkung-Toggle, Filter-Elemente.
+**Soll:** `border-radius: var(--radius)` mit `--radius: 0` (monolithisch) und `--radius: 8px` (editorial — umgesetzt; 4px war zu wenig Differenz). Im editorial **derselbe** Wert auf alle genannten Elemente.
+**Prüfkriterium:** monolithisch durchgehend eckig; editorial durchgehend gleich leicht gerundet — kein gemischter Radius innerhalb einer Wirkung. Obergrenze ~8px, sonst verliert auch editorial die „Beton"-Härte.
+
+### CHG-07 — Sektions-Trennung & Rhythmus
+**Wo:** zwischen allen Sektionen.
+**Soll:** volle 1px-Trennlinie `--line`; vertikales Sektions-Padding großzügig (Startwert `clamp(64px, 8vw, 96px)`); keine Schatten als Trenner.
+**Prüfkriterium:** Sektionsgrenzen sind Linien, keine Schlagschatten.
+
+### CHG-08 — Hero-Bild-Slot vorbereiten (für späteren Bild-Schritt)
+**Wo:** Hero, rechts oben.
+**Soll:** Slot bleibt reserviert, **angeschnitten** (darf Viewport/Containerkante schneiden), viel Negativraum, Kante per `var(--radius)`. Bis zum Bild: flacher `--surface`-Ton **ohne** sichtbaren Rahmen (sonst liest sich der leere Slot als „Bild fehlt" statt als gewollter Raum).
+**Prüfkriterium:** Slot ist rechteckig, randständig, ohne Verlauf, ohne wirkende Platzhalter-Umrandung.
+
+### CHG-09 — Hervorgehobene Aussage (Lead-Muster, seitenübergreifend)
+**Wo:** erhobene Kern-Aussagen (z. B. Manifest-Lead „In den meisten Unternehmen wird »Marke«…").
+**Soll:** Serife, leicht eingerückt, mit linker 2–3px-`--signal`-Rule. Eine evtl. nachfolgende, erläuternde Fortsetzung bleibt zurücktretender Sans-Body in `--muted`. Die Magenta-Rule macht den Schrift-/Gewichtswechsel als *gewollte Hierarchie* lesbar, nicht als Bruch.
+**Prüfkriterium:** Lead = Serife + Magenta-Rule + Einrückung; Fortsetzung = Sans/gedämpft; kein Schriftwechsel ohne dieses Hierarchie-Signal.
+
+### CHG-10 — Karten als ein System (seitenübergreifend)
+**Wo:** Symptom-Karten (Start), Konsequenz-Karten (Manifest), Bausteine (Methode), Index-Einträge (Denken).
+**Soll:** eine gemeinsame Karten-Sprache: Mono-Magenta-Label, Grotesk-Titel, Sans-Body; Anordnung je Wirkung (gestaffelt monolithisch / geordnet editorial, rasterbasiert). Für die Magenta-Hervorhebung gilt eine **Set-Typ-Unterscheidung**:
+- **Argument-Set** (steigert sich auf eine Pointe zu: Start-Symptome, Manifest-Konsequenzen) → **genau eine** Karte trägt die 2px-`--signal`-Oberkante, und zwar die inhaltlich stärkste/zugespitzte (Climax, nicht nur „die letzte").
+- **Aufzählungs-Set** (gleichwertige Elemente ohne Zuspitzung: Methode-„Fünf Bausteine", Denken-Index) → **keine** Hervorhebung, **keine** Magenta-Kante. Gleichgewichtung ist hier die Aussage. Das gilt ausdrücklich auch für „Grenzregeln": trotz des thematischen „roten Bereichs" **keine** Sonder-Kante, da sich das Set nicht zuspitzt.
+**Prüfkriterium:** identische Karten-Tokens über alle Seiten; Argument-Sets genau eine Magenta-Kante (auf der stärksten Karte); Aufzählungs-Sets keine.
+
+---
+
+### Denken (Index + Artikel)
+
+### CHG-11 — Denken-Index: bildlose Liste, gleichgewichtet
+**Wo:** Übersichtsseite „Denken".
+**Soll:**
+- **Form:** Beitrags-Liste über die volle Breite in **beiden** Wirkungen (Meta links: Kategorie + Datum; rechts: Titel + kurzer Teaser; Einträge durch Haarlinien `--line` getrennt). **Kein** Karten-/Bild-Grid. Der Wirkungsunterschied wird über Farbe/Kontrast/Radius getragen, nicht über Liste-vs-Grid.
+- **Typo:** Seiten-Intro („Ein Denkraum für Klarheit…") = Serife (erhobene Stimme); Beitrags-Titel = Grotesk; Teaser = Sans/gedämpft; Meta (Kategorie, Datum) = Mono.
+- **Bilder:** **keine** dekorativen Beitragsbilder/Thumbnails. Ausnahme nur, wenn ein Bild *selbst Substanz ist* (Diagramm/Struktur-Skizze, die das Argument trägt). Der eine reservierte Marken-Hero-Slot oben darf bleiben; die Beitragsliste bleibt bildlos.
+- **Gewichtung:** alle Beiträge **gleich** behandelt, chronologisch. **Kein** „Featured", keine Hervorhebung, keine Magenta-Kante auf einzelnen Beiträgen. Hervorhebung passiert ausschließlich extern (Social/Newsletter), nie im Verzeichnis selbst.
+**Prüfkriterium:** identische Listenform in beiden Wirkungen; keine Beitragsbilder; kein Eintrag visuell bevorzugt; Serife nur im Intro.
+
+### CHG-12 — Kein Filter-UI (vorerst); Kategorien nur als Labels
+**Wo:** Filterzeile und Kategorie-Auszeichnung der Beiträge.
+**Soll:** Die interaktive Filterzeile (Alle / Diagnose / Einordnung / System) **entfernen** — bei wenigen Beiträgen täuscht sie eine Bibliothek vor („kein Rauschen"). Wieder einführen erst ab Umfang, der nicht mehr überfliegbar ist (Daumenwert ~12–15 Beiträge). Bis dahin chronologisch. Die drei Kategorien **bleiben** als **Labels** am Beitrag: Magenta-Mono-Text (wie CHG-01), keine Pillen, keine Verläufe.
+**Prüfkriterium:** keine Filter-Schaltflächen auf dem Index; Kategorie erscheint nur als Mono-Magenta-Label je Beitrag.
+
+### CHG-13 — Artikel-Body = Serife (greift R8 auf der Lese-Seite) · ✅ umgesetzt
+**Wo:** Detail-/Artikel-Template eines Denken-Beitrags.
+**Soll:** der laufende Essay-Body = Serife (lange Lesestrecke, Denkraum-Stimme); Zwischenüberschriften = Grotesk; Standfirst/Zusammenfassung = Grotesk/Sans; Meta/Marker = Mono; hervorgehobene Aussagen/Zitate nach CHG-09. Magenta nur als Signal (Links, aktiver Zustand), nie als Fläche. Kontextueller Abschluss-CTA = gefüllter Button mit artikelspezifischem Titel.
+**Prüfkriterium:** Fließtext des Artikels ist Serife; Struktur-/Meta-Elemente Grotesk bzw. Mono. **Status: umgesetzt (Detailseite steht).**
+
+### CHG-14 — Fixed-Header-Offset (funktional, seitenübergreifend)
+**Wo:** alle Seiten mit fixierter Nav (Nav ist dauerhaft oben am Bildschirm).
+**Soll:** Nav erhält einen **deckenden Hintergrund** (`--bg` der jeweiligen Wirkung), damit darunterlaufender Inhalt nicht durchscheint. Inhalt bekommt `scroll-padding-top` in Nav-Höhe (plus kleiner Puffer), damit angesprungene Anker/Überschriften und das Standfirst **nicht** hinter der Nav verschwinden.
+**Prüfkriterium:** kein Text wird beim Scrollen/Ankern von der Nav verdeckt; Standfirst vollständig sichtbar (Regressionsfall: langes Standfirst monolithisch).
+
+### CHG-15 — Long-Form-Typografie (Artikel-Body) · ✅ umgesetzt
+**Wo:** Artikel-Template (Serif-Body), gilt für alle künftigen Beiträge.
+**Soll:** Absatzabstand zwischen `<p>` ~`1em`; Zeilenhöhe Serif-Body ~`1.6–1.7`; Lead-Absatz nur leicht größer als Body (Hierarchie, kein Größensprung mitten im Text), im monolithischen zusätzlich gedämpft. Eigenständige Gedanken stehen als getrennte Absätze, nicht als Block.
+**Prüfkriterium:** sichtbarer Abstand zwischen Absätzen; Body atmet; Lead→Body liest sich als Hierarchie. **Status: umgesetzt (Stand „Führung durch Reduktion").**
+
+---
+
+## 4. Bewusst NICHT geändert
+
+- **Inhalte/Copy** bleiben unverändert (Schritt 2).
+- **Wirkung-Schalter** bleibt; er ist die Demonstration „Form beweglich, Inhalt fix".
+- **Magenta als Markenfarbe** ist gesetzt (bewusste Entscheidung); Dok. 19 ist hier ausgeklammert.
+- **Bildmotive** (Monolith o. a.) folgen im letzten Schritt, je Variante.
+
+## 5. Weiterer Punkt
+
+
+- **WP-1:** Wortmarke schreibweise „MARKE MACHT" 
--- a/_markemacht.de/assets/components/footer.html
+++ b/_markemacht.de/assets/components/footer.html
@ -0,0 +1,13 @@
+<footer class="site-footer">
+  <div class="footer-inner">
+    <div class="footer-meta">
+      <p class="footer-copy">© MARKE MACHT · Denkraum für Unternehmer</p>
+      <p class="footer-note">Keine Cookies, kein Tracking.</p>
+    </div>
+    <div class="footer-links">
+      <a class="footer-link" href="#">Impressum</a>
+      <a class="footer-link" href="#">Datenschutz</a>
+      <a class="footer-link" href="#">Kontakt</a>
+    </div>
+  </div>
+</footer>
--- a/_markemacht.de/assets/components/header.html
+++ b/_markemacht.de/assets/components/header.html
@ -0,0 +1,51 @@
+<a class="visually-hidden" href="#main">Zum Inhalt springen</a>
+
+<nav class="nav" aria-label="Hauptnavigation" data-site-nav>
+  <div class="nav-inner">
+    <a class="nav-brand" href="./index.html">MARKE MACHT</a>
+
+    <div class="nav-links">
+      <a class="nav-link" href="./index.html" data-nav-page="start">Start</a>
+      <a class="nav-link" href="./manifest.html" data-nav-page="manifest">Manifest</a>
+      <a class="nav-link" href="./methode.html" data-nav-page="methode">Methode</a>
+      <a class="nav-link" href="./denken.html" data-nav-page="denken">Denken</a>
+    </div>
+
+    <div class="wirkung-switch" role="group" aria-label="Wirkung wechseln">
+      <span class="wirkung-label">Wirkung:</span>
+      <button type="button" class="wirkung-option" data-wirkung="monolith" aria-pressed="false">monolithisch</button>
+      <span class="wirkung-sep" aria-hidden="true">·</span>
+      <button type="button" class="wirkung-option" data-wirkung="editorial" aria-pressed="false">editorial</button>
+    </div>
+
+    <a class="nav-cta" href="./audit.html">Audit anfragen</a>
+
+    <button class="menu-btn" data-drawer-open aria-label="Menü öffnen" aria-controls="mobile-drawer" aria-expanded="false">
+      <span class="material-symbols-outlined" aria-hidden="true">menu</span>
+    </button>
+  </div>
+</nav>
+
+<aside id="mobile-drawer" class="mobile-drawer" data-mobile-drawer aria-hidden="true" aria-label="Mobile Navigation">
+  <div class="mobile-drawer-head">
+    <span class="nav-brand">MARKE MACHT</span>
+    <button class="menu-btn" data-drawer-close aria-label="Menü schließen">
+      <span class="material-symbols-outlined" aria-hidden="true">close</span>
+    </button>
+  </div>
+  <nav class="mobile-drawer-links" aria-label="Mobile Hauptnavigation">
+    <a class="mobile-drawer-link" href="./index.html" data-nav-page="start">Start</a>
+    <a class="mobile-drawer-link" href="./manifest.html" data-nav-page="manifest">Manifest</a>
+    <a class="mobile-drawer-link" href="./methode.html" data-nav-page="methode">Methode</a>
+    <a class="mobile-drawer-link" href="./denken.html" data-nav-page="denken">Denken</a>
+  </nav>
+  <div class="mobile-drawer-footer">
+    <div class="wirkung-switch" role="group" aria-label="Wirkung wechseln">
+      <span class="wirkung-label">Wirkung:</span>
+      <button type="button" class="wirkung-option" data-wirkung="monolith" aria-pressed="false">monolithisch</button>
+      <span class="wirkung-sep" aria-hidden="true">·</span>
+      <button type="button" class="wirkung-option" data-wirkung="editorial" aria-pressed="false">editorial</button>
+    </div>
+    <a class="nav-cta mobile-drawer-cta" href="./audit.html">Audit anfragen</a>
+  </div>
+</aside>
--- a/_markemacht.de/assets/css/app.css
+++ b/_markemacht.de/assets/css/app.css
@ -9,21 +9,23 @@

 :root,
 [data-theme="monolith"] {
-  --color-bg-base: 10 10 10;          /* #0A0A0A */
-  --color-bg-surface: 20 19 19;       /* #141313 */
-  --color-bg-elevated: 54 54 54;      /* #363636 */
-  --color-bg-accent-soft: 71 71 71;   /* #474747 */
-  --color-border: 53 52 52;           /* #353434 */
-  --color-text-primary: 255 255 255;  /* #FFFFFF */
-  --color-text-body: 229 226 225;     /* #E5E2E1 */
-  --color-text-dim: 168 167 167;      /* #A8A7A7 */
-  --color-text-mute: 95 94 94;        /* #5F5E5E */
-  --color-accent: 232 23 93;          /* #E8175D */
+  --color-bg-base: 11 11 12;          /* #0B0B0C  Grundfläche (--bg) */
+  --color-bg-surface: 18 18 20;       /* #121214  Karten/Container (--surface) */
+  --color-bg-elevated: 18 18 20;      /* #121214  Karten (--surface) */
+  --color-bg-accent-soft: 38 38 43;   /* #26262B  Hover-Ton (= --line) */
+  --color-border: 38 38 43;           /* #26262B  Trennlinien/Rahmen (--line) */
+  --color-text-primary: 244 242 238;  /* #F4F2EE  Haupttext (--ink) */
+  --color-text-body: 230 228 224;     /* #E6E4E0 */
+  --color-text-dim: 140 140 146;      /* #8C8C92  Sekundärtext (--muted) */
+  --color-text-mute: 108 108 114;     /* #6C6C72 */
+  --color-accent: 232 23 93;          /* #E8175D  Signal (--signal, unverändert) */
  --color-accent-soft: 204 82 122;    /* #CC527A */

-  --radius-card: 0px;
-  --radius-pill: 0px;
-  --radius-btn: 0px;
+  /* Radius ist Wirkungs-Token (CHG-06): monolithisch durchgehend eckig. */
+  --radius: 0px;
+  --radius-card: var(--radius);
+  --radius-pill: var(--radius);
+  --radius-btn: var(--radius);

  --ff-display: "Outfit", system-ui, sans-serif;
  --ff-editorial: "Newsreader", Georgia, serif;
@ -32,7 +34,8 @@

  --fs-hero: clamp(52px, 8vw, 96px);
  --fs-section: clamp(36px, 5vw, 56px);
-  --fs-editorial: clamp(22px, 2.6vw, 36px);
+  --fs-editorial: clamp(20px, 2.2vw, 30px);
+
  --fs-body: 18px;
  --fs-meta: 13px;

@ -48,7 +51,7 @@

  --container-max: 1440px;
  --px-horizontal: clamp(24px, 8vw, 128px);
-  --section-gap: clamp(96px, 14vw, 160px);
+  --section-gap: clamp(64px, 8vw, 96px);
  --block-gap: clamp(48px, 8vw, 96px);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
@ -57,21 +60,24 @@
 }

 [data-theme="editorial"] {
-  --color-bg-base: 251 250 242;       /* #FBFAF2 */
-  --color-bg-surface: 245 244 236;    /* #F5F4EC */
-  --color-bg-elevated: 255 255 255;   /* #FFFFFF */
+  --color-bg-base: 251 250 242;       /* #FBFAF2  Grundfläche (Creme) */
+  --color-bg-surface: 245 244 236;    /* #F5F4EC  Platzhalter-/Slot-Ton */
+  --color-bg-elevated: 255 255 255;   /* #FFFFFF  Karten (--surface) */
  --color-bg-accent-soft: 233 232 225; /* #E9E8E1 */
-  --color-border: 230 225 211;        /* #E6E1D3 */
-  --color-text-primary: 25 25 25;     /* #191919 */
+  --color-border: 231 228 221;        /* #E7E4DD  Trennlinien/Rahmen (--line) */
+  --color-text-primary: 25 25 25;     /* #191919  Haupttext (--ink) */
  --color-text-body: 27 28 23;        /* #1B1C17 */
  --color-text-dim: 68 71 72;         /* #444748 */
-  --color-text-mute: 116 120 120;     /* #747878 */
-  --color-accent: 232 23 93;          /* #E8175D */
+  --color-text-mute: 116 120 120;     /* #747878  Sekundärtext (--muted) */
+  --color-accent: 232 23 93;          /* #E8175D  Signal (--signal, unverändert) */
  --color-accent-soft: 184 0 70;      /* #B80046 */

-  --radius-card: 16px;
-  --radius-pill: 9999px;
-  --radius-btn: 8px;
+  /* Radius ist Wirkungs-Token (CHG-06): editorial durchgehend gleich leicht
+     gerundet. Ein Wert auf alle Elemente — kein gemischter Radius. */
+  --radius: 8px;
+  --radius-card: var(--radius);
+  --radius-pill: var(--radius);
+  --radius-btn: var(--radius);

  --ff-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --ff-editorial: "Noto Serif", Georgia, serif;
@ -96,14 +102,18 @@

  --container-max: 1280px;
  --px-horizontal: clamp(24px, 5vw, 64px);
-  --section-gap: clamp(80px, 10vw, 128px);
+  --section-gap: clamp(64px, 8vw, 96px);
  --block-gap: clamp(40px, 6vw, 80px);
 }

 /* --- Global Reset & Base --------------------------------------------------- */

 * { box-sizing: border-box; }
-html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 96px;
+  -webkit-text-size-adjust: 100%;
+}
 body {
  margin: 0;
  background: rgb(var(--color-bg-base));
@ -139,6 +149,34 @@ img, svg { max-width: 100%; display: block; }

 /* --- A11y: Fokus-States --------------------------------------------------- */

+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.visually-hidden:focus,
+.visually-hidden:focus-visible {
+  position: fixed;
+  top: 16px;
+  left: 16px;
+  z-index: 100;
+  width: auto;
+  height: auto;
+  padding: 10px 14px;
+  margin: 0;
+  clip: auto;
+  background: rgb(var(--color-bg-base));
+  color: rgb(var(--color-text-primary));
+  border: 1px solid rgb(var(--color-border));
+  white-space: normal;
+}
+
 :focus { outline: none; }
 :focus-visible {
  outline: 2px solid rgb(var(--color-accent));
@ -147,7 +185,7 @@ img, svg { max-width: 100%; display: block; }
 }
 [data-theme="editorial"] :focus-visible {
  outline-offset: 4px;
-  border-radius: 4px;
+  border-radius: 2px;
 }

 .material-symbols-outlined {
@ -202,6 +240,23 @@ img, svg { max-width: 100%; display: block; }
  margin: 0;
 }

+/* Serif-Kommentar (Denk-Stimme): eingerückt, mit 2px-Magenta-Strich als Signal,
+   das den Absatz als Kommentar/Annotation kenntlich macht (Magenta = Linie ≤2px). */
+.comment {
+  padding-left: clamp(20px, 2.5vw, 32px);
+  border-left: 2px solid rgb(var(--color-accent));
+}
+
+/* Sans-Lead (gebaute Stimme) — Intro/Punchline ohne Serife (CHG-05). */
+.lead {
+  font-family: var(--ff-body);
+  font-size: var(--fs-editorial);
+  line-height: 1.45;
+  font-weight: 400;
+  color: rgb(var(--color-text-body));
+  margin: 0;
+   }
+
 .meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
@ -232,6 +287,7 @@ img, svg { max-width: 100%; display: block; }

 .section {
  padding-block: var(--section-gap);
+  border-top: 1px solid rgb(var(--color-border));
 }

 .section-tight {
@ -355,7 +411,7 @@ img, svg { max-width: 100%; display: block; }
  text-transform: none;
  font-weight: 500;
 }
-.nav-link:hover { color: rgb(var(--color-accent)); }
+.nav-link:hover { color: rgb(var(--color-text-primary)); }
 .nav-link.is-active {
  color: rgb(var(--color-accent));
  font-weight: 700;
@ -374,22 +430,21 @@ img, svg { max-width: 100%; display: block; }
  color: rgb(var(--color-accent));
  transition: color var(--transition-fast);
  white-space: nowrap;
+  background: rgb(var(--color-text-primary));
+  color: rgb(var(--color-accent));
+  padding: 10px 16px;
+  
 }
 [data-theme="editorial"] .nav-cta {
  background: rgb(var(--color-text-primary));
  color: rgb(var(--color-bg-base));
  padding: 10px 16px;
  border-radius: var(--radius-btn);
-  font-family: var(--ff-body);
-  font-size: 14px;
-  letter-spacing: -0.01em;
-  text-transform: none;
-  font-weight: 500;
 }
-.nav-cta:hover { color: rgb(var(--color-text-primary)); }
+.nav-cta:hover { color: rgb(var(--color-bg-base)); background: rgb(var(--color-accent)); }
 [data-theme="editorial"] .nav-cta:hover {
  background: rgb(var(--color-accent));
-  color: #fff;
+  color: rgb(var(--color-text-primary));
 }

 /* Desktop zeigt CTA ab 1100px */
@ -517,6 +572,12 @@ img, svg { max-width: 100%; display: block; }
  border-top: 1px solid rgb(var(--color-border));
 }
 .mobile-drawer .wirkung-switch { display: inline-flex; align-self: flex-start; }
+.mobile-drawer-cta {
+  display: inline-flex !important;
+  align-items: center;
+  align-self: flex-start;
+  width: fit-content;
+}

 body.drawer-open { overflow: hidden; }

@ -543,53 +604,28 @@ body.drawer-open { overflow: hidden; }
  .hero-keyvisual { display: block; }
 }

+/* Hero-Bild-Slot (CHG-08): randständig, angeschnitten, harte Kante,
+   flacher Flächenton als Platzhalter — kein Verlauf, kein Glow. */
 .monolith {
  position: absolute;
-  right: -10%;
+  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 70%;
  aspect-ratio: 3/4;
-  background:
-    linear-gradient(125deg, rgb(var(--color-bg-base)) 0%, rgb(var(--color-bg-base)) 35%, transparent 60%),
-    linear-gradient(135deg, #1f1e1e 0%, #2a2929 40%, #0e0d0d 100%);
-  box-shadow:
-    inset 2px 0 0 rgb(var(--color-accent) / 0.35),
-    inset -40px 0 120px rgb(var(--color-bg-base));
-  filter: contrast(1.1);
-}
-[data-theme="editorial"] .monolith {
-  background:
-    linear-gradient(125deg, rgb(var(--color-bg-base)) 0%, rgb(var(--color-bg-base)) 30%, transparent 60%),
-    linear-gradient(150deg, #e9e6d8 0%, #d6d1c1 50%, #bfb9a8 100%);
-  box-shadow:
-    inset 0 0 0 1px rgb(var(--color-border)),
-    inset -40px 0 80px rgb(var(--color-bg-base) / 0.6);
-  border-top-left-radius: 96px;
-  border-bottom-left-radius: 16px;
-  filter: none;
+  background: rgb(var(--color-bg-surface));
+  border: 1px solid rgb(var(--color-border));
+  border-radius: var(--radius);
 }

-/* Alternative Keyvisual-Varianten für Unterseiten */
+/* Alternative Keyvisual-Slots für Unterseiten — ebenfalls flach */
 .monolith--edge {
  right: -20%;
  width: 60%;
  aspect-ratio: 4/5;
-  background:
-    linear-gradient(95deg, rgb(var(--color-bg-base)) 0%, transparent 40%),
-    linear-gradient(115deg, #252424 0%, #0a0a0a 70%);
-  box-shadow:
-    inset 3px 0 0 rgb(var(--color-accent) / 0.45),
-    inset -80px 0 140px rgb(var(--color-bg-base));
-}
-[data-theme="editorial"] .monolith--edge {
-  background:
-    linear-gradient(95deg, rgb(var(--color-bg-base)) 0%, transparent 40%),
-    linear-gradient(135deg, #efece0 0%, #d9d3c1 60%, #c1baa6 100%);
-  box-shadow:
-    inset 0 0 0 1px rgb(var(--color-border)),
-    inset -60px 0 100px rgb(var(--color-bg-base) / 0.7);
-  border-radius: 64px 0 0 0;
+  background: rgb(var(--color-bg-surface));
+  border: 1px solid rgb(var(--color-border));
+  border-radius: var(--radius);
 }

 .monolith--texture {
@ -597,75 +633,52 @@ body.drawer-open { overflow: hidden; }
  top: 40%;
  width: 55%;
  aspect-ratio: 1/1;
-  background:
-    repeating-linear-gradient(135deg, #161515 0px, #161515 2px, #1e1d1d 2px, #1e1d1d 4px),
-    #141313;
-  mask-image: linear-gradient(135deg, transparent 0%, black 40%, black 70%, transparent 100%);
-  -webkit-mask-image: linear-gradient(135deg, transparent 0%, black 40%, black 70%, transparent 100%);
-  opacity: 0.6;
-}
-[data-theme="editorial"] .monolith--texture {
-  background:
-    repeating-linear-gradient(135deg, #eae6d9 0px, #eae6d9 2px, #e0dbca 2px, #e0dbca 4px),
-    #efeee6;
-  opacity: 0.9;
-  border-radius: 24px;
-  box-shadow: inset 0 0 0 1px rgb(var(--color-border));
-  mask-image: none;
-  -webkit-mask-image: none;
+  background: rgb(var(--color-bg-surface));
+  border: 1px solid rgb(var(--color-border));
+  border-radius: var(--radius);
 }

 /* --- Buttons / Links ------------------------------------------------------- */

+/* Primärbutton ist invertiert zur Grundfläche und kippt über Tokens je Wirkung:
+   monolithisch = heller Button auf Dunkel, editorial = dunkler Button auf Hell.
+   1px-Rahmen in Flächenfarbe, damit solid + ghost exakt gleich hoch sind. */
 .btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
-  padding: 18px 28px;
+  padding: 14px 22px;
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
-  color: rgb(var(--color-text-primary));
-  background: rgb(var(--color-bg-elevated));
-  border: 0;
+  color: rgb(var(--color-bg-base));
+  background: rgb(var(--color-text-primary));
+  border: 1px solid rgb(var(--color-text-primary));
  border-radius: var(--radius-btn);
  cursor: pointer;
-  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
+  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
 }
+/* Hover deutlich spürbar: monolithisch weiß -> gräulich, editorial dunkel -> heller. */
 .btn:hover {
-  background: rgb(var(--color-accent));
-  color: #fff;
-}
-[data-theme="editorial"] .btn {
-  background: rgb(var(--color-text-primary));
+  background: rgb(var(--color-text-dim));
+  border-color: rgb(var(--color-text-dim));
  color: rgb(var(--color-bg-base));
-  font-family: var(--ff-body);
-  font-size: 15px;
-  letter-spacing: -0.01em;
-  text-transform: none;
-  font-weight: 500;
-  padding: 14px 22px;
 }
-[data-theme="editorial"] .btn:active { transform: translateY(1px); }
+[data-theme="editorial"] .btn:hover {
+  background: rgb(var(--color-text-mute));
+  border-color: rgb(var(--color-text-mute));
+  color: rgb(var(--color-bg-base));
+}
+.btn:active { transform: translateY(1px); }

 .btn-ghost {
-  background: transparent;
-  border: 1px solid rgb(var(--color-border));
-  color: rgb(var(--color-text-primary));
-}
-.btn-ghost:hover {
-  background: transparent;
-  border-color: rgb(var(--color-accent));
-  color: rgb(var(--color-accent));
-}
-[data-theme="editorial"] .btn-ghost {
  background: transparent;
  color: rgb(var(--color-text-primary));
  border: 1px solid rgb(var(--color-text-primary));
 }
-[data-theme="editorial"] .btn-ghost:hover {
-  background: rgb(var(--color-bg-surface));
+.btn-ghost:hover {
+  background: rgb(var(--color-bg-accent-soft));
  color: rgb(var(--color-text-primary));
  border-color: rgb(var(--color-text-primary));
 }
@ -695,15 +708,10 @@ body.drawer-open { overflow: hidden; }
  cursor: pointer;
 }
 .link-arrow:hover {
-  color: rgb(var(--color-accent));
-  border-color: rgb(var(--color-accent));
+  color: rgb(var(--color-text-primary));
+  border-color: rgb(var(--color-text-primary));
 }
 [data-theme="editorial"] .link-arrow {
-  font-family: var(--ff-body);
-  text-transform: none;
-  letter-spacing: -0.01em;
-  font-size: 15px;
-  font-weight: 500;
  border-bottom-color: rgb(var(--color-text-primary));
 }

@ -722,29 +730,22 @@ body.drawer-open { overflow: hidden; }
 .card {
  background: rgb(var(--color-bg-elevated));
  padding: clamp(24px, 3vw, 48px);
-  border-radius: var(--radius-card);
-  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-medium);
+  border: 1px solid rgb(var(--color-border));
+  border-radius: var(--radius);
+  transition: background-color var(--transition-fast), border-color var(--transition-fast);
 }
 .card:hover {
  background: rgb(var(--color-bg-accent-soft));
-}
-[data-theme="editorial"] .card {
-  background: rgb(var(--color-bg-elevated));
-  border: 1px solid rgb(var(--color-border));
-  box-shadow: 0 4px 20px rgb(0 0 0 / 0.04);
+  border-color: rgb(var(--color-text-mute));
 }
 [data-theme="editorial"] .card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 32px rgb(0 0 0 / 0.08);
  background: rgb(var(--color-bg-elevated));
+  border-color: rgb(var(--color-text-mute));
 }

+/* CHG-04: diagnostische Kante ausschließlich an der zugespitzten Karte (03) */
 .card-accent-border {
-  border-left: 4px solid rgb(var(--color-accent));
-}
-[data-theme="editorial"] .card-accent-border {
-  border-left: 0;
-  border-top: 4px solid rgb(var(--color-accent));
+  border-top: 2px solid rgb(var(--color-accent));
 }

 /* --- Quote block ----------------------------------------------------------- */
@ -753,6 +754,7 @@ body.drawer-open { overflow: hidden; }
  padding-block: var(--section-gap);
  text-align: center;
  background: rgb(var(--color-bg-base));
+  border-top: 1px solid rgb(var(--color-border));
 }
 [data-theme="editorial"] .quote-block {
  background: rgb(var(--color-bg-surface));
@ -772,8 +774,8 @@ body.drawer-open { overflow: hidden; }
  font-family: var(--ff-editorial);
  font-size: clamp(80px, 12vw, 160px);
  line-height: 0.7;
-  color: rgb(var(--color-accent));
-  opacity: 0.35;
+  color: rgb(var(--color-text-mute));
+  opacity: 0.4;
  margin-bottom: 12px;
  user-select: none;
 }
@ -811,30 +813,62 @@ body.drawer-open { overflow: hidden; }
 [data-theme="editorial"] .only-mono { display: none; }
 [data-theme="editorial"] .only-editorial { display: block; }

-/* Homepage: Monolithische Symptom-Liste (asymmetrisch) */
-.symptoms-mono { display: block; }
-.symptoms-editorial { display: none; }
-[data-theme="editorial"] .symptoms-mono { display: none; }
-[data-theme="editorial"] .symptoms-editorial { display: grid; }
-
-.symptoms-editorial {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: 24px;
-  margin-top: 48px;
-}
-@media (min-width: 720px) {
-  .symptoms-editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@media (min-width: 1080px) {
-  .symptoms-editorial { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-
-.sym-row {
+/* CHG-03: Invariant über beide Wirkungen ist der Inhalt — Reihenfolge 01 → 02 → 03,
+   gleiche Gewichtung (gleiche Kartenbreite), Magenta-Kante auf Karte 03.
+   Die Anordnung ist Ausdruck und variiert bewusst je Wirkung (R6, Dok. 010):
+   monolithisch = rasterbasierter Versatz, editorial = geordnete Reihe.
+   Gleiches DOM, nur Grid-Platzierung unterscheidet sich. */
+.symptoms {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
-  gap: 24px;
-  margin-bottom: clamp(48px, 8vw, 96px);
-  align-items: start;
+  column-gap: 24px;
+  row-gap: 24px;
+  margin-top: 48px;
+}
+.symptoms .card { grid-column: 1 / -1; }
+
+@media (min-width: 720px) {
+  /* Editorial: geordnete 3er-Reihe, gleiche Breite (je 4 Spalten) */
+  [data-theme="editorial"] .symptoms .card { grid-column: span 4; }
+
+  /* Monolithisch: gleiche Kartenbreite (je 8 Spalten), konsequenter Versatz-
+     Schritt von +2 Spalten, an der linken Baseline verankert — konstruiert,
+     nicht zufällig. Karten stapeln durch den Spalten-Konflikt automatisch. */
+  [data-theme="monolith"] .symptoms { row-gap: clamp(32px, 5vw, 64px); }
+  [data-theme="monolith"] .symptoms .card:nth-child(1) { grid-column: 1 / span 8; }
+  [data-theme="monolith"] .symptoms .card:nth-child(2) { grid-column: 3 / span 8; }
+  [data-theme="monolith"] .symptoms .card:nth-child(3) { grid-column: 5 / span 8; }
+}
+
+/* Manifest [02]: gleiche Logik wie Startseite [01] Diagnose, auf 4 Karten
+   übertragen. Invariant = Inhalt/Reihenfolge 01→04 + Magenta-Kante auf der
+   letzten Karte. Anordnung variiert je Wirkung (R6). */
+.manifest-cards {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  column-gap: 24px;
+  row-gap: 24px;
+}
+.manifest-cards .card { grid-column: 1 / -1; }
+
+@media (min-width: 720px) {
+  /* Editorial: geordnetes 2x2-Raster, gleiche Breite (je 6 Spalten) */
+  [data-theme="editorial"] .manifest-cards .card { grid-column: span 6; }
+
+  /* Monolithisch: rasterbasierte Treppe — gleicher Versatz-Schritt (+2 Spalten)
+     wie auf der Startseite, an der linken Baseline verankert, letzte Karte an
+     der rechten Kante. Schmaler (je 6 Spalten), damit alle 4 Stufen passen. */
+  [data-theme="monolith"] .manifest-cards { row-gap: clamp(32px, 5vw, 64px); }
+  [data-theme="monolith"] .manifest-cards .card:nth-child(1) { grid-column: 1 / span 6; }
+  [data-theme="monolith"] .manifest-cards .card:nth-child(2) { grid-column: 3 / span 6; }
+  [data-theme="monolith"] .manifest-cards .card:nth-child(3) { grid-column: 5 / span 6; }
+  [data-theme="monolith"] .manifest-cards .card:nth-child(4) { grid-column: 7 / span 6; }
+}
+
+.signal-quote {
+  margin: 0;
+  max-width: 36ch;
+  color: rgb(var(--color-text-primary));
 }

 /* DNA list (Methode) */
@ -846,84 +880,41 @@ body.drawer-open { overflow: hidden; }
  margin-bottom: 16px;
 }

-/* Blog: monolith = Langform-Liste, editorial = Karten-Raster */
+/* Blog: monolith = Langform-Liste, editorial = volle Breite als Karten.
+   Kein Bildmaterial → keine Featured-/Raster-Logik; editorial spiegelt den
+   monolithischen Zeilen-Aufbau, bleibt aber in Karten. */
 .blog-list-mono { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 96px); }
 .blog-list-editorial { display: none; }
 [data-theme="editorial"] .blog-list-mono { display: none; }
 [data-theme="editorial"] .blog-list-editorial {
-  display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+  display: flex;
+  flex-direction: column;
  gap: 24px;
 }
-@media (min-width: 900px) {
-  [data-theme="editorial"] .blog-list-editorial {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-}

 .post-card {
  padding: 32px;
  background: rgb(var(--color-bg-elevated));
  border: 1px solid rgb(var(--color-border));
-  border-radius: var(--radius-card);
-  transition: box-shadow var(--transition-medium), transform var(--transition-fast);
+  border-radius: var(--radius);
+  transition: border-color var(--transition-fast);
  cursor: pointer;
  display: flex;
  flex-direction: column;
 }
 .post-card:hover {
-  box-shadow: 0 12px 32px rgb(0 0 0 / 0.06);
-  transform: translateY(-2px);
+  border-color: rgb(var(--color-text-mute));
 }

-/* Featured-Post (editorial) */
-.post-featured {
-  grid-column: 1 / -1;
+/* Volle-Breite-Karte (editorial): gleicher Spalten-Aufbau wie .post-row */
+.post-card--row {
  display: grid;
-  grid-template-columns: 1fr;
-  gap: 0;
-  padding: 0;
-  overflow: hidden;
-}
-@media (min-width: 900px) {
-  .post-featured {
-    grid-template-columns: 1fr 1fr;
-    min-height: 360px;
-  }
-}
-.post-featured-visual {
-  background:
-    linear-gradient(135deg, #e9e6d8 0%, #d6d1c1 50%, #bfb9a8 100%);
-  min-height: 240px;
-  position: relative;
-  overflow: hidden;
-}
-.post-featured-visual::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(circle at 30% 30%, rgb(232 23 93 / 0.15) 0%, transparent 50%),
-    repeating-linear-gradient(45deg, transparent 0 24px, rgb(0 0 0 / 0.04) 24px 25px);
-}
-.post-featured-body {
-  padding: 32px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 16px;
-  border-left: 1px solid rgb(var(--color-border));
-}
-@media (max-width: 899px) {
-  .post-featured-body { border-left: 0; border-top: 1px solid rgb(var(--color-border)); }
-}
-
-.post-small {
-  grid-column: span 6;
-}
-@media (min-width: 900px) {
-  .post-small { grid-column: span 3; }
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 24px;
+  align-items: start;
+  padding: clamp(24px, 3vw, 48px);
 }
+.post-card--row:hover .post-row-title { color: rgb(var(--color-text-primary)); }

 /* Bloglisten-Unterscheidung: Monolith = sehr lesbare Zeile */
 .post-row {
@ -936,12 +927,76 @@ body.drawer-open { overflow: hidden; }
  cursor: pointer;
  transition: border-color var(--transition-fast);
 }
-.post-row:hover { border-color: rgb(var(--color-accent)); }
-.post-row:hover .post-row-title { color: rgb(var(--color-accent)); }
+.post-row:hover { border-color: rgb(var(--color-text-mute)); }
+.post-row:hover .post-row-title { color: rgb(var(--color-text-primary)); }
 .post-row-title {
  transition: color var(--transition-fast);
 }

+/* Ganze Beitrags-Kachel klickbar (Stretched-Link), barrierearm:
+   Linktext bleibt der Titel, ::after deckt die Karte/Zeile ab. */
+.post-row,
+.post-card--row { position: relative; }
+.post-title-link {
+  color: inherit;
+  text-decoration: none;
+}
+.post-title-link::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+/* --- Essay / Beitrags-Detail (Denken) ------------------------------------
+   Schrift-Regel: auf Denken ist der Essay-Body die denkende Stimme = Serife. */
+.article-head {
+  padding-top: clamp(40px, 8vw, 96px);
+  padding-bottom: clamp(32px, 6vw, 64px);
+}
+.article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+  align-items: center;
+}
+
+.prose { max-width: 680px; }
+/* Flow-Abstand zentral steuern: erst alle Margins resetten, dann Geschwister
+   trennen. Reihenfolge/Spezifität so, dass der Abstand zuverlässig greift. */
+.prose > * { margin: 0; }
+.prose > * + * { margin-top: 1.9em; }
+.prose p {
+  font-family: var(--ff-editorial);
+  font-size: clamp(18px, 1.3vw, 20px);
+  line-height: 1.8;
+  color: rgb(var(--color-text-body));
+}
+.prose .prose-lead {
+  font-size: clamp(20px, 1.7vw, 24px);
+  line-height: 1.6;
+  color: rgb(var(--color-text-primary));
+}
+.prose h2 {
+  font-family: var(--ff-display);
+  font-weight: var(--fw-display);
+  font-size: clamp(22px, 2.4vw, 30px);
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: rgb(var(--color-text-primary));
+  margin-top: 2.4em;
+}
+/* Pull-Quote = erhobene Aussage: Serife + 2px-Magenta-Signal-Linie. */
+.prose blockquote {
+  margin-top: 2.2em;
+  padding-left: clamp(20px, 2.5vw, 32px);
+  border-left: 2px solid rgb(var(--color-accent));
+  font-family: var(--ff-editorial);
+  font-size: clamp(22px, 2vw, 28px);
+  line-height: 1.4;
+  color: rgb(var(--color-text-primary));
+}
+.prose strong { font-weight: 600; color: rgb(var(--color-text-primary)); }
+
 /* Footer ------------------------------------------------------------------- */

 .site-footer {
@ -990,7 +1045,7 @@ body.drawer-open { overflow: hidden; }
  letter-spacing: -0.005em;
  font-size: 13px;
 }
-.footer-link:hover { color: rgb(var(--color-accent)); }
+.footer-link:hover { color: rgb(var(--color-text-primary)); }
 .footer-note { opacity: 0.8; }

 /* --- Utilities ------------------------------------------------------------- */
@ -1017,69 +1072,19 @@ body.drawer-open { overflow: hidden; }
 .max-prose { max-width: 680px; }
 .max-wide { max-width: 900px; }

+/* CHG-01: Label als reiner Mono-Signal-Text, keine gefüllte Fläche */
 .tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 12px;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.16em;
  text-transform: uppercase;
-  padding: 6px 12px;
-  border: 1px solid rgb(var(--color-border));
-  color: rgb(var(--color-text-dim));
-  border-radius: var(--radius-pill);
-}
-[data-theme="editorial"] .tag {
-  background: rgb(var(--color-accent) / 0.08);
+  font-weight: 500;
  color: rgb(var(--color-accent));
-  border-color: transparent;
-  font-family: var(--ff-mono);
-  letter-spacing: 0.05em;
-}
-
-/* Filter pills (Denken) */
-.filter-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  list-style: none;
-  padding: 0 0 16px;
-  margin: 0;
-  border-bottom: 1px solid rgb(var(--color-border));
-}
-[data-theme="editorial"] .filter-row {
-  gap: 8px;
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-.filter-btn {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
  padding: 0;
-  font-family: var(--ff-mono);
-  font-size: var(--fs-meta);
-  letter-spacing: var(--ls-meta);
-  text-transform: uppercase;
-  color: rgb(var(--color-text-dim));
-  font-weight: 500;
-  transition: color var(--transition-fast);
-}
-.filter-btn:hover { color: rgb(var(--color-text-primary)); }
-.filter-btn.is-active { color: rgb(var(--color-accent)); font-weight: 700; }
-[data-theme="editorial"] .filter-btn {
-  padding: 8px 16px;
-  border: 1px solid rgb(var(--color-border));
-  border-radius: var(--radius-pill);
-  text-transform: none;
-  letter-spacing: -0.005em;
-  font-family: var(--ff-body);
-  font-size: 13px;
-  font-weight: 500;
-}
-[data-theme="editorial"] .filter-btn.is-active {
-  background: rgb(var(--color-text-primary));
-  color: rgb(var(--color-bg-base));
-  border-color: rgb(var(--color-text-primary));
+  border: 0;
+  background: transparent;
+  border-radius: 0;
 }

 /* Editorial Split (Methode: Theorie → Praxis) */
@ -1097,29 +1102,11 @@ body.drawer-open { overflow: hidden; }
 }
 .split-visual {
  aspect-ratio: 4/3;
-  background:
-    radial-gradient(ellipse at 30% 30%, rgb(0 0 0 / 0.08) 0%, transparent 60%),
-    linear-gradient(135deg, #efece0 0%, #d9d3c1 60%, #c1baa6 100%);
-  border-radius: var(--radius-card);
+  background: rgb(var(--color-bg-surface));
+  border: 1px solid rgb(var(--color-border));
+  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgb(var(--color-border));
-}
-.split-visual::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: repeating-linear-gradient(135deg, transparent 0 32px, rgb(0 0 0 / 0.03) 32px 33px);
-}
-[data-theme="monolith"] .split-visual {
-  background:
-    radial-gradient(ellipse at 30% 30%, rgb(232 23 93 / 0.15) 0%, transparent 60%),
-    linear-gradient(135deg, #1c1b1b 0%, #0e0d0d 100%);
-  box-shadow: inset 3px 0 0 rgb(var(--color-accent) / 0.4);
-  border-radius: 0;
-}
-[data-theme="monolith"] .split-visual::after {
-  background: repeating-linear-gradient(135deg, transparent 0 32px, rgb(255 255 255 / 0.04) 32px 33px);
 }

 /* --- Scroll-Reveal -------------------------------------------------------- */
--- a/_markemacht.de/assets/fonts/newsreader/font.css
+++ b/_markemacht.de/assets/fonts/newsreader/font.css
@ -0,0 +1,112 @@
+/* newsreader-200 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/newsreader-v26-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-200italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: italic;
+  font-weight: 200;
+  src: url('../fonts/newsreader-v26-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/newsreader-v26-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-300italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/newsreader-v26-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/newsreader-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/newsreader-v26-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/newsreader-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-500italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: italic;
+  font-weight: 500;
+  src: url('../fonts/newsreader-v26-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/newsreader-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-600italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../fonts/newsreader-v26-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/newsreader-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: italic;
+  font-weight: 700;
+  src: url('../fonts/newsreader-v26-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-800 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 800;
+  src: url('../fonts/newsreader-v26-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-800italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Newsreader';
+  font-style: italic;
+  font-weight: 800;
+  src: url('../fonts/newsreader-v26-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-200.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-200.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-200italic.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-200italic.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-300.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-300.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-300italic.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-300italic.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-500.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-500.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-500italic.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-500italic.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-600.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-600.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-600italic.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-600italic.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-700.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-700.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-700italic.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-700italic.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-800.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-800.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-800italic.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-800italic.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-italic.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-italic.woff2
--- a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-regular.woff2
+++ b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-regular.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/font.css
+++ b/_markemacht.de/assets/fonts/noto-serif/font.css
@ -0,0 +1,144 @@
+/* noto-serif-100 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 100;
+  src: url('../fonts/noto-serif-v33-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-100italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 100;
+  src: url('../fonts/noto-serif-v33-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-200 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/noto-serif-v33-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-200italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 200;
+  src: url('../fonts/noto-serif-v33-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/noto-serif-v33-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-300italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/noto-serif-v33-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/noto-serif-v33-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/noto-serif-v33-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/noto-serif-v33-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-500italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 500;
+  src: url('../fonts/noto-serif-v33-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/noto-serif-v33-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-600italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../fonts/noto-serif-v33-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/noto-serif-v33-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 700;
+  src: url('../fonts/noto-serif-v33-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-800 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 800;
+  src: url('../fonts/noto-serif-v33-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-800italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 800;
+  src: url('../fonts/noto-serif-v33-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-900 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 900;
+  src: url('../fonts/noto-serif-v33-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-900italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 900;
+  src: url('../fonts/noto-serif-v33-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-100.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-100.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-100italic.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-100italic.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-200.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-200.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-200italic.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-200italic.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-300.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-300.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-300italic.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-300italic.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-500.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-500.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-500italic.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-500italic.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-600.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-600.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-600italic.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-600italic.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-700.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-700.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-700italic.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-700italic.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-800.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-800.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-800italic.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-800italic.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-900.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-900.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-900italic.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-900italic.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-italic.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-italic.woff2
--- a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-regular.woff2
+++ b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-regular.woff2
--- a/_markemacht.de/assets/fonts/outfit/font.css
+++ b/_markemacht.de/assets/fonts/outfit/font.css
@ -0,0 +1,72 @@
+/* outfit-100 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 100;
+  src: url('../fonts/outfit-v15-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-200 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/outfit-v15-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/outfit-v15-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/outfit-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/outfit-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/outfit-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/outfit-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-800 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 800;
+  src: url('../fonts/outfit-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-900 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 900;
+  src: url('../fonts/outfit-v15-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
--- a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-100.woff2
+++ b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-100.woff2
--- a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-200.woff2
+++ b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-200.woff2
--- a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-300.woff2
+++ b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-300.woff2
--- a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-500.woff2
+++ b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-500.woff2
--- a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-600.woff2
+++ b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-600.woff2
--- a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-700.woff2
+++ b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-700.woff2
--- a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-800.woff2
+++ b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-800.woff2
--- a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-900.woff2
+++ b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-900.woff2
--- a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-regular.woff2
+++ b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-regular.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/font.css
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/font.css
@ -0,0 +1,112 @@
+/* plus-jakarta-sans-200 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-200italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: italic;
+  font-weight: 200;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-300italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-500italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: italic;
+  font-weight: 500;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-600italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-800 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-800italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Plus Jakarta Sans';
+  font-style: italic;
+  font-weight: 800;
+  src: url('../fonts/plus-jakarta-sans-v12-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-200.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-200.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-200italic.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-200italic.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-300.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-300.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-300italic.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-300italic.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-500.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-500.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-500italic.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-500italic.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-600.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-600.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-600italic.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-600italic.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-700.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-700.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-700italic.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-700italic.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-800.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-800.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-800italic.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-800italic.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-italic.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-italic.woff2
--- a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-regular.woff2
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-regular.woff2
--- a/_markemacht.de/assets/fonts/space-grotesk/font.css
+++ b/_markemacht.de/assets/fonts/space-grotesk/font.css
@ -0,0 +1,40 @@
+/* space-grotesk-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/space-grotesk-v22-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* space-grotesk-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* space-grotesk-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/space-grotesk-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* space-grotesk-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/space-grotesk-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* space-grotesk-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
--- a/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-300.woff2
+++ b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-300.woff2
--- a/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-500.woff2
+++ b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-500.woff2
--- a/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-600.woff2
+++ b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-600.woff2
--- a/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-700.woff2
+++ b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-700.woff2
--- a/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-regular.woff2
+++ b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-regular.woff2
--- a/_markemacht.de/assets/fonts/work-sans/font.css
+++ b/_markemacht.de/assets/fonts/work-sans/font.css
@ -0,0 +1,144 @@
+/* work-sans-100 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 100;
+  src: url('../fonts/work-sans-v24-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-100italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: italic;
+  font-weight: 100;
+  src: url('../fonts/work-sans-v24-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-200 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/work-sans-v24-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-200italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: italic;
+  font-weight: 200;
+  src: url('../fonts/work-sans-v24-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/work-sans-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-300italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/work-sans-v24-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/work-sans-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/work-sans-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/work-sans-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-500italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: italic;
+  font-weight: 500;
+  src: url('../fonts/work-sans-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/work-sans-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-600italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../fonts/work-sans-v24-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/work-sans-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: url('../fonts/work-sans-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-800 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: url('../fonts/work-sans-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-800italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: italic;
+  font-weight: 800;
+  src: url('../fonts/work-sans-v24-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-900 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 900;
+  src: url('../fonts/work-sans-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-900italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Work Sans';
+  font-style: italic;
+  font-weight: 900;
+  src: url('../fonts/work-sans-v24-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-100.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-100.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-100italic.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-100italic.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-200.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-200.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-200italic.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-200italic.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-300.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-300.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-300italic.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-300italic.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-500.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-500.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-500italic.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-500italic.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-600.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-600.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-600italic.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-600italic.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-700.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-700.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-700italic.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-700italic.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-800.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-800.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-800italic.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-800italic.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-900.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-900.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-900italic.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-900italic.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-italic.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-italic.woff2
--- a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-regular.woff2
+++ b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-regular.woff2
--- a/_markemacht.de/assets/js/app.js
+++ b/_markemacht.de/assets/js/app.js
@ -1,5 +1,6 @@
 /* markemacht.de — Interaktionen
- * - Wirkung-Switch (monolithisch | editorial) + localStorage
+ * - Komponenten: Header/Footer
+ * - Wirkung-Switch (monolithisch | editorial) + Persistenz
 * - Mobile Drawer
 * - Scroll-Reveal (IntersectionObserver, max 400ms, ease-out)
 * - Keyboard: ESC schließt Drawer
@ -7,23 +8,84 @@
 (function () {
  'use strict';

+  /* ---------- Komponenten ------------------------------------------------ */
+
+  const COMPONENTS = [
+    ['[data-site-header]', './assets/components/header.html'],
+    ['[data-site-footer]', './assets/components/footer.html'],
+  ];
+
+  async function loadComponent(selector, url) {
+    const mount = document.querySelector(selector);
+    if (!mount) return;
+
+    try {
+      const res = await fetch(url, { cache: 'no-cache' });
+      if (!res.ok) throw new Error(`Component not found: ${url}`);
+      mount.innerHTML = await res.text();
+    } catch (err) {
+      console.error(err);
+      mount.setAttribute('data-component-error', 'true');
+    }
+  }
+
+  function initComponents() {
+    return Promise.all(COMPONENTS.map(([selector, url]) => loadComponent(selector, url)));
+  }
+
+  function getCurrentPage() {
+    const file = window.location.pathname.split('/').pop() || 'index.html';
+    if (file === 'index.html') return 'start';
+    if (file === 'manifest.html') return 'manifest';
+    if (file === 'methode.html') return 'methode';
+    if (file === 'denken.html' || file.startsWith('denken-')) return 'denken';
+    return '';
+  }
+
+  function initActiveNavigation() {
+    const current = getCurrentPage();
+    document.querySelectorAll('[data-nav-page]').forEach((link) => {
+      const isActive = link.getAttribute('data-nav-page') === current;
+      link.classList.toggle('is-active', isActive);
+      if (isActive) {
+        link.setAttribute('aria-current', 'page');
+      } else {
+        link.removeAttribute('aria-current');
+      }
+    });
+  }
+
  /* ---------- Wirkung ---------------------------------------------------- */

  const STORAGE_KEY = 'mm-wirkung';
  const VALID = ['monolith', 'editorial'];
  const DEFAULT = 'monolith';

+  function getCookie() {
+    const entry = document.cookie
+      .split('; ')
+      .find((row) => row.startsWith(`${STORAGE_KEY}=`));
+    if (!entry) return null;
+    const v = decodeURIComponent(entry.split('=').slice(1).join('='));
+    return VALID.includes(v) ? v : null;
+  }
+
+  function setCookie(mode) {
+    document.cookie = `${STORAGE_KEY}=${encodeURIComponent(mode)}; path=/; max-age=31536000; SameSite=Lax`;
+  }
+
  function getStored() {
    try {
      const v = localStorage.getItem(STORAGE_KEY);
-      return VALID.includes(v) ? v : null;
-    } catch (_) { return null; }
+      return VALID.includes(v) ? v : getCookie();
+    } catch (_) { return getCookie(); }
  }

  function applyMode(mode) {
    if (!VALID.includes(mode)) mode = DEFAULT;
    document.documentElement.setAttribute('data-theme', mode);
    try { localStorage.setItem(STORAGE_KEY, mode); } catch (_) {}
+    setCookie(mode);
    syncButtons(mode);
  }

@ -59,6 +121,7 @@
      drawer.classList.add('is-open');
      document.body.classList.add('drawer-open');
      drawer.setAttribute('aria-hidden', 'false');
+      openBtns.forEach((btn) => btn.setAttribute('aria-expanded', 'true'));
      const firstLink = drawer.querySelector('a, button');
      if (firstLink) firstLink.focus();
    }
@ -66,6 +129,7 @@
      drawer.classList.remove('is-open');
      document.body.classList.remove('drawer-open');
      drawer.setAttribute('aria-hidden', 'true');
+      openBtns.forEach((btn) => btn.setAttribute('aria-expanded', 'false'));
    }

    openBtns.forEach((b) => b.addEventListener('click', open));
@ -117,7 +181,9 @@

  /* ---------- Boot ------------------------------------------------------- */

-  function boot() {
+  async function boot() {
+    await initComponents();
+    initActiveNavigation();
    initWirkung();
    initDrawer();
    initReveal();
--- a/_markemacht.de/audit.html
+++ b/_markemacht.de/audit.html
@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="de" data-theme="monolith">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <title>Audit anfragen · MARKE MACHT</title>
+  <meta name="description" content="Das Marken-Klarheits-Audit prüft, wo Ihr Unternehmen sprachlich, strategisch und strukturell an Klarheit verliert." />
+
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="MARKE MACHT" />
+  <meta property="og:title" content="Audit anfragen · MARKE MACHT" />
+  <meta property="og:description" content="Eine strukturelle Diagnose für Unternehmen, deren Marke mehr leisten muss als Kommunikation." />
+  <meta property="og:url" content="https://markemacht.de/audit.html" />
+  <meta property="og:locale" content="de_DE" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="theme-color" content="#0A0A0A" media="(prefers-color-scheme: dark)" />
+  <meta name="theme-color" content="#FBFAF2" media="(prefers-color-scheme: light)" />
+
+  <link rel="icon" type="image/svg+xml" href="./assets/favicon.svg" />
+  <link rel="canonical" href="https://markemacht.de/audit.html" />
+
+  <script>
+    (function () {
+      var key = 'mm-wirkung';
+      var valid = ['monolith', 'editorial'];
+      var v = null;
+      try { v = localStorage.getItem(key); } catch (_) {}
+      if (valid.indexOf(v) === -1) {
+        try {
+          var match = document.cookie.match(new RegExp('(?:^|; )' + key + '=([^;]*)'));
+          v = match ? decodeURIComponent(match[1]) : null;
+        } catch (_) {}
+      }
+      if (valid.indexOf(v) === -1) v = 'monolith';
+      document.documentElement.setAttribute('data-theme', v);
+    })();
+  </script>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300..800&family=Plus+Jakarta+Sans:wght@400..700&family=Space+Grotesk:wght@400..600&family=Work+Sans:wght@300..600&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" />
+
+  <link rel="stylesheet" href="./assets/css/app.css" />
+</head>
+<body>
+  <div data-site-header></div>
+
+  <main id="main">
+    <header class="hero">
+      <div class="hero-keyvisual" aria-hidden="true">
+        <div class="monolith monolith--edge"></div>
+      </div>
+
+      <div class="shell grid-12 hero-grid">
+        <div class="col-12 md:col-7 stack-32" data-reveal>
+          <span class="meta">[00] Audit anfragen</span>
+          <h1 class="hero-headline" style="max-width: 14ch;">
+            Audit anfragen. Klarheit gewinnen.
+          </h1>
+          <p class="lead dim max-wide">
+            Für Unternehmen, die merken: mehr Kommunikation löst das Problem nicht. Das Marken-Klarheits-Audit prüft, wo Sprache, Struktur und Führung an Erklärbarkeit verlieren.
+          </p>
+          <div class="btn-row">
+            <a class="btn" href="mailto:info@markemacht.de?subject=Anfrage%20Marken-Klarheits-Audit">
+              Audit anfragen
+              <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+            </a>
+            <a class="btn btn-ghost" href="#ablauf">
+              Ablauf verstehen
+              <span class="material-symbols-outlined" aria-hidden="true">arrow_downward</span>
+            </a>
+          </div>
+        </div>
+        <aside class="col-12 md:col-5 card stack-24" style="padding: clamp(28px, 4vw, 48px);" data-reveal data-reveal-delay="120">
+          <span class="tag">Direkt anfragen</span>
+          <h2 class="sub-headline">Kurzer Erstkontakt. Klare Einordnung.</h2>
+          <p class="body-text">
+            Schreiben Sie in zwei bis fünf Sätzen, wo die Unklarheit sichtbar wird: Vertrieb, Website, Führung, Wachstum, Nachfolge oder Positionierung.
+          </p>
+          <p class="body-text">
+            Sie bekommen eine Einschätzung, ob ein Marken-Klarheits-Audit sinnvoll ist und welcher nächste Schritt trägt.
+          </p>
+          <div>
+            <a class="btn" href="mailto:info@markemacht.de?subject=Anfrage%20Marken-Klarheits-Audit">
+              Anfrage starten
+              <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+            </a>
+          </div>
+        </aside>
+      </div>
+    </header>
+
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[01] Worum es geht</span>
+        </div>
+        <div class="col-12 stack-32 max-wide" data-reveal>
+          <p class="editorial comment" style="color: rgb(var(--color-text-primary));">
+            Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären.
+          </p>
+          <p class="body-text max-prose">
+            Genau dort setzt das Audit an. Es untersucht nicht, ob eine Kampagne gefällt oder ob ein Logo modern wirkt. Es prüft, ob Ihr Unternehmen ein belastbares Regelwerk besitzt: klare Begriffe, nachvollziehbare Positionierung, konsistente Argumente und Grenzen, an denen Entscheidungen ausgerichtet werden können.
+          </p>
+          <p class="body-text max-prose">
+            Dafür trennt es Substanz von Wirkung — und macht sichtbar, wo Bedeutung an einzelnen Personen hängt statt an dokumentierter Logik.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" style="background: rgb(var(--color-bg-surface));">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[02] Typische Auslöser</span>
+          <h2 class="section-headline" style="max-width: 18ch;">Wenn Klarheit operativ teuer wird.</h2>
+        </div>
+        <div class="col-12">
+          <div class="symptoms">
+            <article class="card" data-reveal>
+              <span class="tag">Signal 01</span>
+              <h3 class="sub-headline" style="margin-top: 16px; margin-bottom: 12px;">Jeder erklärt anders.</h3>
+              <p class="body-text">
+                Vertrieb, Führung und Marketing nutzen unterschiedliche Argumente. Der Markt bekommt kein eindeutiges Bild, intern entstehen Reibungsverluste.
+              </p>
+            </article>
+            <article class="card" data-reveal data-reveal-delay="80">
+              <span class="tag">Signal 02</span>
+              <h3 class="sub-headline" style="margin-top: 16px; margin-bottom: 12px;">Kommunikation hängt an Personen.</h3>
+              <p class="body-text">
+                Wert, Tonalität und Positionierung stecken in Köpfen, aber nicht in einem anwendbaren System. Neue Mitarbeiter und externe Partner müssen raten.
+              </p>
+            </article>
+            <article class="card card-accent-border" data-reveal data-reveal-delay="160">
+              <span class="tag">Signal 03</span>
+              <h3 class="sub-headline" style="margin-top: 16px; margin-bottom: 12px;">Mehr Output löst weniger.</h3>
+              <p class="body-text">
+                Content, Kampagnen und Designkorrekturen werden lauter, aber nicht klarer. Das eigentliche Fundament bleibt ungeprüft.
+              </p>
+            </article>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-border-top" id="ablauf">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[03]</span>
+          <h2 class="section-headline" style="max-width: 18ch;">Drei Fragen. Keine Kosmetik.</h2>
+        </div>
+        <div class="col-12 stack-16">
+          <article class="card dna-item stack-16" data-reveal>
+            <span class="meta accent">[01] Material sichten</span>
+            <h3 class="sub-headline">Was kommuniziert das Unternehmen heute?</h3>
+            <p class="body-text max-prose">
+              Website, Sales-Unterlagen, Claims, Angebotslogik und zentrale Aussagen werden auf Wiederholbarkeit, Präzision und Widersprüche geprüft.
+            </p>
+          </article>
+          <article class="card dna-item stack-16" data-reveal data-reveal-delay="80">
+            <span class="meta accent">[02] Struktur freilegen</span>
+            <h3 class="sub-headline">Welche Logik trägt die Marke wirklich?</h3>
+            <p class="body-text max-prose">
+              Wir trennen Substanz von Dekoration: Identitätskern, Positionierungslogik, Sprachregeln, Themenrahmen und Grenzregeln.
+            </p>
+          </article>
+          <article class="card dna-item stack-16" data-reveal data-reveal-delay="160">
+            <span class="meta accent">[03] Diagnose formulieren</span>
+            <h3 class="sub-headline">Wo muss zuerst geklärt werden?</h3>
+            <p class="body-text max-prose">
+              Die Brüche werden priorisiert: welche akut sind, welche Grundlagen fehlen und welcher Schritt strategisch zuerst trägt.
+            </p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 md:col-8 stack-32" data-reveal>
+          <span class="meta">[04] Das Ergebnis</span>
+          <h2 class="section-headline" style="max-width: 16ch;">Was am Ende steht.</h2>
+          <p class="lead dim max-prose">
+            Am Ende steht kein Foliensatz, sondern eine erste dokumentierte Marken-DNA: Identitätskern, Positionierungslogik, Sprachregeln, Themenrahmen und Grenzregeln — versioniert und an realen Texten geprüft. Dazu eine priorisierte Handlungsempfehlung: was jetzt zählt, was warten kann.
+          </p>
+          <p class="body-text max-prose">
+            Format: 7–10 Tage, ein strukturierter Termin (90 Minuten), Vor- und Nachbereitung asynchron. Keine Workshops, keine Endlosschleifen.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 md:col-8 card stack-32" style="padding: clamp(40px, 6vw, 96px);" data-reveal>
+          <span class="meta">[05] Anfrage</span>
+          <h2 class="section-headline" style="max-width: 16ch;">Passt das Audit zu Ihrer Situation?</h2>
+          <p class="lead dim max-prose">
+            Schreiben Sie kurz, wo die Unklarheit gerade sichtbar wird: Vertrieb, Website, Führung, Wachstum, Nachfolge oder Positionierung. Eine knappe Einordnung reicht für den ersten Kontakt.
+          </p>
+          <div class="btn-row">
+            <a class="btn" href="mailto:info@markemacht.de?subject=Anfrage%20Marken-Klarheits-Audit">
+              Anfrage senden
+              <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+            </a>
+            <a class="btn btn-ghost" href="./methode.html">
+              Methode ansehen
+              <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <div data-site-footer></div>
+
+  <script src="./assets/js/app.js" defer></script>
+</body>
+</html>
--- a/_markemacht.de/denken-agilitaet.html
+++ b/_markemacht.de/denken-agilitaet.html
@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="de" data-theme="monolith">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <title>Der Mythos der Agilität in starren Märkten · MARKE MACHT</title>
+  <meta name="description" content="Warum die blinde Übernahme von Start-up-Methoden in mittelständischen Industrieunternehmen zu strukturellem Chaos statt zu Innovation führt." />
+
+  <meta property="og:type" content="article" />
+  <meta property="og:site_name" content="MARKE MACHT" />
+  <meta property="og:title" content="Der Mythos der Agilität in starren Märkten" />
+  <meta property="og:description" content="Ein Plädoyer für prozessuale Stabilität als Fundament echten Fortschritts." />
+  <meta property="og:url" content="https://markemacht.de/denken-agilitaet.html" />
+  <meta property="og:locale" content="de_DE" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="theme-color" content="#0A0A0A" media="(prefers-color-scheme: dark)" />
+  <meta name="theme-color" content="#FBFAF2" media="(prefers-color-scheme: light)" />
+
+  <link rel="icon" type="image/svg+xml" href="./assets/favicon.svg" />
+  <link rel="canonical" href="https://markemacht.de/denken-agilitaet.html" />
+
+  <script>
+    (function () {
+      var key = 'mm-wirkung';
+      var valid = ['monolith', 'editorial'];
+      var v = null;
+      try { v = localStorage.getItem(key); } catch (_) {}
+      if (valid.indexOf(v) === -1) {
+        try {
+          var match = document.cookie.match(new RegExp('(?:^|; )' + key + '=([^;]*)'));
+          v = match ? decodeURIComponent(match[1]) : null;
+        } catch (_) {}
+      }
+      if (valid.indexOf(v) === -1) v = 'monolith';
+      document.documentElement.setAttribute('data-theme', v);
+    })();
+  </script>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300..800&family=Plus+Jakarta+Sans:wght@400..700&family=Space+Grotesk:wght@400..600&family=Work+Sans:wght@300..600&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" />
+
+  <link rel="stylesheet" href="./assets/css/app.css" />
+</head>
+<body>
+
+  <div data-site-header></div>
+
+  <main id="main">
+    <!-- Artikelkopf -->
+    <header class="article-head">
+      <div class="shell grid-12">
+        <div class="col-12 stack-24" data-reveal>
+          <a class="link-arrow" href="./denken.html">
+            <span class="material-symbols-outlined" aria-hidden="true">arrow_back</span>
+            Zurück zu Denken
+          </a>
+          <div class="article-meta">
+            <span class="meta accent">System</span>
+            <span class="meta mute">01.03.2024</span>
+            <span class="meta mute">6 Min. Lesezeit</span>
+          </div>
+          <h1 class="hero-headline" style="max-width: 20ch; font-size: clamp(38px, 5.6vw, 68px);">
+            Der Mythos der Agilität in starren Märkten.
+          </h1>
+          <p class="lead dim max-wide">
+            Warum die blinde Übernahme von Start-up-Methoden in mittelständischen Industrieunternehmen oft zu strukturellem Chaos statt zu Innovation führt. Ein Plädoyer für prozessuale Stabilität als Fundament echten Fortschritts.
+          </p>
+        </div>
+      </div>
+    </header>
+
+    <!-- Essay-Body -->
+    <article class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12" data-reveal>
+          <div class="prose">
+            <p class="prose-lead">
+              „Agil" ist vom Werkzeug zum Glaubensbekenntnis geworden. Wo früher Prozesse standen, steht heute ein Versprechen: Wer schnell genug iteriert, gewinnt. Doch Geschwindigkeit ist keine Strategie — sie ist eine Eigenschaft. Und in Märkten mit langen Zyklen, hohen Investitionen und realer Haftung wird sie schnell zur Belastung.
+            </p>
+            <p>
+              Mittelständische Industrieunternehmen übernehmen Methoden, die für Software-Start-ups entworfen wurden: für Umgebungen, in denen ein Fehler ein Rollback ist und kein Produktrückruf. Was im digitalen Kontext als Lernschleife funktioniert, erzeugt in der physischen Welt Reibung, Nacharbeit und ein diffuses Gefühl permanenter Unfertigkeit.
+            </p>
+            <p>
+              Das eigentliche Problem ist selten die Methode. Es ist die Verwechslung von Aktivität mit Fortschritt. Ständige Umpriorisierung fühlt sich produktiv an, untergräbt aber genau das, was tragfähige Marken auszeichnet: Verlässlichkeit. Wenn jede Entscheidung morgen wieder verhandelbar ist, entsteht kein Fundament, sondern Sand.
+            </p>
+
+            <blockquote>
+              Geschwindigkeit ohne Richtung ist nur teure Bewegung.
+            </blockquote>
+
+            <h2>Stabilität ist kein Stillstand.</h2>
+            <p>
+              Die Gegenthese lautet nicht Trägheit. Sie lautet <strong>prozessuale Stabilität</strong>: ein klares Set unverhandelbarer Prinzipien, innerhalb derer schnell und konsequent gehandelt wird. Nicht alles steht zur Disposition. Genau diese Begrenzung erzeugt Tempo — weil sie das ständige Neuverhandeln der Grundlagen beendet.
+            </p>
+            <p>
+              Eine Marke, die als Regelwerk verstanden wird, liefert dieses Set. Sie definiert, was konstant bleibt, damit das Operative beweglich sein darf. Agilität wird so vom Selbstzweck zum Mittel: ein Werkzeug im Dienst einer Richtung, nicht ihr Ersatz.
+            </p>
+            <p>
+              Wer in starren Märkten gewinnen will, optimiert nicht die Iterationsgeschwindigkeit. Er klärt zuerst, was nie wieder zur Debatte steht — und wird dann genau dort schnell, wo Schnelligkeit tatsächlich zählt.
+            </p>
+          </div>
+        </div>
+      </div>
+    </article>
+
+    <!-- Weiterlesen -->
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[Weiterlesen]</span>
+        </div>
+        <div class="col-12" data-reveal>
+          <div>
+            <article class="post-row">
+              <div class="col-12 md:col-3 stack-8">
+                <span class="meta">Diagnose</span>
+                <span class="meta mute">15.02.2024</span>
+              </div>
+              <div class="col-12 md:col-9 stack-16">
+                <h2 class="section-headline post-row-title" style="font-size: clamp(24px, 3vw, 36px);">
+                  <a class="post-title-link" href="./denken-architektursanierung.html">Symptombekämpfung vs. Architektursanierung.</a>
+                </h2>
+                <p class="body-text max-prose">
+                  Marketingkampagnen lösen keine Identitätskrisen. Eine Analyse, wie Unternehmen Ressourcen verbrennen.
+                </p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Audit CTA -->
+    <section class="section section-border-top" id="audit">
+      <div class="shell grid-12">
+        <div class="col-12 card stack-32" style="padding: clamp(40px, 6vw, 96px);" data-reveal>
+          <h2 class="section-headline" style="max-width: 18ch;">Klarheit statt Aktionismus.</h2>
+          <p class="lead dim max-prose">
+            Das Marken-Klarheits-Audit. Eine schonungslose Diagnose Ihres aktuellen Status Quo — bevor aus Bewegung Stillstand wird.
+          </p>
+          <div>
+            <a class="btn" href="./audit.html">
+              Audit anfragen
+              <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <div data-site-footer></div>
+
+  <script src="./assets/js/app.js" defer></script>
+</body>
+</html>
--- a/_markemacht.de/denken-architektursanierung.html
+++ b/_markemacht.de/denken-architektursanierung.html
@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="de" data-theme="monolith">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <title>Symptombekämpfung vs. Architektursanierung · MARKE MACHT</title>
+  <meta name="description" content="Marketingkampagnen lösen keine Identitätskrisen. Wie Unternehmen Ressourcen verbrennen, weil sie kosmetische Korrekturen statt struktureller Eingriffe vornehmen." />
+
+  <meta property="og:type" content="article" />
+  <meta property="og:site_name" content="MARKE MACHT" />
+  <meta property="og:title" content="Symptombekämpfung vs. Architektursanierung" />
+  <meta property="og:description" content="Warum kosmetische Korrekturen teurer sind als der strukturelle Eingriff." />
+  <meta property="og:url" content="https://markemacht.de/denken-architektursanierung.html" />
+  <meta property="og:locale" content="de_DE" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="theme-color" content="#0A0A0A" media="(prefers-color-scheme: dark)" />
+  <meta name="theme-color" content="#FBFAF2" media="(prefers-color-scheme: light)" />
+
+  <link rel="icon" type="image/svg+xml" href="./assets/favicon.svg" />
+  <link rel="canonical" href="https://markemacht.de/denken-architektursanierung.html" />
+
+  <script>
+    (function () {
+      var key = 'mm-wirkung';
+      var valid = ['monolith', 'editorial'];
+      var v = null;
+      try { v = localStorage.getItem(key); } catch (_) {}
+      if (valid.indexOf(v) === -1) {
+        try {
+          var match = document.cookie.match(new RegExp('(?:^|; )' + key + '=([^;]*)'));
+          v = match ? decodeURIComponent(match[1]) : null;
+        } catch (_) {}
+      }
+      if (valid.indexOf(v) === -1) v = 'monolith';
+      document.documentElement.setAttribute('data-theme', v);
+    })();
+  </script>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300..800&family=Plus+Jakarta+Sans:wght@400..700&family=Space+Grotesk:wght@400..600&family=Work+Sans:wght@300..600&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" />
+
+  <link rel="stylesheet" href="./assets/css/app.css" />
+</head>
+<body>
+
+  <div data-site-header></div>
+
+  <main id="main">
+    <!-- Artikelkopf -->
+    <header class="article-head">
+      <div class="shell grid-12">
+        <div class="col-12 stack-24" data-reveal>
+          <a class="link-arrow" href="./denken.html">
+            <span class="material-symbols-outlined" aria-hidden="true">arrow_back</span>
+            Zurück zu Denken
+          </a>
+          <div class="article-meta">
+            <span class="meta accent">Diagnose</span>
+            <span class="meta mute">15.02.2024</span>
+            <span class="meta mute">8 Min. Lesezeit</span>
+          </div>
+          <h1 class="hero-headline" style="max-width: 20ch; font-size: clamp(38px, 5.6vw, 68px);">
+            Symptombekämpfung vs. Architektursanierung.
+          </h1>
+          <p class="lead dim max-wide">
+            Marketingkampagnen lösen keine Identitätskrisen. Eine Analyse, wie Unternehmen Ressourcen verbrennen, weil sie kosmetische Korrekturen anstelle notwendiger struktureller Eingriffe vornehmen.
+          </p>
+        </div>
+      </div>
+    </header>
+
+    <!-- Essay-Body -->
+    <article class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12" data-reveal>
+          <div class="prose">
+            <p class="prose-lead">
+              Wenn die Zahlen kippen, greifen die meisten Unternehmen zum nächstbesten Werkzeug: eine Kampagne, ein Rebrand, ein neuer Claim. Es ist die betriebswirtschaftliche Variante des Schmerzmittels — schnelle Linderung, keine Heilung. Das Symptom verschwindet kurz, die Ursache bleibt.
+            </p>
+            <p>
+              Eine Identitätskrise ist kein Sichtbarkeitsproblem. Sie ist ein Strukturproblem. Mehr Reichweite verstärkt nur, was ohnehin unklar ist. Wer eine diffuse Botschaft lauter sendet, bekommt nicht mehr Klarheit — er bekommt mehr Verwirrung, schneller.
+            </p>
+            <p>
+              Der Reflex zur kosmetischen Korrektur ist verständlich: Er ist sichtbar, schnell und politisch bequem. Strukturelle Eingriffe dagegen sind unbequem. Sie stellen Annahmen infrage, berühren Zuständigkeiten und liefern erst spät sichtbare Ergebnisse. Genau deshalb werden sie aufgeschoben — bis die Kosten des Aufschubs die Kosten des Eingriffs übersteigen.
+            </p>
+
+            <blockquote>
+              Man kann ein Fundament nicht streichen, bis es trägt.
+            </blockquote>
+
+            <h2>Diagnose vor Therapie.</h2>
+            <p>
+              Architektursanierung beginnt nicht mit der Lösung, sondern mit der <strong>ehrlichen Diagnose</strong>: Wo bricht die Logik? An welcher Stelle widersprechen sich Anspruch und Verhalten? Welche Entscheidungen werden immer wieder neu getroffen, weil das Regelwerk fehlt?
+            </p>
+            <p>
+              Erst wenn diese Fragen beantwortet sind, ist Kommunikation überhaupt sinnvoll. Eine saubere Struktur macht Kampagnen nicht überflüssig — sie macht sie effizient. Jeder eingesetzte Euro wirkt, weil er auf ein klares Fundament trifft statt auf einen Widerspruch.
+            </p>
+            <p>
+              Der teuerste Fehler ist nicht der strukturelle Eingriff. Es ist die Wiederholung der kosmetischen Korrektur, Quartal für Quartal, bis niemand mehr weiß, wofür die Marke eigentlich stand.
+            </p>
+          </div>
+        </div>
+      </div>
+    </article>
+
+    <!-- Weiterlesen -->
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[Weiterlesen]</span>
+        </div>
+        <div class="col-12" data-reveal>
+          <div>
+            <article class="post-row">
+              <div class="col-12 md:col-3 stack-8">
+                <span class="meta">Einordnung</span>
+                <span class="meta mute">28.01.2024</span>
+              </div>
+              <div class="col-12 md:col-9 stack-16">
+                <h2 class="section-headline post-row-title" style="font-size: clamp(24px, 3vw, 36px);">
+                  <a class="post-title-link" href="./denken-fuehrung-durch-reduktion.html">Führung durch Reduktion.</a>
+                </h2>
+                <p class="body-text max-prose">
+                  Wie der Verzicht auf neue Initiativen strategische Schlagkraft erzeugt.
+                </p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Audit CTA -->
+    <section class="section section-border-top" id="audit">
+      <div class="shell grid-12">
+        <div class="col-12 card stack-32" style="padding: clamp(40px, 6vw, 96px);" data-reveal>
+          <h2 class="section-headline" style="max-width: 18ch;">Risse im Fundament finden.</h2>
+          <p class="lead dim max-prose">
+            Das Marken-Klarheits-Audit. Eine schonungslose Diagnose Ihres aktuellen Status Quo — strukturell, nicht kosmetisch.
+          </p>
+          <div>
+            <a class="btn" href="./audit.html">
+              Audit anfragen
+              <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <div data-site-footer></div>
+
+  <script src="./assets/js/app.js" defer></script>
+</body>
+</html>
--- a/_markemacht.de/denken-fuehrung-durch-reduktion.html
+++ b/_markemacht.de/denken-fuehrung-durch-reduktion.html
@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="de" data-theme="monolith">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <title>Führung durch Reduktion · MARKE MACHT</title>
+  <meta name="description" content="Die größte Herausforderung moderner Unternehmensführung ist nicht das Hinzufügen, sondern das konsequente Eliminieren von Ablenkungen." />
+
+  <meta property="og:type" content="article" />
+  <meta property="og:site_name" content="MARKE MACHT" />
+  <meta property="og:title" content="Führung durch Reduktion" />
+  <meta property="og:description" content="Wie der Verzicht strategische Schlagkraft erzeugt." />
+  <meta property="og:url" content="https://markemacht.de/denken-fuehrung-durch-reduktion.html" />
+  <meta property="og:locale" content="de_DE" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="theme-color" content="#0A0A0A" media="(prefers-color-scheme: dark)" />
+  <meta name="theme-color" content="#FBFAF2" media="(prefers-color-scheme: light)" />
+
+  <link rel="icon" type="image/svg+xml" href="./assets/favicon.svg" />
+  <link rel="canonical" href="https://markemacht.de/denken-fuehrung-durch-reduktion.html" />
+
+  <script>
+    (function () {
+      var key = 'mm-wirkung';
+      var valid = ['monolith', 'editorial'];
+      var v = null;
+      try { v = localStorage.getItem(key); } catch (_) {}
+      if (valid.indexOf(v) === -1) {
+        try {
+          var match = document.cookie.match(new RegExp('(?:^|; )' + key + '=([^;]*)'));
+          v = match ? decodeURIComponent(match[1]) : null;
+        } catch (_) {}
+      }
+      if (valid.indexOf(v) === -1) v = 'monolith';
+      document.documentElement.setAttribute('data-theme', v);
+    })();
+  </script>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300..800&family=Plus+Jakarta+Sans:wght@400..700&family=Space+Grotesk:wght@400..600&family=Work+Sans:wght@300..600&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" />
+
+  <link rel="stylesheet" href="./assets/css/app.css" />
+</head>
+<body>
+
+  <div data-site-header></div>
+
+  <main id="main">
+    <!-- Artikelkopf -->
+    <header class="article-head">
+      <div class="shell grid-12">
+        <div class="col-12 stack-24" data-reveal>
+          <a class="link-arrow" href="./denken.html">
+            <span class="material-symbols-outlined" aria-hidden="true">arrow_back</span>
+            Zurück zu Denken
+          </a>
+          <div class="article-meta">
+            <span class="meta accent">Einordnung</span>
+            <span class="meta mute">28.01.2024</span>
+            <span class="meta mute">5 Min. Lesezeit</span>
+          </div>
+          <h1 class="hero-headline" style="max-width: 20ch; font-size: clamp(38px, 5.6vw, 68px);">
+            Führung durch Reduktion.
+          </h1>
+          <p class="lead dim max-wide">
+            Die größte Herausforderung moderner Unternehmensführung ist nicht das Hinzufügen neuer Initiativen, sondern das konsequente Eliminieren von Ablenkungen. Wie der Verzicht strategische Schlagkraft erzeugt.
+          </p>
+        </div>
+      </div>
+    </header>
+
+    <!-- Essay-Body -->
+    <article class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12" data-reveal>
+          <div class="prose">
+            <p class="prose-lead">
+              Führung wird meist als Akt des Hinzufügens missverstanden: neue Ziele, neue Projekte, neue Programme. Doch jede Initiative kostet Aufmerksamkeit — die einzige wirklich knappe Ressource einer Organisation. Wer ständig addiert, führt nicht. Er verwaltet Überforderung.
+            </p>
+            <p>
+              Reduktion ist die anspruchsvollere Disziplin, weil sie Position verlangt. Etwas wegzulassen heißt, sich festzulegen, was nicht zählt. Das ist unbequem, angreifbar und genau deshalb wirksam. Eine Entscheidung erkennt man nicht daran, was sie ermöglicht, sondern daran, was sie ausschließt.
+            </p>
+            <p>
+              Organisationen ohne klare Grenzen verausgaben sich in der Breite. Jede Abteilung optimiert ihr Teiloptimum, niemand trägt das Ganze. Fokus entsteht nicht durch Motivation, sondern durch Struktur: durch ein Regelwerk, das viele Möglichkeiten bewusst verschließt, damit wenige konsequent verfolgt werden.
+            </p>
+
+            <blockquote>
+              Strategie ist die Kunst, das Richtige nicht zu tun.
+            </blockquote>
+
+            <h2>Der Verzicht als Hebel.</h2>
+            <p>
+              Eine tragfähige Marke ist hier das schärfste Führungsinstrument. Sie definiert den <strong>Themenrahmen</strong> und die <strong>Grenzregeln</strong> — also genau das, worüber geschwiegen wird und was die Marke zerstört. Damit wird Verzicht von einer Gefühlsfrage zu einer Regel, die jeder anwenden kann.
+            </p>
+            <p>
+              Das Ergebnis ist nicht weniger Aktivität, sondern weniger Streuung. Energie, die vorher in zwanzig Halbprojekten versickerte, konzentriert sich auf wenige, die tatsächlich Wirkung entfalten. Reduktion erzeugt so paradoxerweise mehr Schlagkraft als jede zusätzliche Initiative.
+            </p>
+            <p>
+              Führung durch Reduktion bedeutet, das Nein zur Standardantwort zu machen — damit das Ja Gewicht behält.
+            </p>
+          </div>
+        </div>
+      </div>
+    </article>
+
+    <!-- Weiterlesen -->
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[Weiterlesen]</span>
+        </div>
+        <div class="col-12" data-reveal>
+          <div>
+            <article class="post-row">
+              <div class="col-12 md:col-3 stack-8">
+                <span class="meta">System</span>
+                <span class="meta mute">01.03.2024</span>
+              </div>
+              <div class="col-12 md:col-9 stack-16">
+                <h2 class="section-headline post-row-title" style="font-size: clamp(24px, 3vw, 36px);">
+                  <a class="post-title-link" href="./denken-agilitaet.html">Der Mythos der Agilität in starren Märkten.</a>
+                </h2>
+                <p class="body-text max-prose">
+                  Warum die blinde Übernahme von Start-up-Methoden zu strukturellem Chaos führt.
+                </p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Audit CTA -->
+    <section class="section section-border-top" id="audit">
+      <div class="shell grid-12">
+        <div class="col-12 card stack-32" style="padding: clamp(40px, 6vw, 96px);" data-reveal>
+          <h2 class="section-headline" style="max-width: 18ch;">Fokus ist eine Entscheidung.</h2>
+          <p class="lead dim max-prose">
+            Das Marken-Klarheits-Audit. Eine schonungslose Diagnose Ihres aktuellen Status Quo — damit klar wird, was zählt und was nicht.
+          </p>
+          <div>
+            <a class="btn" href="./audit.html">
+              Audit anfragen
+              <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <div data-site-footer></div>
+
+  <script src="./assets/js/app.js" defer></script>
+</body>
+</html>
--- a/_markemacht.de/denken.html
+++ b/_markemacht.de/denken.html
@ -21,11 +21,18 @@

  <script>
    (function () {
-      try {
-        var v = localStorage.getItem('mm-wirkung');
-        if (v !== 'monolith' && v !== 'editorial') v = 'monolith';
-        document.documentElement.setAttribute('data-theme', v);
-      } catch (_) {}
+      var key = 'mm-wirkung';
+      var valid = ['monolith', 'editorial'];
+      var v = null;
+      try { v = localStorage.getItem(key); } catch (_) {}
+      if (valid.indexOf(v) === -1) {
+        try {
+          var match = document.cookie.match(new RegExp('(?:^|; )' + key + '=([^;]*)'));
+          v = match ? decodeURIComponent(match[1]) : null;
+        } catch (_) {}
+      }
+      if (valid.indexOf(v) === -1) v = 'monolith';
+      document.documentElement.setAttribute('data-theme', v);
    })();
  </script>

@ -38,58 +45,7 @@
 </head>
 <body>

-  <nav class="nav" aria-label="Hauptnavigation">
-    <div class="nav-inner">
-      <a class="nav-brand" href="./index.html">MARKE MACHT</a>
-
-      <div class="nav-links">
-        <a class="nav-link" href="./index.html">Start</a>
-        <a class="nav-link" href="./manifest.html">Manifest</a>
-        <a class="nav-link" href="./methode.html">Methode</a>
-        <a class="nav-link is-active" href="./denken.html">Denken</a>
-      </div>
-
-      <div class="wirkung-switch" role="group" aria-label="Wirkung wechseln">
-        <span class="wirkung-label">Wirkung:</span>
-        <button type="button" class="wirkung-option" data-wirkung="monolith" aria-pressed="true">monolithisch</button>
-        <span class="wirkung-sep" aria-hidden="true">·</span>
-        <button type="button" class="wirkung-option" data-wirkung="editorial" aria-pressed="false">editorial</button>
-      </div>
-
-      <a class="nav-cta" href="./methode.html#audit">Audit anfragen</a>
-
-      <button class="menu-btn" data-drawer-open aria-label="Menü öffnen" aria-controls="mobile-drawer" aria-expanded="false">
-        <span class="material-symbols-outlined" aria-hidden="true">menu</span>
-      </button>
-    </div>
-  </nav>
-
-  <aside id="mobile-drawer" class="mobile-drawer" data-mobile-drawer aria-hidden="true" aria-label="Mobile Navigation">
-    <div class="mobile-drawer-head">
-      <span class="nav-brand">MARKE MACHT</span>
-      <button class="menu-btn" data-drawer-close aria-label="Menü schließen">
-        <span class="material-symbols-outlined" aria-hidden="true">close</span>
-      </button>
-    </div>
-    <nav class="mobile-drawer-links" aria-label="Mobile Hauptnavigation">
-      <a class="mobile-drawer-link" href="./index.html">Start</a>
-      <a class="mobile-drawer-link" href="./manifest.html">Manifest</a>
-      <a class="mobile-drawer-link" href="./methode.html">Methode</a>
-      <a class="mobile-drawer-link is-active" href="./denken.html">Denken</a>
-    </nav>
-    <div class="mobile-drawer-footer">
-      <div class="wirkung-switch" role="group" aria-label="Wirkung wechseln">
-        <span class="wirkung-label">Wirkung:</span>
-        <button type="button" class="wirkung-option" data-wirkung="monolith">monolithisch</button>
-        <span class="wirkung-sep" aria-hidden="true">·</span>
-        <button type="button" class="wirkung-option" data-wirkung="editorial">editorial</button>
-      </div>
-      <a class="link-arrow" href="./methode.html#audit">
-        Audit anfragen
-        <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
-      </a>
-    </div>
-  </aside>
+  <div data-site-header></div>

  <main id="main">
    <!-- Hero -->
@ -102,22 +58,44 @@
        <div class="col-12 stack-24" data-reveal>
          <span class="meta">[01] Denken</span>
          <h1 class="hero-headline">Denken.</h1>
-          <p class="editorial dim max-wide">
+          <p class="lead dim max-wide">
            Ein Denkraum für Klarheit in komplexen Strukturen. Wir sezieren Architektur, Identität und Führung, um das Wesentliche freizulegen. Kein Rauschen. Nur Substanz.
          </p>
        </div>
      </div>
    </header>

-    <!-- Filter -->
-    <section class="section-tight">
-      <div class="shell" data-reveal>
-        <ul class="filter-row">
-          <li><button class="filter-btn is-active">Alle</button></li>
-          <li><button class="filter-btn">Diagnose</button></li>
-          <li><button class="filter-btn">Einordnung</button></li>
-          <li><button class="filter-btn">System</button></li>
-        </ul>
+    <!-- Kategorien -->
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[02] Kategorien</span>
+        </div>
+
+        <div class="col-12" data-reveal>
+          <div class="symptoms">
+            <article class="card stack-16" data-reveal>
+              <span class="meta accent">Diagnose</span>
+              <p class="body-text">
+                Benennt, was andere übersehen. Hier wird ein Problem benannt, nicht gelöst.
+              </p>
+            </article>
+
+            <article class="card stack-16" data-reveal data-reveal-delay="80">
+              <span class="meta accent">Einordnung</span>
+              <p class="body-text">
+                Erklärt, warum das Problem existiert — der Denkfehler dahinter, nicht die Handlungsanweisung.
+              </p>
+            </article>
+
+            <article class="card card-accent-border stack-16" data-reveal data-reveal-delay="160">
+              <span class="meta accent">System</span>
+              <p class="body-text">
+                Zeigt, wie sich das Problem strukturell lösen lässt. Die Logik, nicht das Produkt.
+              </p>
+            </article>
+          </div>
+        </div>
      </div>
    </section>

@ -125,7 +103,7 @@
    <section class="section">
      <div class="shell grid-12">
        <div class="col-12 stack-16" data-reveal>
-          <span class="meta">[02] Beiträge</span>
+          <span class="meta">[03] Beiträge</span>
        </div>

        <div class="col-12">
@ -139,7 +117,7 @@
              </div>
              <div class="col-12 md:col-9 stack-16">
                <h2 class="section-headline post-row-title" style="font-size: clamp(28px, 3.6vw, 44px);">
-                  Der Mythos der Agilität in starren Märkten.
+                  <a class="post-title-link" href="./denken-agilitaet.html">Der Mythos der Agilität in starren Märkten.</a>
                </h2>
                <p class="body-text max-prose">
                  Warum die blinde Übernahme von Start-up-Methoden in mittelständischen Industrieunternehmen oft zu strukturellem Chaos statt zu Innovation führt. Ein Plädoyer für prozessuale Stabilität als Fundament echten Fortschritts.
@ -154,7 +132,7 @@
              </div>
              <div class="col-12 md:col-9 stack-16">
                <h2 class="section-headline post-row-title" style="font-size: clamp(28px, 3.6vw, 44px);">
-                  Symptombekämpfung vs. Architektursanierung.
+                  <a class="post-title-link" href="./denken-architektursanierung.html">Symptombekämpfung vs. Architektursanierung.</a>
                </h2>
                <p class="body-text max-prose">
                  Marketingkampagnen lösen keine Identitätskrisen. Eine Analyse, wie Unternehmen Ressourcen verbrennen, weil sie kosmetische Korrekturen anstelle notwendiger struktureller Eingriffe vornehmen.
@ -169,7 +147,7 @@
              </div>
              <div class="col-12 md:col-9 stack-16">
                <h2 class="section-headline post-row-title" style="font-size: clamp(28px, 3.6vw, 44px);">
-                  Führung durch Reduktion.
+                  <a class="post-title-link" href="./denken-fuehrung-durch-reduktion.html">Führung durch Reduktion.</a>
                </h2>
                <p class="body-text max-prose">
                  Die größte Herausforderung moderner Unternehmensführung ist nicht das Hinzufügen neuer Initiativen, sondern das konsequente Eliminieren von Ablenkungen. Wie der Verzicht strategische Schlagkraft erzeugt.
@ -178,71 +156,60 @@
            </article>
          </div>

-          <!-- Editorial: Featured + Karten-Raster -->
+          <!-- Editorial: volle Breite als Karten (keine Bilder), Aufbau wie monolithisch -->
          <div class="blog-list-editorial">

-            <article class="post-card post-featured" data-reveal>
-              <div class="post-featured-visual" aria-hidden="true"></div>
-              <div class="post-featured-body">
-                <div>
-                  <span class="tag">System · Featured</span>
-                </div>
-                <h2 class="section-headline" style="font-size: clamp(26px, 3vw, 36px);">
-                  Der Mythos der Agilität in starren Märkten.
+            <article class="post-card post-card--row" data-reveal>
+              <div class="col-12 md:col-3 stack-8">
+                <span class="meta">System</span>
+                <span class="meta mute">01.03.2024</span>
+              </div>
+              <div class="col-12 md:col-9 stack-16">
+                <h2 class="section-headline post-row-title" style="font-size: clamp(28px, 3.6vw, 44px);">
+                  <a class="post-title-link" href="./denken-agilitaet.html">Der Mythos der Agilität in starren Märkten.</a>
                </h2>
-                <p class="body-text">
-                  Warum die blinde Übernahme von Start-up-Methoden in mittelständischen Industrieunternehmen oft zu strukturellem Chaos statt zu Innovation führt.
+                <p class="body-text max-prose">
+                  Warum die blinde Übernahme von Start-up-Methoden in mittelständischen Industrieunternehmen oft zu strukturellem Chaos statt zu Innovation führt. Ein Plädoyer für prozessuale Stabilität als Fundament echten Fortschritts.
                </p>
-                <div>
-                  <span class="meta mute">01.03.2024 · 6 min</span>
-                </div>
              </div>
            </article>

-            <article class="post-card post-small stack-16" data-reveal data-reveal-delay="80">
-              <span class="tag">Diagnose</span>
-              <h2 class="sub-headline">Symptombekämpfung vs. Architektursanierung.</h2>
-              <p class="body-text">
-                Marketingkampagnen lösen keine Identitätskrisen. Wie Unternehmen Ressourcen verbrennen, weil sie kosmetische Korrekturen anstelle notwendiger struktureller Eingriffe vornehmen.
-              </p>
-              <span class="meta mute" style="margin-top: auto;">15.02.2024 · 8 min</span>
+            <article class="post-card post-card--row" data-reveal data-reveal-delay="80">
+              <div class="col-12 md:col-3 stack-8">
+                <span class="meta">Diagnose</span>
+                <span class="meta mute">15.02.2024</span>
+              </div>
+              <div class="col-12 md:col-9 stack-16">
+                <h2 class="section-headline post-row-title" style="font-size: clamp(28px, 3.6vw, 44px);">
+                  <a class="post-title-link" href="./denken-architektursanierung.html">Symptombekämpfung vs. Architektursanierung.</a>
+                </h2>
+                <p class="body-text max-prose">
+                  Marketingkampagnen lösen keine Identitätskrisen. Eine Analyse, wie Unternehmen Ressourcen verbrennen, weil sie kosmetische Korrekturen anstelle notwendiger struktureller Eingriffe vornehmen.
+                </p>
+              </div>
            </article>

-            <article class="post-card post-small stack-16" data-reveal data-reveal-delay="160">
-              <span class="tag">Einordnung</span>
-              <h2 class="sub-headline">Führung durch Reduktion.</h2>
-              <p class="body-text">
-                Die größte Herausforderung moderner Unternehmensführung ist nicht das Hinzufügen neuer Initiativen, sondern das konsequente Eliminieren von Ablenkungen.
-              </p>
-              <span class="meta mute" style="margin-top: auto;">28.01.2024 · 5 min</span>
+            <article class="post-card post-card--row" data-reveal data-reveal-delay="160">
+              <div class="col-12 md:col-3 stack-8">
+                <span class="meta">Einordnung</span>
+                <span class="meta mute">28.01.2024</span>
+              </div>
+              <div class="col-12 md:col-9 stack-16">
+                <h2 class="section-headline post-row-title" style="font-size: clamp(28px, 3.6vw, 44px);">
+                  <a class="post-title-link" href="./denken-fuehrung-durch-reduktion.html">Führung durch Reduktion.</a>
+                </h2>
+                <p class="body-text max-prose">
+                  Die größte Herausforderung moderner Unternehmensführung ist nicht das Hinzufügen neuer Initiativen, sondern das konsequente Eliminieren von Ablenkungen. Wie der Verzicht strategische Schlagkraft erzeugt.
+                </p>
+              </div>
            </article>
          </div>

-          <div style="margin-top: 64px; padding-top: 32px; border-top: 1px solid rgb(var(--color-border));">
-            <button class="link-arrow" type="button">
-              <span class="material-symbols-outlined" aria-hidden="true">arrow_downward</span>
-              Mehr laden
-            </button>
-          </div>
-
        </div>
      </div>
    </section>
  </main>
-
-  <footer class="site-footer">
-    <div class="footer-inner">
-      <div class="footer-meta">
-        <p class="footer-copy">© MARKE MACHT · Denkraum für Unternehmer</p>
-        <p class="footer-note">Keine Cookies, kein Tracking.</p>
-      </div>
-      <div class="footer-links">
-        <a class="footer-link" href="#">Impressum</a>
-        <a class="footer-link" href="#">Datenschutz</a>
-        <a class="footer-link" href="#">Kontakt</a>
-      </div>
-    </div>
-  </footer>
+  <div data-site-footer></div>

  <script src="./assets/js/app.js" defer></script>
 </body>
--- a/_markemacht.de/dev/based_web_design/das_manifest/code.html
+++ b/_markemacht.de/dev/based_web_design/das_manifest/code.html
@ -1,231 +0,0 @@
-<!DOCTYPE html>
-
-<html class="dark" lang="de"><head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>MARKE MACHT - Das Manifest</title>
-<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&amp;family=Work+Sans:wght@400;500&amp;family=Space+Grotesk:wght@500&amp;family=Newsreader:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<script id="tailwind-config">
-        tailwind.config = {
-            darkMode: "class",
-            theme: {
-                extend: {
-                    "colors": {
-                        "error-container": "#93000a",
-                        "surface-dim": "#141313",
-                        "tertiary-fixed-dim": "#cac6c3",
-                        "on-secondary-fixed-variant": "#474747",
-                        "secondary-container": "#474747",
-                        "signal-primary": "#E8175D",
-                        "surface-base": "#0A0A0A",
-                        "on-primary-container": "#7b7979",
-                        "on-secondary-container": "#b6b5b4",
-                        "inverse-surface": "#e5e2e1",
-                        "surface-container-low": "#1c1b1b",
-                        "surface": "#141313",
-                        "primary-container": "#0a0a0a",
-                        "on-primary-fixed-variant": "#474646",
-                        "on-surface": "#e5e2e1",
-                        "on-primary": "#313030",
-                        "error": "#ffb4ab",
-                        "surface-tint": "#c9c6c5",
-                        "neutral-text-dim": "#A8A7A7",
-                        "tertiary-container": "#0b0a09",
-                        "inverse-on-surface": "#313030",
-                        "on-error": "#690005",
-                        "outline": "#8e9192",
-                        "inverse-primary": "#5f5e5e",
-                        "surface-container-highest": "#353434",
-                        "background": "#141313",
-                        "secondary-fixed": "#e4e2e1",
-                        "surface-bright": "#3a3939",
-                        "pure-white": "#FFFFFF",
-                        "outline-variant": "#444748",
-                        "on-background": "#e5e2e1",
-                        "surface-variant": "#353434",
-                        "surface-accent": "#474747",
-                        "tertiary": "#cac6c3",
-                        "surface-container": "#201f1f",
-                        "on-error-container": "#ffdad6",
-                        "on-secondary": "#303030",
-                        "on-tertiary-fixed": "#1d1b1a",
-                        "surface-container-lowest": "#0e0e0e",
-                        "on-tertiary": "#32302f",
-                        "surface-container-high": "#2b2a2a",
-                        "secondary-fixed-dim": "#c8c6c6",
-                        "surface-elevated": "#363636",
-                        "primary": "#c9c6c5",
-                        "primary-fixed": "#e5e2e1",
-                        "primary-fixed-dim": "#c9c6c5",
-                        "on-tertiary-container": "#7c7977",
-                        "tertiary-fixed": "#e6e1df",
-                        "signal-secondary": "#CC527A",
-                        "on-tertiary-fixed-variant": "#484645",
-                        "on-surface-variant": "#c4c7c7",
-                        "on-primary-fixed": "#1c1b1b",
-                        "on-secondary-fixed": "#1b1c1c",
-                        "secondary": "#c8c6c6"
-                    },
-                    "borderRadius": {
-                        "DEFAULT": "0.25rem",
-                        "lg": "0.5rem",
-                        "xl": "0.75rem",
-                        "full": "9999px"
-                    },
-                    "spacing": {
-                        "max-content-width": "1280px",
-                        "section-gap-mobile": "96px",
-                        "margin-horizontal": "8vw",
-                        "section-gap-desktop": "160px"
-                    },
-                    "fontFamily": {
-                        "body-primary": ["Work Sans", "sans-serif"],
-                        "meta-mono": ["Space Grotesk", "monospace"],
-                        "section-headline": ["Outfit", "sans-serif"],
-                        "manifest-editorial": ["Newsreader", "serif"],
-                        "hero-headline": ["Outfit", "sans-serif"]
-                    },
-                    "fontSize": {
-                        "body-primary": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
-                        "meta-mono": ["13px", { "lineHeight": "1.0", "letterSpacing": "0.08em", "fontWeight": "500" }],
-                        "section-headline": ["56px", { "lineHeight": "1.1", "letterSpacing": "-0.01em", "fontWeight": "500" }],
-                        "manifest-editorial": ["36px", { "lineHeight": "1.3", "fontWeight": "400" }],
-                        "hero-headline": ["96px", { "lineHeight": "1.05", "letterSpacing": "-0.02em", "fontWeight": "500" }]
-                    }
-                }
-            }
-        }
-    </script>
-<style>
-        .sharp-transition { transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
-    </style>
-</head>
-<body class="bg-surface-base text-on-surface antialiased overflow-x-hidden selection:bg-signal-primary selection:text-pure-white">
-<!-- TopNavBar -->
-<nav class="bg-[#0A0A0A] w-full top-0 z-50 docked full-width border-b-0 tonal-shift flat no-shadows relative">
-<div class="flex justify-between items-center w-full px-12 py-8 max-w-[1440px] mx-auto">
-<div class="flex items-center">
-<a class="text-xl font-black tracking-widest text-pure-white font-section-headline" href="#">MARKE MACHT</a>
-</div>
-<div class="hidden md:flex items-center space-x-12">
-<a class="font-section-headline uppercase tracking-tighter text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150 sharp-transition" href="#">Start</a>
-<a class="font-section-headline uppercase tracking-tighter text-[#E8175D] font-bold hover:text-[#E8175D] transition-colors duration-150 sharp-transition" href="#">Manifest</a>
-<a class="font-section-headline uppercase tracking-tighter text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150 sharp-transition" href="#">Methode</a>
-<a class="font-section-headline uppercase tracking-tighter text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150 sharp-transition" href="#">Denken</a>
-</div>
-<div class="flex items-center">
-<a class="font-meta-mono text-meta-mono text-[#E8175D] hover:text-white sharp-transition border-b border-[#E8175D] hover:border-white pb-1" href="#">Audit anfragen</a>
-</div>
-</div>
-</nav>
-<main class="max-w-[1440px] mx-auto pb-32">
-<!-- Hero Section -->
-<section class="px-margin-horizontal pt-24 pb-section-gap-mobile md:pb-section-gap-desktop relative grid grid-cols-12 gap-8">
-<div class="col-span-12 md:col-span-10 md:col-start-2">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim block mb-8">[00] DAS MANIFEST</span>
-<h1 class="font-hero-headline text-hero-headline text-pure-white w-full max-w-4xl">Warum Marke kein Marketingthema ist.</h1>
-</div>
-</section>
-<!-- Einleitung / Monolith Keyvisual -->
-<section class="px-margin-horizontal pb-section-gap-mobile md:pb-section-gap-desktop grid grid-cols-12 gap-8 items-start">
-<div class="col-span-12 md:col-span-6 relative aspect-square md:aspect-[3/4] bg-surface-elevated">
-<!-- Monolith Keyvisual -->
-<img alt="Detailaufnahme einer Monolithen-Kante (Beton/Stein) mit hartem Lichtschatten." class="w-full h-full object-cover filter grayscale contrast-125 brightness-75" data-alt="Close-up of a raw concrete or stone edge, harsh directional lighting, deep shadows, brutalist architecture fragment, minimalist, monochrome texture" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBij5XlgfaucGzaadBtRrWvHR8CICjj0ajErInyzMjiulVZNf4na9FWMAoi5Z2grhkVw3MDT7KnOXtqAk9uyjf5Eu2o7U3ZR7e0XnkrMq1khPy5WcVaI9MZA9bdt4qpr4URz1wWjYSme1X5RSuYc-O5NENepzF_3VCHR4AUHr61DRo8pd-d0x9KBbpD9431Cy4u_-ADWUBeuRz0Ke4YRhQPI0y1u91Fmk8lQ9y1VkDBrYCElb4seEXQlV74lCQ5-L-D0R6hSqpkGb4"/>
-<div class="absolute inset-0 bg-surface-base mix-blend-multiply opacity-40"></div>
-</div>
-<div class="col-span-12 md:col-span-5 md:col-start-8 pt-12 md:pt-0">
-<div class="pl-0 md:pl-8 border-l-0 md:border-l-4 border-surface-elevated">
-<p class="font-manifest-editorial text-manifest-editorial text-on-surface mb-8">
-                        In den meisten Unternehmen wird 'Marke' als eine Disziplin der Kommunikation verstanden. Ein Logo, ein Slogan, eine Kampagne. Das ist ein fataler Irrtum, der tiefgreifende strukturelle Schwächen maskiert.
-                    </p>
-<p class="font-body-primary text-body-primary text-neutral-text-dim">
-                        Wenn Marke lediglich als kosmetische Hülle für das Marketing operiert, verliert sie ihre eigentliche Funktion: Orientierung zu geben. Für Mitarbeiter, für Kunden, für den Markt. Eine echte Marke ist ein Management-Instrument. Sie definiert die DNA, an der sich jede Entscheidung, jedes Produkt und jede Handlung messen lassen muss. Sie ist das Fundament, nicht der Anstrich.
-                    </p>
-</div>
-</div>
-</section>
-<!-- Zentralthese Zitat -->
-<section class="px-margin-horizontal py-section-gap-mobile md:py-32 bg-surface-elevated mb-section-gap-mobile md:mb-section-gap-desktop">
-<div class="grid grid-cols-12 gap-8">
-<div class="col-span-12 md:col-span-10 md:col-start-2">
-<blockquote class="font-manifest-editorial text-manifest-editorial md:text-[48px] md:leading-[1.2] text-pure-white">
-                        "Marke ist nicht Design. Marke ist nicht Marketing. Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären."
-                    </blockquote>
-</div>
-</div>
-</section>
-<!-- Was das konkret bedeutet (Bento-ish Editorial) -->
-<section class="px-margin-horizontal pb-section-gap-mobile md:pb-section-gap-desktop">
-<div class="grid grid-cols-12 gap-8 mb-24">
-<div class="col-span-12 md:col-span-6">
-<h2 class="font-section-headline text-section-headline text-pure-white">Was das konkret bedeutet</h2>
-</div>
-</div>
-<div class="grid grid-cols-12 gap-x-8 gap-y-32">
-<!-- [01] Erklärbarkeit -->
-<div class="col-span-12 md:col-span-5 relative">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim absolute -top-8 left-0">[01]</span>
-<h3 class="font-section-headline text-[32px] leading-tight text-pure-white mb-6">Erklärbarkeit</h3>
-<p class="font-body-primary text-body-primary text-neutral-text-dim">
-                        Ein Unternehmen, das nicht in drei klaren Sätzen artikulieren kann, warum es existiert und für wen es unverzichtbar ist, leidet nicht an einem Kommunikationsproblem. Es leidet an einem Strategieproblem. Die Marke erzwingt diese Reduktion auf das Wesentliche.
-                    </p>
-</div>
-<!-- [02] Konsistenz -->
-<div class="col-span-12 md:col-span-5 md:col-start-7 relative">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim absolute -top-8 left-0">[02]</span>
-<h3 class="font-section-headline text-[32px] leading-tight text-pure-white mb-6">Konsistenz</h3>
-<p class="font-body-primary text-body-primary text-neutral-text-dim">
-                        Konsistenz bedeutet nicht, überall das gleiche Logo zu platzieren. Es bedeutet, dass das Verhalten des Unternehmens, die Produktqualität, der Service und die Kommunikation einer gemeinsamen, unerschütterlichen Logik folgen. Abweichungen werden als Brüche wahrgenommen.
-                    </p>
-</div>
-<!-- [03] Unabhängigkeit -->
-<div class="col-span-12 md:col-span-5 relative">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim absolute -top-8 left-0">[03]</span>
-<h3 class="font-section-headline text-[32px] leading-tight text-pure-white mb-6">Unabhängigkeit</h3>
-<p class="font-body-primary text-body-primary text-neutral-text-dim">
-                        Eine starke, strukturell verankerte Marke macht ein Unternehmen unabhängig von kurzfristigen Markttrends und Marketing-Gimmicks. Sie schafft einen eigenen Gravitationsbereich, der Kunden anzieht, anstatt ihnen hinterherjagen zu müssen.
-                    </p>
-</div>
-<!-- [04] Vererbbarkeit -->
-<div class="col-span-12 md:col-span-5 md:col-start-7 relative">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim absolute -top-8 left-0">[04]</span>
-<h3 class="font-section-headline text-[32px] leading-tight text-pure-white mb-6">Vererbbarkeit</h3>
-<p class="font-body-primary text-body-primary text-neutral-text-dim">
-                        Wissen, Prozesse und Kultur müssen skalierbar sein. Eine sauber definierte Marke funktioniert wie ein Betriebssystem, das neue Mitarbeiter sofort verstehen und anwenden können. Sie sichert die Identität über Generationen von Produkten und Mitarbeitern hinweg.
-                    </p>
-</div>
-</div>
-</section>
-<!-- Abschluss CTA -->
-<section class="px-margin-horizontal pt-16">
-<div class="grid grid-cols-12 gap-8">
-<div class="col-span-12 md:col-span-8 bg-surface-elevated p-12 md:p-16">
-<h2 class="font-manifest-editorial text-manifest-editorial text-pure-white mb-12">Wenn Marke ein Strukturproblem ist, braucht es eine Methode, um sie zu bauen.</h2>
-<a class="inline-flex items-center font-meta-mono text-meta-mono text-signal-primary hover:text-pure-white sharp-transition border-b border-signal-primary hover:border-pure-white pb-2" href="#">
-<span class="mr-4">Die Methode verstehen</span>
-<span class="material-symbols-outlined text-lg">arrow_forward</span>
-</a>
-</div>
-</div>
-</section>
-</main>
-<!-- Footer -->
-<footer class="bg-[#0A0A0A] full-width border-t border-stone-900 flat w-full">
-<div class="grid grid-cols-12 px-12 py-16 w-full max-w-[1440px] mx-auto gap-8">
-<div class="col-span-12 md:col-span-6 flex flex-col justify-between">
-<!-- style_brand_logo: "hidden" - so omitting visual logo, keeping text copyright -->
-<p class="font-sans text-sm tracking-tight text-stone-600">
-                    © MARKE MACHT. DENKRAUM FÜR UNTERNEHMER.
-                </p>
-</div>
-<div class="col-span-12 md:col-span-6 flex justify-start md:justify-end items-end space-x-8">
-<a class="font-sans text-sm tracking-tight text-stone-600 hover:text-[#E8175D] transition-colors" href="#">Impressum</a>
-<a class="font-sans text-sm tracking-tight text-stone-600 hover:text-[#E8175D] transition-colors" href="#">Datenschutz</a>
-<a class="font-sans text-sm tracking-tight text-stone-600 hover:text-[#E8175D] transition-colors" href="#">Kontakt</a>
-</div>
-</div>
-</footer>
-</body></html>
--- a/_markemacht.de/dev/based_web_design/das_manifest/screen.png
+++ b/_markemacht.de/dev/based_web_design/das_manifest/screen.png
--- a/_markemacht.de/dev/based_web_design/das_manifest_warm/code.html
+++ b/_markemacht.de/dev/based_web_design/das_manifest_warm/code.html
@ -1,228 +0,0 @@
-<!DOCTYPE html>
-
-<html class="light" lang="de"><head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>Das Manifest | markemacht.de</title>
-<!-- Fonts -->
-<link href="https://fonts.googleapis.com" rel="preconnect"/>
-<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;family=Space+Grotesk:wght@500&amp;display=swap" rel="stylesheet"/>
-<!-- Material Symbols -->
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<!-- Tailwind Config -->
-<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-<script id="tailwind-config">
-        tailwind.config = {
-            darkMode: "class",
-            theme: {
-                extend: {
-                    "colors": {
-                        "on-tertiary-fixed-variant": "#7a2f15",
-                        "surface-bright": "#fbfaf2",
-                        "on-error-container": "#93000a",
-                        "on-secondary-fixed-variant": "#910035",
-                        "tertiary-container": "#390b00",
-                        "surface-container": "#efeee6",
-                        "primary-fixed-dim": "#c8c6c5",
-                        "on-surface-variant": "#444748",
-                        "tertiary": "#000000",
-                        "tertiary-fixed-dim": "#ffb59e",
-                        "on-tertiary": "#ffffff",
-                        "error": "#ba1a1a",
-                        "outline": "#747878",
-                        "on-secondary-fixed": "#400013",
-                        "primary-container": "#1c1b1b",
-                        "surface": "#fbfaf2",
-                        "surface-dim": "#dbdad3",
-                        "surface-container-low": "#f5f4ec",
-                        "primary": "#000000",
-                        "secondary": "#b80046",
-                        "on-primary-fixed-variant": "#474746",
-                        "background": "#fbfaf2",
-                        "secondary-fixed-dim": "#ffb2bc",
-                        "on-primary-fixed": "#1c1b1b",
-                        "on-background": "#1b1c17",
-                        "on-primary-container": "#858383",
-                        "tertiary-fixed": "#ffdbd0",
-                        "inverse-primary": "#c8c6c5",
-                        "on-primary": "#ffffff",
-                        "surface-variant": "#e3e3db",
-                        "surface-container-high": "#e9e8e1",
-                        "inverse-surface": "#30312c",
-                        "outline-variant": "#c4c7c7",
-                        "on-surface": "#1b1c17",
-                        "on-error": "#ffffff",
-                        "surface-container-lowest": "#ffffff",
-                        "primary-fixed": "#e5e2e1",
-                        "secondary-container": "#e4115a",
-                        "inverse-on-surface": "#f2f1e9",
-                        "on-tertiary-fixed": "#390b00",
-                        "surface-tint": "#5f5e5e",
-                        "on-tertiary-container": "#c8694b",
-                        "error-container": "#ffdad6",
-                        "on-secondary-container": "#fffbff",
-                        "surface-container-highest": "#e3e3db",
-                        "secondary-fixed": "#ffd9dd",
-                        "on-secondary": "#ffffff"
-                    },
-                    "borderRadius": {
-                        "DEFAULT": "0.25rem",
-                        "lg": "0.5rem",
-                        "xl": "0.75rem",
-                        "full": "9999px"
-                    },
-                    "spacing": {
-                        "margin": "32px",
-                        "gutter": "24px",
-                        "sm": "16px",
-                        "base": "4px",
-                        "lg": "48px",
-                        "xl": "80px",
-                        "md": "24px",
-                        "xs": "8px"
-                    },
-                    "fontFamily": {
-                        "body-editorial": ["Noto Serif"],
-                        "accent-label": ["Space Grotesk"],
-                        "h1": ["Plus Jakarta Sans"],
-                        "h3": ["Plus Jakarta Sans"],
-                        "h2": ["Plus Jakarta Sans"],
-                        "body-ui": ["Plus Jakarta Sans"]
-                    },
-                    "fontSize": {
-                        "body-editorial": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
-                        "accent-label": ["13px", {"lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "500"}],
-                        "h1": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "600"}],
-                        "h3": ["24px", {"lineHeight": "1.3", "fontWeight": "500"}],
-                        "h2": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}],
-                        "body-ui": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}]
-                    }
-                }
-            }
-        }
-    </script>
-<style>
-        .material-symbols-outlined {
-            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-        }
-    </style>
-</head>
-<body class="bg-background text-on-background min-h-screen flex flex-col font-['Plus_Jakarta_Sans']">
-<!-- TopNavBar Component -->
-<header class="bg-[#F9F8F0] dark:bg-stone-950 docked full-width top-0 border-b border-b border-[#E6E1D3] dark:border-stone-800 flat no shadows z-50 sticky">
-<div class="flex justify-between items-center w-full px-8 py-4 max-w-[1280px] mx-auto">
-<!-- Brand Logo -->
-<a class="text-xl font-bold text-[#191919] dark:text-stone-50 active:scale-95 transition-transform" href="#">
-                markemacht.de
-            </a>
-<!-- Navigation Links (Desktop) -->
-<nav class="hidden md:flex items-center gap-8 font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight">
-<a class="text-[#191919] dark:text-stone-400 opacity-80 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Start</a>
-<!-- Active Navigation: Manifest -->
-<a class="text-[#E8175D] border-b-2 border-[#E8175D] pb-1 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Manifest</a>
-<a class="text-[#191919] dark:text-stone-400 opacity-80 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Methode</a>
-<a class="text-[#191919] dark:text-stone-400 opacity-80 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Denken</a>
-</nav>
-<!-- Trailing Action -->
-<div class="flex items-center">
-<a class="bg-primary text-on-primary px-4 py-2 rounded font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight hover:bg-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">
-                    Audit anfragen
-                </a>
-</div>
-</div>
-</header>
-<!-- Main Content -->
-<main class="flex-grow w-full max-w-[1280px] mx-auto px-margin py-xl flex flex-col gap-xl">
-<!-- Hero Section -->
-<section class="max-w-4xl pt-lg">
-<h1 class="font-h1 text-h1 text-primary mb-gutter">Das Manifest</h1>
-<p class="font-body-ui text-body-ui text-on-surface-variant max-w-2xl">
-                Wir glauben an die Kraft der Reduktion. In einer lauten, komplexen Welt ist Klarheit das wertvollste Asset einer Marke. Dies sind unsere vier Grundpfeiler für den Aufbau von Marken, die bleiben.
-            </p>
-</section>
-<!-- Central Quote (Editorial Block) -->
-<section class="w-full max-w-[720px] mx-auto py-lg">
-<div class="relative py-xl px-margin flex flex-col items-center text-center">
-<span class="material-symbols-outlined text-outline-variant text-4xl mb-sm" data-icon="format_quote">format_quote</span>
-<p class="font-body-editorial text-body-editorial text-primary italic">
-                    "Marken entstehen nicht durch das Hinzufügen von Ebenen, sondern durch das konsequente Weglassen des Unwesentlichen. Wahre Identität ist das, was übrig bleibt, wenn man alles Rauschen entfernt."
-                </p>
-<div class="w-12 h-[1px] bg-outline-variant mt-gutter"></div>
-</div>
-</section>
-<!-- Structured Cards Grid [01]-[04] -->
-<section class="grid grid-cols-1 md:grid-cols-2 gap-gutter pb-xl">
-<!-- Card 01 -->
-<article class="bg-surface-container-lowest rounded-xl p-lg border border-surface-variant flex flex-col gap-gutter" style="box-shadow: 0 4px 20px rgba(0,0,0,0.04);">
-<header>
-<span class="font-accent-label text-accent-label text-secondary block mb-sm">[01]</span>
-<h3 class="font-h3 text-h3 text-primary">Substanz vor Oberfläche</h3>
-</header>
-<p class="font-body-ui text-body-ui text-on-surface-variant">
-                    Design ohne strategisches Fundament ist lediglich Dekoration. Wir beginnen immer am Kern: Welches Problem lösen wir? Welchen echten Wert schaffen wir? Erst wenn die Substanz unumstößlich definiert ist, formen wir die visuelle und verbale Oberfläche.
-                </p>
-</article>
-<!-- Card 02 -->
-<article class="bg-surface-container-lowest rounded-xl p-lg border border-surface-variant flex flex-col gap-gutter" style="box-shadow: 0 4px 20px rgba(0,0,0,0.04);">
-<header>
-<span class="font-accent-label text-accent-label text-secondary block mb-sm">[02]</span>
-<h3 class="font-h3 text-h3 text-primary">Klarheit durch Reduktion</h3>
-</header>
-<p class="font-body-ui text-body-ui text-on-surface-variant">
-                    Komplexität ist der Feind der Kommunikation. Wir destillieren komplexe Geschäftsmodelle in einfache, kraftvolle Botschaften. Das Ziel ist nicht, alles zu sagen, was man weiß, sondern genau das, was der Empfänger verstehen muss.
-                </p>
-</article>
-<!-- Card 03 -->
-<article class="bg-surface-container-lowest rounded-xl p-lg border border-surface-variant flex flex-col gap-gutter" style="box-shadow: 0 4px 20px rgba(0,0,0,0.04);">
-<header>
-<span class="font-accent-label text-accent-label text-secondary block mb-sm">[03]</span>
-<h3 class="font-h3 text-h3 text-primary">Empathie als System</h3>
-</header>
-<p class="font-body-ui text-body-ui text-on-surface-variant">
-                    Erfolgreiche Marken sind tief im menschlichen Verhalten verwurzelt. Wir entwerfen nicht für Zielgruppen, sondern für Menschen. Jede Interaktion, jeder Berührungspunkt wird daraufhin geprüft, ob er echte Resonanz und Verständnis erzeugt.
-                </p>
-</article>
-<!-- Card 04 -->
-<article class="bg-surface-container-lowest rounded-xl p-lg border border-surface-variant flex flex-col gap-gutter" style="box-shadow: 0 4px 20px rgba(0,0,0,0.04);">
-<header>
-<span class="font-accent-label text-accent-label text-secondary block mb-sm">[04]</span>
-<h3 class="font-h3 text-h3 text-primary">Langlebigkeit statt Trend</h3>
-</header>
-<p class="font-body-ui text-body-ui text-on-surface-variant">
-                    Wir weigern uns, kurzlebigen Hypes hinterherzujagen. Eine starke Marke ist eine Investition, die über Jahre hinweg Rendite abwerfen muss. Unsere Gestaltungsprinzipien basieren auf zeitloser Ästhetik und funktionaler Robustheit, die auch morgen noch Bestand hat.
-                </p>
-</article>
-</section>
-</main>
-<!-- Footer Component -->
-<footer class="bg-[#F9F8F0] dark:bg-stone-950 docked full-width border-t border-t border-[#E6E1D3] dark:border-stone-800 flat no shadows mt-auto">
-<div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full px-8 py-12 max-w-[1280px] mx-auto">
-<!-- Brand & Copyright -->
-<div class="flex flex-col gap-sm">
-<span class="text-lg font-black text-[#191919] dark:text-stone-50 opacity-100 hover:opacity-80 transition-opacity font-['Plus_Jakarta_Sans']">
-                    markemacht.de
-                </span>
-<p class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 dark:text-stone-500">
-                    © 2024 markemacht.de. Alle Rechte vorbehalten.
-                </p>
-</div>
-<!-- Links -->
-<div class="flex flex-wrap gap-x-8 gap-y-4 md:justify-end items-center">
-<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80 transition-opacity" href="#">
-                    Impressum
-                </a>
-<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80 transition-opacity" href="#">
-                    Datenschutz
-                </a>
-<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80 transition-opacity" href="#">
-                    Kontakt
-                </a>
-<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80 transition-opacity" href="#">
-                    LinkedIn
-                </a>
-</div>
-</div>
-</footer>
-</body></html>
--- a/_markemacht.de/dev/based_web_design/das_manifest_warm/screen.png
+++ b/_markemacht.de/dev/based_web_design/das_manifest_warm/screen.png
--- a/_markemacht.de/dev/based_web_design/denken_blog/code.html
+++ b/_markemacht.de/dev/based_web_design/denken_blog/code.html
@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html class="dark" lang="de"><head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>Denken - MARKE MACHT</title>
-<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-<link href="https://fonts.googleapis.com" rel="preconnect"/>
-<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
-<link href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400&amp;family=Outfit:wght@500;900&amp;family=Space+Grotesk:wght@500&amp;family=Work+Sans:wght@400&amp;display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<style>
-        .material-symbols-outlined {
-            font-variation-settings:
-            'FILL' 0,
-            'wght' 400,
-            'GRAD' 0,
-            'opsz' 24
-        }
-    </style>
-<script id="tailwind-config">
-        tailwind.config = {
-            darkMode: "class",
-            theme: {
-                extend: {
-                    "colors": {
-                        "error-container": "#93000a",
-                        "surface-dim": "#141313",
-                        "tertiary-fixed-dim": "#cac6c3",
-                        "on-secondary-fixed-variant": "#474747",
-                        "secondary-container": "#474747",
-                        "signal-primary": "#E8175D",
-                        "surface-base": "#0A0A0A",
-                        "on-primary-container": "#7b7979",
-                        "on-secondary-container": "#b6b5b4",
-                        "inverse-surface": "#e5e2e1",
-                        "surface-container-low": "#1c1b1b",
-                        "surface": "#141313",
-                        "primary-container": "#0a0a0a",
-                        "on-primary-fixed-variant": "#474646",
-                        "on-surface": "#e5e2e1",
-                        "on-primary": "#313030",
-                        "error": "#ffb4ab",
-                        "surface-tint": "#c9c6c5",
-                        "neutral-text-dim": "#A8A7A7",
-                        "tertiary-container": "#0b0a09",
-                        "inverse-on-surface": "#313030",
-                        "on-error": "#690005",
-                        "outline": "#8e9192",
-                        "inverse-primary": "#5f5e5e",
-                        "surface-container-highest": "#353434",
-                        "background": "#141313",
-                        "secondary-fixed": "#e4e2e1",
-                        "surface-bright": "#3a3939",
-                        "pure-white": "#FFFFFF",
-                        "outline-variant": "#444748",
-                        "on-background": "#e5e2e1",
-                        "surface-variant": "#353434",
-                        "surface-accent": "#474747",
-                        "tertiary": "#cac6c3",
-                        "surface-container": "#201f1f",
-                        "on-error-container": "#ffdad6",
-                        "on-secondary": "#303030",
-                        "on-tertiary-fixed": "#1d1b1a",
-                        "surface-container-lowest": "#0e0e0e",
-                        "on-tertiary": "#32302f",
-                        "surface-container-high": "#2b2a2a",
-                        "secondary-fixed-dim": "#c8c6c6",
-                        "surface-elevated": "#363636",
-                        "primary": "#c9c6c5",
-                        "primary-fixed": "#e5e2e1",
-                        "primary-fixed-dim": "#c9c6c5",
-                        "on-tertiary-container": "#7c7977",
-                        "tertiary-fixed": "#e6e1df",
-                        "signal-secondary": "#CC527A",
-                        "on-tertiary-fixed-variant": "#484645",
-                        "on-surface-variant": "#c4c7c7",
-                        "on-primary-fixed": "#1c1b1b",
-                        "on-secondary-fixed": "#1b1c1c",
-                        "secondary": "#c8c6c6"
-                    },
-                    "borderRadius": {
-                        "DEFAULT": "0.25rem",
-                        "lg": "0.5rem",
-                        "xl": "0.75rem",
-                        "full": "9999px"
-                    },
-                    "spacing": {
-                        "max-content-width": "1280px",
-                        "section-gap-mobile": "96px",
-                        "margin-horizontal": "8vw",
-                        "section-gap-desktop": "160px"
-                    },
-                    "fontFamily": {
-                        "body-primary": ["Work Sans", "sans-serif"],
-                        "meta-mono": ["Space Grotesk", "monospace"],
-                        "section-headline": ["Outfit", "sans-serif"],
-                        "manifest-editorial": ["Newsreader", "serif"],
-                        "hero-headline": ["Outfit", "sans-serif"]
-                    },
-                    "fontSize": {
-                        "body-primary": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
-                        "meta-mono": ["13px", {"lineHeight": "1.0", "letterSpacing": "0.08em", "fontWeight": "500"}],
-                        "section-headline": ["56px", {"lineHeight": "1.1", "letterSpacing": "-0.01em", "fontWeight": "500"}],
-                        "manifest-editorial": ["36px", {"lineHeight": "1.3", "fontWeight": "400"}],
-                        "hero-headline": ["96px", {"lineHeight": "1.05", "letterSpacing": "-0.02em", "fontWeight": "500"}]
-                    }
-                }
-            }
-        }
-    </script>
-</head>
-<body class="bg-[#0A0A0A] text-on-surface antialiased overflow-x-hidden selection:bg-signal-primary selection:text-pure-white">
-<!-- TopNavBar -->
-<header class="fixed z-50 docked full-width top-0 border-b-0 tonal-shift bg-[#0A0A0A] flat no-shadows w-full">
-<div class="flex justify-between items-center w-full px-12 py-8 max-w-[1440px] mx-auto">
-<a class="text-xl font-black tracking-widest text-white font-hero-headline" href="#">MARKE MACHT</a>
-<nav class="hidden md:flex gap-8 items-center Headlines: font-outfit uppercase tracking-tighter. Meta: font-mono text-xs.">
-<a class="text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150 font-section-headline text-sm uppercase tracking-tighter" href="#">Start</a>
-<a class="text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150 font-section-headline text-sm uppercase tracking-tighter" href="#">Manifest</a>
-<a class="text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150 font-section-headline text-sm uppercase tracking-tighter" href="#">Methode</a>
-<a class="text-[#E8175D] font-bold hover:text-[#E8175D] transition-colors duration-150 font-section-headline text-sm uppercase tracking-tighter" href="#">Denken</a>
-</nav>
-<a class="hidden md:block text-[#E8175D] font-meta-mono text-meta-mono uppercase border border-[#E8175D] px-6 py-3 hover:bg-[#E8175D] hover:text-pure-white transition-colors duration-150 sharp-transition" href="#">
-                Audit anfragen
-            </a>
-<!-- Mobile Menu Toggle (Visual only) -->
-<button aria-label="Menu" class="md:hidden text-white">
-<span class="material-symbols-outlined" data-icon="menu">menu</span>
-</button>
-</div>
-</header>
-<main class="pt-32 pb-section-gap-desktop px-margin-horizontal max-w-max-content-width mx-auto">
-<!-- Hero Section -->
-<section class="grid grid-cols-12 gap-6 mb-32 relative">
-<div class="col-span-12 md:col-span-1 absolute -top-8 left-0">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim">[01]</span>
-</div>
-<div class="col-span-12 md:col-span-8 md:col-start-2">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim uppercase mb-6 block">Blog</span>
-<h1 class="font-hero-headline text-hero-headline text-pure-white mb-12">Denken.</h1>
-<div class="w-full md:w-3/4">
-<p class="font-manifest-editorial text-manifest-editorial text-on-surface-variant">
-                        Ein Denkraum für Klarheit in komplexen Strukturen. Wir sezieren Architektur, Identität und Führung, um das Wesentliche freizulegen. Kein Rauschen. Nur Substanz.
-                    </p>
-</div>
-</div>
-</section>
-<!-- Filter Bar -->
-<section class="grid grid-cols-12 gap-6 mb-24 border-b border-surface-elevated pb-6 sticky top-24 z-40 bg-[#0A0A0A] bg-opacity-95 backdrop-blur-sm">
-<div class="col-span-12 md:col-span-10 md:col-start-2">
-<ul class="flex flex-wrap gap-8 font-meta-mono text-meta-mono">
-<li><button class="text-signal-primary font-bold uppercase tracking-widest relative after:content-[''] after:absolute after:-bottom-7 after:left-0 after:w-full after:h-0.5 after:bg-signal-primary">Alle</button></li>
-<li><button class="text-neutral-text-dim hover:text-on-surface transition-colors uppercase tracking-widest">Diagnose</button></li>
-<li><button class="text-neutral-text-dim hover:text-on-surface transition-colors uppercase tracking-widest">Einordnung</button></li>
-<li><button class="text-neutral-text-dim hover:text-on-surface transition-colors uppercase tracking-widest">System</button></li>
-</ul>
-</div>
-</section>
-<!-- Article List -->
-<section class="grid grid-cols-12 gap-6">
-<div class="col-span-12 md:col-span-1 absolute -mt-2">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim">[02]</span>
-</div>
-<div class="col-span-12 md:col-span-10 md:col-start-2 flex flex-col gap-32">
-<!-- Article 1 -->
-<article class="group cursor-pointer">
-<div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
-<div class="md:col-span-3 flex flex-col justify-between h-full">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim uppercase tracking-widest block mb-4 md:mb-0">System</span>
-<span class="font-meta-mono text-meta-mono text-surface-accent hidden md:block">01.03.2024</span>
-</div>
-<div class="md:col-span-9">
-<h2 class="font-section-headline text-section-headline text-pure-white mb-6 group-hover:text-signal-primary transition-colors duration-200">Der Mythos der Agilität in starren Märkten.</h2>
-<p class="font-body-primary text-body-primary text-on-surface-variant w-full md:w-5/6">
-                                Warum die blinde Übernahme von Start-up-Methoden in mittelständischen Industrieunternehmen oft zu strukturellem Chaos statt zu Innovation führt. Ein Plädoyer für prozessuale Stabilität als Fundament echten Fortschritts.
-                            </p>
-</div>
-</div>
-</article>
-<!-- Article 2 -->
-<article class="group cursor-pointer">
-<div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
-<div class="md:col-span-3 flex flex-col justify-between h-full">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim uppercase tracking-widest block mb-4 md:mb-0">Diagnose</span>
-<span class="font-meta-mono text-meta-mono text-surface-accent hidden md:block">15.02.2024</span>
-</div>
-<div class="md:col-span-9">
-<h2 class="font-section-headline text-section-headline text-pure-white mb-6 group-hover:text-signal-primary transition-colors duration-200">Symptombekämpfung vs. Architektursanierung.</h2>
-<p class="font-body-primary text-body-primary text-on-surface-variant w-full md:w-5/6">
-                                Marketingkampagnen lösen keine Identitätskrisen. Eine Analyse, wie Unternehmen Ressourcen verbrennen, weil sie kosmetische Korrekturen anstelle notwendiger struktureller Eingriffe vornehmen.
-                            </p>
-</div>
-</div>
-</article>
-<!-- Article 3 -->
-<article class="group cursor-pointer">
-<div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
-<div class="md:col-span-3 flex flex-col justify-between h-full">
-<span class="font-meta-mono text-meta-mono text-neutral-text-dim uppercase tracking-widest block mb-4 md:mb-0">Einordnung</span>
-<span class="font-meta-mono text-meta-mono text-surface-accent hidden md:block">28.01.2024</span>
-</div>
-<div class="md:col-span-9">
-<h2 class="font-section-headline text-section-headline text-pure-white mb-6 group-hover:text-signal-primary transition-colors duration-200">Führung durch Reduktion.</h2>
-<p class="font-body-primary text-body-primary text-on-surface-variant w-full md:w-5/6">
-                                Die größte Herausforderung moderner Unternehmensführung ist nicht das Hinzufügen neuer Initiativen, sondern das konsequente Eliminieren von Ablenkungen. Wie der Verzicht strategische Schlagkraft erzeugt.
-                            </p>
-</div>
-</div>
-</article>
-<!-- Load More Action -->
-<div class="mt-16 pt-16 border-t border-surface-elevated">
-<button class="font-meta-mono text-meta-mono uppercase tracking-widest text-pure-white hover:text-signal-primary transition-colors flex items-center gap-4">
-<span class="material-symbols-outlined text-xl" data-icon="arrow_downward">arrow_downward</span>
-                        Mehr laden
-                    </button>
-</div>
-</div>
-</section>
-</main>
-<!-- Footer -->
-<footer class="full-width border-t border-stone-800 bg-[#0A0A0A] text-[#E8175D] font-sans text-sm tracking-tight border-t border-stone-900 flat">
-<div class="grid grid-cols-12 px-12 py-16 w-full max-w-[1440px] mx-auto">
-<div class="col-span-12 md:col-span-6 mb-8 md:mb-0">
-<p class="text-stone-600">© MARKE MACHT. DENKRAUM FÜR UNTERNEHMER.</p>
-</div>
-<div class="col-span-12 md:col-span-6 flex flex-wrap md:justify-end gap-8">
-<a class="text-stone-600 hover:text-[#E8175D]" href="#">Impressum</a>
-<a class="text-stone-600 hover:text-[#E8175D]" href="#">Datenschutz</a>
-<a class="text-stone-600 hover:text-[#E8175D]" href="#">Kontakt</a>
-</div>
-</div>
-</footer>
-</body></html>
--- a/Show more
+++ b/Show more